При рендере новых нод в "Contenediable" сохраняется старая ( Vue 3)
Есть входные данные:
{
parts: [
{
id: "part-1",
type: "part",
items: [
{
type: "content",
tag: "b",
content: "Hello",
},
{
type: "content",
tag: "br",
},
{
type: "content",
tag: "b",
content: "World!",
},
],
},
]
}
Из этого json'a собираются в несколько contentediable по type="part". При вводе меняют json и реагируют на его изменение. Вся реализация есть в песочнице. Этот подход нормально работает при обычном вводе. Но если нажать enter, то происходит создание новой ноды, и по какой то причине при перерендере по списку приходящему из входных данных остаётся старая текстовая нода, и так до бесконечности. Был бы очень признателен за подробный ответ и за решение данной проблемы.
Если добавить уникальный ключ на каждый "part" например с помощью crypto.randomUUID() то при каждом вводе перерендериваются все "part" и фокус теряется. Тоже самое происходит если вызывать перерендер элементов другими способами.