Typescript error when not destructuring useAsyncData

Hey there!

I have multiple client requests to do in a page so I feels more convenient to not destructure the composable

useLazyAsyncData()

useLazyAsyncData()

useLazyAsyncData()

useLazyAsyncData().

const request = await useLazyAsyncData(() => ({}), { server: false })

const request = await useLazyAsyncData(() => ({}), { server: false })

const request = await useLazyAsyncData(() => ({}), { server: false })

const request = await useLazyAsyncData(() => ({}), { server: false })

<div v-if="request.status === 'pending' />

<div v-if="request.status === 'pending' />

<div v-if="request.status === 'pending' />

<div v-if="request.status === 'pending' />

But when I want to check the state in the template, I get this error:

This comparison appears to be unintentional because the types 'Ref<AsyncDataRequestStatus, AsyncDataRequestStatus>' and 'string' have no overlap

This comparison appears to be unintentional because the types 'Ref<AsyncDataRequestStatus, AsyncDataRequestStatus>' and 'string' have no overlap

This comparison appears to be unintentional because the types 'Ref<AsyncDataRequestStatus, AsyncDataRequestStatus>' and 'string' have no overlap

This comparison appears to be unintentional because the types 'Ref<AsyncDataRequestStatus, AsyncDataRequestStatus>' and 'string' have no overlap

I don't get it