Computed data not updating in Vue - vue.js

Question

I am using quasar framework and vuex for my app. The parent component is rendering child components with the data from vuex store. The child component is contenteditable and if i press enter key on it, the store is updated. But the computed property in parent component is not updating.
Here is my code:
parent-component.vue
<template>
<div>
<div v-for="(object, objKey) in objects"
:key="objKey">
<new-comp
:is=object.type
:objId="object.id"
></new-comp>
</div>
</div>
</template>
<script>
import ChildComponent from './child-component';
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
computed : {
objects(){
return this.$store.state.objects.objects;
}
},
mounted() {
this.assignEnterKey();
},
methods: {
assignEnterKey() {
window.addEventListener('keydown',function(e) {
if(e.which === 13) {
e.preventDefault();
}
});
}
}
}
child-component.vue
<template>
<div contenteditable="true" #keydown.enter="addChildComp" class="child-container">
Tell your story
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: ['objId'],
data() {
return {
id: null
}
},
computed : {
serial(){
return this.$store.state.objects.serial;
}
},
methods: {
addChildComp() {
let newId = this.objId + 1;
let newSerial = this.serial + 1;
this.$store.commit('objects/updateObjs', {id: newId, serial: newSerial});
}
}
}
state.js
export default {
serial: 1,
objects: {
1:
{
"id" : 1,
"type" : "ChildComponent",
"content" : ""
}
}
}
mutation.js
export const updateObjs = (state, payload) => {
let id = payload.id;
let serial = payload.serial;
state.objects[serial] = {
"id" : id ,
"type" : "ChildComponent",
"content" : ""
};
}

Answer 1

Vuex mutations follow general Vue.js reactivity rules, this means that Vue.js reactivity traps are applicable to vuex mutations.
In order to maintain reactivity, when adding a property to state.objects you should either:
Use the special Vue.set method:
Vue.set(state.objects, serial, { id, "type" : "ChildComponent", "content" : ""})
Or, recreate state.objects object instead of mutating it:
state.objects = { ...state.objects, [serial]: { id, "type" : "ChildComponent", "content" : ""} }