Переключатель теряет свое проверенное состояние после ответа POST (с помощью Vuetify Component v-radio)

Question

Я монтирую список групп радиостанций, поэтому, когда у всех групп в списке есть его радио, я отправляю этот список, но когда я получаю ответ POST, все радио отключаются, если я смотрю в браузерконсоль имеет значение каждого радио, проблема в том, что он не рендерит проверенное значение.

Однако, когда я нажимаю еще раз, чтобы проверить радио, возникает новая диспетчеризация, но теперь объект уже существует ис ответом PUT все работает нормально, радио все еще рендеризуется, проверено.

Вот как я это сделал:

<template>
    <v-radio-group v-model="grade.rating" @change="onChange">
        <v-radio v-for="r in ratings" :key="r.id" :value="r" :label="r.initials" :hint="r.name" color="indigo" />
    </v-radio-group>
</template>

methods: {
    onChange() {
        const pendingGrades = this.grade.abilities.filter(a => a.rating === null)
        if (pendingGrades.length === 0) {
            this.$store.dispatch('grade/save', this.grade)
                .then(grade => {
                    if (!this.grade.id) {
                        this.grade = { 
                            ...grade, 
                            abilities: grade.ability.map(a => ({ ...a })) 
                        }
                    }
                })
        }
    }

класс - это объект, который родительский компонент передает этому компоненту, где я монтируюэтот список с радиогруппами.

вот пример объекта оценки:

{"id":285992,
    "abilities":[
            {"id":1323220,
             "ability":{
                 "id":652,
                 "name":"Here is the name",
                 "rating":{
                     "id":1,
                     "name":"The name",
                     "initials":"TN"
]}

Заранее спасибо!