Google Direction Request with vue2-google-maps

gistfile1.vue

<template>
  <div>
    <h2>Map</h2>
    <GmapMap
      ref="gmap"
      :center="{lat:53.0, lng:8.8}"
      :zoom="13"
      map-type-id="terrain"
      style="height: 600px"
    >
    </GmapMap>
  </div>
</template>

<script>
import {gmapApi} from 'vue2-google-maps'

export default {
  name: 'Map',
  computed: {
  },
  props: {

  },
  data () {
    return {
      origin: null,
      destination: null,
      googleRoute: null
    }
  },
  mounted () {
  },
  methods: {
    calculateRoute: function () {
      this.$gmapApiPromiseLazy().then(() => {
        const directionsService = new google.maps.DirectionsService;
        const directionsDisplay = new google.maps.DirectionsRenderer;
        const travelOptions = {
          origin: this.origin,
          destination: this.destination,
          travelMode: 'DRIVING',
          provideRouteAlternatives: true,
          drivingOptions: {
            departureTime: new Date(),
            trafficModel: 'bestguess'
          },
          unitSystem: google.maps.UnitSystem.METRIC
        }
        //directionsDisplay.setMap(map)
        directionsService.route(travelOptions, (result, status) => {
          if (status == 'OK') {
            console.log('request successfull...')
            console.log(result)
            this.googleRoute = result
            //directionsDisplay.setDirections(result);
          }
        })
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>