vue中使用watch监听对象，监听方法没有被触发的原因

watch: {
	friendList:{  //注意，这里是对象
		handler(val){
		},
		deep:true
	}
}，
computed:mapGetters({
	friendList:'getFriendList'
}),
mounted(){
	this.$store.dispatch('editFriendList', hy.friendList);
}

下面是vuex中，mutations的内容：

EDIT_FRIEND_LIST (state, data) {
      if(!data){
        return
      }
      for(var key in data){
         state.myFriend[key] = data[key]
      }
    },

如上代码，原本预期效果是：当dispatch方法执行完，通过vuex修改了state内容，然后vue页面的friendList会发生改变，从而触发watch。但实际项目中，此watch监听friendList，有可能不会被调用，也就是watch没有触发。

找了比较久问题，原因如下：

this.$store.dispatch('editFriendList', hy.friendList);
//这里的 hy.friendList和watch中的friendList，
//可能被其它代码关联到同一引用，它们的属性一致，
//或者是包含与被包含的关系，所以，在mutations修改的时候:

for(var key in data){
    state.myFriend[key] = data[key]
}
//这里的赋值其实并没有实际上对目标对象进行覆盖修改
//因此不会引发watch对friend的监听。

故，修改如下：

//mounted的：
this.$store.dispatch('editFriendList', hy.friendList);
//改成
this.$store.dispatch('editMyFriendList', {...hy.friendList});
//这里用结构赋值，重新传入的是新的对象

//mutations中：
for(var key in data){
    state.myFriend[key] = data[key]
}
//改成
state.myFriend = {...state.myFriend, ...data};
//同样用结构合并对象，组成新的对象，再赋值给state

这样子，每次通过vuex的广告dispatch方法修改state，都会触发watch监听方法。

问题解决。