Using `leaflet-arrowheads` with `vue-leaflet` in a Vue 3 app to add arrows to polyline

Question

I am trying to add leaflet-arrowheads (https://github.com/slutske22/leaflet-arrowheads) to a Vue 3 application in order to add arrowheads to polylines rendered via Leaflet. For that I am using vue-leaflet (for Vue 3, https://github.com/vue-leaflet/vue-leaflet)

The vue-leaflet plugin allows access to the underlying Leaflet object. I'd hoped that this was enough to add arrowheads using the leaflet-arrowheads.

I have something like the following:

<template>
    <l-map
        ref="trackingMap"
        @ready="onLeafletReady"
    >
        <l-polyline ref="myPolyline" :lat-lngs="polylines"></l-polyline>
    </l-map>
</template>
<script>
import { LMap, LMarker, LPolyline, LPopup, LTileLayer } from '@vue-leaflet/vue-leaflet';
import 'leaflet-arrowheads';

methods: {
    async onLeafletReady() {
        await this.$nextTick();

        let polyline = this.$refs.myPolyline.leafletObject;
        polyline.arrowheads();
    },
}
</script>

Unfortunately this doesn't work and results in the following error: Uncaught (in promise) TypeError: polyline.arrowheads is not a function

Any ideas on what could cause this? I am aware that this might be an issue on the Vue side (or me misusing this). However I couldn't find any info on how to integrate this and would appreciate any input.

If someone has an alternative way to render arrowheads that works with Vue 3, I'd appreciate suggestions as well.