Adding/Passing additional properties with route components to view

I was just about to post this as a question when I found a solution. Although I’d still like to know if my first method is ‘ok’ to do or if it will be prone to problems.

Context, I’m trying to make a dashboard where the route’s components are hidden until their placeholder icon is clicked, but I needed a way to pass an icon identifier with each component in the router.
This was my first solution. I realized that getting your components async/lazily means you can tack on a .then() to the end of the import() and modify the output before returning.

{path: 'travel',
component: () => import(pAuthURI + 'AreaView.vue'),
children: [
     {
     path: '',
     name: 'Travel',
     components: {
        'New Travel Request': () => import(pAuthURI + 'general/General.vue')
         .then(function (x) { x.default.icon = 'mdiAirplane'; return x })
     },
     meta: {
          icon: 'mdiAirplane'
     }
  }
]}
<template>
   <div
      v-for="(child, key) in this.$route.matched[2].components"
      :key="key"
   >
      <v-icon>{{child.icon}}<v-icon/>
      {{key}}
   </div>
</template>

Although now I realize it would be safer, and easier to reason about if I went ahead and just mapped them in the meta fields.

{path: 'travel',
component: () => import(pAuthURI + 'AreaView.vue'),
children: [
     {
     path: '',
     name: 'Travel',
     components: {
        'New Travel Request': () => import(pAuthURI + 'general/General.vue')
     },
     meta: {
          icon: 'mdiAirplane',
          compIcons: {
             'New Travel Request':'mdiAirplane'
          }
     }
  }
]}
<template>
   <div
      v-for="(val, key) in this.$route.meta.compIcons"
      :key="key"
   >
      <v-icon>{{val}}<v-icon/>
      {{key}}
   </div>
</template>

Although, now I just realized I might be able to add an additional property between name and data() to be consumed by other views loading it.