Why advanced reactivity matters in Vue - See It in Action

Why advanced reactivity matters

📖 Scenario: You are building a small Vue app that tracks a list of tasks with their completion status. You want to see how Vue's advanced reactivity system helps keep the UI updated automatically when the data changes.

🎯 Goal: Create a Vue 3 component using the Composition API that holds a reactive list of tasks. Add a computed property to count completed tasks. Update the task status and see the UI update automatically without manual DOM changes.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive array of task objects with ref or reactive

Add a computed property that counts how many tasks are completed

Add a method to toggle a task's completion status

Render the list of tasks with checkboxes bound to their completion status

Display the count of completed tasks dynamically

💡 Why This Matters

🌍 Real World

Task lists and to-do apps are common in daily life. Using Vue's reactivity makes building these apps easier and more reliable.

💼 Career

Understanding Vue's reactivity system is essential for frontend developers working with modern web apps to create responsive and maintainable user interfaces.

1

Set up the reactive tasks list

Create a reactive array called tasks with these exact objects: { id: 1, title: 'Buy groceries', completed: false }, { id: 2, title: 'Walk the dog', completed: true }, and { id: 3, title: 'Read a book', completed: false }. Use Vue's ref or reactive to make it reactive.

Vue

// Create a reactive array called tasks with the given objects
// Your code here

Hint

Use ref from Vue to create a reactive array. Put the exact task objects inside the array.

2

Add a computed property for completed count

Import Vue's computed and create a computed property called completedCount that returns the number of tasks in tasks.value where completed is true.

Vue

import { ref, computed } from 'vue'

const tasks = ref([
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Read a book', completed: false }
])

// Create a computed property called completedCount
// Your code here

Hint

Use computed to create a reactive count that updates when tasks change.

3

Add a method to toggle task completion

Create a function called toggleTask that takes a taskId parameter. Inside, find the task in tasks.value with matching id and toggle its completed property from true to false or vice versa.

Vue

import { ref, computed } from 'vue'

const tasks = ref([
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Read a book', completed: false }
])

const completedCount = computed(() => tasks.value.filter(task => task.completed).length)

// Create a function toggleTask(taskId) to toggle completed status
// Your code here

Hint

Use find on tasks.value to locate the task, then flip its completed boolean.

4

Render tasks and completed count in template

Add a template that uses v-for to list each task with a checkbox bound to task.completed using :checked="task.completed". When the checkbox changes, call toggleTask(task.id). Below the list, display the text Completed Tasks: {{ completedCount }}.

Vue

import { ref, computed } from 'vue'

const tasks = ref([
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Read a book', completed: false }
])

const completedCount = computed(() => tasks.value.filter(task => task.completed).length)

function toggleTask(taskId) {
  const task = tasks.value.find(t => t.id === taskId)
  if (task) {
    task.completed = !task.completed
  }
}



  
  

Hint

Use v-for to loop tasks, bind checkbox with :checked="task.completed" and call toggleTask on @change. Show completed count below.