Проблема с реактивностью

const app = new Vue({
  el: '#app',
  props: {
    timeout: {
      type: Number,
      default: 5000
    }
  },
  data() {
    return {
      currentElement: 0,
      value: null,
      fadeOut: null,
      runProgress: null,
      animate: false,
      firstItem: [{
          class: 'top-left',
        },
        {
          class: 'top-center',
        },
        {
          class: 'top-right',
        },
        {
          class: 'midle-left',
        },
        {
          class: 'midle-center',
        },
        {
          class: 'midle-right',
        },
        {
          class: 'footer-left',
        },
        {
          class: 'footer-center',
        },
        {
          class: 'footer-right',
        },
      ],
      color: 0,
      changColor: [{
          class: 'blue-color',
          img: 'img/infocircle.png'
        },
        {
          class: 'green-color',
          img: 'img/accept.png'
        },
        {
          class: 'grey-color',
          img: 'img/infocircle.png'
        },
        {
          class: 'orange-color',
          img: 'img/warning.png'
        },
        {
          class: 'red-color',
          img: 'img/X.png'
        },
      ],
      messages: []
    }
  },
  methods: {
    setElement() {
      this.currentElement += 1
    },
    changeCollors() {
      this.color += 1
    },
    changeFadeOut: function () {
      this.fadeOut = `fadeOut ${this.timeout}ms linear forwards`
      this.runProgress = `runProgress ${this.timeout}ms linear forwards`
      this.animate = true
    },
    onAnimationEnd: function(){
      setTimeout(() => this.animate = false, 1000);
    },
    changeItemss() {
      let timeStamp = Date.now().toLocaleString();
            this.messages.unshift(
              {id: timeStamp}
            )
      this.changeFadeOut();
    },
    hideNotification() {
      let vm = this;
      if (this.messages.length) {
        setTimeout(function () {
          vm.messages.splice(vm.messages.length - 1, 1)
        }, vm.timeout)
      }
    }
  },
  watch: {
    messages() {
      this.hideNotification()
    }
  },
  mounted() {
    this.hideNotification()
  }
});

@import url(nulstyle.scss);
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900);

.first-item {   
    display: flex;
    align-items: center;
    height: 8.156vh;
    width: 28.242vw;
    opacity: 0.7;
    filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.25));
    background: linear-gradient(90.49deg, #FF0000 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
    box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(1.389vh);
    border-radius: 2.389vh;
    overflow: hidden; 
    position: relative; 
    margin-bottom: 0.8vh;
}
 
.messages_list {
    display: flex;
    flex-direction: column-reverse;
    position: fixed;
    top: 80px;
    right: 16px;
 }

.first-item__img {
    height: 5.556vh;
    width: 5.556vh; 
    padding: 1.189vh 1.389vh 0 1.389vh;
}

.first-item__text {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 1.8370vh;
    line-height: 1.3;
    display: flex;
    align-items: center;
    letter-spacing: -0.05em;
    color: #FFFFFF;
    text-shadow: 0px 0.4px 4px rgba(0, 0, 0, 0.5);
    padding-top: 2.189vh;
    margin-top: 0;
}
 
 .first-item__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.5vh;
    z-index: +1;
    background-color: rgba(255, 255, 255, 0.7);
    transform-origin: left;
    animation: scale-x-frames linear 1 forwards;
    .__toast--rtl & {
      right: 0;
      left: unset;
      transform-origin: right;
    }
 }

.first-item__progress {
    -webkit-animation: runProgress linear forwards;
    -moz-animation: runProgress linear forwards;
    -o-animation: runProgress linear forwards;
    -ms-animation: runProgress linear forwards;
    animation: runProgress linear forwards;
}

@-webkit-keyframes fadeOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; -webkit-transform: translateY(0px);}
    100% { opacity: 0; -webkit-transform: translateY(-25px);}
}
 
@-webkit-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 100%; }
}
 
@-moz-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 100%; }
}
 
@-o-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 100%; }
}
 
@-ms-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 100%; }
}
 
@keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 100%; }
}

.fade { 
    &-enter {
      transform: translateX(120px);
      opacity: 0;
    }
    &-enter-active {
      transition: all .6s ease;
    }
    &-enter-to {
      opacity: 1;
    }
    &-leave {
      height: 20px;
      opacity: 1;
    }
    &-leave-active {
      transition: transform .6s ease, opacity .6s, height .6s .2s;
    }
    &-leave-to {
      height: 0;
      transform: translateX(120px);
      opacity: 0;
    }
    &-move {
      transition: transform .6s ease;
    }
 }

.top-left {
    position: relative;
    left: 10px;
}
 
.top-center {
    position: relative;
    left: calc(50% - 28.242vw / 2);
}

.top-right {
    position: relative;
    left: calc(99% - 28.242vw);
}

.midle-left {
    position: relative;
    top: calc(50% - 8.156vh);
}

.midle-center {
    position: relative;
    top: calc(50% - 8.156vh);
    left: calc(50% - 28.242vw / 2);
}

.midle-right {
    position: relative;
    top: calc(50% - 8.156vh);
    left: calc(99% - 28.242vw);
}

.footer-left {
    position: relative;
    top: calc(99% - 8.156vh);
}

.footer-center {
    position: relative;
    top: calc(99% - 8.156vh);
    left: calc(50% - 28.242vw / 2);
}

.footer-right {
    position: relative;
    top: calc(99% - 8.156vh);
    left: calc(99% - 28.242vw);
}

.blue-color {
    background: linear-gradient(90.49deg, #007EFF 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.green-color {
    background: linear-gradient(90.49deg, #6FDE00 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.grey-color {
    background: linear-gradient(90.49deg, #BBBBBB 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.orange-color {
    background: linear-gradient(90.49deg, #FF6B00 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.red-color {
    background: linear-gradient(90.49deg, #FF0000 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="wraper">
      <button @click="setElement">Change position</button>
      <button @click="changeCollors">Color</button>
      <button @click="changeItemss">Items</button>
      <transition-group name="fade" class="__mesages_list">
         <section class="first-item" :class="[firstItem[currentElement].class, changColor[color].class]" v-if='animate' v-bind:style="{ animation: fadeOut }"  v-on:animationend="onAnimationEnd" v-for="message in messages"
         :key="message.id">
            <img class="first-item__img" src="img/infocircle.png" :src="changColor[color].img">
            <p class="first-item__text">{{message.id}}
            <div class="first-item__progress" v-if='animate' v-bind:style="{ animation: runProgress }"  v-on:animationend="onAnimationEnd"></div>
         </section>
      </transition-group>
   </div>