Abnormal re-render of L-map when an unrelated data property changes

[pakal]

Description

I have, in my component's , a vue2-leaflet L-map, a button, and a label. When I click on the button, it updates a data property which is displayed in the label. None of these elements are linked to the L-map (no props or slots).

When the data property gets updated, the performance monitor of my browser shows that it forces a full updateComponent() of the L-map, re-rendering and re-updating (with lots of createElements) the L-map and its thousands of markers (which takes more than 1s). When there are only few markers on the map, this re-render is almost instantaneous, of course.

If I don't display the data property in the template's label, this re-rendering doesn't occur. So it seems any change to the parent of the L-map forces its full re-render, somehow.

Using v-once prevents re-render of L-map too, but of course breaks the rest of its (wanted) reactivity.

Steps to Reproduce

Expected Results

Unless the data property is used as a prop/slot inside the L-map, its update shouldn't trigger any change/re-update to the separated L-map.

Actual Results

With performance browser , we see the full call of the render/update of the L-map.

Browsers Affected

• Chrome
• Firefox
• (at least)

Versions

• Leaflet: v1.7.1
• Vue: v2.6.14
• Vue2Leaflet: v2.7.1

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.