Reactive objects with reactive in Vue - Mini Project: Build & Apply

Reactive objects with reactive

📖 Scenario: You are building a simple Vue 3 app to track a user's profile information reactively. This means when the data changes, the UI updates automatically.

🎯 Goal: Create a reactive object using Vue's reactive function to hold user profile data, then update and display it reactively.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive object called userProfile with exact keys and values

Add a reactive variable ageLimit to control age validation

Use a watchEffect to reactively check if user's age is above ageLimit

Display the user's name and age in the template

💡 Why This Matters

🌍 Real World

Reactive objects are used in Vue apps to keep data and UI in sync automatically, such as user profiles, settings, or live data dashboards.

💼 Career

Understanding Vue's reactivity system is essential for frontend developers building modern, interactive web applications.

1

Create a reactive user profile object

In the <script setup> block, import reactive from 'vue' and create a reactive object called userProfile with these exact properties and values: name: 'Alice', age: 28, email: '[e-mail]'.

Vue

// Import reactive and create userProfile object
// Your code here



  

Hint

Use import { reactive } from 'vue' and then const userProfile = reactive({ ... }) with the exact keys and values.

2

Add a reactive age limit variable

Below the userProfile object, create a reactive variable called ageLimit and set it to 18. Import ref from 'vue' to create this reactive variable.

Vue

import { reactive, ref } from 'vue'

const userProfile = reactive({
  name: 'Alice',
  age: 28,
  email: '[e-mail]'
})
// Create ageLimit reactive variable here
// Your code here



  

Hint

Import ref and create const ageLimit = ref(18) below the reactive object.

3

Add a watchEffect to check age against ageLimit

Import watchEffect from 'vue'. Use watchEffect to create a reactive effect that checks if userProfile.age is greater than or equal to ageLimit.value. Inside the effect, set a new reactive variable isAdult to true if age is above or equal, otherwise false. Create isAdult as a ref with initial value false.

Vue

import { reactive, ref, watchEffect } from 'vue'

const userProfile = reactive({
  name: 'Alice',
  age: 28,
  email: '[e-mail]'
})

const ageLimit = ref(18)

// Create isAdult ref and watchEffect here
// Your code here



  

Hint

Import watchEffect, create isAdult as a ref(false), then use watchEffect to update isAdult.value based on age comparison.

4

Display user name and age in the template

In the <template> section, add two paragraphs: one showing the user's name using {{ userProfile.name }} and another showing the user's age using {{ userProfile.age }}. Also add a paragraph that shows "Adult" if isAdult.value is true, otherwise "Minor". Use Vue's interpolation syntax and the reactive variables exactly as named.

Vue

import { reactive, ref, watchEffect } from 'vue'

const userProfile = reactive({
  name: 'Alice',
  age: 28,
  email: '[e-mail]'
})

const ageLimit = ref(18)
const isAdult = ref(false)

watchEffect(() => {
  isAdult.value = userProfile.age >= ageLimit.value
})



  
  

Hint

Use interpolation with {{ userProfile.name }}, {{ userProfile.age }}, and a conditional expression for isAdult.value inside paragraphs.

Practice

1. What does the reactive function in Vue do?

easy

A. It converts a reactive object into a plain JavaScript object.

B. It makes an object reactive so Vue tracks its changes automatically.

C. It creates a new Vue component.

D. It registers a global event listener.

Solution

1. Step 1: Understand the purpose of reactive

   The reactive function wraps an object so Vue can track its property changes.

2. Step 2: Compare options with the purpose

   Only It makes an object reactive so Vue tracks its changes automatically. correctly describes this behavior; others describe unrelated Vue features.

3. Final Answer:

   It makes an object reactive so Vue tracks its changes automatically. -> Option B

4. Quick Check:

   reactive() tracks object changes = C [OK]

Hint: Remember: reactive() wraps objects to track changes [OK]

Common Mistakes:

• Confusing reactive() with component creation
• Thinking reactive() converts reactive objects back to plain objects
• Assuming reactive() adds event listeners

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

easy

A. const state = reactive.count = 0

B. const state = reactive = { count: 0 }

C. const state = reactive([count: 0])

D. const state = reactive({ count: 0 })

