Child component does not re-render when props change in store - vue.js

Question

I am using Vue-js with require-js. I am trying to get data from vuex store into my cart component and render a component for each item in the store. But when I trigger a mutation from my body component to change the store, the data is being changed and the props of my cart component change, but the UI does not re-render.
This is my store:
state: {
users: {
user1: {
item: { date:null }
}
}
}
mutations: { setDate:function(state,payload){
var newState = state.users;
newState[user][item].date = payload.date
state.users = Object.assign({},newState)
} }
This is my cart component:
<template>
<div v-if="activeStep==1">
<p> Service Time: {{service.ServiceTime}} Min.</p>
<p>Date: {{service.date || 'Not Selected'}} </p>
<p>Time: {{service.time || 'Not Selected'}} </p>
<p>Prefered Staff: {{service.staff}} </p>
</div>
</template>
<script>
define(['Vue','vuex'],function(Vue,vuex){
return {
template: template,
computed: vuex.mapState(['activeStep']),
props: ['service'],
}
})
</script>
This is the parent of my cart component:
<template>
<div class="cart-user-body" >
<div class="cart-service" v-for="(service,key,index) in users[user]" :key="index">
<div class="cart-service-body">
<service-book-details :service="service"></service-book-details>
</div>
</div>
</div>
</template>
<script>
define([
'Vue','vuex','vue!./serviceBookDetails'
], function(Vue,vuex,serviceBookDetails) {
return {
template:template,
components: {
'service-book-details': serviceBookDetails
},
props: ['user'],
computed: vuex.mapState(['users']),
}
});
</script>
This is how I am triggering the mutation from my body component:
addDate(e) {
var payload = {
date: moment(e, "DD/MM/YYYY").format("Do MMMM YYYY"),
id: this.$data.class,
name: this.username
};
this.$store.commit("setDate", payload);
},
I even tried using Vue.set(state,'users',newState) but the UI does not re-render.
I have checked the Vue dev tools and I see that upon triggering the mutation, the props of my cart component have updated but it does not show on the UI.
If I try using getters, the key to the object does not exist as my store does not have the required data until user interacts with UI and adds data. And my cart component is always showing since the start so it shows me an error saying cant read property item of undefined.
Am I doing anything wrong or is there a different way to make it work.

Answer 1

You can't use array indexing for setting values with Vue. It is a restriction caused by Javascript.
This will not be reactive if user and or item did not exist when you created your store.
newState[user][item].date =
Instead, you need to use:
Vue.set(object, key, value)
In your case, you first need to ensure you set user and item with that method before assigning to date.