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



  

Need a 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



  

Need a 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



  

Need a 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
})



  
  

Need a hint?

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