Vue Js Compare Two String

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <input v-model="string1" type="text">
        <input v-model="string2" type="text">
        <p>Are the strings equal? {{ areEqual }}</p>
    </div>

<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    string1: 'Vue Js compare two string',
                    string2: 'Vue Js compare two string'
                }
            },
            computed: {
                areEqual() {
                    return this.string1 === this.string2;
                }
            }
        })
    </script>
    <style>
        /* Style for the input elements */
        input[type="text"] {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

/* Style for the paragraph element */
        p {
            font-size: 18px;
            margin-top: 20px;
        }

/* Style for the #app container */
        #app {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</body>

</html>