What is the difference between watch and computed methods in vuejs

Computed properties are basically “virtual” properties that are evaluated when they are first used. They will be automatically cached until changes in the component require a reevaluation of the property.

Watch properties are just a mechanism to detect changes in properties, allowing you to perform custom logic.

Since watchers are much more powerful, you can use them to do the same that computed properties do: Basically, you would watch all dependent properties and whenever a value changes, you would recompute the property and store it in the Vue instance’s data.

Unless you require complex logic, computed properties will already do this in a more declarative way: You do not need to listen explicitly on all dependent properties but rely on Vue to automatically detect which properties your computed property depends on. So you just declaratively state how to compute the computed property and don’t need to worry about something else. Computed properites also already come with a good caching mechanism, something you would have to do yourself with watchers.

See also the guide on computed properties and watchers. One example they give for watchers is a debounced service call that would load additional data.

In general though, the gist is: Try to use computed properties for everything. If it won’t work as a computed property, use a watcher.

Computed properties are just like the data properties. The literal meaning of computed is 'calculated using given values'.

Just as the meaning suggests computed properties are a calculated result of its dependent values(in vuejs data properties, props)

for example:

data:{
    lowerCase: 'abcd'
},
computed:{
    uppercase(){
        return this.lowerCase.toUpperCase();
    }
}

in the above example the computed property uppercase is dependent on data property lowerCase. It converts(computes) the letters into uppercase. whenever lowercase changes , so any template bindings using this computed property automatically update.

Watch properties are more general and in one way more powerful(bit expensive) to watch for changes in data properties. You can perform complex functions, asynchronous tasks in watchers. The example given in the documentation is a good example of using a watcher.

Summarizing the differences:

1. Computed properties unlike watched properties should return a value.

2. computed properties are just like data properties and can be used in template using {{ }} but watchers cannot be used. Watchers should perform logic to update the data properties which are used in the template.

Its difficult to express this more clearly than the doc

tldr; computed properties are reactive. Their output is cached, and automatically updates if anything used in the function changes. Changes flow out onto the page, without us needing to worry about when or why. watch is "imperative and repetitive". It runs when the thing you're watching changes, like a listener. You then are responsible for how the result is stored and used.

You can do everything with events, but you should try to move up the food chain if you can. Prefer computed to watch.