A watcher runs a function whenever a piece of data changes. Use it for side effects such as saving, fetching or logging.
watch: { query(newValue, oldValue) { ... } }
Vue Watchers
Run code when data changes.
✍️ 3 exercises + code challenge in this lessonKey Takeaways: Vue Watchers
Mastering Vue Watchers helps you write clean and reliable Vue.js code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
Vue Watchers Code Example
Vue.js<script src="https://unpkg.com/vue@3.5.12/dist/vue.global.prod.js"></script>
<div id="app">
<input v-model="query" placeholder="Search...">
<p>{{ status }}</p>
</div>
<script>
Vue.createApp({
data() { return { query: "", status: "Type to search" }; },
watch: {
query(newValue) {
this.status = newValue ? `Searching for "${newValue}"...` : "Type to search";
}
}
}).mount("#app");
</script>
Free sign-in required · Google login available
Vue Watchers Practice Exercises
Check what you learned in “Vue Watchers”.
/ 3 solved
Fill in the blank
Declare watchers.
: { query(newValue) { } }
✓ Correct!
Not quite. Try again.
Multiple choice
When should you use a watcher instead of a computed property?
✓ Correct!
Not quite. Try again.
Code challenge
Add a watcher on count that sets message to "Count is " + count. The check changes count to 3 via a button click.
Write the code in the live editor. Your answer is checked automatically.
✓ Solved
Free sign-in required · Google login available
to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services