Nuxt JS 500 error when refreshing page loaded using JSON - json

Question

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?
UPDATE:
Could this be because of a missing .htaccess file / rewrites? In production mode there is no .htaccess file for the dist folder?
This is my Apache error log:
[Tue Sep 25 11:51:39 2018] [error] [client ::1] Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: http://property-boilerplate.ryan/testimonials