How to listen for props changes in Vue

Seno

Updated: Jan 31, 2025

Listening props changes in Vue 3

This is written using Vue 's Composition API .

In script tag.

typescript

<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.

html

<template>
  <p>{{ listenDataChange }}</p>
</template>

Tags: Vue