How can I add a component in a content-editable div in vue js

Question

I want to add a div inside a content-editable div on a click of a button in vue js. So, I'm looking for the correct way to do it.

var ComponentClass = Vue.extend(AddTag)
  var instance = new ComponentClass({
    propsData: { type: 'primary' }
  })
  instance.$mount() // pass nothing
  this.refs.message.appendChild(instance.$el)

This is the code I'have tried so far. Thanks

<div class="dropdown-buttons" :contenteditable="false" >
    <el-popover
        width="200px"
        placement="bottom-start"
        trigger="click"
        @show="isDropdownActive = true"
        @hide="isDropdownActive= false"
        >
  <div class="">
    <el-popover
            v-for="(filter, index) in list"
            :key="filter"
            placement="right-start"
            width="200"                
    >
      <div class="sub-filter-listing">
        <div v-for="subFilter in subList[index]" :key="subFilter">
          <span @click="selectSubFilter(subFilter)">{{subFilter}}</span>
        </div>
      </div>
      <el-dropdown-item slot="reference" :command='filter'>
        <div style="display: flex; flex-direction: row; justify-content: space-between;">
          <span class="">{{(filter)}}</span>
          <span style="margin-left: 5px;margin-right: 5px;float: right; font-size: 9px;"><i class="nova-carot-right"></i></span>
        </div>
      </el-dropdown-item>
    </el-popover>
  </div>
  <el-button slot="reference" size="mini" class="sharing-dropdown-select-button">
    <span class="">{{(selectedValue || selectedFilter || 'Select' )}}</span>
    <span class="list-icon"><i class="icon carot-sign" :class="[isDropdownActive ? 'nova-carot-down':'nova-carot-right']"></i></span>
  </el-button>
</el-popover>
</div>

Answer 1

I have answered a similar question here: vue, how dynamically, programically, on click add component to the DOM specific place? But to expand the answer on how to place the cursor after the inserted child component, we need to create a range and use Range.setStartAfter(). Then we simply use focus() to set the cursor where we have defined. Code sample:

  var ComponentClass = Vue.extend(Child);
  var instance = new ComponentClass();
  instance.$mount();

  // we have marked ref="editor" on the contenteditable div
  var editableDiv = this.$refs.editor;
  var range = document.createRange();
  var sel = window.getSelection();
  range = sel.getRangeAt(0);
  // check that we are in content editable div
  if (sel.getRangeAt(0).endContainer.parentNode.id === "editor") {
    range.insertNode(instance.$el);
    range.setStartAfter(instance.$el);
    sel.removeAllRanges();
    sel.addRange(range);
    editableDiv.focus();
  }

SANDBOX for your reference.