VueX State Not Rendering On First Entry - vue.js

Question

Whenever I save the first item in my store it won't show up in frontend, only my buttons do.
After the first row has been added and I refresh I can add more rows, which do show up.
I tried making a clientIndex because I thought it maybe it didn't update because of "field.id", but that changed nothing.
Can anyone tell what I can do to fix it?
My index.js
state: {
clientfields: [],
clients: [],
},
mutations: {
setClientFields(state, fields) {
state.clientfields = fields;
},
setClients(state, clients) {
state.clients = clients;
},
deleteClient(state, client) {
state.clients.splice(state.clients.indexOf(client), 1);
},
addClient(state, client) {
state.clients.unshift(client);
},
actions: {
fetchClients({ state, commit }) {
axios.get('http://localhost:8000/api/clients')
.then(response => {
console.log(response.data.data);
commit("setClients", response.data.data)
commit("setClientFields", Object.keys(state.clients[0]))
console.log(Object.keys(state.clients));
})
},
deleteClient({ commit }, clientdata) {
axios.delete("http://localhost:8000/api/clients/" + clientdata.id)
commit("deleteClient", clientdata)
},
saveClient({ commit }, clientdata) {
let promise;
if (clientdata.id != null) {
promise = axios.put("http://localhost:8000/api/clients/" + clientdata.id, clientdata)
console.log(clientdata)
} else {
console.log(clientdata)
promise = axios.post("http://localhost:8000/api/clients/", clientdata)
}
promise.then(function (response) {
if (clientdata.id != null) {
commit("saveClient", clientdata)
} else {
commit("addClient", response.data.data)
}
})
.catch(function (error) {
console.log(error.response);
commit('error', error.response)
})
},
}
My Component
<template>
<div class="app" >
<v-btn tile elevation="4" style="margin-left: 20px margin-top: 20px;" v-if="! showEdit" class="btn btn-blue left" v-on:click="saveClient">Nieuwe Client</v-btn>
<table class="table-auto">
<thead>
<tr class="md:border-t-2 border-collapse border border-gray-600 ...">
<th class="px-4 py-2 ">Edit</th>
<th class="px-4 py-2 ">Delete</th>
<th class="px-4 py-2 allow-overflow" v-for="field in fields" :key="field.id">{{ field.replace("_"," ") }}</th>
</tr>
</thead>
<tr class="md:border-t-2 border-collapse border border-gray-600 ..." v-for='(clientdata, clientIndex) in clients' :key="clientIndex">
<td class="px-4 py-2 font-medium">
<v-btn class="ocz" v-on:click="updClient(clientdata)">
Edit
</v-btn>
</td>
<td class="px-4 py-2 font-medium">
<template>
<v-dialog
v-model="confirm"
width="350"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="red"
v-bind="attrs"
v-on="on"
>
Delete
</v-btn>
</template>
<v-card>
<v-card-title class="text-h5">
ARE YOU SURE YOU <br> WANT TO DELETE THIS?
</v-card-title>
<v-card-actions>
<v-btn
color="grey"
text
#click="confirm = false"
>
Cancel
</v-btn>
<v-btn
color="red"
text
#click="delClient(clientdata); confirm = false;"
>
Delete
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
</td>
<td class="px-4 py-2 font-medium" v-for="field in fields" :key="field.id">{{ clientdata[field] }}</td>
</tr>
<tr v-if="!clients.length" >
<td class="px-4 py-2 font-medium" style="opacity: 0.6;">No data to be shown.</td>
</tr>
</table>
<transition name="fade">
<div class="modal" v-if="dialog">
<div class="modal-content">
<EditModal :client="selClient" v-show="showEdit" #close="closeEdit"/>
</div>
</div>
</transition>
</div>
</template>
<script>
import EditModal from '#/components/Clients/EditClients.vue'
export default{
dialog: false,
overlay: true,
components: {
EditModal,
},
data () {
return {
selClient: {},
showEdit: false,
confirm: false,
clientIndex: 100,
}
},
created () {
this.$store.dispatch('fetchClients')
},
computed: {
clients() {
return this.$store.state.clients;
},
fields() {
return this.$store.state.clientfields;
}
},
methods: {
closeEdit: function() {
this.showEdit = false;
this.dialog = false;
},
delClient: function(clientdata) {
this.clientIndex--;
this.$store.dispatch('deleteClient', clientdata)
},
updClient: function(clientdata) {
this.selClient = clientdata;
this.showEdit = true;
this.dialog = true;
this.clientIndex++;
this.$store.dispatch('saveClient', clientdata)
},
saveClient: function(clientdata) {
this.showEdit = true;
this.dialog = true
this.clientIndex++;
this.$store.dispatch('saveClient', clientdata);
},
createClient(){
this.selClient = {};
}
}
}
</script>

Answer 1

I Fixed it, in my index I just committed my field data on save so my table gets filled and shows data.
promise.then(function (response) {
if (clientdata.id != null) {
commit("saveClient", clientdata)
} else {
commit("addClient", response.data.data)
}
! added my commit here to fill fields :) !
})