fix(components): [cascader] dynamic options render error (#21405)

* fix(components): [cascader] dynamic optios render error

* fix: remove debugger

* fix: update

* test: dynamic options

packages/components/cascader-panel/src/index.vue

@@ -340,17 +340,20 @@ provide(
 )
 
 watch(
-  [config, () => props.options],
+  config,
   (newVal, oldVal) => {
     if (isEqual(newVal, oldVal)) return
     initStore()
   },
   {
-    deep: true,
     immediate: true,
   }
 )
 
+watch(() => props.options, initStore, {
+  deep: true,
+})
+
 watch(
   () => props.modelValue,
   () => {

packages/components/cascader/__tests__/cascader.test.tsx

@@ -813,4 +813,47 @@ describe('Cascader.vue', () => {
       expect(tags[0].text()).toContain('Zhejiang')
     })
   })
+
+  describe('dynamic options & filterable', () => {
+    it('should render dynamic options correctly', async () => {
+      const value = ref<any[]>([])
+      const options = ref<any[]>([
+        {
+          value: 'guide',
+          label: 'Guide',
+        },
+        {
+          value: 'design',
+          label: 'Design',
+        },
+        {
+          value: 'development',
+          label: 'Development',
+        },
+      ])
+      const wrapper = _mount(() => (
+        <Cascader
+          v-model={value.value}
+          filterable
+          options={options.value}
+          teleported={false}
+        />
+      ))
+      const cascaderNodes = wrapper.findAll('.el-cascader-node')
+
+      expect(cascaderNodes.length).toBe(3)
+      expect(cascaderNodes[0].text()).toBe('Guide')
+      expect(cascaderNodes[1].text()).toBe('Design')
+      expect(cascaderNodes[2].text()).toBe('Development')
+
+      options.value.push({
+        value: 'testing',
+        label: 'Testing',
+      })
+      await nextTick()
+      const newCascaderNodes = wrapper.findAll('.el-cascader-node')
+      expect(newCascaderNodes.length).toBe(4)
+      expect(newCascaderNodes[3].text()).toBe('Testing')
+    })
+  })
 })