Vue2基于数据创建组件

如何解决Vue2基于数据创建组件

我想基于ajax api响应或包含以下内容的数据创建一个组件：

1. 模板
2. 数据
3. 方法-可能有几种方法

备注：响应或数据是动态的，不会保存在文件中。

我尝试生成并返回结果，如：

<script>
        Vue.component('test-component14',{
            template: '<div><input type="button" v-on:click="changeName" value="Click me 14" /><h1>{{msg}}</h1></div>',data: function () {
                return {
                    msg: "Test Componet 14 "
                }
            },methods: {
                changeName: function () {
                    this.msg = "mouse clicked 14";
                },}
        });

</script>

并编译以上代码：

axios.get("/api/GetResult")
    .then(response => {
        comp1 = response.data;
        const compiled = Vue.compile(comp1);
        Vue.component('result-component',compiled);
    })
    .catch(error => console.log(error))

我在Vue.compile(comp1)上遇到了错误-

• 模板仅应负责将状态映射到UI。避免在模板中放置带有副作用的标签，例如