Vue Computed Properties and Watchers Explained

In this tutorial, you will learn about Vue Computed Properties and Watchers Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Computed properties derive values from reactive data with Caching, while watchers perform side effects when data changes. Both patterns keep template logic clean.

What You'll Learn

• How computed properties work with caching
• Getter and setter computed properties
• How watchers observe reactive data
• Deep and immediate watchers
• Computed vs methods vs watchers

Why It Matters

Computed properties prevent expensive recalculations and keep templates declarative. Watchers handle side effects like API calls or localStorage sync.

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search..." />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <p>Total items: {{ totalCount }}</p>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";

const searchQuery = ref("");
const items = ref([
  { id: 1, name: "Apple" },
  { id: 2, name: "Banana" },
  { id: 3, name: "Orange" },
]);

const filteredItems = computed(() =>
  items.value.filter(i => i.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
);

const totalCount = computed(() => filteredItems.value.length);

watch(searchQuery, (newVal, oldVal) => {
  console.log(`Search changed from "${oldVal}" to "${newVal}"`);
});
</script>

Expected output: Filtering updates instantly via computed, and the watcher logs changes to the console.