Карта появляется только после обновления

Question

Я использую Google Map Api в Vue js, но карта не появляется, если я обновлю sh страницу. Но когда я пытаюсь распечатать все данные в консоли, я вижу правильно. Я пытался получить данные c вместо данных Dynami c, но он все еще не работает. Я использую npm vue map и ниже мой код.

map. vue

<template>
  <div>
    <gmap-map :center="center" :zoom="17" style="width:100%;  height: 60vh;">
      <gmap-info-window
        :options="infoOptions"
        :position="infoPosition"
        :opened="infoOpened"
        @closeclick="infoOpened=false"
      >{{infoContent}}</gmap-info-window>
      <gmap-marker
        :position="getPosition(coordinates)"
        :clickable="true"
        @click="toggleInfo(coordinates)"
      />
    </gmap-map>
  </div>
</template>

<script>
export default {
  name: "Map",
  data() {
    return {
      lat: 31.2114575,
      lng: 29.9402065,
      center: {},
      coordinates: {},
      infoPosition: null,
      infoContent: null,
      infoOpened: false,
      infoCurrentKey: null,
      infoOptions: {
        pixelOffset: {
          width: 0,
          height: -35
        }
      }
    };
  },

  async mounted() {

   await  this.geolocate();


  },
 methods: {

    async geolocate() {
     await  this.getFloatDirections();
    this.center = {
          lat: this.lat,
          lng: this.lng
        };
      this.coordinates = {
        full_name: this.$route.query.name,
        lat: this.lat,
        lng: this.lng
      };
      // console.log("typeof(this.center.lat)"+typeof(this.$route.params.lat))
    },
     getFloatDirections(){
      this.lat = parseFloat(this.$route.params.lat);
      this.lng = parseFloat(this.$route.params.lng);

    },
    getPosition: function(marker) {
      return {
        lat: marker.lat,
        lng: marker.lng
      };
    },
    toggleInfo: function(marker) {
      this.infoPosition = this.getPosition(marker);
      this.infoContent = marker.full_name;

      this.infoOpened = true;
    }
  }


};
</script>

main. js

import * as VueGoogleMaps from "vue2-google-maps"

  load: {
    key: "Mykey"
  }
});

и в консоли моя ошибка Может ли кто-нибудь помочь мне разобраться?