Странное распространение события на компоненте Vue

Question

Я потратил около часа на эту проблему и не могу понять. Вот оно:

Я создал компонент в Vue с именем <CheckboxList/>, который отображает флажки с учетом реквизита itemName, items и milestone. Последний вариант является необязательным, и я просто использую его для конкретного c случая.

Я использую Vuetify .

Вот компонент:

<template>
<v-card class="grey lighten-4">
    <v-container class="mt-0">
        <template v-if="milestone">
            <v-chip class="mb-4" color="indigo" text-color="white">
                <v-avatar left>
                    <v-icon>flag</v-icon>
                </v-avatar>{{ milestone.name }}
            </v-chip>
        </template>
        <v-text-field class="py-0" :label="`Filter ${itemName}...`" v-model="filterItem"></v-text-field>
        <v-row id="checkboxListBox">
            <v-col
                xl="3"
                lg="4"
                md="6"
                sm="12"
                v-for="item in getFilteredItems"
                :key="`${itemName}_${item.id}`"
                class="py-0"
            >
                <v-checkbox
                    v-model="selectedItems"
                    @click.capture="!milestone ? $emit('checkbox-changed', selectedItems) : $emit('checkbox-submilestone-changed', { milestoneId: milestone.id, selectedItems })"
                    :label="item.name"
                    :value="item.id"
                />
            </v-col>
        </v-row>
    </v-container>
</v-card>

Компонент работает хорошо, когда я не использую циклы для его рендеринга:

<CheckboxList
    itemName="milestones"
    :items="getMilestones"
    @checkbox-changed="selectedMilestones = $event"
/>

Он сохраняет все выбранные вехи в правильной переменной. , Распространение событий работает хорошо.

Проблема возникает, когда я отрисовываю ее с использованием v-for. Я хочу визуализировать столько компонентов, сколько выбранных вех, и это хорошо получается. Проблема в том, что он неправильно хранит состояние!

Я покажу вам, что происходит:

Пока не сделано ни одного клика - selectedSubmilestones объект пуст , как и должно быть .

1-й щелчок сделан - объект selectedSubmilestones по-прежнему пуст , когда этого не должно быть. Но консоль записала события правильно.

2-й щелчок сделан - selectedSubmilestones объект заполняется, когда он не должен быть . Консоль по-прежнему правильно регистрирует события (пустой массив, потому что нет выбора).

И он остается таким, заполняя объект неправильно, когда это не должно.

Я действительно не могу понять, вот функция handleSubmilestoneCheckboxClick():

handleSubmilestoneCheckboxClick(e) {
    console.log(e)
    const { milestoneId, selectedItems } = e
    this.selectedSubmilestones[milestoneId] = selectedItems
}

Вот это v-для рендеринга:

<template v-for="(milestone, index) in getSelectedMilestonesWithSubmilestones">
    <CheckboxList
        :class="index !== selectedMilestones.length - 1 ? 'mb-4' : ''"
        v-if="getMilestoneById(milestone).submilestones.length"
        :key="'submilestone_checkboxlist_' + milestone"
        itemName="submilestones"
        :items="getMilestoneById(milestone).submilestones"
        v-on:checkbox-submilestone-changed="handleSubmilestoneCheckboxClick($event)"
        :milestone="getMilestoneById(milestone)"
    />
</template>

Пожалуйста, помогите:)