Understanding useSession behavior in Nuxt with Better-Auth and NuxtUI

# menu.vue
<script setup lang="ts">
import type { DropdownMenuItem } from "@nuxt/ui"
import { useSession, signOut } from "~/lib/auth-client"
const { data: session } = await useSession(useFetch)
const loggedIn = computed(() => !!session?.value?.user)
const items = computed<DropdownMenuItem[]>(() => {
  const baseItems = [..]
  return loggedIn.value
   ? [
     ...baseItems,
     {
      label: "Sign Out",
      icon: "i-lucide-log-out",
      onSelect: () => {
       signOut(),
       },
      },
     },
    ]
   : [{ label: "Login", icon: "i-lucide-log-in", to: "/login" }, ...baseItems]
})
</script>
<template>
  <UDropdownMenu
   :items="items"
   :content="{
    align: 'start',
    side: 'bottom',
    sideOffset: 8,
   }"
   :ui="{
    content: 'w-48',
   }"
  >
   <UButton icon="i-lucide-menu" color="neutral" variant="outline" />
  </UDropdownMenu>
</template>