How to use Places API (new)

Question

Can anyone help me solve this problem in my vue 3 application? I want to use the Places Api (new), but it's not working. I've asked chatgpt and everyone I know, I've tried to use v="beta" and much more things that are mentioned in Google's documentation.

<template>
  <div class="google__maps">
    <input
      v-model="query"
      class="search-input"
      type="text"
      placeholder="Search Area or Project"
      @input="fetchSuggestions"
    />
    <ul v-if="suggestions.length" class="suggestions-list">
      <li
        v-for="(suggestion, index) in suggestions"
        :key="index"
        @click="selectSuggestion(suggestion)"
      >
        {{ suggestion.description }}
      </li>
    </ul>
    <div id="map" class="map"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from "vue";
import { Loader } from "@googlemaps/js-api-loader";

const emit = defineEmits(["updateArea"]);

const map = ref(null);
const query = ref("");
const suggestions = ref([]);
const autocompleteService = ref(null);
const marker = ref(null);

const fetchSuggestions = () => {
  if (!autocompleteService.value) return;

  if (query.value) {
    autocompleteService.value.getPlacePredictions(
      {
        input: query.value,
        types: ["geocode"], // Limit to specific types of places
      },
      (predictions, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK && predictions) {
          suggestions.value = predictions;
        } else {
          suggestions.value = [];
        }
      }
    );
  } else {
    suggestions.value = [];
  }
};

const selectSuggestion = (suggestion) => {
  query.value = suggestion.description;
  suggestions.value = [];
  const placesService = new google.maps.places.PlacesService(map.value);

  placesService.getDetails({ placeId: suggestion.place_id }, (place, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK && place.geometry) {
      const location = place.geometry.location;
      map.value.setCenter(location);
      map.value.setZoom(17);

      if (marker.value) {
        marker.value.setPosition(location);
      } else {
        marker.value = new google.maps.Marker({
          map: map.value,
          position: location,
          draggable: false, // Disable dragging
        });
      }

      emit("updateArea", {
        name: suggestion.description,
        lat: location.lat(),
        lng: location.lng(),
      });
    }
  });
};

onMounted(async () => {
  const loader = new Loader({
    apiKey: "GOOGLE_API_KEY",
    libraries: ["places"], // Load the Places library
  });

  // Load the Google Maps API
  await loader.load();

  // Initialize the map
  const defaultLocation = { lat: 25.276987, lng: 55.296249 }; // Default location (Dubai)
  map.value = new google.maps.Map(document.getElementById("map"), {
    center: defaultLocation,
    zoom: 12,
  });

  // Initialize the AutocompleteService
  autocompleteService.value = new google.maps.places.AutocompleteService();
});
</script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
  border-radius: 10px;
  margin-top: 10px;
}

.search-input {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.google__maps {
  width: 95%;
  margin: 0 2.5%;
}

.suggestions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  z-index: 1000;
}

.suggestions-list li {
  padding: 10px;
  cursor: pointer;
}

.suggestions-list li:hover {
  background: #f0f0f0;
}
</style>

I've tried to use server folder to implement it using node.js but I lack the knowledge to do so; and I tried to use v=beta in resolve