How to undo deletion from v-for?

Question

Vue.js

Hello, I have a messenger, (a test message is created by interval)
The messenger adds a message without animation, when you click on the message, it deletes the message, it deletes the message by timer, the timer can be reset with @mouseenter / resumed with @mouseleave.
However, since messages are deleted with animation, is it possible to make it so that if the deletion animation starts (by a timer or by a click, but the user wants to finish reading it) after @mouseenter - the message is not deleted, and the animation back makes it not transparent
Messenger code

<template>
  <div class="messenger">
    <transition-group name="msgAnimation" tag="div">
      <div
        v-for="obj in messages"
        :key="obj.key"
        class="block"
        @click="delMsg(obj)"
        @mouseenter="delMsgTimeout(obj)"
        @mouseleave="addMsgTimeout(obj)"
      >
        <div class="wrapper">
          <div class="text">{{ obj.msg }}</div>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "Messenger",
  data() {
    return {
      messages: [],
      i: 0,
    };
  },
  methods: {
    delMsg(el) {
      const i = this.messages.indexOf(el);
      if (i !== -1) {
        this.delMsgTimeout(el);
        this.messages.splice(i, 1);
      }
    },
    addMsgTimeout(el) {
      el.timeout = setTimeout(() => {
        this.delMsg(el);
      }, 10000);
      console.log("addMsgTimeout");
    },
    delMsgTimeout(el) {
      clearTimeout(el.timeout);
      el.timeout = null;
    },
  },
  mounted() {
    window.authorizationMessage = function (msg) {
      const obj = { key: ++this.i, msg: msg, timeout: undefined };
      this.messages.push(obj);
      this.addMsgTimeout(obj);
    }.bind(this);

    setInterval(
      function () {
        window.authorizationMessage(this.i);
      }.bind(this),
      2500
    );

    window.authorizationMessage(
      "Британия готовится к полной отмене антивирусных ограничений, во Франции начнут пускать в бары и кинотеатры только со справками, а в США предупреждают о новых побочных эффектах одной из вакцин. Главное о коронавирусе на сегодня."
    );
  },
};
</script>

<style lang="scss" scoped>
.msgAnimation-leave-active {
  transition: all 2s;
}

.messenger {
 position: absolute;
    right: 1vmin;
    bottom: 1vmin;
    width: 25vmin;
    height: 50vmin;

    overflow-x: hidden;
    overflow-y: auto;
    $scroll-width: 1vmin;
    &::-webkit-scrollbar {
      width: $scroll-width;
      height: 100%;
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: white;
      border-radius: $scroll-width / 2;
    }
  
  
  display: flex;
  flex-direction: column-reverse;

  $background: linear-gradient(
    rgba(46, 21, 21, 0.432),
    rgba(87, 27, 27, 0.486)
  );
  $color: white;

  .block {
    background: $background;
    color: $color;
    height: 9vmin;
    font-size: 2vmin;
    box-sizing: border-box;

    width: 100%;
    margin-top: 1.1vmin;
    word-wrap: break-word;

    display: flex;
    justify-content: center;
    align-items: center;

    .wrapper {
      max-height: 100%;

      overflow-x: hidden;
      overflow-y: auto;
      $scroll-width: 0.5vmin;
      &::-webkit-scrollbar {
        width: $scroll-width;
        height: 100%;
        background-color: transparent;
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(42, 29, 29, 0.95);
        border-radius: $scroll-width / 2;
      }

      .text {
        margin: 1vmin;
      }
    }
    &:first-child {
      margin-top: 0;
    }
  }
}

.msgAnimation-leave-to {
  opacity: 0;
}
</style>