Я изменяю значение свойства объекта с false на true, но мое условие v-show не отражает это

Question

Каждый объект в массиве reviews имеет свойство с именем isActive, которое по умолчанию имеет значение false.Нажатие на элемент «Показать больше» <p> переключает isActive для этого конкретного элемента массива с ложного на истинное и наоборот, но по какой-то причине элементы, которые должны появляться и исчезать в зависимости от значения этого свойства, не являютсяработает как задумано.

console.log (this.reviews) в моей функции печатает обновленный массив, и все, кажется, в порядке.Элементы, на которые щелкнул пользователь, изменили свойство isActive, однако v-if не отражают этого.

Я что-то не так делаю?

<template>
<div v-for='(review, index) in reviews' class="review-container">
    <div class="review-info-container">
        <p>{{ review.text.slice(0,240) }}
            <span class='read-more-dots' v-show='!review.isActive' v-if='review.text.length > 240'>...</span>
            <span v-show='review.isActive' class='extra-text'>{{ review.text.slice(240) }}</span>
        </p>
        <p v-show='!review.isActive' @click='showMoreLess(index)'>Show more</p>
        <p v-show='review.isActive' @click='showMoreLess(index)'>Show less</p>
    </div>
</div>
</template>

И мойshowMoreLess() функция:

showMoreLess(index){
    if (this.reviews[index].isActive) {
        this.reviews[index].isActive = false;
    } else {
        this.reviews[index].isActive = true;
    }
    console.log(this.reviews)
}