Reactivity caveats and limitations in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you directly assign a new property to a reactive object?

Consider a reactive object created with reactive(). What will happen if you add a new property directly after creation?

Vue

import { reactive } from 'vue';
const state = reactive({ count: 0 });
state.newProp = 123;
console.log(state.newProp);

A The new property is added but is not reactive; changes won't trigger updates.

B The new property is reactive and updates will trigger re-renders.

C Vue throws an error because new properties cannot be added to reactive objects.

D The new property is reactive only if declared with <code>ref()</code>.

💡 Hint

Think about how Vue tracks reactivity on object properties.

Vue's reactive() wraps existing properties to be reactive. Adding new properties directly after creation does not make them reactive automatically. To add reactive properties later, you should use ref() or reactive() properly.

❓ state_output

intermediate

What is the output when mutating an array inside a reactive object?

Given the following code, what will be logged to the console?

Vue

import { reactive } from 'vue';
const state = reactive({ items: [1, 2, 3] });
state.items.push(4);
console.log(state.items.length);

A 3

B undefined

C 4

D Throws a TypeError

💡 Hint

Arrays inside reactive objects are reactive. What happens when you push an item?

Vue wraps arrays inside reactive objects, so mutating methods like push are reactive and update the array length. The console logs 4 because the new item was added.

📝 Syntax

advanced

Which option correctly uses toRefs to avoid losing reactivity when destructuring?

Given a reactive object, which code snippet correctly destructures properties while preserving reactivity?

Vue

import { reactive, toRefs } from 'vue';
const state = reactive({ count: 0, name: 'Vue' });
// Destructure here

A const count = toRefs(state.count); const name = toRefs(state.name);

B const { count, name } = state;

C const count = state.count.value; const name = state.name.value;

D const { count, name } = toRefs(state);

💡 Hint

Think about how to keep reactivity when extracting properties.

Direct destructuring (option D) breaks reactivity because it copies values. Using toRefs returns refs for each property, preserving reactivity. Option D is correct.

🔧 Debug

advanced

Why does this reactive object not update the template when a nested property changes?

Examine the code below. Why does changing state.user.address.city not update the template?

Vue

import { reactive } from 'vue';
const state = reactive({ user: {} });
state.user.address = { city: 'Paris' };
// Later in code
state.user.address.city = 'London';

A Because <code>state.user.address.city</code> is a primitive and cannot be reactive.

B Because <code>address</code> was added after <code>user</code> was made reactive, it is not reactive.

C Because <code>reactive</code> only tracks top-level properties, not nested ones.

D Because nested objects cannot be reactive in Vue.

💡 Hint

Think about when properties are added to reactive objects.

Vue's reactive() only makes existing properties reactive. Adding address after creation means it is not reactive. Changes to city inside address won't trigger updates.

🧠 Conceptual

expert

What is a key limitation of Vue's reactivity system regarding property deletion?

Which statement best describes Vue's behavior when deleting a property from a reactive object?

A Vue does not track property deletions; deleting a property does not trigger reactive updates.

B Vue throws an error if you try to delete a property from a reactive object.

C Deleting a property from a reactive object triggers reactivity and updates the UI automatically.

D Deleting a property converts the reactive object into a non-reactive plain object.

💡 Hint

Consider how Vue tracks changes to object properties.

Vue's reactivity system does not detect property deletions. Deleting a property does not trigger updates, so the UI may not reflect the change unless handled explicitly.

Practice

1. Which of the following is a known limitation of Vue's reactivity system?

easy

A. Using Vue's reactive() function disables reactivity for nested objects.

B. Changing a reactive property always triggers an update immediately.

C. Adding a new property directly to an existing reactive object won't trigger updates.

D. Vue automatically tracks changes to all array indices without exceptions.

Solution

1. Step 1: Understand Vue's reactivity on object properties

   Vue cannot detect new properties added directly to an existing reactive object after its creation.

2. Step 2: Compare options with this limitation

   Adding a new property directly to an existing reactive object won't trigger updates correctly states this limitation. The other options are incorrect because reactive() supports nested objects, property changes do trigger updates (though batched asynchronously), and Vue has exceptions for some array changes like setting length.

3. Final Answer:

   Adding a new property directly to an existing reactive object won't trigger updates. -> Option C

4. Quick Check:

   New object properties not reactive = C [OK]

