From e3b743a2ef4cba1c4bc38fb68d3105a9ec30800f Mon Sep 17 00:00:00 2001
From: Felix Ranesberger <52704891+felixranesberger@users.noreply.github.com>
Date: Thu, 6 Jul 2023 14:29:47 +0200
Subject: [PATCH] Update README.md

---
 README.md | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 7333c62..139adaa 100644
--- a/README.md
+++ b/README.md
@@ -133,9 +133,9 @@ If you want to zoom in on the map as far as you can, but still see all markers,
 
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
-const markers = [
+const markers = ref([
   {
     lat: 47.8557578,
     lng: 12.1133382,
@@ -148,7 +148,7 @@ const markers = [
     lat: 47.8568879,
     lng: 12.1270439,
   },
-];
+]);
 
 const googleMapRef = ref();
 
@@ -160,12 +160,18 @@ async function fitMarkerBounds() {
 
   const bounds = new window.google.maps.LatLngBounds();
 
-  markers.forEach((marker) => {
+  markers.value.forEach((marker) => {
     bounds.extend(marker);
   });
 
   googleMapInstance.fitBounds(bounds);
 }
+
+// center markers on first render
+onMounted(fitMarkerBounds);
+
+// center markers, if they are adjusted
+watch(markers, fitMarkerBounds);
 </script>
 
 <template>
@@ -177,6 +183,7 @@ async function fitMarkerBounds() {
     />
   </GMapMap>
 </template>
+
 ```
 
 ### Cluster