Vue - Как передать объект в качестве реквизита через ссылку маршрутизатора и получить к нему доступ в компоненте

Question

Я хочу передать объект на основе динамического c маршрута, который активирован пользователем, и получить доступ к нему на компоненте с помощью v-for, чтобы l oop через объект.

<template>
  <v-app>
    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-spacer></v-spacer>
      <h1>{{selectedMethod}}</h1>
    </v-app-bar>
    <v-content>
      <router-view />
      <v-navigation-drawer v-model="drawer" class="x">
        <v-list-item
          v-for="item in items"
          :key="item.unidade"
          :to="item.link + item.params"
          @click="change(item.unidade)"
        >{{item.unidade}}</v-list-item>
      </v-navigation-drawer>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    items: [
      { unidade: "IPE", link: "/ipe", params: this.ipe },
      { unidade: "DCSI", link: "/dcsi", params: this.dcsi },
      { unidade: "RT", link: "/rt", params: this.rt }
    ],
    drawer: false,
    selectedMethod: "",
    dcsi: [
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos: "xxxx.",
        ataque: "12",
        hp: "76",
        fraqueza:
          "xxxxa",
        img: require("./xxxx.jpeg")
      },
      {
        nome: "xxxx",
        posto: "xxx",
        atributos:
          "xxxx",
        ataque: "1",
        hp: "732",
        fraqueza: "xxxx",
        img: require("./xxxx.jpeg")
      },
      {
        nome: "xxx",
        posto: "xxxx",
        atributos:
          "xxxx",
        ataque: "27",
        hp: "96",
        fraqueza:
          "xxxx",
        img: require("./xxxx.jpg")
      }
    ],
    ipe: [
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos: "xxxx.",
        ataque: "12",
        hp: "76",
        fraqueza:
          "Qxxxx",
        img: require("./xxxx.jpeg")
      },
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos:
          "xxxx",
        ataque: "1",
        hp: "732",
        fraqueza: "xxxx",
        img: require("./xxxxx.jpeg")
      },
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos:
          "xxxx",
        ataque: "27",
        hp: "96",
        fraqueza:
          "xxxx",
        img: require("./xxxx.jpg")
      }
    ],
    rt: [
      {
        nome: "xxxxs",
        posto: "xxxx",
        atributos: "xxxx.",
        ataque: "12",
        hp: "76",
        fraqueza:
          "xxxxxx",
        img: require("./xxxx.jpeg")
      },
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos:
          "xxxx",
        ataque: "1",
        hp: "732",
        fraqueza: "xxxx",
        img: require("./xxxx.jpeg")
      },
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos:
          "xxxxx",
        ataque: "27",
        hp: "96",
        fraqueza:
          "xxxxx",
        img: require("./xxxx")
      }
    ],
    unidade: ""
  }),
  methods: {
    change(val) {
      this.selectedMethod = val;
    }
  }
};
</script>
<style lang="stylus" scoped>
.x {
  position: absolute;
}
</style>

Здесь у меня есть приложение. vue с 3 объектами: ipe, dcsi и rt, которые я хочу передать как реквизиты на основе динамического c маршрута пользователя активируется.

import Vue from "vue";
import VueRouter from "vue-router";
import uni from "../components/uni.vue"
Vue.use(VueRouter);

const routes = [
  {
    path: '/:unidade',
    component: uni,
    props: true
  },

];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

Здесь индекс. js с настройкой маршрутов

<template>
  <div>
    <v-container>
      <h1>Coleção de monstros {{$route.params.unidade}}</h1>
      <v-layout row wrap>
        <v-flex xs12 sm6 md4 lg3 v-for="def in uni" :key="def.nome">
          <v-card class="text-xs-center ma-3">
            <v-img :src="def.img" class="img"></v-img>
            <v-card-title>{{def.posto}} {{def.nome}}</v-card-title>
            <v-card-title class="z">
              <div>
                <v-icon>mdi-sword</v-icon>
                {{def.ataque}}
              </div>
              <v-spacer></v-spacer>
              <div>
                <v-icon>mdi-shield</v-icon>
                {{def.hp}}
              </div>
            </v-card-title>
            <v-card-text>{{def.atributos}}</v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uni: ""
    };
  },
  props: ["dcsi"],
  mounted() {
    this.uni = this.props;
  }
};
</script>

<style lang="stylus">
.z {
  margin-top: -35px;
}
</style>

Здесь компонент, к которому я хочу получить доступ к упомянутым объектам.

До сих пор я пытался передать его через параметры, но без успеха.

Ideia - это отдельный компонент, визуализируемый с циклическим изменением другого объекта с помощью v-for в зависимости от выбранного маршрута