How to listen for props changes in Vue

Vue guide logo

Listening props changes in Vue 3

This is written using Vue's Composition API.

In script tag.

                                
                                        <script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  data: Object
}>();

// if not using Typescript
// const props = defineProps(['data'])

const listenDataChange = computed(() => props.data);
</script>
                                    
                            

In template tag.

                                <template>
  <p>{{ listenDataChange }}</p>
</template>
                            
Previous postHow to define props in Vue
Next postHow to get query parameters in Vue