vue2 выделить обновленные строки

Question

Я ищу способ выделить обновленные строки для пользователя в vue2. В настоящее время я генерирую таблицу с помощью v-for:

<table class="table temptable">
      <tbody v-if="this.tempItems">
      <tr>
          <th>SKU</th>
          <th>QTY</th>
      </tr>
      <tr v-for="item in this.tempItems" :class="{ rowFlash: item.rowUpdated }">
      <td data-title="SKU">@{{ item.sku }}</td>
      <td data-title="QTY">@{{ item.qty }}</td>
      </tr>
      </tbody>
</table>

Я пробовал переход, переходную группу. Самое близкое, что у меня есть, это использование :class="{ rowFlash: item.rowUpdated }" к <tr>, но я не нашел способа получить окончательный результат.

В конечном итоге я ищу строку, которая будет выделена (background-color: red) либо при вставке, либо при обновлении, а затем исчезнет через несколько секунд назад в белый цвет.

EDIT

Мой код JS выглядит следующим образом:

this.vm.tempItems[response.data.sku].qty += 1;

Это инициируется через API сканера. Поэтому, когда сканирование запускается, оно отправляет код в сценарий и возвращает SKU продукта. Экземпляр vue запускается только на этой странице моего сайта, поэтому в данный момент я не использую шаблон vue. Все это JS выполняется в скрипте нижнего колонтитула страницы.

РЕДАКТИРОВАТЬ 2

У меня что-то работает, но я не думаю, что это отличное решение!

JS

this.vm.tempItems[response.data.sku].rowUpdated = false;
setTimeout(function(){ this.vm.tempItems[response.data.sku].rowUpdated = true; }, 50);

CSS

.rowRed{
    background: #ee815b;
}

.rowFade {
    background: white !important;
    transition: 1.5s !important;
}

Изменяя класс строки с помощью :class="{ rowFlash: item.rowUpdated }", а затем немедленно возвращая его обратно, я получаю эффект затухания красной подсветки. Это кажется грязным, и мне не нравится идея иметь setTimeout там. Однако без тайм-аута я не уверен, как заставить атрибут vue изменить значение на false после того, как ему присвоено значение true?