push object to array of arrays vue re-rendering failing

Question

I have this weird issue where I can't seem to push an object to an array of arrays. I am able to log the value of groups....but I can't update it.

here's my function to push to the groups array under a given set of conditions

 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])
                            }                   
                     }

                }

            },

here is where I render the data

<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> 

I am able to edit 'groups' to some extent but groups is referencing the computed prop here

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

You are updating the results of a computed property. The result is not reactive, that's why you see that your code is updating the groups array, but you don't see any changed in the DOM.

You need to move the logic from calcExclusion inside the computed method for groups.