Vue 3中contenteditable渲染新节点时旧节点残留的问题求助

大家好，我在Vue 3里开发contenteditable相关功能时碰到了一个头疼的问题，想请各位帮忙分析下！

目前我是基于下面的JSON数据结构来做组件渲染的：

{
  "parts": [
    {
      "id": "part-1",
      "type": "part",
      "items": [
        {
          "type": "content",
          "tag": "b",
          "content": "Hello"
        },
        {
          "type": "content",
          "tag": "br"
        },
        {
          "type": "content",
          "tag": "b",
          "content": "World!"
        }
      ]
    }
  ]
}

我通过识别type="part"的节点来做多次渲染，平时在输入框里输入内容时，JSON数据会同步更新，组件也能正常响应这些变化，这个逻辑在普通输入操作时都挺顺畅的。

但按下Enter键创建新节点之后，奇怪的问题就出现了：当根据列表重新渲染组件、保存输入数据时，旧的文本节点居然会残留下来，而且重复操作的话，旧节点还会不断累积，简直无限循环了...

有没有朋友遇到过类似的场景？或者能给我一些排查问题的方向建议呀？

备注：内容来源于stack exchange，提问作者User