vue.js is not displaying google maps

Question

I am working on a webpage that is supposed to be displaying a google map. However, I can not get it to display properly. I have a good API key as I can get the JSON file. Any advice would be appreciated.

index.html:

<script src="https://maps.googleapis.com/maps/api/js?key=***APIKEY***&callback=initMap"></script>

*note I have seen it done with and without the callback.

LocationMap.vue:

<template>
    <v-app>
        <div id='ConnectMap'>
            <div ref='map'>
            </div>
        </div>
    </v-app>
</template>
<script>
export default {
    name: 'Map',
    data() {
        return{
            map:null,
            mapCenter:{lat:37.773972,lng:-122.431297}
        }
    },
mounted(){
this.initMap();
},
    methods:{

            // initMap()
        
        initMap(){
            this.map = new google.maps.Map(this.$refs.map,{
                center: this.mapCenter,
                zoom: true,
                maxZoom: 20,
                minZoom: 3,
                streetViewControl: true,
                mapTypeControl: true,
                fullscreenControl: true,
                zoomControl: true
            })
        
    }
    }
}
</script>

currently, as the code is I get an uncaught in promise error. The error states that initMap is not a function. If I remove the callback I get no error message. Either way, my map does not display.

UPDATE I added a call to initMap inside mounted. However, this is now giving me a race condition on setzoom.