State resets on reload or route change

[mVIII]

I hope this is not an issue but when I reload the state gets reset , probably I am not understanding something correctly

import { createStore } from '@harlem/core';
import { UserRole } from '@/types';
import Cookie from 'js-cookie';
import JWTDecode from 'jwt-decode';
import { injectable, inject } from 'tsyringe';
import { AuthenticationService } from '@/services/Authentication';
import { Errors } from '@/services/dtos';
import { ComputedRef } from 'vue';

export const TOKEN_COOKIE = 'token';

interface JWT {
  exp: string;
  iat: string;
  id: string;
  role: UserRole;
}

interface State {
  token: JWT | null;
}

const STATE: State = {
  token: null,
};

const { getter, mutation, ...store } = createStore<State>('token', STATE);
export const state = store.state;

export const token = getter('token', (state) => state.token);

const checkAuthentication = (token: ComputedRef<JWT | null>): boolean => {
  return token.value !== null ? true : false;
};

const isAuthenticated = getter('isAuthenticated', () =>
  checkAuthentication(token)
);

const setToken = mutation<string>('setToken', (state, tokenString) => {
  const decodedToken = JWTDecode(tokenString) as JWT;
  if (decodedToken.id == '') {
    throw new Error('Unable to decode token!');
  } else {
    state.token = decodedToken;
    Cookie.set(TOKEN_COOKIE, tokenString);
  }
});

const unsetToken = mutation('unsetToken', (state) => {
  state.token = null;
  Cookie.remove(TOKEN_COOKIE);
});

@injectable()
export class AuthStore {
  private authService: AuthenticationService;
  constructor(@inject('Authentication') authService: AuthenticationService) {
    this.authService = authService;
  }

  public cookieIsSet(): boolean {
    return Cookie.get(TOKEN_COOKIE) ? true : false;
  }

  public IsAthenticated(): boolean {
    return isAuthenticated.value && this.cookieIsSet();
  }

  public async Login(
    username: string,
    password: string
  ): Promise<void | Errors> {
    const result = await this.authService.login(username, password);
    if (result === Errors.UsernameNotFound) {
      return Errors.UsernameNotFound;
    } else if (result === Errors.WrongPassword) {
      return Errors.WrongPassword;
    } else if (result === Errors.Unexpected) {
      return Errors.Unexpected;
    }
    setToken(result.token);
  }

  public async Logout(token: string): Promise<void | Errors> {
    const result = await this.authService.logout(token);
    if (result === Errors.Unexpected) {
      return Errors.Unexpected;
    }
    unsetToken();
  }
} 

[mVIII]

So I got some insight on why this happens , and it was pretty basic javascript knowledge so there is no reason to discuss this one.