Vue Google Maps - JavaScript API error: NotLoadingAPIFromGoogleMapsError

hi im trying to add my api key to my google map. when i used the string version of the key everything was fine, but i don't want to do that i would like to keep the key in my .env file. However when i make that change i can't get the Google Maps JavaScript API error: NotLoadingAPIFromGoogleMapsError. any help would be greatly appreciated! thanks

*edit i just noticed that this issue is happening when i try to load the api key from my .env file. when i swap out the line with process.env.VUE_APP_GOOOGLEMAPS_KEY; and paste in the actual api key the map loads just fine.

MapPage.vue

    <template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Map</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <GoogleMap :api-key="API_KEY" style="width: 100%; height: 500px" :center="center" :zoom="15">
        <Marker :options="{ position: center }" />
      </GoogleMap>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import { GoogleMap, Marker } from "vue3-google-map";

export default {
  name: 'MapPage',
  components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage, GoogleMap, Marker },
  setup() {
    const center = { lat: 40.689247, lng: -74.044502 };
    const API_KEY = process.env.VUE_APP_GOOOGLEMAPS_KEY;

    return { center,API_KEY };
  },
};
</script>