Как привязать значение к субкомпоненту при компиляции шаблона родительского компонента с использованием VueJS

Question

У меня есть страница для отображения элементов управления параметрами (метка, текстовое поле) с сервера из 1 HTML-шаблона, но данные из модели не привязываются к компоненту этого HTML-шаблона, когда я компилирую этот HTML-файл. Тем не менее, если использовать этот HTML-шаблон на моей странице, он связывает OK

Я использую Vue.js и тимелист, я ищу на многих страницах, но все еще не могу найти решение.

Поскольку я новичок в Vue.js, пожалуйста, помогите мне исправить это дело

Спасибо.

 html template: this template is set to variable "inputHtmlText" on
model this problem is: option.get('2') isn't binding to component
 "cus-option-label" and "cus-option-input" when run command
 "this.template = Vue.compile(template).render;" from component
 "cusOptionTable"

<table> 
    <tr>
        <td><cus-option-label  th:option="${option.get('2')}"></cus-option-label></td>
        <td><cus-option-input  th:option="${option.get('2')}"></cus-optpion-input></td>
    </tr>   
</table>

Код html файла (моя страница)

<div class="area-general-wrap" id="optForm">
        <form ref="optForm" class="frm-set" th:object="${optForm}" method="post">
            <cus-option-table class="tbl-frm" role="presentation"
                            th:input-html-text="${inputHtmlText}">
            </cus-option-table>
        </form>
</div>

Код js файла

var cusOptpionLabel = Vue.extend({
    template: '<div class="txt-title"><label>{{ title }}<b v-else-if="required" class="label-required">required input</b></label></div>',
    props:{
        title:{
            type: String
        },
        required:{
            type: Boolean,
            default:false
        }
    }
});
var optText = '<div class="area-contents">{{ displayValue }}<input type="hidden" :name="name" :value="value"/></div>';
var optInputText = '<div class="area-contents"><input v-model="value" :name="name" type="text" :aria-label="title" :title="title" :data-vv-as="title"></div>';
var cusOptpionInput = Vue.extend({
    template: '',
    props:{
        name:{
            type: String,
            default:"opt"
        },
        referMode:{
            type: Boolean,
            default:false
        },
        inputType:{
            type: String,
        },
        title:{
            type: String
        },
        value:{},
        required:{
            type: Boolean,
            default:false
        }
    },
    data: function () {
        return {
            options:[],
            template: null
        }
    },
    render: function(createElement) {
        if (!this.template) {
            return createElement('div', 'Loading...');
        } else {
            return this.template();
        }
    },
    mounted:function(){
        var template = "";
        switch(this.inputType) {
            case "0":
                template = optText;
                break;
            case "1":
                template = optInputText;
                break;
            default:
                break;
        }
        setTimeout(function() {
            this.template = Vue.compile(template).render;
        }.bind(this), 0);
    }
});

var cusOptionTableDefaultTemplate = '<table></table>';
var cusOptionTable = Vue.extend({
    template: '',
    props:{
        inputHtmlText: {
            type: String
        }
        option: {
            type: Object
        }
    },
    data: function () {
        return {
            options:[],
            template: null
        }
    },
    methods: {
        changeTemplate: function() {
            var template = faOptionTableDefaultTemplate;
            if (this.inputLayoutHtmlText != null && this.inputLayoutHtmlText.trim() !== "") {
                template = this.inputLayoutHtmlText;
            }
            setTimeout(function() {
                this.template = Vue.compile(template).render;
            }.bind(this), 0);
        }
    },
    render: function(createElement) {
        if (!this.template) {
            return createElement('div', 'Loading...');
        } else {
            return this.template();
        }
    },
    mounted: function() {
        this.changeTemplate();
    },
    components: {
        "cus-option-label": cusOptpionLabel,
        "cus-option-input": cusOptpionInput
    }
});

optionForm = new Vue({
    el: "#optForm",
    data: function () {
        return {
            form:{},
            defaultModelData:{}
        }
    },  
    components: {
        "cus-option-table": cusOptionTable
    }
});

Сервер кодов: возвращаемая модель

    Map<String, OptionItem> OptionInfo = new HashMap<String, OptionItem>();
    OptionItem1.put("A1', optionItem1);
    OptionItem1.put("B1', optionItem2);
    OptionItem1.put("C1', optionItem3);
    model.addAttribute("option", OptionInfo);
    // inputHtmlText is html string
    model.addAttribute("inputHtmlText", inputHtmlText);

// the field of OptionItem are: name, title,inputType, required ,...