What is watch needed for?

VueJunior~1 min read

watch is needed to track changes in reactive data and to run side effects when that data changes.

In other words:

watch is a reaction to a value changing. When something changes -> your code runs.

This is what sets it apart from computed, which only calculates and caches but doesn't perform actions.

When to use watch? (the most important part for interviews)

1. For side effects

Things you cannot do in computed, but need to do when a value changes:

API requests
writing to localStorage
logging
interacting with the DOM
calling third-party library functions

Example:

watch(query, () => {
  fetchData(query.value)
})

A request is sent every time query changes.

2. For tracking changes to a form or object

watch(form, (newVal) => {
  saveDraft(newVal)
}, { deep: true })

3. For reacting to a route change

watch(() => route.params.id, (id) => loadUser(id))

4. For running logic when props change

watch(() => props.item, (newVal) => {
  console.log("prop changed:", newVal)
})

5. For running logic immediately + on change (with immediate)

watch(userId, loadUser, { immediate: true })

A simple watch example

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`count: ${oldValue} → ${newValue}`)
})

Fires on every change to count.

watch options

`deep: true` - track nested properties

watch(settings, handler, { deep: true })

`immediate: true` - run the effect immediately

watch(id, load, { immediate: true })

watching several values

watch([a, b], ([newA, newB]) => {})

watch vs computed (a common question!)

watch	computed
performs actions	returns a value
not cached	cached
good for API calls and side effects	good for derived values
can be async	sync only (getter)
tracks both objects and functions	works only on the dependencies used in the getter

Summary:

If you need to do something -> watch
If you need to compute something -> computed

Summary (ideal for an interview)

watch is needed to run side effects when reactive data changes: requests, saving, logging, DOM work, and reacting to props and route. It's used for things computed shouldn't be doing.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.