I try to show the table contains switch button.
Now, it doesn’t change it’s state.

Here is my List.vue file and DataTable.vue file

List.vue

<script setup lang="tsx">
import { Main } from '../styled';
import { defineAsyncComponent, h } from 'vue';
import DataTables from '@/components/table/DataTable.vue';
import { computed, reactive, ref, defineComponent, onMounted } from 'vue';
import { Button, Badge } from 'ant-design-vue/es'
import useAxios from '@/@core/axios/useAuthAxios';

...

const dataTableColumn = [
  ...
  {
    title: 'Status',
    dataIndex: 'status',
    key: 'status',
  },
  ...
];

const tableDataSource = reactive([]);
...


const agent_list = async () => {
  const params = {
    q: ""
  }
  const axios = new useAxios();
  const response = await axios.getAgentTree({ params });
  const data = reactive(response.data);
  tableDataSource.length = 0;
  data.agents.forEach(agent => {
    const reactiveAgent = reactive({
      ...
      status: agent.data.status == 1,
      ...
    });
    tableDataSource.push({
      ...reactiveAgent,
      status: <a-switch style="margin: 0 10px" size="small" checked={reactiveAgent.status} onChange={(checked) => { reactiveAgent.status = checked; console.log(checked, ": ", reactiveAgent.status) }} />
    });
  });

  console.log('tableDataSource : ', tableDataSource);
  return tableDataSource;
}

onMounted(() => {
  agent_list();
});

</script>

<template>
  ...
<DataTables :filterOption="true" :filterOnchange="true" :tableData="tableDataSource"
                  :columns="dataTableColumn" :rowSelection="true" />
...

DataTable.vue

<script setup lang="ts">
import { computed, ref, unref } from 'vue';
import { DataTableStyleWrap } from './Style';
import { TableWrapper } from '../../views/styled';
import { useStore } from 'vuex';

const props = defineProps({
  filterOption: Boolean,
  filterOnchange: Boolean,
  rowSelection: Boolean,
  tableData: Array,
  columns: Array,
});

const { dispatch } = useStore();

const handleIdSearch = (e: any) => {
  const id = e.currentTarget.value;
  dispatch('dataLiveFilter', { value: id, key: 'id' });
};
const handleStatusSearch = (value: any) => {
  dispatch('dataLiveFilter', { value, key: 'status' });
};

const handleDataUser = (e: any) => {
  const { value } = e.currentTarget;
  dispatch('dataLiveFilter', { value, key: 'name' });
};

const handleSearch = () => {
  const idInput = document.querySelector('.ninjadash-data-id') as HTMLInputElement;
  const statusSelect = document.querySelector('.ninjadash-data-status .ant-select-selection-item') as HTMLDivElement;
  if (idInput && statusSelect) {
    const id = idInput.value;
    const status = statusSelect.title;
    dispatch('filterWithSubmit', { id, status });
  }
};

const selectedRowKeys = ref([]); // Check here to configure the default column

const onSelectChange = (changableRowKeys: any) => {
  console.log('selectedRowKeys changed: ', changableRowKeys);
  selectedRowKeys.value = changableRowKeys;
};

const rowSelections = computed(() => {
  return {
    selectedRowKeys: unref(selectedRowKeys),
    onChange: onSelectChange,
    hideDefaultSelections: true,
  };
});
</script>

<template>
  <DataTableStyleWrap>
    <div v-if="filterOption" class="ninjadash-datatable-filter">
      

      <div class="ninjadash-datatable-filter__right">
        <a-input @change="handleDataUser" size="default" placeholder="Search">
          <template #prefix>
            <unicon name="search"></unicon>
          </template>
        </a-input>
      </div>
    </div>

    <div class="ninjadasj-datatable">
      <TableWrapper class="table-data-view table-responsive">

        <a-table
          :pagination="{ pageSize: 10, showSizeChanger: true }"
          :data-source="tableData"
          :columns="columns"
        />
      </TableWrapper>
    </div>
  </DataTableStyleWrap>
</template>

It shows the switch button but it doesn’t work.
What’s wrong with this code?

I want to know how to fix it and why.

When I click the switch button, it should changes it’s ‘checked’ state but it stays initial state