Watch vs computed decision in Vue - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

When to use computed vs watch in Vue?

In Vue 3, both computed and watch can react to reactive data changes. Which statement best describes when to use computed instead of watch?

A Use <code>computed</code> when you want to derive a value based on reactive data and cache it automatically.

B Use <code>computed</code> when you want to perform side effects like API calls on data change.

C Use <code>computed</code> when you want to watch multiple unrelated reactive sources separately.

D Use <code>computed</code> only for asynchronous operations triggered by data changes.

💡 Hint

Think about whether you want a value that updates automatically and is cached, or if you want to run code when data changes.

computed properties are for deriving and caching values based on reactive data. watch is for running side effects when data changes.

❓ component_behavior

intermediate

What is the output of this Vue computed property?

Given the following Vue 3 computed property, what will be the value of fullName.value after firstName.value = 'Jane'?

Vue

import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

firstName.value = 'Jane';

// What is fullName.value now?

A 'John Doe'

B 'Jane Doe'

C undefined

D Throws an error because computed is read-only

💡 Hint

Remember that computed properties update automatically when their dependencies change.

The computed property fullName depends on firstName and lastName. Changing firstName.value to 'Jane' updates fullName.value to 'Jane Doe'.

❓ lifecycle

advanced

What happens when a watch callback updates the watched reactive source?

Consider this Vue 3 code snippet:

import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newVal, oldVal) => {
  if (newVal < 3) {
    count.value++;
  }
});
count.value = 0;

What will be the final value of count.value after this code runs?

A 3

B 1

C 0

D Infinite loop causing stack overflow

💡 Hint

Think about how watch triggers when the reactive source changes inside its own callback.

The watcher increments count.value while it is less than 3. It triggers again each time count.value changes, stopping when it reaches 3.

📝 Syntax

advanced

Which watch syntax correctly watches multiple reactive sources?

Which option correctly watches two reactive refs a and b and runs a callback when either changes?

A watch(a, b, (newVal, oldVal) => { console.log(newVal, oldVal); });

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

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

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

💡 Hint

Check the Vue 3 docs for watching multiple sources syntax.

Option C uses an array of refs as the first argument, which is the correct way to watch multiple sources.

🔧 Debug

expert

Why does this computed property not update when obj.count changes?

Given this Vue 3 code:

import { reactive, computed } from 'vue';
const obj = reactive({ count: 0 });
const doubleCount = computed(() => obj.count * 2);

obj.count = 1;

// doubleCount.value is still 0. Why?

A Because the code is missing a return statement inside the computed function.

B Because the assignment <code>obj.count = 1</code> is not reactive and does not trigger computed updates.

C Because the computed property was created before <code>obj.count</code> was reactive, so it never tracked it.

D Because <code>obj</code> is reactive but <code>count</code> is not a ref, so computed does not track it.

💡 Hint

Check the computed function syntax carefully.

The computed function must return a value. Without a return statement, it returns undefined and does not update.