nextTick中的Vue错误会打破简单的按钮单击事件

Question

我从Udemy课程学习VueJS。我正在进行其中一项练习，非常简单。但是，我一直面临着一个问题，即Vue错误输出并且仅在打破之前应用了一次点击的预期更改。我在发布之前检查了我发现的每个相关的SO帖子，以及课程的Q＆amp; A部分，所以很明显我做了一些小/愚蠢的错误但找不到的地方。

期望：点击＆＃34;开始效果＆＃34;按钮，并以1秒为间隔查看添加到.highlight div的#effect类。

发生了什么：点击＆＃34;开始效果＆＃34;按钮，并看到在vue错误输出之前添加的.highlight类，其中包含一个无用的（对我而言）错误消息。

＆＃13;

＆＃13;

'use-strict';

document.addEventListener('DOMContentLoaded', () => {
  const vm = new Vue({
    el: '#exercise',
    data: {
      hasEffect: false
    },
    computed: {
      effectClasses: function() {
        return {
          highlight: this.hasEffect
        };
      }
    },
    methods: {
      startEffect: function() {
        var that = this;
        console.log(that.hasEffect);
        setInterval(function() {
          that.hasEffect = !that.hasEffect;
          console.log(that.hasEffect);
        }, 1000);
      }
    }
  });
});

＆＃13;

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

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

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

＆＃13;

<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>
</div>

＆＃13;

＆＃13;

＆＃13;

输出的错误：