diff --git a/README.md b/README.md
index 9687e9f..3e99775 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/723096689/23.1.3%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1202789)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 <!-- default badges end -->
diff --git a/Vue/src/App.vue b/Vue/src/App.vue
index af7776e..3b51b3a 100644
--- a/Vue/src/App.vue
+++ b/Vue/src/App.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { RouterView } from "vue-router";
+import { RouterView } from 'vue-router';
 </script>
 
 <template>
-    <div class="main">
-        <RouterView />
-    </div>
+  <div class="main">
+    <RouterView/>
+  </div>
 </template>
diff --git a/Vue/src/components/HomeContent.vue b/Vue/src/components/HomeContent.vue
index f0c323c..5050ba2 100644
--- a/Vue/src/components/HomeContent.vue
+++ b/Vue/src/components/HomeContent.vue
@@ -1,22 +1,107 @@
+<template>
+  <div class="demo-container">
+    <DxDataGrid
+      ref="dataGridRef"
+      :data-source="customers"
+      key-expr="ID"
+      :show-borders="true"
+    >
+      <DxEditing
+        v-model:changes="changes"
+        mode="batch"
+        :allow-updating="true"
+      />
+      <DxColumn
+        data-field="CompanyName"
+      >
+        <DxRequiredRule/>
+      </DxColumn>
+      <DxColumn data-field="City">
+        <DxStringLengthRule :min="4"/>
+      </DxColumn>
+      <DxColumn data-field="Phone">
+        <DxRequiredRule/>
+        <DxPatternRule
+          message="Your phone must have '(555) 555-5555 format!'"
+          :pattern="pattern"
+        />
+      </DxColumn>
+      <DxColumn data-field="Fax"/>
+      <DxColumn data-field="State"/>
+      <DxToolbar>
+        <DxItem>
+          <DxButton
+            text="Validate DataGrid"
+            styling-mode="outlined"
+            @click="validateVisibleRows"
+          />
+        </DxItem>
+        <DxItem name="saveButton"/>
+        <DxItem name="revertButton"/>
+      </DxToolbar>
+    </DxDataGrid>
+  </div>
+</template>
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { ref, watch, nextTick } from 'vue';
+import { customers } from '@/data';
+import 'devextreme/dist/css/dx.material.blue.light.compact.css';
+import DxButton from 'devextreme-vue/button';
+import DxDataGrid, {
+  DxColumn,
+  DxEditing,
+  DxPatternRule,
+  DxRequiredRule,
+  DxStringLengthRule,
+  DxToolbar,
+  DxItem,
+} from 'devextreme-vue/data-grid';
+import type dxDataGrid from 'devextreme/ui/data_grid';
+import type { DxDataGridTypes } from 'devextreme-vue/data-grid';
+import notify from 'devextreme/ui/notify';
+
+const pattern = /^\(\d{3}\) \d{3}-\d{4}$/i;
+const changes = ref<DxDataGridTypes.DataChange[]>([]);
+const clicked = ref(false);
+const dataGridRef = ref<DxDataGrid>();
 
-import "devextreme/dist/css/dx.material.blue.light.compact.css";
-import DxButton from "devextreme-vue/button";
+const validateVisibleRows = () => {
+  const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
+  const fakeChanges = dataGridInstance
+    ? dataGridInstance
+      .getVisibleRows()
+      .map((row: DxDataGridTypes.Row) : DxDataGridTypes.DataChange => ({
+        type: 'update',
+        key: row.key,
+        data: {}
+      }))
+    : [];
+  changes.value = [...changes.value, ...fakeChanges];
+  clicked.value = true;
+};
+
+watch(changes, () => {
+  if(clicked.value) {
+    nextTick (() => {
+      const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
+      dataGridInstance?.repaint();
+      // @ts-expect-error - getController is a private method
+      dataGridInstance?.getController('validating').validate(true).then((result: Boolean) => {
+        const message = result ? 'Validation is passed' : 'Validation is failed';
+        const type = result ? 'success' : 'error';
+        notify({
+          message,
+          type,
+          position: {
+            offset: '0 50',
+            at: 'bottom',
+            of: '.demo-container',
+          },
+        });
+      });
+      clicked.value = false;
+    });
+  }
+}, {});
 
-const props = defineProps({
-  text: String,
-});
-const count = ref(0);
-const buttonText = computed<String>(
-  () => `Click ${props.text}: ${count.value}`
-);
-function clickHandler() {
-  count.value += 1;
-}
 </script>
-<template>
-  <div>
-    <DxButton :text="buttonText" @click="clickHandler"></DxButton>
-  </div>
-</template>
diff --git a/Vue/src/data.ts b/Vue/src/data.ts
new file mode 100644
index 0000000..0b36fa4
--- /dev/null
+++ b/Vue/src/data.ts
@@ -0,0 +1,41 @@
+export type Customer = {
+    ID: number;
+
+    CompanyName: string;
+
+    Address: string;
+
+    City: string;
+
+    State: string;
+
+    Zipcode: number;
+
+    Phone: string;
+
+    Fax: string;
+
+    Website: string;
+};
+
+export const customers: Customer[] = [{
+  ID: 1,
+  CompanyName: '',
+  Address: '702 SW 8th Street',
+  City: 'Bentonville',
+  State: 'Arkansas',
+  Zipcode: 72716,
+  Phone: '123456',
+  Fax: '(800) 555-2171',
+  Website: 'http://www.nowebsitesupermart.com',
+}, {
+  ID: 2,
+  CompanyName: 'Electronics Depot',
+  Address: '2455 Paces Ferry Road NW',
+  City: 'NYC',
+  State: 'Georgia',
+  Zipcode: 30339,
+  Phone: '(800) 595-3232',
+  Fax: '(800) 595-3231',
+  Website: 'http://www.nowebsitedepot.com',
+}];