Ultimately, I want to call a value(userSso) of db and apply it to change v-if action 'earlier' before people can click.

So I wanted to use mounted hook but it didn't work. If I use functions at computed, then it was too slow that I could click "Account" even userSso is 1. What will be the better way?

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-if="userSso == 0" :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 {
  name: 'Navbar',

  // props: ['userSso'],
  data() {
    return {
      visible: false,
      opened: false,
      navState: 0,
      itemcount: 0,
    }
  },
  computed: {
    ...mapState('store', {
      navbarState: (state) => state.navbarState,
      backColor: (state) => state.backColor,
      fontColor: (state) => state.fontColor,
      primaryColor: (state) => state.primaryColor,
      //pageSso: (state) => state.pageSso,
      //userSso: (state) => state.userSso,
    }),
  },
  mounted(){
    mapState('store', {
      userSso: (state) => {
        state.userSso
    }
    })
    console.log("mounted mapState userSso => ", userSso)

    
  },
  methods: {
  },
}
</script>

/store/store.js

export const state = () => ({
  userSso: 0,
})

...