From 3faec50c22510780191b80387fb1eede529cbee2 Mon Sep 17 00:00:00 2001
From: Ernest <iendeavor.github.io@gmail.com>
Date: Tue, 16 Mar 2021 21:41:08 +0800
Subject: [PATCH] fix(select): modelValue should be deep reactive in multiple
 mode (#1624)

---
 packages/select/__tests__/select.spec.ts | 29 ++++++++++++++++++++++++
 packages/select/src/useSelect.ts         |  1 +
 2 files changed, 30 insertions(+)

diff --git a/packages/select/__tests__/select.spec.ts b/packages/select/__tests__/select.spec.ts
index 81c71cad1d..738d86323c 100644
--- a/packages/select/__tests__/select.spec.ts
+++ b/packages/select/__tests__/select.spec.ts
@@ -923,4 +923,33 @@ describe('Select', () => {
     expect(wrapper.findAll('.el-tag').length).toBe(2)
     expect(wrapper.findAll('.el-tag__close').length).toBe(0)
   })
+
+  test('modelValue should be deep reactive in multiple mode', async () => {
+    const wrapper = _mount(`
+    <el-select v-model="modelValue" multiple>
+      <el-option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+        :label="option.label"
+      >
+      </el-option>
+    </el-select>`, () => ({
+      modelValue: [1],
+      options: [
+        { label: 'Test 1', value: 1 },
+        { label: 'Test 2', value: 2 },
+        { label: 'Test 3', value: 3 },
+        { label: 'Test 4', value: 4 },
+      ],
+    }))
+    const vm = wrapper.vm as any
+    await vm.$nextTick()
+    expect(wrapper.findAll('.el-tag').length).toBe(1)
+
+    vm.modelValue.splice(0, 1)
+
+    await vm.$nextTick()
+    expect(wrapper.findAll('.el-tag').length).toBe(0)
+  })
 })
diff --git a/packages/select/src/useSelect.ts b/packages/select/src/useSelect.ts
index e2c1477c87..174e83bd97 100644
--- a/packages/select/src/useSelect.ts
+++ b/packages/select/src/useSelect.ts
@@ -160,6 +160,7 @@ export const useSelect = (props, states: States, ctx) => {
     }
   }, {
     flush: 'post',
+    deep: true,
   })
 
   watch(() => states.visible, val => {