0Pricing
Vue Academy · Lesson

Watchers and Deep Reactivity

React to data changes with watchers and deep watching.

Watchers and Deep Reactivity is a free Vue Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Watcher?

A watcher runs a function in response to a data change.

  • Unlike computed, it is for side effects
  • Fetching data, logging, saving to storage
  • You react when something specific changes

The watch Function

The watch function takes a source to watch and a callback that receives new and old values.

import { ref, watch } from "vue"

const query = ref("")

watch(query, (newVal, oldVal) => {
  console.log("changed from", oldVal, "to", newVal)
})

A Practical Example

Watching a search input to trigger an API call when it changes.

const search = ref("")

watch(search, async (newQuery) => {
  const results = await fetchResults(newQuery)
  items.value = results
})

The immediate Option

By default a watcher fires only on changes. The immediate option also runs it once right away.

watch(userId, (id) => {
  loadUser(id)
}, { immediate: true })

// Runs immediately with the current value,
// then again on every change

The deep Option

Watching an object only fires on reference changes by default. The deep option watches nested properties too.

const profile = reactive({ name: "Ada", address: { city: "London" } })

watch(profile, (val) => {
  console.log("profile changed")
}, { deep: true })

// Fires even when profile.address.city changes

Watching Nested Objects

Without deep, changing a nested property of a watched reactive object may not trigger the callback as expected. deep ensures it does, at the cost of more work.

  • Use deep only when you truly need nested tracking
  • Deep watching large objects can be expensive

Watching a Getter

To watch a specific nested value, pass a getter function as the source.

watch(
  () => profile.address.city,
  (newCity) => {
    console.log("city is now", newCity)
  }
)

Watching Multiple Sources

Pass an array of sources to watch several values at once.

watch([width, height], ([newW, newH], [oldW, oldH]) => {
  console.log("size:", newW, "x", newH)
})

watchEffect

watchEffect runs immediately and re-runs whenever any reactive value it reads changes. No explicit source list needed.

import { watchEffect } from "vue"

watchEffect(() => {
  console.log("count is", count.value)
})

// Runs now, and again whenever count changes

watch vs watchEffect

Choosing between them:

  • watch explicit source, gives old and new values, lazy by default
  • watchEffect tracks dependencies automatically, runs immediately, no old value

Use watch when you need the previous value or precise control; watchEffect for convenience.

Watchers in the Options API

The Options API declares watchers in a watch block keyed by the data name.

export default {
  data() {
    return { question: "" }
  },
  watch: {
    question(newVal, oldVal) {
      this.getAnswer(newVal)
    }
  }
}

Quick Check

Test your understanding of watchers.

Recap: Watchers and Deep Reactivity

You learned to react to changes with side effects:

  • watch observes a source and gives new and old values
  • immediate runs it once at the start
  • deep tracks nested object changes
  • watchEffect auto-tracks dependencies and runs immediately
  • Watch multiple sources with an array

Next: routing with Vue Router.

Frequently asked questions

Is the “Watchers and Deep Reactivity” lesson free?

Yes — the full text of “Watchers and Deep Reactivity” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Watchers and Deep Reactivity”?

React to data changes with watchers and deep watching. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Watchers and Deep Reactivity” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Reactivity Fundamentals
  2. Computed Properties
  3. Watchers and Deep Reactivity
← Back to Vue Academy