Mutate object to use in MDbootstrap Vue - vue.js

Question

I am using MDBootstrap for Vue js, the way to use datatable is to to use prop :data="data" which I calling here tableData and I have columns ready but I need to mutate the rows inside my object,
I couldn't do that with rows:this.data or rows:data which is where I handle getting data from my server.
How can I handle this and mutate rows inside tableData ?
<template>
<div class="container-fluid">
<ProgressSpinner v-if="isLoading"/>
<mdb-datatable :data="tableData" striped bordered/>
</div>
</template>
<script>
import ProgressSpinner from './Preloader'
import DataTable from 'vue-materialize-datatable'
import { mdbDatatable } from 'mdbvue'
export default {
name: 'Companies',
data: () => ({
data: [],
tableData: {
columns: [
{ label: 'ID', field: 'id', sort: 'asc' },
{ label: 'Name', field: 'name' },
{ label: 'Phone', field: 'phone', sort: 'asc' },
{ label: 'Email', field: 'email', sort: 'asc' },
{ label: 'City', field: 'city', sort: 'asc' },
{ label: 'Join Date', field: 'joined_at' }
],
rows: []
},
}),
created() {
this.$store
.dispatch('allCompanies')
.then(() => {
this.data = this.$store.getters.getAllCompanies
})
.catch(() => {
this.customerErrors = this.$store.getters.customerError
})
},
computed: {
isLoading() {
return this.$store.getters.customersAreLoading
},
},
components: {
ProgressSpinner,
datatable: DataTable,
mdbDatatable
},
mounted() {
$('.container-fluid').bootstrapMaterialDesign()
}
}
</script>

Answer 1

You should assign the value to tableData.rows when available.
this.$store
.dispatch('allCompanies')
.then(() => {
this.tableData.rows = this.$store.getters.getAllCompanies
})