хотите показать обновленное значение состояния в другом компоненте

я хочу посмотреть, когда мутация вызвала и обновила статус. я делаю компонент, чтобы показать количество таблиц базы данных при вызове api.

это мой магазин я написал

const state = {
    opportunity: ""
}

const getters = {
    countOpportunity: state => state.opportunity
}

const actions = {
    // count opportunity
    async totalOpportunity({ commit }) {
        const response = await axios.get(count_opportunity)
        commit("setOpportunity", response.data)
    },
}

const mutations = {
    setOpportunity: (state, value) => (state.opportunity = value)
}

я хочу показать это значение геттера, когда эта мутация вызывается в другой возможности имени компонента.файл Vue. я показал значения количества баз данных в Панели Управления именем файла.вю

я написал это так.

computed: {
    ...mapGetters(["countOpportunity"])
  },
  watch: {},
  mounted() {
    //do something after mounting vue instance
    this.$store.watch(() => {
      this.$store.getters.countOpportunity;
    });
  },
  created() {
    this.totalOpportunity();
  },
  methods: {
    ...mapActions(["totalOpportunity"])
  }

и показал мой взгляд вот так.

<div class="inner">
 <h3>{{ countOpportunity }}</h3>
 <p>Opportunities</p>
</div>

когда api вызывается и увеличение количества показывает мои мутации. но мое значение представления не обновляется (countOpportunity). любой может помочь мне исправить это.