vue nuxt.js 動的にclassを変更したいが再描画されない

Question

<template>
<ul>
  <li v-on:click="onActive(n)" v-for="n of 6" :key="n" @class="{ 'is-active': activeItem === n }">Item {{n}}</li>
</ul>
</template>

<script lang="ts">
import { Component, Prop, PropSync, Vue } from 'vue-property-decorator'

@Component([])
export default class Tab extends Vue {
  @Prop({ type: Object, required: true })

  isSelected: number

  private onActive (index) {
    this.isSelected = index
    console.log(this.isSelected)
  }
}
</script>

一部省略してますが、上記のような形で、
クリックしたliのみにクラスを付与する仕組みを作りたいのですが、

console.log(this.isSelected)

の部分でちゃんとliをクリックした際にその行番号の数字がconsoleには表示されるのですが、
なぜか、

@class="{ 'is-active': activeItem === n }"

の部分がどうも発火してないようで、htmlが何も描画されません。
なにか設定が必要でしたでしょうか？
typeofでちゃんと型なども調べて合わせても見たりしていろいろ試したのですが、
どうもライフサイクルのタイミングなのか、再描画が行われていないような感じがします。

ご教授お願い致します。