I come from Vue 2 and I was used to have my wordpress standard html pages and use some Vue components inside them. Just passed the container to the main app el property, and then I could use components on the container, where I wanted to, without having all the default container's content be erased or replaced. Basically, passing a dom element to the el property, maked that element a Vue app, with all its contents (even without any Vue components).
With Vue 3 and createApp, it seems there's no way of doing it, since as soon as I mount the app to a container (say #app), then all the container's contents are erased or replaced with component's template (if a component is passed). Even the following, which doesn't use any component, is going to clear all the #app original contents:
import { createApp } from 'vue'
createApp({
}).mount('#app');
How to avoid? How to just use some spare components on a free html page? And how about SFC used the same way?
Technically Vue always replaces the content of the element (Vue 2 was replacing the element itself, Vue 3 replaces it's inner content - migration guide)
IF the app/component being mounted has no template option or render function, then (and only then) Vue takes the original content of the DOM element (before it mounts) and tries to compile it into render function (that is why you need Compiler + runtime build when using in-DOM templates)
It also means that if your page consists mostly of static HTML (from WordPress) and only "small sprinkles" of Vue, this solution is very ineffective and reason why petit-vue exists (I recommend reading Comparison with standard Vue
Anyway. I'm not able to reproduce your problem...
const app = Vue.createApp({
}).mount("#app")<script src="https://unpkg.com/vue@3.2.9/dist/vue.global.js"></script>
<div id='app'>
<div>
<h2>Hello from HTML!</h2>
</div>
</div>So what can be wrong?