Why You Need to Watch Props in Vue
In Vue.js, props allow a parent component to pass data to a child. Sometimes, you need to perform actions when a prop value changes, like fetching new data or re-rendering part of the UI.
Vue doesn't automatically react to prop changes with side effects, so you must manually watch them.
Method 1: Using watch() in Vue 3 (Composition API)
Inside the setup() function, use watch() to react to specific prop changes.
import { watch, defineComponent } from 'vue';
export default defineComponent({
props: {
userId: Number,
},
setup(props) {
watch(() => props.userId, (newVal, oldVal) => {
console.log('User ID changed from', oldVal, 'to', newVal);
// Perform action based on new prop value
});
}
});
Best for: reactive logic using Composition API.
Method 2: Using the watch Option in Options API
Define watchers directly in your component to respond to prop changes in the Options API style.
export default { props: ['userId'],
watch: {
userId(newVal, oldVal) {
console.log(`User ID changed from ${oldVal} to ${newVal}`);
}
}
}
Best for: legacy or Options API-based components.
Alternative: Use updated() Lifecycle Hook
Use this if you need to run code after any reactive update, not just specific prop changes.
export default { props: ['status'],
updated() {
console.log('Component has updated (could be due to prop, data, or state change).');
// This hook runs after the component has been updated in the DOM.
}
}
Not ideal for targeting individual prop changes, better suited for general post-update logic.
Also Read: Best Vue.js Framework Of All Time
Common Mistakes to Avoid
- Assuming Vue will auto-react to all prop changes
- Forgetting to return a function in watch(() => props.myProp) in Composition API
- Using created() or mounted() for watching dynamic changes — these only run once
Summary
To listen for prop changes in Vue:
- Use watch() in the Composition API
- Use the watch option in the Options API
- Avoid lifecycle hooks for precise prop watching
Related Resources
