Vuex异步请求数据后,在组件中获取状态的方法

Vuex官方中提到：

我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

即如下方法，页面正常更新：

computed: {
    userAva: function () {
   
        return this.$store.state.userAva;
    },
    userName: function () {
   
        return this.$store.state.userName;
    }
}

但是这里有一个疑问，为什么获取回来的数据要自动更新到该组件内，需要使用computed来计算更新呢？如果直接赋值给data会如何？

下面我们修改代码，尝试直接修改data：

data(){
    return {
        userName: this.$store.state.userName,
        userAva: this.$store.state.userAva
    }
}
//.......

在页面刷新的时候，发送数据

mounted: function(){
   
    this.$store.commit(