Watch and watchEffect in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Difference in reactive triggers between watch and watchEffect

Consider a Vue 3 component using both watch and watchEffect. Which statement correctly describes when each watcher runs?

Vue

import { ref, watch, watchEffect } from 'vue';

const count = ref(0);
const double = ref(0);

watch(count, (newVal) => {
  double.value = newVal * 2;
});

watchEffect(() => {
  console.log(`Count is: ${count.value}`);
});

A <code>watch</code> runs immediately on setup; <code>watchEffect</code> runs only when dependencies change.

B <code>watch</code> runs whenever any reactive property changes; <code>watchEffect</code> runs only once on setup.

C <code>watch</code> runs only when <code>count</code> changes; <code>watchEffect</code> runs immediately and whenever dependencies change.

D <code>watch</code> and <code>watchEffect</code> both run only once on setup.

💡 Hint

Think about when each watcher first runs and how they track dependencies.

watch runs its callback only when the watched source changes, not immediately by default. watchEffect runs immediately on setup and then reruns whenever any reactive dependency inside it changes.

❓ state_output

intermediate

Output of watchEffect with multiple reactive sources

What will be logged to the console after the following code runs and count.value changes from 1 to 2?

Vue

import { ref, watchEffect } from 'vue';

const count = ref(1);
const message = ref('hello');

watchEffect(() => {
  console.log(`Count: ${count.value}, Message: ${message.value}`);
});

count.value = 2;

A

Count: 1, Message: hello
Count: 2, Message: hello

B Count: 1, Message: hello

C Count: 2, Message: hello

D

Count: 1, Message: hello
Count: 1, Message: hello

💡 Hint

Remember when watchEffect runs its function.

watchEffect runs immediately on setup, logging the initial values. Then it reruns when count.value changes, logging the updated values.

📝 Syntax

advanced

Correct syntax to watch multiple sources with watch

Which option shows the correct way to watch two reactive refs a and b and react when either changes?

Vue

import { ref, watch } from 'vue';

const a = ref(0);
const b = ref(0);

A watch(a, b, (newA, newB) => { console.log(newA, newB); });

B watch([a, b], ([newA, newB]) => { console.log(newA, newB); });

C watch(a && b, (newVal) => { console.log(newVal); });

D watch({a, b}, (newVals) => { console.log(newVals.a, newVals.b); });

💡 Hint

Think about how to pass multiple sources as an array.

To watch multiple sources, pass an array of refs as the first argument. The callback receives an array of new values.

🔧 Debug

advanced

Identify the error in this watchEffect usage

What error will this code produce when run in a Vue 3 component?

Vue

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  count.value++;
});

A TypeError: count.value is not a function

B SyntaxError: Unexpected token

C No error, runs fine resetting count after 5

D Maximum call stack size exceeded (infinite loop error)

💡 Hint

Consider what happens when you change a reactive value inside watchEffect.

Changing count.value inside watchEffect triggers the effect again, causing an infinite loop and stack overflow.

🧠 Conceptual

expert

Why prefer watch over watchEffect for expensive side effects?

In Vue 3, why might you choose watch instead of watchEffect when performing expensive operations based on reactive data?

A <code>watch</code> runs only when specific sources change, avoiding unnecessary runs; <code>watchEffect</code> runs immediately and on any dependency change.

B <code>watchEffect</code> caches results automatically; <code>watch</code> does not.

C <code>watch</code> runs synchronously; <code>watchEffect</code> runs asynchronously.

D <code>watchEffect</code> cannot access reactive data; <code>watch</code> can.

💡 Hint

Think about control over when the watcher runs.

watch lets you specify exactly which reactive sources to watch, so you avoid running expensive code unnecessarily. watchEffect runs immediately and reruns whenever any reactive dependency changes, which can cause extra runs.