Vue Js Email Validation

<body>
    <h3>Vue Js Email Validation</h3>
    <div id="app">
        <input type="email" v-model="email" @input="validateEmail" required />
        <p v-if="error" class="error">{{ error }}</p>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    email: '',
                    error: ''
                };
            },
            methods: {
                validateEmail() {
                    let emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                    if (!emailRegex.test(this.email)) {
                        this.error = 'Please enter a valid email address';
                    } else {
                        this.error = '';
                    }
                }
            }
        })
    </script>
    <style>
        #app {
            margin: 20px;
        }

input[type="email"] {
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

.error {
            color: red;
            font-size: 14px;
            margin-top: 5px;
        }
    </style>

</body>

</html>