尝试使用javascript的Function对象将字符串转换为Vue.js组件

Question

我的后端将Vuejs组件作为字符串提供。我正在使用以下代码将此字符串转换为对象：

let initializeForm = Function(`return ${template}`)();

当我在控制台中检查变量时，它看起来是正确的。我可以检查各种方法和生命周期挂钩。但是，当我尝试通过chrome的copy（）方法复制对象时，components对象和methods对象为空。

尝试安装组件失败。对出什么问题有任何想法，或者有更好的方法来安装已字符串化的vuejs组件？这是一个示例字符串：

{
    name: ‘SomeForm’,
    components: {
    },
    props: ['processDefinition', 'taskDefinition', 'variables'],
    computed: {
        taskId () {
            if (this.taskDefinition && this.taskDefinition._id) {
                return this.taskDefinition._id;
            } else {
                return 'startEvent';
            }
        }
    },
    watch: {
        formData: {
            handler: () => undefined,
            deep: true
        }
    },
    data () {
        return {
            formData: {},
            options: []
        };
    },
    methods: {
        setFormData () {
            var fName = "DynamicRoleRequest:setFormData():";

            this.formData = this.processDefinition.formProperties.reduce((acc, formProperty) => {
                if (this.variables && this.variables[formProperty._id]) {
                    return Object.assign(acc, { [formProperty._id]: this.variables[formProperty._id] });
                } else {
                    return Object.assign(acc, { [formProperty._id]: formProperty.type.name === 'boolean' ? false : '' });
                }
            }, {});
        },
        resetForm () {
            this.setFormData();
        },
        cancel () {
            this.resetForm();
            this.$emit('cancel');
        },
        submit () {
            var fName = "DynamicRoleRequest:submit():";

            let payload = this.formData;

            if (this.taskId === 'startEvent') {
                payload._processDefinitionId = this.processDefinition._id
            }

            this.$emit('submit', payload);
        },
        accept () {
            this.formData.decision = 'accept';
            this.submit();
        },
        reject () {
            this.formData.decision = 'reject';
            this.submit();
        }
    },
    created () {
        var fName = "DynamicRoleRequest:created():";
        var roles = [];
        var role = {};

        let anInstance = this.getRequestService();

        anInstance.get('endpoint/rolesavailableforuser')
        .then( (response) => {
            roles = response.data.result;

            for (var i = 0 ; i < roles.length ; i++) {
                role = roles[i];
                if (role.name !== "approvers" &&
                    role.name !== "Employees" &&
                    role.name !== "Contractors") {
                        this.options.push(role);
                }
            }

            this.options.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
            this.setFormData();

            return;
        })
        .catch( (response) => {
              return;
        });

        // this.setFormData();

        console.log(fName + "EXIT");
    },
    template: `
        <form class="container" :name="processDefinition._id">
            <div v-for="formProperty in processDefinition.formProperties" :key="formProperty._id" class="form-group row">
                <template>
                    <label class="col-md-3 col-form-label">Available Roles</label>
                    <div class="col-md-9">
                        <select
                            v-model="formData[formProperty._id]"
                            class="form-control"
                            name="RoletoProvision"
                            id="RoletoProvision">
                            <option v-for="option in options" v-bind:value="option._id">
                                {{ option.name }}
                            </option>
                        </select>
                    </div>
                </template>
            </div>

            <div class="form-group row justify-content-end">
                <template v-if="taskId !== 'startEvent'">
                    <div class="col text-right">
                        <b-button variant="outline-danger" @click="reject">Reject</b-button>
                        <b-button variant="primary" @click="accept">Accept</b-button>
                    </div>
                </template>
                <template v-else>
                    <div class="col text-right">
                        <b-button variant="outline-secondary" @click="cancel">Cancel</b-button>
                        <b-button variant="primary" @click="submit">Submit</b-button>
                    </div>
                </template>
            </div>
        </form>
    `
}