解決VUE下動態改變CSS樣式不生效

// lot component
<student-chip
:key="student.id" 
:isLotted="currStudentId===student.id" 
 v-for="student in students" 
:student="student" 
:layout="layout">
</student-chip>

目的是抽簽選一個學生答題，具體實現通過計時器迭代隨機數，迭代時間逐漸增長實現視覺效果，在這里isLotted是傳給自組件的實現css變化的屬性，lot是子組件中的css類名,如下圖

// studentchip component
<div :class="{'lot':isLotted,'lotted': wasLotted}">
<div-if="layout === 'large'"></div>

    抽簽方法在父組件中提供，如下圖

computed: {
    people: function () {
      return _.clone(this.students)
    }
  },
  methods: {
    minusPeopleNum: function () {
      return this.people.length--
    },
    random: function () {
      return _.random(0, this.people.length - 1)
    },
    lot: function () {
      var num = this.random()
      var lottedPeople = this.people[num]
      this.currStudentId = lottedPeople.id
      this.times++
      if (this.times < 50) {
        setTimeout(this.lot, 50 + (this.times * 10))
      } else {
        this.times = 0
        this.people.splice(num, 1)
        this.minusPeopleNum
        lottedPeople.isLotted = true
      }
      return lottedPeople
    }
  }

    可以實現動態改變CSS樣式，但是發現不刷新的話CSS樣式不改變，但是lot方法是在跑的

    解決辦法是：在父組件中刪除與子組件中同名的css類名

（按理說我在組件中寫的css都是scoped，不應該影響組件間的，但是結果決定這scope似乎有值得商榷之處 ）

    歡迎各位大佬不吝賜教。