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)
    }
}
})