First let me explain what happend, I pretend to make a like cascader code system, when click first-level option, it will be display(shown) sencond-level option, and so on.

But quickly i meet some problem, I use v-modal bind child.value, It's not working, I dont't kown why ?

import { defineComponent, ref, watch } from "vue";
export default defineComponent({
  props: {
   data: {
     type: Array
   }
  },
  setup() {
   const linkedList = ref([{
      value: undefined,
      options: props.data,
    }]);
function handleChange(value, option) {

      const currentData = linkedList.value[linkedList.value.length - 1]
      const { level: crrentLevel } = currentData

      const nextData = option.find(item => item.option_index == value)
      const { level: nextLevel, option_index, children } = nextData
      // add next level data
      if(nextLevel > crrentLevel) {
        linkedList.value.push({
          value: undefined,
          options: children
        })
      }
    }
    return () => (
      <div>
        {linkedList.value.map((child) => (
        <a-select v-model={child.value} onChange={e => handleChange(e, child.options)}  style={{minWidth: '100px'}}>
          {child.options.map((option) => (
            <a-select-option
              key={option.option_key}
              value={option.option_index}
            >{option.option}</a-select-option>
          ))}
        </a-select>
      ))}
      </div>
    );
  }
})