При рендере новых нод в "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" и фокус теряется. Тоже самое происходит если вызывать перерендер элементов другими способами.


Ответы (0 шт):