Only clearError() in NuxtErrorBoundary works to refresh this component

[Tao31415]

Context:

Run example examples\advanced\error-handling, try to use FaultyComponent.vue

<script setup>
const hasIssue = ref(true)

const fixIssue = (error) => {
  hasIssue.value = false
  error.value = null
}
</script>

<template>
  <NuxtErrorBoundary>
    <throw-error v-if="hasIssue" />
    <div v-else>
      Component is working ^_^
    </div>

    <template #error="{ error }">
      Component failed to Render -_-
      <button @click="fixIssue(error)">
        (fix the issue)
      </button>
    </template>
  </NuxtErrorBoundary>
</template>

When click button "(fix the issue)", UI will not change, this error will not be clear and this component can't refresh and reset.

After I read the doc, I tried to modify with "error = null", actually got same result.

const fixIssue = (error) => {
  hasIssue.value = false
  error = null
}

Final solution, use clearError() method from #error="{ error, clearError }", only this way will triggle component refresh and clear error.

<script setup>
const hasIssue = ref(true)

const fixIssue = (clearError) => {
  hasIssue.value = false
  clearError()
}
</script>

<template>
  <NuxtErrorBoundary>
    <throw-error v-if="hasIssue" />
    <div v-else>
      Component is working ^_^
    </div>

    <template #error="{ error, clearError }">
      Component failed to Render -_-
      <button @click="fixIssue(clearError)">
        (fix the issue)
      </button>
    </template>
  </NuxtErrorBoundary>
</template>

Question:

Is this the best practice for NuxtErrorBoundary usage? Or did I make any mistake to use NuxtErrorBoundary when clear error?