Vue.js is a progressive framework for creating User Interfaces. It has a library that focuses mainly on the view layer. A watcher is an amazing concept that helps us to build great projects in Vue.js. Watcher allows you to watch on a property of the component state and run a function when that property value changes. Watchers have hooks which allow us to observe a property that is stored by Vue. If you want to execute a function each time something changes or respond to a particular change, watch that property and apply some logic. Watcher’s enables us to write declarative code. You can use watchers for logic refers to a property. Where should you use watcher?. Watchers can be used to observe value until it reaches certain value, to make an asynchronous API call when a value changes and when you don’t need to combine an existing data into a new property. The code for defining watcher will look like this:

export default {
                data (){
                                return{
                                                title:'',
                                                description:''
                                 }
                  },
                watch:{
                                //your watchers will go in here!
                 }
}

All you want to do to define a watcher is to add it inside the watch. Declare the function with the same name of the property you want to observe. It should contain two parameters the old value of the property and new value respectively as first and second parameters. Here is an example.

watch: {
                title:(newTitle, oldTitle) => {
                                console.log("Titlechanged from " + oldTitle + " to " + newTitle)
                }
}