title: createApp({}).mount('#app') clears #app's child elements in vue3
body: <p>So I'm trying to add Vue3 to an existing asp.net core project. What I'd like to happen is for my razor app to render as normal, then use custom vue components to give my frontend a more reactive feel. However, when I mount an empty vue app to my wrapper div (parent of all other body content), it seems to be deleting all innerHTML of that wrapper div, completely removing all server rendered body content.</p>
  <p>In my _Layout.cshtml file, I'm wrapping all content in a div with id 'app'.</p>
  <pre><code>&lt;body&gt;
    &lt;div id='app'&gt;
      @RenderBody()
    &lt;/div&gt;
  
    &lt;script src=&quot;~/js/vue-app/dist/js/chunk-vendors.76316534.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;~/js/vue-app/dist/js/app.bf4c5ba9.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>in main.js</p>
  <pre><code>import { createApp } from 'vue'
  
  const vueApp = createApp({}).mount('#app');
  
  // component definitions below
  </code></pre>
  <p>With the app set up like this, when I run my .net project I see a blank white browser window instead of the razor compiled html that I expect. In Vue2, it was possible to do this:</p>
  <pre><code>const vueApp = new Vue({
    el: '#app',
    data: {
      ....
    },
    methods: {
     ....
    }//, etc
  });
  </code></pre>
  <p>Which would result in the app being rendered as normalthe vue app bound to <code>#app</code>, making vue available to the child content (model binding, vue click handling, etc).</p>
  <p>I've tried playing around with the <code>isHydrate</code> optional parameter on <code>mount()</code>, but it causes no change in the result.</p>
  <p>Am I missing something here? How do you slowly migrate an existing project to use vue3 if you can't mount the app without clearing content? Any guidance is much appreciated.</p>
  <p>Thank you</p>
  <p>Notes:</p>
  <ul>
  <li><a href="https://github.com/vuejs/vue-next/blob/master/packages/runtime-dom/src/index.ts#L66" rel="noreferrer">vue-next runtime-dom source</a> If this method is the mount method getting called, I'm not sure why <code>container.innerHTML</code> would not be getting set in the component. <code>{}</code> is not a function, and render/template is not defined for it.</li>
  <li><a href="https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/apiCreateApp.ts#L213" rel="noreferrer">vue-next runtime-core apiCreateApp source</a> If this is the method getting called....I have no idea.</li>
  </ul>