Multiple Marker not showing in Vue js 3

I want to display google map with markers but it doesnot shows multiple markers. below mention my code so any one guide me how to show multiple markers in google map using vue js 3 ?

<GMapMap
      :center="center"
      :zoom="10"
      map-type-id="terrain"
      style="width: 100%; height: 500px;"
    >
      <GMapCluster :zoomOnClick="true">
        <GMapMarker
          :key="index"
          v-for="(m, index) in markers"
          :position="m.position"
          :clickable="true"
          :draggable="true"
          @click="center = m.position"
        />
      </GMapCluster>
    </GMapMap>
  </template>

this is script side code

  <script>
  export default {
    data() {
        
      return {
        center: { lat: 24.86088597309042, lng: 67.00079231462239 },
        markers: [
          {
           
            position: {
              lat: 24.873054923647146,
              lng: 67.06790996934183,
            },
          },
          {
            position: {
              lat:24.86088597309042,
              lng: 67.00079231462239,
            },
          },
          {
            position: {
              lat: 51.165218,
              lng: 7.067116,
            },
          },
          {
            position: {
              lat: 51.09256,
              lng: 6.84074,
            },
          },
        ],
      };
    },
  };
  </script>

Can anyone have idea how to show multiple markers in google map using vue js 3???