vue，在单击时将组件动态添加到DOM特定位置的方式有多动态？

Question

我需要添加一个动态导入的组件，只需将一个虚拟标签添加到DOM结构中的特定位置即可。不幸的是，我发现的每种方法都不能解决我的问题。

我如何首先尝试：

父组件（Editor.vue）：

<template>
  <div>
    <div class="toolbar">
        <button @click="addContainer">ADD CONTAINER</button>
    </div>
    <div id="editor" ref="editor" contenteditable="true">
       //here, when in conteneditable div is coursor I need to add dynamically, programically virtual tag <container />
    </div>        
  </div>
</template>

和javascript

<script>
import container from '../container/Container.vue';

export default {
  name: "editor",
  components: {
    container
  },
  data() {
    return {};
  },
  methods: {
    addContainer(){          
      document.execCommand('insertHTML', false, <container />); // execCommand let me add html in specyfic place, but I have error Unexpected token

    }
  },
};

子组件必须在正确的位置加上用户需要的次数再加上用户需要的次数（Container.vue）

<template>
  <div
    class="container editor--space"
    @mouseover="highlightIn"
    @mouseout="highlightOut"
    contenteditable="true"
  >
    <div
      class="editor--labelspace"
      v-if="showLabel"
      contenteditable="false"
    >
      container
    </div>
    {{ container }}
  </div>
</template>

和javascript

<script>
export default {
  name: "container",
  data() {
    return {
      showLabel: false,
      container: "Container here ..."
    };
  },
  methods: {
    highlightIn(){
      this.showLabel = true;
    },
    highlightOut(){
      this.showLabel = false;
    }
  }
};
</script>

也许有人可以给我一些想法，怎么做？

Answer 1

我考虑过，但您只能将其用作几个组件之间的切换，而不能用作动态添加的组件。因此对我来说是没有用的（我什至认为总体上没有用，您可以使用v-for来做到这一点）。

而且我发现了类似的内容，但是即使我能够在末尾添加内容或开始可编辑的空间，也无法将其添加到光标位置。

...
methods: {

    addRow(){
      var ComponentClass = Vue.extend(row);
      var instance = new ComponentClass();      
      instance.$mount()      
      document.execCommand('insertHTML', false, instance);
    }
  },
...

真的没人能给我一些建议吗？