我有一个Vue组件，它可以渲染一个MapboxMap，其中包含代表公共公园的多边形（使用@studiometa/vue-mapbox-gl库）。当用户单击一个代表公园的多边形时，多边形的中心会显示一个弹出窗口。我的Vue组件看起来像这样（我认为与问题无关的内容被删除）：

<script>

export default {
    data() {
        return {
            parks: [ /** JSON objects */],
            selectedPark: null
        }
    },
    methods: {
        mapLoaded(map) {
            // Set up a popup to appear when the user clicks a park's polygon
            map.on('click', 'parkPolygonsFill', (e) => {
                this.parks.forEach((park) => {
                    if (park.id === e.features[0].properties.id) {
                        this.selectedPark = park;
                        console.log('new selected park', this.selectedPark);
                    }
                });
            });
        },
    }
}

</script>

<template>

    <!-- Most attributes of these child components removed for brevity -->
    <MapboxMap @mb-created="mapLoaded" />
    <MapboxSource />
    <MapboxLayer />

    <!-- This is the component not behaving correctly -->
    <MapboxPopup v-if="selectedPark"
                 :lng-lat="[selectedPark.longitude, selectedPark.latitude]">
        <span>{{ selectedPark.name }}</span>
    </MapboxPopup>

</template>

Map加载，当我点击Map上的一个多边形时，MapboxPopup被正确渲染，并出现公园的弹出窗口。然而，当我点击不同的多边形时，弹出窗口消失，我可以从开发人员工具中的DOM中看到<MapboxPopup>没有被渲染。没有控制台错误。奇怪的是，我确实有new selected park控制台日志，其中正确的park位于this.selectedPark中。
为了进行研究，我在Vue组件中添加了这个方法：

popupForRandomPark() {
    this.selectedPark = this.parks[Math.floor(Math.random()*this.parks.length)];
}

和模板中的一个按钮来调用它：

<button @click="popupForRandomPark">Open random popup</button>

我可以点击它一百万次，它加载不同公园的弹出窗口完全正常，这表明MapboxPopup组件对新的this.selectedPark没有React不是问题。
我觉得这与我在异步map.on(...)事件处理程序中更改this.selectedPark的事实有关，但this.selectedPark正确地记录到了我的控制台，所以我有点不知所措？