Catch error "this.$mapPromise.then is not a function" when use vue2-google-map with Nuxtjs

Question

I use vue2-google-map in my Nuxtjs project. Every working well but I got some errors when trying to add my own component by using

MapElementFactory

I've read the document carefully and implemented coding like this

DirectionsRenderer.js

import { MapElementFactory } from 'vue2-google-maps'

export default MapElementFactory({
  name: 'directionsRenderer',
  ctr () {
    return window.google.maps.DirectionsRenderer
  },
  events: [],
  mappedProps: {},
  props: {
    origin: { type: [Object, Array] },
    destination: { type: [Object, Array] },
    travelMode: { type: String },
  },
  afterCreate (directionsRenderer) {
    console.log(1)
    let directionsService = new window.google.maps.DirectionsService();
    this.$watch(
      () => [this.origin, this.destination, this.travelMode],
      () => {
        let { origin, destination, travelMode } = this;
        if (!origin || !destination || !travelMode) return;
        directionsService.route(
          {
            origin,
            destination,
            travelMode,
          },
          (response, status) => {
            if (status !== 'OK') return;
            directionsRenderer.setDirections(response);
          }
        );
      }
    );
  },
})

MapView.vue

<template>
  <GmapMap
    ref="mapRef"
    :zoom="12"
    :options="options"
    :center="center"
    :class="['w-full h-[900px]', classCustom]"
  >
    <DirectionsRenderer 
      travel-mode="DRIVING"
      :origin="startLocation"
      :destination="endLocation"
    />
  </GmapMap>
</template>

<script>
import DirectionsRenderer from './DirectionsRenderer'

export default {
  name: 'ItinerayMapView',

  components: { DirectionsRenderer },

  props: {
    classCustom: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => ({
        draggable: false,
        scrollwheel: false,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: false,
        disableDoubleClickZoom: true,
      }),
    }
  },

  data() {
    return {
      map: undefined,
    }
  },
  computed: {
    center() {
      return { lat:10, lng:10 }
    },
    startLocation() {
      return { lat:9, lng:10 }
    },
    endLocation() {
      return { lat:10, lng:9 }
    }
  },
  mounted() {
    this.$refs.mapRef.$mapPromise.then((map) => {
      this.map = map
    });
  },
  methods: {},
}
</script>

vue2-google-map.js

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

export default ({ app }) => {
  Vue.use(VueGoogleMaps, {
    load: {
      key: app.$config.GOOGLE_MAP_API_KEY,
      libraries: 'places',
    },
  })
}

nuxt.config.js

export default {
    ...
    plugins: [
        ...
        { src: '~/plugins/vue2-google-maps.js', ssr: false },
    ]
}

The browser response is

Was I wrong in anywhere? I've researched for lots of time but still can't fix it :(

I've try to fix it but this issue wasn't be talk about much so I can't get many information.

I expect to fix this error and understand deeper to not face this issue again.

Thanks a lot!

Vue version: 2.6.14

Nuxt version: 2.15.8

Vue2-google-map version: 0.10.7

Webpack version: 4.46.0