Как получить данные массива из firebase, которые используются в выпадающем списке в Vue

Question

Я делаю проект.Часть проекта состоит в том, чтобы позволить пользователям выбирать места / места из выпадающего списка.Таким образом, пользователи могут выбрать предустановленное местоположение из базы данных или создать новое.У меня есть тонна предустановленных данных о городских округах, которые пользователи могут вводить, и информация появится в текстовом поле.

Я в основном следовал документации из firebase и пробовал путь, предоставленный Артуром Лонгботтомом https://medium.com/@art.longbottom.jr/how-to-connect-vue-js-d0cb9bf3d696.

Так как данные городского округа являются массивом, я также попробовал Array Query в Firestore, который предоставляется https://www.youtube.com/watch?v=4t2eHrFW_0M.

К сожалению, ни один из них не работает для меня.

<v-combobox

   v-model="citySelector"
   :items="dunedinDistrict" // ** I bind items in this data array
   :search-input.sync="search"
   :key="dunedinDistrict.key" // ** give it a special key
   hint="maximum of 2 regions or places"
   persistent-hint
   hide-selected
   label= "You found it at/in..."
   color="#B388FF"
   :rules="[ rules.required]"
   prepend-inner-icon="fal fa-map-marker-check"
   clear-icon="fal fa-times-circle"
   clearable
   multiple
   small-chips
   deletable-chips
   ref="combobox"
   @change="toggleMenu"
   >
<script>
   data () {
     // set regions input selection
  dunedinDistrict: [ //**   this is my instance, whihc is hard-coded 
                     right now, but I want to store this dummy city 
                     district data into firebase instead. I have 
                     already stored as one array that contains a 
                     ton of district name.
    // 'city central',
    // '101 chopstick',
    // 'bus',
    // 'city central asdas',
    // 'city central bank',
    // 'city central 101 chopstick'
  ],
  search: null,
  citySelector: null
    }
   },

 created () {// This is the method what i attempted to fetch data 
                 from firebase, but I only got [object Object], 
                  when I clicked the combobox. And got an error, 
                  which is Avoid using non-primitive value as the key, 
                  use string/number value instead
    let firestore = firebase.firestore()
    firestore.collection('dunedinDistrict').get()
       .then(snapshot => {
       const dunedinDistrict = []
       snapshot.docs.forEach(doc => {
       dunedinDistrict.push(doc.data())
        })
       this.dunedinDistrict = dunedinDistrict
         })
      }

    }

Я ожидал, что данные городского округа могут быть получены из базы данных и отображены на странице интерфейса, где выпадающий список данных, когда пользователи нажимают комбинированный список.