[2774] Store state not updated by observable mutations

So below is part of my code that checks if the user is logged in using graphql apollo watchQuery

actions

  async observeAuth({ commit }) {
    const client = this.app.apolloProvider.defaultClient;
    const observer = client.watchQuery({
      query: Auth,
      subscribeToMore: {
        document: [AuthSubscription, UserSubscription]
      }
    });
    console.log(observer);
    observer.subscribe(({ data }) => {
      console.log("OBSERVER", data.result);
      commit("SET_AUTH", data.result);
    });

    // const { data } = await observer.result();
    // commit("SET_AUTH", data.result);
  },

mutations

  SET_AUTH(state, data) {
    console.log("DATA", data);
    state.auth = data;
    console.log("STATE", state.auth);
  },

getters

  auth: state => {
    console.log("GETTER", state);
    return state.auth;
  },

state

export const state = () => ({
  auth: null,
  token: "",
  setting: null,
  snackbar: {
    value: false,
    html: "",
    options: {}
  }
});

so I can use subscriptions to automatically get the data sent by sockets and send it to the next callback

which i'm using for a shorthand below on observer.subscribe

so the problem is i'm trying to commit the result to the state.auth variable

the problem is that the state doesn't change at all

even i received the data from the observer.next

here is a screenshot to prove that its null

but when i open it the data is there

and here on the devtools its null

but when i commented out

this code on the observeAuth action

    // const { data } = await observer.result();
    // commit("SET_AUTH", data.result);

it works fine

help.