Your question seems a bit unclear, but it appears that you are interested in having multiple Vue root instances on the same page, each with its own set of global mixins, directives, filters, and so on.
Unfortunately, achieving this in Vue 2 is not straightforward. A good resource on this topic can be found in the Global API section of the Vue3 migration guide:
Vue 2.x includes various global APIs and configurations that impact Vue's behavior at a global level.
While this approach may be convenient, it presents some challenges. In Vue 2, there is no clear distinction of an "app." What we typically consider an app is essentially a root Vue instance created using new Vue(). All root instances created from the same Vue constructor share the same global configuration. This leads to:
The global configuration makes it tricky to have multiple "apps" sharing the same Vue instance, each with different global configurations.
This issue is particularly noticeable during testing. To address this, a createLocalVue() method was introduced in vue-test-utils, utilizing the Vue.extend global API to create a "subclass" of the base Vue constructor...
I have employed a similar approach below to demonstrate two separate Vue subclasses, each with its own global mixins and components. While this approach does work, it has some peculiarities (for instance, omitting the MyVue1.extend call can cause issues).
My overall takeaway from this experiment is that achieving this in Vue 2 is feasible but may involve challenges, suggesting that Vue 3 provides a more optimal solution to these issues...
const MyVue1 = Vue.extend()
const MyVue2 = Vue.extend()
MyVue1.mixin({
methods: {
mixinMethod: function() {
return 'MyVue1'
}
}
})
MyVue1.component('my-component1', MyVue1.extend({
template: '<div> Hello from my-component1: {{ mixinMethod() }} !</div>'
}))
MyVue2.mixin({
methods: {
mixinMethod: function() {
return 'MyVue2'
}
}
})
MyVue2.component('my-component2', MyVue2.extend({
template: '<div> Hello from my-component2: {{ mixinMethod() }} !</div>'
}))
const vm1 = new MyVue1({
template: '<my-component1 />',
}).$mount('#app1')
const vm2 = new MyVue2({
template: '<my-component2 />',
}).$mount('#app2')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app1"></div>
<div id="app2"></div>