Searchbar

Search.vue

 <template>
  <div id="searchbar">
    <v-text-field
      flat
      solo-inverted
      append-icon="search"
      label="Find Location"
      class="hidden-sm-and-down"
      v-model='defaultInput'
      ></v-text-field>
    </div>
</template>

<script>
import MglGeocoderControl from 'vue-mapbox-geocoder'
import Vue from 'vue'

export default {
  name: "Searchbar",
  data() {
    return {
      accessToken: '<my token>',
      defaultInput: ''
    }
  },
  created() {
    var ComponentClass = Vue.extend(MglGeocoderControl)
    this.$geocoder = new ComponentClass({
      propsData: { accessToken: this.accessToken, input: this.defaultInput }
    })
    this.$geocoder.$on('results', this.handleSearch)
    this.$geocoder.created()
  },
  methods: {
    handleSearch(event) {
      console.log(event)
    }
  },
  watch: {
    defaultInput (next, prev) {
      this.handleSearch(this.$geocoder.control.query(next))
    }
  }
}
</script>