Динамический массив в списке данных не отображается

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

  <div>
    <!-- Search Bar -->
    <b-form-input
      v-model="text"
      type="text"
      placeholder="Search Courses/Professors"
      list="search-list-id"
      @input="searchInputChanged"
    ></b-form-input>

    <!-- Displayes Filtered List -->
    <li id="my-list-1" v-for="(item, index) in searchArray" :key="index">{{item}}</li>

    <!-- Datalist for Search Bar -->
    <datalist id="search-list-id">
      <!-- This one shows -->
      <option v-for="(size,index) in sizes" :key="index">{{ size }}</option>
      <!-- This one doesn't show. WHY? -->
      <option v-for="(item, index) in searchArray" :key="index">{{item}}</option>
    </datalist>
  </div>
</template>

<script>
import axios from "axios"; // Communicates w/ backend

export default {
  /* eslint-disable no-console */

  name: "Search",
  components: {},
  data() {
    return {
      text: "",
      searchArray: [],
      sizes: ["Small", "Medium", "Large", "Extra Large"]
    };
  },
  methods: {
    searchInputChanged() {...},
    getSearchFromBackend() {...}
  },
  computed: {
    filteredProfessors() {...}
  }
};
</script>

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

Но мой динамический список, который, как я знаю, имеет правильный массив, потому что он отлично отображается в моем, не показывает Динамический массив не отображается с раскрывающимся списком

Кажется, я не могу понять это. Любые идеи?

Вот содержание моих методов...

methods: {
    searchInputChanged() {
      if (this.text.length > 1) this.getSearchFromBackend();
    },
    getSearchFromBackend() {
      // get the search from the backend
        new Promise((resolve, reject) => {
        this.status = "loading"; // we can show a loading wheel while in this state

        var dataToPassIn = { filter: this.text };
        axios({
          url: "/search/" + this.text,
          data: dataToPassIn,
          method: "GET"
        })
          .then(resp => {
            console.log(resp);
            this.searchArray = resp.data;
            this.status = "success";

            resolve(resp);
          })
          .catch(err => {
            console.log(err);
            this.status = "error";

            reject(err);
          });
      });
    }
  },