Vue — как подключить компонент «на лету»?

Question

[Nikita Bel]

Подскажите пожалуйста, как можно загрузить и "отрендерить" компонент, если содержимое шаблона компонента необходимо вставить в DOM в определенном месте?

Основное приложение Vue подключается к HTML странице таким способом:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script type="module">
        import DataTable from '{% static 'js/datatable/datatable_app.js' %}'

        let app = Vue.createApp(DataTable)
        window.mounted = app.mount('#app')
    </script>

В коде основной страницы блок #app выглядит так:

<div id="app">
        <a rel="link" href="#" @click="openMenu">Link1</a>
        <a rel="link"  href="#" @click="openMenu">Link2</a>
        <a rel="link"  href="#" @click="openMenu">Link3</a>
        <a rel="link"  href="#" @click="openMenu">Link4</a>
</div>

Есть небольшой шаблон, который необходимо вставлять сразу после ссылки, на которую кликнули (a rel="link")

<div class="menu">
        <ul>
            <li @click="setValue">{{ item1 }}</li>
            <li @click="setValue">{{ item2 }}</li>
            <li @click="setValue">{{ item3 }}</li>
        </ul>
</div>

В шаблоне данные, которые должны быть переданы из основного приложения, и обработчики событий.
Функция setValue "уничтожает" этот блок после клика на li.

Как сделать "загрузку" и рендеринг такого компонента и вставлять его в нужное место (после ссылки) ?

Answer 1

[dimka2]

Ни одна заумная б. не ответила, а вопрос очень дельный!