<div id="app">
  <ul class="list" ref="list">
    <li class="item active"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
  <button @click="chengeActive">CLick Me</button>
</div>

.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item {
  width: 100%;
  height: 50px;
  background: yellow;
  margin-bottom: 10px;
  transition: background-color .5s;
}

.item.active {
  background-color: red;
}

const app = new Vue({
  el: '#app',
  methods: {
    chengeActive() {
      let index = 0;
      const items = this.$refs.list.querySelectorAll('.item');
      items.forEach((el, i) => {
        if(el.classList.contains('active')) {
          el.classList.remove('active');
          items.length <= i + 1 ? index = 0 : index = i + 1;
        }
      });
      items[index].classList.add('active');
    }
  }
});