Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

Vue

January 9, 2024

How to Watch Props Change with Vue Composition API / Vue 3?

In Vue 3 and the Composition API, you can watch for changes in props by using the watch function provided by Vue. This allows you to react to changes in props similar to how you might use watch in the Options API.

Here’s an example demonstrating how to watch for prop changes using the Composition API in Vue 3:

<template>
 <div>
   {{ myPropValue }}
 </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// Define props using the `defineProps` function
const props = defineProps({
 myProp: {
   type: String,
   required: true,
 },
});

// Create a ref to store the value of the prop
const myPropValue = ref(props.myProp);

// Watch for changes in props.myProp
watch(() => props.myProp, (newValue, oldValue) => {
 // React to prop changes
 console.log('Prop changed:', newValue);
 myPropValue.value = newValue; // Update the value in the ref if needed
});
</script>