Gracias por leer mi pregunta :)

Estoy tratando de implementar GoogleMaps en mi proyecto Vue.js y usando @googlemaps/js-api-loader (de https://developers.google.com/maps/documentation/javascript/overview#javascript )

Mi código se ve de la siguiente manera:

 <script setup> import { onMounted, ref } from 'vue' import { Loader } from '@googlemaps/js-api-loader' const loader = new Loader({ apiKey: '', version: 'weekly', libraries: ['places'] }) const map = ref([]) onMounted(async () => { await loader .load() .then(google => { map.value = google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8 }) }) .catch(error => { console.log(error) }) .then(function () { // always executed }) }) </script> <template> <div id="map" class="map" /> </template> <style> html, body, #map { height: 100%; margin: 0; padding: 0; } </style>

Pero el mapa no muestra, solo esa ventana emergente, que el mapa no se puede cargar correctamente. En la consola ocurre este error: typeError: this.set no es una función. (En 'this.set("renderingType","UNINITIALIZED")', 'this.set' no está definido) ¿Alguien sabe cómo hacerlo funcionar (en el mejor de los casos en <script setup> )?