Vue: изменить класс со значением переменной в setInterval

Question

Я учусь Vue JS.Я хочу изменить класс, используя setInterval.Но не может передать изменяющееся значение Method в Computed Property.Через две секунды класс изменится автоматически с измененным значением "changeColor"

Мой код:

HTML:

<div>
    <button @click="startEffect">Start Effect</button>
    <div id="effect" :class="myClass"></div>
</div>

CSS:

.highlight {
  background-color: red;
  width: 200px !important;
}

.shrink {
  background-color: gray;
  width: 50px !important;
}

Vue JS:

new Vue({
    el: '#exercise',
    data: {
        changeColor: false
    },

    methods : {
        startEffect: function() {
            setInterval(function(){
                 this.changeColor = !this.changeColor;
                 //alert(this.changeColor);
            }, 2000);

            //alert(this.changeColor);
        }
    },

    computed: {
        myClass: function() {
            return {
                highlight: this.changeColor,
                shrink: !this.changeColor
          }
        }
    }
})

Answer 1

привязать вашу функцию к компоненту ...

 setInterval(function(){
                 this.changeColor = !this.changeColor;         
            }.bind(this), 2000);

и тогда вы можете сделать ...

<div id="effect" :class="[changeColor?'highlight':'shrink']"></div>