diff --git a/docs/getting-started/get-started-nuxt-3.md b/docs/getting-started/get-started-nuxt-3.md
index b93cefbb..9d2d3e87 100644
--- a/docs/getting-started/get-started-nuxt-3.md
+++ b/docs/getting-started/get-started-nuxt-3.md
@@ -10,8 +10,6 @@ position: 100
 
 # Get Started with Kendo UI for Vue
 
-> Prefer video tutorials? How about a free Telerik UI onboarding course? Check out the [Kendo UI for Vue with TypeScript](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) training in [Telerik Virtual Classroom](https://learn.telerik.com/learn).
-
 This tutorial will help you develop a simple app that includes a native Vue Data Grid component. To achieve this, you will build a project using [Vite](https://vitejs.dev/) and the [Vue Composition API](https://vuejs.org/guide/introduction.html#composition-api) paired with [Nuxt 3](https://nuxt.com/docs/getting-started/introduction) 
 
 
@@ -20,36 +18,37 @@ This tutorial will help you develop a simple app that includes a native Vue Data
 >* [Kendo UI for Vue with JavaScript and the Options API](slug:getting_started_javascript_options_api)
 >* [Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_api)
 
-> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/).
-
 ## Create the Vue Project
 
 1. Create a Nuxt project named `my-app`:
 
-```sh
-npx nuxi init my-app
-```
+    ```sh
+    npx nuxi init my-app
+    ```
+
+1. Select the NPM package manager.
+
+   > You can use both NPM and Yarn to create the project and import the Kendo UI for Vue components. This tutorial demonstrates only the NPM approach.
 
 1. Run the newly created project by executing the following commands:
 
-```
-cd my-app
-npm install
-npm run dev
-```
+    ```
+    cd my-app
+    npm install
+    npm run dev
+    ```
 
 ## Clean Up the Generated Project
 
-Before you start playing with Kendo UI for Vue, clean up the sample app created by Nuxt:
+Before you start playing with Kendo UI for Vue, clean up the Nuxt sample app:
 
-1. Delete the `<NuxtWelcome />` line inside the `app.vue` file
+1. Replace the `<NuxtWelcome />` line inside the `app.vue` file with `<NuxtPage/>`.
+1. Delete everything in the `nuxt.config.ts` file.
 
 ## Add Application Data
 
 Add dummy data needed by the components. Create folder `appdata` in the `src` folder. Add the following files to the `appdata` folder.
 
-1. Create a new `appdata/categories.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-nuxt3/appdata/categories.ts) and paste it into the `categories.ts` file.
-
 1. Create a new `appdata/products.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-nuxt3/appdata/products.ts) and paste it into the `products.ts` file.
 
 ## Install the Data Grid Component
@@ -59,11 +58,6 @@ Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`.
 ```sh
 npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup
 ```
-<!---
-```sh
-yarn add @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup
-```
---->
 
 ## Import the CSS Styles
 
@@ -74,94 +68,218 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
     ```sh
       npm install --save @progress/kendo-theme-default
     ```
-    <!---
-    ```sh
-    yarn add --save @progress/kendo-theme-default
-    ```
-    --->
 
 1. In the `nuxt.config.ts` file, import the CSS files provided by the installed theme package:  
 
-    ```js
-      import '@progress/kendo-theme-default/dist/all.css';
+    ```ts
+      export default defineNuxtConfig({
+        css: [
+          '@progress/kendo-theme-default/dist/all.css',
+        ],
+      })
     ```
 
+>To add any custom styles to your app, insert a `<styles>` tag in the `src/App.vue` file and place your styles there.
 
 ## Add a Vue Data Grid Component
 
-
 1. Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application.
 
-```sh
-npx nuxi add page KendoGrid
-```
-
-1. In the `pages/KendoGrid.vue` file, add a `<script>` block and import the Grid and its data:
+    ```sh
+    npx nuxi add page KendoGrid
+    ```
 
