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.