Vue.js Firestore Fill выбрать динамически

Question

Я использую Firestore для получения некоторых данных, которые я хочу заполнить в списке выбора.

Вот мой выбор:

     <li>
        <div class="row container">
           <div class="input-field col s12">
             <select name="organizers" id="organizersSelector" v- 
                                         model="selectedOrganizer">
                    <option value="" disabled selected>Choose 
                                                  organizer</option>
                    <option v-for="organizer in organizers"
            v-bind:key="organizer.name" v-bind:value="organizer.name">{{organizer.name}}</option>
             </select>
             <label for="organizers">Organizers</label>
           </div>
       </div>
    </li>

Итак, внутри данных у меня есть пустой массив organizers:

  data() {
return {
  name: null,
  organizer: null,
  originalUrl: null,
  organizers: [],
  selectedOrganizer: null,
  ...
};

},

Затем, когда страница создана, я пытаюсь добраться до своей коллекции Firestore, а затем push объект в связанную коллекцию:

created() {
db
  .collection("collection_name")
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      this.organizers.push(doc.data());
    });
    alert("size = " + this.organizers.length + " ; name = " + 
             this.organizers[0].name);
  });
 }

Как видно из alert, мой массив заполнен, и есть объект со свойством name. Тем не менее, мой select показывает мне единственный вариант по умолчанию, и при нажатии на него я не могу найти name s.

Как заполнить select после ответа от Firestore?

ДОПОЛНИТЕЛЬНЫЙ ВОПРОС

Я использую materializedcss, чтобы улучшить интерфейс, но я не могу понять, почему мне нужно обновить страницу, чтобы активировать предварительно заполненные input с. Также я могу видеть только label для select, но сам select не рендерится. После обновления оно появляется.

Следуя документации, я добавил это в index.html сразу после ссылки jQuery

 <script>
  $(document).ready(function() {
  $("#slide-out").sidenav();
  $("#organizersSelector").formSelect();
  $("#levelsSelector").not('disabled').formSelect();
   });
 </script>

Я очень плохо знаком с JavaScript.