Vue.js watchers do not automatically detect changes in deep properties of an object or array. If you want to trigger a watcher when any nested property of an object changes, you can use the "deep" option with the watch property.
Here is an example:
new Vue({
el: '#app',
data: {
person: {
name: 'John Doe',
address: {
street: '123 Main St',
city: 'New York'
}
}
},
watch: {
'person.address': {
handler(newValue, oldValue) {
console.log('Address changed');
},
deep: true // this tells Vue to watch for changes in nested properties as well
}
}
})
In the example above, when you change the address property of the person object (even if it's a deep property like person.address.street), the watcher will be triggered because we set the deep: true option.