Vuex状态更新不触发组件更新，如何排查和修复？

Question

同一个版本的自定义组件，在一个项目中正常使用，另一个项目vuex store的state状态改变后，组件无法监听到

store中代码如下：

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
    computedCount: state => {
      return state.count
    }
  },
  mutations: {
    
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  modules: {
  }
})

组件中代码如下：

<template>
  <div>
    <button @click="test" style="width: 50px;height: 50px;">count加一</button>
    <div>this.count: {{ count }}</div>
    <div>$store.state.count: {{ $store.state.count }}</div>
    <div>countValue: {{ countValue }}</div>
    <div>getCount: {{ getCount }}</div>
  </div>
  </template>
<script>
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
  name :'ddd',
  computed: {
    ...mapState([
      'count'
    ]),

    countValue() {
      return this.$store.state.count
    },

    ...mapGetters({
      getCount: 'computedCount'
    })
  },
  methods: {
    ...mapActions({
      add: 'incrementAsync' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    }),
    test() {
      this.add()
    }
  },
  mounted() {
    // this.$nextTick(function() {
    // this.add()
    // })
  },
  watch: {
    '$store.state.count': {
      deep: true,
      handler(newVal) {
        console.log('监听$store.state.count', newVal)
      }
    },
    countValue: {
      handler(newVal) {
        console.log('监听count', newVal)
      },
      deep: true
    }
  }

}
</script>

一个项目使用正常：

一个项目使用有误：

vue和vuex版本都是一样的，有没有大佬知道是什么原因？