不前后端分离写 VUE，页面是不是会有多个 createApp 行为？

最近在尝试写 VUE，因为旧项目无法做到前后端分离，依旧是基于后端渲染模板模式。

一般项目，会分 页眉、侧栏，内容和页脚。在后端来说，这几块拆分好，然后用 JQ 去写一套逻辑即可。

我尝试用 VUE 去编写，VUE 要求在 createApp({...数据逻辑..}) 中就要声明好了。如果我用到 element UI 的布局划分，

//先注册页眉
header = Vue.createApp({..逻辑和组件..}).use('ElementPlus').mount('#header');

//在注册侧栏
sidebar = Vue.createApp({..逻辑和组件..}).use('ElementPlus').mount('#sidebar');

//最后注册布局
app = Vue.createApp({..逻辑和组件..}).use('ElementPlus').mount('#app');

这是其中一个解决办法，还有另外一种，组件

//在页眉文件 header.php 声明
<script>
   const app = Vue.createApp({});
   
   app.use(ElementPlus);
   
   app.component('header', {})
</script>

//sidebar.php 侧栏
<script>
   app.component('sidebar', {})
</script>

//content.php 内容
<script>
   app.component('sidebar', {})
</script>

//footer.php 页脚
<script>
   app.mount("#app");
</script>

感觉很别扭，因为我要将后端的模板变量，转换为 Javascript 的标量，数组或对象。

不知道有没有后端有其他更优雅的解决办法呢？