computed vs watch ⚡

Derive values with computed, react to changes with watch.

Both respond to reactive changes, but they answer different questions. Mixing them up leads to clunky code.

computed — derive a new value

Use it when a value is calculated from other state. It’s cached and only re-runs when its dependencies change.

import { ref, computed } from 'vue'

const first = ref('Ada')
const last = ref('Lovelace')
const fullName = computed(() => `${first.value} ${last.value}`)
console.log(fullName.value) // "Ada Lovelace"

watch — run a side effect

Use it when a change should trigger an action — fetching data, logging, syncing to storage.

import { ref, watch } from 'vue'

const query = ref('')
watch(query, (newVal, oldVal) => {
  console.log(`searching for ${newVal}`)
  // fetchResults(newVal)
})

The rule of thumb

Returning a value for the template? → computed
Performing an action in response to a change? → watch

Get Marcelo Domingues’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

If you find yourself manually assigning to a ref inside a watch just to derive a value, you probably want computed instead.

TL;DR: computed produces a cached derived value; watch runs side effects when something changes.

Next time you reach for watch, ask “am I just calculating something?” — if so, computed is cleaner.