防止 Vue.Js 在安装 DOM 元素时替换 Twig 内容

Question

版本：Vue 3.0.5

索引.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>

入口文件.js

import { createApp } from 'vue';

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

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

组件/示例.vue

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

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

目前，当我访问页面时，Vue 完全删除 #app div 内的 Twig 内容，并将其替换为组件中的文本。

我的问题是，

1. 如何保留#appTwig 渲染的初始内容并另外<example></example>通过 Vue 编译组件？
2. 这样混合可以吗？问题是我已经有了基于 Twig 中支持变量的块/小部件和自定义逻辑，并且在 Vue 中重写所有内容都太长了