Vue Router component that auto populates with links to every route

DynamicRouter.vue

<!-- inspired by https://stackoverflow.com/questions/36120996/get-all-routes-in-a-vue-router/36128368 -->
<template>
  <div>
    <span v-for="route in routes" :key="route.name">
      <router-link :to="route.path">{{ route.name }}</router-link>
    </span>
  </div>
</template>

<script>
export default {
  name: 'Navigation-Menu',
  created () {
    // This dynamically grabs every route in router
    this.$router.options.routes.forEach(route => {
      this.routes.push({
        name: route.name,
        path: route.path
      })
    })
  },
  data () {
    return {
        routes: []
    }
  }
}
</script>