Watchers

There are rare cases where we need to use watchers instead of computed properties. Sometimes watchers are misused as well, which messes things up and results in an unclear data workflow among components. So before using watchers, we should think about their use and suitability.

As we can see in the Vue.js docs, watchers are often used to react to data changes and perform asynchronous operations, such as performing an ajax request.

Testing Watchers

Let’s say we want to do something when the inputValue from the state changes. We could do an ajax request, but since that’s more complicated (as we’ll see it in the next lesson) let’s just do a console.log. Add a watch property to the Form.vue component options: