JSFiddle - React, Tailwind, and code Playground

HTML

<template id="autocomplete">
  <div>
    <input :value="value" placeholder="Start typing..." @input="$emit('input', $event.target.value)"/>
    <ul v-if="suggestions.length > 0">
      <li v-for="item in suggestions" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<div id="app">
  <h1>Selected location: {{ location }} </h1>
  <autocomplete v-model="location" :suggestions="locations" />
</div>

CSS

ul {
  margin: 0;
  padding: 0;
  border: 1px solid #aaa;
}

ul li {
  list-style-type: none;
  background: #fff;
  padding: 5px 15px;
}

ul li:hover {
  color: #fff;
  background: #1C90F3;
  cursor: pointer
}

Babel + JSX

const autocomplete = {
  template: '#autocomplete',
  
  props: {
  	value: String,
  	suggestions: Array
  }
};

new Vue({
  el: '#app',
  
  components: { autocomplete },
  
  watch: {
    async location(value) {
			this.locations = value.length >= 3 ? await Promise.resolve(['111', '222', '333']) : [];
    }
  },
  
  data: {
    location: '',
    locations: []
  }
});