Vue Js Properly Watch for nested data

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3.2.22/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3> Vue Js Properly Watch for nested data</h3>
        <h1>{{ user.name }}</h1>
        <p>{{ user.address.city }}, {{ user.address.state }}</p>

<input v-model="user.address.city">
        <small>{{result}}</small>
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    user: {
                        name: 'John',
                        address: {
                            city: 'Nggggew York',
                            state: 'NY'
                        }
                    }, result: ''
                }
            },
            watch: {
                'user.address.city': {
                    handler(newVal, oldVal) {
                        this.result = `City changed from ${oldVal} to ${newVal}`;
                    },
                    deep: true
                }
            }

})

app.mount('#app')
    </script>
    <style scoped>
        #app {
            margin: 0 auto;
            max-width: 600px;
            font-family: Arial, sans-serif;
            text-align: center;
        }

h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

h1 {
            font-size: 3rem;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

input {
            font-size: 1.2rem;
            padding: 0.5rem 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 1rem;
        }

small {
            display: block;
            font-size: 0.8rem;
            color: #666;
        }
    </style>
</body>

</html>