vuesax The data of tables and buttons made with vue do not change. And when I click on the table, I get an error

Question

I used vuesax.I'm using vuesax tables, but I have two problems.

---

First, there is a green button on the table. When I press this button, the button value should change, but it doesn't. However, the value changes are printed well in the console. html doesn't change. When you refresh, it changes.

---

Second, even if you press the buttons on pages 2, 3, and 4, only the buttons on page 1 work.I gave all the IDs differently or tried 'display none', but only the green button on the first page of the table always works.

---

---

Code referenced ▼

   <template>
        <component-to-re-render :key="componentKey" />
    </template>
    
export default {
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    forceRerender() {
      this.componentKey += 1
    }
  }
}

My code html ▼

<template>
  <div :key="componentKey">
   <vs-table class="rtable blank" id="repair" cellspacing="0">
  <template #thead>
    <vs-tr>
      <vs-th> <p>설비코드</p></vs-th>
      <vs-th> <p>교체일</p> </vs-th>
      <vs-th> <p>소모품항목</p></vs-th>
      <vs-th> <p>규격</p></vs-th>
      <vs-th> <p>남은 점검일</p></vs-th>
      <vs-th> <p>교체자</p></vs-th>
      <!-- <vs-th> <p>비고</p></vs-th> -->
    </vs-tr>
  </template>
  <template #tbody>
    <vs-tr
      :key="i"
      v-for="(exchangedatasT, i) in $vs.getPage(exchangedatas1, page, max)"
      :data="exchangedatasT"
      class="tableColor"
      :class="{
        lastDay: todayGo2 !== todayGo2Go,
      }"
    >
      <vs-td
        ><p>{{ exchangedatasT.Machinecd }}</p></vs-td
      >
      <vs-td
        ><p>{{ exchangedatasT.Exchangedt }}</p></vs-td
      >
      <vs-td
        ><p>{{ exchangedatasT.ExchangeItemnm }}</p></vs-td
      >
      <vs-td
        ><p>{{ exchangedatasT.Specnm }}</p></vs-td
      >

      <vs-td
        class="pointer data99999"
        :id="[`e${i}${page}`]"
        @click="click2(i)"
        v-if="exchangedatasT.CntDay == 99999"
      >
        <p>
          <span>교체 완료</span>
        </p>
      </vs-td>
      <vs-td
        class="pointer data20"
        :id="[`e${i}${page}`]"
        @click="click2(i)"
        v-else-if="exchangedatasT.CntDay > 20"
      >
        <p>
          <span>점검 완료 : </span>
          <span>{{ exchangedatasT.CntDay }}</span>
        </p>
      </vs-td>
      <vs-td
        class="pointer data10"
        :id="[`e${i}${page}`]"
        @click="click2(i)"
        v-else-if="exchangedatasT.CntDay > 10"
      >
        <p class="">
          <span>미점검 : </span>
          <span>{{ exchangedatasT.CntDay }}</span>
        </p>
      </vs-td>
      <vs-td
        class="pointer dataElse"
        :id="[`e${i}${page}`]"
        @click="click2(i)"
        v-else
      >
        <p>
          <span>미점검 : </span>
          <span>{{ exchangedatasT.CntDay }}</span>
        </p>
      </vs-td>

      <vs-td
        ><p>{{ exchangedatasT.ExchangeUser }}</p></vs-td
      >
      <!-- <vs-td>{{ exchangedatasT.Remark }}</vs-td> -->
    </vs-tr>
  </template>
  <template #footer>
    <vs-pagination
      v-model="page"
      :length="$vs.getLength(exchangedatas1, max)"
    />
  </template>
</vs-table>
  </div>
</template>

My code js ▼

<script>
import Vue from "vue";
import Vuesax from "vuesax";
import "vuesax/dist/vuesax.css"; //Vuesax styles
import axios from "axios";
Vue.use(Vuesax, {
  // options here
});
export default {
  props: {
    Rhatn3: String, 
  },
  data: function () {
    return {

      page: 1,
      max: 10,

      Machinecd: "",
      Exchangedt: "",

      componentKey: 0,
    };
  },
  watch: {
    componentKey(newMsg) {
   
      console.log("New msg: " + newMsg);
    },
  },
  created() {
    const vm = this;

    
    axios
      //소모품
      .post("", {
        Machinecd: "Test",
        Exchangedt: vm.todayGo2,
      })
      .then((response) => {
        console.log(vm.todayGo2);
        vm.datas = response.data;
        const entries = Object.values(response.data);
        console.log(JSON.stringify(entries));
        console.log(entries);

        vm.exchangedatas1 = entries;

 
        for (let i = 0; i < Object.keys(response.data).length; i++) {
          // console.log(response.data);

          this.ExchangeUser = response.data[i].ExchangeUser;
          this.CntDay = response.data[i].CntDay;
          if (this.currentNumber2 == i) {
            axios
              .post("", {
                Machinecd: vm.datas[i].Machinecd,
                ExchangeItem: vm.datas[i].ExchangeItem,
                Spec: vm.datas[i].Spec,
                ExchangeUser: vm.Rhatn3,
              })
              .then((response) => {
                console.error(response);
              })
              .catch((error) => {
                console.error(error);
              });
            // this.$router.go();
          }
          this.currentNumber2 = i;
        }
      })
      .catch((error) => {
        console.error(error);
      });
    axios;
  },

  methods: {

    click2(i) {
      const vm = this;
      this.currentNumber2 = i;
      // console.log(this.current Number);
      this.componentKey += 1;
      for (let i = 0; i < Object.keys(vm.exchangedatas1).length; i++) {
        console.log(vm.datas[i].ExchangeItem);

        // console.log(this.daydatas1[i]);

        if (this.currentNumber2 == i) {
          axios
            .post("", {
              Machinecd: vm.exchangedatas1[i].Machinecd,
              ExchangeItem: vm.exchangedatas1[i].ExchangeItem,
              Spec: vm.exchangedatas1[i].Spec,
              ExchangeUser: vm.Rhatn3,
            })
            .then((response) => {
              console.log(response);
            })
            .catch((error) => {
              console.error(error);
            });
        }
      }
    },
  },
};
</script>