VueJs + BootstrapVue: Edit object with data pagination - vue.js

Question

I'm new to VueJS and I probably missed something in the instance lifecycle.
Actually, I created a page where I list all my users in a BootstrapVue b-table. for each users, I added the possibility to edit / remove the user through a modal.
When I activate pagination with b-pagination element and :per-page attribute, I have an unexpected behavior on my modal to edit the user.
In order to modify my user only after submit action, I create a clone of the original user in the edit modal.
The problem is it works only for the 1st page, but all others pages get the data of the 1st page.
<b-table
id="my-table"
:fields="fields"
:items="users"
:per-page="perPage"
:current-page="currentPage">
<template slot="actions" slot-scope="row">
<edit-user v-bind:user="row.item"</edit-user>
<remove-user v-bind:user="row.item"></remove-user>
</template>
</b-table>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table">
</b-pagination>
import EditUser from "./EditUser.vue";
import RemoveUser from "./RemoveUser.vue";
export default {
name: 'User',
data() {
return {
perPage: 10,
currentPage: 1,
pageOptions: [5, 10, 15],
filter: null,
fields: [
{ key: 'name', sortable: true, sortDirection: 'desc' },
'actions'
],
}
},
computed: {
...mapGetters([
'users',
'error'
]),
rows() {
return this.users.length
}
},
mounted () {
this.$store.dispatch('getUsers')
},
components: {
editUser: EditUser,
removeUser: RemoveUser
}
}
The child editUser component
<b-button variant="info" #click="modalShow = !modalShow">Edit</b-button>
<b-modal v-model="modalShow" hide-footer title="Edit User">
<b-form action="" v-if="modalShow">
<b-form-group id="input-group-name" label="Name:" label-for="input-name">
<b-form-input id="input-name" v-model="editedUser.name" required></b-form-input>
</b-form-group>
<b-button variant="secondary" #click="modalShow = !modalShow">Cancel</b-button>
<b-button variant="primary" #click="onSubmit">Submit</b-button>
</b-form>
</b-modal>
export default {
props: {
user: Object
},
data() {
return {
modalShow: false,
editedUser: JSON.parse(JSON.stringify(this.user)),
}
},
methods: {
onSubmit(evt) {
evt.preventDefault()
this.$store.dispatch('editUser', {
oldItem: this.user,
newItem: this.editedUser
})
this.modalShow = false
}
}
}

Answer 1

I managed to fix my issue by cloning the user object after opening the modal.
<b-button variant="info" #click="editUser(user)">Edit</b-button>
[...]
export default {
props: {
user: Object
},
data() {
return {
modalShow: false,
editedUser: {},
}
},
methods: {
editUser(user) {
this.modalShow = true
this.editedUser = JSON.parse(JSON.stringify(user));
}
onSubmit(evt) {
[...]
}
}
}
However, I still don't understand why the previous piece of code doesn't have the same behavior.