Vu2.js 2: Using HTML5 Input plus Data List for auto-suggest entry field. Based on blog article https://medium.com/codingthesmartway-com-blog/vue-js-2-vue-resource-real-world-vue-application-with-external-api-access-c3de83f25c00 that creates simple Vue.js 2 application with content from news api

SourceSelection.vue

<template>
  <div class="sourceselection">
    <div>
      <div class="jumbotron">
        <h2><span class="glyphicon glyphicon-list-alt"></span>&nbsp;News List</h2>
        <h4>Select News Source</h4>
          <input v-model="source" list="newssources-list" v-on:input="sourceChanged" 
                 name="source-selection" id="source-selection" class="form-control" 
                 placeholder="Please specify news source ..."/>
          <datalist id="newssources-list">
            <option v-for="source in sources" v-bind:value="source.name"  v-bind:label="source.name"></option>
          </datalist>
        <div v-if="deepSource">
          <h6>{{deepSource.description}}</h6>
          <a v-bind:href="deepSource.url" class="btn btn-primary" target="_blank">Go To {{deepSource.name}} Website</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sourceselection',
  data () {
    return {
      sources: [],
      source: '',
      deepSource: ''
    }
  },
  methods: {
    sourceChanged: function(e) {
      console.log("source = "+this.source+" new value = "+e.target.value);
      var newSource = e.target.value;
     // only action if value is different from current deepSource 
     if (newSource!= this.deepSource.name) { 
       for (var i=0; i<this.sources.length; i++) {
         if (this.sources[i].name == newSource) {
           this.deepSource = this.sources[i];
           this.source = this.deepSource.name;
         }
       }
       this.$emit('sourceChanged', this.deepSource.id);
     }
    }
  },
  created: function () {
    var api = "https://newsapi.org/v1/sources?language=en";
    this.axios.get(api).then((response) => {
        this.sources = response.data.sources;
    });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Could you please have a look at my attempt to use a datalist component? When I use more than 1.. the autocompletion array is getting assigned across all of the instances of the component and I am unsure how to prevent it.. https://stackoverflow.com/questions/53855275/multiple-datalist-vuejs-components-getting-the-same-id . Thank you