[Vuejs]-Vue data getting undefined after axios call in script

It’s tough to say exactly what the problem is, but I’d remove the marker and re-add it when the lat changes , this way you’re re-rendering the marker which should solve the problem:

watch: {
    'post.lat': (newLat, oldLat) => {
        //we should destroy the marker here and regenerate it.
    }
}

axios.get is a async function. Vue Hooks won’t wait until the previous hook finished to execute itself if the previous hook contain async function.

In your case, the mounted hook finished before created hook finished, so this.post is still an empty array.

For a good practice, you need to store the map instance in data and add marker to the map in axios.get callback. Here are some sample code.

export default {
    type: Array,
    data() {
        return {
            mymap: null,
            post: []
        }
    },
    created() {},
    mounted() {
        this.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])

        axios.get("")
            .then((response) => {
                // console.log(response.data.resource)
                this.post = response.data.resource;
                var marker2 = L.marker([this.post.lat, this.post.lng], { icon: myIcon2 }).addTo(this.mymap);
                // console.log([this.post.lat])
            }).catch(error => {
                console.log(error.message);
            })
    }
}