Javascript 如何在vue中防止contenteditable输入事件并设置模型值？

我想在contenteditable div上使用vue创建简单的wysiwyg编辑器。我想将编辑器内容存储到json对象中。我想使用状态/模型概念。我将在编辑器模板中执行以下操作：

<div contenteditable>
    <component v-for="item in json" :is="item.blockTypeComponent" />
</div>

我将在编辑页面的某个地方使用简单的所见即所得组件和v型模型：

<simple-wysiwyg v-model="someVarAsJson" />

看起来我需要先将编辑器输入数据存储到模型/状态，然后自动更新contenteditable中的内容，这意味着我需要截获contenteditable的输入事件。正如我在介绍js草案、prosemirror和中等网站wysiwyg developer的文章中所理解的（这里是一个链接__https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480 )，它们使用与我上面描述的相同的概念。 vue上有基于prosemirror的tiptap编辑器，但我还不知道它是如何工作的

有可能做我想做的吗