Laravel × Inertiajsのアプリケーションで404ページをカスタマイズする方法

<script setup>
import TopContainer from "@/Layouts/TopContainer.vue";
import CommonMv from "@/Components/Common/CommonMv.vue";
import { computed } from 'vue'
const props = defineProps({ status: Number })
const title = computed(() => {
  return {
    503: '503: Service Unavailable',
    500: '500: Server Error',
    404: '404: Not Found',
    403: '403: Forbidden',
  }[props.status]
})
const description = computed(() => {
  return {
    503: '申し訳ございませんが、現在メンテナンス中です。しばらくお待ちください。',
    500: 'サーバーに異常が発生しました。',
    404: 'お探しのページは見つかりませんでした。',
    403: 'このページへのアクセスは禁止されています。',
  }[props.status]
})
</script>

<template>
  <TopContainer>
    <CommonMv
      :title-en="title"
      :title-ja="description"
      class="commonMv"
    />
  </TopContainer>
</template>

/**
     * Prepare exception for rendering.
     *
     * @param  \Throwable  $e
     * @return \Throwable
     */
    public function render($request, Throwable $e)
    {
        $response = parent::render($request, $e);

        if (!app()->environment(['local', 'testing']) && in_array($response->status(), [500, 503, 404, 403])) {
            return Inertia::render('Error', ['status' => $response->status()])
                ->toResponse($request)
                ->setStatusCode($response->status());
        } elseif ($response->status() === 419) {
            return back()->with([
                'message' => 'The page expired, please try again.',
            ]);
        }

        return $response;
    }