Vuex修改数组或对象中的某一项时，页面视图不刷新

问题描述：在对vuex中的state中的数组或对象中的某一项进行修改以后其它组件中的视图没有刷新。

store.js

export default new Vuex.Store({
    state:{
        arr:[]
    },
    mutations:{
        setArr(state,data){
            state.arr=data;
        },
        changeArr(state,data){
            //解决视图不刷新问题
            Object.assign(state.arr[data.index],data.item);
        }
    }
});

a.vue

<template>
    <div>
        <p v-for="(v,i) in arr" :key="i">{{v.name}}</p>
    </div>
</template>

export default{
    name:'a',
    mounted(){
        const aa = [
            {name:'zs',age:22},
            {name:'xh',age:20}
        ];
        this.setArr(aa);
    },
    computed:{
      ...mapState(['arr'])
    },
    methods:{
        ...mapMutations(['setArr'])
    }
}

b.vue

export default{
    name:'b',
    mounted(){
        const item = {
            name:'ww',
            age:26
        };
        const index = 1;
        this.changeArr(index,item);
    },
    methods:{
        ...mapMutations(['changeArr'])
    }
}