Vue3 — как динамически создать (render) компонент и вставить в DOM в определенном месте?

Question

[Nikita Bel]

HTML документ содержит такую структуру:

<div id="app">
    <ul>
        <li @click="addMenuLink" data-url="/path/id/1/">Пункт 1</li>
              <!-- place for component -->
        <li @click="addMenuLink" data-url="/path/id/2/">Пункт 2</li>
             <!-- place for component -->
        <li @click="addMenuLink" data-url="/path/id/3/">Пункт 3</li>
             <!-- place for component -->
        <li @click="addMenuLink" data-url="/path/id/4/">Пункт 4 </li>
             <!-- place for component -->
    </ul>
</div>
<script src='vue.global.js'></script>
<script type="module">
  import mainApp from 'app.js'
  import comp from 'comp.js'

  let app = Vue.createApp(mainApp)

  app.component('comp', comp)

  window.mounted = app.mount('#app')
</script>

'component.js'

export default {
  props: {
    label: String,
  },
  data() {
    return {
        url: "Link Label"
    }
  },
  template: `<a :href="url">{{ label }}</a>`

Вопрос - как можно в методе addMenuLink() основного приложения 'mainApp' создать инстанс компонента 'comp', передать в него параметр из атрибута , и (главное) вставить отрендереный шаблон компонента сразу после li на котором сработал click?