SetInterval работает только один раз при изменении стиля в VueJs

я пытался запустить этот простой код, который запускает эффект с помощью кнопки. Эффект должен чередовать класс "highlight" или "shrink" при каждом новом тике setInterval (прикрепите соответствующий класс к div с идентификатором "effect" ниже), вот html:

<script src = "https://npmcdn.com/vue/dist/vue.js"></script>

    <div id = "exercise">
      <!-- 1) Start the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below) -->
      <div>
        <button @click = "startEffect">Start Effect</button>
        <div id = "effect" :class = "effectClasses"></div>
      </div>

вот CSS:

 #effect {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

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

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

и это файл JS:

    new Vue({
  el: '#exercise',
  data: {
        effectClasses :{
    highlight:false,
    shrink:true}
  },
  methods: {
    startEffect: function() {
    var vm = this;
    setInterval(function(){
       console.info('higlight 1:'+ vm.effectClasses.highlight);
        vm.effectClasses.highlight = !vm.effectClasses.highlight;      console.info('higlight 2 :'+ vm.effectClasses.highlight);

console.info('shrink 1 :' + vm.effectClasses.shrink);      
      vm.effectClasses.shrink =  !vm.effectClasses.shrink;
console.info('shrink 2 :' +vm.effectClasses.shrink);

    }, 1000);
    }
  }
});

журналы консоли работают нормально, но стиль не меняется каждую секунду, что странно