Vuex: getters return always initial value

Question

I try to get the value of the vuex getters but I always get the initial value. My Code:

export default {
    state:{
        transuser:{
            Name: '1',
            Email: '2',
            Role: '3',
            Email_Verified: '4',
            Created:'5',
            Updated:'6',
            Edit_User:'7',
            Delete_User:'8'
        }
    },
    mutations:{
        transusers(state,data) {
            state.transuser.Name            = data.Name          ;
            state.transuser.Email           = data.Email         ;
            state.transuser.Role            = data.Role          ;
            state.transuser.Email_Verified  = data.Email_Verified;
            state.transuser.Created         = data.Created       ;
            state.transuser.Updated         = data.Updated       ;
            state.transuser.Edit_User       = data.Edit_User     ;
            state.transuser.Delete_User     = data.Delete_User   ;
            return state.transuser;
         }
    },
    getters:{
        getTranslationUser(state){
            return state.transuser
         }
    },
    actions:{
        loadTranslationUser(context){
            axios.get("/t/gettransuser")
                 .then((response)=>{
                    context.commit("transusers",response.data);
                 })
                 .catch((error)=>{
                    console.log(error)
                 })
         }
    }
}

In my Component

    mounted(){
        this.$store.dispatch("loadTranslationUser");
    },

I have a method

        T(t)
        {
            return this.$store.getters.getTranslationUser[t];
        }

Then I use it in my component:

            columns: [
                {
                    label: 'ID',
                    name: 'id',
                    orderable: true,
                },
                {
                    label: this.T('Name'),
                    name: 'name',
                    orderable: true,
                },
etc....

But I get always the initial value 1,2,3,4,5 etc....

But if I do console.log(this.$store.getters.getTranslationUser) in my method T I see

{…}
Created: "Toegevoegd Op"
Delete_User: "Gebruiker Verwijderen"
Edit_User: "Gebruiker Aanpassen"
Email: "E-mail"
Email_Verified: "E-mail Geverifieerd"
Name: "Naam"
Role: "Rol"
Updated: "Aangepast Op"

So the correct values are there but I can't use them. So what Am I doing wrong?

Answer 1

I believe you have columns in data field:

data() {
  return {
    columns: [...]
  }
}

Move it to computed and it will pick up changes:

computed: {
  columns() {
    return [...]
  }
}