Cannot clearError from useLazyAsyncData, how to handdle error in useLazyAsyncData?

[trandaison]

Environment

---

• Operating System: Linux
• Node Version: v16.20.0
• Nuxt Version: 3.6.1
• Nitro Version: 2.5.2
• Package Manager: npm@9.4.2
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-vcwesf?file=pages%2Fexample.vue

Describe the bug

Check out the reproduction link.

Step 1: Click Go to /example
Step 2: Click Next page, useLazyAsyncData will raises an error on the 2nd page, the error screen appears.
Step 3: Click Clear error, it will redirect to the home page.
Step 4: Click Go to /example again, and it still showing the error.

I'm not sure this is a bug or might be I'm miss understand about handling error.
The docs does't show how to handle error during fetching data with useLazyAsyncData and useAsyncData, I'm assuming that handling the error is similar to the data one, like this:

const { data, error } = await useLazyAsyncData(() => /* ... */);

watch(
  error,
  (value) => {
    if (value) showError(value);
  },
  { immediate: true }
);

Can anyone explain the case and show me the right way to handle the error in useLazyAsyncData and useAsyncData.

I think the docs should add some examples for this too.

Additional context

In the step number 2, if I click the Tigger Error button instead of next page, then in the step 4, it will work correctly.

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-vcwesf (Open reproduction)

[trandaison]

I confirm that this is not happen with useAsyncData, only with useLazyAsyncData.

Some workaround is reset the error object when the component unmounts.

onUnmounted(() => (error.value = null));

[danielroe]

I think the underlying issue here is the same as #20979 - let's track there.