fixes T1277897: fixed v-model binding in view 3 on checkbox and textbox

apps/vue/components/check-box-example.vue

@@ -0,0 +1,70 @@
+<template>
+  <example-block title="v-model">
+    with value:
+    <br>
+    <dx-check-box v-model="checkBoxValue" />
+    <br>
+    <div>checkBoxValue: {{ checkBoxValue ? '🟢' : '🔴' }}</div>
+    <br>
+    -------------
+    <br>
+    with modelValue:
+    <br>
+    <input type="checkbox" v-model="checkBoxValue2" />
+    <br>
+    <div>checkBoxValue: {{ checkBoxValue2 ? '🟢' : '🔴' }}</div>
+    <br>
+    -------------
+    <br>
+    <br>
+    native:
+    <br>
+    <input v-model="inputValueNative" style="border: 1px solid gray;"/>
+    <div>text: {{ inputValueNative }}</div>
+    <br>
+    ---------------
+    <br>
+    <br>
+    DX:
+    <br>
+    <dx-text-box v-model="inputValue" />
+    <div>text: {{ inputValue }}</div>
+  </example-block>
+</template>
+
+<script>
+import { ref, watch } from 'vue';
+import ExampleBlock from "./example-block";
+import { DxCheckBox } from "devextreme-vue/check-box";
+import { DxTextBox } from "devextreme-vue/text-box";
+import { DxList, DxItem } from "devextreme-vue/list";
+
+const checkBoxValue2 = ref(false);
+
+watch(checkBoxValue2, (newValue) => console.log("checkBoxValue2 changed:", newValue));
+
+export default {
+  components: {
+    ExampleBlock,
+    DxCheckBox,
+    DxTextBox,
+    DxList,
+    DxItem,
+  },
+  data() {
+    return {
+      checkBoxValue: false,
+      checkBoxValue2,
+      inputValue: 'inputValue',
+      inputValueNative: 'inputValueNative',
+      selectedItems: [],
+    };
+  },
+  methods: {
+    updateValue(event) {
+      console.log("updateValue:", event);
+      this.checkBoxValue = event.value;
+    }
+  }
+};
+</script>

apps/vue/components/examples.vue

@@ -28,6 +28,9 @@
   <text-box-example/>
   <br/>
   <validator-example/>
+  <br/>
+  <check-box-example/>
+  <br/>
 </template>
 
 <script>
@@ -46,7 +49,8 @@ import ScrollViewExample from "./scroll-view-example";
 import TabPanelExample from "./tab-panel-example";
 import TextBoxExample from "./text-box-example";
 import ValidatorExample from "./validation-example";
-
+import CheckBoxExample from "./check-box-example";
+
 export default {
   components: {
     AccessingInstanceExample,
@@ -63,7 +67,8 @@ export default {
     ScrollViewExample,
     TabPanelExample,
     TextBoxExample,
-    ValidatorExample
+    ValidatorExample,
+    CheckBoxExample
   }
 };
 </script>

packages/devextreme-vue/src/core/configuration.ts

@@ -306,12 +306,12 @@ function setEmitOptionChangedFunc(
   config.emitOptionChanged = (name: string, value: string) => {
     const props = vueInstance.$props;
     const vnode = vueInstance?.$?.vnode;
-    if (hasProp(vueInstance, name) && !isEqual(value, props[name]) && vueInstance.$emit) {
-      innerChanges[name] = toRaw(value);
-      const eventName = name === 'value' && hasVModelValue(vueInstance.$options, props, vnode)
-        ? `update:${VMODEL_NAME}`
-        : `update:${name}`;
+    const eventName = name === 'value' && hasVModelValue(vueInstance.$options, props, vnode)
+      ? `update:${VMODEL_NAME}`
+      : `update:${name}`;
 
+    if (hasProp(vueInstance, name) && !isEqual(value, props[eventName]) && vueInstance.$emit) {
+      innerChanges[name] = toRaw(value);
       vueInstance.$emit(eventName, value);
     }
   };