I am trying to render markers on my leaflet map from an api utilizing axios. When in my axios call I am getting the data and the data is showing if I `{{ data }}` in my render template. The problem is when trying to use the data in the same script, just after the axios call to render markers from the data. I get `undefined` when trying to use the data after the axios call.

```
export default {
      type: Array,
      data () {
        return {
          post: [],
        }
      }, 
      created () {
        axios.get("")
          .then((response)  =>  {
          // console.log(response.data.resource)
          this.post = response.data.resource;
          // console.log([this.post.lat])
        }).catch(error => {
          console.log(error.message);
        })
      },
      mounted () {
        var mymap = L.map(this.$refs['mapElement']).setView([40.783058, -73.971252], 12);
        var myIcon = L.icon({
          iconUrl: redMarker,
          iconSize: [38, 95],
          iconAnchor: [22, 94],
          popupAnchor: [-3, -76],
        })
        var myIcon2 = L.icon({
          iconUrl: greenMarker,
          iconSize: [38, 95],
          iconAnchor: [22, 94],
          popupAnchor: [-3, -76],

        })
        var marker = L.marker([40.783058, -73.971252], {icon: myIcon}).addTo(mymap);
          // console.log([this.post[0].lat])
        var marker2 = L.marker([this.post.lat, this.post.lng], {icon: myIcon2}).addTo(mymap);

```

> 
> [Vue warn]: Error in mounted hook: "Error: Invalid LatLng object: (undefined, undefined)"
> 
> 
>