Vue, Leaflet, accessing ref object / function

Question

I have a running leaflet map in a vue project. Eg (only relevant vue code included).

<div style="height:70vh; width:100%; position: relative;">
      <l-map ref="map" :zoom="maps_obj.zoom" :center="[maps_obj.latitude, maps_obj.longitude]">
        <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base"></l-tile-layer>
      </l-map>
</div>

<script>
import 'leaflet/dist/leaflet.css';
import { defineComponent, ref } from 'vue';
import {
  LMap, LMarker, LTileLayer, LIcon,
} from '@vue-leaflet/vue-leaflet';
import { icon } from 'leaflet';

methods: {
    test() {
      this.$nextTick(() => {
        this.$refs.map.mapObject.invalidateSize();
      });
    },
  },
</script>

The map itself works perfectly. But how come I cannot access the leaflet api and run a function, like the documentation states? (https://vue2-leaflet.netlify.app/quickstart/#accessing-leaflet-api)

It just returns the error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'invalidateSize')
 

Answer 1

Of course after posting this question I found the "hidden answer".. The mapObject is nowadays called leafletObject..

this.$refs.map.leafletObject.invalidateSize();