Vue Js Union of Two array

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Union of Two Array</h3>
    <div id="app">
        <h2>Vue Js Union of Two Arrays</h2>
        <p>Array 1: {{ array1 }}</p>
        <p>Array 2: {{ array2 }}</p>
        <p>Union Array: {{ unionArray }}</p>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    array1: [1, 2, 3],
                    array2: [2, 3, 4],
                    unionArray: []
                }
            },
            mounted() {
                this.createUnionArray();
            },
            methods: {
                createUnionArray() {
                    // Create a Set object by concatenating the arrays
                    const set = new Set([...this.array1, ...this.array2]);

// Iterate over the Set and push its values to the union array
                    for (let value of set) {
                        this.unionArray.push(value);
                    }
                }
            }

})
    </script>
</body>
</html>