Vuetify列表组件未加载数据

我有一个小的Vue / Vuetify应用程序，我遇到了问题 - 特别是当我从我的API中获取数据时，在左导航中获取Vuetify列表组件以正确呈现 .

该列表正确呈现列表项，但我试图从服务器获取一些数据作为这些项的子项，并且这些子项没有显示 . 我有一个加载器，应该在Vuex获取数据时出现，看起来它正常工作 . 但是当应用程序加载时，左侧导航列表不会显示应该使用的子项 .

App.vue：

<template>
<div>
    <div v-if="loading === true">
    <p>loading...</p>
</div>
<v-app v-if="loading === false">
    <v-navigation-drawer
    persistent
    :mini-variant="miniVariant"
    :clipped="clipped"
    v-model="drawer"
    enable-resize-watcher
    fixed
    app
    >
        <v-list>
            <v-list-group
                v-for="item in menuItems"
                :key="item.title"
            >
                <v-list-tile color="blue" slot="activator" :to="item.url">
                    <v-list-tile-action>
                        <v-icon color="blue" v-html="item.icon"></v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
                <v-list-tile v-for="subItem in item.subItems" :key="subItem.title">
                    <v-list-tile-content>
                        <v-list-tile-title>
                            {{ subItem.title }}
                        </v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list-group>
        </v-list>
    </v-navigation-drawer>
    <v-content>
        <router-view/>
    </v-content>
    <v-footer :fixed="fixed" app>
    <span>&nbsp; &copy; 2018</span>
    </v-footer>
</v-app>
</div>
</template>

<script>
import axios from 'axios';
import { eventBus } from '@/main.js';

export default {
name: 'App',
data () {
    return {
        loading: true,
        clipped: false,
        drawer: true,
        fixed: false,
        // subItems are currently hard-coded
        menuItems: [
            { id: 'flash-cards', icon: 'bubble_chart', title: 'Flash Cards', url: '/', subItems: 
                // [{title: 'one'}, {title: 'two'}]
                this.myLessonTitles
            },
            { id: 'lessons', icon: 'playlist_add', title: 'Create Lesson', url: '/new-lesson', subItems: []}
        ],
        miniVariant: false,
        right: true,
        rightDrawer: false,
        title: 'Flash Cards'
    }
},
computed: {
    myLessonTitles: function () {
        return this.$store.getters.lessonTitles
    }
},
created () {
    this.$store.dispatch('GRAB_LESSON_DATA').then(() => {
        this.loading = false;
    });
},
}
</script>

Vuex store.js：

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);


const store = new Vuex.Store({
    state: {
    lessons: [],
    apiURL: 'https://my-api.com'
  },
  actions: {
    GRAB_LESSON_DATA: function ({commit}) {
    return new Promise( (resolve, reject) => {
        setTimeout( () => {
            axios.get(this.state.apiURL + '/lessons').then( (res) => {
                commit('SET_LESSON_DATA', {list: res.data.lessons});
                resolve();
                // console.log(JSON.stringify(res.data.lessons));
            }, (err) => {
                console.log(err);
            })
        }, 2000)

    });
}
},
mutations: {
SET_LESSON_DATA: (state, {list}) => {
    state.lessons = list
}
},
getters: {
lessonTitles: state => {
    let titles = [];
    state.lessons.forEach( (lesson) => {
        titles.push({"title": lesson.title});
    })
    return titles;
}
},  
modules: {

}
})

export default store;

我知道getter函数正在返回正确的数据，但是Vuetify列表没有正确呈现 . 如果我硬编码列表项，它工作正常 .

有任何想法吗？