Describe the bug
I have an instance of the vue-google-maps library running ( tag/component). This component receives different props, 'users' (array of objects with user props) and 'center' (object with only lat and lng properties, and a default value to downtown Atlanta, GA, USA) among them.

I then iterate over the 'users' array with the tag/component reading a property of the user object to pass it as the 'position' prop value. Inside of the tag I set the . If the infowindow tag is present the map first renders with the default value of the center prop and then switches to each of the marker positions iteratively.

This is the code that is being executed:

<template>
	<GMapMap
		:center="center"
		:zoom="15"
		map-type-id="roadmap"
		style="width: 100vw; height: 100vh"
		:options="options"
	>
		<GMapMarker
			v-if="hasMarkers"
			:key="`marker-${index}`"
			v-for="(user, index) in userMarkers"
			:clickable="true"
			:position="user.currentPoint"
		>
			<GMapInfoWindow>
				<div>{{ user.id }} - {{ user.name }}</div>
			</GMapInfoWindow>
		</GMapMarker>

		<GMapPolyline v-if="hasPolyline" :path="path" ref="polyline" />
	</GMapMap>
</template>
<script setup lang="ts">
	import { computed } from 'vue';
	import type { User } from '@/interfaces/user';

	const props = defineProps({
		center: {
			type: Object,
			default: { lat: 33.7597149, lng: -84.3996143 },
		},
	});

	const userMarkers = computed(() => {
		return props.users.filter((u: User) => u.currentPoint);
	});
</script>

Expected behavior
I expect to have the map centered on the default value of the center prop.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome 106
• Library version: 0.9.67