Как создать и использовать несколько автономных приложений vue на одной html-странице (Vue2 + Django)

Я новичок в vue и пытаюсь реализовать vue + vuetify + vuex frontend в моем уже наполовину написанном django приложении, я хочу, чтобы vue-приложения подключались независимо друг от друга в разных divs html-страниц

На данный момент, при таком подключении:

<div class="tab-content" id="settings-tab-content">
    <script type="application/json" id="initial-data">
        { "is_superuser": {{ is_superuser|lower }} }
    </script>

    <div class="tab-pane fade" id="groups-tab-content" role="tabpanel" aria-labelledby="groups-tab">
        <div id="userGroups"></div>
    </div>

    <div class="tab-pane fade" id="structure-tab-content" role="tabpanel" aria-labelledby="structure-tab">
        <div id="app"></div>
    </div>
</div>

import Vue from 'vue'
import clinicStructure from './clinicStructure.vue'
import userGroups from './userGroups.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(clinicStructure)
}).$mount('#app')

new Vue({
  router,
  store,
  vuetify,
  render: h => h(userGroups)
}).$mount('#userGroups')

Компоненты и строительство с помощью этого

    "build": "vue-cli-service build --dest=../../static/builds/prod",
    "dev": "vue-cli-service build --dest=../../static/builds/dev --mode=development --watch"

работает нормально, но модальные окна из одного элемента открываются в другом (в том, который монтируется первым)

Итак, как я могу заставить отдельный компонент vue подключаться к определенному div, не затрагивая другие компоненты

p.s. Я не могу сделать одну точку входа для фронтенда и затем обрабатывать пути через маршрутизатор vue, мне нужно, чтобы django отдавал html с подключенными компонентами vue

Вернуться на верх