How to Watch for Nested Changes in Vue
Tags: vue, javascript, webdev, tutorial
Published: 2022-05-03 13:21:18

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 [watchers in vue](https://fjolt.com/article/vue-how-to-watch-for-changes) to watch for a change in data, and then do something to the HTML, or send a message to the user about it.

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 **shallow changes** For example, below, we watch for changes in `count`, and `console.log` those changes:
```html
<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 `++this.count`, and our watcher watches for any changes in `count`. It then `console` logs the data, so we can see the new count value. That means **any time the button is clicked, the value of count is shown on the console log**.

However, **shallow changes** 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 exmaple, updating `count.number` below will not trigger our watcher for `count`, since Vue simply doesn't check for any changes deeper than `count`:
```javascript
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 `count.number` above by changing our watcher to watch for `count.number`:
```javascript
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 `count` changes, we need to use the **deep** property.

## 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 `watcher` a little differently:
```javascript
data() {
    return {
        count: {
            number: 1,
            type: 'number'
        }
    },
    watch: {
        count: {
            handler(data) {
                console.log(data);
            },
            deep: true
        }
    }
}
```

Now whenever any property within `count` changes, the `count` watcher will fire. When we `console.log(data)` this time, the entire `count` object will be console logged, i.e. `{ number: 1, type: 'number' }`.

This is a lot easier than targetting 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 targetting specific properties, like `count.number`.