Watch and watchEffect in Vue - Mini Project: Build & Apply

Reactive Counter with watch and watchEffect in Vue

📖 Scenario: You are building a simple counter app using Vue 3. You want to learn how to react to changes in your data using watch and watchEffect.This will help you update other values or run side effects automatically when your counter changes.

🎯 Goal: Create a Vue component that has a reactive count variable. Use watch to log a message when count changes. Use watchEffect to update a doubleCount variable automatically when count changes.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive variable count initialized to 0

Create a reactive variable doubleCount initialized to 0

Use watch to log the new count value whenever it changes

Use watchEffect to update doubleCount to be twice the count

Render buttons to increment and decrement count

Display count and doubleCount in the template

💡 Why This Matters

🌍 Real World

Watching reactive data is common in Vue apps to run side effects like API calls, logging, or updating other data automatically.

💼 Career

Understanding watch and watchEffect is essential for Vue developers to build responsive and efficient user interfaces.

1

Setup reactive count and doubleCount

Create a Vue component with <script setup>. Inside it, import ref from 'vue'. Then create a reactive variable called count initialized to 0 and another reactive variable called doubleCount initialized to 0.

Vue

// Create reactive variables count and doubleCount
// Your code here



  

Hint

Use ref(0) to create reactive variables for count and doubleCount.

2

Add buttons to change count

In the <template>, add two buttons: one with a click event that increments count by 1, and another with a click event that decrements count by 1.

Vue

import { ref } from 'vue'

const count = ref(0)
const doubleCount = ref(0)



  
    Count: {{ count }}
    Double Count: {{ doubleCount }}
    
  

Hint

Use @click="count++" and @click="count--" on the buttons to change count.

3

Use watch to log changes to count

Import watch from 'vue'. Use watch to watch the count variable. Inside the watcher function, log the new value of count to the console with the message: `Count changed to: ${newValue}`.

Vue

import { ref, watch } from 'vue'

const count = ref(0)
const doubleCount = ref(0)

// Add watch to log count changes
// Your code here



  
    Count: {{ count }}
    Double Count: {{ doubleCount }}
    Increment
    Decrement
  

Hint

Use watch(count, (newValue) => { ... }) to react to changes in count.

4

Use watchEffect to update doubleCount

Import watchEffect from 'vue'. Use watchEffect to automatically update doubleCount.value to be count.value * 2 whenever count changes.

Vue

import { ref, watch, watchEffect } from 'vue'

const count = ref(0)
const doubleCount = ref(0)

watch(count, (newValue) => {
  console.log(`Count changed to: ${newValue}`)
})

// Add watchEffect to update doubleCount
// Your code here



  
    Count: {{ count }}
    Double Count: {{ doubleCount }}
    Increment
    Decrement
  

Hint

Use watchEffect(() => { doubleCount.value = count.value * 2 }) to keep doubleCount updated.

Practice

1. What is the main difference between watch and watchEffect in Vue?

easy

A. watchEffect only runs once, watch runs continuously.

B. watch tracks specific reactive sources, watchEffect tracks all reactive dependencies automatically.

C. watch runs immediately on setup, watchEffect waits for changes.

D. watchEffect requires manual cleanup, watch does not.

Solution

1. Step 1: Understand watch behavior

   watch listens to specific reactive data sources you specify and runs a callback only when those change.

2. Step 2: Understand watchEffect behavior

   watchEffect runs immediately and tracks all reactive data accessed inside it, rerunning whenever any of those change.

3. Final Answer:

   watch tracks specific reactive sources, watchEffect tracks all reactive dependencies automatically. -> Option B

4. Quick Check:

   watch vs watchEffect difference = watch tracks specific reactive sources, watchEffect tracks all reactive dependencies automatically. [OK]

Hint: Remember: watch tracks specific data, watchEffect tracks all used data [OK]

Common Mistakes:

• Thinking watchEffect only runs once
• Assuming watch runs immediately on setup
• Confusing cleanup requirements

