Trying to use javascript's Function object to turn a string into a Vue.js component

My backend is serving Vuejs components as strings. I am using the following code to convert this string into an object:

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

When I inspect the variable in the console it looks correct. I can inspect the various methods and lifecycle hooks. However, when I try to copy the object via chrome's copy() method, the components object and methods object is empty.

Attempting to mount the component fails. Any thoughts on what is going wrong or a better approach to mount vuejs components that are stringified? Here is a sample string:

{
    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>
    `
}