Can't get object values in child component prop if prop is reactive

Question

I have a Parent component and try to pass reactive object as props:

<template>
    <Child :info="reactiveObject" />
</template>
<script setup>

const reactiveObject = reactive({ name: "Object", id: "443"})

Child.vue

<template>
    <div> {{ info.name }} 
</template>
<script setup>
const props = defineProps({
    info: Object,})

and i get Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')

if i pass full props object info into double brackets i get values in html like image

Why i cant get name throught info.name?

Answer 1

you should import reactive from vue when you ues reactive.This is the vue3 feature. When you need to use something in vue, you must import it first.

import { reactive } from 'vue'
const reactiveObject = reactive({ name: "Object", id: "443"})

when you forget to import from vue, you cannot use it in template. This is incorrect syntax.

you should read more vue document, this is link

Answer 2

instead of {{ info.name }} try {{ props.info.name }}, also the there is missing the end tag