How to create and use multiple standalone vue apps in one html page (Vue2 + Django)

Im kind off new to vue and I’m trying to implement a vue + vuetify + vuex frontend in my already half written django application, I want the vue applications to connect independently of each other in different divs of html pages

At the moment, with this connection:

<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')

Components and building with this

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

works fine but modal windows from one element open in another (in the one that is mounted first)

So, how can I make a separate vue component connect to a specific div without affecting other components

p.s. I can’t make one entry point for frontend and then process paths through vue router, I need django to give html with connected vue components