Extending the v-autocomplete to support typeahead

example-usage.html

v-model: {{foo}}
<type-ahead
  v-model='foo'
  :items='["foo", "bar", "baz"]' >
</type-ahead>

VTypeAhead.vue

<template>
<v-autocomplete
  v-model='item'
  @update:searchInput='valueTyped'
  :items='computedItems'
  v-bind='extraProps' >
</v-autocomplete>
</template>

<script>
export default {
  name: 'TypeAhead',
  props: {
    value: { type: String },
    items: { type: Array, required: true },
    extraProps: { type: Object, default: () => { return {} } }
  },
  data () {
    return {
      item: '',
      searchText: ''
    }
  },
  watch: {
    value: {
      immediate: true,
      handler () {
        if (this.value) {
          this.item = this.value
          this.searchText = this.value
        }
      }
    },
    item () {
      this.$emit('input', this.item)
      this.searchText = this.item
    }
  },
  methods: {
    valueTyped (val) {
      this.searchText = val
    }
  },
  computed: {
    computedItems () {
      return this.items.concat([this.searchText])
    }
  }
}
</script>

<style>

</style>