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.

Practice

1. Which Vue feature should you use to create a value that automatically updates and caches based on other reactive data?

easy

A. Computed property

B. Watch property

C. Method

D. Lifecycle hook

Solution

1. Step 1: Understand computed properties

   Computed properties automatically update when their dependencies change and cache their results for efficiency.

2. Step 2: Compare with watch

   Watch is for running code on data changes, not for caching reactive values.

3. Final Answer:

   Computed property -> Option A

4. Quick Check:

   Reactive cached value = Computed property [OK]

Hint: Use computed for reactive cached values, watch for side effects [OK]

Common Mistakes:

• Using watch to compute and cache values
• Confusing methods with computed properties
• Thinking lifecycle hooks handle reactive caching

2. Which of the following is the correct syntax to define a computed property named fullName in Vue 3 Composition API using computed?

easy

A. const fullName = reactive(() => firstName + ' ' + lastName);

B. const fullName = watch(() => firstName + ' ' + lastName);

C. const fullName = computed(() => firstName + ' ' + lastName);

D. const fullName = ref(() => firstName + ' ' + lastName);

Solution

1. Step 1: Identify correct function for computed

   The computed function takes a getter function and returns a reactive, cached value.

2. Step 2: Check other options

   watch is for side effects, reactive creates reactive objects, ref creates reactive primitives, none are for computed caching.

3. Final Answer:

   const fullName = computed(() => firstName + ' ' + lastName); -> Option C

4. Quick Check:

   Computed syntax = computed(() => ...) [OK]

Hint: Use computed(() => ...) for reactive cached values [OK]

Common Mistakes:

• Using watch instead of computed for caching
• Confusing reactive and ref with computed
• Missing arrow function inside computed

3. Given the Vue 3 setup below, what will be logged when count.value changes from 0 to 1?

const count = ref(0);
watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});
count.value = 1;

medium

A. Error: watch callback parameters incorrect

B. Count changed from 1 to 0

C. No output

D. Count changed from 0 to 1

Solution

1. Step 1: Understand watch behavior

   The watch function runs its callback when the watched reactive value changes, passing new and old values.

2. Step 2: Analyze the code

   When count.value changes from 0 to 1, the callback logs the change with oldVal=0 and newVal=1.

3. Final Answer:

   Count changed from 0 to 1 -> Option D

4. Quick Check:

   Watch logs old and new values on change [OK]

Hint: Watch logs old and new values on reactive changes [OK]

Common Mistakes:

• Mixing newVal and oldVal order
• Expecting watch to cache values like computed
• Not calling .value on ref when changing

4. Identify the error in this Vue 3 watch usage:

const count = ref(0);
watch(() => count, (newVal, oldVal) => {
  console.log(newVal);
});
count.value = 5;

medium

A. The watch source should be count not a function returning count

B. The watch source function should return count.value instead of count

C. The watch callback parameters are reversed

D. No error, code works correctly

Solution

1. Step 1: Understand watch source function

   The watch source function should return the reactive value to watch, not the ref object itself.

2. Step 2: Identify the mistake

   The function returns count (a ref), but it should return count.value to watch the actual value.

3. Final Answer:

   The watch source function should return count.value instead of count -> Option B

4. Quick Check:

   Watch source must return reactive value, not ref object [OK]

Hint: Return .value inside watch source function to track value changes [OK]

Common Mistakes:

• Returning ref instead of its value in watch source
• Confusing parameter order in watch callback
• Assuming watch works without reactive source

5. You want to update the document title whenever the user's full name changes, which is computed from first and last names. Which Vue approach is best to implement this behavior?

hard

A. Use a computed property for full name and a watch on full name to update document title

B. Use only a computed property for full name and update document title inside it

C. Use a watch on first and last names separately to update document title

D. Use a method to compute full name and call it inside watch to update document title

Solution

1. Step 1: Separate display logic and side effects

   Computed properties are ideal for reactive display values like full name, caching the result.

2. Step 2: Use watch for side effects

   Updating document title is a side effect, so watch the computed full name to react to changes.

3. Final Answer:

   Use a computed property for full name and a watch on full name to update document title -> Option A

4. Quick Check:

   Computed for values, watch for side effects [OK]

Hint: Compute values with computed, react with watch for side effects [OK]

Common Mistakes:

• Trying to update document title inside computed (not allowed)
• Watching first and last names separately instead of computed
• Using methods instead of computed for reactive values