Laravel Mix --production issue

[b8ne]

I know this may possibly be a laravel mix issue, however all of my other vue components are working, so will post here first. Compiling with npm run dev or npm run watch everything is fine. However when running npm run production I am getting issues. Everything compiles fine, however the component is just not available and does not render.

This is my component

<template>
    <div class="input-wrapper">
        <span class="label">
            <i class="fa fa-spinner fa-spin" v-if="loading"></i>
            <i class="fa fa-download" aria-hidden="true" v-else></i>
        </span>
        <input type="text"
               placeholder="Enter your route number..."
               autocomplete="off"
               v-model="query"
               @keydown.down="down"
               @keydown.up="up"
               @keydown.enter="hit"
               @keydown.esc="reset"
               @blur="reset"
               @input="update"
        />
        <ul v-show="hasItems">
            <li v-for="(item, $item) in items" :class="activeClass($item)" @mousedown="hit" @mousemove="setActive($item)">
                <span class="body" v-text="item.title"></span>
            </li>
        </ul>
    </div>
</template>

<script>
    import VueTypeahead from 'vue-typeahead'

    export default {
        extends: VueTypeahead,
        props: [],
        data () {
            return {
                src: '/axios/timetables',
                limit: 5,
                minChars: 2,
                selectFirst: false,
                queryParamName: 'search',
                data: {}
            }
        },
        methods: {
            onHit (item) {
                window.open('../uploads/'+item.file, '_blank');
            },
            prepareResponseData (data) {
                console.log(data)
                return data
            }
        }
    }
</script>
<style>

</style>

This is how I am using it

window.Vue = require('vue');
require('vue-resource');

window.axios = require('axios');

// Setup axios headers
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
};

import Timetables from './components/Timetables.vue';

Vue.component('timetables', Timetables);
const el = document.getElementById('timetable-wrapper');
if (el) {
    const timetables = new Vue({
        el: '#timetable-wrapper',
    });
}

As I am getting no errors there isnt much more to give, hoping someone has solved a similar case though.