computed, watch, onMounted: Know the Difference

Plenty of developers mix up computed, watch and onMounted in Vue 3, yet each one has a very clear purpose.

computed creates derived values automatically and reactively. It is cached, so it only recalculates when its dependencies change — perfect for declarative logic and for displaying data in the template.

watch is for reacting to changes and running side effects: API calls, logging, syncing data. Reach for it when you need to do something in response to a change.

onMounted is a lifecycle hook that runs once, when the component is mounted — ideal for fetching initial data or touching the DOM.

In short: computed for automatic, reactive values; watch to react and trigger side effects; onMounted to initialise the component. A simple distinction, but essential for writing clean, efficient Vue.