examples/resize-bus.html

<body>
  <div id="root">
    <h1>Resize Bus</h1>

    <p>
      The first map is displayed correctly after clicking
      the button.

      The second and third are not (not bound to default resize bus).
      <button @click=updateStyle>
        Click me first
      </button>
    </p>
    <p>
      However, the third map responds to the second button
      (custom resize bus)

      <button @click=updateBus>
        Click me second
      </button>
    </p>

    <gmap-map
      :style="currentStyle"
      :center="{lat: 1.38, lng: 103.8}"
      :zoom=12>
    </gmap-map>

    <gmap-map
      :style="currentStyle"
      :center="{lat: 1.38, lng: 103.8}"
      :zoom=12
      :resize-bus="null">
    </gmap-map>

    <gmap-map
      :style="currentStyle"
      :center="{lat: 1.38, lng: 103.8}"
      :zoom=12
      :resize-bus="customBus">
    </gmap-map>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/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',
  },
});

document.addEventListener('DOMContentLoaded', function() {
  new Vue({
    el: '#root',
    data: {
      currentStyle: {
        display: 'none'
      },
      customBus: new Vue(),
    },
    methods: {
      updateStyle() {
        this.currentStyle = {
          display: 'inline-block',
          width: '200px',
          height: '200px',
        };
        Vue.$gmapDefaultResizeBus.$emit('resize');
      },
      updateBus() {
        this.customBus.$emit('resize');
      }
    }
  });
});

</script>

</body>