examples/basic-place-input.html

<body>
  <div id="root">
    <h1>Changing Default Place updates text box</h1>
    <button @click="setPlaceText('Tokyo')">Set to Tokyo</button><br/>
    <button @click="setPlaceText('Shanghai')">Set to Shanghai</button><br/>
    <button @click="setPlaceText('Seoul')">Set to Seoul</button><br/>
    <gmap-place-input :default-place="place"
      @place_changed="setPlace">
    </gmap-place-input>
    <br/>
    {{latLng.lat}},
    {{latLng.lng}}
  </div>

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

<script>

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

document.addEventListener('DOMContentLoaded', function() {
  new Vue({
    el: '#root',
    data: {
      place: 'Singapore',
      latLng: {}
    },
    methods: {
      setPlaceText(place) {
        this.place = place;
      },
      setPlace(place) {
        this.latLng = {
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng(),
        };
      }
    }
  });
});

</script>

</body>