Объясните пожалуйста, почему это считается плохим подходом? Имею ввиду клонирование

пропсов в локальную переменную

Есть три основных очевидных варианта (необязательно все хорошие или применимы) при работе с формами:
1. props + emit - vue-way, вниз данные - вверх события
2. props + локальная переменная через клонирование
3. мутирование props

Пример второго пункта:

<MyForm :data="data" />
...

MyForm.vue

const props = defineProps({
data: { type: Object, required: true }
})

const emit = defineEmits({
submit: null
})

const editableData = ref()

onMounted(() => {
editableData.value = structuredClone(props.data) // глубокое клонирование
})

const submit = () => {
emit('submit', editableData.value)
}

Когда-то я услышал что это плохо, да и выглядит не очень, но не могу аргументировать это

@vklimv @djaler Извиняюсь что тегаю, но я вам доверяю и этот вопрос прям заел у меня в голове и вроде как он важен для понимания

потому что получается два источника истины, которые надо синхронизировать (вотч на проп - меняем внутреннее состояние, вотч на внутреннее состояние - кидаем событие). Может случиться рассинхрон, если что-то не прозевал. Или может получиться вечный цикл обновлений, кстати (обновляется внутреннее состояние - делаем эмит - снаружи по нему обновляется состояние тоже - меняется проп - срабатывает вотчер - обновляется внутреннее состояние). Чтоб это предотвратить - нужно в этих вотчерах ещё делать проверки на то, что новое значение отличается от текущего. И если у тебя не примитив - нужно глубокое сравнение. Короче, это много кода, в котором можно проебаться

А что если лишь единожды объект синкается, при mounted например?

ну тогда у тебя точно есть 2 рассинхронизированных источника истины