Why does asyncData keep composeable state for different browser requests?

[GonzalesDK]

Hi everybody.
I really hope some can help me understanding why the following is happening. The example I give below is not from my actual production app, just an example. I am using nuxt 2 and the composition API
I have a nuxt a page with a page, In the page component, there is a
async asyncData ({ redirect, route, app }) function
all this function does, is to use a simple composable and the composeable looks something like this

import { ref } from '@nuxtjs/composition-api'
const state = ref({})
export default function useState (appContext) {

const setState = (value) => {
if (state.value.id) {
console.log('Cant set id because state is already set', state.value)
} else { state.value.id = value }
}

So if the state.value.id has a value, it does not set the value and prints it to the console.

Now what I do not understand, is why after one browser has made the first page request and the asyncData has set the value, a second browser also requesting the same page, then the value is not set, because it already has a value.

I would not expect the state value ref inside the composeable to keep the state value for different browser requests(could be customer now sharing data which I DO NOT WANT)

I do want the state to be kept for the same browser but not for another browser.
Can anyone explain me why this is happening?

[manniL]

You should not use ref "outside" of composables or <script setup> for "global state". That is what useState is for. More info in this video.