Vue2 data中整体属性替换失败的问题

Question

先贴代码

class Main extends Vue {
  basicInfo: BasicInfo = {
    wordCount: 0,
    tomatoCount: 0,
    completedTodoCount: 0,
    uncompletedTodoCount: 0,
    updateTime: "1970-01-01 00:00:00",
  };
...
  async created() {
    await this.updateBasicInfo();
  }

  async updateBasicInfo() {
    let resp = await this.axios.get("/api/user/basicInfo");
    this.basicInfo.wordCount = resp.data;
  }
}

vue组件中需要数据，需要在ajax中获取，请求返回的类型正好就是BasicInfo的类型，所以用了this.basicInfo.wordCount = resp.data;直接做了替换，在devtool看到data更新了

绑定的子组件prop也变了

但是页面却没有重新渲染，数值还是0，请问一下有什么方法可以解决吗

Answer 1

this.basicInfo= {...this.basicInfo,wordCount:resp.data}