Why is Vue.mount not showing the loaded component?

Question

Vue.js

I'm trying to use Vue3 not through vue create , but to compile through rollup . The problem is that the component is not loaded, that is, the template is deleted after the js is loaded. I can’t find anything on the Internet, almost everything is done through vue create .
My code is:
index.html

...
<div id="app"><p>{{ message }}</p></div>
<script type="text/javascript" src="bundle.js"></script>
...

main.js

import { createApp } from 'vue';
const HelloWorlld = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
};
createApp(HelloWorlld).mount('#app');

rollup.config.js

import nodeResolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';

export default {
  input: 'main.js',
  plugins: [
    replace({ "process.env.NODE_ENV": "'production'" }),
    nodeResolve({})
  ],
  output: {
    file: 'bundle.js',
    format: 'iife',
  },
};

After loading the javascript, the content of the #app tag is an empty html comment.

...
<div id="app" data-v-app=""><!----></div>
<script type="text/javascript" src="bundle.js"></script>
...

Please help me to solve this problem.

Answer 1

The case is not so:
createApp(HelloWorlld). $ mount('#app');
?

Answer 2

Found what the problem is.
Vue3 by default comes without a module responsible for processing templates at runtime, which means that I need to "compile" templates at build time.
For rollup there is a plugin rollup-plugin-vue , for webpack there is a vue-loader . You can also use vue-cli to "compile" individual vue components.
The second solution is to use Vue with a templating module. This can be done like this:

import Vue from 'node_modules/vue/dist/vue.esm-bundler';