Sometimes I am getting this error ,,Error in data(): "ReferenceError: google is not defined"

This is happening more or less on every second load.
I guess the problem is occurring because the script is being executed before the google maps api is loaded, but I don't know how to sort this out... Any ideas? See the code bellow...

Thanks!

Here is my code from the main:
```
// Google Maps
import 'vue-googlemaps/dist/vue-googlemaps.css'
import VueGoogleMaps from 'vue-googlemaps'
Vue.use(VueGoogleMaps, {
load: {
apiKey: 'AIzaSyDmDuqAPNfa6XEbRVNuaZGhRS6JzGmAmek',
libraries: ['places'],
},
})

```
And the component:
```

import mapStyles from '@/data/mapStyles'

export default {
name: 'google-map',
data: () => ({
mapOptions: {
minZoom: 5,
maxZoom: 20,
draggable: true,
zoomControl: true,
scrollwheel: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: true,
streetViewControl: false,
styles: mapStyles
},

zoom: 14,
center: {
lat: 50.049598,
lng: 14.551283
},
markers: [

{
position: {
lat: 50.049598,
lng: 14.551283
},
label: {
color: 'black',
fontFamily: 'Material Icons',
fontSize: '20px',
text: 'face',
// text: 'Conrad and Shark'
},
icon: {
url : "/static/logo.png",
scaledSize: new google.maps.Size(150, 35)
}
}
]
}),

methods: {
onIdle() {},
onMapClick() {},
selectMarker(id) {
console.log('marker id', id)
}
}
}

.vue-google-map {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}

```