title: Vue setTimeout filter issue
body: <p>I'm trying to implement notification system in Vue,
  I have Notifications component, where I store error messages to show.</p>
  
  <pre><code>    data(){
          return {
              alerts: {
                  error: []
              }
          }
      }
  </code></pre>
  
  <p>On an event in root component, I push msg in error array then I loop through them in Notification template. </p>
  
  <pre><code>            &lt;transition-group name="slide-fade"&gt;
                  &lt;Error v-for="(alert, index) in alerts.error" :key="index" :alert="alert" @removeError="removeError($event)"&gt;&lt;/Error&gt;
              &lt;/transition-group&gt;
  </code></pre>
  
  <p>in Error component I show this message along with the closing button. </p>
  
  <p>**Issue is that I want this message to close itself after 3 seconds. **</p>
  
  <p>This is my Error component:</p>
  
  <pre><code>&lt;template&gt;
  
      &lt;div class="alert alert-danger alert-dismissible" role="alert"&gt;
          {{alert.msg}}
          &lt;button ref="closeButton" type="button" class="close" @click.prevent="remove()"&gt;
              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ["alert"],
          methods: {
              remove(){
                  this.$emit("removeError", this.$props.alert);
              }
          },
          mounted(){
              setTimeout(() =&gt; {
                  this.remove();
              }, 3000);
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I emit event either on button click or after 3 seconds by setTimeout, event is caught back in Notification component, where I call method to filter this message from initial array:</p>
  
  <pre><code>        removeError(toRemove){
              this.alerts.error = this.alerts.error.filter(item =&gt; {
                  return item !== toRemove;
              });
          }
  </code></pre>
  
  <p>So button and Timeout share the same method. The thing is - when I have multiple errors pushed in my array and I use button, everything works perfectly, but while waiting for timeout, only some of those messages are being filtered (like 2 or 3 out of 5), while others remain in the array.</p>
  
  <p><strong>images of the result</strong></p>
  
  <p><a href="https://i.stack.imgur.com/yyDjm.png" rel="nofollow noreferrer">freshly pushed</a></p>
  
  <p><a href="https://i.stack.imgur.com/1hMO4.png" rel="nofollow noreferrer">after waiting for the timeout</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>the issue was made by key on Error component - Vue gets confused as key of the array gets recalculated when element is removed.</p>
  
  <p>Only it created another problem, because Vue does not accept non-primitive keys, it has to be either string or number. But I do have only the message in my string, which is obviously not unique as I can have 2 messages that are the same. Any suggestions? </p>