Vue Js Intersection of Two Array

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
      <p>Array1 : {{array1}}</p>
      <p>Array2 : {{array2}}</p>
      <h3>Vue Js Intersction of Two Array of object</h3>
      <ul>
            <li v-for="item in intersection" :key="item.id">{{ item.name }}</li>
        </ul>
    </div>
<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    array1: [
                        { id: 1, name: "Alice" },
                        { id: 2, name: "Bob" },
                        { id: 3, name: "Charlie" }
                    ],
                    array2: [
                        { id: 2, name: "Bob" },
                        { id: 4, name: "Dave" }
                    ]
                }
            },
            computed: {
                intersection() {
                    return this.array1.filter(item1 =>
                        this.array2.some(item2 => item1.id === item2.id)
                    );
                }
            }

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