Vue.js array is mixed up after reloading data

Question

The data in the Vue.js array with JSON objects in it is mixed up after reloading them from Spring backend.

I am trying to make a frontend with Vue.js for editing the data on the Spring backend. Vue.js makes a call to the backend with axios, it returns a list of items that is rendered on the page with a v-for. The items can be edited separately, when the 'Save' button is clicked for an item, the item is sent to the backend and the data is updated in the database. After this, when I hit reload in the browser (or close and open the same page) the data is reloaded from the server but its mixed up.

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

This is the function that loads the data.

This is the array originally : https://i.stack.imgur.com/67OJv.jpg

This is the array after reload, I edited the first entry: https://i.stack.imgur.com/i6Zp4.jpg

The backend returns the correct objects, the only difference is the that the entry which was edited is the last in the array (and it was the first in the example case before the edit). The id-s do not change during saving, just the details are updated, like name or description.

This is the part of the template that generates the html, just in case it is because something in there.

<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>

Any ideas why this is happening?