vue3+tsx component array props update issue! some one help?

[enmotion]

when I use tsx to create a vue components, I have this issues.
here is my coding
在我使用 tsx 撰写组件的时候，遇到了以下让人困惑的问题
以下是我的代码：

sub.vue component

export declare interface MenuItem{
  label?:string, // 标题名称
  tips?:string, // 提示文字
  icon?:string, // 图标样式
  disabled:boolean, // 是否禁用
  method?:{ // 对应方法描述
    name:string, // 方法名称
    params?:any // 方法入参
  },
  children?:MenuItem[] // 子菜单
}

import { defineComponent, PropType, watch } from 'vue';
.....
props:{
  menu:{
    type:Array as PropType<MenuItem[]>,
    default:()=>[] as PropType<MenuItem[]>
  },
},
setup(props,{emit}:{emit:(event: string, ...args: unknown[]) => void}) {
  return () => (
      <div>
        {props.menu.map((item:MenuItem) => {
             return (
                 <div>{item.disabled?"enabled":"disabled"}</div>
             )
        }
       </div>
  )
}

parent.vue

.....
<sub v-if="ModuleMenus.historyMenu" 
	:menu="ModuleMenus.historyMenu"
	:somekey="{canReDo,canUnDo}"   
	@buttonClick="methodsDistribute($event)" 
	class="mx-5">
</sub>
....
//  我必须要触发一个毫无意义的属性 somekey(属性名随便)更新才能让子组件更新渲染，
//   I have to updata the [somekey] useless prop to trigger menu props render dom

some one know how to fixed this problem?
or I made some mistake?
有哪位知道这是为什么吗？还是我犯了什么错误？

[liulinboyi]

I recommend naive-ui and ant-design-vue,they are all use tsx, hope this can help you.

The JSX/TSX docs of Vue3.