Vue child component didn't rerender when props changed?

Question

In my application, I use vuex to manage my component state,when state changes with vuex mutations,the child component didn't rerender. Here's my code on CodeSandbox:https://codesandbox.io/s/l3lrwv6yll

When I clicked header in blue area to add item to red area,the mutation works.But when I clicked the edit button, the computed property in my Header component didn't change.

Anyone can help me out?

Answer 1

In your mutation editField you should use Vue.set to detect changes in array :

   editField(state, { index }) {
      let update = state.formFieldList[index];
      Vue.set(state.formFieldList, index, {
        name: update.name,
        schema: {
          ...update.schema,
          edit: true
        }
      })
    },

Check Vue docs - Array Changing Caveats