Vue-tables-2(vuex) reactivity not working

My last answer was wrong, I did not remember that I had changed the vuex parameter of the table to false. I don't know why but doing a push it works:

setVCardTableData : (state, vCardTableData) => {    vCardTableData.forEach(tableData => {            state.vCardTableData.data.push(tableData);       });} 

This is a probably a reactivity issue. (See https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats for detailed explanation.)

Changing how you set the object value in your mutation to this should solve the problem

setVCardTableData: (state, vCardTableData) => state.vCardTableData = {    ...state.vCardTableData,    data: vCardTableData}

Basically, this creates a new object so that Vue knows that the object has been updated. In Javasript, object is passed by reference, meaning that vCardTableData don't store the object, it stores the reference to the object. You could think of it as a pointer/address that points to the object in memory. When you change a child property in the object, the reference remains unchanged, so Vue does not know that the object has been updated. Creating a new object makes sure that the object reference is updated.

This is also explained in Mutations Follow Vue's Reactivity Rules in https://vuex.vuejs.org/en/mutations.html

Since it's a deep object, you need to use Object.assign in your mutation

setVCardTableData: (state, vCardTableData) => Object.assign(state.vCardTableData.data, vCardTableData)