Vue is a reactive language, meaning when the data changes, we can automatically have that represent itself in the HTML. To help us with this, we can use to watch for a change in data, and then do something to the HTML, or send a message to the user about it. watchers in vue This works fine for simple datasets, but if we start to have data which is deeper than one level, it becomes harder to watch it properly for changes. Watching for Nested Data Changes in Vue To understand a little about this issue, we need to understand how watchers work in Vue. Vue only watches for For example, below, we watch for changes in , and those changes: shallow changes count console.log <script> export default { data() { return { count: 1 } }, watch: { count(data) { console.log(data); } } } </script> <template> <h1>{{ count }}</h1> <button @click="++this.count"> Click Me </button> </template> Every time the user clicks on the button, we , and our watcher watches for any changes in . It then logs the data, so we can see the new count value. That means . ++this.count count console any time the button is clicked, the value of count is shown on the console log However, means Vue only checks for changes in that properties value. If we have data more than one level deep, Vue will not check for updates. For example, updating below will not trigger our watcher for , since Vue simply doesn't check for any changes deeper than : shallow changes count.number count count data() { return { count: { number: 1, type: 'number' } }, watch: { // This doesn't get triggered when count.number! count(data) { console.log(data); } } } Instead, we need to mention specifically which element is changing. We can continue to watch for changes in above by changing our watcher to watch for : count.number count.number data() { return { count: { number: 1, type: 'number' } }, watch: { // This gets triggered when count.number changes! "count.number" : function(data) { console.log(data); } } } Using the above method, we can easily check for changes in properties within properties, so that we can fire the appropriate watchers, but it can get messy. If we want to simply watch for any changes, we need to use the property. count deep Using the deep property The deep property can be added to any watcher, and it forces Vue to watch for any change within a specific data property. This means we have to write our a little differently: watcher data() { return { count: { number: 1, type: 'number' } }, watch: { count: { handler(data) { console.log(data); }, deep: true } } } Now whenever any property within changes, the watcher will fire. When we this time, the entire object will be console logged, i.e. . count count console.log(data) count { number: 1, type: 'number' } This is a lot easier than targeting specific properties within properties, but it is costly. Since Vue has to go through each property every time, this can cause serious performance issues for very large objects. As such, only use this if you have a known object of small size. For other situations, stick to targeting specific properties, like . count.number Originally published here.
