Vue Js Deep Watchers

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>Selected item: {{ selectedItem.name }}</p>
        <select v-model="selectedItem">
            <option v-for="item in items" :value="item">{{ item.name }}</option>
        </select>
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    items: [
                        { name: 'Item 1', value: 1 },
                        { name: 'Item 2', value: 2 },
                        { name: 'Item 3', value: 3 }
                    ],
                    selectedItem: { name: 'Item 1', value: 1 },
                }
            },
            watch: {
                selectedItem: {
                    handler: function (newVal, oldVal) {
                        console.log('items has changed!', newVal, oldVal)
                    },
                    deep: true
                }
            }
        });
        app.mount('#app');
    </script>
    <style scoped>
        #app {
            max-width: 600px;
            /* example width */
            margin: 0 auto;
            /* center the container horizontally */
            padding: 20px;
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
        }

select {
            display: block;
            /* make the select element a block element */
            width: 100%;
            /* make the select element full width */
            margin-top: 10px;
            padding: 8px;
            font-size: 16px;
            font-weight: bold;
            color: #333;
            background-color: #fff;
            border: 2px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
    </style>
</body>

</html>