Vue/Nuxt JS 500 error when refreshing page via JSON

Hi, I'm having a weird problem with my Nuxt JS website. I have created a system which uses Vue Resource and URL parameters to fetch JSON data to build a page, the idea is that it will eventually be controlled via a backend/API.

The problem I'm facing, is the pages work absolutely fine when in development mode running npm run dev, however, in production mode they break and cause a 500 internal server error when refreshing the page. But they don't break when loading the homepage and then navigating to page. (the homepage is a .vue file).

I'm not sure where to even begin with this problem. This is my page which essentially pulls data from a JSON file which is currently held locally, and each page is a JSON file right now. It works fine in development mode though.

<template>
  <div class="page-json">
    <pageBanner v-bind:bannerTitle="banner.bannerTitle" v-bind:bannerSubTitle="page.bannerSubTitle" v-bind:subTitleEnabled="page.bannerHasSubTitle" v-bind:bgClass="banner.bgClass" />
    <section class="py-4 py-md-5">
      <div class="container">
        <div class="row py-4 py-md-5">
          <div class="col-lg-4 col-md-4 col-sm-12">
            <SearchComponent v-bind:orientationMargin="search.hasMargin" v-bind:searchPosition="search.orientation" v-bind:componentClass="search.searchClass" />
          </div>
          <div class="col-lg-8 col-md-8 col-sm-12 page-content">
            <div v-html="page.content"></div>
            <Alert v-bind:hasClass="errors.api.hasClass" v-bind:hasError="errors.api.hasError" v-bind:message="errors.api.message" v-bind:icon="errors.api.icon" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import pageBanner from '~/components/PageBanner.vue'
import SearchComponent from '~/components/SearchComponent.vue'
import Alert from '~/components/Alert.vue'
export default {
  components: {
    pageBanner,
    SearchComponent,
    Alert
  },
  data () {
    return {
      slug: this.$route.params.slug,
      page: [],
      banner: {
        bannerTitle: 'Page',
        bgClass: 'jumbotron-houses jumbotron-page'
      },
      search: {
        searchClass: 'mb-4 mb-md-0',
        hasMargin: 'mb-3',
        orientation: 'd-block'
      },
      errors: {
        api: {
          hasError: false,
          hasClass: 'alert-danger mt-3 mt-md-0',
          message: 'We was unable to fetch you property data.',
          icon: 'error'
        }
      }
    }
  },
  created() {
    this.$http.get('/pages/' + this.slug + '.json').then(response => {
      this.page = response.body
    }, response => {
      // this.$router.push('/404') 
    });
  },
  head () {
    return {
      title: this.page.pageTitle + ' | Site',
      meta: [
        { hid: 'description', name: 'description', content: this.page.pageDescription + ' - Site' }
      ]
    }
  }
}
</script>

Not entirely sure why it causes an internal server error when refreshing the page or visiting the page directly.

Can anyone help?