V-Autocomplete Nested List

[YunusEmreAlps]

Hello,
I hope you're well and everything is good for you.

            v-autocomplete(
              clearable
              single-line
              hide-details
              hide-selected
              maxlength='50'
              class='search-bar'
              prepend-icon='mdi-magnify'
              :label='$t(`common:header.search`)'
              :placeholder='$t(`common:header.search`)'
              :no-data-text='$t(`common:notfound.title`)'
              v-model='query'
              :items="groupedItemsArray"
              :search-input.sync='searchOnPage'
              ref="selectExample"
            )
              template
                v-list
                  v-list-group(v-for='group in groupedItemsArray' :key='group.group')
                    template
                      v-list-item-content
                      v-list-item-title {{ group.group }}
                      v-list
                        v-list-item(v-for='item in group.items' :key='item.index')
                          v-list-item-content
                            v-list-item-title {{ item.text }}

groupedItemsArray:

      groupedItemsArray: [
        {
          "group": "👯 Communities",
          "items": [
            {
              "group": "👯 Communities",
              "link": "#communities",
              "text": "DSC Member.",
              "index": 4
            },
            {
              "group": "👯 Communities",
              "link": "#communities",
              "text": "Member at Üretken Akademi & Mentornity.",
              "index": 0
            },
            {
              "group": "👯 Communities",
              "link": "#communities",
              "text": "Member at Solutions Challenge Incubation Program (Touch App)",
              "index": 0
            }
          ]
        }
      ],

I can't list groupedItemsArray element. Can you help me where am I doing wrong?

Thank you very much.
Best regards,

[YunusEmreAlps]

            v-autocomplete(
              clearable
              single-line
              hide-details
              hide-selected
              maxlength='50'
              class='search-bar'
              prepend-icon='mdi-magnify'
              :label='$t(`common:header.search`)'
              :placeholder='$t(`common:header.search`)'
              :no-data-text='$t(`common:notfound.title`)'
              v-model='query'
              :items="items"
              :filter="() => true"
              :search-input.sync='searchOnPage'
              ref="selectExample"
            )

              v-list-item(slot="prepend-item", class="grey--text", style="padding-left:20px;", v-if="numberOfSearchResults !== 0") {{ numberOfSearchResults }} {{ $t('common:page.resultsFound') }}
              template(slot='item', slot-scope='props')
                //- if item index is null this element gonna be our group header
                template(v-if="props.item.index === ''")
                  v-list-item(@click='$vuetify.goTo(props.item.link, scrollOpts)', style="background-color:#E1F5FE; font-weight:600;")
                    v-list-item-content
                      text-highlight(:queries="searchOnPage", style="color:#01579B;") {{props.item.group.length > 50 ? props.item.group.substring(0, 47) + '...' : props.item.group}}
                //- else it's gonna be our item
                template(v-else)
                  v-list-item(@click='$vuetify.goTo(props.item.link, scrollOpts)')
                    v-list-item-content
                      v-list-item-title
                        text-highlight(:queries="searchOnPage") {{props.item.text.length > 50 ? props.item.text.substring(0, 47) + '...' : props.item.text}}

Your Array must be 1d

{   text: string \| number \| object,   value: string \| number \| object,   disabled: boolean,   divider: boolean,   header: string }