VueJs problem z animacja

Witam wlasnie ucze sie VueJS chcialem zrobic prosty Slider ktory bedzie sie fajnie animowal lub na razie jakkolwiek... Ale Animacja nie dziala czy ktos mogl by pomoc mi to ogarnac? z Gory dziekuje

<template>
  <div>
    <div class="quotes-section">
      <div class="quotes-inner">
      <transition name="fadeAnim">
        <span v-show="animation" v-on:mouseover="stop" v-on:mouseout="start" class="quote-text">{{ active }}</span>
      </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Quotes',
  props: {
  },
  data: function(){
    return {
      mockData: ['"Cytat1”.','Cytat2'],
      active: null,
      index: 0,
      timer: null,
      animation: false
    }
  },
  methods: {
    next: function(){
      this.index += 1;
    },
    start: function(){
      this.timer = setInterval(() => {
          this.animation = !this.animation;
          this.active = this.mockData[this.index++];
          if(this.index >= this.mockData.length){
            this.index = 0;
          }
      }, 3000);
    },
    stop: function(){
      clearTimeout(this.timer);
      this.timer = null;
    }
  },
  created(){
    this.start();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.quotes-section{
  height: 50vh;
  width: 100%;
  background-color: black;
  border-top: 3px solid green;
  border-bottom: 3px solid green;
  position: relative;
}

.prev-arrow{
  color: green;
  position: relative;
  top: 50%;
  margin-top: -50px;
  padding: 20px;
  font-size: 30px;
}

.next-arrow{
  color: green;
  position: relative;
  top: 50%;
  margin-top: -50px;
  padding: 20px;
  font-size: 30px;
}

.quotes-inner{
  text-align: center;
  position: relative;
  top: 40%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 80%;
  margin: auto;
}

.quote-text{
  font-size: 25px;
  color: white;
}

@media only screen and (max-width: 900px ){
  .quote-text{
    font-size: 1.6vh;
  }

  .quotes-inner{
    top: 20%;
  }
}

.fadeAnim-enter{
  transition: scale(0.5);
}
.fadeAnim-leave-to{
  transition: scale(1);
}
</style>