title: Vue data getting undefined after axios call in script
body: <p>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 <code>{{ data }}</code> 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 <code>undefined</code> when trying to use the data after the axios call.</p>
  
  <pre><code>export default {
        type: Array,
        data () {
          return {
            post: [],
          }
        }, 
        created () {
          axios.get("")
            .then((response)  =&gt;  {
            // console.log(response.data.resource)
            this.post = response.data.resource;
            // console.log([this.post.lat])
          }).catch(error =&gt; {
            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);
  </code></pre>
  
  <blockquote>
    <p>[Vue warn]: Error in mounted hook: "Error: Invalid LatLng object: (undefined, undefined)"</p>
  </blockquote>