Revert "fix(v-model): mutate original array for v-model multi checkbox (#2663)"

This reverts commit 87581cd266.

ref: #2700

packages/runtime-dom/__tests__/directives/vModel.spec.ts

@@ -6,8 +6,7 @@ import {
   vModelDynamic,
   withDirectives,
   VNode,
-  ref,
+  ref
-  reactive
 } from '@vue/runtime-dom'
 
 const triggerEvent = (type: string, el: Element) => {
@@ -434,78 +433,6 @@ describe('vModel', () => {
     expect(bar.checked).toEqual(false)
   })
 
-  it(`should support the reactive array in setup as a checkbox model`, async () => {
-    const value = reactive<string[]>([])
-
-    const component = defineComponent({
-      setup() {
-        return () => {
-          return [
-            withVModel(
-              h('input', {
-                type: 'checkbox',
-                class: 'foo',
-                value: 'foo',
-                'onUpdate:modelValue': setValue.bind(this)
-              }),
-              value
-            ),
-            withVModel(
-              h('input', {
-                type: 'checkbox',
-                class: 'bar',
-                value: 'bar',
-                'onUpdate:modelValue': setValue.bind(this)
-              }),
-              value
-            )
-          ]
-        }
-      }
-    })
-    render(h(component), root)
-
-    const foo = root.querySelector('.foo')
-    const bar = root.querySelector('.bar')
-
-    foo.checked = true
-    triggerEvent('change', foo)
-    await nextTick()
-    expect(value).toMatchObject(['foo'])
-
-    bar.checked = true
-    triggerEvent('change', bar)
-    await nextTick()
-    expect(value).toMatchObject(['foo', 'bar'])
-
-    bar.checked = false
-    triggerEvent('change', bar)
-    await nextTick()
-    expect(value).toMatchObject(['foo'])
-
-    foo.checked = false
-    triggerEvent('change', foo)
-    await nextTick()
-    expect(value).toMatchObject([])
-
-    value.length = 0
-    value.push('foo')
-    await nextTick()
-    expect(bar.checked).toEqual(false)
-    expect(foo.checked).toEqual(true)
-
-    value.length = 0
-    value.push('bar')
-    await nextTick()
-    expect(foo.checked).toEqual(false)
-    expect(bar.checked).toEqual(true)
-
-    value.length = 0
-    await nextTick()
-    expect(foo.checked).toEqual(false)
-    expect(bar.checked).toEqual(false)
-  })
-
   it(`should support Set as a checkbox model`, async () => {
     const component = defineComponent({
       data() {

packages/runtime-dom/src/directives/vModel.ts

@@ -111,9 +111,11 @@ export const vModelCheckbox: ModelDirective<HTMLInputElement> = {
         const index = looseIndexOf(modelValue, elementValue)
         const found = index !== -1
         if (checked && !found) {
-          modelValue.push(elementValue)
+          assign(modelValue.concat(elementValue))
         } else if (!checked && found) {
-          modelValue.splice(index, 1)
+          const filtered = [...modelValue]
+          filtered.splice(index, 1)
+          assign(filtered)
         }
       } else if (isSet(modelValue)) {
         if (checked) {