VueJS Single Page Application Routing?

Question

Vue.js

Gives an error message.
What is the reason?
app.js

let Vue = require('vue');
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import Index from './pages/Index.vue';

const routes = [
    { path: '/', component:  Index }
];

const router = new VueRouter({routes});

const app = new Vue({
    router
}).$mount('#app-content');

Index.js

<template>
    <cards></cards>
</template>

<script>
    import Cards from '../components/Cards.vue';

    export default {
        name: "index",
        components: Cards
    }
</script>

And the error itself:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
--->

Answer 1

<template>
    <cards></cards>
</template>

<script>
    import Cards from '../components/Cards.vue';

    export default {
        name: "index",
        components: {
           Cards
        }
    }
</script>

Answer 2

Local Components