Adding to an existing object to make it reactive - vue.js

Question

I have several rows of mysql data held in a vuex state, and this is the format
[{
"id": "1",
"property_country": "usa",
"property_name": "i and m towers",
"property_stars": "4",
"property_city": "austin",
"property_region": "texas",
"property_type": "serviced partment",
"date_created": "3563763673",
"date_updated": "33377363",
"the_user_id": "1"
}, {
"id": "2",
"property_country": "uk",
"property_name": "eagle towers",
"property_stars": "5",
"property_city": "kampala",
"property_region": "kampala",
"property_type": "motel",
"date_created": "3563763673",
"date_updated": "33377363",
"the_user_id": "1"
},
I am adding and getting back an object that i would like to add to the existing object
This is my mutation
CRUD_CREATE_PROPERTY: (state, response) => {
console.log(response.data);
state.properties.push(response.data)
//Vue.set(state.properties, response.data.property.id, response.data);
},
according to the docs https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects on how to make the object reactive, this is the format
Vue.set(vm.someObject, 'b', 2)
I am returning a normal mysql row with data such as this
{
"id": "3",
"property_country": "canada",
"property_name": "good motel",
"property_stars": "4",
"property_city": "montreal",
"property_region": "montreal",
"property_type": "camp",
"date_created": "3563763673",
"date_updated": "33377363",
"the_user_id": "1"
}
How can i add the new row to make it appear in my template reactively?

Answer 1

I ended up puttting the part i wanted to be reactive into its own component and gave it a unique key.In my case it was a table and i aptly named my component <Table />and its not even a protected keyword to my surprise
<Table :key="componentKey" />
I then created this method
forceRerender() {
this.componentKey += 1;
},
and accessed it when committing a mutation
.then( (response) => {
this.$store.commit('CRUD_CREATE_PROPERTY', response);
this.forceRerender();
})
also pay attention to the arrow function since this wouldn't work on old style javascript functions,since nowadays arrow function is now vanilla javascript.
i give credit to Michael Thiessen's article on Key-changing to force re-renders of a component which you can read here https://michaelnthiessen.com/force-re-render/