Rendering Lists in VueJs

A demo of rendering lists in VueJs using the v-for directive - http://coligo.io

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="vue-instance">
  <transition-group tag="div" name="fade" class="uk-grid">
    <div class="uk-width-1-2" v-for="item in thumbs" :key="item.id">
      <div class="item">
        <i class="fa" :class="item.icon" aria-hidden="true"></i>
        <h3>{{item.name}}</h3>
      </div>      
    </div>
  </transition-group>
</div>

CSS

.item {
  text-align: center;
  font-size: 20px;
}
.fade-enter-active {
  display: none;
}
/* Animations */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

JavaScript

var vm = new Vue({
  el: '#vue-instance',
  data: {
  	index: 0,
    thumbs: [],
    thumbsData: [
      {id: 0, name: 'car', icon: 'fa-car'},
      {id: 1, name: 'university', icon: 'fa-university'},
      {id: 2, name: 'bicycle', icon: 'fa-bicycle'},
      {id: 3, name: 'briefcase', icon: 'fa-briefcase'},
      {id: 4, name: 'calculator', icon: 'fa-calculator'},
      {id: 5, name: 'calendar', icon: 'fa-calendar'}
    ]
  },
  methods: {
        loadFlipper: function () {               	
        	this.thumbs = this.thumbsData.slice(0, 2);
        	this.index = 2;
        	this.animateFlipper(-1);
      },      
      animateFlipper: function (i) {
        if (i > -1) {
          var newThumbs = this.thumbs.slice();
          newThumbs[i] = this.thumbsData.slice(this.index, this.index + 1)[0];
          this.thumbs = newThumbs;
          this.index = (this.index + 1) === this.thumbsData.length ? 0 : (this.index + 1);
        }

        i = i === 1 ? 0 : (i + 1);
        //call animate method each after 8 seconds to update the next icon/title
        var _that = this;
        setTimeout(function() {
          _that.animateFlipper(i)
        }, 2000);              
    }
  },
  created: function () {
      //initiate change of thumbs
      this.loadFlipper()
  }  
});