Смена стилей с задержкой

Я думаю, что проблема, с которой вы столкнулись, заключается в том, что контекст this в ваших тайм-аутах - это анонимная функция, а не родительский объект. Вы можете использовать либо стрелочные функции, либо явную привязку.

new Vue({
  el: '#app',
  data: {
    customEffect: ''
  },
  methods: {
    start: function() {
      setTimeout((function() { //BIND
        this.customEffect = 'blueborder';
      }).bind(this), 1000);
      setTimeout(() => { //OR =>
        this.customEffect = 'redtext';
      }, 2000);
    }
  }
});

.blueborder {
  border: 3px solid blue;
}

.redtext {
  color: red;
}

<script src = "https://npmcdn.com/vue/dist/vue.js"></script>
<div id = "app">
  <div>
    <button @click = "start">Start</button>
    <div :class = "customEffect">Some text</div>
  </div>
 </div>

РЕДАКТИРОВАТЬ Рекомендуемые учебные ресурсы

this может быть довольно сложным в JS. Если вы хотите узнать об этом больше, я настоятельно рекомендую соответствующую книгу Вы не знаете JS от Getify Это & прототипы объектов

Вы можете использовать boostrap, чтобы избежать создания кода, который уже имеет функции boostrap.

Или вы можете создать собственные классы css:

Например:

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.fast {
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@keyframes fadeIn {
from {
  opacity: 0;
}

to {
  opacity: 1;
}
}

.fadeIn {
animation-name: fadeIn;

html пример:

<div class = "animated fadeIn fast">
  <h1 class = "display-4">My app</h1>
  <p class = "lead">This is a great app!</p>
<div>

Вы можете использовать метод debounce lodash. https://lodash.com/docs/#debounce

 methods: {
        start: _.debounce(function() {
            this.customEffect = (this.customEffect == 'redtext')?'blueborder':'redtext';
        },1000)
      }

прежде чем вам нужно будет импортировать lodash