Estoy tratando de agregar animaciones a un juego de tik tac toe, donde cuando cambia un elemento en una lista, como se agrega una X o se agrega una O, se reproduce una animación agregándolo.

Esto comienza como: list: ["", "", "", "", "", "", "", "", ""]

el código de la placa es el siguiente:

 <table> <tr> <td id="0" v-on:click="addX(0)">{{list[0]}}</td> <td id="1" class="vert" v-on:click="addX(1)">{{list[1]}}</td> <td id="2" v-on:click="addX(2)">{{list[2]}}</td> </tr> <tr> <td id="3" class="hori" v-on:click="addX(3)">{{list[3]}}</td> <td id="4" class="vert hori" v-on:click="addX(4)">{{list[4]}}</td> <td id="5" class="hori" v-on:click="addX(5)">{{list[5]}}</td> </tr> <tr> <td id="6" v-on:click="addX(6)">{{list[6]}}</td> <td id="7" class="vert" v-on:click="addX(7)">{{list[7]}}</td> <td id="8" v-on:click="addX(8)">{{list[8]}}</td> </tr> </table>

addX(num) es una función que agrega una "X" al índice numérico en la lista.

.hori y .vert son solo clases para mostrar las líneas del tablero.

Traté de usar

 <transition-group name="custom-classes-transition" enter-active-class="animate__animated animate__bounceIn" leave-active-class="animate__animated animate__bounceOutRight" tag = "td" >

pero no funcionó, no se reproduciría ninguna animación.

Muchas gracias,