Vue.js auto transitions

Projects.vue

<template>

  <div class="container tiles" role="main">
    <div class="row" v-for="projectGroup in chunkedProjects">
        <div class="col-lg-4" v-for="project in projectGroup">

          <div class="flip">
              <div class="card" :class="{'flipped':project.flipped}">
                <div class="face front">Front</div>
                <div class="face back">Back</div>
              </div>
            </div>

        </div>
    </div>
  </div>

  <h2 class="pull-right">{{timeToReload}}</h2>

</template>

<script>
  import { shuffle, getProjects, getRandomInt } from '../utils/utils'

  export default {
    created: function () {
      console.log('[LC] Created, populate data')
      this.projects = shuffle(getProjects())
      this.timeToReload = 101
    },
    beforeCompile: function () {
      console.log('[LC] Before compile')
    },
    compiled: function () {
      console.log('[LC] Compiled')
      this.replaceOldest()
    },
    ready: function () {
      console.log('[LC] Ready')
    },
    beforeDestroy: function () {
      console.log('[LC] Before destroy')
    },
    methods: {
      replaceOldest: function () {
        this.timeToReload = 21
        // this.bringAllToFront()

        setTimeout(() => {
          var timer = setInterval(() => {
            if (this.timeToReload === 0) {
              this.projects = getProjects()
              // find oldests
              var selectedElem = getRandomInt(0, this.projects.length - 1) // for now randomly
              this.projects[selectedElem].flipped = true
              console.log('Selected: ' + selectedElem)

              this.timeToReload = 21
              clearInterval(timer)
              this.replaceOldest()
            }
            this.timeToReload -= 1
          }, 200)
        }, 2000)
      },
      bringAllToFront: function () {
        console.log('Bringin all to front')
        this.projects.forEach(function (project) {
          project.flipped = false
        })
      }
    },
    computed: {
      chunkedProjects: function () {
        var chunkedArray = []
        const chunk = 3

        for (let i = 0; i < chunk; i++) {
          chunkedArray.push(this.projects.slice(i * chunk, i * chunk + chunk))
        }

        return chunkedArray
      }
    },
    data () {
      return {
        projects: [],
        timeToReload: 0
      }
    }
  }
</script>

<style>
  .tiles {
    margin-top: 0px;
    margin-bottom: 40px;
  }

  .flip {
    perspective: 1000px;
    width: 400px;
    height: 200px;
    position: relative;
    margin: 50px auto;
    padding: 10px;
  }

  .flip .card {
    width: 100%;
    height: 100%;
    transition: 1s ease;
    transform-style: preserve-3d;
  }

	.flip .card.flipped {
    transform: rotateY(-180deg);
	}

  .flip .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px
  }

  .flip .card .front {
    position: absolute;
    z-index: 1;
    background: black;
    color: white;
    cursor: pointer;;
  }

  .flip .card .back {
    transform: rotateY(-180deg);
    background: white;
    color: black;
    cursor: pointer;
  }


</style>