+1. Add a `<script>` block to the `pages/KendoGrid.vue` file, import the Grid and its data. In addition, the `process` function from the [Data Query](https://www.telerik.com/kendo-vue-ui/components/dataquery/) package will allow you to apply data operations like sorting, paging, and filtering.
 
-```js
-import { productsData } from '../appdata/products';
-import { process, DataResult, State, CompositeFilterDescriptor, SortDescriptor } from '@progress/kendo-data-query';
-import { Grid as grid } from '@progress/kendo-vue-grid';
-```
+    ```js
+    <script>
+        import { productsData } from '../appdata/products';
+        import { process, type DataResult, type State, type SortDescriptor } from '@progress/kendo-data-query';
+        import { Grid as grid } from '@progress/kendo-vue-grid';
+    </script>
+    ```
 
 1. Add a `<template>` block with a simple heading and create a Data Grid. Bind it to the `products` data:
 
-```html
-<grid
-  :data-items="products"
-  :columns="columns"
-></grid>
-```
+    ```html
+    <template>
+        <h1>Hello Kendo UI for Vue with Nuxt 3!</h1>
+        <grid
+          :data-items="products"
+          :columns="columns"
+        ></grid>
+    </template>
+    ```
 
-1. Add the Data Grid's data and columns in the `setup` section of the `KendoGrid.vue` file:
+1. In the `<script>` section of the `pages\KendoGrid.vue` file:
 
-```js
-const products = productsData;
-const columns = [
-  { field: 'ProductName', title: 'Product Name' },
-  { field: 'UnitPrice', title: 'Price' },
-  { field: 'UnitsInStock', title: 'Units in Stock' },
-  { field: 'Discontinued' }
-] as GridColumnProps[];
-```
+   * Load the `products` file.
+   * Define user friendly column names.
+
+    ```js
+    const products = productsData;
+    const columns = [
+      { field: 'ProductName', title: 'Product Name' },
+      { field: 'UnitPrice', title: 'Price' },
+      { field: 'UnitsInStock', title: 'Units in Stock' },
+      { field: 'Discontinued' }
+    ] as GridColumnProps[];
+    ```
+
+After completing all the steps above, your `KendoGrid.vue` will look like this:
+
+    ```js
+    import { productsData } from '../appdata/products';
+    import { process, type DataResult, type State, type SortDescriptor } from '@progress/kendo-data-query';
+    import { Grid as grid, type GridColumnProps, type GridDataStateChangeEvent } from '@progress/kendo-vue-grid';
+
+    <script>
+    const products = productsData;
+    const columns = [
+      { field: 'ProductName', title: 'Product Name' },
+      { field: 'UnitPrice', title: 'Price' },
+      { field: 'UnitsInStock', title: 'Units in Stock' },
+      { field: 'Discontinued' }
+    ] as GridColumnProps[];
+    </script>
+    
+    <template>
+     <h1>Hello Kendo UI for Vue with Nuxt 3!</h1>
+     <grid :data-items="products" :columns="columns"></grid>
+    </template>
+    ```
 
-These steps let you render a very basic Grid by running `npm run dev` and navigating to the local URL displayed in the terminal.
+This sample code lets you run an application with a very basic Grid:
+
+1. Execute the `npm run dev` command.
+1. Navigate to the local URL displayed in the terminal.
 
 > Notice the `No valid license found` message and the watermark in the Grid. They are informational and encourage you to activate your trial or commercial license and to [add a license file to your application](slug:my_license_vue). Once you complete these licensing steps, the license message and the watermark will disappear.
 
-Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging:
+## Configure the Vue Data Grid
+
+Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging.
 
 1. In the Grid declaration, add [paging](slug:paging_grid), [sorting](slug:sorting_grid), and a height style that activates [scrolling](slug:scrollmmodes_grid).
 
     ```html
-      <template>
-          <h1>Hello Kendo UI for Vue!</h1>
-          <grid 
-            :data-items="products"
-            :columns="columns"
-            :pageable="pageable"
-            :sortable="sortable"
-            :style="{ height: '400px' }"
-          ></grid>
-      </template>
+    <template>
+        <h1>Hello Kendo UI for Vue with Nuxt 3!</h1>
+        <grid 
+          :data-items="products"
+          :columns="columns"
+          :pageable="pageable"
+          :sortable="sortable"
+          :style="{ height: '400px' }"
+        ></grid>
+    </template>
     ```
 
-
 1. Implement the paging and sorting functionality in the `data` option:
 
-  * Set the [page size (`take`)](slug:api_grid_gridprops#toc-take) to 10.
-  * Set the initial [`skip`](slug:api_grid_gridprops#toc-skip) for the paging.
-  * Set the initial [sorting](slug:api_grid_gridprops#toc-sort) by Product name.
+    - Set the [page size (`take`)](slug:api_grid_gridprops#toc-take) to 10.
+    - Set the initial [`skip`](slug:api_grid_gridprops#toc-skip) for the paging.
+    - Set the initial [sorting](slug:api_grid_gridprops#toc-sort) by Product name.
+    - Set [`sortable`](slug:api_grid_gridprops#toc-sortable) to `true`.
+    - Set [`pageable`](slug:api_grid_gridprops#toc-pageable) to `true`.
+    - Initialize the `dataResult` empty array.
 
-```js
-const skip = ref<number | undefined>(0);
-const take = ref<number | undefined>(10);
-const sort = ref<SortDescriptor[] | undefined>([
-  { field: "ProductName", dir: "asc" }
-]);
-```
+    ```js
+    <script lang="ts">
+    const skip = ref<number | undefined>(0);
+    const take = ref<number | undefined>(10);
+    const pageable = ref(true);
+    const sortable = ref(true);
+    const sort = ref<SortDescriptor[] | undefined>([
+      { field: "ProductName", dir: "asc" }
+    ]);
+    const columns = [
+      { field: 'ProductName', title: 'Product Name' },
+      { field: 'UnitPrice', title: 'Price' },
+      { field: 'UnitsInStock', title: 'Units in Stock' },
+      { field: 'Discontinued', cell: 'discontinuedTemplate' }
+    ] as GridColumnProps[];
+    const dataResult = ref<DataResult>({ data: [] as any, total: 0 });
+    </script>
+    <template>
+      <grid
+        :data-items="dataResult"
+        :pageable="pageable"
+        :sortable="sortable"
+        :columns="columns"
+        :skip="skip"
+        :take="take"
+        :sort="sort"
+      ></grid>
+    </template>
+    ```
+
+1. Inside the `onMounted` set the initial `dataState`. This allows the Grid to have the processed data ready for displaying when rendered for the first time.
+
+    ```js
+    <script lang="ts" setup>
+    onMounted(() => {
+      const dataState: State = {
+        skip: skip.value,
+        take: take.value,
+        sort: sort.value,
+      };
+      dataResult.value = process(products, dataState);
+    });
+    ```
+
+1. Inside the `script` tag handle the `dataStateChange` event and implement a `createAppState` helper method:
+
+   * The `dataStateChange` event is triggered when the user interacts with the Grid and calls the `createAppState` helper method.
+   * The `createAppState` helper method will update the component's state based on the Grid's current data state (`skip`, `take`, `sort`).
+   * The `dataResult` is updated with the newly processed data and causes the Grid to re-render and display the data according to the new state.
+
+    ```js
+    <script lang="ts" setup>
+
+    const createAppState = (dataState: State) => {
+      take.value = dataState.take;
+      skip.value = dataState.skip;
+      sort.value = dataState.sort;
+    };
+
+    const dataStateChange = (event: GridDataStateChangeEvent) => {
+      createAppState(event.data);
+      dataResult.value = process(products, {
+        skip: event.data.skip,
+        take: event.data.take,
+        sort: event.data.sort,
+      });
+    };
+
+   </script>
+    ```
+
+1. Re-define the Grid declaration to allow paging and sorting:
+
+    * Set Grid data to `data-items="dataResult"`&mdash;With paging enabled, the `data` option must contain only the items for the current page.
+    * Set the `pageable` and `sortable` props.
+    * Set the `skip`, `take`, and `sort` props that configure paging and sorting.
+    * Bind the `@datastatechange` event of the Grid to the `dataStateChange` method to handle the user interactions.
+
+    ```html
+    <template>
+      <grid
+        :data-items="dataResult"
+        :pageable="pageable"
+        :sortable="sortable"
+        :columns="columns"
+        :skip="skip"
+        :take="take"
+        :sort="sort"
+        @datastatechange="dataStateChange"
+      ></grid>
+    </template>
+    ```
+
+That's it. You now have a Data Grid configured for paging and sorting.
 
+> Historically, all Kendo UI for Vue native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/).
 
 ## Get the Complete Source Code
 
diff --git a/docs/getting-started/javascript-options-api.md b/docs/getting-started/javascript-options-api.md
index 5d163352..cc91bd4a 100644
--- a/docs/getting-started/javascript-options-api.md
+++ b/docs/getting-started/javascript-options-api.md
@@ -7,43 +7,34 @@ brand: getting-started
 heading: Get Started
 position: 10
 ---
-
+ 
 # Get Started with Kendo UI for Vue
-
-> Prefer video tutorials? How about a free Telerik UI onboarding course? Check out the [Kendo UI for Vue with TypeScript](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) training in [Telerik Virtual Classroom](https://learn.telerik.com/learn).
-
+ 
 This tutorial will help you develop a simple app that includes a native Vue Data Grid component. To achieve this, you will build a project using [Vite](https://vitejs.dev/) and the [Vue Options API](https://vuejs.org/guide/typescript/options-api) paired with JavaScript.
-
-
+ 
+ 
 >Curious about TypeScript or the Composition API? This tutorial comes in several additional variants:
 >* [Kendo UI for Vue with TypeScript and the Composition API](slug:getting_started_typescript_composition_api)
 >* [Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_api)
 >* [Kendo UI for Vue with the Composition API and Nuxt 3](slug:getting_started_nuxt_3)
-
-> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/).
-
+ 
 ## Create the Vue Project
-
+ 
 The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite).
-
-
+ 
+ 
 > You can use both NPM and Yarn to create the project and import the Kendo UI for Vue components. This tutorial demonstrates only the NPM approach.
-
+ 
 1. Create the Vue project:
-
+ 
     ```sh
     npm create vite@latest
     ```
-    <!--- 
-    ```sh
-    yarn create vite
-    ```
-    --->
-
+ 
 1. Enter the project name, for example, `my-app`.
-
+ 
 1. Select the Vue framework by using the arrow keys.
-
+ 
     ```sh
     ? Select a framework: » - Use arrow-keys. Return to submit.
         Vanilla
@@ -51,9 +42,9 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o
         React
         ...
     ```
-
+ 
 1. Select the JavaScript framework variant.
-
+ 
     ```sh
     ? Select a variant: » - Use arrow-keys. Return to submit.
         TypeScript
@@ -61,195 +52,260 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o
         ...
     ```
 1. Run the newly created project by executing the following commands:
-
+ 
     ```sh
     cd my-app
     npm install
     npm run dev
     ```
-
+ 
 ## Clean Up the Generated Project
-
+ 
 Before you start playing with Kendo UI for Vue, clean up the sample app created by Vite:
-
+ 
 1. Delete the `HelloWorld.vue` file in the `src/components` folder.
 1. Remove everything in the `src/App.vue` file and leave it blank.
 1. Delete the `import './style.css'` line in the `src/main.js` file.
-1. Clear the script tag in `src/App.vue` for Options API configuration: 
-  ```html-no-run
-  <script>
-  </script>
-  ```
-
+ 
 Now that the project is clean, you can start developing the sample application.
-
-
+ 
 ## Add Application Data
-
+ 
 Components like the Grid need some data that they can display, so, in this step, you will add a file with sample data:
-
-1. In the `src` folder, create a new folder called `appdata` where you will place the JSON file with the data.
-
-1. Create a new `src/appdata/categories.json` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api/src/appdata/categories.json).json) and paste it into the `products.json` file.
-
-1. Create a new `src/appdata/products.json` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api/src/appdata/products.json).
-json) and paste it into the `products.json` file.
-
-
+ 
+1. In the `src` folder, create a new folder called `appdata` where you will place the JSON files with the data.
+ 
+1. Create a new `src/appdata/products.json` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api/src/appdata/products.json) and paste it into the `products.json` file.
+ 
+ 
 ## Install the Data Grid Component
-
+ 
 Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. For example, the name of the Grid package is `@progress/kendo-vue-grid`. To use the Grid in your app, add the component and its [dependencies](https://www.telerik.com/kendo-vue-ui/components/grid/#toc-dependencies):
-
-Kendo UI for Vue is a rich suite of many modular components. For our dashboard example, we’ll use three of these components: The Grid, the DropDownList and the Window.
-
+ 
 ```sh
 npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup
 ```
-<!---
-```sh
-yarn add @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup
-```
---->
-
-
+ 
 ## Import the CSS Styles
-
+ 
 Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles) available as separate NPM packages. To style the components, you can use each theme as is or [customize](slug:customizingthemes) it to your liking.
-
+ 
 1. Install the [Default theme](https://www.telerik.com/kendo-vue-ui/components/styling/theme-default/):
-
+ 
     ```sh
       npm install --save @progress/kendo-theme-default
     ```
-    <!---
-    ```sh
-    yarn add --save @progress/kendo-theme-default
-    ```
-    --->
-
-1. In the `src/App.vue` file, import the CSS files provided by the installed theme package:  
-
+ 
+1. In the `src/App.vue` file, add a `<script>` block and import the CSS files provided by the installed theme package:
+ 
     ```js
-      import '@progress/kendo-theme-default/dist/all.css';
+      <script>
+        import '@progress/kendo-theme-default/dist/all.css';
+      </script>
     ```
-
-You can add any additional custom styles in the `<styles>` tag of the `src/App.vue` file.
-
-
-
+ 
+To add any custom styles to your app, insert a `<styles>` tag in the `src/App.vue` file and place your styles there.
+ 
 ## Add a Vue Data Grid Component
-
+ 
 Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application:
-
-1. In the `src/App.vue` file, add a `<script>` block and import the Grid and its data:
-
-```js
-import products from './appdata/products.json';
-import { process } from '@progress/kendo-data-query';
-import { Grid } from '@progress/kendo-vue-grid';
-```
-
+ 
+1. In the `<script>` block of the `src/App.vue` file, import the Grid and its data. In addition, the `process` function from the [Data Query](https://www.telerik.com/kendo-vue-ui/components/dataquery/) package will allow you to apply data operations like sorting, paging, and filtering.
+ 
+    ```js
+      import products from './appdata/products.json';
+      import { process } from '@progress/kendo-data-query';
+      import { Grid } from '@progress/kendo-vue-grid';
+    ```
+ 
 1. Add a `<template>` block with a simple heading and create a Data Grid. Bind it to the `products` data:
-
+ 
     ```html
       <template>
           <h1>Hello Kendo UI for Vue!</h1>
-          <grid 
+          <grid
             :data-items="products"
             :columns="columns"
           ></grid>
       </template>
     ```
-
+ 
 1. Define the Grid in the `<script>` configuration:
 
-```js
-export default {
-  name: 'App',
-  components: {
-    'grid': Grid,
-  },
-//..............
-```
+    ```js
+    export default {
+      name: 'App',
+      components: {
+        grid: Grid,
+      },
+    }
+    ```
 
-In the data options add the following lines:
+1. In the `data` options of the Grid:
 
-```js
-data: function() {
-  return {
-    categories: categories,
-    products: products,
-      columns: [
-          { field: 'ProductName', title: 'Product Name'},
+   * Load the data from the `products` file.
+   * Define user friendly column names.
+
+    ```js
+    data: function() {
+      return {
+        products: products,
+        columns: [
+          { field: 'ProductName', title: 'Product Name' },
           { field: 'UnitPrice', title: 'Price' },
           { field: 'UnitsInStock', title: 'Units in Stock' },
-          { field: 'Discontinued'}
-      ]
-    //..............
-  }
-}
-```
+          { field: 'Discontinued' }
+        ],
+      };
+    },
+    ```
 
-These steps let you render a very basic Grid by running `npm run dev` and navigating to the local URL displayed in the terminal.
+After completing all the steps above, your `App.vue` will look like this:
 
-> Notice the `No valid license found` message and the watermark in the Grid. They are informational and encourage you to activate your trial or commercial license and to [add a license file to your application](slug:my_license_vue). Once you complete these licensing steps, the license message and the watermark will disappear.
+```js
+  <script>
+    import "@progress/kendo-theme-default/dist/all.css";
+    import products from "./appdata/products.json";
+    import { process } from "@progress/kendo-data-query";
+    import { Grid } from "@progress/kendo-vue-grid";
+
+    export default {
+      name: "App",
+      components: {
+        grid: Grid,
+      },
+      data: function () {
+        return {
+          products: products,
+          columns: [
+            { field: "ProductName", title: "Product Name" },
+            { field: "UnitPrice", title: "Price" },
+            { field: "UnitsInStock", title: "Units in Stock" },
+            { field: "Discontinued" },
+          ],
+        };
+      },
+    };
+  </script>
 
-Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging:
+  <template>
+    <h1>Hello Kendo UI for Vue!</h1>
+    <grid :data-items="products" :columns="columns"></grid>
+  </template>
+```
 
-1. In the Grid declaration, add [paging](slug:paging_grid), [sorting](slug:sorting_grid), and a height style that activates [scrolling](slug:scrollmmodes_grid).
+This sample code lets you run an application with a very basic Grid:
 
-    ```html
-      <template>
-          <h1>Hello Kendo UI for Vue!</h1>
-          <grid 
-            :data-items="products"
-            :columns="columns"
-            :pageable="pageable"
-            :sortable="sortable"
-            :style="{ height: '400px' }"
-          ></grid>
-      </template>
-    ```
+1. Execute the `npm run dev` command.
+1. Navigate to the local URL displayed in the terminal.
+
+> Notice the `No valid license found` message and the watermark in the Grid. They are informational and encourage you to activate your trial or commercial license and to [add a license file to your application](slug:my_license_vue). Once you complete these licensing steps, the license message and the watermark will disappear.
+ 
+## Configure the Vue Data Grid
+
+Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging.
 
 1. Implement the paging and sorting functionality in the `data` option:
 
-  * Set the [page size (`take`)](slug:api_grid_gridprops#toc-take) to 10.
-  * Set the initial [`skip`](slug:api_grid_gridprops#toc-skip) for the paging.
-  * Set the initial [sorting](slug:api_grid_gridprops#toc-sort) by Product name.
+    - Set `sortable` to `true`.
+    - Set `pageable` to `true`.
+    - Set the page size (`take`) to `10` to define how many items are rendered on each page.
+    - Set the initial `skip` value, which allows the Grid to calculate how many items to skip when paging.
+    - Set the initial sorting by product name.
+    - Initialize the `dataResult` empty array, which holds the results from the sorting and paging.
 
     ```js
-    <script>
       data: function() {
         return {
-        sortable: true,
-        skip: 0,
-        take: 10,
-        sort: [
-          { field: "ProductName", dir: "asc" }
-        ],
-         //..............
-       }
+          products: products,
+          sortable: true,
+          pageable: true,
+          skip: 0,
+          take: 10,
+          sort: [
+            { field: "ProductName", dir: "asc" }
+          ],
+          columns: [
+            { field: 'ProductName', title: 'Product Name' },
+            { field: 'UnitPrice', title: 'Price' },
+            { field: 'UnitsInStock', title: 'Units in Stock' },
+            { field: 'Discontinued', cell: 'discontinuedTemplate' },
+          ],
+          dataResult: [],
+        };
+      },
+    ```
+
+1. Add the `created` hook. Inside, set the initial `dataState`. This allows the Grid to have the processed data ready for displaying when rendered for the first time.
+
+    ```js
+      created() { 
+        const dataState = {
+          skip: this.skip,
+          take: this.take,
+          sort: this.sort,
+        }
+        this.dataResult = process(products, dataState)
+      },
+    ```
+
+1. Add the `methods` option. Inside handle the `dataStateChange` event and implement a `createAppState` helper method:
+
+   * The `dataStateChange` event is triggered when the user interacts with the Grid and calls the `createAppState` helper method.
+   * The `createAppState` helper method will update the component's state based on the Grid's current data state (`skip`, `take`, `sort`).
+   * The `dataResult` is updated with the newly processed data and causes the Grid to re-render and display the data according to the new state.
+
+    ```js
+      methods: {
+        createAppState: function (dataState) {
+          this.take = dataState.take
+          this.skip = dataState.skip
+          this.sort = dataState.sort
+        },
+        dataStateChange(event) {
+          this.createAppState(event.data)
+          this.dataResult = process(products, {
+            skip: this.skip,
+            take: this.take,
+            sort: this.sort,
+          })
+        },
       }
-      </script>
+    ```
+
+1. Re-define the Grid declaration to allow paging and sorting:
+
+    * Set Grid data to `data-items="dataResult"`&mdash;With paging enabled, the `data` option must contain only the items for the current page.
+    * Set the `pageable` and `sortable` props.
+    * Set the `skip`, `take`, and `sort` props that configure paging and sorting.
+    * Bind the `@datastatechange` event of the Grid to the `dataStateChange` method to handle the user interactions.
+
+    ```html
       <template>
-        <grid 
-        :data-items="products"
-        :columns="columns"
-        :skip="skip"
-        :take="take" 
-        :sort="sort"
+        <h1>Hello Kendo UI for Vue!</h1>
+        <grid
+          :data-items="dataResult"
+          :pageable="pageable"
+          :sortable="sortable"
+          :columns="columns"
+          :skip="skip"
+          :take="take"
+          :sort="sort"
+          @datastatechange="dataStateChange"
         ></grid>
-        </template>
+      </template>
     ```
 
+That's it. You now have a Data Grid configured for paging and sorting.
 
-## Get the Complete Source Code
+> Historically, all Kendo UI for Vue native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/).
 
+## Get the Complete Source Code
+ 
 Your Kendo UI for Vue Getting Started application is complete! You can download and run the complete sample application from the [kendo-vue GitHub repository](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api). Alternatively, run, fork and [experiment with the application directly in StackBlitz](https://stackblitz.com/edit/vue3-vite-starter-75eowq?file=src%2FApp.vue).
-
-
+ 
 ## Next Steps
-
+ 
 * [Activate Your Kendo UI for Vue License](slug:my_license_vue)
 * [Create Projects Faster with the Kendo UI for Vue VS Code Extension](slug:getting_started_vscode)
 * [Take a Free Entry-Level Kendo UI for Vue (with TypeScript) Course](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
\ No newline at end of file
diff --git a/docs/getting-started/typescript-composition-api.md b/docs/getting-started/typescript-composition-api.md
index 49f99030..98c4f58b 100644
--- a/docs/getting-started/typescript-composition-api.md
+++ b/docs/getting-started/typescript-composition-api.md
@@ -10,8 +10,6 @@ position: 20
 
 # Get Started with Kendo UI for Vue
 
-> Prefer video tutorials? How about a free Telerik UI onboarding course? Check out the [Kendo UI for Vue with TypeScript](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) training in [Telerik Virtual Classroom](https://learn.telerik.com/learn).
-
 This tutorial will help you develop a simple app that includes a native Vue Data Grid component. To achieve this, you will build a project using [Vite](https://vitejs.dev/) and the [Vue Composition API](https://vuejs.org/guide/introduction.html#composition-api) paired with TypeScript.
 
 
@@ -20,9 +18,6 @@ This tutorial will help you develop a simple app that includes a native Vue Data
 >* [Kendo UI for Vue with JavaScript and the Options API](slug:getting_started_javascript_options_api)
 >* [Kendo UI for Vue with the Composition API and Nuxt 3](slug:getting_started_nuxt_3)
 
-> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/).
-
-
 ## Create the Vue Project
 
 The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite).
@@ -34,12 +29,7 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o
     ```sh
     npm create vite@latest
     ```
-    <!--- 
-    ```sh
-    yarn create vite
-    ```
-    --->
-
+    
 1. Enter the project name, for example, `my-app`.
 
 1. Select the Vue framework by using the arrow keys.
@@ -83,10 +73,9 @@ Now that the project is clean, you can start developing the sample application.
 
 Components like the Grid need some data that they can display, so, in this step, you will add a file with sample data:
 
-1. Create a new `src/appdata/products.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-composition-api/src/appdata/categories.ts) and paste it into the `products.ts` file.
-
-1. Create a new `src/appdata/categories.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-composition-api/src/appdata/categories.ts) and paste it into the `products.ts` file.
-
+1. In the `src` folder, create a new folder called `appdata`. 
+2. In the `appdata` folder, create a new file called `products.ts`.
+3. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/blob/master/getting-started-typescript-composition-api/src/appdata/products.ts) and paste it into the `products.ts` file.
 
 ## Install the Data Grid Component
 
@@ -95,11 +84,7 @@ Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`.
 ```sh
 npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup
 ```
-<!---
-```sh
-yarn add @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup
-```
---->
+
 
 ## Import the CSS Styles
 
@@ -110,140 +95,250 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
     ```sh
       npm install --save @progress/kendo-theme-default
     ```
-    <!---
-    ```sh
-    yarn add --save @progress/kendo-theme-default
-    ```
-    --->
 
-1. In the `src/App.vue` file, import the CSS files provided by the installed theme package:  
+
+1. In the `src/App.vue` file, add a `<script>` block and import the CSS files provided by the installed theme package:
 
     ```js
-      import '@progress/kendo-theme-default/dist/all.css';
+      <script lang="ts">
+        import '@progress/kendo-theme-default/dist/all.css';
+      </script>
     ```
 
-You can add any additional custom styles in the `<styles>` tag of the `src/App.vue` file.
-
-
+To add any custom styles to your app, insert a `<styles>` tag in the `src/App.vue` file and place your styles there.
 
 ## Add a Vue Data Grid Component
 
 Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application:
 
-1. In the `src/App.vue` file, add a `<script>` block and import the Grid and its data:
+1. In the `<script>` block of the `src/App.vue` file, import the Grid and its data. In addition, the [`GridColumnProps`](https://www.telerik.com/kendo-vue-ui/components/grid/api/GridColumnProps/) interface allows you to assign props to the Grid columns, for example, to define column names.
 
     ```js
-      <script>
-        import { ref, onMounted, defineComponent } from 'vue';
-        import products from './appdata/products.ts';
-        import { process } from '@progress/kendo-data-query';
-        import { Grid } from '@progress/kendo-vue-grid';
-      </script>
+    import { defineComponent } from 'vue';
+    import { productsData } from './appdata/products';
+    import { Grid, GridColumnProps } from '@progress/kendo-vue-grid';                    
     ```
 
 1. Add a `<template>` block with a simple heading and create a Data Grid. Bind it to the `products` data:
 
     ```html
-      <template>
-          <h1>Hello Kendo UI for Vue!</h1>
-          <grid 
-            :data-items="products"
-            :columns="columns"
-          ></grid>
-      </template>
+    <template>
+        <h1>Hello Kendo UI for Vue!</h1>
+        <grid
+          :data-items="products"
+          :columns="columns"
+        ></grid>
+    </template>
     ```
 
 1. Define the Grid in the `<script>` configuration:
 
-```js
-import { defineComponent } from 'vue';
-  components: {
-    'grid': Grid,
-  },
-//..............
-```
+    ```js
+    export default defineComponent({
+      components: {
+        grid: Grid,
+      },
+    });
+    ```
+
+1. In the `setup` function of the Grid:
+
+   * Load the data from the `products` file.
+   * Define user friendly column names.
+
+
+    ```js
+    setup() {
+      const products = productsData;
+      const columns = [
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'UnitPrice', title: 'Price' },
+        { field: 'UnitsInStock', title: 'Units in Stock' },
+        { field: 'Discontinued' }
+      ] as GridColumnProps[];
+
+      return {
+        columns, products
+      }
+    }
+    ```
 
-In the data options add the following lines:
+After completing all the steps above, your `App.vue` will look like this:
 
 ```js
-setup() {
-    //..............
-    const products = productsData;
-    const columns = [
-      { field: 'ProductName', title: 'Product Name' },
-      { field: 'UnitPrice', title: 'Price' },
-      { field: 'UnitsInStock', title: 'Units in Stock' },
-      { field: 'Discontinued' }
-    ] as GridColumnProps[];
-
-    return {
-      products, columns, ........
+<script lang="ts">
+  import '@progress/kendo-theme-default/dist/all.css';
+  import { defineComponent } from 'vue';
+  import { productsData } from './appdata/products';
+  import { Grid, GridColumnProps } from '@progress/kendo-vue-grid';
+
+  export default defineComponent({
+    components: {
+      grid: Grid,
+    },
+
+    setup() {
+      const products = productsData;
+      const columns = [
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'UnitPrice', title: 'Price' },
+        { field: 'UnitsInStock', title: 'Units in Stock' },
+        { field: 'Discontinued' }
+      ] as GridColumnProps[];
+
+      return {
+        columns, products
+      }
     }
-}
+  });
+</script>
+
+<template>
+  <h1>Hello Kendo UI for Vue!</h1>
+  <grid :data-items="products" :columns="columns"></grid>
+</template>
 ```
-These steps let you render a very basic Grid by running `npm run dev` and navigating to the local URL displayed in the terminal.
 
-> Notice the `No valid license found` message and the watermark in the Grid. They are informational and encourage you to activate your trial or commercial license and to [add a license file to your application](slug:my_license_vue). Once you complete these licensing steps, the license message and the watermark will disappear.
+This sample code lets you run an application with a very basic Grid:
+
+1. Execute the `npm run dev` command.
+1. Navigate to the local URL displayed in the terminal.
 
-Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging:
+> Notice the `No valid license found` message and the watermark in the Grid. They are informational and encourage you to activate your trial or commercial license and to [add a license file to your application](slug:my_license_vue). Once you complete these licensing steps, the license message and the watermark will disappear.
 
-1. In the Grid declaration, add [paging](slug:paging_grid), [sorting](slug:sorting_grid), and a height style that activates [scrolling](slug:scrollmmodes_grid).
+## Configure the Vue Data Grid
 
-    ```html
-      <template>
-          <h1>Hello Kendo UI for Vue!</h1>
-          <grid 
-            :data-items="products"
-            :columns="columns"
-            :pageable="pageable"
-            :sortable="sortable"
-            :style="{ height: '400px' }"
-          ></grid>
-      </template>
-    ```
+Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging.
 
- 1. Implement the paging and sorting functionality in the `data` option:
+1. Implement the paging and sorting functionality in the `setup` function:
 
-  * Set the [page size (`take`)](slug:api_grid_gridprops#toc-take) to 10.
-  * Set the initial [`skip`](slug:api_grid_gridprops#toc-skip) for the paging.
-  * Set the initial [sorting](slug:api_grid_gridprops#toc-sort) by Product name.
+    - Set the [page size (`take`)](slug:api_grid_gridprops#toc-take) to 10.
+    - Set the initial [`skip`](slug:api_grid_gridprops#toc-skip) for the paging.
+    - Set the initial [sorting](slug:api_grid_gridprops#toc-sort) by Product name.
+    - Set [`sortable`](slug:api_grid_gridprops#toc-sortable) to `true`.
+    - Set [`pageable`](slug:api_grid_gridprops#toc-pageable) to `true`.
+    - Initialize the `dataResult` empty array.
     
-```js
-setup() {
-    //..............
-    const pageable = ref(true);
-    const take = ref<number | undefined>(10);
-    const skip = ref<number | undefined>(0);
-    const sort = ref<SortDescriptor[] | undefined>([
-      { field: "ProductName", dir: "asc" }
-    ]);
-    //..............
-
-    return {
-      pageable, sortable, ........
+    ```js
+    <script lang="ts">
+    setup() {
+      const products = productsData;
+      const pageable = ref(true);
+      const take = ref<number | undefined>(10);
+      const skip = ref<number | undefined>(0);
+      const sortable = ref(true);
+      const sort = ref<SortDescriptor[] | undefined>([
+        { field: "ProductName", dir: "asc" }
+      ]);
+      const columns = [
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'UnitPrice', title: 'Price' },
+        { field: 'UnitsInStock', title: 'Units in Stock' },
+        { field: 'Discontinued', cell: 'discontinuedTemplate' }
+      ] as GridColumnProps[];
+      const dataResult = ref<DataResult>({ data: [] as any, total: 0 });
+
+      return {
+        pageable, sortable, take, skip, sort, columns 
+      }
     }
-}
-```
-* Configure data operation settings and the initial state of the Grid data. For example:
-	* The initial [skip](slug:api_grid_gridprops#toc-skip) will be the first one.
-	* The page [size (take)](slug:api_grid_gridprops#toc-take) will be 10.
-	* The Grid will be [initially sorted](slug:api_grid_gridprops#toc-sort) by Product Name.
-	* We will save all these settings in data properties and add them to the Grid using the below code:
-```js
-setup() {
-    //..............
-    const skip = ref<number | undefined>(0);
-    const take = ref<number | undefined>(10);
-    const sort = ref<SortDescriptor[] | undefined>([
-      { field: "ProductName", dir: "asc" }
-    ]);
-    //..............
-
-    return {
-      skip, take, sort, ........
+    </script>
+    <template>
+      <grid
+        :data-items="dataResult"
+        :pageable="pageable"
+        :sortable="sortable"
+        :columns="columns"
+        :skip="skip"
+        :take="take"
+        :sort="sort"
+      ></grid>
+    </template>
+    ```
+
+1. Set the initial `dataState` in the `onMounted` hook. This allows the Grid to have the processed data ready for displaying when rendered for the first time.
+
+    ```js
+    <script lang="ts">
+    setup() {
+
+      onMounted(() => {
+        const dataState = {
+          skip: skip.value,
+          take: take.value,
+          sort: sort.value,
+        };
+        dataResult.value = process(products, dataState);
+      });
     }
-}
-```
+    </script>
+    ```
+
+
+1. Inside the `setup` method handle the `dataStateChange` event and implement a `createAppState` helper method:
+
+   * The `dataStateChange` event is triggered when the user interacts with the Grid and calls the `createAppState` helper method.
+   * The `createAppState` helper method will update the component's state based on the Grid's current data state (`skip`, `take`, `sort`).
+   * The `dataResult` is updated with the newly processed data and causes the Grid to re-render and display the data according to the new state.
+
+    ```js
+    <script lang="ts">
+    setup() {
+      const createAppState = (dataState: State) => {
+        take.value = dataState.take;
+        skip.value = dataState.skip;
+        sort.value = dataState.sort;
+      };
+
+      const dataStateChange = (event: GridDataStateChangeEvent) => {
+        createAppState(event.data);
+          dataResult.value = process(products, {
+            skip: event.data.skip,
+            take: event.data.take,
+            sort: event.data.sort,
+          });
+      };
+
+      return {
+        dataResult,
+        pageable,
+        sortable,
+        columns,
+        skip,
+        take,
+        sort,
+        dataStateChange,
+      };
+    },
+    </script>
+    ```
+  
+1. Re-define the Grid declaration to allow paging and sorting:
+
+    * Set Grid data to `data-items="dataResult"`&mdash;With paging enabled, the `data` option must contain only the items for the current page.
+    * Set the `pageable` and `sortable` props.
+    * Set the `skip`, `take`, and `sort` props that configure paging and sorting.
+    * Bind the `@datastatechange` event of the Grid to the `dataStateChange` method to handle the user interactions.
+    
+    ```html
+    <template>
+      <h1>Hello Kendo UI for Vue!</h1>
+      <grid
+        :data-items="dataResult"
+        :pageable="pageable"
+        :sortable="sortable"
+        :columns="columns"
+        :skip="skip"
+        :take="take"
+        :sort="sort"
+        @datastatechange="dataStateChange"
+      ></grid>
+    </template>
+    ```
+
+That's it. You now have a Data Grid configured for paging and sorting.
+
+> Historically, all Kendo UI for Vue native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/).
 
 ## Get the Complete Source Code
 
@@ -253,4 +348,4 @@ Your Kendo UI for Vue Getting Started application is complete! You can download
 
 * [Activate Your Kendo UI for Vue License](slug:my_license_vue)
 * [Create Projects Faster with the Kendo UI for Vue VS Code Extension](slug:getting_started_vscode)
-* [Take a Free Entry-Level Kendo UI for Vue (with TypeScript) Course](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
\ No newline at end of file
+* [Take a Free Entry-Level Kendo UI for Vue (with TypeScript) Course](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
diff --git a/docs/getting-started/typescript-options-api.md b/docs/getting-started/typescript-options-api.md
index 56ffca2a..56f8541d 100644
--- a/docs/getting-started/typescript-options-api.md
+++ b/docs/getting-started/typescript-options-api.md
@@ -11,9 +11,6 @@ position: 30
 
 # Get Started with Kendo UI for Vue
 
-> Prefer video tutorials? How about a free Telerik UI onboarding course? Check out the [Kendo UI for Vue with TypeScript](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) training in [Telerik Virtual Classroom](https://learn.telerik.com/learn).
-
-
 This tutorial will help you develop a simple app that includes a native Vue Data Grid component. To achieve this, you will build a project using [Vite](https://vitejs.dev/) and the [Vue Composition API](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api) paired with TypeScript.
 
 >Curious about JavaScript or the Composition API? This tutorial comes in several additional variants:
@@ -21,9 +18,6 @@ This tutorial will help you develop a simple app that includes a native Vue Data
 >* [Kendo UI for Vue with JavaScript and the Options API](slug:getting_started_javascript_options_api)
 >* [Kendo UI for Vue with the Composition API and Nuxt 3](slug:getting_started_nuxt_3)
 
-
-> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/).
-
 ## Create the Vue Project
 
 The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite).
@@ -36,11 +30,6 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o
     ```sh
     npm create vite@latest
     ```
-    <!--- 
-    ```sh
-    yarn create vite
-    ```
-    --->
 
 1. Enter the project name, for example, `my-app`.
 
@@ -77,11 +66,6 @@ Before you start playing with Kendo UI for Vue, clean up the sample app created
 1. Delete the `HelloWorld.vue` file in the `src/components` folder.
 1. Remove everything in the `src/App.vue` file and leave it blank.
 1. Delete the `import './style.css'` line in the `src/main.ts` file.
-1. Clear the script tag in `src/App.vue` for Options API configuration: 
-  ```html-no-run
-  <script>
-  </script>
-  ```
 
 Now, when we are ready with the blank Vue project, we can continue the development of our sample application. 
 
@@ -89,9 +73,8 @@ Now, when we are ready with the blank Vue project, we can continue the developme
 
 Components like the Grid need some data that they can display, so, in this step, you will add a file with sample data:
 
-1. Create a new `src/appdata/products.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-composition-api/src/appdata/categories.ts) and paste it into the `products.ts` file.
+1. Create a new `src/appdata/products.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-composition-api/src/appdata/products.ts) and paste it into the `products.ts` file.
 
-1. Create a new `src/appdata/categories.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-composition-api/src/appdata/categories.ts) and paste it into the `products.ts` file.
 
 ## Install the Data Grid Component
 
@@ -100,11 +83,6 @@ Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`.
 ```sh
 npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup
 ```
-<!---
-```sh
-yarn add @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup
-```
---->
 
 ## Import the CSS Styles
 
@@ -115,11 +93,6 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
     ```sh
       npm install --save @progress/kendo-theme-default
     ```
-    <!---
-    ```sh
-    yarn add --save @progress/kendo-theme-default
-    ```
-    --->
 
 1. In the `src/App.vue` file, import the CSS files provided by the installed theme package:  
 
@@ -127,8 +100,7 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
       import '@progress/kendo-theme-default/dist/all.css';
     ```
 
-You can add any additional custom styles in the `<styles>` tag of the `src/App.vue` file.
-
+To add any custom styles to your app, insert a `<styles>` tag in the `src/App.vue` file and place your styles there.
 
 
 ## Add a Vue Data Grid Component
@@ -136,94 +108,264 @@ You can add any additional custom styles in the `<styles>` tag of the `src/App.v
 Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application:
 
 
-1. In the `src/App.vue` file, add a `<script>` block and import the Grid and its data:
+1. In the `<script>` block of the `src/App.vue` file, import the Grid and its data. In addition, the `process` function from the [Data Query](https://www.telerik.com/kendo-vue-ui/components/dataquery/) package will allow you to apply data operations like sorting, paging, and filtering.
 
 
-```js
-import { products } from './appdata/products';
-import { process } from '@progress/kendo-data-query';
-import { Grid } from '@progress/kendo-vue-grid';
-```
+    ```js
+    import { productsData } from './appdata/products';
+    import { process, SortDescriptor, State, DataResult } from '@progress/kendo-data-query';
+    import { Grid, GridColumnProps, GridDataStateChangeEvent } from '@progress/kendo-vue-grid';
+    ```
+
 
 1. Add a `<template>` block with a simple heading and create a Data Grid. Bind it to the `products` data:
 
-```html
-<grid
-  :data-items="products"
-  :columns="columns"
-></grid>
-```
+    ```html
+    <template>
+        <h1>Hello Kendo UI for Vue!</h1>
+        <grid
+          :data-items="products"
+          :columns="columns"
+        ></grid>
+    </template>
+    ```
 
 1. Define the Grid in the `<script>` configuration:
 
-```js
-import { defineComponent } from 'vue';
-  name: 'App',
-  components: {
-    'grid': Grid,
-  },
-//..............
-```
+    ```js
+    export default {
+      name: 'App',
+      components: {
+        grid: Grid,
+      },
+    }
+    ```
+    
+1. In the `data` options of the Grid:
 
-In the data options add the following lines:
+   * Load the data from the `products` files.
+   * Define user friendly column names.
 
-```js
-data: function() {
-  return {
-    categories: categories,
-    products: products,
-      columns: [
-          { field: 'ProductName', title: 'Product Name'},
+    ```js
+    data: function() {
+      return {
+        products: productsData,
+        columns: [
+          { field: 'ProductName', title: 'Product Name' },
           { field: 'UnitPrice', title: 'Price' },
           { field: 'UnitsInStock', title: 'Units in Stock' },
-          { field: 'Discontinued'}
-      ] as GridColumnProps[],
-    //..............
-  }
-}
-```
+          { field: 'Discontinued' }
+        ]
+      }
+    }
+    ```
+ 
 
 These steps let you render a very basic Grid by running `npm run dev` and navigating to the local URL displayed in the terminal.
 
 > Notice the `No valid license found` message and the watermark in the Grid. They are informational and encourage you to activate your trial or commercial license and to [add a license file to your application](slug:my_license_vue). Once you complete these licensing steps, the license message and the watermark will disappear.
 
-Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging:
+## Add a Vue Data Grid Component
 
-1. In the Grid declaration, add [paging](slug:paging_grid), [sorting](slug:sorting_grid), and a height style that activates [scrolling](slug:scrollmmodes_grid).
+Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application:
+
+1. In the `<script>` block of the `src/App.vue` file, import the Grid and its data. In addition, the `process` function from the [Data Query](https://www.telerik.com/kendo-vue-ui/components/dataquery/) package will allow you to use data operations like sorting, paging, and filtering.
+
+    ```js
+    import { products } from './appdata/products';
+    import { process } from '@progress/kendo-data-query';
+    import { Grid } from '@progress/kendo-vue-grid';
+    ```
+
+1. Add a `<template>` block with a simple heading and create a Data Grid. Bind it to the `products` data:
+
+    ```html
+    <template>
+        <h1>Hello Kendo UI for Vue!</h1>
+        <grid
+          :data-items="products"
+          :columns="columns"
+        ></grid>
+    </template>
+    ```
+
+1. Define the Grid in the `<script>` configuration:
+
+    ```js
+    export default {
+      name: 'App',
+      components: {
+        grid: Grid,
+      },
+    }
+    ```
+
+1. In the `data` options of the Grid:
+
+   * Load the data from `products` file.
+   * Define user friendly column names.
+
+    ```js
+    data: function() {
+      return {
+        products: products,
+        columns: [
+          { field: 'ProductName', title: 'Product Name' },
+          { field: 'UnitPrice', title: 'Price' },
+          { field: 'UnitsInStock', title: 'Units in Stock' },
+          { field: 'Discontinued' }
+        ]
+      }
+    }
+    ```
+
+
+After completing all the steps above, your `App.vue` will look like this:
+
+    ```js
+    <script lang="ts">
+    import { productsData } from './appdata/products';
+    import { process, SortDescriptor, State, DataResult } from '@progress/kendo-data-query';
+    import { Grid, GridColumnProps, GridDataStateChangeEvent } from '@progress/kendo-vue-grid';
+
+    export default {
+      name: 'App',
+      components: {
+        grid: Grid
+      },
+    data: function() {
+      return {
+        products: productsData,
+        columns: [
+          { field: 'ProductName', title: 'Product Name' },
+          { field: 'UnitPrice', title: 'Price' },
+          { field: 'UnitsInStock', title: 'Units in Stock' },
+          { field: 'Discontinued' }
+        ]
+      }
+    }
+  }
+    </script>
+
+    <template>
+    <h1>Hello Kendo UI for Vue!</h1>
+     <grid :data-items="products" :columns="columns"></grid>
+    </template>
+    ```
+
+This sample code lets you run an application with a very basic Grid:
+
+1. Execute the `npm run dev` command.
+1. Navigate to the local URL displayed in the terminal.
+
+> Notice the `No valid license found` message and the watermark in the Grid. They are informational and encourage you to activate your trial or commercial license and to [add a license file to your application](slug:my_license_vue). Once you complete these licensing steps, the license message and the watermark will disappear.
+
+## Configure the Vue Data Grid
+
+Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging.
+
+1. Implement the paging and sorting functionality in the `data` option:
+
+    - Set `sortable` to `true`.
+    - Set `pageable` to `true`.
+    - Set the page size (`take`) to `10` to define how many items are rendered on each page.
+    - Set the initial `skip` value, which allows the Grid to calculate how many items to skip when paging.
+    - Set the initial sorting by product name.
+    - Initialize the `dataResult` empty array, which holds the results from the sorting and paging.
+
+    ```js
+    <script lang="ts">
+    data: function() {
+      return {
+        products: productsData,
+        skip: 0 as number | undefined,
+        take: 10 as number | undefined,
+        pageable: true,
+        sortable: true,
+        sort: [
+          { field: "ProductName", dir: "asc" }
+        ] as SortDescriptor[] | undefined,
+        columns: [
+          { field: 'ProductName', title: 'Product Name' },
+          { field: 'UnitPrice', title: 'Price' },
+          { field: 'UnitsInStock', title: 'Units in Stock' },
+          { field: 'Discontinued', cell: 'discontinuedTemplate' }
+        ] as GridColumnProps[],
+        dataResult: { data: [] as any, total: 0 } as DataResult,
+      }
+    }
+    </script>
+    ```
+
+1. Add the `created` hook. Inside, set the initial `dataState`. This allows the Grid to have the processed data ready for displaying when rendered for the first time.
+
+    ```js
+    <script lang="ts">
+    created() {
+      const dataState: State = {
+        skip: this.skip,
+        take: this.take,
+        sort: this.sort,
+      };
+
+      this.dataResult = process(this.products, dataState);
+    },
+    </script>
+    ```
+
+1. Add the `methods` option. Inside handle the `dataStateChange` event and implement a `createAppState` helper method:
+
+   * The `dataStateChange` event is triggered when the user interacts with the Grid and calls the `createAppState` helper method.
+   * The `createAppState` helper method will update the component's state based on the Grid's current data state (`skip`, `take`, `sort`).
+   * The `dataResult` is updated with the newly processed data and causes the Grid to re-render and display the data according to the new state.
+
+    ```js
+    <script lang="ts">
+    methods: {
+      createAppState: function (dataState: State) {
+        this.take = dataState.take;
+        this.skip = dataState.skip;
+        this.sort = dataState.sort;
+      },
+      dataStateChange(event: GridDataStateChangeEvent) {
+        this.createAppState(event.data);
+        this.dataResult = process(this.products, {
+        skip: this.skip,
+        take: this.take,
+        sort: this.sort
+      });
+      }
+    }
+    </script>
+    ```
+
+1. Re-define the Grid declaration to allow paging and sorting:
+
+    * Set Grid data to `data-items="dataResult"`&mdash;With paging enabled, the `data` option must contain only the items for the current page.
+    * Set the `pageable` and `sortable` props.
+    * Set the `skip`, `take`, and `sort` props that configure paging and sorting.
+    * Bind the `@datastatechange` event of the Grid to the `dataStateChange` method to handle the user interactions.
 
     ```html
       <template>
-          <h1>Hello Kendo UI for Vue!</h1>
-          <grid 
-            :data-items="products"
-            :columns="columns"
-            :pageable="pageable"
-            :sortable="sortable"
-            :style="{ height: '400px' }"
-          ></grid>
+        <h1>Hello Kendo UI for Vue!</h1>
+        <grid
+          :data-items="dataResult"
+          :pageable="pageable"
+          :sortable="sortable"
+          :columns="columns"
+          :skip="skip"
+          :take="take"
+          :sort="sort"
+          @datastatechange="dataStateChange"
+        ></grid>
       </template>
     ```
 
+That's it. You now have a Data Grid configured for paging and sorting.
 
- 1. Implement the paging and sorting functionality in the `data` option:
+> Historically, all Kendo UI for Vue native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/).
 
-  * Set the [page size (`take`)](slug:api_grid_gridprops#toc-take) to 10.
-  * Set the initial [`skip`](slug:api_grid_gridprops#toc-skip) for the paging.
-  * Set the initial [sorting](slug:api_grid_gridprops#toc-sort) by Product name.
-    
-```js
-data: function() {
-  return {
-    //..............
-    skip: 0 as number | undefined,
-    take: 10 as number | undefined,
-    sort: [
-      { field: "ProductName", dir: "asc" }
-    ] as SortDescriptor[] | undefined,
-    //..............
-  }
-}
-```
 ## Get the Complete Source Code
 
 Your Kendo UI for Vue Getting Started application is complete! You can download and run the complete sample application from the [kendo-vue GitHub repository](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-options-api). Alternatively, run, fork and [experiment with the application directly in StackBlitz](https://stackblitz.com/edit/vite-jco3ua?file=src%2FApp.vue).