Поменять иконку(mdi) при клике Vue3

У меня есть таблица и в ней иконки вот одна из них:

      <template v-slot:item.actionRun="{ item }">
       <v-icon @click="() => {showAlertAndToggleAction(item)}">
          {{ item.isRunning ? 'mdi-play' : 'mdi-stop' }}
       </v-icon>
     </template>

Есть js код который при клике на иконку должен её менять и выводить alert:

   toggleAction(item) {
  this.$set(item, 'isRunning', !item.isRunning);
  this.$forceUpdate();
  alert('второй' + item.isRunning);
  console.log('Toggling action for item', item.id);},

и его продолжение

showAlertAndToggleAction(item) {
  alert("первый"+ item.isRunning);
  this.toggleAction(item);
  alert('второй'+ item.isRunning);
},

При клике, выводится alert, но иконка не меняется, почему так и как это можно исправить?