Why deep reactivity understanding matters in Vue - See It in Action

Why Deep Reactivity Understanding Matters in Vue

📖 Scenario: You are building a simple Vue 3 app to track a user's profile information. You want to see how Vue's reactivity system updates the UI when nested data changes.

🎯 Goal: Build a Vue 3 component that uses a reactive object with nested properties. Update nested properties and see the UI update automatically. This will help you understand why deep reactivity matters in Vue.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive object with nested properties

Add a button to update a nested property

Display nested property values in the template

Observe UI updates when nested data changes

💡 Why This Matters

🌍 Real World

Understanding deep reactivity helps you build dynamic Vue apps where nested data changes reflect instantly in the UI, such as user profiles, settings, or complex forms.

💼 Career

Vue developers must grasp deep reactivity to debug UI update issues and write efficient, maintainable reactive code in real projects.

1

Create a reactive user profile object

Inside <script setup>, create a reactive object called userProfile with these exact nested properties: name set to "Alice", and address which itself is an object with city set to "Wonderland".

Vue

// Create reactive userProfile object with nested properties
// Your code here



  

Hint

Use Vue's reactive function to create a reactive object with nested properties.

2

Add a button to update the nested city property

Add a function called changeCity inside <script setup> that changes userProfile.address.city to "Dreamland". Also add a button in the template with @click="changeCity" and label it Change City.

Vue

import { reactive } from 'vue'

const userProfile = reactive({
  name: "Alice",
  address: {
    city: "Wonderland"
  }
})

// Add changeCity function here
// Your code here



  
  

Hint

Create a function to update the nested city property and a button to trigger it.

3

Display the nested city property in the template

Inside the template, add a paragraph that shows the text Current city: followed by the value of userProfile.address.city using Vue's interpolation syntax.

Vue

import { reactive } from 'vue'

const userProfile = reactive({
  name: "Alice",
  address: {
    city: "Wonderland"
  }
})

function changeCity() {
  userProfile.address.city = "Dreamland"
}



  Change City
  
  

Hint

Use double curly braces {{ }} to show the nested city property in the template.

4

Add the user name display and wrap content in a semantic section

In the template, add a heading <h2> that displays User: followed by userProfile.name. Wrap the button and paragraph inside a <section> element with aria-label="User Profile Section" for accessibility.

Vue

import { reactive } from 'vue'

const userProfile = reactive({
  name: "Alice",
  address: {
    city: "Wonderland"
  }
})

function changeCity() {
  userProfile.address.city = "Dreamland"
}



  
  
  

Hint

Use semantic HTML and add an aria-label for accessibility. Display the user name in an <h2> heading.

Practice

1. Why is deep reactivity important in Vue when working with nested objects?

easy

A. Because deep reactivity slows down the app and should be avoided.

B. Because Vue can track changes inside nested objects and update the UI accordingly.

C. Because Vue ignores nested objects and only tracks top-level properties.

D. Because Vue requires manual DOM updates for nested object changes.

Solution

1. Step 1: Understand Vue's reactivity system

   Vue tracks changes in data to update the UI automatically. Deep reactivity means it watches nested objects, not just top-level properties.

2. Step 2: Recognize the benefit of deep reactivity

   This allows the UI to reflect changes inside nested objects without extra code, preventing bugs and keeping the app reliable.

3. Final Answer:

   Because Vue can track changes inside nested objects and update the UI accordingly. -> Option B

4. Quick Check:

   Deep reactivity = UI updates nested changes [OK]

Hint: Deep reactivity means nested data changes update UI automatically [OK]

Common Mistakes:

• Thinking Vue only tracks top-level properties
• Believing manual DOM updates are needed for nested changes
• Assuming deep reactivity hurts performance always

2. Which of the following is the correct way to make a nested object reactive in Vue 3?

easy

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

B. const state = shallowRef({ user: { name: 'Alice' } })

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

D. const state = ref('user', { name: 'Alice' })

Solution

