Vue Js Password Show Hide

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div id="app">
        <div class="input-group">
            <input :type="showPassword ? 'text' : 'password'" v-model="password" placeholder="Enter your password">
            <i class="icon " :class="showPassword ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'"
                @click="showPassword = !showPassword"></i>
        </div>
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    password: '',
                    showPassword: false
                };
            }
        });

app.mount("#app");
    </script>
    <style>
        .input-group {
            position: relative;
            width: 300px;
            margin: 20px auto;
        }

input {
            width: calc(100% - 60px);
            padding: 10px 40px 10px 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s ease;
        }

input:focus {
            border-color: #66afe9;
        }

.icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #666;
            transition: color 0.3s ease;
            margin-right: 10px;
        }

.icon:hover {
            color: #333;
        }
    </style>
</body>

</html>