VueJS MDB-datatable doesn't render data from the API call - vue.js

Question

I'm using vueJs MDB-datatable to display my data coming from my API.
I followed the MDB-datable documentation in handling the "OtherJSON structure" but it didn't re-render the data from the API request.
I tried different callback beforeCreate, created, beforeMount, and mounted, the data was changed but still, it didn't render the latest data.
Here's the code:
<template>
<mdb-datatable
:data="tableData"
striped
bordered
/>
</template>
<script>
import 'mdbvue/build/css/mdb.css';
import { mdbDatatable } from 'mdbvue';
export default {
components: {
mdbDatatable
},
data: () => ({
tableData: {
columns: [],
rows: []
}
}),
created() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(json => {
let keys = ["id", "name", "username"];
let entries = this.filterData(json, keys);
//columns
this.tableData.columns = keys.map(key => {
return {
label: key.toUpperCase(),
field: key,
sort: 'asc'
};
});
console.log(this.tableData.columns);
//rows
entries.map(entry => this.tableData.rows.push(entry));
console.log(this.tableData.rows);
})
.catch(err => console.log(err))
},
methods: {
filterData(dataArr, keys) {
let data = dataArr.map(entry => {
let filteredEntry = {};
keys.forEach(key => {
if(key in entry) {
filteredEntry[key] = entry[key];
}
})
return filteredEntry;
})
return data;
}
}
</script>
The MDB-datatable documentation seems to be straight forward but I don't know which part I'm missing.
I'm new to VueJS. Any help is much appreciated.

Answer 1

It seems that the current version of MDB Vue (5.5.0) takes a reference to the rows and columns arrays and reacts when these arrays mutate rather than reacting to changes to the property bound to the data prop itself.
I see you are already mutating rather than replacing the rows array, so you need to do the same with the columns array.
//columns
this.tableData.columns.push(...keys.map(key => {
return {
label: key.toUpperCase(),
field: key,
sort: 'asc'
};
}));