Project 12: Product Landing Page
Vue Engineer
Builds on these lessons
Component Task
Objective
watch() runs a callback whenever a specific reactive source changes, receiving both the new and old value — useful for side effects that shouldn't run on every render.
You're building a product quantity selector.
Task: create a quantity ref bound to a number input, and a watcher that logs the change from old to new value.
Component.vue
<script setup>
import { ref, watch } from 'vue';
const quantity = ref(1);
watch(quantity, (newVal, oldVal) => {
console.log(`Quantity changed from ${oldVal} to ${newVal}`);
});
</script>
<template>
<input type="number" v-model.number="quantity">
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result