LPolyline not updating with new data with Vue 3

Question

I am making a map application using vue 3, quasar and vue-leaflet. I have gotten the map to render and I have markers able to be rendered and update the location when new data comes in. When I try to update the polyline by updating the array pointed to by the lat-lng property it does not update the polyline on the map. Depending on how I refresh quasar/browser I can sometimes get some of the line to render (everything that has accumulated in the array, but it won't render anything new in realtime)

I have tried two different ways of defining polylines and both are not working.

    <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>

And to update them

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);
}

My full .vue component file is below:

<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>