VueJS：类未绑定在按钮单击上

Question

我编写了一个函数，当单击图像时，该函数将active类绑定到弹出窗口。但是，虽然expandedImageActive运行时expandedImage和toggleExpand()数据属性已正确更新，但该类未正确绑定到弹出窗口。我究竟做错了什么？以下是相关代码（假设mainImage有一个值）：

HTML

<section class="product__images">
    <div class="product__images-main">
        <a @click="toggleExpand(mainImage)">
        <img :src="mainImage.url" :alt="mainImage.description ? mainImage.description : product.title.value"  />
        </a>
    </div>
    <div class="popup" :class="{ active: expandedImageActive }">
        <div v-if="expandedImage">
            <a @click="toggleExpand()">close</a>
            <img :src="expandedImage.url" />
        </div>
    </div>
</section>

JS

var app = new Vue({
el: '#app',
data () {
    return{
        mainImage: null,
        expandedImage: null,
        expandedImageActive: false
    }
}
methods: {
    toggleMainImage (image){
        this.mainImage = image;
    },
    toggleExpand (image){
        image ? this.expandedImage = image: this.expandedImage = null;
        this.expandImageActive = !this.expandImageActive;
        console.log(this.expandImageActive)
    }
}
})