PoliLyne not being updated

[hugocostaiz]

Using exactly the same reactive array of coordinates the polyLine does not update when a coordenate changes

[rijesha]

I think I am having a similar issue.
I posted a question to stack overflow. https://stackoverflow.com/questions/78610117/lpolyline-not-updating-with-new-data-with-vue-3

I am using vue3 and quasar.
Here is my full code that isn't allowing my polyline to be updated:

<template>
  <l-map ref="map" :zoom="zoom" :center="[45.51793935397837, -73.39320903267509]" :useGlobalLeaflet="false">
    <l-tile-layer :options="{ zoom: 15, minZoom: 3, maxZoom: 23, maxNativeZoom: 19, }" :url="getWsUrl()"
      layer-type="base" name="Esri World Imagery"
      attribution="Esri, Maxar, Earthstar Geographics, and the GIS User Community"></l-tile-layer>

    <l-marker v-for="vehicle in vehicles" :key="vehicle[1].id"
      :lat-lng="[vehicle[1].position.lat, vehicle[1].position.lon]">
    </l-marker>
    <l-polyline ref="routes" v-for="vehicle in vehicles" :key="vehicle[1].id" :lat-lngs="vehicle[1].path"></l-polyline>
    <l-polyline :lat-lngs="path"></l-polyline>
  </l-map>
</template>


<script setup lang="ts">
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer, LMarker, LPolyline } from '@vue-leaflet/vue-leaflet'
import { onMounted, ref, reactive, nextTick, watch } from 'vue'

import { useMessagesStore, Vehicle } from '../stores/messages';
watch
Vehicle
const getWsUrl = (): string => {
  return 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
}

const store = useMessagesStore();
const zoom = ref(15)
const mounted = ref(false)
const map = ref<typeof LMap>()
const vehicles = reactive(store.vehicles)
const path = ref([[45.51793935397837, -73.39320903267509]]);

let i = 0;
function yourFunction() {
  path.value.push([45.51793935397837 + i * .00001, -73.39320903267509 + i * .00001])
  i = i + 1
  console.log(path)
  setTimeout(yourFunction, 100);
}

onMounted(() => {
  console.log(vehicles)
  nextTick(() => {
    mounted.value = true;
    yourFunction();
  })
})
</script>

<style>
.leaflet-div-icon {
  background: steelblue;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 80%;
  font-weight: bold;
  font-size: large;
  text-align: center;
  line-height: 21px;
}
</style>

[rijesha]

This issue may also be related #292

[rijesha]

I managed to update it, but it is not optimal, because I need to make an array copy each time I want to update.

<l-polyline ref="routes" v-for="vehicle in vehicles" :key="vehicle[1].id"
      :lat-lngs="getPolyLine(vehicle[0])"></l-polyline>

...

const getPolyLine = (index: number): L.PointTuple[] => {
  let currentPath = vehicles.get(index)?.path;
  if (currentPath) {
    return Object.assign([], currentPath);
  }
  return [];
}