diff --git a/package.json b/package.json
index d7b3caa3a4..f9a34a32ec 100644
--- a/package.json
+++ b/package.json
@@ -67,8 +67,7 @@
     "@typescript-eslint/parser": "^5.0.0",
     "@typescript-eslint/typescript-estree": "^5.9.1",
     "@unicode/unicode-13.0.0": "^1.0.6",
-    "@vue/compiler-core": "^3.2.45",
-    "@vue/compiler-sfc": "^3.2.45",
+    "@vue/compiler-core": "^3.3.4",
     "@vue/test-utils": "2",
     "babel-loader": "9",
     "benchmark": "^2.1.4",
@@ -123,7 +122,7 @@
     "typescript": "5.0.4",
     "unicode-emoji-utils": "^1.1.1",
     "unidiff": "^1.0.2",
-    "vue": "^3.2.45",
+    "vue": "^3.3.4",
     "vue-class-component": "^8.0.0-rc.1",
     "vue-eslint-parser": "^7.3.0",
     "vue-loader": "17",
diff --git a/packages/cli-lib/BUILD b/packages/cli-lib/BUILD
index ece3a6b6bb..74cef501c6 100644
--- a/packages/cli-lib/BUILD
+++ b/packages/cli-lib/BUILD
@@ -32,7 +32,7 @@ SRCS = glob(["src/**/*.ts"]) + [
 VUE_DEPS = [
     "//:node_modules/@vue/compiler-core",
     "//:node_modules/@babel/types",
-    "//:node_modules/@vue/compiler-sfc",
+    "//:node_modules/vue",
 ]
 
 SRC_DEPS = [
@@ -84,7 +84,7 @@ esbuild(
     srcs = [":dist-esm-esnext"],
     entry_point = "lib_esnext/main.js",
     external = [
-        "@vue/compiler-sfc",
+        "vue",
     ],
     platform = "node",
     target = "node16",
diff --git a/packages/cli-lib/package.json b/packages/cli-lib/package.json
index a5bea4609d..afe3be8320 100644
--- a/packages/cli-lib/package.json
+++ b/packages/cli-lib/package.json
@@ -47,11 +47,11 @@
     "typescript": "^4.7 || 5"
   },
   "peerDependencies": {
-    "@vue/compiler-core": "^3.2.23",
-    "@vue/compiler-sfc": "^3.2.34"
+    "@vue/compiler-core": "^3.3.4",
+    "vue": "^3.3.4"
   },
   "peerDependenciesMeta": {
-    "@vue/compiler-sfc": {
+    "vue": {
       "optional": true
     },
     "@vue/compiler-core": {
diff --git a/packages/cli-lib/src/vue_extractor.ts b/packages/cli-lib/src/vue_extractor.ts
index 80a93312a9..e57ea29c23 100644
--- a/packages/cli-lib/src/vue_extractor.ts
+++ b/packages/cli-lib/src/vue_extractor.ts
@@ -1,4 +1,4 @@
-import {parse} from '@vue/compiler-sfc'
+import {parse} from 'vue/compiler-sfc'
 import type {
   TemplateChildNode,
   SimpleExpressionNode,
diff --git a/packages/cli/integration-tests/BUILD b/packages/cli/integration-tests/BUILD
index 8d6139a6a6..9dbc4776ff 100644
--- a/packages/cli/integration-tests/BUILD
+++ b/packages/cli/integration-tests/BUILD
@@ -48,7 +48,7 @@ jest_test(
         "//:node_modules/@babel/types",
         "//:node_modules/@types/node",
         "//:node_modules/@vue/compiler-core",
-        "//:node_modules/@vue/compiler-sfc",
+        "//:node_modules/vue",
         "//:node_modules/fast-glob",
     ],
     flaky = True,
diff --git a/packages/cli/integration-tests/extract-vue/comp.vue b/packages/cli/integration-tests/extract-vue/comp.vue
index 7af543bd48..74fda64518 100644
--- a/packages/cli/integration-tests/extract-vue/comp.vue
+++ b/packages/cli/integration-tests/extract-vue/comp.vue
@@ -7,6 +7,9 @@
       })
     }}
   </p>
+  <div class="message" v-for="message in messages">
+    {{ message.content }}
+  </div>
 </template>
 
 <script>
@@ -17,6 +20,16 @@ intl.formatMessage({
 </script>
 
 <script lang="ts" setup>
+const messages = ref([
+  {
+    id: 1,
+    content: 'Hey, check out this adorable video, bro!!',
+  },
+  {
+    id: 2,
+    content: 'https://youtu.be/dQw4w9WgXcQ',
+  },
+]);
 const intl = useIntl()
 console.log(intl.formatMessage({defaultMessage: 'script setup'}))
 </script>
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 6342c583d3..de545b6248 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -36,10 +36,10 @@
     "@formatjs/cli-lib": "workspace:*"
   },
   "peerDependencies": {
-    "@vue/compiler-sfc": "^3.2.34"
+    "vue": "^3.3.4"
   },
   "peerDependenciesMeta": {
-    "@vue/compiler-sfc": {
+    "vue": {
       "optional": true
     }
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 89ca7576f2..5e4e50af94 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -163,14 +163,11 @@ importers:
         specifier: ^1.0.6
         version: 1.2.2
       '@vue/compiler-core':
-        specifier: ^3.2.45
-        version: 3.2.45
-      '@vue/compiler-sfc':
-        specifier: ^3.2.45
-        version: 3.2.45
+        specifier: ^3.3.4
+        version: 3.3.4
       '@vue/test-utils':
         specifier: '2'
-        version: 2.0.2(vue@3.2.45)
+        version: 2.0.2(vue@3.3.4)
       babel-loader:
         specifier: '9'
         version: 9.0.0(@babel/core@7.18.5)(webpack@5.73.0)
@@ -331,11 +328,11 @@ importers:
         specifier: ^1.0.2
         version: 1.0.2
       vue:
-        specifier: ^3.2.45
-        version: 3.2.45
+        specifier: ^3.3.4
+        version: 3.3.4
       vue-class-component:
         specifier: ^8.0.0-rc.1
-        version: 8.0.0-rc.1(vue@3.2.45)
+        version: 8.0.0-rc.1(vue@3.3.4)
       vue-eslint-parser:
         specifier: ^7.3.0
         version: 7.11.0(eslint@8.18.0)
@@ -1188,7 +1185,7 @@ packages:
       '@babel/generator': 7.18.12
       '@babel/helper-module-transforms': 7.18.9
       '@babel/helpers': 7.18.9
-      '@babel/parser': 7.20.5
+      '@babel/parser': 7.22.16
       '@babel/template': 7.18.10
       '@babel/traverse': 7.18.11
       '@babel/types': 7.20.5
@@ -1214,7 +1211,7 @@ packages:
       '@babel/helper-compilation-targets': 7.18.9(@babel/core@7.18.10)
       '@babel/helper-module-transforms': 7.18.9
       '@babel/helpers': 7.18.9
-      '@babel/parser': 7.20.5
+      '@babel/parser': 7.22.16
       '@babel/template': 7.18.10
       '@babel/traverse': 7.18.11
       '@babel/types': 7.20.5
@@ -1735,6 +1732,14 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.20.5
+    dev: false
+
+  /@babel/parser@7.22.16:
+    resolution: {integrity: sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.20.5
 
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.17.12(@babel/core@7.18.5):
     resolution: {integrity: sha512-xCJQXl4EeQ3J9C4yOmpTrtVGmzpm2iSzyxbkZHw7UCnZBftHpF/hpII80uWVyVrc40ytIClHjgWGTG1g/yB+aw==}
@@ -3643,7 +3648,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.20.5
+      '@babel/parser': 7.22.16
       '@babel/types': 7.20.5
 
   /@babel/template@7.18.10:
@@ -3651,7 +3656,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.20.5
+      '@babel/parser': 7.22.16
       '@babel/types': 7.20.5
 
   /@babel/traverse@7.18.11:
@@ -3664,7 +3669,7 @@ packages:
       '@babel/helper-function-name': 7.18.9
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.20.5
+      '@babel/parser': 7.22.16
       '@babel/types': 7.20.5
       debug: 4.3.4
       globals: 11.12.0
@@ -4039,7 +4044,7 @@ packages:
       react: ^16.8.4 || ^17.0.0
       react-dom: ^16.8.4 || ^17.0.0
     dependencies:
-      '@babel/parser': 7.20.5
+      '@babel/parser': 7.22.16
       '@babel/traverse': 7.18.11
       '@docusaurus/logger': 2.0.1
       '@docusaurus/utils': 2.0.1(@docusaurus/types@2.0.1)(@swc/core@1.3.56)
@@ -5844,7 +5849,7 @@ packages:
   /@types/babel__template@7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.20.5
+      '@babel/parser': 7.22.16
       '@babel/types': 7.20.5
 
   /@types/babel__traverse@7.17.1:
@@ -6369,7 +6374,7 @@ packages:
   /@vue/compiler-core@3.2.37:
     resolution: {integrity: sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==}
     dependencies:
-      '@babel/parser': 7.20.5
+      '@babel/parser': 7.22.16
       '@babel/types': 7.20.5
       '@vue/shared': 3.2.37
       estree-walker: 2.0.2
@@ -6384,6 +6389,17 @@ packages:
       '@vue/shared': 3.2.45
       estree-walker: 2.0.2
       source-map: 0.6.1
+    dev: false
+
+  /@vue/compiler-core@3.3.4:
+    resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
+    dependencies:
+      '@babel/parser': 7.22.16
+      '@babel/types': 7.20.5
+      '@vue/shared': 3.3.4
+      estree-walker: 2.0.2
+      source-map-js: 1.0.2
+    dev: true
 
   /@vue/compiler-dom@3.2.37:
     resolution: {integrity: sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==}
@@ -6397,6 +6413,14 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.2.45
       '@vue/shared': 3.2.45
+    dev: false
+
+  /@vue/compiler-dom@3.3.4:
+    resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
+    dependencies:
+      '@vue/compiler-core': 3.3.4
+      '@vue/shared': 3.3.4
+    dev: true
 
   /@vue/compiler-sfc@3.2.45:
     resolution: {integrity: sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==}
@@ -6411,33 +6435,84 @@ packages:
       magic-string: 0.25.9
       postcss: 8.4.19
       source-map: 0.6.1
+    dev: false
+
+  /@vue/compiler-sfc@3.3.4:
+    resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
+    dependencies:
+      '@babel/parser': 7.22.16
+      '@vue/compiler-core': 3.3.4
+      '@vue/compiler-dom': 3.3.4
+      '@vue/compiler-ssr': 3.3.4
+      '@vue/reactivity-transform': 3.3.4
+      '@vue/shared': 3.3.4
+      estree-walker: 2.0.2
+      magic-string: 0.30.0
+      postcss: 8.4.19
+      source-map-js: 1.0.2
+    dev: true
 
   /@vue/compiler-ssr@3.2.45:
     resolution: {integrity: sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==}
     dependencies:
       '@vue/compiler-dom': 3.2.45
       '@vue/shared': 3.2.45
+    dev: false
+
+  /@vue/compiler-ssr@3.3.4:
+    resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.3.4
+      '@vue/shared': 3.3.4
+    dev: true
 
   /@vue/reactivity-transform@3.2.45:
     resolution: {integrity: sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==}
     dependencies:
-      '@babel/parser': 7.20.5
+      '@babel/parser': 7.22.16
       '@babel/types': 7.20.5
       '@vue/compiler-core': 3.2.45
       '@vue/shared': 3.2.45
       estree-walker: 2.0.2
       magic-string: 0.25.9
+    dev: false
+
+  /@vue/reactivity-transform@3.3.4:
+    resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
+    dependencies:
+      '@babel/parser': 7.22.16
+      '@babel/types': 7.20.5
+      '@vue/compiler-core': 3.3.4
+      '@vue/shared': 3.3.4
+      estree-walker: 2.0.2
+      magic-string: 0.30.0
+    dev: true
 
   /@vue/reactivity@3.2.45:
     resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
     dependencies:
       '@vue/shared': 3.2.45
+    dev: false
+
+  /@vue/reactivity@3.3.4:
+    resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
+    dependencies:
+      '@vue/shared': 3.3.4
+    dev: true
 
   /@vue/runtime-core@3.2.45:
     resolution: {integrity: sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==}
     dependencies:
       '@vue/reactivity': 3.2.45
       '@vue/shared': 3.2.45
+    dev: false
+
+  /@vue/runtime-core@3.3.4:
+    resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
+    dependencies:
+      '@vue/reactivity': 3.3.4
+      '@vue/shared': 3.3.4
+    dev: true
 
   /@vue/runtime-dom@3.2.45:
     resolution: {integrity: sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==}
@@ -6445,6 +6520,15 @@ packages:
       '@vue/runtime-core': 3.2.45
       '@vue/shared': 3.2.45
       csstype: 2.6.21
+    dev: false
+
+  /@vue/runtime-dom@3.3.4:
+    resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
+    dependencies:
+      '@vue/runtime-core': 3.3.4
+      '@vue/shared': 3.3.4
+      csstype: 3.1.1
+    dev: true
 
   /@vue/server-renderer@3.2.45(vue@3.2.45):
     resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==}
@@ -6454,6 +6538,17 @@ packages:
       '@vue/compiler-ssr': 3.2.45
       '@vue/shared': 3.2.45
       vue: 3.2.45
+    dev: false
+
+  /@vue/server-renderer@3.3.4(vue@3.3.4):
+    resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
+    peerDependencies:
+      vue: 3.3.4
+    dependencies:
+      '@vue/compiler-ssr': 3.3.4
+      '@vue/shared': 3.3.4
+      vue: 3.3.4
+    dev: true
 
   /@vue/shared@3.2.37:
     resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
@@ -6461,14 +6556,19 @@ packages:
 
   /@vue/shared@3.2.45:
     resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
+    dev: false
+
+  /@vue/shared@3.3.4:
+    resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
+    dev: true
 
-  /@vue/test-utils@2.0.2(vue@3.2.45):
+  /@vue/test-utils@2.0.2(vue@3.3.4):
     resolution: {integrity: sha512-E2P4oXSaWDqTZNbmKZFVLrNN/siVN78YkEqs7pHryWerrlZR9bBFLWdJwRoguX45Ru6HxIflzKl4vQvwRMwm5g==}
     peerDependencies:
       vue: ^3.0.1
     dependencies:
       '@vue/compiler-dom': 3.2.37
-      vue: 3.2.45
+      vue: 3.3.4
     dev: true
 
   /@wdio/config@6.12.1:
@@ -8775,6 +8875,7 @@ packages:
 
   /csstype@2.6.21:
     resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+    dev: false
 
   /csstype@3.1.0:
     resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
@@ -11477,7 +11578,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       '@babel/core': 7.18.10
-      '@babel/parser': 7.20.5
+      '@babel/parser': 7.22.16
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.0
@@ -12554,7 +12655,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.14
-    dev: false
 
   /make-dir@1.3.0:
     resolution: {integrity: sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==}
@@ -17144,12 +17244,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /vue-class-component@8.0.0-rc.1(vue@3.2.45):
+  /vue-class-component@8.0.0-rc.1(vue@3.3.4):
     resolution: {integrity: sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      vue: 3.2.45
+      vue: 3.3.4
     dev: true
 
   /vue-eslint-parser@7.11.0(eslint@8.18.0):
@@ -17189,6 +17289,17 @@ packages:
       '@vue/runtime-dom': 3.2.45
       '@vue/server-renderer': 3.2.45(vue@3.2.45)
       '@vue/shared': 3.2.45
+    dev: false
+
+  /vue@3.3.4:
+    resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
+    dependencies:
+      '@vue/compiler-dom': 3.3.4
+      '@vue/compiler-sfc': 3.3.4
+      '@vue/runtime-dom': 3.3.4
+      '@vue/server-renderer': 3.3.4(vue@3.3.4)
+      '@vue/shared': 3.3.4
+    dev: true
 
   /w3c-hr-time@1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}