examples/basic-autocomplete.html

<body>
  <div id="root">
    <h1>Changing Default Place updates text box</h1>
    <button @click="setDescription('Tokyo')">Set to Tokyo</button><br/>
    <button @click="setDescription('Shanghai')">Set to Shanghai</button><br/>
    <button @click="setDescription('Seoul')">Set to Seoul</button><br/>
    <label>
      Place:
      <gmap-autocomplete :value="description"
        placeholder="This is a placeholder text"
        @place_changed="setPlace"
        :select-first-on-enter="true">
      </gmap-autocomplete>
    </label>
    <br/>
    {{latLng.lat}},
    {{latLng.lng}}

    <div>
      <h2>Options work</h2>
      You cannot find the state of Texas in this
      <label>
        Only locations in Singapore:
        <gmap-autocomplete
          :value="description"
          @place_changed="setPlace"
          :options="{
            bounds: {north: 1.4, south: 1.2, east: 104, west: 102},
            strictBounds: true
          }">
        </gmap-autocomplete>
      </label>
    </div>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="vue-google-maps.js"></script>

<script>

Vue.use(VueGoogleMaps, {
  load: {
    key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
    libraries: 'places'
  },
});

document.addEventListener('DOMContentLoaded', function() {
  new Vue({
    el: '#root',
    data: {
      description: 'Singapore',
      latLng: {}
    },
    methods: {
      setDescription(description) {
        this.description = description;
      },
      setPlace(place) {
        if (!place) return

        this.latLng = {
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng(),
        };
      }
    }
  });
});

</script>

</body>