fix(vModel): avoid updating the checkbox within the side effects click event

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

@@ -6,7 +6,7 @@ import {
   nextTick,
   warn,
 } from '@vue/runtime-core'
-import { addEventListener } from '../modules/events'
+import { addEventListener, globelEvent } from '../modules/events'
 import {
   invokeArrayFns,
   isArray,
@@ -163,6 +163,13 @@ function setChecked(
   { value }: DirectiveBinding,
   vnode: VNode,
 ) {
+  if (
+    globelEvent &&
+    globelEvent.target === el &&
+    globelEvent.type !== 'change'
+  ) {
+    return
+  }
   // store the v-model value on the element so it can be accessed by the
   // change listener.
   ;(el as any)._modelValue = value
@@ -239,6 +246,13 @@ export const vModelSelect: ModelDirective<HTMLSelectElement, 'number'> = {
 }
 
 function setSelected(el: HTMLSelectElement, value: any) {
+  if (
+    globelEvent &&
+    globelEvent.target === el &&
+    globelEvent.type !== 'change'
+  ) {
+    return
+  }
   const isMultiple = el.multiple
   const isArrayValue = isArray(value)
   if (isMultiple && !isArrayValue && !isSet(value)) {

packages/runtime-dom/src/modules/events.ts

@@ -90,11 +90,14 @@ const p = /*@__PURE__*/ Promise.resolve()
 const getNow = () =>
   cachedNow || (p.then(() => (cachedNow = 0)), (cachedNow = Date.now()))
 
+export let globelEvent: Event | undefined
+
 function createInvoker(
   initialValue: EventValue,
   instance: ComponentInternalInstance | null,
 ) {
   const invoker: Invoker = (e: Event & { _vts?: number }) => {
+    globelEvent = e
     // async edge case vuejs/vue#6566
     // inner click event triggers patch, event handler
     // attached to outer element during patch, and triggered again. This

packages/vue/__tests__/e2e/vModel.spec.ts

@@ -0,0 +1,107 @@
+import path from 'node:path'
+import { setupPuppeteer } from './e2eUtils'
+
+const { page, click, isChecked, html } = setupPuppeteer()
+import { nextTick } from 'vue'
+
+beforeEach(async () => {
+  await page().addScriptTag({
+    path: path.resolve(__dirname, '../../dist/vue.global.js'),
+  })
+  await page().setContent(`<div id="app"></div>`)
+})
+
+// #12144
+test('checkbox click with v-model boolean value', async () => {
+  await page().evaluate(() => {
+    const { createApp } = (window as any).Vue
+    createApp({
+      template: `
+      <label>
+        <input 
+          id="first"
+          type="checkbox"
+          v-model="first"/>
+        First
+      </label>
+      <br>  
+      <label>
+        <input
+          id="second"
+          type="checkbox"
+          v-model="second"      
+          @click="secondClick"/>    
+          Second
+      </label> 
+        `,
+      data() {
+        return {
+          first: true,
+          second: false,
+        }
+      },
+      methods: {
+        secondClick(this: any) {
+          this.first = false
+        },
+      },
+    }).mount('#app')
+  })
+
+  expect(await isChecked('#first')).toBe(true)
+  expect(await isChecked('#second')).toBe(false)
+  await click('#second')
+  await nextTick()
+  expect(await isChecked('#first')).toBe(false)
+  expect(await isChecked('#second')).toBe(true)
+})
+
+// #8638
+test('checkbox click with v-model array value', async () => {
+  await page().evaluate(() => {
+    const { createApp, ref } = (window as any).Vue
+    createApp({
+      template: `
+      {{cls}}
+      <input
+        id="checkEl"
+        type="checkbox"
+        @click="change"
+        v-model="inputModel"
+        value="a"
+      >
+        `,
+      setup() {
+        const inputModel = ref([])
+        const count = ref(0)
+        const change = () => {
+          count.value++
+        }
+        return {
+          inputModel,
+          change,
+          cls: count,
+        }
+      },
+    }).mount('#app')
+  })
+
+  expect(await isChecked('#checkEl')).toBe(false)
+  expect(await html('#app')).toMatchInlineSnapshot(
+    `"0 <input id="checkEl" type="checkbox" value="a">"`,
+  )
+
+  await click('#checkEl')
+  await nextTick()
+  expect(await isChecked('#checkEl')).toBe(true)
+  expect(await html('#app')).toMatchInlineSnapshot(
+    `"1 <input id="checkEl" type="checkbox" value="a">"`,
+  )
+
+  await click('#checkEl')
+  await nextTick()
+  expect(await isChecked('#checkEl')).toBe(false)
+  expect(await html('#app')).toMatchInlineSnapshot(
+    `"2 <input id="checkEl" type="checkbox" value="a">"`,
+  )
+})