Reactive objects with reactive in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vue reactive object update?

Consider the following Vue 3 code using reactive. What will be logged to the console after the update?

Vue

import { reactive } from 'vue';

const state = reactive({ count: 0 });

console.log(state.count);
state.count = 5;
console.log(state.count);

A 0 then 0

B 0 then 5

C undefined then 5

D 5 then 5

💡 Hint

Remember that reactive objects track changes and reflect updates immediately.

The reactive function creates a reactive object. Initially, state.count is 0. After assignment, it updates to 5. So the console logs 0 first, then 5.

📝 Syntax

intermediate

Which option correctly creates a reactive nested object in Vue 3?

You want to create a reactive object with a nested property user.name. Which code snippet correctly does this?

A const state = reactive({ user: { name: ref('Alice') } });

B const state = reactive({ user: reactive({ name: 'Alice' }) });

C const state = reactive({ user: ref({ name: 'Alice' }) });

D const state = reactive({ user: { name: 'Alice' } });

💡 Hint

Nested objects inside reactive are automatically reactive.

Using reactive on the outer object makes nested objects reactive automatically. Wrapping nested objects or properties with reactive or ref inside is unnecessary and can cause unexpected behavior.

🔧 Debug

advanced

Why does this reactive object update not trigger reactivity?

Given this code, why does updating state.user.age not update the UI?

Vue

import { reactive } from 'vue';

const state = reactive({});

state.user = {};

// Later in code
state.user.age = 30;

A Because <code>age</code> was not present when <code>state.user</code> was made reactive, Vue cannot track it.

B Because <code>reactive</code> only tracks top-level properties, nested properties are ignored.

C Because <code>state.user</code> is not reactive, only <code>state</code> is reactive.

D Because <code>age</code> must be wrapped in <code>ref</code> to be reactive.

💡 Hint

Vue 3's reactivity system cannot detect new properties added after reactive creation.

By assigning state.user = {}, state.user becomes a plain JavaScript object and not reactive. Adding new properties like age later does not trigger reactivity.

❓ state_output

advanced

What is the value of state.count after this code runs?

Analyze this Vue 3 reactive code and determine the final value of state.count:

Vue

import { reactive } from 'vue';

const state = reactive({ count: 1 });

function increment() {
  state.count += 1;
}

increment();
increment();
state.count = 10;

A 10

B 3

C 2

D undefined

💡 Hint

The last assignment overwrites previous increments.

The function increment adds 1 twice, making count 3. Then state.count is set to 10, overwriting the previous value.

🧠 Conceptual

expert

Which statement best describes Vue 3's reactive behavior with nested objects?

Select the most accurate description of how Vue 3's reactive function handles nested objects and property additions.

A Vue 3's <code>reactive</code> makes nested objects reactive only if they exist at creation; new nested properties added later are not reactive.

B Vue 3's <code>reactive</code> automatically tracks all nested objects and any new properties added at any time.

C Vue 3's <code>reactive</code> only tracks top-level properties; nested objects must be wrapped separately with <code>reactive</code>.

D Vue 3's <code>reactive</code> requires all nested properties to be wrapped with <code>ref</code> to be reactive.

💡 Hint

Think about Vue 3's Proxy-based reactivity and how it handles dynamic property additions.

Vue 3 uses Proxies to make reactive objects deeply reactive. This automatically tracks all nested objects and supports adding new properties dynamically at any time, which become reactive.