Vue Academy · Lesson

Computed and Watch in Composition API

computed() for derived state, watch() and watchEffect() for side effects.

Computed and Watch in Composition API is a free Vue Academy lesson on CoddyKit — lesson 4 of 4. 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 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Deriving and Reacting to State

Reactive state is only half the story. You also need to derive new values from it and react to changes. The Composition API offers computed, watch, and watchEffect for this.

computed for Derived Values

computed() takes a getter function and returns a ref whose value is derived from other reactive state. Access it with .value in JS, unwrapped in the template.

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed Is Lazy and Cached

A computed only recalculates when one of its reactive dependencies changes. If you read it ten times without changes, the getter runs once and the cached result is reused.

This makes computed ideal for expensive derivations.

computed Updates Automatically

Change a dependency and the computed updates the next time it is read. You never call it manually.

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

watch for Side Effects

watch() observes a reactive source and runs a callback when it changes. The callback receives the new value and the old value.

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch Is Lazy by Default

Unlike a computed, watch does not run its callback immediately. It waits for the first change. Use it for side effects: logging, fetching data, saving to storage.

Watching Multiple Sources

Pass an array of sources to watch several values at once. The callback receives arrays of new and old values.

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

Watching a Getter

To watch a property of a reactive object, pass a getter function. Watching the object directly only fires on deep changes, which can be surprising.

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect: Eager and Auto-Tracking

watchEffect() runs its function immediately and re-runs whenever any reactive value used inside it changes. You do not list dependencies — they are tracked automatically.

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

watch vs watchEffect

watch: explicit source, lazy, gives you old and new values.
watchEffect: auto-tracks deps, runs eagerly, no access to old value.

Use watch when you need the previous value or want precise control. Use watchEffect for quick reactive side effects.

computed vs watch

Reach for computed when you want a new derived value. Reach for watch or watchEffect when you want to perform an action in response to a change. Do not use watch to recompute a value — that is what computed is for.

Quick Check

Choose the right reactive helper.

Recap

You now know how to derive and react:

computed creates lazy, cached derived values.
watch reacts to a specific source and gives new and old values; it is lazy.
watchEffect runs eagerly and auto-tracks dependencies.
Use computed for values, watch/watchEffect for side effects.

Frequently asked questions

Is the “Computed and Watch in Composition API” lesson free?

Yes — the full text of “Computed and Watch in Composition API” is free to read here on the web, and the Vue Academy course includes 4 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 “Computed and Watch in Composition API”?

computed() for derived state, watch() and watchEffect() for side effects. 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 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Computed and Watch in Composition API” 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

← Back to Vue Academy