Vue Watch Explained — Watching Reactive Data Changes

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

Vue watch observes reactive data changes and runs side effects like API calls, localStorage sync, or analytics tracking when specified state changes.

What You'll Learn

• watch ref, reactive, and getter functions
• deep and immediate options
• watchEffect for automatic tracking
• Stopping watchers
• Flush timing

Why It Matters

Watchers handle imperative side effects that computed properties cannot. They are essential for reacting to state changes with operations like data fetching or DOM manipulation.

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search users..." />
    <div v-if="loading" class="spinner">Searching...</div>
    <ul v-else-if="results.length">
      <li v-for="user in results" :key="user.id">{{ user.name }}</li>
    </ul>
    <p v-else>No results</p>
  </div>
</template>

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

const searchQuery = ref("");
const results = ref([]);
const loading = ref(false);

watch(searchQuery, async (newQuery) => {
  if (newQuery.length < 2) {
    results.value = [];
    return;
  }

  loading.value = true;
  const res = await fetch(`https://api.example.com/users?q=${newQuery}`);
  results.value = await res.json();
  loading.value = false;
}, { debounce: 300 });
</script>

Expected output: Typing in the search input triggers an API call after 300ms debounce, displaying matching users or a "no results" message.