Vue Js Password Validation

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Password Validation </h3>
     <p>create Passowrd</p>
    <div id="app">
        <input type="password" v-model="password" @blur="validatePassword" />
        <pre v-if='password'>Password Length {{password.length}}</pre>
        <p v-if="errors.length" style="color:red">{{ errors[0] }}</p>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    password: "",
                    errors: []
                };
            },
            methods: {
                validatePassword() {
                    this.errors = [];
                    if (!this.password) {
                        this.errors.push("Password is required");
                    } else if (this.password.length < 8) {
                        this.errors.push("Password must be at least 8 characters long");
                    } else if (!/\d/.test(this.password)) {
                        this.errors.push("Password must contain at least one number");
                    } else if (!/[a-z]/.test(this.password)) {
                        this.errors.push("Password must contain at least one lowercase letter");
                    } else if (!/[A-Z]/.test(this.password)) {
                        this.errors.push("Password must contain at least one uppercase letter");
                    } else if (!/[!@#$%^&*()_+\-.{}[\]~]/.test(this.password)) {
                        this.errors.push("Password must contain at least one symbol (!@#$%^&*()_+-.[]~)");
                    }
                }
            }
        })
    </script>
</body>

</html>