Загружать маршруты из API и динамически импортировать представления

Большинство моих маршрутов защищены и требуют разрешений для доступа к ним. Когда пользователь успешно вошел в систему, мой компонент Navbar выполняет вызов API и получает набор маршрутов, к которым пользователь может получить доступ.

После этого я добавляю все файлы представлений, соответствующие маршрутам, на панель навигации.

Это пример кода, показывающий процесс

<template>
  <div>
    <router-link
      v-for = "navItem in navItems"
      :key = "navItem.title"
      :to = "navItem.url"
    >{{ navItem.title }}</router-link>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      navItems: []
    };
  },
  created: async function() { // Setup the router here
    this.navItems = [
      // !!! API CALL !!!
      {
        title: "Dashboard",
        url: "/Dashboard"
      },
      {
        title: "Users",
        url: "/users/Users"
      },
      {
        title: "Groups",
        url: "/groups/Groups"
      }
    ];

    const routes = await this.navItems.map(async navItem => {
      const { url } = navItem;

      return {
        path: url,
        component: await import(`../views${url}.vue`)
      };
    });

    this.$router.addRoutes(routes);
  }
};
</script>

К сожалению, я получаю эту ошибку

Uncaught (in promise) Error: [vue-router] "path" is required in a route configuration.

но, как вы можете видеть в примере кода, этот атрибут установлен. Я создал пример проекта здесь

https://codesandbox.io/s/vue-routing-example-i2znt

Если вы назовете этот маршрут

https://i2znt.codesandbox.io/#/Dashboard

Я ожидаю, что маршрутизатор отобразит файл Dashboard.vue.