Google Places Autocomplete API error, “google is not defined”

I am scaffolding a simple prototype using google places and maps api using Vue.

In index.html, I added the script tag, libraries, and api key, I get 200 response in the network tab.

        <script src="https://maps.googleapis.com/maps/api/js?key=My-api-key&libraries=places" async defer></script>

In App.vue, I added the following

 <input ref="autocomplete" type="text" />
 ...
<script>
  export default {
  name: "App",
  data() {
   return {
     autocomplete: "",
    };
  },
  methods: {},
  mounted() {
    const center = { lat: 40.84498856765032, lng: -73.71060855293794 };
    // Create a bounding box with sides ~10km away from the center point
    const defaultBounds = {
    north: center.lat + 0.1,
    south: center.lat - 0.1,
    east: center.lng + 0.1,
    west: center.lng - 0.1,
  };
  const originAutoComplete = google.maps.places.AutoComplete(
    this.$refs["autocomplete"],
   {
     bounds: defaultBounds,
   }
 );
 originAutoComplete.addListener("place_changed", () => {
   console.log(originAutoComplete.getPlace());
 });

How do I resolve this error? Is there a way to initialize this in App.vue script tag? The example google developers youtube works great, but I’d like to implement this in a Vue context.
One other note, I tried adding window before the .google, no dice.