I have a sidenavbar which has list of items say

Home
Update
Delete
Restart

I have 2 users say admin and staff.

Home page displays by default and doesn’t require any login. Once the user clicks on login button in Dashboard and logs in, I have the user state maintained in store using pinia.

When there is admin login, I want to hide ‘Update’ from the navbar list and have only
Home
Delete
Restart

When there is staff login, I want to hide ‘Delete’ from the navbar list and have only
Home
Update
Restart

But I don’t see the value of the list getting changed in the UI based on the user state. However on refresh I can see the required change in UI.

Not revealing the exact code

Navbar.vue

This piece of code is preceeded with a for-loop from which I get the list of subpages and ‘value’ is the metadata from which a page is identified.

value:
home for Home
delete for Delete
update for Update
restart for Restart

Here I’m getting the name of the pages from the translation files which is {{ $t(pages.${value}) }} this piece of code

<template>
            <v-list-item v-if="(value !== 'update' && value !== 'delete')">
              <template>
                <p class="text-uppercase font-weight-bold text-caption">
                  {{ $t(`pages.${value}`) }} 
                </p>
              </template>
            </v-list-item>
            <v-list-item  v-else-if="(value == 'update' && username == 'admin ')">
              <template>
                <p class="text-uppercase font-weight-bold text-caption">
                  {{ $t(`pages.${value}`) }}
                </p>
              </template>
            </v-list-item>
            <v-list-item v-else-if="(value == 'delete' && username == 'staff')">
              <template>
                <p class="text-uppercase font-weight-bold text-caption">
                  {{ $t(`pages.${value}`) }}
                </p>
              </template>

</template>

<script>
import { useLoginStore } from '@/stores/loginStore'
import { storeToRefs } from 'pinia'

const { username } = storeToRefs(useLoginStore())
</script>

loginStore.ts:

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import LoginService from '@/services/LoginService'

export const useLoginStore = defineStore('login', () => {
 const user = ref(localStorage.getItem('user'))
 
   const username = computed(() => user.value)

  

  const login = async (username: string, password: string): Promise<void> => {
    try {
     .........
       Code for login api
     .............
      // Setting user state
      localStorage.setItem('user', username)
    } catch (err) {
      throw err
    } finally {
      .........
    }
  }

  }

 
  return {
    user,username
  }
})

This code gives me the required list but only on refresh. How can I see the change in the data of navbar immediately after user login?
Also, how to optimise the code block having v-if, v-else-if?