Трехуровневая итерация с использованием v-for в v-вкладках

Question

Я выбираю Структуры дерева моделей с дочерними ссылками для моего трехуровневого дерева зависимостей: firstLevel, secondLevel и Items

У меня есть проблема с отображением каждого Предмета у их родителей второго уровня, самих у своих родителей первого уровня.

Вы найдете мой код сразу после всего лишь нескольких слов, чтобы объяснить его философию. Во-первых, я использую V-вкладки для отображения первых уровней. Затем на каждой вкладке firstLevel я отображаю список соответствующих secondLevels на v-панелях инструментов, получая их идентификатор из массива (subLevels), содержащегося в текущем родительском объекте firstLevel.

Пока там, это работает.

Но так как я пытаюсь добавить глубину с элементами - потомками secondLevels - он больше не работает, и у меня есть предупреждение Vue:

[Vue warn]: у вас может быть бесконечный цикл обновления в функции рендеринга компонента.

<template>
     <div>
      <v-layout id="admin-layout" justify-space-around column>
       <v-tabs
         v-model="activeFL"
         centered
         slider-color="blue"
         grow
       >
         <v-tab
           v-for="(firstLevel, index) in firstLevels"
           :key="index"
           ripple
         >
           Niveau {{ index + 1 }}
           </br>
           {{firstLevel.name}}
         </v-tab>
       </v-tabs>

       <v-tabs-items v-model="activeFL">
        <v-tab-item
          v-for="(firstLevel, index) in firstLevels"
          :key="index"
        >
        <v-toolbar
          color="pink"
          dark
          v-for="(secondLevelId, index) in firstLevel.subLevels"
          :key="secondLevelId"
        >
          <v-toolbar-title>{{getSLById(secondLevelId).name}}</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>

        <v-card>
          <v-container
            fluid
            grid-list-lg
          >
            <v-layout row wrap>
              <v-flex xs12
                v-for="(itemId, index) in currentSL.items"
                :key="itemId"
              >
                <v-card color="blue-grey darken-2" class="white--text">
                  <v-card-title primary-title>
                    <div>
                      <div class="headline">{{getItemById(itemId)}}</div>
                    </div>
                  </v-card-title>
                </v-card>
              </v-flex>

            </v-layout>
          </v-container>
        </v-card>
            </v-tab-item>
          </v-tabs-items>
        </v-layout>
     </div>
    </template>
    <script>
    export default {
      data () {
        return {
          name: this.$store.state.user.name,
          dialog: false,
          error: '',
          dialogError: '',
          deleteFL: false,
          deleteSL: false,
          deletinglevel: {},
          firstLevels: [],
          secondLevels: [],
          items: [],
          activeFL: 0,
          currentSL: {},
          currentItem: {}
        }
      },
      created () {
        this.getFirstLevels()
        this.getSecondLevels()
        this.getItems()
      },
      methods: {
        getSLById (id) {
          return this.currentSL = this.secondLevels.find(x => x._id === id)
        },
        getItemById (id) {
          return this.currentItem = this.items.find(x => x._id === id)
        },
        async getFirstLevels () {
          try {
            const firstLevels = await LevelService.getFirstLevels()
            this.firstLevels = Object.keys(firstLevels.data).map((key) => {
              return firstLevels.data[key]
            })
          } catch (e) {
            this.error = e.response.data.error
          }
        },
        async getSecondLevels () {
          try {
            const secondLevels = await LevelService.getSecondLevels()
            this.secondLevels = Object.keys(secondLevels.data).map((key) => {
              return secondLevels.data[key]
            })
          } catch (e) {
            this.error = e.response.data.error
          }
        },
        async getItems () {
          try {
            const items = await ItemService.getItems()
            this.items = Object.keys(items.data).map((key) => {
              return items.data[key]
            })
          } catch (e) {
            this.error = e.response.data.error
          }
        }
      }
    }
    </script>