vuex中的getters数据更新了，但是页面中引用的这个getters数据并没有更新

Question

我在组件中通过commit修改state中的数据，getters也能根据这个数据修改进行更新，但是我在页面中引用这个getters却不能更新数据，我在devtools中是能看到getters的变化的，但更奇怪的事，我在devtools中点击了这个commit按钮之后，页面中的数据就能更新了，是我哪里出了问题吗？？

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
子组件代码：
<template>
<div class="count">

<a href="#" @click.prevent="reCount()">-</a>
<input type="text" :value="count" ref="numbox" />
<a href="#" @click.prevent="addCount()">+</a>
<p ref="p">{{$store.getters.getGoodsCountAndAmount.amount}}</p>

</div>
</template>

<script>
export default {
data() {

return {
  count: this.initcount
};

},
methods: {

addCount() {
  this.count++;
},
reCount() {
  if (this.count > 1) this.count--;
  else return;
}

},
watch: {

count() {
  let numbox = this.$refs.numbox;
  this.$store.commit('updateGoodsInfo',{index:this.index,count:this.count})
}

},
props:['initcount','goodsid','index']
};

vuex中的代码：

state: {

carList: [],    

},
mutations: {

updateGoodsInfo(state, goodsinfo) {
//这个方法就是用来更新carList中的数据
//carList默认为空，但是我用了其他方法push进去了一些对象

  state.carList[goodsinfo.index].count = goodsinfo.count
  
},

},
getters: {

getGoodsCountAndAmount(state) {
  let o = {}
  o.count = state.carList[0].count
  o.amount = state.carList[0].price * state.carList[0].count
  return o;
}

}
})

你期待的结果是什么？实际看到的错误信息又是什么？