From 7246b0701163789cbacbe91ccb8a2090475ef265 Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Wed, 19 Jan 2022 17:31:51 +0800
Subject: [PATCH] fix(components): [el-collapse] watch modelValue invalid
 (#4593)

---
 .../collapse/__tests__/collapse.spec.ts       | 39 +++++++++++++++++++
 packages/components/collapse/src/collapse.vue |  3 ++
 2 files changed, 42 insertions(+)

diff --git a/packages/components/collapse/__tests__/collapse.spec.ts b/packages/components/collapse/__tests__/collapse.spec.ts
index a507e829e8..e1fb5949e2 100644
--- a/packages/components/collapse/__tests__/collapse.spec.ts
+++ b/packages/components/collapse/__tests__/collapse.spec.ts
@@ -151,4 +151,43 @@ describe('Collapse.vue', () => {
     expect(collapseItemWrappers[0].vm.isActive).toBe(false)
     expect(vm.activeNames).toEqual(['3'])
   })
+
+  test('deep watch modelValue', async () => {
+    const wrapper = mount({
+      components: {
+        'el-collapse': Collapse,
+        'el-collapse-item': CollapseItem,
+      },
+      data() {
+        return {
+          activeNames: ['1'],
+        }
+      },
+      mounted() {
+        this.activeNames.push('2')
+      },
+      template: `
+        <el-collapse v-model="activeNames">
+          <el-collapse-item title="title1" name="1">
+            <div class="content">111</div>
+          </el-collapse-item>
+          <el-collapse-item title="title2" name="2">
+            <div class="content">222</div>
+          </el-collapse-item>
+          <el-collapse-item title="title3" name="3">
+            <div class="content">333</div>
+          </el-collapse-item>
+          <el-collapse-item title="title4" name="4">
+            <div class="content">444</div>
+          </el-collapse-item>
+        </el-collapse>
+      `,
+    })
+
+    await nextTick()
+    const collapseWrapper = wrapper.findComponent(Collapse)
+    const collapseItemWrappers = collapseWrapper.findAllComponents(CollapseItem)
+    expect(collapseItemWrappers[0].vm.isActive).toBe(true)
+    expect(collapseItemWrappers[1].vm.isActive).toBe(true)
+  })
 })
diff --git a/packages/components/collapse/src/collapse.vue b/packages/components/collapse/src/collapse.vue
index 0d9150e276..4adfdfa07b 100644
--- a/packages/components/collapse/src/collapse.vue
+++ b/packages/components/collapse/src/collapse.vue
@@ -57,6 +57,9 @@ export default defineComponent({
       () => props.modelValue,
       () => {
         activeNames.value = [].concat(props.modelValue)
+      },
+      {
+        deep: true,
       }
     )