Watchers for side effects in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the watched property changes?

Consider this Vue 3 component using the Composition API. What will be logged to the console when the count value changes from 0 to 1?

Vue

import { ref, watch } from 'vue';

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

A Logs: 'Count changed from 0 to 1'

B Logs: 'Count changed from 1 to 0'

C No log output because watch is not triggered

D Throws a runtime error because watch is used incorrectly

💡 Hint

Remember that the watcher callback receives the new and old values in that order.

The watcher listens to changes on the reactive count. When count changes from 0 to 1, the callback logs the old and new values accordingly.

❓ state_output

intermediate

What is the value of message after the watcher runs?

In this Vue 3 component, what will be the value of message after name changes from 'Alice' to 'Bob'?

Vue

import { ref, watch } from 'vue';

export default {
  setup() {
    const name = ref('Alice');
    const message = ref('');
    watch(name, (newName) => {
      message.value = `Hello, ${newName}!`;
    });
    return { name, message };
  }
};

A "Hello, !"

B "Hello, Alice!"

C "Hello, Bob!"

D An empty string ""

💡 Hint

The watcher updates message whenever name changes.

When name changes to 'Bob', the watcher sets message to 'Hello, Bob!'.

📝 Syntax

advanced

Which watcher syntax correctly watches multiple sources?

You want to watch two reactive refs a and b and run a callback when either changes. Which option uses the correct Vue 3 watcher syntax?

Vue

import { ref, watch } from 'vue';

const a = ref(1);
const b = ref(2);

// Which watcher is correct?

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

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

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

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

💡 Hint

To watch multiple refs, pass an array of sources as the first argument.

Option B correctly passes an array of refs to watch and destructures new and old values in the callback. Other options use invalid syntax or types.

🔧 Debug

advanced

Why does this watcher not trigger on nested object property change?

Given this Vue 3 component, why does the watcher not run when user.name changes?

Vue

import { reactive, watch } from 'vue';

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 });
    watch(user, (newUser) => {
      console.log('User changed:', newUser);
    }, { deep: true });
    // Later in code:
    user.name = 'Bob';
    return { user };
  }
};

A The user object is not reactive because ref() was not used.

B Reactive objects cannot be watched in Vue 3.

C The watcher callback is missing the old value parameter.

D The watcher does not deep watch by default, so nested changes are ignored.

💡 Hint

By default, watchers do not track nested property changes unless specified.

Vue watchers on reactive objects watch only the reference by default. To watch nested properties, you must set the deep: true option.

🧠 Conceptual

expert

What is the effect of immediate option in watchers?

In Vue 3, what happens when you add immediate: true to a watcher?

Vue

import { ref, watch } from 'vue';

const count = ref(0);
watch(count, (newVal, oldVal) => {
  console.log('Count changed:', newVal);
}, { immediate: true });

A The watcher callback runs immediately with the current value, then on every change.

B The watcher callback runs twice on every change.

C The watcher callback runs only on changes, ignoring the initial value.

D The watcher callback runs only once and never again.

💡 Hint

Immediate watchers run the callback once right after setup.

Setting immediate: true causes the watcher callback to run once immediately with the current value, then on every subsequent change.