Watch Props in Vue/Nuxt Composition API

Watch dynamic props inside setup method in Nuxt3 or Vue3 CompositionAPI

<script lang="ts" setup>
import { defineProps, watch } from 'vue'

const prop = defineProps({
  value: { default: '', type: [String, Number] },
})

watch(
  () => prop.value,
  () => {
    console.log('prop value changed', prop.value)
  }
)
</script>

<template>
  <div>{{ value }}</div>
</template>

Comments

[Eazybright😊😊]

Thanks for this. It was really helpful.