I'm working on a project with Vue-CLI, and here's some parts of my code;

//vuex
const member = {
    namespaced:true,
    state:{
        data:[]
    },
    actions:{
        getAll:function(context,apiPath){
            axios.post(`http://localhost:8080/api/yoshi/backend/${apiPath}`, {
                action: "fetchall",
                page: "member",
            })
            .then(function(response){
                context.commit('displayAPI', response.data);
            });
        },
        toggle:(context,args) => {
        return axios
            .post(`http://localhost:8080/api/yoshi/backend/${args.address}`,
            {
                action:"toggle",
                ToDo:args.act,
                MemberID:args.id
            })
            .then(()=>{
                alert('success');
            })
    },
    },
    mutations:{
        displayAPI(state, data){
            state.tableData = data;
        },
    },
    getters:{
        getTableData(state){
            return state.tableData
        }
    }
}

//refresh function in member_management.vue

  methods: {
    refresh:function(){
      this.$store.dispatch('member/getAll',this.displayAPI);
      this.AllDatas = this.$store.getters['member/getTableData'];
    }
  }

//toggle function in acc_toggler.vue

    ToggleAcc: function (togg) {
      let sure = confirm(` ${todo} ${this.MemberName}'s account ?`);
      if (sure) {
        this.$store
          .dispatch("member/toggle", {
            address: this.displayAPI,
            id: this.MemberID,
            act: togg,
            Member: this.MemberName,
          })
          .then(() => {
            this.$emit("refresh");
          });
      }
    },

The acc_toggler.vue is a component of member_management.vue, what I'm trying to do is when ToggleAcc() is triggered, it emits refresh() and it requests the updated data.

The problem is , after the whole process, the data is updated (I checked the database) but the refresh() funciton returns the data that hadn't be updated, I need to refresh the page maybe a couple of times to get the updated data(refresh() runs everytime when created in member_management.vue)

Theoretically, the ToggleAcc function updates the data, the refresh() function gets the updated data, and I tested a couple of times to make sure the order of executions of the functions are right.

However, the situation never changes. Any help is appreciated!