Массив Vue.js путается после перезагрузки данных

Question

Данные в массиве Vue.js с объектами JSON в нем смешиваются после перезагрузки их из бэкэнда Spring.

Я пытаюсь создать веб-интерфейс с Vue.js для редактирования данных в бэкэнде Spring. Vue.js вызывает бэкэнд с помощью axios, возвращает список элементов, отображаемых на странице с помощью v-for. Элементы можно редактировать отдельно, при нажатии кнопки «Сохранить» для элемента, элемент отправляется на сервер и данные обновляются в базе данных. После этого, когда я нажимаю кнопку перезагрузки в браузере (или закрываю и открываю ту же страницу), данные загружаются с сервера, но смешиваются.

loadExercises(){     
           axios({url:'http://localhost:5000/exercises/all'}).then(resp => {
                    this.exercises = resp.data;
                })
            }

Это функция, которая загружает данные.

Это изначально массив: https://imgur.com/5x8TiwY

Это массив после перезагрузки, я отредактировал первую запись: https://imgur.com/d6G4SMm

Бэкэнд возвращает правильные объекты, единственное отличие состоит в том, что запись, которая была отредактирована, является последней в массиве (и она была первой в примере примера перед редактированием). Идентификаторы не меняются при сохранении, обновляются только детали, такие как имя или описание.

Это часть шаблона, которая генерирует html, на тот случай, если что-то там есть.

<div role="tablist" id="container" v-bind:key="ex.id" v-for="ex in exercises">
            <b-card no-body class="mb-1 customcard">
                <b-card-header header-tag="header" class="p-1 alignleft" role="tab"  v-b-toggle="`accordion${ex.id}`">
                    <span>{{ex.name}}</span>
                </b-card-header>
                <b-collapse v-bind:id="`accordion${ex.id}`" accordion="my-accordion" role="tabpanel">
                    <b-card-body class = "alignleft">
                        <p class="card-text">
                            Name: <b-form-input
                                v-bind:value="`${ex.name}`"
                                v-bind:id="`input${ex.id}`"
                                v-on:input="saveExName(ex.id)"></b-form-input>
                            Target: {{ex.target}} <b-form-select v-on:input="onTargetChange(ex.id)"
                                                                 v-bind:id="`target${ex.id}`" >
                            <option v-bind:key = "target" v-for="target in targets" :value="target" >{{target}}</option>

                            </b-form-select>
                            Description: <b-form-textarea
                                v-bind:value="`${ex.description}`"
                                :rows="3"
                                :max-rows="6"
                                v-on:input="saveExDesc(ex.id)"
                                v-bind:id="`textarea${ex.id}`"></b-form-textarea>
                        </p>
                        <div class="alignright">
                            <b-button v-on:click="saveExUpdate(ex.id)">Save</b-button>
                        </div>

                    </b-card-body>
                </b-collapse>
            </b-card>
        </div>

Есть идеи, почему это происходит?