与vue组件等效的document.createElement和SurroundContents

Question

我正在尝试动态插入Vue组件，就像我实际上使用纯JS函数那样：document.createElement和SurroundContents（使用范围）。基本上，所有内容都与突出显示有关：用户突出显示一些文本，我将其保存并稍后加载。

我想使这些突出显示具有反应性，因此，我想插入自己的组件，而不是简单地插入突出显示（经典的html span或mark）。

我尝试使用Vue createElement（）而不知道是否可以在render函数之外使用它，但是根据文档，我不这么认为。这是我要改进的代码：

mark.js

import MyRange from '../highlighter/myRange'

export default class MyMark {
  constructor(elementId, myRange, markId, markClass) {
    this.elementId = elementId
        this.myRange = myRange
    this.markId = markId
    this.markClass = markClass
    }
    _toRange() {
        const el = document.getElementById(this.elementId)
        const range = this.myRange.toRange(el)
        return range
    }
    highlight() {
    const el = document.createElement("mark")
    el.setAttribute("class", "mark-common " + this.markClass)
        this._toRange().surroundContents(el)
    }
    content() {
        return this._toRange().toString()
    }
}

现在，如果我想使用vue组件而不是简单的mark，该如何实现？

我建议使用这个小提琴来总结我的问题： http://jsfiddle.net/eywraw8t/424087/