vueオブジェクトの属性値を変更した後、ページが再描画されない例

最近のプロジェクトはvueを使っていますが、オブジェクトの属性を何回か修正した後、ページは再レンダリングされません。シーンは以下の通りです。
HTMLページは以下の通りです

<template v-for="item in tableData">
    <div :class="{'redBorder':item.red}">
    <div>{{ item.name}}</div>
    <div>
     <el-button size="mini" @click="clickBtn(item.id)" type="info">  </el-button>
     <p class="el-icon-error" v-show="item.tip"></p>
    </div>
    </div>
</template>

jsの部分は以下の通りです

<script>
 export default {
  data() {
  return {
   tableData:[{id:0,name:"lili",red:false,tip:false}]
  }
  },
 
  methods: {
 clickBtn(id){
 this.tableData[id].red=true;
 this.tableData[id].tip=true; 
 }
 }
}
</script>

バインディングされたクラスは赤い枠を付けています。

.redBorder{
 border:1px solid #f00;
}

プロジェクトの中でbuttonをクリックした後、赤い枠とエラーボックスが現れません。debuggarを開けてみたら、ここまで運行していたのに実行していないことが分かりました。table Dataの中の値は変わっていません。この方法は以前使った時に役に立ちました。今回のプロジェクトが複雑で、具体的な原因は分かりません。
後は検索資料を使って$setに修正して修正値を設定します。jsは以下の通りです。

this.$set(this.tableData[id],"red",true);

しかし、まだ機能していません。debuggarを開けば、tableDataの値が修正されました。ページにレンダリングされていません。検索した資料も比較的に乱れていて、問題が解決できません。データのレベルが多すぎて、レンダー関数が自動更新されていないことが分かりました。手動で呼び出す必要があります。

this.$forceUpdate();

jsの完全コードは以下の通りです。

<script>
 export default {
  data() {
  return {
   tableData:[{id:0,name:"lili",red:false,tip:false}]
  }
  },
 
  methods: {
 clickBtn(id){
 this.$forceUpdate();
 this.$set(this.tableData[id],"red",true);
 this.$set(this.tableData[id],"tip",true); 
 }}}
</script>

以上は私が問題を解決する全過程です。
このvueはオブジェクトの属性値を修正した後、ページが再描画されない場合は、小編集が皆さんに提供した内容の全部を共有しています。参考にしていただければと思います。よろしくお願いします。