Vue router not loading component

Vue router not loading component

So ive been looking into vue and been experiencing an issue which i cant seem to find the solution for. Im using Vue and Vue-router. I started with the basic vue + webpack template which gave the initial boilerplate.

I've successfully added additional routes to the predefined routes which is working as expected (games, tournaments, stats and users routes works just fine). However now im unable to get additional routes to work. the "gaming" route doesnt work, ive also tried adding additional routes which does not seem to work either.

So this is my current router file (index.js):

import Vue from 'vue'
import Router from 'vue-router'
const Gaming = () => import('@/components/gaming.vue');
const Home = () => import('@/components/home.vue');
const Game = () => import('@/components/game.vue');
const Tournament = () => import('@/components/tournament.vue');
const Users = () => import('@/components/users.vue');
const Stats = () => import('@/components/stats.vue');


const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/games',
      name: 'Game',
      component: Game,
    },
    {
      path: '/wtf',
      name: 'Gaming',
      components: Gaming,
    },
    {
      path: '/tournaments',
      name: 'Tournament',
      component: Tournament
    },
    {
      path: '/users',
      name: 'Users',
      component: Users
    },
    {
      path: '/stats',
      name: 'Stats',
      component: Stats
    }
  ]
});

export default router;

Vue.use(Router);

All my routes works as expected except the "Gaming" route. The "Gaming" component looks like this:

<template>
  <div>
    <h1>WTF?!?!?!?!?=!?!</h1>
  </div>
</template>

<script>
  export default {
    name: 'Gaming',
    components: {},
    data() {
      return {}
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>

Ive tried to pretty much copy/paste a working component, And only change the name, as well as the template. But it seems to have issues. Initially i had done the route component imports the normal "boilerplate" way

import Stats from '@/components/Stats'

Which pretty much had the same result, Except this would cause an exception when attempting to navigate to the "gaming" route.

Cannot read property '$createElement' of undefined
    at render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-c9036282","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/gaming.vue (app.js:4240), <anonymous>:3:16)

All other routes worked. Ive also tried to re-create all the files and re-do the specific route which doesnt seem to work either. So im at a loss of what i can do to fix this issue?

Here i attempt to inspect the route, And as you can see the component is missing "everything" Inspecting the route

Also tried looking with the vue addon for chrome, Where the component does not get loaded into the view

Vue Chrome Extension

Uploaded the project to gdrive if someone want to tweak around with it Google Drive Link

Found the issue:

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/games',
      name: 'Game',
      component: Game,
    },
    {
      path: '/wtf',
      name: 'Gaming',
      components <----------: Gaming,
      // Should be component not componentS
    },
    {
      path: '/tournaments',
      name: 'Tournament',
      component: Tournament
    },
    ...

Also, you should use the standard method of importing. Without that error, I would've never found the issue.

ReferenceURL : https://stackoverflow.com/questions/50122512/vue-router-not-loading-component