Почему в transitions-group анимация работает на элементе с неправильным индексом?

notifications (state) {
    return state.notifications.map((n, id) => ({ ...n, id }))
  }

<transition-group name="notification" class="notifications-wrapper">
      <div v-for="(notification, i) in notifications" :key="notification.id" class="notification shadow-lg" >
        {{notification}}
        <p class="headline4">{{notification.message}}</p>
        <button @click="closeNotification(i)">close</button>
      </div>
</transition-group>

SET_NOTIFICATIONS (state, notification) {
    state.notifications.push(notification)
}

FIND_AND_CLEAR_NOTIFICATION (state, i) {
    state.notifications.splice(i, 1)
  }