动态注入组件标记

Question

我有多个drop div，因此每当我将组件的图像放入div时，我都会导入与此图像对应的组件，我需要将它放入目标div中的dom中

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并不理解它作为组件