Same Nuxt Session variables used in different scopes does not refresh.

[dstrickland67]

Ask your question

Just a super simple example, app.vue (nuxt3) defines a simple layout and uses sample form help to make a client side counter. The counter increment is included before the

`

<pre>{{ currentCount || 'no count sent yet' }}</pre>

<button @click="increaseCountOnServer">
    Increase server-side!
  </button>
  <button @click="increaseCountByClient">
    Increase client-side!
  </button>

  <NuxtPage />

<script setup> import { useSession } from '#imports' const { session, refresh, update, reset } = await useSession() const { refresh: increaseCountOnServer } = await useFetch('/api/count', { server: false, immediate: false }) const currentCount = computed(() => session.value?.count || null) const increaseCountByClient = () => { const increasedCount = currentCount.value || 0 return update({ count: increasedCount + 1 }) } </script>`

In another page, (index.vue)
`<script setup lang="ts">
import {
GoogleSignInButton,
type CredentialResponse
} from 'vue3-google-signin'

const { session, refresh, update, reset } = await useSession()

// handle success event
const handleLoginSuccess = async (response: CredentialResponse) => {
const { credential } = response
console.log('Access Token', credential)
await update({jwt: credential, loginState: "Logged In"} )
await refresh();

// await store.setJWT(credential||'');
}

const handleLogout = async (event : object) => {
console.log('Handling Logout')
console.log('Handling reset')
await reset();
console.log('Handling refresh')
await refresh();

}

// handle an error event
const handleLoginError = () => {
console.error('Login failed')
}

const currentCount = computed(() => session.value?.count || null)

</script>

signin button

Logout

{{ currentCount || 'no count sent yet' }}

DASH

`
Updates to session in app . Do not bubble into the index page . It feels like i might be missing something.

Additional information

No response