Im trying to hide an element in my navbar with v-if. I saved my fetched boolean in my local storage. This is my first time using Vue and i’m stuck with this for the past 2days and couldnt find a reason why its not working.

<template>
    <router-link v-if="canAccessHistory" to="/activity" class="nav-button" @mouseenter="event => setHover(event, true)" @mouseleave="event => setHover(event, false)">
      <div :class="['nav-button-icon-container', activityActive ? 'nav-button-active' : '']">
        <i :class="['nav-button-icon', 'material-symbols-outlined', activityActive ? 'filled' : '']">history</i>
      </div>
      <p :class="['nav-text', activityActive ? 'text-active' : '']">Logboek</p>
    </router-link>
</template>

<script setup>
canAccessHistory = ref(localStorage.getItem('canAccessHistory'));
</script>

I tried everything and the only time it didnt work is when i use the fetched data. I made sure my api returned a boolean. And also checked it in my js.