How to make transition opacity work when element is removed?

Question

Hi I made the following notification component for my vue app where I am looping through errors and success messages from vuex store. I am removing them after 3 seconds from the array. However this means the transition does not gets applied since the element gets removed from the DOM. How can I make that work? Please help me.

<template>
  <div
    id="toast-container"
    class="fixed z-50 top-20 right-3"
  >
    <div
      v-for="(error, index) in errors"
      :key="error+index"
      :class="`${error ? 'opacity-1 visible' : 'opacity-0 invisible'}
      toast toast-error flex items-center transition-opacity`"
    >
      <img
        svg-inline
        src="@/assets/icons/alert_triangle.svg"
        alt="alert icon"
      >
      <div class="pl-2">
        <div class="toast-title">
          Der er sket en fejl!
        </div>
        <div class="toast-message">
          {{ error }}
        </div>
      </div>
    </div>
    <div
      v-for="(message, index) in successMessages"
      :key="message+index"
      :class="`${message ? 'opacity-1 visible' : 'opacity-0 invisible'}
      toast toast-success flex items-center`"
    >
      <img
        svg-inline
        src="@/assets/icons/shield_check.svg"
        alt="alert icon"
      >
      <div class="pl-2">
        <div class="toast-title">
          Succes
        </div>
        <div class="toast-message">
          {{ message }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Notifications',
  computed: {
    errors() {
      return this.$store.state.global.errors
    },
    successMessages() {
      return this.$store.state.global.successMessages
    },
  },
  watch: {
    errors: {
      handler() {
        setTimeout(() => {
          this.removeError(0)
        }, 3000)
      },
      deep: true,
    },
    successMessages: {
      handler() {
        setTimeout(() => {
          this.removeSuccessMessage(0)
        }, 3000)
      },
      deep: true,
    },
  },
  methods: {
    removeError(index) {
      this.$store.commit('removeError', index)
    },
    removeSuccessMessage(index) {
      this.$store.commit('removeSuccessMessage', index)
    },
  },
}
</script>