Vue: How to change a value of state and use it in other page and change page structure at starting by it?

In this project, we can login from login.vue by clicking login button and if it is success then we can see Lnb.vue in dashboard.vue

I thought if i code like this then pageSso will be 1 when I check the checkbox in login.vue in Lnb.vue then it will not show only "Account" menu. When I used console.log(pageSso) at mounted cycle it showed pageSso was 0. What would be the problem?

store/store.js

export const state = () => ({
    pageSso: 0,
})
export const getters = {
    pageSso: (state) => state.pageSso,
}

export const mutations = {
    setPageSso(state, data) {
        console.log('mutations setPageSso data', data)
        state.pageSso = data
    }
}

export const actions = {
    setPageSso({
        commit
    }, data) {
        console.log('actions setPageSso data', data)
        commit('setPageSso', data)
    },

}

pages/login.vue

<template>
<input
  class="checkbox_sso"
  type="checkbox"
  v-model="sso"
  true-value="1"
  false-value="0" >SSO checkbox
  <button class="point" @click="submit">login</button>
</template>
<script>
  export default {
    data() {
      return {
        sso: '',
      }
    },
    computed: {},
    methods: {
      submit() {
        this.$store.dispatch('store/setPageSso', this.sso)
        //this.$store.dispatch('store/login', data)
      },
</script>

pages/dashboard.vue

<template>
    <div class="base flex">
        <Lnb />
        <div class="main">
            <Gnb />
            <nuxt-child />
        </div>
    </div>
</template>
<script>
    import Lnb from '@/components/Lnb'
    import Gnb from '@/components/Gnb'
    export default {
        components: {
            Lnb,
            Gnb
        },
        mounted() {},
    }
</script>

components/Lnb.vue

<template>
  <ul>
    <li :class="{ active: navbarState == 7 ? true : false }">
      <a href="/dashboard/settings">
        <img src="../assets/images/ico_settings.svg" alt="icon" /> Settings
      </a>
    </li>
    <li v-show="pageSso != 1" :class="{ active: navbarState == 8 ? true : false }">
      <a href="/dashboard/user">
        <img src="../assets/images/ico_user.svg" alt="icon" />
        Account
      </a>
    </li>
  </ul>
</template>
<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {}
    },
    computed: {
      ...mapState('store', {
        // navbarState: (state) => state.navbarState,

        pageSso: (state) => state.pageSso,
      }),
    },
    mounted() {
      console.log('pageSso ->', this.pageSso);
    },
    methods: {

    },
  }
</script>