Vue Js Intersection of Two Array

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Intersction of Two Array of object</h3>
    <div id="app">
      <p>Array 1:</p>
        <ul>
            <li v-for="item in arr1" :key="item.id">{{ item.name }}</li>
        </ul>
        <p>Array 2:</p>
        <ul>
            <li v-for="item in arr2" :key="item.id">{{ item.name }}</li>
        </ul>
        <p>Array 3:</p>
        <ul>
            <li v-for="item in arr3" :key="item.id">{{ item.name }}</li>
        </ul>
        <p>Intersection:</p>
        <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 {
                    arr1: [
                        { id: 1, name: "Andrew" },
                        { id: 2, name: "Jane" },
                        { id: 3, name: "Bob" },
                    ],
                    arr2: [
                        { id: 2, name: "Jane" },
                        { id: 3, name: "Bob" },
                        { id: 1, name: "Andrew" },
                    ],
                    arr3: [
                        { id: 3, name: "Bob" },
                        { id: 4, name: "Alice" },
                        { id: 1, name: "Andrew" },
                    ],
                }
            },
            computed: {
                intersection() {
                    const arrays = [this.arr1, this.arr2, this.arr3];
                    return arrays.reduce((acc, arr) =>
                        acc.filter((x) => arr.some((y) => y.id === x.id))
                    );
                },
            },

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