Javascript Vue动态加载组件并突出显示代码预览和保留HTML结构

我正在尝试动态加载vue组件，当组件可见时，它应该以代码预览的形式显示组件的HTML

这是成功的，并且正在工作，但是显示了一个大字符串，因为我使用了$el.innnerHTML。我想要的是在代码预览中镜像组件/html的结构

这是现在的结果：

我想要什么：

文件
请选择一个
A.
B
Vue.component（“componentOne”{
模板：`
主分量

`
});
Vue.component（“componentTwo”{
模板：`
员额构成部分

`
});
组件（“代码突出显示”{
道具：[“代码”]，
模板：“

”， 计算：{ highlightedCode:函数（）{ 返回Prism.highlight（this.code、Prism.languages.javascript）； } }, }); 新Vue({ el:“应用程序”， 数据：{ 选定：“， mychildcomponent:“mychildcomponent”， 代码突出显示：“ }, 方法：{ onChange（）{ 设置超时（（）=>{ this.codeHighlight=this.$refs.mychildcomponent.$el.innerHTML； }) } } }); 示例

您可以使用

标记，如：

Vue.component("componentOne", {
      template: `
        <pre>
          <div>
            <p>Home component</p>
          </div>
        </pre>
        `
    });

Vue.component（“componentOne”{
模板：`
主分量

`
});

标记将按原样在网页上显示文本

Vue.component("componentOne", {
      template: `
        <pre>
          <div>
            <p>Home component</p>
          </div>
        </pre>
        `
    });