pu sh объект в массив массивов vue ошибка при повторном рендеринге

Question

У меня странная проблема, из-за которой я не могу показать sh объект в массиве массивов. Я могу записать значение групп .... но я не могу его обновить.

вот моя функция pu sh для массива групп при заданном наборе условий

 calcExclusion: function(){
                this.hideExclusionGroups = true //hides the exclusion groups from app before calculations

                for(var i = 0; i < this.exclusionGroups.length; i++){

                        if(this.numberOfGroups < this.exclusionGroups.length){
                            alert('could not calculate, there are more exclusion groups than groups')
                            return
                        }
                for(var j = 0; j < this.exclusionGroups[i].students.length; j++){

                            if(this.exclusionGroups[i].students.length == 1){
                                alert ('could not calculate, groups must be bigger than 1')
                                return
                            }  

                                //console.log('group number', g,'student to add',this.exclusionGroups[i].students[j])
                            if(j < this.numberOfGroups){
                           this.groups[i].push(this.exclusionGroups[i].students[j].first_name) 
                            console.log(this.groups[i])
                            }                   
                     }

                }

            },

здесь я отображаю данные

<div v-for="(group, index) in groups" class="d-inline-block bg-white p-2 m-2 border rounded">
                            <span>Group {{ index + 1 }}</span>
                            <ul>
                                <li class="groupItems" v-for="student in group">
                                    {{ student.first_name }}
                                    <input type="hidden" :name="'group['+index+']'" :value="student.id">
                                </li>
                            </ul>
                        </div> 

Я могу редактировать 'группы' до некоторой степени, но группы ссылаются на вычисленную опору здесь

computed: {
                groups: function () {

                    if(! Number.isInteger(this.numberOfGroups)) {
                        console.log('mal');
                        return [];
                    }

                    const array = [];

                    for (let j = 0; j < this.numberOfGroups; j++) {
                        array[j] = [];
                    }

                    let i = 0;
                    this.students.forEach((student) => {
                        const x = i % this.numberOfGroups;
                        if(student.include === false){
                        array[x].push(student);
                        }
                        i++;
                    });

                    return array;
                },
            },

Answer 1

Вы обновляете результаты свойства computed. Результат не реагирует, поэтому вы видите, что ваш код обновляет массив groups, но вы не видите никаких изменений в DOM.

Вам необходимо переместить логи c из calcExclusion внутри computed метода для groups.