I have a parent component Data which fetches state from Vuex, I use that state to generate some child components Table to which I pass some of that Vuex data as props, all of this inside a v-for.

<template>
  <table v-for="(item,index) in data"
  :key="index   item.id"
  :propX="item.x"
  :propY="item.y"
  />
</template>
<script>
  name: "Data",
  components: {
   Table
  },
  computed:{
    data(){
    return this.$store.state.data;  
   }
  }
</script>

My Table components also mutate the Vuex state, and I can see the state mutates just fine inside the Data component (vue dev tools), but the Data component doesn't update the props of my Table components.

CodePudding user response：

several issues here:

1. Do not use reserved names for components and computed values (do not use table)
2. Be aware that if your state is array of objects or nested object it might not be reactive. You have to re-assign the object/array or use set method for it to be reactive.

some examples

// update objects
this.$set(this.$store.state.data, 'a', 1)
Vue.set(this.$store.state.data, 'a', 1)
this.$store.state.data = Object.assign({}, oldObject, { a: 1 })

//update array of objects
this.$store.state.data = [...data, newObject]