Reactivity caveats and limitations in Vue - Step-by-Step Execution

Concept Flow - Reactivity caveats and limitations

Start with reactive data

↓

Change reactive property

↓

Vue tracks dependency

↓

Trigger update

↓

Component re-renders

↓

Check for caveats

↓

Works

↓

Manual fix or workaround

This flow shows how Vue tracks reactive data changes and updates components, but also highlights where limitations require manual handling.

Execution Sample

Vue

import { reactive, effect } from 'vue'

const state = reactive({ count: 0 })

effect(() => {
  console.log(state.count)
})

state.count = 1

This code creates a reactive object and an effect that logs the count whenever it changes.

Execution Table

Step	Action	Reactive Property	Effect Triggered	Console Output
1	Create reactive object	count = 0	No
2	Register effect	count = 0	Yes (initial run)	0
3	Update count to 1	count = 1	Yes	1
4	Update nested property (not reactive)	nested.prop = 2	No
5	Add new property dynamically	newProp = 3	No
6	Manually trigger update after adding newProp	newProp = 3	Yes	3

💡 Reactivity stops automatically tracking new or nested properties unless handled explicitly.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	After Step 6
state.count	0	1	1	1	1
state.nested.prop	undefined	undefined	2	2	2
state.newProp	undefined	undefined	undefined	3	3

Key Moments - 3 Insights

Why doesn't Vue react to adding a new property dynamically?

Vue's reactivity system tracks properties present when the reactive object is created. Adding new properties later (see step 5 in execution_table) is not detected automatically, so no effect triggers.

Why doesn't changing a nested property trigger reactivity?

If nested objects are not reactive themselves, Vue won't track changes inside them (step 4). You must make nested objects reactive explicitly to track their changes.

How can we make Vue react to new properties added after creation?

You can use direct property assignment or reassign a tracked property to trigger updates manually (step 6).

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the effect first log '1'?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Check the 'Console Output' column for when '1' appears.

According to variable_tracker, what is the value of 'state.newProp' after step 4?

A undefined

B 3

C 2

D 0

💡 Hint

Look at the 'state.newProp' row under 'After Step 4' column.

If we want Vue to react to 'newProp' added dynamically, what must we do according to the execution flow?

A Remove the reactive wrapper

B Nothing, Vue tracks all changes automatically

C Manually trigger update or use direct assignment

D Only update existing properties

💡 Hint

Refer to step 6 in execution_table and key_moments about manual updates.

Concept Snapshot

Vue reactivity tracks properties present at reactive object creation.
Adding new properties later is NOT reactive automatically.
Nested objects must be reactive to track inner changes.
Use direct assignment or manual triggers to update new properties.
Effects run when tracked reactive properties change.

Full Transcript

This visual execution shows Vue's reactivity system starting with a reactive object containing a count property. An effect logs the count whenever it changes. When count updates from 0 to 1, the effect triggers and logs '1'. However, adding new properties or changing nested properties does not trigger effects automatically because Vue only tracks properties present at creation and nested objects must be reactive themselves. To handle new properties, manual triggers or Vue.set are needed. This helps beginners understand where Vue's reactivity works automatically and where manual intervention is required.

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