diff --git a/client/package.json b/client/package.json
index 207662d93ce8..6304334c0ecf 100644
--- a/client/package.json
+++ b/client/package.json
@@ -44,6 +44,7 @@
     "@popperjs/core": "^2.11.8",
     "@sentry/browser": "^7.74.1",
     "@sentry/vue": "^7.114.0",
+    "@vue/compat": "^3.5.22",
     "@vueuse/core": "^10.5.0",
     "@vueuse/math": "^10.9.0",
     "ace-builds": "^1.39.0",
@@ -115,7 +116,7 @@
     "vega": "^5.30.0",
     "vega-embed": "^6.26.0",
     "vega-lite": "^5.21.0",
-    "vue": "^2.7.16",
+    "vue": "^3.5.18",
     "vue-class-component": "^7.2.6",
     "vue-echarts": "^7.0.3",
     "vue-infinite-scroll": "^2.0.2",
@@ -174,6 +175,7 @@
     "@vitejs/plugin-vue2": "^2.3.4",
     "@vitest/coverage-v8": "^4.0.13",
     "@vitest/ui": "^4.0.13",
+    "@vue/compiler-sfc": "^3.5.22",
     "@vue/test-utils": "^1.3.6",
     "@vue/tsconfig": "^0.4.0",
     "amdi18n-loader": "^0.9.4",
@@ -220,8 +222,8 @@
     "vitest": "^4.0.13",
     "vitest-fail-on-console": "^0.10.1",
     "vitest-location-mock": "^1.0.4",
-    "vue-loader": "^15.11.1",
     "vue-template-compiler": "^2.7.16",
+    "vue-loader": "^17",
     "vue-tsc": "2.2.12",
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1",
diff --git a/client/src/entry/analysis/index.ts b/client/src/entry/analysis/index.ts
index fcdd91ec1371..a509d8e6b9d0 100644
--- a/client/src/entry/analysis/index.ts
+++ b/client/src/entry/analysis/index.ts
@@ -1,3 +1,10 @@
+import { configureCompat } from "@vue/compat";
+
+configureCompat({
+  MODE: 2,
+  SET: true
+});
+
 import { createPinia, PiniaVuePlugin } from "pinia";
 import Vue from "vue";
 
diff --git a/client/src/shim-compat.d.ts b/client/src/shim-compat.d.ts
new file mode 100644
index 000000000000..63e841951be4
--- /dev/null
+++ b/client/src/shim-compat.d.ts
@@ -0,0 +1,5 @@
+declare module '@vue/compat' {
+  import { Component, App, Plugin } from 'vue'
+  export function configureCompat(options: Record<string, any>): void
+  export * from 'vue'
+}
\ No newline at end of file
diff --git a/client/webpack.config.js b/client/webpack.config.js
index f84f24efa8e1..25fdc424a1f4 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -1,7 +1,7 @@
 /* eslint-env node */
 const webpack = require("webpack");
 const path = require("path");
-const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const { VueLoaderPlugin } = require("vue-loader");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const { DumpMetaPlugin } = require("dumpmeta-webpack-plugin");
@@ -80,7 +80,7 @@ module.exports = (env = {}, argv = {}) => {
                 buffer: require.resolve("buffer/"),
             },
             alias: {
-                vue$: path.resolve(__dirname, "node_modules/vue/dist/vue.esm.js"),
+                vue$: path.resolve(__dirname, "node_modules/@vue/compat/dist/vue.esm-bundler.js"),
                 jquery$: `${libsBase}/jquery.custom.js`,
                 jqueryVendor$: `${libsBase}/jquery/jquery.js`,
                 storemodern$: "store/dist/store.modern.js",