Dynamic Polyline Change

[Krada88]

Hello, Friends. Tell me I have a problem.

I'm doing something like a geotracker, I need to periodically update the Polyline in real time. But I came across the fact that it doesn't work.

Maybe I'm doing something wrong? I will be grateful for the hint. And thanks a lot for earlier.

Here is my code.

I created a small sample code that doesn't work. In real life, the Polyline update should occur when the geolocation is changed, but it doesn't work there either. I deleted the api key from the code =)

<template>
  <GoogleMap
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="3"
  >
    <Polyline :options="flightPath" />
  </GoogleMap>
</template>

<script setup>
import { ref } from 'vue'
import { GoogleMap, Polyline } from 'vue3-google-map'

const center = { lat: 0, lng: -180 }
const flightPlanCoordinates = ref([
  { lat: 37.772, lng: -122.214 },
  { lat: 21.291, lng: -157.821 },
  { lat: -18.142, lng: 178.431 },
  { lat: -27.467, lng: 153.027 },
])
const flightPath = ref({
  path: flightPlanCoordinates.value,
  geodesic: true,
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2,
})

const addNewCoordinate = () => {

  const newCoordinate = {
    lat: Math.random() * 180 - 90,
    lng: Math.random() * 360 - 180,
  }

  flightPlanCoordinates.value.push(newCoordinate)

  flightPath.value = {
    ...flightPath.value,
    path: flightPlanCoordinates.value,
  }
}

setInterval(addNewCoordinate, 1000)
</script>