Prevent Vue.Js replace Twig content in mounting DOM element

Version: Vue 3.0.5

index.html.twig

<div id="app">
    <div class="text-center">
        <h3>My text rendered in Twig</h3>
            <div class="jumbotron text-center">
                <example></example>
            </div>
        </div>
    </div>
</div>

entry-file.js

import { createApp } from 'vue';

import Example from './components/Example.vue'

createApp(Example).mount('#app');

components/Example.vue

<template>
    <div>
        <p>This is text from VueJs component</p>
    </div>
</template>

<script>
export default {
    name: 'example'
}
</script>

Currently, when I access the page Vue completely removes Twig content inside #app div and replaces it with text from the component.

My question are,

1. How can I keep initial #app content rendered by Twig and additionally compile <example></example> component by Vue?
2. Is it OK practice to mix it this way? The problem is that I already have blocks/widgets and custom logic based on backed variables in Twig and it will be far too long to rewrite everything in Vue