Nuxt.js head() inside error layout not working when using in fetch() hook at SSR

Question

When we throw Nuxt error function in new fetch() hook with this.$nuxt.error() syntax, the title of error page which is not found is not applied in browser when using SSR (e.g: refreshing index page) and the title is empty (or its the same as defined in nuxt.config.js). But it works when on client side (e.g: switching between routes)

/layouts/error.vue

<template>
  <div>404 not found!</div>
</template>

<script>
export default {
  head() {
    return {
      title: "not found",
    };
  },
};
</script>

/pages/index.vue

<template>
  <div />
</template>

<script>
export default {
  fetch() {
    this.$nuxt.error({
      statusCode: 404,
      message: "Page not found",
    });
  },
};
</script>

Is it a bug or I miss something?

Codesandbox sample project link

Nuxt.js version: 2.15.8