vue js просмотр не обновляется с динамически добавленной v-моделью

Question

Я добавляю некоторые динамические c данные в модель в vuejs смонтированном хуке, но когда он монтируется в первый раз, реактивность работает и я смотрю обновления, но когда я делаю изменения, эта модель не обновляется.

{
    props: {
        requestall: Object,
        category_field_options: Array,
    },
    data(){
        return {
            field_options: {},
        };
    },
    mounted(){
        for(var field of this.category_field_options)
        {
            var data = [];

            for(var option of field.options)
            {
                if(this.check_option_is_selected(field.id, option.id) ) // true
                {
                    data.push(option.id);
                }
            }


            this.field_options['field_' + field.id] = data;

        }
    },
    methods: {
        /**
         * Dynamic category fields options checked or unchecked.
         * 
         * @param object event
         * @param int field_id
         * @param int option_id
         */
        field_option_changed(event, field_id, option_id)
        {
            if(this.field_options['field_' + field_id].indexOf(option_id) > -1){
                var index = this.field_options['field_' + field_id].indexOf(option_id);
                this.field_options['field_' + field_id].splice(index, 1);
            }else{
                this.field_options['field_' + field_id].push(option_id);
            }
        },
        /**
         * @param int
         * @param int
         * 
         * @return 
         */
        check_option_is_selected(field_id, option_id)
        {
            var check = this.requestall['field_' + field_id] 
                && (this.requestall['field_' + field_id].indexOf(option_id.toString()) > -1) 
                ? true : false;

            return check;
        },
    }
}

Я вижу, как изменения вступают в силу в vue chrome инспекторе, когда работает функция field_option_changed. но после этих изменений вид end не обновляется. Когда он смонтирован, он работает нормально. Я не уверен, что, возможно, это происходит из-за javascript типов данных хранимых переменных (в JavaScript переменная может хранить два типа данных: примитивные и ссылочные)

<template>
    <div>
        <span v-for="(val,key,index) in field_options" :key="'willSubmitField_' + index">
            <input type="text" v-for="option in val" :key="'willSubmitField_' + index + '_' + option" 
                :name="key + '[]'" :value="option">
        </span>
    </div>
</template>

# РЕДАКТИРОВАТЬ 1

Я нашел решение с одним значением массива v-модели и сохранил в нем только выбранные значения.

{
    props: {
        requestall: Object,
        category_field_options: Array,
    },
    data(){
        return {
            field_options: [],
        };
    },
    mounted(){
        for(var key in this.requestall)
        {
            if(key.search(/^field_\d$/i) > -1)
            {
                for(var option of this.requestall[key]){
                    this.field_options.push(parseInt(option));
                }
            }
        }
    },
    methods: {
        /**
         * Dynamic category fields options checked or unchecked.
         * 
         * @param object event
         * @param int option_id
         */
        field_option_changed(event, option_id)
        {
            if(this.field_options.indexOf(option_id) > -1){
                var index = this.field_options.indexOf(option_id);
                this.field_options.splice(index, 1);
            }else{
                this.field_options.push(option_id);
            }
        },
        /**
         * @param int
         * @param int
         * 
         * @return 
         */
        check_option_is_selected(field_id, option_id)
        {
            var check = this.field_options && (this.field_options.indexOf(option_id) > -1) 
            ? true : false;

        return check;
        },
    }
}

и изменения в шаблоне

<template>
    <div>
        <span v-for="(field,index) in category_field_options" :key="'categoryField_' + index">
            <span v-for="option in field.options" :key="'categoryField_option' + option.id">
                <input type="text" :name="'field_' + field.id + '[]'" 
                    v-if="check_option_is_selected(field.id, option.id)" 
                    :value="option.id">
            </span>
        </span>
    </div>
</template>

Answer 1

Из-за современных ограничений JavaScript, Vue не может обнаружить добавление или удаление свойства. Например:

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` is now reactive

vm.b = 2
// `vm.b` is NOT reactive

Vue не позволяет динамически добавлять новые реактивные свойства root -уровня к уже созданному экземпляру. Однако можно добавить реактивные свойства к вложенному объекту, используя метод Vue.set(object, propertyName, value).

Подробнее о Предупреждения об обнаружении изменения объекта здесь .