尝试在现有JSF应用中集成新的Vue组件时遇到问题。
到目前为止，我已经创建了一个外部Vue应用程序，并且一旦构建（即npm run build），在应用程序中导入，现在im访问以这种方式：

*headmain.xhtml

<script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"/>

<script type="application/javascript" src="../../resources/js/frontend/js/chunk-vendors.[HASH].js"></script>
<script type="application/javascript" src="../../resources/js/frontend/js/app.[HASH].js"></script>
<link rel="stylesheet" href="../../resources/js/frontend/css/app.[HASH].css"/>

*bodytargetPage.xhtml

<div id="app"></div>
<script type="text/babel">
    const app = Vue.createApp({
        el: '#app',
    });
</script>

显示正确，但已导入所有内容，甚至路由，等等。

是否有任何方法可以在不同的页面上只显示某些组件，或者对显示的内容进行更多控制？

我尝试过分别导出不同的组件，或者在脚本中指定添加的组件

components: {
    MyComponent,
},

并且在目标div <MyComponent props:... ></MyComponent>中，但未呈现，而是显示整个应用程序。
我不知道它是否可以甚至可能分配组件路由值相同的当前页面的网址，这可能是一个问题，如果我需要两个不同的那些在同一个页面。