You have an array or an object as a prop, and you want your app to do something whenever that data changes.
- So you create a watcher for that property, but Vue doesn't seem to fire the watcher when the nested data changes.
- Here's how you solve this. You need to set deep to true when watching an array or object so that Vue knows that it should watch the nested data for changes.
- I'll go into more detail on what this looks like in this article, plus some other useful things to know when using watch in Vue.
- You can also check out the Vue docs on using watchers.
- First we'll do a quick refresher on what a watcher actually is.
- Second, we have to take a slight detour and clarify the distinction between computed props and watchers.
- Thirdly, we'll dive into how you can watch nested data in arrays and objects.
- Feel free to skip straight here if you need — you can always come back to the first sections later on.
This will take your watcher skills to the next level! In Vue we can watch for when a property changes, and then do something in response to that change.