Solution

1. Step 1: Check the syntax for reactive object creation

   The correct syntax is calling reactive() with an object: reactive({ count: 0 }).

2. Step 2: Identify syntax errors in other options

   const state = reactive = { count: 0 } uses invalid assignment, C uses array syntax incorrectly, D tries to assign property directly without reactive call.

3. Final Answer:

   const state = reactive({ count: 0 }) -> Option D

4. Quick Check:

   reactive() called with object literal = A [OK]

Hint: Use reactive() with an object inside parentheses [OK]

Common Mistakes:

• Using assignment instead of function call
• Passing array instead of object
• Assigning properties outside reactive()

3. Given this code, what will be logged to the console?

import { reactive } from 'vue'
const state = reactive({ count: 1 })
state.count = 5
console.log(state.count)

medium

A. 5

B. Error: Cannot assign to reactive property

C. undefined

D. 1

Solution

1. Step 1: Understand reactive object property update

   Assigning state.count = 5 updates the reactive property value.

2. Step 2: Check the logged value

   Logging state.count after update outputs the new value 5.

3. Final Answer:

   5 -> Option A

4. Quick Check:

   Updated reactive property logs new value = D [OK]

Hint: Reactive objects update properties directly and reflect changes [OK]

Common Mistakes:

• Thinking reactive objects are immutable
• Expecting old value after update
• Confusing reactive with ref syntax

4. What is wrong with this Vue 3 code snippet?

import { reactive } from 'vue'
const state = reactive({ count: 0 })
state = { count: 5 }

medium

A. You cannot reassign a reactive object variable directly.

B. The reactive function requires an array, not an object.

C. The property count must be declared with ref(), not reactive.

D. Reactive objects cannot have numeric properties.

Solution

1. Step 1: Identify the error in variable reassignment

   The variable state is declared with const, so it cannot be reassigned.

2. Step 2: Understand reactive object usage

   Reactive objects are mutable in their properties but the variable holding them cannot be reassigned if declared const.

3. Final Answer:

   You cannot reassign a reactive object variable directly. -> Option A

4. Quick Check:

   const variable reassignment causes error = A [OK]

Hint: const variables can't be reassigned, only their properties changed [OK]

Common Mistakes:

• Trying to reassign const reactive variables
• Confusing reactive() input types
• Thinking reactive objects restrict property types

5. You want to create a reactive object to track a user's profile with nested address info. Which code correctly makes the entire object reactive so changes to nested properties update the UI?

hard

A. const profile = reactive({ name: 'Alice' }); profile.address = { city: 'NY', zip: '10001' }

B. const profile = { name: 'Alice', address: reactive({ city: 'NY', zip: '10001' }) }

C. const profile = reactive({ name: 'Alice', address: { city: 'NY', zip: '10001' } })

D. const profile = reactive({ name: 'Alice', address: ref({ city: 'NY', zip: '10001' }) })

Solution

1. Step 1: Understand nested reactivity with reactive()

   Using reactive() on the whole object recursively makes nested properties reactive automatically.

2. Step 2: Analyze each option's approach

   const profile = reactive({ name: 'Alice', address: { city: 'NY', zip: '10001' } }) wraps the entire object including nested address, so all changes are reactive. const profile = reactive({ name: 'Alice' }); profile.address = { city: 'NY', zip: '10001' } assigns a plain object to nested property after reactive call, losing reactivity for nested changes. const profile = { name: 'Alice', address: reactive({ city: 'NY', zip: '10001' }) } mixes reactive inside plain object, which breaks reactivity tracking. const profile = reactive({ name: 'Alice', address: ref({ city: 'NY', zip: '10001' }) }) mixes ref inside reactive, which is invalid since reactive expects plain objects.

3. Final Answer:

   const profile = reactive({ name: 'Alice', address: { city: 'NY', zip: '10001' } }) -> Option C

4. Quick Check:

   reactive() wraps whole nested object = B [OK]

Hint: Wrap entire nested object with reactive() for full reactivity [OK]

Common Mistakes:

• Wrapping nested objects separately after reactive() call
• Mixing reactive and plain objects incorrectly
• Assigning plain objects to reactive properties