2. Which of the following is the correct syntax to watch a reactive variable count in Vue 3 Composition API?

easy

A. watch(count, (newVal, oldVal) => { console.log(newVal) })

B. watch(count, () => { console.log(count) })

C. watchEffect(() => { console.log(count) })

D. watch(() => count, (newVal, oldVal) => { console.log(newVal) })

Solution

1. Step 1: Identify correct watch syntax

   In Vue 3 Composition API, watch accepts a ref directly as the first argument, which automatically watches its .value.

2. Step 2: Check callback parameters

   The callback receives newVal and oldVal as parameters, correctly used in watch(count, (newVal, oldVal) => { console.log(newVal) }) to log the new value.

3. Final Answer:

   watch(count, (newVal, oldVal) => { console.log(newVal) }) -> Option A

4. Quick Check:

   Correct watch syntax uses ref directly = watch(count, (newVal, oldVal) => { console.log(newVal) }) [OK]

Hint: Pass ref directly to watch [OK]

Common Mistakes:

• Using getter returning ref object like () => count
• Confusing watch with watchEffect syntax
• Omitting callback parameters

3. Given the code below, what will be logged to the console after count.value = 2 is executed?

import { ref, watch } from 'vue'
const count = ref(1)
watch(() => count.value, (newVal, oldVal) => {
  console.log(`Changed from ${oldVal} to ${newVal}`)
})
count.value = 2

medium

A. SyntaxError

B. Changed from undefined to 2

C. No output

D. Changed from 1 to 2

Solution

1. Step 1: Understand watch callback parameters

   The watch callback receives old and new values of the watched reactive source.

2. Step 2: Trace the change

   Initially, count.value is 1. When changed to 2, the callback logs the change from 1 to 2.

3. Final Answer:

   Changed from 1 to 2 -> Option D

4. Quick Check:

   watch logs old and new values correctly = Changed from 1 to 2 [OK]

Hint: watch callback shows old and new values on change [OK]

Common Mistakes:

• Expecting no output on change
• Confusing initial value with undefined
• Misunderstanding callback parameters

4. What is wrong with this Vue 3 code using watch? How to fix it?

import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal) => {
  console.log(newVal)
})

medium

A. No error; code works fine

B. Missing cleanup function; fix by adding cleanup inside callback

C. Callback missing oldVal parameter; fix by adding it

D. Passing reactive variable directly; fix by passing a getter function like () => count

Solution

1. Step 1: Identify watch argument type

   In Vue 3, watch(count, callback) is valid; it automatically tracks count.value changes.

2. Step 2: Callback parameters

   The callback receives newVal and optional oldVal; omitting oldVal is fine.

3. Final Answer:

   No error; code works fine -> Option A

4. Quick Check:

   watch accepts ref directly = No error; code works fine [OK]

Hint: watch accepts refs directly [OK]

Common Mistakes:

• Thinking ref must be wrapped in getter
• Assuming oldVal always required
• Believing code has error

5. You want to run a side effect immediately and re-run it whenever any reactive data inside changes, but also want to stop the effect manually later. Which Vue 3 API and pattern should you use?

hard

A. Use watch without immediate option and no cleanup

B. Use watch with immediate: true option and no stop function

C. Use watchEffect and store the returned stop function to call later

D. Use watchEffect but it cannot be stopped manually

Solution

1. Step 1: Identify immediate reactive effect

   watchEffect runs immediately and tracks all reactive dependencies automatically.

2. Step 2: Understand stopping effect

   watchEffect returns a stop function that can be called to stop the effect manually.

3. Final Answer:

   Use watchEffect and store the returned stop function to call later -> Option C

4. Quick Check:

   watchEffect runs immediately and can be stopped = Use watchEffect and store the returned stop function to call later [OK]

Hint: watchEffect returns stop function to control effect lifecycle [OK]

Common Mistakes:

• Thinking watchEffect cannot be stopped
• Using watch without immediate for immediate run
• Ignoring stop function usage