Vue 3 Composition API: Watcher Not Reacting to Nested Object Changes
I tried several approaches but none seem to work. I'm working with an scenario with the Vue 3 Composition API where a watcher I set up does not trigger when I modify a nested property of an object. I've defined a reactive object like this: ```javascript import { ref, watch } from 'vue'; export default { setup() { const user = ref({ name: 'John', details: { age: 30 } }); watch(user, (newValue, oldValue) => { console.log('User changed:', newValue); }, { deep: true }); // Trying to update the nested property const updateAge = () => { user.value.details.age = 31; }; return { user, updateAge }; } }; ``` I expected the watch function to log changes whenever the `age` property is modified. However, it only seems to trigger when I change the `name` property directly. I’ve tried adding the `{ deep: true }` option to the watcher, but it still doesn’t work as expected. The watcher only detects changes when I reassign the `user` object completely, like this: ```javascript user.value = { ...user.value, details: { ...user.value.details, age: 31 } }; ``` Is there a proper way to use the watcher with nested properties in a reactive object without needing to create a new reference? Additionally, is this behavior expected in Vue 3, or am I missing something crucial in my setup? My development environment is Windows. What's the best practice here?