Ребята это нормально так делать, или есть какое-то более правильное

решение, как прокидывать данные в дочерний компонент, менять их там и чтобы они реактивно изменялись в родительском компоненте?

Родительский компонент:
<template>
<accordion-item-start key="start" :componentQuizData="quizData" @update:page-data="updatePageData" />
</template>

<script>
import AccordionItemStart from "@/components/constructor/control/AccordionItemStart.vue";
export default {
components: {
AccordionItemStart,
},
data() {
quizData: null,
},
methods: {
getData() {
// Получаю данные с сервера
this.quizData = response
},
updatePageData(newData) {
this.quizData = newData;
},
},
mounted() {
this.getData()
}
</script>


Дочерний компонент:
<template>
<textarea v-model="quizData.text"></textarea>
</template>

<script>
export default {
props: {
componentQuizData: {
type: Object,
required: true,
},
},
data() {
quizData: this.componentQuizData,
},
methods: {
updatePageData(newData) {
this.$emit('update:page-data', this.quizData);
},
},
watch: {
quizData: {
deep: true,
handler(newObj) {
this.updatePageData(newObj)
}
}
}
</script>

Получается, я прокидываю пропсом объект, присваиваю его локальной переменной, присоединяю к её значениям v-model и вешаю watch на изменение этой переменной. Если она изменяется, обновляю переменную в родительском компоненте через emit?
(Компоненты упрощены во избежание лишнего кода)

из обекта нужно сделать копию, у тебя сейчас ссылка сохраняется

Эмит делаешь наверх с новыми данными

И в родителе записываешь

Это vue3 фича через update в модел обновлять

У меня Vue3, но options API. С composition только пытаюсь разобраться

по сути ок, просто сделай копию пропса обекта и присваивай в дочерний стейт

так ему же и надо поменять в родителе данные, или я че то не так понимаю

он присвои пропс обект (без клонирования) в локальный стейт чаелда, а мы знаем отличительное свойство оебктов в js?

если что вот