Vuetify множественный выбор с разбиение на категории в 3 уровня?

Question

[Артур Карапетян]

Добрый день, необходимо сделать МНОЖЕСТВЕННЫЙ выбор через vuetify-ный v-select с разбиением на категории.
Что сейчас есть:

categories: [
        {
          name: 'Домашний текстиль',
          subcategories: [
            {
              name: 'Постельное белье',
              subcategories: [
                {
                  name: 'Комплекты постельного белья'
                },
                {
                  name: 'Отдельные предметы постельного белья'
                }
              ]
            },
            {
              name: 'Кухонный текстиль',
              subcategories: [
                {
                  name: 'Полотенца кухонные'
                },
                {
                  name: 'Прихватки для кухни'
                },
                {
                  name: 'Фартуки, аксессуары'
                }
              ]
            }
          ]
        },
        {
          name: 'Бытовая техника',
          subcategories: [
            {
              name: 'Техника для кухни',
              subcategories: [
                {
                  name: 'Чайники'
                },
                {
                  name: 'Весы кухонные'
                }
              ]
            },
            {
              name: 'Техника для дома',
              subcategories: [
                {
                  name: 'Пылесосы'
                },
                {
                  name: 'Техника по уходу за одеждой'
                },
                {
                  name: 'Утюги'
                }
              ]
            }
          ]
        }
      ],

и шаблон селекта:

v-select(
                  flat
                  solo
                  multiply
                  v-model="selectedCaterogies"
                  :items="categories"
                  label="Выберите категории"
                  hide-details
                  single-line
                )

                  template(#item="{ item, tile }")
                    v-list(subhead)
                      v-subheader {{ item.name }}

                      v-list-tile(v-for="subitem in item.subcategories")
                        v-list-tile-content
                          v-list(subhead)
                            v-subheader {{ subitem.name }}

                            v-list-tile(v-for="subsubitem in subitem.subcategories")
                              v-list-tile-content {{ subsubitem.name }}

Выглядит всё это, мягко сказать, не слишком привлекательно и работоспособно


Основная проблема в том, что vuetify выводит только 2 верхних категории, а остальные игнорирует. Можно сделать на нескольких селектах и не париться, но желательно сделать одним. Буду благодарен любой помощи

PS версия Vuetify - 1.5.5, но если решение есть на 2.х.х, то не проблема

Answer 1

[Miki06]

CSS