diff --git a/babel.config.js b/babel.config.js
index ba17966..a6ef69e 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
-}
+}
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
index 11f3b8d..2673ad4 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>vuegrid</title><link href=/css/app.92647ec0.css rel=preload as=style><link href=/css/chunk-vendors.ce506f37.css rel=preload as=style><link href=/js/app.156fd76a.js rel=preload as=script><link href=/js/chunk-vendors.bdc5ef1a.js rel=preload as=script><link href=/css/chunk-vendors.ce506f37.css rel=stylesheet><link href=/css/app.92647ec0.css rel=stylesheet></head><body><noscript><strong>We're sorry but vuegrid doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.bdc5ef1a.js></script><script src=/js/app.156fd76a.js></script></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>vuegrid</title><script defer="defer" src="/js/chunk-vendors.944cd77f.js"></script><script defer="defer" src="/js/app.84de863d.js"></script><link href="/css/app.f2e5939f.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but vuegrid doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
\ No newline at end of file
diff --git a/package.json b/package.json
index e628b5c..38d644b 100644
--- a/package.json
+++ b/package.json
@@ -8,18 +8,18 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@syncfusion/ej2-vue-grids": "^17.3.16",
-    "core-js": "^2.6.5",
-    "vue": "^2.6.10"
+    "@syncfusion/ej2-vue-grids": "^22.1.34",
+    "core-js": "^3.30.1",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.12.0",
-    "@vue/cli-plugin-eslint": "^3.12.0",
-    "@vue/cli-service": "^3.12.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "@babel/core": "^7.21.8",
+    "@babel/eslint-parser": "^7.21.8",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "eslint": "^8.39.0",
+    "eslint-plugin-vue": "^9.11.0"
   },
   "eslintConfig": {
     "root": true,
@@ -27,21 +27,17 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
-    "rules": {},
     "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions"
+    "last 2 versions",
+    "not dead"
   ]
-}
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index ec54e72..85e0c6f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,4 +14,4 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 8d31f39..006173c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,25 +11,29 @@
 </template>
 
 <script>
-import Vue from 'vue';
-import { GridPlugin, Page, Sort, Filter, Group } from '@syncfusion/ej2-vue-grids';
-Vue.use(GridPlugin);
+import { GridComponent, ColumnsDirective, ColumnDirective, Page, Sort, Filter, Group } from '@syncfusion/ej2-vue-grids';
 
 export default {
-  data () {
+  components: {
+    'ejs-grid': GridComponent,
+    'e-columns': ColumnsDirective,
+    'e-column': ColumnDirective
+  },
+  data() {
     return {
-       data: [
-          { OrderID: 10248, CustomerID: 'VINET', Price: 32.38 },
-          { OrderID: 10250, CustomerID: 'HANAR', Price: 65.83 },
-          { OrderID: 10251, CustomerID: 'VICTE', Price: 41.34 },
-          { OrderID: 10252, CustomerID: 'SUPRD', Price: 51.3 },
-          { OrderID: 10253, CustomerID: 'HANAR', Price: 58.17 },
-          { OrderID: 10254, CustomerID: 'CHOPS', Price: 22.98 },
-          { OrderID: 10255, CustomerID: 'RICSU', Price: 148.33 },
-          { OrderID: 10256, CustomerID: 'WELLI', Price: 13.97 },
-          { OrderID: 10249, CustomerID: 'TOMSP', Price: 11.61 },],
-       pageSettings: { pageSize: 5 }
-    }
+      data: [
+        { OrderID: 10248, CustomerID: 'VINET', Price: 32.38 },
+        { OrderID: 10250, CustomerID: 'HANAR', Price: 65.83 },
+        { OrderID: 10251, CustomerID: 'VICTE', Price: 41.34 },
+        { OrderID: 10252, CustomerID: 'SUPRD', Price: 51.3 },
+        { OrderID: 10253, CustomerID: 'HANAR', Price: 58.17 },
+        { OrderID: 10254, CustomerID: 'CHOPS', Price: 22.98 },
+        { OrderID: 10255, CustomerID: 'RICSU', Price: 148.33 },
+        { OrderID: 10256, CustomerID: 'WELLI', Price: 13.97 },
+        { OrderID: 10249, CustomerID: 'TOMSP', Price: 11.61 },
+      ],
+      pageSettings: { pageSize: 5 }
+    };
   },
   provide: {
     grid: [Page, Sort, Filter, Group]
@@ -38,5 +42,5 @@ export default {
 </script>
 
 <style>
-  @import url("https://cdn.syncfusion.com/ej2/material.css");
+@import url("https://cdn.syncfusion.com/ej2/material.css");
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 63eb05f..58cdcf4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,4 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+createApp(App).mount('#app')
\ No newline at end of file
