GMapMarker not getting position correctly

[AbbJesRib]

I am using this code:

<template>
  <div>
    <GmapMap
      ref="mapRef"
      :center="{ lat: 10, lng: 10 }"
      :zoom="11"
      style="width: 500px; height: 300px"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center = m.position"
      />
    </GmapMap>
  </div>
</template>

import { gmapApi } from "vue2-google-maps";
import { db } from "../main";
export default {
  data() {
    return {
      markers: [],
    };
  },

  methods: {
    },
  },
  mounted() {
    db.collection("markers")
      .get()
      .then((snap) => {
        const markers = [];
        snap.forEach((doc) => {
          let tempdoc = doc.data()
          console.log(tempdoc)
          tempdoc.position = { lat: doc.data().lat, lng: doc.data().lng}
          console.log(tempdoc)
          markers.push({ [doc.id]: tempdoc });
        });
        this.markers = markers;
      });

    this.$refs.mapRef.$mapPromise.then((map) => {
      map.panTo({ lat: 10, lng: 10 });
    });
  },
  computed: {
    google: gmapApi,
  },
};
</script>

I get marker info from firebase firestore and then convert the latitude and longitude into a single variable called position formatted like this: {lat: [latitude], lng: [longitude]} but the markers don't show up on my map.

Is it because I haven't enabled billing or is it some other reason?

[curiousteam]

If the lat and lng is not number type, markers does not show up.