Subscribe on changes!
avatar
Aug 20th 2021

Version

3.2.4

Reproduction link

https://codesandbox.io/s/purple-rain-2fooh

Steps to reproduce

If there are 2 separate Vue apps on the same page using the same root component using in-DOM templates, both of the apps will use the template of the first app.

index.html
<div id="app">foo</div>
<div id="app2">bar</div>

App.vue
<script>export default {};</script>

main.js
createApp(App).mount("#app");
createApp(App).mount("#app2");

What is expected?

Expected the sample above to render:

foo bar

What is actually happening?

Sample above renders:

foo foo

avatar
Aug 20th 2021

You can workaround by creating a copy of the component:

createApp({...App}).mount("#app2");