Как сделать свойство объекта, переданного в props, реактивным (Vue 3)?

Question

[Андрей]

Ковыряю Vue 3 и столкнулся с тем, что props больше не реактивны. Как подключить реактивность для примитивных значений я понял, но как быть в ситуации, когда я передаю объект и хочу отслеживать изменения одного из его полей, я так и не разобрался.

Структура примерно такая:

<template>
<my-component :prop="prop" />
</template>

<script>

export default {
    data() {
        return {
            prop: {
                key: 'value',
                flag: true
            }
        }
    }
}
</script>

my-component.vue

<template>
     // предположим, что где-то что-то влияет на значение поля flag и мы хотим это здесь отобразить
    <div v-if="flag">Yay, it's a flag!</div>
    <div v-else>I am very sad rn</div>
</template>

<script>

export default {
    props: {
        prop: Object
    },
    setup(props) {
        const prop = ref(props, 'prop')
        const flag = // хрен его знает, что тут делать

        return { flag }
    }
}
</script>

Я пробовал разные манипуляции со всеми возможными методами ref (типа const flag = ref(prop, 'flag'), const flag = ref(prop.value, 'flag')), но безуспешно.

Comments

[GrayHorse]

Использовать композишн апи и не посмотреть примеры?
https://v3.vuejs.org/guide/composition-api-introdu...
https://v3.vuejs.org/guide/composition-api-setup.h...

[Михаил]

props прокидываются в шаблон

<div v-if="prop.flag">Yay, it's a flag!</div>

Answer 1

[GrayHorse]

toRefs

<script setup>
import {toRefs} from "vue";
const props = defineProps({
  name: {
    default: "unknown",
    type: String
  }
});
const {name} = toRefs(props);
</script>