Reactivity caveats and limitations in Vue - Mini Project: Build & Apply

Understanding Reactivity Caveats and Limitations in Vue

📖 Scenario: You are building a simple Vue 3 app to track a list of tasks. You want to learn how Vue's reactivity system works and what its limits are.This will help you avoid common mistakes when updating data so your app updates correctly.

🎯 Goal: Create a Vue 3 component that shows a list of tasks and lets you add new tasks. You will learn how to set up reactive data, add a reactive property, update the list reactively, and handle Vue's reactivity caveats.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive array of tasks

Add a reactive property to track new task input

Add a function to add new tasks to the reactive array

Demonstrate a reactivity caveat by adding a new property to an existing reactive object

💡 Why This Matters

🌍 Real World

Understanding Vue's reactivity caveats helps you build reliable user interfaces that update correctly when data changes.

💼 Career

Vue developers must know how reactivity works to avoid bugs and write maintainable, efficient code in real projects.

1

Setup reactive tasks array

Create a Vue 3 component with <script setup>. Inside it, create a reactive array called tasks with these exact strings: 'Buy groceries', 'Walk the dog', and 'Read a book'.

Vue

  
    Task List
  



// Create a reactive array called tasks with 'Buy groceries', 'Walk the dog', and 'Read a book'

Need a hint?

Use ref from Vue to create a reactive array called tasks.

2

Add reactive new task input

Add a reactive string variable called newTask initialized to an empty string '' inside the <script setup>.

Vue

  
    Task List
  



import { ref } from 'vue'

const tasks = ref(['Buy groceries', 'Walk the dog', 'Read a book'])
// Create a reactive string variable newTask initialized to ''

Need a hint?

Use ref to create a reactive string variable newTask with an empty string.

3

Add function to add new tasks

Add a function called addTask that pushes the value of newTask.value into the tasks.value array, then clears newTask.value to an empty string ''.

Vue

  
    Task List
  



import { ref } from 'vue'

const tasks = ref(['Buy groceries', 'Walk the dog', 'Read a book'])
const newTask = ref('')

// Add a function addTask that pushes newTask.value to tasks.value and clears newTask.value

Need a hint?

Define a function addTask that updates the reactive array and clears the input.

4

Demonstrate reactivity caveat with new property

Inside <script setup>, create a reactive object called taskDetails with one property completed set to false. Then add a new property priority with value 'high' directly on taskDetails.value after creation to show Vue does not detect this addition reactively.

Vue

  
    Task List
  



import { ref } from 'vue'

const tasks = ref(['Buy groceries', 'Walk the dog', 'Read a book'])
const newTask = ref('')

function addTask() {
  tasks.value.push(newTask.value)
  newTask.value = ''
}

// Create reactive object taskDetails with completed: false
// Then add priority: 'high' property directly on taskDetails.value

Need a hint?

Create a reactive object with ref and add a new property after creation to see Vue's reactivity caveat.