title: VueJS Component with datalist not showing options
body: <p>I am utilizing VueJS and it's components to build a large series of datalists and selectors.. all with a submit button at the end of it when the form is validated...</p>
  
  <p>so far I can make a datalist inside a component that renders options and has type completion.. works great!  BUT when I attempted to turn the thing into a VueJS Component, and pass in the dataarray as a property... my list of options no longer render</p>
  
  <h1>Two Datalist elements...</h1>
  
  <p><a href="https://i.stack.imgur.com/gHsk2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gHsk2.png" alt="two datalist elements"></a></p>
  
  <h1>Top one is the "raw" datalist, which works 100%</h1>
  
  <p><a href="https://i.stack.imgur.com/MSeO0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MSeO0.png" alt="enter image description here"></a></p>
  
  <h1>But when I goto the vue.js component version, nothing shown as an option...</h1>
  
  <p><a href="https://i.stack.imgur.com/SXEfr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SXEfr.png" alt="enter image description here"></a></p>
  
  <h1>it's just not there, when I mouse over like the first one...</h1>
  
  <p><a href="https://i.stack.imgur.com/va0DA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/va0DA.png" alt="enter image description here"></a></p>
  
  <p>The datalist VueJS Component</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
        &lt;input type="text" v-model="item" list="data_input" v-on:input="selectionChanged"&gt;
          &lt;datalist id="yourdatalist"&gt;
            &lt;option v-for="item in data_input"&gt;{{item}}&lt;/option&gt;
          &lt;/datalist&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Datalist',
    props: ['inputDataList'],
    data () {
      return {
        selection: '',
        item:'',
        data_input:this.inputDataList
      }
    },
  
  methods: {
    selectionChanged: function(element) {
      console.log("selection = "+this.selection+", new value = " + element.target.value);
      var newSelection = element.target.value;
  
      if (newSelection != this.selection) { 
        // newSelection changes on every keystroke, so you must keep diffing it with your known data
        for (var i=0; i&lt;this.data_input.length; i++) {
          if (this.data_input[i] == newSelection) {
            this.selection = newSelection
            console.log("selection = "+this.selection+" now");
            this.$emit('selectionChanged', this.selection);
          }
        }
      }
    },
  },
  }
  &lt;/script&gt;
  </code></pre>
  
  <h1>The calling component HTML code</h1>
  
  <pre><code>&lt;p&gt;Examples of Datalists&lt;/p&gt;
  &lt;input type="text" v-model="film" list="films" v-on:input="filmChanged"&gt;
      &lt;datalist id="films"&gt;
          &lt;option v-for="film in films"&gt;{{film}}&lt;/option&gt;
      &lt;/datalist&gt;
  &lt;div v-if="focusedfilm"&gt;
    &lt;h6&gt;You have picked {{focusedfilm}}&lt;/h6&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;p&gt;Examples of Child Component Datalist&lt;/p&gt;
  &lt;Datalist :inputDataList="films"/&gt;
  </code></pre>
  
  <p></p>