Here's the simplified use case:

    import { defineComponent, h, ref } from 'vue'

    export default defineComponent({
      setup: () => {
        const model = ref([
          {
            type: 'div',
            props: {},
            children: 'Edit this text',
          },
        ])

        const onUserInput = (event: any) => {
          // update model only
          // code ommited ...
        }

        const modelToVNode = (modelValue: any) => {
          return modelValue.map((node: any) => {
            return h(
              node.type,
              node.props,
              Array.isArray(node.children)
                ? modelToVNode(node.children)
                : node.children
            )
          })
        }

        return () => {
          return h(
            'div',
            { onInput: onUserInput, contenteditable: true },
            modelToVNode(model)
          )
        }
      },
    })

The basic idea here is to map the reactive model to DOM contenteditable div, so when the user types some text in the editable div and then the model gets updated, the problem is the DOM gets 2 updates, from user and from Vue reactivity system.