computed is a property that processes data bound to the view and observes for subsequent data changes.
computed caches data based on its dependencies (the
data object), meaning that it only reevaluates itself when the relevant dependencies change.
As the name implies,
watch is a listener that observes and responds to data changes on the Vue instance. Using the
watch property allows us to perform asynchronous operations, such as accessing an API, limiting the frequency of invoking a method, and manipulating the intermediate state before we get the final result. These are things that
computed property unable to do.
watch play the role of observing data changes and perform corresponding actions. They are Vue implementation of the event listener, but
computed mainly focus on processing simple and synchronous data manipulation, whereas
watch is used to complete a complex business logic with relatively expensive overhead. In situations where you are not sure which property to choose, use
computed first, as so to avoid the embarrassing situation of making multiple calls to