Принудительная отрисовка в v-for Vue

Есть такой v-for

        <transition-group
            name="cc"
            tag="div"
            v-masonry
         item-selector=".grid-item"
         column-width=".grid-sizer"
         gutter=".gutter-sizer"
         horizontal-order="true"
         transition-duration="0"
         stagger="0">
        <div v-masonry-tile class="grid-item" v-for="(img, index) in viewImages" :key="img.id">
            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>
            <article v-if="img.type === 2" v-html="img.text">
            </article>
            <a v-if="img.type === 1" @click="startGallery(index, $event)">
                <img-lazy :width="img.width" :height="img.height" :source="'/images/items/' + img.src"
                          :data-index="index" ref="thumbnails"></img-lazy>
            </a>
        </div>
    </transition-group>

viewImages используется как реактивный массив, при смене category в родителе я его чищу и заново помещаю все нужные элементы. НО, если div уже был отрисован, то анимация на него никак не применяется (логично, потому что он связан по key). Так вот вопрос, как заставить Vue заново отрисовать элемент, чтобы к нему применились анимации.

    .cc-enter {
    opacity: 0;
}
.cc-enter-to {
    opacity: 1;
}
.cc-enter-active {
    transition: opacity 1s ease;
    transition-delay: 1.1s;
}
.cc-leave {
    transform: scale(1);
}
.cc-leave-to {
    transform: scale(.1);
}
.cc-leave-active {
    transition: transform 1s ease;
}

Вот логика при смене категории, category является props

watch: {
        category: function (id) {
            this.viewImages = id === -1 ? this.images.slice() :
                this.images.filter(i => i.category_id === id);
        },
}