How to Listen for ‘Props’ Changes

In Vue.js, you can listen for changes to props using a watcher. Watchers are a feature that allows you to watch for changes in data, including props, and perform actions in response to those changes. Here’s an example for the same.

Suppose you have a child component that receives a prop named myProp and you want to perform some action whenever this prop changes:

<template>
 <div>
   <p>Received prop: {{ myProp }}</p>
 </div>
</template>
<script>
export default {
 props: {
   myProp: {
     type: String,
     required: true
   }
 },
 watch: {
   myProp(newValue, oldValue) {
     // This watcher is triggered whenever 'myProp' changes
     console.log('New value of myProp:', newValue);
     console.log('Old value of myProp:', oldValue);


     // Perform actions based on the new value of myProp
   }
 }
};
</script>

When the myProp prop changes in the parent component and is passed down to this child component, the watcher defined in the child component will be triggered, allowing you to react to those changes.

There are many possible ways to lisite to the changes. You can look into here for all the options.