Every component in Vue has a watcher.
To understand how this works, let's begin with an earlier example from this chapter. The example is from the Computed properties section, at this link: https://codepen.io/AjdinImsirovic/pen/qKVyry. That is our starting code. As we know from the previous section, we have two input fields here and we are printing out the values entered into these input fields in some span tags under the form.
Let's extend our example. The initial code is the same; we will only be adding a watcher to it. The updated code can be found at this Codepen URL: https://codepen.io/AjdinImsirovic/pen/jprwKe.
As can be observed, the only update we made to the original pen is the addition of the watchers option, as follows:
watch: {
ownerName(previousValue,currentValue) {
console.log(`The value in the first input has changed from:
${previousValue} to: ${currentValue}`);
}
},How does the previous watcher work? It allows us to use a method that...