title: Dynamic Array in Data list not showing up
body: <p>I'm working on a search bar for a project. I have the search bar refer to my data list but I can't get the content to show on screen. I know the array the data list uses is correct because it displays with a regular un-ordered list. I can make a static array show within my datalist but not my dynamic search array.</p>
  
  <pre><code>  &lt;div&gt;
      &lt;!-- Search Bar --&gt;
      &lt;b-form-input
        v-model="text"
        type="text"
        placeholder="Search Courses/Professors"
        list="search-list-id"
        @input="searchInputChanged"
      &gt;&lt;/b-form-input&gt;
  
      &lt;!-- Displayes Filtered List --&gt;
      &lt;li id="my-list-1" v-for="(item, index) in searchArray" :key="index"&gt;{{item}}&lt;/li&gt;
  
      &lt;!-- Datalist for Search Bar --&gt;
      &lt;datalist id="search-list-id"&gt;
        &lt;!-- This one shows --&gt;
        &lt;option v-for="(size,index) in sizes" :key="index"&gt;{{ size }}&lt;/option&gt;
        &lt;!-- This one doesn't show. WHY? --&gt;
        &lt;option v-for="(item, index) in searchArray" :key="index"&gt;{{item}}&lt;/option&gt;
      &lt;/datalist&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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() {...}
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>So I can display a static array with data list just fine...
  <a href="https://i.stack.imgur.com/RqzEm.png" rel="nofollow noreferrer">My sizes array is visible from the dropdown</a></p>
  
  <p>But my dynamic list, which I know has the correct array because it display fine in my  doesn't show
  <a href="https://i.stack.imgur.com/oFPdp.png" rel="nofollow noreferrer">Dynamic array not showing w/in dropdown</a></p>
  
  <p>I can't seem to figure this one out. Any ideas?</p>
  
  <p>Here is the content of my methods...</p>
  
  <pre><code>methods: {
      searchInputChanged() {
        if (this.text.length &gt; 1) this.getSearchFromBackend();
      },
      getSearchFromBackend() {
        // get the search from the backend
          new Promise((resolve, reject) =&gt; {
          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 =&gt; {
              console.log(resp);
              this.searchArray = resp.data;
              this.status = "success";
  
              resolve(resp);
            })
            .catch(err =&gt; {
              console.log(err);
              this.status = "error";
  
              reject(err);
            });
        });
      }
    },
  </code></pre>