vue怎么将一个页面存到服务端，前端接口获取渲染

项目开发遇到一个需求：
1、其中一个页面写成模板，储存在后端，可根据选择渲染
2、这个页面里面什么都是不固定的，有方法，有样式，有跟后端的数据交互。
3、后端存的是一个字符串

例如：

<template>
   <div>
      这是一个测试
      <div class="box" @click="clickTest">盒子测试</div>
      <button class="btn" @click="handleSearch">element及获取数据测试</button>
   </div>
</template>

<script>
import { search } from './api'
export default {
   props: {},
   data() {
      return {}
   },
   computed: {},
   created() {},
   mounted() {},
   methods: {
      clickTest() {
         console.log('点击测试')
      },
      async handleSearch() {
         const res = await search()
         console.log(res, '调用结果')
      }
   }
}
</script>

<style scoped lang="less">
.box {
   width: 100px;
   height: 100px;
   background: red;
}
.btn {
   color: green;
}
</style>

我需要把这么一个vue页面整体丢到服务器上去，然后我在需要的时候从服务器拉取这个页面并渲染到我想要的地方

目前有试过官方的异步组件，但是异步组件有关跟后台的数据交互会无效，并且是全局组件，暂时不考虑，当然，如果只有这种方式，也可以提，也想过只存储html代码到服务端，但是在方法绑定，数据交互，动画特效方面会很费事，不确定是否能实现，并且，实际页面需要触发的方法不少

editor编辑器

或者h5编辑器

你为何不做成，向后端请求一个标识，然后去渲染你的指定组件了，也就是通常所说的权限。你除非是后端是用next.js写的后端，可以进行渲染。

楼主，需求实现了吗，怎么实现的能分享一下吗