Vue 2 draggable not reactive when v-model value is an iterable of parent tag

I am using Vue 2 with Vuex. The received object is first sorted into separate sub-objects based on classCategory value.
Does it not work because the v-model value in draggable is a key from parent tag object?

<div class="class-draggable__group" v-for="group in groupedClasses" :key="group.categoryLocalised">
                    <label class="class-draggable__label__category">{{ group.categoryLocalised }}</label>
                    <draggable v-model="group.classes"
                        :options="{ group: 'classes', dragClass: 'drag', ghostClass: 'ghost' }">
                        <div v-for="classItem in group.classes" :key="classItem.class" class="class-draggable__draggable__item">
                            <div class="d-flex align-items-center">
                                <svg-icon name="drag" class="mr-8 move item"></svg-icon>
                                <div>{{ classItem.classLocalised }}</div>
                            </div>
                            <div class="class-info d-flex align-items-center">
                                <checkbox class="class-draggable__draggable__item__checkbox" :view="1"
                                    v-model="classItem.enabled" @select="toggleClassEnabledValue(classItem.class, $event)" />
                                <div class="icon-wrapper">
                                    <svg-icon v-if="classItem.taximeterEnabled" name="taximeterIcon"></svg-icon>
                                </div>
                                <div class="icon-wrapper">
                                    <svg-icon v-if="classItem.haggleEnabled" name="haggleIcon"></svg-icon>
                                </div>
                                <btn :content="{ icon: 'edit' }" class="class-draggable__draggable__item__button mr-8"
                                    round="circle" @click="editClassHandler(classItem.class)" />
                            </div>
                        </div>
                    </draggable>
                </div>
groupedClasses() {
            const groups = {};
            this.zoneInfoClasses.forEach(classItem => {
                if (!groups[classItem.categoryLocalised]) {
                    groups[classItem.categoryLocalised] = [];
                }
                groups[classItem.categoryLocalised].push(classItem);
            });
            return Object.keys(groups).map(categoryLocalised => ({
                categoryLocalised,
                classes: groups[categoryLocalised],
            }));
        },

here’s the zoneInfoClasses object:


0   Object { class: "delivery", classLocalised: "Доставка", categoryLocalised: "Доставка", … }
class   "delivery"
classLocalised  "Доставка"
categoryLocalised   "Доставка"
enabled true
taximeterEnabled    false
haggleEnabled   false
1   Object { class: "comfort", classLocalised: "Комфорт", categoryLocalised: "Такси", … }
class   "comfort"
classLocalised  "Комфорт"
categoryLocalised   "Такси"
enabled false
taximeterEnabled    false
haggleEnabled   false
2   Object { class: "cargo", classLocalised: "ГрузоТакси", categoryLocalised: "Доставка", … }
class   "cargo"
classLocalised  "ГрузоТакси"
categoryLocalised   "Доставка"
enabled false
taximeterEnabled    false
haggleEnabled   false
3   Object { class: "business", classLocalised: "Бизнес", categoryLocalised: "Такси", … }
class   "business"
classLocalised  "Бизнес"
categoryLocalised   "Такси"
enabled false
taximeterEnabled    false
haggleEnabled   false

Dragging functionality is working fully visually only. When I release the dragged item all items are reset to their starting position.