Vue3 datatable not updating after Axios request - vue.js

Question

Im building a datatable and it shows my test-data correctly.
However, after i do my Axios request, it doesnt update the state.tableData variable!
What am I doing wrong here?
I keep seeing a table with the value 'test1', and not 'test2' and 'test3'?
I am using Vue3 with the composition API.
This is the template part:
<template>
<div class="card">
<div class="card-body pt-0">
<Datatable
:table-data="state.tableData"
:table-header="state.tableHeader"
>
<template v-slot:cell-name="{ row: item }">
{{ item.name }}
</template>
</Datatable>
</div>
</div>
</template>
And the JS code:
<script lang="ts">
import { defineComponent, toRefs, reactive, ref, onMounted } from "vue";
import Datatable from "#/components/kt-datatable/KTDatatable.vue";
import axios, { AxiosRequestConfig, AxiosResponse} from 'axios';
export default defineComponent({
name: "listing",
components: {
Datatable,
},
setup() {
interface fieldDefinitions {
name: string;
}
const state = reactive({
tableData: ref<fieldDefinitions[]>([]),
tableHeader: [{
name: "Naam",
key: "name",
sortable: true,
}]
});
function getListings() {
const config: AxiosRequestConfig = {
method: 'get',
url: 'https://myurl',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
};
axios(config)
.then(function (response) {
//state.tableData = response.data.data;
state.tableData = [{'name':'test2'},{'name':'test3'}];
console.log(state.tableData);
})
.catch(function (error) {
console.log(error);
});
}
onMounted(async () => {
getListings()
});
return { state,getListings };
},
});
</script>

Answer 1

Not sure why you have tableData: ref<fieldDefinitions[]>([]), you are assigning state.tableData = [{'name':'test2'},{'name':'test3'}]; not state.tableData = ref([{'name':'test2'},{'name':'test3'}]). But even then, state.tableData.value is not needed since reactive unwraps refs. see docs. So as far as I can tell and reproduce, your code should be working properly to trigger reactivity.
The issue is likely due to your Datatable component is not updating properly.