Utilising the error layout in a hosted Nuxt application - vue.js

Question

I've just finished creating my custom error messages in my Nuxt.js application in layouts/error.vue. For the moment I've made it pretty simple as it's just a brochure site for the time being, so I am just handling the errors as shown below as for now I only care about users hitting a page that doesn't exist.
<template v-if="error.statusCode === 404">
<h1>Sorry!</h1>
<p>We can't find the page you are looking for.</p>
</template>
<template v-else>
// Some other message
</template>
When running my application locally, and trying to navigate to a route that doesn't exist, this works perfectly and my error message is displayed.
However, my hosted application does not behave how I want it to. I'm hosting the application on IBM Cloud as a Cloud Foundry application. The application uses the static buildpack, and my manifest.yml file looks like so:
---
applications:
- name: name
path: ./dist
buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
random-route: true
But if I try and navigate to an incorrect route that way, I am displayed the generic nginx 404 error:
I understand that there are 2 ways you can tell Cloud Foundry that the application requires a static buildpack - Declaring the buildpack in the manifest.yml OR adding a file named Staticfile in the dist directory after running npm run generate. Within this file, you can add some configurations, one of which being status codes which:
Allows to define custom pages for HTTP STATUS codes instead of the default NGINX pages.
status_codes:
404: /404.html
500: /500.html
However, my error handling is done in a layout, not a page. And my generated project folder does not contain a page called error anywhere, so I don't know how to use this method to use my error handling.
If anybody could give me some pointers on how to correctly do it, it would be greatly appreciated!