Watchers for side effects in Vue - Mini Project: Build & Apply

Using Watchers for Side Effects in Vue

📖 Scenario: You are building a simple Vue app that tracks a user's input text and automatically updates a message when the text changes.

🎯 Goal: Create a Vue component that uses a watch to react to changes in a reactive variable and update another variable as a side effect.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive variable inputText initialized to an empty string

Create a reactive variable message initialized to 'Waiting for input...'

Use a watch to update message whenever inputText changes

Display both inputText and message in the template

💡 Why This Matters

🌍 Real World

Watching reactive data to trigger side effects is common in forms, live search, and dynamic UI updates.

💼 Career

Understanding watchers helps build responsive Vue apps that react to user input and data changes efficiently.

1

Set up reactive input variable

Inside the <script setup> block, import ref from 'vue' and create a reactive variable called inputText initialized to an empty string ''.

Vue

  
    
    Input: {{ inputText }}
    Message: {{ message }}
  



import { ref } from 'vue'

// Create reactive variable inputText initialized to empty string
// Your code here

Need a hint?

Use ref('') to create a reactive string variable called inputText.

2

Add reactive message variable

Below the inputText declaration, create another reactive variable called message initialized to the string 'Waiting for input...'.

Vue

  
    
    Input: {{ inputText }}
    Message: {{ message }}
  



import { ref } from 'vue'

const inputText = ref('')
// Create reactive variable message initialized to 'Waiting for input...'
// Your code here

Need a hint?

Use ref('Waiting for input...') to create message.

3

Add watcher for inputText changes

Import watch from 'vue'. Use watch to watch the inputText variable. Inside the watcher callback, update message.value to `You typed: ${inputText.value}` whenever inputText changes.

Vue

  
    
    Input: {{ inputText }}
    Message: {{ message }}
  



import { ref, watch } from 'vue'

const inputText = ref('')
const message = ref('Waiting for input...')

// Add a watch on inputText to update message.value
// Your code here

Need a hint?

Use watch(inputText, () => { ... }) and update message.value inside.

4

Complete template bindings

Ensure the template uses v-model="inputText" on the input field, and displays {{ inputText }} and {{ message }} inside <p> tags as shown.

Vue

  
    
     tags -->
    
  



import { ref, watch } from 'vue'

const inputText = ref('')
const message = ref('Waiting for input...')

watch(inputText, () => {
  message.value = `You typed: ${inputText.value}`
})

Need a hint?

Check that the input uses v-model="inputText" and both variables are shown in paragraphs.