For demonstration purposes, I created a small test page and store. According to the code, it should show count = 1, then 500ms later count = 2 as the store updates.

Here's my test.vue:

<template>
  <div>count = {{ count }}</div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  layout: "test",
  computed: {
    ...mapGetters({ count: "test/count" }),
  },
  mounted() {
    this.$store.dispatch("test/updateCount");
  },
};
</script>

store/test.js

export const state = () => ({
  count: 1
});

export const getters = {
  count(state) {
    return state.count;
  }
};

export const actions = {
  updateCount(context) {
    setTimeout(() => {
    context.commit("setCount", 2);
    }, 500);
  }
};

export const mutations = {
  setCount(state, value) {
    state.count = value;
  }
};

But the result is always count = 1 in DOM

In vue devtools, both vuex bindings and vuex state show count = 2, but its not updated in DOM.

However, it works if I remove the setTimeout function in actions.

Am I doing anything wrong?