Vue warn]: Error in render: "TypeError: Cannot read property 'map' of undefined" Vue Google maps

I have a simple vue project which calls the data from my API.

There is a google map that i need to connect and show the markers from the lat and long retrieved from the database via API.

I have enabled the Axios for vue but the axios function is giving me an error.

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'map' of undefined"

File: GoogleMap.vue

<template>
  <div>
    <div>
      <h2>Search and add a pin</h2>
    </div>
    <br/>
    <gmap-map id="map" v-bind="options">
      <gmap-marker
          :key="index"
          v-for="(m, index) in markers"
          :position="m.position"
          :clickable="true"
          :draggable="true"
          :label="m.label"
          @click="openWindow"
      />
      <gmap-info-window
          @closeclick="window_open = false"
          :opened="window_open"
          :position="infowindow"
          :options="{
          pixelOffset: {
            width: 0,
            height: 0,
          },
        }"
      >
        Hello world!
      </gmap-info-window>
    </gmap-map>
  </div>
</template>

import axios from "axios";
import { gmapApi } from "vue2-google-maps";
export default {
  name: "GoogleMap",
  data() {
    return {
      // maps - entry point
      options: {
        zoom: 12,
        center: {
          lat: 6.9271,
          long: 79.8612,
        },
        mapTypeId: "roadmap",
      },
      info_marker: null,
      infowindow: {
        lat: 39.9995601,
        long: -75.1395161,
      },
      window_open: false,
    };
  },
  mounted() {
    this.initialize();
    let config = {
      method: "get",
      url: "http://127.0.0.1:8002/api/locations/",
    };
    axios(config).then((val) => {
      this.Data = val.data;
    });
  },
  computed: {
    google: gmapApi,
    markers() {
      return this.Data.map(
        (locationName, lat, long) => ({
          locationName,
          position: lat,
          long: long,
        }));
    },
  },
  watch: {},
  methods: {
    initialize() {
      console.log("init");
    },
    openWindow() {
      console.log(this);
      this.window_open = true;
    },
  },
};

API Endpoint :

[
{
"id": 1,
"nic": "9886556V",
"locationName": "Cargils",
"lat": "6.5945719",
"long": "79.9489557",
"policeArea": "south",
"dateTime": "2021-04-20T04:26:49.000000Z",
"created_at": null,
"updated_at": null
},
{
"id": 2,
"nic": "123456789V",
"locationName": "Super Centre",
"lat": "6.9175873",
"long": "79.8589105",
"policeArea": "Hyde Park Corner",
"dateTime": "2021-04-20T05:03:49.000000Z",
"created_at": null,
"updated_at": null
}
]