My VueJS app is not rendering - I have looked at other solutions on stack overflow but none of them seem to solve my problem - vue.js

Question

I have a simple Vue.Js App I need to render but the app is not being rendered at all.
I followed all the examples shown online and everything looks correct but I can't spot the problem. I am using Vue.js on an ASP.net application with webpack
My Index.cshtml:
#section scripts{
<environment names="Development,Production,Staging">
<script src="~/dist/js/home/bundle.js" asp-append-version="true"></script>
</environment>
}
<div id="app">
</div>
My main app.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.config.performance = true;
Vue.use(VueRouter);
import store from './store/store';
import { router } from './router/router';
import App from './App.vue';
new Vue({
el: '#app',
store,
router,
render: h => h(App)
});
My App.vue:
<template>
<div>
<div class="container">
<div class="columns">
<div class="column is-3">
<section class="section">
<aside class="menu">
<p class="menu-label">
Examples
</p>
<ul class="menu-list">
<li>
<router-link :to="{ name: 'counter' }">Counter</router-link>
</li>
</ul>
<p class="menu-label">
About
</p>
<ul class="menu-list">
<li>
<router-link :to="{ name: 'moduleinfo' }">Module info</router-link>
</li>
</ul>
</aside>
</section>
</div>
<div class="column is-9">
<section class="section">
<transition name="component-fade"
mode="out-in">
<router-view></router-view>
</transition>
</section>
</div>
</div>
</div>
<notifications group="global" />
</div>
</template>
<script>
import Vue from 'vue'
import Notifications from 'vue-notification'
Vue.use(Notifications)
export default {
name: 'App'
}
</script>
<style scoped>
</style>
There are no errors being thrown, the app simply doesnt render and the only html on the page when i run the application is
<div id=app>
</div>