Vue component

vue

//promocao regras
    Vue.component('promocao-regras', {
        template: '<div class="form-inline">'  +
                    '<div class="form-group">' +
                        '<label class="control-label">Regra </label>' +
                        '<input type="text" class="form-control" v-model="newItem" placeholder="Adicione uma regra" />'+
                        '<button type="button" class="btn btn-success" v-on:click="addItem">Adicionar</button>'+
                    '</div>'+
                   '</div>' +
                    '<div class="form-group">'+
                        '<table class="table table-hover" id="regraTb" :tbid="regraTb">'+
                            '<thead><tr><th>Descrição</th><th width="10%">#</th></tr></thead>'+
                            '<tbody>'+
                                '<tr v-for="(index, item) in getList()">'+
                                    '<td>@{{ item }}</td>'+
                                    '<td><button type="button" class="btn btn-danger btn-sm" v-on:click="deleteItem(index)">Deletar</a></td>'+
                                '</tr>'+
                            '</tbody>'+
                        '</table>'+
                    '</div>'
                   ,
        props : [
            {
                name : 'options'
            }
        ],
        data : function () {
            return {
                hidden : 'regras',
                rules: [],
                newItem : '',
                firstTime : true
            }
        },
        methods : {
            addItem : function() {
                
                if (!this.rules.includes(this.newItem) && this.newItem != '') {
                    this.rules.push(this.newItem);
                }
                
                this.update(this.newItem);
                this.newItem = '';
            },
            update : function(itemValue) {
                // $('#regras').val(this.rules);

                var element = document.createElement('input');
                element.id = 'rule_' + this.rules.length;
                element.type = "hidden";
                element.value = itemValue;
                element.name = this.hidden +"[]";

                console.log(element);

                $('#regras').append(element);
            },
            deleteItem : function(index) {
                console.log(index);
                this.rules.splice(index, 1);
                this.update();
            },
            getList: function() {

                var data = JSON.parse(this.options);
                var item = {};

                if (this.rules.length == 0 && this.firstTime == true) {

                    this.firstTime = false;

                    for (i in data)
                    {
                        item = {
                            id    : 'rules_'
                            value :data[i]
                        }

                        this.rules.push(data[i]);
                        this.update(data[i]);
                    }
                }

                return this.rules;
            }
        }
    })