vue-router doesn't render component after changing it - laravel

Question

The Component is rendered correctly at first on initial render, however, when I press the router-link, it correctly changes the Component accordingly to routes given
const router = new VueRouter({
//mode: 'history',
routes: [
{
name: "Home",
path: "/",
component: HomeView
},
{
name: "Jobs",
path: "/jobs",
component: JobsView
}
],
linkActiveClass: "active",
linkExactActiveClass: "exact-active",
});
The router-view is implemented like this
Entry -> Game -> Content:
<template>
<div id="content" data-simplebar>
<NavigationBar />
<SettingsButton />
<router-view />
</div>
</template>
NavigationBar:
<ul class="navigation-bar__list">
<!-- Home Tab -->
<li class="navigation-bar__item navigation-bar__item--active">
<router-link class="navigation-bar__link" :to="{ name: 'Home' }">Home</router-link>
</li>
<!-- Jobs Tab -->
<router-link :to="{ name: 'Jobs' }">
<li class="navigation-bar__item">
Jobs
</li>
</router-link>
</ul>
So whenever I press the link, I can confirm that it works from VueDevTools, it places the appropriate component, but does not render it. No html is visible, plus after changing component, it places it as last child in parent element and not where router-view was originally located.
in devtools you can see that JobViews is there, and should be shown in the middle of the page, but it's not. Unless I refresh the page
P.S. I probably could have found the solution myself, but I'll give someone the opportunity to earn some internet points. Also, this is my first ever post on stackoverflow in 6 years of development. Cheers!