Nested Vue instances

Question

Is there anyway to have nested Vue instances? I know about Vue components and I use them extensively in my applications but in this use case I have different applications (I mean different projects) that are loading inside each other in a page.

For example when I do something like the following:

<div id="parent">
  {{msg}}
  <div id="child">
    {{msg}}
  </div>
</div>

...

new Vue({
  el: '#parent',
  data: { msg: 'sth' },
})

new Vue({
  el: '#child',
  data: { msg: 'sth else' },
})

But both msg's uses msg data of parent Vue instance. Here I just want to show an example but in my use case these instances are not next to each other and just somehow relate to each other through Django framework (which is not important to notice here).

Update

It's not a duplicate question. Person who asked that question doesn't need nested Vue instances and just needs components. But I explicitly said that I know about components but need nested Vue instances.

Issue

According to this issue, they are not going to implement such behavior.

Answer 1

If you really need to have nested instances, use VueJS v-pre directive. You can add v-pre to the child app. More details about it here.

<div id="parent">
    {{msg}}
    <div id="child" v-pre>
        {{msg}}
    </div>
</div>
...
new Vue({
    el: '#parent',
data: { msg: 'sth' },
})

new Vue({
    el: '#child',
    data: { msg: 'sth else' },
})

{{ msg }} for child instance will be "sth else". Note that the nested instance (#child element) is not compiled by vue parent instance because of the v-pre directive.