title: How to properly splice array item by id
body: <p>I have a simple popup component that get's called on a click event in some places in my app. The popups get created on click and are pushed in an array, that is later forEach-ed and displayed so that when the user clicks on a button multiple times multiple popups are displayed. The success ones disappear and the red ones disappear once someone clicks on the X, I achieve that by splicing them from the array, but if a user generated 5 popups and clicks the X the next popup gets closed, not the one that the user has clicked on, so it seems that I am not targeting the specific popup order in the array but the next, how can I properly target the exact clicked modal so that it gets closed and not the one that is next in line, what am I doing wrong here? How should I splice the array properly so that I target the exact pushed modal and not the rest?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="main"&gt;
      &lt;div 
        v-for="item in array" 
        :key="item.id"
        :class="['popUp', `popUp--type--${item.popUpTypeType}`]" 
      &gt;
        &lt;div class="popUp-side"&gt;
          &lt;p class="exclamation-mark"&gt;!&lt;/p&gt;
        &lt;/div&gt;
        &lt;h5 class="popUp-message"&gt;{{item.message}}&lt;/h5&gt;
        &lt;div class="popUp-side"&gt;
          &lt;p class="closing-x" @click="closeMessage" v-if="item.popUpTypeType === 'danger'"&gt;X&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
     name: 'popUp',
     data: () =&gt; ({
      array:[],
    }),
    methods: {
      removepopUpType() {
         var self = this;
         var id = Math.round( Math.random()*1e13 );
         var index = self.array.map(x =&gt; {
         return x.id;
         }).indexOf(id);
          self.array.splice(index, 1);
      },
      callpopUpType(obj){
        var newpopUpType = {
              popUpTypeType: obj.type,
              message: obj.message,
              id: obj.id
            };
        if(obj.type === 'success'){
         setTimeout(this.removepopUpType, 2000)
        }
        this.array.push(newpopUpType);
      },
  
      closeMessage() {
      this.removepopUpType()
      },
  
    },
    created() {
      this.$root.$on('call-popUp', this.callpopUpType);
    },
    destroyed(){
      this.$root.$off('call-popUp', this.callpopUpType);
    }
  }
  &lt;/script&gt;
  </code></pre>