In this article, we’ll look at how to properly watch for nested data with Vue.js.
To properly watch for nested data with Vue.js, we add a watcher for the property we want to watch.
For instance, we write
new Vue({
el: "#myElement",
data: {
entity: {
properties: [],
},
},
watch: {
"entity.properties": {
handler(after, before) {
// ...
},
deep: true,
},
},
}); to watch the entity.properties reactive property for changes.
handler is called when the value changes.
We set deep to true to watch for changes in all levels of the property is entity.properties is an object.