Share tips for vue to listen to props using watch

<template>
  <div class="container">
    <div class="left">
      <div class="button_group">
        <!--        <button @click="random_change_data">Modify the data of a column</button>-->
      </div>
    </div>
    <div class="right son">
      <son_component :table_data="table_data"></son_component>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import son_component from "@/components/son_component.vue";

export default ({
  name: "FatherComponent",
  components: {
    son_component,
  },
  data() {
    return {
      table_data: [],
    };
  },
  mounted() {
    this.init_data();
  },
  methods: {
    init_data() {
      for (let i = 0; i < 100; i++) {
        (
          this.table_data as never as [
            { name: string; age: number; check: boolean }
          ]
        ).push({
          name: `alex${i}`,
          age: i,
          check: false,
        });
      }
      (this.table_data);
    },
    generate_random_number(max: number) {
      return (() * max) + 1;
    },
    // random_change_data() {
    //   /**
     // * Randomly modify the data of a column
     // */
    //   const index = this.generate_random_number(this.table_data.length);
    //   // (this.table_data[index] as { age: number }).age = 100;
    //   const item = this.table_data[index] as { age: number };
    //    = 100;
    //   this.$set(this, index, item);
    // },
  },
});
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: row;
  width: 100vw;
}

.left,
.right {
  width: 50vw;
}

.left {
  margin: 0 auto;
  line-height: 100%;
  text-align: center;
}
</style>

	<template>
  <div>
    <div class="table_data">
      <table>
        <thead>
          <tr>
            <th>name</th>
            <th>age</th>
            <th><input type="checkbox" v-model="is_all" /></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="">
            <td>{{  }}</td>
            <td>{{  }}</td>
            <td><input type="checkbox" v-model="" /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { cloneDeep } from "lodash";

export default ({
  name: "son_component",
  data() {
    return {
      is_all: true,
      selection: [], // Selected data      data: [], // Table data    };
  },
  props: {
    table_data: {
      type: Array,
      default: () => [],
    },
    choice_list: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    choice_list: {
      handler(new_: [string], old_) {
        ("The choice_list changed");
        /**
          * Determine whether to choose according to the name
          */
        if (new_) ( as any) = this.choice_list.concat(new_);
      },
      immediate: true,
      deep: true,
    },
    table_data: {
      handler(new_) {
 					( as any) = this.table_data;
      }
    },
  },
});
</script>

<style scoped></style>