Вставить тег компонента динамически

Question

У меня есть несколько drop div, и поэтому каждый раз, когда я помещаю изображение компонента в этот div, я импортирую компонент, соответствующий этому изображению, и мне нужно поместить его в dom в целевом div

drops[i].addEventListener('drop', function () {
    if (this.draggedElement === null) {
        return false
    }

    // get the component conf of this image
    let conf = BlocksStore.conf[this.draggedElement.dataset.category].blocks[this.draggedElement.dataset.type]

    // get the component itself (./blocks/SimpleTitle.vue)
    let component = require('./blocks/' + conf.component)

    drops[i].classList.remove('drag-enter')

    // here is where i don't know what to do ...
    drops[i].innerHTML = component
    this.draggedElement = null
}.bind(this))

Здесь код ./blocks/SimpleTitle.vue

<template>
  <tr>
    <td align="center">
      <a href="#" title="Lorem Ipsum" style="text-decoration: none; font-size: 20px; line-height: 20px !important; color: #010101;">Lorem Ipsum</a>
    </td>
  </tr>
</template>

<script>
export default {
  name: 'simple-title'
}
</script>

<style>

</style>

Я уже пытался добавить тег вместо компонента, но DOM не воспринимает его как компонент