1. Step 1: Recall Vue 3 reactivity APIs

   Vue 3 uses reactive() for deep reactive objects and ref() for primitive or shallow reactive references.

2. Step 2: Identify correct nested reactive syntax

   Using reactive() on an object with nested objects makes all nested properties reactive automatically.

3. Final Answer:

   const state = reactive({ user: { name: 'Alice' } }) -> Option A

4. Quick Check:

   Use reactive() for nested objects [OK]

Hint: Use reactive() for nested objects, ref() for primitives [OK]

Common Mistakes:

• Using ref() for nested objects expecting deep reactivity
• Wrapping nested objects again with reactive() unnecessarily
• Incorrect ref() syntax with multiple arguments

3. Given the code:

const state = reactive({ profile: { age: 30 } })

function updateAge() {
  state.profile.age = 31
}

updateAge()
console.log(state.profile.age)

What will be logged to the console?

medium

A. Error: Cannot assign to read only property

B. 30

C. undefined

D. 31

Solution

1. Step 1: Understand reactive object behavior

   The state object is reactive, so nested properties like profile.age are tracked and can be updated.

2. Step 2: Trace the updateAge function

   The function sets state.profile.age to 31, changing the reactive property.

3. Final Answer:

   31 -> Option D

4. Quick Check:

   Reactive nested property updates reflect immediately [OK]

Hint: Reactive nested changes update values immediately [OK]

Common Mistakes:

• Expecting old value because nested reactivity is misunderstood
• Thinking assignment causes error on reactive objects
• Confusing reactive with readonly objects

4. Consider this Vue 3 code:

const state = reactive({ items: [{ id: 1, name: 'A' }] })

function addItem() {
  state.items.push({ id: 2, name: 'B' })
}

addItem()
console.log(state.items.length)

What is the likely issue if the UI does not update after calling addItem()?

medium

A. The array was not made reactive properly, so Vue can't track push changes.

B. The push method is not reactive and cannot update Vue state.

C. The reactive object must be replaced entirely to update the UI.

D. Vue only tracks changes on primitive values, not arrays.

Solution

1. Step 1: Check how reactivity applies to arrays

   Vue's reactive() tracks arrays deeply, but if the array was not reactive, push won't trigger updates.

2. Step 2: Identify common mistake

   If items was not wrapped in reactive(), Vue won't detect push changes, so UI won't update.

3. Final Answer:

   The array was not made reactive properly, so Vue can't track push changes. -> Option A

4. Quick Check:

   Arrays must be reactive to track push/pop [OK]

Hint: Ensure arrays are reactive to track mutations like push [OK]

Common Mistakes:

• Assuming push is non-reactive in Vue
• Replacing whole array unnecessarily
• Believing Vue only tracks primitives

5. You have a deeply nested reactive object:

const state = reactive({
  user: {
    profile: {
      settings: { theme: 'light' }
    }
  }
})

// Later in code
state.user.profile.settings.theme = 'dark'

Why might Vue fail to update the UI if settings was added later like this?

const settings = { theme: 'light' }
state.user.profile.settings = settings

hard

A. Because Vue only tracks changes on the first level of objects.

B. Because primitive values like strings are not reactive in Vue.

C. Because replacing a nested object after initialization breaks reactivity unless done with reactive().

D. Because Vue requires manual DOM updates for nested object changes.

Solution

1. Step 1: Understand reactivity on replaced nested objects

   Replacing a nested object directly breaks reactivity unless the new object is made reactive.

2. Step 2: Recognize Vue 3 solution

   In Vue 3, you must assign a reactive object or use reactive() when replacing nested objects to keep reactivity.

3. Final Answer:

   Because replacing a nested object after initialization breaks reactivity unless done with reactive(). -> Option C

4. Quick Check:

   Replace nested objects with reactive() to keep reactivity [OK]

Hint: Replace nested objects with reactive() to keep reactivity [OK]

Common Mistakes:

• Assuming Vue tracks replaced nested objects automatically
• Thinking Vue only tracks top-level changes
• Believing primitives are not reactive