Vuetify multi-select with 3-level categorization?

Question

Vue.js

Good afternoon, you need to make a MULTIPLE selection through vuetify v-selectwith categorization.
What is now:

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

and the select template:

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 }}

All this looks, to put it mildly, not very attractive and efficient.

The main problem is that vuetify only displays the top 2 categories, and ignores the rest. You can do it on several selects and not worry, but it is desirable to do it with one. I would be grateful for any help
PS version of Vuetify is 1.5.5, but if there is a solution on 2.x.x, then it's not a problem

Answer 1

css