TableAction component doesn't render when actions prop is changed

[JohnNiang]

Subject of the issue

Table action component doesn't render when actions prop is changed, but it works only if I change action#label.

 <template
      v-for="(action, index) in getActions"
      :key="`${index}-${action.label}`"
    >
      <PopConfirmButton v-bind="action">
        <Icon :icon="action.icon" class="mr-1" v-if="action.icon" />
        {{ action.label }}
      </PopConfirmButton>
      <Divider
        type="vertical"
        v-if="divider && index < getActions.length - (dropDownActions ? 0 : 1)"
      />
    </template>

Your environment

• OS: Manjaro Linux x86_64
• Packages: 2.0.0-rc.17
• Env: node v14.15.4

Steps to reproduce

import { reactive } from 'vue';

export function getActionColumn(): BasicColumn {
  return {
    width: 100,
    title: '操作',
    dataIndex: 'action',
    customRender: ({ record }) => {
      return (
        <TableAction
          actions={getActions(record)}
        ></TableAction>
      );
    },
  };
}

export function getActions(record: Recordable): ActionItem[] {
  const checkAction: ActionItem = reactive({
    label: 'Check',
    loading: false,
    onClick: async () => {
      // how to chage loading status?
      checkAction.loading = true;
      await new Promise<void>((resolve) => {
        setTimeout(() => {
          resolve();
        }, 1000);
      }).finally(() => {
        checkAction.loading = false;
      });
    },
  });

  return [checkAction];
}

Expected behaviour

The Check button should be loading status for one second when I click it.

Actual behaviour

The Check button doesn't react any behavior.
What happens instead?

But the label is changed, the PopConfirmButton will re-render and every thing will be okay.

So I thing that the problem is below, but not sure:

 <template
      v-for="(action, index) in getActions"
      :key="`${index}-${action.label}`"
    >

[anncwb]

1. Pull the latest code
2. Modify the code to move checkAction out of han

 const checkAction = reactive({
        label: 'Check',
        loading: false,
        onClick: async () => {
          // how to chage loading status?
          checkAction.loading = true;
          await new Promise<void>((resolve) => {
            setTimeout(() => {
              resolve();
            }, 1000);
          }).finally(() => {
            checkAction.loading = false;
          });
        },
      });

      function getActions(record: Recordable) {
        return [checkAction];
      }

[JohnNiang]

1. Pulled latest code
2. Putting checkAction outside getActions is not recommended, because the onClick method would use table row data.