How to use NuxtErrorBoundary properly??

<template>
    <NuxtErrorBoundary>
      <template #error="{ error }"> Error here: {{ error }} </template>
      <form
        class="flex flex-col gap-4 rounded-lg border border-white px-2 py-4 lg:self-center"
        :state="credentials"
        @submit.prevent="handleLogin">
        <!-- Some code over here -->
      </form>
    </NuxtErrorBoundary>
</template>

<script setup lang="ts">
const handleLogin = async () => {
  throw createError({
    statusCode: 400,
    statusMessage: 'Something is wrong.'
  })
}
</script>