Vue 3 не обновляет вид, хотя данные компонента изменены

Всем привет.

Вывожу древовидный список, а позже обновляю его, но когда добавляю новый объект в массив, он отображается на фронте только если добавлял в корневой родитель ( через Offices.vue).

Данные меняются в vuex, в самом компоненте тоже. Но не рендерится на фронте.

Office.vue метод, отвечающий за изменение store

saveZone() {
            if (this.activeZone.id) {
                this.$store.dispatch('updateZone', this.activeZone).then(() => {
                    this.zones.filter(zone => {
                        if (zone.id === this.activeZone.id) {
                            zone = Object.assign(zone, this.activeZone)
                            toast.success(
                                this.$i18n.t('Zone "{name}" updated successfully', {name: zone.name})
                            )
                            this.showModal = false
                        }
                        return zone
                    })
                })
            } else {
                this.$store.dispatch('addZone', this.activeZone).then(() => {
                    
                }).catch((e) => {
                    console.log(e)
                    toast.error(this.$i18n.t('Error on adding new zone!'))
                })
            }
        }

в computed

zones() {
    return this.$store.getters.getZonesByOffice
},
zonesTree() {
    if (this.zones) {
        return this.prepareZonesTree(this.zones, 0)
    }
},

prepareZonesTree

prepareZonesTree(zones, parent) {
    const rootZones = zones.filter(item => {
        if (item.parent === parent) {
            return item
        }
    })
    rootZones.map(item => {
        item.children = this.prepareZonesTree(zones, item.id)
        console.log(`Founded ${item.children.length} for ${parent}`)
        return item
    })      
    return rootZones
},

actions

addZone({commit}, data) {
        return axios.post(`/admin/zones`, data).then(res => {
            commit('addZone', res.data)
            return res.data
        })
    },

mutations

addZone(state, data) {
        state.zonesByOffice.push(data)
    },

Offices.vue

<ul class="zones">
                    <ZoneItem
                        v-for="zone in zonesTree"
                        :key="zone.id"
                        :active-zone-id="activeZoneId"
                        :zone="zone"
                        @on-zone-move="onZoneMove"
                        @on-zone-click="onZoneClick"
                        @on-edit-click="onEditClick"
                        @on-add-click="onAddClick"
                    />
                </ul>

ZoneItem.vue

<li>
<ul class="subzones">
            <Draggable
                v-model="children"
                group="subzones"
                handle=".handle"
                item-key="id"
                :component-data="getComponentData(zone)"
                @end="dragEnd($event)">
                <template #item="{element, index}">
                    <ZoneItem
                        :key="element.id"
                        :active-zone-id="activeZoneId"
                        :zone="element"
                        @on-zone-move="onZoneMove"
                        @on-zone-click="onZoneClick"
                        @on-add-click="onAddClick($event)"
                        @on-edit-click="onEditClick">
                        <template #drag>
                            <div class="handle">
                                <DragVertical/>
                            </div>
                        </template>
                    </ZoneItem>
                </template>
            </Draggable>
        </ul>
</li>

Подскажите пожалуйста, почему не идет обновление в самом компоненте на фронте.