vue, how dynamically, programically, on click add component to the DOM specific place?

I need to add a dynamically imported component, just add a virtual tag to specific place in DOM structure. Unfortunately, every method that I found, didn't solve my problem.

How I try it first:

parent component (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>

and 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

    }
  },
};

And child component that has to be adding how many times user need in exactly place then user need (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>

and javascript

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

Maybe someone can give me some idea, how to do this?