Edit in JSFiddle

  const vm = new Vue({
    el: "#app",
    data: {a: "", b: ""},
    methods: {
      foo: _.debounce(function() {
        this.geocoder.geocode({"address": this.postal_code}, (results, status) => {
          if (status == google.maps.GeocoderStatus.OK) {
            const location = results[0].geometry.location
            this.gmap.setCenter(location)
            this.maker.setPosition(location)
          }
        })
      }, 1000),
    },
    watch: {
      postal_code: function() { this.foo() },
    },
    computed: {
      postal_code: function() { return `${this.a}-${this.b}`                                             },
      geocoder:    function() { return new google.maps.Geocoder()                                        },
      gmap:        function() { return new google.maps.Map(document.querySelector("#area1"), {zoom: 15}) },
      maker:       function() { return new google.maps.Marker({map: this.gmap})                          },
    },
  })

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCuRVZQBIM7XAhSvKl7nfZA-N2FhT-u1o8">
</script>
<div id="app">
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-md-2 control-label">〒</label>
      <div class="col-sm-10 form-inline">
        <input class="form-control" v-model="a" size="3" />
 -
 <input class="form-control" v-model="b" size="4" />
      </div>
    </div>
  </div>
</div>
<div id="area1" style="width:100%; height:50vh;">
</div>