Vue Js Get Domain Name from Email Address

<html>

<body>
    <div id="app">
        <h3>Vue Js Get Domain Name from Email Address</h3>
        <label for="email-input">Email:</label>
        <input id="email-input" v-model="email" placeholder="Enter email" @input="checkEmailValidity" />
        <p v-if="domain">Domain: {{ domain }}</p>
        <p v-if="errorMessage">{{ errorMessage }}</p>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    email: '',
                    domain: '',
                    errorMessage: '',
                }
            },
            methods: {
                checkEmailValidity() {
                    if (!this.email) {
                        this.errorMessage = 'Please enter an email address.';

} else if (!this.email.includes('@')) {
                        this.errorMessage = 'Please enter a valid email address.';
                    } else {
                        this.errorMessage = '';
                        this.extractDomain();
                    }
                },
                extractDomain() {
                   this.domain = this.email.split('@')[1].replace(/^(www\.)/,'');
                },
            },
        });
    </script>
    <style scoped>
        body {
            font-family: 'Open Sans', sans-serif;
            font-size: 16px;
            line-height: 1.5;
            color: #333;
            background-color: #f5f5f5;
        }

#app {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

}

label {
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

input#email-input {
            font-size: 1rem;
            padding: 0.5rem;
            border-radius: 0.25rem;
            border: 1px solid #ccc;
            transition: border-color 0.2s ease-in-out;
        }

p {
            margin: 0.5rem 0;
        }
    </style>

</body>

</html>