I’ve been updating MVOW to use Vue.js 3, and it’s been a bit of a chore. The application is pretty large, so there have been a lot of changes. I ran into one problem that had me stumped for a while. A brief description of the problem is that I would turn some overlays on, and they showed up. For example, a colour-coded map of the length of time since the last sale. Then I turned them off, and they disappeared. Then I zoomed out, and they reappeared.

That was pretty perplexing.

I checked the code for turning the overlays off, and sure enough, I was using setMap(null) for each of the thematic overlays. I set the entry in my map of overlays to null for good measure, and then deleted the entry from the map. That didn’t help, and still the overlays came back. In fact, if I showed them again, and then turned them off, and then changed the zoom again, they came back twice (they’re semi-transparent, and they came back less transparent).

So, I figured, somewhere there are copies of the overlays that aren’t being deleted.

Clutching at straws, I changed the definition of the overlay map from:

const thematicOverlays = ref({})

to:

const thematicOverlays = {}

… and the problem went away.

Of course, I had to change a bunch of thematicOverlays.value into thematicOverlays, but that was pretty simple.

So it seems like there is something about the implementation of the reactivity in Vue.js 3 that is keeping extra copies of references to the elements in objects that have been declared as reactive.

Traps for new players.