[Vuejs]-VueJS Component with datalist not showing options

If Alfredo Lanzetta post his answer, you should accept his because he came with it first. I just want to explain why the solution works.

If you have the following code where you want a dropdrown list for an input field

<input type="text" v-model="item" list="data_input" v-on:input="selectionChanged">
<datalist id="yourdatalist">
  <option v-for="item in data_input">{{item}}</option>
</datalist>

To correctly assign the datalist to the input field, the input field needs to have a link to said datalast. You can do that with the list property of the input field.

The way to link the two, is to set the list property of the input field to the id of the datalist. As you can see in example from your code, the datalist has the id yourdatalist but the input field has de list property set to data_input, thus it is looking for a datalist with the id data_input. Since there is no datalist with said id, you don’t get to see that dropdrown list.