Проблема с вложенными маршрутами Vue при рендеринге дочернего компонента

У меня проблема при использовании вложенных маршрутов vue-router.

https://router.vuejs.org/guide/essentials/nested-routes.html

У меня есть родительский маршрут User и дочерний маршрут UserQuotes, который не отображается. В консоли нет ошибок или предупреждений. Vue devtools вообще не показывает UserQuotes.

URL:http: // локальный: 8080 / пользователь / лагин / кавычки

./src/router/index.js

import User from '@/components/User'
import UserQuotes from '@/components/UserQuotes'

export default new Router({
    mode: 'history',
    saveScrollPosition: true,
    base: __dirname,
    routes: [
        {
            path: '/user/:name',
            name: 'User',
            component: User,
            children: [
                {
                    path: 'quotes',
                    component: UserQuotes
                }
            ]
        }
    ]
})

./src/compoments/User.vue

<template>
    <div v-if = "user" class = "user">
        <h2>{{ user.name }}</h2>

        <ul class = "list-group">
            <li v-for = "(value, key) in user" class = "list-group-item">{{ key }}: {{ value }}</li>
        </ul>

        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'user',
        props: {

        },
        data() {
            return {

            }
        },
        computed: {
            user: function() {
                return this.$store.state.user
            }
        },
        methods: {

        }
    }
</script>

./src/compoments/UserQuotes.vue

<template>
    <div class = "user-quotes">
        <h2>User quotes</h2>
    </div>
</template>

<script>
    export default {
        name: 'userQuotes',
        props: {

        },
        data() {
            return {

            }
        },
        computed: {

        },
        methods: {

        }
    }
</script>