A Vue watcher allows you to listen to the component data and run whenever a particular property changes.
A watcher is a special Vue.js feature that allows you to spy on one property of the component state, and run a function when that property value changes.
It is most useful when you want to perform asynchronous or expensive operations in response to changing data. Keep in mind watchers only change when that specific data property changes.
In this topic, we’ll learn about the Watch property. Below the example, we’ll see we can use it.
Above, we’ve created two text boxes, one for meter and second for centimeters. In data property, the meter and cm are initialized to empty. There is a watch object created with two functions meter and cm. In both the functions, the conversion from the meter to cm and vice-versa.
We enter values inside any of the textboxes, whichever is changed, Watch takes care of updating both the textboxes. We don’t have to specially assign any events and wait for it to change and do the extra work of validating. The watch takes care of updating the textboxes with the calculation done in the respective functions.