fix(Cascader): should watch options deeply (#7777)

* fix(Cascader): should watch options deeply

* docs: fix

src/cascader/demo/index.vue

@@ -40,6 +40,27 @@
         />
       </van-popup>
     </demo-block>
+
+    <demo-block card :title="t('asyncOptions')">
+      <van-field
+        is-link
+        readonly
+        :label="t('area')"
+        :value="async.result"
+        :placeholder="t('selectArea')"
+        @click="async.show = true"
+      />
+      <van-popup v-model="async.show" round position="bottom">
+        <van-cascader
+          v-model="async.value"
+          :title="t('selectArea')"
+          :options="async.options"
+          @close="async.show = false"
+          @change="loadDynamicOptions"
+          @finish="onFinish('async', $event)"
+        />
+      </van-popup>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -54,12 +75,36 @@ export default {
       options: zhCNOptions,
       selectArea: '请选择地区',
       customColor: '自定义颜色',
+      asyncOptions: '异步加载选项',
+      asyncOptions1: [
+        {
+          text: '浙江省',
+          value: '330000',
+          children: [],
+        },
+      ],
+      asyncOptions2: [
+        { text: '杭州市', value: '330100' },
+        { text: '宁波市', value: '330200' },
+      ],
     },
     'en-US': {
       area: 'Area',
       options: enUSOptions,
       selectArea: 'Select Area',
       customColor: 'Custom Color',
+      asyncOptions: 'Async Options',
+      asyncOptions1: [
+        {
+          text: 'Zhejiang',
+          value: '330000',
+          children: [],
+        },
+      ],
+      asyncOptions2: [
+        { text: 'Hangzhou', value: '330100' },
+        { text: 'Ningbo', value: '330200' },
+      ],
     },
   },
 
@@ -75,10 +120,28 @@ export default {
         value: null,
         result: '',
       },
+      async: {
+        show: false,
+        value: null,
+        result: '',
+        options: [],
+      },
     };
   },
 
+  created() {
+    this.async.options = this.t('asyncOptions1');
+  },
+
   methods: {
+    loadDynamicOptions({ value }) {
+      if (value === '330000') {
+        setTimeout(() => {
+          this.async.options[0].children = this.t('asyncOptions2');
+        }, 500);
+      }
+    },
+
     onFinish(type, { value, selectedOptions }) {
       const result = selectedOptions.map((option) => option.text).join('/');
       this[type] = {