Hint: Remember: Vue can't detect new object properties added later [OK]

Common Mistakes:

• Assuming all object property additions are reactive
• Thinking array index changes always trigger updates
• Believing reactive() disables nested reactivity

2. Which syntax correctly updates an array element reactively in Vue?

easy

A. myArray[2] = 'new value'

B. myArray = ['new value']

C. myArray.push('new value')

D. myArray.$set(2, 'new value')

Solution

1. Step 1: Identify reactive array update methods

   Directly assigning to an array index (like myArray[2] = ...) is reactive in Vue 3 for reactive arrays.

2. Step 2: Evaluate each option

   myArray[2] = 'new value' uses direct assignment which triggers reactivity in Vue 3. myArray = ['new value'] replaces the whole array. myArray.push('new value') adds an element at the end. myArray.$set(2, 'new value') uses Vue 2 syntax unavailable in Vue 3.

3. Final Answer:

   myArray[2] = 'new value' -> Option A

4. Quick Check:

   Direct array index updates reactive in Vue 3 = A [OK]

Hint: Directly assign to reactive array indices in Vue 3 [OK]

Common Mistakes:

• Replacing the entire array instead of updating an element
• Using push() to update a specific index
• Using Vue 2 methods like $set in Vue 3

3. Given the code:

const state = reactive({ items: ['a', 'b', 'c'] });
state.items[1] = 'x';
console.log(state.items);

What will be logged?

medium

A. ['a', 'b', 'c']

B. ['a', 'x', 'c']

C. Error: Cannot assign to reactive array index

D. ['a', 'b', 'c', 'x']

Solution

1. Step 1: Understand array index reactivity in Vue 3

   In Vue 3, reactive arrays track direct index assignments reactively, so state.items[1] = 'x' updates the array.

2. Step 2: Predict the console output

   The array changes from ['a', 'b', 'c'] to ['a', 'x', 'c'], so logging state.items shows the updated array.

3. Final Answer:

   ['a', 'x', 'c'] -> Option B

4. Quick Check:

   Vue 3 reactive arrays track index changes = A [OK]

Hint: Vue 3 tracks direct array index changes reactively [OK]

Common Mistakes:

• Thinking direct index assignment is not reactive in Vue 3
• Expecting an error on index assignment
• Confusing array push with index update

4. What is the problem with this Vue reactive code?

const obj = reactive({});
obj.newProp = 123;
console.log(obj.newProp);

medium

A. newProp is added but changes won't trigger updates

B. newProp is reactive and logs 123

C. newProp is not reactive and logs undefined

D. Code throws a runtime error

Solution

1. Step 1: Check adding new properties to reactive objects

   Vue cannot detect new properties added directly to reactive objects after creation, so newProp is added but not reactive.

2. Step 2: Understand console output and reactivity

   newProp logs 123 correctly, but changes to it won't trigger UI updates because Vue didn't track it reactively.

3. Final Answer:

   newProp is added but changes won't trigger updates -> Option A

4. Quick Check:

   New object properties added later not tracked = B [OK]

Hint: New object properties added later are not reactive by default [OK]

Common Mistakes:

• Assuming newProp is reactive immediately
• Expecting undefined instead of 123
• Thinking code throws an error

5. You want to add a new property age to a reactive object user and ensure Vue tracks it reactively. Which approach is correct?

hard

A. user['age'] = 30

B. user.age = 30

C. Vue.set(user, 'age', 30)

D. user = { ...user, age: 30 }

Solution

1. Step 1: Understand Vue 3 reactivity and adding new properties

   Vue 3 does not track new properties added directly to reactive objects. Using object spread creates a new reactive object with the new property.

2. Step 2: Evaluate each option for reactivity

   Direct property assignments do not make properties reactive. Vue.set(user, 'age', 30) is Vue 2 syntax and not available in Vue 3. user = { ...user, age: 30 } creates a new reactive object with age included, ensuring reactivity.

3. Final Answer:

   user = { ...user, age: 30 } -> Option D

4. Quick Check:

   Use object spread to add reactive properties = A [OK]

Hint: Use object spread to add reactive properties in Vue 3 [OK]

Common Mistakes:

• Using Vue.set in Vue 3 (deprecated)
• Adding properties directly expecting reactivity
• Confusing direct assignment with reactive update