`useAsyncQuery` doesn't set `error` in lazy component

[cawa-93]

Here reproduction: https://stackblitz.com/edit/github-ryfoyv?file=components/UserInfo.vue Query calls in UserInfo.vue. This component is not rendered until the user has performed a specific action. But after rendering, the variable error remains null

[littlejon85]

Ran into the same issue.

Here's my reproduction https://codesandbox.io/s/festive-browser-r60cox?file=/README.bug.md

The HTTP error is thrown by the server, however the client discards it.

The bug can be narrowed down to line 62 in runtime/client.ts

  export async function useAsyncQuery<
  TPath extends keyof TQueryValues & string,
  TOutput extends TQueryValues[TPath]['output'] = TQueryValues[TPath]['output'],
  Transform extends _Transform<TOutput> = _Transform<TOutput, TOutput>,
  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
>(
  pathAndInput: [path: TPath, ...args: inferHandlerInput<TQueries[TPath]>],
  options: AsyncDataOptions<TOutput, Transform, PickKeys> = {},
): Promise<AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TError>> {
  const { $client } = useNuxtApp()
  const key = getQueryKey(pathAndInput)
  const serverError = useState<TError | null>(`error-${key}`, () => null)
  const { error, data, ...rest } = await useAsyncData(
    key,
    () => $client.query(...pathAndInput),
    // @ts-expect-error: Internal
    options,
  )

  if (process.server && error.value && !serverError.value) // <--- here
    serverError.value = error.value as any

  if (data.value)
    serverError.value = null

  return {
    ...rest,
    data,
    error: serverError,
  } as any
}

process.server is false and serverError is null. Therefore the returned error is null.

Error returned by useAsyncData is correct and should be returned.

What is the purpose of serverError? @wobsoriano