I am facing an issue where I am trying to pass a reactive data as a prop to a child component in Vue 3. The data updates correctly in the child component's template, but it does not reflect in the child component's script. In the parent component:
<script setup lang="ts">
import { ref } from 'vue'
const someDataId = ref<number | null>()
const someFunction = (id) => {
someDataId.value = id
}
</script>
<template>
<ChildComponent :dataId="someDataId" />
</template>
In the child component:
<script setup lang="ts">
const { dataId } = defineProps<{
dataId: number | null | undefined
}>()
console.log(dataId)
</script>
<template>
{{ dataId }}
</template>
Even though the dataId prop updates correctly in the template, it appears as undefined when displayed in the console.
I have tried handling props within the onUpdated and watch functions, but the issues persist. When using onUpdated, the dataId remains undefined, and with watch, nothing is logged to the console because it seems like no changes are being detected. Using nextTick has also proved ineffective.
If anyone has insights or solutions on how to resolve this issue, your help would be greatly appreciated. Thank you!