Why are notifications crookedly removed?

Question

Vue.js

I am making a notification plugin, and the essence is this:
1. The function for adding a notification is called
2. The notification is added to the array
3. Vue renders an array with notifications, causing a timeout along the way
4. After the time expires, the notification deletes itself
Wrote the code, but for some reason it works crookedly. At first, notifications are deleted like normal, but then they start to be deleted in a scatter and in batches. Why?
Code:
https://codesandbox.io/s/eloquent-pasteur-xhzge?fi...

Answer 1

it was necessary to add timeout id and check it:

setNotification(notification){
      const _instance = this
      this.notifications.push({id: this.notificationsID, timeoutID: undefined, self: function () {
          if(this.timeoutID){
            return notification
          }
          this.timeoutID = setTimeout(() =>{
            const index = _instance.notifications.findIndex(obj => obj.id === this.id)
            _instance.notifications.splice(index, 1)
          }, 5000)
          console.log('timeout')
        return notification
        }})
      this.notificationsID++
    }