diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index 4296d0f39..000000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,88 +0,0 @@
-/* eslint-disable no-restricted-globals */
-
-const DOMGlobals = ['window', 'document']
-const NodeGlobals = ['module', 'require']
-
-module.exports = {
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    sourceType: 'module'
-  },
-  plugins: ['jest'],
-  rules: {
-    'no-debugger': 'error',
-    // most of the codebase are expected to be env agnostic
-    'no-restricted-globals': ['error', ...DOMGlobals, ...NodeGlobals],
-
-    'no-restricted-syntax': [
-      'error',
-      // since we target ES2015 for baseline support, we need to forbid object
-      // rest spread usage in destructure as it compiles into a verbose helper.
-      'ObjectPattern > RestElement',
-      // tsc compiles assignment spread into Object.assign() calls, but esbuild
-      // still generates verbose helpers, so spread assignment is also prohiboted
-      'ObjectExpression > SpreadElement',
-      'AwaitExpression'
-    ]
-  },
-  overrides: [
-    // tests, no restrictions (runs in Node / jest with jsdom)
-    {
-      files: ['**/__tests__/**', 'packages/dts-test/**'],
-      rules: {
-        'no-restricted-globals': 'off',
-        'no-restricted-syntax': 'off',
-        'jest/no-disabled-tests': 'error',
-        'jest/no-focused-tests': 'error'
-      }
-    },
-    // shared, may be used in any env
-    {
-      files: ['packages/shared/**'],
-      rules: {
-        'no-restricted-globals': 'off'
-      }
-    },
-    // Packages targeting DOM
-    {
-      files: ['packages/{vue,vue-compat,runtime-dom}/**'],
-      rules: {
-        'no-restricted-globals': ['error', ...NodeGlobals]
-      }
-    },
-    // Packages targeting Node
-    {
-      files: [
-        'packages/{compiler-sfc,compiler-ssr,server-renderer,reactivity-transform}/**'
-      ],
-      rules: {
-        'no-restricted-globals': ['error', ...DOMGlobals],
-        'no-restricted-syntax': 'off'
-      }
-    },
-    // Private package, browser only + no syntax restrictions
-    {
-      files: ['packages/template-explorer/**', 'packages/sfc-playground/**'],
-      rules: {
-        'no-restricted-globals': ['error', ...NodeGlobals],
-        'no-restricted-syntax': 'off'
-      }
-    },
-    // JavaScript files
-    {
-      files: ['*.js', '*.cjs'],
-      rules: {
-        // We only do `no-unused-vars` checks for js files, TS files are checked by TypeScript itself.
-        'no-unused-vars': ['error', { vars: 'all', args: 'none' }]
-      }
-    },
-    // Node scripts
-    {
-      files: ['scripts/**', '*.{js,ts}', 'packages/**/index.js'],
-      rules: {
-        'no-restricted-globals': 'off',
-        'no-restricted-syntax': 'off'
-      }
-    }
-  ]
-}
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
new file mode 100644
index 000000000..d06b03a3f
--- /dev/null
+++ b/.git-blame-ignore-revs
@@ -0,0 +1,2 @@
+# update prettier & eslint config (#9162)
+bfe6b459d3a0ce6168611ee1ac7e6e789709df9d
diff --git a/.github/commit-convention.md b/.github/commit-convention.md
index a8522fa21..11a64576a 100644
--- a/.github/commit-convention.md
+++ b/.github/commit-convention.md
@@ -6,7 +6,7 @@
 
 Messages must be matched by the following regex:
 
-``` js
+```regexp
 /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip)(\(.+\))?: .{1,50}/
 ```
 
@@ -44,7 +44,7 @@ This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
 
 ### Full Message Format
 
-A commit message consists of a **header**, **body** and **footer**.  The header has a **type**, **scope** and **subject**:
+A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**:
 
 ```
 <type>(<scope>): <subject>
@@ -74,9 +74,9 @@ The scope could be anything specifying the place of the commit change. For examp
 
 The subject contains a succinct description of the change:
 
-* use the imperative, present tense: "change" not "changed" nor "changes"
-* don't capitalize the first letter
-* no dot (.) at the end
+- use the imperative, present tense: "change" not "changed" nor "changes"
+- don't capitalize the first letter
+- no dot (.) at the end
 
 ### Body
 
diff --git a/.github/contributing.md b/.github/contributing.md
index afdae6711..2554582b8 100644
--- a/.github/contributing.md
+++ b/.github/contributing.md
@@ -17,6 +17,26 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 
 ## Pull Request Guidelines
 
+### What kinds of Pull Requests are accepted?
+
+- Bug fix that addresses a clearly identified bug. **"Clearly identified bug"** means the bug has a proper reproduction either from a related open issue, or is included in the PR itself. Avoid submitting PRs that claim to fix something but do not sufficiently explain what is being fixed.
+
+- New feature that addresses a clearly explained and widely applicable use case. **"Widely applicable"** means the new feature should provide non-trivial improvements to the majority of the user base. Vue already has a large API surface so we are quite cautious about adding new features - if the use case is niche and can be addressed via userland implementations, it likely isn't suitable to go into core.
+
+  The feature implementation should also consider the trade-off between the added complexity vs. the benefits gained. For example, if a small feature requires significant changes that spreads across the codebase, it is likely not worth it, or the approach should be reconsidered.
+
+  If the feature has a non-trivial API surface addition, or significantly affects the way a common use case is approached by the users, it should go through a discussion first in the [RFC repo](https://github.com/vuejs/rfcs/discussions). PRs of such features without prior discussion make it really difficult to steer / adjust the API design due to coupling with concrete implementations, and can lead to wasted work.
+
+- Chore: typos, comment improvements, build config, CI config, etc. For typos and comment changes, try to combine multiple of them into a single PR.
+
+- **It should be noted that we discourage contributors from submitting code refactors that are largely stylistic.** Code refactors are only accepted if it improves performance, or comes with sufficient explanations on why it objectively improves the code quality (e.g. makes a related feature implementation easier).
+
+  The reason is that code readability is subjective. The maintainers of this project have chosen to write the code in its current style based on our preferences, and we do not want to spend time explaining our stylistic preferences. Contributors should just respect the established conventions when contributing code.
+
+  Another aspect of it is that large scale stylistic changes result in massive diffs that touch multiple files, adding noise to the git history and makes tracing behavior changes across commits more cumbersome.
+
+### Pull Request Checklist
+
 - Vue core has two primary work branches: `main` and `minor`.
 
   - If your pull request is a feature that adds new API surface, it should be submitted against the `minor` branch.
@@ -61,9 +81,9 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 
 ## Development Setup
 
-You will need [Node.js](https://nodejs.org) **version 18.12+**, and [PNPM](https://pnpm.io) **version 8+**.
+You will need [Node.js](https://nodejs.org) with minimum version as specified in the [`.node-version`](https://github.com/vuejs/core/blob/main/.node-version) file, and [PNPM](https://pnpm.io) with minimum version as specified in the [`"packageManager"` field in `package.json`](https://github.com/vuejs/core/blob/main/package.json#L4).
 
-We also recommend installing [ni](https://github.com/antfu/ni) to help switching between repos using different package managers. `ni` also provides the handy `nr` command which running npm scripts easier.
+We also recommend installing [@antfu/ni](https://github.com/antfu/ni) to help switching between repos using different package managers. `ni` also provides the handy `nr` command which running npm scripts easier.
 
 After cloning the repo, run:
 
@@ -86,11 +106,11 @@ The project uses [simple-git-hooks](https://github.com/toplenboren/simple-git-ho
 
 - Type check the entire project
 - Automatically format changed files using Prettier
-- Verify commit message format (logic in `scripts/verifyCommit.js`)
+- Verify commit message format (logic in `scripts/verify-commit.js`)
 
 ## Scripts
 
-**The examples below will be using the `nr` command from the [ni](https://github.com/antfu/ni) package.** You can also use plain `npm run`, but you will need to pass all additional arguments after the command after an extra `--`. For example, `nr build runtime --all` is equivalent to `npm run build -- runtime --all`.
+**The examples below will be using the `nr` command from the [@antfu/ni](https://github.com/antfu/ni) package.** You can also use plain `npm run`, but you will need to pass all additional arguments after the command after an extra `--`. For example, `nr build runtime --all` is equivalent to `npm run build -- runtime --all`.
 
 The `run-s` and `run-p` commands found in some scripts are from [npm-run-all](https://github.com/mysticatea/npm-run-all) for orchestrating multiple scripts. `run-s` means "run in sequence" while `run-p` means "run in parallel".
 
@@ -216,7 +236,7 @@ Tests that test against source code are grouped under `nr test-unit`, while test
 
 ### `nr test-dts`
 
-Runs `nr build-dts` first, then verify the type tests in `packages/dts-test` are working correctly against the actual built type declarations.
+Runs `nr build-dts` first, then verify the type tests in `packages-private/dts-test` are working correctly against the actual built type declarations.
 
 ## Project Structure
 
@@ -315,7 +335,7 @@ Test coverage is continuously deployed at https://coverage.vuejs.org. PRs that i
 
 ### Testing Type Definition Correctness
 
-Type tests are located in the `packages/dts-test` directory. To run the dts tests, run `nr test-dts`. Note that the type test requires all relevant `*.d.ts` files to be built first (and the script does it for you). Once the `d.ts` files are built and up-to-date, the tests can be re-run by running `nr test-dts-only`.
+Type tests are located in the `packages-private/dts-test` directory. To run the dts tests, run `nr test-dts`. Note that the type test requires all relevant `*.d.ts` files to be built first (and the script does it for you). Once the `d.ts` files are built and up-to-date, the tests can be re-run by running `nr test-dts-only`.
 
 ## Financial Contribution
 
diff --git a/.github/maintenance.md b/.github/maintenance.md
index 8d4317c6b..b1fb550dd 100644
--- a/.github/maintenance.md
+++ b/.github/maintenance.md
@@ -80,6 +80,7 @@ Depending on the type of the PR, different considerations need to be taken into
   - Make sure it doesn't accidentally cause dev-only or compiler-only code branches to be included in the runtime build. Notable case is that some functions in @vue/shared are compiler-only and should not be used in runtime code, e.g. `isHTMLTag` and `isSVGTag`.
 
 - Performance
+
   - Be careful about code changes in "hot paths", in particular the Virtual DOM renderer (`runtime-core/src/renderer.ts`) and component instantiation code.
 
 - Potential Breakage
diff --git a/.github/renovate.json5 b/.github/renovate.json5
index 088913317..8808b599e 100644
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -7,35 +7,35 @@
   packageRules: [
     {
       depTypeList: ['peerDependencies'],
-      enabled: false
+      enabled: false,
     },
     {
       groupName: 'test',
       matchPackageNames: ['vitest', 'jsdom', 'puppeteer'],
-      matchPackagePrefixes: ['@vitest']
+      matchPackagePrefixes: ['@vitest'],
     },
     {
       groupName: 'playground',
       matchFileNames: [
-        'packages/sfc-playground/package.json',
-        'packages/template-explorer/package.json'
-      ]
+        'packages-private/sfc-playground/package.json',
+        'packages-private/template-explorer/package.json',
+      ],
     },
     {
       groupName: 'compiler',
       matchPackageNames: ['magic-string'],
-      matchPackagePrefixes: ['@babel', 'postcss']
+      matchPackagePrefixes: ['@babel', 'postcss'],
     },
     {
       groupName: 'build',
-      matchPackageNames: ['vite', 'terser'],
-      matchPackagePrefixes: ['rollup', 'esbuild', '@rollup', '@vitejs']
+      matchPackageNames: ['vite', '@swc/core'],
+      matchPackagePrefixes: ['rollup', 'esbuild', '@rollup', '@vitejs'],
     },
     {
       groupName: 'lint',
       matchPackageNames: ['simple-git-hooks', 'lint-staged'],
-      matchPackagePrefixes: ['@typescript-eslint', 'eslint', 'prettier']
-    }
+      matchPackagePrefixes: ['typescript-eslint', 'eslint', 'prettier'],
+    },
   ],
   ignoreDeps: [
     'vue',
@@ -45,6 +45,22 @@
     'typescript',
 
     // ESM only
-    'estree-walker'
-  ]
+    'estree-walker',
+
+    // pinned
+    // https://github.com/vuejs/core/issues/10300#issuecomment-1940855364
+    'lru-cache',
+
+    // pinned
+    // https://github.com/vuejs/core/commit/a012e39b373f1b6918e5c89856e8f902e1bfa14d
+    '@rollup/plugin-replace',
+
+    // pinned
+    // only used in example for e2e tests
+    'marked',
+
+    // pinned, 5.0+ has exports issues
+    // https://github.com/vuejs/core/issues/11603
+    'entities',
+  ],
 }
diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
index 5e7bb63c2..d5c31beff 100644
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -14,13 +14,14 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4.0.0
 
-      - name: Set node version to 18
+      - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
-          cache: pnpm
+          node-version-file: '.node-version'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
 
       - run: pnpm install
 
@@ -30,4 +31,4 @@ jobs:
       - name: Run prettier
         run: pnpm run format
 
-      - uses: autofix-ci/action@bee19d72e71787c12ca0f29de72f2833e437e4c9
+      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c
diff --git a/.github/workflows/canary-minor.yml b/.github/workflows/canary-minor.yml
index 27fbd42c9..b5d75b9ce 100644
--- a/.github/workflows/canary-minor.yml
+++ b/.github/workflows/canary-minor.yml
@@ -17,17 +17,17 @@ jobs:
           ref: minor
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4.0.0
 
-      - name: Set node version to 18
+      - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version-file: '.node-version'
           registry-url: 'https://registry.npmjs.org'
           cache: 'pnpm'
 
       - run: pnpm install
 
-      - run: pnpm release --canary --tag minor
+      - run: pnpm release --canary --publish --tag minor
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/canary.yml b/.github/workflows/canary.yml
index 61490232f..bb622725a 100644
--- a/.github/workflows/canary.yml
+++ b/.github/workflows/canary.yml
@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -26,6 +26,6 @@ jobs:
 
       - run: pnpm install
 
-      - run: pnpm release --canary
+      - run: pnpm release --canary --publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 493ab2950..c8c217f62 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -3,112 +3,40 @@ on:
   push:
     branches:
       - '**'
+    tags:
+      - '!**'
   pull_request:
     branches:
       - main
-
-permissions:
-  contents: read # to fetch code (actions/checkout)
+      - minor
 
 jobs:
-  unit-test:
+  test:
+    if: ${{ ! startsWith(github.event.head_commit.message, 'release:') && (github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository) }}
+    uses: ./.github/workflows/test.yml
+
+  continuous-release:
+    if: github.repository == 'vuejs/core'
     runs-on: ubuntu-latest
-    if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository
-    env:
-      PUPPETEER_SKIP_DOWNLOAD: 'true'
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
 
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
           node-version-file: '.node-version'
+          registry-url: 'https://registry.npmjs.org'
           cache: 'pnpm'
 
-      - run: pnpm install
+      - name: Install deps
+        run: pnpm install
 
-      - name: Run unit tests
-        run: pnpm run test-unit
+      - name: Build
+        run: pnpm build --withTypes
 
-  unit-test-windows:
-    runs-on: windows-latest
-    if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository
-    env:
-      PUPPETEER_SKIP_DOWNLOAD: 'true'
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.node-version'
-          cache: 'pnpm'
-
-      - run: pnpm install
-
-      - name: Run compiler unit tests
-        run: pnpm run test-unit compiler
-
-      - name: Run ssr unit tests
-        run: pnpm run test-unit server-renderer
-
-  e2e-test:
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup cache for Chromium binary
-        uses: actions/cache@v3
-        with:
-          path: ~/.cache/puppeteer
-          key: chromium-${{ hashFiles('pnpm-lock.yaml') }}
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.node-version'
-          cache: 'pnpm'
-
-      - run: pnpm install
-      - run: node node_modules/puppeteer/install.mjs
-
-      - name: Run e2e tests
-        run: pnpm run test-e2e
-
-  lint-and-test-dts:
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository
-    env:
-      PUPPETEER_SKIP_DOWNLOAD: 'true'
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.node-version'
-          cache: 'pnpm'
-
-      - run: pnpm install
-
-      - name: Run eslint
-        run: pnpm run lint
-
-      - name: Run prettier
-        run: pnpm run format-check
-
-      - name: Run type declaration tests
-        run: pnpm run test-dts
+      - name: Release
+        run: pnpx pkg-pr-new publish --compact --pnpm './packages/*'
diff --git a/.github/workflows/close-cant-reproduce-issues.yml b/.github/workflows/close-cant-reproduce-issues.yml
new file mode 100644
index 000000000..8fb48f842
--- /dev/null
+++ b/.github/workflows/close-cant-reproduce-issues.yml
@@ -0,0 +1,21 @@
+name: Auto close issues with "can't reproduce" label
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+
+permissions:
+  issues: write
+
+jobs:
+  close-issues:
+    if: github.repository == 'vuejs/core'
+    runs-on: ubuntu-latest
+    steps:
+      - name: can't reproduce
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'close-issues'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          labels: "can't reproduce"
+          inactive-day: 3
diff --git a/.github/workflows/ecosystem-ci-trigger.yml b/.github/workflows/ecosystem-ci-trigger.yml
index 25adf7c85..b3e963ece 100644
--- a/.github/workflows/ecosystem-ci-trigger.yml
+++ b/.github/workflows/ecosystem-ci-trigger.yml
@@ -9,7 +9,8 @@ jobs:
     runs-on: ubuntu-latest
     if: github.repository == 'vuejs/core' && github.event.issue.pull_request && startsWith(github.event.comment.body, '/ecosystem-ci run')
     steps:
-      - uses: actions/github-script@v7
+      - name: Check user permission
+        uses: actions/github-script@v7
         with:
           script: |
             const user = context.payload.sender.login
@@ -43,7 +44,8 @@ jobs:
               })
               throw new Error('not allowed')
             }
-      - uses: actions/github-script@v7
+      - name: Get PR info
+        uses: actions/github-script@v7
         id: get-pr-data
         with:
           script: |
@@ -56,9 +58,11 @@ jobs:
             return {
               num: context.issue.number,
               branchName: pr.head.ref,
-              repo: pr.head.repo.full_name
+              repo: pr.head.repo.full_name,
+              commit: pr.head.sha
             }
-      - uses: actions/github-script@v7
+      - name: Trigger run
+        uses: actions/github-script@v7
         id: trigger
         env:
           COMMENT: ${{ github.event.comment.body }}
@@ -80,6 +84,7 @@ jobs:
                 prNumber: '' + prData.num,
                 branchName: prData.branchName,
                 repo: prData.repo,
-                suite: suite === '' ? '-' : suite
+                suite: suite === '' ? '-' : suite,
+                commit: prData.commit
               }
             })
diff --git a/.github/workflows/release-tag.yml b/.github/workflows/release-tag.yml
deleted file mode 100644
index 16c6c9c5c..000000000
--- a/.github/workflows/release-tag.yml
+++ /dev/null
@@ -1,27 +0,0 @@
-on:
-  push:
-    tags:
-      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
-
-name: Create Release
-
-permissions: {}
-jobs:
-  build:
-    permissions:
-      contents: write # to create release (yyx990803/release-tag)
-
-    name: Create Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@master
-      - name: Create Release for Tag
-        id: release_tag
-        uses: yyx990803/release-tag@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          tag_name: ${{ github.ref }}
-          body: |
-            Please refer to [CHANGELOG.md](https://github.com/vuejs/core/blob/main/CHANGELOG.md) for details.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 000000000..c260a728e
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,55 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
+
+jobs:
+  test:
+    uses: ./.github/workflows/test.yml
+
+  release:
+    # prevents this action from running on forks
+    if: github.repository == 'vuejs/core'
+    needs: [test]
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+    # Use Release environment for deployment protection
+    environment: Release
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
+
+      - name: Install deps
+        run: pnpm install
+
+      - name: Build and publish
+        id: publish
+        run: |
+          pnpm release --publishOnly
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create GitHub release
+        id: release_tag
+        uses: yyx990803/release-tag@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          body: |
+            For stable releases, please refer to [CHANGELOG.md](https://github.com/vuejs/core/blob/main/CHANGELOG.md) for details.
+            For pre-releases, please refer to [CHANGELOG.md](https://github.com/vuejs/core/blob/minor/CHANGELOG.md) of the `minor` branch.
diff --git a/.github/workflows/size-data.yml b/.github/workflows/size-data.yml
index bb82aa18d..7f8bf7b08 100644
--- a/.github/workflows/size-data.yml
+++ b/.github/workflows/size-data.yml
@@ -4,9 +4,11 @@ on:
   push:
     branches:
       - main
+      - minor
   pull_request:
     branches:
       - main
+      - minor
 
 permissions:
   contents: read
@@ -16,13 +18,14 @@ env:
 
 jobs:
   upload:
+    if: github.repository == 'vuejs/core'
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -35,18 +38,14 @@ jobs:
 
       - run: pnpm run size
 
+      - name: Save PR number & base branch
+        if: ${{github.event_name == 'pull_request'}}
+        run: |
+          echo ${{ github.event.number }} > ./temp/size/number.txt
+          echo ${{ github.base_ref }} > ./temp/size/base.txt
+
       - name: Upload Size Data
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: size-data
           path: temp/size
-
-      - name: Save PR number
-        if: ${{github.event_name == 'pull_request'}}
-        run: echo ${{ github.event.number }} > ./pr.txt
-
-      - uses: actions/upload-artifact@v3
-        if: ${{github.event_name == 'pull_request'}}
-        with:
-          name: pr-number
-          path: pr.txt
diff --git a/.github/workflows/size-report.yml b/.github/workflows/size-report.yml
index 78ae44bb7..f9d2052b6 100644
--- a/.github/workflows/size-report.yml
+++ b/.github/workflows/size-report.yml
@@ -18,13 +18,14 @@ jobs:
   size-report:
     runs-on: ubuntu-latest
     if: >
+      github.repository == 'vuejs/core' &&
       github.event.workflow_run.event == 'pull_request' &&
       github.event.workflow_run.conclusion == 'success'
     steps:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -35,37 +36,37 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Download PR number
-        uses: dawidd6/action-download-artifact@v2
-        with:
-          name: pr-number
-          run_id: ${{ github.event.workflow_run.id }}
-
-      - name: Read PR Number
-        id: pr-number
-        uses: juliangruber/read-file-action@v1
-        with:
-          path: ./pr.txt
-
       - name: Download Size Data
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v6
         with:
           name: size-data
           run_id: ${{ github.event.workflow_run.id }}
           path: temp/size
 
-      - name: Download Previous Size Data
-        uses: dawidd6/action-download-artifact@v2
+      - name: Read PR Number
+        id: pr-number
+        uses: juliangruber/read-file-action@v1
         with:
-          branch: main
+          path: temp/size/number.txt
+
+      - name: Read base branch
+        id: pr-base
+        uses: juliangruber/read-file-action@v1
+        with:
+          path: temp/size/base.txt
+
+      - name: Download Previous Size Data
+        uses: dawidd6/action-download-artifact@v6
+        with:
+          branch: ${{ steps.pr-base.outputs.content }}
           workflow: size-data.yml
           event: push
           name: size-data
           path: temp/size-prev
           if_no_artifact_found: warn
 
-      - name: Compare size
-        run: pnpm tsx scripts/size-report.ts > size-report.md
+      - name: Prepare report
+        run: node scripts/size-report.js > size-report.md
 
       - name: Read Size Report
         id: size-report
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 000000000..70dc82248
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,108 @@
+name: 'test'
+
+on: workflow_call
+
+permissions:
+  contents: read # to fetch code (actions/checkout)
+
+jobs:
+  unit-test:
+    runs-on: ubuntu-latest
+    env:
+      PUPPETEER_SKIP_DOWNLOAD: 'true'
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.0.0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          cache: 'pnpm'
+
+      - run: pnpm install
+
+      - name: Run unit tests
+        run: pnpm run test-unit
+
+  unit-test-windows:
+    runs-on: windows-latest
+    env:
+      PUPPETEER_SKIP_DOWNLOAD: 'true'
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.0.0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          cache: 'pnpm'
+
+      - run: pnpm install
+
+      - name: Run compiler unit tests
+        run: pnpm run test-unit compiler
+
+      - name: Run ssr unit tests
+        run: pnpm run test-unit server-renderer
+
+  e2e-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup cache for Chromium binary
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/puppeteer
+          key: chromium-${{ hashFiles('pnpm-lock.yaml') }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.0.0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          cache: 'pnpm'
+
+      - run: pnpm install
+      - run: node node_modules/puppeteer/install.mjs
+
+      - name: Run e2e tests
+        run: pnpm run test-e2e
+
+      - name: verify treeshaking
+        run: node scripts/verify-treeshaking.js
+
+  lint-and-test-dts:
+    runs-on: ubuntu-latest
+    env:
+      PUPPETEER_SKIP_DOWNLOAD: 'true'
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.0.0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          cache: 'pnpm'
+
+      - run: pnpm install
+
+      - name: Run eslint
+        run: pnpm run lint
+
+      - name: Run prettier
+        run: pnpm run format-check
+
+      - name: Run type declaration tests
+        run: pnpm run test-dts
diff --git a/.gitignore b/.gitignore
index 810f88526..9dd21f59b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ TODOs.md
 .eslintcache
 dts-build/packages
 *.tsbuildinfo
+*.tgz
diff --git a/.prettierignore b/.prettierignore
index 1521c8b76..ca3c40849 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,3 @@
 dist
+pnpm-lock.yaml
+CHANGELOG*.md
diff --git a/.prettierrc b/.prettierrc
index ef93d9482..759232e7c 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
-semi: false
-singleQuote: true
-printWidth: 80
-trailingComma: 'none'
-arrowParens: 'avoid'
+{
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 000000000..91ebd5692
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["vitest.explorer"]
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
index b63ffc79b..9fc03aa9b 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -5,24 +5,15 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Jest",
       "type": "node",
       "request": "launch",
-      "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "stopOnEntry": false,
-      "args": ["${fileBasename}", "--runInBand", "--detectOpenHandles"],
-      "cwd": "${workspaceFolder}",
-      "preLaunchTask": null,
-      "runtimeExecutable": null,
-      "runtimeArgs": ["--nolazy"],
-      "env": {
-        "NODE_ENV": "development"
-      },
-      "console": "integratedTerminal",
-      "sourceMaps": true,
-      "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
-      }
+      "name": "Vitest - Debug Current Test File",
+      "autoAttachChildProcesses": true,
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+      "args": ["run", "${relativeFile}"],
+      "smartStep": true,
+      "console": "integratedTerminal"
     }
   ]
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 062c61032..6a176ee1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,532 +1,447 @@
-## [3.3.9](https://github.com/vuejs/core/compare/v3.3.8...v3.3.9) (2023-11-25)
+## [3.5.11](https://github.com/vuejs/core/compare/v3.5.10...v3.5.11) (2024-10-03)
 
 
 ### Bug Fixes
 
-* **compiler-core:** avoid rewriting scope variables in inline for loops ([#7245](https://github.com/vuejs/core/issues/7245)) ([a2d810e](https://github.com/vuejs/core/commit/a2d810eb40cef631f61991ca68b426ee9546aba0)), closes [#7238](https://github.com/vuejs/core/issues/7238)
-* **compiler-core:** fix `resolveParserPlugins` decorators check ([#9566](https://github.com/vuejs/core/issues/9566)) ([9d0eba9](https://github.com/vuejs/core/commit/9d0eba916f3bf6fb5c03222400edae1a2db7444f)), closes [#9560](https://github.com/vuejs/core/issues/9560)
-* **compiler-sfc:** consistently escape type-only prop names ([#8654](https://github.com/vuejs/core/issues/8654)) ([3e08d24](https://github.com/vuejs/core/commit/3e08d246dfd8523c54fb8e7a4a6fd5506ffb1bcc)), closes [#8635](https://github.com/vuejs/core/issues/8635) [#8910](https://github.com/vuejs/core/issues/8910) [vitejs/vite-plugin-vue#184](https://github.com/vitejs/vite-plugin-vue/issues/184)
-* **compiler-sfc:** malformed filename on windows using path.posix.join() ([#9478](https://github.com/vuejs/core/issues/9478)) ([f18a174](https://github.com/vuejs/core/commit/f18a174979626b3429db93c5d5b7ae5448917c70)), closes [#8671](https://github.com/vuejs/core/issues/8671) [#9583](https://github.com/vuejs/core/issues/9583) [#9446](https://github.com/vuejs/core/issues/9446) [#9473](https://github.com/vuejs/core/issues/9473)
-* **compiler-sfc:** support `:is` and `:where` selector in scoped css rewrite ([#8929](https://github.com/vuejs/core/issues/8929)) ([3227e50](https://github.com/vuejs/core/commit/3227e50b32105f8893f7dff2f29278c5b3a9f621))
-* **compiler-sfc:** support resolve extends interface for defineEmits ([#8470](https://github.com/vuejs/core/issues/8470)) ([9e1b74b](https://github.com/vuejs/core/commit/9e1b74bcd5fa4151f5d1bc02c69fbbfa4762f577)), closes [#8465](https://github.com/vuejs/core/issues/8465)
-* **hmr/transition:** fix kept-alive component inside transition disappearing after hmr ([#7126](https://github.com/vuejs/core/issues/7126)) ([d11e978](https://github.com/vuejs/core/commit/d11e978fc98dcc83526c167e603b8308f317f786)), closes [#7121](https://github.com/vuejs/core/issues/7121)
-* **hydration:** force hydration for v-bind with .prop modifier ([364f319](https://github.com/vuejs/core/commit/364f319d214226770d97c98d8fcada80c9e8dde3)), closes [#7490](https://github.com/vuejs/core/issues/7490)
-* **hydration:** properly hydrate indeterminate prop ([34b5a5d](https://github.com/vuejs/core/commit/34b5a5da4ae9c9faccac237acd7acc8e7e017571)), closes [#7476](https://github.com/vuejs/core/issues/7476)
-* **reactivity:** clear method on readonly collections should return undefined ([#7316](https://github.com/vuejs/core/issues/7316)) ([657476d](https://github.com/vuejs/core/commit/657476dcdb964be4fbb1277c215c073f3275728e))
-* **reactivity:** onCleanup also needs to be cleaned ([#8655](https://github.com/vuejs/core/issues/8655)) ([73fd810](https://github.com/vuejs/core/commit/73fd810eebdd383a2b4629f67736c4db1f428abd)), closes [#5151](https://github.com/vuejs/core/issues/5151) [#7695](https://github.com/vuejs/core/issues/7695)
-* **ssr:** hydration `__vnode` missing for devtools ([#9328](https://github.com/vuejs/core/issues/9328)) ([5156ac5](https://github.com/vuejs/core/commit/5156ac5b38cfa80d3db26f2c9bf40cb22a7521cb))
-* **types:** allow falsy value types in `StyleValue` ([#7954](https://github.com/vuejs/core/issues/7954)) ([17aa92b](https://github.com/vuejs/core/commit/17aa92b79b31d8bb8b5873ddc599420cb9806db8)), closes [#7955](https://github.com/vuejs/core/issues/7955)
-* **types:** defineCustomElement using defineComponent return type with emits ([#7937](https://github.com/vuejs/core/issues/7937)) ([5d932a8](https://github.com/vuejs/core/commit/5d932a8e6d14343c9d7fc7c2ecb58ac618b2f938)), closes [#7782](https://github.com/vuejs/core/issues/7782)
-* **types:** fix `unref` and `toValue` when input union type contains ComputedRef ([#8748](https://github.com/vuejs/core/issues/8748)) ([176d476](https://github.com/vuejs/core/commit/176d47671271b1abc21b1508e9a493c7efca6451)), closes [#8747](https://github.com/vuejs/core/issues/8747) [#8857](https://github.com/vuejs/core/issues/8857)
-* **types:** fix instance type when props type is incompatible with setup returned type ([#7338](https://github.com/vuejs/core/issues/7338)) ([0e1e8f9](https://github.com/vuejs/core/commit/0e1e8f919e5a74cdaadf9c80ee135088b25e7fa3)), closes [#5885](https://github.com/vuejs/core/issues/5885)
-* **types:** fix shallowRef return type with union value type ([#7853](https://github.com/vuejs/core/issues/7853)) ([7c44800](https://github.com/vuejs/core/commit/7c448000b0def910c2cfabfdf7ff20a3d6bc844f)), closes [#7852](https://github.com/vuejs/core/issues/7852)
-* **types:** more precise types for class bindings ([#8012](https://github.com/vuejs/core/issues/8012)) ([46e3374](https://github.com/vuejs/core/commit/46e33744c890bd49482c5e5c5cdea44e00ec84d5))
-* **types:** remove optional properties from defineProps return type ([#6421](https://github.com/vuejs/core/issues/6421)) ([94c049d](https://github.com/vuejs/core/commit/94c049d930d922069e38ea8700d7ff0970f71e61)), closes [#6420](https://github.com/vuejs/core/issues/6420)
-* **types:** return type of withDefaults should be readonly ([#8601](https://github.com/vuejs/core/issues/8601)) ([f15debc](https://github.com/vuejs/core/commit/f15debc01acb22d23f5acee97e6f02db88cef11a))
-* **types:** revert class type restrictions ([5d077c8](https://github.com/vuejs/core/commit/5d077c8754cc14f85d2d6d386df70cf8c0d93842)), closes [#8012](https://github.com/vuejs/core/issues/8012)
-* **types:** update jsx type definitions ([#8607](https://github.com/vuejs/core/issues/8607)) ([58e2a94](https://github.com/vuejs/core/commit/58e2a94871ae06a909c5f8bad07fb401193e6a38))
-* **types:** widen ClassValue type ([2424013](https://github.com/vuejs/core/commit/242401305944422d0c361b16101a4d18908927af))
-* **v-model:** avoid overwriting number input with same value ([#7004](https://github.com/vuejs/core/issues/7004)) ([40f4b77](https://github.com/vuejs/core/commit/40f4b77bb570868cb6e47791078767797e465989)), closes [#7003](https://github.com/vuejs/core/issues/7003)
-* **v-model:** unnecessary value binding error should apply to dynamic instead of static binding ([2859b65](https://github.com/vuejs/core/commit/2859b653c9a22460e60233cac10fe139e359b046)), closes [#3596](https://github.com/vuejs/core/issues/3596)
+* **compiler-sfc:** do not skip `TSSatisfiesExpression` when transforming props destructure ([#12062](https://github.com/vuejs/core/issues/12062)) ([2328b05](https://github.com/vuejs/core/commit/2328b051f4efa1f1394b7d4e73b7c3f76e430e7c)), closes [#12061](https://github.com/vuejs/core/issues/12061)
+* **reactivity:** prevent overwriting `next` property during batch processing ([#12075](https://github.com/vuejs/core/issues/12075)) ([d3f5e6e](https://github.com/vuejs/core/commit/d3f5e6e5319b4ffaa55ca9a2ea3d95d78e76fa58)), closes [#12072](https://github.com/vuejs/core/issues/12072)
+* **scheduler:** job ordering when the post queue is flushing ([#12090](https://github.com/vuejs/core/issues/12090)) ([577edca](https://github.com/vuejs/core/commit/577edca8e7795436efd710d1c289ea8ea2642b0e))
+* **types:** correctly infer `TypeProps` when it is `any` ([#12073](https://github.com/vuejs/core/issues/12073)) ([57315ab](https://github.com/vuejs/core/commit/57315ab9688c9741a271d1075bbd28cbe5f71e2f)), closes [#12058](https://github.com/vuejs/core/issues/12058)
+* **types:** should not intersect `PublicProps` with `Props` ([#12077](https://github.com/vuejs/core/issues/12077)) ([6f85894](https://github.com/vuejs/core/commit/6f8589437635706f825ccec51800effba1d2bf5f))
+* **types:** infer the first generic type of `Ref` correctly ([#12094](https://github.com/vuejs/core/issues/12094)) ([c97bb84](https://github.com/vuejs/core/commit/c97bb84d0b0a16b012f886b6498e924415ed63e5))
 
 
 
-## [3.3.8](https://github.com/vuejs/core/compare/v3.3.7...v3.3.8) (2023-11-06)
+## [3.5.10](https://github.com/vuejs/core/compare/v3.5.9...v3.5.10) (2024-09-27)
 
 
 ### Bug Fixes
 
-* **compile-sfc:** support `Error` type in `defineProps` ([#5955](https://github.com/vuejs/core/issues/5955)) ([a989345](https://github.com/vuejs/core/commit/a9893458ec519aae442e1b99e64e6d74685cd22c))
-* **compiler-core:** known global should be shadowed by local variables in expression rewrite ([#9492](https://github.com/vuejs/core/issues/9492)) ([a75d1c5](https://github.com/vuejs/core/commit/a75d1c5c6242e91a73cc5ba01e6da620dea0b3d9)), closes [#9482](https://github.com/vuejs/core/issues/9482)
-* **compiler-sfc:** fix dynamic directive arguments usage check for slots ([#9495](https://github.com/vuejs/core/issues/9495)) ([b39fa1f](https://github.com/vuejs/core/commit/b39fa1f8157647859331ce439c42ae016a49b415)), closes [#9493](https://github.com/vuejs/core/issues/9493)
-* **deps:** update dependency @vue/repl to ^2.6.2 ([#9536](https://github.com/vuejs/core/issues/9536)) ([5cef325](https://github.com/vuejs/core/commit/5cef325f41e3b38657c72fa1a38dedeee1c7a60a))
-* **deps:** update dependency @vue/repl to ^2.6.3 ([#9540](https://github.com/vuejs/core/issues/9540)) ([176d590](https://github.com/vuejs/core/commit/176d59058c9aecffe9da4d4311e98496684f06d4))
-* **hydration:** fix tagName access eeror on comment/text node hydration mismatch ([dd8a0cf](https://github.com/vuejs/core/commit/dd8a0cf5dcde13d2cbd899262a0e07f16e14e489)), closes [#9531](https://github.com/vuejs/core/issues/9531)
-* **types:** avoid exposing lru-cache types in generated dts ([462aeb3](https://github.com/vuejs/core/commit/462aeb3b600765e219ded2ee9a0ed1e74df61de0)), closes [#9521](https://github.com/vuejs/core/issues/9521)
-* **warn:** avoid warning on empty children with Suspense ([#3962](https://github.com/vuejs/core/issues/3962)) ([405f345](https://github.com/vuejs/core/commit/405f34587a63a5f1e3d147b9848219ea98acc22d))
+* **custom-element:** properly set kebab-case props on Vue custom elements ([ea3efa0](https://github.com/vuejs/core/commit/ea3efa09e008918c1d9ba7226833a8b1a7a57244)), closes [#12030](https://github.com/vuejs/core/issues/12030) [#12032](https://github.com/vuejs/core/issues/12032)
+* **reactivity:** fix nested batch edge case ([93c95dd](https://github.com/vuejs/core/commit/93c95dd4cd416503f43a98a1455f62658d22b0b2))
+* **reactivity:** only clear notified flags for computed in first batch iteration ([aa9ef23](https://github.com/vuejs/core/commit/aa9ef2386a0cd39a174e5a887ec2b1a3525034fc)), closes [#12045](https://github.com/vuejs/core/issues/12045)
+* **types/ref:** handle nested refs in UnwrapRef ([#12049](https://github.com/vuejs/core/issues/12049)) ([e2c19c2](https://github.com/vuejs/core/commit/e2c19c20cfee9788519a80c0e53e216b78505994)), closes [#12044](https://github.com/vuejs/core/issues/12044)
 
 
 
-## [3.3.7](https://github.com/vuejs/core/compare/v3.3.6...v3.3.7) (2023-10-24)
+## [3.5.9](https://github.com/vuejs/core/compare/v3.5.8...v3.5.9) (2024-09-26)
 
 
 ### Bug Fixes
 
-* **compiler-sfc:** avoid gen useCssVars when targeting SSR ([#6979](https://github.com/vuejs/core/issues/6979)) ([c568778](https://github.com/vuejs/core/commit/c568778ea3265d8e57f788b00864c9509bf88a4e)), closes [#6926](https://github.com/vuejs/core/issues/6926)
-* **compiler-ssr:**  proper scope analysis for ssr vnode slot fallback ([#7184](https://github.com/vuejs/core/issues/7184)) ([e09c26b](https://github.com/vuejs/core/commit/e09c26bc9bc4394c2c2d928806d382515c2676f3)), closes [#7095](https://github.com/vuejs/core/issues/7095)
-* correctly resolve types from relative paths on Windows ([#9446](https://github.com/vuejs/core/issues/9446)) ([089d36d](https://github.com/vuejs/core/commit/089d36d167dc7834065b03ca689f9b6a44eead8a)), closes [#8671](https://github.com/vuejs/core/issues/8671)
-* **hmr:** fix hmr error for hoisted children array in v-for ([7334376](https://github.com/vuejs/core/commit/733437691f70ebca8dd6cc3bc8356f5b57d4d5d8)), closes [#6978](https://github.com/vuejs/core/issues/6978) [#7114](https://github.com/vuejs/core/issues/7114)
-* **reactivity:** assigning array.length while observing a symbol property ([#7568](https://github.com/vuejs/core/issues/7568)) ([e9e2778](https://github.com/vuejs/core/commit/e9e2778e9ec5cca07c1df5f0c9b7b3595a1a3244))
-* **scheduler:** ensure jobs are in the correct order ([#7748](https://github.com/vuejs/core/issues/7748)) ([a8f6638](https://github.com/vuejs/core/commit/a8f663867b8cd2736b82204bc58756ef02441276)), closes [#7576](https://github.com/vuejs/core/issues/7576)
-* **ssr:** fix hydration mismatch for disabled teleport at component root ([#9399](https://github.com/vuejs/core/issues/9399)) ([d8990fc](https://github.com/vuejs/core/commit/d8990fc6182d1c2cf0a8eab7b35a9d04df668507)), closes [#6152](https://github.com/vuejs/core/issues/6152)
-* **Suspense:** calling hooks before the transition finishes ([#9388](https://github.com/vuejs/core/issues/9388)) ([00de3e6](https://github.com/vuejs/core/commit/00de3e61ed7a55e7d6c2e1987551d66ad0f909ff)), closes [#5844](https://github.com/vuejs/core/issues/5844) [#5952](https://github.com/vuejs/core/issues/5952)
-* **transition/ssr:** make transition appear work with SSR ([#8859](https://github.com/vuejs/core/issues/8859)) ([5ea8a8a](https://github.com/vuejs/core/commit/5ea8a8a4fab4e19a71e123e4d27d051f5e927172)), closes [#6951](https://github.com/vuejs/core/issues/6951)
-* **types:** fix ComponentCustomProps augmentation ([#9468](https://github.com/vuejs/core/issues/9468)) ([7374e93](https://github.com/vuejs/core/commit/7374e93f0281f273b90ab5a6724cc47332a01d6c)), closes [#8376](https://github.com/vuejs/core/issues/8376)
-* **types:** improve `h` overload to support union of string and component ([#5432](https://github.com/vuejs/core/issues/5432)) ([16ecb44](https://github.com/vuejs/core/commit/16ecb44c89cd8299a3b8de33cccc2e2cc36f065b)), closes [#5431](https://github.com/vuejs/core/issues/5431)
+* **reactivity:** fix property dep removal regression ([6001e5c](https://github.com/vuejs/core/commit/6001e5c81a05c894586f9287fbd991677bdd0455)), closes [#12020](https://github.com/vuejs/core/issues/12020) [#12021](https://github.com/vuejs/core/issues/12021)
+* **reactivity:** fix recursive sync watcher on computed edge case ([10ff159](https://github.com/vuejs/core/commit/10ff15924053d9bd95ad706f78ce09e288213fcf)), closes [#12033](https://github.com/vuejs/core/issues/12033) [#12037](https://github.com/vuejs/core/issues/12037)
+* **runtime-core:** avoid rendering plain object as VNode ([#12038](https://github.com/vuejs/core/issues/12038)) ([cb34b28](https://github.com/vuejs/core/commit/cb34b28a4a9bf868be4785b001c526163eda342e)), closes [#12035](https://github.com/vuejs/core/issues/12035) [vitejs/vite-plugin-vue#353](https://github.com/vitejs/vite-plugin-vue/issues/353)
+* **runtime-core:** make useId() always return a string ([a177092](https://github.com/vuejs/core/commit/a177092754642af2f98c33a4feffe8f198c3c950))
+* **types:** correct type inference of union event names ([#12022](https://github.com/vuejs/core/issues/12022)) ([4da6881](https://github.com/vuejs/core/commit/4da688141d9e7c15b622c289deaa81b11845b2c7))
+* **vue:** properly cache runtime compilation ([#12019](https://github.com/vuejs/core/issues/12019)) ([fa0ba24](https://github.com/vuejs/core/commit/fa0ba24b3ace02d7ecab65e57c2bea89a2550dcb))
 
 
 
-## [3.3.6](https://github.com/vuejs/core/compare/v3.3.5...v3.3.6) (2023-10-20)
+## [3.5.8](https://github.com/vuejs/core/compare/v3.5.7...v3.5.8) (2024-09-22)
 
 
 ### Bug Fixes
 
-* **compiler-sfc:** model name conflict ([#8798](https://github.com/vuejs/core/issues/8798)) ([df81da8](https://github.com/vuejs/core/commit/df81da8be97c8a1366563c7e3e01076ef02eb8f7))
-* **compiler-sfc:** support asset paths containing spaces ([#8752](https://github.com/vuejs/core/issues/8752)) ([36c99a9](https://github.com/vuejs/core/commit/36c99a9c6bb6bc306be054c3c8a85ff8ce50605a))
-* **compiler-ssr:** fix missing scopeId on server-rendered TransitionGroup ([#7557](https://github.com/vuejs/core/issues/7557)) ([61c1357](https://github.com/vuejs/core/commit/61c135742795aa5e3189a79c7dec6afa21bbc8d9)), closes [#7554](https://github.com/vuejs/core/issues/7554)
-* **compiler-ssr:** fix ssr compile error for select with non-option children ([#9442](https://github.com/vuejs/core/issues/9442)) ([cdb2e72](https://github.com/vuejs/core/commit/cdb2e725e7ea297f1f4180fb04889a3b757bc84e)), closes [#9440](https://github.com/vuejs/core/issues/9440)
-* **runtime-core:** delete stale slots which are present but undefined ([#6484](https://github.com/vuejs/core/issues/6484)) ([75b8722](https://github.com/vuejs/core/commit/75b872213574cb37e2c9e8a15f65613f867ca9a6)), closes [#9109](https://github.com/vuejs/core/issues/9109)
-* **runtime-core:** fix error when using cssvars with disabled teleport ([#7341](https://github.com/vuejs/core/issues/7341)) ([8f0472c](https://github.com/vuejs/core/commit/8f0472c9abedb337dc256143b69d8ab8759dbf5c)), closes [#7342](https://github.com/vuejs/core/issues/7342)
-* **teleport:** ensure descendent component would be unmounted correctly ([#6529](https://github.com/vuejs/core/issues/6529)) ([4162311](https://github.com/vuejs/core/commit/4162311efdb0db5ca458542e1604b19efa2fae0e)), closes [#6347](https://github.com/vuejs/core/issues/6347)
-* **types:** support contenteditable="plaintext-only" ([#8796](https://github.com/vuejs/core/issues/8796)) ([26ca89e](https://github.com/vuejs/core/commit/26ca89e5cf734fbef81e182050d2a215ec8a437b))
+* **reactivity:** do not remove dep from depsMap when cleaning up deps of computed ([#11995](https://github.com/vuejs/core/issues/11995)) ([0267a58](https://github.com/vuejs/core/commit/0267a588017eee4951ac2a877fe1ccae84cad905))
+
+
+
+## [3.5.7](https://github.com/vuejs/core/compare/v3.5.6...v3.5.7) (2024-09-20)
+
+
+### Bug Fixes
+
+* **compile-core:** fix v-model with newlines edge case ([#11960](https://github.com/vuejs/core/issues/11960)) ([6224288](https://github.com/vuejs/core/commit/62242886d705ece88dbcad45bb78072ecccad0ca)), closes [#8306](https://github.com/vuejs/core/issues/8306)
+* **compiler-sfc:** initialize scope with null prototype object ([#11963](https://github.com/vuejs/core/issues/11963)) ([215e154](https://github.com/vuejs/core/commit/215e15407294bf667261360218f975b88c99c2e5))
+* **hydration:** avoid observing non-Element node ([#11954](https://github.com/vuejs/core/issues/11954)) ([7257e6a](https://github.com/vuejs/core/commit/7257e6a34200409b3fc347d3bb807e11e2785974)), closes [#11952](https://github.com/vuejs/core/issues/11952)
+* **reactivity:** do not remove dep from depsMap when unsubbed by computed ([960706e](https://github.com/vuejs/core/commit/960706eebf73f08ebc9d5dd853a05def05e2c153))
+* **reactivity:** fix dev-only memory leak by updating dep.subsHead on sub removal ([5c8b76e](https://github.com/vuejs/core/commit/5c8b76ed6cfbbcee4cbaac0b72beab7291044e4f)), closes [#11956](https://github.com/vuejs/core/issues/11956)
+* **reactivity:** fix memory leak from dep instances of garbage collected objects ([235ea47](https://github.com/vuejs/core/commit/235ea4772ed2972914cf142da8b7ac1fb04f7585)), closes [#11979](https://github.com/vuejs/core/issues/11979) [#11971](https://github.com/vuejs/core/issues/11971)
+* **reactivity:** fix triggerRef call on ObjectRefImpl returned by toRef ([#11986](https://github.com/vuejs/core/issues/11986)) ([b030c8b](https://github.com/vuejs/core/commit/b030c8bc7327877efb98aa3d9a58eb287a6ff07a)), closes [#11982](https://github.com/vuejs/core/issues/11982)
+* **scheduler:** ensure recursive jobs can't be queued twice ([#11955](https://github.com/vuejs/core/issues/11955)) ([d18d6aa](https://github.com/vuejs/core/commit/d18d6aa1b20dc57a8103c51ec4d61e8e53ed936d))
+* **ssr:** don't render comments in TransitionGroup ([#11961](https://github.com/vuejs/core/issues/11961)) ([a2f6ede](https://github.com/vuejs/core/commit/a2f6edeb02faedbb673c4bc5c6a59d9a79a37d07)), closes [#11958](https://github.com/vuejs/core/issues/11958)
+* **transition:** respect `duration` setting even when it is `0` ([#11967](https://github.com/vuejs/core/issues/11967)) ([f927a4a](https://github.com/vuejs/core/commit/f927a4ae6f7c453f70ba89498ee0c737dc9866fd))
+* **types:** correct type inference of all-optional props ([#11644](https://github.com/vuejs/core/issues/11644)) ([9eca65e](https://github.com/vuejs/core/commit/9eca65ee9871d1ac878755afa9a3eb1b02030350)), closes [#11733](https://github.com/vuejs/core/issues/11733) [vuejs/language-tools#4704](https://github.com/vuejs/language-tools/issues/4704)
 
 
 ### Performance Improvements
 
-* replace Map/Set with WeakMap/WeakSet ([#8549](https://github.com/vuejs/core/issues/8549)) ([712f96d](https://github.com/vuejs/core/commit/712f96d6ac4d3d984732cba448cb84624daba850))
+* **hydration:** avoid observer if element is in viewport ([#11639](https://github.com/vuejs/core/issues/11639)) ([e075dfa](https://github.com/vuejs/core/commit/e075dfad5c7649c6045e3711687ec888e7aa1a39))
 
 
 
-## [3.3.5](https://github.com/vuejs/core/compare/v3.3.4...v3.3.5) (2023-10-20)
+## [3.5.6](https://github.com/vuejs/core/compare/v3.5.5...v3.5.6) (2024-09-16)
 
 
 ### Bug Fixes
 
-* add isGloballyWhitelisted back, but deprecated ([#8556](https://github.com/vuejs/core/issues/8556)) ([63dfe8e](https://github.com/vuejs/core/commit/63dfe8eab499979bcc2f7829e82464e13899c895)), closes [#8416](https://github.com/vuejs/core/issues/8416)
-* **build:** disable useDefineForClassFields in esbuild ([#9252](https://github.com/vuejs/core/issues/9252)) ([6d14fa8](https://github.com/vuejs/core/commit/6d14fa88e85d4c9e264be394ddb37a54ca6738a8))
-* **compat:** return value of vue compat set() ([#9377](https://github.com/vuejs/core/issues/9377)) ([e3c2d69](https://github.com/vuejs/core/commit/e3c2d699f694d9500ddee78571172a24f0e3b17a))
-* **compiler-sfc:** don't hoist props and emit ([#8535](https://github.com/vuejs/core/issues/8535)) ([24db951](https://github.com/vuejs/core/commit/24db9516d8b4857182ec1a3af86cb7346691679b)), closes [#7805](https://github.com/vuejs/core/issues/7805) [#7812](https://github.com/vuejs/core/issues/7812)
-* **compiler-sfc:** don't registerTS when bundling for browsers ([#8582](https://github.com/vuejs/core/issues/8582)) ([6f45f76](https://github.com/vuejs/core/commit/6f45f76df2c43796b35067ef8f8b9a7bca454040))
-* **compiler-sfc:** fix using imported ref as template ref during dev ([#7593](https://github.com/vuejs/core/issues/7593)) ([776ebf2](https://github.com/vuejs/core/commit/776ebf25b2e7570e78ac1c148fc45c823c21a542)), closes [#7567](https://github.com/vuejs/core/issues/7567)
-* **compiler-sfc:** handle dynamic directive arguments in template usage check ([#8538](https://github.com/vuejs/core/issues/8538)) ([e404a69](https://github.com/vuejs/core/commit/e404a699f48ae5c5a5da947f42679343192158c7)), closes [#8537](https://github.com/vuejs/core/issues/8537)
-* **compiler-sfc:** ignore style v-bind in double slash comments ([#5409](https://github.com/vuejs/core/issues/5409)) ([381b497](https://github.com/vuejs/core/commit/381b4977af25ba5392704f72ec6b3f2394d87ae7))
-* **compiler-sfc:** pass options directly to stylus ([#3848](https://github.com/vuejs/core/issues/3848)) ([d6446a6](https://github.com/vuejs/core/commit/d6446a6d40774b79045a9ddba7b5fd5201d51450))
-* **compiler-sfc:** support resolve multiple re-export /w same source type name ([#8365](https://github.com/vuejs/core/issues/8365)) ([4fa8da8](https://github.com/vuejs/core/commit/4fa8da8576717c619e1e8c04d19038488c75fbea)), closes [#8364](https://github.com/vuejs/core/issues/8364)
-* **compiler-sfc:** typo in experimental feature warnings ([#8513](https://github.com/vuejs/core/issues/8513)) ([fd1a3f9](https://github.com/vuejs/core/commit/fd1a3f95990d7c372fa1c0c40c55caca761a33a4))
-* **deps:** update dependency monaco-editor to ^0.44.0 ([#9237](https://github.com/vuejs/core/issues/9237)) ([8611874](https://github.com/vuejs/core/commit/8611874e09a827b6491173836c8942284d5de22c))
-* **deps:** update playground ([#9154](https://github.com/vuejs/core/issues/9154)) ([c8566a2](https://github.com/vuejs/core/commit/c8566a22b7cf37e6aefab7bad7b97ce2db9fae4c))
-* **playground:** fix github button style ([#7722](https://github.com/vuejs/core/issues/7722)) ([5ee992c](https://github.com/vuejs/core/commit/5ee992cfeabc6c4b871980c6057d0ac7140ad2fa))
-* **runtime-core:** swap client/server debug labels ([#9089](https://github.com/vuejs/core/issues/9089)) ([8f311c6](https://github.com/vuejs/core/commit/8f311c6f823f6776ca1c49bfbbbf8c7d9dea9cf1))
-* **ssr:** render correct initial selected state for select with v-model ([#7432](https://github.com/vuejs/core/issues/7432)) ([201c46d](https://github.com/vuejs/core/commit/201c46df07a38f3c2b73f384e8e6846dc62f224e)), closes [#7392](https://github.com/vuejs/core/issues/7392)
-* **ssr:** reset current instance if setting up options component errors ([#7743](https://github.com/vuejs/core/issues/7743)) ([020851e](https://github.com/vuejs/core/commit/020851e57d9a9f727c6ea07e9c1575430af02b73)), closes [#7733](https://github.com/vuejs/core/issues/7733)
-* **teleport:** handle target change while disabled ([#7837](https://github.com/vuejs/core/issues/7837)) ([140a89b](https://github.com/vuejs/core/commit/140a89b833bceed60838182b875d2953c70af114)), closes [#7835](https://github.com/vuejs/core/issues/7835)
-* **transition:** handle possible auto value for transition/animation durations ([96c76fa](https://github.com/vuejs/core/commit/96c76facb7de37fc241ccd55e121fd60a49a1452)), closes [#8409](https://github.com/vuejs/core/issues/8409)
-* **types/jsx:** add `inert` attribute and missing `hidden` values ([#8090](https://github.com/vuejs/core/issues/8090)) ([ceb0732](https://github.com/vuejs/core/commit/ceb0732e0b1bb4c8c505d80e97ff6fc89035fa90))
-* **types/jsx:** add missing loading attr for img element ([#6160](https://github.com/vuejs/core/issues/6160)) ([68d6b43](https://github.com/vuejs/core/commit/68d6b43f7e29b76aab2c6c1882885380a43fa3e3))
-* **types:** correct withDefaults return type for boolean prop with undefined default value ([#8602](https://github.com/vuejs/core/issues/8602)) ([f07cb18](https://github.com/vuejs/core/commit/f07cb18fedf9a446545aadf76bcdfb957c7ebcbd))
-* **types:** ensure nextTick return type reflect correct Promise value ([#8406](https://github.com/vuejs/core/issues/8406)) ([6a22b1f](https://github.com/vuejs/core/commit/6a22b1f6c287b60eda385df8a514335af8e040ea))
-* **types:** support correct types for style on svg elements ([#6322](https://github.com/vuejs/core/issues/6322)) ([364dc53](https://github.com/vuejs/core/commit/364dc53c7cc6f97d812ad175199c698faa92538e))
+* **compile-dom:** should be able to stringify mathML ([#11891](https://github.com/vuejs/core/issues/11891)) ([85c138c](https://github.com/vuejs/core/commit/85c138ced108268f7656b568dfd3036a1e0aae34))
+* **compiler-sfc:** preserve old behavior when using withDefaults with desutructure ([8492c3c](https://github.com/vuejs/core/commit/8492c3c49a922363d6c77ef192c133a8fbce6514)), closes [#11930](https://github.com/vuejs/core/issues/11930)
+* **reactivity:** avoid exponential perf cost and reduce call stack depth for deeply chained computeds ([#11944](https://github.com/vuejs/core/issues/11944)) ([c74bb8c](https://github.com/vuejs/core/commit/c74bb8c2dd9e82aaabb0a2a2b368e900929b513b)), closes [#11928](https://github.com/vuejs/core/issues/11928)
+* **reactivity:** rely on dirty check only when computed has deps ([#11931](https://github.com/vuejs/core/issues/11931)) ([aa5dafd](https://github.com/vuejs/core/commit/aa5dafd2b55d42d6a29316a3bc91aea85c676a0b)), closes [#11929](https://github.com/vuejs/core/issues/11929)
+* **watch:** `once` option should be ignored by watchEffect ([#11884](https://github.com/vuejs/core/issues/11884)) ([49fa673](https://github.com/vuejs/core/commit/49fa673493d93b77ddba2165ab6545bae84fd1ae))
+* **watch:** unwatch should be callable during SSR ([#11925](https://github.com/vuejs/core/issues/11925)) ([2d6adf7](https://github.com/vuejs/core/commit/2d6adf78a047eed091db277ffbd9df0822fb0bdd)), closes [#11924](https://github.com/vuejs/core/issues/11924)
+
+
+
+## [3.5.5](https://github.com/vuejs/core/compare/v3.5.4...v3.5.5) (2024-09-13)
+
+
+### Bug Fixes
+
+* **compiler-core:** fix handling of delimiterOpen in VPre ([#11915](https://github.com/vuejs/core/issues/11915)) ([706d4ac](https://github.com/vuejs/core/commit/706d4ac1d0210b2d9134b3228280187fe02fc971)), closes [#11913](https://github.com/vuejs/core/issues/11913)
+* **compiler-dom:** fix stringify static edge for partially eligible chunks in cached parent ([1d99d61](https://github.com/vuejs/core/commit/1d99d61c1bd77f9ea6743f6214a82add8346a121)), closes [#11879](https://github.com/vuejs/core/issues/11879) [#11890](https://github.com/vuejs/core/issues/11890)
+* **compiler-dom:** should ignore leading newline in <textarea> per spec ([3c4bf76](https://github.com/vuejs/core/commit/3c4bf7627649ec1e3220f8c4e4163c20d2afb367))
+* **compiler-sfc:** nested css supports atrule and comment ([#11899](https://github.com/vuejs/core/issues/11899)) ([0e7bc71](https://github.com/vuejs/core/commit/0e7bc717e6640644f062957ec5031506f0dab215)), closes [#11896](https://github.com/vuejs/core/issues/11896)
+* **custom-element:** handle nested customElement mount w/ shadowRoot false ([#11861](https://github.com/vuejs/core/issues/11861)) ([f2d8019](https://github.com/vuejs/core/commit/f2d801918841e7673ff3f048d0d895592a2f7e23)), closes [#11851](https://github.com/vuejs/core/issues/11851) [#11871](https://github.com/vuejs/core/issues/11871)
+* **hmr:** reload async child wrapped in Suspense + KeepAlive ([#11907](https://github.com/vuejs/core/issues/11907)) ([10a2c60](https://github.com/vuejs/core/commit/10a2c6053bd30d160d0214bb3566f540187e6874)), closes [#11868](https://github.com/vuejs/core/issues/11868)
+* **hydration:** fix mismatch of leading newline in `<textarea>` and `<pre>` ([a5f3c2e](https://github.com/vuejs/core/commit/a5f3c2eb4d2e7fae93ff93ce865b269f01cc825e)), closes [#11873](https://github.com/vuejs/core/issues/11873) [#11874](https://github.com/vuejs/core/issues/11874)
+* **reactivity:** properly clean up deps, fix memory leak ([8ea5d6d](https://github.com/vuejs/core/commit/8ea5d6d6981ab7febda0be43c3c92b18869c3a2a)), closes [#11901](https://github.com/vuejs/core/issues/11901)
+* **runtime-core:** properly update async component nested in KeepAlive ([#11917](https://github.com/vuejs/core/issues/11917)) ([7fe6c79](https://github.com/vuejs/core/commit/7fe6c795a1fc7ddcea5ad91a56141561192373ac)), closes [#11916](https://github.com/vuejs/core/issues/11916)
+* **TransitionGroup:** not warn unkeyed text children with whitespece preserve ([#11888](https://github.com/vuejs/core/issues/11888)) ([7571f20](https://github.com/vuejs/core/commit/7571f20bc3d1854377a146f41d211e05bb68cd47)), closes [#11885](https://github.com/vuejs/core/issues/11885)
+
+
+
+## [3.5.4](https://github.com/vuejs/core/compare/v3.5.3...v3.5.4) (2024-09-10)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** correct scoped injection for nesting selector ([#11854](https://github.com/vuejs/core/issues/11854)) ([b1de75e](https://github.com/vuejs/core/commit/b1de75ed04626b6423085dfde91fb0cb481a25e8)), closes [#10567](https://github.com/vuejs/core/issues/10567)
+* **reactivity:** fix markRaw error on already marked object ([#11864](https://github.com/vuejs/core/issues/11864)) ([67d6596](https://github.com/vuejs/core/commit/67d6596d40b1807b9cd8eb0d9282932ea77be3c0)), closes [#11862](https://github.com/vuejs/core/issues/11862)
+* Revert "fix: Revert "fix(reactivity): self-referencing computed should refresh"" ([e596378](https://github.com/vuejs/core/commit/e596378e0be728dad7d60938449f3fa557ca2ec9))
+* **runtime-core:** handle shallow reactive arrays in renderList correctly ([#11870](https://github.com/vuejs/core/issues/11870)) ([ced59ab](https://github.com/vuejs/core/commit/ced59ab8f2f2e89c13119bab3a0c25a1a1f1c3d6)), closes [#11869](https://github.com/vuejs/core/issues/11869)
+* **types:** correctly infer `TypeEmits` with both tuple and function syntax ([#11840](https://github.com/vuejs/core/issues/11840)) ([dad6738](https://github.com/vuejs/core/commit/dad673809929c084dcb8e42640eb7daa675d4ea4)), closes [#11836](https://github.com/vuejs/core/issues/11836)
 
 
 ### Performance Improvements
 
-* **compiler-sfc:** lazy require typescript ([d2c3d8b](https://github.com/vuejs/core/commit/d2c3d8b70b2df6e16f053a7ac58e6b04e7b2078f))
-* **custom-element:** cancel `MutationObserver` listener when disconnected ([#8666](https://github.com/vuejs/core/issues/8666)) ([24d98f0](https://github.com/vuejs/core/commit/24d98f03276de5b0fbced5a4c9d61b24e7d9d084))
-* mark `defineComponent` as side-effects-free ([#8512](https://github.com/vuejs/core/issues/8512)) ([438027c](https://github.com/vuejs/core/commit/438027cf9ecb63260f59d3027e0b188717694795))
+* **reactivity:** trigger deps directly instead of storing in an array first ([#11695](https://github.com/vuejs/core/issues/11695)) ([f80d447](https://github.com/vuejs/core/commit/f80d447c17662556e9e3f99f6d199967f4c8cf3d))
 
 
 
-## [3.3.4](https://github.com/vuejs/core/compare/v3.3.3...v3.3.4) (2023-05-18)
+## [3.5.3](https://github.com/vuejs/core/compare/v3.5.2...v3.5.3) (2024-09-06)
 
 
 ### Bug Fixes
 
-* **build:** ensure correct typing for node esm ([d621d4c](https://github.com/vuejs/core/commit/d621d4c646b2d7b190fbd44ad1fd04512b3de300))
-* **build:** fix __DEV__ flag replacement edge case ([8b7c04b](https://github.com/vuejs/core/commit/8b7c04b18f73aad9a08dd57eba90101b5b2aef28)), closes [#8353](https://github.com/vuejs/core/issues/8353)
-* **compiler-sfc:** handle imported types from default exports ([5aec717](https://github.com/vuejs/core/commit/5aec717a2402652306085f58432ba3ab91848a74)), closes [#8355](https://github.com/vuejs/core/issues/8355)
+* **hydration:** check __asyncHydrate presence for vue3-lazy-hydration compat ([#11825](https://github.com/vuejs/core/issues/11825)) ([8e6c337](https://github.com/vuejs/core/commit/8e6c3378676be05cea7f53664442acdfb86784f9)), closes [#11793](https://github.com/vuejs/core/issues/11793)
+* Revert "fix(reactivity): self-referencing computed should refresh" ([35c760f](https://github.com/vuejs/core/commit/35c760f82f749f7c6e3f9bfead8221ce498e892f))
+* **ssr:** respect app.config.warnHandler during ssr ([bf3d9a2](https://github.com/vuejs/core/commit/bf3d9a2af41659a743706306fc798b3d215df5af)), closes [#11830](https://github.com/vuejs/core/issues/11830)
+* **Transition:** handle KeepAlive child unmount in Transition out-in mode ([#11833](https://github.com/vuejs/core/issues/11833)) ([6b7901d](https://github.com/vuejs/core/commit/6b7901d28ed3a6a9242c666cc1b8e3c0b0b0fe62)), closes [#11775](https://github.com/vuejs/core/issues/11775)
+* **useId:** make generated IDs selector compatible ([babfb4c](https://github.com/vuejs/core/commit/babfb4cbcbf98601d76c1d7653eae8d250ce2710)), closes [#11828](https://github.com/vuejs/core/issues/11828)
 
 
 
-## [3.3.3](https://github.com/vuejs/core/compare/v3.3.2...v3.3.3) (2023-05-18)
+## [3.5.2](https://github.com/vuejs/core/compare/v3.5.1...v3.5.2) (2024-09-05)
 
 
 ### Bug Fixes
 
-* avoid regex s flag for old browsers ([91f1c62](https://github.com/vuejs/core/commit/91f1c62e6384a8b09f90e7e43b8d347901e529a0)), closes [#8316](https://github.com/vuejs/core/issues/8316)
-* **build:** fix dev flag replacement in esm-builder builds ([#8314](https://github.com/vuejs/core/issues/8314)) ([003836f](https://github.com/vuejs/core/commit/003836f90e1f00ebd04b77ec07ccfa4e649a2ff4)), closes [#8312](https://github.com/vuejs/core/issues/8312)
-* **compiler-sfc:** don't hoist regexp literial ([#8300](https://github.com/vuejs/core/issues/8300)) ([8ec73a3](https://github.com/vuejs/core/commit/8ec73a3aea7a52e9479f107ae5737761166ddae6))
-* **compiler-sfc:** fix props destructing default value type checking with unresolved type ([#8340](https://github.com/vuejs/core/issues/8340)) ([f69dbab](https://github.com/vuejs/core/commit/f69dbabf8794426c3e9ed33ae77dd8ce655eafd2)), closes [#8326](https://github.com/vuejs/core/issues/8326)
-* **compiler-sfc:** fix type import from path aliased vue file ([fab9c72](https://github.com/vuejs/core/commit/fab9c727805c6186c490f99023e8cf5401b0b5a9)), closes [#8348](https://github.com/vuejs/core/issues/8348)
-* **compiler-sfc:** handle ts files with relative imports with .js extension ([b36addd](https://github.com/vuejs/core/commit/b36addd3bde07467e9ff5641bd1c2bdc3085944c)), closes [#8339](https://github.com/vuejs/core/issues/8339)
-* **compiler-sfc:** parses correctly when inline mode is off ([#8337](https://github.com/vuejs/core/issues/8337)) ([ecbd42a](https://github.com/vuejs/core/commit/ecbd42a1444e3c599e464dec002e43d548d99669)), closes [#6088](https://github.com/vuejs/core/issues/6088)
-* **compiler-sfc:** support defineEmits type reference with unions ([#8299](https://github.com/vuejs/core/issues/8299)) ([b133e0f](https://github.com/vuejs/core/commit/b133e0fd97b0b4fabbb43151c19031b8fb47c05b)), closes [#7943](https://github.com/vuejs/core/issues/7943)
-* **types:** support generic usage with withDefaults + defineProps ([#8335](https://github.com/vuejs/core/issues/8335)) ([216f269](https://github.com/vuejs/core/commit/216f26995b63c2df26ca0f39f390fe8d59cdabfa)), closes [#8310](https://github.com/vuejs/core/issues/8310) [#8331](https://github.com/vuejs/core/issues/8331) [#8325](https://github.com/vuejs/core/issues/8325)
-
-
-
-## [3.3.2](https://github.com/vuejs/core/compare/v3.3.1...v3.3.2) (2023-05-12)
-
-
-### Bug Fixes
-
-* **compiler-core:** treat floating point numbers as constants ([8dc8cf8](https://github.com/vuejs/core/commit/8dc8cf852bf8057aa5c4b5670f09e8c28a168b73)), closes [#8295](https://github.com/vuejs/core/issues/8295)
-* **compiler-dom:** do not throw in production on side effect tags ([c454b9d](https://github.com/vuejs/core/commit/c454b9d7f431d57abedb7184d1e4059914c4463f)), closes [#8287](https://github.com/vuejs/core/issues/8287) [#8292](https://github.com/vuejs/core/issues/8292)
-* **compiler-sfc:** fix regression on props destructure when transform is not enabled ([f25bd37](https://github.com/vuejs/core/commit/f25bd37c6707fde19d164d90a38de41168941f4b)), closes [#8289](https://github.com/vuejs/core/issues/8289)
-* **compiler-sfc:** handle prop keys that need escaping ([#7803](https://github.com/vuejs/core/issues/7803)) ([690ef29](https://github.com/vuejs/core/commit/690ef296357c7fc09f66ba9408df548e117f686f)), closes [#8291](https://github.com/vuejs/core/issues/8291)
-* **compiler-sfc:** properly parse d.ts files when resolving types ([aa1e77d](https://github.com/vuejs/core/commit/aa1e77d532b951ea5d3a5e26214a8b0c9c02fb6f)), closes [#8285](https://github.com/vuejs/core/issues/8285)
-* **compiler-sfc:** raise specific warning for failed extends and allow ignoring extends ([8235072](https://github.com/vuejs/core/commit/82350721a408e1f552c613c05971439d6c218d87)), closes [#8286](https://github.com/vuejs/core/issues/8286)
-
-
-
-## [3.3.1](https://github.com/vuejs/core/compare/v3.3.0...v3.3.1) (2023-05-11)
-
-
-### Bug Fixes
-
-* **suspense:** handle nested sync suspense for hydration ([a3f5485](https://github.com/vuejs/core/commit/a3f54857858c8ca0e6b9f12618d151ab255fb040))
-
-
-
-# [3.3.0 Rurouni Kenshin](https://github.com/vuejs/core/compare/v3.3.0-beta.5...v3.3.0) (2023-05-11)
-
-- For a detailed walkthrough of the new features in 3.3, please read the [release blog post](https://blog.vuejs.org/posts/vue-3-3).
-
-- Features and deprecations listed here are aggregated from the beta and alpha releases. For full chronological history, bug fixes, and other minor features, please consult the individual logs of the 3.3 beta and alpha releases.
-
-## Features
-
-* **sfc:** support imported types in SFC macros ([#8083](https://github.com/vuejs/core/pull/8083))
-* **types/slots:** support slot presence / props type checks via `defineSlots` macro and `slots` option ([#7982](https://github.com/vuejs/core/issues/7982)) ([5a2f5d5](https://github.com/vuejs/core/commit/5a2f5d59cffa36a99e6f2feab6b3ba7958b7362f))
-* **sfc:** support more ergnomic defineEmits type syntax ([#7992](https://github.com/vuejs/core/issues/7992)) ([8876dcc](https://github.com/vuejs/core/commit/8876dccf42a7f05375d97cb18c1afdfd0fc51c94))
-* **sfc:** introduce `defineModel` macro and `useModel` helper ([#8018](https://github.com/vuejs/core/issues/8018)) ([14f3d74](https://github.com/vuejs/core/commit/14f3d747a34d45415b0036b274517d70a27ec0d3))
-* **reactivity:** improve support of getter usage in reactivity APIs ([#7997](https://github.com/vuejs/core/issues/7997)) ([59e8284](https://github.com/vuejs/core/commit/59e828448e7f37643cd0eaea924a764e9d314448))
-* **compiler-sfc:** add defineOptions macro ([#5738](https://github.com/vuejs/core/issues/5738)) ([bcf5841](https://github.com/vuejs/core/commit/bcf5841ddecc64d0bdbd56ce1463eb8ebf01bb9d))
-* **types/jsx:** support jsxImportSource, avoid global JSX conflict ([#7958](https://github.com/vuejs/core/issues/7958)) ([d0b7ef3](https://github.com/vuejs/core/commit/d0b7ef3b61d5f83e35e5854b3c2c874e23463102))
-* **dx:** improve readability of displayed types for props ([4c9bfd2](https://github.com/vuejs/core/commit/4c9bfd2b999ce472f7481aae4f9dc5bb9f76628e))
-* **app:** app.runWithContext() ([#7451](https://github.com/vuejs/core/issues/7451)) ([869f3fb](https://github.com/vuejs/core/commit/869f3fb93e61400be4fd925e0850c2b1564749e2))
-* hasInjectionContext() for libraries ([#8111](https://github.com/vuejs/core/issues/8111)) ([5510ce3](https://github.com/vuejs/core/commit/5510ce385abfa151c07a5253cccf4abccabdd01d))
-* allow accessing console in template ([#6508](https://github.com/vuejs/core/issues/6508)) ([fe76224](https://github.com/vuejs/core/commit/fe762247f8035d28d543bc5602ad01b0c258f6d6)), closes [#7939](https://github.com/vuejs/core/issues/7939)
-* **suspense:** introduce suspensible option for `<Suspense>` ([#6736](https://github.com/vuejs/core/issues/6736)) ([cb37d0b](https://github.com/vuejs/core/commit/cb37d0b9ffb5d4bb81a0367d84295dec8dd4448c)), closes [#5513](https://github.com/vuejs/core/issues/5513)
-* **compiler-dom:** treat inert as boolean attribute ([#8209](https://github.com/vuejs/core/issues/8209)) ([918ec8a](https://github.com/vuejs/core/commit/918ec8a5cbc825a3947cd35fe966671c245af087)), closes [#8208](https://github.com/vuejs/core/issues/8208)
-* **types:** add slots types for built-in components ([#6033](https://github.com/vuejs/core/issues/6033)) ([3cb4dc9](https://github.com/vuejs/core/commit/3cb4dc9e5538e1c2bde9fa691b001615a848c546))
-* **types:** provide ExtractPublicPropTypes utility type ([bff63c5](https://github.com/vuejs/core/commit/bff63c5498f5fa098689c18defe48ae08d47eadb)), closes [#5272](https://github.com/vuejs/core/issues/5272) [#8168](https://github.com/vuejs/core/issues/8168)
-* **compiler-sfc:** expose parseCache ([4576548](https://github.com/vuejs/core/commit/45765488d498d94f8760c9e82f1177070057b17c)), closes [#8202](https://github.com/vuejs/core/issues/8202)
-
-## Deprecations
-
-* **deprecation:** deprecate [@vnode](https://github.com/vnode) hooks in favor of vue: prefix ([5f0394a](https://github.com/vuejs/core/commit/5f0394a5ab88c82c74e240161499721f63d5462e))
-* **deprecation:** deprecate v-is directive ([bbd8301](https://github.com/vuejs/core/commit/bbd8301a1344b02de635ea16d4822db1c343bd12))
-* **deprecation:** unwrap injected refs in Options API by default, deprecate app.config.unwrapInjectedRefs ([526fa3b](https://github.com/vuejs/core/commit/526fa3b2ccf038375e76f8af2f1ddf79a7388878))
-
-# [3.3.0-beta.5](https://github.com/vuejs/core/compare/v3.3.0-beta.4...v3.3.0-beta.5) (2023-05-08)
-
-
-### Bug Fixes
-
-* **build:** retain defineComponent() treeshakability in Rollup ([c2172f3](https://github.com/vuejs/core/commit/c2172f3a0ebbd7153e209dd8df6d9724bc524d9a)), closes [#8236](https://github.com/vuejs/core/issues/8236)
-* **compiler-sfc:** enable props destructure when reactivity transform option is enabled ([862edfd](https://github.com/vuejs/core/commit/862edfd91a2c2f6b75f943cb1a9682c4be5d7fa8))
-* **compiler-sfc:** fix built-in type resolving in external files ([6b194bc](https://github.com/vuejs/core/commit/6b194bcf3b8143895c2a472cd87998ebf9856146)), closes [#8244](https://github.com/vuejs/core/issues/8244)
-* **compiler-sfc:** transform destructured props when reactivity transform option is enabled ([#8252](https://github.com/vuejs/core/issues/8252)) ([287bd99](https://github.com/vuejs/core/commit/287bd999942e58925377f50540c7134cff2a9279))
-* **runtime-core:** ensure defineComponent name in extraOptions takes higher priority ([b2be75b](https://github.com/vuejs/core/commit/b2be75bad4ba70da1da6930eb914e51ce2c630b2))
-* **runtime-dom:** check attribute value when setting option value ([#8246](https://github.com/vuejs/core/issues/8246)) ([4495373](https://github.com/vuejs/core/commit/4495373d28d9fa4479eedd224adb16248ae0b9f4)), closes [#8227](https://github.com/vuejs/core/issues/8227)
-* **suspense:** fix nested suspensible suspense with no asyn deps ([e147512](https://github.com/vuejs/core/commit/e1475129fc6f8c086c2ec667476900b8c8f46774)), closes [#8206](https://github.com/vuejs/core/issues/8206)
-* **types:** remove short syntax support in defineSlots() ([1279b17](https://github.com/vuejs/core/commit/1279b1730079f77692a0817d51bbba57eb2b871b))
-
-
-
-# [3.3.0-beta.4](https://github.com/vuejs/core/compare/v3.3.0-beta.3...v3.3.0-beta.4) (2023-05-05)
-
-
-### Bug Fixes
-
-* **runtime-core:** handle template ref with number values ([#8233](https://github.com/vuejs/core/issues/8233)) ([1b1242f](https://github.com/vuejs/core/commit/1b1242f4d1349e361335b2815f41742d41283a94)), closes [#8230](https://github.com/vuejs/core/issues/8230)
-* **types:** retain compatibility for provide() usage with explicit type parameter ([038cd83](https://github.com/vuejs/core/commit/038cd830d5b34b47d7e7e1c61f0973d27cd8b915))
+* **reactivity:** make toRaw work on proxies created by proxyRef ([46c3ab1](https://github.com/vuejs/core/commit/46c3ab1d714024894fa1d33e495d5d35c7817d4d))
+* **reactivity:** pass oldValue to computed getter ([#11813](https://github.com/vuejs/core/issues/11813)) ([98864a7](https://github.com/vuejs/core/commit/98864a7ef5c8080c407166c8221488a4eacbbc81)), closes [#11812](https://github.com/vuejs/core/issues/11812)
+* **reactivity:** prevent endless recursion in computed getters ([#11797](https://github.com/vuejs/core/issues/11797)) ([716275d](https://github.com/vuejs/core/commit/716275d1b1d2383d8ef0306fcd94558d4d9170f2))
+* **reactivity:** self-referencing computed should refresh ([e84c4a6](https://github.com/vuejs/core/commit/e84c4a608e9dc96fb2a4a29d538bcc64f26103a2)), closes [/github.com/vuejs/core/pull/11797#issuecomment-2330738633](https://github.com//github.com/vuejs/core/pull/11797/issues/issuecomment-2330738633)
+* **scheduler:** prevent duplicate jobs being queued ([#11826](https://github.com/vuejs/core/issues/11826)) ([df56cc5](https://github.com/vuejs/core/commit/df56cc528793b1d6131a1e64095dd5cb95c56bee)), closes [#11712](https://github.com/vuejs/core/issues/11712) [#11807](https://github.com/vuejs/core/issues/11807)
+* **suspense:** avoid updating anchor if activeBranch has not been rendered to the actual container ([#11818](https://github.com/vuejs/core/issues/11818)) ([3c0d531](https://github.com/vuejs/core/commit/3c0d531fa7fe762bfe46fbe63f318adc95221795)), closes [#11806](https://github.com/vuejs/core/issues/11806)
+* **Transition:** handle KeepAlive child unmount in Transition out-in mode ([#11778](https://github.com/vuejs/core/issues/11778)) ([3116553](https://github.com/vuejs/core/commit/311655352931863dfcf520b8cf29cebc5b7e1e00)), closes [#11775](https://github.com/vuejs/core/issues/11775)
+* **types:** add HTMLDialogElement missing close event ([#11811](https://github.com/vuejs/core/issues/11811)) ([3634f7a](https://github.com/vuejs/core/commit/3634f7a4c1649ad2e7e969eb4512512868c61d01))
+* **types:** added name attribute support to details tag ([#11823](https://github.com/vuejs/core/issues/11823)) ([c74176e](https://github.com/vuejs/core/commit/c74176ec7b4d1d34159ce21d600c04b157ac5549)), closes [#11821](https://github.com/vuejs/core/issues/11821)
+* **types:** fix defineComponent props inference when setup() has explicit annotation ([fca20a3](https://github.com/vuejs/core/commit/fca20a39aa4a6f98c8f972bd435ebb7dc535648a)), closes [#11803](https://github.com/vuejs/core/issues/11803)
+* **useTemplateRef:** properly fix readonly warning in dev and ensure prod behavior consistency ([9b7797d](https://github.com/vuejs/core/commit/9b7797d0d1fc773e979e042673d5b9b3151c40fc)), closes [#11808](https://github.com/vuejs/core/issues/11808) [#11816](https://github.com/vuejs/core/issues/11816) [#11810](https://github.com/vuejs/core/issues/11810)
 
 
 ### Features
 
-* **compiler-dom:** treat inert as boolean attribute ([#8209](https://github.com/vuejs/core/issues/8209)) ([918ec8a](https://github.com/vuejs/core/commit/918ec8a5cbc825a3947cd35fe966671c245af087)), closes [#8208](https://github.com/vuejs/core/issues/8208)
-* **types:** add slots types for built-in components ([#6033](https://github.com/vuejs/core/issues/6033)) ([3cb4dc9](https://github.com/vuejs/core/commit/3cb4dc9e5538e1c2bde9fa691b001615a848c546))
-* **types:** provide ExtractPublicPropTypes utility type ([bff63c5](https://github.com/vuejs/core/commit/bff63c5498f5fa098689c18defe48ae08d47eadb)), closes [#5272](https://github.com/vuejs/core/issues/5272) [#8168](https://github.com/vuejs/core/issues/8168)
+* **compiler-core:** parse modifiers as expression to provide location data ([#11819](https://github.com/vuejs/core/issues/11819)) ([3f13203](https://github.com/vuejs/core/commit/3f13203564164eeb2945bdc0b9ef755c37477d75))
 
 
 
-# [3.3.0-beta.3](https://github.com/vuejs/core/compare/v3.3.0-beta.2...v3.3.0-beta.3) (2023-05-01)
+## [3.5.1](https://github.com/vuejs/core/compare/v3.5.0...v3.5.1) (2024-09-04)
 
 
 ### Bug Fixes
 
-* **compiler-core:** handle slot argument parsing edge case ([b434d12](https://github.com/vuejs/core/commit/b434d12bf6cbd49a7c99b1646d9517d8393ea49f))
-* **hmr:** keep slots proxy mutable for hmr ([c117d9c](https://github.com/vuejs/core/commit/c117d9c257820481b85304db26ce5c77af5d050c)), closes [#8188](https://github.com/vuejs/core/issues/8188)
-* **types:** fix provide type checking for ref value ([de87e6e](https://github.com/vuejs/core/commit/de87e6e405dfaf9a917d7eb423fcee35237c2020)), closes [#8201](https://github.com/vuejs/core/issues/8201)
-
-
-### Features
-
-* **compiler-sfc:** expose parseCache ([4576548](https://github.com/vuejs/core/commit/45765488d498d94f8760c9e82f1177070057b17c)), closes [#8202](https://github.com/vuejs/core/issues/8202)
+* **build:** improve built-in components treeshakability ([4eee630](https://github.com/vuejs/core/commit/4eee630b3122a10d0baf9b91358cfffa92d6fd81))
+* **reactivity:** handle non-array arguments in reactive `concat` method ([#11794](https://github.com/vuejs/core/issues/11794)) ([475977a](https://github.com/vuejs/core/commit/475977a6f76b77392610e0a3ec2b0e076d1e1d59)), closes [#11792](https://github.com/vuejs/core/issues/11792)
+* **Transition:** avoid applying transition hooks on comment vnode ([#11788](https://github.com/vuejs/core/issues/11788)) ([51912f8](https://github.com/vuejs/core/commit/51912f8a02e35f172f6d30ed7a2f3a92c1407cf9)), closes [#11782](https://github.com/vuejs/core/issues/11782)
+* **types:** avoid using intersection type in `Readonly<...>` to fix JSDoc emit ([#11799](https://github.com/vuejs/core/issues/11799)) ([7518bc1](https://github.com/vuejs/core/commit/7518bc19dc73ba46dcf1eef6e23f9e6e75552675))
+* **useTemplateRef:** fix readonly warning when useTemplateRef has same variable name as template ref ([bc63df0](https://github.com/vuejs/core/commit/bc63df01992fdbf0b6749ad234153725697ed896)), closes [#11795](https://github.com/vuejs/core/issues/11795) [#11802](https://github.com/vuejs/core/issues/11802) [#11804](https://github.com/vuejs/core/issues/11804)
 
 
 
-# [3.3.0-beta.2](https://github.com/vuejs/core/compare/v3.3.0-beta.1...v3.3.0-beta.2) (2023-04-25)
+# [3.5.0](https://github.com/vuejs/core/compare/v3.5.0-rc.1...v3.5.0) (2024-09-03)
+
+## Aggregated Features List for 3.5 (alpha to stable)
+
+### Reactivity
+
+- **reactivity**: Refactor reactivity system to use version counting and doubly-linked list tracking ([#10397](https://github.com/vuejs/core/pull/10397)) ([05eb4e0](https://github.com/vuejs/core/commit/05eb4e0fefd585125dd60b7f8fe9c36928d921aa))
+- **reactivity**: Optimize array tracking ([#9511](https://github.com/vuejs/core/pull/9511)) ([70196a4](https://github.com/vuejs/core/commit/70196a40cc078f50fcc1110c38c06fbcc70b205e))
+- **compiler-sfc:** enable reactive props destructure by default ([d2dac0e](https://github.com/vuejs/core/commit/d2dac0e359c47d1ed0aa77eda488e76fd6466d2d))
+- **reactivity:** `onEffectCleanup` API ([2cc5615](https://github.com/vuejs/core/commit/2cc5615590de77126e8df46136de0240dbde5004)), closes [#10173](https://github.com/vuejs/core/issues/10173)
+- **reactivity:** add `failSilently` argument for `onScopeDispose` ([9a936aa](https://github.com/vuejs/core/commit/9a936aaec489c79433a32791ecf5ddb1739a62bd))
+- **reactivity/watch:** base `watch`, `getCurrentWatcher`, and `onWatcherCleanup` ([#9927](https://github.com/vuejs/core/issues/9927)) ([205e5b5](https://github.com/vuejs/core/commit/205e5b5e277243c3af2c937d9bd46cf671296b72))
+- **reactivity/watch:** add pause/resume for ReactiveEffect, EffectScope, and WatchHandle ([#9651](https://github.com/vuejs/core/issues/9651)) ([267093c](https://github.com/vuejs/core/commit/267093c31490050bfcf3ff2b30a2aefee2dad582))
+- **watch:** support passing number to `deep` option to control the watch depth ([#9572](https://github.com/vuejs/core/issues/9572)) ([22f7d96](https://github.com/vuejs/core/commit/22f7d96757956ebe0baafe52256aa327908cc51c))
+- **types:** export `MultiWatchSources` type ([#9563](https://github.com/vuejs/core/issues/9563)) ([998dca5](https://github.com/vuejs/core/commit/998dca59f140420280803233f41707580688562c))
+- **types:** allow computed getter and setter types to be unrelated ([#11472](https://github.com/vuejs/core/issues/11472)) ([a01675e](https://github.com/vuejs/core/commit/a01675ef8f99b5acd6832c53051f4415b18609f2)), closes [#7271](https://github.com/vuejs/core/issues/7271)
+
+### SSR
+
+- **runtime-core:** `useId()` and `app.config.idPrefix` ([#11404](https://github.com/vuejs/core/issues/11404)) ([73ef156](https://github.com/vuejs/core/commit/73ef1561f6905d69f968c094d0180c61824f1247))
+- **hydration:** lazy hydration strategies for async components ([#11458](https://github.com/vuejs/core/issues/11458)) ([d14a11c](https://github.com/vuejs/core/commit/d14a11c1cdcee88452f17ce97758743c863958f4))
+- **hydration:** support suppressing hydration mismatch via data-allow-mismatch ([94fb2b8](https://github.com/vuejs/core/commit/94fb2b8106a66bcca1a3f922a246a29fdd1274b1))
+
+### Custom Element
+
+- **custom-element:** `useHost()` helper ([775103a](https://github.com/vuejs/core/commit/775103af37df69d34c79f12c4c1776c47d07f0a0))
+- **custom-element:** `useShadowRoot()` helper ([5a1a89b](https://github.com/vuejs/core/commit/5a1a89bd6178cc2f84ba91da7d72aee4c6ec1282)), closes [#6113](https://github.com/vuejs/core/issues/6113) [#8195](https://github.com/vuejs/core/issues/8195)
+- **custom-element:** expose `this.$host` in Options API ([1ef8f46](https://github.com/vuejs/core/commit/1ef8f46af0cfdec2fed66376772409e0aa25ad50))
+- **custom-element:** inject child components styles to custom element shadow root ([#11517](https://github.com/vuejs/core/issues/11517)) ([56c76a8](https://github.com/vuejs/core/commit/56c76a8b05c45f782ed3a16ec77c6292b71a17f1)), closes [#4662](https://github.com/vuejs/core/issues/4662) [#7941](https://github.com/vuejs/core/issues/7941) [#7942](https://github.com/vuejs/core/issues/7942)
+- **custom-element:** support configurable app instance in defineCustomElement ([6758c3c](https://github.com/vuejs/core/commit/6758c3cd0427f97394d95168c655dae3b7fa62cd)), closes [#4356](https://github.com/vuejs/core/issues/4356) [#4635](https://github.com/vuejs/core/issues/4635)
+- **custom-element:** support css `:host` selector by applying css vars on host element ([#8830](https://github.com/vuejs/core/issues/8830)) ([03a9ea2](https://github.com/vuejs/core/commit/03a9ea2b88df0842a820e09f7445c4b9189e3fcb)), closes [#8826](https://github.com/vuejs/core/issues/8826)
+- **custom-element:** support emit with options ([e181bff](https://github.com/vuejs/core/commit/e181bff6dc39d5cef92000c10291243c7d6e4d08)), closes [#7605](https://github.com/vuejs/core/issues/7605)
+- **custom-element:** support expose on customElement ([#6256](https://github.com/vuejs/core/issues/6256)) ([af838c1](https://github.com/vuejs/core/commit/af838c1b5ec23552e52e64ffa7db0eb0246c3624)), closes [#5540](https://github.com/vuejs/core/issues/5540)
+- **custom-element:** support `nonce` option for injected style tags ([bb4a02a](https://github.com/vuejs/core/commit/bb4a02a70c30e739a3c705b3d96d09258d7d7ded)), closes [#6530](https://github.com/vuejs/core/issues/6530)
+- **custom-element:** support passing custom-element-specific options via 2nd argument of defineCustomElement ([60a88a2](https://github.com/vuejs/core/commit/60a88a2b129714186cf6ba66f30f31d733d0311e))
+- **custom-element:** support `shadowRoot: false` in `defineCustomElement()` ([37d2ce5](https://github.com/vuejs/core/commit/37d2ce5d8e0fac4a00064f02b05f91f69b2d5d5e)), closes [#4314](https://github.com/vuejs/core/issues/4314) [#4404](https://github.com/vuejs/core/issues/4404)
+
+### Teleport
+
+- **teleport:** support deferred Teleport ([#11387](https://github.com/vuejs/core/issues/11387)) ([59a3e88](https://github.com/vuejs/core/commit/59a3e88903b10ac2278170a44d5a03f24fef23ef)), closes [#2015](https://github.com/vuejs/core/issues/2015) [#11386](https://github.com/vuejs/core/issues/11386)
+- **teleport/transition:** support directly nesting Teleport inside Transition ([#6548](https://github.com/vuejs/core/issues/6548)) ([0e6e3c7](https://github.com/vuejs/core/commit/0e6e3c7eb0e5320b7c1818e025cb4a490fede9c0)), closes [#5836](https://github.com/vuejs/core/issues/5836)
+
+### Misc
+
+- **runtime-core:** `useTemplateRef()` ([3ba70e4](https://github.com/vuejs/core/commit/3ba70e49b5856c53611c314d4855d679a546a7df))
+- **runtime-core:** add `app.onUnmount()` for registering cleanup functions ([#4619](https://github.com/vuejs/core/issues/4619)) ([582a3a3](https://github.com/vuejs/core/commit/582a3a382b1adda565bac576b913a88d9e8d7a9e)), closes [#4516](https://github.com/vuejs/core/issues/4516)
+- **runtime-core:** add `app.config.throwUnhandledErrorInProduction` ([f476b7f](https://github.com/vuejs/core/commit/f476b7f030f2dd427ca655fcea36f4933a4b4da0)), closes [#7876](https://github.com/vuejs/core/issues/7876)
+- **runtime-dom:** Trusted Types compatibility ([#10844](https://github.com/vuejs/core/issues/10844)) ([6d4eb94](https://github.com/vuejs/core/commit/6d4eb94853ed1b2b1675bdd7d5ba9c75cc6daed5))
+- **compiler-core:** support `Symbol` global in template expressions ([#9069](https://github.com/vuejs/core/issues/9069)) ([a501a85](https://github.com/vuejs/core/commit/a501a85a7c910868e01a5c70a2abea4e9d9e87f3))
+- **types:** export more emit related types ([#11017](https://github.com/vuejs/core/issues/11017)) ([189573d](https://github.com/vuejs/core/commit/189573dcee2a16bd3ed36ff5589d43f535e5e733))
+* **types:** add loading prop to iframe ([#11767](https://github.com/vuejs/core/issues/11767)) ([d86fe0e](https://github.com/vuejs/core/commit/d86fe0ec002901dc359a0e85f3a421b4a8538d68))
+
+### Internals
+
+- **reactivity:** store value cache on CustomRefs impls ([#11539](https://github.com/vuejs/core/issues/11539)) ([e044b6e](https://github.com/vuejs/core/commit/e044b6e737efc9433d1d84590036b82280da6292))
+- **types:** provide internal options for directly using user types in language tools ([#10801](https://github.com/vuejs/core/issues/10801)) ([75c8cf6](https://github.com/vuejs/core/commit/75c8cf63a1ef30ac84f91282d66ad3f57c6612e9))
+- **types:** provide internal options for using refs type in language tools ([#11492](https://github.com/vuejs/core/issues/11492)) ([5ffd1a8](https://github.com/vuejs/core/commit/5ffd1a89455807d5069eb2c28eba0379641dca76))
+
+
+
+## Bug Fixes
+
+* **compiler-sfc:** fix import usage check for kebab-case same name shorthand binding ([0f7c0e5](https://github.com/vuejs/core/commit/0f7c0e5dc0eedada7a5194db87fd0a7dbd1d3354)), closes [#11745](https://github.com/vuejs/core/issues/11745) [#11754](https://github.com/vuejs/core/issues/11754)
+* **cssVars:** correctly escape double quotes in SSR ([#11784](https://github.com/vuejs/core/issues/11784)) ([7b5b6e0](https://github.com/vuejs/core/commit/7b5b6e0275f35748dca6d7eb842f8ab2364c6b9a)), closes [#11779](https://github.com/vuejs/core/issues/11779)
+* **deps:** update dependency postcss to ^8.4.44 ([#11774](https://github.com/vuejs/core/issues/11774)) ([cb843e0](https://github.com/vuejs/core/commit/cb843e0be31f9e563ccfc30eca0c06f2a224b505))
+* **hydration:** escape css var name to avoid mismatch ([#11739](https://github.com/vuejs/core/issues/11739)) ([ca12e77](https://github.com/vuejs/core/commit/ca12e776bc53aaa31f2df6bb6edc6be1b2f10c37)), closes [#11735](https://github.com/vuejs/core/issues/11735)
+* **hydration:** handle text nodes with 0 during hydration ([#11772](https://github.com/vuejs/core/issues/11772)) ([c756da2](https://github.com/vuejs/core/commit/c756da24b2d8635cf52b4c7d3abf5bf938852cc5)), closes [#11771](https://github.com/vuejs/core/issues/11771)
+* **reactivity:** correctly handle method calls on user-extended arrays ([#11760](https://github.com/vuejs/core/issues/11760)) ([9817c80](https://github.com/vuejs/core/commit/9817c80187bec6a3344c74d65fac92262de0fcdd)), closes [#11759](https://github.com/vuejs/core/issues/11759)
+* **runtime-dom:** avoid unnecessary prop patch for checkbox ([#11657](https://github.com/vuejs/core/issues/11657)) ([c3ce9fe](https://github.com/vuejs/core/commit/c3ce9fe3d8fc27d864ce7148cd36da882cfc21ab)), closes [#11647](https://github.com/vuejs/core/issues/11647)
+* **runtime-dom:** prevent unnecessary DOM update from v-model ([#11656](https://github.com/vuejs/core/issues/11656)) ([b1be9bd](https://github.com/vuejs/core/commit/b1be9bd64f2c7c4286fecb25bad5d5edd49efce9)), closes [#11647](https://github.com/vuejs/core/issues/11647)
+* **server-renderer:** Fix call to serverPrefetch in server renderer with an async setup ([#10893](https://github.com/vuejs/core/issues/10893)) ([6039e25](https://github.com/vuejs/core/commit/6039e25e04a8c1db5821955f011d57f1615807ab))
+* **server-renderer:** render `className` during SSR ([#11722](https://github.com/vuejs/core/issues/11722)) ([52cdb0f](https://github.com/vuejs/core/commit/52cdb0f991dc154ae32a2900874d5dbc4e078565))
+* **types/defineModel:** allow getter and setter types to be unrelated ([#11699](https://github.com/vuejs/core/issues/11699)) ([fe07f70](https://github.com/vuejs/core/commit/fe07f7073617df358c2f8cbc3de433359e873c96)), closes [#11697](https://github.com/vuejs/core/issues/11697)
+
+
+
+# [3.5.0-rc.1](https://github.com/vuejs/core/compare/v3.5.0-beta.3...v3.5.0-rc.1) (2024-08-29)
 
 
 ### Bug Fixes
 
-* **compiler-sfc:** avoid all hard errors when inferring runtime type ([2d9f6f9](https://github.com/vuejs/core/commit/2d9f6f926453c46f542789927bcd30d15da9c24b))
-* **compiler-sfc:** normalize windows paths when resolving types ([#8136](https://github.com/vuejs/core/issues/8136)) ([29da504](https://github.com/vuejs/core/commit/29da50468770fcee16ba5d5bec7166dd5bc120ee))
-* **compiler-sfc:** props bindings should not override user declared bindings ([433a58c](https://github.com/vuejs/core/commit/433a58ccb61c25512dcc3df155b8e285256917ef)), closes [#8148](https://github.com/vuejs/core/issues/8148)
+* **compiler-sfc:** skip circular tsconfig project reference ([#11680](https://github.com/vuejs/core/issues/11680)) ([9c4c2e5](https://github.com/vuejs/core/commit/9c4c2e51b045218d0c5ca64b4fb58b17d5d580cc)), closes [#11382](https://github.com/vuejs/core/issues/11382)
+* **custom-element:** handle keys set on custom elements ([#11655](https://github.com/vuejs/core/issues/11655)) ([f1d1831](https://github.com/vuejs/core/commit/f1d1831f07fe52d5681a5ec9ec310572463abf26)), closes [#11641](https://github.com/vuejs/core/issues/11641)
+* **deps:** update dependency monaco-editor to ^0.51.0 ([#11713](https://github.com/vuejs/core/issues/11713)) ([434f8a9](https://github.com/vuejs/core/commit/434f8a97c77f68aeae050e9e4e1f54f63bc4bd26))
+* **keep-alive:**  reset keep alive flag when the component is removed from include ([#11718](https://github.com/vuejs/core/issues/11718)) ([29c321b](https://github.com/vuejs/core/commit/29c321bfd33f9197244dec3d027077e63b2cdf2f)), closes [#11717](https://github.com/vuejs/core/issues/11717)
+* **reactivity:** avoid infinite recursion when mutating ref wrapped in reactive ([313e4bf](https://github.com/vuejs/core/commit/313e4bf55214ac1e334a99c329a3ba5daca4f156)), closes [#11696](https://github.com/vuejs/core/issues/11696)
+* **reactivity:** ensure watcher with once: true are properly removed from effect scope  ([#11665](https://github.com/vuejs/core/issues/11665)) ([fbc0c42](https://github.com/vuejs/core/commit/fbc0c42bcf6dea5a6ae664223fa19d4375ca39f0))
+* **runtime-dom:** setting innerHTML when patching props should go through trusted types ([d875de5](https://github.com/vuejs/core/commit/d875de54e9e03e0768fe550aa4c4886a4baf3bd7))
+* **types:** GlobalDirective / GlobalComponents should not be records ([42e8df6](https://github.com/vuejs/core/commit/42e8df62030e7f2c287d9103f045e67b34a63e3b))
+
+
+
+# [3.5.0-beta.3](https://github.com/vuejs/core/compare/v3.5.0-beta.2...v3.5.0-beta.3) (2024-08-20)
+
+
+### Bug Fixes
+
+* **reactivity:** extended methods respect reactive ([#11629](https://github.com/vuejs/core/issues/11629)) ([9de1d10](https://github.com/vuejs/core/commit/9de1d101f98bf6081f41038f6974826f190330a0)), closes [#11628](https://github.com/vuejs/core/issues/11628)
+* **runtime-core:** correct type inference for PascalCase emits ([#11579](https://github.com/vuejs/core/issues/11579)) ([d7d0371](https://github.com/vuejs/core/commit/d7d0371e74707ee601020f67de88e091cdae2673)), closes [vuejs/language-tools#4269](https://github.com/vuejs/language-tools/issues/4269)
+* **runtime-core:** ensure suspense content inherit scopeId ([#10652](https://github.com/vuejs/core/issues/10652)) ([ac2a410](https://github.com/vuejs/core/commit/ac2a410e46392db63ca4ed2db3c0fa71ebe1e855)), closes [#5148](https://github.com/vuejs/core/issues/5148)
+* **runtime-core:** pre jobs without an id should run first ([#7746](https://github.com/vuejs/core/issues/7746)) ([b332f80](https://github.com/vuejs/core/commit/b332f80f0edb018229a23b43b93bb402b6368a3c))
+* **ssr:** apply ssr props to the the fallback vnode-based branch in ssr ([#7247](https://github.com/vuejs/core/issues/7247)) ([98b83e8](https://github.com/vuejs/core/commit/98b83e86d16c635547a1e735e5fb675aea2f0f1b)), closes [#6123](https://github.com/vuejs/core/issues/6123)
+* **types/custom-element:** `defineCustomElement` with required props ([#11578](https://github.com/vuejs/core/issues/11578)) ([5e0f6d5](https://github.com/vuejs/core/commit/5e0f6d5f8fe7c4eb8f247357c3e2e281726f36db))
+* **types:** strip non-prop default values from return type of withDefaults ([#9998](https://github.com/vuejs/core/issues/9998)) ([44973bb](https://github.com/vuejs/core/commit/44973bb3e790db7d8aa7af4eda21c80cac73a8de)), closes [#9899](https://github.com/vuejs/core/issues/9899)
+* **watch:** handle errors in computed used as watch source ([#11626](https://github.com/vuejs/core/issues/11626)) ([8bcaad4](https://github.com/vuejs/core/commit/8bcaad4a32cf0f1f89e0259f6a53036620b7fe9f)), closes [#11624](https://github.com/vuejs/core/issues/11624)
 
 
 ### Features
 
-* **compiler-sfc:** support project references when resolving types ([1c0be5c](https://github.com/vuejs/core/commit/1c0be5c7444966fa444460e87633cf44ec60292a)), closes [#8140](https://github.com/vuejs/core/issues/8140)
+* **reactivity:** base `watch`, `getCurrentWatcher`, and `onWatcherCleanup` ([#9927](https://github.com/vuejs/core/issues/9927)) ([205e5b5](https://github.com/vuejs/core/commit/205e5b5e277243c3af2c937d9bd46cf671296b72))
 
 
 ### Performance Improvements
 
-* **compiler-sfc:** infer ref binding type for more built-in methods ([a370e80](https://github.com/vuejs/core/commit/a370e8006a70ea49a7d04c8c1a42d0947eba5dea))
+* **runtime-core:** use `apply` to avoid spreading. ([#5985](https://github.com/vuejs/core/issues/5985)) ([bb6babc](https://github.com/vuejs/core/commit/bb6babca8f206615d4e246457cd54d21bb3bc5a4))
 
 
 
-# [3.3.0-beta.1](https://github.com/vuejs/core/compare/v3.3.0-alpha.13...v3.3.0-beta.1) (2023-04-21)
+# [3.5.0-beta.2](https://github.com/vuejs/core/compare/v3.5.0-beta.1...v3.5.0-beta.2) (2024-08-15)
+
+
+### Bug Fixes
+
+* **build:** revert entities to 4.5 to avoid runtime resolution errors ([e9e0815](https://github.com/vuejs/core/commit/e9e08155bf8d00c3327ed7371330eb2ae467e560)), closes [#11603](https://github.com/vuejs/core/issues/11603)
+* **compiler-core:** use ast-based check for function expressions when possible ([5861229](https://github.com/vuejs/core/commit/58612294757480974e667652ede5bbcf72b1089d)), closes [#11615](https://github.com/vuejs/core/issues/11615)
+* **compiler-sfc:** fix prefixIdentifier default value ([3d6f015](https://github.com/vuejs/core/commit/3d6f01571b3fb61b32da599d0419eff4e3ebb231))
+* **compiler-sfc:** handle keyof operator with index object ([#11581](https://github.com/vuejs/core/issues/11581)) ([fe00815](https://github.com/vuejs/core/commit/fe008152c0612ff3ecc7ad88e7e66a06b1b2bc3f))
+* **custom-element:** keep instance.isCE for backwards compat ([e19fc27](https://github.com/vuejs/core/commit/e19fc270428b59456fee43224990138c4d6ccb2d))
+* **deps:** update dependency postcss to ^8.4.41 ([#11585](https://github.com/vuejs/core/issues/11585)) ([4c4e12a](https://github.com/vuejs/core/commit/4c4e12ae28d67d616924b0601e68adc551959971))
+* **keep-alive:** ensure include/exclude regexp work with global flag ([#11595](https://github.com/vuejs/core/issues/11595)) ([3653bc0](https://github.com/vuejs/core/commit/3653bc0f45d6fedf84e29b64ca52584359c383c0))
+* **reactivity:** ensure extended method arguments are not lost ([#11574](https://github.com/vuejs/core/issues/11574)) ([4085def](https://github.com/vuejs/core/commit/4085def1bae42d01ee3c22c731cc4a02096464ee)), closes [#11570](https://github.com/vuejs/core/issues/11570)
+* **reactivity:** sync watch should be executed correctly ([#11589](https://github.com/vuejs/core/issues/11589)) ([3bda3e8](https://github.com/vuejs/core/commit/3bda3e83fd9e2fbe451a1c79dae82ff6a7467683)), closes [#11577](https://github.com/vuejs/core/issues/11577)
+* **types/computed:** ensure type safety for `WritableComputedRef` ([#11608](https://github.com/vuejs/core/issues/11608)) ([5cf5a16](https://github.com/vuejs/core/commit/5cf5a1620d9a97382d386c277265d9dd051fe484))
+* **types:** add fallback stub for DOM types when DOM lib is absent ([#11598](https://github.com/vuejs/core/issues/11598)) ([fee6697](https://github.com/vuejs/core/commit/fee669764fbf475adce9e47a7a73b4937ab31ffc))
 
 
 ### Features
 
-* allow accessing console in template ([#6508](https://github.com/vuejs/core/issues/6508)) ([fe76224](https://github.com/vuejs/core/commit/fe762247f8035d28d543bc5602ad01b0c258f6d6)), closes [#7939](https://github.com/vuejs/core/issues/7939)
-* **compiler-sfc:** improve utility type Partial and Required ([#8103](https://github.com/vuejs/core/issues/8103)) ([1d1d728](https://github.com/vuejs/core/commit/1d1d72894995fde14bd09e2990462c19d5176bf9))
-* **deprecation:** deprecate [@vnode](https://github.com/vnode) hooks in favor of vue: prefix ([5f0394a](https://github.com/vuejs/core/commit/5f0394a5ab88c82c74e240161499721f63d5462e))
-* **deprecation:** deprecate v-is directive ([bbd8301](https://github.com/vuejs/core/commit/bbd8301a1344b02de635ea16d4822db1c343bd12))
-* **deprecation:** unwrap injected refs in Options API by default, deprecate app.config.unwrapInjectedRefs ([526fa3b](https://github.com/vuejs/core/commit/526fa3b2ccf038375e76f8af2f1ddf79a7388878))
-* **suspense:** introduce suspensible option for `<Suspense>` ([#6736](https://github.com/vuejs/core/issues/6736)) ([cb37d0b](https://github.com/vuejs/core/commit/cb37d0b9ffb5d4bb81a0367d84295dec8dd4448c)), closes [#5513](https://github.com/vuejs/core/issues/5513)
+* **deprecated:** remove deprecated parseExpressions option ([#11597](https://github.com/vuejs/core/issues/11597)) ([4e7d5db](https://github.com/vuejs/core/commit/4e7d5db4d276a5d4aaf3af7d43cfd28c171db307))
 
 
 
-# [3.3.0-alpha.13](https://github.com/vuejs/core/compare/v3.3.0-alpha.12...v3.3.0-alpha.13) (2023-04-20)
+# [3.5.0-beta.1](https://github.com/vuejs/core/compare/v3.4.37...v3.5.0-beta.1) (2024-08-08)
 
 
 ### Bug Fixes
 
-* **compiler-sfc:** handle type merging + fix namespace access when inferring type ([d53e157](https://github.com/vuejs/core/commit/d53e157805678db7a3b9ca2fccc74530e1dfbc48)), closes [#8102](https://github.com/vuejs/core/issues/8102)
-* **compiler-sfc:** normalize filename when invalidating cache ([9b5a34b](https://github.com/vuejs/core/commit/9b5a34bf8c0d1b4c6ec3cf1434076b7e25065f84))
-* **hmr:** always traverse static children in dev ([f17a82c](https://github.com/vuejs/core/commit/f17a82c769cfb60ee6785ef5d34d91191d153542)), closes [#7921](https://github.com/vuejs/core/issues/7921) [#8100](https://github.com/vuejs/core/issues/8100)
-* **hmr:** force update cached slots during HMR ([94fa67a](https://github.com/vuejs/core/commit/94fa67a4f73b3646c8c1e29512a71b17bd56efc3)), closes [#7155](https://github.com/vuejs/core/issues/7155) [#7158](https://github.com/vuejs/core/issues/7158)
+* **custom-element:** delay mounting of custom elements with async parent ([37ccb9b](https://github.com/vuejs/core/commit/37ccb9b9a0e4381f9465e0fc6459609003030da4)), closes [#8127](https://github.com/vuejs/core/issues/8127) [#9341](https://github.com/vuejs/core/issues/9341) [#9351](https://github.com/vuejs/core/issues/9351) [#9351](https://github.com/vuejs/core/issues/9351)
+* **custom-element:** delete prop on attribute removal ([506c4c5](https://github.com/vuejs/core/commit/506c4c53fdf9766c2ce9517ad58d501ef6b1b9de)), closes [#11276](https://github.com/vuejs/core/issues/11276)
+* **custom-element:** ignore scoped id ([7f2c505](https://github.com/vuejs/core/commit/7f2c505f92026408a8262ba9b5104a465be19446))
+* **custom-element:** reflect prop default value on custom element ([63689ed](https://github.com/vuejs/core/commit/63689ed77601d5f9b78540f810612806c3a5de15)), closes [#9006](https://github.com/vuejs/core/issues/9006) [#10537](https://github.com/vuejs/core/issues/10537)
+* **custom-element:** support early-set domProps for async custom elements ([a07e7bf](https://github.com/vuejs/core/commit/a07e7bf5536a6b3db70ba9bb1c3f366dac1bf5a0)), closes [#11081](https://github.com/vuejs/core/issues/11081) [#11082](https://github.com/vuejs/core/issues/11082)
+* **types/custome-element:** `defineCustomElement` props inference with array emits ([#11384](https://github.com/vuejs/core/issues/11384)) ([e94b01b](https://github.com/vuejs/core/commit/e94b01bd8a1ec740eddc823839ab2627b307c1b0)), closes [#11353](https://github.com/vuejs/core/issues/11353)
+* **types:** allow using InjectionKey as valid property key ([321d807](https://github.com/vuejs/core/commit/321d80758c42fccbd39ecbb63f1a4f6632a1580a)), closes [#5089](https://github.com/vuejs/core/issues/5089)
 
 
 ### Features
 
-* **compiler-sfc:** support dynamic imports when resolving types ([4496456](https://github.com/vuejs/core/commit/4496456d7d9947560ef1e35ccb176b97a27bd8f4))
-* **compiler-sfc:** support export * when resolving types ([7c3ca3c](https://github.com/vuejs/core/commit/7c3ca3cc3e122fe273e80a950c57d492a7f0bf4a))
-* **compiler-sfc:** support ExtractPropTypes when resolving types ([50c0bbe](https://github.com/vuejs/core/commit/50c0bbe5221dbc1dc353d4960e69ec7c8ba12905)), closes [#8104](https://github.com/vuejs/core/issues/8104)
-* hasInjectionContext() for libraries ([#8111](https://github.com/vuejs/core/issues/8111)) ([5510ce3](https://github.com/vuejs/core/commit/5510ce385abfa151c07a5253cccf4abccabdd01d))
+* **custom-element:** expose this.$host in Options API ([1ef8f46](https://github.com/vuejs/core/commit/1ef8f46af0cfdec2fed66376772409e0aa25ad50))
+* **custom-element:** inject child components styles to custom element shadow root ([#11517](https://github.com/vuejs/core/issues/11517)) ([56c76a8](https://github.com/vuejs/core/commit/56c76a8b05c45f782ed3a16ec77c6292b71a17f1)), closes [#4662](https://github.com/vuejs/core/issues/4662) [#7941](https://github.com/vuejs/core/issues/7941) [#7942](https://github.com/vuejs/core/issues/7942)
+* **custom-element:** support configurable app instance in defineCustomElement ([6758c3c](https://github.com/vuejs/core/commit/6758c3cd0427f97394d95168c655dae3b7fa62cd)), closes [#4356](https://github.com/vuejs/core/issues/4356) [#4635](https://github.com/vuejs/core/issues/4635)
+* **custom-element:** support css `:host` selector by applying css vars on host element ([#8830](https://github.com/vuejs/core/issues/8830)) ([03a9ea2](https://github.com/vuejs/core/commit/03a9ea2b88df0842a820e09f7445c4b9189e3fcb)), closes [#8826](https://github.com/vuejs/core/issues/8826)
+* **custom-element:** support emit with options ([e181bff](https://github.com/vuejs/core/commit/e181bff6dc39d5cef92000c10291243c7d6e4d08)), closes [#7605](https://github.com/vuejs/core/issues/7605)
+* **custom-element:** support for expose on customElement ([#6256](https://github.com/vuejs/core/issues/6256)) ([af838c1](https://github.com/vuejs/core/commit/af838c1b5ec23552e52e64ffa7db0eb0246c3624)), closes [#5540](https://github.com/vuejs/core/issues/5540)
+* **custom-element:** support nonce option for injected style tags ([bb4a02a](https://github.com/vuejs/core/commit/bb4a02a70c30e739a3c705b3d96d09258d7d7ded)), closes [#6530](https://github.com/vuejs/core/issues/6530)
+* **custom-element:** support passing custom-element-specific options via 2nd argument of defineCustomElement ([60a88a2](https://github.com/vuejs/core/commit/60a88a2b129714186cf6ba66f30f31d733d0311e))
+* **custom-element:** support shadowRoot: false in defineCustomElement() ([37d2ce5](https://github.com/vuejs/core/commit/37d2ce5d8e0fac4a00064f02b05f91f69b2d5d5e)), closes [#4314](https://github.com/vuejs/core/issues/4314) [#4404](https://github.com/vuejs/core/issues/4404)
+* **custom-element:** useHost() helper ([775103a](https://github.com/vuejs/core/commit/775103af37df69d34c79f12c4c1776c47d07f0a0))
+* **custom-element:** useShadowRoot() helper ([5a1a89b](https://github.com/vuejs/core/commit/5a1a89bd6178cc2f84ba91da7d72aee4c6ec1282)), closes [#6113](https://github.com/vuejs/core/issues/6113) [#8195](https://github.com/vuejs/core/issues/8195)
+* **hydration:** allow fine tuning of lazy hydration strategy triggers ([#11530](https://github.com/vuejs/core/issues/11530)) ([261c8b1](https://github.com/vuejs/core/commit/261c8b111d046204bd22392a8b920e3c3d4def48))
+* **reactivity/watch:** add pause/resume for ReactiveEffect, EffectScope, and WatchHandle ([#9651](https://github.com/vuejs/core/issues/9651)) ([267093c](https://github.com/vuejs/core/commit/267093c31490050bfcf3ff2b30a2aefee2dad582))
+* **reactivity:** store value cache on CustomRefs impls ([#11539](https://github.com/vuejs/core/issues/11539)) ([e044b6e](https://github.com/vuejs/core/commit/e044b6e737efc9433d1d84590036b82280da6292))
+* **runtime-dom:** Trusted Types compatibility ([#10844](https://github.com/vuejs/core/issues/10844)) ([6d4eb94](https://github.com/vuejs/core/commit/6d4eb94853ed1b2b1675bdd7d5ba9c75cc6daed5))
+* support specifying allowed keys via generic argument in useTemplateRef() ([1fbfa69](https://github.com/vuejs/core/commit/1fbfa6962b48634ff60837084b82dd57f215c109))
+* **types:** allow computed getter and setter types to be unrelated ([#11472](https://github.com/vuejs/core/issues/11472)) ([a01675e](https://github.com/vuejs/core/commit/a01675ef8f99b5acd6832c53051f4415b18609f2)), closes [#7271](https://github.com/vuejs/core/issues/7271)
+* **types:** export `MultiWatchSources` type ([#9563](https://github.com/vuejs/core/issues/9563)) ([998dca5](https://github.com/vuejs/core/commit/998dca59f140420280803233f41707580688562c))
+* **types:** provide internal options for using refs type in language tools ([#11492](https://github.com/vuejs/core/issues/11492)) ([5ffd1a8](https://github.com/vuejs/core/commit/5ffd1a89455807d5069eb2c28eba0379641dca76))
+* **watch:** support passing number to `deep` option to control the watch depth ([#9572](https://github.com/vuejs/core/issues/9572)) ([22f7d96](https://github.com/vuejs/core/commit/22f7d96757956ebe0baafe52256aa327908cc51c))
 
 
 
-# [3.3.0-alpha.12](https://github.com/vuejs/core/compare/v3.3.0-alpha.11...v3.3.0-alpha.12) (2023-04-18)
-
-
-### Bug Fixes
-
-* **compiler:** fix expression codegen for literal const bindings in non-inline mode ([0f77a2b](https://github.com/vuejs/core/commit/0f77a2b1d1047d66ccdfda70382d1a223886130c))
-
-
-
-# [3.3.0-alpha.11](https://github.com/vuejs/core/compare/v3.3.0-alpha.10...v3.3.0-alpha.11) (2023-04-17)
-
-
-### Bug Fixes
-
-* **compiler-sfc:** normalize windows paths when resolving types ([271df09](https://github.com/vuejs/core/commit/271df09470c61d073185ba6cf3cf50358713c500))
-
-
-
-# [3.3.0-alpha.10](https://github.com/vuejs/core/compare/v3.3.0-alpha.9...v3.3.0-alpha.10) (2023-04-17)
-
-
-### Bug Fixes
-
-* **hmr:** invalidate cached props/emits options on hmr ([4b5b384](https://github.com/vuejs/core/commit/4b5b384485cf8f6124f6738b89e3d047358f3a11))
-* **runtime-core:** properly merge props and emits options from mixins ([#8052](https://github.com/vuejs/core/issues/8052)) ([c94ef02](https://github.com/vuejs/core/commit/c94ef02421d7422bc59d10cf2eee9f4e7dcea6c8)), closes [#7989](https://github.com/vuejs/core/issues/7989)
+# [3.5.0-alpha.5](https://github.com/vuejs/core/compare/v3.4.35...v3.5.0-alpha.5) (2024-07-31)
 
 
 ### Features
 
-* **compiler-sfc:** expose type import deps on compiled script block ([8d8ddd6](https://github.com/vuejs/core/commit/8d8ddd686c832b2ea29b87ef47666b13c4ad5d4c))
-* **compiler-sfc:** expose type resolve APIs ([f22e32e](https://github.com/vuejs/core/commit/f22e32e365bf6292cb606cb7289609e82da8b790))
-* **compiler-sfc:** mark props destructure as experimental and require explicit opt-in ([6b13e04](https://github.com/vuejs/core/commit/6b13e04b4c83fcdbb180dc1d59f536a1309c2960))
-* **compiler-sfc:** support intersection and union types in macros ([d1f973b](https://github.com/vuejs/core/commit/d1f973bff82581fb335d6fc05623d1ad3d84fb7c)), closes [#7553](https://github.com/vuejs/core/issues/7553)
-* **compiler-sfc:** support limited built-in utility types in macros ([1cfab4c](https://github.com/vuejs/core/commit/1cfab4c695b0c28f549f8c97faee5099581792a7))
-* **compiler-sfc:** support mapped types, string types & template type in macros ([fb8ecc8](https://github.com/vuejs/core/commit/fb8ecc803e58bfef0971346c63fefc529812daa7))
-* **compiler-sfc:** support namespace members type in macros ([5ff40bb](https://github.com/vuejs/core/commit/5ff40bb0dc2918b7db15fe9f49db2a135a925572))
-* **compiler-sfc:** support relative imported types in macros ([8aa4ea8](https://github.com/vuejs/core/commit/8aa4ea81d6e4d3110aa1619cca594543da4c9b63))
-* **compiler-sfc:** support resolving type imports from modules ([3982bef](https://github.com/vuejs/core/commit/3982bef533b451d1b59fa243560184a13fe8c18c))
-* **compiler-sfc:** support specifying global types for sfc macros ([4e028b9](https://github.com/vuejs/core/commit/4e028b966991937c83fb2529973fd3d41080bb61)), closes [/github.com/vuejs/core/pull/8083#issuecomment-1508468713](https://github.com//github.com/vuejs/core/pull/8083/issues/issuecomment-1508468713)
-* **compiler-sfc:** support string indexed type in macros ([3f779dd](https://github.com/vuejs/core/commit/3f779ddbf85054c8915fa4537f8a79baab392d5c))
-* **compiler-sfc:** support string/number indexed types in macros ([760755f](https://github.com/vuejs/core/commit/760755f4f83680bee13ad546cdab2e48ade38dff))
+* **hydration:** support suppressing hydration mismatch via data-allow-mismatch ([94fb2b8](https://github.com/vuejs/core/commit/94fb2b8106a66bcca1a3f922a246a29fdd1274b1))
+* lazy hydration strategies for async components ([#11458](https://github.com/vuejs/core/issues/11458)) ([d14a11c](https://github.com/vuejs/core/commit/d14a11c1cdcee88452f17ce97758743c863958f4))
+
+
+
+# [3.5.0-alpha.4](https://github.com/vuejs/core/compare/v3.4.34...v3.5.0-alpha.4) (2024-07-24)
+
+### Bug Fixes
+
+* **suspense/hydration:** fix hydration timing of async component inside suspense ([1b8e197](https://github.com/vuejs/core/commit/1b8e197a5b65d67a9703b8511786fb81df9aa7cc)), closes [#6638](https://github.com/vuejs/core/issues/6638)
+* **useId:** properly mark async boundary for already resolved async component ([cd28172](https://github.com/vuejs/core/commit/cd281725781ada2ab279e919031ae307e146a9d9))
+
+
+
+# [3.5.0-alpha.3](https://github.com/vuejs/core/compare/v3.4.33...v3.5.0-alpha.3) (2024-07-19)
+
+
+### Bug Fixes
+
+* **build:** enable SSR branches in esm-browser builds ([b14cd9a](https://github.com/vuejs/core/commit/b14cd9a68bab082332b0169be075be357be076ca))
+* **compiler-core:** change node hoisting to caching per instance ([#11067](https://github.com/vuejs/core/issues/11067)) ([cd0ea0d](https://github.com/vuejs/core/commit/cd0ea0d479a276583fa181d8ecbc97fb0e4a9dce)), closes [#5256](https://github.com/vuejs/core/issues/5256) [#9219](https://github.com/vuejs/core/issues/9219) [#10959](https://github.com/vuejs/core/issues/10959)
+* **compiler-sfc:** should properly walk desutructured props when reactive destructure is not enabled ([0fd6193](https://github.com/vuejs/core/commit/0fd6193def2380916eb51a118f37f2d9ec2ace23)), closes [#11325](https://github.com/vuejs/core/issues/11325)
+* **types:** respect props with default on instance type when using __typeProps ([96e4738](https://github.com/vuejs/core/commit/96e473833422342c5ca371ae1aeb186dec9a55e3))
+
+
+### Features
+
+* **runtime-core:** useTemplateRef() ([3ba70e4](https://github.com/vuejs/core/commit/3ba70e49b5856c53611c314d4855d679a546a7df))
+* **runtime-core:** useId() and app.config.idPrefix ([#11404](https://github.com/vuejs/core/issues/11404)) ([73ef156](https://github.com/vuejs/core/commit/73ef1561f6905d69f968c094d0180c61824f1247))
+* **runtime-core:** add app.config.throwUnhandledErrorInProduction ([f476b7f](https://github.com/vuejs/core/commit/f476b7f030f2dd427ca655fcea36f4933a4b4da0)), closes [#7876](https://github.com/vuejs/core/issues/7876)
+* **teleport:** support deferred Teleport ([#11387](https://github.com/vuejs/core/issues/11387)) ([59a3e88](https://github.com/vuejs/core/commit/59a3e88903b10ac2278170a44d5a03f24fef23ef)), closes [#2015](https://github.com/vuejs/core/issues/2015) [#11386](https://github.com/vuejs/core/issues/11386)
+* **compiler-core:** support `Symbol` global in template expressions ([#9069](https://github.com/vuejs/core/issues/9069)) ([a501a85](https://github.com/vuejs/core/commit/a501a85a7c910868e01a5c70a2abea4e9d9e87f3))
+* **types:** export more emit related types ([#11017](https://github.com/vuejs/core/issues/11017)) ([189573d](https://github.com/vuejs/core/commit/189573dcee2a16bd3ed36ff5589d43f535e5e733))
+
+
+
+# [3.5.0-alpha.2](https://github.com/vuejs/core/compare/v3.4.26...v3.5.0-alpha.2) (2024-05-04)
+
+
+### Bug Fixes
+
+* **types:** fix app.component() typing with inline defineComponent ([908f70a](https://github.com/vuejs/core/commit/908f70adc06038d1ea253d96f4024367f4a7545d)), closes [#10843](https://github.com/vuejs/core/issues/10843)
+* **types:** fix compat with generated types that rely on CreateComponentPublicInstance ([c146186](https://github.com/vuejs/core/commit/c146186396d0c1a65423b8c9a21251c5a6467336)), closes [#10842](https://github.com/vuejs/core/issues/10842)
+* **types:** props in defineOptions type should be optional ([124c4ca](https://github.com/vuejs/core/commit/124c4cac833a28ae9bc8edc576c1d0c7c41f5985)), closes [#10841](https://github.com/vuejs/core/issues/10841)
+
+
+### Features
+
+* **runtime-core:** add app.onUnmount() for registering cleanup functions ([#4619](https://github.com/vuejs/core/issues/4619)) ([582a3a3](https://github.com/vuejs/core/commit/582a3a382b1adda565bac576b913a88d9e8d7a9e)), closes [#4516](https://github.com/vuejs/core/issues/4516)
+
+
+
+# [3.5.0-alpha.1](https://github.com/vuejs/core/compare/v3.4.25...v3.5.0-alpha.1) (2024-04-29)
+
+
+### Bug Fixes
+
+* **reactivity:** fix call sequence of ontrigger in effect ([#10501](https://github.com/vuejs/core/issues/10501)) ([28841fe](https://github.com/vuejs/core/commit/28841fee43a45c37905c2c1ed9ace23067539045))
+
+
+### Features
+
+* **compiler-sfc:** enable reactive props destructure by default ([d2dac0e](https://github.com/vuejs/core/commit/d2dac0e359c47d1ed0aa77eda488e76fd6466d2d))
+* **reactivity:** `onEffectCleanup` API ([2cc5615](https://github.com/vuejs/core/commit/2cc5615590de77126e8df46136de0240dbde5004)), closes [#10173](https://github.com/vuejs/core/issues/10173)
+* **reactivity:** add failSilently argument for onScopeDispose ([9a936aa](https://github.com/vuejs/core/commit/9a936aaec489c79433a32791ecf5ddb1739a62bd))
+* **transition:** support directly nesting Teleport inside Transition ([#6548](https://github.com/vuejs/core/issues/6548)) ([0e6e3c7](https://github.com/vuejs/core/commit/0e6e3c7eb0e5320b7c1818e025cb4a490fede9c0)), closes [#5836](https://github.com/vuejs/core/issues/5836)
+* **types:** provide internal options for directly using user types in language tools ([#10801](https://github.com/vuejs/core/issues/10801)) ([75c8cf6](https://github.com/vuejs/core/commit/75c8cf63a1ef30ac84f91282d66ad3f57c6612e9))
 
 
 ### Performance Improvements
 
-* **compiler:** use source-map-js ([19e17a9](https://github.com/vuejs/core/commit/19e17a951c3387cbd6a1597e6cd9048a4aad4528))
+* **reactivity:** optimize array tracking ([#9511](https://github.com/vuejs/core/issues/9511)) ([70196a4](https://github.com/vuejs/core/commit/70196a40cc078f50fcc1110c38c06fbcc70b205e)), closes [#4318](https://github.com/vuejs/core/issues/4318)
 
 
 
-# [3.3.0-alpha.9](https://github.com/vuejs/core/compare/v3.3.0-alpha.8...v3.3.0-alpha.9) (2023-04-08)
-
-
-### Bug Fixes
-
-* **compiler-sfc:** accept `StringLiteral` node in `defineEmit` tuple syntax ([#8041](https://github.com/vuejs/core/issues/8041)) ([3ccbea0](https://github.com/vuejs/core/commit/3ccbea08e09217b50a410d7b49ebb138e0c4c1e7)), closes [#8040](https://github.com/vuejs/core/issues/8040)
-* **compiler-sfc:** fix binding type for constants when hoistStatic is disabled ([#8029](https://github.com/vuejs/core/issues/8029)) ([f7f4624](https://github.com/vuejs/core/commit/f7f4624191bbdc09600dbb0eb048b947c3a4f761))
-* **compiler-sfc:** skip empty `defineOptions` and support TypeScript type assertions ([#8028](https://github.com/vuejs/core/issues/8028)) ([9557529](https://github.com/vuejs/core/commit/955752951e1d31b90d817bd20830fe3f89018771))
-* **compiler-ssr:** disable v-once transform in ssr vdom fallback branch ([05f94cf](https://github.com/vuejs/core/commit/05f94cf7b01dd05ed7d3170916a38b175d5df292)), closes [#7644](https://github.com/vuejs/core/issues/7644)
-* **types:** improve defineProps return type with generic arguments ([91a931a](https://github.com/vuejs/core/commit/91a931ae8707b8d43f10216e1ce8e18b12158f99))
-* **types:** more public type argument order fix ([af563bf](https://github.com/vuejs/core/commit/af563bf428200367b6f5bb7944f690c85d810202))
-* **types:** retain type parameters order for public types ([bdf557f](https://github.com/vuejs/core/commit/bdf557f6f233c039fff8007b1b16aec00c4e68aa))
-
-
-### Features
-
-* **app:** app.runWithContext() ([#7451](https://github.com/vuejs/core/issues/7451)) ([869f3fb](https://github.com/vuejs/core/commit/869f3fb93e61400be4fd925e0850c2b1564749e2))
-* **sfc:** introduce `defineModel` macro and `useModel` helper ([#8018](https://github.com/vuejs/core/issues/8018)) ([14f3d74](https://github.com/vuejs/core/commit/14f3d747a34d45415b0036b274517d70a27ec0d3))
-
-
-### Reverts
-
-* Revert "chore: remove unused args passed to ssrRender" ([b117b88](https://github.com/vuejs/core/commit/b117b8844881a732a021432066230ff2215049ea))
-
-
-
-# [3.3.0-alpha.8](https://github.com/vuejs/core/compare/v3.3.0-alpha.7...v3.3.0-alpha.8) (2023-04-04)
-
-
-### Bug Fixes
-
-* **compiler-sfc:** check binding is prop before erroring ([f3145a9](https://github.com/vuejs/core/commit/f3145a915aaec11c915f1df258c5209ae4782bcc)), closes [#8017](https://github.com/vuejs/core/issues/8017)
-
-
-
-# [3.3.0-alpha.7](https://github.com/vuejs/core/compare/v3.3.0-alpha.6...v3.3.0-alpha.7) (2023-04-03)
-
-
-### Bug Fixes
-
-* **compiler-dom:** handle newlines when evaluating constants during stringification ([#7995](https://github.com/vuejs/core/issues/7995)) ([5261085](https://github.com/vuejs/core/commit/52610851137b9c5f6f57d771fd604fba309b3c97)), closes [#7994](https://github.com/vuejs/core/issues/7994)
-* **compiler-sfc:** use dynamic defaults merging for methods with computed keys ([482f2e3](https://github.com/vuejs/core/commit/482f2e3434a1edc47a181890354838e206d08922)), closes [#7113](https://github.com/vuejs/core/issues/7113)
-
-
-### Features
-
-* **compiler-sfc:** codegen support for defineEmits() short syntax (followup of [#7992](https://github.com/vuejs/core/issues/7992)) ([ef73ea5](https://github.com/vuejs/core/commit/ef73ea53eaf853d43e70946d2d448ae8c0a83e4f))
-* **compiler-sfc:** support arbitrary expression as withDefaults argument ([fe61944](https://github.com/vuejs/core/commit/fe619443d2e99301975de120685dbae8d66c03a6)), closes [#6459](https://github.com/vuejs/core/issues/6459)
-* **reactivity:** improve support of getter usage in reactivity APIs ([#7997](https://github.com/vuejs/core/issues/7997)) ([59e8284](https://github.com/vuejs/core/commit/59e828448e7f37643cd0eaea924a764e9d314448))
-* **sfc:** revert withDefaults() deprecation ([4af5d1b](https://github.com/vuejs/core/commit/4af5d1b0754035058436f9e4e5c12aedef199177))
-* **sfc:** support more ergnomic defineEmits type syntax ([#7992](https://github.com/vuejs/core/issues/7992)) ([8876dcc](https://github.com/vuejs/core/commit/8876dccf42a7f05375d97cb18c1afdfd0fc51c94))
-* **types/slots:** support slot presence / props type checks via `defineSlots` macro and `slots` option ([#7982](https://github.com/vuejs/core/issues/7982)) ([5a2f5d5](https://github.com/vuejs/core/commit/5a2f5d59cffa36a99e6f2feab6b3ba7958b7362f))
-
-
-
-# [3.3.0-alpha.6](https://github.com/vuejs/core/compare/v3.3.0-alpha.5...v3.3.0-alpha.6) (2023-03-30)
-
-
-### Bug Fixes
-
-* **compiler-core:** check if expression is constant ([#7974](https://github.com/vuejs/core/issues/7974)) ([77686cf](https://github.com/vuejs/core/commit/77686cf4765e7e345bef364c0b03739e3c2da91d)), closes [#7973](https://github.com/vuejs/core/issues/7973)
-* **compiler-core:** fix codegen for literal const in non-inline mode ([6bda4b6](https://github.com/vuejs/core/commit/6bda4b66886240b28993c88b7ecd4640a199be65))
-* **compiler-sfc:** allow `<script>` with lang='js' ([#7398](https://github.com/vuejs/core/issues/7398)) ([9f5e20c](https://github.com/vuejs/core/commit/9f5e20ccff235946159f0e50519f5be09bc89d5b))
-* **compiler-sfc:** avoid codegen conflict with user variable named `expose` ([#7949](https://github.com/vuejs/core/issues/7949)) ([c839129](https://github.com/vuejs/core/commit/c839129ab9d46f56a019b0ff234b35f27cac1e35)), closes [#7890](https://github.com/vuejs/core/issues/7890)
-* **compiler-sfc:** disallow `expose` property in `defineOptions` ([#7967](https://github.com/vuejs/core/issues/7967)) ([93f7729](https://github.com/vuejs/core/commit/93f77292c9f2c4dcc83aae6b5943a8b1d7443092))
-* **compiler-sfc:** fix defineExpose() codegen regression from [#7949](https://github.com/vuejs/core/issues/7949) ([a94072d](https://github.com/vuejs/core/commit/a94072dd2ca1aca4ce1fbe5da51ca2a9a07a4637))
-* **compiler-sfc:** fix edge case of default export call with no args ([#7536](https://github.com/vuejs/core/issues/7536)) ([d60e58c](https://github.com/vuejs/core/commit/d60e58c9f62ae7bd1f9c888cd2e55982a64d9e96)), closes [#7534](https://github.com/vuejs/core/issues/7534)
-* **compiler-sfc:** fix function default value handling w/ props destructure ([e10a89e](https://github.com/vuejs/core/commit/e10a89e608d3486c0c9a0457ee7c56d208e0aa91))
-* **compiler-sfc:** handle more TS built-in utilities in defineProps inference ([4355d24](https://github.com/vuejs/core/commit/4355d2492dccdb175b18d083e20f3ec39a52801f))
-* **compiler-sfc:** infer function prop type from type literal w/ callable signature ([#7119](https://github.com/vuejs/core/issues/7119)) ([3a7572c](https://github.com/vuejs/core/commit/3a7572cdb2074c5cac2231e4525296104141411c))
-* **compiler-sfc:** infer object type for empty type literal ([1a04fba](https://github.com/vuejs/core/commit/1a04fba10b6462303c65f1095da86ce05c14f1f4))
-* **compiler-sfc:** infer runtime type in defineProps ([#7972](https://github.com/vuejs/core/issues/7972)) ([ba4cec3](https://github.com/vuejs/core/commit/ba4cec31b91da60555892c381b00c2fa5b3e0e39))
-* **compiler-sfc:** infer TS Extract&Exclude runtime type ([#7339](https://github.com/vuejs/core/issues/7339)) ([6391daf](https://github.com/vuejs/core/commit/6391daf6586e49e165b3195863b602c3cbb92ace)), closes [#7337](https://github.com/vuejs/core/issues/7337) [#6252](https://github.com/vuejs/core/issues/6252)
-* **compiler-sfc:** infer TSIntersectionType in defineProps ([#7394](https://github.com/vuejs/core/issues/7394)) ([151a8ad](https://github.com/vuejs/core/commit/151a8ad6b9288784c3b2514820a112b93ecf2dca))
-* **compiler-sfc:** properly handle unknown types in runtime prop inference ([5fb406e](https://github.com/vuejs/core/commit/5fb406e3e1d585076779e9ce4a588a4f9a61ef23)), closes [#7511](https://github.com/vuejs/core/issues/7511)
-* **compiler-sfc:** properly remove comma of multiple macros in the same declaration ([#7423](https://github.com/vuejs/core/issues/7423)) ([336a3d7](https://github.com/vuejs/core/commit/336a3d7b9199aeda19672832ce173de298b1105a)), closes [#7422](https://github.com/vuejs/core/issues/7422) [#6778](https://github.com/vuejs/core/issues/6778)
-* **compiler-sfc:** rewrite default export with AST analysis instead of regex ([#7068](https://github.com/vuejs/core/issues/7068)) ([701b95f](https://github.com/vuejs/core/commit/701b95ff3d2bad0284c03865a0b052fc8324beec)), closes [#7038](https://github.com/vuejs/core/issues/7038) [#7041](https://github.com/vuejs/core/issues/7041) [#7078](https://github.com/vuejs/core/issues/7078)
-* **compiler-sfc:** unwrap TS node for defineProps ([#7340](https://github.com/vuejs/core/issues/7340)) ([1b69d5f](https://github.com/vuejs/core/commit/1b69d5f2f49ee60af4b10137c7833a76420dbba1))
-* **compiler-sfc:** use prependLeft to handle CSSVars ([#7760](https://github.com/vuejs/core/issues/7760)) ([139104b](https://github.com/vuejs/core/commit/139104ba2695eecae672db98f978de78e17ab7e1))
-* **jsx-runtime:** fix automatic runtime implementation ([#7959](https://github.com/vuejs/core/issues/7959)) ([5838950](https://github.com/vuejs/core/commit/5838950ecf7e4e17dd5a23acd621077390666b76))
-* **jsx-runtime:** handle keys ([#7976](https://github.com/vuejs/core/issues/7976)) ([ff60b93](https://github.com/vuejs/core/commit/ff60b933ae4e02422393664ee7818cffadf9b58b))
-* **types/jsx:** jsx-runtime types for global JSX namespace registration ([#7978](https://github.com/vuejs/core/issues/7978)) ([0f73f39](https://github.com/vuejs/core/commit/0f73f394dafd709298bd8c71107a323bf322a1d2))
-* **types/jsx:** move JSX DOM types back to `@vue/runtime-dom` ([#7979](https://github.com/vuejs/core/issues/7979)) ([ffe679c](https://github.com/vuejs/core/commit/ffe679c490986b69956daec7166f1ab6d9f23073))
-* **types/jsx:** remove $slots children override ([28e30c8](https://github.com/vuejs/core/commit/28e30c819df5e4fc301c98f7be938fa13e8be3bc))
-* **types:** revert jsx global removal (to be removed in 3.4) ([e224922](https://github.com/vuejs/core/commit/e224922e972e78b4fb6cbd129d685c2317018ad1))
-
-
-### Features
-
-* **compiler-core:** support parsing `const` modifier in type parameters ([#7912](https://github.com/vuejs/core/issues/7912)) ([b7bd50f](https://github.com/vuejs/core/commit/b7bd50f5059e8755c0204f01a8c55b1724688e7e))
-* **compiler-sfc:** add defineOptions macro ([#5738](https://github.com/vuejs/core/issues/5738)) ([bcf5841](https://github.com/vuejs/core/commit/bcf5841ddecc64d0bdbd56ce1463eb8ebf01bb9d))
-* **compiler-sfc:** enable reactive props destructure by default ([#7986](https://github.com/vuejs/core/issues/7986)) ([ba9c2ae](https://github.com/vuejs/core/commit/ba9c2ae247fcc3960b238a04cb635158daa82004))
-* **compiler-sfc:** improve runtime props inference for enum ([eded947](https://github.com/vuejs/core/commit/eded94712e37856f258dc8c85f98a26fa41ae05f))
-* **compiler-sfc:** support generating variable instead of default export in compileScript ([71635be](https://github.com/vuejs/core/commit/71635be68d25887f91d624bb7f78281a851bc0cb))
-* **compiler-sfc:** support module string names syntax ([#7428](https://github.com/vuejs/core/issues/7428)) ([0002567](https://github.com/vuejs/core/commit/000256772816d54976e462330a7be342c49c7304))
-* **complier-sfc:** hoist literal constants for script ([#5752](https://github.com/vuejs/core/issues/5752)) ([7def8b1](https://github.com/vuejs/core/commit/7def8b15b89aa78accd9a00927db91e8091a12b7)), closes [#5750](https://github.com/vuejs/core/issues/5750)
-* **runtime-core:** add skipCheck for prop ([#7548](https://github.com/vuejs/core/issues/7548)) ([63ad77f](https://github.com/vuejs/core/commit/63ad77f6f65751780aa52f817387165b4773cfe4))
-* **sfc:** deprecate reactivity transform ([efb54e7](https://github.com/vuejs/core/commit/efb54e7315e93f4be7004d1c0a4de8c523dab334))
-* **types:** `defineComponent()` with generics support ([#7963](https://github.com/vuejs/core/issues/7963)) ([d77557c](https://github.com/vuejs/core/commit/d77557c4038f88a676903b379505b280a88cc774)), closes [#3102](https://github.com/vuejs/core/issues/3102)
-
-
-### BREAKING CHANGES
-
-* **types:** The type of `defineComponent()` when passing in a function has changed. This overload signature is rarely used in practice and the breakage will be minimal, so repurposing it to something more useful should be worth it.
-
-
-
-# [3.3.0-alpha.5](https://github.com/vuejs/core/compare/v3.3.0-alpha.4...v3.3.0-alpha.5) (2023-03-26)
-
-### Bug Fixes
-
-* **runtime-core:** support `getCurrentInstance` across mutiple builds of Vue ([8d2d5bf](https://github.com/vuejs/core/commit/8d2d5bf48a24dab44e5b03cb8fa0c5faa4b696e3))
-* **types:** ensure defineProps with generics return correct types ([c288c7b](https://github.com/vuejs/core/commit/c288c7b0bd6077d690f42153c3fc49a45454a66a))
-
-
-### Features
-
-* **dx:** improve readability of displayed types for props ([4c9bfd2](https://github.com/vuejs/core/commit/4c9bfd2b999ce472f7481aae4f9dc5bb9f76628e))
-* **types/jsx:** support jsxImportSource, avoid global JSX conflict ([#7958](https://github.com/vuejs/core/issues/7958)) ([d0b7ef3](https://github.com/vuejs/core/commit/d0b7ef3b61d5f83e35e5854b3c2c874e23463102))
-
-### Note on JSX Types Change
-
-* In the next minor (3.4), Vue no longer registers the global `JSX` namespace by default. This is necessary to avoid global namespace collision with React so that TSX of both libs can co-exist in the same project. This should not affect SFC-only users with latest version of Volar.
-
-  For TSX users, it is suggested to set [jsxImportSource](https://www.typescriptlang.org/tsconfig#jsxImportSource) to `'vue'` in `tsconfig.json` after upgrading to 3.3, or opt-in per file with `/* @jsxImportSource vue */`. This will allow you to opt-in to the new behavior now and upgrade seamlessly when 3.4 releases.
-
-  If there is code that depends on the presence of the global `JSX` namespace,  you can retain the exact pre-3.4 global behavior by explicitly referencing `vue/jsx`, which registers the global `JSX` namespace.
-
-  Note that the planned change in 3.4 is a type-only breaking change in a minor release, which adheres to our [release policy](https://vuejs.org/about/releases.html#semantic-versioning-edge-cases).
-
-# [3.3.0-alpha.4](https://github.com/vuejs/core/compare/v3.3.0-alpha.3...v3.3.0-alpha.4) (2023-02-06)
-
-
-### Bug Fixes
-
-* **build:** fix const enum w/ number values ([92bb189](https://github.com/vuejs/core/commit/92bb189ca7ecae221ebf5411da87c715780d2de3))
-
-
-
-# [3.3.0-alpha.3](https://github.com/vuejs/core/compare/v3.3.0-alpha.2...v3.3.0-alpha.3) (2023-02-06)
-
-
-### Bug Fixes
-
-* **build:** avoid const enum conflicts ([d1181ad](https://github.com/vuejs/core/commit/d1181ad692861c140e687372efbc67a1d65d642a))
-
-
-
-# [3.3.0-alpha.2](https://github.com/vuejs/core/compare/v3.3.0-alpha.1...v3.3.0-alpha.2) (2023-02-05)
-
-
-### Bug Fixes
-
-* **build:** fix dev flag replacement in esm-bundler builds ([5851eaa](https://github.com/vuejs/core/commit/5851eaa9339364d41860a277a99f2352de2a3834))
-
-
-
-# [3.3.0-alpha.1](https://github.com/vuejs/core/compare/v3.2.47...v3.3.0-alpha.1) (2023-02-05)
-
-
-### Bug Fixes
-
-* **build:** ensure BaseTransition functions can be tree-shaken ([3a6f5eb](https://github.com/vuejs/core/commit/3a6f5eb0f7d60dc87d17a69c66e88ae5688b11a5))
-
 ## Previous Changelogs
 
+### 3.4.x (2023-10-28 - 2024-08-15)
+
+See [3.4 changelog](./changelogs/CHANGELOG-3.4.md)
+
+### 3.3.x (2023-02-05 - 2023-12-29)
+
+See [3.3 changelog](./changelogs/CHANGELOG-3.3.md)
+
 ### 3.2.x (2021-07-16 - 2023-02-02)
 
 See [3.2 changelog](./changelogs/CHANGELOG-3.2.md)
diff --git a/FUNDING.json b/FUNDING.json
new file mode 100644
index 000000000..552dc453c
--- /dev/null
+++ b/FUNDING.json
@@ -0,0 +1,7 @@
+{
+  "drips": {
+    "ethereum": {
+      "ownedBy": "0x5393BdeA2a020769256d9f337B0fc81a2F64850A"
+    }
+  }
+}
diff --git a/LICENSE b/LICENSE
index 15f1f7e7a..8fd17290c 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-present, Yuxi (Evan) You
+Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index cbc05311a..afe5711e8 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# vuejs/core [![npm](https://img.shields.io/npm/v/vue.svg)](https://www.npmjs.com/package/vue) [![build status](https://github.com/vuejs/core/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/vuejs/core/actions/workflows/ci.yml)
+# vuejs/core [![npm](https://img.shields.io/npm/v/vue.svg)](https://www.npmjs.com/package/vue) [![build status](https://github.com/vuejs/core/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/vuejs/core/actions/workflows/ci.yml) [![Download](https://img.shields.io/npm/dm/vue)](https://www.npmjs.com/package/vue)
 
 ## Getting Started
 
diff --git a/SECURITY.md b/SECURITY.md
index dac6018b5..192502e38 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -5,3 +5,11 @@ To report a vulnerability, please email security@vuejs.org.
 While the discovery of new vulnerabilities is rare, we also recommend always using the latest versions of Vue and its official companion libraries to ensure your application remains as secure as possible.
 
 Please note that we do not consider XSS via template expressions a valid attack vector, because it can only happen if the user intentionally uses untrusted content as template compilation source. This is similar to knowingly pasting untrusted scripts into a browser console. We explicitly warn users against using untrusted content as template compilation source in our documentation.
+
+## Security Hall of Fame
+
+We would like to thank the following security researchers for responsibly disclosing security issues to us.
+
+- Jeet Pal - [@jeetpal2007](https://github.com/jeetpal2007) | [Email](mailto:jeetpal2007@gmail.com) | [LinkedIn](https://in.linkedin.com/in/jeet-pal-22601a290)
+- Mix - [@mnixry](https://github.com/mnixry)
+- Aviv Keller - [@RedYetiDev](https://github.com/redyetidev) | [LinkedIn](https://www.linkedin.com/in/redyetidev) <redyetidev@gmail.com>
diff --git a/changelogs/CHANGELOG-3.0.md b/changelogs/CHANGELOG-3.0.md
index 50b152dc2..16483767f 100644
--- a/changelogs/CHANGELOG-3.0.md
+++ b/changelogs/CHANGELOG-3.0.md
@@ -773,7 +773,7 @@ may cause build issues in projects still using TS 3.x.
 - **types:** adjust type exports for manual render function and tooling usage ([e4dc03a](https://github.com/vuejs/core/commit/e4dc03a8b17d5e9f167de6a62a645878ac7ef3e2)), closes [#1329](https://github.com/vuejs/core/issues/1329)
 - **types:** mixins/extends support in TypeScript ([#626](https://github.com/vuejs/core/issues/626)) ([d3c436a](https://github.com/vuejs/core/commit/d3c436ae2e66b75b7f2ed574dadda3f0e1fdce73))
 - **types:** support typing directive value via generic argument ([#1007](https://github.com/vuejs/core/issues/1007)) ([419b86d](https://github.com/vuejs/core/commit/419b86d1908f2a0521e6a7eafcbee764e9ee59a0)), closes [#998](https://github.com/vuejs/core/issues/998)
-- **types:** update to Typescript 3.9 ([#1106](https://github.com/vuejs/core/issues/1106)) ([97dedeb](https://github.com/vuejs/core/commit/97dedebd8097116a16209664a1ca38392b964da3))
+- **types:** update to TypeScript 3.9 ([#1106](https://github.com/vuejs/core/issues/1106)) ([97dedeb](https://github.com/vuejs/core/commit/97dedebd8097116a16209664a1ca38392b964da3))
 
 ### Performance Improvements
 
diff --git a/changelogs/CHANGELOG-3.3.md b/changelogs/CHANGELOG-3.3.md
new file mode 100644
index 000000000..cc55c3bec
--- /dev/null
+++ b/changelogs/CHANGELOG-3.3.md
@@ -0,0 +1,598 @@
+## [3.3.13](https://github.com/vuejs/core/compare/v3.3.12...v3.3.13) (2023-12-19)
+
+
+### Bug Fixes
+
+* **compiler-core:** fix v-on with modifiers on inline expression of undefined ([#9866](https://github.com/vuejs/core/issues/9866)) ([bae79dd](https://github.com/vuejs/core/commit/bae79ddf8564a2da4a5365cfeb8d811990f42335)), closes [#9865](https://github.com/vuejs/core/issues/9865)
+* **runtime-dom:** cache event handlers by key/modifiers ([#9851](https://github.com/vuejs/core/issues/9851)) ([04d2c05](https://github.com/vuejs/core/commit/04d2c05054c26b02fbc1d84839b0ed5cd36455b6)), closes [#9849](https://github.com/vuejs/core/issues/9849)
+* **types:** extract properties from extended collections ([#9854](https://github.com/vuejs/core/issues/9854)) ([24b1c1d](https://github.com/vuejs/core/commit/24b1c1dd57fd55d998aa231a147500e010b10219)), closes [#9852](https://github.com/vuejs/core/issues/9852)
+
+
+
+## [3.3.12](https://github.com/vuejs/core/compare/v3.3.11...v3.3.12) (2023-12-16)
+
+
+### Bug Fixes
+
+* **hydration:** handle appear transition before patch props ([#9837](https://github.com/vuejs/core/issues/9837)) ([e70f4c4](https://github.com/vuejs/core/commit/e70f4c47c553b6e16d8fad70743271ca23802fe7)), closes [#9832](https://github.com/vuejs/core/issues/9832)
+* **sfc/cssVars:** fix loss of CSS v-bind variables when setting inline style with string value ([#9824](https://github.com/vuejs/core/issues/9824)) ([0a387df](https://github.com/vuejs/core/commit/0a387dfb1d04afb6eae4296b6da76dfdaca77af4)), closes [#9821](https://github.com/vuejs/core/issues/9821)
+* **ssr:** fix suspense hydration of fallback content ([#7188](https://github.com/vuejs/core/issues/7188)) ([60415b5](https://github.com/vuejs/core/commit/60415b5d67df55f1fd6b176615299c08640fa142))
+* **types:** add `xmlns:xlink` to `SVGAttributes` ([#9300](https://github.com/vuejs/core/issues/9300)) ([0d61b42](https://github.com/vuejs/core/commit/0d61b429ecf63591d31e09702058fa4c7132e1a7)), closes [#9299](https://github.com/vuejs/core/issues/9299)
+* **types:** fix `shallowRef` type error ([#9839](https://github.com/vuejs/core/issues/9839)) ([9a57158](https://github.com/vuejs/core/commit/9a571582b53220270e498d8712ea59312c0bef3a))
+* **types:** support for generic keyof slots ([#8374](https://github.com/vuejs/core/issues/8374)) ([213eba4](https://github.com/vuejs/core/commit/213eba479ce080efc1053fe636f6be4a4c889b44))
+
+
+
+## [3.3.11](https://github.com/vuejs/core/compare/v3.3.10...v3.3.11) (2023-12-08)
+
+
+### Bug Fixes
+
+* **custom-element:** correctly handle number type props in prod ([#8989](https://github.com/vuejs/core/issues/8989)) ([d74d364](https://github.com/vuejs/core/commit/d74d364d62db8e48881af6b5a75ce4fb5f36cc35))
+* **reactivity:** fix mutation on user proxy of reactive Array ([6ecbd5c](https://github.com/vuejs/core/commit/6ecbd5ce2a7f59314a8326a1d193874b87f4d8c8)), closes [#9742](https://github.com/vuejs/core/issues/9742) [#9751](https://github.com/vuejs/core/issues/9751) [#9750](https://github.com/vuejs/core/issues/9750)
+* **runtime-dom:** fix width and height prop check condition ([5b00286](https://github.com/vuejs/core/commit/5b002869c533220706f9788b496b8ca8d8e98609)), closes [#9762](https://github.com/vuejs/core/issues/9762)
+* **shared:** handle Map with symbol keys in toDisplayString ([#9731](https://github.com/vuejs/core/issues/9731)) ([364821d](https://github.com/vuejs/core/commit/364821d6bdb1775e2f55a69bcfb9f40f7acf1506)), closes [#9727](https://github.com/vuejs/core/issues/9727)
+* **shared:** handle more Symbol cases in toDisplayString ([983d45d](https://github.com/vuejs/core/commit/983d45d4f8eb766b5a16b7ea93b86d3c51618fa6))
+* **Suspense:** properly get anchor when mount fallback vnode ([#9770](https://github.com/vuejs/core/issues/9770)) ([b700328](https://github.com/vuejs/core/commit/b700328342e17dc16b19316c2e134a26107139d2)), closes [#9769](https://github.com/vuejs/core/issues/9769)
+* **types:** ref() return type should not be any when initial value is any ([#9768](https://github.com/vuejs/core/issues/9768)) ([cdac121](https://github.com/vuejs/core/commit/cdac12161ec27b45ded48854c3d749664b6d4a6d))
+* **watch:** should not fire pre watcher on child component unmount ([#7181](https://github.com/vuejs/core/issues/7181)) ([6784f0b](https://github.com/vuejs/core/commit/6784f0b1f8501746ea70d87d18ed63a62cf6b76d)), closes [#7030](https://github.com/vuejs/core/issues/7030)
+
+
+
+## [3.3.10](https://github.com/vuejs/core/compare/v3.3.9...v3.3.10) (2023-12-04)
+
+
+### Bug Fixes
+
+* **app:** prevent template from being cached between apps with different options ([#9724](https://github.com/vuejs/core/issues/9724)) ([ec71585](https://github.com/vuejs/core/commit/ec715854ca12520b2afc9e9b3981cbae05ae5206)), closes [#9618](https://github.com/vuejs/core/issues/9618)
+* **compiler-sfc:** avoid passing forEach index to genMap ([f12db7f](https://github.com/vuejs/core/commit/f12db7fb564a534cef2e5805cc9f54afe5d72fbf))
+* **compiler-sfc:** deindent pug/jade templates ([6345197](https://github.com/vuejs/core/commit/634519720a21fb5a6871454e1cadad7053a568b8)), closes [#3231](https://github.com/vuejs/core/issues/3231) [#3842](https://github.com/vuejs/core/issues/3842) [#7723](https://github.com/vuejs/core/issues/7723)
+* **compiler-sfc:** fix :where and :is selector in scoped mode with multiple selectors ([#9735](https://github.com/vuejs/core/issues/9735)) ([c3e2c55](https://github.com/vuejs/core/commit/c3e2c556b532656b50b8ab5cd2d9eabc26622d63)), closes [#9707](https://github.com/vuejs/core/issues/9707)
+* **compiler-sfc:** generate more treeshaking friendly code ([#9507](https://github.com/vuejs/core/issues/9507)) ([8d74ca0](https://github.com/vuejs/core/commit/8d74ca0e6fa2738ca6854b7e879ff59419f948c7)), closes [#9500](https://github.com/vuejs/core/issues/9500)
+* **compiler-sfc:** support inferring generic types ([#8511](https://github.com/vuejs/core/issues/8511)) ([eb5e307](https://github.com/vuejs/core/commit/eb5e307c0be62002e62c4c800d0dfacb39b0d4ca)), closes [#8482](https://github.com/vuejs/core/issues/8482)
+* **compiler-sfc:** support resolving components from props ([#8785](https://github.com/vuejs/core/issues/8785)) ([7cbcee3](https://github.com/vuejs/core/commit/7cbcee3d831241a8bd3588ae92d3f27e3641e25f))
+* **compiler-sfc:** throw error when failing to load TS during type resolution ([#8883](https://github.com/vuejs/core/issues/8883)) ([4936d2e](https://github.com/vuejs/core/commit/4936d2e11a8d0ca3704bfe408548cb26bb3fd5e9))
+* **cssVars:** cssVar names should be double-escaped when generating code for ssr ([#8824](https://github.com/vuejs/core/issues/8824)) ([5199a12](https://github.com/vuejs/core/commit/5199a12f8855cd06f24bf355708b5a2134f63176)), closes [#7823](https://github.com/vuejs/core/issues/7823)
+* **deps:** update compiler to ^7.23.4 ([#9681](https://github.com/vuejs/core/issues/9681)) ([31f6ebc](https://github.com/vuejs/core/commit/31f6ebc4df84490ed29fb75e7bf4259200eb51f0))
+* **runtime-core:** Suspense get anchor properly in Transition ([#9309](https://github.com/vuejs/core/issues/9309)) ([65f3fe2](https://github.com/vuejs/core/commit/65f3fe273127a8b68e1222fbb306d28d85f01757)), closes [#8105](https://github.com/vuejs/core/issues/8105)
+* **runtime-dom:** set width/height with units as attribute ([#8781](https://github.com/vuejs/core/issues/8781)) ([bfc1838](https://github.com/vuejs/core/commit/bfc1838f31199de3f189198a3c234fa7bae91386))
+* **ssr:** avoid computed being accidentally cached before server render ([#9688](https://github.com/vuejs/core/issues/9688)) ([30d5d93](https://github.com/vuejs/core/commit/30d5d93a92b2154406ec04f8aca6b217fa01177c)), closes [#5300](https://github.com/vuejs/core/issues/5300)
+* **types:** expose emits as props in functional components ([#9234](https://github.com/vuejs/core/issues/9234)) ([887e54c](https://github.com/vuejs/core/commit/887e54c347ea9eac4c721b5e2288f054873d1d30))
+* **types:** fix reactive collection types ([#8960](https://github.com/vuejs/core/issues/8960)) ([ad27473](https://github.com/vuejs/core/commit/ad274737015c36906d76f3189203093fa3a2e4e7)), closes [#8904](https://github.com/vuejs/core/issues/8904)
+* **types:** improve return type withKeys and withModifiers ([#9734](https://github.com/vuejs/core/issues/9734)) ([43c3cfd](https://github.com/vuejs/core/commit/43c3cfdec5ae5d70fa2a21e857abc2d73f1a0d07))
+
+
+### Performance Improvements
+
+* optimize on* prop check ([38aaa8c](https://github.com/vuejs/core/commit/38aaa8c88648c54fe2616ad9c0961288092fcb44))
+* **runtime-dom:** cache modifier wrapper functions ([da4a4fb](https://github.com/vuejs/core/commit/da4a4fb5e8eee3c6d31f24ebd79a9d0feca56cb2)), closes [#8882](https://github.com/vuejs/core/issues/8882)
+* **v-on:** constant handlers with modifiers should not be treated as dynamic ([4d94ebf](https://github.com/vuejs/core/commit/4d94ebfe75174b340d2b794e699cad1add3600a9))
+
+
+
+## [3.3.9](https://github.com/vuejs/core/compare/v3.3.8...v3.3.9) (2023-11-25)
+
+
+### Bug Fixes
+
+* **compiler-core:** avoid rewriting scope variables in inline for loops ([#7245](https://github.com/vuejs/core/issues/7245)) ([a2d810e](https://github.com/vuejs/core/commit/a2d810eb40cef631f61991ca68b426ee9546aba0)), closes [#7238](https://github.com/vuejs/core/issues/7238)
+* **compiler-core:** fix `resolveParserPlugins` decorators check ([#9566](https://github.com/vuejs/core/issues/9566)) ([9d0eba9](https://github.com/vuejs/core/commit/9d0eba916f3bf6fb5c03222400edae1a2db7444f)), closes [#9560](https://github.com/vuejs/core/issues/9560)
+* **compiler-sfc:** consistently escape type-only prop names ([#8654](https://github.com/vuejs/core/issues/8654)) ([3e08d24](https://github.com/vuejs/core/commit/3e08d246dfd8523c54fb8e7a4a6fd5506ffb1bcc)), closes [#8635](https://github.com/vuejs/core/issues/8635) [#8910](https://github.com/vuejs/core/issues/8910) [vitejs/vite-plugin-vue#184](https://github.com/vitejs/vite-plugin-vue/issues/184)
+* **compiler-sfc:** malformed filename on windows using path.posix.join() ([#9478](https://github.com/vuejs/core/issues/9478)) ([f18a174](https://github.com/vuejs/core/commit/f18a174979626b3429db93c5d5b7ae5448917c70)), closes [#8671](https://github.com/vuejs/core/issues/8671) [#9583](https://github.com/vuejs/core/issues/9583) [#9446](https://github.com/vuejs/core/issues/9446) [#9473](https://github.com/vuejs/core/issues/9473)
+* **compiler-sfc:** support `:is` and `:where` selector in scoped css rewrite ([#8929](https://github.com/vuejs/core/issues/8929)) ([3227e50](https://github.com/vuejs/core/commit/3227e50b32105f8893f7dff2f29278c5b3a9f621))
+* **compiler-sfc:** support resolve extends interface for defineEmits ([#8470](https://github.com/vuejs/core/issues/8470)) ([9e1b74b](https://github.com/vuejs/core/commit/9e1b74bcd5fa4151f5d1bc02c69fbbfa4762f577)), closes [#8465](https://github.com/vuejs/core/issues/8465)
+* **hmr/transition:** fix kept-alive component inside transition disappearing after hmr ([#7126](https://github.com/vuejs/core/issues/7126)) ([d11e978](https://github.com/vuejs/core/commit/d11e978fc98dcc83526c167e603b8308f317f786)), closes [#7121](https://github.com/vuejs/core/issues/7121)
+* **hydration:** force hydration for v-bind with .prop modifier ([364f319](https://github.com/vuejs/core/commit/364f319d214226770d97c98d8fcada80c9e8dde3)), closes [#7490](https://github.com/vuejs/core/issues/7490)
+* **hydration:** properly hydrate indeterminate prop ([34b5a5d](https://github.com/vuejs/core/commit/34b5a5da4ae9c9faccac237acd7acc8e7e017571)), closes [#7476](https://github.com/vuejs/core/issues/7476)
+* **reactivity:** clear method on readonly collections should return undefined ([#7316](https://github.com/vuejs/core/issues/7316)) ([657476d](https://github.com/vuejs/core/commit/657476dcdb964be4fbb1277c215c073f3275728e))
+* **reactivity:** onCleanup also needs to be cleaned ([#8655](https://github.com/vuejs/core/issues/8655)) ([73fd810](https://github.com/vuejs/core/commit/73fd810eebdd383a2b4629f67736c4db1f428abd)), closes [#5151](https://github.com/vuejs/core/issues/5151) [#7695](https://github.com/vuejs/core/issues/7695)
+* **ssr:** hydration `__vnode` missing for devtools ([#9328](https://github.com/vuejs/core/issues/9328)) ([5156ac5](https://github.com/vuejs/core/commit/5156ac5b38cfa80d3db26f2c9bf40cb22a7521cb))
+* **types:** allow falsy value types in `StyleValue` ([#7954](https://github.com/vuejs/core/issues/7954)) ([17aa92b](https://github.com/vuejs/core/commit/17aa92b79b31d8bb8b5873ddc599420cb9806db8)), closes [#7955](https://github.com/vuejs/core/issues/7955)
+* **types:** defineCustomElement using defineComponent return type with emits ([#7937](https://github.com/vuejs/core/issues/7937)) ([5d932a8](https://github.com/vuejs/core/commit/5d932a8e6d14343c9d7fc7c2ecb58ac618b2f938)), closes [#7782](https://github.com/vuejs/core/issues/7782)
+* **types:** fix `unref` and `toValue` when input union type contains ComputedRef ([#8748](https://github.com/vuejs/core/issues/8748)) ([176d476](https://github.com/vuejs/core/commit/176d47671271b1abc21b1508e9a493c7efca6451)), closes [#8747](https://github.com/vuejs/core/issues/8747) [#8857](https://github.com/vuejs/core/issues/8857)
+* **types:** fix instance type when props type is incompatible with setup returned type ([#7338](https://github.com/vuejs/core/issues/7338)) ([0e1e8f9](https://github.com/vuejs/core/commit/0e1e8f919e5a74cdaadf9c80ee135088b25e7fa3)), closes [#5885](https://github.com/vuejs/core/issues/5885)
+* **types:** fix shallowRef return type with union value type ([#7853](https://github.com/vuejs/core/issues/7853)) ([7c44800](https://github.com/vuejs/core/commit/7c448000b0def910c2cfabfdf7ff20a3d6bc844f)), closes [#7852](https://github.com/vuejs/core/issues/7852)
+* **types:** more precise types for class bindings ([#8012](https://github.com/vuejs/core/issues/8012)) ([46e3374](https://github.com/vuejs/core/commit/46e33744c890bd49482c5e5c5cdea44e00ec84d5))
+* **types:** remove optional properties from defineProps return type ([#6421](https://github.com/vuejs/core/issues/6421)) ([94c049d](https://github.com/vuejs/core/commit/94c049d930d922069e38ea8700d7ff0970f71e61)), closes [#6420](https://github.com/vuejs/core/issues/6420)
+* **types:** return type of withDefaults should be readonly ([#8601](https://github.com/vuejs/core/issues/8601)) ([f15debc](https://github.com/vuejs/core/commit/f15debc01acb22d23f5acee97e6f02db88cef11a))
+* **types:** revert class type restrictions ([5d077c8](https://github.com/vuejs/core/commit/5d077c8754cc14f85d2d6d386df70cf8c0d93842)), closes [#8012](https://github.com/vuejs/core/issues/8012)
+* **types:** update jsx type definitions ([#8607](https://github.com/vuejs/core/issues/8607)) ([58e2a94](https://github.com/vuejs/core/commit/58e2a94871ae06a909c5f8bad07fb401193e6a38))
+* **types:** widen ClassValue type ([2424013](https://github.com/vuejs/core/commit/242401305944422d0c361b16101a4d18908927af))
+* **v-model:** avoid overwriting number input with same value ([#7004](https://github.com/vuejs/core/issues/7004)) ([40f4b77](https://github.com/vuejs/core/commit/40f4b77bb570868cb6e47791078767797e465989)), closes [#7003](https://github.com/vuejs/core/issues/7003)
+* **v-model:** unnecessary value binding error should apply to dynamic instead of static binding ([2859b65](https://github.com/vuejs/core/commit/2859b653c9a22460e60233cac10fe139e359b046)), closes [#3596](https://github.com/vuejs/core/issues/3596)
+
+
+
+## [3.3.8](https://github.com/vuejs/core/compare/v3.3.7...v3.3.8) (2023-11-06)
+
+
+### Bug Fixes
+
+* **compile-sfc:** support `Error` type in `defineProps` ([#5955](https://github.com/vuejs/core/issues/5955)) ([a989345](https://github.com/vuejs/core/commit/a9893458ec519aae442e1b99e64e6d74685cd22c))
+* **compiler-core:** known global should be shadowed by local variables in expression rewrite ([#9492](https://github.com/vuejs/core/issues/9492)) ([a75d1c5](https://github.com/vuejs/core/commit/a75d1c5c6242e91a73cc5ba01e6da620dea0b3d9)), closes [#9482](https://github.com/vuejs/core/issues/9482)
+* **compiler-sfc:** fix dynamic directive arguments usage check for slots ([#9495](https://github.com/vuejs/core/issues/9495)) ([b39fa1f](https://github.com/vuejs/core/commit/b39fa1f8157647859331ce439c42ae016a49b415)), closes [#9493](https://github.com/vuejs/core/issues/9493)
+* **deps:** update dependency @vue/repl to ^2.6.2 ([#9536](https://github.com/vuejs/core/issues/9536)) ([5cef325](https://github.com/vuejs/core/commit/5cef325f41e3b38657c72fa1a38dedeee1c7a60a))
+* **deps:** update dependency @vue/repl to ^2.6.3 ([#9540](https://github.com/vuejs/core/issues/9540)) ([176d590](https://github.com/vuejs/core/commit/176d59058c9aecffe9da4d4311e98496684f06d4))
+* **hydration:** fix tagName access error on comment/text node hydration mismatch ([dd8a0cf](https://github.com/vuejs/core/commit/dd8a0cf5dcde13d2cbd899262a0e07f16e14e489)), closes [#9531](https://github.com/vuejs/core/issues/9531)
+* **types:** avoid exposing lru-cache types in generated dts ([462aeb3](https://github.com/vuejs/core/commit/462aeb3b600765e219ded2ee9a0ed1e74df61de0)), closes [#9521](https://github.com/vuejs/core/issues/9521)
+* **warn:** avoid warning on empty children with Suspense ([#3962](https://github.com/vuejs/core/issues/3962)) ([405f345](https://github.com/vuejs/core/commit/405f34587a63a5f1e3d147b9848219ea98acc22d))
+
+
+
+## [3.3.7](https://github.com/vuejs/core/compare/v3.3.6...v3.3.7) (2023-10-24)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** avoid gen useCssVars when targeting SSR ([#6979](https://github.com/vuejs/core/issues/6979)) ([c568778](https://github.com/vuejs/core/commit/c568778ea3265d8e57f788b00864c9509bf88a4e)), closes [#6926](https://github.com/vuejs/core/issues/6926)
+* **compiler-ssr:**  proper scope analysis for ssr vnode slot fallback ([#7184](https://github.com/vuejs/core/issues/7184)) ([e09c26b](https://github.com/vuejs/core/commit/e09c26bc9bc4394c2c2d928806d382515c2676f3)), closes [#7095](https://github.com/vuejs/core/issues/7095)
+* correctly resolve types from relative paths on Windows ([#9446](https://github.com/vuejs/core/issues/9446)) ([089d36d](https://github.com/vuejs/core/commit/089d36d167dc7834065b03ca689f9b6a44eead8a)), closes [#8671](https://github.com/vuejs/core/issues/8671)
+* **hmr:** fix hmr error for hoisted children array in v-for ([7334376](https://github.com/vuejs/core/commit/733437691f70ebca8dd6cc3bc8356f5b57d4d5d8)), closes [#6978](https://github.com/vuejs/core/issues/6978) [#7114](https://github.com/vuejs/core/issues/7114)
+* **reactivity:** assigning array.length while observing a symbol property ([#7568](https://github.com/vuejs/core/issues/7568)) ([e9e2778](https://github.com/vuejs/core/commit/e9e2778e9ec5cca07c1df5f0c9b7b3595a1a3244))
+* **scheduler:** ensure jobs are in the correct order ([#7748](https://github.com/vuejs/core/issues/7748)) ([a8f6638](https://github.com/vuejs/core/commit/a8f663867b8cd2736b82204bc58756ef02441276)), closes [#7576](https://github.com/vuejs/core/issues/7576)
+* **ssr:** fix hydration mismatch for disabled teleport at component root ([#9399](https://github.com/vuejs/core/issues/9399)) ([d8990fc](https://github.com/vuejs/core/commit/d8990fc6182d1c2cf0a8eab7b35a9d04df668507)), closes [#6152](https://github.com/vuejs/core/issues/6152)
+* **Suspense:** calling hooks before the transition finishes ([#9388](https://github.com/vuejs/core/issues/9388)) ([00de3e6](https://github.com/vuejs/core/commit/00de3e61ed7a55e7d6c2e1987551d66ad0f909ff)), closes [#5844](https://github.com/vuejs/core/issues/5844) [#5952](https://github.com/vuejs/core/issues/5952)
+* **transition/ssr:** make transition appear work with SSR ([#8859](https://github.com/vuejs/core/issues/8859)) ([5ea8a8a](https://github.com/vuejs/core/commit/5ea8a8a4fab4e19a71e123e4d27d051f5e927172)), closes [#6951](https://github.com/vuejs/core/issues/6951)
+* **types:** fix ComponentCustomProps augmentation ([#9468](https://github.com/vuejs/core/issues/9468)) ([7374e93](https://github.com/vuejs/core/commit/7374e93f0281f273b90ab5a6724cc47332a01d6c)), closes [#8376](https://github.com/vuejs/core/issues/8376)
+* **types:** improve `h` overload to support union of string and component ([#5432](https://github.com/vuejs/core/issues/5432)) ([16ecb44](https://github.com/vuejs/core/commit/16ecb44c89cd8299a3b8de33cccc2e2cc36f065b)), closes [#5431](https://github.com/vuejs/core/issues/5431)
+
+
+
+## [3.3.6](https://github.com/vuejs/core/compare/v3.3.5...v3.3.6) (2023-10-20)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** model name conflict ([#8798](https://github.com/vuejs/core/issues/8798)) ([df81da8](https://github.com/vuejs/core/commit/df81da8be97c8a1366563c7e3e01076ef02eb8f7))
+* **compiler-sfc:** support asset paths containing spaces ([#8752](https://github.com/vuejs/core/issues/8752)) ([36c99a9](https://github.com/vuejs/core/commit/36c99a9c6bb6bc306be054c3c8a85ff8ce50605a))
+* **compiler-ssr:** fix missing scopeId on server-rendered TransitionGroup ([#7557](https://github.com/vuejs/core/issues/7557)) ([61c1357](https://github.com/vuejs/core/commit/61c135742795aa5e3189a79c7dec6afa21bbc8d9)), closes [#7554](https://github.com/vuejs/core/issues/7554)
+* **compiler-ssr:** fix ssr compile error for select with non-option children ([#9442](https://github.com/vuejs/core/issues/9442)) ([cdb2e72](https://github.com/vuejs/core/commit/cdb2e725e7ea297f1f4180fb04889a3b757bc84e)), closes [#9440](https://github.com/vuejs/core/issues/9440)
+* **runtime-core:** delete stale slots which are present but undefined ([#6484](https://github.com/vuejs/core/issues/6484)) ([75b8722](https://github.com/vuejs/core/commit/75b872213574cb37e2c9e8a15f65613f867ca9a6)), closes [#9109](https://github.com/vuejs/core/issues/9109)
+* **runtime-core:** fix error when using cssvars with disabled teleport ([#7341](https://github.com/vuejs/core/issues/7341)) ([8f0472c](https://github.com/vuejs/core/commit/8f0472c9abedb337dc256143b69d8ab8759dbf5c)), closes [#7342](https://github.com/vuejs/core/issues/7342)
+* **teleport:** ensure descendent component would be unmounted correctly ([#6529](https://github.com/vuejs/core/issues/6529)) ([4162311](https://github.com/vuejs/core/commit/4162311efdb0db5ca458542e1604b19efa2fae0e)), closes [#6347](https://github.com/vuejs/core/issues/6347)
+* **types:** support contenteditable="plaintext-only" ([#8796](https://github.com/vuejs/core/issues/8796)) ([26ca89e](https://github.com/vuejs/core/commit/26ca89e5cf734fbef81e182050d2a215ec8a437b))
+
+
+### Performance Improvements
+
+* replace Map/Set with WeakMap/WeakSet ([#8549](https://github.com/vuejs/core/issues/8549)) ([712f96d](https://github.com/vuejs/core/commit/712f96d6ac4d3d984732cba448cb84624daba850))
+
+
+
+## [3.3.5](https://github.com/vuejs/core/compare/v3.3.4...v3.3.5) (2023-10-20)
+
+
+### Bug Fixes
+
+* add isGloballyWhitelisted back, but deprecated ([#8556](https://github.com/vuejs/core/issues/8556)) ([63dfe8e](https://github.com/vuejs/core/commit/63dfe8eab499979bcc2f7829e82464e13899c895)), closes [#8416](https://github.com/vuejs/core/issues/8416)
+* **build:** disable useDefineForClassFields in esbuild ([#9252](https://github.com/vuejs/core/issues/9252)) ([6d14fa8](https://github.com/vuejs/core/commit/6d14fa88e85d4c9e264be394ddb37a54ca6738a8))
+* **compat:** return value of vue compat set() ([#9377](https://github.com/vuejs/core/issues/9377)) ([e3c2d69](https://github.com/vuejs/core/commit/e3c2d699f694d9500ddee78571172a24f0e3b17a))
+* **compiler-sfc:** don't hoist props and emit ([#8535](https://github.com/vuejs/core/issues/8535)) ([24db951](https://github.com/vuejs/core/commit/24db9516d8b4857182ec1a3af86cb7346691679b)), closes [#7805](https://github.com/vuejs/core/issues/7805) [#7812](https://github.com/vuejs/core/issues/7812)
+* **compiler-sfc:** don't registerTS when bundling for browsers ([#8582](https://github.com/vuejs/core/issues/8582)) ([6f45f76](https://github.com/vuejs/core/commit/6f45f76df2c43796b35067ef8f8b9a7bca454040))
+* **compiler-sfc:** fix using imported ref as template ref during dev ([#7593](https://github.com/vuejs/core/issues/7593)) ([776ebf2](https://github.com/vuejs/core/commit/776ebf25b2e7570e78ac1c148fc45c823c21a542)), closes [#7567](https://github.com/vuejs/core/issues/7567)
+* **compiler-sfc:** handle dynamic directive arguments in template usage check ([#8538](https://github.com/vuejs/core/issues/8538)) ([e404a69](https://github.com/vuejs/core/commit/e404a699f48ae5c5a5da947f42679343192158c7)), closes [#8537](https://github.com/vuejs/core/issues/8537)
+* **compiler-sfc:** ignore style v-bind in double slash comments ([#5409](https://github.com/vuejs/core/issues/5409)) ([381b497](https://github.com/vuejs/core/commit/381b4977af25ba5392704f72ec6b3f2394d87ae7))
+* **compiler-sfc:** pass options directly to stylus ([#3848](https://github.com/vuejs/core/issues/3848)) ([d6446a6](https://github.com/vuejs/core/commit/d6446a6d40774b79045a9ddba7b5fd5201d51450))
+* **compiler-sfc:** support resolve multiple re-export /w same source type name ([#8365](https://github.com/vuejs/core/issues/8365)) ([4fa8da8](https://github.com/vuejs/core/commit/4fa8da8576717c619e1e8c04d19038488c75fbea)), closes [#8364](https://github.com/vuejs/core/issues/8364)
+* **compiler-sfc:** typo in experimental feature warnings ([#8513](https://github.com/vuejs/core/issues/8513)) ([fd1a3f9](https://github.com/vuejs/core/commit/fd1a3f95990d7c372fa1c0c40c55caca761a33a4))
+* **deps:** update dependency monaco-editor to ^0.44.0 ([#9237](https://github.com/vuejs/core/issues/9237)) ([8611874](https://github.com/vuejs/core/commit/8611874e09a827b6491173836c8942284d5de22c))
+* **deps:** update playground ([#9154](https://github.com/vuejs/core/issues/9154)) ([c8566a2](https://github.com/vuejs/core/commit/c8566a22b7cf37e6aefab7bad7b97ce2db9fae4c))
+* **playground:** fix github button style ([#7722](https://github.com/vuejs/core/issues/7722)) ([5ee992c](https://github.com/vuejs/core/commit/5ee992cfeabc6c4b871980c6057d0ac7140ad2fa))
+* **runtime-core:** swap client/server debug labels ([#9089](https://github.com/vuejs/core/issues/9089)) ([8f311c6](https://github.com/vuejs/core/commit/8f311c6f823f6776ca1c49bfbbbf8c7d9dea9cf1))
+* **ssr:** render correct initial selected state for select with v-model ([#7432](https://github.com/vuejs/core/issues/7432)) ([201c46d](https://github.com/vuejs/core/commit/201c46df07a38f3c2b73f384e8e6846dc62f224e)), closes [#7392](https://github.com/vuejs/core/issues/7392)
+* **ssr:** reset current instance if setting up options component errors ([#7743](https://github.com/vuejs/core/issues/7743)) ([020851e](https://github.com/vuejs/core/commit/020851e57d9a9f727c6ea07e9c1575430af02b73)), closes [#7733](https://github.com/vuejs/core/issues/7733)
+* **teleport:** handle target change while disabled ([#7837](https://github.com/vuejs/core/issues/7837)) ([140a89b](https://github.com/vuejs/core/commit/140a89b833bceed60838182b875d2953c70af114)), closes [#7835](https://github.com/vuejs/core/issues/7835)
+* **transition:** handle possible auto value for transition/animation durations ([96c76fa](https://github.com/vuejs/core/commit/96c76facb7de37fc241ccd55e121fd60a49a1452)), closes [#8409](https://github.com/vuejs/core/issues/8409)
+* **types/jsx:** add `inert` attribute and missing `hidden` values ([#8090](https://github.com/vuejs/core/issues/8090)) ([ceb0732](https://github.com/vuejs/core/commit/ceb0732e0b1bb4c8c505d80e97ff6fc89035fa90))
+* **types/jsx:** add missing loading attr for img element ([#6160](https://github.com/vuejs/core/issues/6160)) ([68d6b43](https://github.com/vuejs/core/commit/68d6b43f7e29b76aab2c6c1882885380a43fa3e3))
+* **types:** correct withDefaults return type for boolean prop with undefined default value ([#8602](https://github.com/vuejs/core/issues/8602)) ([f07cb18](https://github.com/vuejs/core/commit/f07cb18fedf9a446545aadf76bcdfb957c7ebcbd))
+* **types:** ensure nextTick return type reflect correct Promise value ([#8406](https://github.com/vuejs/core/issues/8406)) ([6a22b1f](https://github.com/vuejs/core/commit/6a22b1f6c287b60eda385df8a514335af8e040ea))
+* **types:** support correct types for style on svg elements ([#6322](https://github.com/vuejs/core/issues/6322)) ([364dc53](https://github.com/vuejs/core/commit/364dc53c7cc6f97d812ad175199c698faa92538e))
+
+
+### Performance Improvements
+
+* **compiler-sfc:** lazy require typescript ([d2c3d8b](https://github.com/vuejs/core/commit/d2c3d8b70b2df6e16f053a7ac58e6b04e7b2078f))
+* **custom-element:** cancel `MutationObserver` listener when disconnected ([#8666](https://github.com/vuejs/core/issues/8666)) ([24d98f0](https://github.com/vuejs/core/commit/24d98f03276de5b0fbced5a4c9d61b24e7d9d084))
+* mark `defineComponent` as side-effects-free ([#8512](https://github.com/vuejs/core/issues/8512)) ([438027c](https://github.com/vuejs/core/commit/438027cf9ecb63260f59d3027e0b188717694795))
+
+
+
+## [3.3.4](https://github.com/vuejs/core/compare/v3.3.3...v3.3.4) (2023-05-18)
+
+
+### Bug Fixes
+
+* **build:** ensure correct typing for node esm ([d621d4c](https://github.com/vuejs/core/commit/d621d4c646b2d7b190fbd44ad1fd04512b3de300))
+* **build:** fix __DEV__ flag replacement edge case ([8b7c04b](https://github.com/vuejs/core/commit/8b7c04b18f73aad9a08dd57eba90101b5b2aef28)), closes [#8353](https://github.com/vuejs/core/issues/8353)
+* **compiler-sfc:** handle imported types from default exports ([5aec717](https://github.com/vuejs/core/commit/5aec717a2402652306085f58432ba3ab91848a74)), closes [#8355](https://github.com/vuejs/core/issues/8355)
+
+
+
+## [3.3.3](https://github.com/vuejs/core/compare/v3.3.2...v3.3.3) (2023-05-18)
+
+
+### Bug Fixes
+
+* avoid regex s flag for old browsers ([91f1c62](https://github.com/vuejs/core/commit/91f1c62e6384a8b09f90e7e43b8d347901e529a0)), closes [#8316](https://github.com/vuejs/core/issues/8316)
+* **build:** fix dev flag replacement in esm-builder builds ([#8314](https://github.com/vuejs/core/issues/8314)) ([003836f](https://github.com/vuejs/core/commit/003836f90e1f00ebd04b77ec07ccfa4e649a2ff4)), closes [#8312](https://github.com/vuejs/core/issues/8312)
+* **compiler-sfc:** don't hoist regexp literial ([#8300](https://github.com/vuejs/core/issues/8300)) ([8ec73a3](https://github.com/vuejs/core/commit/8ec73a3aea7a52e9479f107ae5737761166ddae6))
+* **compiler-sfc:** fix props destructing default value type checking with unresolved type ([#8340](https://github.com/vuejs/core/issues/8340)) ([f69dbab](https://github.com/vuejs/core/commit/f69dbabf8794426c3e9ed33ae77dd8ce655eafd2)), closes [#8326](https://github.com/vuejs/core/issues/8326)
+* **compiler-sfc:** fix type import from path aliased vue file ([fab9c72](https://github.com/vuejs/core/commit/fab9c727805c6186c490f99023e8cf5401b0b5a9)), closes [#8348](https://github.com/vuejs/core/issues/8348)
+* **compiler-sfc:** handle ts files with relative imports with .js extension ([b36addd](https://github.com/vuejs/core/commit/b36addd3bde07467e9ff5641bd1c2bdc3085944c)), closes [#8339](https://github.com/vuejs/core/issues/8339)
+* **compiler-sfc:** parses correctly when inline mode is off ([#8337](https://github.com/vuejs/core/issues/8337)) ([ecbd42a](https://github.com/vuejs/core/commit/ecbd42a1444e3c599e464dec002e43d548d99669)), closes [#6088](https://github.com/vuejs/core/issues/6088)
+* **compiler-sfc:** support defineEmits type reference with unions ([#8299](https://github.com/vuejs/core/issues/8299)) ([b133e0f](https://github.com/vuejs/core/commit/b133e0fd97b0b4fabbb43151c19031b8fb47c05b)), closes [#7943](https://github.com/vuejs/core/issues/7943)
+* **types:** support generic usage with withDefaults + defineProps ([#8335](https://github.com/vuejs/core/issues/8335)) ([216f269](https://github.com/vuejs/core/commit/216f26995b63c2df26ca0f39f390fe8d59cdabfa)), closes [#8310](https://github.com/vuejs/core/issues/8310) [#8331](https://github.com/vuejs/core/issues/8331) [#8325](https://github.com/vuejs/core/issues/8325)
+
+
+
+## [3.3.2](https://github.com/vuejs/core/compare/v3.3.1...v3.3.2) (2023-05-12)
+
+
+### Bug Fixes
+
+* **compiler-core:** treat floating point numbers as constants ([8dc8cf8](https://github.com/vuejs/core/commit/8dc8cf852bf8057aa5c4b5670f09e8c28a168b73)), closes [#8295](https://github.com/vuejs/core/issues/8295)
+* **compiler-dom:** do not throw in production on side effect tags ([c454b9d](https://github.com/vuejs/core/commit/c454b9d7f431d57abedb7184d1e4059914c4463f)), closes [#8287](https://github.com/vuejs/core/issues/8287) [#8292](https://github.com/vuejs/core/issues/8292)
+* **compiler-sfc:** fix regression on props destructure when transform is not enabled ([f25bd37](https://github.com/vuejs/core/commit/f25bd37c6707fde19d164d90a38de41168941f4b)), closes [#8289](https://github.com/vuejs/core/issues/8289)
+* **compiler-sfc:** handle prop keys that need escaping ([#7803](https://github.com/vuejs/core/issues/7803)) ([690ef29](https://github.com/vuejs/core/commit/690ef296357c7fc09f66ba9408df548e117f686f)), closes [#8291](https://github.com/vuejs/core/issues/8291)
+* **compiler-sfc:** properly parse d.ts files when resolving types ([aa1e77d](https://github.com/vuejs/core/commit/aa1e77d532b951ea5d3a5e26214a8b0c9c02fb6f)), closes [#8285](https://github.com/vuejs/core/issues/8285)
+* **compiler-sfc:** raise specific warning for failed extends and allow ignoring extends ([8235072](https://github.com/vuejs/core/commit/82350721a408e1f552c613c05971439d6c218d87)), closes [#8286](https://github.com/vuejs/core/issues/8286)
+
+
+
+## [3.3.1](https://github.com/vuejs/core/compare/v3.3.0...v3.3.1) (2023-05-11)
+
+
+### Bug Fixes
+
+* **suspense:** handle nested sync suspense for hydration ([a3f5485](https://github.com/vuejs/core/commit/a3f54857858c8ca0e6b9f12618d151ab255fb040))
+
+
+
+# [3.3.0 Rurouni Kenshin](https://github.com/vuejs/core/compare/v3.3.0-beta.5...v3.3.0) (2023-05-11)
+
+- For a detailed walkthrough of the new features in 3.3, please read the [release blog post](https://blog.vuejs.org/posts/vue-3-3).
+
+- Features and deprecations listed here are aggregated from the beta and alpha releases. For full chronological history, bug fixes, and other minor features, please consult the individual logs of the 3.3 beta and alpha releases.
+
+## Features
+
+* **sfc:** support imported types in SFC macros ([#8083](https://github.com/vuejs/core/pull/8083))
+* **types/slots:** support slot presence / props type checks via `defineSlots` macro and `slots` option ([#7982](https://github.com/vuejs/core/issues/7982)) ([5a2f5d5](https://github.com/vuejs/core/commit/5a2f5d59cffa36a99e6f2feab6b3ba7958b7362f))
+* **sfc:** support more ergnomic defineEmits type syntax ([#7992](https://github.com/vuejs/core/issues/7992)) ([8876dcc](https://github.com/vuejs/core/commit/8876dccf42a7f05375d97cb18c1afdfd0fc51c94))
+* **sfc:** introduce `defineModel` macro and `useModel` helper ([#8018](https://github.com/vuejs/core/issues/8018)) ([14f3d74](https://github.com/vuejs/core/commit/14f3d747a34d45415b0036b274517d70a27ec0d3))
+* **reactivity:** improve support of getter usage in reactivity APIs ([#7997](https://github.com/vuejs/core/issues/7997)) ([59e8284](https://github.com/vuejs/core/commit/59e828448e7f37643cd0eaea924a764e9d314448))
+* **compiler-sfc:** add defineOptions macro ([#5738](https://github.com/vuejs/core/issues/5738)) ([bcf5841](https://github.com/vuejs/core/commit/bcf5841ddecc64d0bdbd56ce1463eb8ebf01bb9d))
+* **types/jsx:** support jsxImportSource, avoid global JSX conflict ([#7958](https://github.com/vuejs/core/issues/7958)) ([d0b7ef3](https://github.com/vuejs/core/commit/d0b7ef3b61d5f83e35e5854b3c2c874e23463102))
+* **dx:** improve readability of displayed types for props ([4c9bfd2](https://github.com/vuejs/core/commit/4c9bfd2b999ce472f7481aae4f9dc5bb9f76628e))
+* **app:** app.runWithContext() ([#7451](https://github.com/vuejs/core/issues/7451)) ([869f3fb](https://github.com/vuejs/core/commit/869f3fb93e61400be4fd925e0850c2b1564749e2))
+* hasInjectionContext() for libraries ([#8111](https://github.com/vuejs/core/issues/8111)) ([5510ce3](https://github.com/vuejs/core/commit/5510ce385abfa151c07a5253cccf4abccabdd01d))
+* allow accessing console in template ([#6508](https://github.com/vuejs/core/issues/6508)) ([fe76224](https://github.com/vuejs/core/commit/fe762247f8035d28d543bc5602ad01b0c258f6d6)), closes [#7939](https://github.com/vuejs/core/issues/7939)
+* **suspense:** introduce suspensible option for `<Suspense>` ([#6736](https://github.com/vuejs/core/issues/6736)) ([cb37d0b](https://github.com/vuejs/core/commit/cb37d0b9ffb5d4bb81a0367d84295dec8dd4448c)), closes [#5513](https://github.com/vuejs/core/issues/5513)
+* **compiler-dom:** treat inert as boolean attribute ([#8209](https://github.com/vuejs/core/issues/8209)) ([918ec8a](https://github.com/vuejs/core/commit/918ec8a5cbc825a3947cd35fe966671c245af087)), closes [#8208](https://github.com/vuejs/core/issues/8208)
+* **types:** add slots types for built-in components ([#6033](https://github.com/vuejs/core/issues/6033)) ([3cb4dc9](https://github.com/vuejs/core/commit/3cb4dc9e5538e1c2bde9fa691b001615a848c546))
+* **types:** provide ExtractPublicPropTypes utility type ([bff63c5](https://github.com/vuejs/core/commit/bff63c5498f5fa098689c18defe48ae08d47eadb)), closes [#5272](https://github.com/vuejs/core/issues/5272) [#8168](https://github.com/vuejs/core/issues/8168)
+* **compiler-sfc:** expose parseCache ([4576548](https://github.com/vuejs/core/commit/45765488d498d94f8760c9e82f1177070057b17c)), closes [#8202](https://github.com/vuejs/core/issues/8202)
+
+## Deprecations
+
+* **deprecation:** deprecate [@vnode](https://github.com/vnode) hooks in favor of vue: prefix ([5f0394a](https://github.com/vuejs/core/commit/5f0394a5ab88c82c74e240161499721f63d5462e))
+* **deprecation:** deprecate v-is directive ([bbd8301](https://github.com/vuejs/core/commit/bbd8301a1344b02de635ea16d4822db1c343bd12))
+* **deprecation:** unwrap injected refs in Options API by default, deprecate app.config.unwrapInjectedRefs ([526fa3b](https://github.com/vuejs/core/commit/526fa3b2ccf038375e76f8af2f1ddf79a7388878))
+
+# [3.3.0-beta.5](https://github.com/vuejs/core/compare/v3.3.0-beta.4...v3.3.0-beta.5) (2023-05-08)
+
+
+### Bug Fixes
+
+* **build:** retain defineComponent() treeshakability in Rollup ([c2172f3](https://github.com/vuejs/core/commit/c2172f3a0ebbd7153e209dd8df6d9724bc524d9a)), closes [#8236](https://github.com/vuejs/core/issues/8236)
+* **compiler-sfc:** enable props destructure when reactivity transform option is enabled ([862edfd](https://github.com/vuejs/core/commit/862edfd91a2c2f6b75f943cb1a9682c4be5d7fa8))
+* **compiler-sfc:** fix built-in type resolving in external files ([6b194bc](https://github.com/vuejs/core/commit/6b194bcf3b8143895c2a472cd87998ebf9856146)), closes [#8244](https://github.com/vuejs/core/issues/8244)
+* **compiler-sfc:** transform destructured props when reactivity transform option is enabled ([#8252](https://github.com/vuejs/core/issues/8252)) ([287bd99](https://github.com/vuejs/core/commit/287bd999942e58925377f50540c7134cff2a9279))
+* **runtime-core:** ensure defineComponent name in extraOptions takes higher priority ([b2be75b](https://github.com/vuejs/core/commit/b2be75bad4ba70da1da6930eb914e51ce2c630b2))
+* **runtime-dom:** check attribute value when setting option value ([#8246](https://github.com/vuejs/core/issues/8246)) ([4495373](https://github.com/vuejs/core/commit/4495373d28d9fa4479eedd224adb16248ae0b9f4)), closes [#8227](https://github.com/vuejs/core/issues/8227)
+* **suspense:** fix nested suspensible suspense with no asyn deps ([e147512](https://github.com/vuejs/core/commit/e1475129fc6f8c086c2ec667476900b8c8f46774)), closes [#8206](https://github.com/vuejs/core/issues/8206)
+* **types:** remove short syntax support in defineSlots() ([1279b17](https://github.com/vuejs/core/commit/1279b1730079f77692a0817d51bbba57eb2b871b))
+
+
+
+# [3.3.0-beta.4](https://github.com/vuejs/core/compare/v3.3.0-beta.3...v3.3.0-beta.4) (2023-05-05)
+
+
+### Bug Fixes
+
+* **runtime-core:** handle template ref with number values ([#8233](https://github.com/vuejs/core/issues/8233)) ([1b1242f](https://github.com/vuejs/core/commit/1b1242f4d1349e361335b2815f41742d41283a94)), closes [#8230](https://github.com/vuejs/core/issues/8230)
+* **types:** retain compatibility for provide() usage with explicit type parameter ([038cd83](https://github.com/vuejs/core/commit/038cd830d5b34b47d7e7e1c61f0973d27cd8b915))
+
+
+### Features
+
+* **compiler-dom:** treat inert as boolean attribute ([#8209](https://github.com/vuejs/core/issues/8209)) ([918ec8a](https://github.com/vuejs/core/commit/918ec8a5cbc825a3947cd35fe966671c245af087)), closes [#8208](https://github.com/vuejs/core/issues/8208)
+* **types:** add slots types for built-in components ([#6033](https://github.com/vuejs/core/issues/6033)) ([3cb4dc9](https://github.com/vuejs/core/commit/3cb4dc9e5538e1c2bde9fa691b001615a848c546))
+* **types:** provide ExtractPublicPropTypes utility type ([bff63c5](https://github.com/vuejs/core/commit/bff63c5498f5fa098689c18defe48ae08d47eadb)), closes [#5272](https://github.com/vuejs/core/issues/5272) [#8168](https://github.com/vuejs/core/issues/8168)
+
+
+
+# [3.3.0-beta.3](https://github.com/vuejs/core/compare/v3.3.0-beta.2...v3.3.0-beta.3) (2023-05-01)
+
+
+### Bug Fixes
+
+* **compiler-core:** handle slot argument parsing edge case ([b434d12](https://github.com/vuejs/core/commit/b434d12bf6cbd49a7c99b1646d9517d8393ea49f))
+* **hmr:** keep slots proxy mutable for hmr ([c117d9c](https://github.com/vuejs/core/commit/c117d9c257820481b85304db26ce5c77af5d050c)), closes [#8188](https://github.com/vuejs/core/issues/8188)
+* **types:** fix provide type checking for ref value ([de87e6e](https://github.com/vuejs/core/commit/de87e6e405dfaf9a917d7eb423fcee35237c2020)), closes [#8201](https://github.com/vuejs/core/issues/8201)
+
+
+### Features
+
+* **compiler-sfc:** expose parseCache ([4576548](https://github.com/vuejs/core/commit/45765488d498d94f8760c9e82f1177070057b17c)), closes [#8202](https://github.com/vuejs/core/issues/8202)
+
+
+
+# [3.3.0-beta.2](https://github.com/vuejs/core/compare/v3.3.0-beta.1...v3.3.0-beta.2) (2023-04-25)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** avoid all hard errors when inferring runtime type ([2d9f6f9](https://github.com/vuejs/core/commit/2d9f6f926453c46f542789927bcd30d15da9c24b))
+* **compiler-sfc:** normalize windows paths when resolving types ([#8136](https://github.com/vuejs/core/issues/8136)) ([29da504](https://github.com/vuejs/core/commit/29da50468770fcee16ba5d5bec7166dd5bc120ee))
+* **compiler-sfc:** props bindings should not override user declared bindings ([433a58c](https://github.com/vuejs/core/commit/433a58ccb61c25512dcc3df155b8e285256917ef)), closes [#8148](https://github.com/vuejs/core/issues/8148)
+
+
+### Features
+
+* **compiler-sfc:** support project references when resolving types ([1c0be5c](https://github.com/vuejs/core/commit/1c0be5c7444966fa444460e87633cf44ec60292a)), closes [#8140](https://github.com/vuejs/core/issues/8140)
+
+
+### Performance Improvements
+
+* **compiler-sfc:** infer ref binding type for more built-in methods ([a370e80](https://github.com/vuejs/core/commit/a370e8006a70ea49a7d04c8c1a42d0947eba5dea))
+
+
+
+# [3.3.0-beta.1](https://github.com/vuejs/core/compare/v3.3.0-alpha.13...v3.3.0-beta.1) (2023-04-21)
+
+
+### Features
+
+* allow accessing console in template ([#6508](https://github.com/vuejs/core/issues/6508)) ([fe76224](https://github.com/vuejs/core/commit/fe762247f8035d28d543bc5602ad01b0c258f6d6)), closes [#7939](https://github.com/vuejs/core/issues/7939)
+* **compiler-sfc:** improve utility type Partial and Required ([#8103](https://github.com/vuejs/core/issues/8103)) ([1d1d728](https://github.com/vuejs/core/commit/1d1d72894995fde14bd09e2990462c19d5176bf9))
+* **deprecation:** deprecate [@vnode](https://github.com/vnode) hooks in favor of vue: prefix ([5f0394a](https://github.com/vuejs/core/commit/5f0394a5ab88c82c74e240161499721f63d5462e))
+* **deprecation:** deprecate v-is directive ([bbd8301](https://github.com/vuejs/core/commit/bbd8301a1344b02de635ea16d4822db1c343bd12))
+* **deprecation:** unwrap injected refs in Options API by default, deprecate app.config.unwrapInjectedRefs ([526fa3b](https://github.com/vuejs/core/commit/526fa3b2ccf038375e76f8af2f1ddf79a7388878))
+* **suspense:** introduce suspensible option for `<Suspense>` ([#6736](https://github.com/vuejs/core/issues/6736)) ([cb37d0b](https://github.com/vuejs/core/commit/cb37d0b9ffb5d4bb81a0367d84295dec8dd4448c)), closes [#5513](https://github.com/vuejs/core/issues/5513)
+
+
+
+# [3.3.0-alpha.13](https://github.com/vuejs/core/compare/v3.3.0-alpha.12...v3.3.0-alpha.13) (2023-04-20)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** handle type merging + fix namespace access when inferring type ([d53e157](https://github.com/vuejs/core/commit/d53e157805678db7a3b9ca2fccc74530e1dfbc48)), closes [#8102](https://github.com/vuejs/core/issues/8102)
+* **compiler-sfc:** normalize filename when invalidating cache ([9b5a34b](https://github.com/vuejs/core/commit/9b5a34bf8c0d1b4c6ec3cf1434076b7e25065f84))
+* **hmr:** always traverse static children in dev ([f17a82c](https://github.com/vuejs/core/commit/f17a82c769cfb60ee6785ef5d34d91191d153542)), closes [#7921](https://github.com/vuejs/core/issues/7921) [#8100](https://github.com/vuejs/core/issues/8100)
+* **hmr:** force update cached slots during HMR ([94fa67a](https://github.com/vuejs/core/commit/94fa67a4f73b3646c8c1e29512a71b17bd56efc3)), closes [#7155](https://github.com/vuejs/core/issues/7155) [#7158](https://github.com/vuejs/core/issues/7158)
+
+
+### Features
+
+* **compiler-sfc:** support dynamic imports when resolving types ([4496456](https://github.com/vuejs/core/commit/4496456d7d9947560ef1e35ccb176b97a27bd8f4))
+* **compiler-sfc:** support export * when resolving types ([7c3ca3c](https://github.com/vuejs/core/commit/7c3ca3cc3e122fe273e80a950c57d492a7f0bf4a))
+* **compiler-sfc:** support ExtractPropTypes when resolving types ([50c0bbe](https://github.com/vuejs/core/commit/50c0bbe5221dbc1dc353d4960e69ec7c8ba12905)), closes [#8104](https://github.com/vuejs/core/issues/8104)
+* hasInjectionContext() for libraries ([#8111](https://github.com/vuejs/core/issues/8111)) ([5510ce3](https://github.com/vuejs/core/commit/5510ce385abfa151c07a5253cccf4abccabdd01d))
+
+
+
+# [3.3.0-alpha.12](https://github.com/vuejs/core/compare/v3.3.0-alpha.11...v3.3.0-alpha.12) (2023-04-18)
+
+
+### Bug Fixes
+
+* **compiler:** fix expression codegen for literal const bindings in non-inline mode ([0f77a2b](https://github.com/vuejs/core/commit/0f77a2b1d1047d66ccdfda70382d1a223886130c))
+
+
+
+# [3.3.0-alpha.11](https://github.com/vuejs/core/compare/v3.3.0-alpha.10...v3.3.0-alpha.11) (2023-04-17)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** normalize windows paths when resolving types ([271df09](https://github.com/vuejs/core/commit/271df09470c61d073185ba6cf3cf50358713c500))
+
+
+
+# [3.3.0-alpha.10](https://github.com/vuejs/core/compare/v3.3.0-alpha.9...v3.3.0-alpha.10) (2023-04-17)
+
+
+### Bug Fixes
+
+* **hmr:** invalidate cached props/emits options on hmr ([4b5b384](https://github.com/vuejs/core/commit/4b5b384485cf8f6124f6738b89e3d047358f3a11))
+* **runtime-core:** properly merge props and emits options from mixins ([#8052](https://github.com/vuejs/core/issues/8052)) ([c94ef02](https://github.com/vuejs/core/commit/c94ef02421d7422bc59d10cf2eee9f4e7dcea6c8)), closes [#7989](https://github.com/vuejs/core/issues/7989)
+
+
+### Features
+
+* **compiler-sfc:** expose type import deps on compiled script block ([8d8ddd6](https://github.com/vuejs/core/commit/8d8ddd686c832b2ea29b87ef47666b13c4ad5d4c))
+* **compiler-sfc:** expose type resolve APIs ([f22e32e](https://github.com/vuejs/core/commit/f22e32e365bf6292cb606cb7289609e82da8b790))
+* **compiler-sfc:** mark props destructure as experimental and require explicit opt-in ([6b13e04](https://github.com/vuejs/core/commit/6b13e04b4c83fcdbb180dc1d59f536a1309c2960))
+* **compiler-sfc:** support intersection and union types in macros ([d1f973b](https://github.com/vuejs/core/commit/d1f973bff82581fb335d6fc05623d1ad3d84fb7c)), closes [#7553](https://github.com/vuejs/core/issues/7553)
+* **compiler-sfc:** support limited built-in utility types in macros ([1cfab4c](https://github.com/vuejs/core/commit/1cfab4c695b0c28f549f8c97faee5099581792a7))
+* **compiler-sfc:** support mapped types, string types & template type in macros ([fb8ecc8](https://github.com/vuejs/core/commit/fb8ecc803e58bfef0971346c63fefc529812daa7))
+* **compiler-sfc:** support namespace members type in macros ([5ff40bb](https://github.com/vuejs/core/commit/5ff40bb0dc2918b7db15fe9f49db2a135a925572))
+* **compiler-sfc:** support relative imported types in macros ([8aa4ea8](https://github.com/vuejs/core/commit/8aa4ea81d6e4d3110aa1619cca594543da4c9b63))
+* **compiler-sfc:** support resolving type imports from modules ([3982bef](https://github.com/vuejs/core/commit/3982bef533b451d1b59fa243560184a13fe8c18c))
+* **compiler-sfc:** support specifying global types for sfc macros ([4e028b9](https://github.com/vuejs/core/commit/4e028b966991937c83fb2529973fd3d41080bb61)), closes [/github.com/vuejs/core/pull/8083#issuecomment-1508468713](https://github.com//github.com/vuejs/core/pull/8083/issues/issuecomment-1508468713)
+* **compiler-sfc:** support string indexed type in macros ([3f779dd](https://github.com/vuejs/core/commit/3f779ddbf85054c8915fa4537f8a79baab392d5c))
+* **compiler-sfc:** support string/number indexed types in macros ([760755f](https://github.com/vuejs/core/commit/760755f4f83680bee13ad546cdab2e48ade38dff))
+
+
+### Performance Improvements
+
+* **compiler:** use source-map-js ([19e17a9](https://github.com/vuejs/core/commit/19e17a951c3387cbd6a1597e6cd9048a4aad4528))
+
+
+
+# [3.3.0-alpha.9](https://github.com/vuejs/core/compare/v3.3.0-alpha.8...v3.3.0-alpha.9) (2023-04-08)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** accept `StringLiteral` node in `defineEmit` tuple syntax ([#8041](https://github.com/vuejs/core/issues/8041)) ([3ccbea0](https://github.com/vuejs/core/commit/3ccbea08e09217b50a410d7b49ebb138e0c4c1e7)), closes [#8040](https://github.com/vuejs/core/issues/8040)
+* **compiler-sfc:** fix binding type for constants when hoistStatic is disabled ([#8029](https://github.com/vuejs/core/issues/8029)) ([f7f4624](https://github.com/vuejs/core/commit/f7f4624191bbdc09600dbb0eb048b947c3a4f761))
+* **compiler-sfc:** skip empty `defineOptions` and support TypeScript type assertions ([#8028](https://github.com/vuejs/core/issues/8028)) ([9557529](https://github.com/vuejs/core/commit/955752951e1d31b90d817bd20830fe3f89018771))
+* **compiler-ssr:** disable v-once transform in ssr vdom fallback branch ([05f94cf](https://github.com/vuejs/core/commit/05f94cf7b01dd05ed7d3170916a38b175d5df292)), closes [#7644](https://github.com/vuejs/core/issues/7644)
+* **types:** improve defineProps return type with generic arguments ([91a931a](https://github.com/vuejs/core/commit/91a931ae8707b8d43f10216e1ce8e18b12158f99))
+* **types:** more public type argument order fix ([af563bf](https://github.com/vuejs/core/commit/af563bf428200367b6f5bb7944f690c85d810202))
+* **types:** retain type parameters order for public types ([bdf557f](https://github.com/vuejs/core/commit/bdf557f6f233c039fff8007b1b16aec00c4e68aa))
+
+
+### Features
+
+* **app:** app.runWithContext() ([#7451](https://github.com/vuejs/core/issues/7451)) ([869f3fb](https://github.com/vuejs/core/commit/869f3fb93e61400be4fd925e0850c2b1564749e2))
+* **sfc:** introduce `defineModel` macro and `useModel` helper ([#8018](https://github.com/vuejs/core/issues/8018)) ([14f3d74](https://github.com/vuejs/core/commit/14f3d747a34d45415b0036b274517d70a27ec0d3))
+
+
+### Reverts
+
+* Revert "chore: remove unused args passed to ssrRender" ([b117b88](https://github.com/vuejs/core/commit/b117b8844881a732a021432066230ff2215049ea))
+
+
+
+# [3.3.0-alpha.8](https://github.com/vuejs/core/compare/v3.3.0-alpha.7...v3.3.0-alpha.8) (2023-04-04)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** check binding is prop before erroring ([f3145a9](https://github.com/vuejs/core/commit/f3145a915aaec11c915f1df258c5209ae4782bcc)), closes [#8017](https://github.com/vuejs/core/issues/8017)
+
+
+
+# [3.3.0-alpha.7](https://github.com/vuejs/core/compare/v3.3.0-alpha.6...v3.3.0-alpha.7) (2023-04-03)
+
+
+### Bug Fixes
+
+* **compiler-dom:** handle newlines when evaluating constants during stringification ([#7995](https://github.com/vuejs/core/issues/7995)) ([5261085](https://github.com/vuejs/core/commit/52610851137b9c5f6f57d771fd604fba309b3c97)), closes [#7994](https://github.com/vuejs/core/issues/7994)
+* **compiler-sfc:** use dynamic defaults merging for methods with computed keys ([482f2e3](https://github.com/vuejs/core/commit/482f2e3434a1edc47a181890354838e206d08922)), closes [#7113](https://github.com/vuejs/core/issues/7113)
+
+
+### Features
+
+* **compiler-sfc:** codegen support for defineEmits() short syntax (followup of [#7992](https://github.com/vuejs/core/issues/7992)) ([ef73ea5](https://github.com/vuejs/core/commit/ef73ea53eaf853d43e70946d2d448ae8c0a83e4f))
+* **compiler-sfc:** support arbitrary expression as withDefaults argument ([fe61944](https://github.com/vuejs/core/commit/fe619443d2e99301975de120685dbae8d66c03a6)), closes [#6459](https://github.com/vuejs/core/issues/6459)
+* **reactivity:** improve support of getter usage in reactivity APIs ([#7997](https://github.com/vuejs/core/issues/7997)) ([59e8284](https://github.com/vuejs/core/commit/59e828448e7f37643cd0eaea924a764e9d314448))
+* **sfc:** revert withDefaults() deprecation ([4af5d1b](https://github.com/vuejs/core/commit/4af5d1b0754035058436f9e4e5c12aedef199177))
+* **sfc:** support more ergnomic defineEmits type syntax ([#7992](https://github.com/vuejs/core/issues/7992)) ([8876dcc](https://github.com/vuejs/core/commit/8876dccf42a7f05375d97cb18c1afdfd0fc51c94))
+* **types/slots:** support slot presence / props type checks via `defineSlots` macro and `slots` option ([#7982](https://github.com/vuejs/core/issues/7982)) ([5a2f5d5](https://github.com/vuejs/core/commit/5a2f5d59cffa36a99e6f2feab6b3ba7958b7362f))
+
+
+
+# [3.3.0-alpha.6](https://github.com/vuejs/core/compare/v3.3.0-alpha.5...v3.3.0-alpha.6) (2023-03-30)
+
+
+### Bug Fixes
+
+* **compiler-core:** check if expression is constant ([#7974](https://github.com/vuejs/core/issues/7974)) ([77686cf](https://github.com/vuejs/core/commit/77686cf4765e7e345bef364c0b03739e3c2da91d)), closes [#7973](https://github.com/vuejs/core/issues/7973)
+* **compiler-core:** fix codegen for literal const in non-inline mode ([6bda4b6](https://github.com/vuejs/core/commit/6bda4b66886240b28993c88b7ecd4640a199be65))
+* **compiler-sfc:** allow `<script>` with lang='js' ([#7398](https://github.com/vuejs/core/issues/7398)) ([9f5e20c](https://github.com/vuejs/core/commit/9f5e20ccff235946159f0e50519f5be09bc89d5b))
+* **compiler-sfc:** avoid codegen conflict with user variable named `expose` ([#7949](https://github.com/vuejs/core/issues/7949)) ([c839129](https://github.com/vuejs/core/commit/c839129ab9d46f56a019b0ff234b35f27cac1e35)), closes [#7890](https://github.com/vuejs/core/issues/7890)
+* **compiler-sfc:** disallow `expose` property in `defineOptions` ([#7967](https://github.com/vuejs/core/issues/7967)) ([93f7729](https://github.com/vuejs/core/commit/93f77292c9f2c4dcc83aae6b5943a8b1d7443092))
+* **compiler-sfc:** fix defineExpose() codegen regression from [#7949](https://github.com/vuejs/core/issues/7949) ([a94072d](https://github.com/vuejs/core/commit/a94072dd2ca1aca4ce1fbe5da51ca2a9a07a4637))
+* **compiler-sfc:** fix edge case of default export call with no args ([#7536](https://github.com/vuejs/core/issues/7536)) ([d60e58c](https://github.com/vuejs/core/commit/d60e58c9f62ae7bd1f9c888cd2e55982a64d9e96)), closes [#7534](https://github.com/vuejs/core/issues/7534)
+* **compiler-sfc:** fix function default value handling w/ props destructure ([e10a89e](https://github.com/vuejs/core/commit/e10a89e608d3486c0c9a0457ee7c56d208e0aa91))
+* **compiler-sfc:** handle more TS built-in utilities in defineProps inference ([4355d24](https://github.com/vuejs/core/commit/4355d2492dccdb175b18d083e20f3ec39a52801f))
+* **compiler-sfc:** infer function prop type from type literal w/ callable signature ([#7119](https://github.com/vuejs/core/issues/7119)) ([3a7572c](https://github.com/vuejs/core/commit/3a7572cdb2074c5cac2231e4525296104141411c))
+* **compiler-sfc:** infer object type for empty type literal ([1a04fba](https://github.com/vuejs/core/commit/1a04fba10b6462303c65f1095da86ce05c14f1f4))
+* **compiler-sfc:** infer runtime type in defineProps ([#7972](https://github.com/vuejs/core/issues/7972)) ([ba4cec3](https://github.com/vuejs/core/commit/ba4cec31b91da60555892c381b00c2fa5b3e0e39))
+* **compiler-sfc:** infer TS Extract&Exclude runtime type ([#7339](https://github.com/vuejs/core/issues/7339)) ([6391daf](https://github.com/vuejs/core/commit/6391daf6586e49e165b3195863b602c3cbb92ace)), closes [#7337](https://github.com/vuejs/core/issues/7337) [#6252](https://github.com/vuejs/core/issues/6252)
+* **compiler-sfc:** infer TSIntersectionType in defineProps ([#7394](https://github.com/vuejs/core/issues/7394)) ([151a8ad](https://github.com/vuejs/core/commit/151a8ad6b9288784c3b2514820a112b93ecf2dca))
+* **compiler-sfc:** properly handle unknown types in runtime prop inference ([5fb406e](https://github.com/vuejs/core/commit/5fb406e3e1d585076779e9ce4a588a4f9a61ef23)), closes [#7511](https://github.com/vuejs/core/issues/7511)
+* **compiler-sfc:** properly remove comma of multiple macros in the same declaration ([#7423](https://github.com/vuejs/core/issues/7423)) ([336a3d7](https://github.com/vuejs/core/commit/336a3d7b9199aeda19672832ce173de298b1105a)), closes [#7422](https://github.com/vuejs/core/issues/7422) [#6778](https://github.com/vuejs/core/issues/6778)
+* **compiler-sfc:** rewrite default export with AST analysis instead of regex ([#7068](https://github.com/vuejs/core/issues/7068)) ([701b95f](https://github.com/vuejs/core/commit/701b95ff3d2bad0284c03865a0b052fc8324beec)), closes [#7038](https://github.com/vuejs/core/issues/7038) [#7041](https://github.com/vuejs/core/issues/7041) [#7078](https://github.com/vuejs/core/issues/7078)
+* **compiler-sfc:** unwrap TS node for defineProps ([#7340](https://github.com/vuejs/core/issues/7340)) ([1b69d5f](https://github.com/vuejs/core/commit/1b69d5f2f49ee60af4b10137c7833a76420dbba1))
+* **compiler-sfc:** use prependLeft to handle CSSVars ([#7760](https://github.com/vuejs/core/issues/7760)) ([139104b](https://github.com/vuejs/core/commit/139104ba2695eecae672db98f978de78e17ab7e1))
+* **jsx-runtime:** fix automatic runtime implementation ([#7959](https://github.com/vuejs/core/issues/7959)) ([5838950](https://github.com/vuejs/core/commit/5838950ecf7e4e17dd5a23acd621077390666b76))
+* **jsx-runtime:** handle keys ([#7976](https://github.com/vuejs/core/issues/7976)) ([ff60b93](https://github.com/vuejs/core/commit/ff60b933ae4e02422393664ee7818cffadf9b58b))
+* **types/jsx:** jsx-runtime types for global JSX namespace registration ([#7978](https://github.com/vuejs/core/issues/7978)) ([0f73f39](https://github.com/vuejs/core/commit/0f73f394dafd709298bd8c71107a323bf322a1d2))
+* **types/jsx:** move JSX DOM types back to `@vue/runtime-dom` ([#7979](https://github.com/vuejs/core/issues/7979)) ([ffe679c](https://github.com/vuejs/core/commit/ffe679c490986b69956daec7166f1ab6d9f23073))
+* **types/jsx:** remove $slots children override ([28e30c8](https://github.com/vuejs/core/commit/28e30c819df5e4fc301c98f7be938fa13e8be3bc))
+* **types:** revert jsx global removal (to be removed in 3.4) ([e224922](https://github.com/vuejs/core/commit/e224922e972e78b4fb6cbd129d685c2317018ad1))
+
+
+### Features
+
+* **compiler-core:** support parsing `const` modifier in type parameters ([#7912](https://github.com/vuejs/core/issues/7912)) ([b7bd50f](https://github.com/vuejs/core/commit/b7bd50f5059e8755c0204f01a8c55b1724688e7e))
+* **compiler-sfc:** add defineOptions macro ([#5738](https://github.com/vuejs/core/issues/5738)) ([bcf5841](https://github.com/vuejs/core/commit/bcf5841ddecc64d0bdbd56ce1463eb8ebf01bb9d))
+* **compiler-sfc:** enable reactive props destructure by default ([#7986](https://github.com/vuejs/core/issues/7986)) ([ba9c2ae](https://github.com/vuejs/core/commit/ba9c2ae247fcc3960b238a04cb635158daa82004))
+* **compiler-sfc:** improve runtime props inference for enum ([eded947](https://github.com/vuejs/core/commit/eded94712e37856f258dc8c85f98a26fa41ae05f))
+* **compiler-sfc:** support generating variable instead of default export in compileScript ([71635be](https://github.com/vuejs/core/commit/71635be68d25887f91d624bb7f78281a851bc0cb))
+* **compiler-sfc:** support module string names syntax ([#7428](https://github.com/vuejs/core/issues/7428)) ([0002567](https://github.com/vuejs/core/commit/000256772816d54976e462330a7be342c49c7304))
+* **complier-sfc:** hoist literal constants for script ([#5752](https://github.com/vuejs/core/issues/5752)) ([7def8b1](https://github.com/vuejs/core/commit/7def8b15b89aa78accd9a00927db91e8091a12b7)), closes [#5750](https://github.com/vuejs/core/issues/5750)
+* **runtime-core:** add skipCheck for prop ([#7548](https://github.com/vuejs/core/issues/7548)) ([63ad77f](https://github.com/vuejs/core/commit/63ad77f6f65751780aa52f817387165b4773cfe4))
+* **sfc:** deprecate reactivity transform ([efb54e7](https://github.com/vuejs/core/commit/efb54e7315e93f4be7004d1c0a4de8c523dab334))
+* **types:** `defineComponent()` with generics support ([#7963](https://github.com/vuejs/core/issues/7963)) ([d77557c](https://github.com/vuejs/core/commit/d77557c4038f88a676903b379505b280a88cc774)), closes [#3102](https://github.com/vuejs/core/issues/3102)
+
+
+### BREAKING CHANGES
+
+* **types:** The type of `defineComponent()` when passing in a function has changed. This overload signature is rarely used in practice and the breakage will be minimal, so repurposing it to something more useful should be worth it.
+
+
+
+# [3.3.0-alpha.5](https://github.com/vuejs/core/compare/v3.3.0-alpha.4...v3.3.0-alpha.5) (2023-03-26)
+
+### Bug Fixes
+
+* **runtime-core:** support `getCurrentInstance` across mutiple builds of Vue ([8d2d5bf](https://github.com/vuejs/core/commit/8d2d5bf48a24dab44e5b03cb8fa0c5faa4b696e3))
+* **types:** ensure defineProps with generics return correct types ([c288c7b](https://github.com/vuejs/core/commit/c288c7b0bd6077d690f42153c3fc49a45454a66a))
+
+
+### Features
+
+* **dx:** improve readability of displayed types for props ([4c9bfd2](https://github.com/vuejs/core/commit/4c9bfd2b999ce472f7481aae4f9dc5bb9f76628e))
+* **types/jsx:** support jsxImportSource, avoid global JSX conflict ([#7958](https://github.com/vuejs/core/issues/7958)) ([d0b7ef3](https://github.com/vuejs/core/commit/d0b7ef3b61d5f83e35e5854b3c2c874e23463102))
+
+### Note on JSX Types Change
+
+* In the next minor (3.4), Vue no longer registers the global `JSX` namespace by default. This is necessary to avoid global namespace collision with React so that TSX of both libs can co-exist in the same project. This should not affect SFC-only users with latest version of Volar.
+
+  For TSX users, it is suggested to set [jsxImportSource](https://www.typescriptlang.org/tsconfig#jsxImportSource) to `'vue'` in `tsconfig.json` after upgrading to 3.3, or opt-in per file with `/* @jsxImportSource vue */`. This will allow you to opt-in to the new behavior now and upgrade seamlessly when 3.4 releases.
+
+  If there is code that depends on the presence of the global `JSX` namespace,  you can retain the exact pre-3.4 global behavior by explicitly referencing `vue/jsx`, which registers the global `JSX` namespace.
+
+  Note that the planned change in 3.4 is a type-only breaking change in a minor release, which adheres to our [release policy](https://vuejs.org/about/releases.html#semantic-versioning-edge-cases).
+
+# [3.3.0-alpha.4](https://github.com/vuejs/core/compare/v3.3.0-alpha.3...v3.3.0-alpha.4) (2023-02-06)
+
+
+### Bug Fixes
+
+* **build:** fix const enum w/ number values ([92bb189](https://github.com/vuejs/core/commit/92bb189ca7ecae221ebf5411da87c715780d2de3))
+
+
+
+# [3.3.0-alpha.3](https://github.com/vuejs/core/compare/v3.3.0-alpha.2...v3.3.0-alpha.3) (2023-02-06)
+
+
+### Bug Fixes
+
+* **build:** avoid const enum conflicts ([d1181ad](https://github.com/vuejs/core/commit/d1181ad692861c140e687372efbc67a1d65d642a))
+
+
+
+# [3.3.0-alpha.2](https://github.com/vuejs/core/compare/v3.3.0-alpha.1...v3.3.0-alpha.2) (2023-02-05)
+
+
+### Bug Fixes
+
+* **build:** fix dev flag replacement in esm-bundler builds ([5851eaa](https://github.com/vuejs/core/commit/5851eaa9339364d41860a277a99f2352de2a3834))
+
+
+
+# [3.3.0-alpha.1](https://github.com/vuejs/core/compare/v3.2.47...v3.3.0-alpha.1) (2023-02-05)
+
+
+### Bug Fixes
+
+* **build:** ensure BaseTransition functions can be tree-shaken ([3a6f5eb](https://github.com/vuejs/core/commit/3a6f5eb0f7d60dc87d17a69c66e88ae5688b11a5))
diff --git a/changelogs/CHANGELOG-3.4.md b/changelogs/CHANGELOG-3.4.md
new file mode 100644
index 000000000..6c97e4829
--- /dev/null
+++ b/changelogs/CHANGELOG-3.4.md
@@ -0,0 +1,1021 @@
+## [3.4.38](https://github.com/vuejs/core/compare/v3.4.37...v3.4.38) (2024-08-15)
+
+
+### Bug Fixes
+
+* **build:** revert entities to 4.5 to avoid runtime resolution errors ([f349af7](https://github.com/vuejs/core/commit/f349af7b65b9f8605d8b7bafcc06c25ab1f2daf0)), closes [#11603](https://github.com/vuejs/core/issues/11603)
+* **compiler-core:** use ast-based check for function expressions when possible ([236cac3](https://github.com/vuejs/core/commit/236cac3ff285890b8468dc827c463d87a91e516f)), closes [#11615](https://github.com/vuejs/core/issues/11615)
+* **compiler-sfc:** handle keyof operator with index object ([#11581](https://github.com/vuejs/core/issues/11581)) ([74d26db](https://github.com/vuejs/core/commit/74d26dbbe3cf2f70d1b772284eec6743ea946f6d))
+* **types:** add fallback stub for DOM types when DOM lib is absent ([#11598](https://github.com/vuejs/core/issues/11598)) ([4db0085](https://github.com/vuejs/core/commit/4db0085de316e1b773f474597915f9071d6ae6c6))
+
+
+
+## [3.4.37](https://github.com/vuejs/core/compare/v3.4.36...v3.4.37) (2024-08-08)
+
+
+### Bug Fixes
+
+* **compiler-core:** use `isProp.arg.loc` instead of `isProp.loc` ([#11547](https://github.com/vuejs/core/issues/11547)) ([236fb7a](https://github.com/vuejs/core/commit/236fb7abebe567b73826a3ddc2120f3273377ba0))
+* **custom-element:** fix custom-element double render on immediate prop change ([978ff3c](https://github.com/vuejs/core/commit/978ff3c1dbff9c93ec284c1804d3c77331ea33f8)), closes [#9885](https://github.com/vuejs/core/issues/9885) [#11335](https://github.com/vuejs/core/issues/11335)
+* **defineModel:** detect changes respect custom getter and setter ([#11543](https://github.com/vuejs/core/issues/11543)) ([e042888](https://github.com/vuejs/core/commit/e0428884b57ac834274045bd33841263aeae259e)), closes [#11541](https://github.com/vuejs/core/issues/11541) [#11526](https://github.com/vuejs/core/issues/11526) [#11527](https://github.com/vuejs/core/issues/11527)
+* **keep-alive:** avoid cache suspense comment root ([#11479](https://github.com/vuejs/core/issues/11479)) ([a917c05](https://github.com/vuejs/core/commit/a917c0539cdc55c0188ca91f70b6ff79fee13ed9))
+* **keep-alive:** fix render error in cached is undefined ([#11496](https://github.com/vuejs/core/issues/11496)) ([81351dc](https://github.com/vuejs/core/commit/81351dc7fbdabcfa0f545f7d924c31a3c367e496)), closes [#11427](https://github.com/vuejs/core/issues/11427) [#11431](https://github.com/vuejs/core/issues/11431)
+* Revert "fix(types/ref): allow getter and setter types to be unrelated ([#11442](https://github.com/vuejs/core/issues/11442))" ([b1abac0](https://github.com/vuejs/core/commit/b1abac06cdb198bd72f8e614b1f68b92e1c78339))
+* Revert "fix(types/ref): correct type inference for nested refs ([#11536](https://github.com/vuejs/core/issues/11536))" ([3a56315](https://github.com/vuejs/core/commit/3a56315f94bc0e11cfbb288b65482ea8fc3a39b4))
+* **runtime-core:** fix warning for missing event handler ([#11489](https://github.com/vuejs/core/issues/11489)) ([e359ff0](https://github.com/vuejs/core/commit/e359ff0046286aee03fe31656c023677be457e07)), closes [#4803](https://github.com/vuejs/core/issues/4803) [#8268](https://github.com/vuejs/core/issues/8268)
+* **runtime-core:** prioritize using the provides from currentApp in nested createApp ([#11502](https://github.com/vuejs/core/issues/11502)) ([7e75de0](https://github.com/vuejs/core/commit/7e75de002f08076a02c9361a58fa1d0af1772964)), closes [#11488](https://github.com/vuejs/core/issues/11488)
+   * Note: this change will break `inject` calls inside Pinia stores that expects to be able to inject provided values from the component using the store. This is expected because the usage is relying on previously incorrect behavior.
+* **runtime-dom:** apply css vars before mount ([#11538](https://github.com/vuejs/core/issues/11538)) ([fdc2a31](https://github.com/vuejs/core/commit/fdc2a31dbd4196d6432be16767a1bfdab1240d49)), closes [#11533](https://github.com/vuejs/core/issues/11533)
+* **ssr:** ensure content is valid when rendering normal slot ([#11491](https://github.com/vuejs/core/issues/11491)) ([6c90324](https://github.com/vuejs/core/commit/6c903248703e2413c6197b9ad4d535f31c8eac39)), closes [#11326](https://github.com/vuejs/core/issues/11326)
+* **types/ref:** correct type inference for nested refs ([#11536](https://github.com/vuejs/core/issues/11536)) ([536f623](https://github.com/vuejs/core/commit/536f62332c455ba82ef2979ba634b831f91928ba)), closes [#11532](https://github.com/vuejs/core/issues/11532) [#11537](https://github.com/vuejs/core/issues/11537)
+* **types:** allow `DirectiveArguments` third parameter to accept undefined ([#11540](https://github.com/vuejs/core/issues/11540)) ([1058ce8](https://github.com/vuejs/core/commit/1058ce8e747ce606e5e86fca5a2acce3c12a0846))
+
+
+
+## [3.4.36](https://github.com/vuejs/core/compare/v3.4.35...v3.4.36) (2024-08-06)
+
+### Bug Fixes
+
+* **compiler-core:** fix expression transform for try...catch block params ([077a1ae](https://github.com/vuejs/core/commit/077a1aeb3c222b729a7e190f46864656ecc65325)), closes [#11465](https://github.com/vuejs/core/issues/11465) [#11467](https://github.com/vuejs/core/issues/11467)
+* **compiler-core:** properly handle for loop variable declarations in expression transforms ([67bb820](https://github.com/vuejs/core/commit/67bb820904d53480fa37536fc3cb4109a4c6d3e2)), ref [#11467](https://github.com/vuejs/core/issues/11467)
+* **compiler-ssr:** don't render v-if comments in TransitionGroup + static tag ([#11515](https://github.com/vuejs/core/issues/11515)) ([275354c](https://github.com/vuejs/core/commit/275354caba295a6fb50695b70e97888a33c504e0)), closes [#11514](https://github.com/vuejs/core/issues/11514)
+* **hydration:** force hydrate custom element dynamic props ([7d473b7](https://github.com/vuejs/core/commit/7d473b7721b423050dba62823b16f3d39e640567)), closes [#7203](https://github.com/vuejs/core/issues/7203) [#8038](https://github.com/vuejs/core/issues/8038)
+* **ssr:** respect textContent/innerHTML from getSSRProps in optimized SSR output ([79602f9](https://github.com/vuejs/core/commit/79602f9ecd9559954f844774a90286305b13e056)), closes [#8112](https://github.com/vuejs/core/issues/8112)
+* **types/withDefaults:** ensure default values of type `any` do not include `undefined` ([#11490](https://github.com/vuejs/core/issues/11490)) ([4592b63](https://github.com/vuejs/core/commit/4592b63c6a8a3d69bfe4ac1f9458b4a86a9676a4))
+
+
+
+## [3.4.35](https://github.com/vuejs/core/compare/v3.4.34...v3.4.35) (2024-07-31)
+
+
+### Bug Fixes
+
+* **teleport/ssr:** fix Teleport hydration regression due to targetStart anchor addition ([7b18cdb](https://github.com/vuejs/core/commit/7b18cdb0b53a94007ca6a3675bf41b5d3153fec6))
+* **teleport/ssr:** ensure targetAnchor and targetStart not null during hydration ([#11456](https://github.com/vuejs/core/issues/11456)) ([12667da](https://github.com/vuejs/core/commit/12667da4879f980dcf2c50e36f3642d085a87d71)), closes [#11400](https://github.com/vuejs/core/issues/11400)
+* **types/ref:** allow getter and setter types to be unrelated ([#11442](https://github.com/vuejs/core/issues/11442)) ([e0b2975](https://github.com/vuejs/core/commit/e0b2975ef65ae6a0be0aa0a0df43fb887c665251))
+
+
+### Performance Improvements
+
+* **runtime-core:** improve efficiency of normalizePropsOptions ([#11409](https://github.com/vuejs/core/issues/11409)) ([5680142](https://github.com/vuejs/core/commit/5680142e68096c42e66da9f4c6220d040d7c56ba)), closes [#9739](https://github.com/vuejs/core/issues/9739)
+
+
+
+## [3.4.34](https://github.com/vuejs/core/compare/v3.4.33...v3.4.34) (2024-07-24)
+
+* **defineModel:** correct update with multiple changes in same tick ([#11430](https://github.com/vuejs/core/issues/11430)) ([a18f1ec](https://github.com/vuejs/core/commit/a18f1ecf05842337f1eb39a6871adb8cb4024093)), closes [#11429](https://github.com/vuejs/core/issues/11429)
+
+
+
+## [3.4.33](https://github.com/vuejs/core/compare/v3.4.32...v3.4.33) (2024-07-19)
+
+
+### Bug Fixes
+
+* **runtime-dom:** handle undefined values in v-html ([#11403](https://github.com/vuejs/core/issues/11403)) ([5df67e3](https://github.com/vuejs/core/commit/5df67e36756639ea7b923d1b139d6cb14450123b))
+
+
+
+## [3.4.32](https://github.com/vuejs/core/compare/v3.4.31...v3.4.32) (2024-07-17)
+
+
+### Bug Fixes
+
+* **build:** use consistent minify options from previous terser config ([789675f](https://github.com/vuejs/core/commit/789675f65d2b72cf979ba6a29bd323f716154a4b))
+* **compiler-sfc:** correctly resolve type annotation for declared function ([#11279](https://github.com/vuejs/core/issues/11279)) ([b287aee](https://github.com/vuejs/core/commit/b287aeec3ea85f20e4b1fc3d907c901bdc2a0176)), closes [#11266](https://github.com/vuejs/core/issues/11266)
+* **defineModel:** force local update when setter results in same emitted value ([de174e1](https://github.com/vuejs/core/commit/de174e1aa756508c7542605a448e55a373afb1ed)), closes [#10279](https://github.com/vuejs/core/issues/10279) [#10301](https://github.com/vuejs/core/issues/10301)
+* **hmr:** hmr reload should work with async component ([#11248](https://github.com/vuejs/core/issues/11248)) ([c8b9794](https://github.com/vuejs/core/commit/c8b97945759e869c997d60c3350d2451c5ff7887))
+* **hydration:** fix tracking of reactive style objects in production ([c10e40a](https://github.com/vuejs/core/commit/c10e40a217b89ab7e0f7f3515242d4246ecffbdd)), closes [#11372](https://github.com/vuejs/core/issues/11372)
+* **hydration:** handle consectuvie text nodes during hydration ([f44c3b3](https://github.com/vuejs/core/commit/f44c3b37d446d5f8e34539029dae0d806b25bb47)), closes [#7285](https://github.com/vuejs/core/issues/7285) [#7301](https://github.com/vuejs/core/issues/7301)
+* **reactivity:** ensure `unref` correctly resolves type for `ShallowRef` ([#11360](https://github.com/vuejs/core/issues/11360)) ([a509e30](https://github.com/vuejs/core/commit/a509e30f059fcdd158f39fdf34670b1019eaf2d1)), closes [#11356](https://github.com/vuejs/core/issues/11356)
+* **reactivity:** shallowReactive map "unwraps" the nested refs ([#8503](https://github.com/vuejs/core/issues/8503)) ([50ddafe](https://github.com/vuejs/core/commit/50ddafe91b9195cf94124466239f82c9794699fb)), closes [#8501](https://github.com/vuejs/core/issues/8501) [#11249](https://github.com/vuejs/core/issues/11249)
+* **runtime-core:** avoid recursive warning ([3ee7b4c](https://github.com/vuejs/core/commit/3ee7b4c7b1374c5bdc50a579b49f6bc15022b085)), closes [#8074](https://github.com/vuejs/core/issues/8074)
+* **runtime-core:** bail manually rendered compiler slot fragments in all cases ([3d34f40](https://github.com/vuejs/core/commit/3d34f406ac7497dafd2f4e62ab23579b78a0e08a)), closes [#10870](https://github.com/vuejs/core/issues/10870)
+* **runtime-core:** do not emit when defineModel ref is set with same value ([#11162](https://github.com/vuejs/core/issues/11162)) ([f1bb0ae](https://github.com/vuejs/core/commit/f1bb0aef084b5cdd4d49aecfed01ec106d9b6897)), closes [#11125](https://github.com/vuejs/core/issues/11125)
+* **runtime-core:** errors during component patch should be caught by error handlers ([ee0248a](https://github.com/vuejs/core/commit/ee0248accff589a94688e177e5e3af10c18288cb))
+* **runtime-core:** force diff slot fallback content and provided content ([d76dd9c](https://github.com/vuejs/core/commit/d76dd9c58de24b273bc55af3a8ed81ba693e9683)), closes [#7256](https://github.com/vuejs/core/issues/7256) [#9200](https://github.com/vuejs/core/issues/9200) [#9308](https://github.com/vuejs/core/issues/9308) [#7266](https://github.com/vuejs/core/issues/7266) [#9213](https://github.com/vuejs/core/issues/9213)
+* **runtime-core:** more edge case fix for manually rendered compiled slot ([685e3f3](https://github.com/vuejs/core/commit/685e3f381c024b9f4023e60fe0545dc60d90d984)), closes [#11336](https://github.com/vuejs/core/issues/11336)
+* **runtime-core:** use separate prop caches for components and mixins ([#11350](https://github.com/vuejs/core/issues/11350)) ([b0aa234](https://github.com/vuejs/core/commit/b0aa234e5e7a611c018de68bc31e0cf55518d5ce)), closes [#7998](https://github.com/vuejs/core/issues/7998)
+* **runtime-dom:** properly handle innerHTML unmount into new children ([#11159](https://github.com/vuejs/core/issues/11159)) ([3e9e32e](https://github.com/vuejs/core/commit/3e9e32ee0a6d0fbf67e9098a66ff0a1ea6647806)), closes [#9135](https://github.com/vuejs/core/issues/9135)
+* **teleport:** skip teleported nodes when locating patch anchor ([8655ced](https://github.com/vuejs/core/commit/8655ced480ea0fe453ff5fe445cecf97b91ec260)), closes [#9071](https://github.com/vuejs/core/issues/9071) [#9134](https://github.com/vuejs/core/issues/9134) [#9313](https://github.com/vuejs/core/issues/9313) [#9313](https://github.com/vuejs/core/issues/9313)
+* **v-model:** component v-model modifiers trim and number when cases don't match ([#9609](https://github.com/vuejs/core/issues/9609)) ([7fb6eb8](https://github.com/vuejs/core/commit/7fb6eb882b64bf99a99d00606e54b0e050674206)), closes [#4848](https://github.com/vuejs/core/issues/4848) [#4850](https://github.com/vuejs/core/issues/4850) [#4850](https://github.com/vuejs/core/issues/4850)
+* **v-once:** properly unmount v-once cached trees ([d343a0d](https://github.com/vuejs/core/commit/d343a0dc01663f91db42b4ddb693e6fffcb45873)), closes [#5154](https://github.com/vuejs/core/issues/5154) [#8809](https://github.com/vuejs/core/issues/8809)
+
+
+### Performance Improvements
+
+* **server-renderer:** avoid unnecessary checks in `createBuffer` ([#11364](https://github.com/vuejs/core/issues/11364)) ([fc205bf](https://github.com/vuejs/core/commit/fc205bf4decde5ce0f4a61394ffa3914b502c287))
+* **server-renderer:** optimize `unrollBuffer` by avoiding promises ([#11340](https://github.com/vuejs/core/issues/11340)) ([05779a7](https://github.com/vuejs/core/commit/05779a70bd0b567ae458a07636d229bd07c44c4e))
+
+
+
+## [3.4.31](https://github.com/vuejs/core/compare/v3.4.30...v3.4.31) (2024-06-28)
+
+
+### Bug Fixes
+
+* **compiler-core:** handle inline comments with undefined bindings ([#11217](https://github.com/vuejs/core/issues/11217)) ([746352a](https://github.com/vuejs/core/commit/746352a14d62e9d3d9a38c359d2c54d418c1e0ac)), closes [#11216](https://github.com/vuejs/core/issues/11216)
+* **shared:** unwrap refs in toDisplayString ([#7306](https://github.com/vuejs/core/issues/7306)) ([0126cff](https://github.com/vuejs/core/commit/0126cfff9d93bcec70e5745519f6378e3cd3f39c)), closes [#5578](https://github.com/vuejs/core/issues/5578) [#5593](https://github.com/vuejs/core/issues/5593) [#11199](https://github.com/vuejs/core/issues/11199) [#11201](https://github.com/vuejs/core/issues/11201)
+
+
+### Reverts
+
+* Revert "fix(reactivity): avoid infinite loop when render access a side effect computed ([#11135](https://github.com/vuejs/core/issues/11135))" ([e0df985](https://github.com/vuejs/core/commit/e0df985f0317fb65c5b461bf224375c7763f0269))
+* Revert "fix(reactivity): fix side effect computed dirty level (#11183)" ([6c303ea](https://github.com/vuejs/core/commit/6c303eacd14b7b0de0accc228f6abeb43d706f63)), closes [#11183](https://github.com/vuejs/core/issues/11183)
+
+
+
+## [3.4.30](https://github.com/vuejs/core/compare/v3.4.29...v3.4.30) (2024-06-22)
+
+**Note: this release contains a fix (#11150) that requires `vue-tsc` to also be updated in sync to ^2.0.22. See #11196**
+
+### Bug Fixes
+
+* **compiler-core:** should not remove slot node with `v-else` ([#11150](https://github.com/vuejs/core/issues/11150)) ([e102670](https://github.com/vuejs/core/commit/e102670bde00417c3a5b0262c855b297c0e4169e))
+* **hydration:** fix css vars hydration mismatch false positive on attr-fallthrough ([#11190](https://github.com/vuejs/core/issues/11190)) ([7ad67ce](https://github.com/vuejs/core/commit/7ad67ced26e5f53a47cb42f4834496e4958cb53b)), closes [#11188](https://github.com/vuejs/core/issues/11188)
+* **hydration:** skip prop mismatch check for directives that mutate DOM in created ([3169c91](https://github.com/vuejs/core/commit/3169c914939d02a013b2938aff30dac8525923f8)), closes [#11189](https://github.com/vuejs/core/issues/11189)
+* **reactivity:** fix side effect computed dirty level ([#11183](https://github.com/vuejs/core/issues/11183)) ([3bd79e3](https://github.com/vuejs/core/commit/3bd79e3e5ed960fc42cbf77bc61a97d2c03557c0)), closes [#11181](https://github.com/vuejs/core/issues/11181) [#11169](https://github.com/vuejs/core/issues/11169)
+* **runtime-core:** ensure unmount dynamic components in optimized mode ([#11171](https://github.com/vuejs/core/issues/11171)) ([220fe24](https://github.com/vuejs/core/commit/220fe247484209e62c7f4991902c5335e29c5007)), closes [#11168](https://github.com/vuejs/core/issues/11168)
+* **runtime-core:** update devtool __vnode on patch, avoid memory leak during dev ([a959781](https://github.com/vuejs/core/commit/a959781dd6f609dcb6f16dd7fa47d3b16895e5ca)), closes [#11192](https://github.com/vuejs/core/issues/11192)
+* **runtime-dom:** ensure only symbols are explicitly stringified during attribute patching ([#11182](https://github.com/vuejs/core/issues/11182)) ([a2e35d6](https://github.com/vuejs/core/commit/a2e35d682db15a592f4270bb0cde70a0e7bdc4a6)), closes [#11177](https://github.com/vuejs/core/issues/11177)
+* **runtime-dom:** prevent setting state as attribute for custom elements ([#11165](https://github.com/vuejs/core/issues/11165)) ([8ae4c29](https://github.com/vuejs/core/commit/8ae4c293adcec28f18114cb6016230a86787e6a9)), closes [#11163](https://github.com/vuejs/core/issues/11163)
+
+
+### Performance Improvements
+
+* **reactivity:** cache tracking value ([#11145](https://github.com/vuejs/core/issues/11145)) ([7936dae](https://github.com/vuejs/core/commit/7936daebceab2ae9461c3b8f256e51020fb7d3ed))
+
+
+
+## [3.4.29](https://github.com/vuejs/core/compare/v3.4.28...v3.4.29) (2024-06-14)
+
+
+### Bug Fixes
+
+* **build:** fix accidental inclusion of runtime-core in server-renderer cjs build ([11cc12b](https://github.com/vuejs/core/commit/11cc12b915edfe0e4d3175e57464f73bc2c1cb04)), closes [#11137](https://github.com/vuejs/core/issues/11137)
+* **compiler-sfc:** fix missing scope for extends error message ([4ec387b](https://github.com/vuejs/core/commit/4ec387b100985b008cdcc4cd883a5b6328c05766))
+* **compiler-sfc:** fix parsing of mts, d.mts, and mtsx files ([a476692](https://github.com/vuejs/core/commit/a476692ed2d7308f2742d8ff3554cf97a392b0b7))
+* **compiler-sfc:** support [@vue-ignore](https://github.com/vue-ignore) comment on more type sources ([a23e99b](https://github.com/vuejs/core/commit/a23e99bedf1d65841d162951f10ce35b907a5680))
+* **custom-element:** support same direct setup function signature in defineCustomElement ([7c8b126](https://github.com/vuejs/core/commit/7c8b12620aad4969b8dc4944d4fc486d16c3033c)), closes [#11116](https://github.com/vuejs/core/issues/11116)
+* **reactivity:** avoid infinite loop when render access a side effect computed ([#11135](https://github.com/vuejs/core/issues/11135)) ([8296e19](https://github.com/vuejs/core/commit/8296e19855e369a7826f5ea26540a6da01dc7093)), closes [#11121](https://github.com/vuejs/core/issues/11121)
+
+
+
+## [3.4.28](https://github.com/vuejs/core/compare/v3.4.27...v3.4.28) (2024-06-14)
+
+
+### Bug Fixes
+
+* **compat:** correctly transform non-identifier expressions in legacy filter syntax ([#10896](https://github.com/vuejs/core/issues/10896)) ([07b3c4b](https://github.com/vuejs/core/commit/07b3c4b7860009e19446f3d78571556c5737d82a)), closes [#10852](https://github.com/vuejs/core/issues/10852)
+* **compat:** ensure proper handling of render fuction from SFC using Vue.extend ([#7781](https://github.com/vuejs/core/issues/7781)) ([c73847f](https://github.com/vuejs/core/commit/c73847f2becc20f03cb9c68748eea92455e688ee)), closes [#7766](https://github.com/vuejs/core/issues/7766)
+* **compat:** only warn ATTR_FALSE_VALUE when enabled ([04729ba](https://github.com/vuejs/core/commit/04729ba2163d840f0ca7866bc964696eb5557804)), closes [#11126](https://github.com/vuejs/core/issues/11126)
+* **compile-sfc:** register props destructure rest id as setup bindings ([#10888](https://github.com/vuejs/core/issues/10888)) ([b2b5f57](https://github.com/vuejs/core/commit/b2b5f57c2c945edd0eebc1b545ec1b7568e51484)), closes [#10885](https://github.com/vuejs/core/issues/10885)
+* **compile-sfc:** Support project reference with folder,  ([#10908](https://github.com/vuejs/core/issues/10908)) ([bdeac37](https://github.com/vuejs/core/commit/bdeac377c7b85888193b49ac187e927636cc40bc)), closes [#10907](https://github.com/vuejs/core/issues/10907)
+* **compiler-core:** allow unicode to appear in simple identifiers ([#6765](https://github.com/vuejs/core/issues/6765)) ([3ea9644](https://github.com/vuejs/core/commit/3ea964473d3ac0ba3e7b0b2c22d71f23d0f69123)), closes [#6367](https://github.com/vuejs/core/issues/6367)
+* **compiler-core:** change v-for key type to match Object.keys ([#10963](https://github.com/vuejs/core/issues/10963)) ([9fead52](https://github.com/vuejs/core/commit/9fead5234320848f8be82275c6b5dd0a290f2cca)), closes [#8819](https://github.com/vuejs/core/issues/8819)
+* **compiler-core:** emit TS-compatible function declaration when requested ([#9363](https://github.com/vuejs/core/issues/9363)) ([5d25850](https://github.com/vuejs/core/commit/5d258502a0faffc8a451b8701f13a31b2566d068))
+* **compiler-core:** fix :key shorthand on v-for ([#10942](https://github.com/vuejs/core/issues/10942)) ([29425df](https://github.com/vuejs/core/commit/29425df1acb9e520c6ae894d06bcff73fde90edd)), closes [#10882](https://github.com/vuejs/core/issues/10882) [#10939](https://github.com/vuejs/core/issues/10939)
+* **compiler-core:** make `ForIteratorExpression`'s `returns` property optional ([#11011](https://github.com/vuejs/core/issues/11011)) ([5b8c1af](https://github.com/vuejs/core/commit/5b8c1afb74e39045fcb53a011420d26e3f67eab4))
+* **compiler-core:** should set `<math>` tag as block to retain MathML namespace after patching ([#10891](https://github.com/vuejs/core/issues/10891)) ([87c5443](https://github.com/vuejs/core/commit/87c54430448005294c41803f07f517fef848f917))
+* **compiler-core:** v-for expression missing source with spaces should emit error ([#5821](https://github.com/vuejs/core/issues/5821)) ([b9ca202](https://github.com/vuejs/core/commit/b9ca202f477be595477e182972ee9bae3f2b9f74)), closes [#5819](https://github.com/vuejs/core/issues/5819)
+* **compiler-sfc:** improve type resolving for the keyof operator ([#10921](https://github.com/vuejs/core/issues/10921)) ([293cf4e](https://github.com/vuejs/core/commit/293cf4e131b6d4606e1de2cd7ea87814e2544952)), closes [#10920](https://github.com/vuejs/core/issues/10920) [#11002](https://github.com/vuejs/core/issues/11002)
+* **compiler-sfc:** support as keyword with template literal types ([#11100](https://github.com/vuejs/core/issues/11100)) ([2594b1d](https://github.com/vuejs/core/commit/2594b1df57f672ac6621ac2880645e975fea581c)), closes [#10962](https://github.com/vuejs/core/issues/10962)
+* **compiler-sfc:** support type resolve for keyof for intersection & union types ([#11132](https://github.com/vuejs/core/issues/11132)) ([495263a](https://github.com/vuejs/core/commit/495263a9cb356861e58a4364f2570608265486b5)), closes [#11129](https://github.com/vuejs/core/issues/11129)
+* **compiler-sfc:** throw error when import macro as alias ([#11041](https://github.com/vuejs/core/issues/11041)) ([34a97ed](https://github.com/vuejs/core/commit/34a97edd2c8273c213599c44770accdb0846da8e))
+* correct the type of `<details>`'s `onToggle` event handler ([#10938](https://github.com/vuejs/core/issues/10938)) ([fd18ce7](https://github.com/vuejs/core/commit/fd18ce70b1a260a2485c9cd7faa30193da4b79f5)), closes [#10928](https://github.com/vuejs/core/issues/10928)
+* **custom-element:** disconnect MutationObserver in nextTick in case that custom elements are moved ([#10613](https://github.com/vuejs/core/issues/10613)) ([bbb5be2](https://github.com/vuejs/core/commit/bbb5be299b500a00e60c757118c846c3b5ddd8e0)), closes [#10610](https://github.com/vuejs/core/issues/10610)
+* **custom-elements:** compatibility of createElement in older versions of Chrome ([#9615](https://github.com/vuejs/core/issues/9615)) ([a88295d](https://github.com/vuejs/core/commit/a88295dc076ee867939d8b0ee2225e63c5ffb0ca)), closes [#9614](https://github.com/vuejs/core/issues/9614)
+* **hmr:** avoid infinite recursion when reloading hmr components ([#6936](https://github.com/vuejs/core/issues/6936)) ([36bd9b0](https://github.com/vuejs/core/commit/36bd9b0a1fb83e61731fb80d66e265dccbedcfa8)), closes [#6930](https://github.com/vuejs/core/issues/6930)
+* **hydration:** log hydration error even when using async components ([#9403](https://github.com/vuejs/core/issues/9403)) ([5afc76c](https://github.com/vuejs/core/commit/5afc76c229f9ad30eef07f34c7b65e8fe427e637)), closes [#9369](https://github.com/vuejs/core/issues/9369)
+* **KeepAlive:** properly cache nested Suspense subtree ([#10912](https://github.com/vuejs/core/issues/10912)) ([07764fe](https://github.com/vuejs/core/commit/07764fe330692fadf0fc9fb9e92cb5b111df33be))
+* **npm:** explicitly add `@vue/reactivity` as dependency of `@vue/runtime-dom` ([#10468](https://github.com/vuejs/core/issues/10468)) ([ec424f6](https://github.com/vuejs/core/commit/ec424f6cd96b7e6ba74fc244c484c00fa5590aac))
+* **reactivity:** pass oldValue in debug info when triggering refs ([#8210](https://github.com/vuejs/core/issues/8210)) ([3b0a56a](https://github.com/vuejs/core/commit/3b0a56a9c4d162ec3bd725a4f2dfd776b045e727)), closes [vuejs/pinia#2061](https://github.com/vuejs/pinia/issues/2061)
+* **runtime-core:** avoid traversing static children for vnodes w/ PatchFlags.BAIL ([#11115](https://github.com/vuejs/core/issues/11115)) ([b557d3f](https://github.com/vuejs/core/commit/b557d3fb8ae1e4e926c4ad0fbb2fa7abe50fd661)), closes [#10547](https://github.com/vuejs/core/issues/10547)
+* **runtime-core:** do not fire mount/activated hooks if unmounted before mounted ([#9370](https://github.com/vuejs/core/issues/9370)) ([aa156ed](https://github.com/vuejs/core/commit/aa156ed5c4dc0d33ff37e201a7e89d5e0e29160e)), closes [#8898](https://github.com/vuejs/core/issues/8898) [#9264](https://github.com/vuejs/core/issues/9264) [#9617](https://github.com/vuejs/core/issues/9617)
+* **runtime-core:** ensure suspense creates dep component's render effect with correct optimized flag ([#7689](https://github.com/vuejs/core/issues/7689)) ([c521f95](https://github.com/vuejs/core/commit/c521f956e1697cda36a7f1b913599e5e2004f7ba)), closes [#7688](https://github.com/vuejs/core/issues/7688)
+* **runtime-core:** fix missed updates when passing text vnode to `<component :is>` ([#8304](https://github.com/vuejs/core/issues/8304)) ([b310ec3](https://github.com/vuejs/core/commit/b310ec389d9738247e5b0f01711186216eb49955)), closes [#8298](https://github.com/vuejs/core/issues/8298)
+* **runtime-core:** fix stale v-memo after v-if toggle ([#6606](https://github.com/vuejs/core/issues/6606)) ([edf2638](https://github.com/vuejs/core/commit/edf263847eddc910f4d2de68287d84b8c66c3860)), closes [#6593](https://github.com/vuejs/core/issues/6593)
+* **runtime-core:** fix Transition for components with root-level v-if  ([#7678](https://github.com/vuejs/core/issues/7678)) ([ef2e737](https://github.com/vuejs/core/commit/ef2e737577de42ea38771403f8a4dee8c892daa5)), closes [#7649](https://github.com/vuejs/core/issues/7649)
+* **runtime-dom:** also set attribute for form element state ([537a571](https://github.com/vuejs/core/commit/537a571f8cf09dfe0a020e9e8891ecdd351fc3e4)), closes [#6007](https://github.com/vuejs/core/issues/6007) [#6012](https://github.com/vuejs/core/issues/6012)
+* **runtime-dom:** support Symbol for input value bindings  ([#10608](https://github.com/vuejs/core/issues/10608)) ([188f3ae](https://github.com/vuejs/core/commit/188f3ae533fd340603068a516a8fecc5d57426c5)), closes [#10597](https://github.com/vuejs/core/issues/10597)
+* **shared:** ensure invokeArrayFns handles undefined arguments ([#10869](https://github.com/vuejs/core/issues/10869)) ([9b40d0f](https://github.com/vuejs/core/commit/9b40d0f25da868a83b0d6bf99dbbdb3ca68bb700)), closes [#10863](https://github.com/vuejs/core/issues/10863)
+* **ssr:** directive binding.instance should respect exposed during ssr ([df686ab](https://github.com/vuejs/core/commit/df686abb4f0ac9d898e4fd93751e860f8cbbdbea)), closes [#7499](https://github.com/vuejs/core/issues/7499) [#7502](https://github.com/vuejs/core/issues/7502)
+* **ssr:** fix hydration for node with empty text node ([#7216](https://github.com/vuejs/core/issues/7216)) ([d1011c0](https://github.com/vuejs/core/commit/d1011c07a957d858cb37725b13bc8e4d7a395490))
+* **ssr:** fix the bug that multi slot scope id does not work on component ([#6100](https://github.com/vuejs/core/issues/6100)) ([4c74302](https://github.com/vuejs/core/commit/4c74302aae64c118752db7fc2a2c229a11ebaead)), closes [#6093](https://github.com/vuejs/core/issues/6093)
+* **teleport:** do not throw target warning when teleport is disabled ([#9818](https://github.com/vuejs/core/issues/9818)) ([15ee43f](https://github.com/vuejs/core/commit/15ee43f66ad2485ac212b02b444345d867b3c060))
+* **transition:** ensure Transition enterHooks are updated after clone ([#11066](https://github.com/vuejs/core/issues/11066)) ([671cf29](https://github.com/vuejs/core/commit/671cf297a550d15b19fa3fecce1b30e26cad8154)), closes [#11061](https://github.com/vuejs/core/issues/11061)
+* **types/apiWatch:** correct type inference for reactive array ([#11036](https://github.com/vuejs/core/issues/11036)) ([aae2d78](https://github.com/vuejs/core/commit/aae2d78875daa476280a45e71c2f38292964efae)), closes [#9416](https://github.com/vuejs/core/issues/9416)
+* **types:** improve `app.provide` type checking ([#10603](https://github.com/vuejs/core/issues/10603)) ([612bbf0](https://github.com/vuejs/core/commit/612bbf0507cbe39d701acc5dff11824802078063)), closes [#10602](https://github.com/vuejs/core/issues/10602)
+* **types:** support generic argument in setup context expose method ([#8507](https://github.com/vuejs/core/issues/8507)) ([635a59b](https://github.com/vuejs/core/commit/635a59b96fe6be445525c6595ca27da7ef7c1feb))
+* **v-model:** fix the lazy modifier is not reset by other modifications ([#8547](https://github.com/vuejs/core/issues/8547)) ([a52a02f](https://github.com/vuejs/core/commit/a52a02f43fdf73d8aaad99c9cafed07f12ee422a)), closes [#8546](https://github.com/vuejs/core/issues/8546) [#6564](https://github.com/vuejs/core/issues/6564) [#6773](https://github.com/vuejs/core/issues/6773)
+* **watch:** support traversing symbol properties in deep watcher ([#10969](https://github.com/vuejs/core/issues/10969)) ([a3e8aaf](https://github.com/vuejs/core/commit/a3e8aafbcc82003a66caded61143eb64c4ef02cd)), closes [#402](https://github.com/vuejs/core/issues/402)
+
+
+
+## [3.4.27](https://github.com/vuejs/core/compare/v3.4.26...v3.4.27) (2024-05-06)
+
+
+### Bug Fixes
+
+* **compat:** include legacy scoped slots ([#10868](https://github.com/vuejs/core/issues/10868)) ([8366126](https://github.com/vuejs/core/commit/83661264a4ced3cb2ff6800904a86dd9e82bbfe2)), closes [#8869](https://github.com/vuejs/core/issues/8869)
+* **compiler-core:** add support for arrow aysnc function with unbracketed ([#5789](https://github.com/vuejs/core/issues/5789)) ([ca7d421](https://github.com/vuejs/core/commit/ca7d421e8775f6813f8943d32ab485e0c542f98b)), closes [#5788](https://github.com/vuejs/core/issues/5788)
+* **compiler-dom:** restrict createStaticVNode usage with option elements ([#10846](https://github.com/vuejs/core/issues/10846)) ([0e3d617](https://github.com/vuejs/core/commit/0e3d6178b02d0386d779720ae2cc4eac1d1ec990)), closes [#6568](https://github.com/vuejs/core/issues/6568) [#7434](https://github.com/vuejs/core/issues/7434)
+* **compiler-sfc:** handle keyof operator ([#10874](https://github.com/vuejs/core/issues/10874)) ([10d34a5](https://github.com/vuejs/core/commit/10d34a5624775f20437ccad074a97270ef74c3fb)), closes [#10871](https://github.com/vuejs/core/issues/10871)
+* **hydration:** handle edge case of style mismatch without style attribute ([f2c1412](https://github.com/vuejs/core/commit/f2c1412e46a8fad3e13403bfa78335c4f704f21c)), closes [#10786](https://github.com/vuejs/core/issues/10786)
+
+
+
+## [3.4.26](https://github.com/vuejs/core/compare/v3.4.25...v3.4.26) (2024-04-29)
+
+
+### Bug Fixes
+
+* **compiler-core:** fix bail constant for globals ([fefce06](https://github.com/vuejs/core/commit/fefce06b41e3b75de3d748dc6399628ec5056e78))
+* **compiler-core:** remove unnecessary constant bail check ([09b4df8](https://github.com/vuejs/core/commit/09b4df809e59ef5f4bc91acfc56dc8f82a8e243a)), closes [#10807](https://github.com/vuejs/core/issues/10807)
+* **runtime-core:** attrs should be readonly in functional components ([#10767](https://github.com/vuejs/core/issues/10767)) ([e8fd644](https://github.com/vuejs/core/commit/e8fd6446d14a6899e5e8ab1ee394d90088e01844))
+* **runtime-core:** ensure slot compiler marker writable ([#10825](https://github.com/vuejs/core/issues/10825)) ([9c2de62](https://github.com/vuejs/core/commit/9c2de6244cd44bc5fbfd82b5850c710ce725044f)), closes [#10818](https://github.com/vuejs/core/issues/10818)
+* **runtime-core:** properly handle inherit transition during clone VNode ([#10809](https://github.com/vuejs/core/issues/10809)) ([638a79f](https://github.com/vuejs/core/commit/638a79f64a7e184f2a2c65e21d764703f4bda561)), closes [#3716](https://github.com/vuejs/core/issues/3716) [#10497](https://github.com/vuejs/core/issues/10497) [#4091](https://github.com/vuejs/core/issues/4091)
+* **Transition:** re-fix [#10620](https://github.com/vuejs/core/issues/10620) ([#10832](https://github.com/vuejs/core/issues/10832)) ([accf839](https://github.com/vuejs/core/commit/accf8396ae1c9dd49759ba0546483f1d2c70c9bc)), closes [#10632](https://github.com/vuejs/core/issues/10632) [#10827](https://github.com/vuejs/core/issues/10827)
+
+
+
+## [3.4.25](https://github.com/vuejs/core/compare/v3.4.24...v3.4.25) (2024-04-24)
+
+
+### Bug Fixes
+
+* **defineModel:** align prod mode runtime type generation with defineProps ([4253a57](https://github.com/vuejs/core/commit/4253a57f1703a7f1ac701d77e0a235689203461d)), closes [#10769](https://github.com/vuejs/core/issues/10769)
+* **runtime-core:** properly get keepAlive child ([#10772](https://github.com/vuejs/core/issues/10772)) ([3724693](https://github.com/vuejs/core/commit/3724693a25c3f2dd13d70a8a1af760b03a4fb783)), closes [#10771](https://github.com/vuejs/core/issues/10771)
+* **runtime-core:** use normal object as internal prototype for attrs and slots ([064e82f](https://github.com/vuejs/core/commit/064e82f5855f30fe0b77fe9b5e4dd22700fd634d)), closes [/github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add#r141304923](https://github.com//github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add/issues/r141304923)
+
+
+
+## [3.4.24](https://github.com/vuejs/core/compare/v3.4.23...v3.4.24) (2024-04-22)
+
+
+### Bug Fixes
+
+* **compiler-core:** handle template ref bound via v-bind object on v-for ([#10706](https://github.com/vuejs/core/issues/10706)) ([da7adef](https://github.com/vuejs/core/commit/da7adefa844265eecc9c336abfc727bc05b4f16e)), closes [#10696](https://github.com/vuejs/core/issues/10696)
+* **compiler-core:** properly parse await expressions in edge cases ([b92c25f](https://github.com/vuejs/core/commit/b92c25f53dff0fc1687f57ca4033d0ac25218940)), closes [#10754](https://github.com/vuejs/core/issues/10754)
+* **compiler-sfc:** handle readonly operator and ReadonlyArray/Map/Set types ([5cef52a](https://github.com/vuejs/core/commit/5cef52a5c23ba8ba3239e6def03b8ff008d3cc72)), closes [#10726](https://github.com/vuejs/core/issues/10726)
+* **compiler-ssr:** fix hydration mismatch for conditional slot in transition ([f12c81e](https://github.com/vuejs/core/commit/f12c81efca3fcf9a7ce478af2261ad6ab9b0bfd7)), closes [#10743](https://github.com/vuejs/core/issues/10743)
+* **compiler-ssr:** fix v-html SSR for nullish values ([1ff4076](https://github.com/vuejs/core/commit/1ff407676f9495883b459779a9b0370d7588b51f)), closes [#10725](https://github.com/vuejs/core/issues/10725)
+* **deps:** update compiler ([#10760](https://github.com/vuejs/core/issues/10760)) ([15df5c1](https://github.com/vuejs/core/commit/15df5c1b261b9b471eb811fd47ab7b3cfc41cf83))
+* **runtime-core:** fix edge case of KeepAlive inside Transition with slot children ([#10719](https://github.com/vuejs/core/issues/10719)) ([e51ca61](https://github.com/vuejs/core/commit/e51ca61ca060b2772e967d169548fc2f58fce6d1)), closes [#10708](https://github.com/vuejs/core/issues/10708)
+* **runtime-core:** further fix slots _ctx check ([cde7f05](https://github.com/vuejs/core/commit/cde7f05787d16dbb93d9419ef5331adf992816fd)), closes [#10724](https://github.com/vuejs/core/issues/10724)
+* **runtime-core:** props should be readonly via direct template access ([b93f264](https://github.com/vuejs/core/commit/b93f26464785de227b88c51a88328ae80e80d804)), closes [#8216](https://github.com/vuejs/core/issues/8216) [#10736](https://github.com/vuejs/core/issues/10736)
+* **transition:** transition is breaking/flickering when enter is canceled ([#10688](https://github.com/vuejs/core/issues/10688)) ([65109a7](https://github.com/vuejs/core/commit/65109a70f187473edae8cf4df11af3c33345e6f6))
+
+
+
+## [3.4.23](https://github.com/vuejs/core/compare/v3.4.22...v3.4.23) (2024-04-16)
+
+
+### Bug Fixes
+
+* **runtime-core:** fix regression for $attrs tracking in slots ([6930e60](https://github.com/vuejs/core/commit/6930e60787e4905a50417190263ae7dd46cf5409)), closes [#10710](https://github.com/vuejs/core/issues/10710)
+* **runtime-core:** use same internal object mechanism for slots ([6df53d8](https://github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add)), closes [#10709](https://github.com/vuejs/core/issues/10709)
+
+
+
+## [3.4.22](https://github.com/vuejs/core/compare/v3.4.21...v3.4.22) (2024-04-15)
+
+
+### Bug Fixes
+
+* **compat:** fix $options mutation + adjust private API initialization ([d58d133](https://github.com/vuejs/core/commit/d58d133b1cde5085cc5ab0012d544cafd62a6ee6)), closes [#10626](https://github.com/vuejs/core/issues/10626) [#10636](https://github.com/vuejs/core/issues/10636)
+* **compile-sfc:** analyze v-bind shorthand usage in template ([#10518](https://github.com/vuejs/core/issues/10518)) ([e5919d4](https://github.com/vuejs/core/commit/e5919d4658cfe0bb18c76611dd3c3432c57f94ab)), closes [#10515](https://github.com/vuejs/core/issues/10515)
+* **compiler-core:** fix loc.source for end tags with whitespace before > ([16174da](https://github.com/vuejs/core/commit/16174da21d6c8ac0aae027dd964fc35e221ded0a)), closes [#10694](https://github.com/vuejs/core/issues/10694) [#10695](https://github.com/vuejs/core/issues/10695)
+* **compiler-core:** fix v-bind shorthand for component :is ([04af950](https://github.com/vuejs/core/commit/04af9504a720c8e6de26c04b1282cf14fa1bcee3)), closes [#10469](https://github.com/vuejs/core/issues/10469) [#10471](https://github.com/vuejs/core/issues/10471)
+* **compiler-sfc:** :is() and :where() in compound selectors ([#10522](https://github.com/vuejs/core/issues/10522)) ([660cadc](https://github.com/vuejs/core/commit/660cadc7aadb909ef33a6055c4374902a82607a4)), closes [#10511](https://github.com/vuejs/core/issues/10511)
+* **compiler-sfc:** also search for `.tsx` when type import's extension is omitted  ([#10637](https://github.com/vuejs/core/issues/10637)) ([34106bc](https://github.com/vuejs/core/commit/34106bc9c715247211273bb9c64712f04bd4879d)), closes [#10635](https://github.com/vuejs/core/issues/10635)
+* **compiler-sfc:** fix defineModel coercion for boolean + string union types ([#9603](https://github.com/vuejs/core/issues/9603)) ([0cef65c](https://github.com/vuejs/core/commit/0cef65cee411356e721bbc90d731fc52fc8fce94)), closes [#9587](https://github.com/vuejs/core/issues/9587) [#10676](https://github.com/vuejs/core/issues/10676)
+* **compiler-sfc:** fix universal selector scope ([#10551](https://github.com/vuejs/core/issues/10551)) ([54a6afa](https://github.com/vuejs/core/commit/54a6afa75a546078e901ce0882da53b97420fe94)), closes [#10548](https://github.com/vuejs/core/issues/10548)
+* **compiler-sfc:** use options module name if options provide runtimeModuleName options ([#10457](https://github.com/vuejs/core/issues/10457)) ([e76d743](https://github.com/vuejs/core/commit/e76d7430aa7470342f3fe263145a0fa92f5898ca)), closes [#10454](https://github.com/vuejs/core/issues/10454)
+* **custom-element:** avoid setting attr to null if it is removed ([#9012](https://github.com/vuejs/core/issues/9012)) ([b49306a](https://github.com/vuejs/core/commit/b49306adff4572d90a42ccd231387f16eb966bbe)), closes [#9006](https://github.com/vuejs/core/issues/9006) [#10324](https://github.com/vuejs/core/issues/10324)
+* **hydration:** properly handle optimized mode during hydrate node ([#10638](https://github.com/vuejs/core/issues/10638)) ([2ec06fd](https://github.com/vuejs/core/commit/2ec06fd6c8383e11cdf4efcab1707f973bd6a54c)), closes [#10607](https://github.com/vuejs/core/issues/10607)
+* **reactivity:** computed should not be detected as true by isProxy ([#10401](https://github.com/vuejs/core/issues/10401)) ([9da34d7](https://github.com/vuejs/core/commit/9da34d7af81607fddd1f32f21b3b4002402ff1cc))
+* **reactivity:** fix hasOwnProperty key coercion edge cases ([969c5fb](https://github.com/vuejs/core/commit/969c5fb30f4c725757c7385abfc74772514eae4b))
+* **reactivity:** fix tracking when hasOwnProperty is called with non-string value ([c3c5dc9](https://github.com/vuejs/core/commit/c3c5dc93fbccc196771458f0b43cd5b7ad1863f4)), closes [#10455](https://github.com/vuejs/core/issues/10455) [#10464](https://github.com/vuejs/core/issues/10464)
+* **runtime-core:** fix errorHandler causes an infinite loop during execution ([#9575](https://github.com/vuejs/core/issues/9575)) ([ab59bed](https://github.com/vuejs/core/commit/ab59bedae4e5e40b28804d88a51305b236d4a873))
+* **runtime-core:** handle invalid values in callWithAsyncErrorHandling ([53d15d3](https://github.com/vuejs/core/commit/53d15d3f76184eed67a18d35e43d9a2062f8e121))
+* **runtime-core:** show hydration mismatch details for non-rectified mismatches too when __PROD_HYDRATION_MISMATCH_DETAILS__ is set ([#10599](https://github.com/vuejs/core/issues/10599)) ([0dea7f9](https://github.com/vuejs/core/commit/0dea7f9a260d93eb6c39aabac8c94c2c9b2042dd))
+* **runtime-dom:** `v-model` string/number coercion for multiselect options ([#10576](https://github.com/vuejs/core/issues/10576)) ([db374e5](https://github.com/vuejs/core/commit/db374e54c9f5e07324728b85c74eca84e28dd352))
+* **runtime-dom:** fix css v-bind for suspensed components ([#8523](https://github.com/vuejs/core/issues/8523)) ([67722ba](https://github.com/vuejs/core/commit/67722ba23b7c36ab8f3fa2d2b4df08e4ddc322e1)), closes [#8520](https://github.com/vuejs/core/issues/8520)
+* **runtime-dom:** force update v-model number with leading 0 ([#10506](https://github.com/vuejs/core/issues/10506)) ([15ffe8f](https://github.com/vuejs/core/commit/15ffe8f2c954359770c57e4d9e589b0b622e4a60)), closes [#10503](https://github.com/vuejs/core/issues/10503) [#10615](https://github.com/vuejs/core/issues/10615)
+* **runtime-dom:** sanitize wrongly passed string value as event handler ([#8953](https://github.com/vuejs/core/issues/8953)) ([7ccd453](https://github.com/vuejs/core/commit/7ccd453dd004076cad49ec9f56cd5fe97b7b6ed8)), closes [#8818](https://github.com/vuejs/core/issues/8818)
+* **ssr:** don't render v-if comments in TransitionGroup ([#6732](https://github.com/vuejs/core/issues/6732)) ([5a96267](https://github.com/vuejs/core/commit/5a9626708e970c6fc0b6f786e3c80c22273d126f)), closes [#6715](https://github.com/vuejs/core/issues/6715)
+* **Transition:** ensure the KeepAlive children unmount w/ out-in mode ([#10632](https://github.com/vuejs/core/issues/10632)) ([fc99e4d](https://github.com/vuejs/core/commit/fc99e4d3f01b190ef9fd3c218a668ba9124a32bc)), closes [#10620](https://github.com/vuejs/core/issues/10620)
+* **TransitionGroup:** avoid set transition hooks for comment nodes and text nodes ([#9421](https://github.com/vuejs/core/issues/9421)) ([140a768](https://github.com/vuejs/core/commit/140a7681cc3bba22f55d97fd85a5eafe97a1230f)), closes [#4621](https://github.com/vuejs/core/issues/4621) [#4622](https://github.com/vuejs/core/issues/4622) [#5153](https://github.com/vuejs/core/issues/5153) [#5168](https://github.com/vuejs/core/issues/5168) [#7898](https://github.com/vuejs/core/issues/7898) [#9067](https://github.com/vuejs/core/issues/9067)
+* **types:** avoid merging object union types when using withDefaults ([#10596](https://github.com/vuejs/core/issues/10596)) ([37ba93c](https://github.com/vuejs/core/commit/37ba93c213a81f99a68a99ef5d4065d61b150ba3)), closes [#10594](https://github.com/vuejs/core/issues/10594)
+
+
+### Performance Improvements
+
+* add `__NO_SIDE_EFFECTS__` comments ([#9053](https://github.com/vuejs/core/issues/9053)) ([d46df6b](https://github.com/vuejs/core/commit/d46df6bdb14b0509eb2134b3f85297a306821c61))
+* optimize component props/slots internal object checks ([6af733d](https://github.com/vuejs/core/commit/6af733d68eb400a3d2c5ef5f465fff32b72a324e))
+* **ssr:** avoid calling markRaw on component instance proxy ([4bc9f39](https://github.com/vuejs/core/commit/4bc9f39f028af7313e5cf24c16915a1985d27bf8))
+* **ssr:** optimize setup context creation for ssr in v8 ([ca84316](https://github.com/vuejs/core/commit/ca84316bfb3410efe21333670a6ad5cd21857396))
+
+
+
+## [3.4.21](https://github.com/vuejs/core/compare/v3.4.20...v3.4.21) (2024-02-28)
+
+
+### Bug Fixes
+
+* **runtime-dom:** avoid unset option's value ([#10416](https://github.com/vuejs/core/issues/10416)) ([b3f8b5a](https://github.com/vuejs/core/commit/b3f8b5a4e700d4c47a146b6040882287d180f6cb)), closes [#10412](https://github.com/vuejs/core/issues/10412) [#10396](https://github.com/vuejs/core/issues/10396)
+* **suspense:** ensure nested suspense patching if in fallback state ([#10417](https://github.com/vuejs/core/issues/10417)) ([7c97778](https://github.com/vuejs/core/commit/7c97778aec1e3513035e5df265e1b8a7801f6106)), closes [#10415](https://github.com/vuejs/core/issues/10415)
+* **warning:** stringify args in warn handler ([#10414](https://github.com/vuejs/core/issues/10414)) ([bc37258](https://github.com/vuejs/core/commit/bc37258caa2f6f67f4554ab8587aca3798d92124)), closes [#10409](https://github.com/vuejs/core/issues/10409)
+
+
+
+## [3.4.20](https://github.com/vuejs/core/compare/v3.4.19...v3.4.20) (2024-02-26)
+
+
+### Bug Fixes
+
+* **parser:** should not treat uppercase components as special tags ([e0e0253](https://github.com/vuejs/core/commit/e0e02535cdea1aeb1cfaff0d61d4b2555e555c36)), closes [#10395](https://github.com/vuejs/core/issues/10395)
+* **runtime-dom:** avoid always resetting nullish option value ([ff130c4](https://github.com/vuejs/core/commit/ff130c470204086edaa093fb8fdc1247c69cba69)), closes [#10396](https://github.com/vuejs/core/issues/10396)
+* **runtime-dom:** fix nested v-show priority regression ([364f890](https://github.com/vuejs/core/commit/364f8902c8657faec7c3a4d70a5b2c856567e92d)), closes [#10338](https://github.com/vuejs/core/issues/10338)
+* **runtime-dom:** v-bind style should clear previous css string value ([#10373](https://github.com/vuejs/core/issues/10373)) ([e2d3235](https://github.com/vuejs/core/commit/e2d323538e71d404e729148fd19a08bbc2e3da9b)), closes [#10352](https://github.com/vuejs/core/issues/10352)
+* **suspense:** handle suspense switching with nested suspense  ([#10184](https://github.com/vuejs/core/issues/10184)) ([0f3da05](https://github.com/vuejs/core/commit/0f3da05ea201761529bb95594df1e2cee20b7107)), closes [#10098](https://github.com/vuejs/core/issues/10098)
+* **types:** better typing for direct setup signature of defineComponent ([#10357](https://github.com/vuejs/core/issues/10357)) ([eadce5b](https://github.com/vuejs/core/commit/eadce5b75356656fd2209ebdb406d34823c961b7)), closes [#8604](https://github.com/vuejs/core/issues/8604) [#8855](https://github.com/vuejs/core/issues/8855)
+
+
+
+## [3.4.19](https://github.com/vuejs/core/compare/v3.4.18...v3.4.19) (2024-02-13)
+
+
+### Bug Fixes
+
+* **deps:** pin lru-cache to avoid hashing error ([b8be990](https://github.com/vuejs/core/commit/b8be99018ceae92d1732dfb414df12b36b90b31f)), closes [#10300](https://github.com/vuejs/core/issues/10300)
+* **hydration:** fix css vars hydration mismatch false positive on non-root nodes ([995d2fd](https://github.com/vuejs/core/commit/995d2fdcca485c24849c99f498c1edc163722e04)), closes [#10317](https://github.com/vuejs/core/issues/10317) [#10325](https://github.com/vuejs/core/issues/10325)
+* **runtime-dom:** should not trigger transition when v-show value is falsy ([#10311](https://github.com/vuejs/core/issues/10311)) ([e509639](https://github.com/vuejs/core/commit/e50963903d93a7f24003b6e2c03647fdf7454b1e))
+
+
+### Features
+
+> Note: this warning is categorized as a feature but released in a patch because it does not affect public APIs.
+
+* **dx:** warn users when computed is self-triggering ([#10299](https://github.com/vuejs/core/issues/10299)) ([f7ba97f](https://github.com/vuejs/core/commit/f7ba97f9754a9882c1f6b1c07ca1a4040479dd13))
+
+
+### Performance Improvements
+
+* **runtime:** improve `getType()` GC and speed ([#10327](https://github.com/vuejs/core/issues/10327)) ([603a1e1](https://github.com/vuejs/core/commit/603a1e1f5ad587c077f0d974c1bbe856be22ebe9))
+
+
+
+## [3.4.18](https://github.com/vuejs/core/compare/v3.4.17...v3.4.18) (2024-02-09)
+
+
+### Bug Fixes
+
+* **dx:** warn against reserved keys as prop name ([77a804b](https://github.com/vuejs/core/commit/77a804b1d0d6a3f12fb3674cdceb85ebd6481e02)), closes [#10281](https://github.com/vuejs/core/issues/10281)
+* **runtime-dom:**  ensure v-show respects display value set via v-bind ([#10297](https://github.com/vuejs/core/issues/10297)) ([c224897](https://github.com/vuejs/core/commit/c224897dd4e189a10ec601a97fe08cb638ebee19)), closes [#10151](https://github.com/vuejs/core/issues/10151)
+
+
+
+## [3.4.17](https://github.com/vuejs/core/compare/v3.4.16...v3.4.17) (2024-02-09)
+
+
+### Reverts
+
+* fix(runtime-dom): ensure v-show respects display value set via v-bind ([#10161](https://github.com/vuejs/core/issues/10161)) ([2cd5b05](https://github.com/vuejs/core/commit/2cd5b05c3bf171be5c0b473c084c01704a058ffa)), closes [#10294](https://github.com/vuejs/core/issues/10294) [#10151](https://github.com/vuejs/core/issues/10151)
+
+
+
+## [3.4.16](https://github.com/vuejs/core/compare/v3.4.15...v3.4.16) (2024-02-08)
+
+
+### Bug Fixes
+
+* **compiler-core:** handle same-name shorthand edge case for in-DOM templates ([cb87b62](https://github.com/vuejs/core/commit/cb87b6213d7b003fa7280712c285c7c9d9f291ca)), closes [#10280](https://github.com/vuejs/core/issues/10280)
+* **compiler-core:** support v-bind shorthand syntax for dynamic slot name ([#10218](https://github.com/vuejs/core/issues/10218)) ([91f058a](https://github.com/vuejs/core/commit/91f058a90cd603492649633d153b120977c4df6b)), closes [#10213](https://github.com/vuejs/core/issues/10213)
+* **deps:** update compiler ([#10269](https://github.com/vuejs/core/issues/10269)) ([336bb65](https://github.com/vuejs/core/commit/336bb65820243006efdf990e6ea3610696467508))
+* **hydration:** fix SFC style v-bind hydration mismatch warnings ([#10250](https://github.com/vuejs/core/issues/10250)) ([f0b5f7e](https://github.com/vuejs/core/commit/f0b5f7ed8ddf74f9f5ba47cb65e8300370875291)), closes [#10215](https://github.com/vuejs/core/issues/10215)
+* **reactivity:** avoid infinite recursion from side effects in computed getter ([#10232](https://github.com/vuejs/core/issues/10232)) ([0bced13](https://github.com/vuejs/core/commit/0bced13ee5c53a02d5f10e5db76fe38b6e131440)), closes [#10214](https://github.com/vuejs/core/issues/10214)
+* **reactivity:** handle `MaybeDirty` recurse ([#10187](https://github.com/vuejs/core/issues/10187)) ([6c7e0bd](https://github.com/vuejs/core/commit/6c7e0bd88f021b0b6365370e97b0c7e243d7d70b)), closes [#10185](https://github.com/vuejs/core/issues/10185)
+* **reactivity:** skip non-extensible objects when using `markRaw` ([#10289](https://github.com/vuejs/core/issues/10289)) ([2312184](https://github.com/vuejs/core/commit/2312184bc335e0d32aa4c0c0b49190b6334849b4)), closes [#10288](https://github.com/vuejs/core/issues/10288)
+* **runtime-core:** avoid inlining isShallow ([#10238](https://github.com/vuejs/core/issues/10238)) ([53eee72](https://github.com/vuejs/core/commit/53eee72c3a96420db35236b5e8e4d9308a56e1b4))
+* **runtime-core:** support for nested calls to runWithContext ([#10261](https://github.com/vuejs/core/issues/10261)) ([75e02b5](https://github.com/vuejs/core/commit/75e02b5099a08166bdf407127916734c48209ee9)), closes [#10260](https://github.com/vuejs/core/issues/10260)
+* **runtime-dom:** ensure v-show respects display value set via v-bind ([#10161](https://github.com/vuejs/core/issues/10161)) ([9b19f09](https://github.com/vuejs/core/commit/9b19f0912104bfccb10c8cf5beab02b21a648935)), closes [#10151](https://github.com/vuejs/core/issues/10151)
+* **runtime-dom:** fix option selected update failed ([#10200](https://github.com/vuejs/core/issues/10200)) ([f31d782](https://github.com/vuejs/core/commit/f31d782e4668050a188ac0f11ba8d5b861b913ca)), closes [#10194](https://github.com/vuejs/core/issues/10194) [#10267](https://github.com/vuejs/core/issues/10267)
+
+
+### Reverts
+
+* perf(templateRef): avoid double render when using template ref on v-for ([eb1b911](https://github.com/vuejs/core/commit/eb1b9116d7cd4a5747e8dadcdc5ba921df011f64)), closes [#9908](https://github.com/vuejs/core/issues/9908) [#10210](https://github.com/vuejs/core/issues/10210) [#10234](https://github.com/vuejs/core/issues/10234)
+
+
+
+## [3.4.15](https://github.com/vuejs/core/compare/v3.4.14...v3.4.15) (2024-01-18)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** fix type resolution for symlinked node_modules structure w/ pnpm ([75e866b](https://github.com/vuejs/core/commit/75e866bd4ef368b4e037a4933dbaf188920dc683)), closes [#10121](https://github.com/vuejs/core/issues/10121)
+* correct url for production error reference links ([c3087ff](https://github.com/vuejs/core/commit/c3087ff2cce7d96c60a870f8233441311ab4dfb4))
+* **hydration:** fix incorect mismatch warning for option with non-string value and inner text ([d16a213](https://github.com/vuejs/core/commit/d16a2138a33b106b9e1499bbb9e1c67790370c97))
+* **reactivity:** re-fix [#10114](https://github.com/vuejs/core/issues/10114) ([#10123](https://github.com/vuejs/core/issues/10123)) ([c2b274a](https://github.com/vuejs/core/commit/c2b274a887f61deb7e0185d1bef3b77d31e991cc))
+* **runtime-core:** should not warn out-of-render slot fn usage when mounting another app in setup ([#10125](https://github.com/vuejs/core/issues/10125)) ([6fa33e6](https://github.com/vuejs/core/commit/6fa33e67ec42af140a86fbdb86939032c3a1f345)), closes [#10124](https://github.com/vuejs/core/issues/10124)
+
+
+### Performance Improvements
+
+* **templateRef:** avoid double render when using template ref on v-for ([de4d2e2](https://github.com/vuejs/core/commit/de4d2e2143ea8397cebeb1c7a57a60007b283c9f)), closes [#9908](https://github.com/vuejs/core/issues/9908)
+* **v-model:** optimize v-model multiple select w/ large lists ([2ffb956](https://github.com/vuejs/core/commit/2ffb956efe692da059f4895669084c5278871351)), closes [#10014](https://github.com/vuejs/core/issues/10014)
+
+
+
+## [3.4.14](https://github.com/vuejs/core/compare/v3.4.13...v3.4.14) (2024-01-15)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** enable prefixIdentifiers by default when reparsing on consumed AST ([#10105](https://github.com/vuejs/core/issues/10105)) ([48bf8e4](https://github.com/vuejs/core/commit/48bf8e4c708ec620e4852d71c8713394457108ee))
+* **deps:** update dependency postcss to ^8.4.33 ([#10110](https://github.com/vuejs/core/issues/10110)) ([a557006](https://github.com/vuejs/core/commit/a557006f8e7f110c6f322de38931dceaab8e9cbb))
+* **reactivity:** fix regression for computed with mutation ([#10119](https://github.com/vuejs/core/issues/10119)) ([20f62af](https://github.com/vuejs/core/commit/20f62afaafd422e42b99dde9c16f9a4ebfb9c5f7)), closes [#10114](https://github.com/vuejs/core/issues/10114)
+
+
+
+## [3.4.13](https://github.com/vuejs/core/compare/v3.4.12...v3.4.13) (2024-01-13)
+
+
+### Bug Fixes
+
+* **reactivity:** fix dirtyLevel checks for recursive effects ([#10101](https://github.com/vuejs/core/issues/10101)) ([e45a8d2](https://github.com/vuejs/core/commit/e45a8d24b46c174deb46ed952bdaf54c81ad5a85)), closes [#10082](https://github.com/vuejs/core/issues/10082)
+
+
+
+## [3.4.12](https://github.com/vuejs/core/compare/v3.4.11...v3.4.12) (2024-01-13)
+
+
+### Reverts
+
+* fix(reactivity): correct dirty assign in render function ([#10091](https://github.com/vuejs/core/issues/10091)) ([8b18481](https://github.com/vuejs/core/commit/8b1848173b0bc8fd84ce1da1af8d373c044bf073)), closes [#10098](https://github.com/vuejs/core/issues/10098) [#10100](https://github.com/vuejs/core/issues/10100)
+
+
+
+## [3.4.11](https://github.com/vuejs/core/compare/v3.4.10...v3.4.11) (2024-01-12)
+
+
+### Bug Fixes
+
+* **hydration:** improve mismatch when client value is null or undefined ([#10086](https://github.com/vuejs/core/issues/10086)) ([08b60f5](https://github.com/vuejs/core/commit/08b60f5d0d5b57fcf3347ef66cbeab472c475a88))
+* **reactivity:** correct dirty assign in render function ([#10091](https://github.com/vuejs/core/issues/10091)) ([8d04205](https://github.com/vuejs/core/commit/8d042050411fdf04d9d1d6c153287164b12e0255)), closes [#10082](https://github.com/vuejs/core/issues/10082)
+* **runtime-core:** filter single root for nested DEV_ROOT_FRAGMENT ([#8593](https://github.com/vuejs/core/issues/8593)) ([d35b877](https://github.com/vuejs/core/commit/d35b87725ab3e2bdc86fb5781ab34939f7ec1029)), closes [#5203](https://github.com/vuejs/core/issues/5203) [#8581](https://github.com/vuejs/core/issues/8581) [#10087](https://github.com/vuejs/core/issues/10087)
+
+
+
+## [3.4.10](https://github.com/vuejs/core/compare/v3.4.9...v3.4.10) (2024-01-11)
+
+
+### Bug Fixes
+
+* **hydration:** should not warn on falsy bindings of non-property keys ([3907c87](https://github.com/vuejs/core/commit/3907c87ce23cc6ef4a739b5a66ddb553e8723114))
+
+
+
+## [3.4.9](https://github.com/vuejs/core/compare/v3.4.8...v3.4.9) (2024-01-11)
+
+
+### Bug Fixes
+
+* **build:** avoid accessing __FEATURE_PROD_DEVTOOLS__ flag in root scope ([dfd9654](https://github.com/vuejs/core/commit/dfd9654665890d1bc7129f6e3c2faaa5b1f28f72))
+* **hydration:** do not warn against bindings w/ object values ([dcc68ef](https://github.com/vuejs/core/commit/dcc68ef7d48973abd8dd3178b46e50e3b0785ea4))
+* **runtime-dom:** unify behavior for v-show + style display binding ([#10075](https://github.com/vuejs/core/issues/10075)) ([cd419ae](https://github.com/vuejs/core/commit/cd419aec3cb615eaea8b2324356f38f4c0ff1fcc)), closes [#10074](https://github.com/vuejs/core/issues/10074)
+* **suspense:** avoid double-patching nested suspense when parent suspense is not resolved ([#10055](https://github.com/vuejs/core/issues/10055)) ([bcda96b](https://github.com/vuejs/core/commit/bcda96b525801eb7a1d397300fb3f2f9b827ddfb)), closes [#8678](https://github.com/vuejs/core/issues/8678)
+
+
+
+## [3.4.8](https://github.com/vuejs/core/compare/v3.4.7...v3.4.8) (2024-01-10)
+
+
+### Bug Fixes
+
+* **hydration:** fix class and style hydration mismatch message ([5af3987](https://github.com/vuejs/core/commit/5af398729168481c3bee741b4f36fa4f375e0f4a)), closes [#10067](https://github.com/vuejs/core/issues/10067)
+* **hydration:** improve attr hydration mismatch check for boolean attrs ([972face](https://github.com/vuejs/core/commit/972facee0d892a1b6d9d4ad1da5da9306ed45c3f)), closes [#10057](https://github.com/vuejs/core/issues/10057) [#10060](https://github.com/vuejs/core/issues/10060)
+* **suspense:** fix more suspense patch before resolve edge cases ([70ad4ca](https://github.com/vuejs/core/commit/70ad4caad7d19938f8ccf1ede3228a81254dd4bf)), closes [#10017](https://github.com/vuejs/core/issues/10017)
+
+
+
+## [3.4.7](https://github.com/vuejs/core/compare/v3.4.6...v3.4.7) (2024-01-09)
+
+
+### Bug Fixes
+
+* **parser:** skip compat mode check for SFC root `<template>` tags ([#10034](https://github.com/vuejs/core/issues/10034)) ([923d560](https://github.com/vuejs/core/commit/923d560d0b6713144671809b6dfeb1e2da503b1f))
+* **types:** fix functional component for `h` ([#9991](https://github.com/vuejs/core/issues/9991)) ([438a74a](https://github.com/vuejs/core/commit/438a74aad840183286fbdb488178510f37218a73))
+
+
+### Reverts
+
+* "dx(computed): warn incorrect use of getCurrentInstance inside computed" ([2fd3905](https://github.com/vuejs/core/commit/2fd39057386644c8bfee426c60a51f2b07a79b09))
+
+
+
+## [3.4.6](https://github.com/vuejs/core/compare/v3.4.5...v3.4.6) (2024-01-08)
+
+
+### Bug Fixes
+
+* **build:** revert "build: add production/development export conditions ([#9977](https://github.com/vuejs/core/issues/9977))" ([7bd4e90](https://github.com/vuejs/core/commit/7bd4e90506547c42234165776b01793abd37b148)), closes [#10012](https://github.com/vuejs/core/issues/10012) [#10020](https://github.com/vuejs/core/issues/10020)
+* fix post watcher fire timing on nested app mounts ([3c3561e](https://github.com/vuejs/core/commit/3c3561e7203091f49d57f1da6d822c91e462bc46)), closes [#10005](https://github.com/vuejs/core/issues/10005)
+* **hydration:** avoid hydration mismatch warning for styles with different order ([#10011](https://github.com/vuejs/core/issues/10011)) ([2701355](https://github.com/vuejs/core/commit/2701355e8eb07ab664e398d9fc05d6c4e2e9b20e)), closes [#10000](https://github.com/vuejs/core/issues/10000) [#10006](https://github.com/vuejs/core/issues/10006)
+* **runtime-core:** handle fragment with null children ([#10010](https://github.com/vuejs/core/issues/10010)) ([3bf34b7](https://github.com/vuejs/core/commit/3bf34b767e4dd3cf6a974301ecf0363ae4dda4ec)), closes [#10007](https://github.com/vuejs/core/issues/10007)
+* **scheduler:** sort nested postFlushCbs ([d9162df](https://github.com/vuejs/core/commit/d9162dfc2ee0c3a369fb9bf32ff413e74761bee6)), closes [#10003](https://github.com/vuejs/core/issues/10003)
+* **suspense:** fix anchor for suspense with transition out-in ([#9999](https://github.com/vuejs/core/issues/9999)) ([a3fbf21](https://github.com/vuejs/core/commit/a3fbf2132b0cd3655e969e290548c8fabc08fd33)), closes [#9996](https://github.com/vuejs/core/issues/9996)
+* **types:** allow `null` type for textarea value ([#9997](https://github.com/vuejs/core/issues/9997)) ([c379bc2](https://github.com/vuejs/core/commit/c379bc29efc70d6ac5840de10c357ee3dad998c0)), closes [#9904](https://github.com/vuejs/core/issues/9904)
+
+
+
+## [3.4.5](https://github.com/vuejs/core/compare/v3.4.4...v3.4.5) (2024-01-04)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** fix co-usage of defineModel transform options and props destructure ([b20350d](https://github.com/vuejs/core/commit/b20350ded562d27e5901f308d0bc13344f840c4a)), closes [#9972](https://github.com/vuejs/core/issues/9972)
+* **compiler-sfc:** fix sfc template unref rewrite for class instantiation ([ae60a91](https://github.com/vuejs/core/commit/ae60a91cc23424493071ad9088782763eb1e8ff7)), closes [#6483](https://github.com/vuejs/core/issues/6483) [#6491](https://github.com/vuejs/core/issues/6491)
+* **compiler-ssr:** fix node clone edge case caused by AST reuse ([#9983](https://github.com/vuejs/core/issues/9983)) ([7dbdb3e](https://github.com/vuejs/core/commit/7dbdb3edf0ab648965331ca42f069387c97a1c8a)), closes [#9981](https://github.com/vuejs/core/issues/9981)
+* **watch:** cleanup watcher effect from scope when manually stopped ([#9978](https://github.com/vuejs/core/issues/9978)) ([d2d8955](https://github.com/vuejs/core/commit/d2d89551bb06dc05cb7ae0496b8f345ae0de78ed))
+
+
+
+## [3.4.4](https://github.com/vuejs/core/compare/v3.4.3...v3.4.4) (2024-01-03)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** fix scss source map regression ([71d3121](https://github.com/vuejs/core/commit/71d3121b72c449351e718ee1539bdfa35b68bb32)), closes [#9970](https://github.com/vuejs/core/issues/9970) [#9969](https://github.com/vuejs/core/issues/9969)
+* **compiler-sfc:** use compilerOptions when re-parsing consumed AST ([d94d8d4](https://github.com/vuejs/core/commit/d94d8d4bffd1daf171a655b292745ffc3e63052d))
+* **defineModel:** support kebab-case/camelCase mismatches ([#9950](https://github.com/vuejs/core/issues/9950)) ([10ccb9b](https://github.com/vuejs/core/commit/10ccb9bfa0f5f3016207fc32b9611bab98e6f090))
+* **runtime-core:** correctly assign suspenseId to avoid conflicts with the default id ([#9966](https://github.com/vuejs/core/issues/9966)) ([0648804](https://github.com/vuejs/core/commit/06488047c184dae3070d0008379716690edceb46)), closes [#9944](https://github.com/vuejs/core/issues/9944)
+* **ssr:** avoid rendering transition-group slot content as a fragment ([#9961](https://github.com/vuejs/core/issues/9961)) ([0160264](https://github.com/vuejs/core/commit/0160264d677478ee928e8e851f39a9e94f97e337)), closes [#9933](https://github.com/vuejs/core/issues/9933)
+* **watch:** remove instance unmounted short circuit in getter of `watchEffect` ([#9948](https://github.com/vuejs/core/issues/9948)) ([f300a40](https://github.com/vuejs/core/commit/f300a4001ec40cadef2520267eb5841ab48cf005))
+* **watch:** revert watch behavior when watching shallow reactive objects ([a9f781a](https://github.com/vuejs/core/commit/a9f781a92cbc7de7b25c9e3d5b1295ca99eb6d86)), closes [#9965](https://github.com/vuejs/core/issues/9965)
+
+
+### Performance Improvements
+
+* **watch:** avoid double traverse for reactive source ([24d77c2](https://github.com/vuejs/core/commit/24d77c25ce5d5356adb5367beef1d23e6e340b35))
+
+
+
+## [3.4.3](https://github.com/vuejs/core/compare/v3.4.2...v3.4.3) (2023-12-30)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** respect sfc parse options in cache key ([b8d58ec](https://github.com/vuejs/core/commit/b8d58ec4f42cbeb9443bf06138add46158db9af0))
+
+
+
+## [3.4.2](https://github.com/vuejs/core/compare/v3.4.1...v3.4.2) (2023-12-30)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** fix dev regression for dot / namespace component usage ([dce99c1](https://github.com/vuejs/core/commit/dce99c12df981ca45a4d848c37ba8b16496025f0)), closes [#9947](https://github.com/vuejs/core/issues/9947)
+* **runtime-core:** support deep: false when watch reactive ([#9928](https://github.com/vuejs/core/issues/9928)) ([4f703d1](https://github.com/vuejs/core/commit/4f703d120d76d711084346f73ea295c73e6ef6b6)), closes [#9916](https://github.com/vuejs/core/issues/9916)
+* **ssr:** fix hydration error for slot outlet inside transition-group ([#9937](https://github.com/vuejs/core/issues/9937)) ([6cb00ed](https://github.com/vuejs/core/commit/6cb00ed0f9b64428ec18fada0f68467d6a813fde)), closes [#9933](https://github.com/vuejs/core/issues/9933)
+
+
+
+## [3.4.1](https://github.com/vuejs/core/compare/v3.4.0...v3.4.1) (2023-12-30)
+
+
+### Bug Fixes
+
+* **compat:** correct enum value for COMPILER_FILTERS feature ([#9875](https://github.com/vuejs/core/issues/9875)) ([77d33e2](https://github.com/vuejs/core/commit/77d33e263cf19983caf4e5c53a0eb0bee374843c))
+* **defineModel:** always default modifiers to empty object ([9bc3c7e](https://github.com/vuejs/core/commit/9bc3c7e29cf15f5ca96703542d10cfd786a3fc55)), closes [#9945](https://github.com/vuejs/core/issues/9945)
+* **defineModel:** support local mutation when only prop but no listener is passed ([97ce041](https://github.com/vuejs/core/commit/97ce041910b6ca4bef10f939493d6b5a06ea5b07))
+* **types:** fix defineModel watch type error ([#9942](https://github.com/vuejs/core/issues/9942)) ([4af8583](https://github.com/vuejs/core/commit/4af85835f7e593a7dffa7dc7e99f14877eb70fd1)), closes [#9939](https://github.com/vuejs/core/issues/9939)
+
+
+### Features
+
+* **compiler-sfc:** support passing template parsing options when parsing sfc ([6fab855](https://github.com/vuejs/core/commit/6fab8551e4aeef4610987640de8b435b1ae321bb)) (necessary to fix https://github.com/vitejs/vite-plugin-vue/issues/322)
+
+
+
+# [3.4.0 Slam Dunk](https://github.com/vuejs/core/compare/v3.4.0-rc.3...v3.4.0) (2023-12-29)
+
+> Read [this blog post](https://blog.vuejs.org/posts/vue-3-4) for an overview of the release highlights.
+
+### Potential Actions Needed
+
+1. To fully leverage new features in 3.4, it is recommended to also update the following dependencies when upgrading to 3.4:
+
+   - Volar / vue-tsc@^1.8.27 (**required**)
+   - @vitejs/plugin-vue@^5.0.0 (if using Vite)
+   - nuxt@^3.9.0 (if using Nuxt)
+   - vue-loader@^17.4.0 (if using webpack or vue-cli)
+
+2. If using TSX with Vue, check actions needed in [Removed: Global JSX Namespace](https://blog.vuejs.org/posts/vue-3-4#global-jsx-namespace).
+
+3. Make sure you are no longer using any deprecated features (if you are, you should have warnings in the console telling you so). They may have been [removed in 3.4](https://blog.vuejs.org/posts/vue-3-4#other-removed-features).
+
+### Features
+
+* **general:** MathML support ([#7836](https://github.com/vuejs/core/issues/7836)) ([d42b6ba](https://github.com/vuejs/core/commit/d42b6ba3f530746eb1221eb7a4be0f44eb56f7d3)), closes [#7820](https://github.com/vuejs/core/issues/7820)
+* **reactivity:** more efficient reactivity system ([#5912](https://github.com/vuejs/core/issues/5912)) ([16e06ca](https://github.com/vuejs/core/commit/16e06ca08f5a1e2af3fc7fb35de153dbe0c3087d)), closes [#311](https://github.com/vuejs/core/issues/311) [#1811](https://github.com/vuejs/core/issues/1811) [#6018](https://github.com/vuejs/core/issues/6018) [#7160](https://github.com/vuejs/core/issues/7160) [#8714](https://github.com/vuejs/core/issues/8714) [#9149](https://github.com/vuejs/core/issues/9149) [#9419](https://github.com/vuejs/core/issues/9419) [#9464](https://github.com/vuejs/core/issues/9464)
+* **reactivity:** expose last result for computed getter ([#9497](https://github.com/vuejs/core/issues/9497)) ([48b47a1](https://github.com/vuejs/core/commit/48b47a1ab63577e2dbd91947eea544e3ef185b85))
+* **runtime-core / dx:** link errors to docs in prod build ([#9165](https://github.com/vuejs/core/issues/9165)) ([9f8ba98](https://github.com/vuejs/core/commit/9f8ba9821fe166f77e63fa940e9e7e13ec3344fa))
+* **runtime-core:** add `once` option to watch ([#9034](https://github.com/vuejs/core/issues/9034)) ([a645e7a](https://github.com/vuejs/core/commit/a645e7aa51006516ba668b3a4365d296eb92ee7d))
+* **runtime-core:** provide full props to props validator functions ([#3258](https://github.com/vuejs/core/issues/3258)) ([8e27692](https://github.com/vuejs/core/commit/8e27692029a4645cd54287f776c0420f2b82740b))
+* **compiler-core:** export error message ([#8729](https://github.com/vuejs/core/issues/8729)) ([f7e80ee](https://github.com/vuejs/core/commit/f7e80ee4a065a9eaba98720abf415d9e87756cbd))
+* **compiler-core:** support specifying root namespace when parsing ([40f72d5](https://github.com/vuejs/core/commit/40f72d5e50b389cb11b7ca13461aa2a75ddacdb4))
+* **compiler-core:** support v-bind shorthand for key and value with the same name ([#9451](https://github.com/vuejs/core/issues/9451)) ([26399aa](https://github.com/vuejs/core/commit/26399aa6fac1596b294ffeba06bb498d86f5508c))
+* **compiler-core:** improve parsing tolerance for language-tools ([41ff68e](https://github.com/vuejs/core/commit/41ff68ea579d933333392146625560359acb728a))
+* **compiler-core:** support accessing Error as global in template expressions ([#7018](https://github.com/vuejs/core/issues/7018)) ([bcca475](https://github.com/vuejs/core/commit/bcca475dbc58d76434cd8120b94929758cee2825))
+* **compiler-core:** lift vnode hooks deprecation warning to error ([8abc754](https://github.com/vuejs/core/commit/8abc754d5d86d9dfd5a7927b846f1a743f352364))
+* **compiler-core:** export runtime error strings ([#9301](https://github.com/vuejs/core/issues/9301)) ([feb2f2e](https://github.com/vuejs/core/commit/feb2f2edce2d91218a5e9a52c81e322e4033296b))
+* **compiler-core:** add current filename to TransformContext ([#8950](https://github.com/vuejs/core/issues/8950)) ([638f1ab](https://github.com/vuejs/core/commit/638f1abbb632000553e2b7d75e87c95d8ca192d6))
+* **compiler-sfc:** analyze import usage in template via AST ([#9729](https://github.com/vuejs/core/issues/9729)) ([e8bbc94](https://github.com/vuejs/core/commit/e8bbc946cba6bf74c9da56f938b67d2a04c340ba)), closes [#8897](https://github.com/vuejs/core/issues/8897) [nuxt/nuxt#22416](https://github.com/nuxt/nuxt/issues/22416)
+* **compiler-sfc:** expose resolve type-based props and emits ([#8874](https://github.com/vuejs/core/issues/8874)) ([9e77580](https://github.com/vuejs/core/commit/9e77580c0c2f0d977bd0031a1d43cc334769d433))
+* **compiler-sfc:** bump postcss-modules to v6 ([2a507e3](https://github.com/vuejs/core/commit/2a507e32f0e2ef73813705a568b8633f68bda7a9))
+* **compiler-sfc:** promote defineModel stable ([#9598](https://github.com/vuejs/core/issues/9598)) ([ef688ba](https://github.com/vuejs/core/commit/ef688ba92bfccbc8b7ea3997eb297665d13e5249))
+* **compiler-sfc:** support import attributes and `using` syntax ([#8786](https://github.com/vuejs/core/issues/8786)) ([5b2bd1d](https://github.com/vuejs/core/commit/5b2bd1df78e8ff524c3a184adaa284681aba6574))
+* **compiler-sfc:** `defineModel` support local mutation by default, remove local option ([f74785b](https://github.com/vuejs/core/commit/f74785bc4ad351102dde17fdfd2c7276b823111f)), closes [/github.com/vuejs/rfcs/discussions/503#discussioncomment-7566278](https://github.com//github.com/vuejs/rfcs/discussions/503/issues/discussioncomment-7566278)
+* **ssr:** add `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` feature flag ([#9550](https://github.com/vuejs/core/issues/9550)) ([bc7698d](https://github.com/vuejs/core/commit/bc7698dbfed9b5327a93565f9df336ae5a94d605))
+* **ssr:** improve ssr hydration mismatch checks ([#5953](https://github.com/vuejs/core/issues/5953)) ([2ffc1e8](https://github.com/vuejs/core/commit/2ffc1e8cfdc6ec9c45c4a4dd8e3081b2aa138f1e)), closes [#5063](https://github.com/vuejs/core/issues/5063)
+* **types:** use enum to replace const enum ([#9261](https://github.com/vuejs/core/issues/9261)) ([fff7b86](https://github.com/vuejs/core/commit/fff7b864f4292d0430ba2bda7098ad43876b0210)), closes [#1228](https://github.com/vuejs/core/issues/1228)
+* **types:** add emits and slots type to `FunctionalComponent` ([#8644](https://github.com/vuejs/core/issues/8644)) ([927ab17](https://github.com/vuejs/core/commit/927ab17cfc645e82d061fdf227c34689491268e1))
+* **types:** export `AriaAttributes` type ([#8909](https://github.com/vuejs/core/issues/8909)) ([fd0b6ba](https://github.com/vuejs/core/commit/fd0b6ba01660499fa07b0cf360eefaac8cca8287))
+* **types:** export `ObjectPlugin` and `FunctionPlugin` types ([#8946](https://github.com/vuejs/core/issues/8946)) ([fa4969e](https://github.com/vuejs/core/commit/fa4969e7a3aefa6863203f9294fc5e769ddf6d8f)), closes [#8577](https://github.com/vuejs/core/issues/8577)
+* **types:** expose `DefineProps` type ([096ba81](https://github.com/vuejs/core/commit/096ba81817b7da15f61bc55fc1a93f72ac9586e0))
+* **types:** expose `PublicProps` type ([#2403](https://github.com/vuejs/core/issues/2403)) ([44135dc](https://github.com/vuejs/core/commit/44135dc95fb8fea26b84d1433839d28b8c21f708))
+* **types:** improve event type inference when using `h` with native elements  ([#9756](https://github.com/vuejs/core/issues/9756)) ([a625376](https://github.com/vuejs/core/commit/a625376ac8901eea81bf3c66cb531f2157f073ef))
+* **types:** provide `ComponentInstance` type ([#5408](https://github.com/vuejs/core/issues/5408)) ([bfb8565](https://github.com/vuejs/core/commit/bfb856565d3105db4b18991ae9e404e7cc989b25))
+* **types:** support passing generics when registering global directives ([#9660](https://github.com/vuejs/core/issues/9660)) ([a41409e](https://github.com/vuejs/core/commit/a41409ed02a8c7220e637f56caf6813edeb077f8))
+
+
+### Performance Improvements
+
+* **compiler-sfc:** avoid sfc source map unnecessary serialization and parsing ([f15d2f6](https://github.com/vuejs/core/commit/f15d2f6cf69c0c39f8dfb5c33122790c68bf92e2))
+* **compiler-sfc:** remove magic-string trim on script ([e8e3ec6](https://github.com/vuejs/core/commit/e8e3ec6ca7392e43975c75b56eaaa711d5ea9410))
+* **compiler-sfc:** use faster source map addMapping ([50cde7c](https://github.com/vuejs/core/commit/50cde7cfbcc49022ba88f5f69fa9b930b483c282))
+* **compiler-core:** optimize away isBuiltInType ([66c0ed0](https://github.com/vuejs/core/commit/66c0ed0a3c1c6f37dafc6b1c52b75c6bf60e3136))
+* **compiler-core:** optimize position cloning ([2073236](https://github.com/vuejs/core/commit/20732366b9b3530d33b842cf1fc985919afb9317))
+* **codegen:** optimize line / column calculation during codegen ([3be53d9](https://github.com/vuejs/core/commit/3be53d9b974dae1a10eb795cade71ae765e17574))
+* **codegen:** optimize source map generation ([c11002f](https://github.com/vuejs/core/commit/c11002f16afd243a2b15b546816e73882eea9e4d))
+* **shared:** optimize makeMap ([ae6fba9](https://github.com/vuejs/core/commit/ae6fba94954bac6430902f77b0d1113a98a75b18))
+
+
+### BREAKING CHANGES
+
+#### Global JSX Registration Removed
+
+Starting in 3.4, Vue no longer registers the global `JSX` namespace by default. This is necessary to avoid global namespace collision with React so that TSX of both libs can co-exist in the same project. This should not affect SFC-only users with latest version of Volar.
+
+If you are using TSX, there are two options:
+
+1. Explicitly set [jsxImportSource](https://www.typescriptlang.org/tsconfig#jsxImportSource) to `'vue'` in `tsconfig.json` before upgrading to 3.4. You can also opt-in per file by adding a `/* @jsxImportSource vue */` comment at the top of the file.
+
+2. If you have code that depends on the presence of the global `JSX` namespace, e.g. usage of types like `JSX.Element` etc., you can retain the exact pre-3.4 global behavior by explicitly referencing `vue/jsx`, which registers the global `JSX` namespace.
+
+Note that this is a type-only breaking change in a minor release, which adheres to our [release policy](https://vuejs.org/about/releases.html#semantic-versioning-edge-cases).
+
+#### Deprecated Features Removed
+
+- [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) was marked deprecated in 3.3 and is now removed in 3.4. This change does not require a major due to the feature being experimental. Users who wish to continue using the feature can do so via the [Vue Macros plugin](https://vue-macros.dev/features/reactivity-transform.html).
+- `app.config.unwrapInjectedRef` has been removed. It was deprecated and enabled by default in 3.3. In 3.4 it is no longer possible to disable this behavior.
+- `@vnodeXXX` event listeners in templates are now a compiler error instead of a deprecation warning. Use `@vue:XXX` listeners instead.
+- `v-is` directive has been removed. It was deprecated in 3.3. Use the [`is` attribute with `vue:` prefix](https://vuejs.org/api/built-in-special-attributes.html#is) instead.
+
+# [3.4.0-rc.3](https://github.com/vuejs/core/compare/v3.4.0-rc.2...v3.4.0-rc.3) (2023-12-27)
+
+
+### Bug Fixes
+
+* also export runtime error strings in all cjs builds ([38706e4](https://github.com/vuejs/core/commit/38706e4a1e5e5380e7df910b2a784d0a9bc9db29))
+
+
+### Features
+
+* **defineModel:** support modifiers and transformers ([a772031](https://github.com/vuejs/core/commit/a772031ea8431bd732ffeaeaac09bd76a0daec9b))
+
+
+
+# [3.4.0-rc.2](https://github.com/vuejs/core/compare/v3.4.0-rc.1...v3.4.0-rc.2) (2023-12-26)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @vue/repl to ^3.1.0 ([#9911](https://github.com/vuejs/core/issues/9911)) ([f96c413](https://github.com/vuejs/core/commit/f96c413e8ef2f24cacda5bb499492922f62c6e8b))
+* **types:** fix distribution of union types when unwrapping setup bindings ([#9909](https://github.com/vuejs/core/issues/9909)) ([0695c69](https://github.com/vuejs/core/commit/0695c69e0dfaf99882a623fe75b433c9618ea648)), closes [#9903](https://github.com/vuejs/core/issues/9903)
+* **warning:** ensure prod hydration warnings actually work ([b4ebe7a](https://github.com/vuejs/core/commit/b4ebe7ae8b904f28cdda33caf87bc05718d3a08a))
+
+
+### Features
+
+* **compiler-sfc:** export aggregated error messages for compiler-core and compiler-dom ([25c726e](https://github.com/vuejs/core/commit/25c726eca81fc384b41fafbeba5e8dfcda1f030f))
+
+
+
+# [3.4.0-rc.1](https://github.com/vuejs/core/compare/v3.4.0-beta.4...v3.4.0-rc.1) (2023-12-25)
+
+
+### Bug Fixes
+
+* **compiler-core:** fix parsing `<script setup>` generics with > ([7aa3f25](https://github.com/vuejs/core/commit/7aa3f250f26d58ee2db82af907de8b9105e6e418)), closes [#9890](https://github.com/vuejs/core/issues/9890)
+* **compiler-sfc:** fix type resolution for shared type w/ different generic parameters ([a8d0b1b](https://github.com/vuejs/core/commit/a8d0b1b38b092ec2d10b32bedcee2eea33b77657)), closes [#9871](https://github.com/vuejs/core/issues/9871)
+* **ssr:** avoid hydration mismatch warning for classes with different order ([e585b0d](https://github.com/vuejs/core/commit/e585b0db43150c8b8b3d78f71e12efccc018a38d))
+
+
+
+# [3.4.0-beta.4](https://github.com/vuejs/core/compare/v3.3.13...v3.4.0-beta.4) (2023-12-19)
+
+
+### Bug Fixes
+
+* **compile-sfc:** fix identifier prefixing edge case caused by reused AST ([#9867](https://github.com/vuejs/core/issues/9867)) ([eb51b23](https://github.com/vuejs/core/commit/eb51b23d8512f15665d6f8bcdfd51582e0cd8ce8)), closes [#9853](https://github.com/vuejs/core/issues/9853) [#9863](https://github.com/vuejs/core/issues/9863)
+* **ssr:** fix hydration prop mismatch check for class on SVG elements ([e8448b0](https://github.com/vuejs/core/commit/e8448b018d9f837c08eace90cab404a27f68e31a))
+
+
+### Features
+
+* **runtime-core:** throw real error when scheduler detects infinite loop during dev ([#7447](https://github.com/vuejs/core/issues/7447)) ([1d79b64](https://github.com/vuejs/core/commit/1d79b64ebce884d97136d71aa722347470b13e35)), closes [#7437](https://github.com/vuejs/core/issues/7437)
+
+
+
+## [3.3.13](https://github.com/vuejs/core/compare/v3.3.12...v3.3.13) (2023-12-19)
+
+
+### Bug Fixes
+
+* **compiler-core:** fix v-on with modifiers on inline expression of undefined ([#9866](https://github.com/vuejs/core/issues/9866)) ([bae79dd](https://github.com/vuejs/core/commit/bae79ddf8564a2da4a5365cfeb8d811990f42335)), closes [#9865](https://github.com/vuejs/core/issues/9865)
+* **runtime-dom:** cache event handlers by key/modifiers ([#9851](https://github.com/vuejs/core/issues/9851)) ([04d2c05](https://github.com/vuejs/core/commit/04d2c05054c26b02fbc1d84839b0ed5cd36455b6)), closes [#9849](https://github.com/vuejs/core/issues/9849)
+* **types:** extract properties from extended collections ([#9854](https://github.com/vuejs/core/issues/9854)) ([24b1c1d](https://github.com/vuejs/core/commit/24b1c1dd57fd55d998aa231a147500e010b10219)), closes [#9852](https://github.com/vuejs/core/issues/9852)
+
+
+
+# [3.4.0-beta.3](https://github.com/vuejs/core/compare/v3.3.12...v3.4.0-beta.3) (2023-12-16)
+
+
+### Bug Fixes
+
+* **compiler-core:** vnode hooks error message ([#9842](https://github.com/vuejs/core/issues/9842)) ([7bc3c9e](https://github.com/vuejs/core/commit/7bc3c9e205c5158230772d9fcd25bf300809342e))
+* **defineModel:** ensure trigger effect when prop changed ([#9841](https://github.com/vuejs/core/issues/9841)) ([eb12f21](https://github.com/vuejs/core/commit/eb12f211b8e312fd64d91ef1a58b2c2db618bdee)), closes [#9838](https://github.com/vuejs/core/issues/9838)
+* **mathml:** update known mathML tags ([#9829](https://github.com/vuejs/core/issues/9829)) ([ebd78d2](https://github.com/vuejs/core/commit/ebd78d2c99d9587307e444e6b7baa7bc920d42e7))
+* **Suspense:** fix edge case of Suspense being patched during async HOC child remount ([f0f6f7c](https://github.com/vuejs/core/commit/f0f6f7cea6e16650181e71dcfccbee405a1db503))
+
+
+
+## [3.3.12](https://github.com/vuejs/core/compare/v3.3.11...v3.3.12) (2023-12-16)
+
+### Bug Fixes
+
+* **hydration:** handle appear transition before patch props ([#9837](https://github.com/vuejs/core/issues/9837)) ([e70f4c4](https://github.com/vuejs/core/commit/e70f4c47c553b6e16d8fad70743271ca23802fe7)), closes [#9832](https://github.com/vuejs/core/issues/9832)
+* **sfc/cssVars:** fix loss of CSS v-bind variables when setting inline style with string value ([#9824](https://github.com/vuejs/core/issues/9824)) ([0a387df](https://github.com/vuejs/core/commit/0a387dfb1d04afb6eae4296b6da76dfdaca77af4)), closes [#9821](https://github.com/vuejs/core/issues/9821)
+* **ssr:** fix suspense hydration of fallback content ([#7188](https://github.com/vuejs/core/issues/7188)) ([60415b5](https://github.com/vuejs/core/commit/60415b5d67df55f1fd6b176615299c08640fa142))
+* **types:** add `xmlns:xlink` to `SVGAttributes` ([#9300](https://github.com/vuejs/core/issues/9300)) ([0d61b42](https://github.com/vuejs/core/commit/0d61b429ecf63591d31e09702058fa4c7132e1a7)), closes [#9299](https://github.com/vuejs/core/issues/9299)
+* **types:** fix `shallowRef` type error ([#9839](https://github.com/vuejs/core/issues/9839)) ([9a57158](https://github.com/vuejs/core/commit/9a571582b53220270e498d8712ea59312c0bef3a))
+* **types:** support for generic keyof slots ([#8374](https://github.com/vuejs/core/issues/8374)) ([213eba4](https://github.com/vuejs/core/commit/213eba479ce080efc1053fe636f6be4a4c889b44))
+
+
+
+# [3.4.0-beta.2](https://github.com/vuejs/core/compare/v3.4.0-beta.1...v3.4.0-beta.2) (2023-12-14)
+
+
+### Features
+
+* **types:** remove default jsx global registration ([92b8d9c](https://github.com/vuejs/core/commit/92b8d9cef69146540db2bf7f2a5632ab5d38f672))
+
+
+### BREAKING CHANGES
+
+* **types:** Vue no longer registers the global `JSX` namespace by
+default.
+
+
+
+# [3.4.0-beta.1](https://github.com/vuejs/core/compare/v3.3.11...v3.4.0-beta.1) (2023-12-13)
+
+
+### Bug Fixes
+
+* **compiler-core:** use the same resolved options for all compile stages ([#9760](https://github.com/vuejs/core/issues/9760)) ([0dc875d](https://github.com/vuejs/core/commit/0dc875d53e5d869b44d0c1a70736ec859337b58f))
+* **hydration:** should not warn mismatch for nullish prop ([33159a5](https://github.com/vuejs/core/commit/33159a5916bf7686fe53517befa59b450b34e974))
+* **hydration:** swap client/server labels for hydration mismatch warnings ([f41fd86](https://github.com/vuejs/core/commit/f41fd86d5f26bd0009b4ca285ddc3cefaafa9f7c)), closes [#9098](https://github.com/vuejs/core/issues/9098) [#5953](https://github.com/vuejs/core/issues/5953)
+* **runtime-core:** fix suspense crash when patching non-resolved async setup component ([#7290](https://github.com/vuejs/core/issues/7290)) ([bb0c889](https://github.com/vuejs/core/commit/bb0c8899cadd03af22e23c0383aaab363635c5b4)), closes [#5993](https://github.com/vuejs/core/issues/5993) [#6463](https://github.com/vuejs/core/issues/6463) [#6949](https://github.com/vuejs/core/issues/6949) [#6095](https://github.com/vuejs/core/issues/6095) [#8121](https://github.com/vuejs/core/issues/8121)
+* **runtime-core:** properly pop warning context when mounting components with async setup ([69a2acc](https://github.com/vuejs/core/commit/69a2acc6ea159da8300a68ecc8953f19932c251b))
+* **ssr:** fix suspense hydration of fallback content ([#7188](https://github.com/vuejs/core/issues/7188)) ([60415b5](https://github.com/vuejs/core/commit/60415b5d67df55f1fd6b176615299c08640fa142))
+* **ssr:** make isInSSRComponentSetup state sharable across copies of Vue ([e04d821](https://github.com/vuejs/core/commit/e04d821422102446704e223c03e50d26cbb1fe69))
+* **Suspense:** handle switching away from kept-alive component before resolve ([aa0c13f](https://github.com/vuejs/core/commit/aa0c13f637df7eb27faa2545ee731f543c0813ec)), closes [#6416](https://github.com/vuejs/core/issues/6416) [#6467](https://github.com/vuejs/core/issues/6467)
+* **Suspense:** properly fix [#6416](https://github.com/vuejs/core/issues/6416) ([0db336f](https://github.com/vuejs/core/commit/0db336ff6c640fb9d3e48943c69f4c1737412be4))
+* **types:** add `xmlns:xlink` to `SVGAttributes` ([#9300](https://github.com/vuejs/core/issues/9300)) ([0d61b42](https://github.com/vuejs/core/commit/0d61b429ecf63591d31e09702058fa4c7132e1a7)), closes [#9299](https://github.com/vuejs/core/issues/9299)
+* **types:** support for generic keyof slots ([#8374](https://github.com/vuejs/core/issues/8374)) ([213eba4](https://github.com/vuejs/core/commit/213eba479ce080efc1053fe636f6be4a4c889b44))
+
+
+### Features
+
+* **compiler-core:** add current filename to TransformContext ([#8950](https://github.com/vuejs/core/issues/8950)) ([638f1ab](https://github.com/vuejs/core/commit/638f1abbb632000553e2b7d75e87c95d8ca192d6))
+* **compiler-sfc:** promote defineModel stable ([#9598](https://github.com/vuejs/core/issues/9598)) ([ef688ba](https://github.com/vuejs/core/commit/ef688ba92bfccbc8b7ea3997eb297665d13e5249))
+* **compiler-sfc:** support import attributes and `using` syntax ([#8786](https://github.com/vuejs/core/issues/8786)) ([5b2bd1d](https://github.com/vuejs/core/commit/5b2bd1df78e8ff524c3a184adaa284681aba6574))
+* **defineModel:** support local mutation by default, remove local option ([f74785b](https://github.com/vuejs/core/commit/f74785bc4ad351102dde17fdfd2c7276b823111f)), closes [/github.com/vuejs/rfcs/discussions/503#discussioncomment-7566278](https://github.com//github.com/vuejs/rfcs/discussions/503/issues/discussioncomment-7566278)
+* MathML support ([#7836](https://github.com/vuejs/core/issues/7836)) ([d42b6ba](https://github.com/vuejs/core/commit/d42b6ba3f530746eb1221eb7a4be0f44eb56f7d3)), closes [#7820](https://github.com/vuejs/core/issues/7820)
+* **runtime-core:** provide full props to props validator functions ([#3258](https://github.com/vuejs/core/issues/3258)) ([8e27692](https://github.com/vuejs/core/commit/8e27692029a4645cd54287f776c0420f2b82740b))
+* **ssr:** add `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` feature flag ([#9550](https://github.com/vuejs/core/issues/9550)) ([bc7698d](https://github.com/vuejs/core/commit/bc7698dbfed9b5327a93565f9df336ae5a94d605))
+* **ssr:** improve ssr hydration mismatch checks ([#5953](https://github.com/vuejs/core/issues/5953)) ([2ffc1e8](https://github.com/vuejs/core/commit/2ffc1e8cfdc6ec9c45c4a4dd8e3081b2aa138f1e)), closes [#5063](https://github.com/vuejs/core/issues/5063)
+* **types:** add emits and slots type to `FunctionalComponent` ([#8644](https://github.com/vuejs/core/issues/8644)) ([927ab17](https://github.com/vuejs/core/commit/927ab17cfc645e82d061fdf227c34689491268e1))
+* **types:** export AriaAttributes type ([#8909](https://github.com/vuejs/core/issues/8909)) ([fd0b6ba](https://github.com/vuejs/core/commit/fd0b6ba01660499fa07b0cf360eefaac8cca8287))
+* **types:** export ObjectPlugin and FunctionPlugin types ([#8946](https://github.com/vuejs/core/issues/8946)) ([fa4969e](https://github.com/vuejs/core/commit/fa4969e7a3aefa6863203f9294fc5e769ddf6d8f)), closes [#8577](https://github.com/vuejs/core/issues/8577)
+* **types:** expose `DefineProps` type ([096ba81](https://github.com/vuejs/core/commit/096ba81817b7da15f61bc55fc1a93f72ac9586e0))
+* **types:** expose `PublicProps` type ([#2403](https://github.com/vuejs/core/issues/2403)) ([44135dc](https://github.com/vuejs/core/commit/44135dc95fb8fea26b84d1433839d28b8c21f708))
+* **types:** improve event type inference when using `h` with native elements  ([#9756](https://github.com/vuejs/core/issues/9756)) ([a625376](https://github.com/vuejs/core/commit/a625376ac8901eea81bf3c66cb531f2157f073ef))
+* **types:** provide ComponentInstance type ([#5408](https://github.com/vuejs/core/issues/5408)) ([bfb8565](https://github.com/vuejs/core/commit/bfb856565d3105db4b18991ae9e404e7cc989b25))
+* **types:** support passing generics when registering global directives ([#9660](https://github.com/vuejs/core/issues/9660)) ([a41409e](https://github.com/vuejs/core/commit/a41409ed02a8c7220e637f56caf6813edeb077f8))
+
+
+### Performance Improvements
+
+* use sync watcher for defineModel local mode ([7e60d10](https://github.com/vuejs/core/commit/7e60d1058ff06e3d37c8608f3449453321220edc)), closes [/github.com/vuejs/rfcs/discussions/503#discussioncomment-7566278](https://github.com//github.com/vuejs/rfcs/discussions/503/issues/discussioncomment-7566278)
+
+
+
+## [3.3.11](https://github.com/vuejs/core/compare/v3.3.10...v3.3.11) (2023-12-08)
+
+
+### Bug Fixes
+
+* **custom-element:** correctly handle number type props in prod ([#8989](https://github.com/vuejs/core/issues/8989)) ([d74d364](https://github.com/vuejs/core/commit/d74d364d62db8e48881af6b5a75ce4fb5f36cc35))
+* **reactivity:** fix mutation on user proxy of reactive Array ([6ecbd5c](https://github.com/vuejs/core/commit/6ecbd5ce2a7f59314a8326a1d193874b87f4d8c8)), closes [#9742](https://github.com/vuejs/core/issues/9742) [#9751](https://github.com/vuejs/core/issues/9751) [#9750](https://github.com/vuejs/core/issues/9750)
+* **runtime-dom:** fix width and height prop check condition ([5b00286](https://github.com/vuejs/core/commit/5b002869c533220706f9788b496b8ca8d8e98609)), closes [#9762](https://github.com/vuejs/core/issues/9762)
+* **shared:** handle Map with symbol keys in toDisplayString ([#9731](https://github.com/vuejs/core/issues/9731)) ([364821d](https://github.com/vuejs/core/commit/364821d6bdb1775e2f55a69bcfb9f40f7acf1506)), closes [#9727](https://github.com/vuejs/core/issues/9727)
+* **shared:** handle more Symbol cases in toDisplayString ([983d45d](https://github.com/vuejs/core/commit/983d45d4f8eb766b5a16b7ea93b86d3c51618fa6))
+* **Suspense:** properly get anchor when mount fallback vnode ([#9770](https://github.com/vuejs/core/issues/9770)) ([b700328](https://github.com/vuejs/core/commit/b700328342e17dc16b19316c2e134a26107139d2)), closes [#9769](https://github.com/vuejs/core/issues/9769)
+* **types:** ref() return type should not be any when initial value is any ([#9768](https://github.com/vuejs/core/issues/9768)) ([cdac121](https://github.com/vuejs/core/commit/cdac12161ec27b45ded48854c3d749664b6d4a6d))
+* **watch:** should not fire pre watcher on child component unmount ([#7181](https://github.com/vuejs/core/issues/7181)) ([6784f0b](https://github.com/vuejs/core/commit/6784f0b1f8501746ea70d87d18ed63a62cf6b76d)), closes [#7030](https://github.com/vuejs/core/issues/7030)
+
+
+
+# [3.4.0-alpha.4](https://github.com/vuejs/core/compare/v3.3.10...v3.4.0-alpha.4) (2023-12-04)
+
+
+### Bug Fixes
+
+* **compiler-core:** fix referencing typo ([#9708](https://github.com/vuejs/core/issues/9708)) ([3071de4](https://github.com/vuejs/core/commit/3071de44bc4bf669ab6b48fd8db8d728c30fdb0c))
+* **parser:** fix interpolation parsing in v-pre ([53aaa1e](https://github.com/vuejs/core/commit/53aaa1eb2876baf9de16b2f2c77b2c5fd5173900))
+* **parser:** properly set initial inXML state based on root ns ([47ea285](https://github.com/vuejs/core/commit/47ea285be3dcb66a83a593346995b5900d6c5478))
+* **parser:** should reset inRCDATA state ([ef97e8b](https://github.com/vuejs/core/commit/ef97e8b07d8350106c940f23679444b698832067))
+
+
+### Features
+
+* **compiler-core:** support accessing Error as global in template expressions ([#7018](https://github.com/vuejs/core/issues/7018)) ([bcca475](https://github.com/vuejs/core/commit/bcca475dbc58d76434cd8120b94929758cee2825))
+* **compiler-sfc:** analyze import usage in template via AST ([#9729](https://github.com/vuejs/core/issues/9729)) ([e8bbc94](https://github.com/vuejs/core/commit/e8bbc946cba6bf74c9da56f938b67d2a04c340ba)), closes [#8897](https://github.com/vuejs/core/issues/8897) [nuxt/nuxt#22416](https://github.com/nuxt/nuxt/issues/22416)
+* **compiler-sfc:** bump postcss-modules to v6 ([2a507e3](https://github.com/vuejs/core/commit/2a507e32f0e2ef73813705a568b8633f68bda7a9))
+* **compiler:** lift vnode hooks deprecation warning to error ([8abc754](https://github.com/vuejs/core/commit/8abc754d5d86d9dfd5a7927b846f1a743f352364))
+* use enum to replace const enum ([#9261](https://github.com/vuejs/core/issues/9261)) ([fff7b86](https://github.com/vuejs/core/commit/fff7b864f4292d0430ba2bda7098ad43876b0210)), closes [#1228](https://github.com/vuejs/core/issues/1228)
+
+
+
+## [3.3.10](https://github.com/vuejs/core/compare/v3.3.9...v3.3.10) (2023-12-04)
+
+
+### Bug Fixes
+
+* **app:** prevent template from being cached between apps with different options ([#9724](https://github.com/vuejs/core/issues/9724)) ([ec71585](https://github.com/vuejs/core/commit/ec715854ca12520b2afc9e9b3981cbae05ae5206)), closes [#9618](https://github.com/vuejs/core/issues/9618)
+* **compiler-sfc:** avoid passing forEach index to genMap ([f12db7f](https://github.com/vuejs/core/commit/f12db7fb564a534cef2e5805cc9f54afe5d72fbf))
+* **compiler-sfc:** deindent pug/jade templates ([6345197](https://github.com/vuejs/core/commit/634519720a21fb5a6871454e1cadad7053a568b8)), closes [#3231](https://github.com/vuejs/core/issues/3231) [#3842](https://github.com/vuejs/core/issues/3842) [#7723](https://github.com/vuejs/core/issues/7723)
+* **compiler-sfc:** fix :where and :is selector in scoped mode with multiple selectors ([#9735](https://github.com/vuejs/core/issues/9735)) ([c3e2c55](https://github.com/vuejs/core/commit/c3e2c556b532656b50b8ab5cd2d9eabc26622d63)), closes [#9707](https://github.com/vuejs/core/issues/9707)
+* **compiler-sfc:** generate more treeshaking friendly code ([#9507](https://github.com/vuejs/core/issues/9507)) ([8d74ca0](https://github.com/vuejs/core/commit/8d74ca0e6fa2738ca6854b7e879ff59419f948c7)), closes [#9500](https://github.com/vuejs/core/issues/9500)
+* **compiler-sfc:** support inferring generic types ([#8511](https://github.com/vuejs/core/issues/8511)) ([eb5e307](https://github.com/vuejs/core/commit/eb5e307c0be62002e62c4c800d0dfacb39b0d4ca)), closes [#8482](https://github.com/vuejs/core/issues/8482)
+* **compiler-sfc:** support resolving components from props ([#8785](https://github.com/vuejs/core/issues/8785)) ([7cbcee3](https://github.com/vuejs/core/commit/7cbcee3d831241a8bd3588ae92d3f27e3641e25f))
+* **compiler-sfc:** throw error when failing to load TS during type resolution ([#8883](https://github.com/vuejs/core/issues/8883)) ([4936d2e](https://github.com/vuejs/core/commit/4936d2e11a8d0ca3704bfe408548cb26bb3fd5e9))
+* **cssVars:** cssVar names should be double-escaped when generating code for ssr ([#8824](https://github.com/vuejs/core/issues/8824)) ([5199a12](https://github.com/vuejs/core/commit/5199a12f8855cd06f24bf355708b5a2134f63176)), closes [#7823](https://github.com/vuejs/core/issues/7823)
+* **deps:** update compiler to ^7.23.4 ([#9681](https://github.com/vuejs/core/issues/9681)) ([31f6ebc](https://github.com/vuejs/core/commit/31f6ebc4df84490ed29fb75e7bf4259200eb51f0))
+* **runtime-core:** Suspense get anchor properly in Transition ([#9309](https://github.com/vuejs/core/issues/9309)) ([65f3fe2](https://github.com/vuejs/core/commit/65f3fe273127a8b68e1222fbb306d28d85f01757)), closes [#8105](https://github.com/vuejs/core/issues/8105)
+* **runtime-dom:** set width/height with units as attribute ([#8781](https://github.com/vuejs/core/issues/8781)) ([bfc1838](https://github.com/vuejs/core/commit/bfc1838f31199de3f189198a3c234fa7bae91386))
+* **ssr:** avoid computed being accidentally cached before server render ([#9688](https://github.com/vuejs/core/issues/9688)) ([30d5d93](https://github.com/vuejs/core/commit/30d5d93a92b2154406ec04f8aca6b217fa01177c)), closes [#5300](https://github.com/vuejs/core/issues/5300)
+* **types:** expose emits as props in functional components ([#9234](https://github.com/vuejs/core/issues/9234)) ([887e54c](https://github.com/vuejs/core/commit/887e54c347ea9eac4c721b5e2288f054873d1d30))
+* **types:** fix reactive collection types ([#8960](https://github.com/vuejs/core/issues/8960)) ([ad27473](https://github.com/vuejs/core/commit/ad274737015c36906d76f3189203093fa3a2e4e7)), closes [#8904](https://github.com/vuejs/core/issues/8904)
+* **types:** improve return type withKeys and withModifiers ([#9734](https://github.com/vuejs/core/issues/9734)) ([43c3cfd](https://github.com/vuejs/core/commit/43c3cfdec5ae5d70fa2a21e857abc2d73f1a0d07))
+
+
+### Performance Improvements
+
+* optimize on* prop check ([38aaa8c](https://github.com/vuejs/core/commit/38aaa8c88648c54fe2616ad9c0961288092fcb44))
+* **runtime-dom:** cache modifier wrapper functions ([da4a4fb](https://github.com/vuejs/core/commit/da4a4fb5e8eee3c6d31f24ebd79a9d0feca56cb2)), closes [#8882](https://github.com/vuejs/core/issues/8882)
+* **v-on:** constant handlers with modifiers should not be treated as dynamic ([4d94ebf](https://github.com/vuejs/core/commit/4d94ebfe75174b340d2b794e699cad1add3600a9))
+
+
+
+# [3.4.0-alpha.3](https://github.com/vuejs/core/compare/v3.4.0-alpha.2...v3.4.0-alpha.3) (2023-11-28)
+
+
+### Bug Fixes
+
+* **deps:** update compiler to ^7.23.4 ([#9681](https://github.com/vuejs/core/issues/9681)) ([31f6ebc](https://github.com/vuejs/core/commit/31f6ebc4df84490ed29fb75e7bf4259200eb51f0))
+* **parser:** directive arg should be undefined on shorthands with no arg ([e49dffc](https://github.com/vuejs/core/commit/e49dffc9ece86bddf094b9ad4ad15eb4856d6277))
+
+
+### Features
+
+* **dx:** link errors to docs in prod build ([#9165](https://github.com/vuejs/core/issues/9165)) ([9f8ba98](https://github.com/vuejs/core/commit/9f8ba9821fe166f77e63fa940e9e7e13ec3344fa))
+
+
+
+# [3.4.0-alpha.2](https://github.com/vuejs/core/compare/v3.3.9...v3.4.0-alpha.2) (2023-11-27)
+
+
+### Bug Fixes
+
+* avoid confusing breakage in @vitejs/plugin-vue ([ceec69c](https://github.com/vuejs/core/commit/ceec69c8ccb96c433a4a506ad2e85e276998bade))
+* **compiler-core:** fix line/column tracking when fast forwarding ([2e65ea4](https://github.com/vuejs/core/commit/2e65ea481f74db8649df8110a031cbdc98f98c84))
+* **compiler-sfc:** fix ast reuse for ssr ([fb619cf](https://github.com/vuejs/core/commit/fb619cf9a440239f0ba88e327d10001a6a3c8171))
+* **compiler-sfc:** support `:is` and `:where` selector in scoped css rewrite ([#8929](https://github.com/vuejs/core/issues/8929)) ([c6083dc](https://github.com/vuejs/core/commit/c6083dcad31f3e9292c687fada9e32f287e2317f))
+* **compiler-sfc:** use correct compiler when re-parsing in ssr mode ([678378a](https://github.com/vuejs/core/commit/678378afd559481badb486b243722b6287862e09))
+
+
+* feat!: remove reactivity transform (#9321) ([79b8a09](https://github.com/vuejs/core/commit/79b8a0905bf363bf82edd2096fef10c3db6d9c3c)), closes [#9321](https://github.com/vuejs/core/issues/9321)
+
+
+### Features
+
+* **compiler-core:** support specifying root namespace when parsing ([40f72d5](https://github.com/vuejs/core/commit/40f72d5e50b389cb11b7ca13461aa2a75ddacdb4))
+* **compiler-core:** support v-bind shorthand for key and value with the same name ([#9451](https://github.com/vuejs/core/issues/9451)) ([26399aa](https://github.com/vuejs/core/commit/26399aa6fac1596b294ffeba06bb498d86f5508c))
+* **compiler:** improve parsing tolerance for language-tools ([41ff68e](https://github.com/vuejs/core/commit/41ff68ea579d933333392146625560359acb728a))
+* **reactivity:** expose last result for computed getter ([#9497](https://github.com/vuejs/core/issues/9497)) ([48b47a1](https://github.com/vuejs/core/commit/48b47a1ab63577e2dbd91947eea544e3ef185b85))
+
+
+### Performance Improvements
+
+* avoid sfc source map unnecessary serialization and parsing ([f15d2f6](https://github.com/vuejs/core/commit/f15d2f6cf69c0c39f8dfb5c33122790c68bf92e2))
+* **codegen:** optimize line / column calculation during codegen ([3be53d9](https://github.com/vuejs/core/commit/3be53d9b974dae1a10eb795cade71ae765e17574))
+* **codegen:** optimize source map generation ([c11002f](https://github.com/vuejs/core/commit/c11002f16afd243a2b15b546816e73882eea9e4d))
+* **compiler-sfc:** remove magic-string trim on script ([e8e3ec6](https://github.com/vuejs/core/commit/e8e3ec6ca7392e43975c75b56eaaa711d5ea9410))
+* **compiler-sfc:** use faster source map addMapping ([50cde7c](https://github.com/vuejs/core/commit/50cde7cfbcc49022ba88f5f69fa9b930b483c282))
+* optimize away isBuiltInType ([66c0ed0](https://github.com/vuejs/core/commit/66c0ed0a3c1c6f37dafc6b1c52b75c6bf60e3136))
+* optimize makeMap ([ae6fba9](https://github.com/vuejs/core/commit/ae6fba94954bac6430902f77b0d1113a98a75b18))
+* optimize position cloning ([2073236](https://github.com/vuejs/core/commit/20732366b9b3530d33b842cf1fc985919afb9317))
+
+
+### BREAKING CHANGES
+
+* Reactivity Transform was marked deprecated in 3.3 and is now removed in 3.4. This change does not require a major due to the feature being experimental. Users who wish to continue using the feature can do so via the external plugin at https://vue-macros.dev/features/reactivity-transform.html
+
+
+
+## [3.3.9](https://github.com/vuejs/core/compare/v3.3.8...v3.3.9) (2023-11-25)
+
+
+### Bug Fixes
+
+* **compiler-core:** avoid rewriting scope variables in inline for loops ([#7245](https://github.com/vuejs/core/issues/7245)) ([a2d810e](https://github.com/vuejs/core/commit/a2d810eb40cef631f61991ca68b426ee9546aba0)), closes [#7238](https://github.com/vuejs/core/issues/7238)
+* **compiler-core:** fix `resolveParserPlugins` decorators check ([#9566](https://github.com/vuejs/core/issues/9566)) ([9d0eba9](https://github.com/vuejs/core/commit/9d0eba916f3bf6fb5c03222400edae1a2db7444f)), closes [#9560](https://github.com/vuejs/core/issues/9560)
+* **compiler-sfc:** consistently escape type-only prop names ([#8654](https://github.com/vuejs/core/issues/8654)) ([3e08d24](https://github.com/vuejs/core/commit/3e08d246dfd8523c54fb8e7a4a6fd5506ffb1bcc)), closes [#8635](https://github.com/vuejs/core/issues/8635) [#8910](https://github.com/vuejs/core/issues/8910) [vitejs/vite-plugin-vue#184](https://github.com/vitejs/vite-plugin-vue/issues/184)
+* **compiler-sfc:** malformed filename on windows using path.posix.join() ([#9478](https://github.com/vuejs/core/issues/9478)) ([f18a174](https://github.com/vuejs/core/commit/f18a174979626b3429db93c5d5b7ae5448917c70)), closes [#8671](https://github.com/vuejs/core/issues/8671) [#9583](https://github.com/vuejs/core/issues/9583) [#9446](https://github.com/vuejs/core/issues/9446) [#9473](https://github.com/vuejs/core/issues/9473)
+* **compiler-sfc:** support `:is` and `:where` selector in scoped css rewrite ([#8929](https://github.com/vuejs/core/issues/8929)) ([3227e50](https://github.com/vuejs/core/commit/3227e50b32105f8893f7dff2f29278c5b3a9f621))
+* **compiler-sfc:** support resolve extends interface for defineEmits ([#8470](https://github.com/vuejs/core/issues/8470)) ([9e1b74b](https://github.com/vuejs/core/commit/9e1b74bcd5fa4151f5d1bc02c69fbbfa4762f577)), closes [#8465](https://github.com/vuejs/core/issues/8465)
+* **hmr/transition:** fix kept-alive component inside transition disappearing after hmr ([#7126](https://github.com/vuejs/core/issues/7126)) ([d11e978](https://github.com/vuejs/core/commit/d11e978fc98dcc83526c167e603b8308f317f786)), closes [#7121](https://github.com/vuejs/core/issues/7121)
+* **hydration:** force hydration for v-bind with .prop modifier ([364f319](https://github.com/vuejs/core/commit/364f319d214226770d97c98d8fcada80c9e8dde3)), closes [#7490](https://github.com/vuejs/core/issues/7490)
+* **hydration:** properly hydrate indeterminate prop ([34b5a5d](https://github.com/vuejs/core/commit/34b5a5da4ae9c9faccac237acd7acc8e7e017571)), closes [#7476](https://github.com/vuejs/core/issues/7476)
+* **reactivity:** clear method on readonly collections should return undefined ([#7316](https://github.com/vuejs/core/issues/7316)) ([657476d](https://github.com/vuejs/core/commit/657476dcdb964be4fbb1277c215c073f3275728e))
+* **reactivity:** onCleanup also needs to be cleaned ([#8655](https://github.com/vuejs/core/issues/8655)) ([73fd810](https://github.com/vuejs/core/commit/73fd810eebdd383a2b4629f67736c4db1f428abd)), closes [#5151](https://github.com/vuejs/core/issues/5151) [#7695](https://github.com/vuejs/core/issues/7695)
+* **ssr:** hydration `__vnode` missing for devtools ([#9328](https://github.com/vuejs/core/issues/9328)) ([5156ac5](https://github.com/vuejs/core/commit/5156ac5b38cfa80d3db26f2c9bf40cb22a7521cb))
+* **types:** allow falsy value types in `StyleValue` ([#7954](https://github.com/vuejs/core/issues/7954)) ([17aa92b](https://github.com/vuejs/core/commit/17aa92b79b31d8bb8b5873ddc599420cb9806db8)), closes [#7955](https://github.com/vuejs/core/issues/7955)
+* **types:** defineCustomElement using defineComponent return type with emits ([#7937](https://github.com/vuejs/core/issues/7937)) ([5d932a8](https://github.com/vuejs/core/commit/5d932a8e6d14343c9d7fc7c2ecb58ac618b2f938)), closes [#7782](https://github.com/vuejs/core/issues/7782)
+* **types:** fix `unref` and `toValue` when input union type contains ComputedRef ([#8748](https://github.com/vuejs/core/issues/8748)) ([176d476](https://github.com/vuejs/core/commit/176d47671271b1abc21b1508e9a493c7efca6451)), closes [#8747](https://github.com/vuejs/core/issues/8747) [#8857](https://github.com/vuejs/core/issues/8857)
+* **types:** fix instance type when props type is incompatible with setup returned type ([#7338](https://github.com/vuejs/core/issues/7338)) ([0e1e8f9](https://github.com/vuejs/core/commit/0e1e8f919e5a74cdaadf9c80ee135088b25e7fa3)), closes [#5885](https://github.com/vuejs/core/issues/5885)
+* **types:** fix shallowRef return type with union value type ([#7853](https://github.com/vuejs/core/issues/7853)) ([7c44800](https://github.com/vuejs/core/commit/7c448000b0def910c2cfabfdf7ff20a3d6bc844f)), closes [#7852](https://github.com/vuejs/core/issues/7852)
+* **types:** more precise types for class bindings ([#8012](https://github.com/vuejs/core/issues/8012)) ([46e3374](https://github.com/vuejs/core/commit/46e33744c890bd49482c5e5c5cdea44e00ec84d5))
+* **types:** remove optional properties from defineProps return type ([#6421](https://github.com/vuejs/core/issues/6421)) ([94c049d](https://github.com/vuejs/core/commit/94c049d930d922069e38ea8700d7ff0970f71e61)), closes [#6420](https://github.com/vuejs/core/issues/6420)
+* **types:** return type of withDefaults should be readonly ([#8601](https://github.com/vuejs/core/issues/8601)) ([f15debc](https://github.com/vuejs/core/commit/f15debc01acb22d23f5acee97e6f02db88cef11a))
+* **types:** revert class type restrictions ([5d077c8](https://github.com/vuejs/core/commit/5d077c8754cc14f85d2d6d386df70cf8c0d93842)), closes [#8012](https://github.com/vuejs/core/issues/8012)
+* **types:** update jsx type definitions ([#8607](https://github.com/vuejs/core/issues/8607)) ([58e2a94](https://github.com/vuejs/core/commit/58e2a94871ae06a909c5f8bad07fb401193e6a38))
+* **types:** widen ClassValue type ([2424013](https://github.com/vuejs/core/commit/242401305944422d0c361b16101a4d18908927af))
+* **v-model:** avoid overwriting number input with same value ([#7004](https://github.com/vuejs/core/issues/7004)) ([40f4b77](https://github.com/vuejs/core/commit/40f4b77bb570868cb6e47791078767797e465989)), closes [#7003](https://github.com/vuejs/core/issues/7003)
+* **v-model:** unnecessary value binding error should apply to dynamic instead of static binding ([2859b65](https://github.com/vuejs/core/commit/2859b653c9a22460e60233cac10fe139e359b046)), closes [#3596](https://github.com/vuejs/core/issues/3596)
+
+
+
+## [3.3.8](https://github.com/vuejs/core/compare/v3.3.7...v3.3.8) (2023-11-06)
+
+
+### Bug Fixes
+
+* **compile-sfc:** support `Error` type in `defineProps` ([#5955](https://github.com/vuejs/core/issues/5955)) ([a989345](https://github.com/vuejs/core/commit/a9893458ec519aae442e1b99e64e6d74685cd22c))
+* **compiler-core:** known global should be shadowed by local variables in expression rewrite ([#9492](https://github.com/vuejs/core/issues/9492)) ([a75d1c5](https://github.com/vuejs/core/commit/a75d1c5c6242e91a73cc5ba01e6da620dea0b3d9)), closes [#9482](https://github.com/vuejs/core/issues/9482)
+* **compiler-sfc:** fix dynamic directive arguments usage check for slots ([#9495](https://github.com/vuejs/core/issues/9495)) ([b39fa1f](https://github.com/vuejs/core/commit/b39fa1f8157647859331ce439c42ae016a49b415)), closes [#9493](https://github.com/vuejs/core/issues/9493)
+* **deps:** update dependency @vue/repl to ^2.6.2 ([#9536](https://github.com/vuejs/core/issues/9536)) ([5cef325](https://github.com/vuejs/core/commit/5cef325f41e3b38657c72fa1a38dedeee1c7a60a))
+* **deps:** update dependency @vue/repl to ^2.6.3 ([#9540](https://github.com/vuejs/core/issues/9540)) ([176d590](https://github.com/vuejs/core/commit/176d59058c9aecffe9da4d4311e98496684f06d4))
+* **hydration:** fix tagName access error on comment/text node hydration mismatch ([dd8a0cf](https://github.com/vuejs/core/commit/dd8a0cf5dcde13d2cbd899262a0e07f16e14e489)), closes [#9531](https://github.com/vuejs/core/issues/9531)
+* **types:** avoid exposing lru-cache types in generated dts ([462aeb3](https://github.com/vuejs/core/commit/462aeb3b600765e219ded2ee9a0ed1e74df61de0)), closes [#9521](https://github.com/vuejs/core/issues/9521)
+* **warn:** avoid warning on empty children with Suspense ([#3962](https://github.com/vuejs/core/issues/3962)) ([405f345](https://github.com/vuejs/core/commit/405f34587a63a5f1e3d147b9848219ea98acc22d))
+
+
+
+# [3.4.0-alpha.1](https://github.com/vuejs/core/compare/v3.3.7...v3.4.0-alpha.1) (2023-10-28)
+
+
+### Features
+
+* **compiler-core:** export error message ([#8729](https://github.com/vuejs/core/issues/8729)) ([f7e80ee](https://github.com/vuejs/core/commit/f7e80ee4a065a9eaba98720abf415d9e87756cbd))
+* **compiler-sfc:** expose resolve type-based props and emits ([#8874](https://github.com/vuejs/core/issues/8874)) ([9e77580](https://github.com/vuejs/core/commit/9e77580c0c2f0d977bd0031a1d43cc334769d433))
+* export runtime error strings ([#9301](https://github.com/vuejs/core/issues/9301)) ([feb2f2e](https://github.com/vuejs/core/commit/feb2f2edce2d91218a5e9a52c81e322e4033296b))
+* **reactivity:** more efficient reactivity system ([#5912](https://github.com/vuejs/core/issues/5912)) ([16e06ca](https://github.com/vuejs/core/commit/16e06ca08f5a1e2af3fc7fb35de153dbe0c3087d)), closes [#311](https://github.com/vuejs/core/issues/311) [#1811](https://github.com/vuejs/core/issues/1811) [#6018](https://github.com/vuejs/core/issues/6018) [#7160](https://github.com/vuejs/core/issues/7160) [#8714](https://github.com/vuejs/core/issues/8714) [#9149](https://github.com/vuejs/core/issues/9149) [#9419](https://github.com/vuejs/core/issues/9419) [#9464](https://github.com/vuejs/core/issues/9464)
+* **runtime-core:** add `once` option to watch ([#9034](https://github.com/vuejs/core/issues/9034)) ([a645e7a](https://github.com/vuejs/core/commit/a645e7aa51006516ba668b3a4365d296eb92ee7d))
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 000000000..b752b2e19
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,181 @@
+import importX from 'eslint-plugin-import-x'
+import tseslint from 'typescript-eslint'
+import vitest from '@vitest/eslint-plugin'
+import { builtinModules } from 'node:module'
+
+const DOMGlobals = ['window', 'document']
+const NodeGlobals = ['module', 'require']
+
+const banConstEnum = {
+  selector: 'TSEnumDeclaration[const=true]',
+  message:
+    'Please use non-const enums. This project automatically inlines enums.',
+}
+
+export default tseslint.config(
+  {
+    files: ['**/*.js', '**/*.ts', '**/*.tsx'],
+    extends: [tseslint.configs.base],
+    plugins: {
+      'import-x': importX,
+    },
+    rules: {
+      'no-debugger': 'error',
+      'no-console': ['error', { allow: ['warn', 'error', 'info'] }],
+      // most of the codebase are expected to be env agnostic
+      'no-restricted-globals': ['error', ...DOMGlobals, ...NodeGlobals],
+
+      'no-restricted-syntax': [
+        'error',
+        banConstEnum,
+        {
+          selector: 'ObjectPattern > RestElement',
+          message:
+            'Our output target is ES2016, and object rest spread results in ' +
+            'verbose helpers and should be avoided.',
+        },
+        {
+          selector: 'ObjectExpression > SpreadElement',
+          message:
+            'esbuild transpiles object spread into very verbose inline helpers.\n' +
+            'Please use the `extend` helper from @vue/shared instead.',
+        },
+        {
+          selector: 'AwaitExpression',
+          message:
+            'Our output target is ES2016, so async/await syntax should be avoided.',
+        },
+        {
+          selector: 'ChainExpression',
+          message:
+            'Our output target is ES2016, and optional chaining results in ' +
+            'verbose helpers and should be avoided.',
+        },
+      ],
+      'sort-imports': ['error', { ignoreDeclarationSort: true }],
+
+      'import-x/no-nodejs-modules': [
+        'error',
+        { allow: builtinModules.map(mod => `node:${mod}`) },
+      ],
+      // This rule enforces the preference for using '@ts-expect-error' comments in TypeScript
+      // code to indicate intentional type errors, improving code clarity and maintainability.
+      '@typescript-eslint/prefer-ts-expect-error': 'error',
+      // Enforce the use of 'import type' for importing types
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          fixStyle: 'inline-type-imports',
+          disallowTypeAnnotations: false,
+        },
+      ],
+      // Enforce the use of top-level import type qualifier when an import only has specifiers with inline type qualifiers
+      '@typescript-eslint/no-import-type-side-effects': 'error',
+    },
+  },
+
+  // tests, no restrictions (runs in Node / Vitest with jsdom)
+  {
+    files: [
+      '**/__tests__/**',
+      'packages-private/dts-test/**',
+      'packages-private/dts-build-test/**',
+    ],
+    plugins: { vitest },
+    languageOptions: {
+      globals: {
+        ...vitest.environments.env.globals,
+      },
+    },
+    rules: {
+      'no-console': 'off',
+      'no-restricted-globals': 'off',
+      'no-restricted-syntax': 'off',
+      'vitest/no-disabled-tests': 'error',
+      'vitest/no-focused-tests': 'error',
+    },
+  },
+
+  // shared, may be used in any env
+  {
+    files: ['packages/shared/**', 'eslint.config.js'],
+    rules: {
+      'no-restricted-globals': 'off',
+    },
+  },
+
+  // Packages targeting DOM
+  {
+    files: ['packages/{vue,vue-compat,runtime-dom}/**'],
+    rules: {
+      'no-restricted-globals': ['error', ...NodeGlobals],
+    },
+  },
+
+  // Packages targeting Node
+  {
+    files: ['packages/{compiler-sfc,compiler-ssr,server-renderer}/**'],
+    rules: {
+      'no-restricted-globals': ['error', ...DOMGlobals],
+      'no-restricted-syntax': ['error', banConstEnum],
+    },
+  },
+
+  // Private package, browser only + no syntax restrictions
+  {
+    files: [
+      'packages-private/template-explorer/**',
+      'packages-private/sfc-playground/**',
+    ],
+    rules: {
+      'no-restricted-globals': ['error', ...NodeGlobals],
+      'no-restricted-syntax': ['error', banConstEnum],
+      'no-console': 'off',
+    },
+  },
+
+  // JavaScript files
+  {
+    files: ['*.js'],
+    rules: {
+      // We only do `no-unused-vars` checks for js files, TS files are checked by TypeScript itself.
+      'no-unused-vars': ['error', { vars: 'all', args: 'none' }],
+    },
+  },
+
+  // Node scripts
+  {
+    files: [
+      'eslint.config.js',
+      'rollup*.config.js',
+      'scripts/**',
+      './*.{js,ts}',
+      'packages/*/*.js',
+      'packages/vue/*/*.js',
+    ],
+    rules: {
+      'no-restricted-globals': 'off',
+      'no-restricted-syntax': ['error', banConstEnum],
+      'no-console': 'off',
+    },
+  },
+
+  // Import nodejs modules in compiler-sfc
+  {
+    files: ['packages/compiler-sfc/src/**'],
+    rules: {
+      'import-x/no-nodejs-modules': ['error', { allow: builtinModules }],
+    },
+  },
+
+  {
+    ignores: [
+      '**/dist/',
+      '**/temp/',
+      '**/coverage/',
+      '.idea/',
+      'explorations/',
+      'dts-build/packages',
+    ],
+  },
+)
diff --git a/package.json b/package.json
index 7b6fe3201..b58d1f73c 100644
--- a/package.json
+++ b/package.json
@@ -1,55 +1,57 @@
 {
   "private": true,
-  "version": "3.3.9",
-  "packageManager": "pnpm@8.11.0",
+  "version": "3.5.11",
+  "packageManager": "pnpm@9.12.0",
   "type": "module",
   "scripts": {
     "dev": "node scripts/dev.js",
     "build": "node scripts/build.js",
-    "build-dts": "tsc -p tsconfig.build.json && rollup -c rollup.dts.config.js",
-    "clean": "rimraf packages/*/dist temp .eslintcache",
-    "size": "run-s \"size-*\" && tsx scripts/usage-size.ts",
+    "build-dts": "tsc -p tsconfig.build.json --noCheck && rollup -c rollup.dts.config.js",
+    "clean": "rimraf --glob packages/*/dist temp .eslintcache",
+    "size": "run-s \"size-*\" && node scripts/usage-size.js",
     "size-global": "node scripts/build.js vue runtime-dom -f global -p --size",
     "size-esm-runtime": "node scripts/build.js vue -f esm-bundler-runtime",
     "size-esm": "node scripts/build.js runtime-dom runtime-core reactivity shared -f esm-bundler",
     "check": "tsc --incremental --noEmit",
-    "lint": "eslint --cache --ext .ts packages/*/{src,__tests__}/**.ts",
-    "format": "prettier --write --cache \"**/*.[tj]s?(x)\"",
-    "format-check": "prettier --check --cache \"**/*.[tj]s?(x)\"",
+    "lint": "eslint --cache .",
+    "format": "prettier --write --cache .",
+    "format-check": "prettier --check --cache .",
     "test": "vitest",
-    "test-unit": "vitest -c vitest.unit.config.ts",
-    "test-e2e": "node scripts/build.js vue -f global -d && vitest -c vitest.e2e.config.ts",
+    "test-unit": "vitest --project unit",
+    "test-e2e": "node scripts/build.js vue -f global -d && vitest --project e2e",
     "test-dts": "run-s build-dts test-dts-only",
-    "test-dts-only": "tsc -p ./packages/dts-test/tsconfig.test.json",
-    "test-coverage": "vitest -c vitest.unit.config.ts --coverage",
+    "test-dts-only": "tsc -p packages-private/dts-built-test/tsconfig.json && tsc -p ./packages-private/dts-test/tsconfig.test.json",
+    "test-coverage": "vitest run --project unit --coverage",
+    "test-bench": "vitest bench",
     "release": "node scripts/release.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "dev-esm": "node scripts/dev.js -if esm-bundler-runtime",
     "dev-compiler": "run-p \"dev template-explorer\" serve",
     "dev-sfc": "run-s dev-sfc-prepare dev-sfc-run",
     "dev-sfc-prepare": "node scripts/pre-dev-sfc.js || npm run build-all-cjs",
-    "dev-sfc-serve": "vite packages/sfc-playground --host",
+    "dev-sfc-serve": "vite packages-private/sfc-playground --host",
     "dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev vue -ipf esm-browser-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",
     "serve": "serve",
-    "open": "open http://localhost:3000/packages/template-explorer/local.html",
-    "build-sfc-playground": "run-s build-all-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self",
-    "build-all-cjs": "node scripts/build.js vue runtime compiler reactivity reactivity-transform shared -af cjs",
+    "open": "open http://localhost:3000/packages-private/template-explorer/local.html",
+    "build-sfc-playground": "run-s build-all-cjs build-runtime-esm build-browser-esm build-ssr-esm build-sfc-playground-self",
+    "build-all-cjs": "node scripts/build.js vue runtime compiler reactivity shared -af cjs",
     "build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
+    "build-browser-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler && node scripts/build.js vue -f esm-browser",
     "build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser",
-    "build-sfc-playground-self": "cd packages/sfc-playground && npm run build",
+    "build-sfc-playground-self": "cd packages-private/sfc-playground && npm run build",
     "preinstall": "npx only-allow pnpm",
     "postinstall": "simple-git-hooks"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged && pnpm check",
-    "commit-msg": "node scripts/verifyCommit.js"
+    "commit-msg": "node scripts/verify-commit.js"
   },
   "lint-staged": {
     "*.{js,json}": [
       "prettier --write"
     ],
     "*.ts?(x)": [
-      "eslint",
+      "eslint --fix",
       "prettier --parser=typescript --write"
     ]
   },
@@ -57,54 +59,65 @@
     "node": ">=18.12.0"
   },
   "devDependencies": {
-    "@babel/parser": "^7.23.4",
-    "@babel/types": "^7.23.4",
-    "@rollup/plugin-alias": "^5.0.1",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.4",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@babel/parser": "catalog:",
+    "@babel/types": "catalog:",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "5.0.4",
+    "@swc/core": "^1.7.28",
     "@types/hash-sum": "^1.0.2",
-    "@types/node": "^20.10.0",
-    "@typescript-eslint/parser": "^6.13.0",
-    "@vitest/coverage-istanbul": "^0.34.6",
-    "@vue/consolidate": "0.17.3",
-    "conventional-changelog-cli": "^4.1.0",
+    "@types/node": "^20.16.10",
+    "@types/semver": "^7.5.8",
+    "@types/serve-handler": "^6.1.4",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vue/consolidate": "1.0.0",
+    "conventional-changelog-cli": "^5.0.0",
     "enquirer": "^2.4.1",
-    "esbuild": "^0.19.5",
+    "esbuild": "^0.24.0",
     "esbuild-plugin-polyfill-node": "^0.3.0",
-    "eslint": "^8.54.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "estree-walker": "^2.0.2",
-    "execa": "^8.0.1",
-    "jsdom": "^22.1.0",
-    "lint-staged": "^15.1.0",
+    "eslint": "^9.12.0",
+    "eslint-plugin-import-x": "^4.3.1",
+    "@vitest/eslint-plugin": "^1.0.1",
+    "estree-walker": "catalog:",
+    "jsdom": "^25.0.0",
+    "lint-staged": "^15.2.10",
     "lodash": "^4.17.21",
-    "magic-string": "^0.30.5",
+    "magic-string": "^0.30.11",
     "markdown-table": "^3.0.3",
-    "marked": "^9.1.6",
-    "minimist": "^1.2.8",
-    "npm-run-all": "^4.1.5",
-    "picocolors": "^1.0.0",
-    "prettier": "^3.1.0",
+    "marked": "13.0.3",
+    "npm-run-all2": "^6.2.3",
+    "picocolors": "^1.1.0",
+    "prettier": "^3.3.3",
     "pretty-bytes": "^6.1.1",
-    "pug": "^3.0.2",
-    "puppeteer": "~21.5.2",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.1.4",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-esbuild": "^6.1.0",
-    "rollup-plugin-polyfill-node": "^0.12.0",
-    "semver": "^7.5.4",
-    "serve": "^14.2.1",
-    "simple-git-hooks": "^2.9.0",
-    "terser": "^5.22.0",
+    "pug": "^3.0.3",
+    "puppeteer": "~23.3.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.24.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "semver": "^7.6.3",
+    "serve": "^14.2.3",
+    "serve-handler": "^6.1.5",
+    "simple-git-hooks": "^2.11.1",
     "todomvc-app-css": "^2.4.3",
-    "tslib": "^2.6.2",
-    "tsx": "^4.5.0",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.0",
-    "vitest": "^0.34.6"
+    "tslib": "^2.7.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.8.0",
+    "vite": "catalog:",
+    "vitest": "^2.1.1"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "typescript-eslint>eslint": "^9.0.0",
+        "@typescript-eslint/eslint-plugin>eslint": "^9.0.0",
+        "@typescript-eslint/parser>eslint": "^9.0.0",
+        "@typescript-eslint/type-utils>eslint": "^9.0.0",
+        "@typescript-eslint/utils>eslint": "^9.0.0"
+      }
+    }
   }
 }
diff --git a/packages/dts-built-test/README.md b/packages-private/dts-built-test/README.md
similarity index 65%
rename from packages/dts-built-test/README.md
rename to packages-private/dts-built-test/README.md
index 8191d66e3..5c14f2190 100644
--- a/packages/dts-built-test/README.md
+++ b/packages-private/dts-built-test/README.md
@@ -2,4 +2,4 @@
 
 This package is private and for testing only. It is used to verify edge cases for external libraries that build their types using Vue core types - e.g. Vuetify as in [#8376](https://github.com/vuejs/core/issues/8376).
 
-When running the `build-dts` task, this package's types are built alongside other packages. Then, during `test-dts-only` it is imported and used in [`packages/dts-test/built.test-d.ts`](https://github.com/vuejs/core/blob/main/packages/dts-test/built.test-d.ts) to verify that the built types work correctly.
+When running the `build-dts` task, this package's types are built alongside other packages. Then, during `test-dts-only` it is imported and used in [`packages-private/dts-test/built.test-d.ts`](https://github.com/vuejs/core/blob/main/packages-private/dts-test/built.test-d.ts) to verify that the built types work correctly.
diff --git a/packages/dts-built-test/package.json b/packages-private/dts-built-test/package.json
similarity index 69%
rename from packages/dts-built-test/package.json
rename to packages-private/dts-built-test/package.json
index dca0f80fa..ffcaa4a67 100644
--- a/packages/dts-built-test/package.json
+++ b/packages-private/dts-built-test/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "@vue/dts-built-test",
+  "name": "dts-built-test",
   "private": true,
   "version": "0.0.0",
-  "types": "dist/dts-built-test.d.ts",
+  "types": "dist/index.d.ts",
   "dependencies": {
     "@vue/shared": "workspace:*",
     "@vue/reactivity": "workspace:*",
diff --git a/packages/dts-built-test/src/index.ts b/packages-private/dts-built-test/src/index.ts
similarity index 94%
rename from packages/dts-built-test/src/index.ts
rename to packages-private/dts-built-test/src/index.ts
index 2d9d40332..1cdf6de72 100644
--- a/packages/dts-built-test/src/index.ts
+++ b/packages-private/dts-built-test/src/index.ts
@@ -2,7 +2,7 @@ import { defineComponent } from 'vue'
 
 const _CustomPropsNotErased = defineComponent({
   props: {},
-  setup() {}
+  setup() {},
 })
 
 // #8376
diff --git a/packages-private/dts-built-test/tsconfig.json b/packages-private/dts-built-test/tsconfig.json
new file mode 100644
index 000000000..99d9024dc
--- /dev/null
+++ b/packages-private/dts-built-test/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "jsx": "preserve",
+    "module": "esnext",
+    "strict": true,
+    "moduleResolution": "Bundler",
+    "lib": ["esnext", "dom"],
+    "declaration": true,
+    "emitDeclarationOnly": true
+  },
+  "include": ["./src"]
+}
diff --git a/packages-private/dts-test/README.md b/packages-private/dts-test/README.md
new file mode 100644
index 000000000..075fc3431
--- /dev/null
+++ b/packages-private/dts-test/README.md
@@ -0,0 +1,7 @@
+# dts-test
+
+Tests TypeScript types to ensure the types remain as expected.
+
+- This directory is included in the root `tsconfig.json`, where package imports are aliased to `src` directories, so in IDEs and the `pnpm check` script the types are validated against source code.
+
+- When running `tsc` with `packages-private/dts-test/tsconfig.test.json`, packages are resolved using normal `node` resolution, so the types are validated against actual **built** types. This requires the types to be built first via `pnpm build-dts`.
diff --git a/packages-private/dts-test/appDirective.test-d.ts b/packages-private/dts-test/appDirective.test-d.ts
new file mode 100644
index 000000000..fb655a039
--- /dev/null
+++ b/packages-private/dts-test/appDirective.test-d.ts
@@ -0,0 +1,19 @@
+import { createApp } from 'vue'
+import { expectType } from './utils'
+
+const app = createApp({})
+
+app.directive<HTMLElement, string, 'prevent' | 'stop', 'arg1' | 'arg2'>(
+  'custom',
+  {
+    mounted(el, binding) {
+      expectType<HTMLElement>(el)
+      expectType<string>(binding.value)
+      expectType<{ prevent: boolean; stop: boolean }>(binding.modifiers)
+      expectType<'arg1' | 'arg2'>(binding.arg!)
+
+      // @ts-expect-error not any
+      expectType<number>(binding.value)
+    },
+  },
+)
diff --git a/packages/dts-test/appUse.test-d.ts b/packages-private/dts-test/appUse.test-d.ts
similarity index 89%
rename from packages/dts-test/appUse.test-d.ts
rename to packages-private/dts-test/appUse.test-d.ts
index ebfc986a7..065f69568 100644
--- a/packages/dts-test/appUse.test-d.ts
+++ b/packages-private/dts-test/appUse.test-d.ts
@@ -1,10 +1,10 @@
-import { createApp, App, Plugin, defineComponent } from 'vue'
+import { type App, type Plugin, createApp, defineComponent } from 'vue'
 
 const app = createApp({})
 
 // Plugin without types accept anything
 const PluginWithoutType: Plugin = {
-  install(app: App) {}
+  install(app: App) {},
 }
 
 app.use(PluginWithoutType)
@@ -22,12 +22,12 @@ const PluginWithObjectOptions = {
     options.option1
     options.option2
     options.option3
-  }
+  },
 }
 
 for (const Plugin of [
   PluginWithObjectOptions,
-  PluginWithObjectOptions.install
+  PluginWithObjectOptions.install,
 ]) {
   // @ts-expect-error: no params
   app.use(Plugin)
@@ -42,7 +42,7 @@ for (const Plugin of [
 }
 
 const PluginNoOptions = {
-  install(app: App) {}
+  install(app: App) {},
 }
 
 for (const Plugin of [PluginNoOptions, PluginNoOptions.install]) {
@@ -55,7 +55,7 @@ for (const Plugin of [PluginNoOptions, PluginNoOptions.install]) {
 }
 
 const PluginMultipleArgs = {
-  install: (app: App, a: string, b: number) => {}
+  install: (app: App, a: string, b: number) => {},
 }
 
 for (const Plugin of [PluginMultipleArgs, PluginMultipleArgs.install]) {
@@ -67,12 +67,12 @@ for (const Plugin of [PluginMultipleArgs, PluginMultipleArgs.install]) {
 const PluginOptionalOptions = {
   install(
     app: App,
-    options: PluginOptions = { option2: 2, option3: true, option1: 'foo' }
+    options: PluginOptions = { option2: 2, option3: true, option1: 'foo' },
   ) {
     options.option1
     options.option2
     options.option3
-  }
+  },
 }
 
 for (const Plugin of [PluginOptionalOptions, PluginOptionalOptions.install]) {
@@ -102,6 +102,6 @@ app.component(
   defineComponent({
     ...aliases[key],
     name: key,
-    aliasName: aliases[key].name
-  })
+    aliasName: aliases[key].name,
+  }),
 )
diff --git a/packages/dts-test/built.test-d.ts b/packages-private/dts-test/built.test-d.ts
similarity index 69%
rename from packages/dts-test/built.test-d.ts
rename to packages-private/dts-test/built.test-d.ts
index 8ac3e333f..c2b4fb6d8 100644
--- a/packages/dts-test/built.test-d.ts
+++ b/packages-private/dts-test/built.test-d.ts
@@ -1,5 +1,5 @@
-import { CustomPropsNotErased } from '@vue/dts-built-test'
-import { expectType, describe } from './utils'
+import { CustomPropsNotErased } from 'dts-built-test/src/index'
+import { describe, expectType } from './utils'
 
 declare module 'vue' {
   interface ComponentCustomProps {
diff --git a/packages/dts-test/compiler.test-d.ts b/packages-private/dts-test/compiler.test-d.ts
similarity index 92%
rename from packages/dts-test/compiler.test-d.ts
rename to packages-private/dts-test/compiler.test-d.ts
index c62823739..2729a3cc4 100644
--- a/packages/dts-test/compiler.test-d.ts
+++ b/packages-private/dts-test/compiler.test-d.ts
@@ -1,13 +1,13 @@
 import {
-  createBlock,
-  VNode,
-  Teleport,
-  Text,
-  Static,
   Comment,
   Fragment,
+  Static,
   Suspense,
-  defineComponent
+  Teleport,
+  Text,
+  type VNode,
+  createBlock,
+  defineComponent,
 } from 'vue'
 import { expectType } from './utils'
 
diff --git a/packages/dts-test/component.test-d.ts b/packages-private/dts-test/component.test-d.ts
similarity index 85%
rename from packages/dts-test/component.test-d.ts
rename to packages-private/dts-test/component.test-d.ts
index 5535419f1..d08eca12a 100644
--- a/packages/dts-test/component.test-d.ts
+++ b/packages-private/dts-test/component.test-d.ts
@@ -1,21 +1,29 @@
 import {
-  Component,
+  type Component,
+  type ComponentPublicInstance,
+  type EmitsOptions,
+  type FunctionalComponent,
+  type PropType,
+  type Ref,
+  type SetupContext,
+  type ShallowUnwrapRef,
   defineComponent,
-  PropType,
   ref,
-  Ref,
-  ShallowUnwrapRef,
-  FunctionalComponent,
-  ComponentPublicInstance,
   toRefs,
-  SetupContext
 } from 'vue'
-import { describe, expectAssignable, expectType, IsAny } from './utils'
+import { type IsAny, describe, expectAssignable, expectType } from './utils'
 
-declare function extractComponentOptions<Props, RawBindings>(
-  obj: Component<Props, RawBindings>
+declare function extractComponentOptions<
+  Props,
+  RawBindings,
+  Emits extends EmitsOptions | Record<string, any[]>,
+  Slots extends Record<string, any>,
+>(
+  obj: Component<Props, RawBindings, any, any, any, Emits, Slots>,
 ): {
   props: Props
+  emits: Emits
+  slots: Slots
   rawBindings: RawBindings
   setup: ShallowUnwrapRef<RawBindings>
 }
@@ -71,24 +79,24 @@ describe('object props', () => {
         // required should make property non-void
         b: {
           type: String,
-          required: true
+          required: true,
         },
         e: Function,
         // default value should infer type and make it non-void
         bb: {
-          default: 'hello'
+          default: 'hello',
         },
         bbb: {
           // Note: default function value requires arrow syntax + explicit
           // annotation
-          default: (props: any) => (props.bb as string) || 'foo'
+          default: (props: any) => (props.bb as string) || 'foo',
         },
         // explicit type casting
         cc: Array as PropType<string[]>,
         // required + type casting
         dd: {
           type: Object as PropType<{ n: 1 }>,
-          required: true
+          required: true,
         },
         // return type
         ee: Function as PropType<() => string>,
@@ -99,39 +107,39 @@ describe('object props', () => {
         // required + constructor type casting
         ddd: {
           type: Array as () => string[],
-          required: true
+          required: true,
         },
         // required + object return
         eee: {
           type: Function as PropType<() => { a: string }>,
-          required: true
+          required: true,
         },
         // required + arguments + object return
         fff: {
           type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-          required: true
+          required: true,
         },
         hhh: {
           type: Boolean,
-          required: true
+          required: true,
         },
         // default + type casting
         ggg: {
           type: String as PropType<'foo' | 'bar'>,
-          default: 'foo'
+          default: 'foo',
         },
         // default + function
         ffff: {
           type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-          default: (_a: number, _b: string) => ({ a: true })
+          default: (_a: number, _b: string) => ({ a: true }),
         },
         validated: {
           type: String,
           // validator requires explicit annotation
-          validator: (val: unknown) => val !== ''
+          validator: (val: unknown) => val !== '',
         },
         object: Object as PropType<object>,
-        zzz: Object as PropType<any>
+        zzz: Object as PropType<any>,
       },
       setup(props) {
         const refs = toRefs(props)
@@ -159,12 +167,12 @@ describe('object props', () => {
           setupA: 1,
           setupB: ref(1),
           setupC: {
-            a: ref(2)
+            a: ref(2),
           },
           setupD: undefined as Ref<number> | undefined,
-          setupProps: props
+          setupProps: props,
         }
-      }
+      },
     })
 
     const { props, rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -254,24 +262,24 @@ describe('object props', () => {
         // required should make property non-void
         b: {
           type: String,
-          required: true
+          required: true,
         },
         e: Function,
         // default value should infer type and make it non-void
         bb: {
-          default: 'hello'
+          default: 'hello',
         },
         bbb: {
           // Note: default function value requires arrow syntax + explicit
           // annotation
-          default: (props: any) => (props.bb as string) || 'foo'
+          default: (props: any) => (props.bb as string) || 'foo',
         },
         // explicit type casting
         cc: Array as PropType<string[]>,
         // required + type casting
         dd: {
           type: Object as PropType<{ n: 1 }>,
-          required: true
+          required: true,
         },
         // return type
         ee: Function as PropType<() => string>,
@@ -282,45 +290,45 @@ describe('object props', () => {
         // required + constructor type casting
         ddd: {
           type: Array as () => string[],
-          required: true
+          required: true,
         },
         // required + object return
         eee: {
           type: Function as PropType<() => { a: string }>,
-          required: true
+          required: true,
         },
         // required + arguments + object return
         fff: {
           type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-          required: true
+          required: true,
         },
         hhh: {
           type: Boolean,
-          required: true
+          required: true,
         },
         // default + type casting
         ggg: {
           type: String as PropType<'foo' | 'bar'>,
-          default: 'foo'
+          default: 'foo',
         },
         // default + function
         ffff: {
           type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-          default: (_a: number, _b: string) => ({ a: true })
+          default: (_a: number, _b: string) => ({ a: true }),
         },
         validated: {
           type: String,
           // validator requires explicit annotation
-          validator: (val: unknown) => val !== ''
+          validator: (val: unknown) => val !== '',
         },
-        object: Object as PropType<object>
+        object: Object as PropType<object>,
       },
 
       setup() {
         return {
-          setupA: 1
+          setupA: 1,
         }
-      }
+      },
     } as const
 
     const { props, rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -359,9 +367,9 @@ describe('array props', () => {
       props: ['a', 'b'],
       setup() {
         return {
-          c: 1
+          c: 1,
         }
-      }
+      },
     })
 
     const { props, rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -380,9 +388,9 @@ describe('array props', () => {
       props: ['a', 'b'] as const,
       setup() {
         return {
-          c: 1
+          c: 1,
         }
-      }
+      },
     }
 
     const { props, rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -404,9 +412,9 @@ describe('no props', () => {
     const MyComponent = defineComponent({
       setup() {
         return {
-          setupA: 1
+          setupA: 1,
         }
-      }
+      },
     })
 
     const { rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -425,9 +433,9 @@ describe('no props', () => {
     const MyComponent = {
       setup() {
         return {
-          setupA: 1
+          setupA: 1,
         }
-      }
+      },
     }
 
     const { rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -455,11 +463,27 @@ describe('functional', () => {
   })
 
   describe('typed', () => {
-    const MyComponent: FunctionalComponent<{ foo: number }> = (_, _2) => {}
+    type Props = { foo: number }
+    type Emits = { change: [value: string]; inc: [value: number] }
+    type Slots = { default: (scope: { foo: string }) => any }
 
-    const { props } = extractComponentOptions(MyComponent)
+    const MyComponent: FunctionalComponent<Props, Emits, Slots> = (
+      props,
+      { emit, slots },
+    ) => {
+      expectType<Props>(props)
+      expectType<{
+        (event: 'change', value: string): void
+        (event: 'inc', value: number): void
+      }>(emit)
+      expectType<Slots>(slots)
+    }
 
-    expectType<number>(props.foo)
+    const { props, emits, slots } = extractComponentOptions(MyComponent)
+
+    expectType<Props>(props)
+    expectType<Emits>(emits)
+    expectType<Slots>(slots)
   })
 })
 
@@ -481,4 +505,18 @@ describe('SetupContext', () => {
 
     expectAssignable<SetupContext<{ b: () => true }>>(wider)
   })
+
+  describe('short emits', () => {
+    const {
+      emit,
+    }: SetupContext<{
+      a: [val: string]
+      b: [val: number]
+    }> = {} as any
+
+    expectType<{
+      (event: 'a', val: string): void
+      (event: 'b', val: number): void
+    }>(emit)
+  })
 })
diff --git a/packages-private/dts-test/componentInstance.test-d.tsx b/packages-private/dts-test/componentInstance.test-d.tsx
new file mode 100644
index 000000000..a804bb10d
--- /dev/null
+++ b/packages-private/dts-test/componentInstance.test-d.tsx
@@ -0,0 +1,139 @@
+import {
+  type ComponentInstance,
+  type ComponentPublicInstance,
+  type FunctionalComponent,
+  defineComponent,
+  ref,
+} from 'vue'
+import { describe, expectType } from './utils'
+
+describe('defineComponent', () => {
+  const CompSetup = defineComponent({
+    props: {
+      test: String,
+    },
+    setup() {
+      return {
+        a: 1,
+      }
+    },
+  })
+  const compSetup: ComponentInstance<typeof CompSetup> = {} as any
+
+  expectType<string | undefined>(compSetup.test)
+  expectType<number>(compSetup.a)
+  expectType<ComponentPublicInstance>(compSetup)
+})
+describe('functional component', () => {
+  // Functional
+  const CompFunctional: FunctionalComponent<{ test?: string }> = {} as any
+  const compFunctional: ComponentInstance<typeof CompFunctional> = {} as any
+
+  expectType<string | undefined>(compFunctional.test)
+  expectType<ComponentPublicInstance>(compFunctional)
+
+  const CompFunction: (props: { test?: string }) => any = {} as any
+  const compFunction: ComponentInstance<typeof CompFunction> = {} as any
+
+  expectType<string | undefined>(compFunction.test)
+  expectType<ComponentPublicInstance>(compFunction)
+})
+
+describe('options component', () => {
+  // Options
+  const CompOptions = defineComponent({
+    props: {
+      test: String,
+    },
+    data() {
+      return {
+        a: 1,
+      }
+    },
+    computed: {
+      b() {
+        return 'test'
+      },
+    },
+    methods: {
+      func(a: string) {
+        return true
+      },
+    },
+  })
+  const compOptions: ComponentInstance<typeof CompOptions> = {} as any
+  expectType<string | undefined>(compOptions.test)
+  expectType<number>(compOptions.a)
+  expectType<(a: string) => boolean>(compOptions.func)
+  expectType<ComponentPublicInstance>(compOptions)
+})
+
+describe('object no defineComponent', () => {
+  // object - no defineComponent
+
+  const CompObjectSetup = {
+    props: {
+      test: String,
+    },
+    setup() {
+      return {
+        a: 1,
+      }
+    },
+  }
+  const compObjectSetup: ComponentInstance<typeof CompObjectSetup> = {} as any
+  expectType<string | undefined>(compObjectSetup.test)
+  expectType<number>(compObjectSetup.a)
+  expectType<ComponentPublicInstance>(compObjectSetup)
+
+  const CompObjectData = {
+    props: {
+      test: String,
+    },
+    data() {
+      return {
+        a: 1,
+      }
+    },
+  }
+  const compObjectData: ComponentInstance<typeof CompObjectData> = {} as any
+  expectType<string | undefined>(compObjectData.test)
+  expectType<number>(compObjectData.a)
+  expectType<ComponentPublicInstance>(compObjectData)
+
+  const CompObjectNoProps = {
+    data() {
+      return {
+        a: 1,
+      }
+    },
+  }
+  const compObjectNoProps: ComponentInstance<typeof CompObjectNoProps> =
+    {} as any
+  expectType<string | undefined>(compObjectNoProps.test)
+  expectType<number>(compObjectNoProps.a)
+  expectType<ComponentPublicInstance>(compObjectNoProps)
+})
+
+describe('Generic component', () => {
+  const Comp = defineComponent(
+    // TODO: babel plugin to auto infer runtime props options from type
+    // similar to defineProps<{...}>()
+    <T extends string | number>(props: { msg: T; list: T[] }) => {
+      // use Composition API here like in <script setup>
+      const count = ref(0)
+
+      return () => (
+        // return a render function (both JSX and h() works)
+        <div>
+          {props.msg} {count.value}
+        </div>
+      )
+    },
+  )
+
+  // defaults to known types since types are resolved on instantiation
+  const comp: ComponentInstance<typeof Comp> = {} as any
+  expectType<string | number>(comp.msg)
+  expectType<Array<string | number>>(comp.list)
+})
diff --git a/packages/dts-test/componentTypeExtensions.test-d.tsx b/packages-private/dts-test/componentTypeExtensions.test-d.tsx
similarity index 78%
rename from packages/dts-test/componentTypeExtensions.test-d.tsx
rename to packages-private/dts-test/componentTypeExtensions.test-d.tsx
index 4b3c5d7d1..fe58c0a64 100644
--- a/packages/dts-test/componentTypeExtensions.test-d.tsx
+++ b/packages-private/dts-test/componentTypeExtensions.test-d.tsx
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { type DefineComponent, type Directive, defineComponent } from 'vue'
 import { expectType } from './utils'
 
 declare module 'vue' {
@@ -6,6 +6,14 @@ declare module 'vue' {
     test?(n: number): void
   }
 
+  interface GlobalDirectives {
+    test: Directive
+  }
+
+  interface GlobalComponents {
+    RouterView: DefineComponent<{}>
+  }
+
   interface ComponentCustomProperties {
     state?: 'stopped' | 'running'
   }
@@ -20,8 +28,8 @@ export const Custom = defineComponent({
     bar: String,
     baz: {
       type: Number,
-      required: true
-    }
+      required: true,
+    },
   },
 
   data: () => ({ counter: 0 }),
@@ -42,10 +50,12 @@ export const Custom = defineComponent({
       this.state = 'not valid'
       // @ts-expect-error
       this.$.appContext.config.globalProperties.state = 'not valid'
-    }
-  }
+    },
+  },
 })
 
+expectType<Directive>(Custom.directives!.test)
+expectType<DefineComponent<{}>>(Custom.components!.RouterView)
 expectType<JSX.Element>(<Custom baz={1} />)
 expectType<JSX.Element>(<Custom custom={1} baz={1} />)
 expectType<JSX.Element>(<Custom bar="bar" baz={1} />)
diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages-private/dts-test/defineComponent.test-d.tsx
similarity index 70%
rename from packages/dts-test/defineComponent.test-d.tsx
rename to packages-private/dts-test/defineComponent.test-d.tsx
index 9c989c23b..9b4c18471 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages-private/dts-test/defineComponent.test-d.tsx
@@ -1,21 +1,21 @@
 import {
-  Component,
-  defineComponent,
-  PropType,
-  ref,
-  reactive,
+  type Component,
+  type ComponentOptions,
+  type ComponentPublicInstance,
+  type PropType,
+  type SetupContext,
+  type Slots,
+  type SlotsType,
+  type VNode,
   createApp,
-  ComponentPublicInstance,
-  ComponentOptions,
-  SetupContext,
+  defineComponent,
   h,
-  SlotsType,
-  Slots,
-  VNode,
+  reactive,
+  ref,
   withKeys,
-  withModifiers
+  withModifiers,
 } from 'vue'
-import { describe, expectType, IsUnion } from './utils'
+import { type IsAny, type IsUnion, describe, expectType } from './utils'
 
 describe('with object props', () => {
   interface ExpectedProps {
@@ -56,34 +56,34 @@ describe('with object props', () => {
     // required should make property non-void
     b: {
       type: String,
-      required: true as true
+      required: true as true,
     },
     e: Function,
     h: Boolean,
     j: Function as PropType<undefined | (() => string | undefined)>,
     // default value should infer type and make it non-void
     bb: {
-      default: 'hello'
+      default: 'hello',
     },
     bbb: {
       // Note: default function value requires arrow syntax + explicit
       // annotation
-      default: (props: any) => (props.bb as string) || 'foo'
+      default: (props: any) => (props.bb as string) || 'foo',
     },
     bbbb: {
       type: String,
-      default: undefined
+      default: undefined,
     },
     bbbbb: {
       type: String,
-      default: () => undefined
+      default: () => undefined,
     },
     // explicit type casting
     cc: Array as PropType<string[]>,
     // required + type casting
     dd: {
       type: Object as PropType<{ n: 1 }>,
-      required: true as true
+      required: true as true,
     },
     // return type
     ee: Function as PropType<() => string>,
@@ -94,31 +94,31 @@ describe('with object props', () => {
     // required + constructor type casting
     ddd: {
       type: Array as () => string[],
-      required: true as true
+      required: true as true,
     },
     // required + object return
     eee: {
       type: Function as PropType<() => { a: string }>,
-      required: true as true
+      required: true as true,
     },
     // required + arguments + object return
     fff: {
       type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-      required: true as true
+      required: true as true,
     },
     hhh: {
       type: Boolean,
-      required: true as true
+      required: true as true,
     },
     // default + type casting
     ggg: {
       type: String as PropType<'foo' | 'bar'>,
-      default: 'foo'
+      default: 'foo',
     },
     // default + function
     ffff: {
       type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-      default: (a: number, b: string) => ({ a: a > +b })
+      default: (a: number, b: string) => ({ a: a > +b }),
     },
     // union + function with different return types
     iii: Function as PropType<(() => string) | (() => number)>,
@@ -127,18 +127,18 @@ describe('with object props', () => {
       type: Function as PropType<
         ((arg1: string) => string) | ((arg1: string, arg2: string) => string)
       >,
-      required: true as true
+      required: true as true,
     },
     kkk: null,
     validated: {
       type: String,
       // validator requires explicit annotation
-      validator: (val: unknown) => val !== ''
+      validator: (val: unknown) => val !== '',
     },
     date: Date,
     l: [Date],
     ll: [Date, Number],
-    lll: [String, Number]
+    lll: [String, Number],
   }
 
   const MyComponent = defineComponent({
@@ -185,11 +185,11 @@ describe('with object props', () => {
       return {
         c: ref(1),
         d: {
-          e: ref('hi')
+          e: ref('hi'),
         },
         f: reactive({
-          g: ref('hello' as GT)
-        })
+          g: ref('hello' as GT),
+        }),
       }
     },
     provide() {
@@ -260,7 +260,7 @@ describe('with object props', () => {
       this.c = 2
 
       return null
-    }
+    },
   })
 
   expectType<Component>(MyComponent)
@@ -290,7 +290,7 @@ describe('with object props', () => {
       // should allow ref
       ref={'foo'}
       ref_for={true}
-    />
+    />,
   )
 
   expectType<Component>(
@@ -302,7 +302,7 @@ describe('with object props', () => {
       fff={(a, b) => ({ a: a > +b })}
       hhh={false}
       jjj={() => ''}
-    />
+    />,
   )
 
   // @ts-expect-error missing required props
@@ -327,13 +327,13 @@ describe('with object props', () => {
         default(): number {
           // @ts-expect-error
           return this.otherProp + 1
-        }
+        },
       },
       otherProp: {
         type: Number,
-        required: true
-      }
-    }
+        required: true,
+      },
+    },
   })
 })
 
@@ -343,9 +343,9 @@ describe('type inference w/ optional props declaration', () => {
       expectType<string>(props.msg)
       expectType<string[]>(props.a)
       return {
-        b: 1
+        b: 1,
       }
-    }
+    },
   })
 
   expectType<JSX.Element>(<MyComponent msg="1" a={['1']} />)
@@ -373,7 +373,7 @@ describe('type inference w/ array props declaration', () => {
       expectType<any>(props.a)
       expectType<any>(props.b)
       return {
-        c: 1
+        c: 1,
       }
     },
     render() {
@@ -384,7 +384,7 @@ describe('type inference w/ array props declaration', () => {
       expectType<any>(this.a)
       expectType<any>(this.b)
       expectType<number>(this.c)
-    }
+    },
   })
   expectType<JSX.Element>(<MyComponent a={[1, 2]} b="b" />)
   // @ts-expect-error
@@ -396,7 +396,7 @@ describe('type inference w/ options API', () => {
     props: { a: Number },
     setup() {
       return {
-        b: 123
+        b: 123,
       }
     },
     data() {
@@ -405,7 +405,7 @@ describe('type inference w/ options API', () => {
       expectType<number | undefined>(this.a)
       return {
         c: this.a || 123,
-        someRef: ref(0)
+        someRef: ref(0),
       }
     },
     computed: {
@@ -424,14 +424,14 @@ describe('type inference w/ options API', () => {
           expectType<number>(this.b)
           expectType<number>(this.d)
           expectType<number>(v)
-        }
-      }
+        },
+      },
     },
     watch: {
       a() {
         expectType<number>(this.b)
         this.b + 1
-      }
+      },
     },
     created() {
       // props
@@ -461,7 +461,7 @@ describe('type inference w/ options API', () => {
       },
       returnSomething() {
         return this.a
-      }
+      },
     },
     render() {
       // props
@@ -476,40 +476,60 @@ describe('type inference w/ options API', () => {
       expectType<number>(this.e)
       // method
       expectType<() => number | undefined>(this.returnSomething)
-    }
+    },
   })
 })
 
+// #4051
+describe('type inference w/ empty prop object', () => {
+  const MyComponent = defineComponent({
+    props: {},
+    setup(props) {
+      return {}
+    },
+    render() {},
+  })
+  expectType<JSX.Element>(<MyComponent />)
+  // AllowedComponentProps
+  expectType<JSX.Element>(<MyComponent class={'foo'} />)
+  // ComponentCustomProps
+  expectType<JSX.Element>(<MyComponent custom={1} />)
+  // VNodeProps
+  expectType<JSX.Element>(<MyComponent key="1" />)
+  // @ts-expect-error
+  expectError(<MyComponent other="other" />)
+})
+
 describe('with mixins', () => {
   const MixinA = defineComponent({
     emits: ['bar'],
     props: {
       aP1: {
         type: String,
-        default: 'aP1'
+        default: 'aP1',
       },
-      aP2: Boolean
+      aP2: Boolean,
     },
     data() {
       return {
-        a: 1
+        a: 1,
       }
-    }
+    },
   })
   const MixinB = defineComponent({
     props: ['bP1', 'bP2'],
     data() {
       return {
-        b: 2
+        b: 2,
       }
-    }
+    },
   })
   const MixinC = defineComponent({
     data() {
       return {
-        c: 3
+        c: 3,
       }
-    }
+    },
   })
   const MixinD = defineComponent({
     mixins: [MixinA],
@@ -520,7 +540,7 @@ describe('with mixins', () => {
       expectError<string>(this.dC2)
 
       return {
-        d: 4
+        d: 4,
       }
     },
     setup(props) {
@@ -532,8 +552,8 @@ describe('with mixins', () => {
       },
       dC2() {
         return this.aP1 + 'dC2'
-      }
-    }
+      },
+    },
   })
   const MyComponent = defineComponent({
     mixins: [MixinA, MixinB, MixinC, MixinD],
@@ -542,8 +562,8 @@ describe('with mixins', () => {
       // required should make property non-void
       z: {
         type: String,
-        required: true
-      }
+        required: true,
+      },
     },
 
     data(vm) {
@@ -623,12 +643,12 @@ describe('with mixins', () => {
       this.d = 5
 
       return null
-    }
+    },
   })
 
   // Test TSX
   expectType<JSX.Element>(
-    <MyComponent aP1={'aP'} aP2 bP1={1} bP2={[1, 2]} z={'z'} />
+    <MyComponent aP1={'aP'} aP2 bP1={1} bP2={[1, 2]} z={'z'} />,
   )
 
   // missing required props
@@ -648,19 +668,19 @@ describe('with extends', () => {
       aP1: Boolean,
       aP2: {
         type: Number,
-        default: 2
-      }
+        default: 2,
+      },
     },
     data() {
       return {
-        a: 1
+        a: 1,
       }
     },
     computed: {
       c(): number {
         return this.aP2 + this.a
-      }
-    }
+      },
+    },
   })
   const MyComponent = defineComponent({
     extends: Base,
@@ -668,8 +688,8 @@ describe('with extends', () => {
       // required should make property non-void
       z: {
         type: String,
-        required: true
-      }
+        required: true,
+      },
     },
     render() {
       const props = this.$props
@@ -690,7 +710,7 @@ describe('with extends', () => {
       this.a = 5
 
       return null
-    }
+    },
   })
 
   // Test TSX
@@ -713,19 +733,19 @@ describe('extends with mixins', () => {
     props: {
       mP1: {
         type: String,
-        default: 'mP1'
+        default: 'mP1',
       },
       mP2: Boolean,
       mP3: {
         type: Boolean,
-        required: true
-      }
+        required: true,
+      },
     },
     data() {
       return {
-        a: 1
+        a: 1,
       }
-    }
+    },
   })
   const Base = defineComponent({
     emits: ['foo'],
@@ -733,23 +753,23 @@ describe('extends with mixins', () => {
       p1: Boolean,
       p2: {
         type: Number,
-        default: 2
+        default: 2,
       },
       p3: {
         type: Boolean,
-        required: true
-      }
+        required: true,
+      },
     },
     data() {
       return {
-        b: 2
+        b: 2,
       }
     },
     computed: {
       c(): number {
         return this.p2 + this.b
-      }
-    }
+      },
+    },
   })
   const MyComponent = defineComponent({
     extends: Base,
@@ -759,8 +779,8 @@ describe('extends with mixins', () => {
       // required should make property non-void
       z: {
         type: String,
-        required: true
-      }
+        required: true,
+      },
     },
     render() {
       const props = this.$props
@@ -792,7 +812,7 @@ describe('extends with mixins', () => {
       this.a = 5
 
       return null
-    }
+    },
   })
 
   // Test TSX
@@ -821,14 +841,14 @@ describe('extends with mixins', () => {
   const CompWithD = defineComponent({
     data() {
       return { foo: 1 }
-    }
+    },
   })
   const CompWithC = defineComponent({
     computed: {
       foo() {
         return 1
-      }
-    }
+      },
+    },
   })
   const CompWithM = defineComponent({ methods: { foo() {} } })
   const CompEmpty = defineComponent({})
@@ -837,19 +857,19 @@ describe('extends with mixins', () => {
     mixins: [CompWithD, CompEmpty],
     mounted() {
       expectType<number>(this.foo)
-    }
+    },
   })
   defineComponent({
     mixins: [CompWithC, CompEmpty],
     mounted() {
       expectType<number>(this.foo)
-    }
+    },
   })
   defineComponent({
     mixins: [CompWithM, CompEmpty],
     mounted() {
       expectType<() => void>(this.foo)
-    }
+    },
   })
 })
 
@@ -858,16 +878,16 @@ describe('compatibility w/ createApp', () => {
   createApp(comp).mount('#hello')
 
   const comp2 = defineComponent({
-    props: { foo: String }
+    props: { foo: String },
   })
   createApp(comp2).mount('#hello')
 
   const comp3 = defineComponent({
     setup() {
       return {
-        a: 1
+        a: 1,
       }
-    }
+    },
   })
   createApp(comp3).mount('#hello')
 })
@@ -876,7 +896,7 @@ describe('defineComponent', () => {
   describe('should accept components defined with defineComponent', () => {
     const comp = defineComponent({})
     defineComponent({
-      components: { comp }
+      components: { comp },
     })
   })
 
@@ -886,7 +906,7 @@ describe('defineComponent', () => {
       constructor(_props: { foo: string }) {}
     }
     defineComponent({
-      components: { Comp }
+      components: { Comp },
     })
   })
 })
@@ -905,13 +925,16 @@ describe('emits', () => {
   defineComponent({
     emits: {
       click: (n: number) => typeof n === 'number',
-      input: (b: string) => b.length > 1
+      input: (b: string) => b.length > 1,
+      Focus: (f: boolean) => !!f,
     },
     setup(props, { emit }) {
       expectType<((n: number) => boolean) | undefined>(props.onClick)
       expectType<((b: string) => boolean) | undefined>(props.onInput)
+      expectType<((f: boolean) => boolean) | undefined>(props.onFocus)
       emit('click', 1)
       emit('input', 'foo')
+      emit('Focus', true)
       //  @ts-expect-error
       emit('nope')
       //  @ts-expect-error
@@ -922,6 +945,10 @@ describe('emits', () => {
       emit('input')
       //  @ts-expect-error
       emit('input', 1)
+      //  @ts-expect-error
+      emit('focus')
+      //  @ts-expect-error
+      emit('focus', true)
     },
     created() {
       this.$emit('click', 1)
@@ -936,6 +963,10 @@ describe('emits', () => {
       this.$emit('input')
       //  @ts-expect-error
       this.$emit('input', 1)
+      //  @ts-expect-error
+      this.$emit('focus')
+      //  @ts-expect-error
+      this.$emit('focus', true)
     },
     mounted() {
       // #3599
@@ -954,8 +985,12 @@ describe('emits', () => {
         this.$emit('input')
         //  @ts-expect-error
         this.$emit('input', 1)
+        //  @ts-expect-error
+        this.$emit('focus')
+        //  @ts-expect-error
+        this.$emit('focus', true)
       })
-    }
+    },
   })
 
   // with array emits
@@ -976,13 +1011,13 @@ describe('emits', () => {
       this.$emit('bar')
       //  @ts-expect-error
       this.$emit('nope')
-    }
+    },
   })
 
   // with tsx
   const Component = defineComponent({
     emits: {
-      click: (n: number) => typeof n === 'number'
+      click: (n: number) => typeof n === 'number',
     },
     setup(props, { emit }) {
       expectType<((n: number) => any) | undefined>(props.onClick)
@@ -991,7 +1026,7 @@ describe('emits', () => {
       emit('click')
       //  @ts-expect-error
       emit('click', 'foo')
-    }
+    },
   })
 
   defineComponent({
@@ -1003,15 +1038,27 @@ describe('emits', () => {
           }}
         />
       )
-    }
+    },
   })
 
+  // #11803 manual props annotation in setup()
+  const Hello = defineComponent({
+    name: 'HelloWorld',
+    inheritAttrs: false,
+    props: { foo: String },
+    emits: {
+      customClick: (args: string) => typeof args === 'string',
+    },
+    setup(props: { foo?: string }) {},
+  })
+  ;<Hello onCustomClick={() => {}} />
+
   // without emits
   defineComponent({
     setup(props, { emit }) {
       emit('test', 1)
       emit('test')
-    }
+    },
   })
 
   // emit should be valid when ComponentPublicInstance is used.
@@ -1026,8 +1073,8 @@ describe('emits', () => {
       foo(): boolean {
         // @ts-expect-error
         return this.bar === 3
-      }
-    }
+      },
+    },
   })
 })
 
@@ -1035,18 +1082,18 @@ describe('inject', () => {
   // with object inject
   defineComponent({
     props: {
-      a: String
+      a: String,
     },
     inject: {
       foo: 'foo',
-      bar: 'bar'
+      bar: 'bar',
     },
     created() {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
       this.foobar = 1
-    }
+    },
   })
 
   // with array inject
@@ -1058,7 +1105,7 @@ describe('inject', () => {
       expectType<unknown>(this.bar)
       //  @ts-expect-error
       this.foobar = 1
-    }
+    },
   })
 
   // with no props
@@ -1066,19 +1113,19 @@ describe('inject', () => {
     inject: {
       foo: {
         from: 'pfoo',
-        default: 'foo'
+        default: 'foo',
       },
       bar: {
         from: 'pbar',
-        default: 'bar'
-      }
+        default: 'bar',
+      },
     },
     created() {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
       this.foobar = 1
-    }
+    },
   })
 
   // without inject
@@ -1089,13 +1136,13 @@ describe('inject', () => {
       this.foo = 1
       //  @ts-expect-error
       this.bar = 1
-    }
+    },
   })
 })
 
 describe('componentOptions setup should be `SetupContext`', () => {
   expectType<ComponentOptions['setup']>(
-    {} as (props: Record<string, any>, ctx: SetupContext) => any
+    {} as (props: Record<string, any>, ctx: SetupContext) => any,
   )
 })
 
@@ -1104,17 +1151,17 @@ describe('extract instance type', () => {
     props: {
       baseA: {
         type: Number,
-        default: 1
-      }
-    }
+        default: 1,
+      },
+    },
   })
   const MixinA = defineComponent({
     props: {
       mA: {
         type: String,
-        default: ''
-      }
-    }
+        default: '',
+      },
+    },
   })
   const CompA = defineComponent({
     extends: Base,
@@ -1122,14 +1169,14 @@ describe('extract instance type', () => {
     props: {
       a: {
         type: Boolean,
-        default: false
+        default: false,
       },
       b: {
         type: String,
-        required: true
+        required: true,
       },
-      c: Number
-    }
+      c: Number,
+    },
   })
 
   const compA = {} as InstanceType<typeof CompA>
@@ -1162,11 +1209,11 @@ describe('async setup', () => {
       return {
         a: ref(1),
         b: {
-          c: ref('hi')
+          c: ref('hi'),
         },
         d: reactive({
-          e: ref('hello' as GT)
-        })
+          e: ref('hello' as GT),
+        }),
       }
     },
     render() {
@@ -1177,7 +1224,7 @@ describe('async setup', () => {
 
       // setup context properties should be mutable
       this.a = 2
-    }
+    },
   })
 
   const vm = {} as InstanceType<typeof Comp>
@@ -1199,7 +1246,7 @@ describe('DefineComponent should infer correct types when assigning to Component
       expectType<[]>(attrs)
       // @ts-expect-error should not be any
       expectType<[]>(slots)
-    }
+    },
   })
   expectType<Component>(component)
 })
@@ -1208,15 +1255,15 @@ describe('DefineComponent should infer correct types when assigning to Component
 describe('should allow to assign props', () => {
   const Child = defineComponent({
     props: {
-      bar: String
-    }
+      bar: String,
+    },
   })
 
   const Parent = defineComponent({
     props: {
       ...Child.props,
-      foo: String
-    }
+      foo: String,
+    },
   })
 
   const child = new Child()
@@ -1229,29 +1276,29 @@ describe('prop starting with `on*` is broken', () => {
     props: {
       onX: {
         type: Function as PropType<(a: 1) => void>,
-        required: true
-      }
+        required: true,
+      },
     },
     setup(props) {
       expectType<(a: 1) => void>(props.onX)
       props.onX(1)
-    }
+    },
   })
 
   defineComponent({
     props: {
       onX: {
         type: Function as PropType<(a: 1) => void>,
-        required: true
-      }
+        required: true,
+      },
     },
     emits: {
-      test: (a: 1) => true
+      test: (a: 1) => true,
     },
     setup(props) {
       expectType<(a: 1) => void>(props.onX)
       expectType<undefined | ((a: 1) => any)>(props.onTest)
-    }
+    },
   })
 })
 
@@ -1269,7 +1316,7 @@ describe('function syntax w/ generics', () => {
           {props.msg} {count.value}
         </div>
       )
-    }
+    },
   )
 
   expectType<JSX.Element>(<Comp msg="fse" list={['foo']} />)
@@ -1277,16 +1324,16 @@ describe('function syntax w/ generics', () => {
 
   expectType<JSX.Element>(
     // @ts-expect-error missing prop
-    <Comp msg={123} />
+    <Comp msg={123} />,
   )
 
   expectType<JSX.Element>(
     // @ts-expect-error generics don't match
-    <Comp msg="fse" list={[123]} />
+    <Comp msg="fse" list={[123]} />,
   )
   expectType<JSX.Element>(
     // @ts-expect-error generics don't match
-    <Comp msg={123} list={['123']} />
+    <Comp msg={123} list={['123']} />,
   )
 })
 
@@ -1299,8 +1346,8 @@ describe('function syntax w/ emits', () => {
       return () => {}
     },
     {
-      emits: ['foo']
-    }
+      emits: ['foo'],
+    },
   )
   expectType<JSX.Element>(<Foo msg="hi" onFoo={() => {}} />)
   // @ts-expect-error
@@ -1317,9 +1364,9 @@ describe('function syntax w/ emits', () => {
     },
     {
       emits: {
-        foo: (a: string) => true
-      }
-    }
+        foo: (a: string) => true,
+      },
+    },
   )
 })
 
@@ -1331,8 +1378,8 @@ describe('function syntax w/ runtime props', () => {
       return () => {}
     },
     {
-      props: ['msg']
-    }
+      props: ['msg'],
+    },
   )
 
   defineComponent(
@@ -1340,8 +1387,8 @@ describe('function syntax w/ runtime props', () => {
       return () => {}
     },
     {
-      props: ['msg']
-    }
+      props: ['msg'],
+    },
   )
 
   defineComponent(
@@ -1350,9 +1397,9 @@ describe('function syntax w/ runtime props', () => {
     },
     {
       props: {
-        msg: String
-      }
-    }
+        msg: String,
+      },
+    },
   )
 
   // @ts-expect-error string prop names don't match
@@ -1361,8 +1408,8 @@ describe('function syntax w/ runtime props', () => {
       return () => {}
     },
     {
-      props: ['bar']
-    }
+      props: ['bar'],
+    },
   )
 
   defineComponent(
@@ -1372,9 +1419,9 @@ describe('function syntax w/ runtime props', () => {
     {
       props: {
         // @ts-expect-error prop type mismatch
-        msg: Number
-      }
-    }
+        msg: Number,
+      },
+    },
   )
 
   // @ts-expect-error prop keys don't match
@@ -1385,9 +1432,9 @@ describe('function syntax w/ runtime props', () => {
     {
       props: {
         msg: String,
-        bar: String
-      }
-    }
+        bar: String,
+      },
+    },
   )
 })
 
@@ -1399,16 +1446,16 @@ export default {
   b: defineComponent({
     data() {
       return {}
-    }
+    },
   }),
   c: defineComponent({
-    props: ['a']
+    props: ['a'],
   }),
   d: defineComponent({
     props: {
-      a: Number
-    }
-  })
+      a: Number,
+    },
+  }),
 }
 
 describe('slots', () => {
@@ -1421,10 +1468,10 @@ describe('slots', () => {
     }>,
     setup(props, { slots }) {
       expectType<(scope: { foo: string; bar: number }) => VNode[]>(
-        slots.default
+        slots.default,
       )
       expectType<((scope: { data: string }) => VNode[]) | undefined>(
-        slots.optional
+        slots.optional,
       )
 
       slots.default({ foo: 'foo', bar: 1 })
@@ -1461,7 +1508,7 @@ describe('slots', () => {
       slots.optionalUndefinedScope?.('foo')
 
       expectType<typeof slots | undefined>(new comp1().$slots)
-    }
+    },
   })
 
   const comp2 = defineComponent({
@@ -1469,7 +1516,7 @@ describe('slots', () => {
       // unknown slots
       expectType<Slots>(slots)
       expectType<((...args: any[]) => VNode[]) | undefined>(slots.default)
-    }
+    },
   })
   expectType<Slots | undefined>(new comp2().$slots)
 })
@@ -1481,15 +1528,15 @@ describe('should work when props type is incompatible with setup returned type '
     props: {
       size: {
         type: String as PropType<SizeType>,
-        required: true
-      }
+        required: true,
+      },
     },
     setup(props) {
       expectType<SizeType>(props.size)
       return {
-        size: 1
+        size: 1,
       }
-    }
+    },
   })
   type CompInstance = InstanceType<typeof Comp>
 
@@ -1501,18 +1548,108 @@ describe('should work when props type is incompatible with setup returned type '
 
 describe('withKeys and withModifiers as pro', () => {
   const onKeydown = withKeys(e => {}, [''])
-  const onClick = withModifiers(e => {}, [''])
+  const onClick = withModifiers(e => {}, [])
   ;<input onKeydown={onKeydown} onClick={onClick} />
 })
 
-import {
-  DefineComponent,
-  ComponentOptionsMixin,
-  EmitsOptions,
-  VNodeProps,
+// #3367 expose components types
+describe('expose component types', () => {
+  const child = defineComponent({
+    props: {
+      a: String,
+    },
+  })
+
+  const parent = defineComponent({
+    components: {
+      child,
+      child2: {
+        template: `<div></div>`,
+      },
+    },
+  })
+
+  expectType<typeof child>(parent.components!.child)
+  expectType<Component>(parent.components!.child2)
+
+  // global components
+  expectType<Readonly<KeepAliveProps>>(
+    new parent.components!.KeepAlive().$props,
+  )
+  expectType<Readonly<KeepAliveProps>>(new child.components!.KeepAlive().$props)
+
+  // runtime-dom components
+  expectType<Readonly<TransitionProps>>(
+    new parent.components!.Transition().$props,
+  )
+  expectType<Readonly<TransitionProps>>(
+    new child.components!.Transition().$props,
+  )
+})
+
+describe('directive typing', () => {
+  const customDirective: Directive = {
+    created(_) {},
+  }
+
+  const comp = defineComponent({
+    props: {
+      a: String,
+    },
+    directives: {
+      customDirective,
+      localDirective: {
+        created(_, { arg }) {
+          expectType<string | undefined>(arg)
+        },
+      },
+    },
+  })
+
+  expectType<typeof customDirective>(comp.directives!.customDirective)
+  expectType<Directive>(comp.directives!.localDirective)
+
+  // global directive
+  expectType<typeof vShow>(comp.directives!.vShow)
+})
+
+describe('expose typing', () => {
+  const Comp = defineComponent({
+    expose: ['a', 'b'],
+    props: {
+      some: String,
+    },
+    data() {
+      return { a: 1, b: '2', c: 1 }
+    },
+  })
+
+  expectType<Array<'a' | 'b'>>(Comp.expose!)
+
+  const vm = new Comp()
+  // internal should still be exposed
+  vm.$props
+
+  expectType<number>(vm.a)
+  expectType<string>(vm.b)
+
+  // @ts-expect-error shouldn't be exposed
+  vm.c
+})
+
+import type {
   AllowedComponentProps,
   ComponentCustomProps,
-  ExtractPropTypes
+  ComponentInstance,
+  ComponentOptionsMixin,
+  DefineComponent,
+  Directive,
+  EmitsOptions,
+  ExtractPropTypes,
+  KeepAliveProps,
+  TransitionProps,
+  VNodeProps,
+  vShow,
 } from 'vue'
 
 // code generated by tsc / vue-tsc, make sure this continues to work
@@ -1533,3 +1670,401 @@ declare const MyButton: DefineComponent<
   {}
 >
 ;<MyButton class="x" />
+
+describe('__typeProps backdoor for union type for conditional props', () => {
+  interface CommonProps {
+    size?: 'xl' | 'l' | 'm' | 's' | 'xs'
+  }
+
+  type ConditionalProps =
+    | {
+        color?: 'normal' | 'primary' | 'secondary'
+        appearance?: 'normal' | 'outline' | 'text'
+      }
+    | {
+        color: 'white'
+        appearance: 'outline'
+      }
+
+  type Props = CommonProps & ConditionalProps
+
+  const Comp = defineComponent({
+    __typeProps: {} as Props,
+  })
+  // @ts-expect-error
+  ;<Comp color="white" />
+  // @ts-expect-error
+  ;<Comp color="white" appearance="normal" />
+  ;<Comp color="white" appearance="outline" />
+
+  const c = new Comp()
+
+  // @ts-expect-error
+  c.$props = { color: 'white' }
+  // @ts-expect-error
+  c.$props = { color: 'white', appearance: 'text' }
+  c.$props = { color: 'white', appearance: 'outline' }
+})
+
+describe('__typeEmits backdoor, 3.3+ object syntax', () => {
+  type Emits = {
+    change: [id: number]
+    update: [value: string]
+  }
+
+  const Comp = defineComponent({
+    __typeEmits: {} as Emits,
+    mounted() {
+      this.$props.onChange?.(123)
+      // @ts-expect-error
+      this.$props.onChange?.('123')
+      this.$props.onUpdate?.('foo')
+      // @ts-expect-error
+      this.$props.onUpdate?.(123)
+
+      // @ts-expect-error
+      this.$emit('foo')
+
+      this.$emit('change', 123)
+      // @ts-expect-error
+      this.$emit('change', '123')
+
+      this.$emit('update', 'test')
+      // @ts-expect-error
+      this.$emit('update', 123)
+    },
+  })
+
+  ;<Comp onChange={id => id.toFixed(2)} />
+  ;<Comp onUpdate={id => id.toUpperCase()} />
+  // @ts-expect-error
+  ;<Comp onChange={id => id.slice(1)} />
+  // @ts-expect-error
+  ;<Comp onUpdate={id => id.toFixed(2)} />
+
+  const c = new Comp()
+  // @ts-expect-error
+  c.$emit('foo')
+
+  c.$emit('change', 123)
+  // @ts-expect-error
+  c.$emit('change', '123')
+
+  c.$emit('update', 'test')
+  // @ts-expect-error
+  c.$emit('update', 123)
+})
+
+describe('__typeEmits backdoor, call signature syntax', () => {
+  type Emits = {
+    (e: 'change', id: number): void
+    (e: 'update', value: string): void
+  }
+
+  const Comp = defineComponent({
+    __typeEmits: {} as Emits,
+    mounted() {
+      this.$props.onChange?.(123)
+      // @ts-expect-error
+      this.$props.onChange?.('123')
+      this.$props.onUpdate?.('foo')
+      // @ts-expect-error
+      this.$props.onUpdate?.(123)
+
+      // @ts-expect-error
+      this.$emit('foo')
+
+      this.$emit('change', 123)
+      // @ts-expect-error
+      this.$emit('change', '123')
+
+      this.$emit('update', 'test')
+      // @ts-expect-error
+      this.$emit('update', 123)
+    },
+  })
+
+  ;<Comp onChange={id => id.toFixed(2)} />
+  ;<Comp onUpdate={id => id.toUpperCase()} />
+  // @ts-expect-error
+  ;<Comp onChange={id => id.slice(1)} />
+  // @ts-expect-error
+  ;<Comp onUpdate={id => id.toFixed(2)} />
+
+  const c = new Comp()
+  // @ts-expect-error
+  c.$emit('foo')
+
+  c.$emit('change', 123)
+  // @ts-expect-error
+  c.$emit('change', '123')
+
+  c.$emit('update', 'test')
+  // @ts-expect-error
+  c.$emit('update', 123)
+})
+
+describe('__typeRefs backdoor, object syntax', () => {
+  type Refs = {
+    foo: number
+  }
+
+  const Parent = defineComponent({
+    __typeRefs: {} as { child: ComponentInstance<typeof Child> },
+  })
+  const Child = defineComponent({
+    __typeRefs: {} as Refs,
+  })
+  const c = new Parent()
+  const refs = c.$refs
+
+  expectType<ComponentInstance<typeof Child>>(refs.child)
+  expectType<number>(refs.child.$refs.foo)
+})
+
+describe('__typeEl backdoor', () => {
+  const Comp = defineComponent({
+    __typeEl: {} as HTMLAnchorElement,
+  })
+  const c = new Comp()
+
+  expectType<HTMLAnchorElement>(c.$el)
+})
+
+defineComponent({
+  props: {
+    foo: [String, null],
+  },
+  setup(props) {
+    expectType<IsAny<typeof props.foo>>(false)
+    expectType<string | null | undefined>(props.foo)
+  },
+})
+
+import type * as vue from 'vue'
+
+interface ErrorMessageSlotProps {
+  message: string | undefined
+}
+/**
+ * #10842
+ * component types generated by vue-tsc
+ * relying on legacy CreateComponentPublicInstance signature
+ */
+declare const ErrorMessage: {
+  new (...args: any[]): vue.CreateComponentPublicInstance<
+    Readonly<
+      vue.ExtractPropTypes<{
+        as: {
+          type: StringConstructor
+          default: any
+        }
+        name: {
+          type: StringConstructor
+          required: true
+        }
+      }>
+    >,
+    () =>
+      | VNode<
+          vue.RendererNode,
+          vue.RendererElement,
+          {
+            [key: string]: any
+          }
+        >
+      | vue.Slot<any>
+      | VNode<
+          vue.RendererNode,
+          vue.RendererElement,
+          {
+            [key: string]: any
+          }
+        >[]
+      | {
+          default: () => VNode<
+            vue.RendererNode,
+            vue.RendererElement,
+            {
+              [key: string]: any
+            }
+          >[]
+        },
+    unknown,
+    {},
+    {},
+    vue.ComponentOptionsMixin,
+    vue.ComponentOptionsMixin,
+    {},
+    vue.VNodeProps &
+      vue.AllowedComponentProps &
+      vue.ComponentCustomProps &
+      Readonly<
+        vue.ExtractPropTypes<{
+          as: {
+            type: StringConstructor
+            default: any
+          }
+          name: {
+            type: StringConstructor
+            required: true
+          }
+        }>
+      >,
+    {
+      as: string
+    },
+    true,
+    {},
+    {},
+    {
+      P: {}
+      B: {}
+      D: {}
+      C: {}
+      M: {}
+      Defaults: {}
+    },
+    Readonly<
+      vue.ExtractPropTypes<{
+        as: {
+          type: StringConstructor
+          default: any
+        }
+        name: {
+          type: StringConstructor
+          required: true
+        }
+      }>
+    >,
+    () =>
+      | VNode<
+          vue.RendererNode,
+          vue.RendererElement,
+          {
+            [key: string]: any
+          }
+        >
+      | vue.Slot<any>
+      | VNode<
+          vue.RendererNode,
+          vue.RendererElement,
+          {
+            [key: string]: any
+          }
+        >[]
+      | {
+          default: () => VNode<
+            vue.RendererNode,
+            vue.RendererElement,
+            {
+              [key: string]: any
+            }
+          >[]
+        },
+    {},
+    {},
+    {},
+    {
+      as: string
+    }
+  >
+  __isFragment?: never
+  __isTeleport?: never
+  __isSuspense?: never
+} & vue.ComponentOptionsBase<
+  Readonly<
+    vue.ExtractPropTypes<{
+      as: {
+        type: StringConstructor
+        default: any
+      }
+      name: {
+        type: StringConstructor
+        required: true
+      }
+    }>
+  >,
+  () =>
+    | VNode<
+        vue.RendererNode,
+        vue.RendererElement,
+        {
+          [key: string]: any
+        }
+      >
+    | vue.Slot<any>
+    | VNode<
+        vue.RendererNode,
+        vue.RendererElement,
+        {
+          [key: string]: any
+        }
+      >[]
+    | {
+        default: () => VNode<
+          vue.RendererNode,
+          vue.RendererElement,
+          {
+            [key: string]: any
+          }
+        >[]
+      },
+  unknown,
+  {},
+  {},
+  vue.ComponentOptionsMixin,
+  vue.ComponentOptionsMixin,
+  {},
+  string,
+  {
+    as: string
+  },
+  {},
+  string,
+  {}
+> &
+  vue.VNodeProps &
+  vue.AllowedComponentProps &
+  vue.ComponentCustomProps &
+  (new () => {
+    $slots: {
+      default: (arg: ErrorMessageSlotProps) => VNode[]
+    }
+  })
+;<ErrorMessage name="password" class="error" />
+
+// #10843
+createApp({}).component(
+  'SomeComponent',
+  defineComponent({
+    props: {
+      title: String,
+    },
+    setup(props) {
+      expectType<string | undefined>(props.title)
+      return {}
+    },
+  }),
+)
+
+const Comp = defineComponent({
+  props: {
+    actionText: {
+      type: {} as PropType<string>,
+      default: 'Become a sponsor',
+    },
+  },
+  __typeProps: {} as {
+    actionText?: string
+  },
+})
+
+const instance = new Comp()
+function expectString(s: string) {}
+// instance prop with default should be non-null
+expectString(instance.actionText)
+
+// public prop on $props should be optional
+// @ts-expect-error
+expectString(instance.$props.actionText)
diff --git a/packages-private/dts-test/defineCustomElement.test-d.ts b/packages-private/dts-test/defineCustomElement.test-d.ts
new file mode 100644
index 000000000..f81f8b8fa
--- /dev/null
+++ b/packages-private/dts-test/defineCustomElement.test-d.ts
@@ -0,0 +1,135 @@
+import {
+  type VueElementConstructor,
+  defineComponent,
+  defineCustomElement,
+} from 'vue'
+import { describe, expectType, test } from './utils'
+
+describe('inject', () => {
+  // with object inject
+  defineCustomElement({
+    props: {
+      a: String,
+    },
+    inject: {
+      foo: 'foo',
+      bar: 'bar',
+    },
+    created() {
+      expectType<unknown>(this.foo)
+      expectType<unknown>(this.bar)
+      //  @ts-expect-error
+      this.foobar = 1
+    },
+  })
+
+  // with array inject
+  defineCustomElement({
+    props: ['a', 'b'],
+    inject: ['foo', 'bar'],
+    created() {
+      expectType<unknown>(this.foo)
+      expectType<unknown>(this.bar)
+      //  @ts-expect-error
+      this.foobar = 1
+    },
+  })
+
+  // with no props
+  defineCustomElement({
+    inject: {
+      foo: {
+        from: 'pbar',
+        default: 'foo',
+      },
+      bar: {
+        from: 'pfoo',
+        default: 'bar',
+      },
+    },
+    created() {
+      expectType<unknown>(this.foo)
+      expectType<unknown>(this.bar)
+      //  @ts-expect-error
+      this.foobar = 1
+    },
+  })
+
+  // without inject
+  defineCustomElement({
+    props: ['a', 'b'],
+    created() {
+      //  @ts-expect-error
+      this.foo = 1
+      //  @ts-expect-error
+      this.bar = 1
+    },
+  })
+})
+
+describe('defineCustomElement using defineComponent return type', () => {
+  test('with object emits', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: String,
+      },
+      emits: {
+        click: () => true,
+      },
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    const instance = new Comp()
+    expectType<string | undefined>(instance.a)
+    instance.a = ''
+  })
+
+  test('with array emits', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: Number,
+      },
+      emits: ['click'],
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    const instance = new Comp()
+    expectType<number | undefined>(instance.a)
+    instance.a = 42
+  })
+
+  test('with required props', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: { type: Number, required: true },
+      },
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    const instance = new Comp()
+    expectType<number>(instance.a)
+    instance.a = 42
+  })
+
+  test('with default props', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: {
+          type: Number,
+          default: 1,
+          validator: () => true,
+        },
+      },
+      emits: ['click'],
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    const instance = new Comp()
+    expectType<number>(instance.a)
+    instance.a = 42
+  })
+})
diff --git a/packages-private/dts-test/directives.test-d.ts b/packages-private/dts-test/directives.test-d.ts
new file mode 100644
index 000000000..5b87ebf71
--- /dev/null
+++ b/packages-private/dts-test/directives.test-d.ts
@@ -0,0 +1,58 @@
+import { type Directive, type ObjectDirective, vModelText } from 'vue'
+import { describe, expectType } from './utils'
+
+type ExtractBinding<T> = T extends (
+  el: any,
+  binding: infer B,
+  vnode: any,
+  prev: any,
+) => any
+  ? B
+  : never
+
+declare function testDirective<
+  Value,
+  Modifiers extends string = string,
+  Arg extends string = string,
+>(): ExtractBinding<Directive<any, Value, Modifiers, Arg>>
+
+describe('vmodel', () => {
+  expectType<ObjectDirective<any, any, 'trim' | 'number' | 'lazy', string>>(
+    vModelText,
+  )
+  // @ts-expect-error
+  expectType<ObjectDirective<any, any, 'not-valid', string>>(vModelText)
+})
+
+describe('custom', () => {
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: 'Arg'
+    modifiers: Record<'a' | 'b', boolean>
+  }>(testDirective<number, 'a' | 'b', 'Arg'>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: 'Arg'
+    modifiers: Record<'a' | 'b', boolean>
+    // @ts-expect-error
+  }>(testDirective<number, 'a', 'Arg'>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: 'Arg'
+    modifiers: Record<'a' | 'b', boolean>
+    // @ts-expect-error
+  }>(testDirective<number, 'a' | 'b', 'Argx'>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: 'Arg'
+    modifiers: Record<'a' | 'b', boolean>
+    // @ts-expect-error
+  }>(testDirective<string, 'a' | 'b', 'Arg'>())
+})
diff --git a/packages/dts-test/extractProps.test-d.ts b/packages-private/dts-test/extractProps.test-d.ts
similarity index 78%
rename from packages/dts-test/extractProps.test-d.ts
rename to packages-private/dts-test/extractProps.test-d.ts
index a40a15ef3..3a5acc66e 100644
--- a/packages/dts-test/extractProps.test-d.ts
+++ b/packages-private/dts-test/extractProps.test-d.ts
@@ -1,16 +1,16 @@
-import { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
-import { expectType, Prettify } from './utils'
+import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import { type Prettify, expectType } from './utils'
 
 const propsOptions = {
   foo: {
-    default: 1
+    default: 1,
   },
   bar: {
     type: String,
-    required: true
+    required: true,
   },
   baz: Boolean,
-  qux: Array
+  qux: Array,
 } as const
 
 // internal facing props
diff --git a/packages/dts-test/functionalComponent.test-d.tsx b/packages-private/dts-test/functionalComponent.test-d.tsx
similarity index 93%
rename from packages/dts-test/functionalComponent.test-d.tsx
rename to packages-private/dts-test/functionalComponent.test-d.tsx
index 22efc5849..04eda68b5 100644
--- a/packages/dts-test/functionalComponent.test-d.tsx
+++ b/packages-private/dts-test/functionalComponent.test-d.tsx
@@ -1,4 +1,10 @@
-import { h, Text, FunctionalComponent, Component, VNode } from 'vue'
+import {
+  type Component,
+  type FunctionalComponent,
+  Text,
+  type VNode,
+  h,
+} from 'vue'
 import { expectType } from './utils'
 
 // simple function signature
@@ -33,13 +39,13 @@ const Bar: FunctionalComponent<
 
 // assigning runtime options
 Bar.props = {
-  foo: Number
+  foo: Number,
 }
 //  @ts-expect-error
 Bar.props = { foo: String }
 
 Bar.emits = {
-  update: value => value > 1
+  update: value => value > 1,
 }
 //  @ts-expect-error
 Bar.emits = { baz: () => void 0 }
diff --git a/packages/dts-test/h.test-d.ts b/packages-private/dts-test/h.test-d.ts
similarity index 82%
rename from packages/dts-test/h.test-d.ts
rename to packages-private/dts-test/h.test-d.ts
index f2e984b49..a199e14ce 100644
--- a/packages/dts-test/h.test-d.ts
+++ b/packages-private/dts-test/h.test-d.ts
@@ -1,15 +1,17 @@
 import {
-  h,
-  defineComponent,
-  DefineComponent,
-  ref,
+  type Component,
+  type DefineComponent,
   Fragment,
-  Teleport,
+  type FunctionalComponent,
   Suspense,
-  Component,
-  resolveComponent
+  Teleport,
+  type VNode,
+  defineComponent,
+  h,
+  ref,
+  resolveComponent,
 } from 'vue'
-import { describe, expectAssignable } from './utils'
+import { describe, expectAssignable, expectType } from './utils'
 
 describe('h inference w/ element', () => {
   // key
@@ -32,6 +34,17 @@ describe('h inference w/ element', () => {
   // slots
   const slots = { default: () => {} } // RawSlots
   h('div', {}, slots)
+  // events
+  h('div', {
+    onClick: e => {
+      expectType<MouseEvent>(e)
+    },
+  })
+  h('input', {
+    onFocus(e) {
+      expectType<FocusEvent>(e)
+    },
+  })
 })
 
 describe('h inference w/ Fragment', () => {
@@ -60,12 +73,25 @@ describe('h inference w/ Suspense', () => {
   h(Suspense, 'foo')
   h(Suspense, () => 'foo')
   h(Suspense, null, {
-    default: () => 'foo'
+    default: () => 'foo',
   })
   //  @ts-expect-error
   h(Suspense, { onResolve: 1 })
 })
 
+declare const fc: FunctionalComponent<
+  {
+    foo: string
+    bar?: number
+    onClick: (evt: MouseEvent) => void
+  },
+  ['click'],
+  {
+    default: () => VNode
+    title: (scope: { id: number }) => VNode
+  }
+>
+declare const vnode: VNode
 describe('h inference w/ functional component', () => {
   const Func = (_props: { foo: string; bar?: number }) => ''
   h(Func, { foo: 'hello' })
@@ -76,13 +102,22 @@ describe('h inference w/ functional component', () => {
   h(Func, {})
   //  @ts-expect-error
   h(Func, { bar: 123 })
+
+  h(
+    fc,
+    { foo: 'hello', onClick: () => {} },
+    {
+      default: () => vnode,
+      title: ({ id }: { id: number }) => vnode,
+    },
+  )
 })
 
 describe('h support w/ plain object component', () => {
   const Foo = {
     props: {
-      foo: String
-    }
+      foo: String,
+    },
   }
   h(Foo, { foo: 'ok' })
   h(Foo, { foo: 'ok', class: 'extra' })
@@ -95,9 +130,9 @@ describe('h inference w/ defineComponent', () => {
       foo: String,
       bar: {
         type: Number,
-        required: true
-      }
-    }
+        required: true,
+      },
+    },
   })
 
   h(Foo, { bar: 1 })
@@ -158,7 +193,7 @@ describe('h support for generic component type', () => {
 describe('describeComponent extends Component', () => {
   // functional
   expectAssignable<Component>(
-    defineComponent((_props: { foo?: string; bar: number }) => () => {})
+    defineComponent((_props: { foo?: string; bar: number }) => () => {}),
   )
 
   // typed props
@@ -167,8 +202,8 @@ describe('describeComponent extends Component', () => {
   // prop arrays
   expectAssignable<Component>(
     defineComponent({
-      props: ['a', 'b']
-    })
+      props: ['a', 'b'],
+    }),
   )
 
   // prop object
@@ -178,10 +213,10 @@ describe('describeComponent extends Component', () => {
         foo: String,
         bar: {
           type: Number,
-          required: true
-        }
-      }
-    })
+          required: true,
+        },
+      },
+    }),
   )
 })
 
@@ -191,9 +226,9 @@ describe('component w/ props w/ default value', () => {
     props: {
       message: {
         type: String,
-        default: 'hello'
-      }
-    }
+        default: 'hello',
+      },
+    },
   })
 
   h(MyComponent, {})
@@ -203,8 +238,8 @@ describe('component w/ props w/ default value', () => {
 describe('Boolean prop implicit false', () => {
   const MyComponent = defineComponent({
     props: {
-      visible: Boolean
-    }
+      visible: Boolean,
+    },
   })
 
   h(MyComponent, {})
@@ -213,13 +248,13 @@ describe('Boolean prop implicit false', () => {
     props: {
       visible: {
         type: Boolean,
-        required: true
-      }
-    }
+        required: true,
+      },
+    },
   })
 
   h(RequiredComponent, {
-    visible: true
+    visible: true,
   })
   // @ts-expect-error
   h(RequiredComponent, {})
@@ -229,7 +264,7 @@ describe('Boolean prop implicit false', () => {
 describe('resolveComponent should work', () => {
   h(resolveComponent('test'))
   h(resolveComponent('test'), {
-    message: '1'
+    message: '1',
   })
 })
 
@@ -238,7 +273,7 @@ describe('h should work with multiple types', () => {
   const serializers = {
     Paragraph: 'p',
     Component: {} as Component,
-    DefineComponent: {} as DefineComponent
+    DefineComponent: {} as DefineComponent,
   }
 
   const sampleComponent = serializers['' as keyof typeof serializers]
diff --git a/packages/dts-test/inject.test-d.ts b/packages-private/dts-test/inject.test-d.ts
similarity index 77%
rename from packages/dts-test/inject.test-d.ts
rename to packages-private/dts-test/inject.test-d.ts
index e611f900d..e545ef623 100644
--- a/packages/dts-test/inject.test-d.ts
+++ b/packages-private/dts-test/inject.test-d.ts
@@ -1,4 +1,12 @@
-import { provide, inject, ref, Ref, InjectionKey } from 'vue'
+import {
+  type InjectionKey,
+  type Ref,
+  createApp,
+  defineComponent,
+  inject,
+  provide,
+  ref,
+} from 'vue'
 import { expectType } from './utils'
 
 // non-symbol keys
@@ -40,3 +48,14 @@ provide<Cube>(injectionKeyRef, { size: 123 })
 provide<Cube>('cube', { size: 'foo' })
 // @ts-expect-error
 provide<Cube>(123, { size: 'foo' })
+
+// #10602
+const app = createApp({})
+// @ts-expect-error
+app.provide(injectionKeyRef, ref({}))
+
+defineComponent({
+  provide: {
+    [injectionKeyRef]: { size: 'foo' },
+  },
+})
diff --git a/packages/dts-test/package.json b/packages-private/dts-test/package.json
similarity index 74%
rename from packages/dts-test/package.json
rename to packages-private/dts-test/package.json
index a6ea96bfa..72b1b6ea6 100644
--- a/packages/dts-test/package.json
+++ b/packages-private/dts-test/package.json
@@ -4,6 +4,6 @@
   "version": "0.0.0",
   "dependencies": {
     "vue": "workspace:*",
-    "@vue/dts-built-test": "workspace:*"
+    "dts-built-test": "workspace:*"
   }
 }
diff --git a/packages/dts-test/reactivity.test-d.ts b/packages-private/dts-test/reactivity.test-d.ts
similarity index 69%
rename from packages/dts-test/reactivity.test-d.ts
rename to packages-private/dts-test/reactivity.test-d.ts
index 431bbafbd..f5b917672 100644
--- a/packages/dts-test/reactivity.test-d.ts
+++ b/packages-private/dts-test/reactivity.test-d.ts
@@ -1,4 +1,11 @@
-import { ref, readonly, shallowReadonly, Ref, reactive, markRaw } from 'vue'
+import {
+  type Ref,
+  markRaw,
+  reactive,
+  readonly,
+  ref,
+  shallowReadonly,
+} from 'vue'
 import { describe, expectType } from './utils'
 
 describe('should support DeepReadonly', () => {
@@ -21,18 +28,18 @@ describe('should support markRaw', () => {
   }
   const test = new Test<number>()
   const plain = {
-    ref: ref(1)
+    ref: ref(1),
   }
 
   const r = reactive({
     class: {
       raw: markRaw(test),
-      reactive: test
+      reactive: test,
     },
     plain: {
       raw: markRaw(plain),
-      reactive: plain
-    }
+      reactive: plain,
+    },
   })
 
   expectType<Test<number>>(r.class.raw)
@@ -77,6 +84,18 @@ describe('should unwrap Map correctly', () => {
   expectType<number>(wm2.get({})!.wrap)
 })
 
+describe('should unwrap extended Map correctly', () => {
+  class ExtendendMap1 extends Map<string, { wrap: Ref<number> }> {
+    foo = ref('foo')
+    bar = 1
+  }
+
+  const emap1 = reactive(new ExtendendMap1())
+  expectType<string>(emap1.foo)
+  expectType<number>(emap1.bar)
+  expectType<number>(emap1.get('a')!.wrap)
+})
+
 describe('should unwrap Set correctly', () => {
   const set = reactive(new Set<Ref<number>>())
   expectType<Set<Ref<number>>>(set)
@@ -90,3 +109,24 @@ describe('should unwrap Set correctly', () => {
   const ws2 = reactive(new WeakSet<{ wrap: Ref<number> }>())
   expectType<WeakSet<{ wrap: number }>>(ws2)
 })
+
+describe('should unwrap extended Set correctly', () => {
+  class ExtendendSet1 extends Set<{ wrap: Ref<number> }> {
+    foo = ref('foo')
+    bar = 1
+  }
+
+  const eset1 = reactive(new ExtendendSet1())
+  expectType<string>(eset1.foo)
+  expectType<number>(eset1.bar)
+})
+
+describe('should not error when assignment', () => {
+  const arr = reactive([''])
+  let record: Record<number, string>
+  record = arr
+  expectType<string>(record[0])
+  let record2: { [key: number]: string }
+  record2 = arr
+  expectType<string>(record2[0])
+})
diff --git a/packages/dts-test/ref.test-d.ts b/packages-private/dts-test/ref.test-d.ts
similarity index 68%
rename from packages/dts-test/ref.test-d.ts
rename to packages-private/dts-test/ref.test-d.ts
index 542d9d6a9..89b80a70f 100644
--- a/packages/dts-test/ref.test-d.ts
+++ b/packages-private/dts-test/ref.test-d.ts
@@ -1,24 +1,26 @@
 import {
-  Ref,
-  ref,
-  shallowRef,
-  isRef,
-  unref,
-  reactive,
-  proxyRefs,
-  toRef,
-  toValue,
-  toRefs,
-  ToRefs,
-  shallowReactive,
-  readonly,
-  MaybeRef,
-  MaybeRefOrGetter,
-  ComputedRef,
+  type ComputedRef,
+  type MaybeRef,
+  type MaybeRefOrGetter,
+  type Ref,
+  type ShallowRef,
+  type ToRefs,
+  type WritableComputedRef,
   computed,
-  ShallowRef
+  isRef,
+  proxyRefs,
+  reactive,
+  readonly,
+  ref,
+  shallowReactive,
+  shallowRef,
+  toRef,
+  toRefs,
+  toValue,
+  unref,
+  useTemplateRef,
 } from 'vue'
-import { expectType, describe, IsUnion } from './utils'
+import { type IsAny, type IsUnion, describe, expectType } from './utils'
 
 function plainType(arg: number | Ref<number>) {
   // ref coercing
@@ -37,7 +39,7 @@ function plainType(arg: number | Ref<number>) {
 
   // ref inner type should be unwrapped
   const nestedRef = ref({
-    foo: ref(1)
+    foo: ref(1),
   })
   expectType<{ foo: number }>(nestedRef.value)
 
@@ -60,7 +62,7 @@ function plainType(arg: number | Ref<number>) {
 
   // with symbol
   expectType<Ref<IteratorFoo | null | undefined>>(
-    ref<IteratorFoo | null | undefined>()
+    ref<IteratorFoo | null | undefined>(),
   )
 
   // should not unwrap ref inside arrays
@@ -79,6 +81,10 @@ function plainType(arg: number | Ref<number>) {
   // should still unwrap in objects nested in arrays
   const arr2 = ref([{ a: ref(1) }]).value
   expectType<number>(arr2[0].a)
+
+  // any value should return Ref<any>, not any
+  const a = ref(1 as any)
+  expectType<IsAny<typeof a>>(false)
 }
 
 plainType(1)
@@ -97,13 +103,11 @@ function bailType(arg: HTMLElement | Ref<HTMLElement>) {
   expectType<HTMLElement>(unref(arg))
 
   // ref inner type should be unwrapped
-  // eslint-disable-next-line no-restricted-globals
   const nestedRef = ref({ foo: ref(document.createElement('DIV')) })
 
   expectType<Ref<{ foo: HTMLElement }>>(nestedRef)
   expectType<{ foo: HTMLElement }>(nestedRef.value)
 }
-// eslint-disable-next-line no-restricted-globals
 const el = document.createElement('DIV')
 bailType(el)
 
@@ -123,7 +127,7 @@ function withSymbol() {
     [Symbol.toPrimitive]: new WeakMap<Ref<boolean>, string>(),
     [Symbol.toStringTag]: { weakSet: new WeakSet<Ref<boolean>>() },
     [Symbol.unscopables]: { weakMap: new WeakMap<Ref<boolean>, string>() },
-    [customSymbol]: { arr: [ref(1)] }
+    [customSymbol]: { arr: [ref(1)] },
   }
 
   const objRef = ref(obj)
@@ -140,10 +144,10 @@ function withSymbol() {
   expectType<WeakSet<Ref<boolean>>>(objRef.value[Symbol.split])
   expectType<WeakMap<Ref<boolean>, string>>(objRef.value[Symbol.toPrimitive])
   expectType<{ weakSet: WeakSet<Ref<boolean>> }>(
-    objRef.value[Symbol.toStringTag]
+    objRef.value[Symbol.toStringTag],
   )
   expectType<{ weakMap: WeakMap<Ref<boolean>, string> }>(
-    objRef.value[Symbol.unscopables]
+    objRef.value[Symbol.unscopables],
   )
   expectType<{ arr: Ref<number>[] }>(objRef.value[customSymbol])
 }
@@ -153,12 +157,84 @@ withSymbol()
 const state = reactive({
   foo: {
     value: 1,
-    label: 'bar'
-  }
+    label: 'bar',
+  },
 })
 
 expectType<string>(state.foo.label)
 
+describe('ref with generic', <T extends { name: string }>() => {
+  const r = {} as T
+  const s = ref(r)
+  expectType<string>(s.value.name)
+
+  const rr = {} as MaybeRef<T>
+  // should at least allow casting
+  const ss = ref(rr) as Ref<T>
+  expectType<string>(ss.value.name)
+})
+
+describe('allow getter and setter types to be unrelated', <T>() => {
+  const a = { b: ref(0) }
+  const c = ref(a)
+  c.value = a
+
+  const d = {} as T
+  const e = ref(d)
+  e.value = d
+
+  const f = ref(ref(0))
+  expectType<number>(f.value)
+  // @ts-expect-error
+  f.value = ref(1)
+})
+
+describe('correctly unwraps nested refs', () => {
+  const obj = {
+    n: 24,
+    ref: ref(24),
+    nestedRef: ref({ n: ref(0) }),
+  }
+
+  const a = ref(obj)
+  expectType<number>(a.value.n)
+  expectType<number>(a.value.ref)
+  expectType<number>(a.value.nestedRef.n)
+
+  const b = reactive({ a })
+  expectType<number>(b.a.n)
+  expectType<number>(b.a.ref)
+  expectType<number>(b.a.nestedRef.n)
+})
+
+// computed
+describe('allow computed getter and setter types to be unrelated', () => {
+  const obj = ref({
+    name: 'foo',
+  })
+
+  const c = computed({
+    get() {
+      return JSON.stringify(obj.value)
+    },
+    set(val: typeof obj.value) {
+      obj.value = val
+    },
+  })
+
+  c.value = { name: 'bar' } // object
+
+  expectType<string>(c.value)
+})
+
+describe('Type safety for `WritableComputedRef` and `ComputedRef`', () => {
+  // @ts-expect-error
+  const writableComputed: WritableComputedRef<string> = computed(() => '')
+  // should allow
+  const immutableComputed: ComputedRef<string> = writableComputed
+  expectType<ComputedRef<string>>(immutableComputed)
+})
+
 // shallowRef
 type Status = 'initial' | 'ready' | 'invalidating'
 const shallowStatus = shallowRef<Status>('initial')
@@ -191,14 +267,37 @@ if (refStatus.value === 'initial') {
   expectType<IsUnion<typeof shallowUnionAsCast>>(false)
 }
 
-describe('shallowRef with generic', <T>() => {
-  const r = ref({}) as MaybeRef<T>
-  expectType<ShallowRef<T> | Ref<T>>(shallowRef(r))
+{
+  // any value should return Ref<any>, not any
+  const a = shallowRef(1 as any)
+  expectType<IsAny<typeof a>>(false)
+}
+
+describe('shallowRef with generic', <T extends { name: string }>() => {
+  const r = {} as T
+  const s = shallowRef(r)
+  expectType<string>(s.value.name)
+  expectType<ShallowRef<T>>(shallowRef(r))
+
+  const rr = {} as MaybeRef<T>
+  // should at least allow casting
+  const ss = shallowRef(rr) as Ref<T> | ShallowRef<T>
+  expectType<string>(ss.value.name)
 })
 
+{
+  // should return ShallowRef<T> | Ref<T>, not ShallowRef<T | Ref<T>>
+  expectType<ShallowRef<{ name: string }> | Ref<{ name: string }>>(
+    shallowRef({} as MaybeRef<{ name: string }>),
+  )
+  expectType<ShallowRef<number> | Ref<string[]> | ShallowRef<string>>(
+    shallowRef('' as Ref<string[]> | string | number),
+  )
+}
+
 // proxyRefs: should return `reactive` directly
 const r1 = reactive({
-  k: 'v'
+  k: 'v',
 })
 const p1 = proxyRefs(r1)
 expectType<typeof r1>(p1)
@@ -206,13 +305,19 @@ expectType<typeof r1>(p1)
 // proxyRefs: `ShallowUnwrapRef`
 const r2 = {
   a: ref(1),
+  c: computed(() => 1),
+  u: undefined,
   obj: {
-    k: ref('foo')
-  }
+    k: ref('foo'),
+  },
+  union: Math.random() > 0 - 5 ? ref({ name: 'yo' }) : null,
 }
 const p2 = proxyRefs(r2)
 expectType<number>(p2.a)
+expectType<number>(p2.c)
+expectType<undefined>(p2.u)
 expectType<Ref<string>>(p2.obj.k)
+expectType<{ name: string } | null>(p2.union)
 
 // toRef and toRefs
 {
@@ -223,7 +328,7 @@ expectType<Ref<string>>(p2.obj.k)
   } = {
     a: 1,
     b: ref(1),
-    c: 1
+    c: 1,
   }
 
   // toRef
@@ -250,8 +355,8 @@ expectType<Ref<string>>(p2.obj.k)
   // Both should not do any unwrapping
   const someReactive = shallowReactive({
     a: {
-      b: ref(42)
-    }
+      b: ref(42),
+    },
   })
 
   const toRefResult = toRef(someReactive, 'a')
@@ -283,8 +388,8 @@ interface AppData {
 
 const data: ToRefs<AppData> = toRefs(
   reactive({
-    state: 'state1'
-  })
+    state: 'state1',
+  }),
 )
 
 switch (data.state.value) {
@@ -311,9 +416,9 @@ describe('shallow reactive in reactive', () => {
   const baz = reactive({
     foo: shallowReactive({
       a: {
-        b: ref(42)
-      }
-    })
+        b: ref(42),
+      },
+    }),
   })
 
   const foo = toRef(baz, 'foo')
@@ -328,10 +433,10 @@ describe('shallow ref in reactive', () => {
       bar: {
         baz: ref(123),
         qux: reactive({
-          z: ref(123)
-        })
-      }
-    })
+          z: ref(123),
+        }),
+      },
+    }),
   })
 
   expectType<Ref<number>>(x.foo.bar.baz)
@@ -340,7 +445,7 @@ describe('shallow ref in reactive', () => {
 
 describe('ref in shallow ref', () => {
   const x = shallowRef({
-    a: ref(123)
+    a: ref(123),
   })
 
   expectType<Ref<number>>(x.value.a)
@@ -349,8 +454,8 @@ describe('ref in shallow ref', () => {
 describe('reactive in shallow ref', () => {
   const x = shallowRef({
     a: reactive({
-      b: ref(0)
-    })
+      b: ref(0),
+    }),
   })
 
   expectType<number>(x.value.a.b)
@@ -361,7 +466,7 @@ describe('toRef <-> toValue', () => {
     a: MaybeRef<string>,
     b: () => string,
     c: MaybeRefOrGetter<string>,
-    d: ComputedRef<string>
+    d: ComputedRef<string>,
   ) {
     const r = toRef(a)
     expectType<Ref<string>>(r)
@@ -392,7 +497,7 @@ describe('toRef <-> toValue', () => {
       r: toValue(r),
       rb: toValue(rb),
       rc: toValue(rc),
-      rd: toValue(rd)
+      rd: toValue(rd),
     }
   }
 
@@ -406,7 +511,31 @@ describe('toRef <-> toValue', () => {
       'foo',
       () => 'bar',
       ref('baz'),
-      computed(() => 'hi')
-    )
+      computed(() => 'hi'),
+    ),
   )
 })
+
+// unref
+// #8747
+declare const unref1: number | Ref<number> | ComputedRef<number>
+expectType<number>(unref(unref1))
+
+// #11356
+declare const unref2:
+  | MaybeRef<string>
+  | ShallowRef<string>
+  | ComputedRef<string>
+  | WritableComputedRef<string>
+expectType<string>(unref(unref2))
+
+// toValue
+expectType<number>(toValue(unref1))
+expectType<string>(toValue(unref2))
+
+// useTemplateRef
+const tRef = useTemplateRef('foo')
+expectType<Readonly<ShallowRef<unknown>>>(tRef)
+
+const tRef2 = useTemplateRef<HTMLElement>('bar')
+expectType<Readonly<ShallowRef<HTMLElement | null>>>(tRef2)
diff --git a/packages/dts-test/setupHelpers.test-d.ts b/packages-private/dts-test/setupHelpers.test-d.ts
similarity index 53%
rename from packages/dts-test/setupHelpers.test-d.ts
rename to packages-private/dts-test/setupHelpers.test-d.ts
index 51f95c009..4074176ff 100644
--- a/packages/dts-test/setupHelpers.test-d.ts
+++ b/packages-private/dts-test/setupHelpers.test-d.ts
@@ -1,19 +1,20 @@
 import {
-  defineProps,
+  type Ref,
+  type Slots,
+  type VNode,
+  defineComponent,
   defineEmits,
+  defineModel,
+  defineOptions,
+  defineProps,
+  defineSlots,
+  toRefs,
   useAttrs,
+  useModel,
   useSlots,
   withDefaults,
-  Slots,
-  defineSlots,
-  VNode,
-  Ref,
-  defineModel,
-  toRefs
 } from 'vue'
 import { describe, expectType } from './utils'
-import { defineComponent } from 'vue'
-import { useModel } from 'vue'
 
 describe('defineProps w/ type declaration', () => {
   // type declaration
@@ -42,7 +43,8 @@ describe('defineProps w/ generics', () => {
   test()
 })
 
-describe('defineProps w/ type declaration + withDefaults', () => {
+describe('defineProps w/ type declaration + withDefaults', <T extends
+  string>() => {
   const res = withDefaults(
     defineProps<{
       number?: number
@@ -55,6 +57,7 @@ describe('defineProps w/ type declaration + withDefaults', () => {
       z?: string
       bool?: boolean
       boolAndUndefined: boolean | undefined
+      foo?: T
     }>(),
     {
       number: 123,
@@ -63,8 +66,9 @@ describe('defineProps w/ type declaration + withDefaults', () => {
       fn: () => {},
       genStr: () => '',
       y: undefined,
-      z: 'string'
-    }
+      z: 'string',
+      foo: '' as any,
+    },
   )
 
   res.number + 1
@@ -80,6 +84,7 @@ describe('defineProps w/ type declaration + withDefaults', () => {
   expectType<string | undefined>(res.x)
   expectType<string | undefined>(res.y)
   expectType<string>(res.z)
+  expectType<T>(res.foo)
 
   expectType<boolean>(res.bool)
   expectType<boolean>(res.boolAndUndefined)
@@ -97,11 +102,71 @@ describe('defineProps w/ union type declaration + withDefaults', () => {
       union1: 123,
       union2: () => [123],
       union3: () => ({ x: 123 }),
-      union4: () => 123
-    }
+      union4: () => 123,
+    },
   )
 })
 
+describe('defineProps w/ object union + withDefaults', () => {
+  const props = withDefaults(
+    defineProps<
+      {
+        foo: string
+      } & (
+        | {
+            type: 'hello'
+            bar: string
+          }
+        | {
+            type: 'world'
+            bar: number
+          }
+      )
+    >(),
+    {
+      foo: 'default value!',
+    },
+  )
+
+  expectType<
+    | {
+        readonly type: 'hello'
+        readonly bar: string
+        readonly foo: string
+      }
+    | {
+        readonly type: 'world'
+        readonly bar: number
+        readonly foo: string
+      }
+  >(props)
+})
+
+describe('defineProps w/ generic discriminate union + withDefaults', () => {
+  interface B {
+    b?: string
+  }
+  interface S<T> extends B {
+    mode: 'single'
+    v: T
+  }
+  interface M<T> extends B {
+    mode: 'multiple'
+    v: T[]
+  }
+  type Props = S<string> | M<string>
+  const props = withDefaults(defineProps<Props>(), {
+    b: 'b',
+  })
+
+  if (props.mode === 'single') {
+    expectType<string>(props.v)
+  }
+  if (props.mode === 'multiple') {
+    expectType<string[]>(props.v)
+  }
+})
+
 describe('defineProps w/ generic type declaration + withDefaults', <T extends
   number, TA extends {
   a: string
@@ -124,8 +189,8 @@ describe('defineProps w/ generic type declaration + withDefaults', <T extends
       generic2: () => ({ x: 123 }) as { x: T },
 
       generic3: () => 'test' as TString,
-      generic4: () => ({ a: 'test' }) as TA
-    }
+      generic4: () => ({ a: 'test' }) as TA,
+    },
   )
 
   res.n + 1
@@ -147,7 +212,7 @@ describe('withDefaults w/ boolean type', () => {
     defineProps<{
       bool?: boolean
     }>(),
-    { bool: false }
+    { bool: false },
   )
   expectType<boolean>(res1.bool)
 
@@ -156,24 +221,37 @@ describe('withDefaults w/ boolean type', () => {
       bool?: boolean
     }>(),
     {
-      bool: undefined
-    }
+      bool: undefined,
+    },
   )
   expectType<boolean | undefined>(res2.bool)
 })
 
+describe('withDefaults w/ defineProp type is different from the defaults type', () => {
+  const res1 = withDefaults(
+    defineProps<{
+      bool?: boolean
+    }>(),
+    { bool: false, value: false },
+  )
+  expectType<boolean>(res1.bool)
+
+  // @ts-expect-error
+  res1.value
+})
+
 describe('defineProps w/ runtime declaration', () => {
   // runtime declaration
   const props = defineProps({
     foo: String,
     bar: {
       type: Number,
-      default: 1
+      default: 1,
     },
     baz: {
       type: Array,
-      required: true
-    }
+      required: true,
+    },
   })
   expectType<{
     foo?: string
@@ -233,7 +311,7 @@ describe('defineEmits w/ alt type declaration', () => {
 describe('defineEmits w/ runtime declaration', () => {
   const emit = defineEmits({
     foo: () => {},
-    bar: null
+    bar: null,
   })
   emit('foo')
   emit('bar', 123)
@@ -260,6 +338,30 @@ describe('defineSlots', () => {
   expectType<Slots>(slotsUntype)
 })
 
+describe('defineSlots generic', <T extends Record<string, any>>() => {
+  const props = defineProps<{
+    item: T
+  }>()
+
+  const slots = defineSlots<
+    {
+      [K in keyof T as `slot-${K & string}`]?: (props: { item: T }) => any
+    } & {
+      label?: (props: { item: T }) => any
+    }
+  >()
+
+  for (const key of Object.keys(props.item) as (keyof T & string)[]) {
+    slots[`slot-${String(key)}`]?.({
+      item: props.item,
+    })
+  }
+  slots.label?.({ item: props.item })
+
+  // @ts-expect-error calling wrong slot
+  slots.foo({})
+})
+
 describe('defineModel', () => {
   // overload 1
   const modelValueRequired = defineModel<boolean>({ required: true })
@@ -290,14 +392,86 @@ describe('defineModel', () => {
   const inferredRequired = defineModel({ default: 123, required: true })
   expectType<Ref<number>>(inferredRequired)
 
+  // modifiers
+  const [_, modifiers] = defineModel<string>()
+  expectType<true | undefined>(modifiers.foo)
+
+  // limit supported modifiers
+  const [__, typedModifiers] = defineModel<string, 'trim' | 'capitalize'>()
+  expectType<true | undefined>(typedModifiers.trim)
+  expectType<true | undefined>(typedModifiers.capitalize)
+  // @ts-expect-error
+  typedModifiers.foo
+
+  // transformers with type
+  defineModel<string>({
+    get(val) {
+      return val.toLowerCase()
+    },
+    set(val) {
+      return val.toUpperCase()
+    },
+  })
+  // transformers with runtime type
+  defineModel({
+    type: String,
+    get(val) {
+      return val.toLowerCase()
+    },
+    set(val) {
+      return val.toUpperCase()
+    },
+  })
+
   // @ts-expect-error type / default mismatch
   defineModel<string>({ default: 123 })
   // @ts-expect-error unknown props option
   defineModel({ foo: 123 })
 
-  // accept defineModel-only options
-  defineModel({ local: true })
-  defineModel('foo', { local: true })
+  // unrelated getter and setter types
+  {
+    const modelVal = defineModel({
+      get(_: string[]): string {
+        return ''
+      },
+      set(_: number) {
+        return 1
+      },
+    })
+    expectType<string | undefined>(modelVal.value)
+    modelVal.value = 1
+    modelVal.value = undefined
+    // @ts-expect-error
+    modelVal.value = 'foo'
+
+    const [modelVal2] = modelVal
+    expectType<string | undefined>(modelVal2.value)
+    modelVal2.value = 1
+    modelVal2.value = undefined
+    // @ts-expect-error
+    modelVal.value = 'foo'
+
+    const count = defineModel('count', {
+      get(_: string[]): string {
+        return ''
+      },
+      set(_: number) {
+        return ''
+      },
+    })
+    expectType<string | undefined>(count.value)
+    count.value = 1
+    count.value = undefined
+    // @ts-expect-error
+    count.value = 'foo'
+
+    const [count2] = count
+    expectType<string | undefined>(count2.value)
+    count2.value = 1
+    count2.value = undefined
+    // @ts-expect-error
+    count2.value = 'foo'
+  }
 })
 
 describe('useModel', () => {
@@ -309,20 +483,20 @@ describe('useModel', () => {
 
       // @ts-expect-error
       useModel(props, 'bar')
-    }
+    },
   })
 
   defineComponent({
     props: {
       foo: String,
       bar: { type: Number, required: true },
-      baz: { type: Boolean }
+      baz: { type: Boolean },
     },
     setup(props) {
       expectType<Ref<string | undefined>>(useModel(props, 'foo'))
       expectType<Ref<number>>(useModel(props, 'bar'))
       expectType<Ref<boolean>>(useModel(props, 'baz'))
-    }
+    },
   })
 })
 
@@ -336,6 +510,78 @@ describe('useSlots', () => {
   expectType<Slots>(slots)
 })
 
+describe('defineSlots generic', <T extends Record<string, any>>() => {
+  const props = defineProps<{
+    item: T
+  }>()
+
+  const slots = defineSlots<
+    {
+      [K in keyof T as `slot-${K & string}`]?: (props: { item: T }) => any
+    } & {
+      label?: (props: { item: T }) => any
+    }
+  >()
+
+  // @ts-expect-error slots should be readonly
+  slots.label = () => {}
+
+  // @ts-expect-error non existing slot
+  slots['foo-asdas']?.({
+    item: props.item,
+  })
+  for (const key in props.item) {
+    slots[`slot-${String(key)}`]?.({
+      item: props.item,
+    })
+    slots[`slot-${String(key as keyof T)}`]?.({
+      item: props.item,
+    })
+  }
+
+  for (const key of Object.keys(props.item) as (keyof T)[]) {
+    slots[`slot-${String(key)}`]?.({
+      item: props.item,
+    })
+  }
+  slots.label?.({ item: props.item })
+
+  // @ts-expect-error calling wrong slot
+  slots.foo({})
+})
+
+describe('defineSlots generic strict', <T extends {
+  foo: 'foo'
+  bar: 'bar'
+}>() => {
+  const props = defineProps<{
+    item: T
+  }>()
+
+  const slots = defineSlots<
+    {
+      [K in keyof T as `slot-${K & string}`]?: (props: { item: T }) => any
+    } & {
+      label?: (props: { item: T }) => any
+    }
+  >()
+
+  // slot-bar/foo should be automatically inferred
+  slots['slot-bar']?.({ item: props.item })
+  slots['slot-foo']?.({ item: props.item })
+
+  slots.label?.({ item: props.item })
+
+  // @ts-expect-error not part of the extends
+  slots['slot-RANDOM']?.({ item: props.item })
+
+  // @ts-expect-error slots should be readonly
+  slots.label = () => {}
+
+  // @ts-expect-error calling wrong slot
+  slots.foo({})
+})
+
 // #6420
 describe('toRefs w/ type declaration', () => {
   const props = defineProps<{
@@ -343,3 +589,21 @@ describe('toRefs w/ type declaration', () => {
   }>()
   expectType<Ref<File | File[] | undefined>>(toRefs(props).file)
 })
+
+describe('defineOptions', () => {
+  defineOptions({
+    name: 'MyComponent',
+    inheritAttrs: true,
+  })
+
+  defineOptions({
+    // @ts-expect-error props should be defined via defineProps()
+    props: ['props'],
+    // @ts-expect-error emits should be defined via defineEmits()
+    emits: ['emits'],
+    // @ts-expect-error slots should be defined via defineSlots()
+    slots: { default: 'default' },
+    // @ts-expect-error expose should be defined via defineExpose()
+    expose: ['expose'],
+  })
+})
diff --git a/packages/dts-test/tsconfig.test.json b/packages-private/dts-test/tsconfig.test.json
similarity index 100%
rename from packages/dts-test/tsconfig.test.json
rename to packages-private/dts-test/tsconfig.test.json
diff --git a/packages/dts-test/tsx.test-d.tsx b/packages-private/dts-test/tsx.test-d.tsx
similarity index 85%
rename from packages/dts-test/tsx.test-d.tsx
rename to packages-private/dts-test/tsx.test-d.tsx
index 4b4a0dbf9..0cd380f04 100644
--- a/packages/dts-test/tsx.test-d.tsx
+++ b/packages-private/dts-test/tsx.test-d.tsx
@@ -1,5 +1,5 @@
 // TSX w/ defineComponent is tested in defineComponent.test-d.tsx
-import { KeepAlive, Suspense, Fragment, Teleport, VNode } from 'vue'
+import { Fragment, KeepAlive, Suspense, Teleport, type VNode } from 'vue'
 import { expectType } from './utils'
 
 expectType<VNode>(<div />)
@@ -7,6 +7,7 @@ expectType<JSX.Element>(<div />)
 expectType<JSX.Element>(<div id="foo" />)
 expectType<JSX.Element>(<div>hello</div>)
 expectType<JSX.Element>(<input value="foo" />)
+expectType<JSX.Element>(<textarea value={null} />)
 
 // @ts-expect-error style css property validation
 ;<div style={{ unknown: 123 }} />
@@ -14,7 +15,7 @@ expectType<JSX.Element>(<input value="foo" />)
 // allow array styles and nested array styles
 expectType<JSX.Element>(<div style={[{ color: 'red' }]} />)
 expectType<JSX.Element>(
-  <div style={[{ color: 'red' }, [{ fontSize: '1em' }]]} />
+  <div style={[{ color: 'red' }, [{ fontSize: '1em' }]]} />,
 )
 
 // allow undefined, string, object, array and nested array classes
@@ -26,7 +27,7 @@ expectType<JSX.Element>(<div class={['foo', ['bar'], [['baz']]]} />)
 expectType<JSX.Element>(<div class={{ foo: true, bar: false, baz: true }} />)
 expectType<JSX.Element>(<div class={{}} />)
 expectType<JSX.Element>(
-  <div class={['foo', ['bar'], { baz: true }, [{ qux: true }]]} />
+  <div class={['foo', ['bar'], { baz: true }, [{ qux: true }]]} />,
 )
 expectType<JSX.Element>(
   <div
@@ -37,9 +38,9 @@ expectType<JSX.Element>(
       { qux: '' },
       { quux: null },
       { corge: undefined },
-      { grault: NaN }
+      { grault: NaN },
     ]}
-  />
+  />,
 )
 expectType<JSX.Element>(
   <div
@@ -48,9 +49,9 @@ expectType<JSX.Element>(
       { bar: 'not-empty' },
       { baz: 1 },
       { qux: {} },
-      { quux: [] }
+      { quux: [] },
     ]}
-  />
+  />,
 )
 
 // #7955
@@ -83,7 +84,7 @@ expectType<JSX.Element>(
       // infer correct event type
       expectType<EventTarget | null>(e.target)
     }}
-  />
+  />,
 )
 
 // built-in types
@@ -108,7 +109,17 @@ expectType<JSX.Element>(<KeepAlive key="1" />)
 expectType<JSX.Element>(<Suspense />)
 expectType<JSX.Element>(<Suspense key="1" />)
 expectType<JSX.Element>(
-  <Suspense onResolve={() => {}} onFallback={() => {}} onPending={() => {}} />
+  <Suspense onResolve={() => {}} onFallback={() => {}} onPending={() => {}} />,
 )
 // @ts-expect-error
 ;<Suspense onResolve={123} />
+
+// svg
+expectType<JSX.Element>(
+  <svg
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  />,
+)
+// details
+expectType<JSX.Element>(<details name="details" />)
diff --git a/packages/dts-test/utils.d.ts b/packages-private/dts-test/utils.d.ts
similarity index 100%
rename from packages/dts-test/utils.d.ts
rename to packages-private/dts-test/utils.d.ts
diff --git a/packages-private/dts-test/watch.test-d.ts b/packages-private/dts-test/watch.test-d.ts
new file mode 100644
index 000000000..6c8576f0c
--- /dev/null
+++ b/packages-private/dts-test/watch.test-d.ts
@@ -0,0 +1,213 @@
+import {
+  type ComputedRef,
+  type MaybeRef,
+  type Ref,
+  computed,
+  defineComponent,
+  defineModel,
+  reactive,
+  ref,
+  shallowRef,
+  watch,
+} from 'vue'
+import { expectType } from './utils'
+
+const source = ref('foo')
+const source2 = computed(() => source.value)
+const source3 = () => 1
+
+type Bar = Ref<string> | ComputedRef<string> | (() => number)
+type Foo = readonly [Ref<string>, ComputedRef<string>, () => number]
+type OnCleanup = (fn: () => void) => void
+
+const readonlyArr: Foo = [source, source2, source3]
+
+// lazy watcher will have consistent types for oldValue.
+watch(source, (value, oldValue, onCleanup) => {
+  expectType<string>(value)
+  expectType<string>(oldValue)
+  expectType<OnCleanup>(onCleanup)
+})
+
+watch([source, source2, source3], (values, oldValues) => {
+  expectType<[string, string, number]>(values)
+  expectType<[string, string, number]>(oldValues)
+})
+
+// const array
+watch([source, source2, source3] as const, (values, oldValues) => {
+  expectType<Readonly<[string, string, number]>>(values)
+  expectType<Readonly<[string, string, number]>>(oldValues)
+})
+
+// reactive array
+watch(reactive([source, source2, source3]), (value, oldValues) => {
+  expectType<Bar[]>(value)
+  expectType<Bar[]>(oldValues)
+})
+
+// reactive w/ readonly tuple
+watch(reactive([source, source2, source3] as const), (value, oldValues) => {
+  expectType<Foo>(value)
+  expectType<Foo>(oldValues)
+})
+
+// readonly array
+watch(readonlyArr, (values, oldValues) => {
+  expectType<Readonly<[string, string, number]>>(values)
+  expectType<Readonly<[string, string, number]>>(oldValues)
+})
+
+// no type error, case from vueuse
+declare const aAny: any
+watch(aAny, (v, ov) => {})
+watch(aAny, (v, ov) => {}, { immediate: true })
+
+// immediate watcher's oldValue will be undefined on first run.
+watch(
+  source,
+  (value, oldValue) => {
+    expectType<string>(value)
+    expectType<string | undefined>(oldValue)
+  },
+  { immediate: true },
+)
+
+watch(
+  [source, source2, source3],
+  (values, oldValues) => {
+    expectType<[string, string, number]>(values)
+    expectType<[string | undefined, string | undefined, number | undefined]>(
+      oldValues,
+    )
+  },
+  { immediate: true },
+)
+
+// const array
+watch(
+  [source, source2, source3] as const,
+  (values, oldValues) => {
+    expectType<Readonly<[string, string, number]>>(values)
+    expectType<
+      Readonly<[string | undefined, string | undefined, number | undefined]>
+    >(oldValues)
+  },
+  { immediate: true },
+)
+
+// reactive array
+watch(
+  reactive([source, source2, source3]),
+  (value, oldVals) => {
+    expectType<Bar[]>(value)
+    expectType<Bar[] | undefined>(oldVals)
+  },
+  { immediate: true },
+)
+
+// reactive w/ readonly tuple
+watch(reactive([source, source2, source3] as const), (value, oldVals) => {
+  expectType<Foo>(value)
+  expectType<Foo | undefined>(oldVals)
+})
+
+// readonly array
+watch(
+  readonlyArr,
+  (values, oldValues) => {
+    expectType<Readonly<[string, string, number]>>(values)
+    expectType<
+      Readonly<[string | undefined, string | undefined, number | undefined]>
+    >(oldValues)
+  },
+  { immediate: true },
+)
+
+// should provide correct ref.value inner type to callbacks
+const nestedRefSource = ref({
+  foo: ref(1),
+})
+
+watch(nestedRefSource, (v, ov) => {
+  expectType<{ foo: number }>(v)
+  expectType<{ foo: number }>(ov)
+})
+
+const someRef = ref({ test: 'test' })
+const otherRef = ref({ a: 'b' })
+watch([someRef, otherRef], values => {
+  const value1 = values[0]
+  // no type error
+  console.log(value1.test)
+
+  const value2 = values[1]
+  // no type error
+  console.log(value2.a)
+})
+
+// #6135
+defineComponent({
+  data() {
+    return { a: 1 }
+  },
+  created() {
+    this.$watch(
+      () => this.a,
+      (v, ov, onCleanup) => {
+        expectType<number>(v)
+        expectType<number>(ov)
+        expectType<OnCleanup>(onCleanup)
+      },
+    )
+  },
+})
+
+{
+  //#7852
+  type Steps = { step: '1' } | { step: '2' }
+  const shallowUnionGenParam = shallowRef<Steps>({ step: '1' })
+  const shallowUnionAsCast = shallowRef({ step: '1' } as Steps)
+
+  watch(shallowUnionGenParam, value => {
+    expectType<Steps>(value)
+  })
+  watch(shallowUnionAsCast, value => {
+    expectType<Steps>(value)
+  })
+}
+
+{
+  // defineModel
+  const bool = defineModel({ default: false })
+  watch(bool, value => {
+    expectType<boolean>(value)
+  })
+
+  const bool1 = defineModel<boolean>()
+  watch(bool1, value => {
+    expectType<boolean | undefined>(value)
+  })
+
+  const msg = defineModel<string>({ required: true })
+  watch(msg, value => {
+    expectType<string>(value)
+  })
+
+  const arr = defineModel<string[]>({ required: true })
+  watch(arr, value => {
+    expectType<string[]>(value)
+  })
+
+  const obj = defineModel<{ foo: string }>({ required: true })
+  watch(obj, value => {
+    expectType<{ foo: string }>(value)
+  })
+}
+
+{
+  const css: MaybeRef<string> = ''
+  watch(ref(css), value => {
+    expectType<string>(value)
+  })
+}
diff --git a/packages-private/global.d.ts b/packages-private/global.d.ts
new file mode 100644
index 000000000..ebc2367f3
--- /dev/null
+++ b/packages-private/global.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+// Global compile-time constants
+declare var __COMMIT__: string
+
+declare module 'file-saver' {
+  export function saveAs(blob: any, name: any): void
+}
diff --git a/packages/sfc-playground/README.md b/packages-private/sfc-playground/README.md
similarity index 100%
rename from packages/sfc-playground/README.md
rename to packages-private/sfc-playground/README.md
diff --git a/packages/sfc-playground/index.html b/packages-private/sfc-playground/index.html
similarity index 56%
rename from packages/sfc-playground/index.html
rename to packages-private/sfc-playground/index.html
index 29e8d6e97..3a21d956c 100644
--- a/packages/sfc-playground/index.html
+++ b/packages-private/sfc-playground/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -7,15 +7,16 @@
     <link rel="icon" type="image/svg" href="/logo.svg" />
     <title>Vue SFC Playground</title>
     <script>
-      // process shim for old versions of @vue/compiler-sfc dependency
-       window.process = { env: {} }
-       const savedPreferDark = localStorage.getItem('vue-sfc-playground-prefer-dark')
-       if (
-         savedPreferDark === 'true' ||
-         (!savedPreferDark && window.matchMedia('(prefers-color-scheme: dark)').matches)
-       ) {
+      const savedPreferDark = localStorage.getItem(
+        'vue-sfc-playground-prefer-dark',
+      )
+      if (
+        savedPreferDark === 'true' ||
+        (!savedPreferDark &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches)
+      ) {
         document.documentElement.classList.add('dark')
-       }
+      }
     </script>
     <script type="module" src="/src/main.ts"></script>
   </head>
diff --git a/packages/sfc-playground/package.json b/packages-private/sfc-playground/package.json
similarity index 78%
rename from packages/sfc-playground/package.json
rename to packages-private/sfc-playground/package.json
index 3c7c4a293..51175417d 100644
--- a/packages/sfc-playground/package.json
+++ b/packages-private/sfc-playground/package.json
@@ -9,11 +9,11 @@
     "serve": "vite preview"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.4.0",
-    "vite": "^5.0.0"
+    "@vitejs/plugin-vue": "catalog:",
+    "vite": "catalog:"
   },
   "dependencies": {
-    "@vue/repl": "^3.0.0",
+    "@vue/repl": "^4.4.2",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "vue": "workspace:*"
diff --git a/packages/sfc-playground/public/logo.svg b/packages-private/sfc-playground/public/logo.svg
similarity index 100%
rename from packages/sfc-playground/public/logo.svg
rename to packages-private/sfc-playground/public/logo.svg
diff --git a/packages-private/sfc-playground/src/App.vue b/packages-private/sfc-playground/src/App.vue
new file mode 100644
index 000000000..c9295d41b
--- /dev/null
+++ b/packages-private/sfc-playground/src/App.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import Header from './Header.vue'
+import { Repl, useStore, SFCOptions, useVueImportMap } from '@vue/repl'
+import Monaco from '@vue/repl/monaco-editor'
+import { ref, watchEffect, onMounted, computed } from 'vue'
+
+const replRef = ref<InstanceType<typeof Repl>>()
+
+const setVH = () => {
+  document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
+}
+window.addEventListener('resize', setVH)
+setVH()
+
+const useSSRMode = ref(false)
+
+const AUTO_SAVE_STORAGE_KEY = 'vue-sfc-playground-auto-save'
+const initAutoSave: boolean = JSON.parse(
+  localStorage.getItem(AUTO_SAVE_STORAGE_KEY) ?? 'true',
+)
+const autoSave = ref(initAutoSave)
+
+const { productionMode, vueVersion, importMap } = useVueImportMap({
+  runtimeDev: import.meta.env.PROD
+    ? `${location.origin}/vue.runtime.esm-browser.js`
+    : `${location.origin}/src/vue-dev-proxy`,
+  runtimeProd: import.meta.env.PROD
+    ? `${location.origin}/vue.runtime.esm-browser.prod.js`
+    : `${location.origin}/src/vue-dev-proxy-prod`,
+  serverRenderer: import.meta.env.PROD
+    ? `${location.origin}/server-renderer.esm-browser.js`
+    : `${location.origin}/src/vue-server-renderer-dev-proxy`,
+})
+
+let hash = location.hash.slice(1)
+if (hash.startsWith('__DEV__')) {
+  hash = hash.slice(7)
+  productionMode.value = false
+}
+if (hash.startsWith('__PROD__')) {
+  hash = hash.slice(8)
+  productionMode.value = true
+}
+if (hash.startsWith('__SSR__')) {
+  hash = hash.slice(7)
+  useSSRMode.value = true
+}
+
+// enable experimental features
+const sfcOptions = computed(
+  (): SFCOptions => ({
+    script: {
+      inlineTemplate: productionMode.value,
+      isProd: productionMode.value,
+      propsDestructure: true,
+    },
+    style: {
+      isProd: productionMode.value,
+    },
+    template: {
+      isProd: productionMode.value,
+      compilerOptions: {
+        isCustomElement: (tag: string) =>
+          tag === 'mjx-container' || tag.startsWith('custom-'),
+      },
+    },
+  }),
+)
+
+const store = useStore(
+  {
+    builtinImportMap: importMap,
+    vueVersion,
+    sfcOptions,
+  },
+  hash,
+)
+// @ts-expect-error
+globalThis.store = store
+
+// persist state
+watchEffect(() => {
+  const newHash = store
+    .serialize()
+    .replace(/^#/, useSSRMode.value ? `#__SSR__` : `#`)
+    .replace(/^#/, productionMode.value ? `#__PROD__` : `#`)
+  history.replaceState({}, '', newHash)
+})
+
+function toggleProdMode() {
+  productionMode.value = !productionMode.value
+}
+
+function toggleSSR() {
+  useSSRMode.value = !useSSRMode.value
+}
+
+function toggleAutoSave() {
+  autoSave.value = !autoSave.value
+  localStorage.setItem(AUTO_SAVE_STORAGE_KEY, String(autoSave.value))
+}
+
+function reloadPage() {
+  replRef.value?.reload()
+}
+
+const theme = ref<'dark' | 'light'>('dark')
+function toggleTheme(isDark: boolean) {
+  theme.value = isDark ? 'dark' : 'light'
+}
+onMounted(() => {
+  const cls = document.documentElement.classList
+  toggleTheme(cls.contains('dark'))
+
+  // @ts-expect-error process shim for old versions of @vue/compiler-sfc dependency
+  window.process = { env: {} }
+})
+</script>
+
+<template>
+  <Header
+    :store="store"
+    :prod="productionMode"
+    :ssr="useSSRMode"
+    :autoSave="autoSave"
+    @toggle-theme="toggleTheme"
+    @toggle-prod="toggleProdMode"
+    @toggle-ssr="toggleSSR"
+    @toggle-autosave="toggleAutoSave"
+    @reload-page="reloadPage"
+  />
+  <Repl
+    ref="replRef"
+    :theme="theme"
+    :editor="Monaco"
+    @keydown.ctrl.s.prevent
+    @keydown.meta.s.prevent
+    :ssr="useSSRMode"
+    :model-value="autoSave"
+    :editorOptions="{ autoSaveText: false }"
+    :store="store"
+    :showCompileOutput="true"
+    :autoResize="true"
+    :clearConsole="false"
+    :preview-options="{
+      customCode: {
+        importCode: `import { initCustomFormatter } from 'vue'`,
+        useCode: `if (window.devtoolsFormatters) {
+    const index = window.devtoolsFormatters.findIndex((v) => v.__vue_custom_formatter)
+    window.devtoolsFormatters.splice(index, 1)
+    initCustomFormatter()
+  } else {
+    initCustomFormatter()
+  }`,
+      },
+    }"
+  />
+</template>
+
+<style>
+.dark {
+  color-scheme: dark;
+}
+
+body {
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  margin: 0;
+  --base: #444;
+  --nav-height: 50px;
+}
+
+.vue-repl {
+  height: calc(var(--vh) - var(--nav-height)) !important;
+}
+
+button {
+  border: none;
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+  background-color: transparent;
+}
+</style>
diff --git a/packages/sfc-playground/src/Header.vue b/packages-private/sfc-playground/src/Header.vue
similarity index 78%
rename from packages/sfc-playground/src/Header.vue
rename to packages-private/sfc-playground/src/Header.vue
index e865a76a5..2778724b0 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages-private/sfc-playground/src/Header.vue
@@ -1,35 +1,46 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import type { ReplStore } from '@vue/repl'
 import { downloadProject } from './download/download'
-import { ref } from 'vue'
 import Sun from './icons/Sun.vue'
 import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
-import type { ReplStore } from '@vue/repl'
+import Reload from './icons/Reload.vue'
 import VersionSelect from './VersionSelect.vue'
 
 const props = defineProps<{
   store: ReplStore
-  dev: boolean
+  prod: boolean
   ssr: boolean
+  autoSave: boolean
 }>()
-const emit = defineEmits(['toggle-theme', 'toggle-ssr', 'toggle-dev'])
+const emit = defineEmits([
+  'toggle-theme',
+  'toggle-ssr',
+  'toggle-prod',
+  'toggle-autosave',
+  'reload-page',
+])
 
 const { store } = props
 
 const currentCommit = __COMMIT__
-const vueVersion = ref(`@${currentCommit}`)
+
+const vueVersion = computed(() => {
+  if (store.loading) {
+    return 'loading...'
+  }
+  return store.vueVersion || `@${__COMMIT__}`
+})
 
 async function setVueVersion(v: string) {
-  vueVersion.value = `loading...`
-  await store.setVueVersion(v)
-  vueVersion.value = `v${v}`
+  store.vueVersion = v
 }
 
 function resetVueVersion() {
-  store.resetVueVersion()
-  vueVersion.value = `@${currentCommit}`
+  store.vueVersion = null
 }
 
 async function copyLink(e: MouseEvent) {
@@ -47,7 +58,7 @@ function toggleDark() {
   cls.toggle('dark')
   localStorage.setItem(
     'vue-sfc-playground-prefer-dark',
-    String(cls.contains('dark'))
+    String(cls.contains('dark')),
   )
   emit('toggle-theme', cls.contains('dark'))
 }
@@ -61,7 +72,7 @@ function toggleDark() {
     </h1>
     <div class="links">
       <VersionSelect
-        v-model="store.state.typescriptVersion"
+        v-model="store.typescriptVersion"
         pkg="typescript"
         label="TypeScript Version"
       />
@@ -71,7 +82,7 @@ function toggleDark() {
         pkg="vue"
         label="Vue Version"
       >
-        <li>
+        <li :class="{ active: vueVersion === `@${currentCommit}` }">
           <a @click="resetVueVersion">This Commit ({{ currentCommit }})</a>
         </li>
         <li>
@@ -84,11 +95,11 @@ function toggleDark() {
       </VersionSelect>
       <button
         title="Toggle development production mode"
-        class="toggle-dev"
-        :class="{ dev }"
-        @click="$emit('toggle-dev')"
+        class="toggle-prod"
+        :class="{ prod }"
+        @click="$emit('toggle-prod')"
       >
-        <span>{{ dev ? 'DEV' : 'PROD' }}</span>
+        <span>{{ prod ? 'PROD' : 'DEV' }}</span>
       </button>
       <button
         title="Toggle server rendering mode"
@@ -98,6 +109,14 @@ function toggleDark() {
       >
         <span>{{ ssr ? 'SSR ON' : 'SSR OFF' }}</span>
       </button>
+      <button
+        title="Toggle editor auto save mode"
+        class="toggle-autosave"
+        :class="{ enabled: autoSave }"
+        @click="$emit('toggle-autosave')"
+      >
+        <span>{{ autoSave ? 'AutoSave ON' : 'AutoSave OFF' }}</span>
+      </button>
       <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
         <Sun class="light" />
         <Moon class="dark" />
@@ -105,6 +124,9 @@ function toggleDark() {
       <button title="Copy sharable URL" class="share" @click="copyLink">
         <Share />
       </button>
+      <button title="Reload page" class="reload" @click="$emit('reload-page')">
+        <Reload />
+      </button>
       <button
         title="Download project files"
         class="download"
@@ -113,7 +135,7 @@ function toggleDark() {
         <Download />
       </button>
       <a
-        href="https://github.com/vuejs/core/tree/main/packages/sfc-playground"
+        href="https://github.com/vuejs/core/tree/main/packages-private/sfc-playground"
         target="_blank"
         title="View on GitHub"
         class="github"
@@ -186,27 +208,30 @@ h1 img {
   display: flex;
 }
 
-.toggle-dev span,
-.toggle-ssr span {
+.toggle-prod span,
+.toggle-ssr span,
+.toggle-autosave span {
   font-size: 12px;
   border-radius: 4px;
   padding: 4px 6px;
 }
 
-.toggle-dev span {
-  background: var(--purple);
+.toggle-prod span {
+  background: var(--green);
   color: #fff;
 }
 
-.toggle-dev.dev span {
-  background: var(--green);
+.toggle-prod.prod span {
+  background: var(--purple);
 }
 
-.toggle-ssr span {
+.toggle-ssr span,
+.toggle-autosave span {
   background-color: var(--btn-bg);
 }
 
-.toggle-ssr.enabled span {
+.toggle-ssr.enabled span,
+.toggle-autosave.enabled span {
   color: #fff;
   background-color: var(--green);
 }
diff --git a/packages/sfc-playground/src/VersionSelect.vue b/packages-private/sfc-playground/src/VersionSelect.vue
similarity index 72%
rename from packages/sfc-playground/src/VersionSelect.vue
rename to packages-private/sfc-playground/src/VersionSelect.vue
index 2dfbcbc5f..3a30e497f 100644
--- a/packages/sfc-playground/src/VersionSelect.vue
+++ b/packages-private/sfc-playground/src/VersionSelect.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import Copy from './icons/Copy.vue'
 
 const expanded = ref(false)
 const versions = ref<string[]>()
@@ -19,7 +20,7 @@ async function toggle() {
 
 async function fetchVersions(): Promise<string[]> {
   const res = await fetch(
-    `https://data.jsdelivr.com/v1/package/npm/${props.pkg}`
+    `https://data.jsdelivr.com/v1/package/npm/${props.pkg}`,
   )
   const { versions } = (await res.json()) as { versions: string[] }
 
@@ -53,6 +54,12 @@ function setVersion(v: string) {
   expanded.value = false
 }
 
+function copyVersion(v: string) {
+  window.navigator.clipboard.writeText(v).then(() => {
+    alert('Vue version has been copied to clipboard.')
+  })
+}
+
 onMounted(() => {
   window.addEventListener('click', () => {
     expanded.value = false
@@ -74,8 +81,21 @@ onMounted(() => {
 
     <ul class="versions" :class="{ expanded }">
       <li v-if="!versions"><a>loading versions...</a></li>
-      <li v-for="version of versions">
-        <a @click="setVersion(version)">v{{ version }}</a>
+      <li
+        v-for="(ver, index) of versions"
+        class="versions-item"
+        :class="{
+          active: ver === version || (version === 'latest' && index === 0),
+        }"
+      >
+        <a @click="setVersion(ver)">v{{ ver }}</a>
+        <button
+          title="Copy Version"
+          class="version-copy"
+          @click="copyVersion(`v${ver}`)"
+        >
+          <Copy />
+        </button>
       </li>
       <div @click="expanded = false">
         <slot />
@@ -111,4 +131,21 @@ onMounted(() => {
   border-top: 6px solid #aaa;
   margin-left: 8px;
 }
+
+.versions .active a {
+  color: var(--green);
+}
+
+.versions .versions-item {
+  display: flex;
+  justify-content: space-between;
+}
+
+.versions .versions-item .version-copy {
+  display: none;
+}
+
+.versions .versions-item:hover .version-copy {
+  display: block;
+}
 </style>
diff --git a/packages/sfc-playground/src/download/download.ts b/packages-private/sfc-playground/src/download/download.ts
similarity index 89%
rename from packages/sfc-playground/src/download/download.ts
rename to packages-private/sfc-playground/src/download/download.ts
index eb534538b..28d836edb 100644
--- a/packages/sfc-playground/src/download/download.ts
+++ b/packages-private/sfc-playground/src/download/download.ts
@@ -5,7 +5,7 @@ import main from './template/main.js?raw'
 import pkg from './template/package.json?raw'
 import config from './template/vite.config.js?raw'
 import readme from './template/README.md?raw'
-import { ReplStore } from '@vue/repl'
+import type { ReplStore } from '@vue/repl'
 
 export async function downloadProject(store: ReplStore) {
   if (!confirm('Download project files?')) {
@@ -27,7 +27,7 @@ export async function downloadProject(store: ReplStore) {
 
   const files = store.getFiles()
   for (const file in files) {
-    if (file !== 'import-map.json') {
+    if (file !== 'import-map.json' && file !== 'tsconfig.json') {
       src.file(file, files[file])
     } else {
       zip.file(file, files[file])
diff --git a/packages/sfc-playground/src/download/template/README.md b/packages-private/sfc-playground/src/download/template/README.md
similarity index 60%
rename from packages/sfc-playground/src/download/template/README.md
rename to packages-private/sfc-playground/src/download/template/README.md
index 39c47d255..91b21489f 100644
--- a/packages/sfc-playground/src/download/template/README.md
+++ b/packages-private/sfc-playground/src/download/template/README.md
@@ -1,6 +1,6 @@
 # Vite Vue Starter
 
-This is a project template using [Vite](https://vitejs.dev/). It requires [Node.js](https://nodejs.org) v12+.
+This is a project template using [Vite](https://vitejs.dev/). It requires [Node.js](https://nodejs.org) version 18+ or 20+.
 
 To start:
 
@@ -11,4 +11,8 @@ npm run dev
 # if using yarn:
 yarn
 yarn dev
+
+# if using pnpm:
+pnpm install
+pnpm run dev
 ```
diff --git a/packages/sfc-playground/src/download/template/index.html b/packages-private/sfc-playground/src/download/template/index.html
similarity index 95%
rename from packages/sfc-playground/src/download/template/index.html
rename to packages-private/sfc-playground/src/download/template/index.html
index 030a6ff51..e631329c1 100644
--- a/packages/sfc-playground/src/download/template/index.html
+++ b/packages-private/sfc-playground/src/download/template/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/sfc-playground/src/download/template/main.js b/packages-private/sfc-playground/src/download/template/main.js
similarity index 100%
rename from packages/sfc-playground/src/download/template/main.js
rename to packages-private/sfc-playground/src/download/template/main.js
diff --git a/packages/sfc-playground/src/download/template/package.json b/packages-private/sfc-playground/src/download/template/package.json
similarity index 74%
rename from packages/sfc-playground/src/download/template/package.json
rename to packages-private/sfc-playground/src/download/template/package.json
index ee271628e..ad2fde953 100644
--- a/packages/sfc-playground/src/download/template/package.json
+++ b/packages-private/sfc-playground/src/download/template/package.json
@@ -8,10 +8,10 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.0"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.4.0",
-    "vite": "^5.0.0"
+    "@vitejs/plugin-vue": "^5.1.4",
+    "vite": "^5.4.8"
   }
 }
diff --git a/packages/sfc-playground/src/download/template/vite.config.js b/packages-private/sfc-playground/src/download/template/vite.config.js
similarity index 87%
rename from packages/sfc-playground/src/download/template/vite.config.js
rename to packages-private/sfc-playground/src/download/template/vite.config.js
index 315212d69..05c17402a 100644
--- a/packages/sfc-playground/src/download/template/vite.config.js
+++ b/packages-private/sfc-playground/src/download/template/vite.config.js
@@ -3,5 +3,5 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
 })
diff --git a/packages-private/sfc-playground/src/icons/Copy.vue b/packages-private/sfc-playground/src/icons/Copy.vue
new file mode 100644
index 000000000..f3851da63
--- /dev/null
+++ b/packages-private/sfc-playground/src/icons/Copy.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1.3em"
+    height="1.3em"
+    viewBox="0 0 24 24"
+  >
+    <path fill="currentColor" d="M8 7h11v14H8z" opacity=".3" />
+    <path
+      fill="currentColor"
+      d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
+    />
+  </svg>
+</template>
diff --git a/packages/sfc-playground/src/icons/Download.vue b/packages-private/sfc-playground/src/icons/Download.vue
similarity index 100%
rename from packages/sfc-playground/src/icons/Download.vue
rename to packages-private/sfc-playground/src/icons/Download.vue
diff --git a/packages-private/sfc-playground/src/icons/GitHub.vue b/packages-private/sfc-playground/src/icons/GitHub.vue
new file mode 100644
index 000000000..2a6aaf62d
--- /dev/null
+++ b/packages-private/sfc-playground/src/icons/GitHub.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg width="1.7em" height="1.7em" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
+    />
+  </svg>
+</template>
diff --git a/packages-private/sfc-playground/src/icons/Moon.vue b/packages-private/sfc-playground/src/icons/Moon.vue
new file mode 100644
index 000000000..21f393d4d
--- /dev/null
+++ b/packages-private/sfc-playground/src/icons/Moon.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"
+    />
+  </svg>
+</template>
diff --git a/packages-private/sfc-playground/src/icons/Reload.vue b/packages-private/sfc-playground/src/icons/Reload.vue
new file mode 100644
index 000000000..5ec5be808
--- /dev/null
+++ b/packages-private/sfc-playground/src/icons/Reload.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    fill="currentColor"
+    width="1.7em"
+    height="1.7em"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+    />
+    <path d="M0 0h24v24H0z" fill="none" />
+  </svg>
+</template>
diff --git a/packages/sfc-playground/src/icons/Share.vue b/packages-private/sfc-playground/src/icons/Share.vue
similarity index 100%
rename from packages/sfc-playground/src/icons/Share.vue
rename to packages-private/sfc-playground/src/icons/Share.vue
diff --git a/packages-private/sfc-playground/src/icons/Sun.vue b/packages-private/sfc-playground/src/icons/Sun.vue
new file mode 100644
index 000000000..4b7392242
--- /dev/null
+++ b/packages-private/sfc-playground/src/icons/Sun.vue
@@ -0,0 +1,40 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"
+    />
+    <path
+      fill="currentColor"
+      d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"
+    />
+    <path
+      fill="currentColor"
+      d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"
+    />
+    <path
+      fill="currentColor"
+      d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"
+    />
+    <path
+      fill="currentColor"
+      d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"
+    />
+    <path
+      fill="currentColor"
+      d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"
+    />
+    <path
+      fill="currentColor"
+      d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"
+    />
+    <path
+      fill="currentColor"
+      d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"
+    />
+    <path
+      fill="currentColor"
+      d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"
+    />
+  </svg>
+</template>
diff --git a/packages/sfc-playground/src/main.ts b/packages-private/sfc-playground/src/main.ts
similarity index 83%
rename from packages/sfc-playground/src/main.ts
rename to packages-private/sfc-playground/src/main.ts
index 2e7bc6528..7be634080 100644
--- a/packages/sfc-playground/src/main.ts
+++ b/packages-private/sfc-playground/src/main.ts
@@ -3,7 +3,7 @@ import App from './App.vue'
 
 // @ts-expect-error Custom window property
 window.VUE_DEVTOOLS_CONFIG = {
-  defaultSelectedAppId: 'repl'
+  defaultSelectedAppId: 'repl',
 }
 
 createApp(App).mount('#app')
diff --git a/packages/sfc-playground/src/vue-dev-proxy-prod.ts b/packages-private/sfc-playground/src/vue-dev-proxy-prod.ts
similarity index 88%
rename from packages/sfc-playground/src/vue-dev-proxy-prod.ts
rename to packages-private/sfc-playground/src/vue-dev-proxy-prod.ts
index ad796cab5..3b2faf195 100644
--- a/packages/sfc-playground/src/vue-dev-proxy-prod.ts
+++ b/packages-private/sfc-playground/src/vue-dev-proxy-prod.ts
@@ -1,3 +1,2 @@
 // serve vue to the iframe sandbox during dev.
-// @ts-ignore
 export * from 'vue/dist/vue.runtime.esm-browser.prod.js'
diff --git a/packages/sfc-playground/src/vue-dev-proxy.ts b/packages-private/sfc-playground/src/vue-dev-proxy.ts
similarity index 100%
rename from packages/sfc-playground/src/vue-dev-proxy.ts
rename to packages-private/sfc-playground/src/vue-dev-proxy.ts
diff --git a/packages/sfc-playground/src/vue-server-renderer-dev-proxy.ts b/packages-private/sfc-playground/src/vue-server-renderer-dev-proxy.ts
similarity index 100%
rename from packages/sfc-playground/src/vue-server-renderer-dev-proxy.ts
rename to packages-private/sfc-playground/src/vue-server-renderer-dev-proxy.ts
diff --git a/packages/sfc-playground/vercel.json b/packages-private/sfc-playground/vercel.json
similarity index 100%
rename from packages/sfc-playground/vercel.json
rename to packages-private/sfc-playground/vercel.json
diff --git a/packages-private/sfc-playground/vite.config.ts b/packages-private/sfc-playground/vite.config.ts
new file mode 100644
index 000000000..2e77f1970
--- /dev/null
+++ b/packages-private/sfc-playground/vite.config.ts
@@ -0,0 +1,59 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { type Plugin, defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { spawnSync } from 'node:child_process'
+
+const commit = spawnSync('git', ['rev-parse', '--short=7', 'HEAD'])
+  .stdout.toString()
+  .trim()
+
+export default defineConfig({
+  plugins: [
+    vue({
+      script: {
+        fs: {
+          fileExists: fs.existsSync,
+          readFile: file => fs.readFileSync(file, 'utf-8'),
+        },
+      },
+    }),
+    copyVuePlugin(),
+  ],
+  define: {
+    __COMMIT__: JSON.stringify(commit),
+    __VUE_PROD_DEVTOOLS__: JSON.stringify(true),
+  },
+  optimizeDeps: {
+    exclude: ['@vue/repl'],
+  },
+})
+
+function copyVuePlugin(): Plugin {
+  return {
+    name: 'copy-vue',
+    generateBundle() {
+      const copyFile = (file: string) => {
+        const filePath = path.resolve(__dirname, '../../packages', file)
+        const basename = path.basename(file)
+        if (!fs.existsSync(filePath)) {
+          throw new Error(
+            `${basename} not built. ` +
+              `Run "nr build vue -f esm-browser" first.`,
+          )
+        }
+        this.emitFile({
+          type: 'asset',
+          fileName: basename,
+          source: fs.readFileSync(filePath, 'utf-8'),
+        })
+      }
+
+      copyFile(`vue/dist/vue.esm-browser.js`)
+      copyFile(`vue/dist/vue.esm-browser.prod.js`)
+      copyFile(`vue/dist/vue.runtime.esm-browser.js`)
+      copyFile(`vue/dist/vue.runtime.esm-browser.prod.js`)
+      copyFile(`server-renderer/dist/server-renderer.esm-browser.js`)
+    },
+  }
+}
diff --git a/packages/template-explorer/README.md b/packages-private/template-explorer/README.md
similarity index 100%
rename from packages/template-explorer/README.md
rename to packages-private/template-explorer/README.md
diff --git a/packages/template-explorer/_redirects b/packages-private/template-explorer/_redirects
similarity index 100%
rename from packages/template-explorer/_redirects
rename to packages-private/template-explorer/_redirects
diff --git a/packages-private/template-explorer/index.html b/packages-private/template-explorer/index.html
new file mode 100644
index 000000000..d1db969f0
--- /dev/null
+++ b/packages-private/template-explorer/index.html
@@ -0,0 +1,24 @@
+<title>Vue Template Explorer</title>
+<link
+  rel="stylesheet"
+  data-name="vs/editor/editor.main"
+  href="https://unpkg.com/monaco-editor@0.20.0/min/vs/editor/editor.main.css"
+/>
+<link rel="stylesheet" href="./style.css" />
+
+<div id="header"></div>
+<div id="source" class="editor"></div>
+<div id="output" class="editor"></div>
+
+<script src="https://unpkg.com/monaco-editor@0.20.0/min/vs/loader.js"></script>
+<script>
+  require.config({
+    paths: {
+      vs: 'https://unpkg.com/monaco-editor@0.20.0/min/vs',
+    },
+  })
+</script>
+<script src="./dist/template-explorer.global.js"></script>
+<script>
+  require(['vs/editor/editor.main'], init /* injected by build */)
+</script>
diff --git a/packages-private/template-explorer/local.html b/packages-private/template-explorer/local.html
new file mode 100644
index 000000000..c86cdb6b3
--- /dev/null
+++ b/packages-private/template-explorer/local.html
@@ -0,0 +1,24 @@
+<title>Vue Template Explorer</title>
+<link
+  rel="stylesheet"
+  data-name="vs/editor/editor.main"
+  href="./node_modules/monaco-editor/min/vs/editor/editor.main.css"
+/>
+<link rel="stylesheet" href="./style.css" />
+
+<div id="header"></div>
+<div id="source" class="editor"></div>
+<div id="output" class="editor"></div>
+
+<script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
+<script>
+  require.config({
+    paths: {
+      vs: './node_modules/monaco-editor/min/vs',
+    },
+  })
+</script>
+<script src="./dist/template-explorer.global.js"></script>
+<script>
+  require(['vs/editor/editor.main'], init /* injected by build */)
+</script>
diff --git a/packages/template-explorer/package.json b/packages-private/template-explorer/package.json
similarity index 80%
rename from packages/template-explorer/package.json
rename to packages-private/template-explorer/package.json
index 75073e078..e8bdf0bcc 100644
--- a/packages/template-explorer/package.json
+++ b/packages-private/template-explorer/package.json
@@ -11,7 +11,7 @@
     "enableNonBrowserBranches": true
   },
   "dependencies": {
-    "monaco-editor": "^0.44.0",
-    "source-map-js": "^1.0.2"
+    "monaco-editor": "^0.52.0",
+    "source-map-js": "^1.2.1"
   }
 }
diff --git a/packages/template-explorer/src/index.ts b/packages-private/template-explorer/src/index.ts
similarity index 89%
rename from packages/template-explorer/src/index.ts
rename to packages-private/template-explorer/src/index.ts
index 9faeb0a59..988712d62 100644
--- a/packages/template-explorer/src/index.ts
+++ b/packages-private/template-explorer/src/index.ts
@@ -1,11 +1,15 @@
-import * as m from 'monaco-editor'
-import { compile, CompilerError, CompilerOptions } from '@vue/compiler-dom'
+import type * as m from 'monaco-editor'
+import {
+  type CompilerError,
+  type CompilerOptions,
+  compile,
+} from '@vue/compiler-dom'
 import { compile as ssrCompile } from '@vue/compiler-ssr'
 import {
-  defaultOptions,
   compilerOptions,
+  defaultOptions,
   initOptions,
-  ssrMode
+  ssrMode,
 } from './options'
 import { toRaw, watchEffect } from '@vue/runtime-dom'
 import { SourceMapConsumer } from 'source-map-js'
@@ -30,8 +34,8 @@ const sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = {
   scrollBeyondLastLine: false,
   renderWhitespace: 'selection',
   minimap: {
-    enabled: false
-  }
+    enabled: false,
+  },
 }
 
 window.init = () => {
@@ -48,13 +52,13 @@ window.init = () => {
       hash = escape(atob(hash))
     } catch (e) {}
     persistedState = JSON.parse(
-      decodeURIComponent(hash) || localStorage.getItem('state') || `{}`
+      decodeURIComponent(hash) || localStorage.getItem('state') || `{}`,
     )
   } catch (e: any) {
     // bad stored state, clear it
     console.warn(
       'Persisted state in localStorage seems to be corrupted, please reload.\n' +
-        e.message
+        e.message,
     )
     localStorage.clear()
   }
@@ -81,13 +85,13 @@ window.init = () => {
         sourceMap: true,
         onError: err => {
           errors.push(err)
-        }
+        },
       })
       console.log(`Compiled in ${(performance.now() - start).toFixed(2)}ms.`)
       monaco.editor.setModelMarkers(
         editor.getModel()!,
         `@vue/compiler-dom`,
-        errors.filter(e => e.loc).map(formatError)
+        errors.filter(e => e.loc).map(formatError),
       )
       console.log(`AST: `, ast)
       console.log(`Options: `, toRaw(compilerOptions))
@@ -110,7 +114,7 @@ window.init = () => {
       endLineNumber: loc.end.line,
       endColumn: loc.end.column,
       message: `Vue template compilation error: ${err.message}`,
-      code: String(err.code)
+      code: String(err.code),
     }
   }
 
@@ -123,7 +127,7 @@ window.init = () => {
     for (key in compilerOptions) {
       const val = compilerOptions[key]
       if (typeof val !== 'object' && val !== defaultOptions[key]) {
-        // @ts-ignore
+        // @ts-expect-error
         optionsToSave[key] = val
       }
     }
@@ -131,7 +135,7 @@ window.init = () => {
     const state = JSON.stringify({
       src,
       ssr: ssrMode.value,
-      options: optionsToSave
+      options: optionsToSave,
     } as PersistedState)
     localStorage.setItem('state', state)
     window.location.hash = btoa(unescape(encodeURIComponent(state)))
@@ -145,21 +149,21 @@ window.init = () => {
     value: persistedState?.src || `<div>Hello World</div>`,
     language: 'html',
     ...sharedEditorOptions,
-    wordWrap: 'bounded'
+    wordWrap: 'bounded',
   })
 
   editor.getModel()!.updateOptions({
-    tabSize: 2
+    tabSize: 2,
   })
 
   const output = monaco.editor.create(document.getElementById('output')!, {
     value: '',
     language: 'javascript',
     readOnly: true,
-    ...sharedEditorOptions
+    ...sharedEditorOptions,
   })
   output.getModel()!.updateOptions({
-    tabSize: 2
+    tabSize: 2,
   })
 
   // handle resize
@@ -184,7 +188,7 @@ window.init = () => {
         const pos = lastSuccessfulMap.generatedPositionFor({
           source: 'ExampleTemplate.vue',
           line: e.position.lineNumber,
-          column: e.position.column - 1
+          column: e.position.column - 1,
         })
         if (pos.line != null && pos.column != null) {
           prevOutputDecos = output.deltaDecorations(prevOutputDecos, [
@@ -193,22 +197,22 @@ window.init = () => {
                 pos.line,
                 pos.column + 1,
                 pos.line,
-                pos.lastColumn ? pos.lastColumn + 2 : pos.column + 2
+                pos.lastColumn ? pos.lastColumn + 2 : pos.column + 2,
               ),
               options: {
-                inlineClassName: `highlight`
-              }
-            }
+                inlineClassName: `highlight`,
+              },
+            },
           ])
           output.revealPositionInCenter({
             lineNumber: pos.line,
-            column: pos.column + 1
+            column: pos.column + 1,
           })
         } else {
           clearOutputDecos()
         }
       }
-    }, 100)
+    }, 100),
   )
 
   let previousEditorDecos: string[] = []
@@ -222,7 +226,7 @@ window.init = () => {
       if (lastSuccessfulMap) {
         const pos = lastSuccessfulMap.originalPositionFor({
           line: e.position.lineNumber,
-          column: e.position.column - 1
+          column: e.position.column - 1,
         })
         if (
           pos.line != null &&
@@ -234,7 +238,7 @@ window.init = () => {
         ) {
           const translatedPos = {
             column: pos.column + 1,
-            lineNumber: pos.line
+            lineNumber: pos.line,
           }
           previousEditorDecos = editor.deltaDecorations(previousEditorDecos, [
             {
@@ -242,20 +246,20 @@ window.init = () => {
                 pos.line,
                 pos.column + 1,
                 pos.line,
-                pos.column + 1
+                pos.column + 1,
               ),
               options: {
                 isWholeLine: true,
-                className: `highlight`
-              }
-            }
+                className: `highlight`,
+              },
+            },
           ])
           editor.revealPositionInCenter(translatedPos)
         } else {
           clearEditorDecos()
         }
       }
-    }, 100)
+    }, 100),
   )
 
   initOptions()
@@ -264,7 +268,7 @@ window.init = () => {
 
 function debounce<T extends (...args: any[]) => any>(
   fn: T,
-  delay: number = 300
+  delay: number = 300,
 ): T {
   let prevTimer: number | null = null
   return ((...args: any[]) => {
diff --git a/packages/template-explorer/src/options.ts b/packages-private/template-explorer/src/options.ts
similarity index 86%
rename from packages/template-explorer/src/options.ts
rename to packages-private/template-explorer/src/options.ts
index 73e0a959f..e3cc6173a 100644
--- a/packages/template-explorer/src/options.ts
+++ b/packages-private/template-explorer/src/options.ts
@@ -1,5 +1,5 @@
-import { h, reactive, createApp, ref } from 'vue'
-import { CompilerOptions } from '@vue/compiler-dom'
+import { createApp, h, reactive, ref } from 'vue'
+import type { CompilerOptions } from '@vue/compiler-dom'
 import { BindingTypes } from '@vue/compiler-core'
 
 export const ssrMode = ref(false)
@@ -22,12 +22,12 @@ export const defaultOptions: CompilerOptions = {
     setupLet: BindingTypes.SETUP_LET,
     setupMaybeRef: BindingTypes.SETUP_MAYBE_REF,
     setupProp: BindingTypes.PROPS,
-    vMySetupDir: BindingTypes.SETUP_CONST
-  }
+    vMySetupDir: BindingTypes.SETUP_CONST,
+  },
 }
 
 export const compilerOptions: CompilerOptions = reactive(
-  Object.assign({}, defaultOptions)
+  Object.assign({}, defaultOptions),
 )
 
 const App = {
@@ -44,18 +44,18 @@ const App = {
           'a',
           {
             href: `https://github.com/vuejs/core/tree/${__COMMIT__}`,
-            target: `_blank`
+            target: `_blank`,
           },
-          `@${__COMMIT__}`
+          `@${__COMMIT__}`,
         ),
         ' | ',
         h(
           'a',
           {
             href: 'https://app.netlify.com/sites/vue-next-template-explorer/deploys',
-            target: `_blank`
+            target: `_blank`,
           },
-          'History'
+          'History',
         ),
 
         h('div', { id: 'options-wrapper' }, [
@@ -71,7 +71,7 @@ const App = {
                 checked: isModule,
                 onChange() {
                   compilerOptions.mode = 'module'
-                }
+                },
               }),
               h('label', { for: 'mode-module' }, 'module'),
               ' ',
@@ -82,9 +82,9 @@ const App = {
                 checked: !isModule,
                 onChange() {
                   compilerOptions.mode = 'function'
-                }
+                },
               }),
-              h('label', { for: 'mode-function' }, 'function')
+              h('label', { for: 'mode-function' }, 'function'),
             ]),
 
             // whitespace handling
@@ -97,7 +97,7 @@ const App = {
                 checked: compilerOptions.whitespace === 'condense',
                 onChange() {
                   compilerOptions.whitespace = 'condense'
-                }
+                },
               }),
               h('label', { for: 'whitespace-condense' }, 'condense'),
               ' ',
@@ -108,9 +108,9 @@ const App = {
                 checked: compilerOptions.whitespace === 'preserve',
                 onChange() {
                   compilerOptions.whitespace = 'preserve'
-                }
+                },
               }),
-              h('label', { for: 'whitespace-preserve' }, 'preserve')
+              h('label', { for: 'whitespace-preserve' }, 'preserve'),
             ]),
 
             // SSR
@@ -122,9 +122,9 @@ const App = {
                 checked: ssrMode.value,
                 onChange(e: Event) {
                   ssrMode.value = (e.target as HTMLInputElement).checked
-                }
+                },
               }),
-              h('label', { for: 'ssr' }, 'SSR')
+              h('label', { for: 'ssr' }, 'SSR'),
             ]),
 
             // toggle prefixIdentifiers
@@ -137,9 +137,9 @@ const App = {
                 onChange(e: Event) {
                   compilerOptions.prefixIdentifiers =
                     (e.target as HTMLInputElement).checked || isModule
-                }
+                },
               }),
-              h('label', { for: 'prefix' }, 'prefixIdentifiers')
+              h('label', { for: 'prefix' }, 'prefixIdentifiers'),
             ]),
 
             // toggle hoistStatic
@@ -153,9 +153,9 @@ const App = {
                   compilerOptions.hoistStatic = (
                     e.target as HTMLInputElement
                   ).checked
-                }
+                },
               }),
-              h('label', { for: 'hoist' }, 'hoistStatic')
+              h('label', { for: 'hoist' }, 'hoistStatic'),
             ]),
 
             // toggle cacheHandlers
@@ -169,9 +169,9 @@ const App = {
                   compilerOptions.cacheHandlers = (
                     e.target as HTMLInputElement
                   ).checked
-                }
+                },
               }),
-              h('label', { for: 'cache' }, 'cacheHandlers')
+              h('label', { for: 'cache' }, 'cacheHandlers'),
             ]),
 
             // toggle scopeId
@@ -186,9 +186,9 @@ const App = {
                     isModule && (e.target as HTMLInputElement).checked
                       ? 'scope-id'
                       : null
-                }
+                },
               }),
-              h('label', { for: 'scope-id' }, 'scopeId')
+              h('label', { for: 'scope-id' }, 'scopeId'),
             ]),
 
             // inline mode
@@ -201,9 +201,9 @@ const App = {
                   compilerOptions.inline = (
                     e.target as HTMLInputElement
                   ).checked
-                }
+                },
               }),
-              h('label', { for: 'inline' }, 'inline')
+              h('label', { for: 'inline' }, 'inline'),
             ]),
 
             // compat mode
@@ -218,15 +218,15 @@ const App = {
                   ).checked
                     ? 2
                     : 3
-                }
+                },
               }),
-              h('label', { for: 'compat' }, 'v2 compat mode')
-            ])
-          ])
-        ])
+              h('label', { for: 'compat' }, 'v2 compat mode'),
+            ]),
+          ]),
+        ]),
       ]
     }
-  }
+  },
 }
 
 export function initOptions() {
diff --git a/packages/template-explorer/src/theme.ts b/packages-private/template-explorer/src/theme.ts
similarity index 57%
rename from packages/template-explorer/src/theme.ts
rename to packages-private/template-explorer/src/theme.ts
index 99da1081a..9027cd0c0 100644
--- a/packages/template-explorer/src/theme.ts
+++ b/packages-private/template-explorer/src/theme.ts
@@ -4,234 +4,234 @@ export default {
   rules: [
     {
       foreground: 'de935f',
-      token: 'number'
+      token: 'number',
     },
     {
       foreground: '969896',
-      token: 'comment'
+      token: 'comment',
     },
     {
       foreground: 'ced1cf',
-      token: 'keyword.operator.class'
+      token: 'keyword.operator.class',
     },
     {
       foreground: 'ced1cf',
-      token: 'constant.other'
+      token: 'constant.other',
     },
     {
       foreground: 'ced1cf',
-      token: 'source.php.embedded.line'
+      token: 'source.php.embedded.line',
     },
     {
       foreground: 'cc6666',
-      token: 'variable'
+      token: 'variable',
     },
     {
       foreground: 'cc6666',
-      token: 'support.other.variable'
+      token: 'support.other.variable',
     },
     {
       foreground: 'cc6666',
-      token: 'string.other.link'
+      token: 'string.other.link',
     },
     {
       foreground: 'cc6666',
-      token: 'string.regexp'
+      token: 'string.regexp',
     },
     {
       foreground: 'cc6666',
-      token: 'entity.name.tag'
+      token: 'entity.name.tag',
     },
     {
       foreground: 'cc6666',
-      token: 'entity.other.attribute-name'
+      token: 'entity.other.attribute-name',
     },
     {
       foreground: 'cc6666',
-      token: 'meta.tag'
+      token: 'meta.tag',
     },
     {
       foreground: 'cc6666',
-      token: 'declaration.tag'
+      token: 'declaration.tag',
     },
     {
       foreground: 'cc6666',
-      token: 'markup.deleted.git_gutter'
+      token: 'markup.deleted.git_gutter',
     },
     {
       foreground: 'de935f',
-      token: 'constant.numeric'
+      token: 'constant.numeric',
     },
     {
       foreground: 'de935f',
-      token: 'constant.language'
+      token: 'constant.language',
     },
     {
       foreground: 'de935f',
-      token: 'support.constant'
+      token: 'support.constant',
     },
     {
       foreground: 'de935f',
-      token: 'constant.character'
+      token: 'constant.character',
     },
     {
       foreground: 'de935f',
-      token: 'variable.parameter'
+      token: 'variable.parameter',
     },
     {
       foreground: 'de935f',
-      token: 'punctuation.section.embedded'
+      token: 'punctuation.section.embedded',
     },
     {
       foreground: 'de935f',
-      token: 'keyword.other.unit'
+      token: 'keyword.other.unit',
     },
     {
       foreground: 'f0c674',
-      token: 'entity.name.class'
+      token: 'entity.name.class',
     },
     {
       foreground: 'f0c674',
-      token: 'entity.name.type.class'
+      token: 'entity.name.type.class',
     },
     {
       foreground: 'f0c674',
-      token: 'support.type'
+      token: 'support.type',
     },
     {
       foreground: 'f0c674',
-      token: 'support.class'
+      token: 'support.class',
     },
     {
       foreground: 'b5bd68',
-      token: 'string'
+      token: 'string',
     },
     {
       foreground: 'b5bd68',
-      token: 'constant.other.symbol'
+      token: 'constant.other.symbol',
     },
     {
       foreground: 'b5bd68',
-      token: 'entity.other.inherited-class'
+      token: 'entity.other.inherited-class',
     },
     {
       foreground: 'b5bd68',
-      token: 'markup.heading'
+      token: 'markup.heading',
     },
     {
       foreground: 'b5bd68',
-      token: 'markup.inserted.git_gutter'
+      token: 'markup.inserted.git_gutter',
     },
     {
       foreground: '8abeb7',
-      token: 'keyword.operator'
+      token: 'keyword.operator',
     },
     {
       foreground: '8abeb7',
-      token: 'constant.other.color'
+      token: 'constant.other.color',
     },
     {
       foreground: '81a2be',
-      token: 'entity.name.function'
+      token: 'entity.name.function',
     },
     {
       foreground: '81a2be',
-      token: 'meta.function-call'
+      token: 'meta.function-call',
     },
     {
       foreground: '81a2be',
-      token: 'support.function'
+      token: 'support.function',
     },
     {
       foreground: '81a2be',
-      token: 'keyword.other.special-method'
+      token: 'keyword.other.special-method',
     },
     {
       foreground: '81a2be',
-      token: 'meta.block-level'
+      token: 'meta.block-level',
     },
     {
       foreground: '81a2be',
-      token: 'markup.changed.git_gutter'
+      token: 'markup.changed.git_gutter',
     },
     {
       foreground: 'b294bb',
-      token: 'keyword'
+      token: 'keyword',
     },
     {
       foreground: 'b294bb',
-      token: 'storage'
+      token: 'storage',
     },
     {
       foreground: 'b294bb',
-      token: 'storage.type'
+      token: 'storage.type',
     },
     {
       foreground: 'b294bb',
-      token: 'entity.name.tag.css'
+      token: 'entity.name.tag.css',
     },
     {
       foreground: 'ced2cf',
       background: 'df5f5f',
-      token: 'invalid'
+      token: 'invalid',
     },
     {
       foreground: 'ced2cf',
       background: '82a3bf',
-      token: 'meta.separator'
+      token: 'meta.separator',
     },
     {
       foreground: 'ced2cf',
       background: 'b798bf',
-      token: 'invalid.deprecated'
+      token: 'invalid.deprecated',
     },
     {
       foreground: 'ffffff',
-      token: 'markup.inserted.diff'
+      token: 'markup.inserted.diff',
     },
     {
       foreground: 'ffffff',
-      token: 'markup.deleted.diff'
+      token: 'markup.deleted.diff',
     },
     {
       foreground: 'ffffff',
-      token: 'meta.diff.header.to-file'
+      token: 'meta.diff.header.to-file',
     },
     {
       foreground: 'ffffff',
-      token: 'meta.diff.header.from-file'
+      token: 'meta.diff.header.from-file',
     },
     {
       foreground: '718c00',
-      token: 'markup.inserted.diff'
+      token: 'markup.inserted.diff',
     },
     {
       foreground: '718c00',
-      token: 'meta.diff.header.to-file'
+      token: 'meta.diff.header.to-file',
     },
     {
       foreground: 'c82829',
-      token: 'markup.deleted.diff'
+      token: 'markup.deleted.diff',
     },
     {
       foreground: 'c82829',
-      token: 'meta.diff.header.from-file'
+      token: 'meta.diff.header.from-file',
     },
     {
       foreground: 'ffffff',
       background: '4271ae',
-      token: 'meta.diff.header.from-file'
+      token: 'meta.diff.header.from-file',
     },
     {
       foreground: 'ffffff',
       background: '4271ae',
-      token: 'meta.diff.header.to-file'
+      token: 'meta.diff.header.to-file',
     },
     {
       foreground: '3e999f',
       fontStyle: 'italic',
-      token: 'meta.diff.range'
-    }
+      token: 'meta.diff.range',
+    },
   ],
   colors: {
     'editor.foreground': '#C5C8C6',
@@ -239,6 +239,6 @@ export default {
     'editor.selectionBackground': '#373B41',
     'editor.lineHighlightBackground': '#282A2E',
     'editorCursor.foreground': '#AEAFAD',
-    'editorWhitespace.foreground': '#4B4E55'
-  }
+    'editorWhitespace.foreground': '#4B4E55',
+  },
 }
diff --git a/packages/template-explorer/style.css b/packages-private/template-explorer/style.css
similarity index 92%
rename from packages/template-explorer/style.css
rename to packages-private/template-explorer/style.css
index 795dfd5f6..93f6f623c 100644
--- a/packages/template-explorer/style.css
+++ b/packages-private/template-explorer/style.css
@@ -1,8 +1,9 @@
 body {
   margin: 0;
   overflow: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  --bg: #1D1F21;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --bg: #1d1f21;
   --border: #333;
 }
 
diff --git a/packages-private/tsconfig.json b/packages-private/tsconfig.json
new file mode 100644
index 000000000..1c287a750
--- /dev/null
+++ b/packages-private/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "isolatedDeclarations": false
+  },
+  "include": ["."]
+}
diff --git a/packages-private/vite-debug/App.vue b/packages-private/vite-debug/App.vue
new file mode 100644
index 000000000..95b3be8ee
--- /dev/null
+++ b/packages-private/vite-debug/App.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<template>
+  <button @click="count++">{{ count }}</button>
+</template>
+
+<style>
+button {
+  color: red;
+}
+</style>
diff --git a/packages-private/vite-debug/README.md b/packages-private/vite-debug/README.md
new file mode 100644
index 000000000..4f035ae6f
--- /dev/null
+++ b/packages-private/vite-debug/README.md
@@ -0,0 +1 @@
+This package is used for debugging issues that are related to `@vitejs/plugin-vue`, or can only be reproduced in a Vite-based setup. It aims to be as close to production as possible so Vue packages are resolved to the dist files instead of source.
diff --git a/packages-private/vite-debug/index.html b/packages-private/vite-debug/index.html
new file mode 100644
index 000000000..79052a023
--- /dev/null
+++ b/packages-private/vite-debug/index.html
@@ -0,0 +1,2 @@
+<script type="module" src="./main.ts"></script>
+<div id="app"></div>
diff --git a/packages-private/vite-debug/main.ts b/packages-private/vite-debug/main.ts
new file mode 100644
index 000000000..52668a0a5
--- /dev/null
+++ b/packages-private/vite-debug/main.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.mount('#app')
diff --git a/packages-private/vite-debug/package.json b/packages-private/vite-debug/package.json
new file mode 100644
index 000000000..b0f2bad2b
--- /dev/null
+++ b/packages-private/vite-debug/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "vite-debug",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "catalog:",
+    "vite": "catalog:",
+    "vue": "workspace:*"
+  }
+}
diff --git a/packages-private/vite-debug/tsconfig.json b/packages-private/vite-debug/tsconfig.json
new file mode 100644
index 000000000..ceecb1cde
--- /dev/null
+++ b/packages-private/vite-debug/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["./*"]
+}
diff --git a/packages-private/vite-debug/vite.config.ts b/packages-private/vite-debug/vite.config.ts
new file mode 100644
index 000000000..c40aa3c36
--- /dev/null
+++ b/packages-private/vite-debug/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+})
diff --git a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
index 032d17e26..db268af4f 100644
--- a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
@@ -19,12 +19,12 @@ export function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: codegen > CacheExpression w/ isVNode: true 1`] = `
+exports[`compiler: codegen > CacheExpression w/ isVOnce: true 1`] = `
 "
 export function render(_ctx, _cache) {
   return _cache[1] || (
     _setBlockTracking(-1),
-    _cache[1] = foo,
+    (_cache[1] = foo).cacheIndex = 1,
     _setBlockTracking(1),
     _cache[1]
   )
@@ -48,13 +48,13 @@ exports[`compiler: codegen > Element (callExpression + objectExpression + Templa
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    return _createElementVNode(\\"div\\", {
-      id: \\"foo\\",
+    return _createElementVNode("div", {
+      id: "foo",
       [prop]: bar,
       [foo + bar]: bar
     }, [
-      _createElementVNode(\\"p\\", { \\"some-key\\": \\"foo\\" })
-    ], 16)
+      _createElementVNode("p", { "some-key": "foo" })
+    ], 16 /* FULL_PROPS */)
   }
 }"
 `;
@@ -63,12 +63,12 @@ exports[`compiler: codegen > assets + temps 1`] = `
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const _component_Foo = _resolveComponent(\\"Foo\\")
-    const _component_bar_baz = _resolveComponent(\\"bar-baz\\")
-    const _component_barbaz = _resolveComponent(\\"barbaz\\")
-    const _component_Qux = _resolveComponent(\\"Qux\\", true)
-    const _directive_my_dir_0 = _resolveDirective(\\"my_dir_0\\")
-    const _directive_my_dir_1 = _resolveDirective(\\"my_dir_1\\")
+    const _component_Foo = _resolveComponent("Foo")
+    const _component_bar_baz = _resolveComponent("bar-baz")
+    const _component_barbaz = _resolveComponent("barbaz")
+    const _component_Qux = _resolveComponent("Qux", true)
+    const _directive_my_dir_0 = _resolveDirective("my_dir_0")
+    const _directive_my_dir_1 = _resolveDirective("my_dir_1")
     let _temp0, _temp1, _temp2
 
     return null
@@ -80,7 +80,7 @@ exports[`compiler: codegen > comment 1`] = `
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    return _createCommentVNode(\\"foo\\")
+    return _createCommentVNode("foo")
   }
 }"
 `;
@@ -98,7 +98,7 @@ exports[`compiler: codegen > forNode 1`] = `
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(), 1))
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(), 1 /* TEXT */))
   }
 }"
 `;
@@ -135,7 +135,7 @@ return function render(_ctx, _cache) {
 exports[`compiler: codegen > hoists 1`] = `
 "
 const _hoisted_1 = hello
-const _hoisted_2 = { id: \\"foo\\" }
+const _hoisted_2 = { id: "foo" }
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -165,7 +165,7 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: codegen > module mode preamble 1`] = `
-"import { createVNode as _createVNode, resolveDirective as _resolveDirective } from \\"vue\\"
+"import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue"
 
 export function render(_ctx, _cache) {
   return null
@@ -173,7 +173,7 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler: codegen > module mode preamble w/ optimizeImports: true 1`] = `
-"import { createVNode, resolveDirective } from \\"vue\\"
+"import { createVNode, resolveDirective } from "vue"
 
 // Binding optimization for webpack code-split
 const _createVNode = createVNode, _resolveDirective = resolveDirective
@@ -187,7 +187,7 @@ exports[`compiler: codegen > static text 1`] = `
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    return \\"hello\\"
+    return "hello"
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
index e8b2efba7..625485719 100644
--- a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
@@ -7,19 +7,19 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", {
-      id: \\"foo\\",
+    return (_openBlock(), _createElementBlock("div", {
+      id: "foo",
       class: _normalizeClass(bar.baz)
     }, [
-      _createTextVNode(_toDisplayString(world.burn()) + \\" \\", 1 /* TEXT */),
+      _createTextVNode(_toDisplayString(world.burn()) + " ", 1 /* TEXT */),
       ok
-        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
+        ? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
         : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
-            _createTextVNode(\\"no\\")
+            _createTextVNode("no")
           ], 64 /* STABLE_FRAGMENT */)),
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (value, index) => {
-        return (_openBlock(), _createElementBlock(\\"div\\", null, [
-          _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
+        return (_openBlock(), _createElementBlock("div", null, [
+          _createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
         ]))
       }), 256 /* UNKEYED_FRAGMENT */))
     ], 2 /* CLASS */))
@@ -31,19 +31,19 @@ exports[`compiler: integration tests > function mode w/ prefixIdentifiers: true
 "const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = Vue
 
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", {
-    id: \\"foo\\",
+  return (_openBlock(), _createElementBlock("div", {
+    id: "foo",
     class: _normalizeClass(_ctx.bar.baz)
   }, [
-    _createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
+    _createTextVNode(_toDisplayString(_ctx.world.burn()) + " ", 1 /* TEXT */),
     (_ctx.ok)
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
       : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
-          _createTextVNode(\\"no\\")
+          _createTextVNode("no")
         ], 64 /* STABLE_FRAGMENT */)),
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
-      return (_openBlock(), _createElementBlock(\\"div\\", null, [
-        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
+      return (_openBlock(), _createElementBlock("div", null, [
+        _createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
       ]))
     }), 256 /* UNKEYED_FRAGMENT */))
   ], 2 /* CLASS */))
@@ -51,22 +51,22 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: integration tests > module mode 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", {
-    id: \\"foo\\",
+  return (_openBlock(), _createElementBlock("div", {
+    id: "foo",
     class: _normalizeClass(_ctx.bar.baz)
   }, [
-    _createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
+    _createTextVNode(_toDisplayString(_ctx.world.burn()) + " ", 1 /* TEXT */),
     (_ctx.ok)
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
       : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
-          _createTextVNode(\\"no\\")
+          _createTextVNode("no")
         ], 64 /* STABLE_FRAGMENT */)),
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
-      return (_openBlock(), _createElementBlock(\\"div\\", null, [
-        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
+      return (_openBlock(), _createElementBlock("div", null, [
+        _createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
       ]))
     }), 256 /* UNKEYED_FRAGMENT */))
   ], 2 /* CLASS */))
diff --git a/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
index e4728a461..942eed4c4 100644
--- a/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
@@ -1,38 +1,45 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template><!--></template> 1`] = `
+exports[`compiler: parse > Edge Cases > invalid html 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
-          "content": "",
+          "children": [],
+          "codegenNode": undefined,
           "loc": {
             "end": {
-              "column": 16,
-              "line": 1,
-              "offset": 15,
+              "column": 1,
+              "line": 3,
+              "offset": 13,
             },
-            "source": "<!-->",
+            "source": "<span>
+",
             "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
+              "column": 1,
+              "line": 2,
+              "offset": 6,
             },
           },
-          "type": 3,
+          "ns": 0,
+          "props": [],
+          "tag": "span",
+          "tagType": 0,
+          "type": 1,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 27,
-          "line": 1,
-          "offset": 26,
+          "column": 7,
+          "line": 3,
+          "offset": 19,
         },
-        "source": "<template><!--></template>",
+        "source": "<div>
+<span>
+</div>",
         "start": {
           "column": 1,
           "line": 1,
@@ -41,7 +48,7 @@ exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template>
       },
       "ns": 0,
       "props": [],
-      "tag": "template",
+      "tag": "div",
       "tagType": 0,
       "type": 1,
     },
@@ -54,125 +61,44 @@ exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template>
   "imports": [],
   "loc": {
     "end": {
-      "column": 27,
-      "line": 1,
-      "offset": 26,
-    },
-    "source": "<template><!--></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template><!---></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "",
-          "loc": {
-            "end": {
-              "column": 17,
-              "line": 1,
-              "offset": 16,
-            },
-            "source": "<!--->",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 28,
-          "line": 1,
-          "offset": 27,
-        },
-        "source": "<template><!---></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 28,
-      "line": 1,
+      "column": 8,
+      "line": 4,
       "offset": 27,
     },
-    "source": "<template><!---></template>",
+    "source": "<div>
+<span>
+</div>
+</span>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<div>
+<span>
+</div>
+</span>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template><!----></template> 1`] = `
+exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "content": "",
-          "loc": {
-            "end": {
-              "column": 18,
-              "line": 1,
-              "offset": 17,
-            },
-            "source": "<!---->",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
+      "isSelfClosing": true,
       "loc": {
         "end": {
-          "column": 29,
+          "column": 37,
           "line": 1,
-          "offset": 28,
+          "offset": 36,
         },
-        "source": "<template><!----></template>",
+        "source": "<div :class="{ some: condition }" />",
         "start": {
           "column": 1,
           "line": 1,
@@ -180,8 +106,147 @@ exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template>
         },
       },
       "ns": 0,
-      "props": [],
-      "tag": "template",
+      "props": [
+        {
+          "arg": {
+            "constType": 3,
+            "content": "class",
+            "isStatic": true,
+            "loc": {
+              "end": {
+                "column": 12,
+                "line": 1,
+                "offset": 11,
+              },
+              "source": "class",
+              "start": {
+                "column": 7,
+                "line": 1,
+                "offset": 6,
+              },
+            },
+            "type": 4,
+          },
+          "exp": {
+            "constType": 0,
+            "content": "{ some: condition }",
+            "isStatic": false,
+            "loc": {
+              "end": {
+                "column": 33,
+                "line": 1,
+                "offset": 32,
+              },
+              "source": "{ some: condition }",
+              "start": {
+                "column": 14,
+                "line": 1,
+                "offset": 13,
+              },
+            },
+            "type": 4,
+          },
+          "loc": {
+            "end": {
+              "column": 34,
+              "line": 1,
+              "offset": 33,
+            },
+            "source": ":class="{ some: condition }"",
+            "start": {
+              "column": 6,
+              "line": 1,
+              "offset": 5,
+            },
+          },
+          "modifiers": [],
+          "name": "bind",
+          "rawName": ":class",
+          "type": 7,
+        },
+      ],
+      "tag": "div",
+      "tagType": 0,
+      "type": 1,
+    },
+    {
+      "children": [],
+      "codegenNode": undefined,
+      "isSelfClosing": true,
+      "loc": {
+        "end": {
+          "column": 37,
+          "line": 2,
+          "offset": 73,
+        },
+        "source": "<p v-bind:style="{ color: 'red' }"/>",
+        "start": {
+          "column": 1,
+          "line": 2,
+          "offset": 37,
+        },
+      },
+      "ns": 0,
+      "props": [
+        {
+          "arg": {
+            "constType": 3,
+            "content": "style",
+            "isStatic": true,
+            "loc": {
+              "end": {
+                "column": 16,
+                "line": 2,
+                "offset": 52,
+              },
+              "source": "style",
+              "start": {
+                "column": 11,
+                "line": 2,
+                "offset": 47,
+              },
+            },
+            "type": 4,
+          },
+          "exp": {
+            "constType": 0,
+            "content": "{ color: 'red' }",
+            "isStatic": false,
+            "loc": {
+              "end": {
+                "column": 34,
+                "line": 2,
+                "offset": 70,
+              },
+              "source": "{ color: 'red' }",
+              "start": {
+                "column": 18,
+                "line": 2,
+                "offset": 54,
+              },
+            },
+            "type": 4,
+          },
+          "loc": {
+            "end": {
+              "column": 35,
+              "line": 2,
+              "offset": 71,
+            },
+            "source": "v-bind:style="{ color: 'red' }"",
+            "start": {
+              "column": 4,
+              "line": 2,
+              "offset": 40,
+            },
+          },
+          "modifiers": [],
+          "name": "bind",
+          "rawName": "v-bind:style",
+          "type": 7,
+        },
+      ],
+      "tag": "p",
       "tagType": 0,
       "type": 1,
     },
@@ -194,17 +259,238 @@ exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template>
   "imports": [],
   "loc": {
     "end": {
-      "column": 29,
-      "line": 1,
-      "offset": 28,
+      "column": 37,
+      "line": 2,
+      "offset": 73,
     },
-    "source": "<template><!----></template>",
+    "source": "<div :class="{ some: condition }" />
+<p v-bind:style="{ color: 'red' }"/>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<div :class="{ some: condition }" />
+<p v-bind:style="{ color: 'red' }"/>",
+  "temps": 0,
+  "type": 0,
+}
+`;
+
+exports[`compiler: parse > Edge Cases > valid html 1`] = `
+{
+  "cached": [],
+  "children": [
+    {
+      "children": [
+        {
+          "children": [],
+          "codegenNode": undefined,
+          "isSelfClosing": true,
+          "loc": {
+            "end": {
+              "column": 39,
+              "line": 2,
+              "offset": 73,
+            },
+            "source": "<p v-bind:style="{ color: 'red' }"/>",
+            "start": {
+              "column": 3,
+              "line": 2,
+              "offset": 37,
+            },
+          },
+          "ns": 0,
+          "props": [
+            {
+              "arg": {
+                "constType": 3,
+                "content": "style",
+                "isStatic": true,
+                "loc": {
+                  "end": {
+                    "column": 18,
+                    "line": 2,
+                    "offset": 52,
+                  },
+                  "source": "style",
+                  "start": {
+                    "column": 13,
+                    "line": 2,
+                    "offset": 47,
+                  },
+                },
+                "type": 4,
+              },
+              "exp": {
+                "constType": 0,
+                "content": "{ color: 'red' }",
+                "isStatic": false,
+                "loc": {
+                  "end": {
+                    "column": 36,
+                    "line": 2,
+                    "offset": 70,
+                  },
+                  "source": "{ color: 'red' }",
+                  "start": {
+                    "column": 20,
+                    "line": 2,
+                    "offset": 54,
+                  },
+                },
+                "type": 4,
+              },
+              "loc": {
+                "end": {
+                  "column": 37,
+                  "line": 2,
+                  "offset": 71,
+                },
+                "source": "v-bind:style="{ color: 'red' }"",
+                "start": {
+                  "column": 6,
+                  "line": 2,
+                  "offset": 40,
+                },
+              },
+              "modifiers": [],
+              "name": "bind",
+              "rawName": "v-bind:style",
+              "type": 7,
+            },
+          ],
+          "tag": "p",
+          "tagType": 0,
+          "type": 1,
+        },
+        {
+          "content": " a comment with <html> inside it ",
+          "loc": {
+            "end": {
+              "column": 43,
+              "line": 3,
+              "offset": 116,
+            },
+            "source": "<!-- a comment with <html> inside it -->",
+            "start": {
+              "column": 3,
+              "line": 3,
+              "offset": 76,
+            },
+          },
+          "type": 3,
+        },
+      ],
+      "codegenNode": undefined,
+      "loc": {
+        "end": {
+          "column": 7,
+          "line": 4,
+          "offset": 123,
+        },
+        "source": "<div :class="{ some: condition }">
+  <p v-bind:style="{ color: 'red' }"/>
+  <!-- a comment with <html> inside it -->
+</div>",
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "ns": 0,
+      "props": [
+        {
+          "arg": {
+            "constType": 3,
+            "content": "class",
+            "isStatic": true,
+            "loc": {
+              "end": {
+                "column": 12,
+                "line": 1,
+                "offset": 11,
+              },
+              "source": "class",
+              "start": {
+                "column": 7,
+                "line": 1,
+                "offset": 6,
+              },
+            },
+            "type": 4,
+          },
+          "exp": {
+            "constType": 0,
+            "content": "{ some: condition }",
+            "isStatic": false,
+            "loc": {
+              "end": {
+                "column": 33,
+                "line": 1,
+                "offset": 32,
+              },
+              "source": "{ some: condition }",
+              "start": {
+                "column": 14,
+                "line": 1,
+                "offset": 13,
+              },
+            },
+            "type": 4,
+          },
+          "loc": {
+            "end": {
+              "column": 34,
+              "line": 1,
+              "offset": 33,
+            },
+            "source": ":class="{ some: condition }"",
+            "start": {
+              "column": 6,
+              "line": 1,
+              "offset": 5,
+            },
+          },
+          "modifiers": [],
+          "name": "bind",
+          "rawName": ":class",
+          "type": 7,
+        },
+      ],
+      "tag": "div",
+      "tagType": 0,
+      "type": 1,
+    },
+  ],
+  "codegenNode": undefined,
+  "components": [],
+  "directives": [],
+  "helpers": Set {},
+  "hoists": [],
+  "imports": [],
+  "loc": {
+    "end": {
+      "column": 7,
+      "line": 4,
+      "offset": 123,
+    },
+    "source": "<div :class="{ some: condition }">
+  <p v-bind:style="{ color: 'red' }"/>
+  <!-- a comment with <html> inside it -->
+</div>",
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "source": "<div :class="{ some: condition }">
+  <p v-bind:style="{ color: 'red' }"/>
+  <!-- a comment with <html> inside it -->
+</div>",
   "temps": 0,
   "type": 0,
 }
@@ -212,30 +498,11 @@ exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template>
 
 exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><![CDATA[cdata]]></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "content": "[CDATA[cdata]]",
-          "loc": {
-            "end": {
-              "column": 28,
-              "line": 1,
-              "offset": 27,
-            },
-            "source": "<![CDATA[cdata]]>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 39,
@@ -275,6 +542,7 @@ exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><![CDATA[c
       "offset": 0,
     },
   },
+  "source": "<template><![CDATA[cdata]]></template>",
   "temps": 0,
   "type": 0,
 }
@@ -282,7 +550,7 @@ exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><![CDATA[c
 
 exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><svg><![CDATA[cdata]]></svg></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -307,7 +575,6 @@ exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><svg><![CD
             },
           ],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 39,
@@ -329,7 +596,6 @@ exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><svg><![CD
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 50,
@@ -369,6 +635,7 @@ exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><svg><![CD
       "offset": 0,
     },
   },
+  "source": "<template><svg><![CDATA[cdata]]></svg></template>",
   "temps": 0,
   "type": 0,
 }
@@ -376,21 +643,20 @@ exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><svg><![CD
 
 exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" id=""></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 34,
               "line": 1,
               "offset": 33,
             },
-            "source": "<div id=\\"\\" id=\\"\\"></div>",
+            "source": "<div id="" id=""></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -406,7 +672,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                   "line": 1,
                   "offset": 20,
                 },
-                "source": "id=\\"\\"",
+                "source": "id=""",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -414,6 +680,19 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                 },
               },
               "name": "id",
+              "nameLoc": {
+                "end": {
+                  "column": 18,
+                  "line": 1,
+                  "offset": 17,
+                },
+                "source": "id",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "",
@@ -423,7 +702,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                     "line": 1,
                     "offset": 20,
                   },
-                  "source": "\\"\\"",
+                  "source": """",
                   "start": {
                     "column": 19,
                     "line": 1,
@@ -440,7 +719,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                   "line": 1,
                   "offset": 26,
                 },
-                "source": "id=\\"\\"",
+                "source": "id=""",
                 "start": {
                   "column": 22,
                   "line": 1,
@@ -448,6 +727,19 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                 },
               },
               "name": "id",
+              "nameLoc": {
+                "end": {
+                  "column": 24,
+                  "line": 1,
+                  "offset": 23,
+                },
+                "source": "id",
+                "start": {
+                  "column": 22,
+                  "line": 1,
+                  "offset": 21,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "",
@@ -457,7 +749,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                     "line": 1,
                     "offset": 26,
                   },
-                  "source": "\\"\\"",
+                  "source": """",
                   "start": {
                     "column": 25,
                     "line": 1,
@@ -474,14 +766,13 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 45,
           "line": 1,
           "offset": 44,
         },
-        "source": "<template><div id=\\"\\" id=\\"\\"></div></template>",
+        "source": "<template><div id="" id=""></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -507,165 +798,14 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
       "line": 1,
       "offset": 44,
     },
-    "source": "<template><div id=\\"\\" id=\\"\\"></div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > END_TAG_WITH_ATTRIBUTES > <template><div></div id=""></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 28,
-              "line": 1,
-              "offset": 27,
-            },
-            "source": "<div></div id=\\"\\">",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 39,
-          "line": 1,
-          "offset": 38,
-        },
-        "source": "<template><div></div id=\\"\\"></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 39,
-      "line": 1,
-      "offset": 38,
-    },
-    "source": "<template><div></div id=\\"\\"></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > END_TAG_WITH_TRAILING_SOLIDUS > <template><div></div/></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 23,
-              "line": 1,
-              "offset": 22,
-            },
-            "source": "<div></div/>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 34,
-          "line": 1,
-          "offset": 33,
-        },
-        "source": "<template><div></div/></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 34,
-      "line": 1,
-      "offset": 33,
-    },
-    "source": "<template><div></div/></template>",
+    "source": "<template><div id="" id=""></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id="" id=""></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -673,7 +813,7 @@ exports[`compiler: parse > Errors > END_TAG_WITH_TRAILING_SOLIDUS > <template><d
 
 exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template>< 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -696,7 +836,6 @@ exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template>< 1`] = `
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 12,
@@ -736,6 +875,7 @@ exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template>< 1`] = `
       "offset": 0,
     },
   },
+  "source": "<template><",
   "temps": 0,
   "type": 0,
 }
@@ -743,7 +883,7 @@ exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template>< 1`] = `
 
 exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template></ 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -766,7 +906,6 @@ exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template></ 1`] = `
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 13,
@@ -806,6 +945,7 @@ exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template></ 1`] = `
       "offset": 0,
     },
   },
+  "source": "<template></",
   "temps": 0,
   "type": 0,
 }
@@ -813,14 +953,13 @@ exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template></ 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[ 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 25,
@@ -842,7 +981,6 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[ 1`]
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 25,
@@ -882,6 +1020,7 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[ 1`]
       "offset": 0,
     },
   },
+  "source": "<template><svg><![CDATA[",
   "temps": 0,
   "type": 0,
 }
@@ -889,7 +1028,7 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[ 1`]
 
 exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[cdata 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -914,7 +1053,6 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[cdata
             },
           ],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 30,
@@ -936,7 +1074,6 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[cdata
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 30,
@@ -976,146 +1113,7 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[cdata
       "offset": 0,
     },
   },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><! 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "",
-          "loc": {
-            "end": {
-              "column": 13,
-              "line": 1,
-              "offset": 12,
-            },
-            "source": "<!",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 13,
-          "line": 1,
-          "offset": 12,
-        },
-        "source": "<template><!",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 13,
-      "line": 1,
-      "offset": 12,
-    },
-    "source": "<template><!",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!- 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "-",
-          "loc": {
-            "end": {
-              "column": 14,
-              "line": 1,
-              "offset": 13,
-            },
-            "source": "<!-",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 14,
-          "line": 1,
-          "offset": 13,
-        },
-        "source": "<template><!-",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 14,
-      "line": 1,
-      "offset": 13,
-    },
-    "source": "<template><!-",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
+  "source": "<template><svg><![CDATA[cdata",
   "temps": 0,
   "type": 0,
 }
@@ -1123,30 +1121,11 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!- 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!-- 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "content": "",
-          "loc": {
-            "end": {
-              "column": 15,
-              "line": 1,
-              "offset": 14,
-            },
-            "source": "<!--",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 15,
@@ -1186,6 +1165,7 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!-- 1`] = `
       "offset": 0,
     },
   },
+  "source": "<template><!--",
   "temps": 0,
   "type": 0,
 }
@@ -1193,7 +1173,7 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!-- 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!--comment 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -1201,9 +1181,9 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!--comment 1`] =
           "content": "comment",
           "loc": {
             "end": {
-              "column": 22,
+              "column": 25,
               "line": 1,
-              "offset": 21,
+              "offset": 24,
             },
             "source": "<!--comment",
             "start": {
@@ -1216,7 +1196,6 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!--comment 1`] =
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 22,
@@ -1256,216 +1235,7 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!--comment 1`] =
       "offset": 0,
     },
   },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!abc 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "abc",
-          "loc": {
-            "end": {
-              "column": 16,
-              "line": 1,
-              "offset": 15,
-            },
-            "source": "<!abc",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 16,
-          "line": 1,
-          "offset": 15,
-        },
-        "source": "<template><!abc",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 16,
-      "line": 1,
-      "offset": 15,
-    },
-    "source": "<template><!abc",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT > <script><!--console.log('hello') 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "<!--console.log('hello')",
-          "loc": {
-            "end": {
-              "column": 33,
-              "line": 1,
-              "offset": 32,
-            },
-            "source": "<!--console.log('hello')",
-            "start": {
-              "column": 9,
-              "line": 1,
-              "offset": 8,
-            },
-          },
-          "type": 2,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 33,
-          "line": 1,
-          "offset": 32,
-        },
-        "source": "<script><!--console.log('hello')",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "script",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 33,
-      "line": 1,
-      "offset": 32,
-    },
-    "source": "<script><!--console.log('hello')",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT > <script>console.log('hello') 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "console.log('hello')",
-          "loc": {
-            "end": {
-              "column": 29,
-              "line": 1,
-              "offset": 28,
-            },
-            "source": "console.log('hello')",
-            "start": {
-              "column": 9,
-              "line": 1,
-              "offset": 8,
-            },
-          },
-          "type": 2,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 29,
-          "line": 1,
-          "offset": 28,
-        },
-        "source": "<script>console.log('hello')",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "script",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 29,
-      "line": 1,
-      "offset": 28,
-    },
-    "source": "<script>console.log('hello')",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
+  "source": "<template><!--comment",
   "temps": 0,
   "type": 0,
 }
@@ -1473,12 +1243,11 @@ exports[`compiler: parse > Errors > EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT > <scri
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <div></div 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 11,
@@ -1518,6 +1287,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <div></div 1`] = `
       "offset": 0,
     },
   },
+  "source": "<div></div",
   "temps": 0,
   "type": 0,
 }
@@ -1525,36 +1295,11 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <div></div 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div  1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 16,
-              "line": 1,
-              "offset": 15,
-            },
-            "source": "<div ",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 16,
@@ -1594,6 +1339,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div  1`] = `
       "offset": 0,
     },
   },
+  "source": "<template><div ",
   "temps": 0,
   "type": 0,
 }
@@ -1601,36 +1347,11 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div  1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 15,
-              "line": 1,
-              "offset": 14,
-            },
-            "source": "<div",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 15,
@@ -1670,6 +1391,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div 1`] = `
       "offset": 0,
     },
   },
+  "source": "<template><div",
   "temps": 0,
   "type": 0,
 }
@@ -1677,55 +1399,11 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id  1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 19,
-              "line": 1,
-              "offset": 18,
-            },
-            "source": "<div id ",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 18,
-                  "line": 1,
-                  "offset": 17,
-                },
-                "source": "id",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": undefined,
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 19,
@@ -1765,6 +1443,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id  1`] = `
       "offset": 0,
     },
   },
+  "source": "<template><div id ",
   "temps": 0,
   "type": 0,
 }
@@ -1772,55 +1451,11 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id  1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id = 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 20,
-              "line": 1,
-              "offset": 19,
-            },
-            "source": "<div id =",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 20,
-                  "line": 1,
-                  "offset": 19,
-                },
-                "source": "id =",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": undefined,
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 20,
@@ -1860,6 +1495,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id = 1`] = `
       "offset": 0,
     },
   },
+  "source": "<template><div id =",
   "temps": 0,
   "type": 0,
 }
@@ -1867,55 +1503,11 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id = 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 18,
-              "line": 1,
-              "offset": 17,
-            },
-            "source": "<div id",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 18,
-                  "line": 1,
-                  "offset": 17,
-                },
-                "source": "id",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": undefined,
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 18,
@@ -1955,6 +1547,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id 1`] = `
       "offset": 0,
     },
   },
+  "source": "<template><div id",
   "temps": 0,
   "type": 0,
 }
@@ -1962,78 +1555,18 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 23,
-              "line": 1,
-              "offset": 22,
-            },
-            "source": "<div id=\\"abc",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 23,
-                  "line": 1,
-                  "offset": 22,
-                },
-                "source": "id=\\"abc",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "abc",
-                "loc": {
-                  "end": {
-                    "column": 23,
-                    "line": 1,
-                    "offset": 22,
-                  },
-                  "source": "\\"abc",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 23,
           "line": 1,
           "offset": 22,
         },
-        "source": "<template><div id=\\"abc",
+        "source": "<template><div id="abc",
         "start": {
           "column": 1,
           "line": 1,
@@ -2059,13 +1592,14 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
       "line": 1,
       "offset": 22,
     },
-    "source": "<template><div id=\\"abc",
+    "source": "<template><div id="abc",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id="abc",
   "temps": 0,
   "type": 0,
 }
@@ -2073,78 +1607,18 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 24,
-              "line": 1,
-              "offset": 23,
-            },
-            "source": "<div id=\\"abc\\"",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "id=\\"abc\\"",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "abc",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "\\"abc\\"",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 24,
           "line": 1,
           "offset": 23,
         },
-        "source": "<template><div id=\\"abc\\"",
+        "source": "<template><div id="abc"",
         "start": {
           "column": 1,
           "line": 1,
@@ -2170,13 +1644,14 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
       "line": 1,
       "offset": 23,
     },
-    "source": "<template><div id=\\"abc\\"",
+    "source": "<template><div id="abc"",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id="abc"",
   "temps": 0,
   "type": 0,
 }
@@ -2184,78 +1659,36 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
+          "content": "/",
           "loc": {
             "end": {
               "column": 25,
               "line": 1,
               "offset": 24,
             },
-            "source": "<div id=\\"abc\\"/",
+            "source": "/",
             "start": {
-              "column": 11,
+              "column": 0,
               "line": 1,
-              "offset": 10,
+              "offset": -1,
             },
           },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "id=\\"abc\\"",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "abc",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "\\"abc\\"",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
+          "type": 2,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 25,
           "line": 1,
           "offset": 24,
         },
-        "source": "<template><div id=\\"abc\\"/",
+        "source": "<template><div id="abc"/",
         "start": {
           "column": 1,
           "line": 1,
@@ -2281,13 +1714,14 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
       "line": 1,
       "offset": 24,
     },
-    "source": "<template><div id=\\"abc\\"/",
+    "source": "<template><div id="abc"/",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id="abc"/",
   "temps": 0,
   "type": 0,
 }
@@ -2295,71 +1729,11 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 23,
-              "line": 1,
-              "offset": 22,
-            },
-            "source": "<div id='abc",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 23,
-                  "line": 1,
-                  "offset": 22,
-                },
-                "source": "id='abc",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "abc",
-                "loc": {
-                  "end": {
-                    "column": 23,
-                    "line": 1,
-                    "offset": 22,
-                  },
-                  "source": "'abc",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 23,
@@ -2399,6 +1773,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc 1`] = `
       "offset": 0,
     },
   },
+  "source": "<template><div id='abc",
   "temps": 0,
   "type": 0,
 }
@@ -2406,71 +1781,11 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc' 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 24,
-              "line": 1,
-              "offset": 23,
-            },
-            "source": "<div id='abc'",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "id='abc'",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "abc",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "'abc'",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 24,
@@ -2510,6 +1825,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc' 1`] = `
       "offset": 0,
     },
   },
+  "source": "<template><div id='abc'",
   "temps": 0,
   "type": 0,
 }
@@ -2517,71 +1833,29 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc' 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc'/ 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
+          "content": "/",
           "loc": {
             "end": {
               "column": 25,
               "line": 1,
               "offset": 24,
             },
-            "source": "<div id='abc'/",
+            "source": "/",
             "start": {
-              "column": 11,
+              "column": 0,
               "line": 1,
-              "offset": 10,
+              "offset": -1,
             },
           },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "id='abc'",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "abc",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "'abc'",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
+          "type": 2,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 25,
@@ -2621,6 +1895,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc'/ 1`] =
       "offset": 0,
     },
   },
+  "source": "<template><div id='abc'/",
   "temps": 0,
   "type": 0,
 }
@@ -2628,71 +1903,29 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc'/ 1`] =
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc / 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
+          "content": "/",
           "loc": {
             "end": {
               "column": 24,
               "line": 1,
               "offset": 23,
             },
-            "source": "<div id=abc /",
+            "source": "/",
             "start": {
-              "column": 11,
+              "column": 0,
               "line": 1,
-              "offset": 10,
+              "offset": -1,
             },
           },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 22,
-                  "line": 1,
-                  "offset": 21,
-                },
-                "source": "id=abc",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "abc",
-                "loc": {
-                  "end": {
-                    "column": 22,
-                    "line": 1,
-                    "offset": 21,
-                  },
-                  "source": "abc",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
+          "type": 2,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 24,
@@ -2732,6 +1965,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc / 1`] = `
       "offset": 0,
     },
   },
+  "source": "<template><div id=abc /",
   "temps": 0,
   "type": 0,
 }
@@ -2739,71 +1973,11 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc / 1`] = `
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 22,
-              "line": 1,
-              "offset": 21,
-            },
-            "source": "<div id=abc",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 22,
-                  "line": 1,
-                  "offset": 21,
-                },
-                "source": "id=abc",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "abc",
-                "loc": {
-                  "end": {
-                    "column": 22,
-                    "line": 1,
-                    "offset": 21,
-                  },
-                  "source": "abc",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 22,
@@ -2843,717 +2017,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc 1`] = `
       "offset": 0,
     },
   },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INCORRECTLY_CLOSED_COMMENT > <template><!--comment--!></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "comment",
-          "loc": {
-            "end": {
-              "column": 26,
-              "line": 1,
-              "offset": 25,
-            },
-            "source": "<!--comment--!>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 37,
-          "line": 1,
-          "offset": 36,
-        },
-        "source": "<template><!--comment--!></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 37,
-      "line": 1,
-      "offset": 36,
-    },
-    "source": "<template><!--comment--!></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INCORRECTLY_OPENED_COMMENT > <!DOCTYPE html> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "content": "DOCTYPE html",
-      "loc": {
-        "end": {
-          "column": 16,
-          "line": 1,
-          "offset": 15,
-        },
-        "source": "<!DOCTYPE html>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "type": 3,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 16,
-      "line": 1,
-      "offset": 15,
-    },
-    "source": "<!DOCTYPE html>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INCORRECTLY_OPENED_COMMENT > <template><!></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "",
-          "loc": {
-            "end": {
-              "column": 14,
-              "line": 1,
-              "offset": 13,
-            },
-            "source": "<!>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 25,
-          "line": 1,
-          "offset": 24,
-        },
-        "source": "<template><!></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 25,
-      "line": 1,
-      "offset": 24,
-    },
-    "source": "<template><!></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INCORRECTLY_OPENED_COMMENT > <template><!-></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "-",
-          "loc": {
-            "end": {
-              "column": 15,
-              "line": 1,
-              "offset": 14,
-            },
-            "source": "<!->",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 26,
-          "line": 1,
-          "offset": 25,
-        },
-        "source": "<template><!-></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 26,
-      "line": 1,
-      "offset": 25,
-    },
-    "source": "<template><!-></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INCORRECTLY_OPENED_COMMENT > <template><!ELEMENT br EMPTY></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "ELEMENT br EMPTY",
-          "loc": {
-            "end": {
-              "column": 30,
-              "line": 1,
-              "offset": 29,
-            },
-            "source": "<!ELEMENT br EMPTY>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 41,
-          "line": 1,
-          "offset": 40,
-        },
-        "source": "<template><!ELEMENT br EMPTY></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 41,
-      "line": 1,
-      "offset": 40,
-    },
-    "source": "<template><!ELEMENT br EMPTY></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <template></�></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "�",
-          "loc": {
-            "end": {
-              "column": 15,
-              "line": 1,
-              "offset": 14,
-            },
-            "source": "</�>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 26,
-          "line": 1,
-          "offset": 25,
-        },
-        "source": "<template></�></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 26,
-      "line": 1,
-      "offset": 25,
-    },
-    "source": "<template></�></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <template><�></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "<�>",
-          "loc": {
-            "end": {
-              "column": 14,
-              "line": 1,
-              "offset": 13,
-            },
-            "source": "<�>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 2,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 25,
-          "line": 1,
-          "offset": 24,
-        },
-        "source": "<template><�></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 25,
-      "line": 1,
-      "offset": 24,
-    },
-    "source": "<template><�></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <template>{{a < b}}</template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": {
-            "constType": 0,
-            "content": "a < b",
-            "isStatic": false,
-            "loc": {
-              "end": {
-                "column": 18,
-                "line": 1,
-                "offset": 17,
-              },
-              "source": "a < b",
-              "start": {
-                "column": 13,
-                "line": 1,
-                "offset": 12,
-              },
-            },
-            "type": 4,
-          },
-          "loc": {
-            "end": {
-              "column": 20,
-              "line": 1,
-              "offset": 19,
-            },
-            "source": "{{a < b}}",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 5,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 31,
-          "line": 1,
-          "offset": 30,
-        },
-        "source": "<template>{{a < b}}</template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 31,
-      "line": 1,
-      "offset": 30,
-    },
-    "source": "<template>{{a < b}}</template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <template>a < b</template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "a < b",
-          "loc": {
-            "end": {
-              "column": 16,
-              "line": 1,
-              "offset": 15,
-            },
-            "source": "a < b",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 2,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 27,
-          "line": 1,
-          "offset": 26,
-        },
-        "source": "<template>a < b</template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 27,
-      "line": 1,
-      "offset": 26,
-    },
-    "source": "<template>a < b</template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <template>a </ b</template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "a ",
-          "loc": {
-            "end": {
-              "column": 13,
-              "line": 1,
-              "offset": 12,
-            },
-            "source": "a ",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 2,
-        },
-        {
-          "content": " b</template",
-          "loc": {
-            "end": {
-              "column": 28,
-              "line": 1,
-              "offset": 27,
-            },
-            "source": "</ b</template>",
-            "start": {
-              "column": 13,
-              "line": 1,
-              "offset": 12,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 28,
-          "line": 1,
-          "offset": 27,
-        },
-        "source": "<template>a </ b</template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 28,
-      "line": 1,
-      "offset": 27,
-    },
-    "source": "<template>a </ b</template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
+  "source": "<template><div id=abc",
   "temps": 0,
   "type": 0,
 }
@@ -3561,14 +2025,13 @@ exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <templ
 
 exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id= /></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 28,
@@ -3599,6 +2062,19 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
                 },
               },
               "name": "id",
+              "nameLoc": {
+                "end": {
+                  "column": 18,
+                  "line": 1,
+                  "offset": 17,
+                },
+                "source": "id",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "/",
@@ -3625,7 +2101,6 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 39,
@@ -3665,6 +2140,7 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
       "offset": 0,
     },
   },
+  "source": "<template><div id= /></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -3672,14 +2148,13 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
 
 exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id= ></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 27,
@@ -3710,8 +2185,37 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
                 },
               },
               "name": "id",
+              "nameLoc": {
+                "end": {
+                  "column": 18,
+                  "line": 1,
+                  "offset": 17,
+                },
+                "source": "id",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
-              "value": undefined,
+              "value": {
+                "content": "",
+                "loc": {
+                  "end": {
+                    "column": 20,
+                    "line": 1,
+                    "offset": 19,
+                  },
+                  "source": "",
+                  "start": {
+                    "column": 20,
+                    "line": 1,
+                    "offset": 19,
+                  },
+                },
+                "type": 2,
+              },
             },
           ],
           "tag": "div",
@@ -3720,7 +2224,6 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 38,
@@ -3760,6 +2263,7 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
       "offset": 0,
     },
   },
+  "source": "<template><div id= ></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -3767,14 +2271,13 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
 
 exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 26,
@@ -3805,8 +2308,37 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
                 },
               },
               "name": "id",
+              "nameLoc": {
+                "end": {
+                  "column": 18,
+                  "line": 1,
+                  "offset": 17,
+                },
+                "source": "id",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
-              "value": undefined,
+              "value": {
+                "content": "",
+                "loc": {
+                  "end": {
+                    "column": 19,
+                    "line": 1,
+                    "offset": 18,
+                  },
+                  "source": "",
+                  "start": {
+                    "column": 19,
+                    "line": 1,
+                    "offset": 18,
+                  },
+                },
+                "type": 2,
+              },
             },
           ],
           "tag": "div",
@@ -3815,7 +2347,6 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 37,
@@ -3855,6 +2386,7 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
       "offset": 0,
     },
   },
+  "source": "<template><div id=></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -3862,12 +2394,11 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
 
 exports[`compiler: parse > Errors > MISSING_END_TAG_NAME > <template></></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 25,
@@ -3907,649 +2438,7 @@ exports[`compiler: parse > Errors > MISSING_END_TAG_NAME > <template></></templa
       "offset": 0,
     },
   },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <template><div id="foo"\\x0d;\\x0a;class="bar"></div></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 19,
-              "line": 2,
-              "offset": 43,
-            },
-            "source": "<div id=\\"foo\\"
-class=\\"bar\\"></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "id=\\"foo\\"",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "foo",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "\\"foo\\"",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-            {
-              "loc": {
-                "end": {
-                  "column": 12,
-                  "line": 2,
-                  "offset": 36,
-                },
-                "source": "class=\\"bar\\"",
-                "start": {
-                  "column": 1,
-                  "line": 2,
-                  "offset": 25,
-                },
-              },
-              "name": "class",
-              "type": 6,
-              "value": {
-                "content": "bar",
-                "loc": {
-                  "end": {
-                    "column": 12,
-                    "line": 2,
-                    "offset": 36,
-                  },
-                  "source": "\\"bar\\"",
-                  "start": {
-                    "column": 7,
-                    "line": 2,
-                    "offset": 31,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 30,
-          "line": 2,
-          "offset": 54,
-        },
-        "source": "<template><div id=\\"foo\\"
-class=\\"bar\\"></div></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 30,
-      "line": 2,
-      "offset": 54,
-    },
-    "source": "<template><div id=\\"foo\\"
-class=\\"bar\\"></div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <template><div id="foo"class="bar"></div></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 42,
-              "line": 1,
-              "offset": 41,
-            },
-            "source": "<div id=\\"foo\\"class=\\"bar\\"></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "id=\\"foo\\"",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "foo",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "\\"foo\\"",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-            {
-              "loc": {
-                "end": {
-                  "column": 35,
-                  "line": 1,
-                  "offset": 34,
-                },
-                "source": "class=\\"bar\\"",
-                "start": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-              },
-              "name": "class",
-              "type": 6,
-              "value": {
-                "content": "bar",
-                "loc": {
-                  "end": {
-                    "column": 35,
-                    "line": 1,
-                    "offset": 34,
-                  },
-                  "source": "\\"bar\\"",
-                  "start": {
-                    "column": 30,
-                    "line": 1,
-                    "offset": 29,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 53,
-          "line": 1,
-          "offset": 52,
-        },
-        "source": "<template><div id=\\"foo\\"class=\\"bar\\"></div></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 53,
-      "line": 1,
-      "offset": 52,
-    },
-    "source": "<template><div id=\\"foo\\"class=\\"bar\\"></div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!-- 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "a<!--",
-          "loc": {
-            "end": {
-              "column": 20,
-              "line": 1,
-              "offset": 19,
-            },
-            "source": "<!--a<!--",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 20,
-          "line": 1,
-          "offset": 19,
-        },
-        "source": "<template><!--a<!--",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 20,
-      "line": 1,
-      "offset": 19,
-    },
-    "source": "<template><!--a<!--",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "a<!",
-          "loc": {
-            "end": {
-              "column": 21,
-              "line": 1,
-              "offset": 20,
-            },
-            "source": "<!--a<!-->",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 32,
-          "line": 1,
-          "offset": 31,
-        },
-        "source": "<template><!--a<!--></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 32,
-      "line": 1,
-      "offset": 31,
-    },
-    "source": "<template><!--a<!--></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b<!----></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "a<!--b<!--",
-          "loc": {
-            "end": {
-              "column": 28,
-              "line": 1,
-              "offset": 27,
-            },
-            "source": "<!--a<!--b<!---->",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 39,
-          "line": 1,
-          "offset": 38,
-        },
-        "source": "<template><!--a<!--b<!----></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 39,
-      "line": 1,
-      "offset": 38,
-    },
-    "source": "<template><!--a<!--b<!----></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b<!--c--></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "a<!--b<!--c",
-          "loc": {
-            "end": {
-              "column": 29,
-              "line": 1,
-              "offset": 28,
-            },
-            "source": "<!--a<!--b<!--c-->",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 40,
-          "line": 1,
-          "offset": 39,
-        },
-        "source": "<template><!--a<!--b<!--c--></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 40,
-      "line": 1,
-      "offset": 39,
-    },
-    "source": "<template><!--a<!--b<!--c--></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b--></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "a<!--b",
-          "loc": {
-            "end": {
-              "column": 24,
-              "line": 1,
-              "offset": 23,
-            },
-            "source": "<!--a<!--b-->",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 35,
-          "line": 1,
-          "offset": 34,
-        },
-        "source": "<template><!--a<!--b--></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 35,
-      "line": 1,
-      "offset": 34,
-    },
-    "source": "<template><!--a<!--b--></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
+  "source": "<template></></template>",
   "temps": 0,
   "type": 0,
 }
@@ -4557,21 +2446,20 @@ exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b--></te
 
 exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <template><div a"bc=''></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 30,
               "line": 1,
               "offset": 29,
             },
-            "source": "<div a\\"bc=''></div>",
+            "source": "<div a"bc=''></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -4587,14 +2475,27 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
                   "line": 1,
                   "offset": 22,
                 },
-                "source": "a\\"bc=''",
+                "source": "a"bc=''",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "name": "a"bc",
+              "nameLoc": {
+                "end": {
+                  "column": 20,
+                  "line": 1,
+                  "offset": 19,
+                },
+                "source": "a"bc",
                 "start": {
                   "column": 16,
                   "line": 1,
                   "offset": 15,
                 },
               },
-              "name": "a\\"bc",
               "type": 6,
               "value": {
                 "content": "",
@@ -4621,14 +2522,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 41,
           "line": 1,
           "offset": 40,
         },
-        "source": "<template><div a\\"bc=''></div></template>",
+        "source": "<template><div a"bc=''></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4654,13 +2554,14 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
       "line": 1,
       "offset": 40,
     },
-    "source": "<template><div a\\"bc=''></div></template>",
+    "source": "<template><div a"bc=''></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div a"bc=''></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -4668,14 +2569,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
 
 exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <template><div a'bc=''></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 30,
@@ -4706,6 +2606,19 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
                 },
               },
               "name": "a'bc",
+              "nameLoc": {
+                "end": {
+                  "column": 20,
+                  "line": 1,
+                  "offset": 19,
+                },
+                "source": "a'bc",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "",
@@ -4732,7 +2645,6 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 41,
@@ -4772,6 +2684,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
       "offset": 0,
     },
   },
+  "source": "<template><div a'bc=''></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -4779,14 +2692,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
 
 exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <template><div a<bc=''></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 30,
@@ -4817,6 +2729,19 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
                 },
               },
               "name": "a<bc",
+              "nameLoc": {
+                "end": {
+                  "column": 20,
+                  "line": 1,
+                  "offset": 19,
+                },
+                "source": "a<bc",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "",
@@ -4843,7 +2768,6 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 41,
@@ -4883,6 +2807,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
       "offset": 0,
     },
   },
+  "source": "<template><div a<bc=''></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -4890,21 +2815,20 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
 
 exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar"></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 31,
               "line": 1,
               "offset": 30,
             },
-            "source": "<div foo=bar\\"></div>",
+            "source": "<div foo=bar"></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -4920,7 +2844,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
                   "line": 1,
                   "offset": 23,
                 },
-                "source": "foo=bar\\"",
+                "source": "foo=bar"",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -4928,16 +2852,29 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
                 },
               },
               "name": "foo",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "foo",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
-                "content": "bar\\"",
+                "content": "bar"",
                 "loc": {
                   "end": {
                     "column": 24,
                     "line": 1,
                     "offset": 23,
                   },
-                  "source": "bar\\"",
+                  "source": "bar"",
                   "start": {
                     "column": 20,
                     "line": 1,
@@ -4954,14 +2891,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 42,
           "line": 1,
           "offset": 41,
         },
-        "source": "<template><div foo=bar\\"></div></template>",
+        "source": "<template><div foo=bar"></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4987,13 +2923,14 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
       "line": 1,
       "offset": 41,
     },
-    "source": "<template><div foo=bar\\"></div></template>",
+    "source": "<template><div foo=bar"></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div foo=bar"></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -5001,14 +2938,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
 
 exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar'></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 31,
@@ -5039,6 +2975,19 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
                 },
               },
               "name": "foo",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "foo",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "bar'",
@@ -5065,7 +3014,6 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 42,
@@ -5105,6 +3053,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
       "offset": 0,
     },
   },
+  "source": "<template><div foo=bar'></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -5112,14 +3061,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
 
 exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar<div></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 34,
@@ -5150,6 +3098,19 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
                 },
               },
               "name": "foo",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "foo",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "bar<div",
@@ -5176,7 +3137,6 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 45,
@@ -5216,6 +3176,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
       "offset": 0,
     },
   },
+  "source": "<template><div foo=bar<div></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -5223,14 +3184,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
 
 exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar=baz></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 34,
@@ -5261,6 +3221,19 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
                 },
               },
               "name": "foo",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "foo",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "bar=baz",
@@ -5287,7 +3260,6 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 45,
@@ -5327,6 +3299,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
       "offset": 0,
     },
   },
+  "source": "<template><div foo=bar=baz></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -5334,14 +3307,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
 
 exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar\`></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 31,
@@ -5372,6 +3344,19 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
                 },
               },
               "name": "foo",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "foo",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "bar\`",
@@ -5398,7 +3383,6 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 42,
@@ -5438,6 +3422,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
       "offset": 0,
     },
   },
+  "source": "<template><div foo=bar\`></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -5445,14 +3430,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
 
 exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME > <template><div =></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 24,
@@ -5483,6 +3467,19 @@ exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME
                 },
               },
               "name": "=",
+              "nameLoc": {
+                "end": {
+                  "column": 17,
+                  "line": 1,
+                  "offset": 16,
+                },
+                "source": "=",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": undefined,
             },
@@ -5493,7 +3490,6 @@ exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 35,
@@ -5533,6 +3529,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME
       "offset": 0,
     },
   },
+  "source": "<template><div =></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -5540,14 +3537,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME
 
 exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME > <template><div =foo=bar></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 31,
@@ -5578,6 +3574,19 @@ exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME
                 },
               },
               "name": "=foo",
+              "nameLoc": {
+                "end": {
+                  "column": 20,
+                  "line": 1,
+                  "offset": 19,
+                },
+                "source": "=foo",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "bar",
@@ -5604,7 +3613,6 @@ exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 42,
@@ -5644,6 +3652,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME
       "offset": 0,
     },
   },
+  "source": "<template><div =foo=bar></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -5651,30 +3660,11 @@ exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME
 
 exports[`compiler: parse > Errors > UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME > <template><?xml?></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
-      "children": [
-        {
-          "content": "?xml?",
-          "loc": {
-            "end": {
-              "column": 18,
-              "line": 1,
-              "offset": 17,
-            },
-            "source": "<?xml?>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 29,
@@ -5714,6 +3704,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME
       "offset": 0,
     },
   },
+  "source": "<template><?xml?></template>",
   "temps": 0,
   "type": 0,
 }
@@ -5721,14 +3712,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME
 
 exports[`compiler: parse > Errors > UNEXPECTED_SOLIDUS_IN_TAG > <template><div a/b></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 26,
@@ -5759,6 +3749,19 @@ exports[`compiler: parse > Errors > UNEXPECTED_SOLIDUS_IN_TAG > <template><div a
                 },
               },
               "name": "a",
+              "nameLoc": {
+                "end": {
+                  "column": 17,
+                  "line": 1,
+                  "offset": 16,
+                },
+                "source": "a",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": undefined,
             },
@@ -5777,6 +3780,19 @@ exports[`compiler: parse > Errors > UNEXPECTED_SOLIDUS_IN_TAG > <template><div a
                 },
               },
               "name": "b",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "b",
+                "start": {
+                  "column": 18,
+                  "line": 1,
+                  "offset": 17,
+                },
+              },
               "type": 6,
               "value": undefined,
             },
@@ -5787,7 +3803,6 @@ exports[`compiler: parse > Errors > UNEXPECTED_SOLIDUS_IN_TAG > <template><div a
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 37,
@@ -5827,6 +3842,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_SOLIDUS_IN_TAG > <template><div a
       "offset": 0,
     },
   },
+  "source": "<template><div a/b></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -5834,7 +3850,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_SOLIDUS_IN_TAG > <template><div a
 
 exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><![CDATA[</div>]]></svg> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -5857,7 +3873,6 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><![CDATA[</div>]]><
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 30,
@@ -5897,6 +3912,7 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><![CDATA[</div>]]><
       "offset": 0,
     },
   },
+  "source": "<svg><![CDATA[</div>]]></svg>",
   "temps": 0,
   "type": 0,
 }
@@ -5904,7 +3920,7 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><![CDATA[</div>]]><
 
 exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><!--</div>--></svg> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -5927,7 +3943,6 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><!--</div>--></svg>
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 25,
@@ -5967,6 +3982,7 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><!--</div>--></svg>
       "offset": 0,
     },
   },
+  "source": "<svg><!--</div>--></svg>",
   "temps": 0,
   "type": 0,
 }
@@ -5974,12 +3990,11 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><!--</div>--></svg>
 
 exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template></div></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 34,
@@ -6019,6 +4034,7 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template></div></div></
       "offset": 0,
     },
   },
+  "source": "<template></div></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -6026,12 +4042,11 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template></div></div></
 
 exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 28,
@@ -6071,6 +4086,7 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template></div></templa
       "offset": 0,
     },
   },
+  "source": "<template></div></template>",
   "temps": 0,
   "type": 0,
 }
@@ -6078,7 +4094,7 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template></div></templa
 
 exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template>{{'</div>'}}</template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -6119,7 +4135,6 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template>{{'</div>'}}</
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 34,
@@ -6159,6 +4174,77 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template>{{'</div>'}}</
       "offset": 0,
     },
   },
+  "source": "<template>{{'</div>'}}</template>",
+  "temps": 0,
+  "type": 0,
+}
+`;
+
+exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template>a </ b</template> 1`] = `
+{
+  "cached": [],
+  "children": [
+    {
+      "children": [
+        {
+          "content": "a ",
+          "loc": {
+            "end": {
+              "column": 13,
+              "line": 1,
+              "offset": 12,
+            },
+            "source": "a ",
+            "start": {
+              "column": 11,
+              "line": 1,
+              "offset": 10,
+            },
+          },
+          "type": 2,
+        },
+      ],
+      "codegenNode": undefined,
+      "loc": {
+        "end": {
+          "column": 28,
+          "line": 1,
+          "offset": 27,
+        },
+        "source": "<template>a </ b</template>",
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "ns": 0,
+      "props": [],
+      "tag": "template",
+      "tagType": 0,
+      "type": 1,
+    },
+  ],
+  "codegenNode": undefined,
+  "components": [],
+  "directives": [],
+  "helpers": Set {},
+  "hoists": [],
+  "imports": [],
+  "loc": {
+    "end": {
+      "column": 28,
+      "line": 1,
+      "offset": 27,
+    },
+    "source": "<template>a </ b</template>",
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "source": "<template>a </ b</template>",
   "temps": 0,
   "type": 0,
 }
@@ -6166,7 +4252,7 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template>{{'</div>'}}</
 
 exports[`compiler: parse > Errors > X_INVALID_END_TAG > <textarea></div></textarea> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -6189,7 +4275,6 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <textarea></div></textar
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 28,
@@ -6229,6 +4314,7 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <textarea></div></textar
       "offset": 0,
     },
   },
+  "source": "<textarea></div></textarea>",
   "temps": 0,
   "type": 0,
 }
@@ -6236,7 +4322,7 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <textarea></div></textar
 
 exports[`compiler: parse > Errors > X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END > <div v-foo:[sef fsef] /> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [],
@@ -6264,11 +4350,11 @@ exports[`compiler: parse > Errors > X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END > <
             "isStatic": false,
             "loc": {
               "end": {
-                "column": 16,
+                "column": 17,
                 "line": 1,
-                "offset": 15,
+                "offset": 16,
               },
-              "source": "[sef",
+              "source": "[sef ",
               "start": {
                 "column": 12,
                 "line": 1,
@@ -6293,6 +4379,7 @@ exports[`compiler: parse > Errors > X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END > <
           },
           "modifiers": [],
           "name": "foo",
+          "rawName": "v-foo:[sef",
           "type": 7,
         },
         {
@@ -6310,6 +4397,19 @@ exports[`compiler: parse > Errors > X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END > <
             },
           },
           "name": "fsef]",
+          "nameLoc": {
+            "end": {
+              "column": 22,
+              "line": 1,
+              "offset": 21,
+            },
+            "source": "fsef]",
+            "start": {
+              "column": 17,
+              "line": 1,
+              "offset": 16,
+            },
+          },
           "type": 6,
           "value": undefined,
         },
@@ -6338,6 +4438,7 @@ exports[`compiler: parse > Errors > X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END > <
       "offset": 0,
     },
   },
+  "source": "<div v-foo:[sef fsef] />",
   "temps": 0,
   "type": 0,
 }
@@ -6345,14 +4446,13 @@ exports[`compiler: parse > Errors > X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END > <
 
 exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 16,
@@ -6374,7 +4474,6 @@ exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div> 1`] = `
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 16,
@@ -6414,6 +4513,7 @@ exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div> 1`] = `
       "offset": 0,
     },
   },
+  "source": "<template><div>",
   "temps": 0,
   "type": 0,
 }
@@ -6421,14 +4521,13 @@ exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div> 1`] = `
 
 exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 16,
@@ -6450,7 +4549,6 @@ exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div></templat
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 27,
@@ -6490,6 +4588,77 @@ exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div></templat
       "offset": 0,
     },
   },
+  "source": "<template><div></template>",
+  "temps": 0,
+  "type": 0,
+}
+`;
+
+exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > <div>{{ foo</div> 1`] = `
+{
+  "cached": [],
+  "children": [
+    {
+      "children": [
+        {
+          "content": "{{ foo</div>",
+          "loc": {
+            "end": {
+              "column": 18,
+              "line": 1,
+              "offset": 17,
+            },
+            "source": "{{ foo</div>",
+            "start": {
+              "column": 6,
+              "line": 1,
+              "offset": 5,
+            },
+          },
+          "type": 2,
+        },
+      ],
+      "codegenNode": undefined,
+      "loc": {
+        "end": {
+          "column": 18,
+          "line": 1,
+          "offset": 17,
+        },
+        "source": "<div>{{ foo</div>",
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "ns": 0,
+      "props": [],
+      "tag": "div",
+      "tagType": 0,
+      "type": 1,
+    },
+  ],
+  "codegenNode": undefined,
+  "components": [],
+  "directives": [],
+  "helpers": Set {},
+  "hoists": [],
+  "imports": [],
+  "loc": {
+    "end": {
+      "column": 18,
+      "line": 1,
+      "offset": 17,
+    },
+    "source": "<div>{{ foo</div>",
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "source": "<div>{{ foo</div>",
   "temps": 0,
   "type": 0,
 }
@@ -6497,7 +4666,7 @@ exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div></templat
 
 exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{ 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "content": "{{",
@@ -6536,6 +4705,7 @@ exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{ 1`] = `
       "offset": 0,
     },
   },
+  "source": "{{",
   "temps": 0,
   "type": 0,
 }
@@ -6543,7 +4713,7 @@ exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{ 1`] = `
 
 exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{ foo 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "content": "{{ foo",
@@ -6582,6 +4752,7 @@ exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{ foo 1`] = `
       "offset": 0,
     },
   },
+  "source": "{{ foo",
   "temps": 0,
   "type": 0,
 }
@@ -6589,7 +4760,7 @@ exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{ foo 1`] = `
 
 exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{}} 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "content": {
@@ -6646,491 +4817,7 @@ exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{}} 1`] = `
       "offset": 0,
     },
   },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > invalid html 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 1,
-              "line": 3,
-              "offset": 13,
-            },
-            "source": "<span>
-",
-            "start": {
-              "column": 1,
-              "line": 2,
-              "offset": 6,
-            },
-          },
-          "ns": 0,
-          "props": [],
-          "tag": "span",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 7,
-          "line": 3,
-          "offset": 19,
-        },
-        "source": "<div>
-<span>
-</div>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "div",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 8,
-      "line": 4,
-      "offset": 27,
-    },
-    "source": "<div>
-<span>
-</div>
-</span>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > self closing multiple tag 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [],
-      "codegenNode": undefined,
-      "isSelfClosing": true,
-      "loc": {
-        "end": {
-          "column": 37,
-          "line": 1,
-          "offset": 36,
-        },
-        "source": "<div :class=\\"{ some: condition }\\" />",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [
-        {
-          "arg": {
-            "constType": 3,
-            "content": "class",
-            "isStatic": true,
-            "loc": {
-              "end": {
-                "column": 12,
-                "line": 1,
-                "offset": 11,
-              },
-              "source": "class",
-              "start": {
-                "column": 7,
-                "line": 1,
-                "offset": 6,
-              },
-            },
-            "type": 4,
-          },
-          "exp": {
-            "constType": 0,
-            "content": "{ some: condition }",
-            "isStatic": false,
-            "loc": {
-              "end": {
-                "column": 33,
-                "line": 1,
-                "offset": 32,
-              },
-              "source": "{ some: condition }",
-              "start": {
-                "column": 14,
-                "line": 1,
-                "offset": 13,
-              },
-            },
-            "type": 4,
-          },
-          "loc": {
-            "end": {
-              "column": 34,
-              "line": 1,
-              "offset": 33,
-            },
-            "source": ":class=\\"{ some: condition }\\"",
-            "start": {
-              "column": 6,
-              "line": 1,
-              "offset": 5,
-            },
-          },
-          "modifiers": [],
-          "name": "bind",
-          "type": 7,
-        },
-      ],
-      "tag": "div",
-      "tagType": 0,
-      "type": 1,
-    },
-    {
-      "children": [],
-      "codegenNode": undefined,
-      "isSelfClosing": true,
-      "loc": {
-        "end": {
-          "column": 37,
-          "line": 2,
-          "offset": 73,
-        },
-        "source": "<p v-bind:style=\\"{ color: 'red' }\\"/>",
-        "start": {
-          "column": 1,
-          "line": 2,
-          "offset": 37,
-        },
-      },
-      "ns": 0,
-      "props": [
-        {
-          "arg": {
-            "constType": 3,
-            "content": "style",
-            "isStatic": true,
-            "loc": {
-              "end": {
-                "column": 16,
-                "line": 2,
-                "offset": 52,
-              },
-              "source": "style",
-              "start": {
-                "column": 11,
-                "line": 2,
-                "offset": 47,
-              },
-            },
-            "type": 4,
-          },
-          "exp": {
-            "constType": 0,
-            "content": "{ color: 'red' }",
-            "isStatic": false,
-            "loc": {
-              "end": {
-                "column": 34,
-                "line": 2,
-                "offset": 70,
-              },
-              "source": "{ color: 'red' }",
-              "start": {
-                "column": 18,
-                "line": 2,
-                "offset": 54,
-              },
-            },
-            "type": 4,
-          },
-          "loc": {
-            "end": {
-              "column": 35,
-              "line": 2,
-              "offset": 71,
-            },
-            "source": "v-bind:style=\\"{ color: 'red' }\\"",
-            "start": {
-              "column": 4,
-              "line": 2,
-              "offset": 40,
-            },
-          },
-          "modifiers": [],
-          "name": "bind",
-          "type": 7,
-        },
-      ],
-      "tag": "p",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 37,
-      "line": 2,
-      "offset": 73,
-    },
-    "source": "<div :class=\\"{ some: condition }\\" />
-<p v-bind:style=\\"{ color: 'red' }\\"/>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > valid html 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": true,
-          "loc": {
-            "end": {
-              "column": 39,
-              "line": 2,
-              "offset": 73,
-            },
-            "source": "<p v-bind:style=\\"{ color: 'red' }\\"/>",
-            "start": {
-              "column": 3,
-              "line": 2,
-              "offset": 37,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "arg": {
-                "constType": 3,
-                "content": "style",
-                "isStatic": true,
-                "loc": {
-                  "end": {
-                    "column": 18,
-                    "line": 2,
-                    "offset": 52,
-                  },
-                  "source": "style",
-                  "start": {
-                    "column": 13,
-                    "line": 2,
-                    "offset": 47,
-                  },
-                },
-                "type": 4,
-              },
-              "exp": {
-                "constType": 0,
-                "content": "{ color: 'red' }",
-                "isStatic": false,
-                "loc": {
-                  "end": {
-                    "column": 36,
-                    "line": 2,
-                    "offset": 70,
-                  },
-                  "source": "{ color: 'red' }",
-                  "start": {
-                    "column": 20,
-                    "line": 2,
-                    "offset": 54,
-                  },
-                },
-                "type": 4,
-              },
-              "loc": {
-                "end": {
-                  "column": 37,
-                  "line": 2,
-                  "offset": 71,
-                },
-                "source": "v-bind:style=\\"{ color: 'red' }\\"",
-                "start": {
-                  "column": 6,
-                  "line": 2,
-                  "offset": 40,
-                },
-              },
-              "modifiers": [],
-              "name": "bind",
-              "type": 7,
-            },
-          ],
-          "tag": "p",
-          "tagType": 0,
-          "type": 1,
-        },
-        {
-          "content": " a comment with <html> inside it ",
-          "loc": {
-            "end": {
-              "column": 43,
-              "line": 3,
-              "offset": 116,
-            },
-            "source": "<!-- a comment with <html> inside it -->",
-            "start": {
-              "column": 3,
-              "line": 3,
-              "offset": 76,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 7,
-          "line": 4,
-          "offset": 123,
-        },
-        "source": "<div :class=\\"{ some: condition }\\">
-  <p v-bind:style=\\"{ color: 'red' }\\"/>
-  <!-- a comment with <html> inside it -->
-</div>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [
-        {
-          "arg": {
-            "constType": 3,
-            "content": "class",
-            "isStatic": true,
-            "loc": {
-              "end": {
-                "column": 12,
-                "line": 1,
-                "offset": 11,
-              },
-              "source": "class",
-              "start": {
-                "column": 7,
-                "line": 1,
-                "offset": 6,
-              },
-            },
-            "type": 4,
-          },
-          "exp": {
-            "constType": 0,
-            "content": "{ some: condition }",
-            "isStatic": false,
-            "loc": {
-              "end": {
-                "column": 33,
-                "line": 1,
-                "offset": 32,
-              },
-              "source": "{ some: condition }",
-              "start": {
-                "column": 14,
-                "line": 1,
-                "offset": 13,
-              },
-            },
-            "type": 4,
-          },
-          "loc": {
-            "end": {
-              "column": 34,
-              "line": 1,
-              "offset": 33,
-            },
-            "source": ":class=\\"{ some: condition }\\"",
-            "start": {
-              "column": 6,
-              "line": 1,
-              "offset": 5,
-            },
-          },
-          "modifiers": [],
-          "name": "bind",
-          "type": 7,
-        },
-      ],
-      "tag": "div",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 7,
-      "line": 4,
-      "offset": 123,
-    },
-    "source": "<div :class=\\"{ some: condition }\\">
-  <p v-bind:style=\\"{ color: 'red' }\\"/>
-  <!-- a comment with <html> inside it -->
-</div>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
+  "source": "{{}}",
   "temps": 0,
   "type": 0,
 }
diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
index b8cbf4a87..97aff163e 100644
--- a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -1,30 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`scopeId compiler support > should push scopeId for hoisted nodes 1`] = `
-"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
-
-const _withScopeId = n => (_pushScopeId(\\"test\\"),n=n(),_popScopeId(),n)
-const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */))
-const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */))
-
-export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
-    _hoisted_1,
-    _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
-    _hoisted_2
-  ]))
-}"
-`;
-
 exports[`scopeId compiler support > should wrap default slot 1`] = `
-"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  const _component_Child = _resolveComponent(\\"Child\\")
+  const _component_Child = _resolveComponent("Child")
 
   return (_openBlock(), _createBlock(_component_Child, null, {
     default: _withCtx(() => [
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div")
     ]),
     _: 1 /* STABLE */
   }))
@@ -32,26 +16,26 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`scopeId compiler support > should wrap dynamic slots 1`] = `
-"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  const _component_Child = _resolveComponent(\\"Child\\")
+  const _component_Child = _resolveComponent("Child")
 
   return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     (_ctx.ok)
       ? {
-          name: \\"foo\\",
+          name: "foo",
           fn: _withCtx(() => [
-            _createElementVNode(\\"div\\")
+            _createElementVNode("div")
           ]),
-          key: \\"0\\"
+          key: "0"
         }
       : undefined,
     _renderList(_ctx.list, (i) => {
       return {
         name: i,
         fn: _withCtx(() => [
-          _createElementVNode(\\"div\\")
+          _createElementVNode("div")
         ])
       }
     })
@@ -60,17 +44,17 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`scopeId compiler support > should wrap named slots 1`] = `
-"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  const _component_Child = _resolveComponent(\\"Child\\")
+  const _component_Child = _resolveComponent("Child")
 
   return (_openBlock(), _createBlock(_component_Child, null, {
     foo: _withCtx(({ msg }) => [
       _createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
     ]),
     bar: _withCtx(() => [
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div")
     ]),
     _: 1 /* STABLE */
   }))
diff --git a/packages/compiler-core/__tests__/codegen.spec.ts b/packages/compiler-core/__tests__/codegen.spec.ts
index 802df84b3..34386ce69 100644
--- a/packages/compiler-core/__tests__/codegen.spec.ts
+++ b/packages/compiler-core/__tests__/codegen.spec.ts
@@ -1,38 +1,38 @@
 import {
-  locStub,
-  generate,
+  ConstantTypes,
+  type DirectiveArguments,
+  type ForCodegenNode,
+  type IfConditionalExpression,
   NodeTypes,
-  RootNode,
-  createSimpleExpression,
+  type RootNode,
+  type VNodeCall,
+  createArrayExpression,
+  createAssignmentExpression,
+  createBlockStatement,
+  createCacheExpression,
+  createCallExpression,
+  createCompoundExpression,
+  createConditionalExpression,
+  createIfStatement,
+  createInterpolation,
   createObjectExpression,
   createObjectProperty,
-  createArrayExpression,
-  createCompoundExpression,
-  createInterpolation,
-  createCallExpression,
-  createConditionalExpression,
-  ForCodegenNode,
-  createCacheExpression,
+  createSimpleExpression,
   createTemplateLiteral,
-  createBlockStatement,
-  createIfStatement,
-  createAssignmentExpression,
-  IfConditionalExpression,
   createVNodeCall,
-  VNodeCall,
-  DirectiveArguments,
-  ConstantTypes
+  generate,
+  locStub,
 } from '../src'
 import {
-  CREATE_VNODE,
-  TO_DISPLAY_STRING,
-  RESOLVE_DIRECTIVE,
-  helperNameMap,
-  RESOLVE_COMPONENT,
   CREATE_COMMENT,
+  CREATE_ELEMENT_VNODE,
+  CREATE_VNODE,
   FRAGMENT,
   RENDER_LIST,
-  CREATE_ELEMENT_VNODE
+  RESOLVE_COMPONENT,
+  RESOLVE_DIRECTIVE,
+  TO_DISPLAY_STRING,
+  helperNameMap,
 } from '../src/runtimeHelpers'
 import { createElementWithCodegen, genFlagText } from './testUtils'
 import { PatchFlags } from '@vue/shared'
@@ -40,69 +40,70 @@ import { PatchFlags } from '@vue/shared'
 function createRoot(options: Partial<RootNode> = {}): RootNode {
   return {
     type: NodeTypes.ROOT,
+    source: '',
     children: [],
     helpers: new Set(),
     components: [],
     directives: [],
     imports: [],
     hoists: [],
-    cached: 0,
+    cached: [],
     temps: 0,
     codegenNode: createSimpleExpression(`null`, false),
     loc: locStub,
-    ...options
+    ...options,
   }
 }
 
 describe('compiler: codegen', () => {
   test('module mode preamble', () => {
     const root = createRoot({
-      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE])
+      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE]),
     })
     const { code } = generate(root, { mode: 'module' })
     expect(code).toMatch(
-      `import { ${helperNameMap[CREATE_VNODE]} as _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]} as _${helperNameMap[RESOLVE_DIRECTIVE]} } from "vue"`
+      `import { ${helperNameMap[CREATE_VNODE]} as _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]} as _${helperNameMap[RESOLVE_DIRECTIVE]} } from "vue"`,
     )
     expect(code).toMatchSnapshot()
   })
 
   test('module mode preamble w/ optimizeImports: true', () => {
     const root = createRoot({
-      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE])
+      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE]),
     })
     const { code } = generate(root, { mode: 'module', optimizeImports: true })
     expect(code).toMatch(
-      `import { ${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]} } from "vue"`
+      `import { ${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]} } from "vue"`,
     )
     expect(code).toMatch(
-      `const _${helperNameMap[CREATE_VNODE]} = ${helperNameMap[CREATE_VNODE]}, _${helperNameMap[RESOLVE_DIRECTIVE]} = ${helperNameMap[RESOLVE_DIRECTIVE]}`
+      `const _${helperNameMap[CREATE_VNODE]} = ${helperNameMap[CREATE_VNODE]}, _${helperNameMap[RESOLVE_DIRECTIVE]} = ${helperNameMap[RESOLVE_DIRECTIVE]}`,
     )
     expect(code).toMatchSnapshot()
   })
 
   test('function mode preamble', () => {
     const root = createRoot({
-      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE])
+      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE]),
     })
     const { code } = generate(root, { mode: 'function' })
     expect(code).toMatch(`const _Vue = Vue`)
     expect(code).toMatch(
-      `const { ${helperNameMap[CREATE_VNODE]}: _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]}: _${helperNameMap[RESOLVE_DIRECTIVE]} } = _Vue`
+      `const { ${helperNameMap[CREATE_VNODE]}: _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]}: _${helperNameMap[RESOLVE_DIRECTIVE]} } = _Vue`,
     )
     expect(code).toMatchSnapshot()
   })
 
   test('function mode preamble w/ prefixIdentifiers: true', () => {
     const root = createRoot({
-      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE])
+      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE]),
     })
     const { code } = generate(root, {
       mode: 'function',
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(code).not.toMatch(`const _Vue = Vue`)
     expect(code).toMatch(
-      `const { ${helperNameMap[CREATE_VNODE]}: _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]}: _${helperNameMap[RESOLVE_DIRECTIVE]} } = Vue`
+      `const { ${helperNameMap[CREATE_VNODE]}: _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]}: _${helperNameMap[RESOLVE_DIRECTIVE]} } = Vue`,
     )
     expect(code).toMatchSnapshot()
   })
@@ -111,27 +112,27 @@ describe('compiler: codegen', () => {
     const root = createRoot({
       components: [`Foo`, `bar-baz`, `barbaz`, `Qux__self`],
       directives: [`my_dir_0`, `my_dir_1`],
-      temps: 3
+      temps: 3,
     })
     const { code } = generate(root, { mode: 'function' })
     expect(code).toMatch(
-      `const _component_Foo = _${helperNameMap[RESOLVE_COMPONENT]}("Foo")\n`
+      `const _component_Foo = _${helperNameMap[RESOLVE_COMPONENT]}("Foo")\n`,
     )
     expect(code).toMatch(
-      `const _component_bar_baz = _${helperNameMap[RESOLVE_COMPONENT]}("bar-baz")\n`
+      `const _component_bar_baz = _${helperNameMap[RESOLVE_COMPONENT]}("bar-baz")\n`,
     )
     expect(code).toMatch(
-      `const _component_barbaz = _${helperNameMap[RESOLVE_COMPONENT]}("barbaz")\n`
+      `const _component_barbaz = _${helperNameMap[RESOLVE_COMPONENT]}("barbaz")\n`,
     )
     // implicit self reference from SFC filename
     expect(code).toMatch(
-      `const _component_Qux = _${helperNameMap[RESOLVE_COMPONENT]}("Qux", true)\n`
+      `const _component_Qux = _${helperNameMap[RESOLVE_COMPONENT]}("Qux", true)\n`,
     )
     expect(code).toMatch(
-      `const _directive_my_dir_0 = _${helperNameMap[RESOLVE_DIRECTIVE]}("my_dir_0")\n`
+      `const _directive_my_dir_0 = _${helperNameMap[RESOLVE_DIRECTIVE]}("my_dir_0")\n`,
     )
     expect(code).toMatch(
-      `const _directive_my_dir_1 = _${helperNameMap[RESOLVE_DIRECTIVE]}("my_dir_1")\n`
+      `const _directive_my_dir_1 = _${helperNameMap[RESOLVE_DIRECTIVE]}("my_dir_1")\n`,
     )
     expect(code).toMatch(`let _temp0, _temp1, _temp2`)
     expect(code).toMatchSnapshot()
@@ -145,12 +146,12 @@ describe('compiler: codegen', () => {
           [
             createObjectProperty(
               createSimpleExpression(`id`, true, locStub),
-              createSimpleExpression(`foo`, true, locStub)
-            )
+              createSimpleExpression(`foo`, true, locStub),
+            ),
           ],
-          locStub
-        )
-      ]
+          locStub,
+        ),
+      ],
     })
     const { code } = generate(root)
     expect(code).toMatch(`const _hoisted_1 = hello`)
@@ -160,7 +161,7 @@ describe('compiler: codegen', () => {
 
   test('temps', () => {
     const root = createRoot({
-      temps: 3
+      temps: 3,
     })
     const { code } = generate(root)
     expect(code).toMatch(`let _temp0, _temp1, _temp2`)
@@ -173,9 +174,9 @@ describe('compiler: codegen', () => {
         codegenNode: {
           type: NodeTypes.TEXT,
           content: 'hello',
-          loc: locStub
-        }
-      })
+          loc: locStub,
+        },
+      }),
     )
     expect(code).toMatch(`return "hello"`)
     expect(code).toMatchSnapshot()
@@ -184,8 +185,8 @@ describe('compiler: codegen', () => {
   test('interpolation', () => {
     const { code } = generate(
       createRoot({
-        codegenNode: createInterpolation(`hello`, locStub)
-      })
+        codegenNode: createInterpolation(`hello`, locStub),
+      }),
     )
     expect(code).toMatch(`return _${helperNameMap[TO_DISPLAY_STRING]}(hello)`)
     expect(code).toMatchSnapshot()
@@ -197,9 +198,9 @@ describe('compiler: codegen', () => {
         codegenNode: {
           type: NodeTypes.COMMENT,
           content: 'foo',
-          loc: locStub
-        }
-      })
+          loc: locStub,
+        },
+      }),
     )
     expect(code).toMatch(`return _${helperNameMap[CREATE_COMMENT]}("foo")`)
     expect(code).toMatchSnapshot()
@@ -215,15 +216,15 @@ describe('compiler: codegen', () => {
           {
             type: NodeTypes.INTERPOLATION,
             loc: locStub,
-            content: createSimpleExpression(`bar`, false, locStub)
+            content: createSimpleExpression(`bar`, false, locStub),
           },
           // nested compound
-          createCompoundExpression([` + `, `nested`])
-        ])
-      })
+          createCompoundExpression([` + `, `nested`]),
+        ]),
+      }),
     )
     expect(code).toMatch(
-      `return _ctx.foo + _${helperNameMap[TO_DISPLAY_STRING]}(bar) + nested`
+      `return _ctx.foo + _${helperNameMap[TO_DISPLAY_STRING]}(bar) + nested`,
     )
     expect(code).toMatchSnapshot()
   })
@@ -238,10 +239,10 @@ describe('compiler: codegen', () => {
           codegenNode: createConditionalExpression(
             createSimpleExpression('foo', false),
             createSimpleExpression('bar', false),
-            createSimpleExpression('baz', false)
-          ) as IfConditionalExpression
-        }
-      })
+            createSimpleExpression('baz', false),
+          ) as IfConditionalExpression,
+        },
+      }),
     )
     expect(code).toMatch(/return foo\s+\? bar\s+: baz/)
     expect(code).toMatchSnapshot()
@@ -266,13 +267,13 @@ describe('compiler: codegen', () => {
             disableTracking: true,
             props: undefined,
             children: createCallExpression(RENDER_LIST),
-            patchFlag: '1',
+            patchFlag: PatchFlags.TEXT,
             dynamicProps: undefined,
             directives: undefined,
-            loc: locStub
-          } as ForCodegenNode
-        }
-      })
+            loc: locStub,
+          } as ForCodegenNode,
+        },
+      }),
     )
     expect(code).toMatch(`openBlock(true)`)
     expect(code).toMatchSnapshot()
@@ -288,7 +289,7 @@ describe('compiler: codegen', () => {
             '1 + 2',
             false,
             locStub,
-            ConstantTypes.CAN_STRINGIFY
+            ConstantTypes.CAN_STRINGIFY,
           ),
           valueAlias: undefined,
           keyAlias: undefined,
@@ -302,13 +303,13 @@ describe('compiler: codegen', () => {
             disableTracking: false,
             props: undefined,
             children: createCallExpression(RENDER_LIST),
-            patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT),
+            patchFlag: PatchFlags.STABLE_FRAGMENT,
             dynamicProps: undefined,
             directives: undefined,
-            loc: locStub
-          } as ForCodegenNode
-        }
-      })
+            loc: locStub,
+          } as ForCodegenNode,
+        },
+      }),
     )
     expect(code).toMatch(`openBlock()`)
     expect(code).toMatchSnapshot()
@@ -325,11 +326,11 @@ describe('compiler: codegen', () => {
             [
               createObjectProperty(
                 createSimpleExpression(`id`, true, locStub),
-                createSimpleExpression(`foo`, true, locStub)
+                createSimpleExpression(`foo`, true, locStub),
               ),
               createObjectProperty(
                 createSimpleExpression(`prop`, false, locStub),
-                createSimpleExpression(`bar`, false, locStub)
+                createSimpleExpression(`bar`, false, locStub),
               ),
               // compound expression as computed key
               createObjectProperty(
@@ -338,13 +339,13 @@ describe('compiler: codegen', () => {
                   loc: locStub,
                   children: [
                     `foo + `,
-                    createSimpleExpression(`bar`, false, locStub)
-                  ]
+                    createSimpleExpression(`bar`, false, locStub),
+                  ],
                 },
-                createSimpleExpression(`bar`, false, locStub)
-              )
+                createSimpleExpression(`bar`, false, locStub),
+              ),
             ],
-            locStub
+            locStub,
           ),
           // ChildNode[]
           [
@@ -355,17 +356,17 @@ describe('compiler: codegen', () => {
                   createObjectProperty(
                     // should quote the key!
                     createSimpleExpression(`some-key`, true, locStub),
-                    createSimpleExpression(`foo`, true, locStub)
-                  )
+                    createSimpleExpression(`foo`, true, locStub),
+                  ),
                 ],
-                locStub
-              )
-            )
+                locStub,
+              ),
+            ),
           ],
           // flag
-          PatchFlags.FULL_PROPS + ''
-        )
-      })
+          PatchFlags.FULL_PROPS,
+        ),
+      }),
     )
     expect(code).toMatch(`
     return _${helperNameMap[CREATE_ELEMENT_VNODE]}("div", {
@@ -374,7 +375,7 @@ describe('compiler: codegen', () => {
       [foo + bar]: bar
     }, [
       _${helperNameMap[CREATE_ELEMENT_VNODE]}("p", { "some-key": "foo" })
-    ], ${PatchFlags.FULL_PROPS})`)
+    ], ${genFlagText(PatchFlags.FULL_PROPS)})`)
     expect(code).toMatchSnapshot()
   })
 
@@ -383,9 +384,9 @@ describe('compiler: codegen', () => {
       createRoot({
         codegenNode: createArrayExpression([
           createSimpleExpression(`foo`, false),
-          createCallExpression(`bar`, [`baz`])
-        ])
-      })
+          createCallExpression(`bar`, [`baz`]),
+        ]),
+      }),
     )
     expect(code).toMatch(`return [
       foo,
@@ -403,17 +404,17 @@ describe('compiler: codegen', () => {
           createConditionalExpression(
             createSimpleExpression(`orNot`, false),
             createCallExpression(`bar`),
-            createCallExpression(`baz`)
-          )
-        )
-      })
+            createCallExpression(`baz`),
+          ),
+        ),
+      }),
     )
     expect(code).toMatch(
       `return ok
       ? foo()
       : orNot
         ? bar()
-        : baz()`
+        : baz()`,
     )
     expect(code).toMatchSnapshot()
   })
@@ -421,45 +422,45 @@ describe('compiler: codegen', () => {
   test('CacheExpression', () => {
     const { code } = generate(
       createRoot({
-        cached: 1,
+        cached: [],
         codegenNode: createCacheExpression(
           1,
-          createSimpleExpression(`foo`, false)
-        )
+          createSimpleExpression(`foo`, false),
+        ),
       }),
       {
         mode: 'module',
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     expect(code).toMatch(`_cache[1] || (_cache[1] = foo)`)
     expect(code).toMatchSnapshot()
   })
 
-  test('CacheExpression w/ isVNode: true', () => {
+  test('CacheExpression w/ isVOnce: true', () => {
     const { code } = generate(
       createRoot({
-        cached: 1,
+        cached: [],
         codegenNode: createCacheExpression(
           1,
           createSimpleExpression(`foo`, false),
-          true
-        )
+          true,
+        ),
       }),
       {
         mode: 'module',
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     expect(code).toMatch(
       `
   _cache[1] || (
     _setBlockTracking(-1),
-    _cache[1] = foo,
+    (_cache[1] = foo).cacheIndex = 1,
     _setBlockTracking(1),
     _cache[1]
   )
-    `.trim()
+    `.trim(),
     )
     expect(code).toMatchSnapshot()
   })
@@ -471,11 +472,11 @@ describe('compiler: codegen', () => {
           createTemplateLiteral([
             `foo`,
             createCallExpression(`_renderAttr`, ['id', 'foo']),
-            `bar`
-          ])
-        ])
+            `bar`,
+          ]),
+        ]),
       }),
-      { ssr: true, mode: 'module' }
+      { ssr: true, mode: 'module' },
     )
     expect(code).toMatchInlineSnapshot(`
       "
@@ -492,11 +493,11 @@ describe('compiler: codegen', () => {
           codegenNode: createBlockStatement([
             createIfStatement(
               createSimpleExpression('foo', false),
-              createBlockStatement([createCallExpression(`ok`)])
-            )
-          ])
+              createBlockStatement([createCallExpression(`ok`)]),
+            ),
+          ]),
         }),
-        { ssr: true, mode: 'module' }
+        { ssr: true, mode: 'module' },
       )
       expect(code).toMatchInlineSnapshot(`
         "
@@ -515,11 +516,11 @@ describe('compiler: codegen', () => {
             createIfStatement(
               createSimpleExpression('foo', false),
               createBlockStatement([createCallExpression(`foo`)]),
-              createBlockStatement([createCallExpression('bar')])
-            )
-          ])
+              createBlockStatement([createCallExpression('bar')]),
+            ),
+          ]),
         }),
-        { ssr: true, mode: 'module' }
+        { ssr: true, mode: 'module' },
       )
       expect(code).toMatchInlineSnapshot(`
         "
@@ -542,12 +543,12 @@ describe('compiler: codegen', () => {
               createBlockStatement([createCallExpression(`foo`)]),
               createIfStatement(
                 createSimpleExpression('bar', false),
-                createBlockStatement([createCallExpression(`bar`)])
-              )
-            )
-          ])
+                createBlockStatement([createCallExpression(`bar`)]),
+              ),
+            ),
+          ]),
         }),
-        { ssr: true, mode: 'module' }
+        { ssr: true, mode: 'module' },
       )
       expect(code).toMatchInlineSnapshot(`
         "
@@ -571,12 +572,12 @@ describe('compiler: codegen', () => {
               createIfStatement(
                 createSimpleExpression('bar', false),
                 createBlockStatement([createCallExpression(`bar`)]),
-                createBlockStatement([createCallExpression('baz')])
-              )
-            )
-          ])
+                createBlockStatement([createCallExpression('baz')]),
+              ),
+            ),
+          ]),
         }),
-        { ssr: true, mode: 'module' }
+        { ssr: true, mode: 'module' },
       )
       expect(code).toMatchInlineSnapshot(`
         "
@@ -598,9 +599,9 @@ describe('compiler: codegen', () => {
       createRoot({
         codegenNode: createAssignmentExpression(
           createSimpleExpression(`foo`, false),
-          createSimpleExpression(`bar`, false)
-        )
-      })
+          createSimpleExpression(`bar`, false),
+        ),
+      }),
     )
     expect(code).toMatchInlineSnapshot(`
       "
@@ -616,22 +617,22 @@ describe('compiler: codegen', () => {
     function genCode(node: VNodeCall) {
       return generate(
         createRoot({
-          codegenNode: node
-        })
+          codegenNode: node,
+        }),
       ).code.match(/with \(_ctx\) \{\s+([^]+)\s+\}\s+\}$/)![1]
     }
 
     const mockProps = createObjectExpression([
-      createObjectProperty(`foo`, createSimpleExpression(`bar`, true))
+      createObjectProperty(`foo`, createSimpleExpression(`bar`, true)),
     ])
     const mockChildren = createCompoundExpression(['children'])
     const mockDirs = createArrayExpression([
-      createArrayExpression([`foo`, createSimpleExpression(`bar`, false)])
+      createArrayExpression([`foo`, createSimpleExpression(`bar`, false)]),
     ]) as DirectiveArguments
 
     test('tag only', () => {
       expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(`
-        "return _createElementVNode(\\"div\\")
+        "return _createElementVNode("div")
          "
       `)
       expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(`
@@ -643,7 +644,7 @@ describe('compiler: codegen', () => {
     test('with props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, mockProps)))
         .toMatchInlineSnapshot(`
-          "return _createElementVNode(\\"div\\", { foo: \\"bar\\" })
+          "return _createElementVNode("div", { foo: "bar" })
            "
         `)
     })
@@ -651,7 +652,7 @@ describe('compiler: codegen', () => {
     test('with children, no props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren)))
         .toMatchInlineSnapshot(`
-          "return _createElementVNode(\\"div\\", null, children)
+          "return _createElementVNode("div", null, children)
            "
         `)
     })
@@ -659,17 +660,20 @@ describe('compiler: codegen', () => {
     test('with children + props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren)))
         .toMatchInlineSnapshot(`
-          "return _createElementVNode(\\"div\\", { foo: \\"bar\\" }, children)
+          "return _createElementVNode("div", { foo: "bar" }, children)
            "
         `)
     })
 
     test('with patchFlag and no children/props', () => {
-      expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1')))
-        .toMatchInlineSnapshot(`
-          "return _createElementVNode(\\"div\\", null, null, 1)
-           "
-        `)
+      expect(
+        genCode(
+          createVNodeCall(null, `"div"`, undefined, undefined, PatchFlags.TEXT),
+        ),
+      ).toMatchInlineSnapshot(`
+        "return _createElementVNode("div", null, null, 1 /* TEXT */)
+         "
+      `)
     })
 
     test('as block', () => {
@@ -683,11 +687,11 @@ describe('compiler: codegen', () => {
             undefined,
             undefined,
             undefined,
-            true
-          )
-        )
+            true,
+          ),
+        ),
       ).toMatchInlineSnapshot(`
-        "return (_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
+        "return (_openBlock(), _createElementBlock("div", { foo: "bar" }, children))
          "
       `)
     })
@@ -704,11 +708,11 @@ describe('compiler: codegen', () => {
             undefined,
             undefined,
             true,
-            true
-          )
-        )
+            true,
+          ),
+        ),
       ).toMatchInlineSnapshot(`
-        "return (_openBlock(true), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
+        "return (_openBlock(true), _createElementBlock("div", { foo: "bar" }, children))
          "
       `)
     })
@@ -723,11 +727,11 @@ describe('compiler: codegen', () => {
             mockChildren,
             undefined,
             undefined,
-            mockDirs
-          )
-        )
+            mockDirs,
+          ),
+        ),
       ).toMatchInlineSnapshot(`
-        "return _withDirectives(_createElementVNode(\\"div\\", { foo: \\"bar\\" }, children), [
+        "return _withDirectives(_createElementVNode("div", { foo: "bar" }, children), [
               [foo, bar]
             ])
          "
@@ -745,11 +749,11 @@ describe('compiler: codegen', () => {
             undefined,
             undefined,
             mockDirs,
-            true
-          )
-        )
+            true,
+          ),
+        ),
       ).toMatchInlineSnapshot(`
-        "return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children)), [
+        "return _withDirectives((_openBlock(), _createElementBlock("div", { foo: "bar" }, children)), [
               [foo, bar]
             ])
          "
diff --git a/packages/compiler-core/__tests__/compile.spec.ts b/packages/compiler-core/__tests__/compile.spec.ts
index dc4f57ad3..995741091 100644
--- a/packages/compiler-core/__tests__/compile.spec.ts
+++ b/packages/compiler-core/__tests__/compile.spec.ts
@@ -1,5 +1,5 @@
 import { baseCompile as compile } from '../src'
-import { SourceMapConsumer, RawSourceMap } from 'source-map-js'
+import { type RawSourceMap, SourceMapConsumer } from 'source-map-js'
 
 describe('compiler: integration tests', () => {
   const source = `
@@ -20,7 +20,7 @@ describe('compiler: integration tests', () => {
   function getPositionInCode(
     code: string,
     token: string,
-    expectName: string | boolean = false
+    expectName: string | boolean = false,
   ): Pos {
     const generatedOffset = code.indexOf(token)
     let line = 1
@@ -36,7 +36,7 @@ describe('compiler: integration tests', () => {
       column:
         lastNewLinePos === -1
           ? generatedOffset
-          : generatedOffset - lastNewLinePos - 1
+          : generatedOffset - lastNewLinePos - 1,
     }
     if (expectName) {
       res.name = typeof expectName === 'string' ? expectName : token
@@ -47,7 +47,7 @@ describe('compiler: integration tests', () => {
   test('function mode', () => {
     const { code, map } = compile(source, {
       sourceMap: true,
-      filename: `foo.vue`
+      filename: `foo.vue`,
     })
 
     expect(code).toMatchSnapshot()
@@ -57,55 +57,55 @@ describe('compiler: integration tests', () => {
     const consumer = new SourceMapConsumer(map as RawSourceMap)
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `id`))
+      consumer.originalPositionFor(getPositionInCode(code, `id`)),
     ).toMatchObject(getPositionInCode(source, `id`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `"foo"`))
+      consumer.originalPositionFor(getPositionInCode(code, `"foo"`)),
     ).toMatchObject(getPositionInCode(source, `"foo"`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `class:`))
+      consumer.originalPositionFor(getPositionInCode(code, `class:`)),
     ).toMatchObject(getPositionInCode(source, `class=`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `bar`))
+      consumer.originalPositionFor(getPositionInCode(code, `bar`)),
     ).toMatchObject(getPositionInCode(source, `bar`))
 
     // without prefixIdentifiers: true, identifiers inside compound expressions
     // are mapped to closest parent expression.
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `baz`))
+      consumer.originalPositionFor(getPositionInCode(code, `baz`)),
     ).toMatchObject(getPositionInCode(source, `bar`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `world`))
+      consumer.originalPositionFor(getPositionInCode(code, `world`)),
     ).toMatchObject(getPositionInCode(source, `world`))
 
     // without prefixIdentifiers: true, identifiers inside compound expressions
     // are mapped to closest parent expression.
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `burn()`))
+      consumer.originalPositionFor(getPositionInCode(code, `burn()`)),
     ).toMatchObject(getPositionInCode(source, `world`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `ok`))
+      consumer.originalPositionFor(getPositionInCode(code, `ok`)),
     ).toMatchObject(getPositionInCode(source, `ok`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `list`))
+      consumer.originalPositionFor(getPositionInCode(code, `list`)),
     ).toMatchObject(getPositionInCode(source, `list`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value`))
+      consumer.originalPositionFor(getPositionInCode(code, `value`)),
     ).toMatchObject(getPositionInCode(source, `value`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `index`))
+      consumer.originalPositionFor(getPositionInCode(code, `index`)),
     ).toMatchObject(getPositionInCode(source, `index`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value + index`))
+      consumer.originalPositionFor(getPositionInCode(code, `value + index`)),
     ).toMatchObject(getPositionInCode(source, `value + index`))
   })
 
@@ -113,7 +113,7 @@ describe('compiler: integration tests', () => {
     const { code, map } = compile(source, {
       sourceMap: true,
       filename: `foo.vue`,
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
 
     expect(code).toMatchSnapshot()
@@ -123,64 +123,66 @@ describe('compiler: integration tests', () => {
     const consumer = new SourceMapConsumer(map as RawSourceMap)
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `id`))
+      consumer.originalPositionFor(getPositionInCode(code, `id`)),
     ).toMatchObject(getPositionInCode(source, `id`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `"foo"`))
+      consumer.originalPositionFor(getPositionInCode(code, `"foo"`)),
     ).toMatchObject(getPositionInCode(source, `"foo"`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `class:`))
+      consumer.originalPositionFor(getPositionInCode(code, `class:`)),
     ).toMatchObject(getPositionInCode(source, `class=`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `bar`))
+      consumer.originalPositionFor(getPositionInCode(code, `bar`)),
     ).toMatchObject(getPositionInCode(source, `bar`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.bar`, `bar`))
+      consumer.originalPositionFor(getPositionInCode(code, `_ctx.bar`, `bar`)),
     ).toMatchObject(getPositionInCode(source, `bar`, true))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `baz`))
+      consumer.originalPositionFor(getPositionInCode(code, `baz`)),
     ).toMatchObject(getPositionInCode(source, `baz`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `world`, true))
+      consumer.originalPositionFor(getPositionInCode(code, `world`, true)),
     ).toMatchObject(getPositionInCode(source, `world`, `world`))
     expect(
       consumer.originalPositionFor(
-        getPositionInCode(code, `_ctx.world`, `world`)
-      )
+        getPositionInCode(code, `_ctx.world`, `world`),
+      ),
     ).toMatchObject(getPositionInCode(source, `world`, `world`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `burn()`))
+      consumer.originalPositionFor(getPositionInCode(code, `burn()`)),
     ).toMatchObject(getPositionInCode(source, `burn()`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `ok`))
+      consumer.originalPositionFor(getPositionInCode(code, `ok`)),
     ).toMatchObject(getPositionInCode(source, `ok`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.ok`, `ok`))
+      consumer.originalPositionFor(getPositionInCode(code, `_ctx.ok`, `ok`)),
     ).toMatchObject(getPositionInCode(source, `ok`, true))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `list`))
+      consumer.originalPositionFor(getPositionInCode(code, `list`)),
     ).toMatchObject(getPositionInCode(source, `list`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.list`, `list`))
+      consumer.originalPositionFor(
+        getPositionInCode(code, `_ctx.list`, `list`),
+      ),
     ).toMatchObject(getPositionInCode(source, `list`, true))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value`))
+      consumer.originalPositionFor(getPositionInCode(code, `value`)),
     ).toMatchObject(getPositionInCode(source, `value`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `index`))
+      consumer.originalPositionFor(getPositionInCode(code, `index`)),
     ).toMatchObject(getPositionInCode(source, `index`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value + index`))
+      consumer.originalPositionFor(getPositionInCode(code, `value + index`)),
     ).toMatchObject(getPositionInCode(source, `value + index`))
   })
 
@@ -188,7 +190,7 @@ describe('compiler: integration tests', () => {
     const { code, map } = compile(source, {
       mode: 'module',
       sourceMap: true,
-      filename: `foo.vue`
+      filename: `foo.vue`,
     })
 
     expect(code).toMatchSnapshot()
@@ -198,64 +200,66 @@ describe('compiler: integration tests', () => {
     const consumer = new SourceMapConsumer(map as RawSourceMap)
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `id`))
+      consumer.originalPositionFor(getPositionInCode(code, `id`)),
     ).toMatchObject(getPositionInCode(source, `id`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `"foo"`))
+      consumer.originalPositionFor(getPositionInCode(code, `"foo"`)),
     ).toMatchObject(getPositionInCode(source, `"foo"`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `class:`))
+      consumer.originalPositionFor(getPositionInCode(code, `class:`)),
     ).toMatchObject(getPositionInCode(source, `class=`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `bar`))
+      consumer.originalPositionFor(getPositionInCode(code, `bar`)),
     ).toMatchObject(getPositionInCode(source, `bar`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.bar`, `bar`))
+      consumer.originalPositionFor(getPositionInCode(code, `_ctx.bar`, `bar`)),
     ).toMatchObject(getPositionInCode(source, `bar`, true))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `baz`))
+      consumer.originalPositionFor(getPositionInCode(code, `baz`)),
     ).toMatchObject(getPositionInCode(source, `baz`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `world`, true))
+      consumer.originalPositionFor(getPositionInCode(code, `world`, true)),
     ).toMatchObject(getPositionInCode(source, `world`, `world`))
     expect(
       consumer.originalPositionFor(
-        getPositionInCode(code, `_ctx.world`, `world`)
-      )
+        getPositionInCode(code, `_ctx.world`, `world`),
+      ),
     ).toMatchObject(getPositionInCode(source, `world`, `world`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `burn()`))
+      consumer.originalPositionFor(getPositionInCode(code, `burn()`)),
     ).toMatchObject(getPositionInCode(source, `burn()`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `ok`))
+      consumer.originalPositionFor(getPositionInCode(code, `ok`)),
     ).toMatchObject(getPositionInCode(source, `ok`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.ok`, `ok`))
+      consumer.originalPositionFor(getPositionInCode(code, `_ctx.ok`, `ok`)),
     ).toMatchObject(getPositionInCode(source, `ok`, true))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `list`))
+      consumer.originalPositionFor(getPositionInCode(code, `list`)),
     ).toMatchObject(getPositionInCode(source, `list`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.list`, `list`))
+      consumer.originalPositionFor(
+        getPositionInCode(code, `_ctx.list`, `list`),
+      ),
     ).toMatchObject(getPositionInCode(source, `list`, true))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value`))
+      consumer.originalPositionFor(getPositionInCode(code, `value`)),
     ).toMatchObject(getPositionInCode(source, `value`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `index`))
+      consumer.originalPositionFor(getPositionInCode(code, `index`)),
     ).toMatchObject(getPositionInCode(source, `index`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value + index`))
+      consumer.originalPositionFor(getPositionInCode(code, `value + index`)),
     ).toMatchObject(getPositionInCode(source, `value + index`))
   })
 })
diff --git a/packages/compiler-core/__tests__/parse.spec.ts b/packages/compiler-core/__tests__/parse.spec.ts
index 8db4eeb8a..4e5a96165 100644
--- a/packages/compiler-core/__tests__/parse.spec.ts
+++ b/packages/compiler-core/__tests__/parse.spec.ts
@@ -1,19 +1,21 @@
-import { ParserOptions } from '../src/options'
-import { baseParse, TextModes } from '../src/parse'
+import type { ParserOptions } from '../src/options'
 import { ErrorCodes } from '../src/errors'
 import {
-  CommentNode,
-  ElementNode,
+  type CommentNode,
+  ConstantTypes,
+  type DirectiveNode,
+  type ElementNode,
   ElementTypes,
+  type InterpolationNode,
   Namespaces,
   NodeTypes,
-  Position,
-  TextNode,
-  InterpolationNode,
-  ConstantTypes,
-  DirectiveNode
+  type Position,
+  type TextNode,
 } from '../src/ast'
 
+import { baseParse } from '../src/parser'
+import type { Program } from '@babel/types'
+
 describe('compiler: parse', () => {
   describe('Text', () => {
     test('simple text', () => {
@@ -26,27 +28,36 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 9, line: 1, column: 10 },
-          source: 'some text'
-        }
+          source: 'some text',
+        },
       })
     })
 
     test('simple text with invalid end tag', () => {
       const onError = vi.fn()
-      const ast = baseParse('some text</div>', {
-        onError
-      })
+      const ast = baseParse('some text</div>', { onError })
       const text = ast.children[0] as TextNode
 
-      expect(onError).toBeCalled()
+      expect(onError.mock.calls).toMatchObject([
+        [
+          {
+            code: ErrorCodes.X_INVALID_END_TAG,
+            loc: {
+              start: { column: 10, line: 1, offset: 9 },
+              end: { column: 10, line: 1, offset: 9 },
+            },
+          },
+        ],
+      ])
+
       expect(text).toStrictEqual({
         type: NodeTypes.TEXT,
         content: 'some text',
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 9, line: 1, column: 10 },
-          source: 'some text'
-        }
+          source: 'some text',
+        },
       })
     })
 
@@ -61,8 +72,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: 'some '
-        }
+          source: 'some ',
+        },
       })
       expect(text2).toStrictEqual({
         type: NodeTypes.TEXT,
@@ -70,8 +81,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 20, line: 1, column: 21 },
           end: { offset: 25, line: 1, column: 26 },
-          source: ' text'
-        }
+          source: ' text',
+        },
       })
     })
 
@@ -86,8 +97,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: 'some '
-        }
+          source: 'some ',
+        },
       })
       expect(text2).toStrictEqual({
         type: NodeTypes.TEXT,
@@ -95,8 +106,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 21, line: 1, column: 22 },
           end: { offset: 26, line: 1, column: 27 },
-          source: ' text'
-        }
+          source: ' text',
+        },
       })
     })
 
@@ -111,8 +122,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: 'some '
-        }
+          source: 'some ',
+        },
       })
       expect(text2).toStrictEqual({
         type: NodeTypes.TEXT,
@@ -120,8 +131,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 32, line: 1, column: 33 },
           end: { offset: 37, line: 1, column: 38 },
-          source: ' text'
-        }
+          source: ' text',
+        },
       })
     })
 
@@ -131,7 +142,7 @@ describe('compiler: parse', () => {
           if (err.code !== ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME) {
             throw err
           }
-        }
+        },
       })
       const text = ast.children[0] as TextNode
 
@@ -141,8 +152,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: 'a < b'
-        }
+          source: 'a < b',
+        },
       })
     })
 
@@ -152,7 +163,7 @@ describe('compiler: parse', () => {
           if (error.code !== ErrorCodes.X_MISSING_INTERPOLATION_END) {
             throw error
           }
-        }
+        },
       })
       const text = ast.children[0] as TextNode
 
@@ -162,8 +173,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 6, line: 1, column: 7 },
-          source: 'a {{ b'
-        }
+          source: 'a {{ b',
+        },
       })
     })
   })
@@ -183,14 +194,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 2, line: 1, column: 3 },
             end: { offset: 9, line: 1, column: 10 },
-            source: `message`
-          }
+            source: 'message',
+          },
         },
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 11, line: 1, column: 12 },
-          source: '{{message}}'
-        }
+          source: '{{message}}',
+        },
       })
     })
 
@@ -208,14 +219,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 3, line: 1, column: 4 },
             end: { offset: 6, line: 1, column: 7 },
-            source: 'a<b'
-          }
+            source: 'a<b',
+          },
         },
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 9, line: 1, column: 10 },
-          source: '{{ a<b }}'
-        }
+          source: '{{ a<b }}',
+        },
       })
     })
 
@@ -234,14 +245,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 3, line: 1, column: 4 },
             end: { offset: 6, line: 1, column: 7 },
-            source: 'a<b'
-          }
+            source: 'a<b',
+          },
         },
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 9, line: 1, column: 10 },
-          source: '{{ a<b }}'
-        }
+          source: '{{ a<b }}',
+        },
       })
 
       expect(interpolation2).toStrictEqual({
@@ -254,14 +265,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 12, line: 1, column: 13 },
             end: { offset: 15, line: 1, column: 16 },
-            source: 'c>d'
-          }
+            source: 'c>d',
+          },
         },
         loc: {
           start: { offset: 9, line: 1, column: 10 },
           end: { offset: 18, line: 1, column: 19 },
-          source: '{{ c>d }}'
-        }
+          source: '{{ c>d }}',
+        },
       })
     })
 
@@ -281,20 +292,20 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 8, line: 1, column: 9 },
             end: { offset: 16, line: 1, column: 17 },
-            source: '"</div>"'
-          }
+            source: '"</div>"',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 19, line: 1, column: 20 },
-          source: '{{ "</div>" }}'
-        }
+          source: '{{ "</div>" }}',
+        },
       })
     })
 
     test('custom delimiters', () => {
       const ast = baseParse('<p>{msg}</p>', {
-        delimiters: ['{', '}']
+        delimiters: ['{', '}'],
       })
       const element = ast.children[0] as ElementNode
       const interpolation = element.children[0] as InterpolationNode
@@ -309,14 +320,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 4, line: 1, column: 5 },
             end: { offset: 7, line: 1, column: 8 },
-            source: 'msg'
-          }
+            source: 'msg',
+          },
         },
         loc: {
           start: { offset: 3, line: 1, column: 4 },
           end: { offset: 8, line: 1, column: 9 },
-          source: '{msg}'
-        }
+          source: '{msg}',
+        },
       })
     })
   })
@@ -332,8 +343,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 7, line: 1, column: 8 },
-          source: '<!---->'
-        }
+          source: '<!---->',
+        },
       })
     })
 
@@ -347,8 +358,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 10, line: 1, column: 11 },
-          source: '<!--abc-->'
-        }
+          source: '<!--abc-->',
+        },
       })
     })
 
@@ -363,8 +374,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 10, line: 1, column: 11 },
-          source: '<!--abc-->'
-        }
+          source: '<!--abc-->',
+        },
       })
       expect(comment2).toStrictEqual({
         type: NodeTypes.COMMENT,
@@ -372,8 +383,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 10, line: 1, column: 11 },
           end: { offset: 20, line: 1, column: 21 },
-          source: '<!--def-->'
-        }
+          source: '<!--def-->',
+        },
       })
     })
 
@@ -390,38 +401,38 @@ describe('compiler: parse', () => {
       const rawText = `<p/><!-- foo --><p/>`
 
       const astWithComments = baseParse(`<pre>${rawText}</pre>`, {
-        comments: true
+        comments: true,
       })
       expect(
-        (astWithComments.children[0] as ElementNode).children
+        (astWithComments.children[0] as ElementNode).children,
       ).toMatchObject([
         {
           type: NodeTypes.ELEMENT,
-          tag: 'p'
+          tag: 'p',
         },
         {
-          type: NodeTypes.COMMENT
+          type: NodeTypes.COMMENT,
         },
         {
           type: NodeTypes.ELEMENT,
-          tag: 'p'
-        }
+          tag: 'p',
+        },
       ])
 
       const astWithoutComments = baseParse(`<pre>${rawText}</pre>`, {
-        comments: false
+        comments: false,
       })
       expect(
-        (astWithoutComments.children[0] as ElementNode).children
+        (astWithoutComments.children[0] as ElementNode).children,
       ).toMatchObject([
         {
           type: NodeTypes.ELEMENT,
-          tag: 'p'
+          tag: 'p',
         },
         {
           type: NodeTypes.ELEMENT,
-          tag: 'p'
-        }
+          tag: 'p',
+        },
       ])
     })
   })
@@ -438,7 +449,6 @@ describe('compiler: parse', () => {
         tagType: ElementTypes.ELEMENT,
         codegenNode: undefined,
         props: [],
-        isSelfClosing: false,
         children: [
           {
             type: NodeTypes.TEXT,
@@ -446,15 +456,15 @@ describe('compiler: parse', () => {
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 10, line: 1, column: 11 },
-              source: 'hello'
-            }
-          }
+              source: 'hello',
+            },
+          },
         ],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 16, line: 1, column: 17 },
-          source: '<div>hello</div>'
-        }
+          source: '<div>hello</div>',
+        },
       })
     })
 
@@ -469,13 +479,12 @@ describe('compiler: parse', () => {
         tagType: ElementTypes.ELEMENT,
         codegenNode: undefined,
         props: [],
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 11, line: 1, column: 12 },
-          source: '<div></div>'
-        }
+          source: '<div></div>',
+        },
       })
     })
 
@@ -490,20 +499,19 @@ describe('compiler: parse', () => {
         tagType: ElementTypes.ELEMENT,
         codegenNode: undefined,
         props: [],
-
-        isSelfClosing: true,
         children: [],
+        isSelfClosing: true,
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 6, line: 1, column: 7 },
-          source: '<div/>'
-        }
+          source: '<div/>',
+        },
       })
     })
 
     test('void element', () => {
       const ast = baseParse('<img>after', {
-        isVoidTag: tag => tag === 'img'
+        isVoidTag: tag => tag === 'img',
       })
       const element = ast.children[0] as ElementNode
 
@@ -514,14 +522,35 @@ describe('compiler: parse', () => {
         tagType: ElementTypes.ELEMENT,
         codegenNode: undefined,
         props: [],
-
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: '<img>'
-        }
+          source: '<img>',
+        },
+      })
+    })
+
+    test('self-closing void element', () => {
+      const ast = baseParse('<img/>after', {
+        isVoidTag: tag => tag === 'img',
+      })
+      const element = ast.children[0] as ElementNode
+
+      expect(element).toStrictEqual({
+        type: NodeTypes.ELEMENT,
+        ns: Namespaces.HTML,
+        tag: 'img',
+        tagType: ElementTypes.ELEMENT,
+        codegenNode: undefined,
+        props: [],
+        children: [],
+        isSelfClosing: true,
+        loc: {
+          start: { offset: 0, line: 1, column: 1 },
+          end: { offset: 6, line: 1, column: 7 },
+          source: '<img/>',
+        },
       })
     })
 
@@ -530,7 +559,7 @@ describe('compiler: parse', () => {
       const element = ast.children[0]
       expect(element).toMatchObject({
         type: NodeTypes.ELEMENT,
-        tagType: ElementTypes.TEMPLATE
+        tagType: ElementTypes.TEMPLATE,
       })
     })
 
@@ -539,31 +568,31 @@ describe('compiler: parse', () => {
       const element = ast.children[0]
       expect(element).toMatchObject({
         type: NodeTypes.ELEMENT,
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
     })
 
     test('native element with `isNativeTag`', () => {
       const ast = baseParse('<div></div><comp></comp><Comp></Comp>', {
-        isNativeTag: tag => tag === 'div'
+        isNativeTag: tag => tag === 'div',
       })
 
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
 
       expect(ast.children[2]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
@@ -573,105 +602,105 @@ describe('compiler: parse', () => {
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'comp',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[2]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
-    test('v-is with `isNativeTag`', () => {
+    test('is casting with `isNativeTag`', () => {
       const ast = baseParse(
-        `<div></div><div v-is="'foo'"></div><Comp></Comp>`,
+        `<div></div><div is="vue:foo"></div><Comp></Comp>`,
         {
-          isNativeTag: tag => tag === 'div'
-        }
+          isNativeTag: tag => tag === 'div',
+        },
       )
 
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
 
       expect(ast.children[2]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
-    test('v-is without `isNativeTag`', () => {
-      const ast = baseParse(`<div></div><div v-is="'foo'"></div><Comp></Comp>`)
+    test('is casting without `isNativeTag`', () => {
+      const ast = baseParse(`<div></div><div is="vue:foo"></div><Comp></Comp>`)
 
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
 
       expect(ast.children[2]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
     test('custom element', () => {
       const ast = baseParse('<div></div><comp></comp>', {
         isNativeTag: tag => tag === 'div',
-        isCustomElement: tag => tag === 'comp'
+        isCustomElement: tag => tag === 'comp',
       })
 
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'comp',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
     })
 
     test('built-in component', () => {
       const ast = baseParse('<div></div><comp></comp>', {
-        isBuiltInComponent: tag => (tag === 'comp' ? Symbol() : void 0)
+        isBuiltInComponent: tag => (tag === 'comp' ? Symbol() : void 0),
       })
 
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
@@ -681,13 +710,13 @@ describe('compiler: parse', () => {
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'slot',
-        tagType: ElementTypes.SLOT
+        tagType: ElementTypes.SLOT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
@@ -705,22 +734,26 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: undefined,
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 7, line: 1, column: 8 },
-              source: 'id'
-            }
-          }
+              source: 'id',
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 14, line: 1, column: 15 },
-          source: '<div id></div>'
-        }
+          source: '<div id></div>',
+        },
       })
     })
 
@@ -738,30 +771,34 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: '',
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 10, line: 1, column: 11 },
-                source: '""'
-              }
+                source: '""',
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 10, line: 1, column: 11 },
-              source: 'id=""'
-            }
-          }
+              source: 'id=""',
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 17, line: 1, column: 18 },
-          source: '<div id=""></div>'
-        }
+          source: '<div id=""></div>',
+        },
       })
     })
 
@@ -779,30 +816,34 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: '',
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 10, line: 1, column: 11 },
-                source: "''"
-              }
+                source: "''",
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 10, line: 1, column: 11 },
-              source: "id=''"
-            }
-          }
+              source: "id=''",
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 17, line: 1, column: 18 },
-          source: "<div id=''></div>"
-        }
+          source: "<div id=''></div>",
+        },
       })
     })
 
@@ -820,30 +861,34 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: ">'",
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 12, line: 1, column: 13 },
-                source: '">\'"'
-              }
+                source: '">\'"',
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 12, line: 1, column: 13 },
-              source: 'id=">\'"'
-            }
-          }
+              source: 'id=">\'"',
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 19, line: 1, column: 20 },
-          source: '<div id=">\'"></div>'
-        }
+          source: '<div id=">\'"></div>',
+        },
       })
     })
 
@@ -861,30 +906,34 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: '>"',
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 12, line: 1, column: 13 },
-                source: "'>\"'"
-              }
+                source: "'>\"'",
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 12, line: 1, column: 13 },
-              source: "id='>\"'"
-            }
-          }
+              source: "id='>\"'",
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 19, line: 1, column: 20 },
-          source: "<div id='>\"'></div>"
-        }
+          source: "<div id='>\"'></div>",
+        },
       })
     })
 
@@ -902,30 +951,117 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: 'a/',
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 10, line: 1, column: 11 },
-                source: 'a/'
-              }
+                source: 'a/',
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 10, line: 1, column: 11 },
-              source: 'id=a/'
-            }
-          }
+              source: 'id=a/',
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 17, line: 1, column: 18 },
-          source: '<div id=a/></div>'
-        }
+          source: '<div id=a/></div>',
+        },
+      })
+    })
+
+    test('attribute value with >', () => {
+      const ast = baseParse(
+        '<script setup lang="ts" generic="T extends Record<string,string>"></script>',
+        { parseMode: 'sfc' },
+      )
+      const element = ast.children[0] as ElementNode
+      expect(element).toMatchObject({
+        type: NodeTypes.ELEMENT,
+        ns: Namespaces.HTML,
+        tag: 'script',
+        tagType: ElementTypes.ELEMENT,
+        codegenNode: undefined,
+        children: [],
+        innerLoc: {
+          start: { column: 67, line: 1, offset: 66 },
+          end: { column: 67, line: 1, offset: 66 },
+        },
+        props: [
+          {
+            loc: {
+              source: 'setup',
+              end: { column: 14, line: 1, offset: 13 },
+              start: { column: 9, line: 1, offset: 8 },
+            },
+            name: 'setup',
+            nameLoc: {
+              source: 'setup',
+              end: { column: 14, line: 1, offset: 13 },
+              start: { column: 9, line: 1, offset: 8 },
+            },
+            type: NodeTypes.ATTRIBUTE,
+            value: undefined,
+          },
+          {
+            loc: {
+              source: 'lang="ts"',
+              end: { column: 24, line: 1, offset: 23 },
+              start: { column: 15, line: 1, offset: 14 },
+            },
+            name: 'lang',
+            nameLoc: {
+              source: 'lang',
+              end: { column: 19, line: 1, offset: 18 },
+              start: { column: 15, line: 1, offset: 14 },
+            },
+            type: NodeTypes.ATTRIBUTE,
+            value: {
+              content: 'ts',
+              loc: {
+                source: '"ts"',
+                end: { column: 24, line: 1, offset: 23 },
+                start: { column: 20, line: 1, offset: 19 },
+              },
+              type: NodeTypes.TEXT,
+            },
+          },
+          {
+            loc: {
+              source: 'generic="T extends Record<string,string>"',
+              end: { column: 66, line: 1, offset: 65 },
+              start: { column: 25, line: 1, offset: 24 },
+            },
+            name: 'generic',
+            nameLoc: {
+              source: 'generic',
+              end: { column: 32, line: 1, offset: 31 },
+              start: { column: 25, line: 1, offset: 24 },
+            },
+            type: NodeTypes.ATTRIBUTE,
+            value: {
+              content: 'T extends Record<string,string>',
+              loc: {
+                source: '"T extends Record<string,string>"',
+                end: { column: 66, line: 1, offset: 65 },
+                start: { column: 33, line: 1, offset: 32 },
+              },
+              type: NodeTypes.TEXT,
+            },
+          },
+        ],
       })
     })
 
@@ -943,76 +1079,95 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: 'a',
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 9, line: 1, column: 10 },
-                source: 'a'
-              }
+                source: 'a',
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 9, line: 1, column: 10 },
-              source: 'id=a'
-            }
+              source: 'id=a',
+            },
           },
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'class',
+            nameLoc: {
+              start: { offset: 10, line: 1, column: 11 },
+              end: { offset: 15, line: 1, column: 16 },
+              source: 'class',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: 'c',
               loc: {
                 start: { offset: 16, line: 1, column: 17 },
                 end: { offset: 19, line: 1, column: 20 },
-                source: '"c"'
-              }
+                source: '"c"',
+              },
             },
             loc: {
               start: { offset: 10, line: 1, column: 11 },
               end: { offset: 19, line: 1, column: 20 },
-              source: 'class="c"'
-            }
+              source: 'class="c"',
+            },
           },
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'inert',
+            nameLoc: {
+              start: { offset: 20, line: 1, column: 21 },
+              end: { offset: 25, line: 1, column: 26 },
+              source: 'inert',
+            },
             value: undefined,
             loc: {
               start: { offset: 20, line: 1, column: 21 },
               end: { offset: 25, line: 1, column: 26 },
-              source: 'inert'
-            }
+              source: 'inert',
+            },
           },
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'style',
+            nameLoc: {
+              start: { offset: 26, line: 1, column: 27 },
+              end: { offset: 31, line: 1, column: 32 },
+              source: 'style',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: '',
               loc: {
                 start: { offset: 32, line: 1, column: 33 },
                 end: { offset: 34, line: 1, column: 35 },
-                source: "''"
-              }
+                source: "''",
+              },
             },
             loc: {
               start: { offset: 26, line: 1, column: 27 },
               end: { offset: 34, line: 1, column: 35 },
-              source: "style=''"
-            }
-          }
+              source: "style=''",
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 41, line: 1, column: 42 },
-          source: '<div id=a class="c" inert style=\'\'></div>'
-        }
+          source: '<div id=a class="c" inert style=\'\'></div>',
+        },
       })
     })
 
@@ -1024,60 +1179,40 @@ describe('compiler: parse', () => {
       expect(element).toStrictEqual({
         children: [],
         codegenNode: undefined,
-        isSelfClosing: false,
         loc: {
-          end: {
-            column: 10,
-            line: 3,
-            offset: 29
-          },
+          start: { column: 1, line: 1, offset: 0 },
+          end: { column: 10, line: 3, offset: 29 },
           source: '<div class=" \n\t c \t\n "></div>',
-          start: {
-            column: 1,
-            line: 1,
-            offset: 0
-          }
         },
         ns: Namespaces.HTML,
         props: [
           {
-            loc: {
-              end: {
-                column: 3,
-                line: 3,
-                offset: 22
-              },
-              source: 'class=" \n\t c \t\n "',
-              start: {
-                column: 6,
-                line: 1,
-                offset: 5
-              }
-            },
             name: 'class',
+            nameLoc: {
+              start: { column: 6, line: 1, offset: 5 },
+              end: { column: 11, line: 1, offset: 10 },
+              source: 'class',
+            },
             type: NodeTypes.ATTRIBUTE,
             value: {
               content: 'c',
               loc: {
-                end: {
-                  column: 3,
-                  line: 3,
-                  offset: 22
-                },
+                start: { column: 12, line: 1, offset: 11 },
+                end: { column: 3, line: 3, offset: 22 },
                 source: '" \n\t c \t\n "',
-                start: {
-                  column: 12,
-                  line: 1,
-                  offset: 11
-                }
               },
-              type: NodeTypes.TEXT
-            }
-          }
+              type: NodeTypes.TEXT,
+            },
+            loc: {
+              start: { column: 6, line: 1, offset: 5 },
+              end: { column: 3, line: 3, offset: 22 },
+              source: 'class=" \n\t c \t\n "',
+            },
+          },
         ],
         tag: 'div',
         tagType: ElementTypes.ELEMENT,
-        type: NodeTypes.ELEMENT
+        type: NodeTypes.ELEMENT,
       })
     })
 
@@ -1088,14 +1223,15 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'if',
+        rawName: 'v-if',
         arg: undefined,
         modifiers: [],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 9, line: 1, column: 10 },
-          source: 'v-if'
-        }
+          source: 'v-if',
+        },
       })
     })
 
@@ -1106,6 +1242,7 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'if',
+        rawName: 'v-if',
         arg: undefined,
         modifiers: [],
         exp: {
@@ -1116,14 +1253,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 11, line: 1, column: 12 },
             end: { offset: 12, line: 1, column: 13 },
-            source: 'a'
-          }
+            source: 'a',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 13, line: 1, column: 14 },
-          source: 'v-if="a"'
-        }
+          source: 'v-if="a"',
+        },
       })
     })
 
@@ -1134,33 +1271,25 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on:click',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'click',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 11, line: 1, offset: 10 },
+            end: { column: 16, line: 1, offset: 15 },
             source: 'click',
-            start: {
-              column: 11,
-              line: 1,
-              offset: 10
-            },
-            end: {
-              column: 16,
-              line: 1,
-              offset: 15
-            }
-          }
+          },
         },
         modifiers: [],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 15, line: 1, column: 16 },
-          source: 'v-on:click'
-        }
+          source: 'v-on:click',
+        },
       })
     })
 
@@ -1173,8 +1302,7 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 12, line: 1, column: 13 },
           end: { offset: 16, line: 1, column: 17 },
-          source: 'slot'
-        }
+        },
       })
     })
 
@@ -1184,11 +1312,11 @@ describe('compiler: parse', () => {
       const directive = (ast.children[0] as ElementNode)
         .props[0] as DirectiveNode
       expect(directive.arg).toMatchObject({
+        content: 'item.item',
         loc: {
           start: { offset: 6, line: 1, column: 7 },
           end: { offset: 15, line: 1, column: 16 },
-          source: 'item.item'
-        }
+        },
       })
     })
 
@@ -1199,33 +1327,25 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on:[event]',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'event',
           isStatic: false,
           constType: ConstantTypes.NOT_CONSTANT,
-
           loc: {
+            start: { column: 11, line: 1, offset: 10 },
+            end: { column: 18, line: 1, offset: 17 },
             source: '[event]',
-            start: {
-              column: 11,
-              line: 1,
-              offset: 10
-            },
-            end: {
-              column: 18,
-              line: 1,
-              offset: 17
-            }
-          }
+          },
         },
         modifiers: [],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 17, line: 1, column: 18 },
-          source: 'v-on:[event]'
-        }
+          source: 'v-on:[event]',
+        },
       })
     })
 
@@ -1236,14 +1356,35 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on.enter',
         arg: undefined,
-        modifiers: ['enter'],
+        modifiers: [
+          {
+            constType: 3,
+            content: 'enter',
+            isStatic: true,
+            loc: {
+              end: {
+                column: 16,
+                line: 1,
+                offset: 15,
+              },
+              source: 'enter',
+              start: {
+                column: 11,
+                line: 1,
+                offset: 10,
+              },
+            },
+            type: 4,
+          },
+        ],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 15, line: 1, column: 16 },
-          source: 'v-on.enter'
-        }
+          source: 'v-on.enter',
+        },
       })
     })
 
@@ -1254,14 +1395,54 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on.enter.exact',
         arg: undefined,
-        modifiers: ['enter', 'exact'],
+        modifiers: [
+          {
+            constType: 3,
+            content: 'enter',
+            isStatic: true,
+            loc: {
+              end: {
+                column: 16,
+                line: 1,
+                offset: 15,
+              },
+              source: 'enter',
+              start: {
+                column: 11,
+                line: 1,
+                offset: 10,
+              },
+            },
+            type: 4,
+          },
+          {
+            constType: 3,
+            content: 'exact',
+            isStatic: true,
+            loc: {
+              end: {
+                column: 22,
+                line: 1,
+                offset: 21,
+              },
+              source: 'exact',
+              start: {
+                column: 17,
+                line: 1,
+                offset: 16,
+              },
+            },
+            type: 4,
+          },
+        ],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 21, line: 1, column: 22 },
-          source: 'v-on.enter.exact'
-        }
+          source: 'v-on.enter.exact',
+        },
       })
     })
 
@@ -1272,33 +1453,64 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on:click.enter.exact',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'click',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 11, line: 1, offset: 10 },
+            end: { column: 16, line: 1, offset: 15 },
             source: 'click',
-            start: {
-              column: 11,
-              line: 1,
-              offset: 10
-            },
-            end: {
-              column: 16,
-              line: 1,
-              offset: 15
-            }
-          }
+          },
         },
-        modifiers: ['enter', 'exact'],
+        modifiers: [
+          {
+            constType: 3,
+            content: 'enter',
+            isStatic: true,
+            loc: {
+              end: {
+                column: 22,
+                line: 1,
+                offset: 21,
+              },
+              source: 'enter',
+              start: {
+                column: 17,
+                line: 1,
+                offset: 16,
+              },
+            },
+            type: 4,
+          },
+          {
+            constType: 3,
+            content: 'exact',
+            isStatic: true,
+            loc: {
+              end: {
+                column: 28,
+                line: 1,
+                offset: 27,
+              },
+              source: 'exact',
+              start: {
+                column: 23,
+                line: 1,
+                offset: 22,
+              },
+            },
+            type: 4,
+          },
+        ],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 27, line: 1, column: 28 },
-          source: 'v-on:click.enter.exact'
-        }
+          source: 'v-on:click.enter.exact',
+        },
       })
     })
 
@@ -1309,41 +1521,54 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on:[a.b].camel',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a.b',
           isStatic: false,
           constType: ConstantTypes.NOT_CONSTANT,
-
           loc: {
+            start: { column: 11, line: 1, offset: 10 },
+            end: { column: 16, line: 1, offset: 15 },
             source: '[a.b]',
-            start: {
-              column: 11,
-              line: 1,
-              offset: 10
-            },
-            end: {
-              column: 16,
-              line: 1,
-              offset: 15
-            }
-          }
+          },
         },
-        modifiers: ['camel'],
+        modifiers: [
+          {
+            constType: 3,
+            content: 'camel',
+            isStatic: true,
+            loc: {
+              end: {
+                column: 22,
+                line: 1,
+                offset: 21,
+              },
+              source: 'camel',
+              start: {
+                column: 17,
+                line: 1,
+                offset: 16,
+              },
+            },
+            type: 4,
+          },
+        ],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 21, line: 1, column: 22 },
-          source: 'v-on:[a.b].camel'
-        }
+          source: 'v-on:[a.b].camel',
+        },
       })
     })
+
     test('directive with no name', () => {
       let errorCode = -1
       const ast = baseParse('<div v-/>', {
         onError: err => {
           errorCode = err.code as number
-        }
+        },
       })
       const directive = (ast.children[0] as ElementNode).props[0]
 
@@ -1355,8 +1580,13 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 7, line: 1, column: 8 },
-          source: 'v-'
-        }
+          source: 'v-',
+        },
+        nameLoc: {
+          start: { offset: 5, line: 1, column: 6 },
+          end: { offset: 7, line: 1, column: 8 },
+          source: 'v-',
+        },
       })
     })
 
@@ -1367,25 +1597,17 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'bind',
+        rawName: ':a',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 7, line: 1, offset: 6 },
+            end: { column: 8, line: 1, offset: 7 },
             source: 'a',
-            start: {
-              column: 7,
-              line: 1,
-              offset: 6
-            },
-            end: {
-              column: 8,
-              line: 1,
-              offset: 7
-            }
-          }
+          },
         },
         modifiers: [],
         exp: {
@@ -1393,18 +1615,17 @@ describe('compiler: parse', () => {
           content: 'b',
           isStatic: false,
           constType: ConstantTypes.NOT_CONSTANT,
-
           loc: {
             start: { offset: 8, line: 1, column: 9 },
             end: { offset: 9, line: 1, column: 10 },
-            source: 'b'
-          }
+            source: 'b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 9, line: 1, column: 10 },
-          source: ':a=b'
-        }
+          source: ':a=b',
+        },
       })
     })
 
@@ -1415,44 +1636,55 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'bind',
+        rawName: '.a',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 7, line: 1, offset: 6 },
+            end: { column: 8, line: 1, offset: 7 },
             source: 'a',
-            start: {
-              column: 7,
-              line: 1,
-              offset: 6
-            },
-            end: {
-              column: 8,
-              line: 1,
-              offset: 7
-            }
-          }
+          },
         },
-        modifiers: ['prop'],
+        modifiers: [
+          {
+            constType: 0,
+            content: 'prop',
+            isStatic: false,
+            loc: {
+              end: {
+                column: 1,
+                line: 1,
+                offset: 0,
+              },
+              source: '',
+              start: {
+                column: 1,
+                line: 1,
+                offset: 0,
+              },
+            },
+            type: 4,
+          },
+        ],
         exp: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'b',
           isStatic: false,
           constType: ConstantTypes.NOT_CONSTANT,
-
           loc: {
             start: { offset: 8, line: 1, column: 9 },
             end: { offset: 9, line: 1, column: 10 },
-            source: 'b'
-          }
+            source: 'b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 9, line: 1, column: 10 },
-          source: '.a=b'
-        }
+          source: '.a=b',
+        },
       })
     })
 
@@ -1463,27 +1695,39 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'bind',
+        rawName: ':a.sync',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 7, line: 1, offset: 6 },
+            end: { column: 8, line: 1, offset: 7 },
             source: 'a',
-            start: {
-              column: 7,
-              line: 1,
-              offset: 6
-            },
-            end: {
-              column: 8,
-              line: 1,
-              offset: 7
-            }
-          }
+          },
         },
-        modifiers: ['sync'],
+        modifiers: [
+          {
+            constType: 3,
+            content: 'sync',
+            isStatic: true,
+            loc: {
+              end: {
+                column: 13,
+                line: 1,
+                offset: 12,
+              },
+              source: 'sync',
+              start: {
+                column: 9,
+                line: 1,
+                offset: 8,
+              },
+            },
+            type: 4,
+          },
+        ],
         exp: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'b',
@@ -1493,14 +1737,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 13, line: 1, column: 14 },
             end: { offset: 14, line: 1, column: 15 },
-            source: 'b'
-          }
+            source: 'b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 14, line: 1, column: 15 },
-          source: ':a.sync=b'
-        }
+          source: ':a.sync=b',
+        },
       })
     })
 
@@ -1511,25 +1755,17 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: '@a',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 7, line: 1, offset: 6 },
+            end: { column: 8, line: 1, offset: 7 },
             source: 'a',
-            start: {
-              column: 7,
-              line: 1,
-              offset: 6
-            },
-            end: {
-              column: 8,
-              line: 1,
-              offset: 7
-            }
-          }
+          },
         },
         modifiers: [],
         exp: {
@@ -1541,14 +1777,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 8, line: 1, column: 9 },
             end: { offset: 9, line: 1, column: 10 },
-            source: 'b'
-          }
+            source: 'b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 9, line: 1, column: 10 },
-          source: '@a=b'
-        }
+          source: '@a=b',
+        },
       })
     })
 
@@ -1559,27 +1795,39 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: '@a.enter',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 7, line: 1, offset: 6 },
+            end: { column: 8, line: 1, offset: 7 },
             source: 'a',
-            start: {
-              column: 7,
-              line: 1,
-              offset: 6
-            },
-            end: {
-              column: 8,
-              line: 1,
-              offset: 7
-            }
-          }
+          },
         },
-        modifiers: ['enter'],
+        modifiers: [
+          {
+            constType: 3,
+            content: 'enter',
+            isStatic: true,
+            loc: {
+              end: {
+                column: 14,
+                line: 1,
+                offset: 13,
+              },
+              source: 'enter',
+              start: {
+                column: 9,
+                line: 1,
+                offset: 8,
+              },
+            },
+            type: 4,
+          },
+        ],
         exp: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'b',
@@ -1589,14 +1837,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 14, line: 1, column: 15 },
             end: { offset: 15, line: 1, column: 16 },
-            source: 'b'
-          }
+            source: 'b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 15, line: 1, column: 16 },
-          source: '@a.enter=b'
-        }
+          source: '@a.enter=b',
+        },
       })
     })
 
@@ -1607,24 +1855,17 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'slot',
+        rawName: '#a',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
           loc: {
+            start: { column: 8, line: 1, offset: 7 },
+            end: { column: 9, line: 1, offset: 8 },
             source: 'a',
-            start: {
-              column: 8,
-              line: 1,
-              offset: 7
-            },
-            end: {
-              column: 9,
-              line: 1,
-              offset: 8
-            }
-          }
+          },
         },
         modifiers: [],
         exp: {
@@ -1636,14 +1877,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 10, line: 1, column: 11 },
             end: { offset: 15, line: 1, column: 16 },
-            source: '{ b }'
-          }
+            source: '{ b }',
+          },
         },
         loc: {
           start: { offset: 6, line: 1, column: 7 },
           end: { offset: 16, line: 1, column: 17 },
-          source: '#a="{ b }"'
-        }
+          source: '#a="{ b }"',
+        },
       })
     })
 
@@ -1655,32 +1896,32 @@ describe('compiler: parse', () => {
       expect(directive).toMatchObject({
         type: NodeTypes.DIRECTIVE,
         name: 'slot',
+        rawName: 'v-slot:foo.bar',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'foo.bar',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
           loc: {
-            source: 'foo.bar',
             start: {
               column: 14,
               line: 1,
-              offset: 13
+              offset: 13,
             },
             end: {
               column: 21,
               line: 1,
-              offset: 20
-            }
-          }
-        }
+              offset: 20,
+            },
+          },
+        },
       })
     })
 
     test('v-pre', () => {
       const ast = baseParse(
         `<div v-pre :id="foo"><Comp/>{{ bar }}</div>\n` +
-          `<div :id="foo"><Comp/>{{ bar }}</div>`
+          `<div :id="foo"><Comp/>{{ bar }}</div>`,
       )
 
       const divWithPre = ast.children[0] as ElementNode
@@ -1690,29 +1931,22 @@ describe('compiler: parse', () => {
           name: `:id`,
           value: {
             type: NodeTypes.TEXT,
-            content: `foo`
+            content: `foo`,
           },
           loc: {
-            source: `:id="foo"`,
-            start: {
-              line: 1,
-              column: 12
-            },
-            end: {
-              line: 1,
-              column: 21
-            }
-          }
-        }
+            start: { line: 1, column: 12 },
+            end: { line: 1, column: 21 },
+          },
+        },
       ])
       expect(divWithPre.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tagType: ElementTypes.ELEMENT,
-        tag: `Comp`
+        tag: `Comp`,
       })
       expect(divWithPre.children[1]).toMatchObject({
         type: NodeTypes.TEXT,
-        content: `{{ bar }}`
+        content: `{{ bar }}`,
       })
 
       // should not affect siblings after it
@@ -1724,44 +1958,87 @@ describe('compiler: parse', () => {
           arg: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             isStatic: true,
-            content: `id`
+            content: `id`,
           },
           exp: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             isStatic: false,
-            content: `foo`
+            content: `foo`,
           },
           loc: {
-            source: `:id="foo"`,
             start: {
               line: 2,
-              column: 6
+              column: 6,
             },
             end: {
               line: 2,
-              column: 15
-            }
-          }
-        }
+              column: 15,
+            },
+          },
+        },
       ])
       expect(divWithoutPre.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tagType: ElementTypes.COMPONENT,
-        tag: `Comp`
+        tag: `Comp`,
       })
       expect(divWithoutPre.children[1]).toMatchObject({
         type: NodeTypes.INTERPOLATION,
         content: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: `bar`,
-          isStatic: false
-        }
+          isStatic: false,
+        },
       })
     })
 
+    // https://github.com/vuejs/docs/issues/2586
+    test('v-pre with half-open interpolation', () => {
+      const ast = baseParse(
+        `<div v-pre>
+          <span>{{ number </span>
+          <span>}}</span>
+        </div>
+        `,
+      )
+      expect((ast.children[0] as ElementNode).children).toMatchObject([
+        {
+          type: NodeTypes.ELEMENT,
+          children: [{ type: NodeTypes.TEXT, content: `{{ number ` }],
+        },
+        {
+          type: NodeTypes.ELEMENT,
+          children: [{ type: NodeTypes.TEXT, content: `}}` }],
+        },
+      ])
+
+      const ast2 = baseParse(`<div v-pre><span>{{ number </span></div>`)
+      expect((ast2.children[0] as ElementNode).children).toMatchObject([
+        {
+          type: NodeTypes.ELEMENT,
+          children: [{ type: NodeTypes.TEXT, content: `{{ number ` }],
+        },
+      ])
+
+      const ast3 = baseParse(`<div v-pre><textarea>{{ foo </textarea></div>`, {
+        parseMode: 'html',
+      })
+      expect((ast3.children[0] as ElementNode).children).toMatchObject([
+        {
+          type: NodeTypes.ELEMENT,
+          children: [
+            {
+              type: NodeTypes.TEXT,
+              content: `{{ foo `,
+            },
+          ],
+        },
+      ])
+    })
+
     test('self-closing v-pre', () => {
       const ast = baseParse(
-        `<div v-pre/>\n<div :id="foo"><Comp/>{{ bar }}</div>`
+        `<div v-pre/>\n<div :id="foo"><Comp/>{{ bar }}</div>`,
       )
       // should not affect siblings after it
       const divWithoutPre = ast.children[1] as ElementNode
@@ -1772,38 +2049,37 @@ describe('compiler: parse', () => {
           arg: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             isStatic: true,
-            content: `id`
+            content: `id`,
           },
           exp: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             isStatic: false,
-            content: `foo`
+            content: `foo`,
           },
           loc: {
-            source: `:id="foo"`,
             start: {
               line: 2,
-              column: 6
+              column: 6,
             },
             end: {
               line: 2,
-              column: 15
-            }
-          }
-        }
+              column: 15,
+            },
+          },
+        },
       ])
       expect(divWithoutPre.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tagType: ElementTypes.COMPONENT,
-        tag: `Comp`
+        tag: `Comp`,
       })
       expect(divWithoutPre.children[1]).toMatchObject({
         type: NodeTypes.INTERPOLATION,
         content: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: `bar`,
-          isStatic: false
-        }
+          isStatic: false,
+        },
       })
     })
 
@@ -1818,133 +2094,187 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 10, line: 1, column: 11 },
-          source: 'hello'
-        }
+          source: 'hello',
+        },
       })
     })
   })
 
-  test('self closing single tag', () => {
-    const ast = baseParse('<div :class="{ some: condition }" />')
+  describe('Edge Cases', () => {
+    test('self closing single tag', () => {
+      const ast = baseParse('<div :class="{ some: condition }" />')
 
-    expect(ast.children).toHaveLength(1)
-    expect(ast.children[0]).toMatchObject({ tag: 'div' })
-  })
-
-  test('self closing multiple tag', () => {
-    const ast = baseParse(
-      `<div :class="{ some: condition }" />\n` +
-        `<p v-bind:style="{ color: 'red' }"/>`
-    )
-
-    expect(ast).toMatchSnapshot()
-
-    expect(ast.children).toHaveLength(2)
-    expect(ast.children[0]).toMatchObject({ tag: 'div' })
-    expect(ast.children[1]).toMatchObject({ tag: 'p' })
-  })
-
-  test('valid html', () => {
-    const ast = baseParse(
-      `<div :class="{ some: condition }">\n` +
-        `  <p v-bind:style="{ color: 'red' }"/>\n` +
-        `  <!-- a comment with <html> inside it -->\n` +
-        `</div>`
-    )
-
-    expect(ast).toMatchSnapshot()
-
-    expect(ast.children).toHaveLength(1)
-    const el = ast.children[0] as any
-    expect(el).toMatchObject({
-      tag: 'div'
-    })
-    expect(el.children).toHaveLength(2)
-    expect(el.children[0]).toMatchObject({
-      tag: 'p'
-    })
-    expect(el.children[1]).toMatchObject({
-      type: NodeTypes.COMMENT
-    })
-  })
-
-  test('invalid html', () => {
-    expect(() => {
-      baseParse(`<div>\n<span>\n</div>\n</span>`)
-    }).toThrow('Element is missing end tag.')
-
-    const spy = vi.fn()
-    const ast = baseParse(`<div>\n<span>\n</div>\n</span>`, {
-      onError: spy
+      expect(ast.children).toHaveLength(1)
+      expect(ast.children[0]).toMatchObject({ tag: 'div' })
     })
 
-    expect(spy.mock.calls).toMatchObject([
-      [
+    test('self closing multiple tag', () => {
+      const ast = baseParse(
+        `<div :class="{ some: condition }" />\n` +
+          `<p v-bind:style="{ color: 'red' }"/>`,
+      )
+
+      expect(ast).toMatchSnapshot()
+
+      expect(ast.children).toHaveLength(2)
+      expect(ast.children[0]).toMatchObject({ tag: 'div' })
+      expect(ast.children[1]).toMatchObject({ tag: 'p' })
+    })
+
+    test('valid html', () => {
+      const ast = baseParse(
+        `<div :class="{ some: condition }">\n` +
+          `  <p v-bind:style="{ color: 'red' }"/>\n` +
+          `  <!-- a comment with <html> inside it -->\n` +
+          `</div>`,
+      )
+
+      expect(ast).toMatchSnapshot()
+
+      expect(ast.children).toHaveLength(1)
+      const el = ast.children[0] as any
+      expect(el).toMatchObject({
+        tag: 'div',
+      })
+      expect(el.children).toHaveLength(2)
+      expect(el.children[0]).toMatchObject({
+        tag: 'p',
+      })
+      expect(el.children[1]).toMatchObject({
+        type: NodeTypes.COMMENT,
+      })
+    })
+
+    test('invalid html', () => {
+      expect(() => {
+        baseParse(`<div>\n<span>\n</div>\n</span>`)
+      }).toThrow('Element is missing end tag.')
+
+      const spy = vi.fn()
+      const ast = baseParse(`<div>\n<span>\n</div>\n</span>`, {
+        onError: spy,
+      })
+
+      expect(spy.mock.calls).toMatchObject([
+        [
+          {
+            code: ErrorCodes.X_MISSING_END_TAG,
+            loc: {
+              start: {
+                offset: 6,
+                line: 2,
+                column: 1,
+              },
+            },
+          },
+        ],
+        [
+          {
+            code: ErrorCodes.X_INVALID_END_TAG,
+            loc: {
+              start: {
+                offset: 20,
+                line: 4,
+                column: 1,
+              },
+            },
+          },
+        ],
+      ])
+
+      expect(ast).toMatchSnapshot()
+    })
+
+    test('parse with correct location info', () => {
+      const fooSrc = `foo\n is `
+      const barSrc = `{{ bar }}`
+      const butSrc = ` but `
+      const bazSrc = `{{ baz }}`
+      const [foo, bar, but, baz] = baseParse(
+        fooSrc + barSrc + butSrc + bazSrc,
+      ).children
+
+      let offset = 0
+      expect(foo.loc.start).toEqual({ line: 1, column: 1, offset })
+      offset += fooSrc.length
+      expect(foo.loc.end).toEqual({ line: 2, column: 5, offset })
+
+      expect(bar.loc.start).toEqual({ line: 2, column: 5, offset })
+      const barInner = (bar as InterpolationNode).content
+      offset += 3
+      expect(barInner.loc.start).toEqual({ line: 2, column: 8, offset })
+      offset += 3
+      expect(barInner.loc.end).toEqual({ line: 2, column: 11, offset })
+      offset += 3
+      expect(bar.loc.end).toEqual({ line: 2, column: 14, offset })
+
+      expect(but.loc.start).toEqual({ line: 2, column: 14, offset })
+      offset += butSrc.length
+      expect(but.loc.end).toEqual({ line: 2, column: 19, offset })
+
+      expect(baz.loc.start).toEqual({ line: 2, column: 19, offset })
+      const bazInner = (baz as InterpolationNode).content
+      offset += 3
+      expect(bazInner.loc.start).toEqual({ line: 2, column: 22, offset })
+      offset += 3
+      expect(bazInner.loc.end).toEqual({ line: 2, column: 25, offset })
+      offset += 3
+      expect(baz.loc.end).toEqual({ line: 2, column: 28, offset })
+    })
+
+    // With standard HTML parsing, the following input would ignore the slash
+    // and treat "<" and "template" as attributes on the open tag of "Hello",
+    // causing `<template>` to fail to close, and `<script>` being parsed as its
+    // child. This is would never be intended in actual templates, but is a common
+    // intermediate state from user input when parsing for IDE support. We want
+    // the `<script>` to be at root-level to keep the SFC structure stable for
+    // Volar to do incremental computations.
+    test('tag termination handling for IDE', () => {
+      const spy = vi.fn()
+      const ast = baseParse(
+        `<template><Hello\n</template><script>console.log(1)</script>`,
         {
-          code: ErrorCodes.X_MISSING_END_TAG,
-          loc: {
-            start: {
-              offset: 6,
-              line: 2,
-              column: 1
-            }
-          }
-        }
-      ],
-      [
-        {
-          code: ErrorCodes.X_INVALID_END_TAG,
-          loc: {
-            start: {
-              offset: 20,
-              line: 4,
-              column: 1
-            }
-          }
-        }
-      ]
-    ])
+          onError: spy,
+        },
+      )
+      //
+      expect(ast.children.length).toBe(2)
+      expect(ast.children[1]).toMatchObject({
+        type: NodeTypes.ELEMENT,
+        tag: 'script',
+      })
+    })
 
-    expect(ast).toMatchSnapshot()
-  })
+    test('arg should be undefined on shorthand dirs with no arg', () => {
+      const ast = baseParse(`<template #></template>`)
+      const el = ast.children[0] as ElementNode
+      expect(el.props[0]).toMatchObject({
+        type: NodeTypes.DIRECTIVE,
+        name: 'slot',
+        exp: undefined,
+        arg: undefined,
+      })
+    })
 
-  test('parse with correct location info', () => {
-    const [foo, bar, but, baz] = baseParse(
-      `
-foo
- is {{ bar }} but {{ baz }}`.trim()
-    ).children
+    // edge case found in vue-macros where the input is TS or JSX
+    test('should reset inRCDATA state', () => {
+      baseParse(`<Foo>`, { parseMode: 'sfc', onError() {} })
+      expect(() => baseParse(`{ foo }`)).not.toThrow()
+    })
 
-    let offset = 0
-    expect(foo.loc.start).toEqual({ line: 1, column: 1, offset })
-    offset += foo.loc.source.length
-    expect(foo.loc.end).toEqual({ line: 2, column: 5, offset })
+    test('correct loc when the closing > is foarmatted', () => {
+      const [span] = baseParse(`<span></span
+      
+      >`).children
 
-    expect(bar.loc.start).toEqual({ line: 2, column: 5, offset })
-    const barInner = (bar as InterpolationNode).content
-    offset += 3
-    expect(barInner.loc.start).toEqual({ line: 2, column: 8, offset })
-    offset += barInner.loc.source.length
-    expect(barInner.loc.end).toEqual({ line: 2, column: 11, offset })
-    offset += 3
-    expect(bar.loc.end).toEqual({ line: 2, column: 14, offset })
-
-    expect(but.loc.start).toEqual({ line: 2, column: 14, offset })
-    offset += but.loc.source.length
-    expect(but.loc.end).toEqual({ line: 2, column: 19, offset })
-
-    expect(baz.loc.start).toEqual({ line: 2, column: 19, offset })
-    const bazInner = (baz as InterpolationNode).content
-    offset += 3
-    expect(bazInner.loc.start).toEqual({ line: 2, column: 22, offset })
-    offset += bazInner.loc.source.length
-    expect(bazInner.loc.end).toEqual({ line: 2, column: 25, offset })
-    offset += 3
-    expect(baz.loc.end).toEqual({ line: 2, column: 28, offset })
+      expect(span.loc.source).toBe('<span></span\n      \n      >')
+      expect(span.loc.start.offset).toBe(0)
+      expect(span.loc.end.offset).toBe(27)
+    })
   })
 
   describe('decodeEntities option', () => {
-    test('use default map', () => {
+    test('use decode by default', () => {
       const ast: any = baseParse('&gt;&lt;&amp;&apos;&quot;&foo;')
 
       expect(ast.children.length).toBe(1)
@@ -1952,15 +2282,14 @@ foo
       expect(ast.children[0].content).toBe('><&\'"&foo;')
     })
 
-    test('use the given map', () => {
-      const ast: any = baseParse('&amp;&cups;', {
+    test('should warn in non-browser build', () => {
+      baseParse('&amp;&cups;', {
         decodeEntities: text => text.replace('&cups;', '\u222A\uFE00'),
-        onError: () => {} // Ignore errors
+        onError: () => {}, // Ignore errors
       })
-
-      expect(ast.children.length).toBe(1)
-      expect(ast.children[0].type).toBe(NodeTypes.TEXT)
-      expect(ast.children[0].content).toBe('&amp;\u222A\uFE00')
+      expect(
+        `decodeEntities option is passed but will be ignored`,
+      ).toHaveBeenWarned()
     })
   })
 
@@ -1968,21 +2297,21 @@ foo
     const parse = (content: string, options?: ParserOptions) =>
       baseParse(content, {
         whitespace: 'condense',
-        ...options
+        ...options,
       })
 
-    it('should remove whitespaces at start/end inside an element', () => {
+    test('should remove whitespaces at start/end inside an element', () => {
       const ast = parse(`<div>   <span/>    </div>`)
       expect((ast.children[0] as ElementNode).children.length).toBe(1)
     })
 
-    it('should remove whitespaces w/ newline between elements', () => {
+    test('should remove whitespaces w/ newline between elements', () => {
       const ast = parse(`<div/> \n <div/> \n <div/>`)
       expect(ast.children.length).toBe(3)
       expect(ast.children.every(c => c.type === NodeTypes.ELEMENT)).toBe(true)
     })
 
-    it('should remove whitespaces adjacent to comments', () => {
+    test('should remove whitespaces adjacent to comments', () => {
       const ast = parse(`<div/> \n <!--foo--> <div/>`)
       expect(ast.children.length).toBe(3)
       expect(ast.children[0].type).toBe(NodeTypes.ELEMENT)
@@ -1990,7 +2319,7 @@ foo
       expect(ast.children[2].type).toBe(NodeTypes.ELEMENT)
     })
 
-    it('should remove whitespaces w/ newline between comments and elements', () => {
+    test('should remove whitespaces w/ newline between comments and elements', () => {
       const ast = parse(`<div/> \n <!--foo--> \n <div/>`)
       expect(ast.children.length).toBe(3)
       expect(ast.children[0].type).toBe(NodeTypes.ELEMENT)
@@ -1998,29 +2327,29 @@ foo
       expect(ast.children[2].type).toBe(NodeTypes.ELEMENT)
     })
 
-    it('should NOT remove whitespaces w/ newline between interpolations', () => {
+    test('should NOT remove whitespaces w/ newline between interpolations', () => {
       const ast = parse(`{{ foo }} \n {{ bar }}`)
       expect(ast.children.length).toBe(3)
       expect(ast.children[0].type).toBe(NodeTypes.INTERPOLATION)
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.TEXT,
-        content: ' '
+        content: ' ',
       })
       expect(ast.children[2].type).toBe(NodeTypes.INTERPOLATION)
     })
 
-    it('should NOT remove whitespaces w/ newline between interpolation and comment', () => {
+    test('should NOT remove whitespaces w/ newline between interpolation and comment', () => {
       const ast = parse(`<!-- foo --> \n {{msg}}`)
       expect(ast.children.length).toBe(3)
       expect(ast.children[0].type).toBe(NodeTypes.COMMENT)
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.TEXT,
-        content: ' '
+        content: ' ',
       })
       expect(ast.children[2].type).toBe(NodeTypes.INTERPOLATION)
     })
 
-    it('should NOT remove whitespaces w/o newline between elements', () => {
+    test('should NOT remove whitespaces w/o newline between elements', () => {
       const ast = parse(`<div/> <div/> <div/>`)
       expect(ast.children.length).toBe(5)
       expect(ast.children.map(c => c.type)).toMatchObject([
@@ -2028,18 +2357,19 @@ foo
         NodeTypes.TEXT,
         NodeTypes.ELEMENT,
         NodeTypes.TEXT,
-        NodeTypes.ELEMENT
+        NodeTypes.ELEMENT,
       ])
     })
 
-    it('should condense consecutive whitespaces in text', () => {
+    test('should condense consecutive whitespaces in text', () => {
       const ast = parse(`   foo  \n    bar     baz     `)
       expect((ast.children[0] as TextNode).content).toBe(` foo bar baz `)
     })
 
-    it('should remove leading newline character immediately following the pre element start tag', () => {
-      const ast = baseParse(`<pre>\n  foo  bar  </pre>`, {
-        isPreTag: tag => tag === 'pre'
+    test('should remove leading newline character immediately following the pre element start tag', () => {
+      const ast = parse(`<pre>\n  foo  bar  </pre>`, {
+        isPreTag: tag => tag === 'pre',
+        isIgnoreNewlineTag: tag => tag === 'pre',
       })
       expect(ast.children).toHaveLength(1)
       const preElement = ast.children[0] as ElementNode
@@ -2047,30 +2377,29 @@ foo
       expect((preElement.children[0] as TextNode).content).toBe(`  foo  bar  `)
     })
 
-    it('should NOT remove leading newline character immediately following child-tag of pre element', () => {
-      const ast = baseParse(`<pre><span></span>\n  foo  bar  </pre>`, {
-        isPreTag: tag => tag === 'pre'
+    test('should NOT remove leading newline character immediately following child-tag of pre element', () => {
+      const ast = parse(`<pre><span></span>\n  foo  bar  </pre>`, {
+        isPreTag: tag => tag === 'pre',
       })
       const preElement = ast.children[0] as ElementNode
       expect(preElement.children).toHaveLength(2)
       expect((preElement.children[1] as TextNode).content).toBe(
-        `\n  foo  bar  `
+        `\n  foo  bar  `,
       )
     })
 
-    it('self-closing pre tag', () => {
-      const ast = baseParse(`<pre/><span>\n  foo   bar</span>`, {
-        isPreTag: tag => tag === 'pre'
+    test('self-closing pre tag', () => {
+      const ast = parse(`<pre/><span>\n  foo   bar</span>`, {
+        isPreTag: tag => tag === 'pre',
       })
       const elementAfterPre = ast.children[1] as ElementNode
       // should not affect the <span> and condense its whitespace inside
       expect((elementAfterPre.children[0] as TextNode).content).toBe(` foo bar`)
     })
 
-    it('should NOT condense whitespaces in RCDATA text mode', () => {
-      const ast = baseParse(`<textarea>Text:\n   foo</textarea>`, {
-        getTextMode: ({ tag }) =>
-          tag === 'textarea' ? TextModes.RCDATA : TextModes.DATA
+    test('should NOT condense whitespaces in RCDATA text mode', () => {
+      const ast = parse(`<textarea>Text:\n   foo</textarea>`, {
+        parseMode: 'html',
       })
       const preElement = ast.children[0] as ElementNode
       expect(preElement.children).toHaveLength(1)
@@ -2082,15 +2411,15 @@ foo
     const parse = (content: string, options?: ParserOptions) =>
       baseParse(content, {
         whitespace: 'preserve',
-        ...options
+        ...options,
       })
 
-    it('should still remove whitespaces at start/end inside an element', () => {
+    test('should still remove whitespaces at start/end inside an element', () => {
       const ast = parse(`<div>   <span/>    </div>`)
       expect((ast.children[0] as ElementNode).children.length).toBe(1)
     })
 
-    it('should preserve whitespaces w/ newline between elements', () => {
+    test('should preserve whitespaces w/ newline between elements', () => {
       const ast = parse(`<div/> \n <div/> \n <div/>`)
       expect(ast.children.length).toBe(5)
       expect(ast.children.map(c => c.type)).toMatchObject([
@@ -2098,11 +2427,11 @@ foo
         NodeTypes.TEXT,
         NodeTypes.ELEMENT,
         NodeTypes.TEXT,
-        NodeTypes.ELEMENT
+        NodeTypes.ELEMENT,
       ])
     })
 
-    it('should preserve whitespaces adjacent to comments', () => {
+    test('should preserve whitespaces adjacent to comments', () => {
       const ast = parse(`<div/> \n <!--foo--> <div/>`)
       expect(ast.children.length).toBe(5)
       expect(ast.children.map(c => c.type)).toMatchObject([
@@ -2110,11 +2439,11 @@ foo
         NodeTypes.TEXT,
         NodeTypes.COMMENT,
         NodeTypes.TEXT,
-        NodeTypes.ELEMENT
+        NodeTypes.ELEMENT,
       ])
     })
 
-    it('should preserve whitespaces w/ newline between comments and elements', () => {
+    test('should preserve whitespaces w/ newline between comments and elements', () => {
       const ast = parse(`<div/> \n <!--foo--> \n <div/>`)
       expect(ast.children.length).toBe(5)
       expect(ast.children.map(c => c.type)).toMatchObject([
@@ -2122,22 +2451,22 @@ foo
         NodeTypes.TEXT,
         NodeTypes.COMMENT,
         NodeTypes.TEXT,
-        NodeTypes.ELEMENT
+        NodeTypes.ELEMENT,
       ])
     })
 
-    it('should preserve whitespaces w/ newline between interpolations', () => {
+    test('should preserve whitespaces w/ newline between interpolations', () => {
       const ast = parse(`{{ foo }} \n {{ bar }}`)
       expect(ast.children.length).toBe(3)
       expect(ast.children[0].type).toBe(NodeTypes.INTERPOLATION)
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.TEXT,
-        content: ' '
+        content: ' ',
       })
       expect(ast.children[2].type).toBe(NodeTypes.INTERPOLATION)
     })
 
-    it('should preserve whitespaces w/o newline between elements', () => {
+    test('should preserve whitespaces w/o newline between elements', () => {
       const ast = parse(`<div/> <div/> <div/>`)
       expect(ast.children.length).toBe(5)
       expect(ast.children.map(c => c.type)).toMatchObject([
@@ -2145,18 +2474,79 @@ foo
         NodeTypes.TEXT,
         NodeTypes.ELEMENT,
         NodeTypes.TEXT,
-        NodeTypes.ELEMENT
+        NodeTypes.ELEMENT,
       ])
     })
 
-    it('should preserve consecutive whitespaces in text', () => {
+    test('should preserve consecutive whitespaces in text', () => {
       const content = `   foo  \n    bar     baz     `
       const ast = parse(content)
       expect((ast.children[0] as TextNode).content).toBe(content)
     })
   })
 
+  describe('expression parsing', () => {
+    test('interpolation', () => {
+      const ast = baseParse(`{{ a + b }}`, { prefixIdentifiers: true })
+      // @ts-expect-error
+      expect((ast.children[0] as InterpolationNode).content.ast?.type).toBe(
+        'BinaryExpression',
+      )
+    })
+
+    test('v-bind', () => {
+      const ast = baseParse(`<div :[key+1]="foo()" />`, {
+        prefixIdentifiers: true,
+      })
+      const dir = (ast.children[0] as ElementNode).props[0] as DirectiveNode
+      // @ts-expect-error
+      expect(dir.arg?.ast?.type).toBe('BinaryExpression')
+      // @ts-expect-error
+      expect(dir.exp?.ast?.type).toBe('CallExpression')
+    })
+
+    test('v-on multi statements', () => {
+      const ast = baseParse(`<div @click="a++;b++" />`, {
+        prefixIdentifiers: true,
+      })
+      const dir = (ast.children[0] as ElementNode).props[0] as DirectiveNode
+      // @ts-expect-error
+      expect(dir.exp?.ast?.type).toBe('Program')
+      expect((dir.exp?.ast as Program).body).toMatchObject([
+        { type: 'ExpressionStatement' },
+        { type: 'ExpressionStatement' },
+      ])
+    })
+
+    test('v-slot', () => {
+      const ast = baseParse(`<Comp #foo="{ a, b }" />`, {
+        prefixIdentifiers: true,
+      })
+      const dir = (ast.children[0] as ElementNode).props[0] as DirectiveNode
+      // @ts-expect-error
+      expect(dir.exp?.ast?.type).toBe('ArrowFunctionExpression')
+    })
+
+    test('v-for', () => {
+      const ast = baseParse(`<div v-for="({ a, b }, key, index) of a.b" />`, {
+        prefixIdentifiers: true,
+      })
+      const dir = (ast.children[0] as ElementNode).props[0] as DirectiveNode
+      const { source, value, key, index } = dir.forParseResult!
+      // @ts-expect-error
+      expect(source.ast?.type).toBe('MemberExpression')
+      // @ts-expect-error
+      expect(value?.ast?.type).toBe('ArrowFunctionExpression')
+      expect(key?.ast).toBeNull() // simple ident
+      expect(index?.ast).toBeNull() // simple ident
+    })
+  })
+
   describe('Errors', () => {
+    // HTML parsing errors as specified at
+    // https://html.spec.whatwg.org/multipage/parsing.html#parse-errors
+    // We ignore some errors that do NOT affect parse result in meaningful ways
+    // but have non-trivial implementation cost.
     const patterns: {
       [key: string]: Array<{
         code: string
@@ -2164,44 +2554,44 @@ foo
         options?: Partial<ParserOptions>
       }>
     } = {
-      ABRUPT_CLOSING_OF_EMPTY_COMMENT: [
-        {
-          code: '<template><!--></template>',
-          errors: [
-            {
-              type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        },
-        {
-          code: '<template><!---></template>',
-          errors: [
-            {
-              type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        },
-        {
-          code: '<template><!----></template>',
-          errors: []
-        }
-      ],
+      // ABRUPT_CLOSING_OF_EMPTY_COMMENT: [
+      //   {
+      //     code: '<template><!--></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!---></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!----></template>',
+      //     errors: []
+      //   }
+      // ],
       CDATA_IN_HTML_CONTENT: [
         {
           code: '<template><![CDATA[cdata]]></template>',
           errors: [
             {
               type: ErrorCodes.CDATA_IN_HTML_CONTENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
+              loc: { offset: 10, line: 1, column: 11 },
+            },
+          ],
         },
         {
           code: '<template><svg><![CDATA[cdata]]></svg></template>',
-          errors: []
-        }
+          errors: [],
+        },
       ],
       DUPLICATE_ATTRIBUTE: [
         {
@@ -2209,60 +2599,60 @@ foo
           errors: [
             {
               type: ErrorCodes.DUPLICATE_ATTRIBUTE,
-              loc: { offset: 21, line: 1, column: 22 }
-            }
-          ]
-        }
-      ],
-      END_TAG_WITH_ATTRIBUTES: [
-        {
-          code: '<template><div></div id=""></template>',
-          errors: [
-            {
-              type: ErrorCodes.END_TAG_WITH_ATTRIBUTES,
-              loc: { offset: 21, line: 1, column: 22 }
-            }
-          ]
-        }
-      ],
-      END_TAG_WITH_TRAILING_SOLIDUS: [
-        {
-          code: '<template><div></div/></template>',
-          errors: [
-            {
-              type: ErrorCodes.END_TAG_WITH_TRAILING_SOLIDUS,
-              loc: { offset: 20, line: 1, column: 21 }
-            }
-          ]
-        }
+              loc: { offset: 21, line: 1, column: 22 },
+            },
+          ],
+        },
       ],
+      // END_TAG_WITH_ATTRIBUTES: [
+      //   {
+      //     code: '<template><div></div id=""></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.END_TAG_WITH_ATTRIBUTES,
+      //         loc: { offset: 21, line: 1, column: 22 }
+      //       }
+      //     ]
+      //   }
+      // ],
+      // END_TAG_WITH_TRAILING_SOLIDUS: [
+      //   {
+      //     code: '<template><div></div/></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.END_TAG_WITH_TRAILING_SOLIDUS,
+      //         loc: { offset: 20, line: 1, column: 21 }
+      //       }
+      //     ]
+      //   }
+      // ],
       EOF_BEFORE_TAG_NAME: [
         {
           code: '<template><',
           errors: [
             {
               type: ErrorCodes.EOF_BEFORE_TAG_NAME,
-              loc: { offset: 11, line: 1, column: 12 }
+              loc: { offset: 11, line: 1, column: 12 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: '<template></',
           errors: [
             {
               type: ErrorCodes.EOF_BEFORE_TAG_NAME,
-              loc: { offset: 12, line: 1, column: 13 }
+              loc: { offset: 12, line: 1, column: 13 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
+        },
       ],
       EOF_IN_CDATA: [
         {
@@ -2270,35 +2660,35 @@ foo
           errors: [
             {
               type: ErrorCodes.EOF_IN_CDATA,
-              loc: { offset: 29, line: 1, column: 30 }
+              loc: { offset: 29, line: 1, column: 30 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 10, line: 1, column: 11 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: '<template><svg><![CDATA[',
           errors: [
             {
               type: ErrorCodes.EOF_IN_CDATA,
-              loc: { offset: 24, line: 1, column: 25 }
+              loc: { offset: 24, line: 1, column: 25 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 10, line: 1, column: 11 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
+        },
       ],
       EOF_IN_COMMENT: [
         {
@@ -2306,456 +2696,408 @@ foo
           errors: [
             {
               type: ErrorCodes.EOF_IN_COMMENT,
-              loc: { offset: 21, line: 1, column: 22 }
+              loc: { offset: 21, line: 1, column: 22 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: '<template><!--',
           errors: [
             {
               type: ErrorCodes.EOF_IN_COMMENT,
-              loc: { offset: 14, line: 1, column: 15 }
+              loc: { offset: 14, line: 1, column: 15 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
-        // Bogus comments don't throw eof-in-comment error.
-        // https://html.spec.whatwg.org/multipage/parsing.html#bogus-comment-state
-        {
-          code: '<template><!',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        },
-        {
-          code: '<template><!-',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        },
-        {
-          code: '<template><!abc',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
-      ],
-      EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT: [
-        {
-          code: "<script><!--console.log('hello')",
-          errors: [
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            },
-            {
-              type: ErrorCodes.EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT,
-              loc: { offset: 32, line: 1, column: 33 }
-            }
-          ]
-        },
-        {
-          code: "<script>console.log('hello')",
-          errors: [
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
+        // // Bogus comments don't throw eof-in-comment error.
+        // // https://html.spec.whatwg.org/multipage/parsing.html#bogus-comment-state
+        // {
+        //   code: '<template><!',
+        //   errors: [
+        //     {
+        //       type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+        //       loc: { offset: 10, line: 1, column: 11 }
+        //     },
+        //     {
+        //       type: ErrorCodes.X_MISSING_END_TAG,
+        //       loc: { offset: 0, line: 1, column: 1 }
+        //     }
+        //   ]
+        // },
+        // {
+        //   code: '<template><!-',
+        //   errors: [
+        //     {
+        //       type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+        //       loc: { offset: 10, line: 1, column: 11 }
+        //     },
+        //     {
+        //       type: ErrorCodes.X_MISSING_END_TAG,
+        //       loc: { offset: 0, line: 1, column: 1 }
+        //     }
+        //   ]
+        // },
+        // {
+        //   code: '<template><!abc',
+        //   errors: [
+        //     {
+        //       type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+        //       loc: { offset: 10, line: 1, column: 11 }
+        //     },
+        //     {
+        //       type: ErrorCodes.X_MISSING_END_TAG,
+        //       loc: { offset: 0, line: 1, column: 1 }
+        //     }
+        //   ]
+        // }
       ],
+      // EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT: [
+      //   {
+      //     code: "<script><!--console.log('hello')",
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.X_MISSING_END_TAG,
+      //         loc: { offset: 0, line: 1, column: 1 }
+      //       },
+      //       {
+      //         type: ErrorCodes.EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT,
+      //         loc: { offset: 32, line: 1, column: 33 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: "<script>console.log('hello')",
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.X_MISSING_END_TAG,
+      //         loc: { offset: 0, line: 1, column: 1 }
+      //       }
+      //     ]
+      //   }
+      // ],
       EOF_IN_TAG: [
         {
           code: '<template><div',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 14, line: 1, column: 15 }
+              loc: { offset: 14, line: 1, column: 15 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div ',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 15, line: 1, column: 16 }
+              loc: { offset: 15, line: 1, column: 16 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 17, line: 1, column: 18 }
+              loc: { offset: 17, line: 1, column: 18 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id ',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 18, line: 1, column: 19 }
+              loc: { offset: 18, line: 1, column: 19 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id =',
           errors: [
-            {
-              type: ErrorCodes.MISSING_ATTRIBUTE_VALUE,
-              loc: { offset: 19, line: 1, column: 20 }
-            },
+            // {
+            //   type: ErrorCodes.MISSING_ATTRIBUTE_VALUE,
+            //   loc: { offset: 19, line: 1, column: 20 }
+            // },
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 19, line: 1, column: 20 }
+              loc: { offset: 19, line: 1, column: 20 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: "<template><div id='abc",
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 22, line: 1, column: 23 }
+              loc: { offset: 22, line: 1, column: 23 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id="abc',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 22, line: 1, column: 23 }
+              loc: { offset: 22, line: 1, column: 23 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: "<template><div id='abc'",
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 23, line: 1, column: 24 }
+              loc: { offset: 23, line: 1, column: 24 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id="abc"',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 23, line: 1, column: 24 }
+              loc: { offset: 23, line: 1, column: 24 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id=abc',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 21, line: 1, column: 22 }
+              loc: { offset: 21, line: 1, column: 22 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: "<template><div id='abc'/",
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
-              loc: { offset: 23, line: 1, column: 24 }
+              loc: { offset: 23, line: 1, column: 24 },
             },
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 24, line: 1, column: 25 }
+              loc: { offset: 24, line: 1, column: 25 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id="abc"/',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
-              loc: { offset: 23, line: 1, column: 24 }
+              loc: { offset: 23, line: 1, column: 24 },
             },
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 24, line: 1, column: 25 }
+              loc: { offset: 24, line: 1, column: 25 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id=abc /',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
-              loc: { offset: 22, line: 1, column: 23 }
+              loc: { offset: 22, line: 1, column: 23 },
             },
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 23, line: 1, column: 24 }
+              loc: { offset: 23, line: 1, column: 24 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<div></div',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        }
-      ],
-      INCORRECTLY_CLOSED_COMMENT: [
-        {
-          code: '<template><!--comment--!></template>',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_CLOSED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        }
-      ],
-      INCORRECTLY_OPENED_COMMENT: [
-        {
-          code: '<template><!></template>',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        },
-        {
-          code: '<template><!-></template>',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        },
-        {
-          code: '<template><!ELEMENT br EMPTY></template>',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        },
-        // Just ignore doctype.
-        {
-          code: '<!DOCTYPE html>',
-          errors: []
-        }
-      ],
-      INVALID_FIRST_CHARACTER_OF_TAG_NAME: [
-        {
-          code: '<template>a < b</template>',
-          errors: [
-            {
-              type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
-              loc: { offset: 13, line: 1, column: 14 }
-            }
-          ]
-        },
-        {
-          code: '<template><�></template>',
-          errors: [
-            {
-              type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
-              loc: { offset: 11, line: 1, column: 12 }
-            }
-          ]
-        },
-        {
-          code: '<template>a </ b</template>',
-          errors: [
-            {
-              type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
-              loc: { offset: 14, line: 1, column: 15 }
+              loc: { offset: 10, line: 1, column: 11 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
-        {
-          code: '<template></�></template>',
-          errors: [
-            {
-              type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
-              loc: { offset: 12, line: 1, column: 13 }
-            }
-          ]
-        },
-        // Don't throw invalid-first-character-of-tag-name in interpolation
-        {
-          code: '<template>{{a < b}}</template>',
-          errors: []
-        }
       ],
+      // INCORRECTLY_CLOSED_COMMENT: [
+      //   {
+      //     code: '<template><!--comment--!></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INCORRECTLY_CLOSED_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   }
+      // ],
+      // INCORRECTLY_OPENED_COMMENT: [
+      //   {
+      //     code: '<template><!></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!-></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!ELEMENT br EMPTY></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   },
+      //   // Just ignore doctype.
+      //   {
+      //     code: '<!DOCTYPE html>',
+      //     errors: []
+      //   }
+      // ],
+      // INVALID_FIRST_CHARACTER_OF_TAG_NAME: [
+      //   {
+      //     code: '<template>a < b</template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
+      //         loc: { offset: 13, line: 1, column: 14 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><�></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
+      //         loc: { offset: 11, line: 1, column: 12 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template>a </ b</template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
+      //         loc: { offset: 14, line: 1, column: 15 }
+      //       },
+      //       {
+      //         type: ErrorCodes.X_MISSING_END_TAG,
+      //         loc: { offset: 0, line: 1, column: 1 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template></�></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
+      //         loc: { offset: 12, line: 1, column: 13 }
+      //       }
+      //     ]
+      //   },
+      //   // Don't throw invalid-first-character-of-tag-name in interpolation
+      //   {
+      //     code: '<template>{{a < b}}</template>',
+      //     errors: []
+      //   }
+      // ],
       MISSING_ATTRIBUTE_VALUE: [
         {
           code: '<template><div id=></div></template>',
           errors: [
             {
               type: ErrorCodes.MISSING_ATTRIBUTE_VALUE,
-              loc: { offset: 18, line: 1, column: 19 }
-            }
-          ]
+              loc: { offset: 18, line: 1, column: 19 },
+            },
+          ],
         },
         {
           code: '<template><div id= ></div></template>',
           errors: [
             {
               type: ErrorCodes.MISSING_ATTRIBUTE_VALUE,
-              loc: { offset: 19, line: 1, column: 20 }
-            }
-          ]
+              loc: { offset: 19, line: 1, column: 20 },
+            },
+          ],
         },
         {
           code: '<template><div id= /></div></template>',
-          errors: []
-        }
+          errors: [],
+        },
       ],
       MISSING_END_TAG_NAME: [
         {
@@ -2763,106 +3105,106 @@ foo
           errors: [
             {
               type: ErrorCodes.MISSING_END_TAG_NAME,
-              loc: { offset: 12, line: 1, column: 13 }
-            }
-          ]
-        }
-      ],
-      MISSING_WHITESPACE_BETWEEN_ATTRIBUTES: [
-        {
-          code: '<template><div id="foo"class="bar"></div></template>',
-          errors: [
-            {
-              type: ErrorCodes.MISSING_WHITESPACE_BETWEEN_ATTRIBUTES,
-              loc: { offset: 23, line: 1, column: 24 }
-            }
-          ]
-        },
-        // CR doesn't appear in tokenization phase, but all CR are removed in preprocessing.
-        // https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream
-        {
-          code: '<template><div id="foo"\r\nclass="bar"></div></template>',
-          errors: []
-        }
-      ],
-      NESTED_COMMENT: [
-        {
-          code: '<template><!--a<!--b--></template>',
-          errors: [
-            {
-              type: ErrorCodes.NESTED_COMMENT,
-              loc: { offset: 15, line: 1, column: 16 }
-            }
-          ]
-        },
-        {
-          code: '<template><!--a<!--b<!--c--></template>',
-          errors: [
-            {
-              type: ErrorCodes.NESTED_COMMENT,
-              loc: { offset: 15, line: 1, column: 16 }
+              loc: { offset: 12, line: 1, column: 13 },
             },
-            {
-              type: ErrorCodes.NESTED_COMMENT,
-              loc: { offset: 20, line: 1, column: 21 }
-            }
-          ]
+          ],
         },
-        {
-          code: '<template><!--a<!--b<!----></template>',
-          errors: [
-            {
-              type: ErrorCodes.NESTED_COMMENT,
-              loc: { offset: 15, line: 1, column: 16 }
-            }
-          ]
-        },
-        {
-          code: '<template><!--a<!--></template>',
-          errors: []
-        },
-        {
-          code: '<template><!--a<!--',
-          errors: [
-            {
-              type: ErrorCodes.EOF_IN_COMMENT,
-              loc: { offset: 19, line: 1, column: 20 }
-            },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
       ],
+      // MISSING_WHITESPACE_BETWEEN_ATTRIBUTES: [
+      //   {
+      //     code: '<template><div id="foo"class="bar"></div></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.MISSING_WHITESPACE_BETWEEN_ATTRIBUTES,
+      //         loc: { offset: 23, line: 1, column: 24 }
+      //       }
+      //     ]
+      //   },
+      //   // CR doesn't appear in tokenization phase, but all CR are removed in preprocessing.
+      //   // https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream
+      //   {
+      //     code: '<template><div id="foo"\r\nclass="bar"></div></template>',
+      //     errors: []
+      //   }
+      // ],
+      // NESTED_COMMENT: [
+      //   {
+      //     code: '<template><!--a<!--b--></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.NESTED_COMMENT,
+      //         loc: { offset: 15, line: 1, column: 16 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!--a<!--b<!--c--></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.NESTED_COMMENT,
+      //         loc: { offset: 15, line: 1, column: 16 }
+      //       },
+      //       {
+      //         type: ErrorCodes.NESTED_COMMENT,
+      //         loc: { offset: 20, line: 1, column: 21 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!--a<!--b<!----></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.NESTED_COMMENT,
+      //         loc: { offset: 15, line: 1, column: 16 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!--a<!--></template>',
+      //     errors: []
+      //   },
+      //   {
+      //     code: '<template><!--a<!--',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.EOF_IN_COMMENT,
+      //         loc: { offset: 19, line: 1, column: 20 }
+      //       },
+      //       {
+      //         type: ErrorCodes.X_MISSING_END_TAG,
+      //         loc: { offset: 0, line: 1, column: 1 }
+      //       }
+      //     ]
+      //   }
+      // ],
       UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME: [
         {
           code: "<template><div a\"bc=''></div></template>",
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
-              loc: { offset: 16, line: 1, column: 17 }
-            }
-          ]
+              loc: { offset: 16, line: 1, column: 17 },
+            },
+          ],
         },
         {
           code: "<template><div a'bc=''></div></template>",
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
-              loc: { offset: 16, line: 1, column: 17 }
-            }
-          ]
+              loc: { offset: 16, line: 1, column: 17 },
+            },
+          ],
         },
         {
           code: "<template><div a<bc=''></div></template>",
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
-              loc: { offset: 16, line: 1, column: 17 }
-            }
-          ]
-        }
+              loc: { offset: 16, line: 1, column: 17 },
+            },
+          ],
+        },
       ],
       UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE: [
         {
@@ -2870,46 +3212,46 @@ foo
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-              loc: { offset: 22, line: 1, column: 23 }
-            }
-          ]
+              loc: { offset: 22, line: 1, column: 23 },
+            },
+          ],
         },
         {
           code: "<template><div foo=bar'></div></template>",
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-              loc: { offset: 22, line: 1, column: 23 }
-            }
-          ]
+              loc: { offset: 22, line: 1, column: 23 },
+            },
+          ],
         },
         {
           code: '<template><div foo=bar<div></div></template>',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-              loc: { offset: 22, line: 1, column: 23 }
-            }
-          ]
+              loc: { offset: 22, line: 1, column: 23 },
+            },
+          ],
         },
         {
           code: '<template><div foo=bar=baz></div></template>',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-              loc: { offset: 22, line: 1, column: 23 }
-            }
-          ]
+              loc: { offset: 22, line: 1, column: 23 },
+            },
+          ],
         },
         {
           code: '<template><div foo=bar`></div></template>',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-              loc: { offset: 22, line: 1, column: 23 }
-            }
-          ]
-        }
+              loc: { offset: 22, line: 1, column: 23 },
+            },
+          ],
+        },
       ],
       UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME: [
         {
@@ -2917,19 +3259,19 @@ foo
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME,
-              loc: { offset: 15, line: 1, column: 16 }
-            }
-          ]
+              loc: { offset: 15, line: 1, column: 16 },
+            },
+          ],
         },
         {
           code: '<template><div =></div></template>',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME,
-              loc: { offset: 15, line: 1, column: 16 }
-            }
-          ]
-        }
+              loc: { offset: 15, line: 1, column: 16 },
+            },
+          ],
+        },
       ],
       UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME: [
         {
@@ -2937,10 +3279,10 @@ foo
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME,
-              loc: { offset: 11, line: 1, column: 12 }
-            }
-          ]
-        }
+              loc: { offset: 11, line: 1, column: 12 },
+            },
+          ],
+        },
       ],
       UNEXPECTED_SOLIDUS_IN_TAG: [
         {
@@ -2948,10 +3290,10 @@ foo
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
-              loc: { offset: 16, line: 1, column: 17 }
-            }
-          ]
-        }
+              loc: { offset: 16, line: 1, column: 17 },
+            },
+          ],
+        },
       ],
       X_INVALID_END_TAG: [
         {
@@ -2959,39 +3301,52 @@ foo
           errors: [
             {
               type: ErrorCodes.X_INVALID_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
+              loc: { offset: 10, line: 1, column: 11 },
+            },
+          ],
         },
         {
           code: '<template></div></div></template>',
           errors: [
             {
               type: ErrorCodes.X_INVALID_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 10, line: 1, column: 11 },
             },
             {
               type: ErrorCodes.X_INVALID_END_TAG,
-              loc: { offset: 16, line: 1, column: 17 }
-            }
-          ]
+              loc: { offset: 16, line: 1, column: 17 },
+            },
+          ],
+        },
+        {
+          code: '<template>a </ b</template>',
+          errors: [
+            {
+              type: ErrorCodes.X_INVALID_END_TAG,
+              loc: { offset: 12, line: 1, column: 13 },
+            },
+            {
+              type: ErrorCodes.X_MISSING_END_TAG,
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: "<template>{{'</div>'}}</template>",
-          errors: []
+          errors: [],
         },
         {
           code: '<textarea></div></textarea>',
-          errors: []
+          errors: [],
         },
         {
           code: '<svg><![CDATA[</div>]]></svg>',
-          errors: []
+          errors: [],
         },
         {
           code: '<svg><!--</div>--></svg>',
-          errors: []
-        }
+          errors: [],
+        },
       ],
       X_MISSING_END_TAG: [
         {
@@ -2999,23 +3354,23 @@ foo
           errors: [
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
+              loc: { offset: 10, line: 1, column: 11 },
+            },
+          ],
         },
         {
           code: '<template><div>',
           errors: [
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 10, line: 1, column: 11 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
+        },
       ],
       X_MISSING_INTERPOLATION_END: [
         {
@@ -3023,23 +3378,36 @@ foo
           errors: [
             {
               type: ErrorCodes.X_MISSING_INTERPOLATION_END,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: '{{',
           errors: [
             {
               type: ErrorCodes.X_MISSING_INTERPOLATION_END,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
+        },
+        {
+          code: '<div>{{ foo</div>',
+          errors: [
+            {
+              type: ErrorCodes.X_MISSING_INTERPOLATION_END,
+              loc: { offset: 5, line: 1, column: 6 },
+            },
+            {
+              type: ErrorCodes.X_MISSING_END_TAG,
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: '{{}}',
-          errors: []
-        }
+          errors: [],
+        },
       ],
       X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END: [
         {
@@ -3047,11 +3415,11 @@ foo
           errors: [
             {
               type: ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END,
-              loc: { offset: 15, line: 1, column: 16 }
-            }
-          ]
-        }
-      ]
+              loc: { offset: 15, line: 1, column: 16 },
+            },
+          ],
+        },
+      ],
     }
 
     for (const key of Object.keys(patterns)) {
@@ -3060,41 +3428,26 @@ foo
           test(
             code.replace(
               /[\r\n]/g,
-              c => `\\x0${c.codePointAt(0)!.toString(16)};`
+              c => `\\x0${c.codePointAt(0)!.toString(16)};`,
             ),
             () => {
               const spy = vi.fn()
               const ast = baseParse(code, {
-                getNamespace: (tag, parent) => {
-                  const ns = parent ? parent.ns : Namespaces.HTML
-                  if (ns === Namespaces.HTML) {
-                    if (tag === 'svg') {
-                      return (Namespaces.HTML + 1) as any
-                    }
-                  }
-                  return ns
-                },
-                getTextMode: ({ tag }) => {
-                  if (tag === 'textarea') {
-                    return TextModes.RCDATA
-                  }
-                  if (tag === 'script') {
-                    return TextModes.RAWTEXT
-                  }
-                  return TextModes.DATA
-                },
+                parseMode: 'html',
+                getNamespace: tag =>
+                  tag === 'svg' ? Namespaces.SVG : Namespaces.HTML,
                 ...options,
-                onError: spy
+                onError: spy,
               })
 
               expect(
                 spy.mock.calls.map(([err]) => ({
                   type: err.code,
-                  loc: err.loc.start
-                }))
+                  loc: err.loc.start,
+                })),
               ).toMatchObject(errors)
               expect(ast).toMatchSnapshot()
-            }
+            },
           )
         }
       })
diff --git a/packages/compiler-core/__tests__/scopeId.spec.ts b/packages/compiler-core/__tests__/scopeId.spec.ts
index 5f7ea0d2e..7d1d27e11 100644
--- a/packages/compiler-core/__tests__/scopeId.spec.ts
+++ b/packages/compiler-core/__tests__/scopeId.spec.ts
@@ -1,7 +1,4 @@
 import { baseCompile } from '../src/compile'
-import { PUSH_SCOPE_ID, POP_SCOPE_ID } from '../src/runtimeHelpers'
-import { PatchFlags } from '@vue/shared'
-import { genFlagText } from './testUtils'
 
 /**
  * Ensure all slot functions are wrapped with _withCtx
@@ -18,7 +15,7 @@ describe('scopeId compiler support', () => {
   test('should wrap default slot', () => {
     const { code } = baseCompile(`<Child><div/></Child>`, {
       mode: 'module',
-      scopeId: 'test'
+      scopeId: 'test',
     })
     expect(code).toMatch(`default: _withCtx(() => [`)
     expect(code).toMatchSnapshot()
@@ -33,8 +30,8 @@ describe('scopeId compiler support', () => {
       `,
       {
         mode: 'module',
-        scopeId: 'test'
-      }
+        scopeId: 'test',
+      },
     )
     expect(code).toMatch(`foo: _withCtx(({ msg }) => [`)
     expect(code).toMatch(`bar: _withCtx(() => [`)
@@ -50,35 +47,11 @@ describe('scopeId compiler support', () => {
       `,
       {
         mode: 'module',
-        scopeId: 'test'
-      }
+        scopeId: 'test',
+      },
     )
     expect(code).toMatch(/name: "foo",\s+fn: _withCtx\(/)
     expect(code).toMatch(/name: i,\s+fn: _withCtx\(/)
     expect(code).toMatchSnapshot()
   })
-
-  test('should push scopeId for hoisted nodes', () => {
-    const { ast, code } = baseCompile(
-      `<div><div>hello</div>{{ foo }}<div>world</div></div>`,
-      {
-        mode: 'module',
-        scopeId: 'test',
-        hoistStatic: true
-      }
-    )
-    expect(ast.helpers).toContain(PUSH_SCOPE_ID)
-    expect(ast.helpers).toContain(POP_SCOPE_ID)
-    expect(ast.hoists.length).toBe(2)
-    ;[
-      `const _withScopeId = n => (_pushScopeId("test"),n=n(),_popScopeId(),n)`,
-      `const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", ${genFlagText(
-        PatchFlags.HOISTED
-      )}))`,
-      `const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", ${genFlagText(
-        PatchFlags.HOISTED
-      )}))`
-    ].forEach(c => expect(code).toMatch(c))
-    expect(code).toMatchSnapshot()
-  })
 })
diff --git a/packages/compiler-core/__tests__/testUtils.ts b/packages/compiler-core/__tests__/testUtils.ts
index 23a29a777..a2525e0ca 100644
--- a/packages/compiler-core/__tests__/testUtils.ts
+++ b/packages/compiler-core/__tests__/testUtils.ts
@@ -1,17 +1,19 @@
 import {
-  NodeTypes,
-  ElementNode,
-  locStub,
-  Namespaces,
+  type ElementNode,
   ElementTypes,
-  VNodeCall
+  Namespaces,
+  NodeTypes,
+  type Property,
+  type SimpleExpressionNode,
+  type VNodeCall,
+  locStub,
 } from '../src'
 import {
-  isString,
-  PatchFlags,
   PatchFlagNames,
+  type PatchFlags,
+  type ShapeFlags,
   isArray,
-  ShapeFlags
+  isString,
 } from '@vue/shared'
 
 const leadingBracketRE = /^\[/
@@ -22,7 +24,10 @@ const bracketsRE = /^\[|\]$/g
 // e.g.
 // - createObjectMatcher({ 'foo': '[bar]' }) matches { foo: bar }
 // - createObjectMatcher({ '[foo]': 'bar' }) matches { [foo]: "bar" }
-export function createObjectMatcher(obj: Record<string, any>) {
+export function createObjectMatcher(obj: Record<string, any>): {
+  type: NodeTypes
+  properties: Partial<Property>[]
+} {
   return {
     type: NodeTypes.JS_OBJECT_EXPRESSION,
     properties: Object.keys(obj).map(key => ({
@@ -30,16 +35,16 @@ export function createObjectMatcher(obj: Record<string, any>) {
       key: {
         type: NodeTypes.SIMPLE_EXPRESSION,
         content: key.replace(bracketsRE, ''),
-        isStatic: !leadingBracketRE.test(key)
-      },
+        isStatic: !leadingBracketRE.test(key),
+      } as SimpleExpressionNode,
       value: isString(obj[key])
         ? {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: obj[key].replace(bracketsRE, ''),
-            isStatic: !leadingBracketRE.test(obj[key])
+            isStatic: !leadingBracketRE.test(obj[key]),
           }
-        : obj[key]
-    }))
+        : obj[key],
+    })),
   }
 }
 
@@ -48,7 +53,7 @@ export function createElementWithCodegen(
   props?: VNodeCall['props'],
   children?: VNodeCall['children'],
   patchFlag?: VNodeCall['patchFlag'],
-  dynamicProps?: VNodeCall['dynamicProps']
+  dynamicProps?: VNodeCall['dynamicProps'],
 ): ElementNode {
   return {
     type: NodeTypes.ELEMENT,
@@ -56,7 +61,6 @@ export function createElementWithCodegen(
     ns: Namespaces.HTML,
     tag: 'div',
     tagType: ElementTypes.ELEMENT,
-    isSelfClosing: false,
     props: [],
     children: [],
     codegenNode: {
@@ -70,16 +74,16 @@ export function createElementWithCodegen(
       isBlock: false,
       disableTracking: false,
       isComponent: false,
-      loc: locStub
-    }
+      loc: locStub,
+    },
   }
 }
 
 type Flags = PatchFlags | ShapeFlags
 export function genFlagText(
   flag: Flags | Flags[],
-  names: { [k: number]: string } = PatchFlagNames
-) {
+  names: { [k: number]: string } = PatchFlagNames,
+): string {
   if (isArray(flag)) {
     let f = 0
     flag.forEach(ff => {
diff --git a/packages/compiler-core/__tests__/transform.spec.ts b/packages/compiler-core/__tests__/transform.spec.ts
index 042865efb..0946d3648 100644
--- a/packages/compiler-core/__tests__/transform.spec.ts
+++ b/packages/compiler-core/__tests__/transform.spec.ts
@@ -1,25 +1,24 @@
-import { baseParse } from '../src/parse'
-import { transform, NodeTransform } from '../src/transform'
+import { baseParse } from '../src/parser'
+import { type NodeTransform, transform } from '../src/transform'
 import {
-  ElementNode,
+  type DirectiveNode,
+  type ElementNode,
+  type ExpressionNode,
   NodeTypes,
-  DirectiveNode,
-  ExpressionNode,
-  VNodeCall
+  type VNodeCall,
 } from '../src/ast'
 import { ErrorCodes, createCompilerError } from '../src/errors'
 import {
-  TO_DISPLAY_STRING,
+  CREATE_COMMENT,
   FRAGMENT,
   RENDER_SLOT,
-  CREATE_COMMENT
+  TO_DISPLAY_STRING,
 } from '../src/runtimeHelpers'
 import { transformIf } from '../src/transforms/vIf'
 import { transformFor } from '../src/transforms/vFor'
 import { transformElement } from '../src/transforms/transformElement'
 import { transformSlotOutlet } from '../src/transforms/transformSlotOutlet'
 import { transformText } from '../src/transforms/transformText'
-import { genFlagText } from './testUtils'
 import { PatchFlags } from '@vue/shared'
 
 describe('compiler: transform', () => {
@@ -34,7 +33,7 @@ describe('compiler: transform', () => {
     }
 
     transform(ast, {
-      nodeTransforms: [plugin]
+      nodeTransforms: [plugin],
     })
 
     const div = ast.children[0] as ElementNode
@@ -43,29 +42,29 @@ describe('compiler: transform', () => {
       ast,
       {
         parent: null,
-        currentNode: ast
-      }
+        currentNode: ast,
+      },
     ])
     expect(calls[1]).toMatchObject([
       div,
       {
         parent: ast,
-        currentNode: div
-      }
+        currentNode: div,
+      },
     ])
     expect(calls[2]).toMatchObject([
       div.children[0],
       {
         parent: div,
-        currentNode: div.children[0]
-      }
+        currentNode: div.children[0],
+      },
     ])
     expect(calls[3]).toMatchObject([
       div.children[1],
       {
         parent: div,
-        currentNode: div.children[1]
-      }
+        currentNode: div.children[1],
+      },
     ])
   })
 
@@ -81,16 +80,16 @@ describe('compiler: transform', () => {
               {
                 type: NodeTypes.TEXT,
                 content: 'hello',
-                isEmpty: false
-              }
-            ]
-          })
+                isEmpty: false,
+              },
+            ],
+          }),
         )
       }
     }
     const spy = vi.fn(plugin)
     transform(ast, {
-      nodeTransforms: [spy]
+      nodeTransforms: [spy],
     })
 
     expect(ast.children.length).toBe(2)
@@ -115,7 +114,7 @@ describe('compiler: transform', () => {
     }
     const spy = vi.fn(plugin)
     transform(ast, {
-      nodeTransforms: [spy]
+      nodeTransforms: [spy],
     })
 
     expect(ast.children.length).toBe(2)
@@ -143,7 +142,7 @@ describe('compiler: transform', () => {
     }
     const spy = vi.fn(plugin)
     transform(ast, {
-      nodeTransforms: [spy]
+      nodeTransforms: [spy],
     })
 
     expect(ast.children.length).toBe(1)
@@ -170,7 +169,7 @@ describe('compiler: transform', () => {
     }
     const spy = vi.fn(plugin)
     transform(ast, {
-      nodeTransforms: [spy]
+      nodeTransforms: [spy],
     })
 
     expect(ast.children.length).toBe(1)
@@ -194,31 +193,51 @@ describe('compiler: transform', () => {
       }
     }
     transform(ast, {
-      nodeTransforms: [mock]
+      nodeTransforms: [mock],
     })
     expect(ast.hoists).toMatchObject(hoisted)
     expect((ast as any).children[0].props[0].exp.content).toBe(`_hoisted_1`)
     expect((ast as any).children[1].props[0].exp.content).toBe(`_hoisted_2`)
   })
 
+  test('context.filename and selfName', () => {
+    const ast = baseParse(`<div />`)
+
+    const calls: any[] = []
+    const plugin: NodeTransform = (node, context) => {
+      calls.push({ ...context })
+    }
+
+    transform(ast, {
+      filename: '/the/fileName.vue',
+      nodeTransforms: [plugin],
+    })
+
+    expect(calls.length).toBe(2)
+    expect(calls[1]).toMatchObject({
+      filename: '/the/fileName.vue',
+      selfName: 'FileName',
+    })
+  })
+
   test('onError option', () => {
     const ast = baseParse(`<div/>`)
     const loc = ast.children[0].loc
     const plugin: NodeTransform = (node, context) => {
       context.onError(
-        createCompilerError(ErrorCodes.X_INVALID_END_TAG, node.loc)
+        createCompilerError(ErrorCodes.X_INVALID_END_TAG, node.loc),
       )
     }
     const spy = vi.fn()
     transform(ast, {
       nodeTransforms: [plugin],
-      onError: spy
+      onError: spy,
     })
     expect(spy.mock.calls[0]).toMatchObject([
       {
         code: ErrorCodes.X_INVALID_END_TAG,
-        loc
-      }
+        loc,
+      },
     ])
   })
 
@@ -243,8 +262,8 @@ describe('compiler: transform', () => {
           transformFor,
           transformText,
           transformSlotOutlet,
-          transformElement
-        ]
+          transformElement,
+        ],
       })
       return ast
     }
@@ -253,7 +272,7 @@ describe('compiler: transform', () => {
       tag: VNodeCall['tag'],
       props?: VNodeCall['props'],
       children?: VNodeCall['children'],
-      patchFlag?: VNodeCall['patchFlag']
+      patchFlag?: VNodeCall['patchFlag'],
     ) {
       return {
         type: NodeTypes.VNODE_CALL,
@@ -261,7 +280,7 @@ describe('compiler: transform', () => {
         tag,
         props,
         children,
-        patchFlag
+        patchFlag,
       }
     }
 
@@ -275,8 +294,8 @@ describe('compiler: transform', () => {
       expect(ast.codegenNode).toMatchObject({
         codegenNode: {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: RENDER_SLOT
-        }
+          callee: RENDER_SLOT,
+        },
       })
     })
 
@@ -288,14 +307,14 @@ describe('compiler: transform', () => {
     test('root v-if', () => {
       const ast = transformWithCodegen(`<div v-if="ok" />`)
       expect(ast.codegenNode).toMatchObject({
-        type: NodeTypes.IF
+        type: NodeTypes.IF,
       })
     })
 
     test('root v-for', () => {
       const ast = transformWithCodegen(`<div v-for="i in list" />`)
       expect(ast.codegenNode).toMatchObject({
-        type: NodeTypes.FOR
+        type: NodeTypes.FOR,
       })
     })
 
@@ -303,28 +322,28 @@ describe('compiler: transform', () => {
       const ast = transformWithCodegen(`<div v-foo/>`)
       expect(ast.codegenNode).toMatchObject({
         type: NodeTypes.VNODE_CALL,
-        directives: { type: NodeTypes.JS_ARRAY_EXPRESSION }
+        directives: { type: NodeTypes.JS_ARRAY_EXPRESSION },
       })
     })
 
     test('single text', () => {
       const ast = transformWithCodegen(`hello`)
       expect(ast.codegenNode).toMatchObject({
-        type: NodeTypes.TEXT
+        type: NodeTypes.TEXT,
       })
     })
 
     test('single interpolation', () => {
       const ast = transformWithCodegen(`{{ foo }}`)
       expect(ast.codegenNode).toMatchObject({
-        type: NodeTypes.INTERPOLATION
+        type: NodeTypes.INTERPOLATION,
       })
     })
 
     test('single CompoundExpression', () => {
       const ast = transformWithCodegen(`{{ foo }} bar baz`)
       expect(ast.codegenNode).toMatchObject({
-        type: NodeTypes.COMPOUND_EXPRESSION
+        type: NodeTypes.COMPOUND_EXPRESSION,
       })
     })
 
@@ -336,10 +355,10 @@ describe('compiler: transform', () => {
           undefined,
           [
             { type: NodeTypes.ELEMENT, tag: `div` },
-            { type: NodeTypes.ELEMENT, tag: `div` }
+            { type: NodeTypes.ELEMENT, tag: `div` },
           ] as any,
-          genFlagText(PatchFlags.STABLE_FRAGMENT)
-        )
+          PatchFlags.STABLE_FRAGMENT,
+        ),
       )
     })
 
@@ -352,13 +371,10 @@ describe('compiler: transform', () => {
           [
             { type: NodeTypes.COMMENT },
             { type: NodeTypes.ELEMENT, tag: `div` },
-            { type: NodeTypes.COMMENT }
+            { type: NodeTypes.COMMENT },
           ] as any,
-          genFlagText([
-            PatchFlags.STABLE_FRAGMENT,
-            PatchFlags.DEV_ROOT_FRAGMENT
-          ])
-        )
+          PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+        ),
       )
     })
   })
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/cacheStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/cacheStatic.spec.ts.snap
new file mode 100644
index 000000000..375a0c867
--- /dev/null
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/cacheStatic.spec.ts.snap
@@ -0,0 +1,432 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: cacheStatic transform > cache element with static key 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("div", { key: "foo" }, null, -1 /* HOISTED */)
+    ])))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > cache nested children array 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("p", null, [
+        _createElementVNode("span"),
+        _createElementVNode("span")
+      ], -1 /* HOISTED */),
+      _createElementVNode("p", null, [
+        _createElementVNode("span"),
+        _createElementVNode("span")
+      ], -1 /* HOISTED */)
+    ])))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > cache nested static tree with comments 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("div", null, [
+        _createCommentVNode("comment")
+      ], -1 /* HOISTED */)
+    ])))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > cache siblings including text with common non-hoistable parent 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, createTextVNode: _createTextVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("span", null, null, -1 /* HOISTED */),
+      _createTextVNode("foo"),
+      _createElementVNode("div", null, null, -1 /* HOISTED */)
+    ])))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > cache single children array 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("span", { class: "inline" }, "hello", -1 /* HOISTED */)
+    ])))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > hoist static props for elements with directives 1`] = `
+"const _Vue = Vue
+const { createElementVNode: _createElementVNode } = _Vue
+
+const _hoisted_1 = { id: "foo" }
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { resolveDirective: _resolveDirective, createElementVNode: _createElementVNode, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    const _directive_foo = _resolveDirective("foo")
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      _withDirectives(_createElementVNode("div", _hoisted_1, null, 512 /* NEED_PATCH */), [
+        [_directive_foo]
+      ])
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > hoist static props for elements with dynamic text children 1`] = `
+"const _Vue = Vue
+const { createElementVNode: _createElementVNode } = _Vue
+
+const _hoisted_1 = { id: "foo" }
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      _createElementVNode("div", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > hoist static props for elements with unhoistable children 1`] = `
+"const _Vue = Vue
+const { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue
+
+const _hoisted_1 = { id: "foo" }
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { resolveComponent: _resolveComponent, createVNode: _createVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      _createElementVNode("div", _hoisted_1, [
+        _createVNode(_component_Comp)
+      ])
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > prefixIdentifiers > cache nested static tree with static interpolation 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("span", null, "foo " + _toDisplayString(1) + " " + _toDisplayString(true), -1 /* HOISTED */)
+    ])))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > prefixIdentifiers > cache nested static tree with static prop value 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("span", { foo: 0 }, _toDisplayString(1), -1 /* HOISTED */)
+    ])))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > prefixIdentifiers > clone hoisted array children in v-for + HMR mode 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(1, (i) => {
+        return (_openBlock(), _createElementBlock("div", null, [...(_cache[0] || (_cache[0] = [
+          _createElementVNode("span", { class: "hi" }, null, -1 /* HOISTED */)
+        ]))]))
+      }), 256 /* UNKEYED_FRAGMENT */))
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > prefixIdentifiers > hoist class with static object value 1`] = `
+"const _Vue = Vue
+const { createElementVNode: _createElementVNode } = _Vue
+
+const _hoisted_1 = {
+  class: /*@__PURE__*/_normalizeClass({ foo: true })
+}
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      _createElementVNode("span", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > prefixIdentifiers > should NOT cache SVG with directives 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue
+
+    const _directive_foo = _resolveDirective("foo")
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      _withDirectives((_openBlock(), _createElementBlock("svg", null, _cache[0] || (_cache[0] = [
+        _createElementVNode("path", { d: "M2,3H5.5L12" }, null, -1 /* HOISTED */)
+      ]))), [
+        [_directive_foo]
+      ])
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > prefixIdentifiers > should NOT cache elements with cached handlers + other bindings 1`] = `
+"import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, [
+    _createElementVNode("div", null, [
+      _createElementVNode("div", {
+        class: _normalizeClass({}),
+        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args)))
+      })
+    ])
+  ]))
+}"
+`;
+
+exports[`compiler: cacheStatic transform > prefixIdentifiers > should NOT cache elements with cached handlers 1`] = `
+"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, [
+    _createElementVNode("div", null, [
+      _createElementVNode("div", {
+        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args)))
+      })
+    ])
+  ]))
+}"
+`;
+
+exports[`compiler: cacheStatic transform > prefixIdentifiers > should NOT cache expressions that refer scope variables (2) 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
+        return (_openBlock(), _createElementBlock("p", null, [
+          _createElementVNode("span", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
+        ]))
+      }), 256 /* UNKEYED_FRAGMENT */))
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > prefixIdentifiers > should NOT cache expressions that refer scope variables (v-slot) 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_openBlock(), _createBlock(_component_Comp, null, {
+      default: _withCtx(({ foo }) => [
+        _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
+      ]),
+      _: 1 /* STABLE */
+    }))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > prefixIdentifiers > should NOT cache expressions that refer scope variables 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
+        return (_openBlock(), _createElementBlock("p", null, [
+          _createElementVNode("span", null, _toDisplayString(o), 1 /* TEXT */)
+        ]))
+      }), 256 /* UNKEYED_FRAGMENT */))
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > prefixIdentifiers > should NOT cache keyed template v-for with plain element child 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+        return (_openBlock(), _createElementBlock("span", { key: item }))
+      }), 128 /* KEYED_FRAGMENT */))
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > should NOT cache components 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      _createVNode(_component_Comp)
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > should NOT cache element with dynamic key 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      (_openBlock(), _createElementBlock("div", { key: foo }))
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > should NOT cache element with dynamic props (but hoist the props list) 1`] = `
+"const _Vue = Vue
+const { createElementVNode: _createElementVNode } = _Vue
+
+const _hoisted_1 = ["id"]
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, _hoisted_1)
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > should NOT cache element with dynamic ref 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      _createElementVNode("div", { ref: foo }, null, 512 /* NEED_PATCH */)
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > should cache v-if props/children if static 1`] = `
+"const _Vue = Vue
+const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
+
+const _hoisted_1 = {
+  key: 0,
+  id: "foo"
+}
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      ok
+        ? (_openBlock(), _createElementBlock("div", _hoisted_1, _cache[0] || (_cache[0] = [
+            _createElementVNode("span", null, null, -1 /* HOISTED */)
+          ])))
+        : _createCommentVNode("v-if", true)
+    ]))
+  }
+}"
+`;
+
+exports[`compiler: cacheStatic transform > should hoist v-for children if static 1`] = `
+"const _Vue = Vue
+const { createElementVNode: _createElementVNode } = _Vue
+
+const _hoisted_1 = { id: "foo" }
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
+
+    return (_openBlock(), _createElementBlock("div", null, [
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
+        return (_openBlock(), _createElementBlock("div", _hoisted_1, _cache[0] || (_cache[0] = [
+          _createElementVNode("span", null, null, -1 /* HOISTED */)
+        ])))
+      }), 256 /* UNKEYED_FRAGMENT */))
+    ]))
+  }
+}"
+`;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
deleted file mode 100644
index e67694a9b..000000000
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
+++ /dev/null
@@ -1,458 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`compiler: hoistStatic transform > hoist element with static key 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > hoist nested static tree 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"p\\", null, [
-  /*#__PURE__*/_createElementVNode(\\"span\\"),
-  /*#__PURE__*/_createElementVNode(\\"span\\")
-], -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > hoist nested static tree with comments 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
-
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
-  /*#__PURE__*/_createCommentVNode(\\"comment\\")
-], -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > hoist siblings with common non-hoistable parent 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, null, -1 /* HOISTED */)
-const _hoisted_3 = [
-  _hoisted_1,
-  _hoisted_2
-]
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_3))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > hoist simple element 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > hoist static props for elements with directives 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = { id: \\"foo\\" }
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { resolveDirective: _resolveDirective, createElementVNode: _createElementVNode, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    const _directive_foo = _resolveDirective(\\"foo\\")
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _withDirectives(_createElementVNode(\\"div\\", _hoisted_1, null, 512 /* NEED_PATCH */), [
-        [_directive_foo]
-      ])
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > hoist static props for elements with dynamic text children 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = { id: \\"foo\\" }
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > hoist static props for elements with unhoistable children 1`] = `
-"const _Vue = Vue
-const { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = { id: \\"foo\\" }
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { resolveComponent: _resolveComponent, createVNode: _createVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    const _component_Comp = _resolveComponent(\\"Comp\\")
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"div\\", _hoisted_1, [
-        _createVNode(_component_Comp)
-      ])
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist class with static object value 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = {
-  class: /*#__PURE__*/_normalizeClass({ foo: true })
-}
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested static tree with static interpolation 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, \\"foo \\" + /*#__PURE__*/_toDisplayString(1) + \\" \\" + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested static tree with static prop value 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist SVG with directives 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"path\\", { d: \\"M2,3H5.5L12\\" }, null, -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { createElementVNode: _createElementVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue
-
-    const _directive_foo = _resolveDirective(\\"foo\\")
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _withDirectives((_openBlock(), _createElementBlock(\\"svg\\", null, _hoisted_2)), [
-        [_directive_foo]
-      ])
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers + other bindings 1`] = `
-"import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
-
-export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
-    _createElementVNode(\\"div\\", null, [
-      _createElementVNode(\\"div\\", {
-        class: _normalizeClass({}),
-        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args)))
-      })
-    ])
-  ]))
-}"
-`;
-
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers 1`] = `
-"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
-
-export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
-    _createElementVNode(\\"div\\", null, [
-      _createElementVNode(\\"div\\", {
-        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args)))
-      })
-    ])
-  ]))
-}"
-`;
-
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist expressions that refer scope variables (2) 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
-        return (_openBlock(), _createElementBlock(\\"p\\", null, [
-          _createElementVNode(\\"span\\", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
-        ]))
-      }), 256 /* UNKEYED_FRAGMENT */))
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist expressions that refer scope variables (v-slot) 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
-
-    const _component_Comp = _resolveComponent(\\"Comp\\")
-
-    return (_openBlock(), _createBlock(_component_Comp, null, {
-      default: _withCtx(({ foo }) => [
-        _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
-      ]),
-      _: 1 /* STABLE */
-    }))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist expressions that refer scope variables 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
-        return (_openBlock(), _createElementBlock(\\"p\\", null, [
-          _createElementVNode(\\"span\\", null, _toDisplayString(o), 1 /* TEXT */)
-        ]))
-      }), 256 /* UNKEYED_FRAGMENT */))
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist keyed template v-for with plain element child 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-        return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
-      }), 128 /* KEYED_FRAGMENT */))
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > should NOT hoist components 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    const _component_Comp = _resolveComponent(\\"Comp\\")
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createVNode(_component_Comp)
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > should NOT hoist element with dynamic key 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      (_openBlock(), _createElementBlock(\\"div\\", { key: foo }))
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > should NOT hoist element with dynamic props (but hoist the props list) 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = [\\"id\\"]
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, _hoisted_1)
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > should NOT hoist element with dynamic ref 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"div\\", { ref: foo }, null, 512 /* NEED_PATCH */)
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > should NOT hoist root node 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\"))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > should hoist v-for children if static 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
-
-const _hoisted_1 = { id: \\"foo\\" }
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
-const _hoisted_3 = [
-  _hoisted_2
-]
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
-        return (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3))
-      }), 256 /* UNKEYED_FRAGMENT */))
-    ]))
-  }
-}"
-`;
-
-exports[`compiler: hoistStatic transform > should hoist v-if props/children if static 1`] = `
-"const _Vue = Vue
-const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
-
-const _hoisted_1 = {
-  key: 0,
-  id: \\"foo\\"
-}
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
-const _hoisted_3 = [
-  _hoisted_2
-]
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
-
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      ok
-        ? (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3))
-        : _createCommentVNode(\\"v-if\\", true)
-    ]))
-  }
-}"
-`;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
new file mode 100644
index 000000000..3da778eb6
--- /dev/null
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -0,0 +1,228 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: v-for > codegen > basic v-for 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return (_openBlock(), _createElementBlock("span"))
+    }), 256 /* UNKEYED_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > keyed template v-for 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return (_openBlock(), _createElementBlock(_Fragment, { key: item }, [
+        "hello",
+        _createElementVNode("span")
+      ], 64 /* STABLE_FRAGMENT */))
+    }), 128 /* KEYED_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > keyed v-for 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return (_openBlock(), _createElementBlock("span", { key: item }))
+    }), 128 /* KEYED_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > skipped key 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, __, index) => {
+      return (_openBlock(), _createElementBlock("span"))
+    }), 256 /* UNKEYED_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > skipped value & key 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, __, index) => {
+      return (_openBlock(), _createElementBlock("span"))
+    }), 256 /* UNKEYED_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > skipped value 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, key, index) => {
+      return (_openBlock(), _createElementBlock("span"))
+    }), 256 /* UNKEYED_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > template v-for 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return (_openBlock(), _createElementBlock(_Fragment, null, [
+        "hello",
+        _createElementVNode("span")
+      ], 64 /* STABLE_FRAGMENT */))
+    }), 256 /* UNKEYED_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > template v-for key injection with single child 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return (_openBlock(), _createElementBlock("span", {
+        key: item.id,
+        id: item.id
+      }, null, 8 /* PROPS */, ["id"]))
+    }), 128 /* KEYED_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > template v-for w/ <slot/> 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return _renderSlot($slots, "default")
+    }), 256 /* UNKEYED_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > v-for on <slot/> 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return _renderSlot($slots, "default")
+    }), 256 /* UNKEYED_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > v-for on element with custom directive 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, resolveDirective: _resolveDirective, withDirectives: _withDirectives } = _Vue
+
+    const _directive_foo = _resolveDirective("foo")
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
+      return _withDirectives((_openBlock(), _createElementBlock("div", null, null, 512 /* NEED_PATCH */)), [
+        [_directive_foo]
+      ])
+    }), 256 /* UNKEYED_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > v-for with constant expression 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
+
+    return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (item) => {
+      return _createElementVNode("p", null, _toDisplayString(item), 1 /* TEXT */)
+    }), 64 /* STABLE_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > v-if + v-for 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
+
+    return ok
+      ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
+          return (_openBlock(), _createElementBlock("div"))
+        }), 256 /* UNKEYED_FRAGMENT */))
+      : _createCommentVNode("v-if", true)
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > v-if + v-for on <template> 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
+
+    return ok
+      ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
+          return (_openBlock(), _createElementBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */))
+        }), 256 /* UNKEYED_FRAGMENT */))
+      : _createCommentVNode("v-if", true)
+  }
+}"
+`;
+
+exports[`compiler: v-for > codegen > value + key + index 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, key, index) => {
+      return (_openBlock(), _createElementBlock("span"))
+    }), 256 /* UNKEYED_FRAGMENT */))
+  }
+}"
+`;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
index 434ebcbcf..5a94de5a6 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: expression transform > bindingMetadata > inline mode 1`] = `
 "(_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.props) + \\" \\" + _toDisplayString(_unref(setup)) + \\" \\" + _toDisplayString(setupConst) + \\" \\" + _toDisplayString(_ctx.data) + \\" \\" + _toDisplayString(_ctx.options) + \\" \\" + _toDisplayString(isNaN.value), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.props) + " " + _toDisplayString(_unref(setup)) + " " + _toDisplayString(setupConst) + " " + _toDisplayString(_ctx.data) + " " + _toDisplayString(_ctx.options) + " " + _toDisplayString(isNaN.value), 1 /* TEXT */))
 }"
 `;
 
@@ -10,48 +10,96 @@ exports[`compiler: expression transform > bindingMetadata > non-inline mode 1`]
 "const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
 return function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString($props.props) + \\" \\" + _toDisplayString($setup.setup) + \\" \\" + _toDisplayString($data.data) + \\" \\" + _toDisplayString($options.options) + \\" \\" + _toDisplayString($setup.isNaN), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props.props) + " " + _toDisplayString($setup.setup) + " " + _toDisplayString($data.data) + " " + _toDisplayString($options.options) + " " + _toDisplayString($setup.isNaN), 1 /* TEXT */))
 }"
 `;
 
-exports[`compiler: expression transform > bindingMetadata > should not prefix temp variable of for loop 1`] = `
+exports[`compiler: expression transform > should allow leak of var declarations in for loop 1`] = `
 "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
-return function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createElementBlock(\\"div\\", {
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", {
     onClick: () => {
-          for (let i = 0; i < _ctx.list.length; i++) {
-            _ctx.log(i)
-          }         
+        for (var i = 0; i < _ctx.list.length; i++) {
+          _ctx.log(i)
         }
-  }, null, 8 /* PROPS */, [\\"onClick\\"]))
+        _ctx.error(i)
+      }
+  }, null, 8 /* PROPS */, ["onClick"]))
 }"
 `;
 
-exports[`compiler: expression transform > bindingMetadata > should not prefix temp variable of for...in 1`] = `
+exports[`compiler: expression transform > should not prefix catch block param 1`] = `
 "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
-return function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createElementBlock(\\"div\\", {
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", {
     onClick: () => {
-          for (const x in _ctx.list) {
-            _ctx.log(x)
-          }         
-        }
-  }, null, 8 /* PROPS */, [\\"onClick\\"]))
+         try {} catch (err) { console.error(err) }
+        console.log(_ctx.err)
+      }
+  }, null, 8 /* PROPS */, ["onClick"]))
 }"
 `;
 
-exports[`compiler: expression transform > bindingMetadata > should not prefix temp variable of for...of 1`] = `
+exports[`compiler: expression transform > should not prefix destructured catch block param 1`] = `
 "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
-return function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createElementBlock(\\"div\\", {
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", {
     onClick: () => {
-          for (const x of _ctx.list) {
-            _ctx.log(x)
-          }         
+        try {
+          throw new Error('sup?')
+        } catch ({ message: { length } }) {
+          console.error(length)
         }
-  }, null, 8 /* PROPS */, [\\"onClick\\"]))
+        console.log(_ctx.length)
+      }
+  }, null, 8 /* PROPS */, ["onClick"]))
+}"
+`;
+
+exports[`compiler: expression transform > should not prefix temp variable of for loop 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: () => {
+        for (let i = 0; i < _ctx.list.length; i++) {
+          _ctx.log(i)
+        }
+        _ctx.error(_ctx.i)
+      }
+  }, null, 8 /* PROPS */, ["onClick"]))
+}"
+`;
+
+exports[`compiler: expression transform > should not prefix temp variable of for...in 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: () => {
+        for (const x in _ctx.list) {
+          _ctx.log(x)
+        }
+        _ctx.error(_ctx.x)
+      }
+  }, null, 8 /* PROPS */, ["onClick"]))
+}"
+`;
+
+exports[`compiler: expression transform > should not prefix temp variable of for...of 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: () => {
+        for (const x of _ctx.list) {
+          _ctx.log(x)
+        }
+        _ctx.error(_ctx.x)
+      }
+  }, null, 8 /* PROPS */, ["onClick"]))
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
index 8e716acb8..7fb49ea78 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
@@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
       return (_openBlock(), _createElementBlock(_Fragment, null, [
-        _createTextVNode(\\"foo\\")
+        _createTextVNode("foo")
       ], 64 /* STABLE_FRAGMENT */))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
@@ -23,7 +23,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString } = _Vue
 
-    return _toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz)
+    return _toDisplayString(foo) + " bar " + _toDisplayString(baz)
   }
 }"
 `;
@@ -36,9 +36,9 @@ return function render(_ctx, _cache) {
     const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
-      _createElementVNode(\\"div\\"),
-      _createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div"),
+      _createTextVNode(_toDisplayString(foo) + " bar " + _toDisplayString(baz), 1 /* TEXT */),
+      _createElementVNode("div")
     ], 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -52,11 +52,11 @@ return function render(_ctx, _cache) {
     const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
-      _createElementVNode(\\"div\\"),
-      _createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
-      _createElementVNode(\\"div\\"),
-      _createTextVNode(\\"hello\\"),
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div"),
+      _createTextVNode(_toDisplayString(foo) + " bar " + _toDisplayString(baz), 1 /* TEXT */),
+      _createElementVNode("div"),
+      _createTextVNode("hello"),
+      _createElementVNode("div")
     ], 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -69,9 +69,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue
 
-    const _directive_foo = _resolveDirective(\\"foo\\")
+    const _directive_foo = _resolveDirective("foo")
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"p\\", null, [
+    return _withDirectives((_openBlock(), _createElementBlock("p", null, [
       _createTextVNode(_toDisplayString(foo), 1 /* TEXT */)
     ])), [
       [_directive_foo]
@@ -100,9 +100,9 @@ return function render(_ctx, _cache) {
     const { createElementVNode: _createElementVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
-      _createElementVNode(\\"div\\"),
-      _createTextVNode(\\"hello\\"),
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div"),
+      _createTextVNode("hello"),
+      _createElementVNode("div")
     ], 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -112,6 +112,6 @@ exports[`compiler: transform text > with prefixIdentifiers: true 1`] = `
 "const { toDisplayString: _toDisplayString } = Vue
 
 return function render(_ctx, _cache) {
-  return _toDisplayString(_ctx.foo) + \\" bar \\" + _toDisplayString(_ctx.baz + _ctx.qux)
+  return _toDisplayString(_ctx.foo) + " bar " + _toDisplayString(_ctx.baz + _ctx.qux)
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index 2c38177f1..3da778eb6 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -8,7 +8,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-      return (_openBlock(), _createElementBlock(\\"span\\"))
+      return (_openBlock(), _createElementBlock("span"))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -23,8 +23,8 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
       return (_openBlock(), _createElementBlock(_Fragment, { key: item }, [
-        \\"hello\\",
-        _createElementVNode(\\"span\\")
+        "hello",
+        _createElementVNode("span")
       ], 64 /* STABLE_FRAGMENT */))
     }), 128 /* KEYED_FRAGMENT */))
   }
@@ -39,7 +39,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-      return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
+      return (_openBlock(), _createElementBlock("span", { key: item }))
     }), 128 /* KEYED_FRAGMENT */))
   }
 }"
@@ -53,7 +53,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, __, index) => {
-      return (_openBlock(), _createElementBlock(\\"span\\"))
+      return (_openBlock(), _createElementBlock("span"))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -67,7 +67,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, __, index) => {
-      return (_openBlock(), _createElementBlock(\\"span\\"))
+      return (_openBlock(), _createElementBlock("span"))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -81,7 +81,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, key, index) => {
-      return (_openBlock(), _createElementBlock(\\"span\\"))
+      return (_openBlock(), _createElementBlock("span"))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -96,8 +96,8 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
       return (_openBlock(), _createElementBlock(_Fragment, null, [
-        \\"hello\\",
-        _createElementVNode(\\"span\\")
+        "hello",
+        _createElementVNode("span")
       ], 64 /* STABLE_FRAGMENT */))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
@@ -112,10 +112,10 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-      return (_openBlock(), _createElementBlock(\\"span\\", {
+      return (_openBlock(), _createElementBlock("span", {
         key: item.id,
         id: item.id
-      }, null, 8 /* PROPS */, [\\"id\\"]))
+      }, null, 8 /* PROPS */, ["id"]))
     }), 128 /* KEYED_FRAGMENT */))
   }
 }"
@@ -129,7 +129,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-      return _renderSlot($slots, \\"default\\")
+      return _renderSlot($slots, "default")
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -143,7 +143,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-      return _renderSlot($slots, \\"default\\")
+      return _renderSlot($slots, "default")
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -156,10 +156,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, resolveDirective: _resolveDirective, withDirectives: _withDirectives } = _Vue
 
-    const _directive_foo = _resolveDirective(\\"foo\\")
+    const _directive_foo = _resolveDirective("foo")
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
-      return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
+      return _withDirectives((_openBlock(), _createElementBlock("div", null, null, 512 /* NEED_PATCH */)), [
         [_directive_foo]
       ])
     }), 256 /* UNKEYED_FRAGMENT */))
@@ -175,7 +175,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
 
     return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (item) => {
-      return _createElementVNode(\\"p\\", null, _toDisplayString(item), 1 /* TEXT */)
+      return _createElementVNode("p", null, _toDisplayString(item), 1 /* TEXT */)
     }), 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -190,9 +190,9 @@ return function render(_ctx, _cache) {
 
     return ok
       ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
-          return (_openBlock(), _createElementBlock(\\"div\\"))
+          return (_openBlock(), _createElementBlock("div"))
         }), 256 /* UNKEYED_FRAGMENT */))
-      : _createCommentVNode(\\"v-if\\", true)
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -208,7 +208,7 @@ return function render(_ctx, _cache) {
       ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
           return (_openBlock(), _createElementBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */))
         }), 256 /* UNKEYED_FRAGMENT */))
-      : _createCommentVNode(\\"v-if\\", true)
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -221,7 +221,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, key, index) => {
-      return (_openBlock(), _createElementBlock(\\"span\\"))
+      return (_openBlock(), _createElementBlock("span"))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
index 4da71c3ea..65ee73c46 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -8,8 +8,8 @@ return function render(_ctx, _cache) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
-      : _createCommentVNode(\\"v-if\\", true)
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -23,13 +23,13 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
       ok
-        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
-        : (_openBlock(), _createElementBlock(\\"p\\", { key: 1 })),
+        ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+        : (_openBlock(), _createElementBlock("p", { key: 1 })),
       another
-        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }))
+        ? (_openBlock(), _createElementBlock("div", { key: 2 }))
         : orNot
-          ? (_openBlock(), _createElementBlock(\\"p\\", { key: 3 }))
-          : (_openBlock(), _createElementBlock(\\"p\\", { key: 4 }))
+          ? (_openBlock(), _createElementBlock("p", { key: 3 }))
+          : (_openBlock(), _createElementBlock("p", { key: 4 }))
     ], 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -44,11 +44,11 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
       ok
-        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
-        : _createCommentVNode(\\"v-if\\", true),
+        ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+        : _createCommentVNode("v-if", true),
       orNot
-        ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
-        : _createCommentVNode(\\"v-if\\", true)
+        ? (_openBlock(), _createElementBlock("p", { key: 1 }))
+        : _createCommentVNode("v-if", true)
     ], 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -63,11 +63,11 @@ return function render(_ctx, _cache) {
 
     return ok
       ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
-          _createElementVNode(\\"div\\"),
-          \\"hello\\",
-          _createElementVNode(\\"p\\")
+          _createElementVNode("div"),
+          "hello",
+          _createElementVNode("p")
         ], 64 /* STABLE_FRAGMENT */))
-      : _createCommentVNode(\\"v-if\\", true)
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -80,8 +80,8 @@ return function render(_ctx, _cache) {
     const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? _renderSlot($slots, \\"default\\", { key: 0 })
-      : _createCommentVNode(\\"v-if\\", true)
+      ? _renderSlot($slots, "default", { key: 0 })
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -94,8 +94,8 @@ return function render(_ctx, _cache) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
-      : (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+      : (_openBlock(), _createElementBlock("p", { key: 1 }))
   }
 }"
 `;
@@ -108,10 +108,10 @@ return function render(_ctx, _cache) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
 
     return ok
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }))
       : orNot
-        ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
-        : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [\\"fine\\"], 64 /* STABLE_FRAGMENT */))
+        ? (_openBlock(), _createElementBlock("p", { key: 1 }))
+        : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, ["fine"], 64 /* STABLE_FRAGMENT */))
   }
 }"
 `;
@@ -124,10 +124,10 @@ return function render(_ctx, _cache) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }))
       : orNot
-        ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
-        : _createCommentVNode(\\"v-if\\", true)
+        ? (_openBlock(), _createElementBlock("p", { key: 1 }))
+        : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -140,8 +140,8 @@ return function render(_ctx, _cache) {
     const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? _renderSlot($slots, \\"default\\", { key: 0 })
-      : _createCommentVNode(\\"v-if\\", true)
+      ? _renderSlot($slots, "default", { key: 0 })
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
index 844cd2787..220bc1774 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
@@ -1,44 +1,44 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler: v-memo transform > on component 1`] = `
-"import { resolveComponent as _resolveComponent, createVNode as _createVNode, withMemo as _withMemo, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { resolveComponent as _resolveComponent, createVNode as _createVNode, withMemo as _withMemo, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+  return (_openBlock(), _createElementBlock("div", null, [
     _withMemo([_ctx.x], () => _createVNode(_component_Comp), _cache, 0)
   ]))
 }"
 `;
 
 exports[`compiler: v-memo transform > on normal element 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
-    _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\")), _cache, 0)
+  return (_openBlock(), _createElementBlock("div", null, [
+    _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div")), _cache, 0)
   ]))
 }"
 `;
 
 exports[`compiler: v-memo transform > on root element 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from "vue"
 
 export function render(_ctx, _cache) {
-  return _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\")), _cache, 0)
+  return _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div")), _cache, 0)
 }"
 `;
 
 exports[`compiler: v-memo transform > on template v-for 1`] = `
-"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, isMemoSame as _isMemoSame, withMemo as _withMemo } from \\"vue\\"
+"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, isMemoSame as _isMemoSame, withMemo as _withMemo } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+  return (_openBlock(), _createElementBlock("div", null, [
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
       const _memo = ([x, y === _ctx.z])
       if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
-      const _item = (_openBlock(), _createElementBlock(\\"span\\", { key: x }, \\"foobar\\"))
+      const _item = (_openBlock(), _createElementBlock("span", { key: x }, "foobar"))
       _item.memo = _memo
       return _item
     }, _cache, 0), 128 /* KEYED_FRAGMENT */))
@@ -47,15 +47,15 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler: v-memo transform > on v-for 1`] = `
-"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, isMemoSame as _isMemoSame, withMemo as _withMemo } from \\"vue\\"
+"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, isMemoSame as _isMemoSame, withMemo as _withMemo } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+  return (_openBlock(), _createElementBlock("div", null, [
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
       const _memo = ([x, y === _ctx.z])
       if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
-      const _item = (_openBlock(), _createElementBlock(\\"div\\", { key: x }, [
-        _createElementVNode(\\"span\\", null, \\"foobar\\")
+      const _item = (_openBlock(), _createElementBlock("div", { key: x }, [
+        _createElementVNode("span", null, "foobar")
       ]))
       _item.memo = _memo
       return _item
@@ -65,16 +65,16 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler: v-memo transform > on v-if 1`] = `
-"import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+  return (_openBlock(), _createElementBlock("div", null, [
     (_ctx.ok)
-      ? _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, [
-          _createElementVNode(\\"span\\", null, \\"foo\\"),
-          _createTextVNode(\\"bar\\")
+      ? _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div", { key: 0 }, [
+          _createElementVNode("span", null, "foo"),
+          _createTextVNode("bar")
         ])), _cache, 0)
       : _withMemo([_ctx.x], () => (_openBlock(), _createBlock(_component_Comp, { key: 1 })), _cache, 1)
   ]))
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index 983fe1223..17c4e80b1 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler: transform v-model > compound expression (with prefixIdentifiers) 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"input\\", {
+  return (_openBlock(), _createElementBlock("input", {
     modelValue: _ctx.model[_ctx.index],
-    \\"onUpdate:modelValue\\": $event => ((_ctx.model[_ctx.index]) = $event)
-  }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+    "onUpdate:modelValue": $event => ((_ctx.model[_ctx.index]) = $event)
+  }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
 }"
 `;
 
@@ -18,10 +18,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock("input", {
       modelValue: model[index],
-      \\"onUpdate:modelValue\\": $event => ((model[index]) = $event)
-    }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+      "onUpdate:modelValue": $event => ((model[index]) = $event)
+    }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
   }
 }"
 `;
@@ -33,30 +33,30 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock("input", {
       modelValue: 
  model
 .
 foo 
 ,
-      \\"onUpdate:modelValue\\": $event => ((
+      "onUpdate:modelValue": $event => ((
  model
 .
 foo 
 ) = $event)
-    }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+    }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
   }
 }"
 `;
 
 exports[`compiler: transform v-model > simple expression (with prefixIdentifiers) 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"input\\", {
+  return (_openBlock(), _createElementBlock("input", {
     modelValue: _ctx.model,
-    \\"onUpdate:modelValue\\": $event => ((_ctx.model) = $event)
-  }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+    "onUpdate:modelValue": $event => ((_ctx.model) = $event)
+  }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
 }"
 `;
 
@@ -67,10 +67,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock("input", {
       modelValue: model,
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
   }
 }"
 `;
@@ -82,21 +82,21 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"input\\", {
-      \\"foo-value\\": model,
-      \\"onUpdate:fooValue\\": $event => ((model) = $event)
-    }, null, 40 /* PROPS, NEED_HYDRATION */, [\\"foo-value\\", \\"onUpdate:fooValue\\"]))
+    return (_openBlock(), _createElementBlock("input", {
+      "foo-value": model,
+      "onUpdate:fooValue": $event => ((model) = $event)
+    }, null, 40 /* PROPS, NEED_HYDRATION */, ["foo-value", "onUpdate:fooValue"]))
   }
 }"
 `;
 
 exports[`compiler: transform v-model > with dynamic argument (with prefixIdentifiers) 1`] = `
-"import { normalizeProps as _normalizeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { normalizeProps as _normalizeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
+  return (_openBlock(), _createElementBlock("input", _normalizeProps({
     [_ctx.value]: _ctx.model,
-    [\\"onUpdate:\\" + _ctx.value]: $event => ((_ctx.model) = $event)
+    ["onUpdate:" + _ctx.value]: $event => ((_ctx.model) = $event)
   }), null, 16 /* FULL_PROPS */))
 }"
 `;
@@ -108,9 +108,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { normalizeProps: _normalizeProps, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
+    return (_openBlock(), _createElementBlock("input", _normalizeProps({
       [value]: model,
-      [\\"onUpdate:\\" + value]: $event => ((model) = $event)
+      ["onUpdate:" + value]: $event => ((model) = $event)
     }), null, 16 /* FULL_PROPS */))
   }
 }"
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
index 1246c47fc..3d13c4066 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
 
     return _cache[0] || (
       _setBlockTracking(-1),
-      _cache[0] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+      (_cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"])).cacheIndex = 0,
       _setBlockTracking(1),
       _cache[0]
     )
@@ -24,12 +24,12 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    const _component_Comp = _resolveComponent(\\"Comp\\")
+    const _component_Comp = _resolveComponent("Comp")
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
         _setBlockTracking(-1),
-        _cache[0] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+        (_cache[0] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, ["id"])).cacheIndex = 0,
         _setBlockTracking(1),
         _cache[0]
       )
@@ -45,10 +45,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
         _setBlockTracking(-1),
-        _cache[0] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+        (_cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"])).cacheIndex = 0,
         _setBlockTracking(1),
         _cache[0]
       )
@@ -64,10 +64,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
         _setBlockTracking(-1),
-        _cache[0] = _renderSlot($slots, \\"default\\"),
+        (_cache[0] = _renderSlot($slots, "default")).cacheIndex = 0,
         _setBlockTracking(1),
         _cache[0]
       )
@@ -83,10 +83,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
         _setBlockTracking(-1),
-        _cache[0] = _createElementVNode(\\"div\\"),
+        (_cache[0] = _createElementVNode("div")).cacheIndex = 0,
         _setBlockTracking(1),
         _cache[0]
       )
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
index 0c8e061f9..0d9c0e743 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`compiler: transform component slots > dynamically named slots 1`] = `
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     [_ctx.one]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@@ -18,11 +18,11 @@ exports[`compiler: transform component slots > implicit default slot 1`] = `
 "const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     default: _withCtx(() => [
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div")
     ]),
     _: 1 /* STABLE */
   }))
@@ -33,7 +33,7 @@ exports[`compiler: transform component slots > named slot with v-for w/ prefixId
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     _renderList(_ctx.list, (name) => {
@@ -50,14 +50,14 @@ exports[`compiler: transform component slots > named slot with v-if + prefixIden
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     (_ctx.ok)
       ? {
-          name: \\"one\\",
+          name: "one",
           fn: _withCtx((props) => [_toDisplayString(props)]),
-          key: \\"0\\"
+          key: "0"
         }
       : undefined
   ]), 1024 /* DYNAMIC_SLOTS */))
@@ -71,25 +71,25 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
-    const _component_Comp = _resolveComponent(\\"Comp\\")
+    const _component_Comp = _resolveComponent("Comp")
 
     return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
       ok
         ? {
-            name: \\"one\\",
-            fn: _withCtx(() => [\\"foo\\"]),
-            key: \\"0\\"
+            name: "one",
+            fn: _withCtx(() => ["foo"]),
+            key: "0"
           }
         : orNot
           ? {
-              name: \\"two\\",
-              fn: _withCtx((props) => [\\"bar\\"]),
-              key: \\"1\\"
+              name: "two",
+              fn: _withCtx((props) => ["bar"]),
+              key: "1"
             }
           : {
-              name: \\"one\\",
-              fn: _withCtx(() => [\\"baz\\"]),
-              key: \\"2\\"
+              name: "one",
+              fn: _withCtx(() => ["baz"]),
+              key: "2"
             }
     ]), 1024 /* DYNAMIC_SLOTS */))
   }
@@ -103,14 +103,14 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
-    const _component_Comp = _resolveComponent(\\"Comp\\")
+    const _component_Comp = _resolveComponent("Comp")
 
     return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
       ok
         ? {
-            name: \\"one\\",
-            fn: _withCtx(() => [\\"hello\\"]),
-            key: \\"0\\"
+            name: "one",
+            fn: _withCtx(() => ["hello"]),
+            key: "0"
           }
         : undefined
     ]), 1024 /* DYNAMIC_SLOTS */))
@@ -125,13 +125,13 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
-    const _component_Comp = _resolveComponent(\\"Comp\\")
+    const _component_Comp = _resolveComponent("Comp")
 
     return (_openBlock(), _createBlock(_component_Comp, null, {
-      one: _withCtx(() => [\\"foo\\"]),
+      one: _withCtx(() => ["foo"]),
       default: _withCtx(() => [
-        \\"bar\\",
-        _createElementVNode(\\"span\\")
+        "bar",
+        _createElementVNode("span")
       ]),
       _: 1 /* STABLE */
     }))
@@ -143,8 +143,8 @@ exports[`compiler: transform component slots > nested slots scoping 1`] = `
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Inner = _resolveComponent(\\"Inner\\")
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Inner = _resolveComponent("Inner")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     default: _withCtx(({ foo }) => [
@@ -152,7 +152,7 @@ return function render(_ctx, _cache) {
         default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)]),
         _: 2 /* DYNAMIC */
       }, 1024 /* DYNAMIC_SLOTS */),
-      \\" \\",
+      " ",
       _toDisplayString(foo),
       _toDisplayString(_ctx.bar),
       _toDisplayString(_ctx.baz)
@@ -166,7 +166,7 @@ exports[`compiler: transform component slots > on component dynamically named sl
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     [_ctx.named]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@@ -179,7 +179,7 @@ exports[`compiler: transform component slots > on component named slot 1`] = `
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     named: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@@ -192,7 +192,7 @@ exports[`compiler: transform component slots > on-component default slot 1`] = `
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     default: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@@ -205,7 +205,7 @@ exports[`compiler: transform component slots > template named slots 1`] = `
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@@ -219,13 +219,13 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > imp
 "const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
-    header: _withCtx(() => [\\" Header \\"]),
+    header: _withCtx(() => [" Header "]),
     default: _withCtx(() => [
-      \\" \\",
-      _createElementVNode(\\"p\\")
+      " ",
+      _createElementVNode("p")
     ]),
     _: 1 /* STABLE */
   }))
@@ -236,11 +236,11 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > nam
 "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
-    header: _withCtx(() => [\\" Header \\"]),
-    default: _withCtx(() => [\\" Default \\"]),
+    header: _withCtx(() => [" Header "]),
+    default: _withCtx(() => [" Default "]),
     _: 1 /* STABLE */
   }))
 }"
@@ -250,11 +250,11 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > sho
 "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
-    header: _withCtx(() => [\\" Header \\"]),
-    footer: _withCtx(() => [\\" Footer \\"]),
+    header: _withCtx(() => [" Header "]),
+    footer: _withCtx(() => [" Footer "]),
     _: 1 /* STABLE */
   }))
 }"
diff --git a/packages/compiler-core/__tests__/transforms/cacheStatic.spec.ts b/packages/compiler-core/__tests__/transforms/cacheStatic.spec.ts
new file mode 100644
index 000000000..ab5ed7bae
--- /dev/null
+++ b/packages/compiler-core/__tests__/transforms/cacheStatic.spec.ts
@@ -0,0 +1,767 @@
+import {
+  type CompilerOptions,
+  ConstantTypes,
+  type ElementNode,
+  type ForNode,
+  type IfNode,
+  NodeTypes,
+  type VNodeCall,
+  generate,
+  baseParse as parse,
+  transform,
+} from '../../src'
+import {
+  FRAGMENT,
+  NORMALIZE_CLASS,
+  RENDER_LIST,
+} from '../../src/runtimeHelpers'
+import { transformElement } from '../../src/transforms/transformElement'
+import { transformExpression } from '../../src/transforms/transformExpression'
+import { transformIf } from '../../src/transforms/vIf'
+import { transformFor } from '../../src/transforms/vFor'
+import { transformBind } from '../../src/transforms/vBind'
+import { transformOn } from '../../src/transforms/vOn'
+import { createObjectMatcher } from '../testUtils'
+import { transformText } from '../../src/transforms/transformText'
+import { PatchFlags } from '@vue/shared'
+
+const cachedChildrenArrayMatcher = (
+  tags: string[],
+  needArraySpread = false,
+) => ({
+  type: NodeTypes.JS_CACHE_EXPRESSION,
+  needArraySpread,
+  value: {
+    type: NodeTypes.JS_ARRAY_EXPRESSION,
+    elements: tags.map(tag => {
+      if (tag === '') {
+        return {
+          type: NodeTypes.TEXT_CALL,
+        }
+      } else {
+        return {
+          type: NodeTypes.ELEMENT,
+          codegenNode: {
+            type: NodeTypes.VNODE_CALL,
+            tag: JSON.stringify(tag),
+          },
+        }
+      }
+    }),
+  },
+})
+
+function transformWithCache(template: string, options: CompilerOptions = {}) {
+  const ast = parse(template)
+  transform(ast, {
+    hoistStatic: true,
+    nodeTransforms: [
+      transformIf,
+      transformFor,
+      ...(options.prefixIdentifiers ? [transformExpression] : []),
+      transformElement,
+      transformText,
+    ],
+    directiveTransforms: {
+      on: transformOn,
+      bind: transformBind,
+    },
+    ...options,
+  })
+  expect(ast.codegenNode).toMatchObject({
+    type: NodeTypes.VNODE_CALL,
+    isBlock: true,
+  })
+  return ast
+}
+
+describe('compiler: cacheStatic transform', () => {
+  test('should NOT cache root node', () => {
+    // if the whole tree is static, the root still needs to be a block
+    // so that it's patched in optimized mode to skip children
+    const root = transformWithCache(`<div/>`)
+    expect(root.codegenNode).toMatchObject({
+      type: NodeTypes.VNODE_CALL,
+      tag: `"div"`,
+    })
+    expect(root.cached.length).toBe(0)
+  })
+
+  test('cache root node children', () => {
+    // we don't have access to the root codegenNode during the transform
+    // so we only cache each child individually
+    const root = transformWithCache(
+      `<span class="inline">hello</span><span class="inline">hello</span>`,
+    )
+    expect(root.codegenNode).toMatchObject({
+      type: NodeTypes.VNODE_CALL,
+      children: [
+        { codegenNode: { type: NodeTypes.JS_CACHE_EXPRESSION } },
+        { codegenNode: { type: NodeTypes.JS_CACHE_EXPRESSION } },
+      ],
+    })
+    expect(root.cached.length).toBe(2)
+  })
+
+  test('cache single children array', () => {
+    const root = transformWithCache(
+      `<div><span class="inline">hello</span></div>`,
+    )
+    expect(root.codegenNode).toMatchObject({
+      tag: `"div"`,
+      props: undefined,
+      children: cachedChildrenArrayMatcher(['span']),
+    })
+    expect(root.cached.length).toBe(1)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('cache nested children array', () => {
+    const root = transformWithCache(
+      `<div><p><span/><span/></p><p><span/><span/></p></div>`,
+    )
+    expect((root.codegenNode as VNodeCall).children).toMatchObject(
+      cachedChildrenArrayMatcher(['p', 'p']),
+    )
+    expect(root.cached.length).toBe(1)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('cache nested static tree with comments', () => {
+    const root = transformWithCache(`<div><div><!--comment--></div></div>`)
+    expect((root.codegenNode as VNodeCall).children).toMatchObject(
+      cachedChildrenArrayMatcher(['div']),
+    )
+    expect(root.cached.length).toBe(1)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('cache siblings including text with common non-hoistable parent', () => {
+    const root = transformWithCache(`<div><span/>foo<div/></div>`)
+    expect((root.codegenNode as VNodeCall).children).toMatchObject(
+      cachedChildrenArrayMatcher(['span', '', 'div']),
+    )
+    expect(root.cached.length).toBe(1)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('cache inside default slot', () => {
+    const root = transformWithCache(`<Foo>{{x}}<span/></Foo>`)
+    expect((root.codegenNode as VNodeCall).children).toMatchObject({
+      properties: [
+        {
+          key: { content: 'default' },
+          value: {
+            type: NodeTypes.JS_FUNCTION_EXPRESSION,
+            returns: [
+              {
+                type: NodeTypes.TEXT_CALL,
+              },
+              // first slot child cached
+              {
+                type: NodeTypes.ELEMENT,
+                codegenNode: {
+                  type: NodeTypes.JS_CACHE_EXPRESSION,
+                },
+              },
+            ],
+          },
+        },
+        {
+          /* _ slot flag */
+        },
+      ],
+    })
+  })
+
+  test('cache default slot as a whole', () => {
+    const root = transformWithCache(`<Foo><span/><span/></Foo>`)
+    expect((root.codegenNode as VNodeCall).children).toMatchObject({
+      properties: [
+        {
+          key: { content: 'default' },
+          value: {
+            type: NodeTypes.JS_FUNCTION_EXPRESSION,
+            returns: {
+              type: NodeTypes.JS_CACHE_EXPRESSION,
+              value: {
+                type: NodeTypes.JS_ARRAY_EXPRESSION,
+                elements: [
+                  { type: NodeTypes.ELEMENT },
+                  { type: NodeTypes.ELEMENT },
+                ],
+              },
+            },
+          },
+        },
+        {
+          /* _ slot flag */
+        },
+      ],
+    })
+  })
+
+  test('cache inside named slot', () => {
+    const root = transformWithCache(
+      `<Foo><template #foo>{{x}}<span/></template></Foo>`,
+    )
+    expect((root.codegenNode as VNodeCall).children).toMatchObject({
+      properties: [
+        {
+          key: { content: 'foo' },
+          value: {
+            type: NodeTypes.JS_FUNCTION_EXPRESSION,
+            returns: [
+              {
+                type: NodeTypes.TEXT_CALL,
+              },
+              // first slot child cached
+              {
+                type: NodeTypes.ELEMENT,
+                codegenNode: {
+                  type: NodeTypes.JS_CACHE_EXPRESSION,
+                },
+              },
+            ],
+          },
+        },
+        {
+          /* _ slot flag */
+        },
+      ],
+    })
+  })
+
+  test('cache named slot as a whole', () => {
+    const root = transformWithCache(
+      `<Foo><template #foo><span/><span/></template></Foo>`,
+    )
+    expect((root.codegenNode as VNodeCall).children).toMatchObject({
+      properties: [
+        {
+          key: { content: 'foo' },
+          value: {
+            type: NodeTypes.JS_FUNCTION_EXPRESSION,
+            returns: {
+              type: NodeTypes.JS_CACHE_EXPRESSION,
+              value: {
+                type: NodeTypes.JS_ARRAY_EXPRESSION,
+                elements: [
+                  { type: NodeTypes.ELEMENT },
+                  { type: NodeTypes.ELEMENT },
+                ],
+              },
+            },
+          },
+        },
+        {
+          /* _ slot flag */
+        },
+      ],
+    })
+  })
+
+  test('cache dynamically named slot as a whole', () => {
+    const root = transformWithCache(
+      `<Foo><template #[foo]><span/><span/></template></Foo>`,
+    )
+    expect((root.codegenNode as VNodeCall).children).toMatchObject({
+      properties: [
+        {
+          key: { content: 'foo', isStatic: false },
+          value: {
+            type: NodeTypes.JS_FUNCTION_EXPRESSION,
+            returns: {
+              type: NodeTypes.JS_CACHE_EXPRESSION,
+              value: {
+                type: NodeTypes.JS_ARRAY_EXPRESSION,
+                elements: [
+                  { type: NodeTypes.ELEMENT },
+                  { type: NodeTypes.ELEMENT },
+                ],
+              },
+            },
+          },
+        },
+        {
+          /* _ slot flag */
+        },
+      ],
+    })
+  })
+
+  test('cache dynamically named (expression) slot as a whole', () => {
+    const root = transformWithCache(
+      `<Foo><template #[foo+1]><span/><span/></template></Foo>`,
+      { prefixIdentifiers: true },
+    )
+    expect((root.codegenNode as VNodeCall).children).toMatchObject({
+      properties: [
+        {
+          key: { type: NodeTypes.COMPOUND_EXPRESSION },
+          value: {
+            type: NodeTypes.JS_FUNCTION_EXPRESSION,
+            returns: {
+              type: NodeTypes.JS_CACHE_EXPRESSION,
+              value: {
+                type: NodeTypes.JS_ARRAY_EXPRESSION,
+                elements: [
+                  { type: NodeTypes.ELEMENT },
+                  { type: NodeTypes.ELEMENT },
+                ],
+              },
+            },
+          },
+        },
+        {
+          /* _ slot flag */
+        },
+      ],
+    })
+  })
+
+  test('should NOT cache components', () => {
+    const root = transformWithCache(`<div><Comp/></div>`)
+    expect((root.codegenNode as VNodeCall).children).toMatchObject([
+      {
+        type: NodeTypes.ELEMENT,
+        codegenNode: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `_component_Comp`,
+        },
+      },
+    ])
+    expect(root.cached.length).toBe(0)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('should NOT cache element with dynamic props (but hoist the props list)', () => {
+    const root = transformWithCache(`<div><div :id="foo"/></div>`)
+    expect(root.hoists.length).toBe(1)
+    expect((root.codegenNode as VNodeCall).children).toMatchObject([
+      {
+        type: NodeTypes.ELEMENT,
+        codegenNode: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`,
+          props: createObjectMatcher({
+            id: `[foo]`,
+          }),
+          children: undefined,
+          patchFlag: PatchFlags.PROPS,
+          dynamicProps: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: `_hoisted_1`,
+            isStatic: false,
+          },
+        },
+      },
+    ])
+    expect(root.cached.length).toBe(0)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('cache element with static key', () => {
+    const root = transformWithCache(`<div><div key="foo"/></div>`)
+    expect(root.codegenNode).toMatchObject({
+      tag: `"div"`,
+      props: undefined,
+      children: cachedChildrenArrayMatcher(['div']),
+    })
+    expect(root.cached.length).toBe(1)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('should NOT cache element with dynamic key', () => {
+    const root = transformWithCache(`<div><div :key="foo"/></div>`)
+    expect((root.codegenNode as VNodeCall).children).toMatchObject([
+      {
+        type: NodeTypes.ELEMENT,
+        codegenNode: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`,
+          props: createObjectMatcher({
+            key: `[foo]`,
+          }),
+        },
+      },
+    ])
+    expect(root.cached.length).toBe(0)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('should NOT cache element with dynamic ref', () => {
+    const root = transformWithCache(`<div><div :ref="foo"/></div>`)
+    expect((root.codegenNode as VNodeCall).children).toMatchObject([
+      {
+        type: NodeTypes.ELEMENT,
+        codegenNode: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`,
+          props: createObjectMatcher({
+            ref: `[foo]`,
+          }),
+          children: undefined,
+          patchFlag: PatchFlags.NEED_PATCH,
+        },
+      },
+    ])
+    expect(root.cached.length).toBe(0)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('hoist static props for elements with directives', () => {
+    const root = transformWithCache(`<div><div id="foo" v-foo/></div>`)
+    expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'foo' })])
+    expect((root.codegenNode as VNodeCall).children).toMatchObject([
+      {
+        type: NodeTypes.ELEMENT,
+        codegenNode: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`,
+          props: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: `_hoisted_1`,
+          },
+          children: undefined,
+          patchFlag: PatchFlags.NEED_PATCH,
+          directives: {
+            type: NodeTypes.JS_ARRAY_EXPRESSION,
+          },
+        },
+      },
+    ])
+    expect(root.cached.length).toBe(0)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('hoist static props for elements with dynamic text children', () => {
+    const root = transformWithCache(
+      `<div><div id="foo">{{ hello }}</div></div>`,
+    )
+    expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'foo' })])
+    expect((root.codegenNode as VNodeCall).children).toMatchObject([
+      {
+        type: NodeTypes.ELEMENT,
+        codegenNode: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`,
+          props: { content: `_hoisted_1` },
+          children: { type: NodeTypes.INTERPOLATION },
+          patchFlag: PatchFlags.TEXT,
+        },
+      },
+    ])
+    expect(root.cached.length).toBe(0)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('hoist static props for elements with unhoistable children', () => {
+    const root = transformWithCache(`<div><div id="foo"><Comp/></div></div>`)
+    expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'foo' })])
+    expect((root.codegenNode as VNodeCall).children).toMatchObject([
+      {
+        type: NodeTypes.ELEMENT,
+        codegenNode: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`,
+          props: { content: `_hoisted_1` },
+          children: [{ type: NodeTypes.ELEMENT, tag: `Comp` }],
+        },
+      },
+    ])
+    expect(root.cached.length).toBe(0)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('should cache v-if props/children if static', () => {
+    const root = transformWithCache(
+      `<div><div v-if="ok" id="foo"><span/></div></div>`,
+    )
+    expect(root.hoists).toMatchObject([
+      createObjectMatcher({
+        key: `[0]`, // key injected by v-if branch
+        id: 'foo',
+      }),
+    ])
+    expect(
+      ((root.children[0] as ElementNode).children[0] as IfNode).codegenNode,
+    ).toMatchObject({
+      type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
+      consequent: {
+        // blocks should NOT be cached
+        type: NodeTypes.VNODE_CALL,
+        tag: `"div"`,
+        props: { content: `_hoisted_1` },
+        children: cachedChildrenArrayMatcher(['span']),
+      },
+    })
+    expect(root.cached.length).toBe(1)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('should hoist v-for children if static', () => {
+    const root = transformWithCache(
+      `<div><div v-for="i in list" id="foo"><span/></div></div>`,
+    )
+    expect(root.hoists).toMatchObject([
+      createObjectMatcher({
+        id: 'foo',
+      }),
+    ])
+    const forBlockCodegen = (
+      (root.children[0] as ElementNode).children[0] as ForNode
+    ).codegenNode
+    expect(forBlockCodegen).toMatchObject({
+      type: NodeTypes.VNODE_CALL,
+      tag: FRAGMENT,
+      props: undefined,
+      children: {
+        type: NodeTypes.JS_CALL_EXPRESSION,
+        callee: RENDER_LIST,
+      },
+      patchFlag: PatchFlags.UNKEYED_FRAGMENT,
+    })
+    const innerBlockCodegen = forBlockCodegen!.children.arguments[1]
+    expect(innerBlockCodegen.returns).toMatchObject({
+      type: NodeTypes.VNODE_CALL,
+      tag: `"div"`,
+      props: { content: `_hoisted_1` },
+      children: cachedChildrenArrayMatcher(['span']),
+    })
+    expect(root.cached.length).toBe(1)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  describe('prefixIdentifiers', () => {
+    test('cache nested static tree with static interpolation', () => {
+      const root = transformWithCache(
+        `<div><span>foo {{ 1 }} {{ true }}</span></div>`,
+        {
+          prefixIdentifiers: true,
+        },
+      )
+      expect(root.codegenNode).toMatchObject({
+        tag: `"div"`,
+        props: undefined,
+        children: cachedChildrenArrayMatcher(['span']),
+      })
+      expect(root.cached.length).toBe(1)
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test('cache nested static tree with static prop value', () => {
+      const root = transformWithCache(
+        `<div><span :foo="0">{{ 1 }}</span></div>`,
+        {
+          prefixIdentifiers: true,
+        },
+      )
+      expect(root.codegenNode).toMatchObject({
+        tag: `"div"`,
+        props: undefined,
+        children: cachedChildrenArrayMatcher(['span']),
+      })
+      expect(root.cached.length).toBe(1)
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test('hoist class with static object value', () => {
+      const root = transformWithCache(
+        `<div><span :class="{ foo: true }">{{ bar }}</span></div>`,
+        {
+          prefixIdentifiers: true,
+        },
+      )
+
+      expect(root.hoists).toMatchObject([
+        {
+          type: NodeTypes.JS_OBJECT_EXPRESSION,
+          properties: [
+            {
+              key: {
+                content: `class`,
+                isStatic: true,
+                constType: ConstantTypes.CAN_STRINGIFY,
+              },
+              value: {
+                type: NodeTypes.JS_CALL_EXPRESSION,
+                callee: NORMALIZE_CLASS,
+                arguments: [
+                  {
+                    content: `{ foo: true }`,
+                    isStatic: false,
+                    constType: ConstantTypes.CAN_STRINGIFY,
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      ])
+      expect(root.codegenNode).toMatchObject({
+        tag: `"div"`,
+        props: undefined,
+        children: [
+          {
+            type: NodeTypes.ELEMENT,
+            codegenNode: {
+              type: NodeTypes.VNODE_CALL,
+              tag: `"span"`,
+              props: {
+                type: NodeTypes.SIMPLE_EXPRESSION,
+                content: `_hoisted_1`,
+              },
+              children: {
+                type: NodeTypes.INTERPOLATION,
+                content: {
+                  content: `_ctx.bar`,
+                  isStatic: false,
+                  constType: ConstantTypes.NOT_CONSTANT,
+                },
+              },
+              patchFlag: PatchFlags.TEXT,
+            },
+          },
+        ],
+      })
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test('should NOT cache expressions that refer scope variables', () => {
+      const root = transformWithCache(
+        `<div><p v-for="o in list"><span>{{ o }}</span></p></div>`,
+        {
+          prefixIdentifiers: true,
+        },
+      )
+
+      expect(root.cached.length).toBe(0)
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test('should NOT cache expressions that refer scope variables (2)', () => {
+      const root = transformWithCache(
+        `<div><p v-for="o in list"><span>{{ o + 'foo' }}</span></p></div>`,
+        {
+          prefixIdentifiers: true,
+        },
+      )
+
+      expect(root.cached.length).toBe(0)
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test('should NOT cache expressions that refer scope variables (v-slot)', () => {
+      const root = transformWithCache(
+        `<Comp v-slot="{ foo }">{{ foo }}</Comp>`,
+        {
+          prefixIdentifiers: true,
+        },
+      )
+
+      expect(root.cached.length).toBe(0)
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test('should NOT cache elements with cached handlers', () => {
+      const root = transformWithCache(
+        `<div><div><div @click="foo"/></div></div>`,
+        {
+          prefixIdentifiers: true,
+          cacheHandlers: true,
+        },
+      )
+
+      expect(root.cached.length).toBe(1)
+      expect(root.hoists.length).toBe(0)
+      expect(
+        generate(root, {
+          mode: 'module',
+          prefixIdentifiers: true,
+        }).code,
+      ).toMatchSnapshot()
+    })
+
+    test('should NOT cache elements with cached handlers + other bindings', () => {
+      const root = transformWithCache(
+        `<div><div><div :class="{}" @click="foo"/></div></div>`,
+        {
+          prefixIdentifiers: true,
+          cacheHandlers: true,
+        },
+      )
+
+      expect(root.cached.length).toBe(1)
+      expect(root.hoists.length).toBe(0)
+      expect(
+        generate(root, {
+          mode: 'module',
+          prefixIdentifiers: true,
+        }).code,
+      ).toMatchSnapshot()
+    })
+
+    test('should NOT cache keyed template v-for with plain element child', () => {
+      const root = transformWithCache(
+        `<div><template v-for="item in items" :key="item"><span/></template></div>`,
+      )
+      expect(root.hoists.length).toBe(0)
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test('should NOT cache SVG with directives', () => {
+      const root = transformWithCache(
+        `<div><svg v-foo><path d="M2,3H5.5L12"/></svg></div>`,
+      )
+      expect(root.cached.length).toBe(1)
+      expect(root.codegenNode).toMatchObject({
+        children: [
+          {
+            tag: 'svg',
+            // only cache the children, not the svg tag itself
+            codegenNode: {
+              children: {
+                type: NodeTypes.JS_CACHE_EXPRESSION,
+              },
+            },
+          },
+        ],
+      })
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test('clone hoisted array children in v-for + HMR mode', () => {
+      const root = transformWithCache(
+        `<div><div v-for="i in 1"><span class="hi"></span></div></div>`,
+        {
+          hmr: true,
+        },
+      )
+      expect(root.cached.length).toBe(1)
+      const forBlockCodegen = (
+        (root.children[0] as ElementNode).children[0] as ForNode
+      ).codegenNode
+      expect(forBlockCodegen).toMatchObject({
+        type: NodeTypes.VNODE_CALL,
+        tag: FRAGMENT,
+        props: undefined,
+        children: {
+          type: NodeTypes.JS_CALL_EXPRESSION,
+          callee: RENDER_LIST,
+        },
+        patchFlag: PatchFlags.UNKEYED_FRAGMENT,
+      })
+      const innerBlockCodegen = forBlockCodegen!.children.arguments[1]
+      expect(innerBlockCodegen.returns).toMatchObject({
+        type: NodeTypes.VNODE_CALL,
+        tag: `"div"`,
+        children: cachedChildrenArrayMatcher(
+          ['span'],
+          true /* needArraySpread */,
+        ),
+      })
+      expect(generate(root).code).toMatchSnapshot()
+    })
+  })
+})
diff --git a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
deleted file mode 100644
index 49ad7ad89..000000000
--- a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
+++ /dev/null
@@ -1,609 +0,0 @@
-import {
-  baseParse as parse,
-  transform,
-  NodeTypes,
-  generate,
-  CompilerOptions,
-  VNodeCall,
-  IfNode,
-  ElementNode,
-  ForNode,
-  ConstantTypes
-} from '../../src'
-import {
-  FRAGMENT,
-  RENDER_LIST,
-  NORMALIZE_CLASS
-} from '../../src/runtimeHelpers'
-import { transformElement } from '../../src/transforms/transformElement'
-import { transformExpression } from '../../src/transforms/transformExpression'
-import { transformIf } from '../../src/transforms/vIf'
-import { transformFor } from '../../src/transforms/vFor'
-import { transformBind } from '../../src/transforms/vBind'
-import { transformOn } from '../../src/transforms/vOn'
-import { createObjectMatcher, genFlagText } from '../testUtils'
-import { transformText } from '../../src/transforms/transformText'
-import { PatchFlags } from '@vue/shared'
-
-const hoistedChildrenArrayMatcher = (startIndex = 1, length = 1) => ({
-  type: NodeTypes.JS_ARRAY_EXPRESSION,
-  elements: new Array(length).fill(0).map((_, i) => ({
-    type: NodeTypes.ELEMENT,
-    codegenNode: {
-      type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_hoisted_${startIndex + i}`
-    }
-  }))
-})
-
-function transformWithHoist(template: string, options: CompilerOptions = {}) {
-  const ast = parse(template)
-  transform(ast, {
-    hoistStatic: true,
-    nodeTransforms: [
-      transformIf,
-      transformFor,
-      ...(options.prefixIdentifiers ? [transformExpression] : []),
-      transformElement,
-      transformText
-    ],
-    directiveTransforms: {
-      on: transformOn,
-      bind: transformBind
-    },
-    ...options
-  })
-  expect(ast.codegenNode).toMatchObject({
-    type: NodeTypes.VNODE_CALL,
-    isBlock: true
-  })
-  return ast
-}
-
-describe('compiler: hoistStatic transform', () => {
-  test('should NOT hoist root node', () => {
-    // if the whole tree is static, the root still needs to be a block
-    // so that it's patched in optimized mode to skip children
-    const root = transformWithHoist(`<div/>`)
-    expect(root.hoists.length).toBe(0)
-    expect(root.codegenNode).toMatchObject({
-      tag: `"div"`
-    })
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('hoist simple element', () => {
-    const root = transformWithHoist(
-      `<div><span class="inline">hello</span></div>`
-    )
-    expect(root.hoists).toMatchObject([
-      {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"span"`,
-        props: createObjectMatcher({ class: 'inline' }),
-        children: {
-          type: NodeTypes.TEXT,
-          content: `hello`
-        }
-      },
-      hoistedChildrenArrayMatcher()
-    ])
-    expect(root.codegenNode).toMatchObject({
-      tag: `"div"`,
-      props: undefined,
-      children: { content: `_hoisted_2` }
-    })
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('hoist nested static tree', () => {
-    const root = transformWithHoist(`<div><p><span/><span/></p></div>`)
-    expect(root.hoists).toMatchObject([
-      {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"p"`,
-        props: undefined,
-        children: [
-          { type: NodeTypes.ELEMENT, tag: `span` },
-          { type: NodeTypes.ELEMENT, tag: `span` }
-        ]
-      },
-      hoistedChildrenArrayMatcher()
-    ])
-    expect((root.codegenNode as VNodeCall).children).toMatchObject({
-      content: '_hoisted_2'
-    })
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('hoist nested static tree with comments', () => {
-    const root = transformWithHoist(`<div><div><!--comment--></div></div>`)
-    expect(root.hoists).toMatchObject([
-      {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"div"`,
-        props: undefined,
-        children: [{ type: NodeTypes.COMMENT, content: `comment` }]
-      },
-      hoistedChildrenArrayMatcher()
-    ])
-    expect((root.codegenNode as VNodeCall).children).toMatchObject({
-      content: `_hoisted_2`
-    })
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('hoist siblings with common non-hoistable parent', () => {
-    const root = transformWithHoist(`<div><span/><div/></div>`)
-    expect(root.hoists).toMatchObject([
-      {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"span"`
-      },
-      {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
-      },
-      hoistedChildrenArrayMatcher(1, 2)
-    ])
-    expect((root.codegenNode as VNodeCall).children).toMatchObject({
-      content: '_hoisted_3'
-    })
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('should NOT hoist components', () => {
-    const root = transformWithHoist(`<div><Comp/></div>`)
-    expect(root.hoists.length).toBe(0)
-    expect((root.codegenNode as VNodeCall).children).toMatchObject([
-      {
-        type: NodeTypes.ELEMENT,
-        codegenNode: {
-          type: NodeTypes.VNODE_CALL,
-          tag: `_component_Comp`
-        }
-      }
-    ])
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('should NOT hoist element with dynamic props (but hoist the props list)', () => {
-    const root = transformWithHoist(`<div><div :id="foo"/></div>`)
-    expect(root.hoists.length).toBe(1)
-    expect((root.codegenNode as VNodeCall).children).toMatchObject([
-      {
-        type: NodeTypes.ELEMENT,
-        codegenNode: {
-          type: NodeTypes.VNODE_CALL,
-          tag: `"div"`,
-          props: createObjectMatcher({
-            id: `[foo]`
-          }),
-          children: undefined,
-          patchFlag: genFlagText(PatchFlags.PROPS),
-          dynamicProps: {
-            type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `_hoisted_1`,
-            isStatic: false
-          }
-        }
-      }
-    ])
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('hoist element with static key', () => {
-    const root = transformWithHoist(`<div><div key="foo"/></div>`)
-    expect(root.hoists.length).toBe(2)
-    expect(root.hoists).toMatchObject([
-      {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"div"`,
-        props: createObjectMatcher({ key: 'foo' })
-      },
-      hoistedChildrenArrayMatcher()
-    ])
-    expect(root.codegenNode).toMatchObject({
-      tag: `"div"`,
-      props: undefined,
-      children: { content: `_hoisted_2` }
-    })
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('should NOT hoist element with dynamic key', () => {
-    const root = transformWithHoist(`<div><div :key="foo"/></div>`)
-    expect(root.hoists.length).toBe(0)
-    expect((root.codegenNode as VNodeCall).children).toMatchObject([
-      {
-        type: NodeTypes.ELEMENT,
-        codegenNode: {
-          type: NodeTypes.VNODE_CALL,
-          tag: `"div"`,
-          props: createObjectMatcher({
-            key: `[foo]`
-          })
-        }
-      }
-    ])
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('should NOT hoist element with dynamic ref', () => {
-    const root = transformWithHoist(`<div><div :ref="foo"/></div>`)
-    expect(root.hoists.length).toBe(0)
-    expect((root.codegenNode as VNodeCall).children).toMatchObject([
-      {
-        type: NodeTypes.ELEMENT,
-        codegenNode: {
-          type: NodeTypes.VNODE_CALL,
-          tag: `"div"`,
-          props: createObjectMatcher({
-            ref: `[foo]`
-          }),
-          children: undefined,
-          patchFlag: genFlagText(PatchFlags.NEED_PATCH)
-        }
-      }
-    ])
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('hoist static props for elements with directives', () => {
-    const root = transformWithHoist(`<div><div id="foo" v-foo/></div>`)
-    expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'foo' })])
-    expect((root.codegenNode as VNodeCall).children).toMatchObject([
-      {
-        type: NodeTypes.ELEMENT,
-        codegenNode: {
-          type: NodeTypes.VNODE_CALL,
-          tag: `"div"`,
-          props: {
-            type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `_hoisted_1`
-          },
-          children: undefined,
-          patchFlag: genFlagText(PatchFlags.NEED_PATCH),
-          directives: {
-            type: NodeTypes.JS_ARRAY_EXPRESSION
-          }
-        }
-      }
-    ])
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('hoist static props for elements with dynamic text children', () => {
-    const root = transformWithHoist(
-      `<div><div id="foo">{{ hello }}</div></div>`
-    )
-    expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'foo' })])
-    expect((root.codegenNode as VNodeCall).children).toMatchObject([
-      {
-        type: NodeTypes.ELEMENT,
-        codegenNode: {
-          type: NodeTypes.VNODE_CALL,
-          tag: `"div"`,
-          props: { content: `_hoisted_1` },
-          children: { type: NodeTypes.INTERPOLATION },
-          patchFlag: genFlagText(PatchFlags.TEXT)
-        }
-      }
-    ])
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('hoist static props for elements with unhoistable children', () => {
-    const root = transformWithHoist(`<div><div id="foo"><Comp/></div></div>`)
-    expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'foo' })])
-    expect((root.codegenNode as VNodeCall).children).toMatchObject([
-      {
-        type: NodeTypes.ELEMENT,
-        codegenNode: {
-          type: NodeTypes.VNODE_CALL,
-          tag: `"div"`,
-          props: { content: `_hoisted_1` },
-          children: [{ type: NodeTypes.ELEMENT, tag: `Comp` }]
-        }
-      }
-    ])
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('should hoist v-if props/children if static', () => {
-    const root = transformWithHoist(
-      `<div><div v-if="ok" id="foo"><span/></div></div>`
-    )
-    expect(root.hoists).toMatchObject([
-      createObjectMatcher({
-        key: `[0]`, // key injected by v-if branch
-        id: 'foo'
-      }),
-      {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"span"`
-      },
-      hoistedChildrenArrayMatcher(2)
-    ])
-    expect(
-      ((root.children[0] as ElementNode).children[0] as IfNode).codegenNode
-    ).toMatchObject({
-      type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
-      consequent: {
-        // blocks should NOT be hoisted
-        type: NodeTypes.VNODE_CALL,
-        tag: `"div"`,
-        props: { content: `_hoisted_1` },
-        children: { content: `_hoisted_3` }
-      }
-    })
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  test('should hoist v-for children if static', () => {
-    const root = transformWithHoist(
-      `<div><div v-for="i in list" id="foo"><span/></div></div>`
-    )
-    expect(root.hoists).toMatchObject([
-      createObjectMatcher({
-        id: 'foo'
-      }),
-      {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"span"`
-      },
-      hoistedChildrenArrayMatcher(2)
-    ])
-    const forBlockCodegen = (
-      (root.children[0] as ElementNode).children[0] as ForNode
-    ).codegenNode
-    expect(forBlockCodegen).toMatchObject({
-      type: NodeTypes.VNODE_CALL,
-      tag: FRAGMENT,
-      props: undefined,
-      children: {
-        type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: RENDER_LIST
-      },
-      patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT)
-    })
-    const innerBlockCodegen = forBlockCodegen!.children.arguments[1]
-    expect(innerBlockCodegen.returns).toMatchObject({
-      type: NodeTypes.VNODE_CALL,
-      tag: `"div"`,
-      props: { content: `_hoisted_1` },
-      children: { content: `_hoisted_3` }
-    })
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  describe('prefixIdentifiers', () => {
-    test('hoist nested static tree with static interpolation', () => {
-      const root = transformWithHoist(
-        `<div><span>foo {{ 1 }} {{ true }}</span></div>`,
-        {
-          prefixIdentifiers: true
-        }
-      )
-      expect(root.hoists).toMatchObject([
-        {
-          type: NodeTypes.VNODE_CALL,
-          tag: `"span"`,
-          props: undefined,
-          children: {
-            type: NodeTypes.COMPOUND_EXPRESSION
-          }
-        },
-        hoistedChildrenArrayMatcher()
-      ])
-      expect(root.codegenNode).toMatchObject({
-        tag: `"div"`,
-        props: undefined,
-        children: {
-          type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `_hoisted_2`
-        }
-      })
-      expect(generate(root).code).toMatchSnapshot()
-    })
-
-    test('hoist nested static tree with static prop value', () => {
-      const root = transformWithHoist(
-        `<div><span :foo="0">{{ 1 }}</span></div>`,
-        {
-          prefixIdentifiers: true
-        }
-      )
-
-      expect(root.hoists).toMatchObject([
-        {
-          type: NodeTypes.VNODE_CALL,
-          tag: `"span"`,
-          props: createObjectMatcher({ foo: `[0]` }),
-          children: {
-            type: NodeTypes.INTERPOLATION,
-            content: {
-              content: `1`,
-              isStatic: false,
-              constType: ConstantTypes.CAN_STRINGIFY
-            }
-          }
-        },
-        hoistedChildrenArrayMatcher()
-      ])
-      expect(root.codegenNode).toMatchObject({
-        tag: `"div"`,
-        props: undefined,
-        children: {
-          type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `_hoisted_2`
-        }
-      })
-      expect(generate(root).code).toMatchSnapshot()
-    })
-
-    test('hoist class with static object value', () => {
-      const root = transformWithHoist(
-        `<div><span :class="{ foo: true }">{{ bar }}</span></div>`,
-        {
-          prefixIdentifiers: true
-        }
-      )
-
-      expect(root.hoists).toMatchObject([
-        {
-          type: NodeTypes.JS_OBJECT_EXPRESSION,
-          properties: [
-            {
-              key: {
-                content: `class`,
-                isStatic: true,
-                constType: ConstantTypes.CAN_STRINGIFY
-              },
-              value: {
-                type: NodeTypes.JS_CALL_EXPRESSION,
-                callee: NORMALIZE_CLASS,
-                arguments: [
-                  {
-                    content: `{ foo: true }`,
-                    isStatic: false,
-                    constType: ConstantTypes.CAN_STRINGIFY
-                  }
-                ]
-              }
-            }
-          ]
-        }
-      ])
-      expect(root.codegenNode).toMatchObject({
-        tag: `"div"`,
-        props: undefined,
-        children: [
-          {
-            type: NodeTypes.ELEMENT,
-            codegenNode: {
-              type: NodeTypes.VNODE_CALL,
-              tag: `"span"`,
-              props: {
-                type: NodeTypes.SIMPLE_EXPRESSION,
-                content: `_hoisted_1`
-              },
-              children: {
-                type: NodeTypes.INTERPOLATION,
-                content: {
-                  content: `_ctx.bar`,
-                  isStatic: false,
-                  constType: ConstantTypes.NOT_CONSTANT
-                }
-              },
-              patchFlag: `1 /* TEXT */`
-            }
-          }
-        ]
-      })
-      expect(generate(root).code).toMatchSnapshot()
-    })
-
-    test('should NOT hoist expressions that refer scope variables', () => {
-      const root = transformWithHoist(
-        `<div><p v-for="o in list"><span>{{ o }}</span></p></div>`,
-        {
-          prefixIdentifiers: true
-        }
-      )
-
-      expect(root.hoists.length).toBe(0)
-      expect(generate(root).code).toMatchSnapshot()
-    })
-
-    test('should NOT hoist expressions that refer scope variables (2)', () => {
-      const root = transformWithHoist(
-        `<div><p v-for="o in list"><span>{{ o + 'foo' }}</span></p></div>`,
-        {
-          prefixIdentifiers: true
-        }
-      )
-
-      expect(root.hoists.length).toBe(0)
-      expect(generate(root).code).toMatchSnapshot()
-    })
-
-    test('should NOT hoist expressions that refer scope variables (v-slot)', () => {
-      const root = transformWithHoist(
-        `<Comp v-slot="{ foo }">{{ foo }}</Comp>`,
-        {
-          prefixIdentifiers: true
-        }
-      )
-
-      expect(root.hoists.length).toBe(0)
-      expect(generate(root).code).toMatchSnapshot()
-    })
-
-    test('should NOT hoist elements with cached handlers', () => {
-      const root = transformWithHoist(
-        `<div><div><div @click="foo"/></div></div>`,
-        {
-          prefixIdentifiers: true,
-          cacheHandlers: true
-        }
-      )
-
-      expect(root.cached).toBe(1)
-      expect(root.hoists.length).toBe(0)
-      expect(
-        generate(root, {
-          mode: 'module',
-          prefixIdentifiers: true
-        }).code
-      ).toMatchSnapshot()
-    })
-
-    test('should NOT hoist elements with cached handlers + other bindings', () => {
-      const root = transformWithHoist(
-        `<div><div><div :class="{}" @click="foo"/></div></div>`,
-        {
-          prefixIdentifiers: true,
-          cacheHandlers: true
-        }
-      )
-
-      expect(root.cached).toBe(1)
-      expect(root.hoists.length).toBe(0)
-      expect(
-        generate(root, {
-          mode: 'module',
-          prefixIdentifiers: true
-        }).code
-      ).toMatchSnapshot()
-    })
-
-    test('should NOT hoist keyed template v-for with plain element child', () => {
-      const root = transformWithHoist(
-        `<div><template v-for="item in items" :key="item"><span/></template></div>`
-      )
-      expect(root.hoists.length).toBe(0)
-      expect(generate(root).code).toMatchSnapshot()
-    })
-
-    test('should NOT hoist SVG with directives', () => {
-      const root = transformWithHoist(
-        `<div><svg v-foo><path d="M2,3H5.5L12"/></svg></div>`
-      )
-      expect(root.hoists.length).toBe(2)
-      expect(generate(root).code).toMatchSnapshot()
-    })
-
-    test('clone hoisted array children in HMR mode', () => {
-      const root = transformWithHoist(`<div><span class="hi"></span></div>`, {
-        hmr: true
-      })
-      expect(root.hoists.length).toBe(2)
-      expect(root.codegenNode).toMatchObject({
-        children: {
-          content: '[..._hoisted_2]'
-        }
-      })
-    })
-  })
-})
diff --git a/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts b/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts
index 96a60bd1d..fa711051c 100644
--- a/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts
@@ -1,9 +1,9 @@
 import {
+  type ElementNode,
+  type VNodeCall,
+  noopDirectiveTransform,
   baseParse as parse,
   transform,
-  ElementNode,
-  noopDirectiveTransform,
-  VNodeCall
 } from '../../src'
 import { transformElement } from '../../src/transforms/transformElement'
 
@@ -13,8 +13,8 @@ describe('compiler: noop directive transform', () => {
     transform(ast, {
       nodeTransforms: [transformElement],
       directiveTransforms: {
-        noop: noopDirectiveTransform
-      }
+        noop: noopDirectiveTransform,
+      },
     })
     const node = ast.children[0] as ElementNode
     // As v-noop adds no properties the codegen should be identical to
diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index 678d01cbc..bf3510a05 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -1,48 +1,49 @@
 import {
-  CompilerOptions,
+  BindingTypes,
+  type CompilerOptions,
+  ErrorCodes,
+  type NodeTransform,
+  baseCompile,
   baseParse as parse,
   transform,
-  ErrorCodes,
-  BindingTypes,
-  NodeTransform,
   transformExpression,
-  baseCompile
 } from '../../src'
 import {
-  RESOLVE_COMPONENT,
+  BASE_TRANSITION,
   CREATE_VNODE,
+  GUARD_REACTIVE_PROPS,
+  KEEP_ALIVE,
   MERGE_PROPS,
+  NORMALIZE_CLASS,
+  NORMALIZE_PROPS,
+  NORMALIZE_STYLE,
+  RESOLVE_COMPONENT,
   RESOLVE_DIRECTIVE,
-  TO_HANDLERS,
-  helperNameMap,
-  TELEPORT,
   RESOLVE_DYNAMIC_COMPONENT,
   SUSPENSE,
-  KEEP_ALIVE,
-  BASE_TRANSITION,
-  NORMALIZE_CLASS,
-  NORMALIZE_STYLE,
-  NORMALIZE_PROPS,
-  GUARD_REACTIVE_PROPS
+  TELEPORT,
+  TO_HANDLERS,
+  helperNameMap,
 } from '../../src/runtimeHelpers'
 import {
+  type DirectiveNode,
   NodeTypes,
+  type RootNode,
+  type VNodeCall,
   createObjectProperty,
-  DirectiveNode,
-  RootNode,
-  VNodeCall
 } from '../../src/ast'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformStyle } from '../../../compiler-dom/src/transforms/transformStyle'
 import { transformOn } from '../../src/transforms/vOn'
 import { transformBind } from '../../src/transforms/vBind'
 import { PatchFlags } from '@vue/shared'
-import { createObjectMatcher, genFlagText } from '../testUtils'
+import { createObjectMatcher } from '../testUtils'
 import { transformText } from '../../src/transforms/transformText'
+import { parseWithForTransform } from './vFor.spec'
 
 function parseWithElementTransform(
   template: string,
-  options: CompilerOptions = {}
+  options: CompilerOptions = {},
 ): {
   root: RootNode
   node: VNodeCall
@@ -52,14 +53,14 @@ function parseWithElementTransform(
   const ast = parse(`<div>${template}</div>`, options)
   transform(ast, {
     nodeTransforms: [transformElement, transformText],
-    ...options
+    ...options,
   })
   const codegenNode = (ast as any).children[0].children[0]
     .codegenNode as VNodeCall
   expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
   return {
     root: ast,
-    node: codegenNode
+    node: codegenNode,
   }
 }
 
@@ -68,8 +69,8 @@ function parseWithBind(template: string, options?: CompilerOptions) {
     ...options,
     directiveTransforms: {
       ...options?.directiveTransforms,
-      bind: transformBind
-    }
+      bind: transformBind,
+    },
   })
 }
 
@@ -82,7 +83,7 @@ describe('compiler: element transform', () => {
 
   test('resolve implicitly self-referencing component', () => {
     const { root } = parseWithElementTransform(`<Example/>`, {
-      filename: `/foo/bar/Example.vue?vue&type=template`
+      filename: `/foo/bar/Example.vue?vue&type=template`,
     })
     expect(root.helpers).toContain(RESOLVE_COMPONENT)
     expect(root.components).toContain(`Example__self`)
@@ -91,8 +92,8 @@ describe('compiler: element transform', () => {
   test('resolve component from setup bindings', () => {
     const { root, node } = parseWithElementTransform(`<Example/>`, {
       bindingMetadata: {
-        Example: BindingTypes.SETUP_MAYBE_REF
-      }
+        Example: BindingTypes.SETUP_MAYBE_REF,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`$setup["Example"]`)
@@ -102,8 +103,8 @@ describe('compiler: element transform', () => {
     const { root, node } = parseWithElementTransform(`<Example/>`, {
       inline: true,
       bindingMetadata: {
-        Example: BindingTypes.SETUP_MAYBE_REF
-      }
+        Example: BindingTypes.SETUP_MAYBE_REF,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`_unref(Example)`)
@@ -113,8 +114,8 @@ describe('compiler: element transform', () => {
     const { root, node } = parseWithElementTransform(`<Example/>`, {
       inline: true,
       bindingMetadata: {
-        Example: BindingTypes.SETUP_CONST
-      }
+        Example: BindingTypes.SETUP_CONST,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`Example`)
@@ -123,8 +124,8 @@ describe('compiler: element transform', () => {
   test('resolve namespaced component from setup bindings', () => {
     const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
       bindingMetadata: {
-        Foo: BindingTypes.SETUP_MAYBE_REF
-      }
+        Foo: BindingTypes.SETUP_MAYBE_REF,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`$setup["Foo"].Example`)
@@ -134,8 +135,8 @@ describe('compiler: element transform', () => {
     const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
       inline: true,
       bindingMetadata: {
-        Foo: BindingTypes.SETUP_MAYBE_REF
-      }
+        Foo: BindingTypes.SETUP_MAYBE_REF,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`_unref(Foo).Example`)
@@ -145,8 +146,8 @@ describe('compiler: element transform', () => {
     const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
       inline: true,
       bindingMetadata: {
-        Foo: BindingTypes.SETUP_CONST
-      }
+        Foo: BindingTypes.SETUP_CONST,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`Foo.Example`)
@@ -156,8 +157,8 @@ describe('compiler: element transform', () => {
     const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
       inline: true,
       bindingMetadata: {
-        Foo: BindingTypes.PROPS
-      }
+        Foo: BindingTypes.PROPS,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`_unref(__props["Foo"]).Example`)
@@ -167,8 +168,8 @@ describe('compiler: element transform', () => {
     const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
       inline: false,
       bindingMetadata: {
-        Foo: BindingTypes.PROPS
-      }
+        Foo: BindingTypes.PROPS,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe('_unref($props["Foo"]).Example')
@@ -176,11 +177,11 @@ describe('compiler: element transform', () => {
 
   test('do not resolve component from non-script-setup bindings', () => {
     const bindingMetadata = {
-      Example: BindingTypes.SETUP_MAYBE_REF
+      Example: BindingTypes.SETUP_MAYBE_REF,
     }
     Object.defineProperty(bindingMetadata, '__isScriptSetup', { value: false })
     const { root } = parseWithElementTransform(`<Example/>`, {
-      bindingMetadata
+      bindingMetadata,
     })
     expect(root.helpers).toContain(RESOLVE_COMPONENT)
     expect(root.components).toContain(`Example`)
@@ -192,9 +193,9 @@ describe('compiler: element transform', () => {
       tag: `"div"`,
       props: createObjectMatcher({
         id: 'foo',
-        class: 'bar'
+        class: 'bar',
       }),
-      children: undefined
+      children: undefined,
     })
   })
 
@@ -204,7 +205,7 @@ describe('compiler: element transform', () => {
     expect(node).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
-        id: 'foo'
+        id: 'foo',
       }),
       children: [
         {
@@ -212,10 +213,10 @@ describe('compiler: element transform', () => {
           tag: 'span',
           codegenNode: {
             type: NodeTypes.VNODE_CALL,
-            tag: `"span"`
-          }
-        }
-      ]
+            tag: `"span"`,
+          },
+        },
+      ],
     })
   })
 
@@ -231,10 +232,10 @@ describe('compiler: element transform', () => {
           tag: 'span',
           codegenNode: {
             type: NodeTypes.VNODE_CALL,
-            tag: `"span"`
-          }
-        }
-      ]
+            tag: `"span"`,
+          },
+        },
+      ],
     })
   })
 
@@ -256,17 +257,17 @@ describe('compiler: element transform', () => {
           arguments: [
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `obj`
-            }
-          ]
-        }
-      ]
+              content: `obj`,
+            },
+          ],
+        },
+      ],
     })
   })
 
   test('v-bind="obj" after static prop', () => {
     const { root, node } = parseWithElementTransform(
-      `<div id="foo" v-bind="obj" />`
+      `<div id="foo" v-bind="obj" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -275,19 +276,19 @@ describe('compiler: element transform', () => {
       callee: MERGE_PROPS,
       arguments: [
         createObjectMatcher({
-          id: 'foo'
+          id: 'foo',
         }),
         {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
-        }
-      ]
+          content: `obj`,
+        },
+      ],
     })
   })
 
   test('v-bind="obj" before static prop', () => {
     const { root, node } = parseWithElementTransform(
-      `<div v-bind="obj" id="foo" />`
+      `<div v-bind="obj" id="foo" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -297,18 +298,18 @@ describe('compiler: element transform', () => {
       arguments: [
         {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
+          content: `obj`,
         },
         createObjectMatcher({
-          id: 'foo'
-        })
-      ]
+          id: 'foo',
+        }),
+      ],
     })
   })
 
   test('v-bind="obj" between static props', () => {
     const { root, node } = parseWithElementTransform(
-      `<div id="foo" v-bind="obj" class="bar" />`
+      `<div id="foo" v-bind="obj" class="bar" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -317,22 +318,22 @@ describe('compiler: element transform', () => {
       callee: MERGE_PROPS,
       arguments: [
         createObjectMatcher({
-          id: 'foo'
+          id: 'foo',
         }),
         {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
+          content: `obj`,
         },
         createObjectMatcher({
-          class: 'bar'
-        })
-      ]
+          class: 'bar',
+        }),
+      ],
     })
   })
 
   test('v-on="obj"', () => {
     const { root, node } = parseWithElementTransform(
-      `<div id="foo" v-on="obj" class="bar" />`
+      `<div id="foo" v-on="obj" class="bar" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -341,7 +342,7 @@ describe('compiler: element transform', () => {
       callee: MERGE_PROPS,
       arguments: [
         createObjectMatcher({
-          id: 'foo'
+          id: 'foo',
         }),
         {
           type: NodeTypes.JS_CALL_EXPRESSION,
@@ -349,21 +350,21 @@ describe('compiler: element transform', () => {
           arguments: [
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `obj`
+              content: `obj`,
             },
-            `true`
-          ]
+            `true`,
+          ],
         },
         createObjectMatcher({
-          class: 'bar'
-        })
-      ]
+          class: 'bar',
+        }),
+      ],
     })
   })
 
   test('v-on="obj" on component', () => {
     const { root, node } = parseWithElementTransform(
-      `<Foo id="foo" v-on="obj" class="bar" />`
+      `<Foo id="foo" v-on="obj" class="bar" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -372,7 +373,7 @@ describe('compiler: element transform', () => {
       callee: MERGE_PROPS,
       arguments: [
         createObjectMatcher({
-          id: 'foo'
+          id: 'foo',
         }),
         {
           type: NodeTypes.JS_CALL_EXPRESSION,
@@ -380,20 +381,20 @@ describe('compiler: element transform', () => {
           arguments: [
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `obj`
-            }
-          ]
+              content: `obj`,
+            },
+          ],
         },
         createObjectMatcher({
-          class: 'bar'
-        })
-      ]
+          class: 'bar',
+        }),
+      ],
     })
   })
 
   test('v-on="obj" + v-bind="obj"', () => {
     const { root, node } = parseWithElementTransform(
-      `<div id="foo" v-on="handlers" v-bind="obj" />`
+      `<div id="foo" v-on="handlers" v-bind="obj" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -402,7 +403,7 @@ describe('compiler: element transform', () => {
       callee: MERGE_PROPS,
       arguments: [
         createObjectMatcher({
-          id: 'foo'
+          id: 'foo',
         }),
         {
           type: NodeTypes.JS_CALL_EXPRESSION,
@@ -410,16 +411,16 @@ describe('compiler: element transform', () => {
           arguments: [
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `handlers`
+              content: `handlers`,
             },
-            `true`
-          ]
+            `true`,
+          ],
         },
         {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
-        }
-      ]
+          content: `obj`,
+        },
+      ],
     })
   })
 
@@ -429,15 +430,15 @@ describe('compiler: element transform', () => {
     expect(node).toMatchObject({
       tag: `"template"`,
       props: createObjectMatcher({
-        id: 'foo'
-      })
+        id: 'foo',
+      }),
     })
   })
 
   test('should handle <Teleport> with normal children', () => {
     function assert(tag: string) {
       const { root, node } = parseWithElementTransform(
-        `<${tag} target="#foo"><span /></${tag}>`
+        `<${tag} target="#foo"><span /></${tag}>`,
       )
       expect(root.components.length).toBe(0)
       expect(root.helpers).toContain(TELEPORT)
@@ -445,7 +446,7 @@ describe('compiler: element transform', () => {
       expect(node).toMatchObject({
         tag: TELEPORT,
         props: createObjectMatcher({
-          target: '#foo'
+          target: '#foo',
         }),
         children: [
           {
@@ -453,10 +454,10 @@ describe('compiler: element transform', () => {
             tag: 'span',
             codegenNode: {
               type: NodeTypes.VNODE_CALL,
-              tag: `"span"`
-            }
-          }
-        ]
+              tag: `"span"`,
+            },
+          },
+        ],
       })
     }
 
@@ -467,7 +468,7 @@ describe('compiler: element transform', () => {
   test('should handle <Suspense>', () => {
     function assert(tag: string, content: string, hasFallback?: boolean) {
       const { root, node } = parseWithElementTransform(
-        `<${tag}>${content}</${tag}>`
+        `<${tag}>${content}</${tag}>`,
       )
       expect(root.components.length).toBe(0)
       expect(root.helpers).toContain(SUSPENSE)
@@ -478,19 +479,19 @@ describe('compiler: element transform', () => {
         children: hasFallback
           ? createObjectMatcher({
               default: {
-                type: NodeTypes.JS_FUNCTION_EXPRESSION
+                type: NodeTypes.JS_FUNCTION_EXPRESSION,
               },
               fallback: {
-                type: NodeTypes.JS_FUNCTION_EXPRESSION
+                type: NodeTypes.JS_FUNCTION_EXPRESSION,
               },
-              _: `[1 /* STABLE */]`
+              _: `[1 /* STABLE */]`,
             })
           : createObjectMatcher({
               default: {
-                type: NodeTypes.JS_FUNCTION_EXPRESSION
+                type: NodeTypes.JS_FUNCTION_EXPRESSION,
               },
-              _: `[1 /* STABLE */]`
-            })
+              _: `[1 /* STABLE */]`,
+            }),
       })
     }
 
@@ -499,7 +500,7 @@ describe('compiler: element transform', () => {
     assert(
       `suspense`,
       `<template #default>foo</template><template #fallback>fallback</template>`,
-      true
+      true,
     )
   })
 
@@ -507,7 +508,7 @@ describe('compiler: element transform', () => {
     function assert(tag: string) {
       const root = parse(`<div><${tag}><span /></${tag}></div>`)
       transform(root, {
-        nodeTransforms: [transformElement, transformText]
+        nodeTransforms: [transformElement, transformText],
       })
       expect(root.components.length).toBe(0)
       expect(root.helpers).toContain(KEEP_ALIVE)
@@ -520,7 +521,7 @@ describe('compiler: element transform', () => {
         // keep-alive should not compile content to slots
         children: [{ type: NodeTypes.ELEMENT, tag: 'span' }],
         // should get a dynamic slots flag to force updates
-        patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS)
+        patchFlag: PatchFlags.DYNAMIC_SLOTS,
       })
     }
 
@@ -531,7 +532,7 @@ describe('compiler: element transform', () => {
   test('should handle <BaseTransition>', () => {
     function assert(tag: string) {
       const { root, node } = parseWithElementTransform(
-        `<${tag}><span /></${tag}>`
+        `<${tag}><span /></${tag}>`,
       )
       expect(root.components.length).toBe(0)
       expect(root.helpers).toContain(BASE_TRANSITION)
@@ -541,10 +542,10 @@ describe('compiler: element transform', () => {
         props: undefined,
         children: createObjectMatcher({
           default: {
-            type: NodeTypes.JS_FUNCTION_EXPRESSION
+            type: NodeTypes.JS_FUNCTION_EXPRESSION,
           },
-          _: `[1 /* STABLE */]`
-        })
+          _: `[1 /* STABLE */]`,
+        }),
       })
     }
 
@@ -557,8 +558,8 @@ describe('compiler: element transform', () => {
     parseWithElementTransform(`<div v-bind/>`, { onError })
     expect(onError.mock.calls[0]).toMatchObject([
       {
-        code: ErrorCodes.X_V_BIND_NO_EXPRESSION
-      }
+        code: ErrorCodes.X_V_BIND_NO_EXPRESSION,
+      },
     ])
   })
 
@@ -569,10 +570,10 @@ describe('compiler: element transform', () => {
         foo(dir) {
           _dir = dir
           return {
-            props: [createObjectProperty(dir.arg!, dir.exp!)]
+            props: [createObjectProperty(dir.arg!, dir.exp!)],
           }
-        }
-      }
+        },
+      },
     })
 
     expect(node.props).toMatchObject({
@@ -581,13 +582,13 @@ describe('compiler: element transform', () => {
         {
           type: NodeTypes.JS_PROPERTY,
           key: _dir!.arg,
-          value: _dir!.exp
-        }
-      ]
+          value: _dir!.exp,
+        },
+      ],
     })
     // should factor in props returned by custom directive transforms
     // in patchFlag analysis
-    expect(node.patchFlag).toMatch(PatchFlags.PROPS + '')
+    expect(node.patchFlag).toBe(PatchFlags.PROPS)
     expect(node.dynamicProps).toMatch(`"bar"`)
   })
 
@@ -599,11 +600,11 @@ describe('compiler: element transform', () => {
           foo() {
             return {
               props: [],
-              needRuntime: true
+              needRuntime: true,
             }
-          }
-        }
-      }
+          },
+        },
+      },
     )
     expect(root.helpers).toContain(RESOLVE_DIRECTIVE)
     expect(root.directives).toContain(`foo`)
@@ -611,7 +612,7 @@ describe('compiler: element transform', () => {
       tag: `"div"`,
       props: undefined,
       children: undefined,
-      patchFlag: genFlagText(PatchFlags.NEED_PATCH), // should generate appropriate flag
+      patchFlag: PatchFlags.NEED_PATCH, // should generate appropriate flag
       directives: {
         type: NodeTypes.JS_ARRAY_EXPRESSION,
         elements: [
@@ -623,18 +624,18 @@ describe('compiler: element transform', () => {
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `hello`,
-                isStatic: false
+                isStatic: false,
               },
               // arg
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `bar`,
-                isStatic: true
-              }
-            ]
-          }
-        ]
-      }
+                isStatic: true,
+              },
+            ],
+          },
+        ],
+      },
     })
   })
 
@@ -646,24 +647,24 @@ describe('compiler: element transform', () => {
           foo() {
             return {
               props: [],
-              needRuntime: CREATE_VNODE
+              needRuntime: CREATE_VNODE,
             }
-          }
-        }
-      }
+          },
+        },
+      },
     )
 
     expect(root.helpers).toContain(CREATE_VNODE)
     expect(root.helpers).not.toContain(RESOLVE_DIRECTIVE)
     expect(root.directives.length).toBe(0)
     expect(node.directives!.elements[0].elements[0]).toBe(
-      `_${helperNameMap[CREATE_VNODE]}`
+      `_${helperNameMap[CREATE_VNODE]}`,
     )
   })
 
   test('runtime directives', () => {
     const { root, node } = parseWithElementTransform(
-      `<div v-foo v-bar="x" v-baz:[arg].mod.mad="y" />`
+      `<div v-foo v-bar="x" v-baz:[arg].mod.mad="y" />`,
     )
     expect(root.helpers).toContain(RESOLVE_DIRECTIVE)
     expect(root.directives).toContain(`foo`)
@@ -676,7 +677,7 @@ describe('compiler: element transform', () => {
         elements: [
           {
             type: NodeTypes.JS_ARRAY_EXPRESSION,
-            elements: [`_directive_foo`]
+            elements: [`_directive_foo`],
           },
           {
             type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -685,9 +686,9 @@ describe('compiler: element transform', () => {
               // exp
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
-                content: `x`
-              }
-            ]
+                content: `x`,
+              },
+            ],
           },
           {
             type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -697,13 +698,13 @@ describe('compiler: element transform', () => {
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `y`,
-                isStatic: false
+                isStatic: false,
               },
               // arg
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `arg`,
-                isStatic: false
+                isStatic: false,
               },
               // modifiers
               {
@@ -714,33 +715,33 @@ describe('compiler: element transform', () => {
                     key: {
                       type: NodeTypes.SIMPLE_EXPRESSION,
                       content: `mod`,
-                      isStatic: true
+                      isStatic: true,
                     },
                     value: {
                       type: NodeTypes.SIMPLE_EXPRESSION,
                       content: `true`,
-                      isStatic: false
-                    }
+                      isStatic: false,
+                    },
                   },
                   {
                     type: NodeTypes.JS_PROPERTY,
                     key: {
                       type: NodeTypes.SIMPLE_EXPRESSION,
                       content: `mad`,
-                      isStatic: true
+                      isStatic: true,
                     },
                     value: {
                       type: NodeTypes.SIMPLE_EXPRESSION,
                       content: `true`,
-                      isStatic: false
-                    }
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
+                      isStatic: false,
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
     })
   })
 
@@ -749,9 +750,9 @@ describe('compiler: element transform', () => {
       `<div @click.foo="a" @click.bar="b" />`,
       {
         directiveTransforms: {
-          on: transformOn
-        }
-      }
+          on: transformOn,
+        },
+      },
     )
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -761,7 +762,7 @@ describe('compiler: element transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `onClick`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -769,17 +770,17 @@ describe('compiler: element transform', () => {
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `a`,
-                isStatic: false
+                isStatic: false,
               },
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `b`,
-                isStatic: false
-              }
-            ]
-          }
-        }
-      ]
+                isStatic: false,
+              },
+            ],
+          },
+        },
+      ],
     })
   })
 
@@ -789,9 +790,9 @@ describe('compiler: element transform', () => {
       {
         nodeTransforms: [transformStyle, transformElement],
         directiveTransforms: {
-          bind: transformBind
-        }
-      }
+          bind: transformBind,
+        },
+      },
     )
     expect(root.helpers).toContain(NORMALIZE_STYLE)
     expect(node.props).toMatchObject({
@@ -802,7 +803,7 @@ describe('compiler: element transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `style`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.JS_CALL_EXPRESSION,
@@ -814,19 +815,19 @@ describe('compiler: element transform', () => {
                   {
                     type: NodeTypes.SIMPLE_EXPRESSION,
                     content: `{"color":"green"}`,
-                    isStatic: false
+                    isStatic: false,
                   },
                   {
                     type: NodeTypes.SIMPLE_EXPRESSION,
                     content: `{ color: 'red' }`,
-                    isStatic: false
-                  }
-                ]
-              }
-            ]
-          }
-        }
-      ]
+                    isStatic: false,
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
     })
   })
 
@@ -836,10 +837,10 @@ describe('compiler: element transform', () => {
       {
         nodeTransforms: [transformExpression, transformStyle, transformElement],
         directiveTransforms: {
-          bind: transformBind
+          bind: transformBind,
         },
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     expect(root.helpers).toContain(NORMALIZE_STYLE)
     expect(node.props).toMatchObject({
@@ -850,14 +851,14 @@ describe('compiler: element transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `style`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.JS_CALL_EXPRESSION,
-            callee: NORMALIZE_STYLE
-          }
-        }
-      ]
+            callee: NORMALIZE_STYLE,
+          },
+        },
+      ],
     })
   })
 
@@ -867,10 +868,10 @@ describe('compiler: element transform', () => {
       {
         nodeTransforms: [transformExpression, transformStyle, transformElement],
         directiveTransforms: {
-          bind: transformBind
+          bind: transformBind,
         },
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     expect(root.helpers).toContain(NORMALIZE_STYLE)
     expect(node.props).toMatchObject({
@@ -881,14 +882,14 @@ describe('compiler: element transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `style`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.JS_CALL_EXPRESSION,
-            callee: NORMALIZE_STYLE
-          }
-        }
-      ]
+            callee: NORMALIZE_STYLE,
+          },
+        },
+      ],
     })
   })
 
@@ -897,9 +898,9 @@ describe('compiler: element transform', () => {
       `<div class="foo" :class="{ bar: isBar }" />`,
       {
         directiveTransforms: {
-          bind: transformBind
-        }
-      }
+          bind: transformBind,
+        },
+      },
     )
     expect(root.helpers).toContain(NORMALIZE_CLASS)
     expect(node.props).toMatchObject({
@@ -910,7 +911,7 @@ describe('compiler: element transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `class`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.JS_CALL_EXPRESSION,
@@ -922,19 +923,19 @@ describe('compiler: element transform', () => {
                   {
                     type: NodeTypes.SIMPLE_EXPRESSION,
                     content: `foo`,
-                    isStatic: true
+                    isStatic: true,
                   },
                   {
                     type: NodeTypes.SIMPLE_EXPRESSION,
                     content: `{ bar: isBar }`,
-                    isStatic: false
-                  }
-                ]
-              }
-            ]
-          }
-        }
-      ]
+                    isStatic: false,
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
     })
   })
 
@@ -944,35 +945,35 @@ describe('compiler: element transform', () => {
       expect(node.patchFlag).toBeUndefined()
 
       const { node: node2 } = parseWithBind(`<div>{{ foo }}</div>`)
-      expect(node2.patchFlag).toBe(genFlagText(PatchFlags.TEXT))
+      expect(node2.patchFlag).toBe(PatchFlags.TEXT)
 
       // multiple nodes, merged with optimize text
       const { node: node3 } = parseWithBind(`<div>foo {{ bar }} baz</div>`)
-      expect(node3.patchFlag).toBe(genFlagText(PatchFlags.TEXT))
+      expect(node3.patchFlag).toBe(PatchFlags.TEXT)
     })
 
     test('CLASS', () => {
       const { node } = parseWithBind(`<div :class="foo" />`)
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.CLASS))
+      expect(node.patchFlag).toBe(PatchFlags.CLASS)
     })
 
     test('STYLE', () => {
       const { node } = parseWithBind(`<div :style="foo" />`)
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.STYLE))
+      expect(node.patchFlag).toBe(PatchFlags.STYLE)
     })
 
     test('PROPS', () => {
       const { node } = parseWithBind(`<div id="foo" :foo="bar" :baz="qux" />`)
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
+      expect(node.patchFlag).toBe(PatchFlags.PROPS)
       expect(node.dynamicProps).toBe(`["foo", "baz"]`)
     })
 
     test('CLASS + STYLE + PROPS', () => {
       const { node } = parseWithBind(
-        `<div id="foo" :class="cls" :style="styl" :foo="bar" :baz="qux"/>`
+        `<div id="foo" :class="cls" :style="styl" :foo="bar" :baz="qux"/>`,
       )
       expect(node.patchFlag).toBe(
-        genFlagText([PatchFlags.CLASS, PatchFlags.STYLE, PatchFlags.PROPS])
+        PatchFlags.CLASS | PatchFlags.STYLE | PatchFlags.PROPS,
       )
       expect(node.dynamicProps).toBe(`["foo", "baz"]`)
     })
@@ -980,59 +981,59 @@ describe('compiler: element transform', () => {
     // should treat `class` and `style` as PROPS
     test('PROPS on component', () => {
       const { node } = parseWithBind(
-        `<Foo :id="foo" :class="cls" :style="styl" />`
+        `<Foo :id="foo" :class="cls" :style="styl" />`,
       )
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
+      expect(node.patchFlag).toBe(PatchFlags.PROPS)
       expect(node.dynamicProps).toBe(`["id", "class", "style"]`)
     })
 
     test('FULL_PROPS (v-bind)', () => {
       const { node } = parseWithBind(`<div v-bind="foo" />`)
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))
+      expect(node.patchFlag).toBe(PatchFlags.FULL_PROPS)
     })
 
     test('FULL_PROPS (dynamic key)', () => {
       const { node } = parseWithBind(`<div :[foo]="bar" />`)
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))
+      expect(node.patchFlag).toBe(PatchFlags.FULL_PROPS)
     })
 
     test('FULL_PROPS (w/ others)', () => {
       const { node } = parseWithBind(
-        `<div id="foo" v-bind="bar" :class="cls" />`
+        `<div id="foo" v-bind="bar" :class="cls" />`,
       )
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))
+      expect(node.patchFlag).toBe(PatchFlags.FULL_PROPS)
     })
 
     test('NEED_PATCH (static ref)', () => {
       const { node } = parseWithBind(`<div ref="foo" />`)
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
+      expect(node.patchFlag).toBe(PatchFlags.NEED_PATCH)
     })
 
     test('NEED_PATCH (dynamic ref)', () => {
       const { node } = parseWithBind(`<div :ref="foo" />`)
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
+      expect(node.patchFlag).toBe(PatchFlags.NEED_PATCH)
     })
 
     test('NEED_PATCH (custom directives)', () => {
       const { node } = parseWithBind(`<div v-foo />`)
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
+      expect(node.patchFlag).toBe(PatchFlags.NEED_PATCH)
     })
 
     test('NEED_PATCH (vnode hooks)', () => {
       const root = baseCompile(`<div @vue:updated="foo" />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       }).ast
       const node = (root as any).children[0].codegenNode
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
+      expect(node.patchFlag).toBe(PatchFlags.NEED_PATCH)
     })
 
     test('script setup inline mode template ref (binding exists)', () => {
       const { node } = parseWithElementTransform(`<input ref="input"/>`, {
         inline: true,
         bindingMetadata: {
-          input: BindingTypes.SETUP_REF
-        }
+          input: BindingTypes.SETUP_REF,
+        },
       })
       expect(node.props).toMatchObject({
         type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -1041,31 +1042,31 @@ describe('compiler: element transform', () => {
             type: NodeTypes.JS_PROPERTY,
             key: {
               content: 'ref_key',
-              isStatic: true
+              isStatic: true,
             },
             value: {
               content: 'input',
-              isStatic: true
-            }
+              isStatic: true,
+            },
           },
           {
             type: NodeTypes.JS_PROPERTY,
             key: {
               content: 'ref',
-              isStatic: true
+              isStatic: true,
             },
             value: {
               content: 'input',
-              isStatic: false
-            }
-          }
-        ]
+              isStatic: false,
+            },
+          },
+        ],
       })
     })
 
     test('script setup inline mode template ref (binding does not exist)', () => {
       const { node } = parseWithElementTransform(`<input ref="input"/>`, {
-        inline: true
+        inline: true,
       })
       expect(node.props).toMatchObject({
         type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -1074,14 +1075,14 @@ describe('compiler: element transform', () => {
             type: NodeTypes.JS_PROPERTY,
             key: {
               content: 'ref',
-              isStatic: true
+              isStatic: true,
             },
             value: {
               content: 'input',
-              isStatic: true
-            }
-          }
-        ]
+              isStatic: true,
+            },
+          },
+        ],
       })
     })
 
@@ -1090,8 +1091,8 @@ describe('compiler: element transform', () => {
         inline: true,
         bindingMetadata: {
           msg: BindingTypes.PROPS,
-          ref: BindingTypes.SETUP_CONST
-        }
+          ref: BindingTypes.SETUP_CONST,
+        },
       })
       expect(node.props).toMatchObject({
         type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -1100,14 +1101,14 @@ describe('compiler: element transform', () => {
             type: NodeTypes.JS_PROPERTY,
             key: {
               content: 'ref',
-              isStatic: true
+              isStatic: true,
             },
             value: {
               content: 'msg',
-              isStatic: true
-            }
-          }
-        ]
+              isStatic: true,
+            },
+          },
+        ],
       })
     })
 
@@ -1115,35 +1116,29 @@ describe('compiler: element transform', () => {
       // ignore click events (has dedicated fast path)
       const { node } = parseWithElementTransform(`<div @click="foo" />`, {
         directiveTransforms: {
-          on: transformOn
-        }
+          on: transformOn,
+        },
       })
       // should only have props flag
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
+      expect(node.patchFlag).toBe(PatchFlags.PROPS)
 
       const { node: node2 } = parseWithElementTransform(
         `<div @keyup="foo" />`,
         {
           directiveTransforms: {
-            on: transformOn
-          }
-        }
-      )
-      expect(node2.patchFlag).toBe(
-        genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
+            on: transformOn,
+          },
+        },
       )
+      expect(node2.patchFlag).toBe(PatchFlags.PROPS | PatchFlags.NEED_HYDRATION)
     })
 
     test('NEED_HYDRATION for v-bind.prop', () => {
       const { node } = parseWithBind(`<div v-bind:id.prop="id" />`)
-      expect(node.patchFlag).toBe(
-        genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
-      )
+      expect(node.patchFlag).toBe(PatchFlags.PROPS | PatchFlags.NEED_HYDRATION)
 
       const { node: node2 } = parseWithBind(`<div .id="id" />`)
-      expect(node2.patchFlag).toBe(
-        genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
-      )
+      expect(node2.patchFlag).toBe(PatchFlags.PROPS | PatchFlags.NEED_HYDRATION)
     })
 
     // #5870
@@ -1152,27 +1147,25 @@ describe('compiler: element transform', () => {
         `<component :is="foo" @input="foo" />`,
         {
           directiveTransforms: {
-            on: transformOn
-          }
-        }
-      )
-      expect(node.patchFlag).toBe(
-        genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
+            on: transformOn,
+          },
+        },
       )
+      expect(node.patchFlag).toBe(PatchFlags.PROPS | PatchFlags.NEED_HYDRATION)
     })
 
     test('should not have PROPS patchflag for constant v-on handlers', () => {
       const { node } = parseWithElementTransform(`<div @keydown="foo" />`, {
         prefixIdentifiers: true,
         bindingMetadata: {
-          foo: BindingTypes.SETUP_CONST
+          foo: BindingTypes.SETUP_CONST,
         },
         directiveTransforms: {
-          on: transformOn
-        }
+          on: transformOn,
+        },
       })
       // should only have hydration flag
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_HYDRATION))
+      expect(node.patchFlag).toBe(PatchFlags.NEED_HYDRATION)
     })
   })
 
@@ -1188,10 +1181,10 @@ describe('compiler: element transform', () => {
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: 'foo',
-              isStatic: true
-            }
-          ]
-        }
+              isStatic: true,
+            },
+          ],
+        },
       })
     })
 
@@ -1206,10 +1199,10 @@ describe('compiler: element transform', () => {
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: 'foo',
-              isStatic: true
-            }
-          ]
-        }
+              isStatic: true,
+            },
+          ],
+        },
       })
     })
 
@@ -1224,43 +1217,49 @@ describe('compiler: element transform', () => {
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: 'foo',
-              isStatic: false
-            }
-          ]
-        }
+              isStatic: false,
+            },
+          ],
+        },
       })
     })
 
-    // TODO remove in 3.4
-    test('v-is', () => {
-      const { node, root } = parseWithBind(`<div v-is="'foo'" />`)
+    test('dynamic binding shorthand', () => {
+      const { node, root } = parseWithBind(`<component :is />`)
       expect(root.helpers).toContain(RESOLVE_DYNAMIC_COMPONENT)
       expect(node).toMatchObject({
+        isBlock: true,
         tag: {
           callee: RESOLVE_DYNAMIC_COMPONENT,
           arguments: [
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `'foo'`,
-              isStatic: false
-            }
-          ]
+              content: 'is',
+              isStatic: false,
+            },
+          ],
         },
-        // should skip v-is runtime check
-        directives: undefined
       })
-      expect('v-is="component-name" has been deprecated').toHaveBeenWarned()
+    })
+
+    test('is casting', () => {
+      const { node, root } = parseWithBind(`<div is="vue:foo" />`)
+      expect(root.helpers).toContain(RESOLVE_COMPONENT)
+      expect(node).toMatchObject({
+        type: NodeTypes.VNODE_CALL,
+        tag: '_component_foo',
+      })
     })
 
     // #3934
     test('normal component with is prop', () => {
       const { node, root } = parseWithBind(`<custom-input is="foo" />`, {
-        isNativeTag: () => false
+        isNativeTag: () => false,
       })
       expect(root.helpers).toContain(RESOLVE_COMPONENT)
       expect(root.helpers).not.toContain(RESOLVE_DYNAMIC_COMPONENT)
       expect(node).toMatchObject({
-        tag: '_component_custom_input'
+        tag: '_component_custom_input',
       })
     })
   })
@@ -1268,12 +1267,24 @@ describe('compiler: element transform', () => {
   test('<svg> should be forced into blocks', () => {
     const ast = parse(`<div><svg/></div>`)
     transform(ast, {
-      nodeTransforms: [transformElement]
+      nodeTransforms: [transformElement],
     })
     expect((ast as any).children[0].children[0].codegenNode).toMatchObject({
       type: NodeTypes.VNODE_CALL,
       tag: `"svg"`,
-      isBlock: true
+      isBlock: true,
+    })
+  })
+
+  test('<math> should be forced into blocks', () => {
+    const ast = parse(`<div><math/></div>`)
+    transform(ast, {
+      nodeTransforms: [transformElement],
+    })
+    expect((ast as any).children[0].children[0].codegenNode).toMatchObject({
+      type: NodeTypes.VNODE_CALL,
+      tag: `"math"`,
+      isBlock: true,
     })
   })
 
@@ -1285,7 +1296,7 @@ describe('compiler: element transform', () => {
   test('force block for inline before-update handlers w/ children', () => {
     expect(
       parseWithElementTransform(`<div @vue:before-update>hello</div>`).node
-        .isBlock
+        .isBlock,
     ).toBe(true)
   })
 
@@ -1293,12 +1304,12 @@ describe('compiler: element transform', () => {
   test('element with dynamic keys should be forced into blocks', () => {
     const ast = parse(`<div><div :key="foo" /></div>`)
     transform(ast, {
-      nodeTransforms: [transformElement]
+      nodeTransforms: [transformElement],
     })
     expect((ast as any).children[0].children[0].codegenNode).toMatchObject({
       type: NodeTypes.VNODE_CALL,
       tag: `"div"`,
-      isBlock: true
+      isBlock: true,
     })
   })
 
@@ -1313,23 +1324,61 @@ describe('compiler: element transform', () => {
             prop.type === NodeTypes.ATTRIBUTE &&
             prop.name === 'id' &&
             prop.value &&
-            prop.value.content === 'foo'
+            prop.value.content === 'foo',
         )
       ) {
         context.replaceNode({
           ...node,
-          tag: 'span'
+          tag: 'span',
         })
       }
     }
     const ast = parse(`<div><div id="foo" /></div>`)
     transform(ast, {
-      nodeTransforms: [transformElement, transformText, customNodeTransform]
+      nodeTransforms: [transformElement, transformText, customNodeTransform],
     })
     expect((ast as any).children[0].children[0].codegenNode).toMatchObject({
       type: NodeTypes.VNODE_CALL,
       tag: '"span"',
-      isBlock: false
+      isBlock: false,
+    })
+  })
+
+  test('ref_for marker on static ref', () => {
+    const { node } = parseWithForTransform(`<div v-for="i in l" ref="x"/>`)
+    expect((node.children[0] as any).codegenNode.props).toMatchObject(
+      createObjectMatcher({
+        ref_for: `[true]`,
+        ref: 'x',
+      }),
+    )
+  })
+
+  test('ref_for marker on dynamic ref', () => {
+    const { node } = parseWithForTransform(`<div v-for="i in l" :ref="x"/>`)
+    expect((node.children[0] as any).codegenNode.props).toMatchObject(
+      createObjectMatcher({
+        ref_for: `[true]`,
+        ref: '[x]',
+      }),
+    )
+  })
+
+  test('ref_for marker on v-bind', () => {
+    const { node } = parseWithForTransform(`<div v-for="i in l" v-bind="x" />`)
+    expect((node.children[0] as any).codegenNode.props).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: MERGE_PROPS,
+      arguments: [
+        createObjectMatcher({
+          ref_for: `[true]`,
+        }),
+        {
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: 'x',
+          isStatic: false,
+        },
+      ],
     })
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
index 162291136..c92814089 100644
--- a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
@@ -1,14 +1,14 @@
 import {
+  BindingTypes,
+  type CompilerOptions,
+  ConstantTypes,
+  type DirectiveNode,
+  type ElementNode,
+  type InterpolationNode,
+  NodeTypes,
+  baseCompile,
   baseParse as parse,
   transform,
-  ElementNode,
-  DirectiveNode,
-  NodeTypes,
-  CompilerOptions,
-  InterpolationNode,
-  ConstantTypes,
-  BindingTypes,
-  baseCompile
 } from '../../src'
 import { transformIf } from '../../src/transforms/vIf'
 import { transformExpression } from '../../src/transforms/transformExpression'
@@ -16,23 +16,27 @@ import { PatchFlagNames, PatchFlags } from '../../../shared/src'
 
 function parseWithExpressionTransform(
   template: string,
-  options: CompilerOptions = {}
+  options: CompilerOptions = {},
 ) {
-  const ast = parse(template)
+  const ast = parse(template, options)
   transform(ast, {
     prefixIdentifiers: true,
     nodeTransforms: [transformIf, transformExpression],
-    ...options
+    ...options,
   })
   return ast.children[0]
 }
 
+function compile(template: string) {
+  return baseCompile(template, { prefixIdentifiers: true })
+}
+
 describe('compiler: expression transform', () => {
   test('interpolation (root)', () => {
     const node = parseWithExpressionTransform(`{{ foo }}`) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_ctx.foo`
+      content: `_ctx.foo`,
     })
   })
 
@@ -40,34 +44,34 @@ describe('compiler: expression transform', () => {
     const node = parseWithExpressionTransform(`{{}}`) as InterpolationNode
     const node2 = parseWithExpressionTransform(`{{ }}`) as InterpolationNode
     const node3 = parseWithExpressionTransform(
-      `<div>{{ }}</div>`
+      `<div>{{ }}</div>`,
     ) as ElementNode
 
     const objectToBeMatched = {
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: ``
+      content: ``,
     }
     expect(node.content).toMatchObject(objectToBeMatched)
     expect(node2.content).toMatchObject(objectToBeMatched)
     expect((node3.children[0] as InterpolationNode).content).toMatchObject(
-      objectToBeMatched
+      objectToBeMatched,
     )
   })
 
   test('interpolation (children)', () => {
     const el = parseWithExpressionTransform(
-      `<div>{{ foo }}</div>`
+      `<div>{{ foo }}</div>`,
     ) as ElementNode
     const node = el.children[0] as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_ctx.foo`
+      content: `_ctx.foo`,
     })
   })
 
   test('interpolation (complex)', () => {
     const el = parseWithExpressionTransform(
-      `<div>{{ foo + bar(baz.qux) }}</div>`
+      `<div>{{ foo + bar(baz.qux) }}</div>`,
     ) as ElementNode
     const node = el.children[0] as InterpolationNode
     expect(node.content).toMatchObject({
@@ -80,46 +84,46 @@ describe('compiler: expression transform', () => {
         { content: `_ctx.baz` },
         `.`,
         { content: `qux` },
-        `)`
-      ]
+        `)`,
+      ],
     })
   })
 
   test('directive value', () => {
     const node = parseWithExpressionTransform(
-      `<div v-foo:arg="baz"/>`
+      `<div v-foo:arg="baz"/>`,
     ) as ElementNode
     const arg = (node.props[0] as DirectiveNode).arg!
     expect(arg).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `arg`
+      content: `arg`,
     })
     const exp = (node.props[0] as DirectiveNode).exp!
     expect(exp).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_ctx.baz`
+      content: `_ctx.baz`,
     })
   })
 
   test('dynamic directive arg', () => {
     const node = parseWithExpressionTransform(
-      `<div v-foo:[arg]="baz"/>`
+      `<div v-foo:[arg]="baz"/>`,
     ) as ElementNode
     const arg = (node.props[0] as DirectiveNode).arg!
     expect(arg).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_ctx.arg`
+      content: `_ctx.arg`,
     })
     const exp = (node.props[0] as DirectiveNode).exp!
     expect(exp).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_ctx.baz`
+      content: `_ctx.baz`,
     })
   })
 
   test('should prefix complex expressions', () => {
     const node = parseWithExpressionTransform(
-      `{{ foo(baz + 1, { key: kuz }) }}`
+      `{{ foo(baz + 1, { key: kuz }) }}`,
     ) as InterpolationNode
     // should parse into compound expression
     expect(node.content).toMatchObject({
@@ -128,76 +132,57 @@ describe('compiler: expression transform', () => {
         {
           content: `_ctx.foo`,
           loc: {
-            source: `foo`,
-            start: {
-              offset: 3,
-              line: 1,
-              column: 4
-            },
-            end: {
-              offset: 6,
-              line: 1,
-              column: 7
-            }
-          }
+            start: { offset: 3, line: 1, column: 4 },
+            end: { offset: 6, line: 1, column: 7 },
+          },
         },
         `(`,
         {
           content: `_ctx.baz`,
           loc: {
-            source: `baz`,
-            start: {
-              offset: 7,
-              line: 1,
-              column: 8
-            },
-            end: {
-              offset: 10,
-              line: 1,
-              column: 11
-            }
-          }
+            start: { offset: 7, line: 1, column: 8 },
+            end: { offset: 10, line: 1, column: 11 },
+          },
         },
         ` + 1, { key: `,
         {
           content: `_ctx.kuz`,
           loc: {
-            source: `kuz`,
-            start: {
-              offset: 23,
-              line: 1,
-              column: 24
-            },
-            end: {
-              offset: 26,
-              line: 1,
-              column: 27
-            }
-          }
+            start: { offset: 23, line: 1, column: 24 },
+            end: { offset: 26, line: 1, column: 27 },
+          },
         },
-        ` })`
-      ]
+        ` })`,
+      ],
     })
   })
 
   test('should not prefix whitelisted globals', () => {
     const node = parseWithExpressionTransform(
-      `{{ Math.max(1, 2) }}`
+      `{{ Math.max(1, 2) }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
-      children: [{ content: `Math` }, `.`, { content: `max` }, `(1, 2)`]
+      children: [{ content: `Math` }, `.`, { content: `max` }, `(1, 2)`],
+    })
+
+    expect(
+      (parseWithExpressionTransform(`{{ new Error() }}`) as InterpolationNode)
+        .content,
+    ).toMatchObject({
+      type: NodeTypes.COMPOUND_EXPRESSION,
+      children: ['new ', { content: 'Error' }, '()'],
     })
   })
 
   test('should not prefix reserved literals', () => {
     function assert(exp: string) {
       const node = parseWithExpressionTransform(
-        `{{ ${exp} }}`
+        `{{ ${exp} }}`,
       ) as InterpolationNode
       expect(node.content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: exp
+        content: exp,
       })
     }
     assert(`true`)
@@ -208,7 +193,7 @@ describe('compiler: expression transform', () => {
 
   test('should not prefix id of a function declaration', () => {
     const node = parseWithExpressionTransform(
-      `{{ function foo() { return bar } }}`
+      `{{ function foo() { return bar } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -217,14 +202,14 @@ describe('compiler: expression transform', () => {
         { content: `foo` },
         `() { return `,
         { content: `_ctx.bar` },
-        ` }`
-      ]
+        ` }`,
+      ],
     })
   })
 
   test('should not prefix params of a function expression', () => {
     const node = parseWithExpressionTransform(
-      `{{ foo => foo + bar }}`
+      `{{ foo => foo + bar }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -233,14 +218,14 @@ describe('compiler: expression transform', () => {
         ` => `,
         { content: `foo` },
         ` + `,
-        { content: `_ctx.bar` }
-      ]
+        { content: `_ctx.bar` },
+      ],
     })
   })
 
   test('should prefix default value of a function expression param', () => {
     const node = parseWithExpressionTransform(
-      `{{ (foo = baz) => foo + bar }}`
+      `{{ (foo = baz) => foo + bar }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -252,14 +237,14 @@ describe('compiler: expression transform', () => {
         `) => `,
         { content: `foo` },
         ` + `,
-        { content: `_ctx.bar` }
-      ]
+        { content: `_ctx.bar` },
+      ],
     })
   })
 
   test('should not prefix function param destructuring', () => {
     const node = parseWithExpressionTransform(
-      `{{ ({ foo }) => foo + bar }}`
+      `{{ ({ foo }) => foo + bar }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -269,14 +254,14 @@ describe('compiler: expression transform', () => {
         ` }) => `,
         { content: `foo` },
         ` + `,
-        { content: `_ctx.bar` }
-      ]
+        { content: `_ctx.bar` },
+      ],
     })
   })
 
   test('function params should not affect out of scope identifiers', () => {
     const node = parseWithExpressionTransform(
-      `{{ { a: foo => foo, b: foo } }}`
+      `{{ { a: foo => foo, b: foo } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -287,14 +272,14 @@ describe('compiler: expression transform', () => {
         { content: `foo` },
         `, b: `,
         { content: `_ctx.foo` },
-        ` }`
-      ]
+        ` }`,
+      ],
     })
   })
 
   test('should prefix default value of function param destructuring', () => {
     const node = parseWithExpressionTransform(
-      `{{ ({ foo = bar }) => foo + bar }}`
+      `{{ ({ foo = bar }) => foo + bar }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -306,13 +291,14 @@ describe('compiler: expression transform', () => {
         ` }) => `,
         { content: `foo` },
         ` + `,
-        { content: `_ctx.bar` }
-      ]
+        { content: `_ctx.bar` },
+      ],
     })
   })
+
   test('should not prefix an object property key', () => {
     const node = parseWithExpressionTransform(
-      `{{ { foo() { baz() }, value: bar } }}`
+      `{{ { foo() { baz() }, value: bar } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -321,24 +307,24 @@ describe('compiler: expression transform', () => {
         { content: `_ctx.baz` },
         `() }, value: `,
         { content: `_ctx.bar` },
-        ` }`
-      ]
+        ` }`,
+      ],
     })
   })
 
   test('should not duplicate object key with same name as value', () => {
     const node = parseWithExpressionTransform(
-      `{{ { foo: foo } }}`
+      `{{ { foo: foo } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
-      children: [`{ foo: `, { content: `_ctx.foo` }, ` }`]
+      children: [`{ foo: `, { content: `_ctx.foo` }, ` }`],
     })
   })
 
   test('should prefix a computed object property key', () => {
     const node = parseWithExpressionTransform(
-      `{{ { [foo]: bar } }}`
+      `{{ { [foo]: bar } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -347,24 +333,24 @@ describe('compiler: expression transform', () => {
         { content: `_ctx.foo` },
         `]: `,
         { content: `_ctx.bar` },
-        ` }`
-      ]
+        ` }`,
+      ],
     })
   })
 
   test('should prefix object property shorthand value', () => {
     const node = parseWithExpressionTransform(
-      `{{ { foo } }}`
+      `{{ { foo } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
-      children: [`{ foo: `, { content: `_ctx.foo` }, ` }`]
+      children: [`{ foo: `, { content: `_ctx.foo` }, ` }`],
     })
   })
 
   test('should not prefix id in a member expression', () => {
     const node = parseWithExpressionTransform(
-      `{{ foo.bar.baz }}`
+      `{{ foo.bar.baz }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -373,14 +359,14 @@ describe('compiler: expression transform', () => {
         `.`,
         { content: `bar` },
         `.`,
-        { content: `baz` }
-      ]
+        { content: `baz` },
+      ],
     })
   })
 
   test('should prefix computed id in a member expression', () => {
     const node = parseWithExpressionTransform(
-      `{{ foo[bar][baz] }}`
+      `{{ foo[bar][baz] }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -390,8 +376,8 @@ describe('compiler: expression transform', () => {
         { content: `_ctx.bar` },
         `][`,
         { content: '_ctx.baz' },
-        `]`
-      ]
+        `]`,
+      ],
     })
   })
 
@@ -399,23 +385,34 @@ describe('compiler: expression transform', () => {
     const onError = vi.fn()
     parseWithExpressionTransform(`{{ a( }}`, { onError })
     expect(onError.mock.calls[0][0].message).toMatch(
-      `Error parsing JavaScript expression: Unexpected token`
+      `Error parsing JavaScript expression: Unexpected token`,
     )
   })
 
+  test('should not error', () => {
+    const onError = vi.fn()
+    parseWithExpressionTransform(
+      `<p :id="undefined /* force override the id */"/>`,
+      {
+        onError,
+      },
+    )
+    expect(onError).not.toHaveBeenCalled()
+  })
+
   test('should prefix in assignment', () => {
     const node = parseWithExpressionTransform(
-      `{{ x = 1 }}`
+      `{{ x = 1 }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
-      children: [{ content: `_ctx.x` }, ` = 1`]
+      children: [{ content: `_ctx.x` }, ` = 1`],
     })
   })
 
   test('should prefix in assignment pattern', () => {
     const node = parseWithExpressionTransform(
-      `{{ { x, y: [z] } = obj }}`
+      `{{ { x, y: [z] } = obj }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -425,47 +422,156 @@ describe('compiler: expression transform', () => {
         `, y: [`,
         { content: `_ctx.z` },
         `] } = `,
-        { content: `_ctx.obj` }
-      ]
+        { content: `_ctx.obj` },
+      ],
     })
   })
 
   // #8295
   test('should treat floating point number literals as constant', () => {
     const node = parseWithExpressionTransform(
-      `{{ [1, 2.1] }}`
+      `{{ [1, 2.1] }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
-      constType: ConstantTypes.CAN_STRINGIFY
+      constType: ConstantTypes.CAN_STRINGIFY,
     })
   })
 
+  // #10807
+  test('should not bail constant on strings w/ ()', () => {
+    const node = parseWithExpressionTransform(
+      `{{ { foo: 'ok()' } }}`,
+    ) as InterpolationNode
+    expect(node.content).toMatchObject({
+      constType: ConstantTypes.CAN_STRINGIFY,
+    })
+  })
+
+  test('should bail constant for global identifiers w/ new or call expressions', () => {
+    const node = parseWithExpressionTransform(
+      `{{ new Date().getFullYear() }}`,
+    ) as InterpolationNode
+    expect(node.content).toMatchObject({
+      children: [
+        'new ',
+        { constType: ConstantTypes.NOT_CONSTANT },
+        '().',
+        { constType: ConstantTypes.NOT_CONSTANT },
+        '()',
+      ],
+    })
+  })
+
+  test('should not prefix temp variable of for...in', () => {
+    const { code } = compile(
+      `<div @click="() => {
+        for (const x in list) {
+          log(x)
+        }
+        error(x)
+      }"/>`,
+    )
+    expect(code).not.toMatch(`log(_ctx.x)`)
+    expect(code).toMatch(`error(_ctx.x)`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should not prefix temp variable of for...of', () => {
+    const { code } = compile(
+      `<div @click="() => {
+        for (const x of list) {
+          log(x)
+        }
+        error(x)
+      }"/>`,
+    )
+    expect(code).not.toMatch(`log(_ctx.x)`)
+    expect(code).toMatch(`error(_ctx.x)`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should not prefix temp variable of for loop', () => {
+    const { code } = compile(
+      `<div @click="() => {
+        for (let i = 0; i < list.length; i++) {
+          log(i)
+        }
+        error(i)
+      }"/>`,
+    )
+    expect(code).not.toMatch(`log(_ctx.i)`)
+    expect(code).toMatch(`error(_ctx.i)`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should allow leak of var declarations in for loop', () => {
+    const { code } = compile(
+      `<div @click="() => {
+        for (var i = 0; i < list.length; i++) {
+          log(i)
+        }
+        error(i)
+      }"/>`,
+    )
+    expect(code).not.toMatch(`log(_ctx.i)`)
+    expect(code).not.toMatch(`error(_ctx.i)`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should not prefix catch block param', () => {
+    const { code } = compile(
+      `<div @click="() => {
+         try {} catch (err) { console.error(err) }
+        console.log(err)
+      }"/>`,
+    )
+    expect(code).not.toMatch(`console.error(_ctx.err)`)
+    expect(code).toMatch(`console.log(_ctx.err)`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should not prefix destructured catch block param', () => {
+    const { code } = compile(
+      `<div @click="() => {
+        try {
+          throw new Error('sup?')
+        } catch ({ message: { length } }) {
+          console.error(length)
+        }
+        console.log(length)
+      }"/>`,
+    )
+    expect(code).not.toMatch(`console.error(_ctx.length)`)
+    expect(code).toMatch(`console.log(_ctx.length)`)
+    expect(code).toMatchSnapshot()
+  })
+
   describe('ES Proposals support', () => {
     test('bigInt', () => {
       const node = parseWithExpressionTransform(
-        `{{ 13000n }}`
+        `{{ 13000n }}`,
       ) as InterpolationNode
       expect(node.content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
         content: `13000n`,
         isStatic: false,
-        constType: ConstantTypes.CAN_STRINGIFY
+        constType: ConstantTypes.CAN_STRINGIFY,
       })
     })
 
     test('nullish coalescing', () => {
       const node = parseWithExpressionTransform(
-        `{{ a ?? b }}`
+        `{{ a ?? b }}`,
       ) as InterpolationNode
       expect(node.content).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
-        children: [{ content: `_ctx.a` }, ` ?? `, { content: `_ctx.b` }]
+        children: [{ content: `_ctx.a` }, ` ?? `, { content: `_ctx.b` }],
       })
     })
 
     test('optional chaining', () => {
       const node = parseWithExpressionTransform(
-        `{{ a?.b?.c }}`
+        `{{ a?.b?.c }}`,
       ) as InterpolationNode
       expect(node.content).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
@@ -474,8 +580,8 @@ describe('compiler: expression transform', () => {
           `?.`,
           { content: `b` },
           `?.`,
-          { content: `c` }
-        ]
+          { content: `c` },
+        ],
       })
     })
 
@@ -486,14 +592,18 @@ describe('compiler: expression transform', () => {
           [
             'pipelineOperator',
             {
-              proposal: 'minimal'
-            }
-          ]
-        ]
+              proposal: 'minimal',
+            },
+          ],
+        ],
       }) as InterpolationNode
       expect(node.content).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
-        children: [{ content: `_ctx.a` }, ` |> `, { content: `_ctx.uppercase` }]
+        children: [
+          { content: `_ctx.a` },
+          ` |> `,
+          { content: `_ctx.uppercase` },
+        ],
       })
     })
   })
@@ -507,23 +617,23 @@ describe('compiler: expression transform', () => {
       options: BindingTypes.OPTIONS,
       reactive: BindingTypes.SETUP_REACTIVE_CONST,
       literal: BindingTypes.LITERAL_CONST,
-      isNaN: BindingTypes.SETUP_REF
+      isNaN: BindingTypes.SETUP_REF,
     }
 
     function compileWithBindingMetadata(
       template: string,
-      options?: CompilerOptions
+      options?: CompilerOptions,
     ) {
       return baseCompile(template, {
         prefixIdentifiers: true,
         bindingMetadata,
-        ...options
+        ...options,
       })
     }
 
     test('non-inline mode', () => {
       const { code } = compileWithBindingMetadata(
-        `<div>{{ props }} {{ setup }} {{ data }} {{ options }} {{ isNaN }}</div>`
+        `<div>{{ props }} {{ setup }} {{ data }} {{ options }} {{ isNaN }}</div>`,
       )
       expect(code).toMatch(`$props.props`)
       expect(code).toMatch(`$setup.setup`)
@@ -534,46 +644,10 @@ describe('compiler: expression transform', () => {
       expect(code).toMatchSnapshot()
     })
 
-    test('should not prefix temp variable of for...in', () => {
-      const { code } = compileWithBindingMetadata(
-        `<div @click="() => {
-          for (const x in list) {
-            log(x)
-          }         
-        }"/>`
-      )
-      expect(code).not.toMatch(`_ctx.x`)
-      expect(code).toMatchSnapshot()
-    })
-
-    test('should not prefix temp variable of for...of', () => {
-      const { code } = compileWithBindingMetadata(
-        `<div @click="() => {
-          for (const x of list) {
-            log(x)
-          }         
-        }"/>`
-      )
-      expect(code).not.toMatch(`_ctx.x`)
-      expect(code).toMatchSnapshot()
-    })
-
-    test('should not prefix temp variable of for loop', () => {
-      const { code } = compileWithBindingMetadata(
-        `<div @click="() => {
-          for (let i = 0; i < list.length; i++) {
-            log(i)
-          }         
-        }"/>`
-      )
-      expect(code).not.toMatch(`_ctx.i`)
-      expect(code).toMatchSnapshot()
-    })
-
     test('inline mode', () => {
       const { code } = compileWithBindingMetadata(
         `<div>{{ props }} {{ setup }} {{ setupConst }} {{ data }} {{ options }} {{ isNaN }}</div>`,
-        { inline: true }
+        { inline: true },
       )
       expect(code).toMatch(`__props.props`)
       expect(code).toMatch(`_unref(setup)`)
@@ -586,12 +660,12 @@ describe('compiler: expression transform', () => {
 
     test('literal const handling', () => {
       const { code } = compileWithBindingMetadata(`<div>{{ literal }}</div>`, {
-        inline: true
+        inline: true,
       })
       expect(code).toMatch(`toDisplayString(literal)`)
       // #7973 should skip patch for literal const
       expect(code).not.toMatch(
-        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`
+        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`,
       )
     })
 
@@ -600,18 +674,46 @@ describe('compiler: expression transform', () => {
       expect(code).toMatch(`toDisplayString($setup.literal)`)
       // #7973 should skip patch for literal const
       expect(code).not.toMatch(
-        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`
+        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`,
       )
     })
 
     test('reactive const handling', () => {
       const { code } = compileWithBindingMetadata(`<div>{{ reactive }}</div>`, {
-        inline: true
+        inline: true,
       })
       // #7973 should not skip patch for reactive const
       expect(code).toMatch(
-        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`
+        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`,
       )
     })
+
+    // #10754
+    test('await expression in right hand of assignment, inline mode', () => {
+      const node = parseWithExpressionTransform(
+        `{{ (async () => { x = await bar })() }}`,
+        {
+          inline: true,
+          bindingMetadata: {
+            x: BindingTypes.SETUP_LET,
+            bar: BindingTypes.SETUP_CONST,
+          },
+        },
+      ) as InterpolationNode
+      expect(node.content).toMatchObject({
+        type: NodeTypes.COMPOUND_EXPRESSION,
+        children: [
+          `(async () => { `,
+          {
+            content: `_isRef(x) ? x.value = await bar : x`,
+          },
+          ` = await `,
+          {
+            content: `bar`,
+          },
+          ` })()`,
+        ],
+      })
+    })
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
index 72753d523..6420bdbbd 100644
--- a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
@@ -1,10 +1,10 @@
 import {
-  CompilerOptions,
+  type CompilerOptions,
+  type ElementNode,
+  ErrorCodes,
+  NodeTypes,
   baseParse as parse,
   transform,
-  ElementNode,
-  NodeTypes,
-  ErrorCodes
 } from '../../src'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformOn } from '../../src/transforms/vOn'
@@ -19,13 +19,13 @@ function parseWithSlots(template: string, options: CompilerOptions = {}) {
     nodeTransforms: [
       ...(options.prefixIdentifiers ? [transformExpression] : []),
       transformSlotOutlet,
-      transformElement
+      transformElement,
     ],
     directiveTransforms: {
       on: transformOn,
-      bind: transformBind
+      bind: transformBind,
     },
-    ...options
+    ...options,
   })
   return ast
 }
@@ -36,7 +36,7 @@ describe('compiler: transform <slot> outlets', () => {
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: RENDER_SLOT,
-      arguments: [`$slots`, `"default"`]
+      arguments: [`$slots`, `"default"`],
     })
   })
 
@@ -45,7 +45,7 @@ describe('compiler: transform <slot> outlets', () => {
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: RENDER_SLOT,
-      arguments: [`$slots`, `"foo"`]
+      arguments: [`$slots`, `"foo"`],
     })
   })
 
@@ -59,15 +59,15 @@ describe('compiler: transform <slot> outlets', () => {
         {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: `foo`,
-          isStatic: false
-        }
-      ]
+          isStatic: false,
+        },
+      ],
     })
   })
 
   test('dynamically named slot outlet w/ prefixIdentifiers: true', () => {
     const ast = parseWithSlots(`<slot :name="foo + bar" />`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
@@ -80,23 +80,23 @@ describe('compiler: transform <slot> outlets', () => {
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: `_ctx.foo`,
-              isStatic: false
+              isStatic: false,
             },
             ` + `,
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: `_ctx.bar`,
-              isStatic: false
-            }
-          ]
-        }
-      ]
+              isStatic: false,
+            },
+          ],
+        },
+      ],
     })
   })
 
   test('default slot outlet with props', () => {
     const ast = parseWithSlots(
-      `<slot foo="bar" :baz="qux" :foo-bar="foo-bar" />`
+      `<slot foo="bar" :baz="qux" :foo-bar="foo-bar" />`,
     )
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
@@ -110,36 +110,36 @@ describe('compiler: transform <slot> outlets', () => {
             {
               key: {
                 content: `foo`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `bar`,
-                isStatic: true
-              }
+                isStatic: true,
+              },
             },
             {
               key: {
                 content: `baz`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `qux`,
-                isStatic: false
-              }
+                isStatic: false,
+              },
             },
             {
               key: {
                 content: `fooBar`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `foo-bar`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -158,26 +158,26 @@ describe('compiler: transform <slot> outlets', () => {
             {
               key: {
                 content: `foo`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `bar`,
-                isStatic: true
-              }
+                isStatic: true,
+              },
             },
             {
               key: {
                 content: `baz`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `qux`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -196,26 +196,26 @@ describe('compiler: transform <slot> outlets', () => {
             {
               key: {
                 content: `foo`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `bar`,
-                isStatic: true
-              }
+                isStatic: true,
+              },
             },
             {
               key: {
                 content: `baz`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `qux`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -234,11 +234,11 @@ describe('compiler: transform <slot> outlets', () => {
           returns: [
             {
               type: NodeTypes.ELEMENT,
-              tag: `div`
-            }
-          ]
-        }
-      ]
+              tag: `div`,
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -257,11 +257,11 @@ describe('compiler: transform <slot> outlets', () => {
           returns: [
             {
               type: NodeTypes.ELEMENT,
-              tag: `div`
-            }
-          ]
-        }
-      ]
+              tag: `div`,
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -279,14 +279,14 @@ describe('compiler: transform <slot> outlets', () => {
             {
               key: {
                 content: `foo`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `bar`,
-                isStatic: false
-              }
-            }
-          ]
+                isStatic: false,
+              },
+            },
+          ],
         },
         {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
@@ -294,11 +294,11 @@ describe('compiler: transform <slot> outlets', () => {
           returns: [
             {
               type: NodeTypes.ELEMENT,
-              tag: `div`
-            }
-          ]
-        }
-      ]
+              tag: `div`,
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -316,14 +316,14 @@ describe('compiler: transform <slot> outlets', () => {
             {
               key: {
                 content: `foo`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `bar`,
-                isStatic: false
-              }
-            }
-          ]
+                isStatic: false,
+              },
+            },
+          ],
         },
         {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
@@ -331,11 +331,11 @@ describe('compiler: transform <slot> outlets', () => {
           returns: [
             {
               type: NodeTypes.ELEMENT,
-              tag: `div`
-            }
-          ]
-        }
-      ]
+              tag: `div`,
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -344,11 +344,11 @@ describe('compiler: transform <slot> outlets', () => {
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: RENDER_SLOT,
-      arguments: [`$slots`, `"default"`, `{}`, `undefined`, `true`]
+      arguments: [`$slots`, `"default"`, `{}`, `undefined`, `true`],
     })
     const fallback = parseWithSlots(`<slot>fallback</slot>`, {
       slotted: false,
-      scopeId: 'foo'
+      scopeId: 'foo',
     })
 
     const child = {
@@ -357,14 +357,14 @@ describe('compiler: transform <slot> outlets', () => {
       returns: [
         {
           type: NodeTypes.TEXT,
-          content: `fallback`
-        }
-      ]
+          content: `fallback`,
+        },
+      ],
     }
     expect((fallback.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: RENDER_SLOT,
-      arguments: [`$slots`, `"default"`, `{}`, child, `true`]
+      arguments: [`$slots`, `"default"`, `{}`, child, `true`],
     })
   })
 
@@ -376,18 +376,33 @@ describe('compiler: transform <slot> outlets', () => {
     expect(onError.mock.calls[0][0]).toMatchObject({
       code: ErrorCodes.X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET,
       loc: {
-        source: `v-foo`,
         start: {
           offset: index,
           line: 1,
-          column: index + 1
+          column: index + 1,
         },
         end: {
           offset: index + 5,
           line: 1,
-          column: index + 6
-        }
-      }
+          column: index + 6,
+        },
+      },
+    })
+  })
+
+  test('dynamically named slot outlet with v-bind shorthand', () => {
+    const ast = parseWithSlots(`<slot :name />`)
+    expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: RENDER_SLOT,
+      arguments: [
+        `$slots`,
+        {
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: `name`,
+          isStatic: false,
+        },
+      ],
     })
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/transformText.spec.ts b/packages/compiler-core/__tests__/transforms/transformText.spec.ts
index 6e321d145..1a6d6916a 100644
--- a/packages/compiler-core/__tests__/transforms/transformText.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformText.spec.ts
@@ -1,11 +1,11 @@
 import {
-  CompilerOptions,
-  baseParse as parse,
-  transform,
+  type CompilerOptions,
+  type ElementNode,
+  type ForNode,
   NodeTypes,
   generate,
-  ForNode,
-  ElementNode
+  baseParse as parse,
+  transform,
 } from '../../src'
 import { transformFor } from '../../src/transforms/vFor'
 import { transformText } from '../../src/transforms/transformText'
@@ -22,9 +22,9 @@ function transformWithTextOpt(template: string, options: CompilerOptions = {}) {
       transformFor,
       ...(options.prefixIdentifiers ? [transformExpression] : []),
       transformElement,
-      transformText
+      transformText,
     ],
-    ...options
+    ...options,
   })
   return ast
 }
@@ -35,8 +35,8 @@ describe('compiler: transform text', () => {
     expect(root.children[0]).toMatchObject({
       type: NodeTypes.INTERPOLATION,
       content: {
-        content: `foo`
-      }
+        content: `foo`,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -51,8 +51,8 @@ describe('compiler: transform text', () => {
         ` + `,
         { type: NodeTypes.TEXT, content: ` bar ` },
         ` + `,
-        { type: NodeTypes.INTERPOLATION, content: { content: `baz` } }
-      ]
+        { type: NodeTypes.INTERPOLATION, content: { content: `baz` } },
+      ],
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -75,12 +75,12 @@ describe('compiler: transform text', () => {
               ` + `,
               { type: NodeTypes.TEXT, content: ` bar ` },
               ` + `,
-              { type: NodeTypes.INTERPOLATION, content: { content: `baz` } }
-            ]
+              { type: NodeTypes.INTERPOLATION, content: { content: `baz` } },
+            ],
           },
-          genFlagText(PatchFlags.TEXT)
-        ]
-      }
+          genFlagText(PatchFlags.TEXT),
+        ],
+      },
     })
     expect(root.children[2].type).toBe(NodeTypes.ELEMENT)
     expect(generate(root).code).toMatchSnapshot()
@@ -99,11 +99,11 @@ describe('compiler: transform text', () => {
         arguments: [
           {
             type: NodeTypes.TEXT,
-            content: `hello`
-          }
+            content: `hello`,
+          },
           // should have no flag
-        ]
-      }
+        ],
+      },
     })
     expect(root.children[2].type).toBe(NodeTypes.ELEMENT)
     expect(generate(root).code).toMatchSnapshot()
@@ -111,7 +111,7 @@ describe('compiler: transform text', () => {
 
   test('consecutive text mixed with elements', () => {
     const root = transformWithTextOpt(
-      `<div/>{{ foo }} bar {{ baz }}<div/>hello<div/>`
+      `<div/>{{ foo }} bar {{ baz }}<div/>hello<div/>`,
     )
     expect(root.children.length).toBe(5)
     expect(root.children[0].type).toBe(NodeTypes.ELEMENT)
@@ -128,12 +128,12 @@ describe('compiler: transform text', () => {
               ` + `,
               { type: NodeTypes.TEXT, content: ` bar ` },
               ` + `,
-              { type: NodeTypes.INTERPOLATION, content: { content: `baz` } }
-            ]
+              { type: NodeTypes.INTERPOLATION, content: { content: `baz` } },
+            ],
           },
-          genFlagText(PatchFlags.TEXT)
-        ]
-      }
+          genFlagText(PatchFlags.TEXT),
+        ],
+      },
     })
     expect(root.children[2].type).toBe(NodeTypes.ELEMENT)
     expect(root.children[3]).toMatchObject({
@@ -144,10 +144,10 @@ describe('compiler: transform text', () => {
         arguments: [
           {
             type: NodeTypes.TEXT,
-            content: `hello`
-          }
-        ]
-      }
+            content: `hello`,
+          },
+        ],
+      },
     })
     expect(root.children[4].type).toBe(NodeTypes.ELEMENT)
     expect(generate(root).code).toMatchSnapshot()
@@ -155,21 +155,21 @@ describe('compiler: transform text', () => {
 
   test('<template v-for>', () => {
     const root = transformWithTextOpt(
-      `<template v-for="i in list">foo</template>`
+      `<template v-for="i in list">foo</template>`,
     )
     expect(root.children[0].type).toBe(NodeTypes.FOR)
     const forNode = root.children[0] as ForNode
     // should convert template v-for text children because they are inside
     // fragments
     expect(forNode.children[0]).toMatchObject({
-      type: NodeTypes.TEXT_CALL
+      type: NodeTypes.TEXT_CALL,
     })
     expect(generate(root).code).toMatchSnapshot()
   })
 
   test('with prefixIdentifiers: true', () => {
     const root = transformWithTextOpt(`{{ foo }} bar {{ baz + qux }}`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(root.children.length).toBe(1)
     expect(root.children[0]).toMatchObject({
@@ -183,15 +183,15 @@ describe('compiler: transform text', () => {
           type: NodeTypes.INTERPOLATION,
           content: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [{ content: `_ctx.baz` }, ` + `, { content: `_ctx.qux` }]
-          }
-        }
-      ]
+            children: [{ content: `_ctx.baz` }, ` + `, { content: `_ctx.qux` }],
+          },
+        },
+      ],
     })
     expect(
       generate(root, {
-        prefixIdentifiers: true
-      }).code
+        prefixIdentifiers: true,
+      }).code,
     ).toMatchSnapshot()
   })
 
@@ -210,12 +210,12 @@ describe('compiler: transform text', () => {
             type: NodeTypes.INTERPOLATION,
             content: {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: 'foo'
-            }
+              content: 'foo',
+            },
           },
-          genFlagText(PatchFlags.TEXT)
-        ]
-      }
+          genFlagText(PatchFlags.TEXT),
+        ],
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
diff --git a/packages/compiler-core/__tests__/transforms/vBind.spec.ts b/packages/compiler-core/__tests__/transforms/vBind.spec.ts
index 322cf9d1b..be063b8a9 100644
--- a/packages/compiler-core/__tests__/transforms/vBind.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vBind.spec.ts
@@ -1,37 +1,37 @@
 import {
+  type CallExpression,
+  type CompilerOptions,
+  type ElementNode,
+  ErrorCodes,
+  NodeTypes,
+  type ObjectExpression,
+  type VNodeCall,
   baseParse as parse,
   transform,
-  ElementNode,
-  ObjectExpression,
-  CompilerOptions,
-  ErrorCodes,
-  VNodeCall,
-  NodeTypes,
-  CallExpression
 } from '../../src'
 import { transformBind } from '../../src/transforms/vBind'
 import { transformElement } from '../../src/transforms/transformElement'
 import {
   CAMELIZE,
+  NORMALIZE_PROPS,
   helperNameMap,
-  NORMALIZE_PROPS
 } from '../../src/runtimeHelpers'
 import { transformExpression } from '../../src/transforms/transformExpression'
 
 function parseWithVBind(
   template: string,
-  options: CompilerOptions = {}
+  options: CompilerOptions = {},
 ): ElementNode {
   const ast = parse(template)
   transform(ast, {
     nodeTransforms: [
       ...(options.prefixIdentifiers ? [transformExpression] : []),
-      transformElement
+      transformElement,
     ],
     directiveTransforms: {
-      bind: transformBind
+      bind: transformBind,
     },
-    ...options
+    ...options,
   })
   return ast.children[0] as ElementNode
 }
@@ -47,13 +47,13 @@ describe('compiler: transform v-bind', () => {
         loc: {
           start: {
             line: 1,
-            column: 13
+            column: 13,
           },
           end: {
             line: 1,
-            column: 15
-          }
-        }
+            column: 15,
+          },
+        },
       },
       value: {
         content: `id`,
@@ -61,14 +61,52 @@ describe('compiler: transform v-bind', () => {
         loc: {
           start: {
             line: 1,
-            column: 17
+            column: 17,
           },
           end: {
             line: 1,
-            column: 19
-          }
-        }
-      }
+            column: 19,
+          },
+        },
+      },
+    })
+  })
+
+  test('no expression', () => {
+    const node = parseWithVBind(`<div v-bind:id />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `id`,
+        isStatic: true,
+        loc: {
+          start: { line: 1, column: 13, offset: 12 },
+          end: { line: 1, column: 15, offset: 14 },
+        },
+      },
+      value: {
+        content: `id`,
+        isStatic: false,
+        loc: {
+          start: { line: 1, column: 13, offset: 12 },
+          end: { line: 1, column: 15, offset: 14 },
+        },
+      },
+    })
+  })
+
+  test('no expression (shorthand)', () => {
+    const node = parseWithVBind(`<div :id />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `id`,
+        isStatic: true,
+      },
+      value: {
+        content: `id`,
+        isStatic: false,
+      },
     })
   })
 
@@ -85,45 +123,45 @@ describe('compiler: transform v-bind', () => {
             {
               key: {
                 content: `id || ""`,
-                isStatic: false
+                isStatic: false,
               },
               value: {
                 content: `id`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
-  test('should error if no expression', () => {
+  test('should error if empty expression', () => {
     const onError = vi.fn()
-    const node = parseWithVBind(`<div v-bind:arg />`, { onError })
+    const node = parseWithVBind(`<div v-bind:arg="" />`, { onError })
     const props = (node.codegenNode as VNodeCall).props as ObjectExpression
     expect(onError.mock.calls[0][0]).toMatchObject({
       code: ErrorCodes.X_V_BIND_NO_EXPRESSION,
       loc: {
         start: {
           line: 1,
-          column: 6
+          column: 6,
         },
         end: {
           line: 1,
-          column: 16
-        }
-      }
+          column: 19,
+        },
+      },
     })
     expect(props.properties[0]).toMatchObject({
       key: {
         content: `arg`,
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: ``,
-        isStatic: true
-      }
+        isStatic: true,
+      },
     })
   })
 
@@ -133,12 +171,27 @@ describe('compiler: transform v-bind', () => {
     expect(props.properties[0]).toMatchObject({
       key: {
         content: `fooBar`,
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: `id`,
-        isStatic: false
-      }
+        isStatic: false,
+      },
+    })
+  })
+
+  test('.camel modifier w/ no expression', () => {
+    const node = parseWithVBind(`<div v-bind:foo-bar.camel />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `fooBar`,
+        isStatic: true,
+      },
+      value: {
+        content: `fooBar`,
+        isStatic: false,
+      },
     })
   })
 
@@ -155,22 +208,22 @@ describe('compiler: transform v-bind', () => {
             {
               key: {
                 content: `_${helperNameMap[CAMELIZE]}(foo || "")`,
-                isStatic: false
+                isStatic: false,
               },
               value: {
                 content: `id`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
   test('.camel modifier w/ dynamic arg + prefixIdentifiers', () => {
     const node = parseWithVBind(`<div v-bind:[foo(bar)].camel="id"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const props = (node.codegenNode as VNodeCall).props as CallExpression
     expect(props).toMatchObject({
@@ -190,17 +243,17 @@ describe('compiler: transform v-bind', () => {
                   { content: `_ctx.bar` },
                   `)`,
                   `) || ""`,
-                  `)`
-                ]
+                  `)`,
+                ],
               },
               value: {
                 content: `_ctx.id`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -210,12 +263,27 @@ describe('compiler: transform v-bind', () => {
     expect(props.properties[0]).toMatchObject({
       key: {
         content: `.fooBar`,
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: `id`,
-        isStatic: false
-      }
+        isStatic: false,
+      },
+    })
+  })
+
+  test('.prop modifier w/ no expression', () => {
+    const node = parseWithVBind(`<div v-bind:fooBar.prop />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `.fooBar`,
+        isStatic: true,
+      },
+      value: {
+        content: `fooBar`,
+        isStatic: false,
+      },
     })
   })
 
@@ -232,22 +300,22 @@ describe('compiler: transform v-bind', () => {
             {
               key: {
                 content: '`.${fooBar || ""}`',
-                isStatic: false
+                isStatic: false,
               },
               value: {
                 content: `id`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
   test('.prop modifier w/ dynamic arg + prefixIdentifiers', () => {
     const node = parseWithVBind(`<div v-bind:[foo(bar)].prop="id"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const props = (node.codegenNode as VNodeCall).props as CallExpression
     expect(props).toMatchObject({
@@ -267,17 +335,17 @@ describe('compiler: transform v-bind', () => {
                   { content: `_ctx.bar` },
                   `)`,
                   `) || ""`,
-                  `)`
-                ]
+                  `)`,
+                ],
               },
               value: {
                 content: `_ctx.id`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -287,12 +355,27 @@ describe('compiler: transform v-bind', () => {
     expect(props.properties[0]).toMatchObject({
       key: {
         content: `.fooBar`,
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: `id`,
-        isStatic: false
-      }
+        isStatic: false,
+      },
+    })
+  })
+
+  test('.prop modifier (shortband) w/ no expression', () => {
+    const node = parseWithVBind(`<div .fooBar />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `.fooBar`,
+        isStatic: true,
+      },
+      value: {
+        content: `fooBar`,
+        isStatic: false,
+      },
     })
   })
 
@@ -302,12 +385,45 @@ describe('compiler: transform v-bind', () => {
     expect(props.properties[0]).toMatchObject({
       key: {
         content: `^foo-bar`,
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: `id`,
-        isStatic: false
-      }
+        isStatic: false,
+      },
+    })
+  })
+
+  test('.attr modifier w/ no expression', () => {
+    const node = parseWithVBind(`<div v-bind:foo-bar.attr />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `^foo-bar`,
+        isStatic: true,
+      },
+      value: {
+        content: `fooBar`,
+        isStatic: false,
+      },
+    })
+  })
+
+  test('error on invalid argument for same-name shorthand', () => {
+    const onError = vi.fn()
+    parseWithVBind(`<div v-bind:[arg] />`, { onError })
+    expect(onError.mock.calls[0][0]).toMatchObject({
+      code: ErrorCodes.X_V_BIND_INVALID_SAME_NAME_ARGUMENT,
+      loc: {
+        start: {
+          line: 1,
+          column: 13,
+        },
+        end: {
+          line: 1,
+          column: 18,
+        },
+      },
     })
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vFor.spec.ts b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
index 60a9378eb..fead2476a 100644
--- a/packages/compiler-core/__tests__/transforms/vFor.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
@@ -1,4 +1,4 @@
-import { baseParse as parse } from '../../src/parse'
+import { baseParse as parse } from '../../src/parser'
 import { transform } from '../../src/transform'
 import { transformIf } from '../../src/transforms/vIf'
 import { transformFor } from '../../src/transforms/vFor'
@@ -7,24 +7,28 @@ import { transformElement } from '../../src/transforms/transformElement'
 import { transformSlotOutlet } from '../../src/transforms/transformSlotOutlet'
 import { transformExpression } from '../../src/transforms/transformExpression'
 import {
-  ForNode,
+  ConstantTypes,
+  type ElementNode,
+  type ForCodegenNode,
+  type ForNode,
+  type InterpolationNode,
   NodeTypes,
-  SimpleExpressionNode,
-  ElementNode,
-  InterpolationNode,
-  ForCodegenNode,
-  ConstantTypes
+  type RootNode,
+  type SimpleExpressionNode,
 } from '../../src/ast'
 import { ErrorCodes } from '../../src/errors'
-import { CompilerOptions, generate } from '../../src'
+import { type CompilerOptions, generate } from '../../src'
 import { FRAGMENT, RENDER_LIST, RENDER_SLOT } from '../../src/runtimeHelpers'
 import { PatchFlags } from '@vue/shared'
-import { createObjectMatcher, genFlagText } from '../testUtils'
+import { createObjectMatcher } from '../testUtils'
 
-function parseWithForTransform(
+export function parseWithForTransform(
   template: string,
-  options: CompilerOptions = {}
-) {
+  options: CompilerOptions = {},
+): {
+  root: RootNode
+  node: ForNode & { codegenNode: ForCodegenNode }
+} {
   const ast = parse(template, options)
   transform(ast, {
     nodeTransforms: [
@@ -32,16 +36,16 @@ function parseWithForTransform(
       transformFor,
       ...(options.prefixIdentifiers ? [transformExpression] : []),
       transformSlotOutlet,
-      transformElement
+      transformElement,
     ],
     directiveTransforms: {
-      bind: transformBind
+      bind: transformBind,
     },
-    ...options
+    ...options,
   })
   return {
     root: ast,
-    node: ast.children[0] as ForNode & { codegenNode: ForCodegenNode }
+    node: ast.children[0] as ForNode & { codegenNode: ForCodegenNode },
   }
 }
 
@@ -49,7 +53,7 @@ describe('compiler: v-for', () => {
   describe('transform', () => {
     test('number expression', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="index in 5" />'
+        '<span v-for="index in 5" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).toBeUndefined()
@@ -59,7 +63,7 @@ describe('compiler: v-for', () => {
 
     test('value', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="(item) in items" />'
+        '<span v-for="(item) in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).toBeUndefined()
@@ -69,31 +73,31 @@ describe('compiler: v-for', () => {
 
     test('object de-structured value', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="({ id, value }) in items" />'
+        '<span v-for="({ id, value }) in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).toBeUndefined()
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe(
-        '{ id, value }'
+        '{ id, value }',
       )
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
     })
 
     test('array de-structured value', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="([ id, value ]) in items" />'
+        '<span v-for="([ id, value ]) in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).toBeUndefined()
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe(
-        '[ id, value ]'
+        '[ id, value ]',
       )
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
     })
 
     test('value and key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="(item, key) in items" />'
+        '<span v-for="(item, key) in items" />',
       )
       expect(forNode.keyAlias).not.toBeUndefined()
       expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
@@ -104,13 +108,13 @@ describe('compiler: v-for', () => {
 
     test('value, key and index', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="(value, key, index) in items" />'
+        '<span v-for="(value, key, index) in items" />',
       )
       expect(forNode.keyAlias).not.toBeUndefined()
       expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
@@ -118,12 +122,12 @@ describe('compiler: v-for', () => {
 
     test('skipped key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="(value,,index) in items" />'
+        '<span v-for="(value,,index) in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
@@ -131,12 +135,12 @@ describe('compiler: v-for', () => {
 
     test('skipped value and key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="(,,index) in items" />'
+        '<span v-for="(,,index) in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect(forNode.valueAlias).toBeUndefined()
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
@@ -144,7 +148,7 @@ describe('compiler: v-for', () => {
 
     test('unbracketed value', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="item in items" />'
+        '<span v-for="item in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).toBeUndefined()
@@ -154,7 +158,7 @@ describe('compiler: v-for', () => {
 
     test('unbracketed value and key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="item, key in items" />'
+        '<span v-for="item, key in items" />',
       )
       expect(forNode.keyAlias).not.toBeUndefined()
       expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
@@ -165,13 +169,13 @@ describe('compiler: v-for', () => {
 
     test('unbracketed value, key and index', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="value, key, index in items" />'
+        '<span v-for="value, key, index in items" />',
       )
       expect(forNode.keyAlias).not.toBeUndefined()
       expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
@@ -179,12 +183,12 @@ describe('compiler: v-for', () => {
 
     test('unbracketed skipped key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="value, , index in items" />'
+        '<span v-for="value, , index in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
@@ -192,16 +196,28 @@ describe('compiler: v-for', () => {
 
     test('unbracketed skipped value and key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for=", , index in items" />'
+        '<span v-for=", , index in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect(forNode.valueAlias).toBeUndefined()
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
     })
+
+    test('source containing string expression with spaces', () => {
+      const { node: forNode } = parseWithForTransform(
+        `<span v-for="item in state ['my items']" />`,
+      )
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item')
+      expect((forNode.source as SimpleExpressionNode).content).toBe(
+        "state ['my items']",
+      )
+    })
   })
 
   describe('errors', () => {
@@ -212,8 +228,8 @@ describe('compiler: v-for', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_NO_EXPRESSION
-        })
+          code: ErrorCodes.X_V_FOR_NO_EXPRESSION,
+        }),
       )
     })
 
@@ -224,8 +240,8 @@ describe('compiler: v-for', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -236,8 +252,8 @@ describe('compiler: v-for', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -248,8 +264,20 @@ describe('compiler: v-for', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+        }),
+      )
+    })
+
+    test('missing source and have multiple spaces with', () => {
+      const onError = vi.fn()
+      parseWithForTransform('<span v-for="item in  " />', { onError })
+
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -260,8 +288,8 @@ describe('compiler: v-for', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -272,14 +300,14 @@ describe('compiler: v-for', () => {
       <template v-for="item in items">
         <div :key="item.id"/>
       </template>`,
-        { onError }
+        { onError },
       )
 
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_TEMPLATE_KEY_PLACEMENT
-        })
+          code: ErrorCodes.X_V_FOR_TEMPLATE_KEY_PLACEMENT,
+        }),
       )
 
       // should not warn on nested v-for keys
@@ -288,7 +316,7 @@ describe('compiler: v-for', () => {
       <template v-for="item in items">
         <div v-for="c in item.children" :key="c.id"/>
       </template>`,
-        { onError }
+        { onError },
       )
       expect(onError).toHaveBeenCalledTimes(1)
     })
@@ -315,7 +343,7 @@ describe('compiler: v-for', () => {
       expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
       expect(forNode.source.loc.end.line).toBe(1)
       expect(forNode.source.loc.end.column).toBe(
-        itemsOffset + 1 + `items`.length
+        itemsOffset + 1 + `items`.length,
       )
     })
 
@@ -339,7 +367,7 @@ describe('compiler: v-for', () => {
       expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
       expect(forNode.source.loc.end.line).toBe(1)
       expect(forNode.source.loc.end.column).toBe(
-        itemsOffset + 1 + `items`.length
+        itemsOffset + 1 + `items`.length,
       )
     })
 
@@ -363,7 +391,7 @@ describe('compiler: v-for', () => {
       expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
       expect(forNode.source.loc.end.line).toBe(1)
       expect(forNode.source.loc.end.column).toBe(
-        itemsOffset + 1 + `items`.length
+        itemsOffset + 1 + `items`.length,
       )
     })
 
@@ -405,7 +433,7 @@ describe('compiler: v-for', () => {
       expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
       expect(forNode.source.loc.end.line).toBe(1)
       expect(forNode.source.loc.end.column).toBe(
-        itemsOffset + 1 + `items`.length
+        itemsOffset + 1 + `items`.length,
       )
     })
 
@@ -438,7 +466,7 @@ describe('compiler: v-for', () => {
       expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
       expect(forNode.source.loc.end.line).toBe(1)
       expect(forNode.source.loc.end.column).toBe(
-        itemsOffset + 1 + `items`.length
+        itemsOffset + 1 + `items`.length,
       )
     })
   })
@@ -446,18 +474,18 @@ describe('compiler: v-for', () => {
   describe('prefixIdentifiers: true', () => {
     test('should prefix v-for source', () => {
       const { node } = parseWithForTransform(`<div v-for="i in list"/>`, {
-        prefixIdentifiers: true
+        prefixIdentifiers: true,
       })
       expect(node.source).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_ctx.list`
+        content: `_ctx.list`,
       })
     })
 
     test('should prefix v-for source w/ complex expression', () => {
       const { node } = parseWithForTransform(
         `<div v-for="i in list.concat([foo])"/>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       expect(node.source).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
@@ -467,31 +495,31 @@ describe('compiler: v-for', () => {
           { content: `concat` },
           `([`,
           { content: `_ctx.foo` },
-          `])`
-        ]
+          `])`,
+        ],
       })
     })
 
     test('should not prefix v-for alias', () => {
       const { node } = parseWithForTransform(
         `<div v-for="i in list">{{ i }}{{ j }}</div>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const div = node.children[0] as ElementNode
       expect((div.children[0] as InterpolationNode).content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `i`
+        content: `i`,
       })
       expect((div.children[1] as InterpolationNode).content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_ctx.j`
+        content: `_ctx.j`,
       })
     })
 
     test('should not prefix v-for aliases (multiple)', () => {
       const { node } = parseWithForTransform(
         `<div v-for="(i, j, k) in list">{{ i + j + k }}{{ l }}</div>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const div = node.children[0] as ElementNode
       expect((div.children[0] as InterpolationNode).content).toMatchObject({
@@ -501,23 +529,23 @@ describe('compiler: v-for', () => {
           ` + `,
           { content: `j` },
           ` + `,
-          { content: `k` }
-        ]
+          { content: `k` },
+        ],
       })
       expect((div.children[1] as InterpolationNode).content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_ctx.l`
+        content: `_ctx.l`,
       })
     })
 
     test('should prefix id outside of v-for', () => {
       const { node } = parseWithForTransform(
         `<div><div v-for="i in list" />{{ i }}</div>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       expect((node.children[1] as InterpolationNode).content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_ctx.i`
+        content: `_ctx.i`,
       })
     })
 
@@ -526,7 +554,7 @@ describe('compiler: v-for', () => {
         `<div v-for="i in list">
           <div v-for="i in list">{{ i + j }}</div>{{ i }}
         </div>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const outerDiv = node.children[0] as ElementNode
       const innerFor = outerDiv.children[0] as ForNode
@@ -534,7 +562,7 @@ describe('compiler: v-for', () => {
         .children[0] as InterpolationNode
       expect(innerExp.content).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
-        children: [{ content: 'i' }, ` + `, { content: `_ctx.j` }]
+        children: [{ content: 'i' }, ` + `, { content: `_ctx.j` }],
       })
 
       // when an inner v-for shadows a variable of an outer v-for and exit,
@@ -542,7 +570,7 @@ describe('compiler: v-for', () => {
       const outerExp = outerDiv.children[1] as InterpolationNode
       expect(outerExp.content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `i`
+        content: `i`,
       })
     })
 
@@ -551,7 +579,7 @@ describe('compiler: v-for', () => {
         `<div v-for="({ foo = bar, baz: [qux = quux] }) in list">
           {{ foo + bar + baz + qux + quux }}
         </div>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       expect(node.valueAlias!).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
@@ -564,8 +592,8 @@ describe('compiler: v-for', () => {
           { content: `qux` },
           ` = `,
           { content: `_ctx.quux` },
-          `] }`
-        ]
+          `] }`,
+        ],
       })
       const div = node.children[0] as ElementNode
       expect((div.children[0] as InterpolationNode).content).toMatchObject({
@@ -579,17 +607,17 @@ describe('compiler: v-for', () => {
           ` + `,
           { content: `qux` },
           ` + `,
-          { content: `_ctx.quux` }
-        ]
+          { content: `_ctx.quux` },
+        ],
       })
     })
 
     test('element v-for key expression prefixing', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
         '<div v-for="item in items" :key="itemKey(item)">test</div>',
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const innerBlock = codegenNode.children.arguments[1].returns
       expect(innerBlock).toMatchObject({
@@ -604,20 +632,20 @@ describe('compiler: v-for', () => {
               `(`,
               // should NOT prefix in scope variables
               { content: `item` },
-              `)`
-            ]
-          }
-        })
+              `)`,
+            ],
+          },
+        }),
       })
     })
 
     // #2085
     test('template v-for key expression prefixing', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
         '<template v-for="item in items" :key="itemKey(item)">test</template>',
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const innerBlock = codegenNode.children.arguments[1].returns
       expect(innerBlock).toMatchObject({
@@ -632,19 +660,19 @@ describe('compiler: v-for', () => {
               `(`,
               // should NOT prefix in scope variables
               { content: `item` },
-              `)`
-            ]
-          }
-        })
+              `)`,
+            ],
+          },
+        }),
       })
     })
 
     test('template v-for key no prefixing on attribute key', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
         '<template v-for="item in items" key="key">test</template>',
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const innerBlock = codegenNode.children.arguments[1].returns
       expect(innerBlock).toMatchObject({
@@ -653,9 +681,9 @@ describe('compiler: v-for', () => {
         props: createObjectMatcher({
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: 'key'
-          }
-        })
+            content: 'key',
+          },
+        }),
       })
     })
   })
@@ -665,17 +693,17 @@ describe('compiler: v-for', () => {
       node: ForCodegenNode,
       keyed: boolean = false,
       customReturn: boolean = false,
-      disableTracking: boolean = true
+      disableTracking: boolean = true,
     ) {
       expect(node).toMatchObject({
         type: NodeTypes.VNODE_CALL,
         tag: FRAGMENT,
         disableTracking,
         patchFlag: !disableTracking
-          ? genFlagText(PatchFlags.STABLE_FRAGMENT)
+          ? PatchFlags.STABLE_FRAGMENT
           : keyed
-            ? genFlagText(PatchFlags.KEYED_FRAGMENT)
-            : genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+            ? PatchFlags.KEYED_FRAGMENT
+            : PatchFlags.UNKEYED_FRAGMENT,
         children: {
           type: NodeTypes.JS_CALL_EXPRESSION,
           callee: RENDER_LIST,
@@ -687,32 +715,34 @@ describe('compiler: v-for', () => {
                 ? {}
                 : {
                     type: NodeTypes.VNODE_CALL,
-                    isBlock: disableTracking
-                  }
-            }
-          ]
-        }
+                    isBlock: disableTracking,
+                  },
+            },
+          ],
+        },
       })
       const renderListArgs = node.children.arguments
       return {
         source: renderListArgs[0] as SimpleExpressionNode,
         params: (renderListArgs[1] as any).params,
         returns: (renderListArgs[1] as any).returns,
-        innerVNodeCall: customReturn ? null : (renderListArgs[1] as any).returns
+        innerVNodeCall: customReturn
+          ? null
+          : (renderListArgs[1] as any).returns,
       }
     }
 
     test('basic v-for', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(item) in items" />')
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
         params: [{ content: `item` }],
         innerVNodeCall: {
-          tag: `"span"`
-        }
+          tag: `"span"`,
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -720,11 +750,11 @@ describe('compiler: v-for', () => {
     test('value + key + index', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(item, key, index) in items" />')
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
-        params: [{ content: `item` }, { content: `key` }, { content: `index` }]
+        params: [{ content: `item` }, { content: `key` }, { content: `index` }],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -732,11 +762,11 @@ describe('compiler: v-for', () => {
     test('skipped value', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(, key, index) in items" />')
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
-        params: [{ content: `_` }, { content: `key` }, { content: `index` }]
+        params: [{ content: `_` }, { content: `key` }, { content: `index` }],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -744,11 +774,11 @@ describe('compiler: v-for', () => {
     test('skipped key', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(item,,index) in items" />')
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
-        params: [{ content: `item` }, { content: `__` }, { content: `index` }]
+        params: [{ content: `item` }, { content: `__` }, { content: `index` }],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -756,11 +786,11 @@ describe('compiler: v-for', () => {
     test('skipped value & key', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(,,index) in items" />')
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
-        params: [{ content: `_` }, { content: `__` }, { content: `index` }]
+        params: [{ content: `_` }, { content: `__` }, { content: `index` }],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -768,9 +798,9 @@ describe('compiler: v-for', () => {
     test('v-for with constant expression', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<p v-for="item in 10">{{item}}</p>', {
-        prefixIdentifiers: true
+        prefixIdentifiers: true,
       })
 
       expect(
@@ -778,8 +808,8 @@ describe('compiler: v-for', () => {
           codegenNode,
           false /* keyed */,
           false /* customReturn */,
-          false /* disableTracking */
-        )
+          false /* disableTracking */,
+        ),
       ).toMatchObject({
         source: { content: `10`, constType: ConstantTypes.CAN_STRINGIFY },
         params: [{ content: `item` }],
@@ -793,11 +823,11 @@ describe('compiler: v-for', () => {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: 'item',
               isStatic: false,
-              constType: ConstantTypes.NOT_CONSTANT
-            }
+              constType: ConstantTypes.NOT_CONSTANT,
+            },
           },
-          patchFlag: genFlagText(PatchFlags.TEXT)
-        }
+          patchFlag: PatchFlags.TEXT,
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -805,9 +835,9 @@ describe('compiler: v-for', () => {
     test('template v-for', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
-        '<template v-for="item in items">hello<span/></template>'
+        '<template v-for="item in items">hello<span/></template>',
       )
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
@@ -818,10 +848,10 @@ describe('compiler: v-for', () => {
           isBlock: true,
           children: [
             { type: NodeTypes.TEXT, content: `hello` },
-            { type: NodeTypes.ELEMENT, tag: `span` }
+            { type: NodeTypes.ELEMENT, tag: `span` },
           ],
-          patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT)
-        }
+          patchFlag: PatchFlags.STABLE_FRAGMENT,
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -829,19 +859,19 @@ describe('compiler: v-for', () => {
     test('template v-for w/ <slot/>', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
-        '<template v-for="item in items"><slot/></template>'
+        '<template v-for="item in items"><slot/></template>',
       )
       expect(
-        assertSharedCodegen(codegenNode, false, true /* custom return */)
+        assertSharedCodegen(codegenNode, false, true /* custom return */),
       ).toMatchObject({
         source: { content: `items` },
         params: [{ content: `item` }],
         returns: {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: RENDER_SLOT
-        }
+          callee: RENDER_SLOT,
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -850,9 +880,9 @@ describe('compiler: v-for', () => {
     test('template v-for key injection with single child', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
-        '<template v-for="item in items" :key="item.id"><span :id="item.id" /></template>'
+        '<template v-for="item in items" :key="item.id"><span :id="item.id" /></template>',
       )
       expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
         source: { content: `items` },
@@ -862,9 +892,9 @@ describe('compiler: v-for', () => {
           tag: `"span"`,
           props: createObjectMatcher({
             key: '[item.id]',
-            id: '[item.id]'
-          })
-        }
+            id: '[item.id]',
+          }),
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -872,17 +902,17 @@ describe('compiler: v-for', () => {
     test('v-for on <slot/>', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<slot v-for="item in items"></slot>')
       expect(
-        assertSharedCodegen(codegenNode, false, true /* custom return */)
+        assertSharedCodegen(codegenNode, false, true /* custom return */),
       ).toMatchObject({
         source: { content: `items` },
         params: [{ content: `item` }],
         returns: {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: RENDER_SLOT
-        }
+          callee: RENDER_SLOT,
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -890,7 +920,7 @@ describe('compiler: v-for', () => {
     test('keyed v-for', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(item) in items" :key="item" />')
       expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
         source: { content: `items` },
@@ -898,9 +928,9 @@ describe('compiler: v-for', () => {
         innerVNodeCall: {
           tag: `"span"`,
           props: createObjectMatcher({
-            key: `[item]`
-          })
-        }
+            key: `[item]`,
+          }),
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -908,9 +938,9 @@ describe('compiler: v-for', () => {
     test('keyed template v-for', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
-        '<template v-for="item in items" :key="item">hello<span/></template>'
+        '<template v-for="item in items" :key="item">hello<span/></template>',
       )
       expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
         source: { content: `items` },
@@ -918,14 +948,14 @@ describe('compiler: v-for', () => {
         innerVNodeCall: {
           tag: FRAGMENT,
           props: createObjectMatcher({
-            key: `[item]`
+            key: `[item]`,
           }),
           children: [
             { type: NodeTypes.TEXT, content: `hello` },
-            { type: NodeTypes.ELEMENT, tag: `span` }
+            { type: NodeTypes.ELEMENT, tag: `span` },
           ],
-          patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT)
-        }
+          patchFlag: PatchFlags.STABLE_FRAGMENT,
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -933,7 +963,7 @@ describe('compiler: v-for', () => {
     test('v-if + v-for', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(`<div v-if="ok" v-for="i in list"/>`)
       expect(codegenNode).toMatchObject({
         type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
@@ -941,11 +971,11 @@ describe('compiler: v-for', () => {
         consequent: {
           type: NodeTypes.VNODE_CALL,
           props: createObjectMatcher({
-            key: `[0]`
+            key: `[0]`,
           }),
           isBlock: true,
           disableTracking: true,
-          patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+          patchFlag: PatchFlags.UNKEYED_FRAGMENT,
           children: {
             type: NodeTypes.JS_CALL_EXPRESSION,
             callee: RENDER_LIST,
@@ -957,12 +987,12 @@ describe('compiler: v-for', () => {
                 returns: {
                   type: NodeTypes.VNODE_CALL,
                   tag: `"div"`,
-                  isBlock: true
-                }
-              }
-            ]
-          }
-        }
+                  isBlock: true,
+                },
+              },
+            ],
+          },
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -971,7 +1001,7 @@ describe('compiler: v-for', () => {
     test('v-if + v-for on <template>', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(`<template v-if="ok" v-for="i in list"/>`)
       expect(codegenNode).toMatchObject({
         type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
@@ -979,11 +1009,11 @@ describe('compiler: v-for', () => {
         consequent: {
           type: NodeTypes.VNODE_CALL,
           props: createObjectMatcher({
-            key: `[0]`
+            key: `[0]`,
           }),
           isBlock: true,
           disableTracking: true,
-          patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+          patchFlag: PatchFlags.UNKEYED_FRAGMENT,
           children: {
             type: NodeTypes.JS_CALL_EXPRESSION,
             callee: RENDER_LIST,
@@ -995,12 +1025,12 @@ describe('compiler: v-for', () => {
                 returns: {
                   type: NodeTypes.VNODE_CALL,
                   tag: FRAGMENT,
-                  isBlock: true
-                }
-              }
-            ]
-          }
-        }
+                  isBlock: true,
+                },
+              },
+            ],
+          },
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -1008,14 +1038,40 @@ describe('compiler: v-for', () => {
     test('v-for on element with custom directive', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<div v-for="i in list" v-foo/>')
       const { returns } = assertSharedCodegen(codegenNode, false, true)
       expect(returns).toMatchObject({
         type: NodeTypes.VNODE_CALL,
-        directives: { type: NodeTypes.JS_ARRAY_EXPRESSION }
+        directives: { type: NodeTypes.JS_ARRAY_EXPRESSION },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
+
+    test('template v-for key w/ :key shorthand on div', () => {
+      const {
+        node: { codegenNode },
+      } = parseWithForTransform('<div v-for="key in keys" :key>test</div>')
+      expect(codegenNode.patchFlag).toBe(PatchFlags.KEYED_FRAGMENT)
+    })
+
+    test('template v-for key w/ :key shorthand on template injected to the child', () => {
+      const {
+        node: { codegenNode },
+      } = parseWithForTransform(
+        '<template v-for="key in keys" :key><div>test</div></template>',
+      )
+      expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
+        source: { content: `keys` },
+        params: [{ content: `key` }],
+        innerVNodeCall: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`,
+          props: createObjectMatcher({
+            key: '[key]',
+          }),
+        },
+      })
+    })
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vIf.spec.ts b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
index 5bc9bedd5..2c2fedab0 100644
--- a/packages/compiler-core/__tests__/transforms/vIf.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
@@ -1,29 +1,29 @@
-import { baseParse as parse } from '../../src/parse'
+import { baseParse as parse } from '../../src/parser'
 import { transform } from '../../src/transform'
 import { transformIf } from '../../src/transforms/vIf'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformSlotOutlet } from '../../src/transforms/transformSlotOutlet'
 import {
-  CommentNode,
-  ConditionalExpression,
-  ElementNode,
+  type CommentNode,
+  type ConditionalExpression,
+  type ElementNode,
   ElementTypes,
-  IfBranchNode,
-  IfConditionalExpression,
-  IfNode,
+  type IfBranchNode,
+  type IfConditionalExpression,
+  type IfNode,
   NodeTypes,
-  SimpleExpressionNode,
-  TextNode,
-  VNodeCall
+  type SimpleExpressionNode,
+  type TextNode,
+  type VNodeCall,
 } from '../../src/ast'
 import { ErrorCodes } from '../../src/errors'
-import { CompilerOptions, generate, TO_HANDLERS } from '../../src'
+import { type CompilerOptions, TO_HANDLERS, generate } from '../../src'
 import {
   CREATE_COMMENT,
   FRAGMENT,
   MERGE_PROPS,
   NORMALIZE_PROPS,
-  RENDER_SLOT
+  RENDER_SLOT,
 } from '../../src/runtimeHelpers'
 import { createObjectMatcher } from '../testUtils'
 
@@ -31,12 +31,12 @@ function parseWithIfTransform(
   template: string,
   options: CompilerOptions = {},
   returnIndex: number = 0,
-  childrenLen: number = 1
+  childrenLen: number = 1,
 ) {
   const ast = parse(template, options)
   transform(ast, {
     nodeTransforms: [transformIf, transformSlotOutlet, transformElement],
-    ...options
+    ...options,
   })
   if (!options.onError) {
     expect(ast.children.length).toBe(childrenLen)
@@ -48,7 +48,7 @@ function parseWithIfTransform(
     root: ast,
     node: ast.children[returnIndex] as IfNode & {
       codegenNode: IfConditionalExpression
-    }
+    },
   }
 }
 
@@ -59,7 +59,7 @@ describe('compiler: v-if', () => {
       expect(node.type).toBe(NodeTypes.IF)
       expect(node.branches.length).toBe(1)
       expect((node.branches[0].condition as SimpleExpressionNode).content).toBe(
-        `ok`
+        `ok`,
       )
       expect(node.branches[0].children.length).toBe(1)
       expect(node.branches[0].children[0].type).toBe(NodeTypes.ELEMENT)
@@ -68,12 +68,12 @@ describe('compiler: v-if', () => {
 
     test('template v-if', () => {
       const { node } = parseWithIfTransform(
-        `<template v-if="ok"><div/>hello<p/></template>`
+        `<template v-if="ok"><div/>hello<p/></template>`,
       )
       expect(node.type).toBe(NodeTypes.IF)
       expect(node.branches.length).toBe(1)
       expect((node.branches[0].condition as SimpleExpressionNode).content).toBe(
-        `ok`
+        `ok`,
       )
       expect(node.branches[0].children.length).toBe(3)
       expect(node.branches[0].children[0].type).toBe(NodeTypes.ELEMENT)
@@ -89,16 +89,16 @@ describe('compiler: v-if', () => {
       expect(node.type).toBe(NodeTypes.IF)
       expect(node.branches.length).toBe(1)
       expect((node.branches[0].children[0] as ElementNode).tag).toBe(
-        `Component`
+        `Component`,
       )
       expect((node.branches[0].children[0] as ElementNode).tagType).toBe(
-        ElementTypes.COMPONENT
+        ElementTypes.COMPONENT,
       )
       // #2058 since a component may fail to resolve and fallback to a plain
       // element, it still needs to be made a block
       expect(
         ((node.branches[0].children[0] as ElementNode)!
-          .codegenNode as VNodeCall)!.isBlock
+          .codegenNode as VNodeCall)!.isBlock,
       ).toBe(true)
     })
 
@@ -122,7 +122,7 @@ describe('compiler: v-if', () => {
 
     test('v-if + v-else-if', () => {
       const { node } = parseWithIfTransform(
-        `<div v-if="ok"/><p v-else-if="orNot"/>`
+        `<div v-if="ok"/><p v-else-if="orNot"/>`,
       )
       expect(node.type).toBe(NodeTypes.IF)
       expect(node.branches.length).toBe(2)
@@ -142,7 +142,7 @@ describe('compiler: v-if', () => {
 
     test('v-if + v-else-if + v-else', () => {
       const { node } = parseWithIfTransform(
-        `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`
+        `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`,
       )
       expect(node.type).toBe(NodeTypes.IF)
       expect(node.branches.length).toBe(3)
@@ -202,11 +202,11 @@ describe('compiler: v-if', () => {
 
     test('should prefix v-if condition', () => {
       const { node } = parseWithIfTransform(`<div v-if="ok"/>`, {
-        prefixIdentifiers: true
+        prefixIdentifiers: true,
       })
       expect(node.branches[0].condition).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_ctx.ok`
+        content: `_ctx.ok`,
       })
     })
   })
@@ -219,32 +219,32 @@ describe('compiler: v-if', () => {
       expect(onError.mock.calls[0]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node1.loc
-        }
+          loc: node1.loc,
+        },
       ])
 
       const { node: node2 } = parseWithIfTransform(
         `<div/><div v-else/>`,
         { onError },
-        1
+        1,
       )
       expect(onError.mock.calls[1]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node2.loc
-        }
+          loc: node2.loc,
+        },
       ])
 
       const { node: node3 } = parseWithIfTransform(
         `<div/>foo<div v-else/>`,
         { onError },
-        2
+        2,
       )
       expect(onError.mock.calls[2]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node3.loc
-        }
+          loc: node3.loc,
+        },
       ])
     })
 
@@ -252,52 +252,52 @@ describe('compiler: v-if', () => {
       const onError = vi.fn()
 
       const { node: node1 } = parseWithIfTransform(`<div v-else-if="foo"/>`, {
-        onError
+        onError,
       })
       expect(onError.mock.calls[0]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node1.loc
-        }
+          loc: node1.loc,
+        },
       ])
 
       const { node: node2 } = parseWithIfTransform(
         `<div/><div v-else-if="foo"/>`,
         { onError },
-        1
+        1,
       )
       expect(onError.mock.calls[1]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node2.loc
-        }
+          loc: node2.loc,
+        },
       ])
 
       const { node: node3 } = parseWithIfTransform(
         `<div/>foo<div v-else-if="foo"/>`,
         { onError },
-        2
+        2,
       )
       expect(onError.mock.calls[2]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node3.loc
-        }
+          loc: node3.loc,
+        },
       ])
 
       const {
-        node: { branches }
+        node: { branches },
       } = parseWithIfTransform(
         `<div v-if="notOk"/><div v-else/><div v-else-if="ok"/>`,
         { onError },
-        0
+        0,
       )
 
       expect(onError.mock.calls[3]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: branches[branches.length - 1].loc
-        }
+          loc: branches[branches.length - 1].loc,
+        },
       ])
     })
 
@@ -306,21 +306,21 @@ describe('compiler: v-if', () => {
       // dynamic
       parseWithIfTransform(
         `<div v-if="ok" :key="a + 1" /><div v-else :key="a + 1" />`,
-        { onError }
+        { onError },
       )
       expect(onError.mock.calls[0]).toMatchObject([
         {
-          code: ErrorCodes.X_V_IF_SAME_KEY
-        }
+          code: ErrorCodes.X_V_IF_SAME_KEY,
+        },
       ])
       // static
       parseWithIfTransform(`<div v-if="ok" key="1" /><div v-else key="1" />`, {
-        onError
+        onError,
       })
       expect(onError.mock.calls[1]).toMatchObject([
         {
-          code: ErrorCodes.X_V_IF_SAME_KEY
-        }
+          code: ErrorCodes.X_V_IF_SAME_KEY,
+        },
       ])
     })
   })
@@ -329,63 +329,63 @@ describe('compiler: v-if', () => {
     function assertSharedCodegen(
       node: IfConditionalExpression,
       depth: number = 0,
-      hasElse: boolean = false
+      hasElse: boolean = false,
     ) {
       expect(node).toMatchObject({
         type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
         test: {
-          content: `ok`
+          content: `ok`,
         },
         consequent: {
           type: NodeTypes.VNODE_CALL,
-          isBlock: true
+          isBlock: true,
         },
         alternate:
           depth < 1
             ? hasElse
               ? {
                   type: NodeTypes.VNODE_CALL,
-                  isBlock: true
+                  isBlock: true,
                 }
               : {
                   type: NodeTypes.JS_CALL_EXPRESSION,
-                  callee: CREATE_COMMENT
+                  callee: CREATE_COMMENT,
                 }
             : {
                 type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
                 test: {
-                  content: `orNot`
+                  content: `orNot`,
                 },
                 consequent: {
                   type: NodeTypes.VNODE_CALL,
-                  isBlock: true
+                  isBlock: true,
                 },
                 alternate: hasElse
                   ? {
                       type: NodeTypes.VNODE_CALL,
-                      isBlock: true
+                      isBlock: true,
                     }
                   : {
                       type: NodeTypes.JS_CALL_EXPRESSION,
-                      callee: CREATE_COMMENT
-                    }
-              }
+                      callee: CREATE_COMMENT,
+                    },
+              },
       })
     }
 
     test('basic v-if', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok"/>`)
       assertSharedCodegen(codegenNode)
       expect(codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       expect(codegenNode.alternate).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: CREATE_COMMENT
+        callee: CREATE_COMMENT,
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -393,7 +393,7 @@ describe('compiler: v-if', () => {
     test('template v-if', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<template v-if="ok"><div/>hello<p/></template>`)
       assertSharedCodegen(codegenNode)
       expect(codegenNode.consequent).toMatchObject({
@@ -402,12 +402,12 @@ describe('compiler: v-if', () => {
         children: [
           { type: NodeTypes.ELEMENT, tag: 'div' },
           { type: NodeTypes.TEXT, content: `hello` },
-          { type: NodeTypes.ELEMENT, tag: 'p' }
-        ]
+          { type: NodeTypes.ELEMENT, tag: 'p' },
+        ],
       })
       expect(codegenNode.alternate).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: CREATE_COMMENT
+        callee: CREATE_COMMENT,
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -415,12 +415,12 @@ describe('compiler: v-if', () => {
     test('template v-if w/ single <slot/> child', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<template v-if="ok"><slot/></template>`)
       expect(codegenNode.consequent).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
         callee: RENDER_SLOT,
-        arguments: ['$slots', '"default"', createObjectMatcher({ key: `[0]` })]
+        arguments: ['$slots', '"default"', createObjectMatcher({ key: `[0]` })],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -428,12 +428,12 @@ describe('compiler: v-if', () => {
     test('v-if on <slot/>', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<slot v-if="ok"></slot>`)
       expect(codegenNode.consequent).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
         callee: RENDER_SLOT,
-        arguments: ['$slots', '"default"', createObjectMatcher({ key: `[0]` })]
+        arguments: ['$slots', '"default"', createObjectMatcher({ key: `[0]` })],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -441,16 +441,16 @@ describe('compiler: v-if', () => {
     test('v-if + v-else', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok"/><p v-else/>`)
       assertSharedCodegen(codegenNode, 0, true)
       expect(codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       expect(codegenNode.alternate).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -458,17 +458,17 @@ describe('compiler: v-if', () => {
     test('v-if + v-else-if', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok"/><p v-else-if="orNot" />`)
       assertSharedCodegen(codegenNode, 1)
       expect(codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       const branch2 = codegenNode.alternate as ConditionalExpression
       expect(branch2.consequent).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -476,19 +476,19 @@ describe('compiler: v-if', () => {
     test('v-if + v-else-if + v-else', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(
-        `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`
+        `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`,
       )
       assertSharedCodegen(codegenNode, 1, true)
       expect(codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       const branch2 = codegenNode.alternate as ConditionalExpression
       expect(branch2.consequent).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       expect(branch2.alternate).toMatchObject({
         tag: FRAGMENT,
@@ -496,9 +496,9 @@ describe('compiler: v-if', () => {
         children: [
           {
             type: NodeTypes.TEXT,
-            content: `fine`
-          }
-        ]
+            content: `fine`,
+          },
+        ],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -508,7 +508,7 @@ describe('compiler: v-if', () => {
         `<div v-if="ok"/><p v-if="orNot"/>`,
         {},
         0 /* returnIndex, just give the default value */,
-        2 /* childrenLen */
+        2 /* childrenLen */,
       )
 
       const ifNode = root.children[0] as IfNode & {
@@ -516,14 +516,14 @@ describe('compiler: v-if', () => {
       }
       expect(ifNode.codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       const ifNode2 = root.children[1] as IfNode & {
         codegenNode: IfConditionalExpression
       }
       expect(ifNode2.codegenNode.consequent).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -533,41 +533,41 @@ describe('compiler: v-if', () => {
         `<div v-if="ok"/><p v-else/><div v-if="another"/><p v-else-if="orNot"/><p v-else/>`,
         {},
         0 /* returnIndex, just give the default value */,
-        2 /* childrenLen */
+        2 /* childrenLen */,
       )
       const ifNode = root.children[0] as IfNode & {
         codegenNode: IfConditionalExpression
       }
       expect(ifNode.codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       expect(ifNode.codegenNode.alternate).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       const ifNode2 = root.children[1] as IfNode & {
         codegenNode: IfConditionalExpression
       }
       expect(ifNode2.codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[2]` })
+        props: createObjectMatcher({ key: `[2]` }),
       })
       const branch = ifNode2.codegenNode.alternate as IfConditionalExpression
       expect(branch.consequent).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[3]` })
+        props: createObjectMatcher({ key: `[3]` }),
       })
       expect(branch.alternate).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[4]` })
+        props: createObjectMatcher({ key: `[4]` }),
       })
       expect(generate(root).code).toMatchSnapshot()
     })
 
     test('key injection (only v-bind)', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok" v-bind="obj"/>`)
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
@@ -577,15 +577,18 @@ describe('compiler: v-if', () => {
           {
             type: NodeTypes.JS_CALL_EXPRESSION,
             callee: MERGE_PROPS,
-            arguments: [createObjectMatcher({ key: `[0]` }), { content: `obj` }]
-          }
-        ]
+            arguments: [
+              createObjectMatcher({ key: `[0]` }),
+              { content: `obj` },
+            ],
+          },
+        ],
       })
     })
 
     test('key injection (before v-bind)', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok" id="foo" v-bind="obj"/>`)
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
@@ -594,16 +597,16 @@ describe('compiler: v-if', () => {
         arguments: [
           createObjectMatcher({
             key: '[0]',
-            id: 'foo'
+            id: 'foo',
           }),
-          { content: `obj` }
-        ]
+          { content: `obj` },
+        ],
       })
     })
 
     test('key injection (after v-bind)', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok" v-bind="obj" id="foo"/>`)
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
@@ -613,15 +616,15 @@ describe('compiler: v-if', () => {
           createObjectMatcher({ key: `[0]` }),
           { content: `obj` },
           createObjectMatcher({
-            id: 'foo'
-          })
-        ]
+            id: 'foo',
+          }),
+        ],
       })
     })
 
     test('key injection (w/ custom directive)', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok" v-foo />`)
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.directives).not.toBeUndefined()
@@ -631,7 +634,7 @@ describe('compiler: v-if', () => {
     // #6631
     test('avoid duplicate keys', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok" key="custom_key" v-bind="obj"/>`)
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
@@ -639,31 +642,31 @@ describe('compiler: v-if', () => {
         callee: MERGE_PROPS,
         arguments: [
           createObjectMatcher({
-            key: 'custom_key'
+            key: 'custom_key',
           }),
-          { content: `obj` }
-        ]
+          { content: `obj` },
+        ],
       })
     })
 
     test('with spaces between branches', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(
-        `<div v-if="ok"/> <div v-else-if="no"/> <div v-else/>`
+        `<div v-if="ok"/> <div v-else-if="no"/> <div v-else/>`,
       )
       expect(codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       const branch = codegenNode.alternate as ConditionalExpression
       expect(branch.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       expect(branch.alternate).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[2]` })
+        props: createObjectMatcher({ key: `[2]` }),
       })
     })
 
@@ -729,7 +732,7 @@ describe('compiler: v-if', () => {
             <p/>
           </template>
         `,
-        { comments: true }
+        { comments: true },
       )
       __DEV__ = true
     })
@@ -737,21 +740,21 @@ describe('compiler: v-if', () => {
 
   test('v-on with v-if', () => {
     const {
-      node: { codegenNode }
+      node: { codegenNode },
     } = parseWithIfTransform(
-      `<button v-on="{ click: clickEvent }" v-if="true">w/ v-if</button>`
+      `<button v-on="{ click: clickEvent }" v-if="true">w/ v-if</button>`,
     )
 
     expect((codegenNode.consequent as any).props.type).toBe(
-      NodeTypes.JS_CALL_EXPRESSION
+      NodeTypes.JS_CALL_EXPRESSION,
     )
     expect((codegenNode.consequent as any).props.callee).toBe(MERGE_PROPS)
     expect(
       (codegenNode.consequent as any).props.arguments[0].properties[0].value
-        .content
+        .content,
     ).toBe('0')
     expect((codegenNode.consequent as any).props.arguments[1].callee).toBe(
-      TO_HANDLERS
+      TO_HANDLERS,
     )
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vMemo.spec.ts b/packages/compiler-core/__tests__/transforms/vMemo.spec.ts
index 1b259f7ca..85769e6e9 100644
--- a/packages/compiler-core/__tests__/transforms/vMemo.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vMemo.spec.ts
@@ -4,7 +4,7 @@ describe('compiler: v-memo transform', () => {
   function compile(content: string) {
     return baseCompile(`<div>${content}</div>`, {
       mode: 'module',
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     }).code
   }
 
@@ -12,8 +12,8 @@ describe('compiler: v-memo transform', () => {
     expect(
       baseCompile(`<div v-memo="[x]"></div>`, {
         mode: 'module',
-        prefixIdentifiers: true
-      }).code
+        prefixIdentifiers: true,
+      }).code,
     ).toMatchSnapshot()
   })
 
@@ -29,8 +29,8 @@ describe('compiler: v-memo transform', () => {
     expect(
       compile(
         `<div v-if="ok" v-memo="[x]"><span>foo</span>bar</div>
-        <Comp v-else v-memo="[x]"></Comp>`
-      )
+        <Comp v-else v-memo="[x]"></Comp>`,
+      ),
     ).toMatchSnapshot()
   })
 
@@ -39,8 +39,8 @@ describe('compiler: v-memo transform', () => {
       compile(
         `<div v-for="{ x, y } in list" :key="x" v-memo="[x, y === z]">
           <span>foobar</span>
-        </div>`
-      )
+        </div>`,
+      ),
     ).toMatchSnapshot()
   })
 
@@ -49,8 +49,8 @@ describe('compiler: v-memo transform', () => {
       compile(
         `<template v-for="{ x, y } in list" :key="x" v-memo="[x, y === z]">
           <span>foobar</span>
-        </template>`
-      )
+        </template>`,
+      ),
     ).toMatchSnapshot()
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vModel.spec.ts b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
index ef3485fba..82dd4909f 100644
--- a/packages/compiler-core/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
@@ -1,17 +1,17 @@
 import {
+  BindingTypes,
+  type CompilerOptions,
+  type ComponentNode,
+  type ElementNode,
+  type ForNode,
+  NORMALIZE_PROPS,
+  NodeTypes,
+  type ObjectExpression,
+  type PlainElementNode,
+  type VNodeCall,
+  generate,
   baseParse as parse,
   transform,
-  generate,
-  ElementNode,
-  ObjectExpression,
-  CompilerOptions,
-  ForNode,
-  PlainElementNode,
-  ComponentNode,
-  NodeTypes,
-  VNodeCall,
-  NORMALIZE_PROPS,
-  BindingTypes
 } from '../../src'
 import { ErrorCodes } from '../../src/errors'
 import { transformModel } from '../../src/transforms/vModel'
@@ -19,7 +19,7 @@ import { transformElement } from '../../src/transforms/transformElement'
 import { transformExpression } from '../../src/transforms/transformExpression'
 import { transformFor } from '../../src/transforms/vFor'
 import { trackSlotScopes } from '../../src/transforms/vSlot'
-import { CallExpression } from '@babel/types'
+import type { CallExpression } from '@babel/types'
 
 function parseWithVModel(template: string, options: CompilerOptions = {}) {
   const ast = parse(template)
@@ -29,13 +29,13 @@ function parseWithVModel(template: string, options: CompilerOptions = {}) {
       transformFor,
       transformExpression,
       transformElement,
-      trackSlotScopes
+      trackSlotScopes,
     ],
     directiveTransforms: {
       ...options.directiveTransforms,
-      model: transformModel
+      model: transformModel,
     },
-    ...options
+    ...options,
   })
 
   return ast
@@ -51,29 +51,29 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: 'model',
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           '$event => ((',
           {
             content: 'model',
-            isStatic: false
+            isStatic: false,
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root).code).toMatchSnapshot()
@@ -81,7 +81,7 @@ describe('compiler: transform v-model', () => {
 
   test('simple expression (with prefixIdentifiers)', () => {
     const root = parseWithVModel('<input v-model="model" />', {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const node = root.children[0] as ElementNode
     const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
@@ -90,29 +90,29 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: '_ctx.model',
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           '$event => ((',
           {
             content: '_ctx.model',
-            isStatic: false
+            isStatic: false,
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()
@@ -128,29 +128,29 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: '\n model\n.\nfoo \n',
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           '$event => ((',
           {
             content: '\n model\n.\nfoo \n',
-            isStatic: false
+            isStatic: false,
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root).code).toMatchSnapshot()
@@ -165,29 +165,29 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: 'model[index]',
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           '$event => ((',
           {
             content: 'model[index]',
-            isStatic: false
+            isStatic: false,
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root).code).toMatchSnapshot()
@@ -195,7 +195,7 @@ describe('compiler: transform v-model', () => {
 
   test('compound expression (with prefixIdentifiers)', () => {
     const root = parseWithVModel('<input v-model="model[index]" />', {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const node = root.children[0] as ElementNode
     const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
@@ -204,28 +204,28 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           {
             content: '_ctx.model',
-            isStatic: false
+            isStatic: false,
           },
           '[',
           {
             content: '_ctx.index',
-            isStatic: false
+            isStatic: false,
           },
-          ']'
-        ]
-      }
+          ']',
+        ],
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
@@ -234,19 +234,19 @@ describe('compiler: transform v-model', () => {
             children: [
               {
                 content: '_ctx.model',
-                isStatic: false
+                isStatic: false,
               },
               '[',
               {
                 content: '_ctx.index',
-                isStatic: false
+                isStatic: false,
               },
-              ']'
-            ]
+              ']',
+            ],
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()
@@ -260,29 +260,29 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'foo-value',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: 'model',
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:fooValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           '$event => ((',
           {
             content: 'model',
-            isStatic: false
+            isStatic: false,
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root).code).toMatchSnapshot()
@@ -304,12 +304,12 @@ describe('compiler: transform v-model', () => {
             {
               key: {
                 content: 'value',
-                isStatic: false
+                isStatic: false,
               },
               value: {
                 content: 'model',
-                isStatic: false
-              }
+                isStatic: false,
+              },
             },
             {
               key: {
@@ -317,24 +317,24 @@ describe('compiler: transform v-model', () => {
                   '"onUpdate:" + ',
                   {
                     content: 'value',
-                    isStatic: false
-                  }
-                ]
+                    isStatic: false,
+                  },
+                ],
               },
               value: {
                 children: [
                   '$event => ((',
                   {
                     content: 'model',
-                    isStatic: false
+                    isStatic: false,
                   },
-                  ') = $event)'
-                ]
-              }
-            }
-          ]
-        }
-      ]
+                  ') = $event)',
+                ],
+              },
+            },
+          ],
+        },
+      ],
     })
 
     expect(generate(root).code).toMatchSnapshot()
@@ -342,7 +342,7 @@ describe('compiler: transform v-model', () => {
 
   test('with dynamic argument (with prefixIdentifiers)', () => {
     const root = parseWithVModel('<input v-model:[value]="model" />', {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const node = root.children[0] as ElementNode
     const props = (node.codegenNode as VNodeCall)
@@ -358,12 +358,12 @@ describe('compiler: transform v-model', () => {
             {
               key: {
                 content: '_ctx.value',
-                isStatic: false
+                isStatic: false,
               },
               value: {
                 content: '_ctx.model',
-                isStatic: false
-              }
+                isStatic: false,
+              },
             },
             {
               key: {
@@ -371,24 +371,24 @@ describe('compiler: transform v-model', () => {
                   '"onUpdate:" + ',
                   {
                     content: '_ctx.value',
-                    isStatic: false
-                  }
-                ]
+                    isStatic: false,
+                  },
+                ],
               },
               value: {
                 children: [
                   '$event => ((',
                   {
                     content: '_ctx.model',
-                    isStatic: false
+                    isStatic: false,
                   },
-                  ') = $event)'
-                ]
-              }
-            }
-          ]
-        }
-      ]
+                  ') = $event)',
+                ],
+              },
+            },
+          ],
+        },
+      ],
     })
 
     expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()
@@ -397,15 +397,15 @@ describe('compiler: transform v-model', () => {
   test('should cache update handler w/ cacheHandlers: true', () => {
     const root = parseWithVModel('<input v-model="foo" />', {
       prefixIdentifiers: true,
-      cacheHandlers: true
+      cacheHandlers: true,
     })
-    expect(root.cached).toBe(1)
+    expect(root.cached.length).toBe(1)
     const codegen = (root.children[0] as PlainElementNode)
       .codegenNode as VNodeCall
     // should not list cached prop in dynamicProps
     expect(codegen.dynamicProps).toBe(`["modelValue"]`)
     expect((codegen.props as ObjectExpression).properties[1].value.type).toBe(
-      NodeTypes.JS_CACHE_EXPRESSION
+      NodeTypes.JS_CACHE_EXPRESSION,
     )
   })
 
@@ -414,34 +414,34 @@ describe('compiler: transform v-model', () => {
       '<input v-for="i in list" v-model="foo[i]" />',
       {
         prefixIdentifiers: true,
-        cacheHandlers: true
-      }
+        cacheHandlers: true,
+      },
     )
-    expect(root.cached).toBe(0)
+    expect(root.cached.length).toBe(0)
     const codegen = (
       (root.children[0] as ForNode).children[0] as PlainElementNode
     ).codegenNode as VNodeCall
     expect(codegen.dynamicProps).toBe(`["modelValue", "onUpdate:modelValue"]`)
     expect(
-      (codegen.props as ObjectExpression).properties[1].value.type
+      (codegen.props as ObjectExpression).properties[1].value.type,
     ).not.toBe(NodeTypes.JS_CACHE_EXPRESSION)
   })
 
   test('should not cache update handler if it inside v-once', () => {
     const root = parseWithVModel('<div v-once><input v-model="foo" /></div>', {
       prefixIdentifiers: true,
-      cacheHandlers: true
+      cacheHandlers: true,
     })
     expect(root.cached).not.toBe(2)
-    expect(root.cached).toBe(1)
+    expect(root.cached.length).toBe(1)
   })
 
   test('should mark update handler dynamic if it refers slot scope variables', () => {
     const root = parseWithVModel(
       '<Comp v-slot="{ foo }"><input v-model="foo.bar"/></Comp>',
       {
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     const codegen = (
       (root.children[0] as ComponentNode).children[0] as PlainElementNode
@@ -451,7 +451,7 @@ describe('compiler: transform v-model', () => {
 
   test('should generate modelModifiers for component v-model', () => {
     const root = parseWithVModel('<Comp v-model.trim.bar-baz="foo" />', {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const vnodeCall = (root.children[0] as ComponentNode)
       .codegenNode as VNodeCall
@@ -462,9 +462,12 @@ describe('compiler: transform v-model', () => {
         { key: { content: `onUpdate:modelValue` } },
         {
           key: { content: 'modelModifiers' },
-          value: { content: `{ trim: true, "bar-baz": true }`, isStatic: false }
-        }
-      ]
+          value: {
+            content: `{ trim: true, "bar-baz": true }`,
+            isStatic: false,
+          },
+        },
+      ],
     })
     // should NOT include modelModifiers in dynamicPropNames because it's never
     // gonna change
@@ -475,8 +478,8 @@ describe('compiler: transform v-model', () => {
     const root = parseWithVModel(
       '<Comp v-model:foo.trim="foo" v-model:bar.number="bar" />',
       {
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     const vnodeCall = (root.children[0] as ComponentNode)
       .codegenNode as VNodeCall
@@ -487,20 +490,20 @@ describe('compiler: transform v-model', () => {
         { key: { content: `onUpdate:foo` } },
         {
           key: { content: 'fooModifiers' },
-          value: { content: `{ trim: true }`, isStatic: false }
+          value: { content: `{ trim: true }`, isStatic: false },
         },
         { key: { content: `bar` } },
         { key: { content: `onUpdate:bar` } },
         {
           key: { content: 'barModifiers' },
-          value: { content: `{ number: true }`, isStatic: false }
-        }
-      ]
+          value: { content: `{ number: true }`, isStatic: false },
+        },
+      ],
     })
     // should NOT include modelModifiers in dynamicPropNames because it's never
     // gonna change
     expect(vnodeCall.dynamicProps).toBe(
-      `["foo", "onUpdate:foo", "bar", "onUpdate:bar"]`
+      `["foo", "onUpdate:foo", "bar", "onUpdate:bar"]`,
     )
   })
 
@@ -512,8 +515,8 @@ describe('compiler: transform v-model', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_MODEL_NO_EXPRESSION
-        })
+          code: ErrorCodes.X_V_MODEL_NO_EXPRESSION,
+        }),
       )
     })
 
@@ -524,8 +527,8 @@ describe('compiler: transform v-model', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -536,8 +539,8 @@ describe('compiler: transform v-model', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -552,14 +555,14 @@ describe('compiler: transform v-model', () => {
       const onError = vi.fn()
       parseWithVModel('<span v-for="i in list" v-model="i" />', {
         onError,
-        prefixIdentifiers: true
+        prefixIdentifiers: true,
       })
 
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE
-        })
+          code: ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE,
+        }),
       )
     })
 
@@ -568,15 +571,15 @@ describe('compiler: transform v-model', () => {
       parseWithVModel('<div v-model="p" />', {
         onError,
         bindingMetadata: {
-          p: BindingTypes.PROPS
-        }
+          p: BindingTypes.PROPS,
+        },
       })
 
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_MODEL_ON_PROPS
-        })
+          code: ErrorCodes.X_V_MODEL_ON_PROPS,
+        }),
       )
     })
   })
diff --git a/packages/compiler-core/__tests__/transforms/vOn.spec.ts b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
index 218281ba7..9fda02595 100644
--- a/packages/compiler-core/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
@@ -1,15 +1,16 @@
 import {
-  baseParse as parse,
-  CompilerOptions,
-  ElementNode,
+  type CompilerOptions,
+  type ElementNode,
   ErrorCodes,
-  TO_HANDLER_KEY,
-  helperNameMap,
   NodeTypes,
-  ObjectExpression,
+  type ObjectExpression,
+  TO_HANDLER_KEY,
+  type VNodeCall,
+  helperNameMap,
+  baseParse as parse,
   transform,
-  VNodeCall
 } from '../../src'
+import { transformFor } from '../../src/transforms/vFor'
 import { transformOn } from '../../src/transforms/vOn'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformExpression } from '../../src/transforms/transformExpression'
@@ -17,15 +18,15 @@ import { transformExpression } from '../../src/transforms/transformExpression'
 function parseWithVOn(template: string, options: CompilerOptions = {}) {
   const ast = parse(template, options)
   transform(ast, {
-    nodeTransforms: [transformExpression, transformElement],
+    nodeTransforms: [transformExpression, transformElement, transformFor],
     directiveTransforms: {
-      on: transformOn
+      on: transformOn,
     },
-    ...options
+    ...options,
   })
   return {
     root: ast,
-    node: ast.children[0] as ElementNode
+    node: ast.children[0] as ElementNode,
   }
 }
 
@@ -41,13 +42,13 @@ describe('compiler: transform v-on', () => {
             loc: {
               start: {
                 line: 1,
-                column: 11
+                column: 11,
               },
               end: {
                 line: 1,
-                column: 16
-              }
-            }
+                column: 16,
+              },
+            },
           },
           value: {
             content: `onClick`,
@@ -55,16 +56,16 @@ describe('compiler: transform v-on', () => {
             loc: {
               start: {
                 line: 1,
-                column: 18
+                column: 18,
               },
               end: {
                 line: 1,
-                column: 25
-              }
-            }
-          }
-        }
-      ]
+                column: 25,
+              },
+            },
+          },
+        },
+      ],
     })
   })
 
@@ -78,22 +79,22 @@ describe('compiler: transform v-on', () => {
             children: [
               `_${helperNameMap[TO_HANDLER_KEY]}(`,
               { content: `event` },
-              `)`
-            ]
+              `)`,
+            ],
           },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `handler`,
-            isStatic: false
-          }
-        }
-      ]
+            isStatic: false,
+          },
+        },
+      ],
     })
   })
 
   test('dynamic arg with prefixing', () => {
     const { node } = parseWithVOn(`<div v-on:[event]="handler"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -103,22 +104,22 @@ describe('compiler: transform v-on', () => {
             children: [
               `_${helperNameMap[TO_HANDLER_KEY]}(`,
               { content: `_ctx.event` },
-              `)`
-            ]
+              `)`,
+            ],
           },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `_ctx.handler`,
-            isStatic: false
-          }
-        }
-      ]
+            isStatic: false,
+          },
+        },
+      ],
     })
   })
 
   test('dynamic arg with complex exp prefixing', () => {
     const { node } = parseWithVOn(`<div v-on:[event(foo)]="handler"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -131,16 +132,16 @@ describe('compiler: transform v-on', () => {
               `(`,
               { content: `_ctx.foo` },
               `)`,
-              `)`
-            ]
+              `)`,
+            ],
           },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `_ctx.handler`,
-            isStatic: false
-          }
-        }
-      ]
+            isStatic: false,
+          },
+        },
+      ],
     })
   })
 
@@ -152,10 +153,10 @@ describe('compiler: transform v-on', () => {
           key: { content: `onClick` },
           value: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`$event => (`, { content: `i++` }, `)`]
-          }
-        }
-      ]
+            children: [`$event => (`, { content: `i++` }, `)`],
+          },
+        },
+      ],
     })
   })
 
@@ -170,10 +171,10 @@ describe('compiler: transform v-on', () => {
             // should wrap with `{` for multiple statements
             // in this case the return value is discarded and the behavior is
             // consistent with 2.x
-            children: [`$event => {`, { content: `foo();bar()` }, `}`]
-          }
-        }
-      ]
+            children: [`$event => {`, { content: `foo();bar()` }, `}`],
+          },
+        },
+      ],
     })
   })
 
@@ -188,16 +189,16 @@ describe('compiler: transform v-on', () => {
             // should wrap with `{` for multiple statements
             // in this case the return value is discarded and the behavior is
             // consistent with 2.x
-            children: [`$event => {`, { content: `\nfoo();\nbar()\n` }, `}`]
-          }
-        }
-      ]
+            children: [`$event => {`, { content: `\nfoo();\nbar()\n` }, `}`],
+          },
+        },
+      ],
     })
   })
 
   test('inline statement w/ prefixIdentifiers: true', () => {
     const { node } = parseWithVOn(`<div @click="foo($event)"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -214,20 +215,20 @@ describe('compiler: transform v-on', () => {
                   `(`,
                   // should NOT prefix $event
                   { content: `$event` },
-                  `)`
-                ]
+                  `)`,
+                ],
               },
-              `)`
-            ]
-          }
-        }
-      ]
+              `)`,
+            ],
+          },
+        },
+      ],
     })
   })
 
   test('multiple inline statements w/ prefixIdentifiers: true', () => {
     const { node } = parseWithVOn(`<div @click="foo($event);bar()"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -245,14 +246,14 @@ describe('compiler: transform v-on', () => {
                   { content: `$event` },
                   `);`,
                   { content: `_ctx.bar` },
-                  `()`
-                ]
+                  `()`,
+                ],
               },
-              `}`
-            ]
-          }
-        }
-      ]
+              `}`,
+            ],
+          },
+        },
+      ],
     })
   })
 
@@ -264,14 +265,14 @@ describe('compiler: transform v-on', () => {
           key: { content: `onClick` },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `$event => foo($event)`
-          }
-        }
-      ]
+            content: `$event => foo($event)`,
+          },
+        },
+      ],
     })
   })
 
-  test('should NOT wrap as function if expression is already function expression (with Typescript)', () => {
+  test('should NOT wrap as function if expression is already function expression (with TypeScript)', () => {
     const { node } = parseWithVOn(`<div @click="(e: any): any => foo(e)"/>`)
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -279,10 +280,42 @@ describe('compiler: transform v-on', () => {
           key: { content: `onClick` },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `(e: any): any => foo(e)`
-          }
-        }
-      ]
+            content: `(e: any): any => foo(e)`,
+          },
+        },
+      ],
+    })
+
+    const { node: node2 } = parseWithVOn(
+      `<div @click="(e: (number | string)[]) => foo(e)"/>`,
+    )
+    expect((node2.codegenNode as VNodeCall).props).toMatchObject({
+      properties: [
+        {
+          key: { content: `onClick` },
+          value: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: `(e: (number | string)[]) => foo(e)`,
+          },
+        },
+      ],
+    })
+  })
+
+  test('should NOT wrap as function if expression is already function expression (async)', () => {
+    const { node } = parseWithVOn(
+      `<div @click="async $event => await foo($event)"/>`,
+    )
+    expect((node.codegenNode as VNodeCall).props).toMatchObject({
+      properties: [
+        {
+          key: { content: `onClick` },
+          value: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: `async $event => await foo($event)`,
+          },
+        },
+      ],
     })
   })
 
@@ -292,7 +325,7 @@ describe('compiler: transform v-on', () => {
       $event => {
         foo($event)
       }
-    "/>`
+    "/>`,
     )
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -304,10 +337,10 @@ describe('compiler: transform v-on', () => {
       $event => {
         foo($event)
       }
-    `
-          }
-        }
-      ]
+    `,
+          },
+        },
+      ],
     })
   })
 
@@ -317,7 +350,7 @@ describe('compiler: transform v-on', () => {
       function($event) {
         foo($event)
       }
-    "/>`
+    "/>`,
     )
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -329,10 +362,10 @@ describe('compiler: transform v-on', () => {
       function($event) {
         foo($event)
       }
-    `
-          }
-        }
-      ]
+    `,
+          },
+        },
+      ],
     })
   })
 
@@ -344,16 +377,16 @@ describe('compiler: transform v-on', () => {
           key: { content: `onClick` },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `a['b' + c]`
-          }
-        }
-      ]
+            content: `a['b' + c]`,
+          },
+        },
+      ],
     })
   })
 
   test('complex member expression w/ prefixIdentifiers: true', () => {
     const { node } = parseWithVOn(`<div @click="a['b' + c]"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -365,17 +398,17 @@ describe('compiler: transform v-on', () => {
               { content: `_ctx.a` },
               `['b' + `,
               { content: `_ctx.c` },
-              `]`
-            ]
-          }
-        }
-      ]
+              `]`,
+            ],
+          },
+        },
+      ],
     })
   })
 
   test('function expression w/ prefixIdentifiers: true', () => {
     const { node } = parseWithVOn(`<div @click="e => foo(e)"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -389,11 +422,11 @@ describe('compiler: transform v-on', () => {
               { content: `_ctx.foo` },
               `(`,
               { content: `e` },
-              `)`
-            ]
-          }
-        }
-      ]
+              `)`,
+            ],
+          },
+        },
+      ],
     })
   })
 
@@ -405,13 +438,13 @@ describe('compiler: transform v-on', () => {
       loc: {
         start: {
           line: 1,
-          column: 6
+          column: 6,
         },
         end: {
           line: 1,
-          column: 16
-        }
-      }
+          column: 16,
+        },
+      },
     })
   })
 
@@ -427,57 +460,57 @@ describe('compiler: transform v-on', () => {
       properties: [
         {
           key: {
-            content: `onFooBar`
+            content: `onFooBar`,
           },
           value: {
-            content: `onMount`
-          }
-        }
-      ]
+            content: `onMount`,
+          },
+        },
+      ],
     })
   })
 
-  // TODO remove in 3.4
-  test('case conversion for vnode hooks', () => {
-    const { node } = parseWithVOn(`<div v-on:vnode-mounted="onMount"/>`)
-    expect((node.codegenNode as VNodeCall).props).toMatchObject({
-      properties: [
-        {
-          key: {
-            content: `onVnodeMounted`
-          },
-          value: {
-            content: `onMount`
-          }
-        }
-      ]
+  test('error for vnode hooks', () => {
+    const onError = vi.fn()
+    parseWithVOn(`<div v-on:vnode-mounted="onMount"/>`, { onError })
+    expect(onError.mock.calls[0][0]).toMatchObject({
+      code: ErrorCodes.X_VNODE_HOOKS,
+      loc: {
+        start: {
+          line: 1,
+          column: 11,
+        },
+        end: {
+          line: 1,
+          column: 24,
+        },
+      },
     })
-    expect('@vnode-* hooks in templates are deprecated').toHaveBeenWarned()
   })
 
   test('vue: prefixed events', () => {
     const { node } = parseWithVOn(
-      `<div v-on:vue:mounted="onMount" @vue:before-update="onBeforeUpdate" />`
+      `<div v-on:vue:mounted="onMount" @vue:before-update="onBeforeUpdate" />`,
     )
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
         {
           key: {
-            content: `onVnodeMounted`
+            content: `onVnodeMounted`,
           },
           value: {
-            content: `onMount`
-          }
+            content: `onMount`,
+          },
         },
         {
           key: {
-            content: `onVnodeBeforeUpdate`
+            content: `onVnodeBeforeUpdate`,
           },
           value: {
-            content: `onBeforeUpdate`
-          }
-        }
-      ]
+            content: `onBeforeUpdate`,
+          },
+        },
+      ],
     })
   })
 
@@ -485,35 +518,35 @@ describe('compiler: transform v-on', () => {
     test('empty handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click.prevent />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       })
-      expect(root.cached).toBe(1)
+      expect(root.cached.length).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
         value: {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `() => {}`
-        }
+          content: `() => {}`,
+        },
       })
     })
 
     test('member expression handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click="foo" />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       })
-      expect(root.cached).toBe(1)
+      expect(root.cached.length).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
@@ -522,23 +555,23 @@ describe('compiler: transform v-on', () => {
           children: [
             `(...args) => (`,
             { content: `_ctx.foo && _ctx.foo(...args)` },
-            `)`
-          ]
-        }
+            `)`,
+          ],
+        },
       })
     })
 
     test('compound member expression handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click="foo.bar" />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       })
-      expect(root.cached).toBe(1)
+      expect(root.cached.length).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
@@ -555,12 +588,12 @@ describe('compiler: transform v-on', () => {
                 { content: `_ctx.foo` },
                 `.`,
                 { content: `bar` },
-                `(...args)`
-              ]
+                `(...args)`,
+              ],
             },
-            `)`
-          ]
-        }
+            `)`,
+          ],
+        },
       })
     })
 
@@ -568,9 +601,9 @@ describe('compiler: transform v-on', () => {
       const { root } = parseWithVOn(`<comp v-on:click="foo" />`, {
         prefixIdentifiers: true,
         cacheHandlers: true,
-        isNativeTag: tag => tag === 'div'
+        isNativeTag: tag => tag === 'div',
       })
-      expect(root.cached).toBe(0)
+      expect(root.cached.length).toBe(0)
     })
 
     test('should not be cached inside v-once', () => {
@@ -578,31 +611,42 @@ describe('compiler: transform v-on', () => {
         `<div v-once><div v-on:click="foo"/></div>`,
         {
           prefixIdentifiers: true,
-          cacheHandlers: true
-        }
+          cacheHandlers: true,
+        },
       )
-      expect(root.cached).not.toBe(2)
-      expect(root.cached).toBe(1)
+      expect(root.cached.length).not.toBe(2)
+      expect(root.cached.length).toBe(1)
+    })
+
+    test('unicode identifier should not be cached (v-for)', () => {
+      const { root } = parseWithVOn(
+        `<div v-for="项 in items" :key="value"><div v-on:click="foo(项)"/></div>`,
+        {
+          prefixIdentifiers: true,
+          cacheHandlers: true,
+        },
+      )
+      expect(root.cached.length).toBe(0)
     })
 
     test('inline function expression handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click="() => foo()" />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       })
-      expect(root.cached).toBe(1)
+      expect(root.cached.length).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
         value: {
           type: NodeTypes.COMPOUND_EXPRESSION,
-          children: [`() => `, { content: `_ctx.foo` }, `()`]
-        }
+          children: [`() => `, { content: `_ctx.foo` }, `()`],
+        },
       })
     })
 
@@ -611,22 +655,55 @@ describe('compiler: transform v-on', () => {
         `<div v-on:click="async () => await foo()" />`,
         {
           prefixIdentifiers: true,
-          cacheHandlers: true
-        }
+          cacheHandlers: true,
+        },
       )
-      expect(root.cached).toBe(1)
+      expect(root.cached.length).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
         value: {
           type: NodeTypes.COMPOUND_EXPRESSION,
-          children: [`async () => await `, { content: `_ctx.foo` }, `()`]
-        }
+          children: [`async () => await `, { content: `_ctx.foo` }, `()`],
+        },
+      })
+    })
+
+    test('inline async arrow function with no bracket expression handler', () => {
+      const { root, node } = parseWithVOn(
+        `<div v-on:click="async e => await foo(e)" />`,
+        {
+          prefixIdentifiers: true,
+          cacheHandlers: true,
+        },
+      )
+
+      expect(root.cached.length).toBe(1)
+      const vnodeCall = node.codegenNode as VNodeCall
+      // should not treat cached handler as dynamicProp, so no flags
+      expect(vnodeCall.patchFlag).toBeUndefined()
+      expect(
+        (vnodeCall.props as ObjectExpression).properties[0].value,
+      ).toMatchObject({
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+        index: 0,
+        value: {
+          type: NodeTypes.COMPOUND_EXPRESSION,
+          children: [
+            `async `,
+            { content: `e` },
+            ` => await `,
+            { content: `_ctx.foo` },
+            `(`,
+            { content: `e` },
+            `)`,
+          ],
+        },
       })
     })
 
@@ -635,15 +712,15 @@ describe('compiler: transform v-on', () => {
         `<div v-on:click="async function () { await foo() } " />`,
         {
           prefixIdentifiers: true,
-          cacheHandlers: true
-        }
+          cacheHandlers: true,
+        },
       )
-      expect(root.cached).toBe(1)
+      expect(root.cached.length).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
@@ -652,24 +729,24 @@ describe('compiler: transform v-on', () => {
           children: [
             `async function () { await `,
             { content: `_ctx.foo` },
-            `() } `
-          ]
-        }
+            `() } `,
+          ],
+        },
       })
     })
 
     test('inline statement handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click="foo++" />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       })
-      expect(root.cached).toBe(1)
-      expect(root.cached).toBe(1)
+      expect(root.cached.length).toBe(1)
+      expect(root.cached.length).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
@@ -678,9 +755,9 @@ describe('compiler: transform v-on', () => {
           children: [
             `$event => (`,
             { children: [{ content: `_ctx.foo` }, `++`] },
-            `)`
-          ]
-        }
+            `)`,
+          ],
+        },
       })
     })
   })
diff --git a/packages/compiler-core/__tests__/transforms/vOnce.spec.ts b/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
index 553ac1dfa..5f47a0fdb 100644
--- a/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
@@ -1,10 +1,10 @@
 import {
-  baseParse as parse,
-  transform,
+  type CompilerOptions,
   NodeTypes,
   generate,
-  CompilerOptions,
-  getBaseTransformPreset
+  getBaseTransformPreset,
+  baseParse as parse,
+  transform,
 } from '../../src'
 import { RENDER_SLOT, SET_BLOCK_TRACKING } from '../../src/runtimeHelpers'
 
@@ -14,7 +14,7 @@ function transformWithOnce(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms,
     directiveTransforms,
-    ...options
+    ...options,
   })
   return ast
 }
@@ -22,60 +22,60 @@ function transformWithOnce(template: string, options: CompilerOptions = {}) {
 describe('compiler: v-once transform', () => {
   test('as root node', () => {
     const root = transformWithOnce(`<div :id="foo" v-once />`)
-    expect(root.cached).toBe(1)
+    expect(root.cached.length).toBe(1)
     expect(root.helpers).toContain(SET_BLOCK_TRACKING)
     expect(root.codegenNode).toMatchObject({
       type: NodeTypes.JS_CACHE_EXPRESSION,
       index: 0,
       value: {
         type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
-      }
+        tag: `"div"`,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
 
   test('on nested plain element', () => {
     const root = transformWithOnce(`<div><div :id="foo" v-once /></div>`)
-    expect(root.cached).toBe(1)
+    expect(root.cached.length).toBe(1)
     expect(root.helpers).toContain(SET_BLOCK_TRACKING)
     expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
       type: NodeTypes.JS_CACHE_EXPRESSION,
       index: 0,
       value: {
         type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
-      }
+        tag: `"div"`,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
 
   test('on component', () => {
     const root = transformWithOnce(`<div><Comp :id="foo" v-once /></div>`)
-    expect(root.cached).toBe(1)
+    expect(root.cached.length).toBe(1)
     expect(root.helpers).toContain(SET_BLOCK_TRACKING)
     expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
       type: NodeTypes.JS_CACHE_EXPRESSION,
       index: 0,
       value: {
         type: NodeTypes.VNODE_CALL,
-        tag: `_component_Comp`
-      }
+        tag: `_component_Comp`,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
 
   test('on slot outlet', () => {
     const root = transformWithOnce(`<div><slot v-once /></div>`)
-    expect(root.cached).toBe(1)
+    expect(root.cached.length).toBe(1)
     expect(root.helpers).toContain(SET_BLOCK_TRACKING)
     expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
       type: NodeTypes.JS_CACHE_EXPRESSION,
       index: 0,
       value: {
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: RENDER_SLOT
-      }
+        callee: RENDER_SLOT,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -84,15 +84,15 @@ describe('compiler: v-once transform', () => {
   test('inside v-once', () => {
     const root = transformWithOnce(`<div v-once><div v-once/></div>`)
     expect(root.cached).not.toBe(2)
-    expect(root.cached).toBe(1)
+    expect(root.cached.length).toBe(1)
   })
 
   // cached nodes should be ignored by hoistStatic transform
   test('with hoistStatic: true', () => {
     const root = transformWithOnce(`<div><div v-once /></div>`, {
-      hoistStatic: true
+      hoistStatic: true,
     })
-    expect(root.cached).toBe(1)
+    expect(root.cached.length).toBe(1)
     expect(root.helpers).toContain(SET_BLOCK_TRACKING)
     expect(root.hoists.length).toBe(0)
     expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
@@ -100,15 +100,15 @@ describe('compiler: v-once transform', () => {
       index: 0,
       value: {
         type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
-      }
+        tag: `"div"`,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
 
   test('with v-if/else', () => {
     const root = transformWithOnce(`<div v-if="BOOLEAN" v-once /><p v-else/>`)
-    expect(root.cached).toBe(1)
+    expect(root.cached.length).toBe(1)
     expect(root.helpers).toContain(SET_BLOCK_TRACKING)
     expect(root.children[0]).toMatchObject({
       type: NodeTypes.IF,
@@ -119,27 +119,27 @@ describe('compiler: v-once transform', () => {
           type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
           consequent: {
             type: NodeTypes.VNODE_CALL,
-            tag: `"div"`
+            tag: `"div"`,
           },
           alternate: {
             type: NodeTypes.VNODE_CALL,
-            tag: `"p"`
-          }
-        }
-      }
+            tag: `"p"`,
+          },
+        },
+      },
     })
   })
 
   test('with v-for', () => {
     const root = transformWithOnce(`<div v-for="i in list" v-once />`)
-    expect(root.cached).toBe(1)
+    expect(root.cached.length).toBe(1)
     expect(root.helpers).toContain(SET_BLOCK_TRACKING)
     expect(root.children[0]).toMatchObject({
       type: NodeTypes.FOR,
       // should cache the entire v-for expression, not just a single branch
       codegenNode: {
-        type: NodeTypes.JS_CACHE_EXPRESSION
-      }
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+      },
     })
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
index bb3d9d2cf..4766c2ca9 100644
--- a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
@@ -1,18 +1,18 @@
 import {
-  CompilerOptions,
+  type CompilerOptions,
+  type ComponentNode,
+  type ElementNode,
+  ErrorCodes,
+  type ForNode,
+  NodeTypes,
+  type ObjectExpression,
+  type RenderSlotCall,
+  type SimpleExpressionNode,
+  type SlotsExpression,
+  type VNodeCall,
+  generate,
   baseParse as parse,
   transform,
-  generate,
-  ElementNode,
-  NodeTypes,
-  ErrorCodes,
-  ForNode,
-  ComponentNode,
-  VNodeCall,
-  SlotsExpression,
-  ObjectExpression,
-  SimpleExpressionNode,
-  RenderSlotCall
 } from '../../src'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformOn } from '../../src/transforms/vOn'
@@ -21,17 +21,17 @@ import { transformExpression } from '../../src/transforms/transformExpression'
 import { transformSlotOutlet } from '../../src/transforms/transformSlotOutlet'
 import {
   trackSlotScopes,
-  trackVForSlotScopes
+  trackVForSlotScopes,
 } from '../../src/transforms/vSlot'
 import { CREATE_SLOTS, RENDER_LIST } from '../../src/runtimeHelpers'
-import { createObjectMatcher, genFlagText } from '../testUtils'
+import { createObjectMatcher } from '../testUtils'
 import { PatchFlags } from '@vue/shared'
 import { transformFor } from '../../src/transforms/vFor'
 import { transformIf } from '../../src/transforms/vIf'
 
 function parseWithSlots(template: string, options: CompilerOptions = {}) {
   const ast = parse(template, {
-    whitespace: options.whitespace
+    whitespace: options.whitespace,
   })
   transform(ast, {
     nodeTransforms: [
@@ -42,13 +42,13 @@ function parseWithSlots(template: string, options: CompilerOptions = {}) {
         : []),
       transformSlotOutlet,
       transformElement,
-      trackSlotScopes
+      trackSlotScopes,
     ],
     directiveTransforms: {
       on: transformOn,
-      bind: transformBind
+      bind: transformBind,
     },
-    ...options
+    ...options,
   })
   return {
     root: ast,
@@ -56,7 +56,7 @@ function parseWithSlots(template: string, options: CompilerOptions = {}) {
       ast.children[0].type === NodeTypes.ELEMENT
         ? ((ast.children[0].codegenNode as VNodeCall)
             .children as SlotsExpression)
-        : null
+        : null,
   }
 }
 
@@ -70,25 +70,25 @@ function createSlotMatcher(obj: Record<string, any>, isDynamic = false) {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             isStatic: !/^\[/.test(key),
-            content: key.replace(/^\[|\]$/g, '')
+            content: key.replace(/^\[|\]$/g, ''),
           },
-          value: obj[key]
+          value: obj[key],
         } as any
       })
       .concat({
         key: { content: `_` },
         value: {
           content: isDynamic ? `2 /* DYNAMIC */` : `1 /* STABLE */`,
-          isStatic: false
-        }
-      })
+          isStatic: false,
+        },
+      }),
   }
 }
 
 describe('compiler: transform component slots', () => {
   test('implicit default slot', () => {
     const { root, slots } = parseWithSlots(`<Comp><div/></Comp>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -98,11 +98,11 @@ describe('compiler: transform component slots', () => {
           returns: [
             {
               type: NodeTypes.ELEMENT,
-              tag: `div`
-            }
-          ]
-        }
-      })
+              tag: `div`,
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -110,7 +110,7 @@ describe('compiler: transform component slots', () => {
   test('on-component default slot', () => {
     const { root, slots } = parseWithSlots(
       `<Comp v-slot="{ foo }">{{ foo }}{{ bar }}</Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -118,24 +118,24 @@ describe('compiler: transform component slots', () => {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`{ `, { content: `foo` }, ` }`]
+            children: [`{ `, { content: `foo` }, ` }`],
           },
           returns: [
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `foo`
-              }
+                content: `foo`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.bar`
-              }
-            }
-          ]
-        }
-      })
+                content: `_ctx.bar`,
+              },
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -143,7 +143,7 @@ describe('compiler: transform component slots', () => {
   test('on component named slot', () => {
     const { root, slots } = parseWithSlots(
       `<Comp v-slot:named="{ foo }">{{ foo }}{{ bar }}</Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -151,24 +151,24 @@ describe('compiler: transform component slots', () => {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`{ `, { content: `foo` }, ` }`]
+            children: [`{ `, { content: `foo` }, ` }`],
           },
           returns: [
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `foo`
-              }
+                content: `foo`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.bar`
-              }
-            }
-          ]
-        }
-      })
+                content: `_ctx.bar`,
+              },
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -183,7 +183,7 @@ describe('compiler: transform component slots', () => {
           {{ foo }}{{ bar }}
         </template>
       </Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -191,45 +191,45 @@ describe('compiler: transform component slots', () => {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`{ `, { content: `foo` }, ` }`]
+            children: [`{ `, { content: `foo` }, ` }`],
           },
           returns: [
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `foo`
-              }
+                content: `foo`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.bar`
-              }
-            }
-          ]
+                content: `_ctx.bar`,
+              },
+            },
+          ],
         },
         two: {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`{ `, { content: `bar` }, ` }`]
+            children: [`{ `, { content: `bar` }, ` }`],
           },
           returns: [
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.foo`
-              }
+                content: `_ctx.foo`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `bar`
-              }
-            }
-          ]
-        }
-      })
+                content: `bar`,
+              },
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -237,7 +237,7 @@ describe('compiler: transform component slots', () => {
   test('on component dynamically named slot', () => {
     const { root, slots } = parseWithSlots(
       `<Comp v-slot:[named]="{ foo }">{{ foo }}{{ bar }}</Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher(
@@ -246,26 +246,26 @@ describe('compiler: transform component slots', () => {
             type: NodeTypes.JS_FUNCTION_EXPRESSION,
             params: {
               type: NodeTypes.COMPOUND_EXPRESSION,
-              children: [`{ `, { content: `foo` }, ` }`]
+              children: [`{ `, { content: `foo` }, ` }`],
             },
             returns: [
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `foo`
-                }
+                  content: `foo`,
+                },
               },
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `_ctx.bar`
-                }
-              }
-            ]
-          }
+                  content: `_ctx.bar`,
+                },
+              },
+            ],
+          },
         },
-        true
-      )
+        true,
+      ),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -274,7 +274,7 @@ describe('compiler: transform component slots', () => {
     const { root, slots } = parseWithSlots(
       `<Comp>
         <template #one>foo</template>bar<span/>
-      </Comp>`
+      </Comp>`,
     )
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -284,9 +284,9 @@ describe('compiler: transform component slots', () => {
           returns: [
             {
               type: NodeTypes.TEXT,
-              content: `foo`
-            }
-          ]
+              content: `foo`,
+            },
+          ],
         },
         default: {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
@@ -294,15 +294,15 @@ describe('compiler: transform component slots', () => {
           returns: [
             {
               type: NodeTypes.TEXT,
-              content: `bar`
+              content: `bar`,
             },
             {
               type: NodeTypes.ELEMENT,
-              tag: `span`
-            }
-          ]
-        }
-      })
+              tag: `span`,
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -317,7 +317,7 @@ describe('compiler: transform component slots', () => {
           {{ foo }}{{ bar }}
         </template>
       </Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher(
@@ -326,47 +326,47 @@ describe('compiler: transform component slots', () => {
             type: NodeTypes.JS_FUNCTION_EXPRESSION,
             params: {
               type: NodeTypes.COMPOUND_EXPRESSION,
-              children: [`{ `, { content: `foo` }, ` }`]
+              children: [`{ `, { content: `foo` }, ` }`],
             },
             returns: [
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `foo`
-                }
+                  content: `foo`,
+                },
               },
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `_ctx.bar`
-                }
-              }
-            ]
+                  content: `_ctx.bar`,
+                },
+              },
+            ],
           },
           '[_ctx.two]': {
             type: NodeTypes.JS_FUNCTION_EXPRESSION,
             params: {
               type: NodeTypes.COMPOUND_EXPRESSION,
-              children: [`{ `, { content: `bar` }, ` }`]
+              children: [`{ `, { content: `bar` }, ` }`],
             },
             returns: [
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `_ctx.foo`
-                }
+                  content: `_ctx.foo`,
+                },
               },
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `bar`
-                }
-              }
-            ]
-          }
+                  content: `bar`,
+                },
+              },
+            ],
+          },
         },
-        true
-      )
+        true,
+      ),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -381,7 +381,7 @@ describe('compiler: transform component slots', () => {
           {{ foo }}{{ bar }}{{ baz }}
         </template>
       </Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -389,7 +389,7 @@ describe('compiler: transform component slots', () => {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`{ `, { content: `foo` }, ` }`]
+            children: [`{ `, { content: `foo` }, ` }`],
           },
           returns: [
             {
@@ -404,63 +404,63 @@ describe('compiler: transform component slots', () => {
                       type: NodeTypes.JS_FUNCTION_EXPRESSION,
                       params: {
                         type: NodeTypes.COMPOUND_EXPRESSION,
-                        children: [`{ `, { content: `bar` }, ` }`]
+                        children: [`{ `, { content: `bar` }, ` }`],
                       },
                       returns: [
                         {
                           type: NodeTypes.INTERPOLATION,
                           content: {
-                            content: `foo`
-                          }
+                            content: `foo`,
+                          },
                         },
                         {
                           type: NodeTypes.INTERPOLATION,
                           content: {
-                            content: `bar`
-                          }
+                            content: `bar`,
+                          },
                         },
                         {
                           type: NodeTypes.INTERPOLATION,
                           content: {
-                            content: `_ctx.baz`
-                          }
-                        }
-                      ]
-                    }
+                            content: `_ctx.baz`,
+                          },
+                        },
+                      ],
+                    },
                   },
-                  true
+                  true,
                 ),
                 // nested slot should be forced dynamic, since scope variables
                 // are not tracked as dependencies of the slot.
-                patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS)
-              }
+                patchFlag: PatchFlags.DYNAMIC_SLOTS,
+              },
             },
             // test scope
             {
               type: NodeTypes.TEXT,
-              content: ` `
+              content: ` `,
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `foo`
-              }
+                content: `foo`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.bar`
-              }
+                content: `_ctx.bar`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.baz`
-              }
-            }
-          ]
-        }
-      })
+                content: `_ctx.baz`,
+              },
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -469,14 +469,12 @@ describe('compiler: transform component slots', () => {
     const { root } = parseWithSlots(
       `<div v-for="i in list">
         <Comp v-slot="bar">foo</Comp>
-      </div>`
+      </div>`,
     )
     const div = ((root.children[0] as ForNode).children[0] as ElementNode)
       .codegenNode as any
     const comp = div.children[0]
-    expect(comp.codegenNode.patchFlag).toBe(
-      genFlagText(PatchFlags.DYNAMIC_SLOTS)
-    )
+    expect(comp.codegenNode.patchFlag).toBe(PatchFlags.DYNAMIC_SLOTS)
   })
 
   test('should only force dynamic slots when actually using scope vars w/ prefixIdentifiers: true', () => {
@@ -494,7 +492,7 @@ describe('compiler: transform component slots', () => {
         flag = (innerComp.codegenNode as VNodeCall).patchFlag
       }
       if (shouldForce) {
-        expect(flag).toBe(genFlagText(PatchFlags.DYNAMIC_SLOTS))
+        expect(flag).toBe(PatchFlags.DYNAMIC_SLOTS)
       } else {
         expect(flag).toBeUndefined()
       }
@@ -504,14 +502,14 @@ describe('compiler: transform component slots', () => {
       `<div v-for="i in list">
         <Comp v-slot="bar">foo</Comp>
       </div>`,
-      false
+      false,
     )
 
     assertDynamicSlots(
       `<div v-for="i in list">
         <Comp v-slot="bar">{{ i }}</Comp>
       </div>`,
-      true
+      true,
     )
 
     // reference the component's own slot variable should not force dynamic slots
@@ -519,14 +517,14 @@ describe('compiler: transform component slots', () => {
       `<Comp v-slot="foo">
         <Comp v-slot="bar">{{ bar }}</Comp>
       </Comp>`,
-      false
+      false,
     )
 
     assertDynamicSlots(
       `<Comp v-slot="foo">
         <Comp v-slot="bar">{{ foo }}</Comp>
       </Comp>`,
-      true
+      true,
     )
 
     // #2564
@@ -534,14 +532,14 @@ describe('compiler: transform component slots', () => {
       `<div v-for="i in list">
         <Comp v-slot="bar"><button @click="fn(i)" /></Comp>
       </div>`,
-      true
+      true,
     )
 
     assertDynamicSlots(
       `<div v-for="i in list">
         <Comp v-slot="bar"><button @click="fn()" /></Comp>
       </div>`,
-      false
+      false,
     )
   })
 
@@ -549,14 +547,14 @@ describe('compiler: transform component slots', () => {
     const { root, slots } = parseWithSlots(
       `<Comp>
         <template #one v-if="ok">hello</template>
-      </Comp>`
+      </Comp>`,
     )
     expect(slots).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2 /* DYNAMIC */]`
+          _: `[2 /* DYNAMIC */]`,
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -568,21 +566,21 @@ describe('compiler: transform component slots', () => {
                 name: `one`,
                 fn: {
                   type: NodeTypes.JS_FUNCTION_EXPRESSION,
-                  returns: [{ type: NodeTypes.TEXT, content: `hello` }]
+                  returns: [{ type: NodeTypes.TEXT, content: `hello` }],
                 },
-                key: `0`
+                key: `0`,
               }),
               alternate: {
                 content: `undefined`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
-    expect((root as any).children[0].codegenNode.patchFlag).toMatch(
-      PatchFlags.DYNAMIC_SLOTS + ''
+    expect((root as any).children[0].codegenNode.patchFlag).toBe(
+      PatchFlags.DYNAMIC_SLOTS,
     )
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -592,14 +590,14 @@ describe('compiler: transform component slots', () => {
       `<Comp>
         <template #one="props" v-if="ok">{{ props }}</template>
       </Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2 /* DYNAMIC */]`
+          _: `[2 /* DYNAMIC */]`,
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -615,23 +613,23 @@ describe('compiler: transform component slots', () => {
                   returns: [
                     {
                       type: NodeTypes.INTERPOLATION,
-                      content: { content: `props` }
-                    }
-                  ]
+                      content: { content: `props` },
+                    },
+                  ],
                 },
-                key: `0`
+                key: `0`,
               }),
               alternate: {
                 content: `undefined`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
-    expect((root as any).children[0].codegenNode.patchFlag).toMatch(
-      PatchFlags.DYNAMIC_SLOTS + ''
+    expect((root as any).children[0].codegenNode.patchFlag).toBe(
+      PatchFlags.DYNAMIC_SLOTS,
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -642,14 +640,14 @@ describe('compiler: transform component slots', () => {
         <template #one v-if="ok">foo</template>
         <template #two="props" v-else-if="orNot">bar</template>
         <template #one v-else>baz</template>
-      </Comp>`
+      </Comp>`,
     )
     expect(slots).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2 /* DYNAMIC */]`
+          _: `[2 /* DYNAMIC */]`,
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -662,9 +660,9 @@ describe('compiler: transform component slots', () => {
                 fn: {
                   type: NodeTypes.JS_FUNCTION_EXPRESSION,
                   params: undefined,
-                  returns: [{ type: NodeTypes.TEXT, content: `foo` }]
+                  returns: [{ type: NodeTypes.TEXT, content: `foo` }],
                 },
-                key: `0`
+                key: `0`,
               }),
               alternate: {
                 type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
@@ -674,28 +672,29 @@ describe('compiler: transform component slots', () => {
                   fn: {
                     type: NodeTypes.JS_FUNCTION_EXPRESSION,
                     params: { content: `props` },
-                    returns: [{ type: NodeTypes.TEXT, content: `bar` }]
+                    returns: [{ type: NodeTypes.TEXT, content: `bar` }],
                   },
-                  key: `1`
+                  key: `1`,
                 }),
                 alternate: createObjectMatcher({
                   name: `one`,
                   fn: {
                     type: NodeTypes.JS_FUNCTION_EXPRESSION,
                     params: undefined,
-                    returns: [{ type: NodeTypes.TEXT, content: `baz` }]
+                    returns: [{ type: NodeTypes.TEXT, content: `baz` }],
                   },
-                  key: `2`
-                })
-              }
-            }
-          ]
-        }
-      ]
+                  key: `2`,
+                }),
+              },
+            },
+          ],
+        },
+      ],
     })
-    expect((root as any).children[0].codegenNode.patchFlag).toMatch(
-      PatchFlags.DYNAMIC_SLOTS + ''
+    expect((root as any).children[0].codegenNode.patchFlag).toBe(
+      PatchFlags.DYNAMIC_SLOTS,
     )
+    expect((root as any).children[0].children.length).toBe(3)
     expect(generate(root).code).toMatchSnapshot()
   })
 
@@ -704,14 +703,14 @@ describe('compiler: transform component slots', () => {
       `<Comp>
         <template v-for="name in list" #[name]>{{ name }}</template>
       </Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2 /* DYNAMIC */]`
+          _: `[2 /* DYNAMIC */]`,
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -731,20 +730,20 @@ describe('compiler: transform component slots', () => {
                       returns: [
                         {
                           type: NodeTypes.INTERPOLATION,
-                          content: { content: `name`, isStatic: false }
-                        }
-                      ]
-                    }
-                  })
-                }
-              ]
-            }
-          ]
-        }
-      ]
+                          content: { content: `name`, isStatic: false },
+                        },
+                      ],
+                    },
+                  }),
+                },
+              ],
+            },
+          ],
+        },
+      ],
     })
-    expect((root as any).children[0].codegenNode.patchFlag).toMatch(
-      PatchFlags.DYNAMIC_SLOTS + ''
+    expect((root as any).children[0].codegenNode.patchFlag).toBe(
+      PatchFlags.DYNAMIC_SLOTS,
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -755,13 +754,13 @@ describe('compiler: transform component slots', () => {
       properties: [
         {
           key: { content: `default` },
-          value: { type: NodeTypes.JS_FUNCTION_EXPRESSION }
+          value: { type: NodeTypes.JS_FUNCTION_EXPRESSION },
         },
         {
           key: { content: `_` },
-          value: { content: `3 /* FORWARDED */` }
-        }
-      ]
+          value: { content: `3 /* FORWARDED */` },
+        },
+      ],
     }
     test('<slot> tag only', () => {
       const { slots } = parseWithSlots(`<Comp><slot/></Comp>`)
@@ -780,7 +779,7 @@ describe('compiler: transform component slots', () => {
 
     test('<slot> tag w/ template', () => {
       const { slots } = parseWithSlots(
-        `<Comp><template #default><slot/></template></Comp>`
+        `<Comp><template #default><slot/></template></Comp>`,
       )
       expect(slots).toMatchObject(toMatch)
     })
@@ -793,7 +792,7 @@ describe('compiler: transform component slots', () => {
     // # fix: #6900
     test('consistent behavior of @xxx:modelValue and @xxx:model-value', () => {
       const { root: rootUpper } = parseWithSlots(
-        `<div><slot @foo:modelValue="handler" /></div>`
+        `<div><slot @foo:modelValue="handler" /></div>`,
       )
       const slotNodeUpper = (rootUpper.codegenNode! as VNodeCall)
         .children as ElementNode[]
@@ -805,19 +804,19 @@ describe('compiler: transform component slots', () => {
           {
             key: {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: 'onFoo:modelValue'
+              content: 'onFoo:modelValue',
             },
             value: {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: `handler`,
-              isStatic: false
-            }
-          }
-        ]
+              isStatic: false,
+            },
+          },
+        ],
       })
 
       const { root } = parseWithSlots(
-        `<div><slot @foo:model-Value="handler" /></div>`
+        `<div><slot @foo:model-Value="handler" /></div>`,
       )
       const slotNode = (root.codegenNode! as VNodeCall)
         .children as ElementNode[]
@@ -828,15 +827,15 @@ describe('compiler: transform component slots', () => {
           {
             key: {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: 'onFoo:modelValue'
+              content: 'onFoo:modelValue',
             },
             value: {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: `handler`,
-              isStatic: false
-            }
-          }
-        ]
+              isStatic: false,
+            },
+          },
+        ],
       })
     })
   })
@@ -850,18 +849,17 @@ describe('compiler: transform component slots', () => {
       expect(onError.mock.calls[0][0]).toMatchObject({
         code: ErrorCodes.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
         loc: {
-          source: `bar`,
           start: {
             offset: index,
             line: 1,
-            column: index + 1
+            column: index + 1,
           },
           end: {
             offset: index + 3,
             line: 1,
-            column: index + 4
-          }
-        }
+            column: index + 4,
+          },
+        },
       })
     })
 
@@ -873,18 +871,17 @@ describe('compiler: transform component slots', () => {
       expect(onError.mock.calls[0][0]).toMatchObject({
         code: ErrorCodes.X_V_SLOT_DUPLICATE_SLOT_NAMES,
         loc: {
-          source: `#foo`,
           start: {
             offset: index,
             line: 1,
-            column: index + 1
+            column: index + 1,
           },
           end: {
             offset: index + 4,
             line: 1,
-            column: index + 5
-          }
-        }
+            column: index + 5,
+          },
+        },
       })
     })
 
@@ -896,18 +893,17 @@ describe('compiler: transform component slots', () => {
       expect(onError.mock.calls[0][0]).toMatchObject({
         code: ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE,
         loc: {
-          source: `#foo`,
           start: {
             offset: index,
             line: 1,
-            column: index + 1
+            column: index + 1,
           },
           end: {
             offset: index + 4,
             line: 1,
-            column: index + 5
-          }
-        }
+            column: index + 5,
+          },
+        },
       })
     })
 
@@ -919,18 +915,17 @@ describe('compiler: transform component slots', () => {
       expect(onError.mock.calls[0][0]).toMatchObject({
         code: ErrorCodes.X_V_SLOT_MISPLACED,
         loc: {
-          source: `v-slot`,
           start: {
             offset: index,
             line: 1,
-            column: index + 1
+            column: index + 1,
           },
           end: {
             offset: index + 6,
             line: 1,
-            column: index + 7
-          }
-        }
+            column: index + 7,
+          },
+        },
       })
     })
   })
@@ -944,11 +939,11 @@ describe('compiler: transform component slots', () => {
       </Comp>
       `
       const { root } = parseWithSlots(source, {
-        whitespace: 'preserve'
+        whitespace: 'preserve',
       })
 
       expect(
-        `Extraneous children found when component already has explicitly named default slot.`
+        `Extraneous children found when component already has explicitly named default slot.`,
       ).not.toHaveBeenWarned()
       expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
     })
@@ -961,11 +956,11 @@ describe('compiler: transform component slots', () => {
       </Comp>
       `
       const { root } = parseWithSlots(source, {
-        whitespace: 'preserve'
+        whitespace: 'preserve',
       })
 
       expect(
-        `Extraneous children found when component already has explicitly named default slot.`
+        `Extraneous children found when component already has explicitly named default slot.`,
       ).not.toHaveBeenWarned()
       expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
     })
@@ -978,7 +973,7 @@ describe('compiler: transform component slots', () => {
       </Comp>
       `
       const { root } = parseWithSlots(source, {
-        whitespace: 'preserve'
+        whitespace: 'preserve',
       })
 
       // slots is vnodeCall's children as an ObjectExpression
@@ -988,7 +983,7 @@ describe('compiler: transform component slots', () => {
       // should be: header, footer, _ (no default)
       expect(slots.length).toBe(3)
       expect(
-        slots.some(p => (p.key as SimpleExpressionNode).content === 'default')
+        slots.some(p => (p.key as SimpleExpressionNode).content === 'default'),
       ).toBe(false)
 
       expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
diff --git a/packages/compiler-core/__tests__/utils.spec.ts b/packages/compiler-core/__tests__/utils.spec.ts
index 45fa46fea..2d377a271 100644
--- a/packages/compiler-core/__tests__/utils.spec.ts
+++ b/packages/compiler-core/__tests__/utils.spec.ts
@@ -1,11 +1,10 @@
-import { TransformContext } from '../src'
-import { Position } from '../src/ast'
+import type { ExpressionNode, TransformContext } from '../src'
+import { type Position, createSimpleExpression } from '../src/ast'
 import {
-  getInnerRange,
   advancePositionWithClone,
-  isMemberExpressionNode,
   isMemberExpressionBrowser,
-  toValidAssetId
+  isMemberExpressionNode,
+  toValidAssetId,
 } from '../src/utils'
 
 function p(line: number, column: number, offset: number): Position {
@@ -41,34 +40,9 @@ describe('advancePositionWithClone', () => {
   })
 })
 
-describe('getInnerRange', () => {
-  const loc1 = {
-    source: 'foo\nbar\nbaz',
-    start: p(1, 1, 0),
-    end: p(3, 3, 11)
-  }
-
-  test('at start', () => {
-    const loc2 = getInnerRange(loc1, 0, 4)
-    expect(loc2.start).toEqual(loc1.start)
-    expect(loc2.end.column).toBe(1)
-    expect(loc2.end.line).toBe(2)
-    expect(loc2.end.offset).toBe(4)
-  })
-
-  test('in between', () => {
-    const loc2 = getInnerRange(loc1, 4, 3)
-    expect(loc2.start.column).toBe(1)
-    expect(loc2.start.line).toBe(2)
-    expect(loc2.start.offset).toBe(4)
-    expect(loc2.end.column).toBe(4)
-    expect(loc2.end.line).toBe(2)
-    expect(loc2.end.offset).toBe(7)
-  })
-})
-
 describe('isMemberExpression', () => {
-  function commonAssertions(fn: (str: string) => boolean) {
+  function commonAssertions(raw: (exp: ExpressionNode) => boolean) {
+    const fn = (str: string) => raw(createSimpleExpression(str))
     // should work
     expect(fn('obj.foo')).toBe(true)
     expect(fn('obj[foo]')).toBe(true)
@@ -105,13 +79,16 @@ describe('isMemberExpression', () => {
 
   test('browser', () => {
     commonAssertions(isMemberExpressionBrowser)
-    expect(isMemberExpressionBrowser('123[a]')).toBe(false)
+    expect(isMemberExpressionBrowser(createSimpleExpression('123[a]'))).toBe(
+      false,
+    )
   })
 
   test('node', () => {
     const ctx = { expressionPlugins: ['typescript'] } as any as TransformContext
-    const fn = (str: string) => isMemberExpressionNode(str, ctx)
-    commonAssertions(fn)
+    const fn = (str: string) =>
+      isMemberExpressionNode(createSimpleExpression(str), ctx)
+    commonAssertions(exp => isMemberExpressionNode(exp, ctx))
 
     // TS-specific checks
     expect(fn('foo as string')).toBe(true)
@@ -122,6 +99,10 @@ describe('isMemberExpression', () => {
     expect(fn(`123[a]`)).toBe(true)
     expect(fn(`foo() as string`)).toBe(false)
     expect(fn(`a + b as string`)).toBe(false)
+    // #9865
+    expect(fn('""')).toBe(false)
+    expect(fn('undefined')).toBe(false)
+    expect(fn('null')).toBe(false)
   })
 })
 
@@ -131,6 +112,6 @@ test('toValidAssetId', () => {
   expect(toValidAssetId('div', 'filter')).toBe('_filter_div')
   expect(toValidAssetId('foo-bar', 'component')).toBe('_component_foo_bar')
   expect(toValidAssetId('test-测试-1', 'component')).toBe(
-    '_component_test_2797935797_1'
+    '_component_test_2797935797_1',
   )
 })
diff --git a/packages/compiler-core/package.json b/packages/compiler-core/package.json
index bfb35cc94..4fb760168 100644
--- a/packages/compiler-core/package.json
+++ b/packages/compiler-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.3.9",
+  "version": "3.5.11",
   "description": "@vue/compiler-core",
   "main": "index.js",
   "module": "dist/compiler-core.esm-bundler.js",
@@ -9,6 +9,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/compiler-core.d.ts",
+      "node": {
+        "production": "./dist/compiler-core.cjs.prod.js",
+        "development": "./dist/compiler-core.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/compiler-core.esm-bundler.js",
+      "import": "./dist/compiler-core.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "buildOptions": {
     "name": "VueCompilerCore",
     "compat": true,
@@ -32,12 +46,13 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-core#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.4",
+    "@babel/parser": "catalog:",
     "@vue/shared": "workspace:*",
-    "estree-walker": "^2.0.2",
-    "source-map-js": "^1.0.2"
+    "entities": "^4.5.0",
+    "estree-walker": "catalog:",
+    "source-map-js": "catalog:"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.4"
+    "@babel/types": "catalog:"
   }
 }
diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index 515083c33..cfd5fee25 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -1,31 +1,32 @@
-import { isString } from '@vue/shared'
-import { ForParseResult } from './transforms/vFor'
+import { type PatchFlags, isString } from '@vue/shared'
 import {
-  RENDER_SLOT,
-  CREATE_SLOTS,
-  RENDER_LIST,
-  OPEN_BLOCK,
-  FRAGMENT,
-  WITH_DIRECTIVES,
-  WITH_MEMO,
-  CREATE_VNODE,
-  CREATE_ELEMENT_VNODE,
   CREATE_BLOCK,
-  CREATE_ELEMENT_BLOCK
+  CREATE_ELEMENT_BLOCK,
+  CREATE_ELEMENT_VNODE,
+  type CREATE_SLOTS,
+  CREATE_VNODE,
+  type FRAGMENT,
+  OPEN_BLOCK,
+  type RENDER_LIST,
+  type RENDER_SLOT,
+  WITH_DIRECTIVES,
+  type WITH_MEMO,
 } from './runtimeHelpers'
-import { PropsExpression } from './transforms/transformElement'
-import { ImportItem, TransformContext } from './transform'
+import type { PropsExpression } from './transforms/transformElement'
+import type { ImportItem, TransformContext } from './transform'
+import type { Node as BabelNode } from '@babel/types'
 
 // Vue template is a platform-agnostic superset of HTML (syntax only).
-// More namespaces like SVG and MathML are declared by platform specific
-// compilers.
+// More namespaces can be declared by platform specific compilers.
 export type Namespace = number
 
-export const enum Namespaces {
-  HTML
+export enum Namespaces {
+  HTML,
+  SVG,
+  MATH_ML,
 }
 
-export const enum NodeTypes {
+export enum NodeTypes {
   ROOT,
   ELEMENT,
   TEXT,
@@ -56,14 +57,14 @@ export const enum NodeTypes {
   JS_IF_STATEMENT,
   JS_ASSIGNMENT_EXPRESSION,
   JS_SEQUENCE_EXPRESSION,
-  JS_RETURN_STATEMENT
+  JS_RETURN_STATEMENT,
 }
 
-export const enum ElementTypes {
+export enum ElementTypes {
   ELEMENT,
   COMPONENT,
   SLOT,
-  TEMPLATE
+  TEMPLATE,
 }
 
 export interface Node {
@@ -102,16 +103,18 @@ export type TemplateChildNode =
 
 export interface RootNode extends Node {
   type: NodeTypes.ROOT
+  source: string
   children: TemplateChildNode[]
   helpers: Set<symbol>
   components: string[]
   directives: string[]
   hoists: (JSChildNode | null)[]
   imports: ImportItem[]
-  cached: number
+  cached: (CacheExpression | null)[]
   temps: number
   ssrHelpers?: symbol[]
   codegenNode?: TemplateChildNode | JSChildNode | BlockStatement
+  transformed?: boolean
 
   // v2 compat only
   filters?: string[]
@@ -128,9 +131,10 @@ export interface BaseElementNode extends Node {
   ns: Namespace
   tag: string
   tagType: ElementTypes
-  isSelfClosing: boolean
   props: Array<AttributeNode | DirectiveNode>
   children: TemplateChildNode[]
+  isSelfClosing?: boolean
+  innerLoc?: SourceLocation // only for SFC root level elements
 }
 
 export interface PlainElementNode extends BaseElementNode {
@@ -182,19 +186,28 @@ export interface CommentNode extends Node {
 export interface AttributeNode extends Node {
   type: NodeTypes.ATTRIBUTE
   name: string
+  nameLoc: SourceLocation
   value: TextNode | undefined
 }
 
 export interface DirectiveNode extends Node {
   type: NodeTypes.DIRECTIVE
+  /**
+   * the normalized name without prefix or shorthands, e.g. "bind", "on"
+   */
   name: string
+  /**
+   * the raw attribute name, preserving shorthand, and including arg & modifiers
+   * this is only used during parse.
+   */
+  rawName?: string
   exp: ExpressionNode | undefined
   arg: ExpressionNode | undefined
-  modifiers: string[]
+  modifiers: SimpleExpressionNode[]
   /**
    * optional property to cache the expression parse result for v-for
    */
-  parseResult?: ForParseResult
+  forParseResult?: ForParseResult
 }
 
 /**
@@ -202,11 +215,11 @@ export interface DirectiveNode extends Node {
  * Higher levels implies lower levels. e.g. a node that can be stringified
  * can always be hoisted and skipped for patch.
  */
-export const enum ConstantTypes {
+export enum ConstantTypes {
   NOT_CONSTANT = 0,
   CAN_SKIP_PATCH,
-  CAN_HOIST,
-  CAN_STRINGIFY
+  CAN_CACHE,
+  CAN_STRINGIFY,
 }
 
 export interface SimpleExpressionNode extends Node {
@@ -214,6 +227,12 @@ export interface SimpleExpressionNode extends Node {
   content: string
   isStatic: boolean
   constType: ConstantTypes
+  /**
+   * - `null` means the expression is a simple identifier that doesn't need
+   *    parsing
+   * - `false` means there was a parsing error
+   */
+  ast?: BabelNode | null | false
   /**
    * Indicates this is an identifier for a hoist vnode call and points to the
    * hoisted node.
@@ -234,6 +253,12 @@ export interface InterpolationNode extends Node {
 
 export interface CompoundExpressionNode extends Node {
   type: NodeTypes.COMPOUND_EXPRESSION
+  /**
+   * - `null` means the expression is a simple identifier that doesn't need
+   *    parsing
+   * - `false` means there was a parsing error
+   */
+  ast?: BabelNode | null | false
   children: (
     | SimpleExpressionNode
     | CompoundExpressionNode
@@ -276,6 +301,14 @@ export interface ForNode extends Node {
   codegenNode?: ForCodegenNode
 }
 
+export interface ForParseResult {
+  source: ExpressionNode
+  value: ExpressionNode | undefined
+  key: ExpressionNode | undefined
+  index: ExpressionNode | undefined
+  finalized: boolean
+}
+
 export interface TextCallNode extends Node {
   type: NodeTypes.TEXT_CALL
   content: TextNode | InterpolationNode | CompoundExpressionNode
@@ -297,8 +330,9 @@ export interface VNodeCall extends Node {
     | SlotsExpression // component slots
     | ForRenderListExpression // v-for fragment call
     | SimpleExpressionNode // hoisted
+    | CacheExpression // cached
     | undefined
-  patchFlag: string | undefined
+  patchFlag: PatchFlags | undefined
   dynamicProps: string | SimpleExpressionNode | undefined
   directives: DirectiveArguments | undefined
   isBlock: boolean
@@ -383,7 +417,8 @@ export interface CacheExpression extends Node {
   type: NodeTypes.JS_CACHE_EXPRESSION
   index: number
   value: JSChildNode
-  isVNode: boolean
+  needPauseTracking: boolean
+  needArraySpread: boolean
 }
 
 export interface MemoExpression extends CallExpression {
@@ -462,7 +497,7 @@ export interface RenderSlotCall extends CallExpression {
         string,
         string | ExpressionNode,
         PropsExpression | '{}',
-        TemplateChildNode[]
+        TemplateChildNode[],
       ]
 }
 
@@ -478,7 +513,7 @@ export interface SlotsObjectProperty extends Property {
 }
 
 export interface SlotFunctionExpression extends FunctionExpression {
-  returns: TemplateChildNode[]
+  returns: TemplateChildNode[] | CacheExpression
 }
 
 // createSlots({ ... }, [
@@ -528,7 +563,7 @@ export interface ForCodegenNode extends VNodeCall {
   tag: typeof FRAGMENT
   props: undefined
   children: ForRenderListExpression
-  patchFlag: string
+  patchFlag: PatchFlags
   disableTracking: boolean
 }
 
@@ -538,7 +573,7 @@ export interface ForRenderListExpression extends CallExpression {
 }
 
 export interface ForIteratorExpression extends FunctionExpression {
-  returns: BlockCodegenNode
+  returns?: BlockCodegenNode
 }
 
 // AST Utilities ---------------------------------------------------------------
@@ -547,27 +582,28 @@ export interface ForIteratorExpression extends FunctionExpression {
 // associated with template nodes, so their source locations are just a stub.
 // Container types like CompoundExpression also don't need a real location.
 export const locStub: SourceLocation = {
-  source: '',
   start: { line: 1, column: 1, offset: 0 },
-  end: { line: 1, column: 1, offset: 0 }
+  end: { line: 1, column: 1, offset: 0 },
+  source: '',
 }
 
 export function createRoot(
   children: TemplateChildNode[],
-  loc = locStub
+  source = '',
 ): RootNode {
   return {
     type: NodeTypes.ROOT,
+    source,
     children,
     helpers: new Set(),
     components: [],
     directives: [],
     hoists: [],
     imports: [],
-    cached: 0,
+    cached: [],
     temps: 0,
     codegenNode: undefined,
-    loc
+    loc: locStub,
   }
 }
 
@@ -582,7 +618,7 @@ export function createVNodeCall(
   isBlock: VNodeCall['isBlock'] = false,
   disableTracking: VNodeCall['disableTracking'] = false,
   isComponent: VNodeCall['isComponent'] = false,
-  loc = locStub
+  loc: SourceLocation = locStub,
 ): VNodeCall {
   if (context) {
     if (isBlock) {
@@ -607,41 +643,41 @@ export function createVNodeCall(
     isBlock,
     disableTracking,
     isComponent,
-    loc
+    loc,
   }
 }
 
 export function createArrayExpression(
   elements: ArrayExpression['elements'],
-  loc: SourceLocation = locStub
+  loc: SourceLocation = locStub,
 ): ArrayExpression {
   return {
     type: NodeTypes.JS_ARRAY_EXPRESSION,
     loc,
-    elements
+    elements,
   }
 }
 
 export function createObjectExpression(
   properties: ObjectExpression['properties'],
-  loc: SourceLocation = locStub
+  loc: SourceLocation = locStub,
 ): ObjectExpression {
   return {
     type: NodeTypes.JS_OBJECT_EXPRESSION,
     loc,
-    properties
+    properties,
   }
 }
 
 export function createObjectProperty(
   key: Property['key'] | string,
-  value: Property['value']
+  value: Property['value'],
 ): Property {
   return {
     type: NodeTypes.JS_PROPERTY,
     loc: locStub,
     key: isString(key) ? createSimpleExpression(key, true) : key,
-    value
+    value,
   }
 }
 
@@ -649,38 +685,38 @@ export function createSimpleExpression(
   content: SimpleExpressionNode['content'],
   isStatic: SimpleExpressionNode['isStatic'] = false,
   loc: SourceLocation = locStub,
-  constType: ConstantTypes = ConstantTypes.NOT_CONSTANT
+  constType: ConstantTypes = ConstantTypes.NOT_CONSTANT,
 ): SimpleExpressionNode {
   return {
     type: NodeTypes.SIMPLE_EXPRESSION,
     loc,
     content,
     isStatic,
-    constType: isStatic ? ConstantTypes.CAN_STRINGIFY : constType
+    constType: isStatic ? ConstantTypes.CAN_STRINGIFY : constType,
   }
 }
 
 export function createInterpolation(
   content: InterpolationNode['content'] | string,
-  loc: SourceLocation
+  loc: SourceLocation,
 ): InterpolationNode {
   return {
     type: NodeTypes.INTERPOLATION,
     loc,
     content: isString(content)
       ? createSimpleExpression(content, false, loc)
-      : content
+      : content,
   }
 }
 
 export function createCompoundExpression(
   children: CompoundExpressionNode['children'],
-  loc: SourceLocation = locStub
+  loc: SourceLocation = locStub,
 ): CompoundExpressionNode {
   return {
     type: NodeTypes.COMPOUND_EXPRESSION,
     loc,
-    children
+    children,
   }
 }
 
@@ -691,13 +727,13 @@ type InferCodegenNodeType<T> = T extends typeof RENDER_SLOT
 export function createCallExpression<T extends CallExpression['callee']>(
   callee: T,
   args: CallExpression['arguments'] = [],
-  loc: SourceLocation = locStub
+  loc: SourceLocation = locStub,
 ): InferCodegenNodeType<T> {
   return {
     type: NodeTypes.JS_CALL_EXPRESSION,
     loc,
     callee,
-    arguments: args
+    arguments: args,
   } as InferCodegenNodeType<T>
 }
 
@@ -706,7 +742,7 @@ export function createFunctionExpression(
   returns: FunctionExpression['returns'] = undefined,
   newline: boolean = false,
   isSlot: boolean = false,
-  loc: SourceLocation = locStub
+  loc: SourceLocation = locStub,
 ): FunctionExpression {
   return {
     type: NodeTypes.JS_FUNCTION_EXPRESSION,
@@ -714,7 +750,7 @@ export function createFunctionExpression(
     returns,
     newline,
     isSlot,
-    loc
+    loc,
   }
 }
 
@@ -722,7 +758,7 @@ export function createConditionalExpression(
   test: ConditionalExpression['test'],
   consequent: ConditionalExpression['consequent'],
   alternate: ConditionalExpression['alternate'],
-  newline = true
+  newline = true,
 ): ConditionalExpression {
   return {
     type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
@@ -730,102 +766,109 @@ export function createConditionalExpression(
     consequent,
     alternate,
     newline,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createCacheExpression(
   index: number,
   value: JSChildNode,
-  isVNode: boolean = false
+  needPauseTracking: boolean = false,
 ): CacheExpression {
   return {
     type: NodeTypes.JS_CACHE_EXPRESSION,
     index,
     value,
-    isVNode,
-    loc: locStub
+    needPauseTracking: needPauseTracking,
+    needArraySpread: false,
+    loc: locStub,
   }
 }
 
 export function createBlockStatement(
-  body: BlockStatement['body']
+  body: BlockStatement['body'],
 ): BlockStatement {
   return {
     type: NodeTypes.JS_BLOCK_STATEMENT,
     body,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createTemplateLiteral(
-  elements: TemplateLiteral['elements']
+  elements: TemplateLiteral['elements'],
 ): TemplateLiteral {
   return {
     type: NodeTypes.JS_TEMPLATE_LITERAL,
     elements,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createIfStatement(
   test: IfStatement['test'],
   consequent: IfStatement['consequent'],
-  alternate?: IfStatement['alternate']
+  alternate?: IfStatement['alternate'],
 ): IfStatement {
   return {
     type: NodeTypes.JS_IF_STATEMENT,
     test,
     consequent,
     alternate,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createAssignmentExpression(
   left: AssignmentExpression['left'],
-  right: AssignmentExpression['right']
+  right: AssignmentExpression['right'],
 ): AssignmentExpression {
   return {
     type: NodeTypes.JS_ASSIGNMENT_EXPRESSION,
     left,
     right,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createSequenceExpression(
-  expressions: SequenceExpression['expressions']
+  expressions: SequenceExpression['expressions'],
 ): SequenceExpression {
   return {
     type: NodeTypes.JS_SEQUENCE_EXPRESSION,
     expressions,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createReturnStatement(
-  returns: ReturnStatement['returns']
+  returns: ReturnStatement['returns'],
 ): ReturnStatement {
   return {
     type: NodeTypes.JS_RETURN_STATEMENT,
     returns,
-    loc: locStub
+    loc: locStub,
   }
 }
 
-export function getVNodeHelper(ssr: boolean, isComponent: boolean) {
+export function getVNodeHelper(
+  ssr: boolean,
+  isComponent: boolean,
+): typeof CREATE_VNODE | typeof CREATE_ELEMENT_VNODE {
   return ssr || isComponent ? CREATE_VNODE : CREATE_ELEMENT_VNODE
 }
 
-export function getVNodeBlockHelper(ssr: boolean, isComponent: boolean) {
+export function getVNodeBlockHelper(
+  ssr: boolean,
+  isComponent: boolean,
+): typeof CREATE_BLOCK | typeof CREATE_ELEMENT_BLOCK {
   return ssr || isComponent ? CREATE_BLOCK : CREATE_ELEMENT_BLOCK
 }
 
 export function convertToBlock(
   node: VNodeCall,
-  { helper, removeHelper, inSSR }: TransformContext
-) {
+  { helper, removeHelper, inSSR }: TransformContext,
+): void {
   if (!node.isBlock) {
     node.isBlock = true
     removeHelper(getVNodeHelper(inSSR, node.isComponent))
diff --git a/packages/compiler-core/src/babelUtils.ts b/packages/compiler-core/src/babelUtils.ts
index 1f1e3896a..52fabeea8 100644
--- a/packages/compiler-core/src/babelUtils.ts
+++ b/packages/compiler-core/src/babelUtils.ts
@@ -1,39 +1,45 @@
 // should only use types from @babel/types
 // do not import runtime methods
 import type {
+  BlockStatement,
+  ForInStatement,
+  ForOfStatement,
+  ForStatement,
+  Function,
   Identifier,
   Node,
-  Function,
   ObjectProperty,
-  BlockStatement,
-  Program
+  Program,
 } from '@babel/types'
 import { walk } from 'estree-walker'
 
+/**
+ * Return value indicates whether the AST walked can be a constant
+ */
 export function walkIdentifiers(
   root: Node,
   onIdentifier: (
     node: Identifier,
-    parent: Node,
+    parent: Node | null,
     parentStack: Node[],
     isReference: boolean,
-    isLocal: boolean
+    isLocal: boolean,
   ) => void,
   includeAll = false,
   parentStack: Node[] = [],
-  knownIds: Record<string, number> = Object.create(null)
-) {
+  knownIds: Record<string, number> = Object.create(null),
+): void {
   if (__BROWSER__) {
     return
   }
 
   const rootExp =
-    root.type === 'Program' &&
-    root.body[0].type === 'ExpressionStatement' &&
-    root.body[0].expression
+    root.type === 'Program'
+      ? root.body[0].type === 'ExpressionStatement' && root.body[0].expression
+      : root
 
   walk(root, {
-    enter(node: Node & { scopeIds?: Set<string> }, parent: Node | undefined) {
+    enter(node: Node & { scopeIds?: Set<string> }, parent: Node | null) {
       parent && parentStack.push(parent)
       if (
         parent &&
@@ -44,28 +50,47 @@ export function walkIdentifiers(
       }
       if (node.type === 'Identifier') {
         const isLocal = !!knownIds[node.name]
-        const isRefed = isReferencedIdentifier(node, parent!, parentStack)
+        const isRefed = isReferencedIdentifier(node, parent, parentStack)
         if (includeAll || (isRefed && !isLocal)) {
-          onIdentifier(node, parent!, parentStack, isRefed, isLocal)
+          onIdentifier(node, parent, parentStack, isRefed, isLocal)
         }
       } else if (
         node.type === 'ObjectProperty' &&
-        parent!.type === 'ObjectPattern'
+        // eslint-disable-next-line no-restricted-syntax
+        parent?.type === 'ObjectPattern'
       ) {
         // mark property in destructure pattern
         ;(node as any).inPattern = true
       } else if (isFunctionType(node)) {
-        // walk function expressions and add its arguments to known identifiers
-        // so that we don't prefix them
-        walkFunctionParams(node, id => markScopeIdentifier(node, id, knownIds))
+        if (node.scopeIds) {
+          node.scopeIds.forEach(id => markKnownIds(id, knownIds))
+        } else {
+          // walk function expressions and add its arguments to known identifiers
+          // so that we don't prefix them
+          walkFunctionParams(node, id =>
+            markScopeIdentifier(node, id, knownIds),
+          )
+        }
       } else if (node.type === 'BlockStatement') {
-        // #3445 record block-level local variables
-        walkBlockDeclarations(node, id =>
+        if (node.scopeIds) {
+          node.scopeIds.forEach(id => markKnownIds(id, knownIds))
+        } else {
+          // #3445 record block-level local variables
+          walkBlockDeclarations(node, id =>
+            markScopeIdentifier(node, id, knownIds),
+          )
+        }
+      } else if (node.type === 'CatchClause' && node.param) {
+        for (const id of extractIdentifiers(node.param)) {
           markScopeIdentifier(node, id, knownIds)
+        }
+      } else if (isForStatement(node)) {
+        walkForStatement(node, false, id =>
+          markScopeIdentifier(node, id, knownIds),
         )
       }
     },
-    leave(node: Node & { scopeIds?: Set<string> }, parent: Node | undefined) {
+    leave(node: Node & { scopeIds?: Set<string> }, parent: Node | null) {
       parent && parentStack.pop()
       if (node !== rootExp && node.scopeIds) {
         for (const id of node.scopeIds) {
@@ -75,15 +100,15 @@ export function walkIdentifiers(
           }
         }
       }
-    }
+    },
   })
 }
 
 export function isReferencedIdentifier(
   id: Identifier,
   parent: Node | null,
-  parentStack: Node[]
-) {
+  parentStack: Node[],
+): boolean {
   if (__BROWSER__) {
     return false
   }
@@ -117,7 +142,7 @@ export function isReferencedIdentifier(
 
 export function isInDestructureAssignment(
   parent: Node,
-  parentStack: Node[]
+  parentStack: Node[],
 ): boolean {
   if (
     parent &&
@@ -136,10 +161,23 @@ export function isInDestructureAssignment(
   return false
 }
 
+export function isInNewExpression(parentStack: Node[]): boolean {
+  let i = parentStack.length
+  while (i--) {
+    const p = parentStack[i]
+    if (p.type === 'NewExpression') {
+      return true
+    } else if (p.type !== 'MemberExpression') {
+      break
+    }
+  }
+  return false
+}
+
 export function walkFunctionParams(
   node: Function,
-  onIdent: (id: Identifier) => void
-) {
+  onIdent: (id: Identifier) => void,
+): void {
   for (const p of node.params) {
     for (const id of extractIdentifiers(p)) {
       onIdent(id)
@@ -149,8 +187,8 @@ export function walkFunctionParams(
 
 export function walkBlockDeclarations(
   block: BlockStatement | Program,
-  onIdent: (node: Identifier) => void
-) {
+  onIdent: (node: Identifier) => void,
+): void {
   for (const stmt of block.body) {
     if (stmt.type === 'VariableDeclaration') {
       if (stmt.declare) continue
@@ -165,18 +203,36 @@ export function walkBlockDeclarations(
     ) {
       if (stmt.declare || !stmt.id) continue
       onIdent(stmt.id)
-    } else if (
-      stmt.type === 'ForOfStatement' ||
-      stmt.type === 'ForInStatement' ||
-      stmt.type === 'ForStatement'
-    ) {
-      const variable = stmt.type === 'ForStatement' ? stmt.init : stmt.left
-      if (variable && variable.type === 'VariableDeclaration') {
-        for (const decl of variable.declarations) {
-          for (const id of extractIdentifiers(decl.id)) {
-            onIdent(id)
-          }
-        }
+    } else if (isForStatement(stmt)) {
+      walkForStatement(stmt, true, onIdent)
+    }
+  }
+}
+
+function isForStatement(
+  stmt: Node,
+): stmt is ForStatement | ForOfStatement | ForInStatement {
+  return (
+    stmt.type === 'ForOfStatement' ||
+    stmt.type === 'ForInStatement' ||
+    stmt.type === 'ForStatement'
+  )
+}
+
+function walkForStatement(
+  stmt: ForStatement | ForOfStatement | ForInStatement,
+  isVar: boolean,
+  onIdent: (id: Identifier) => void,
+) {
+  const variable = stmt.type === 'ForStatement' ? stmt.init : stmt.left
+  if (
+    variable &&
+    variable.type === 'VariableDeclaration' &&
+    (variable.kind === 'var' ? isVar : !isVar)
+  ) {
+    for (const decl of variable.declarations) {
+      for (const id of extractIdentifiers(decl.id)) {
+        onIdent(id)
       }
     }
   }
@@ -184,7 +240,7 @@ export function walkBlockDeclarations(
 
 export function extractIdentifiers(
   param: Node,
-  nodes: Identifier[] = []
+  nodes: Identifier[] = [],
 ): Identifier[] {
   switch (param.type) {
     case 'Identifier':
@@ -227,20 +283,24 @@ export function extractIdentifiers(
   return nodes
 }
 
-function markScopeIdentifier(
-  node: Node & { scopeIds?: Set<string> },
-  child: Identifier,
-  knownIds: Record<string, number>
-) {
-  const { name } = child
-  if (node.scopeIds && node.scopeIds.has(name)) {
-    return
-  }
+function markKnownIds(name: string, knownIds: Record<string, number>) {
   if (name in knownIds) {
     knownIds[name]++
   } else {
     knownIds[name] = 1
   }
+}
+
+function markScopeIdentifier(
+  node: Node & { scopeIds?: Set<string> },
+  child: Identifier,
+  knownIds: Record<string, number>,
+) {
+  const { name } = child
+  if (node.scopeIds && node.scopeIds.has(name)) {
+    return
+  }
+  markKnownIds(name, knownIds)
   ;(node.scopeIds || (node.scopeIds = new Set())).add(name)
 }
 
@@ -253,7 +313,7 @@ export const isStaticProperty = (node: Node): node is ObjectProperty =>
   (node.type === 'ObjectProperty' || node.type === 'ObjectMethod') &&
   !node.computed
 
-export const isStaticPropertyKey = (node: Node, parent: Node) =>
+export const isStaticPropertyKey = (node: Node, parent: Node): boolean =>
   isStaticProperty(parent) && parent.key === node
 
 /**
@@ -377,6 +437,7 @@ function isReferenced(node: Node, parent: Node, grandparent?: Node): boolean {
     // no: export { NODE as foo } from "foo";
     case 'ExportSpecifier':
       // @ts-expect-error
+      // eslint-disable-next-line no-restricted-syntax
       if (grandparent?.source) {
         return false
       }
@@ -434,10 +495,18 @@ function isReferenced(node: Node, parent: Node, grandparent?: Node): boolean {
   return true
 }
 
-export const TS_NODE_TYPES = [
+export const TS_NODE_TYPES: string[] = [
   'TSAsExpression', // foo as number
   'TSTypeAssertion', // (<number>foo)
   'TSNonNullExpression', // foo!
   'TSInstantiationExpression', // foo<string>
-  'TSSatisfiesExpression' // foo satisfies T
+  'TSSatisfiesExpression', // foo satisfies T
 ]
+
+export function unwrapTSNode(node: Node): Node {
+  if (TS_NODE_TYPES.includes(node.type)) {
+    return unwrapTSNode((node as any).expression)
+  } else {
+    return node
+  }
+}
diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index ceae49982..6b6f24b3a 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -1,62 +1,105 @@
-import { CodegenOptions } from './options'
+import type { CodegenOptions } from './options'
 import {
-  RootNode,
-  TemplateChildNode,
-  TextNode,
-  CommentNode,
-  ExpressionNode,
+  type ArrayExpression,
+  type AssignmentExpression,
+  type CacheExpression,
+  type CallExpression,
+  type CommentNode,
+  type CompoundExpressionNode,
+  type ConditionalExpression,
+  type ExpressionNode,
+  type FunctionExpression,
+  type IfStatement,
+  type InterpolationNode,
+  type JSChildNode,
   NodeTypes,
-  JSChildNode,
-  CallExpression,
-  ArrayExpression,
-  ObjectExpression,
-  Position,
-  InterpolationNode,
-  CompoundExpressionNode,
-  SimpleExpressionNode,
-  FunctionExpression,
-  ConditionalExpression,
-  CacheExpression,
-  locStub,
-  SSRCodegenNode,
-  TemplateLiteral,
-  IfStatement,
-  AssignmentExpression,
-  ReturnStatement,
-  VNodeCall,
-  SequenceExpression,
+  type ObjectExpression,
+  type Position,
+  type ReturnStatement,
+  type RootNode,
+  type SSRCodegenNode,
+  type SequenceExpression,
+  type SimpleExpressionNode,
+  type TemplateChildNode,
+  type TemplateLiteral,
+  type TextNode,
+  type VNodeCall,
   getVNodeBlockHelper,
-  getVNodeHelper
+  getVNodeHelper,
+  locStub,
 } from './ast'
-import { SourceMapGenerator, RawSourceMap } from 'source-map-js'
+import { SourceMapGenerator } from 'source-map-js'
 import {
   advancePositionWithMutation,
   assert,
   isSimpleIdentifier,
-  toValidAssetId
+  toValidAssetId,
 } from './utils'
-import { isString, isArray, isSymbol } from '@vue/shared'
 import {
-  helperNameMap,
-  TO_DISPLAY_STRING,
+  PatchFlagNames,
+  type PatchFlags,
+  isArray,
+  isString,
+  isSymbol,
+} from '@vue/shared'
+import {
+  CREATE_COMMENT,
+  CREATE_ELEMENT_VNODE,
+  CREATE_STATIC,
+  CREATE_TEXT,
   CREATE_VNODE,
+  OPEN_BLOCK,
   RESOLVE_COMPONENT,
   RESOLVE_DIRECTIVE,
+  RESOLVE_FILTER,
   SET_BLOCK_TRACKING,
-  CREATE_COMMENT,
-  CREATE_TEXT,
-  PUSH_SCOPE_ID,
-  POP_SCOPE_ID,
-  WITH_DIRECTIVES,
-  CREATE_ELEMENT_VNODE,
-  OPEN_BLOCK,
-  CREATE_STATIC,
+  TO_DISPLAY_STRING,
   WITH_CTX,
-  RESOLVE_FILTER
+  WITH_DIRECTIVES,
+  helperNameMap,
 } from './runtimeHelpers'
-import { ImportItem } from './transform'
+import type { ImportItem } from './transform'
 
-const PURE_ANNOTATION = `/*#__PURE__*/`
+/**
+ * The `SourceMapGenerator` type from `source-map-js` is a bit incomplete as it
+ * misses `toJSON()`. We also need to add types for internal properties which we
+ * need to access for better performance.
+ *
+ * Since TS 5.3, dts generation starts to strangely include broken triple slash
+ * references for source-map-js, so we are inlining all source map related types
+ * here to to workaround that.
+ */
+export interface CodegenSourceMapGenerator {
+  setSourceContent(sourceFile: string, sourceContent: string): void
+  // SourceMapGenerator has this method but the types do not include it
+  toJSON(): RawSourceMap
+  _sources: Set<string>
+  _names: Set<string>
+  _mappings: {
+    add(mapping: MappingItem): void
+  }
+}
+
+export interface RawSourceMap {
+  file?: string
+  sourceRoot?: string
+  version: string
+  sources: string[]
+  names: string[]
+  sourcesContent?: string[]
+  mappings: string
+}
+
+interface MappingItem {
+  source: string
+  generatedLine: number
+  generatedColumn: number
+  originalLine: number
+  originalColumn: number
+  name: string | null
+}
+
+const PURE_ANNOTATION = `/*@__PURE__*/`
 
 const aliasHelper = (s: symbol) => `${helperNameMap[s]}: _${helperNameMap[s]}`
 
@@ -69,6 +112,13 @@ export interface CodegenResult {
   map?: RawSourceMap
 }
 
+enum NewlineType {
+  Start = 0,
+  End = -1,
+  None = -2,
+  Unknown = -3,
+}
+
 export interface CodegenContext
   extends Omit<Required<CodegenOptions>, 'bindingMetadata' | 'inline'> {
   source: string
@@ -78,9 +128,9 @@ export interface CodegenContext
   offset: number
   indentLevel: number
   pure: boolean
-  map?: SourceMapGenerator
+  map?: CodegenSourceMapGenerator
   helper(key: symbol): string
-  push(code: string, node?: CodegenNode): void
+  push(code: string, newlineIndex?: number, node?: CodegenNode): void
   indent(): void
   deindent(withoutNewLine?: boolean): void
   newline(): void
@@ -100,8 +150,8 @@ function createCodegenContext(
     ssrRuntimeModuleName = 'vue/server-renderer',
     ssr = false,
     isTS = false,
-    inSSR = false
-  }: CodegenOptions
+    inSSR = false,
+  }: CodegenOptions,
 ): CodegenContext {
   const context: CodegenContext = {
     mode,
@@ -116,7 +166,7 @@ function createCodegenContext(
     ssr,
     isTS,
     inSSR,
-    source: ast.loc.source,
+    source: ast.source,
     code: ``,
     column: 1,
     line: 1,
@@ -127,7 +177,7 @@ function createCodegenContext(
     helper(key) {
       return `_${helperNameMap[key]}`
     },
-    push(code, node) {
+    push(code, newlineIndex = NewlineType.None, node) {
       context.code += code
       if (!__BROWSER__ && context.map) {
         if (node) {
@@ -140,7 +190,41 @@ function createCodegenContext(
           }
           addMapping(node.loc.start, name)
         }
-        advancePositionWithMutation(context, code)
+        if (newlineIndex === NewlineType.Unknown) {
+          // multiple newlines, full iteration
+          advancePositionWithMutation(context, code)
+        } else {
+          // fast paths
+          context.offset += code.length
+          if (newlineIndex === NewlineType.None) {
+            // no newlines; fast path to avoid newline detection
+            if (__TEST__ && code.includes('\n')) {
+              throw new Error(
+                `CodegenContext.push() called newlineIndex: none, but contains` +
+                  `newlines: ${code.replace(/\n/g, '\\n')}`,
+              )
+            }
+            context.column += code.length
+          } else {
+            // single newline at known index
+            if (newlineIndex === NewlineType.End) {
+              newlineIndex = code.length - 1
+            }
+            if (
+              __TEST__ &&
+              (code.charAt(newlineIndex) !== '\n' ||
+                code.slice(0, newlineIndex).includes('\n') ||
+                code.slice(newlineIndex + 1).includes('\n'))
+            ) {
+              throw new Error(
+                `CodegenContext.push() called with newlineIndex: ${newlineIndex} ` +
+                  `but does not conform: ${code.replace(/\n/g, '\\n')}`,
+              )
+            }
+            context.line++
+            context.column = code.length - newlineIndex
+          }
+        }
         if (node && node.loc !== locStub) {
           addMapping(node.loc.end)
         }
@@ -158,32 +242,35 @@ function createCodegenContext(
     },
     newline() {
       newline(context.indentLevel)
-    }
+    },
   }
 
   function newline(n: number) {
-    context.push('\n' + `  `.repeat(n))
+    context.push('\n' + `  `.repeat(n), NewlineType.Start)
   }
 
-  function addMapping(loc: Position, name?: string) {
-    context.map!.addMapping({
+  function addMapping(loc: Position, name: string | null = null) {
+    // we use the private property to directly add the mapping
+    // because the addMapping() implementation in source-map-js has a bunch of
+    // unnecessary arg and validation checks that are pure overhead in our case.
+    const { _names, _mappings } = context.map!
+    if (name !== null && !_names.has(name)) _names.add(name)
+    _mappings.add({
+      originalLine: loc.line,
+      originalColumn: loc.column - 1, // source-map column is 0 based
+      generatedLine: context.line,
+      generatedColumn: context.column - 1,
+      source: filename,
       name,
-      source: context.filename,
-      original: {
-        line: loc.line,
-        column: loc.column - 1 // source-map column is 0 based
-      },
-      generated: {
-        line: context.line,
-        column: context.column - 1
-      }
     })
   }
 
   if (!__BROWSER__ && sourceMap) {
     // lazy require source-map implementation, only in non-browser builds
-    context.map = new SourceMapGenerator()
-    context.map!.setSourceContent(filename, context.source)
+    context.map =
+      new SourceMapGenerator() as unknown as CodegenSourceMapGenerator
+    context.map.setSourceContent(filename, context.source)
+    context.map._sources.add(filename)
   }
 
   return context
@@ -193,7 +280,7 @@ export function generate(
   ast: RootNode,
   options: CodegenOptions & {
     onContextCreated?: (context: CodegenContext) => void
-  } = {}
+  } = {},
 ): CodegenResult {
   const context = createCodegenContext(ast, options)
   if (options.onContextCreated) options.onContextCreated(context)
@@ -205,7 +292,7 @@ export function generate(
     deindent,
     newline,
     scopeId,
-    ssr
+    ssr,
   } = context
 
   const helpers = Array.from(ast.helpers)
@@ -250,8 +337,10 @@ export function generate(
     // function mode const declarations should be inside with block
     // also they should be renamed to avoid collision with user properties
     if (hasHelpers) {
-      push(`const { ${helpers.map(aliasHelper).join(', ')} } = _Vue`)
-      push(`\n`)
+      push(
+        `const { ${helpers.map(aliasHelper).join(', ')} } = _Vue\n`,
+        NewlineType.End,
+      )
       newline()
     }
   }
@@ -282,7 +371,7 @@ export function generate(
     }
   }
   if (ast.components.length || ast.directives.length || ast.temps) {
-    push(`\n`)
+    push(`\n`, NewlineType.Start)
     newline()
   }
 
@@ -308,8 +397,7 @@ export function generate(
     ast,
     code: context.code,
     preamble: isSetupInlined ? preambleContext.code : ``,
-    // SourceMapGenerator does have toJSON() method but it's not in the types
-    map: context.map ? (context.map as any).toJSON() : undefined
+    map: context.map ? context.map.toJSON() : undefined,
   }
 }
 
@@ -321,7 +409,7 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
     newline,
     runtimeModuleName,
     runtimeGlobalName,
-    ssrRuntimeModuleName
+    ssrRuntimeModuleName,
   } = context
   const VueBinding =
     !__BROWSER__ && ssr
@@ -334,11 +422,14 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
   const helpers = Array.from(ast.helpers)
   if (helpers.length > 0) {
     if (!__BROWSER__ && prefixIdentifiers) {
-      push(`const { ${helpers.map(aliasHelper).join(', ')} } = ${VueBinding}\n`)
+      push(
+        `const { ${helpers.map(aliasHelper).join(', ')} } = ${VueBinding}\n`,
+        NewlineType.End,
+      )
     } else {
       // "with" mode.
       // save Vue in a separate variable to avoid collision
-      push(`const _Vue = ${VueBinding}\n`)
+      push(`const _Vue = ${VueBinding}\n`, NewlineType.End)
       // in "with" mode, helpers are declared inside the with block to avoid
       // has check cost, but hoists are lifted out of the function - we need
       // to provide the helper here.
@@ -348,12 +439,12 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
           CREATE_ELEMENT_VNODE,
           CREATE_COMMENT,
           CREATE_TEXT,
-          CREATE_STATIC
+          CREATE_STATIC,
         ]
           .filter(helper => helpers.includes(helper))
           .map(aliasHelper)
           .join(', ')
-        push(`const { ${staticHelpers} } = _Vue\n`)
+        push(`const { ${staticHelpers} } = _Vue\n`, NewlineType.End)
       }
     }
   }
@@ -363,7 +454,8 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
     push(
       `const { ${ast.ssrHelpers
         .map(aliasHelper)
-        .join(', ')} } = require("${ssrRuntimeModuleName}")\n`
+        .join(', ')} } = require("${ssrRuntimeModuleName}")\n`,
+      NewlineType.End,
     )
   }
   genHoists(ast.hoists, context)
@@ -375,21 +467,16 @@ function genModulePreamble(
   ast: RootNode,
   context: CodegenContext,
   genScopeId: boolean,
-  inline?: boolean
+  inline?: boolean,
 ) {
   const {
     push,
     newline,
     optimizeImports,
     runtimeModuleName,
-    ssrRuntimeModuleName
+    ssrRuntimeModuleName,
   } = context
 
-  if (genScopeId && ast.hoists.length) {
-    ast.helpers.add(PUSH_SCOPE_ID)
-    ast.helpers.add(POP_SCOPE_ID)
-  }
-
   // generate import statements for helpers
   if (ast.helpers.size) {
     const helpers = Array.from(ast.helpers)
@@ -402,18 +489,21 @@ function genModulePreamble(
       push(
         `import { ${helpers
           .map(s => helperNameMap[s])
-          .join(', ')} } from ${JSON.stringify(runtimeModuleName)}\n`
+          .join(', ')} } from ${JSON.stringify(runtimeModuleName)}\n`,
+        NewlineType.End,
       )
       push(
         `\n// Binding optimization for webpack code-split\nconst ${helpers
           .map(s => `_${helperNameMap[s]} = ${helperNameMap[s]}`)
-          .join(', ')}\n`
+          .join(', ')}\n`,
+        NewlineType.End,
       )
     } else {
       push(
         `import { ${helpers
           .map(s => `${helperNameMap[s]} as _${helperNameMap[s]}`)
-          .join(', ')} } from ${JSON.stringify(runtimeModuleName)}\n`
+          .join(', ')} } from ${JSON.stringify(runtimeModuleName)}\n`,
+        NewlineType.End,
       )
     }
   }
@@ -422,7 +512,8 @@ function genModulePreamble(
     push(
       `import { ${ast.ssrHelpers
         .map(s => `${helperNameMap[s]} as _${helperNameMap[s]}`)
-        .join(', ')} } from "${ssrRuntimeModuleName}"\n`
+        .join(', ')} } from "${ssrRuntimeModuleName}"\n`,
+      NewlineType.End,
     )
   }
 
@@ -442,14 +533,14 @@ function genModulePreamble(
 function genAssets(
   assets: string[],
   type: 'component' | 'directive' | 'filter',
-  { helper, push, newline, isTS }: CodegenContext
+  { helper, push, newline, isTS }: CodegenContext,
 ) {
   const resolver = helper(
     __COMPAT__ && type === 'filter'
       ? RESOLVE_FILTER
       : type === 'component'
         ? RESOLVE_COMPONENT
-        : RESOLVE_DIRECTIVE
+        : RESOLVE_DIRECTIVE,
   )
   for (let i = 0; i < assets.length; i++) {
     let id = assets[i]
@@ -461,7 +552,7 @@ function genAssets(
     push(
       `const ${toValidAssetId(id, type)} = ${resolver}(${JSON.stringify(id)}${
         maybeSelfReference ? `, true` : ``
-      })${isTS ? `!` : ``}`
+      })${isTS ? `!` : ``}`,
     )
     if (i < assets.length - 1) {
       newline()
@@ -474,33 +565,14 @@ function genHoists(hoists: (JSChildNode | null)[], context: CodegenContext) {
     return
   }
   context.pure = true
-  const { push, newline, helper, scopeId, mode } = context
-  const genScopeId = !__BROWSER__ && scopeId != null && mode !== 'function'
+  const { push, newline } = context
   newline()
 
-  // generate inlined withScopeId helper
-  if (genScopeId) {
-    push(
-      `const _withScopeId = n => (${helper(
-        PUSH_SCOPE_ID
-      )}("${scopeId}"),n=n(),${helper(POP_SCOPE_ID)}(),n)`
-    )
-    newline()
-  }
-
   for (let i = 0; i < hoists.length; i++) {
     const exp = hoists[i]
     if (exp) {
-      const needScopeIdWrapper = genScopeId && exp.type === NodeTypes.VNODE_CALL
-      push(
-        `const _hoisted_${i + 1} = ${
-          needScopeIdWrapper ? `${PURE_ANNOTATION} _withScopeId(() => ` : ``
-        }`
-      )
+      push(`const _hoisted_${i + 1} = `)
       genNode(exp, context)
-      if (needScopeIdWrapper) {
-        push(`)`)
-      }
       newline()
     }
   }
@@ -532,7 +604,7 @@ function isText(n: string | CodegenNode) {
 
 function genNodeListAsArray(
   nodes: (string | CodegenNode | TemplateChildNode[])[],
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   const multilines =
     nodes.length > 3 ||
@@ -548,13 +620,13 @@ function genNodeList(
   nodes: (string | symbol | CodegenNode | TemplateChildNode[])[],
   context: CodegenContext,
   multilines: boolean = false,
-  comma: boolean = true
+  comma: boolean = true,
 ) {
   const { push, newline } = context
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i]
     if (isString(node)) {
-      push(node)
+      push(node, NewlineType.Unknown)
     } else if (isArray(node)) {
       genNodeListAsArray(node, context)
     } else {
@@ -573,7 +645,7 @@ function genNodeList(
 
 function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
   if (isString(node)) {
-    context.push(node)
+    context.push(node, NewlineType.Unknown)
     return
   }
   if (isSymbol(node)) {
@@ -588,7 +660,7 @@ function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
         assert(
           node.codegenNode != null,
           `Codegen node is missing for element/if/for node. ` +
-            `Apply appropriate transforms first.`
+            `Apply appropriate transforms first.`,
         )
       genNode(node.codegenNode!, context)
       break
@@ -653,7 +725,7 @@ function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
       !__BROWSER__ && genReturnStatement(node, context)
       break
 
-    /* istanbul ignore next */
+    /* v8 ignore start */
     case NodeTypes.IF_BRANCH:
       // noop
       break
@@ -664,19 +736,24 @@ function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
         const exhaustiveCheck: never = node
         return exhaustiveCheck
       }
+    /* v8 ignore stop */
   }
 }
 
 function genText(
   node: TextNode | SimpleExpressionNode,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
-  context.push(JSON.stringify(node.content), node)
+  context.push(JSON.stringify(node.content), NewlineType.Unknown, node)
 }
 
 function genExpression(node: SimpleExpressionNode, context: CodegenContext) {
   const { content, isStatic } = node
-  context.push(isStatic ? JSON.stringify(content) : content, node)
+  context.push(
+    isStatic ? JSON.stringify(content) : content,
+    NewlineType.Unknown,
+    node,
+  )
 }
 
 function genInterpolation(node: InterpolationNode, context: CodegenContext) {
@@ -689,12 +766,12 @@ function genInterpolation(node: InterpolationNode, context: CodegenContext) {
 
 function genCompoundExpression(
   node: CompoundExpressionNode,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   for (let i = 0; i < node.children!.length; i++) {
     const child = node.children![i]
     if (isString(child)) {
-      context.push(child)
+      context.push(child, NewlineType.Unknown)
     } else {
       genNode(child, context)
     }
@@ -703,7 +780,7 @@ function genCompoundExpression(
 
 function genExpressionAsPropertyKey(
   node: ExpressionNode,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   const { push } = context
   if (node.type === NodeTypes.COMPOUND_EXPRESSION) {
@@ -715,9 +792,9 @@ function genExpressionAsPropertyKey(
     const text = isSimpleIdentifier(node.content)
       ? node.content
       : JSON.stringify(node.content)
-    push(text, node)
+    push(text, NewlineType.None, node)
   } else {
-    push(`[${node.content}]`, node)
+    push(`[${node.content}]`, NewlineType.Unknown, node)
   }
 }
 
@@ -726,7 +803,11 @@ function genComment(node: CommentNode, context: CodegenContext) {
   if (pure) {
     push(PURE_ANNOTATION)
   }
-  push(`${helper(CREATE_COMMENT)}(${JSON.stringify(node.content)})`, node)
+  push(
+    `${helper(CREATE_COMMENT)}(${JSON.stringify(node.content)})`,
+    NewlineType.Unknown,
+    node,
+  )
 }
 
 function genVNodeCall(node: VNodeCall, context: CodegenContext) {
@@ -740,8 +821,30 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
     directives,
     isBlock,
     disableTracking,
-    isComponent
+    isComponent,
   } = node
+
+  // add dev annotations to patch flags
+  let patchFlagString
+  if (patchFlag) {
+    if (__DEV__) {
+      if (patchFlag < 0) {
+        // special flags (negative and mutually exclusive)
+        patchFlagString = patchFlag + ` /* ${PatchFlagNames[patchFlag]} */`
+      } else {
+        // bitwise flags
+        const flagNames = Object.keys(PatchFlagNames)
+          .map(Number)
+          .filter(n => n > 0 && patchFlag & n)
+          .map(n => PatchFlagNames[n as PatchFlags])
+          .join(`, `)
+        patchFlagString = patchFlag + ` /* ${flagNames} */`
+      }
+    } else {
+      patchFlagString = String(patchFlag)
+    }
+  }
+
   if (directives) {
     push(helper(WITH_DIRECTIVES) + `(`)
   }
@@ -754,10 +857,10 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
   const callHelper: symbol = isBlock
     ? getVNodeBlockHelper(context.inSSR, isComponent)
     : getVNodeHelper(context.inSSR, isComponent)
-  push(helper(callHelper) + `(`, node)
+  push(helper(callHelper) + `(`, NewlineType.None, node)
   genNodeList(
-    genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
-    context
+    genNullableArgs([tag, props, children, patchFlagString, dynamicProps]),
+    context,
   )
   push(`)`)
   if (isBlock) {
@@ -785,7 +888,7 @@ function genCallExpression(node: CallExpression, context: CodegenContext) {
   if (pure) {
     push(PURE_ANNOTATION)
   }
-  push(callee + `(`, node)
+  push(callee + `(`, NewlineType.None, node)
   genNodeList(node.arguments, context)
   push(`)`)
 }
@@ -794,7 +897,7 @@ function genObjectExpression(node: ObjectExpression, context: CodegenContext) {
   const { push, indent, deindent, newline } = context
   const { properties } = node
   if (!properties.length) {
-    push(`{}`, node)
+    push(`{}`, NewlineType.None, node)
     return
   }
   const multilines =
@@ -826,7 +929,7 @@ function genArrayExpression(node: ArrayExpression, context: CodegenContext) {
 
 function genFunctionExpression(
   node: FunctionExpression,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   const { push, indent, deindent } = context
   const { params, returns, body, newline, isSlot } = node
@@ -834,7 +937,7 @@ function genFunctionExpression(
     // wrap slot functions with owner context
     push(`_${helperNameMap[WITH_CTX]}(`)
   }
-  push(`(`, node)
+  push(`(`, NewlineType.None, node)
   if (isArray(params)) {
     genNodeList(params, context)
   } else if (params) {
@@ -871,7 +974,7 @@ function genFunctionExpression(
 
 function genConditionalExpression(
   node: ConditionalExpression,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   const { test, consequent, alternate, newline: needNewline } = node
   const { push, indent, deindent, newline } = context
@@ -907,16 +1010,21 @@ function genConditionalExpression(
 
 function genCacheExpression(node: CacheExpression, context: CodegenContext) {
   const { push, helper, indent, deindent, newline } = context
+  const { needPauseTracking, needArraySpread } = node
+  if (needArraySpread) {
+    push(`[...(`)
+  }
   push(`_cache[${node.index}] || (`)
-  if (node.isVNode) {
+  if (needPauseTracking) {
     indent()
     push(`${helper(SET_BLOCK_TRACKING)}(-1),`)
     newline()
+    push(`(`)
   }
   push(`_cache[${node.index}] = `)
   genNode(node.value, context)
-  if (node.isVNode) {
-    push(`,`)
+  if (needPauseTracking) {
+    push(`).cacheIndex = ${node.index},`)
     newline()
     push(`${helper(SET_BLOCK_TRACKING)}(1),`)
     newline()
@@ -924,6 +1032,9 @@ function genCacheExpression(node: CacheExpression, context: CodegenContext) {
     deindent()
   }
   push(`)`)
+  if (needArraySpread) {
+    push(`)]`)
+  }
 }
 
 function genTemplateLiteral(node: TemplateLiteral, context: CodegenContext) {
@@ -934,7 +1045,7 @@ function genTemplateLiteral(node: TemplateLiteral, context: CodegenContext) {
   for (let i = 0; i < l; i++) {
     const e = node.elements[i]
     if (isString(e)) {
-      push(e.replace(/(`|\$|\\)/g, '\\$1'))
+      push(e.replace(/(`|\$|\\)/g, '\\$1'), NewlineType.Unknown)
     } else {
       push('${')
       if (multilines) indent()
@@ -972,7 +1083,7 @@ function genIfStatement(node: IfStatement, context: CodegenContext) {
 
 function genAssignmentExpression(
   node: AssignmentExpression,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   genNode(node.left, context)
   context.push(` = `)
@@ -981,7 +1092,7 @@ function genAssignmentExpression(
 
 function genSequenceExpression(
   node: SequenceExpression,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   context.push(`(`)
   genNodeList(node.expressions, context)
@@ -990,7 +1101,7 @@ function genSequenceExpression(
 
 function genReturnStatement(
   { returns }: ReturnStatement,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   context.push(`return `)
   if (isArray(returns)) {
diff --git a/packages/compiler-core/src/compat/compatConfig.ts b/packages/compiler-core/src/compat/compatConfig.ts
index dcb304263..58c5d9611 100644
--- a/packages/compiler-core/src/compat/compatConfig.ts
+++ b/packages/compiler-core/src/compat/compatConfig.ts
@@ -1,7 +1,7 @@
-import { SourceLocation } from '../ast'
-import { CompilerError } from '../errors'
-import { ParserContext } from '../parse'
-import { TransformContext } from '../transform'
+import type { SourceLocation } from '../ast'
+import type { CompilerError } from '../errors'
+import type { MergedParserOptions } from '../parser'
+import type { TransformContext } from '../transform'
 
 export type CompilerCompatConfig = Partial<
   Record<CompilerDeprecationTypes, boolean | 'suppress-warning'>
@@ -13,16 +13,15 @@ export interface CompilerCompatOptions {
   compatConfig?: CompilerCompatConfig
 }
 
-export const enum CompilerDeprecationTypes {
+export enum CompilerDeprecationTypes {
   COMPILER_IS_ON_ELEMENT = 'COMPILER_IS_ON_ELEMENT',
   COMPILER_V_BIND_SYNC = 'COMPILER_V_BIND_SYNC',
-  COMPILER_V_BIND_PROP = 'COMPILER_V_BIND_PROP',
   COMPILER_V_BIND_OBJECT_ORDER = 'COMPILER_V_BIND_OBJECT_ORDER',
   COMPILER_V_ON_NATIVE = 'COMPILER_V_ON_NATIVE',
   COMPILER_V_IF_V_FOR_PRECEDENCE = 'COMPILER_V_IF_V_FOR_PRECEDENCE',
   COMPILER_NATIVE_TEMPLATE = 'COMPILER_NATIVE_TEMPLATE',
   COMPILER_INLINE_TEMPLATE = 'COMPILER_INLINE_TEMPLATE',
-  COMPILER_FILTERS = 'COMPILER_FILTER'
+  COMPILER_FILTERS = 'COMPILER_FILTERS',
 }
 
 type DeprecationData = {
@@ -36,7 +35,7 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `Platform-native elements with "is" prop will no longer be ` +
       `treated as components in Vue 3 unless the "is" value is explicitly ` +
       `prefixed with "vue:".`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_V_BIND_SYNC]: {
@@ -44,13 +43,7 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `.sync modifier for v-bind has been removed. Use v-model with ` +
       `argument instead. \`v-bind:${key}.sync\` should be changed to ` +
       `\`v-model:${key}\`.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/v-model.html`
-  },
-
-  [CompilerDeprecationTypes.COMPILER_V_BIND_PROP]: {
-    message:
-      `.prop modifier for v-bind has been removed and no longer necessary. ` +
-      `Vue 3 will automatically set a binding as DOM property when appropriate.`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-model.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER]: {
@@ -60,12 +53,12 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `that appears before v-bind in the case of conflict. ` +
       `To retain 2.x behavior, move v-bind to make it the first attribute. ` +
       `You can also suppress this warning if the usage is intended.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/v-bind.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-bind.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_V_ON_NATIVE]: {
     message: `.native modifier for v-on has been removed as is no longer necessary.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE]: {
@@ -75,18 +68,18 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `access to v-for scope variables. It is best to avoid the ambiguity ` +
       `with <template> tags or use a computed property that filters v-for ` +
       `data source.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE]: {
     message:
       `<template> with no special directives will render as a native template ` +
-      `element instead of its inner content in Vue 3.`
+      `element instead of its inner content in Vue 3.`,
   },
 
   [CompilerDeprecationTypes.COMPILER_INLINE_TEMPLATE]: {
     message: `"inline-template" has been removed in Vue 3.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/inline-template-attribute.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/inline-template-attribute.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_FILTERS]: {
@@ -94,18 +87,15 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `filters have been removed in Vue 3. ` +
       `The "|" symbol will be treated as native JavaScript bitwise OR operator. ` +
       `Use method calls or computed properties instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/filters.html`
-  }
+    link: `https://v3-migration.vuejs.org/breaking-changes/filters.html`,
+  },
 }
 
 function getCompatValue(
   key: CompilerDeprecationTypes | 'MODE',
-  context: ParserContext | TransformContext
+  { compatConfig }: MergedParserOptions | TransformContext,
 ) {
-  const config = (context as ParserContext).options
-    ? (context as ParserContext).options.compatConfig
-    : (context as TransformContext).compatConfig
-  const value = config && config[key]
+  const value = compatConfig && compatConfig[key]
   if (key === 'MODE') {
     return value || 3 // compiler defaults to v3 behavior
   } else {
@@ -115,8 +105,8 @@ function getCompatValue(
 
 export function isCompatEnabled(
   key: CompilerDeprecationTypes,
-  context: ParserContext | TransformContext
-) {
+  context: MergedParserOptions | TransformContext,
+): boolean {
   const mode = getCompatValue('MODE', context)
   const value = getCompatValue(key, context)
   // in v3 mode, only enable if explicitly set to true
@@ -126,7 +116,7 @@ export function isCompatEnabled(
 
 export function checkCompatEnabled(
   key: CompilerDeprecationTypes,
-  context: ParserContext | TransformContext,
+  context: MergedParserOptions | TransformContext,
   loc: SourceLocation | null,
   ...args: any[]
 ): boolean {
@@ -139,10 +129,10 @@ export function checkCompatEnabled(
 
 export function warnDeprecation(
   key: CompilerDeprecationTypes,
-  context: ParserContext | TransformContext,
+  context: MergedParserOptions | TransformContext,
   loc: SourceLocation | null,
   ...args: any[]
-) {
+): void {
   const val = getCompatValue(key, context)
   if (val === 'suppress-warning') {
     return
diff --git a/packages/compiler-core/src/compat/transformFilter.ts b/packages/compiler-core/src/compat/transformFilter.ts
index 77331db4d..4791e6754 100644
--- a/packages/compiler-core/src/compat/transformFilter.ts
+++ b/packages/compiler-core/src/compat/transformFilter.ts
@@ -1,17 +1,17 @@
 import { RESOLVE_FILTER } from '../runtimeHelpers'
 import {
-  ExpressionNode,
-  AttributeNode,
-  DirectiveNode,
+  type AttributeNode,
+  type DirectiveNode,
+  type ExpressionNode,
   NodeTypes,
-  SimpleExpressionNode
+  type SimpleExpressionNode,
 } from '../ast'
 import {
   CompilerDeprecationTypes,
   isCompatEnabled,
-  warnDeprecation
+  warnDeprecation,
 } from './compatConfig'
-import { NodeTransform, TransformContext } from '../transform'
+import type { NodeTransform, TransformContext } from '../transform'
 import { toValidAssetId } from '../utils'
 
 const validDivisionCharRE = /[\w).+\-_$\]]/
@@ -25,9 +25,7 @@ export const transformFilter: NodeTransform = (node, context) => {
     // filter rewrite is applied before expression transform so only
     // simple expressions are possible at this stage
     rewriteFilter(node.content, context)
-  }
-
-  if (node.type === NodeTypes.ELEMENT) {
+  } else if (node.type === NodeTypes.ELEMENT) {
     node.props.forEach((prop: AttributeNode | DirectiveNode) => {
       if (
         prop.type === NodeTypes.DIRECTIVE &&
@@ -162,19 +160,21 @@ function parseFilter(node: SimpleExpressionNode, context: TransformContext) {
       warnDeprecation(
         CompilerDeprecationTypes.COMPILER_FILTERS,
         context,
-        node.loc
+        node.loc,
       )
     for (i = 0; i < filters.length; i++) {
       expression = wrapFilter(expression, filters[i], context)
     }
     node.content = expression
+    // reset ast since the content is replaced
+    node.ast = undefined
   }
 }
 
 function wrapFilter(
   exp: string,
   filter: string,
-  context: TransformContext
+  context: TransformContext,
 ): string {
   context.helper(RESOLVE_FILTER)
   const i = filter.indexOf('(')
diff --git a/packages/compiler-core/src/compile.ts b/packages/compiler-core/src/compile.ts
index 01cb560cc..a697c9d22 100644
--- a/packages/compiler-core/src/compile.ts
+++ b/packages/compiler-core/src/compile.ts
@@ -1,9 +1,13 @@
-import { CompilerOptions } from './options'
-import { baseParse } from './parse'
-import { transform, NodeTransform, DirectiveTransform } from './transform'
-import { generate, CodegenResult } from './codegen'
-import { RootNode } from './ast'
-import { isString, extend } from '@vue/shared'
+import type { CompilerOptions } from './options'
+import { baseParse } from './parser'
+import {
+  type DirectiveTransform,
+  type NodeTransform,
+  transform,
+} from './transform'
+import { type CodegenResult, generate } from './codegen'
+import type { RootNode } from './ast'
+import { extend, isString } from '@vue/shared'
 import { transformIf } from './transforms/vIf'
 import { transformFor } from './transforms/vFor'
 import { transformExpression } from './transforms/transformExpression'
@@ -16,16 +20,16 @@ import { transformText } from './transforms/transformText'
 import { transformOnce } from './transforms/vOnce'
 import { transformModel } from './transforms/vModel'
 import { transformFilter } from './compat/transformFilter'
-import { defaultOnError, createCompilerError, ErrorCodes } from './errors'
+import { ErrorCodes, createCompilerError, defaultOnError } from './errors'
 import { transformMemo } from './transforms/vMemo'
 
 export type TransformPreset = [
   NodeTransform[],
-  Record<string, DirectiveTransform>
+  Record<string, DirectiveTransform>,
 ]
 
 export function getBaseTransformPreset(
-  prefixIdentifiers?: boolean
+  prefixIdentifiers?: boolean,
 ): TransformPreset {
   return [
     [
@@ -38,7 +42,7 @@ export function getBaseTransformPreset(
         ? [
             // order is important
             trackVForSlotScopes,
-            transformExpression
+            transformExpression,
           ]
         : __BROWSER__ && __DEV__
           ? [transformExpression]
@@ -46,25 +50,25 @@ export function getBaseTransformPreset(
       transformSlotOutlet,
       transformElement,
       trackSlotScopes,
-      transformText
+      transformText,
     ],
     {
       on: transformOn,
       bind: transformBind,
-      model: transformModel
-    }
+      model: transformModel,
+    },
   ]
 }
 
 // we name it `baseCompile` so that higher order compilers like
 // @vue/compiler-dom can export `compile` while re-exporting everything else.
 export function baseCompile(
-  template: string | RootNode,
-  options: CompilerOptions = {}
+  source: string | RootNode,
+  options: CompilerOptions = {},
 ): CodegenResult {
   const onError = options.onError || defaultOnError
   const isModuleMode = options.mode === 'module'
-  /* istanbul ignore if */
+  /* v8 ignore start */
   if (__BROWSER__) {
     if (options.prefixIdentifiers === true) {
       onError(createCompilerError(ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED))
@@ -72,6 +76,7 @@ export function baseCompile(
       onError(createCompilerError(ErrorCodes.X_MODULE_MODE_NOT_SUPPORTED))
     }
   }
+  /* v8 ignore stop */
 
   const prefixIdentifiers =
     !__BROWSER__ && (options.prefixIdentifiers === true || isModuleMode)
@@ -82,7 +87,10 @@ export function baseCompile(
     onError(createCompilerError(ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED))
   }
 
-  const ast = isString(template) ? baseParse(template, options) : template
+  const resolvedOptions = extend({}, options, {
+    prefixIdentifiers,
+  })
+  const ast = isString(source) ? baseParse(source, resolvedOptions) : source
   const [nodeTransforms, directiveTransforms] =
     getBaseTransformPreset(prefixIdentifiers)
 
@@ -95,24 +103,18 @@ export function baseCompile(
 
   transform(
     ast,
-    extend({}, options, {
-      prefixIdentifiers,
+    extend({}, resolvedOptions, {
       nodeTransforms: [
         ...nodeTransforms,
-        ...(options.nodeTransforms || []) // user transforms
+        ...(options.nodeTransforms || []), // user transforms
       ],
       directiveTransforms: extend(
         {},
         directiveTransforms,
-        options.directiveTransforms || {} // user transforms
-      )
-    })
+        options.directiveTransforms || {}, // user transforms
+      ),
+    }),
   )
 
-  return generate(
-    ast,
-    extend({}, options, {
-      prefixIdentifiers
-    })
-  )
+  return generate(ast, resolvedOptions)
 }
diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index 36ab783ed..58e113ab1 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -1,4 +1,4 @@
-import { SourceLocation } from './ast'
+import type { SourceLocation } from './ast'
 
 export interface CompilerError extends SyntaxError {
   code: number | string
@@ -9,11 +9,11 @@ export interface CoreCompilerError extends CompilerError {
   code: ErrorCodes
 }
 
-export function defaultOnError(error: CompilerError) {
+export function defaultOnError(error: CompilerError): never {
   throw error
 }
 
-export function defaultOnWarn(msg: CompilerError) {
+export function defaultOnWarn(msg: CompilerError): void {
   __DEV__ && console.warn(`[Vue warn] ${msg.message}`)
 }
 
@@ -25,19 +25,19 @@ export function createCompilerError<T extends number>(
   code: T,
   loc?: SourceLocation,
   messages?: { [code: number]: string },
-  additionalMessage?: string
+  additionalMessage?: string,
 ): InferCompilerError<T> {
   const msg =
     __DEV__ || !__BROWSER__
       ? (messages || errorMessages)[code] + (additionalMessage || ``)
-      : code
+      : `https://vuejs.org/error-reference/#compiler-${code}`
   const error = new SyntaxError(String(msg)) as InferCompilerError<T>
   error.code = code
   error.loc = loc
   return error
 }
 
-export const enum ErrorCodes {
+export enum ErrorCodes {
   // parse errors
   ABRUPT_CLOSING_OF_EMPTY_COMMENT,
   CDATA_IN_HTML_CONTENT,
@@ -96,15 +96,16 @@ export const enum ErrorCodes {
   X_MODULE_MODE_NOT_SUPPORTED,
   X_CACHE_HANDLER_NOT_SUPPORTED,
   X_SCOPE_ID_NOT_SUPPORTED,
+  X_VNODE_HOOKS,
 
-  // deprecations
-  DEPRECATION_VNODE_HOOKS,
-  DEPRECATION_V_IS,
+  // placed here to preserve order for the current minor
+  // TODO adjust order in 3.5
+  X_V_BIND_INVALID_SAME_NAME_ARGUMENT,
 
   // Special value for higher-order compilers to pick up the last code
   // to avoid collision of error codes. This should always be kept as the last
   // item.
-  __EXTEND_POINT__
+  __EXTEND_POINT__,
 }
 
 export const errorMessages: Record<ErrorCodes, string> = {
@@ -159,6 +160,7 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION]: `v-for has invalid expression.`,
   [ErrorCodes.X_V_FOR_TEMPLATE_KEY_PLACEMENT]: `<template v-for> key should be placed on the <template> tag.`,
   [ErrorCodes.X_V_BIND_NO_EXPRESSION]: `v-bind is missing expression.`,
+  [ErrorCodes.X_V_BIND_INVALID_SAME_NAME_ARGUMENT]: `v-bind with same-name shorthand only allows static argument.`,
   [ErrorCodes.X_V_ON_NO_EXPRESSION]: `v-on is missing expression.`,
   [ErrorCodes.X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET]: `Unexpected custom directive on <slot> outlet.`,
   [ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE]:
@@ -176,6 +178,7 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_V_MODEL_ON_PROPS]: `v-model cannot be used on a prop, because local prop bindings are not writable.\nUse a v-bind binding combined with a v-on listener that emits update:x event instead.`,
   [ErrorCodes.X_INVALID_EXPRESSION]: `Error parsing JavaScript expression: `,
   [ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN]: `<KeepAlive> expects exactly one child component.`,
+  [ErrorCodes.X_VNODE_HOOKS]: `@vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4.`,
 
   // generic errors
   [ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
@@ -183,10 +186,6 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_CACHE_HANDLER_NOT_SUPPORTED]: `"cacheHandlers" option is only supported when the "prefixIdentifiers" option is enabled.`,
   [ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED]: `"scopeId" option is only supported in module mode.`,
 
-  // deprecations
-  [ErrorCodes.DEPRECATION_VNODE_HOOKS]: `@vnode-* hooks in templates are deprecated. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support will be removed in 3.4.`,
-  [ErrorCodes.DEPRECATION_V_IS]: `v-is="component-name" has been deprecated. Use is="vue:component-name" instead. v-is support will be removed in 3.4.`,
-
   // just to fulfill types
-  [ErrorCodes.__EXTEND_POINT__]: ``
+  [ErrorCodes.__EXTEND_POINT__]: ``,
 }
diff --git a/packages/compiler-core/src/index.ts b/packages/compiler-core/src/index.ts
index 4898a181d..29e5f6813 100644
--- a/packages/compiler-core/src/index.ts
+++ b/packages/compiler-core/src/index.ts
@@ -8,9 +8,9 @@ export {
   type CodegenOptions,
   type HoistTransform,
   type BindingMetadata,
-  BindingTypes
+  BindingTypes,
 } from './options'
-export { baseParse, TextModes } from './parse'
+export { baseParse } from './parser'
 export {
   transform,
   type TransformContext,
@@ -19,14 +19,21 @@ export {
   createStructuralDirectiveTransform,
   type NodeTransform,
   type StructuralDirectiveTransform,
-  type DirectiveTransform
+  type DirectiveTransform,
 } from './transform'
-export { generate, type CodegenContext, type CodegenResult } from './codegen'
+export {
+  generate,
+  type CodegenContext,
+  type CodegenResult,
+  type CodegenSourceMapGenerator,
+  type RawSourceMap,
+} from './codegen'
 export {
   ErrorCodes,
+  errorMessages,
   createCompilerError,
   type CoreCompilerError,
-  type CompilerError
+  type CompilerError,
 } from './errors'
 
 export * from './ast'
@@ -44,28 +51,28 @@ export { processFor, createForLoopParams } from './transforms/vFor'
 export {
   transformExpression,
   processExpression,
-  stringifyExpression
+  stringifyExpression,
 } from './transforms/transformExpression'
 export {
   buildSlots,
   type SlotFnBuilder,
   trackVForSlotScopes,
-  trackSlotScopes
+  trackSlotScopes,
 } from './transforms/vSlot'
 export {
   transformElement,
   resolveComponentType,
   buildProps,
   buildDirectiveArgs,
-  type PropsExpression
+  type PropsExpression,
 } from './transforms/transformElement'
 export { processSlotOutlet } from './transforms/transformSlotOutlet'
-export { getConstantType } from './transforms/hoistStatic'
+export { getConstantType } from './transforms/cacheStatic'
 export { generateCodeFrame } from '@vue/shared'
 
 // v2 compat only
 export {
   checkCompatEnabled,
   warnDeprecation,
-  CompilerDeprecationTypes
+  CompilerDeprecationTypes,
 } from './compat/compatConfig'
diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index abfba98e3..1de865f42 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -1,13 +1,18 @@
-import { ElementNode, Namespace, TemplateChildNode, ParentNode } from './ast'
-import { TextModes } from './parse'
-import { CompilerError } from './errors'
-import {
-  NodeTransform,
+import type {
+  ElementNode,
+  Namespace,
+  Namespaces,
+  ParentNode,
+  TemplateChildNode,
+} from './ast'
+import type { CompilerError } from './errors'
+import type {
   DirectiveTransform,
-  TransformContext
+  NodeTransform,
+  TransformContext,
 } from './transform'
-import { CompilerCompatOptions } from './compat/compatConfig'
-import { ParserPlugin } from '@babel/parser'
+import type { CompilerCompatOptions } from './compat/compatConfig'
+import type { ParserPlugin } from '@babel/parser'
 
 export interface ErrorHandlingOptions {
   onWarn?: (warning: CompilerError) => void
@@ -17,6 +22,24 @@ export interface ErrorHandlingOptions {
 export interface ParserOptions
   extends ErrorHandlingOptions,
     CompilerCompatOptions {
+  /**
+   * Base mode is platform agnostic and only parses HTML-like template syntax,
+   * treating all tags the same way. Specific tag parsing behavior can be
+   * configured by higher-level compilers.
+   *
+   * HTML mode adds additional logic for handling special parsing behavior in
+   * `<script>`, `<style>`,`<title>` and `<textarea>`.
+   * The logic is handled inside compiler-core for efficiency.
+   *
+   * SFC mode treats content of all root-level tags except `<template>` as plain
+   * text.
+   */
+  parseMode?: 'base' | 'html' | 'sfc'
+  /**
+   * Specify the root namespace to use when parsing a template.
+   * Defaults to `Namespaces.HTML` (0).
+   */
+  ns?: Namespaces
   /**
    * e.g. platform native elements, e.g. `<div>` for browsers
    */
@@ -29,6 +52,11 @@ export interface ParserOptions
    * e.g. elements that should preserve whitespace inside, e.g. `<pre>`
    */
   isPreTag?: (tag: string) => boolean
+  /**
+   * Elements that should ignore the first newline token per parinsg spec
+   * e.g. `<textarea>` and `<pre>`
+   */
+  isIgnoreNewlineTag?: (tag: string) => boolean
   /**
    * Platform-specific built-in components e.g. `<Transition>`
    */
@@ -40,24 +68,23 @@ export interface ParserOptions
   /**
    * Get tag namespace
    */
-  getNamespace?: (tag: string, parent: ElementNode | undefined) => Namespace
-  /**
-   * Get text parsing mode for this element
-   */
-  getTextMode?: (
-    node: ElementNode,
-    parent: ElementNode | undefined
-  ) => TextModes
+  getNamespace?: (
+    tag: string,
+    parent: ElementNode | undefined,
+    rootNamespace: Namespace,
+  ) => Namespace
   /**
    * @default ['{{', '}}']
    */
   delimiters?: [string, string]
   /**
    * Whitespace handling strategy
+   * @default 'condense'
    */
   whitespace?: 'preserve' | 'condense'
   /**
-   * Only needed for DOM compilers
+   * Only used for DOM compilers that runs in the browser.
+   * In non-browser builds, this option is ignored.
    */
   decodeEntities?: (rawText: string, asAttr: boolean) => string
   /**
@@ -65,15 +92,26 @@ export interface ParserOptions
    * This defaults to `true` in development and `false` in production builds.
    */
   comments?: boolean
+  /**
+   * Parse JavaScript expressions with Babel.
+   * @default false
+   */
+  prefixIdentifiers?: boolean
+  /**
+   * A list of parser plugins to enable for `@babel/parser`, which is used to
+   * parse expressions in bindings and interpolations.
+   * https://babeljs.io/docs/en/next/babel-parser#plugins
+   */
+  expressionPlugins?: ParserPlugin[]
 }
 
 export type HoistTransform = (
   children: TemplateChildNode[],
   context: TransformContext,
-  parent: ParentNode
+  parent: ParentNode,
 ) => void
 
-export const enum BindingTypes {
+export enum BindingTypes {
   /**
    * returned from data()
    */
@@ -116,7 +154,7 @@ export const enum BindingTypes {
   /**
    * a literal constant, e.g. 'foo', 1, true
    */
-  LITERAL_CONST = 'literal-const'
+  LITERAL_CONST = 'literal-const',
 }
 
 export type BindingMetadata = {
@@ -217,7 +255,7 @@ export interface TransformOptions
    */
   prefixIdentifiers?: boolean
   /**
-   * Hoist static VNodes and props objects to `_hoisted_x` constants
+   * Cache static VNodes and props objects to `_hoisted_x` constants
    * @default false
    */
   hoistStatic?: boolean
diff --git a/packages/compiler-core/src/parse.ts b/packages/compiler-core/src/parse.ts
deleted file mode 100644
index c237239db..000000000
--- a/packages/compiler-core/src/parse.ts
+++ /dev/null
@@ -1,1189 +0,0 @@
-import { ErrorHandlingOptions, ParserOptions } from './options'
-import { NO, isArray, makeMap, extend } from '@vue/shared'
-import {
-  ErrorCodes,
-  createCompilerError,
-  defaultOnError,
-  defaultOnWarn
-} from './errors'
-import {
-  assert,
-  advancePositionWithMutation,
-  advancePositionWithClone,
-  isCoreComponent,
-  isStaticArgOf
-} from './utils'
-import {
-  Namespaces,
-  AttributeNode,
-  CommentNode,
-  DirectiveNode,
-  ElementNode,
-  ElementTypes,
-  ExpressionNode,
-  NodeTypes,
-  Position,
-  RootNode,
-  SourceLocation,
-  TextNode,
-  TemplateChildNode,
-  InterpolationNode,
-  createRoot,
-  ConstantTypes
-} from './ast'
-import {
-  checkCompatEnabled,
-  CompilerCompatOptions,
-  CompilerDeprecationTypes,
-  isCompatEnabled,
-  warnDeprecation
-} from './compat/compatConfig'
-
-type OptionalOptions =
-  | 'whitespace'
-  | 'isNativeTag'
-  | 'isBuiltInComponent'
-  | keyof CompilerCompatOptions
-type MergedParserOptions = Omit<Required<ParserOptions>, OptionalOptions> &
-  Pick<ParserOptions, OptionalOptions>
-type AttributeValue =
-  | {
-      content: string
-      isQuoted: boolean
-      loc: SourceLocation
-    }
-  | undefined
-
-// The default decoder only provides escapes for characters reserved as part of
-// the template syntax, and is only used if the custom renderer did not provide
-// a platform-specific decoder.
-const decodeRE = /&(gt|lt|amp|apos|quot);/g
-const decodeMap: Record<string, string> = {
-  gt: '>',
-  lt: '<',
-  amp: '&',
-  apos: "'",
-  quot: '"'
-}
-
-export const defaultParserOptions: MergedParserOptions = {
-  delimiters: [`{{`, `}}`],
-  getNamespace: () => Namespaces.HTML,
-  getTextMode: () => TextModes.DATA,
-  isVoidTag: NO,
-  isPreTag: NO,
-  isCustomElement: NO,
-  decodeEntities: (rawText: string): string =>
-    rawText.replace(decodeRE, (_, p1) => decodeMap[p1]),
-  onError: defaultOnError,
-  onWarn: defaultOnWarn,
-  comments: __DEV__
-}
-
-export const enum TextModes {
-  //          | Elements | Entities | End sign              | Inside of
-  DATA, //    | ✔        | ✔        | End tags of ancestors |
-  RCDATA, //  | ✘        | ✔        | End tag of the parent | <textarea>
-  RAWTEXT, // | ✘        | ✘        | End tag of the parent | <style>,<script>
-  CDATA,
-  ATTRIBUTE_VALUE
-}
-
-export interface ParserContext {
-  options: MergedParserOptions
-  readonly originalSource: string
-  source: string
-  offset: number
-  line: number
-  column: number
-  inPre: boolean // HTML <pre> tag, preserve whitespaces
-  inVPre: boolean // v-pre, do not process directives and interpolations
-  onWarn: NonNullable<ErrorHandlingOptions['onWarn']>
-}
-
-export function baseParse(
-  content: string,
-  options: ParserOptions = {}
-): RootNode {
-  const context = createParserContext(content, options)
-  const start = getCursor(context)
-  return createRoot(
-    parseChildren(context, TextModes.DATA, []),
-    getSelection(context, start)
-  )
-}
-
-function createParserContext(
-  content: string,
-  rawOptions: ParserOptions
-): ParserContext {
-  const options = extend({}, defaultParserOptions)
-
-  let key: keyof ParserOptions
-  for (key in rawOptions) {
-    // @ts-ignore
-    options[key] =
-      rawOptions[key] === undefined
-        ? defaultParserOptions[key]
-        : rawOptions[key]
-  }
-  return {
-    options,
-    column: 1,
-    line: 1,
-    offset: 0,
-    originalSource: content,
-    source: content,
-    inPre: false,
-    inVPre: false,
-    onWarn: options.onWarn
-  }
-}
-
-function parseChildren(
-  context: ParserContext,
-  mode: TextModes,
-  ancestors: ElementNode[]
-): TemplateChildNode[] {
-  const parent = last(ancestors)
-  const ns = parent ? parent.ns : Namespaces.HTML
-  const nodes: TemplateChildNode[] = []
-
-  while (!isEnd(context, mode, ancestors)) {
-    __TEST__ && assert(context.source.length > 0)
-    const s = context.source
-    let node: TemplateChildNode | TemplateChildNode[] | undefined = undefined
-
-    if (mode === TextModes.DATA || mode === TextModes.RCDATA) {
-      if (!context.inVPre && startsWith(s, context.options.delimiters[0])) {
-        // '{{'
-        node = parseInterpolation(context, mode)
-      } else if (mode === TextModes.DATA && s[0] === '<') {
-        // https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-        if (s.length === 1) {
-          emitError(context, ErrorCodes.EOF_BEFORE_TAG_NAME, 1)
-        } else if (s[1] === '!') {
-          // https://html.spec.whatwg.org/multipage/parsing.html#markup-declaration-open-state
-          if (startsWith(s, '<!--')) {
-            node = parseComment(context)
-          } else if (startsWith(s, '<!DOCTYPE')) {
-            // Ignore DOCTYPE by a limitation.
-            node = parseBogusComment(context)
-          } else if (startsWith(s, '<![CDATA[')) {
-            if (ns !== Namespaces.HTML) {
-              node = parseCDATA(context, ancestors)
-            } else {
-              emitError(context, ErrorCodes.CDATA_IN_HTML_CONTENT)
-              node = parseBogusComment(context)
-            }
-          } else {
-            emitError(context, ErrorCodes.INCORRECTLY_OPENED_COMMENT)
-            node = parseBogusComment(context)
-          }
-        } else if (s[1] === '/') {
-          // https://html.spec.whatwg.org/multipage/parsing.html#end-tag-open-state
-          if (s.length === 2) {
-            emitError(context, ErrorCodes.EOF_BEFORE_TAG_NAME, 2)
-          } else if (s[2] === '>') {
-            emitError(context, ErrorCodes.MISSING_END_TAG_NAME, 2)
-            advanceBy(context, 3)
-            continue
-          } else if (/[a-z]/i.test(s[2])) {
-            emitError(context, ErrorCodes.X_INVALID_END_TAG)
-            parseTag(context, TagType.End, parent)
-            continue
-          } else {
-            emitError(
-              context,
-              ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
-              2
-            )
-            node = parseBogusComment(context)
-          }
-        } else if (/[a-z]/i.test(s[1])) {
-          node = parseElement(context, ancestors)
-
-          // 2.x <template> with no directive compat
-          if (
-            __COMPAT__ &&
-            isCompatEnabled(
-              CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
-              context
-            ) &&
-            node &&
-            node.tag === 'template' &&
-            !node.props.some(
-              p =>
-                p.type === NodeTypes.DIRECTIVE &&
-                isSpecialTemplateDirective(p.name)
-            )
-          ) {
-            __DEV__ &&
-              warnDeprecation(
-                CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
-                context,
-                node.loc
-              )
-            node = node.children
-          }
-        } else if (s[1] === '?') {
-          emitError(
-            context,
-            ErrorCodes.UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME,
-            1
-          )
-          node = parseBogusComment(context)
-        } else {
-          emitError(context, ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME, 1)
-        }
-      }
-    }
-    if (!node) {
-      node = parseText(context, mode)
-    }
-
-    if (isArray(node)) {
-      for (let i = 0; i < node.length; i++) {
-        pushNode(nodes, node[i])
-      }
-    } else {
-      pushNode(nodes, node)
-    }
-  }
-
-  // Whitespace handling strategy like v2
-  let removedWhitespace = false
-  if (mode !== TextModes.RAWTEXT && mode !== TextModes.RCDATA) {
-    const shouldCondense = context.options.whitespace !== 'preserve'
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i]
-      if (node.type === NodeTypes.TEXT) {
-        if (!context.inPre) {
-          if (!/[^\t\r\n\f ]/.test(node.content)) {
-            const prev = nodes[i - 1]
-            const next = nodes[i + 1]
-            // Remove if:
-            // - the whitespace is the first or last node, or:
-            // - (condense mode) the whitespace is between twos comments, or:
-            // - (condense mode) the whitespace is between comment and element, or:
-            // - (condense mode) the whitespace is between two elements AND contains newline
-            if (
-              !prev ||
-              !next ||
-              (shouldCondense &&
-                ((prev.type === NodeTypes.COMMENT &&
-                  next.type === NodeTypes.COMMENT) ||
-                  (prev.type === NodeTypes.COMMENT &&
-                    next.type === NodeTypes.ELEMENT) ||
-                  (prev.type === NodeTypes.ELEMENT &&
-                    next.type === NodeTypes.COMMENT) ||
-                  (prev.type === NodeTypes.ELEMENT &&
-                    next.type === NodeTypes.ELEMENT &&
-                    /[\r\n]/.test(node.content))))
-            ) {
-              removedWhitespace = true
-              nodes[i] = null as any
-            } else {
-              // Otherwise, the whitespace is condensed into a single space
-              node.content = ' '
-            }
-          } else if (shouldCondense) {
-            // in condense mode, consecutive whitespaces in text are condensed
-            // down to a single space.
-            node.content = node.content.replace(/[\t\r\n\f ]+/g, ' ')
-          }
-        } else {
-          // #6410 normalize windows newlines in <pre>:
-          // in SSR, browsers normalize server-rendered \r\n into a single \n
-          // in the DOM
-          node.content = node.content.replace(/\r\n/g, '\n')
-        }
-      }
-      // Remove comment nodes if desired by configuration.
-      else if (node.type === NodeTypes.COMMENT && !context.options.comments) {
-        removedWhitespace = true
-        nodes[i] = null as any
-      }
-    }
-    if (context.inPre && parent && context.options.isPreTag(parent.tag)) {
-      // remove leading newline per html spec
-      // https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
-      const first = nodes[0]
-      if (first && first.type === NodeTypes.TEXT) {
-        first.content = first.content.replace(/^\r?\n/, '')
-      }
-    }
-  }
-
-  return removedWhitespace ? nodes.filter(Boolean) : nodes
-}
-
-function pushNode(nodes: TemplateChildNode[], node: TemplateChildNode): void {
-  if (node.type === NodeTypes.TEXT) {
-    const prev = last(nodes)
-    // Merge if both this and the previous node are text and those are
-    // consecutive. This happens for cases like "a < b".
-    if (
-      prev &&
-      prev.type === NodeTypes.TEXT &&
-      prev.loc.end.offset === node.loc.start.offset
-    ) {
-      prev.content += node.content
-      prev.loc.end = node.loc.end
-      prev.loc.source += node.loc.source
-      return
-    }
-  }
-
-  nodes.push(node)
-}
-
-function parseCDATA(
-  context: ParserContext,
-  ancestors: ElementNode[]
-): TemplateChildNode[] {
-  __TEST__ &&
-    assert(last(ancestors) == null || last(ancestors)!.ns !== Namespaces.HTML)
-  __TEST__ && assert(startsWith(context.source, '<![CDATA['))
-
-  advanceBy(context, 9)
-  const nodes = parseChildren(context, TextModes.CDATA, ancestors)
-  if (context.source.length === 0) {
-    emitError(context, ErrorCodes.EOF_IN_CDATA)
-  } else {
-    __TEST__ && assert(startsWith(context.source, ']]>'))
-    advanceBy(context, 3)
-  }
-
-  return nodes
-}
-
-function parseComment(context: ParserContext): CommentNode {
-  __TEST__ && assert(startsWith(context.source, '<!--'))
-
-  const start = getCursor(context)
-  let content: string
-
-  // Regular comment.
-  const match = /--(\!)?>/.exec(context.source)
-  if (!match) {
-    content = context.source.slice(4)
-    advanceBy(context, context.source.length)
-    emitError(context, ErrorCodes.EOF_IN_COMMENT)
-  } else {
-    if (match.index <= 3) {
-      emitError(context, ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT)
-    }
-    if (match[1]) {
-      emitError(context, ErrorCodes.INCORRECTLY_CLOSED_COMMENT)
-    }
-    content = context.source.slice(4, match.index)
-
-    // Advancing with reporting nested comments.
-    const s = context.source.slice(0, match.index)
-    let prevIndex = 1,
-      nestedIndex = 0
-    while ((nestedIndex = s.indexOf('<!--', prevIndex)) !== -1) {
-      advanceBy(context, nestedIndex - prevIndex + 1)
-      if (nestedIndex + 4 < s.length) {
-        emitError(context, ErrorCodes.NESTED_COMMENT)
-      }
-      prevIndex = nestedIndex + 1
-    }
-    advanceBy(context, match.index + match[0].length - prevIndex + 1)
-  }
-
-  return {
-    type: NodeTypes.COMMENT,
-    content,
-    loc: getSelection(context, start)
-  }
-}
-
-function parseBogusComment(context: ParserContext): CommentNode | undefined {
-  __TEST__ && assert(/^<(?:[\!\?]|\/[^a-z>])/i.test(context.source))
-
-  const start = getCursor(context)
-  const contentStart = context.source[1] === '?' ? 1 : 2
-  let content: string
-
-  const closeIndex = context.source.indexOf('>')
-  if (closeIndex === -1) {
-    content = context.source.slice(contentStart)
-    advanceBy(context, context.source.length)
-  } else {
-    content = context.source.slice(contentStart, closeIndex)
-    advanceBy(context, closeIndex + 1)
-  }
-
-  return {
-    type: NodeTypes.COMMENT,
-    content,
-    loc: getSelection(context, start)
-  }
-}
-
-function parseElement(
-  context: ParserContext,
-  ancestors: ElementNode[]
-): ElementNode | undefined {
-  __TEST__ && assert(/^<[a-z]/i.test(context.source))
-
-  // Start tag.
-  const wasInPre = context.inPre
-  const wasInVPre = context.inVPre
-  const parent = last(ancestors)
-  const element = parseTag(context, TagType.Start, parent)
-  const isPreBoundary = context.inPre && !wasInPre
-  const isVPreBoundary = context.inVPre && !wasInVPre
-
-  if (element.isSelfClosing || context.options.isVoidTag(element.tag)) {
-    // #4030 self-closing <pre> tag
-    if (isPreBoundary) {
-      context.inPre = false
-    }
-    if (isVPreBoundary) {
-      context.inVPre = false
-    }
-    return element
-  }
-
-  // Children.
-  ancestors.push(element)
-  const mode = context.options.getTextMode(element, parent)
-  const children = parseChildren(context, mode, ancestors)
-  ancestors.pop()
-
-  // 2.x inline-template compat
-  if (__COMPAT__) {
-    const inlineTemplateProp = element.props.find(
-      p => p.type === NodeTypes.ATTRIBUTE && p.name === 'inline-template'
-    ) as AttributeNode
-    if (
-      inlineTemplateProp &&
-      checkCompatEnabled(
-        CompilerDeprecationTypes.COMPILER_INLINE_TEMPLATE,
-        context,
-        inlineTemplateProp.loc
-      )
-    ) {
-      const loc = getSelection(context, element.loc.end)
-      inlineTemplateProp.value = {
-        type: NodeTypes.TEXT,
-        content: loc.source,
-        loc
-      }
-    }
-  }
-
-  element.children = children
-
-  // End tag.
-  if (startsWithEndTagOpen(context.source, element.tag)) {
-    parseTag(context, TagType.End, parent)
-  } else {
-    emitError(context, ErrorCodes.X_MISSING_END_TAG, 0, element.loc.start)
-    if (context.source.length === 0 && element.tag.toLowerCase() === 'script') {
-      const first = children[0]
-      if (first && startsWith(first.loc.source, '<!--')) {
-        emitError(context, ErrorCodes.EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT)
-      }
-    }
-  }
-
-  element.loc = getSelection(context, element.loc.start)
-
-  if (isPreBoundary) {
-    context.inPre = false
-  }
-  if (isVPreBoundary) {
-    context.inVPre = false
-  }
-  return element
-}
-
-const enum TagType {
-  Start,
-  End
-}
-
-const isSpecialTemplateDirective = /*#__PURE__*/ makeMap(
-  `if,else,else-if,for,slot`
-)
-
-/**
- * Parse a tag (E.g. `<div id=a>`) with that type (start tag or end tag).
- */
-function parseTag(
-  context: ParserContext,
-  type: TagType.Start,
-  parent: ElementNode | undefined
-): ElementNode
-function parseTag(
-  context: ParserContext,
-  type: TagType.End,
-  parent: ElementNode | undefined
-): void
-function parseTag(
-  context: ParserContext,
-  type: TagType,
-  parent: ElementNode | undefined
-): ElementNode | undefined {
-  __TEST__ && assert(/^<\/?[a-z]/i.test(context.source))
-  __TEST__ &&
-    assert(
-      type === (startsWith(context.source, '</') ? TagType.End : TagType.Start)
-    )
-
-  // Tag open.
-  const start = getCursor(context)
-  const match = /^<\/?([a-z][^\t\r\n\f />]*)/i.exec(context.source)!
-  const tag = match[1]
-  const ns = context.options.getNamespace(tag, parent)
-
-  advanceBy(context, match[0].length)
-  advanceSpaces(context)
-
-  // save current state in case we need to re-parse attributes with v-pre
-  const cursor = getCursor(context)
-  const currentSource = context.source
-
-  // check <pre> tag
-  if (context.options.isPreTag(tag)) {
-    context.inPre = true
-  }
-
-  // Attributes.
-  let props = parseAttributes(context, type)
-
-  // check v-pre
-  if (
-    type === TagType.Start &&
-    !context.inVPre &&
-    props.some(p => p.type === NodeTypes.DIRECTIVE && p.name === 'pre')
-  ) {
-    context.inVPre = true
-    // reset context
-    extend(context, cursor)
-    context.source = currentSource
-    // re-parse attrs and filter out v-pre itself
-    props = parseAttributes(context, type).filter(p => p.name !== 'v-pre')
-  }
-
-  // Tag close.
-  let isSelfClosing = false
-  if (context.source.length === 0) {
-    emitError(context, ErrorCodes.EOF_IN_TAG)
-  } else {
-    isSelfClosing = startsWith(context.source, '/>')
-    if (type === TagType.End && isSelfClosing) {
-      emitError(context, ErrorCodes.END_TAG_WITH_TRAILING_SOLIDUS)
-    }
-    advanceBy(context, isSelfClosing ? 2 : 1)
-  }
-
-  if (type === TagType.End) {
-    return
-  }
-
-  // 2.x deprecation checks
-  if (
-    __COMPAT__ &&
-    __DEV__ &&
-    isCompatEnabled(
-      CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
-      context
-    )
-  ) {
-    let hasIf = false
-    let hasFor = false
-    for (let i = 0; i < props.length; i++) {
-      const p = props[i]
-      if (p.type === NodeTypes.DIRECTIVE) {
-        if (p.name === 'if') {
-          hasIf = true
-        } else if (p.name === 'for') {
-          hasFor = true
-        }
-      }
-      if (hasIf && hasFor) {
-        warnDeprecation(
-          CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
-          context,
-          getSelection(context, start)
-        )
-        break
-      }
-    }
-  }
-
-  let tagType = ElementTypes.ELEMENT
-  if (!context.inVPre) {
-    if (tag === 'slot') {
-      tagType = ElementTypes.SLOT
-    } else if (tag === 'template') {
-      if (
-        props.some(
-          p =>
-            p.type === NodeTypes.DIRECTIVE && isSpecialTemplateDirective(p.name)
-        )
-      ) {
-        tagType = ElementTypes.TEMPLATE
-      }
-    } else if (isComponent(tag, props, context)) {
-      tagType = ElementTypes.COMPONENT
-    }
-  }
-
-  return {
-    type: NodeTypes.ELEMENT,
-    ns,
-    tag,
-    tagType,
-    props,
-    isSelfClosing,
-    children: [],
-    loc: getSelection(context, start),
-    codegenNode: undefined // to be created during transform phase
-  }
-}
-
-function isComponent(
-  tag: string,
-  props: (AttributeNode | DirectiveNode)[],
-  context: ParserContext
-) {
-  const options = context.options
-  if (options.isCustomElement(tag)) {
-    return false
-  }
-  if (
-    tag === 'component' ||
-    /^[A-Z]/.test(tag) ||
-    isCoreComponent(tag) ||
-    (options.isBuiltInComponent && options.isBuiltInComponent(tag)) ||
-    (options.isNativeTag && !options.isNativeTag(tag))
-  ) {
-    return true
-  }
-  // at this point the tag should be a native tag, but check for potential "is"
-  // casting
-  for (let i = 0; i < props.length; i++) {
-    const p = props[i]
-    if (p.type === NodeTypes.ATTRIBUTE) {
-      if (p.name === 'is' && p.value) {
-        if (p.value.content.startsWith('vue:')) {
-          return true
-        } else if (
-          __COMPAT__ &&
-          checkCompatEnabled(
-            CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
-            context,
-            p.loc
-          )
-        ) {
-          return true
-        }
-      }
-    } else {
-      // directive
-      // v-is (TODO: remove in 3.4)
-      if (p.name === 'is') {
-        return true
-      } else if (
-        // :is on plain element - only treat as component in compat mode
-        p.name === 'bind' &&
-        isStaticArgOf(p.arg, 'is') &&
-        __COMPAT__ &&
-        checkCompatEnabled(
-          CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
-          context,
-          p.loc
-        )
-      ) {
-        return true
-      }
-    }
-  }
-}
-
-function parseAttributes(
-  context: ParserContext,
-  type: TagType
-): (AttributeNode | DirectiveNode)[] {
-  const props = []
-  const attributeNames = new Set<string>()
-  while (
-    context.source.length > 0 &&
-    !startsWith(context.source, '>') &&
-    !startsWith(context.source, '/>')
-  ) {
-    if (startsWith(context.source, '/')) {
-      emitError(context, ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG)
-      advanceBy(context, 1)
-      advanceSpaces(context)
-      continue
-    }
-    if (type === TagType.End) {
-      emitError(context, ErrorCodes.END_TAG_WITH_ATTRIBUTES)
-    }
-
-    const attr = parseAttribute(context, attributeNames)
-
-    // Trim whitespace between class
-    // https://github.com/vuejs/core/issues/4251
-    if (
-      attr.type === NodeTypes.ATTRIBUTE &&
-      attr.value &&
-      attr.name === 'class'
-    ) {
-      attr.value.content = attr.value.content.replace(/\s+/g, ' ').trim()
-    }
-
-    if (type === TagType.Start) {
-      props.push(attr)
-    }
-
-    if (/^[^\t\r\n\f />]/.test(context.source)) {
-      emitError(context, ErrorCodes.MISSING_WHITESPACE_BETWEEN_ATTRIBUTES)
-    }
-    advanceSpaces(context)
-  }
-  return props
-}
-
-function parseAttribute(
-  context: ParserContext,
-  nameSet: Set<string>
-): AttributeNode | DirectiveNode {
-  __TEST__ && assert(/^[^\t\r\n\f />]/.test(context.source))
-
-  // Name.
-  const start = getCursor(context)
-  const match = /^[^\t\r\n\f />][^\t\r\n\f />=]*/.exec(context.source)!
-  const name = match[0]
-
-  if (nameSet.has(name)) {
-    emitError(context, ErrorCodes.DUPLICATE_ATTRIBUTE)
-  }
-  nameSet.add(name)
-
-  if (name[0] === '=') {
-    emitError(context, ErrorCodes.UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME)
-  }
-  {
-    const pattern = /["'<]/g
-    let m: RegExpExecArray | null
-    while ((m = pattern.exec(name))) {
-      emitError(
-        context,
-        ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
-        m.index
-      )
-    }
-  }
-
-  advanceBy(context, name.length)
-
-  // Value
-  let value: AttributeValue = undefined
-
-  if (/^[\t\r\n\f ]*=/.test(context.source)) {
-    advanceSpaces(context)
-    advanceBy(context, 1)
-    advanceSpaces(context)
-    value = parseAttributeValue(context)
-    if (!value) {
-      emitError(context, ErrorCodes.MISSING_ATTRIBUTE_VALUE)
-    }
-  }
-  const loc = getSelection(context, start)
-
-  if (!context.inVPre && /^(v-[A-Za-z0-9-]|:|\.|@|#)/.test(name)) {
-    const match =
-      /(?:^v-([a-z0-9-]+))?(?:(?::|^\.|^@|^#)(\[[^\]]+\]|[^\.]+))?(.+)?$/i.exec(
-        name
-      )!
-
-    let isPropShorthand = startsWith(name, '.')
-    let dirName =
-      match[1] ||
-      (isPropShorthand || startsWith(name, ':')
-        ? 'bind'
-        : startsWith(name, '@')
-          ? 'on'
-          : 'slot')
-    let arg: ExpressionNode | undefined
-
-    if (match[2]) {
-      const isSlot = dirName === 'slot'
-      const startOffset = name.lastIndexOf(
-        match[2],
-        name.length - (match[3]?.length || 0)
-      )
-      const loc = getSelection(
-        context,
-        getNewPosition(context, start, startOffset),
-        getNewPosition(
-          context,
-          start,
-          startOffset + match[2].length + ((isSlot && match[3]) || '').length
-        )
-      )
-      let content = match[2]
-      let isStatic = true
-
-      if (content.startsWith('[')) {
-        isStatic = false
-
-        if (!content.endsWith(']')) {
-          emitError(
-            context,
-            ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END
-          )
-          content = content.slice(1)
-        } else {
-          content = content.slice(1, content.length - 1)
-        }
-      } else if (isSlot) {
-        // #1241 special case for v-slot: vuetify relies extensively on slot
-        // names containing dots. v-slot doesn't have any modifiers and Vue 2.x
-        // supports such usage so we are keeping it consistent with 2.x.
-        content += match[3] || ''
-      }
-
-      arg = {
-        type: NodeTypes.SIMPLE_EXPRESSION,
-        content,
-        isStatic,
-        constType: isStatic
-          ? ConstantTypes.CAN_STRINGIFY
-          : ConstantTypes.NOT_CONSTANT,
-        loc
-      }
-    }
-
-    if (value && value.isQuoted) {
-      const valueLoc = value.loc
-      valueLoc.start.offset++
-      valueLoc.start.column++
-      valueLoc.end = advancePositionWithClone(valueLoc.start, value.content)
-      valueLoc.source = valueLoc.source.slice(1, -1)
-    }
-
-    const modifiers = match[3] ? match[3].slice(1).split('.') : []
-    if (isPropShorthand) modifiers.push('prop')
-
-    // 2.x compat v-bind:foo.sync -> v-model:foo
-    if (__COMPAT__ && dirName === 'bind' && arg) {
-      if (
-        modifiers.includes('sync') &&
-        checkCompatEnabled(
-          CompilerDeprecationTypes.COMPILER_V_BIND_SYNC,
-          context,
-          loc,
-          arg.loc.source
-        )
-      ) {
-        dirName = 'model'
-        modifiers.splice(modifiers.indexOf('sync'), 1)
-      }
-
-      if (__DEV__ && modifiers.includes('prop')) {
-        checkCompatEnabled(
-          CompilerDeprecationTypes.COMPILER_V_BIND_PROP,
-          context,
-          loc
-        )
-      }
-    }
-
-    return {
-      type: NodeTypes.DIRECTIVE,
-      name: dirName,
-      exp: value && {
-        type: NodeTypes.SIMPLE_EXPRESSION,
-        content: value.content,
-        isStatic: false,
-        // Treat as non-constant by default. This can be potentially set to
-        // other values by `transformExpression` to make it eligible for hoisting.
-        constType: ConstantTypes.NOT_CONSTANT,
-        loc: value.loc
-      },
-      arg,
-      modifiers,
-      loc
-    }
-  }
-
-  // missing directive name or illegal directive name
-  if (!context.inVPre && startsWith(name, 'v-')) {
-    emitError(context, ErrorCodes.X_MISSING_DIRECTIVE_NAME)
-  }
-
-  return {
-    type: NodeTypes.ATTRIBUTE,
-    name,
-    value: value && {
-      type: NodeTypes.TEXT,
-      content: value.content,
-      loc: value.loc
-    },
-    loc
-  }
-}
-
-function parseAttributeValue(context: ParserContext): AttributeValue {
-  const start = getCursor(context)
-  let content: string
-
-  const quote = context.source[0]
-  const isQuoted = quote === `"` || quote === `'`
-  if (isQuoted) {
-    // Quoted value.
-    advanceBy(context, 1)
-
-    const endIndex = context.source.indexOf(quote)
-    if (endIndex === -1) {
-      content = parseTextData(
-        context,
-        context.source.length,
-        TextModes.ATTRIBUTE_VALUE
-      )
-    } else {
-      content = parseTextData(context, endIndex, TextModes.ATTRIBUTE_VALUE)
-      advanceBy(context, 1)
-    }
-  } else {
-    // Unquoted
-    const match = /^[^\t\r\n\f >]+/.exec(context.source)
-    if (!match) {
-      return undefined
-    }
-    const unexpectedChars = /["'<=`]/g
-    let m: RegExpExecArray | null
-    while ((m = unexpectedChars.exec(match[0]))) {
-      emitError(
-        context,
-        ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-        m.index
-      )
-    }
-    content = parseTextData(context, match[0].length, TextModes.ATTRIBUTE_VALUE)
-  }
-
-  return { content, isQuoted, loc: getSelection(context, start) }
-}
-
-function parseInterpolation(
-  context: ParserContext,
-  mode: TextModes
-): InterpolationNode | undefined {
-  const [open, close] = context.options.delimiters
-  __TEST__ && assert(startsWith(context.source, open))
-
-  const closeIndex = context.source.indexOf(close, open.length)
-  if (closeIndex === -1) {
-    emitError(context, ErrorCodes.X_MISSING_INTERPOLATION_END)
-    return undefined
-  }
-
-  const start = getCursor(context)
-  advanceBy(context, open.length)
-  const innerStart = getCursor(context)
-  const innerEnd = getCursor(context)
-  const rawContentLength = closeIndex - open.length
-  const rawContent = context.source.slice(0, rawContentLength)
-  const preTrimContent = parseTextData(context, rawContentLength, mode)
-  const content = preTrimContent.trim()
-  const startOffset = preTrimContent.indexOf(content)
-  if (startOffset > 0) {
-    advancePositionWithMutation(innerStart, rawContent, startOffset)
-  }
-  const endOffset =
-    rawContentLength - (preTrimContent.length - content.length - startOffset)
-  advancePositionWithMutation(innerEnd, rawContent, endOffset)
-  advanceBy(context, close.length)
-
-  return {
-    type: NodeTypes.INTERPOLATION,
-    content: {
-      type: NodeTypes.SIMPLE_EXPRESSION,
-      isStatic: false,
-      // Set `isConstant` to false by default and will decide in transformExpression
-      constType: ConstantTypes.NOT_CONSTANT,
-      content,
-      loc: getSelection(context, innerStart, innerEnd)
-    },
-    loc: getSelection(context, start)
-  }
-}
-
-function parseText(context: ParserContext, mode: TextModes): TextNode {
-  __TEST__ && assert(context.source.length > 0)
-
-  const endTokens =
-    mode === TextModes.CDATA ? [']]>'] : ['<', context.options.delimiters[0]]
-
-  let endIndex = context.source.length
-  for (let i = 0; i < endTokens.length; i++) {
-    const index = context.source.indexOf(endTokens[i], 1)
-    if (index !== -1 && endIndex > index) {
-      endIndex = index
-    }
-  }
-
-  __TEST__ && assert(endIndex > 0)
-
-  const start = getCursor(context)
-  const content = parseTextData(context, endIndex, mode)
-
-  return {
-    type: NodeTypes.TEXT,
-    content,
-    loc: getSelection(context, start)
-  }
-}
-
-/**
- * Get text data with a given length from the current location.
- * This translates HTML entities in the text data.
- */
-function parseTextData(
-  context: ParserContext,
-  length: number,
-  mode: TextModes
-): string {
-  const rawText = context.source.slice(0, length)
-  advanceBy(context, length)
-  if (
-    mode === TextModes.RAWTEXT ||
-    mode === TextModes.CDATA ||
-    !rawText.includes('&')
-  ) {
-    return rawText
-  } else {
-    // DATA or RCDATA containing "&". Entity decoding is required.
-    return context.options.decodeEntities(
-      rawText,
-      mode === TextModes.ATTRIBUTE_VALUE
-    )
-  }
-}
-
-function getCursor(context: ParserContext): Position {
-  const { column, line, offset } = context
-  return { column, line, offset }
-}
-
-function getSelection(
-  context: ParserContext,
-  start: Position,
-  end?: Position
-): SourceLocation {
-  end = end || getCursor(context)
-  return {
-    start,
-    end,
-    source: context.originalSource.slice(start.offset, end.offset)
-  }
-}
-
-function last<T>(xs: T[]): T | undefined {
-  return xs[xs.length - 1]
-}
-
-function startsWith(source: string, searchString: string): boolean {
-  return source.startsWith(searchString)
-}
-
-function advanceBy(context: ParserContext, numberOfCharacters: number): void {
-  const { source } = context
-  __TEST__ && assert(numberOfCharacters <= source.length)
-  advancePositionWithMutation(context, source, numberOfCharacters)
-  context.source = source.slice(numberOfCharacters)
-}
-
-function advanceSpaces(context: ParserContext): void {
-  const match = /^[\t\r\n\f ]+/.exec(context.source)
-  if (match) {
-    advanceBy(context, match[0].length)
-  }
-}
-
-function getNewPosition(
-  context: ParserContext,
-  start: Position,
-  numberOfCharacters: number
-): Position {
-  return advancePositionWithClone(
-    start,
-    context.originalSource.slice(start.offset, numberOfCharacters),
-    numberOfCharacters
-  )
-}
-
-function emitError(
-  context: ParserContext,
-  code: ErrorCodes,
-  offset?: number,
-  loc: Position = getCursor(context)
-): void {
-  if (offset) {
-    loc.offset += offset
-    loc.column += offset
-  }
-  context.options.onError(
-    createCompilerError(code, {
-      start: loc,
-      end: loc,
-      source: ''
-    })
-  )
-}
-
-function isEnd(
-  context: ParserContext,
-  mode: TextModes,
-  ancestors: ElementNode[]
-): boolean {
-  const s = context.source
-
-  switch (mode) {
-    case TextModes.DATA:
-      if (startsWith(s, '</')) {
-        // TODO: probably bad performance
-        for (let i = ancestors.length - 1; i >= 0; --i) {
-          if (startsWithEndTagOpen(s, ancestors[i].tag)) {
-            return true
-          }
-        }
-      }
-      break
-
-    case TextModes.RCDATA:
-    case TextModes.RAWTEXT: {
-      const parent = last(ancestors)
-      if (parent && startsWithEndTagOpen(s, parent.tag)) {
-        return true
-      }
-      break
-    }
-
-    case TextModes.CDATA:
-      if (startsWith(s, ']]>')) {
-        return true
-      }
-      break
-  }
-
-  return !s
-}
-
-function startsWithEndTagOpen(source: string, tag: string): boolean {
-  return (
-    startsWith(source, '</') &&
-    source.slice(2, 2 + tag.length).toLowerCase() === tag.toLowerCase() &&
-    /[\t\r\n\f />]/.test(source[2 + tag.length] || '>')
-  )
-}
diff --git a/packages/compiler-core/src/parser.ts b/packages/compiler-core/src/parser.ts
new file mode 100644
index 000000000..0d66d2055
--- /dev/null
+++ b/packages/compiler-core/src/parser.ts
@@ -0,0 +1,1085 @@
+import {
+  type AttributeNode,
+  ConstantTypes,
+  type DirectiveNode,
+  type ElementNode,
+  ElementTypes,
+  type ForParseResult,
+  Namespaces,
+  NodeTypes,
+  type RootNode,
+  type SimpleExpressionNode,
+  type SourceLocation,
+  type TemplateChildNode,
+  createRoot,
+  createSimpleExpression,
+} from './ast'
+import type { ParserOptions } from './options'
+import Tokenizer, {
+  CharCodes,
+  ParseMode,
+  QuoteType,
+  Sequences,
+  State,
+  isWhitespace,
+  toCharCodes,
+} from './tokenizer'
+import {
+  type CompilerCompatOptions,
+  CompilerDeprecationTypes,
+  checkCompatEnabled,
+  isCompatEnabled,
+  warnDeprecation,
+} from './compat/compatConfig'
+import { NO, extend } from '@vue/shared'
+import {
+  ErrorCodes,
+  createCompilerError,
+  defaultOnError,
+  defaultOnWarn,
+} from './errors'
+import {
+  forAliasRE,
+  isCoreComponent,
+  isSimpleIdentifier,
+  isStaticArgOf,
+} from './utils'
+import { decodeHTML } from 'entities/lib/decode.js'
+import {
+  type ParserOptions as BabelOptions,
+  parse,
+  parseExpression,
+} from '@babel/parser'
+
+type OptionalOptions =
+  | 'decodeEntities'
+  | 'whitespace'
+  | 'isNativeTag'
+  | 'isBuiltInComponent'
+  | 'expressionPlugins'
+  | keyof CompilerCompatOptions
+
+export type MergedParserOptions = Omit<
+  Required<ParserOptions>,
+  OptionalOptions
+> &
+  Pick<ParserOptions, OptionalOptions>
+
+export const defaultParserOptions: MergedParserOptions = {
+  parseMode: 'base',
+  ns: Namespaces.HTML,
+  delimiters: [`{{`, `}}`],
+  getNamespace: () => Namespaces.HTML,
+  isVoidTag: NO,
+  isPreTag: NO,
+  isIgnoreNewlineTag: NO,
+  isCustomElement: NO,
+  onError: defaultOnError,
+  onWarn: defaultOnWarn,
+  comments: __DEV__,
+  prefixIdentifiers: false,
+}
+
+let currentOptions: MergedParserOptions = defaultParserOptions
+let currentRoot: RootNode | null = null
+
+// parser state
+let currentInput = ''
+let currentOpenTag: ElementNode | null = null
+let currentProp: AttributeNode | DirectiveNode | null = null
+let currentAttrValue = ''
+let currentAttrStartIndex = -1
+let currentAttrEndIndex = -1
+let inPre = 0
+let inVPre = false
+let currentVPreBoundary: ElementNode | null = null
+const stack: ElementNode[] = []
+
+const tokenizer = new Tokenizer(stack, {
+  onerr: emitError,
+
+  ontext(start, end) {
+    onText(getSlice(start, end), start, end)
+  },
+
+  ontextentity(char, start, end) {
+    onText(char, start, end)
+  },
+
+  oninterpolation(start, end) {
+    if (inVPre) {
+      return onText(getSlice(start, end), start, end)
+    }
+    let innerStart = start + tokenizer.delimiterOpen.length
+    let innerEnd = end - tokenizer.delimiterClose.length
+    while (isWhitespace(currentInput.charCodeAt(innerStart))) {
+      innerStart++
+    }
+    while (isWhitespace(currentInput.charCodeAt(innerEnd - 1))) {
+      innerEnd--
+    }
+    let exp = getSlice(innerStart, innerEnd)
+    // decode entities for backwards compat
+    if (exp.includes('&')) {
+      if (__BROWSER__) {
+        exp = currentOptions.decodeEntities!(exp, false)
+      } else {
+        exp = decodeHTML(exp)
+      }
+    }
+    addNode({
+      type: NodeTypes.INTERPOLATION,
+      content: createExp(exp, false, getLoc(innerStart, innerEnd)),
+      loc: getLoc(start, end),
+    })
+  },
+
+  onopentagname(start, end) {
+    const name = getSlice(start, end)
+    currentOpenTag = {
+      type: NodeTypes.ELEMENT,
+      tag: name,
+      ns: currentOptions.getNamespace(name, stack[0], currentOptions.ns),
+      tagType: ElementTypes.ELEMENT, // will be refined on tag close
+      props: [],
+      children: [],
+      loc: getLoc(start - 1, end),
+      codegenNode: undefined,
+    }
+  },
+
+  onopentagend(end) {
+    endOpenTag(end)
+  },
+
+  onclosetag(start, end) {
+    const name = getSlice(start, end)
+    if (!currentOptions.isVoidTag(name)) {
+      let found = false
+      for (let i = 0; i < stack.length; i++) {
+        const e = stack[i]
+        if (e.tag.toLowerCase() === name.toLowerCase()) {
+          found = true
+          if (i > 0) {
+            emitError(ErrorCodes.X_MISSING_END_TAG, stack[0].loc.start.offset)
+          }
+          for (let j = 0; j <= i; j++) {
+            const el = stack.shift()!
+            onCloseTag(el, end, j < i)
+          }
+          break
+        }
+      }
+      if (!found) {
+        emitError(ErrorCodes.X_INVALID_END_TAG, backTrack(start, CharCodes.Lt))
+      }
+    }
+  },
+
+  onselfclosingtag(end) {
+    const name = currentOpenTag!.tag
+    currentOpenTag!.isSelfClosing = true
+    endOpenTag(end)
+    if (stack[0] && stack[0].tag === name) {
+      onCloseTag(stack.shift()!, end)
+    }
+  },
+
+  onattribname(start, end) {
+    // plain attribute
+    currentProp = {
+      type: NodeTypes.ATTRIBUTE,
+      name: getSlice(start, end),
+      nameLoc: getLoc(start, end),
+      value: undefined,
+      loc: getLoc(start),
+    }
+  },
+
+  ondirname(start, end) {
+    const raw = getSlice(start, end)
+    const name =
+      raw === '.' || raw === ':'
+        ? 'bind'
+        : raw === '@'
+          ? 'on'
+          : raw === '#'
+            ? 'slot'
+            : raw.slice(2)
+
+    if (!inVPre && name === '') {
+      emitError(ErrorCodes.X_MISSING_DIRECTIVE_NAME, start)
+    }
+
+    if (inVPre || name === '') {
+      currentProp = {
+        type: NodeTypes.ATTRIBUTE,
+        name: raw,
+        nameLoc: getLoc(start, end),
+        value: undefined,
+        loc: getLoc(start),
+      }
+    } else {
+      currentProp = {
+        type: NodeTypes.DIRECTIVE,
+        name,
+        rawName: raw,
+        exp: undefined,
+        arg: undefined,
+        modifiers: raw === '.' ? [createSimpleExpression('prop')] : [],
+        loc: getLoc(start),
+      }
+      if (name === 'pre') {
+        inVPre = tokenizer.inVPre = true
+        currentVPreBoundary = currentOpenTag
+        // convert dirs before this one to attributes
+        const props = currentOpenTag!.props
+        for (let i = 0; i < props.length; i++) {
+          if (props[i].type === NodeTypes.DIRECTIVE) {
+            props[i] = dirToAttr(props[i] as DirectiveNode)
+          }
+        }
+      }
+    }
+  },
+
+  ondirarg(start, end) {
+    if (start === end) return
+    const arg = getSlice(start, end)
+    if (inVPre) {
+      ;(currentProp as AttributeNode).name += arg
+      setLocEnd((currentProp as AttributeNode).nameLoc, end)
+    } else {
+      const isStatic = arg[0] !== `[`
+      ;(currentProp as DirectiveNode).arg = createExp(
+        isStatic ? arg : arg.slice(1, -1),
+        isStatic,
+        getLoc(start, end),
+        isStatic ? ConstantTypes.CAN_STRINGIFY : ConstantTypes.NOT_CONSTANT,
+      )
+    }
+  },
+
+  ondirmodifier(start, end) {
+    const mod = getSlice(start, end)
+    if (inVPre) {
+      ;(currentProp as AttributeNode).name += '.' + mod
+      setLocEnd((currentProp as AttributeNode).nameLoc, end)
+    } else if ((currentProp as DirectiveNode).name === 'slot') {
+      // slot has no modifiers, special case for edge cases like
+      // https://github.com/vuejs/language-tools/issues/2710
+      const arg = (currentProp as DirectiveNode).arg
+      if (arg) {
+        ;(arg as SimpleExpressionNode).content += '.' + mod
+        setLocEnd(arg.loc, end)
+      }
+    } else {
+      const exp = createSimpleExpression(mod, true, getLoc(start, end))
+      ;(currentProp as DirectiveNode).modifiers.push(exp)
+    }
+  },
+
+  onattribdata(start, end) {
+    currentAttrValue += getSlice(start, end)
+    if (currentAttrStartIndex < 0) currentAttrStartIndex = start
+    currentAttrEndIndex = end
+  },
+
+  onattribentity(char, start, end) {
+    currentAttrValue += char
+    if (currentAttrStartIndex < 0) currentAttrStartIndex = start
+    currentAttrEndIndex = end
+  },
+
+  onattribnameend(end) {
+    const start = currentProp!.loc.start.offset
+    const name = getSlice(start, end)
+    if (currentProp!.type === NodeTypes.DIRECTIVE) {
+      currentProp!.rawName = name
+    }
+    // check duplicate attrs
+    if (
+      currentOpenTag!.props.some(
+        p => (p.type === NodeTypes.DIRECTIVE ? p.rawName : p.name) === name,
+      )
+    ) {
+      emitError(ErrorCodes.DUPLICATE_ATTRIBUTE, start)
+    }
+  },
+
+  onattribend(quote, end) {
+    if (currentOpenTag && currentProp) {
+      // finalize end pos
+      setLocEnd(currentProp.loc, end)
+
+      if (quote !== QuoteType.NoValue) {
+        if (__BROWSER__ && currentAttrValue.includes('&')) {
+          currentAttrValue = currentOptions.decodeEntities!(
+            currentAttrValue,
+            true,
+          )
+        }
+
+        if (currentProp.type === NodeTypes.ATTRIBUTE) {
+          // assign value
+
+          // condense whitespaces in class
+          if (currentProp!.name === 'class') {
+            currentAttrValue = condense(currentAttrValue).trim()
+          }
+
+          if (quote === QuoteType.Unquoted && !currentAttrValue) {
+            emitError(ErrorCodes.MISSING_ATTRIBUTE_VALUE, end)
+          }
+
+          currentProp!.value = {
+            type: NodeTypes.TEXT,
+            content: currentAttrValue,
+            loc:
+              quote === QuoteType.Unquoted
+                ? getLoc(currentAttrStartIndex, currentAttrEndIndex)
+                : getLoc(currentAttrStartIndex - 1, currentAttrEndIndex + 1),
+          }
+          if (
+            tokenizer.inSFCRoot &&
+            currentOpenTag.tag === 'template' &&
+            currentProp.name === 'lang' &&
+            currentAttrValue &&
+            currentAttrValue !== 'html'
+          ) {
+            // SFC root template with preprocessor lang, force tokenizer to
+            // RCDATA mode
+            tokenizer.enterRCDATA(toCharCodes(`</template`), 0)
+          }
+        } else {
+          // directive
+          let expParseMode = ExpParseMode.Normal
+          if (!__BROWSER__) {
+            if (currentProp.name === 'for') {
+              expParseMode = ExpParseMode.Skip
+            } else if (currentProp.name === 'slot') {
+              expParseMode = ExpParseMode.Params
+            } else if (
+              currentProp.name === 'on' &&
+              currentAttrValue.includes(';')
+            ) {
+              expParseMode = ExpParseMode.Statements
+            }
+          }
+          currentProp.exp = createExp(
+            currentAttrValue,
+            false,
+            getLoc(currentAttrStartIndex, currentAttrEndIndex),
+            ConstantTypes.NOT_CONSTANT,
+            expParseMode,
+          )
+          if (currentProp.name === 'for') {
+            currentProp.forParseResult = parseForExpression(currentProp.exp)
+          }
+          // 2.x compat v-bind:foo.sync -> v-model:foo
+          let syncIndex = -1
+          if (
+            __COMPAT__ &&
+            currentProp.name === 'bind' &&
+            (syncIndex = currentProp.modifiers.findIndex(
+              mod => mod.content === 'sync',
+            )) > -1 &&
+            checkCompatEnabled(
+              CompilerDeprecationTypes.COMPILER_V_BIND_SYNC,
+              currentOptions,
+              currentProp.loc,
+              currentProp.rawName,
+            )
+          ) {
+            currentProp.name = 'model'
+            currentProp.modifiers.splice(syncIndex, 1)
+          }
+        }
+      }
+      if (
+        currentProp.type !== NodeTypes.DIRECTIVE ||
+        currentProp.name !== 'pre'
+      ) {
+        currentOpenTag.props.push(currentProp)
+      }
+    }
+    currentAttrValue = ''
+    currentAttrStartIndex = currentAttrEndIndex = -1
+  },
+
+  oncomment(start, end) {
+    if (currentOptions.comments) {
+      addNode({
+        type: NodeTypes.COMMENT,
+        content: getSlice(start, end),
+        loc: getLoc(start - 4, end + 3),
+      })
+    }
+  },
+
+  onend() {
+    const end = currentInput.length
+    // EOF ERRORS
+    if ((__DEV__ || !__BROWSER__) && tokenizer.state !== State.Text) {
+      switch (tokenizer.state) {
+        case State.BeforeTagName:
+        case State.BeforeClosingTagName:
+          emitError(ErrorCodes.EOF_BEFORE_TAG_NAME, end)
+          break
+        case State.Interpolation:
+        case State.InterpolationClose:
+          emitError(
+            ErrorCodes.X_MISSING_INTERPOLATION_END,
+            tokenizer.sectionStart,
+          )
+          break
+        case State.InCommentLike:
+          if (tokenizer.currentSequence === Sequences.CdataEnd) {
+            emitError(ErrorCodes.EOF_IN_CDATA, end)
+          } else {
+            emitError(ErrorCodes.EOF_IN_COMMENT, end)
+          }
+          break
+        case State.InTagName:
+        case State.InSelfClosingTag:
+        case State.InClosingTagName:
+        case State.BeforeAttrName:
+        case State.InAttrName:
+        case State.InDirName:
+        case State.InDirArg:
+        case State.InDirDynamicArg:
+        case State.InDirModifier:
+        case State.AfterAttrName:
+        case State.BeforeAttrValue:
+        case State.InAttrValueDq: // "
+        case State.InAttrValueSq: // '
+        case State.InAttrValueNq:
+          emitError(ErrorCodes.EOF_IN_TAG, end)
+          break
+        default:
+          // console.log(tokenizer.state)
+          break
+      }
+    }
+    for (let index = 0; index < stack.length; index++) {
+      onCloseTag(stack[index], end - 1)
+      emitError(ErrorCodes.X_MISSING_END_TAG, stack[index].loc.start.offset)
+    }
+  },
+
+  oncdata(start, end) {
+    if (stack[0].ns !== Namespaces.HTML) {
+      onText(getSlice(start, end), start, end)
+    } else {
+      emitError(ErrorCodes.CDATA_IN_HTML_CONTENT, start - 9)
+    }
+  },
+
+  onprocessinginstruction(start) {
+    // ignore as we do not have runtime handling for this, only check error
+    if ((stack[0] ? stack[0].ns : currentOptions.ns) === Namespaces.HTML) {
+      emitError(
+        ErrorCodes.UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME,
+        start - 1,
+      )
+    }
+  },
+})
+
+// This regex doesn't cover the case if key or index aliases have destructuring,
+// but those do not make sense in the first place, so this works in practice.
+const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
+const stripParensRE = /^\(|\)$/g
+
+function parseForExpression(
+  input: SimpleExpressionNode,
+): ForParseResult | undefined {
+  const loc = input.loc
+  const exp = input.content
+  const inMatch = exp.match(forAliasRE)
+  if (!inMatch) return
+
+  const [, LHS, RHS] = inMatch
+
+  const createAliasExpression = (
+    content: string,
+    offset: number,
+    asParam = false,
+  ) => {
+    const start = loc.start.offset + offset
+    const end = start + content.length
+    return createExp(
+      content,
+      false,
+      getLoc(start, end),
+      ConstantTypes.NOT_CONSTANT,
+      asParam ? ExpParseMode.Params : ExpParseMode.Normal,
+    )
+  }
+
+  const result: ForParseResult = {
+    source: createAliasExpression(RHS.trim(), exp.indexOf(RHS, LHS.length)),
+    value: undefined,
+    key: undefined,
+    index: undefined,
+    finalized: false,
+  }
+
+  let valueContent = LHS.trim().replace(stripParensRE, '').trim()
+  const trimmedOffset = LHS.indexOf(valueContent)
+
+  const iteratorMatch = valueContent.match(forIteratorRE)
+  if (iteratorMatch) {
+    valueContent = valueContent.replace(forIteratorRE, '').trim()
+
+    const keyContent = iteratorMatch[1].trim()
+    let keyOffset: number | undefined
+    if (keyContent) {
+      keyOffset = exp.indexOf(keyContent, trimmedOffset + valueContent.length)
+      result.key = createAliasExpression(keyContent, keyOffset, true)
+    }
+
+    if (iteratorMatch[2]) {
+      const indexContent = iteratorMatch[2].trim()
+
+      if (indexContent) {
+        result.index = createAliasExpression(
+          indexContent,
+          exp.indexOf(
+            indexContent,
+            result.key
+              ? keyOffset! + keyContent.length
+              : trimmedOffset + valueContent.length,
+          ),
+          true,
+        )
+      }
+    }
+  }
+
+  if (valueContent) {
+    result.value = createAliasExpression(valueContent, trimmedOffset, true)
+  }
+
+  return result
+}
+
+function getSlice(start: number, end: number) {
+  return currentInput.slice(start, end)
+}
+
+function endOpenTag(end: number) {
+  if (tokenizer.inSFCRoot) {
+    // in SFC mode, generate locations for root-level tags' inner content.
+    currentOpenTag!.innerLoc = getLoc(end + 1, end + 1)
+  }
+  addNode(currentOpenTag!)
+  const { tag, ns } = currentOpenTag!
+  if (ns === Namespaces.HTML && currentOptions.isPreTag(tag)) {
+    inPre++
+  }
+  if (currentOptions.isVoidTag(tag)) {
+    onCloseTag(currentOpenTag!, end)
+  } else {
+    stack.unshift(currentOpenTag!)
+    if (ns === Namespaces.SVG || ns === Namespaces.MATH_ML) {
+      tokenizer.inXML = true
+    }
+  }
+  currentOpenTag = null
+}
+
+function onText(content: string, start: number, end: number) {
+  if (__BROWSER__) {
+    const tag = stack[0] && stack[0].tag
+    if (tag !== 'script' && tag !== 'style' && content.includes('&')) {
+      content = currentOptions.decodeEntities!(content, false)
+    }
+  }
+  const parent = stack[0] || currentRoot
+  const lastNode = parent.children[parent.children.length - 1]
+  if (lastNode && lastNode.type === NodeTypes.TEXT) {
+    // merge
+    lastNode.content += content
+    setLocEnd(lastNode.loc, end)
+  } else {
+    parent.children.push({
+      type: NodeTypes.TEXT,
+      content,
+      loc: getLoc(start, end),
+    })
+  }
+}
+
+function onCloseTag(el: ElementNode, end: number, isImplied = false) {
+  // attach end position
+  if (isImplied) {
+    // implied close, end should be backtracked to close
+    setLocEnd(el.loc, backTrack(end, CharCodes.Lt))
+  } else {
+    setLocEnd(el.loc, lookAhead(end, CharCodes.Gt) + 1)
+  }
+
+  if (tokenizer.inSFCRoot) {
+    // SFC root tag, resolve inner end
+    if (el.children.length) {
+      el.innerLoc!.end = extend({}, el.children[el.children.length - 1].loc.end)
+    } else {
+      el.innerLoc!.end = extend({}, el.innerLoc!.start)
+    }
+    el.innerLoc!.source = getSlice(
+      el.innerLoc!.start.offset,
+      el.innerLoc!.end.offset,
+    )
+  }
+
+  // refine element type
+  const { tag, ns, children } = el
+  if (!inVPre) {
+    if (tag === 'slot') {
+      el.tagType = ElementTypes.SLOT
+    } else if (isFragmentTemplate(el)) {
+      el.tagType = ElementTypes.TEMPLATE
+    } else if (isComponent(el)) {
+      el.tagType = ElementTypes.COMPONENT
+    }
+  }
+
+  // whitespace management
+  if (!tokenizer.inRCDATA) {
+    el.children = condenseWhitespace(children, tag)
+  }
+
+  if (ns === Namespaces.HTML && currentOptions.isIgnoreNewlineTag(tag)) {
+    // remove leading newline for <textarea> and <pre> per html spec
+    // https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody
+    const first = children[0]
+    if (first && first.type === NodeTypes.TEXT) {
+      first.content = first.content.replace(/^\r?\n/, '')
+    }
+  }
+
+  if (ns === Namespaces.HTML && currentOptions.isPreTag(tag)) {
+    inPre--
+  }
+  if (currentVPreBoundary === el) {
+    inVPre = tokenizer.inVPre = false
+    currentVPreBoundary = null
+  }
+  if (
+    tokenizer.inXML &&
+    (stack[0] ? stack[0].ns : currentOptions.ns) === Namespaces.HTML
+  ) {
+    tokenizer.inXML = false
+  }
+
+  // 2.x compat / deprecation checks
+  if (__COMPAT__) {
+    const props = el.props
+    if (
+      __DEV__ &&
+      isCompatEnabled(
+        CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
+        currentOptions,
+      )
+    ) {
+      let hasIf = false
+      let hasFor = false
+      for (let i = 0; i < props.length; i++) {
+        const p = props[i]
+        if (p.type === NodeTypes.DIRECTIVE) {
+          if (p.name === 'if') {
+            hasIf = true
+          } else if (p.name === 'for') {
+            hasFor = true
+          }
+        }
+        if (hasIf && hasFor) {
+          warnDeprecation(
+            CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
+            currentOptions,
+            el.loc,
+          )
+          break
+        }
+      }
+    }
+
+    if (
+      !tokenizer.inSFCRoot &&
+      isCompatEnabled(
+        CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
+        currentOptions,
+      ) &&
+      el.tag === 'template' &&
+      !isFragmentTemplate(el)
+    ) {
+      __DEV__ &&
+        warnDeprecation(
+          CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
+          currentOptions,
+          el.loc,
+        )
+      // unwrap
+      const parent = stack[0] || currentRoot
+      const index = parent.children.indexOf(el)
+      parent.children.splice(index, 1, ...el.children)
+    }
+
+    const inlineTemplateProp = props.find(
+      p => p.type === NodeTypes.ATTRIBUTE && p.name === 'inline-template',
+    ) as AttributeNode
+    if (
+      inlineTemplateProp &&
+      checkCompatEnabled(
+        CompilerDeprecationTypes.COMPILER_INLINE_TEMPLATE,
+        currentOptions,
+        inlineTemplateProp.loc,
+      ) &&
+      el.children.length
+    ) {
+      inlineTemplateProp.value = {
+        type: NodeTypes.TEXT,
+        content: getSlice(
+          el.children[0].loc.start.offset,
+          el.children[el.children.length - 1].loc.end.offset,
+        ),
+        loc: inlineTemplateProp.loc,
+      }
+    }
+  }
+}
+
+function lookAhead(index: number, c: number) {
+  let i = index
+  while (currentInput.charCodeAt(i) !== c && i < currentInput.length - 1) i++
+  return i
+}
+
+function backTrack(index: number, c: number) {
+  let i = index
+  while (currentInput.charCodeAt(i) !== c && i >= 0) i--
+  return i
+}
+
+const specialTemplateDir = new Set(['if', 'else', 'else-if', 'for', 'slot'])
+function isFragmentTemplate({ tag, props }: ElementNode): boolean {
+  if (tag === 'template') {
+    for (let i = 0; i < props.length; i++) {
+      if (
+        props[i].type === NodeTypes.DIRECTIVE &&
+        specialTemplateDir.has((props[i] as DirectiveNode).name)
+      ) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+function isComponent({ tag, props }: ElementNode): boolean {
+  if (currentOptions.isCustomElement(tag)) {
+    return false
+  }
+  if (
+    tag === 'component' ||
+    isUpperCase(tag.charCodeAt(0)) ||
+    isCoreComponent(tag) ||
+    (currentOptions.isBuiltInComponent &&
+      currentOptions.isBuiltInComponent(tag)) ||
+    (currentOptions.isNativeTag && !currentOptions.isNativeTag(tag))
+  ) {
+    return true
+  }
+  // at this point the tag should be a native tag, but check for potential "is"
+  // casting
+  for (let i = 0; i < props.length; i++) {
+    const p = props[i]
+    if (p.type === NodeTypes.ATTRIBUTE) {
+      if (p.name === 'is' && p.value) {
+        if (p.value.content.startsWith('vue:')) {
+          return true
+        } else if (
+          __COMPAT__ &&
+          checkCompatEnabled(
+            CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
+            currentOptions,
+            p.loc,
+          )
+        ) {
+          return true
+        }
+      }
+    } else if (
+      __COMPAT__ &&
+      // :is on plain element - only treat as component in compat mode
+      p.name === 'bind' &&
+      isStaticArgOf(p.arg, 'is') &&
+      checkCompatEnabled(
+        CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
+        currentOptions,
+        p.loc,
+      )
+    ) {
+      return true
+    }
+  }
+  return false
+}
+
+function isUpperCase(c: number) {
+  return c > 64 && c < 91
+}
+
+const windowsNewlineRE = /\r\n/g
+function condenseWhitespace(
+  nodes: TemplateChildNode[],
+  tag?: string,
+): TemplateChildNode[] {
+  const shouldCondense = currentOptions.whitespace !== 'preserve'
+  let removedWhitespace = false
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+    if (node.type === NodeTypes.TEXT) {
+      if (!inPre) {
+        if (isAllWhitespace(node.content)) {
+          const prev = nodes[i - 1] && nodes[i - 1].type
+          const next = nodes[i + 1] && nodes[i + 1].type
+          // Remove if:
+          // - the whitespace is the first or last node, or:
+          // - (condense mode) the whitespace is between two comments, or:
+          // - (condense mode) the whitespace is between comment and element, or:
+          // - (condense mode) the whitespace is between two elements AND contains newline
+          if (
+            !prev ||
+            !next ||
+            (shouldCondense &&
+              ((prev === NodeTypes.COMMENT &&
+                (next === NodeTypes.COMMENT || next === NodeTypes.ELEMENT)) ||
+                (prev === NodeTypes.ELEMENT &&
+                  (next === NodeTypes.COMMENT ||
+                    (next === NodeTypes.ELEMENT &&
+                      hasNewlineChar(node.content))))))
+          ) {
+            removedWhitespace = true
+            nodes[i] = null as any
+          } else {
+            // Otherwise, the whitespace is condensed into a single space
+            node.content = ' '
+          }
+        } else if (shouldCondense) {
+          // in condense mode, consecutive whitespaces in text are condensed
+          // down to a single space.
+          node.content = condense(node.content)
+        }
+      } else {
+        // #6410 normalize windows newlines in <pre>:
+        // in SSR, browsers normalize server-rendered \r\n into a single \n
+        // in the DOM
+        node.content = node.content.replace(windowsNewlineRE, '\n')
+      }
+    }
+  }
+  return removedWhitespace ? nodes.filter(Boolean) : nodes
+}
+
+function isAllWhitespace(str: string) {
+  for (let i = 0; i < str.length; i++) {
+    if (!isWhitespace(str.charCodeAt(i))) {
+      return false
+    }
+  }
+  return true
+}
+
+function hasNewlineChar(str: string) {
+  for (let i = 0; i < str.length; i++) {
+    const c = str.charCodeAt(i)
+    if (c === CharCodes.NewLine || c === CharCodes.CarriageReturn) {
+      return true
+    }
+  }
+  return false
+}
+
+function condense(str: string) {
+  let ret = ''
+  let prevCharIsWhitespace = false
+  for (let i = 0; i < str.length; i++) {
+    if (isWhitespace(str.charCodeAt(i))) {
+      if (!prevCharIsWhitespace) {
+        ret += ' '
+        prevCharIsWhitespace = true
+      }
+    } else {
+      ret += str[i]
+      prevCharIsWhitespace = false
+    }
+  }
+  return ret
+}
+
+function addNode(node: TemplateChildNode) {
+  ;(stack[0] || currentRoot).children.push(node)
+}
+
+function getLoc(start: number, end?: number): SourceLocation {
+  return {
+    start: tokenizer.getPos(start),
+    // @ts-expect-error allow late attachment
+    end: end == null ? end : tokenizer.getPos(end),
+    // @ts-expect-error allow late attachment
+    source: end == null ? end : getSlice(start, end),
+  }
+}
+
+function setLocEnd(loc: SourceLocation, end: number) {
+  loc.end = tokenizer.getPos(end)
+  loc.source = getSlice(loc.start.offset, end)
+}
+
+function dirToAttr(dir: DirectiveNode): AttributeNode {
+  const attr: AttributeNode = {
+    type: NodeTypes.ATTRIBUTE,
+    name: dir.rawName!,
+    nameLoc: getLoc(
+      dir.loc.start.offset,
+      dir.loc.start.offset + dir.rawName!.length,
+    ),
+    value: undefined,
+    loc: dir.loc,
+  }
+  if (dir.exp) {
+    // account for quotes
+    const loc = dir.exp.loc
+    if (loc.end.offset < dir.loc.end.offset) {
+      loc.start.offset--
+      loc.start.column--
+      loc.end.offset++
+      loc.end.column++
+    }
+    attr.value = {
+      type: NodeTypes.TEXT,
+      content: (dir.exp as SimpleExpressionNode).content,
+      loc,
+    }
+  }
+  return attr
+}
+
+enum ExpParseMode {
+  Normal,
+  Params,
+  Statements,
+  Skip,
+}
+
+function createExp(
+  content: SimpleExpressionNode['content'],
+  isStatic: SimpleExpressionNode['isStatic'] = false,
+  loc: SourceLocation,
+  constType: ConstantTypes = ConstantTypes.NOT_CONSTANT,
+  parseMode = ExpParseMode.Normal,
+) {
+  const exp = createSimpleExpression(content, isStatic, loc, constType)
+  if (
+    !__BROWSER__ &&
+    !isStatic &&
+    currentOptions.prefixIdentifiers &&
+    parseMode !== ExpParseMode.Skip &&
+    content.trim()
+  ) {
+    if (isSimpleIdentifier(content)) {
+      exp.ast = null // fast path
+      return exp
+    }
+    try {
+      const plugins = currentOptions.expressionPlugins
+      const options: BabelOptions = {
+        plugins: plugins ? [...plugins, 'typescript'] : ['typescript'],
+      }
+      if (parseMode === ExpParseMode.Statements) {
+        // v-on with multi-inline-statements, pad 1 char
+        exp.ast = parse(` ${content} `, options).program
+      } else if (parseMode === ExpParseMode.Params) {
+        exp.ast = parseExpression(`(${content})=>{}`, options)
+      } else {
+        // normal exp, wrap with parens
+        exp.ast = parseExpression(`(${content})`, options)
+      }
+    } catch (e: any) {
+      exp.ast = false // indicate an error
+      emitError(ErrorCodes.X_INVALID_EXPRESSION, loc.start.offset, e.message)
+    }
+  }
+  return exp
+}
+
+function emitError(code: ErrorCodes, index: number, message?: string) {
+  currentOptions.onError(
+    createCompilerError(code, getLoc(index, index), undefined, message),
+  )
+}
+
+function reset() {
+  tokenizer.reset()
+  currentOpenTag = null
+  currentProp = null
+  currentAttrValue = ''
+  currentAttrStartIndex = -1
+  currentAttrEndIndex = -1
+  stack.length = 0
+}
+
+export function baseParse(input: string, options?: ParserOptions): RootNode {
+  reset()
+  currentInput = input
+  currentOptions = extend({}, defaultParserOptions)
+
+  if (options) {
+    let key: keyof ParserOptions
+    for (key in options) {
+      if (options[key] != null) {
+        // @ts-expect-error
+        currentOptions[key] = options[key]
+      }
+    }
+  }
+
+  if (__DEV__) {
+    if (!__BROWSER__ && currentOptions.decodeEntities) {
+      console.warn(
+        `[@vue/compiler-core] decodeEntities option is passed but will be ` +
+          `ignored in non-browser builds.`,
+      )
+    } else if (__BROWSER__ && !currentOptions.decodeEntities) {
+      throw new Error(
+        `[@vue/compiler-core] decodeEntities option is required in browser builds.`,
+      )
+    }
+  }
+
+  tokenizer.mode =
+    currentOptions.parseMode === 'html'
+      ? ParseMode.HTML
+      : currentOptions.parseMode === 'sfc'
+        ? ParseMode.SFC
+        : ParseMode.BASE
+
+  tokenizer.inXML =
+    currentOptions.ns === Namespaces.SVG ||
+    currentOptions.ns === Namespaces.MATH_ML
+
+  const delimiters = options && options.delimiters
+  if (delimiters) {
+    tokenizer.delimiterOpen = toCharCodes(delimiters[0])
+    tokenizer.delimiterClose = toCharCodes(delimiters[1])
+  }
+
+  const root = (currentRoot = createRoot([], input))
+  tokenizer.parse(currentInput)
+  root.loc = getLoc(0, input.length)
+  root.children = condenseWhitespace(root.children)
+  currentRoot = null
+  return root
+}
diff --git a/packages/compiler-core/src/runtimeHelpers.ts b/packages/compiler-core/src/runtimeHelpers.ts
index 3f5ef0247..7cf3757b2 100644
--- a/packages/compiler-core/src/runtimeHelpers.ts
+++ b/packages/compiler-core/src/runtimeHelpers.ts
@@ -1,44 +1,85 @@
-export const FRAGMENT = Symbol(__DEV__ ? `Fragment` : ``)
-export const TELEPORT = Symbol(__DEV__ ? `Teleport` : ``)
-export const SUSPENSE = Symbol(__DEV__ ? `Suspense` : ``)
-export const KEEP_ALIVE = Symbol(__DEV__ ? `KeepAlive` : ``)
-export const BASE_TRANSITION = Symbol(__DEV__ ? `BaseTransition` : ``)
-export const OPEN_BLOCK = Symbol(__DEV__ ? `openBlock` : ``)
-export const CREATE_BLOCK = Symbol(__DEV__ ? `createBlock` : ``)
-export const CREATE_ELEMENT_BLOCK = Symbol(__DEV__ ? `createElementBlock` : ``)
-export const CREATE_VNODE = Symbol(__DEV__ ? `createVNode` : ``)
-export const CREATE_ELEMENT_VNODE = Symbol(__DEV__ ? `createElementVNode` : ``)
-export const CREATE_COMMENT = Symbol(__DEV__ ? `createCommentVNode` : ``)
-export const CREATE_TEXT = Symbol(__DEV__ ? `createTextVNode` : ``)
-export const CREATE_STATIC = Symbol(__DEV__ ? `createStaticVNode` : ``)
-export const RESOLVE_COMPONENT = Symbol(__DEV__ ? `resolveComponent` : ``)
-export const RESOLVE_DYNAMIC_COMPONENT = Symbol(
-  __DEV__ ? `resolveDynamicComponent` : ``
+export const FRAGMENT: unique symbol = Symbol(__DEV__ ? `Fragment` : ``)
+export const TELEPORT: unique symbol = Symbol(__DEV__ ? `Teleport` : ``)
+export const SUSPENSE: unique symbol = Symbol(__DEV__ ? `Suspense` : ``)
+export const KEEP_ALIVE: unique symbol = Symbol(__DEV__ ? `KeepAlive` : ``)
+export const BASE_TRANSITION: unique symbol = Symbol(
+  __DEV__ ? `BaseTransition` : ``,
 )
-export const RESOLVE_DIRECTIVE = Symbol(__DEV__ ? `resolveDirective` : ``)
-export const RESOLVE_FILTER = Symbol(__DEV__ ? `resolveFilter` : ``)
-export const WITH_DIRECTIVES = Symbol(__DEV__ ? `withDirectives` : ``)
-export const RENDER_LIST = Symbol(__DEV__ ? `renderList` : ``)
-export const RENDER_SLOT = Symbol(__DEV__ ? `renderSlot` : ``)
-export const CREATE_SLOTS = Symbol(__DEV__ ? `createSlots` : ``)
-export const TO_DISPLAY_STRING = Symbol(__DEV__ ? `toDisplayString` : ``)
-export const MERGE_PROPS = Symbol(__DEV__ ? `mergeProps` : ``)
-export const NORMALIZE_CLASS = Symbol(__DEV__ ? `normalizeClass` : ``)
-export const NORMALIZE_STYLE = Symbol(__DEV__ ? `normalizeStyle` : ``)
-export const NORMALIZE_PROPS = Symbol(__DEV__ ? `normalizeProps` : ``)
-export const GUARD_REACTIVE_PROPS = Symbol(__DEV__ ? `guardReactiveProps` : ``)
-export const TO_HANDLERS = Symbol(__DEV__ ? `toHandlers` : ``)
-export const CAMELIZE = Symbol(__DEV__ ? `camelize` : ``)
-export const CAPITALIZE = Symbol(__DEV__ ? `capitalize` : ``)
-export const TO_HANDLER_KEY = Symbol(__DEV__ ? `toHandlerKey` : ``)
-export const SET_BLOCK_TRACKING = Symbol(__DEV__ ? `setBlockTracking` : ``)
-export const PUSH_SCOPE_ID = Symbol(__DEV__ ? `pushScopeId` : ``)
-export const POP_SCOPE_ID = Symbol(__DEV__ ? `popScopeId` : ``)
-export const WITH_CTX = Symbol(__DEV__ ? `withCtx` : ``)
-export const UNREF = Symbol(__DEV__ ? `unref` : ``)
-export const IS_REF = Symbol(__DEV__ ? `isRef` : ``)
-export const WITH_MEMO = Symbol(__DEV__ ? `withMemo` : ``)
-export const IS_MEMO_SAME = Symbol(__DEV__ ? `isMemoSame` : ``)
+export const OPEN_BLOCK: unique symbol = Symbol(__DEV__ ? `openBlock` : ``)
+export const CREATE_BLOCK: unique symbol = Symbol(__DEV__ ? `createBlock` : ``)
+export const CREATE_ELEMENT_BLOCK: unique symbol = Symbol(
+  __DEV__ ? `createElementBlock` : ``,
+)
+export const CREATE_VNODE: unique symbol = Symbol(__DEV__ ? `createVNode` : ``)
+export const CREATE_ELEMENT_VNODE: unique symbol = Symbol(
+  __DEV__ ? `createElementVNode` : ``,
+)
+export const CREATE_COMMENT: unique symbol = Symbol(
+  __DEV__ ? `createCommentVNode` : ``,
+)
+export const CREATE_TEXT: unique symbol = Symbol(
+  __DEV__ ? `createTextVNode` : ``,
+)
+export const CREATE_STATIC: unique symbol = Symbol(
+  __DEV__ ? `createStaticVNode` : ``,
+)
+export const RESOLVE_COMPONENT: unique symbol = Symbol(
+  __DEV__ ? `resolveComponent` : ``,
+)
+export const RESOLVE_DYNAMIC_COMPONENT: unique symbol = Symbol(
+  __DEV__ ? `resolveDynamicComponent` : ``,
+)
+export const RESOLVE_DIRECTIVE: unique symbol = Symbol(
+  __DEV__ ? `resolveDirective` : ``,
+)
+export const RESOLVE_FILTER: unique symbol = Symbol(
+  __DEV__ ? `resolveFilter` : ``,
+)
+export const WITH_DIRECTIVES: unique symbol = Symbol(
+  __DEV__ ? `withDirectives` : ``,
+)
+export const RENDER_LIST: unique symbol = Symbol(__DEV__ ? `renderList` : ``)
+export const RENDER_SLOT: unique symbol = Symbol(__DEV__ ? `renderSlot` : ``)
+export const CREATE_SLOTS: unique symbol = Symbol(__DEV__ ? `createSlots` : ``)
+export const TO_DISPLAY_STRING: unique symbol = Symbol(
+  __DEV__ ? `toDisplayString` : ``,
+)
+export const MERGE_PROPS: unique symbol = Symbol(__DEV__ ? `mergeProps` : ``)
+export const NORMALIZE_CLASS: unique symbol = Symbol(
+  __DEV__ ? `normalizeClass` : ``,
+)
+export const NORMALIZE_STYLE: unique symbol = Symbol(
+  __DEV__ ? `normalizeStyle` : ``,
+)
+export const NORMALIZE_PROPS: unique symbol = Symbol(
+  __DEV__ ? `normalizeProps` : ``,
+)
+export const GUARD_REACTIVE_PROPS: unique symbol = Symbol(
+  __DEV__ ? `guardReactiveProps` : ``,
+)
+export const TO_HANDLERS: unique symbol = Symbol(__DEV__ ? `toHandlers` : ``)
+export const CAMELIZE: unique symbol = Symbol(__DEV__ ? `camelize` : ``)
+export const CAPITALIZE: unique symbol = Symbol(__DEV__ ? `capitalize` : ``)
+export const TO_HANDLER_KEY: unique symbol = Symbol(
+  __DEV__ ? `toHandlerKey` : ``,
+)
+export const SET_BLOCK_TRACKING: unique symbol = Symbol(
+  __DEV__ ? `setBlockTracking` : ``,
+)
+/**
+ * @deprecated no longer needed in 3.5+ because we no longer hoist element nodes
+ * but kept for backwards compat
+ */
+export const PUSH_SCOPE_ID: unique symbol = Symbol(__DEV__ ? `pushScopeId` : ``)
+/**
+ * @deprecated kept for backwards compat
+ */
+export const POP_SCOPE_ID: unique symbol = Symbol(__DEV__ ? `popScopeId` : ``)
+export const WITH_CTX: unique symbol = Symbol(__DEV__ ? `withCtx` : ``)
+export const UNREF: unique symbol = Symbol(__DEV__ ? `unref` : ``)
+export const IS_REF: unique symbol = Symbol(__DEV__ ? `isRef` : ``)
+export const WITH_MEMO: unique symbol = Symbol(__DEV__ ? `withMemo` : ``)
+export const IS_MEMO_SAME: unique symbol = Symbol(__DEV__ ? `isMemoSame` : ``)
 
 // Name mapping for runtime helpers that need to be imported from 'vue' in
 // generated code. Make sure these are correctly exported in the runtime!
@@ -81,10 +122,10 @@ export const helperNameMap: Record<symbol, string> = {
   [UNREF]: `unref`,
   [IS_REF]: `isRef`,
   [WITH_MEMO]: `withMemo`,
-  [IS_MEMO_SAME]: `isMemoSame`
+  [IS_MEMO_SAME]: `isMemoSame`,
 }
 
-export function registerRuntimeHelpers(helpers: Record<symbol, string>) {
+export function registerRuntimeHelpers(helpers: Record<symbol, string>): void {
   Object.getOwnPropertySymbols(helpers).forEach(s => {
     helperNameMap[s] = helpers[s]
   })
diff --git a/packages/compiler-core/src/tokenizer.ts b/packages/compiler-core/src/tokenizer.ts
new file mode 100644
index 000000000..329e8b481
--- /dev/null
+++ b/packages/compiler-core/src/tokenizer.ts
@@ -0,0 +1,1181 @@
+/**
+ * This Tokenizer is adapted from htmlparser2 under the MIT License listed at
+ * https://github.com/fb55/htmlparser2/blob/master/LICENSE
+
+Copyright 2010, 2011, Chris Winberry <chris@winberry.net>. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+ */
+
+import { ErrorCodes } from './errors'
+import type { ElementNode, Position } from './ast'
+
+/**
+ * Note: entities is a non-browser-build-only dependency.
+ * In the browser, we use an HTML element to do the decoding.
+ * Make sure all imports from entities are only used in non-browser branches
+ * so that it can be properly treeshaken.
+ */
+import {
+  DecodingMode,
+  EntityDecoder,
+  fromCodePoint,
+  htmlDecodeTree,
+} from 'entities/lib/decode.js'
+
+export enum ParseMode {
+  BASE,
+  HTML,
+  SFC,
+}
+
+export enum CharCodes {
+  Tab = 0x9, // "\t"
+  NewLine = 0xa, // "\n"
+  FormFeed = 0xc, // "\f"
+  CarriageReturn = 0xd, // "\r"
+  Space = 0x20, // " "
+  ExclamationMark = 0x21, // "!"
+  Number = 0x23, // "#"
+  Amp = 0x26, // "&"
+  SingleQuote = 0x27, // "'"
+  DoubleQuote = 0x22, // '"'
+  GraveAccent = 96, // "`"
+  Dash = 0x2d, // "-"
+  Slash = 0x2f, // "/"
+  Zero = 0x30, // "0"
+  Nine = 0x39, // "9"
+  Semi = 0x3b, // ";"
+  Lt = 0x3c, // "<"
+  Eq = 0x3d, // "="
+  Gt = 0x3e, // ">"
+  Questionmark = 0x3f, // "?"
+  UpperA = 0x41, // "A"
+  LowerA = 0x61, // "a"
+  UpperF = 0x46, // "F"
+  LowerF = 0x66, // "f"
+  UpperZ = 0x5a, // "Z"
+  LowerZ = 0x7a, // "z"
+  LowerX = 0x78, // "x"
+  LowerV = 0x76, // "v"
+  Dot = 0x2e, // "."
+  Colon = 0x3a, // ":"
+  At = 0x40, // "@"
+  LeftSquare = 91, // "["
+  RightSquare = 93, // "]"
+}
+
+const defaultDelimitersOpen = new Uint8Array([123, 123]) // "{{"
+const defaultDelimitersClose = new Uint8Array([125, 125]) // "}}"
+
+/** All the states the tokenizer can be in. */
+export enum State {
+  Text = 1,
+
+  // interpolation
+  InterpolationOpen,
+  Interpolation,
+  InterpolationClose,
+
+  // Tags
+  BeforeTagName, // After <
+  InTagName,
+  InSelfClosingTag,
+  BeforeClosingTagName,
+  InClosingTagName,
+  AfterClosingTagName,
+
+  // Attrs
+  BeforeAttrName,
+  InAttrName,
+  InDirName,
+  InDirArg,
+  InDirDynamicArg,
+  InDirModifier,
+  AfterAttrName,
+  BeforeAttrValue,
+  InAttrValueDq, // "
+  InAttrValueSq, // '
+  InAttrValueNq,
+
+  // Declarations
+  BeforeDeclaration, // !
+  InDeclaration,
+
+  // Processing instructions
+  InProcessingInstruction, // ?
+
+  // Comments & CDATA
+  BeforeComment,
+  CDATASequence,
+  InSpecialComment,
+  InCommentLike,
+
+  // Special tags
+  BeforeSpecialS, // Decide if we deal with `<script` or `<style`
+  BeforeSpecialT, // Decide if we deal with `<title` or `<textarea`
+  SpecialStartSequence,
+  InRCDATA,
+
+  InEntity,
+
+  InSFCRootTagName,
+}
+
+/**
+ * HTML only allows ASCII alpha characters (a-z and A-Z) at the beginning of a
+ * tag name.
+ */
+function isTagStartChar(c: number): boolean {
+  return (
+    (c >= CharCodes.LowerA && c <= CharCodes.LowerZ) ||
+    (c >= CharCodes.UpperA && c <= CharCodes.UpperZ)
+  )
+}
+
+export function isWhitespace(c: number): boolean {
+  return (
+    c === CharCodes.Space ||
+    c === CharCodes.NewLine ||
+    c === CharCodes.Tab ||
+    c === CharCodes.FormFeed ||
+    c === CharCodes.CarriageReturn
+  )
+}
+
+function isEndOfTagSection(c: number): boolean {
+  return c === CharCodes.Slash || c === CharCodes.Gt || isWhitespace(c)
+}
+
+export function toCharCodes(str: string): Uint8Array {
+  const ret = new Uint8Array(str.length)
+  for (let i = 0; i < str.length; i++) {
+    ret[i] = str.charCodeAt(i)
+  }
+  return ret
+}
+
+export enum QuoteType {
+  NoValue = 0,
+  Unquoted = 1,
+  Single = 2,
+  Double = 3,
+}
+
+export interface Callbacks {
+  ontext(start: number, endIndex: number): void
+  ontextentity(char: string, start: number, endIndex: number): void
+
+  oninterpolation(start: number, endIndex: number): void
+
+  onopentagname(start: number, endIndex: number): void
+  onopentagend(endIndex: number): void
+  onselfclosingtag(endIndex: number): void
+  onclosetag(start: number, endIndex: number): void
+
+  onattribdata(start: number, endIndex: number): void
+  onattribentity(char: string, start: number, end: number): void
+  onattribend(quote: QuoteType, endIndex: number): void
+  onattribname(start: number, endIndex: number): void
+  onattribnameend(endIndex: number): void
+
+  ondirname(start: number, endIndex: number): void
+  ondirarg(start: number, endIndex: number): void
+  ondirmodifier(start: number, endIndex: number): void
+
+  oncomment(start: number, endIndex: number): void
+  oncdata(start: number, endIndex: number): void
+
+  onprocessinginstruction(start: number, endIndex: number): void
+  // ondeclaration(start: number, endIndex: number): void
+  onend(): void
+  onerr(code: ErrorCodes, index: number): void
+}
+
+/**
+ * Sequences used to match longer strings.
+ *
+ * We don't have `Script`, `Style`, or `Title` here. Instead, we re-use the *End
+ * sequences with an increased offset.
+ */
+export const Sequences: {
+  Cdata: Uint8Array
+  CdataEnd: Uint8Array
+  CommentEnd: Uint8Array
+  ScriptEnd: Uint8Array
+  StyleEnd: Uint8Array
+  TitleEnd: Uint8Array
+  TextareaEnd: Uint8Array
+} = {
+  Cdata: new Uint8Array([0x43, 0x44, 0x41, 0x54, 0x41, 0x5b]), // CDATA[
+  CdataEnd: new Uint8Array([0x5d, 0x5d, 0x3e]), // ]]>
+  CommentEnd: new Uint8Array([0x2d, 0x2d, 0x3e]), // `-->`
+  ScriptEnd: new Uint8Array([0x3c, 0x2f, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74]), // `</script`
+  StyleEnd: new Uint8Array([0x3c, 0x2f, 0x73, 0x74, 0x79, 0x6c, 0x65]), // `</style`
+  TitleEnd: new Uint8Array([0x3c, 0x2f, 0x74, 0x69, 0x74, 0x6c, 0x65]), // `</title`
+  TextareaEnd: new Uint8Array([
+    0x3c, 0x2f, 116, 101, 120, 116, 97, 114, 101, 97,
+  ]), // `</textarea
+}
+
+export default class Tokenizer {
+  /** The current state the tokenizer is in. */
+  public state: State = State.Text
+  /** The read buffer. */
+  private buffer = ''
+  /** The beginning of the section that is currently being read. */
+  public sectionStart = 0
+  /** The index within the buffer that we are currently looking at. */
+  private index = 0
+  /** The start of the last entity. */
+  private entityStart = 0
+  /** Some behavior, eg. when decoding entities, is done while we are in another state. This keeps track of the other state type. */
+  private baseState = State.Text
+  /** For special parsing behavior inside of script and style tags. */
+  public inRCDATA = false
+  /** For disabling RCDATA tags handling */
+  public inXML = false
+  /** For disabling interpolation parsing in v-pre */
+  public inVPre = false
+  /** Record newline positions for fast line / column calculation */
+  private newlines: number[] = []
+
+  private readonly entityDecoder?: EntityDecoder
+
+  public mode: ParseMode = ParseMode.BASE
+  public get inSFCRoot(): boolean {
+    return this.mode === ParseMode.SFC && this.stack.length === 0
+  }
+
+  constructor(
+    private readonly stack: ElementNode[],
+    private readonly cbs: Callbacks,
+  ) {
+    if (!__BROWSER__) {
+      this.entityDecoder = new EntityDecoder(htmlDecodeTree, (cp, consumed) =>
+        this.emitCodePoint(cp, consumed),
+      )
+    }
+  }
+
+  public reset(): void {
+    this.state = State.Text
+    this.mode = ParseMode.BASE
+    this.buffer = ''
+    this.sectionStart = 0
+    this.index = 0
+    this.baseState = State.Text
+    this.inRCDATA = false
+    this.currentSequence = undefined!
+    this.newlines.length = 0
+    this.delimiterOpen = defaultDelimitersOpen
+    this.delimiterClose = defaultDelimitersClose
+  }
+
+  /**
+   * Generate Position object with line / column information using recorded
+   * newline positions. We know the index is always going to be an already
+   * processed index, so all the newlines up to this index should have been
+   * recorded.
+   */
+  public getPos(index: number): Position {
+    let line = 1
+    let column = index + 1
+    for (let i = this.newlines.length - 1; i >= 0; i--) {
+      const newlineIndex = this.newlines[i]
+      if (index > newlineIndex) {
+        line = i + 2
+        column = index - newlineIndex
+        break
+      }
+    }
+    return {
+      column,
+      line,
+      offset: index,
+    }
+  }
+
+  private peek() {
+    return this.buffer.charCodeAt(this.index + 1)
+  }
+
+  private stateText(c: number): void {
+    if (c === CharCodes.Lt) {
+      if (this.index > this.sectionStart) {
+        this.cbs.ontext(this.sectionStart, this.index)
+      }
+      this.state = State.BeforeTagName
+      this.sectionStart = this.index
+    } else if (!__BROWSER__ && c === CharCodes.Amp) {
+      this.startEntity()
+    } else if (!this.inVPre && c === this.delimiterOpen[0]) {
+      this.state = State.InterpolationOpen
+      this.delimiterIndex = 0
+      this.stateInterpolationOpen(c)
+    }
+  }
+
+  public delimiterOpen: Uint8Array = defaultDelimitersOpen
+  public delimiterClose: Uint8Array = defaultDelimitersClose
+  private delimiterIndex = -1
+
+  private stateInterpolationOpen(c: number): void {
+    if (c === this.delimiterOpen[this.delimiterIndex]) {
+      if (this.delimiterIndex === this.delimiterOpen.length - 1) {
+        const start = this.index + 1 - this.delimiterOpen.length
+        if (start > this.sectionStart) {
+          this.cbs.ontext(this.sectionStart, start)
+        }
+        this.state = State.Interpolation
+        this.sectionStart = start
+      } else {
+        this.delimiterIndex++
+      }
+    } else if (this.inRCDATA) {
+      this.state = State.InRCDATA
+      this.stateInRCDATA(c)
+    } else {
+      this.state = State.Text
+      this.stateText(c)
+    }
+  }
+
+  private stateInterpolation(c: number): void {
+    if (c === this.delimiterClose[0]) {
+      this.state = State.InterpolationClose
+      this.delimiterIndex = 0
+      this.stateInterpolationClose(c)
+    }
+  }
+
+  private stateInterpolationClose(c: number) {
+    if (c === this.delimiterClose[this.delimiterIndex]) {
+      if (this.delimiterIndex === this.delimiterClose.length - 1) {
+        this.cbs.oninterpolation(this.sectionStart, this.index + 1)
+        if (this.inRCDATA) {
+          this.state = State.InRCDATA
+        } else {
+          this.state = State.Text
+        }
+        this.sectionStart = this.index + 1
+      } else {
+        this.delimiterIndex++
+      }
+    } else {
+      this.state = State.Interpolation
+      this.stateInterpolation(c)
+    }
+  }
+
+  public currentSequence: Uint8Array = undefined!
+  private sequenceIndex = 0
+  private stateSpecialStartSequence(c: number): void {
+    const isEnd = this.sequenceIndex === this.currentSequence.length
+    const isMatch = isEnd
+      ? // If we are at the end of the sequence, make sure the tag name has ended
+        isEndOfTagSection(c)
+      : // Otherwise, do a case-insensitive comparison
+        (c | 0x20) === this.currentSequence[this.sequenceIndex]
+
+    if (!isMatch) {
+      this.inRCDATA = false
+    } else if (!isEnd) {
+      this.sequenceIndex++
+      return
+    }
+
+    this.sequenceIndex = 0
+    this.state = State.InTagName
+    this.stateInTagName(c)
+  }
+
+  /** Look for an end tag. For <title> and <textarea>, also decode entities. */
+  private stateInRCDATA(c: number): void {
+    if (this.sequenceIndex === this.currentSequence.length) {
+      if (c === CharCodes.Gt || isWhitespace(c)) {
+        const endOfText = this.index - this.currentSequence.length
+
+        if (this.sectionStart < endOfText) {
+          // Spoof the index so that reported locations match up.
+          const actualIndex = this.index
+          this.index = endOfText
+          this.cbs.ontext(this.sectionStart, endOfText)
+          this.index = actualIndex
+        }
+
+        this.sectionStart = endOfText + 2 // Skip over the `</`
+        this.stateInClosingTagName(c)
+        this.inRCDATA = false
+        return // We are done; skip the rest of the function.
+      }
+
+      this.sequenceIndex = 0
+    }
+
+    if ((c | 0x20) === this.currentSequence[this.sequenceIndex]) {
+      this.sequenceIndex += 1
+    } else if (this.sequenceIndex === 0) {
+      if (
+        this.currentSequence === Sequences.TitleEnd ||
+        (this.currentSequence === Sequences.TextareaEnd && !this.inSFCRoot)
+      ) {
+        // We have to parse entities in <title> and <textarea> tags.
+        if (!__BROWSER__ && c === CharCodes.Amp) {
+          this.startEntity()
+        } else if (!this.inVPre && c === this.delimiterOpen[0]) {
+          // We also need to handle interpolation
+          this.state = State.InterpolationOpen
+          this.delimiterIndex = 0
+          this.stateInterpolationOpen(c)
+        }
+      } else if (this.fastForwardTo(CharCodes.Lt)) {
+        // Outside of <title> and <textarea> tags, we can fast-forward.
+        this.sequenceIndex = 1
+      }
+    } else {
+      // If we see a `<`, set the sequence index to 1; useful for eg. `<</script>`.
+      this.sequenceIndex = Number(c === CharCodes.Lt)
+    }
+  }
+
+  private stateCDATASequence(c: number): void {
+    if (c === Sequences.Cdata[this.sequenceIndex]) {
+      if (++this.sequenceIndex === Sequences.Cdata.length) {
+        this.state = State.InCommentLike
+        this.currentSequence = Sequences.CdataEnd
+        this.sequenceIndex = 0
+        this.sectionStart = this.index + 1
+      }
+    } else {
+      this.sequenceIndex = 0
+      this.state = State.InDeclaration
+      this.stateInDeclaration(c) // Reconsume the character
+    }
+  }
+
+  /**
+   * When we wait for one specific character, we can speed things up
+   * by skipping through the buffer until we find it.
+   *
+   * @returns Whether the character was found.
+   */
+  private fastForwardTo(c: number): boolean {
+    while (++this.index < this.buffer.length) {
+      const cc = this.buffer.charCodeAt(this.index)
+      if (cc === CharCodes.NewLine) {
+        this.newlines.push(this.index)
+      }
+      if (cc === c) {
+        return true
+      }
+    }
+
+    /*
+     * We increment the index at the end of the `parse` loop,
+     * so set it to `buffer.length - 1` here.
+     *
+     * TODO: Refactor `parse` to increment index before calling states.
+     */
+    this.index = this.buffer.length - 1
+
+    return false
+  }
+
+  /**
+   * Comments and CDATA end with `-->` and `]]>`.
+   *
+   * Their common qualities are:
+   * - Their end sequences have a distinct character they start with.
+   * - That character is then repeated, so we have to check multiple repeats.
+   * - All characters but the start character of the sequence can be skipped.
+   */
+  private stateInCommentLike(c: number): void {
+    if (c === this.currentSequence[this.sequenceIndex]) {
+      if (++this.sequenceIndex === this.currentSequence.length) {
+        if (this.currentSequence === Sequences.CdataEnd) {
+          this.cbs.oncdata(this.sectionStart, this.index - 2)
+        } else {
+          this.cbs.oncomment(this.sectionStart, this.index - 2)
+        }
+
+        this.sequenceIndex = 0
+        this.sectionStart = this.index + 1
+        this.state = State.Text
+      }
+    } else if (this.sequenceIndex === 0) {
+      // Fast-forward to the first character of the sequence
+      if (this.fastForwardTo(this.currentSequence[0])) {
+        this.sequenceIndex = 1
+      }
+    } else if (c !== this.currentSequence[this.sequenceIndex - 1]) {
+      // Allow long sequences, eg. --->, ]]]>
+      this.sequenceIndex = 0
+    }
+  }
+
+  private startSpecial(sequence: Uint8Array, offset: number) {
+    this.enterRCDATA(sequence, offset)
+    this.state = State.SpecialStartSequence
+  }
+
+  public enterRCDATA(sequence: Uint8Array, offset: number): void {
+    this.inRCDATA = true
+    this.currentSequence = sequence
+    this.sequenceIndex = offset
+  }
+
+  private stateBeforeTagName(c: number): void {
+    if (c === CharCodes.ExclamationMark) {
+      this.state = State.BeforeDeclaration
+      this.sectionStart = this.index + 1
+    } else if (c === CharCodes.Questionmark) {
+      this.state = State.InProcessingInstruction
+      this.sectionStart = this.index + 1
+    } else if (isTagStartChar(c)) {
+      this.sectionStart = this.index
+      if (this.mode === ParseMode.BASE) {
+        // no special tags in base mode
+        this.state = State.InTagName
+      } else if (this.inSFCRoot) {
+        // SFC mode + root level
+        // - everything except <template> is RAWTEXT
+        // - <template> with lang other than html is also RAWTEXT
+        this.state = State.InSFCRootTagName
+      } else if (!this.inXML) {
+        // HTML mode
+        // - <script>, <style> RAWTEXT
+        // - <title>, <textarea> RCDATA
+        if (c === 116 /* t */) {
+          this.state = State.BeforeSpecialT
+        } else {
+          this.state =
+            c === 115 /* s */ ? State.BeforeSpecialS : State.InTagName
+        }
+      } else {
+        this.state = State.InTagName
+      }
+    } else if (c === CharCodes.Slash) {
+      this.state = State.BeforeClosingTagName
+    } else {
+      this.state = State.Text
+      this.stateText(c)
+    }
+  }
+  private stateInTagName(c: number): void {
+    if (isEndOfTagSection(c)) {
+      this.handleTagName(c)
+    }
+  }
+  private stateInSFCRootTagName(c: number): void {
+    if (isEndOfTagSection(c)) {
+      const tag = this.buffer.slice(this.sectionStart, this.index)
+      if (tag !== 'template') {
+        this.enterRCDATA(toCharCodes(`</` + tag), 0)
+      }
+      this.handleTagName(c)
+    }
+  }
+  private handleTagName(c: number) {
+    this.cbs.onopentagname(this.sectionStart, this.index)
+    this.sectionStart = -1
+    this.state = State.BeforeAttrName
+    this.stateBeforeAttrName(c)
+  }
+  private stateBeforeClosingTagName(c: number): void {
+    if (isWhitespace(c)) {
+      // Ignore
+    } else if (c === CharCodes.Gt) {
+      if (__DEV__ || !__BROWSER__) {
+        this.cbs.onerr(ErrorCodes.MISSING_END_TAG_NAME, this.index)
+      }
+      this.state = State.Text
+      // Ignore
+      this.sectionStart = this.index + 1
+    } else {
+      this.state = isTagStartChar(c)
+        ? State.InClosingTagName
+        : State.InSpecialComment
+      this.sectionStart = this.index
+    }
+  }
+  private stateInClosingTagName(c: number): void {
+    if (c === CharCodes.Gt || isWhitespace(c)) {
+      this.cbs.onclosetag(this.sectionStart, this.index)
+      this.sectionStart = -1
+      this.state = State.AfterClosingTagName
+      this.stateAfterClosingTagName(c)
+    }
+  }
+  private stateAfterClosingTagName(c: number): void {
+    // Skip everything until ">"
+    if (c === CharCodes.Gt) {
+      this.state = State.Text
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateBeforeAttrName(c: number): void {
+    if (c === CharCodes.Gt) {
+      this.cbs.onopentagend(this.index)
+      if (this.inRCDATA) {
+        this.state = State.InRCDATA
+      } else {
+        this.state = State.Text
+      }
+      this.sectionStart = this.index + 1
+    } else if (c === CharCodes.Slash) {
+      this.state = State.InSelfClosingTag
+      if ((__DEV__ || !__BROWSER__) && this.peek() !== CharCodes.Gt) {
+        this.cbs.onerr(ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG, this.index)
+      }
+    } else if (c === CharCodes.Lt && this.peek() === CharCodes.Slash) {
+      // special handling for </ appearing in open tag state
+      // this is different from standard HTML parsing but makes practical sense
+      // especially for parsing intermediate input state in IDEs.
+      this.cbs.onopentagend(this.index)
+      this.state = State.BeforeTagName
+      this.sectionStart = this.index
+    } else if (!isWhitespace(c)) {
+      if ((__DEV__ || !__BROWSER__) && c === CharCodes.Eq) {
+        this.cbs.onerr(
+          ErrorCodes.UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME,
+          this.index,
+        )
+      }
+      this.handleAttrStart(c)
+    }
+  }
+  private handleAttrStart(c: number) {
+    if (c === CharCodes.LowerV && this.peek() === CharCodes.Dash) {
+      this.state = State.InDirName
+      this.sectionStart = this.index
+    } else if (
+      c === CharCodes.Dot ||
+      c === CharCodes.Colon ||
+      c === CharCodes.At ||
+      c === CharCodes.Number
+    ) {
+      this.cbs.ondirname(this.index, this.index + 1)
+      this.state = State.InDirArg
+      this.sectionStart = this.index + 1
+    } else {
+      this.state = State.InAttrName
+      this.sectionStart = this.index
+    }
+  }
+  private stateInSelfClosingTag(c: number): void {
+    if (c === CharCodes.Gt) {
+      this.cbs.onselfclosingtag(this.index)
+      this.state = State.Text
+      this.sectionStart = this.index + 1
+      this.inRCDATA = false // Reset special state, in case of self-closing special tags
+    } else if (!isWhitespace(c)) {
+      this.state = State.BeforeAttrName
+      this.stateBeforeAttrName(c)
+    }
+  }
+  private stateInAttrName(c: number): void {
+    if (c === CharCodes.Eq || isEndOfTagSection(c)) {
+      this.cbs.onattribname(this.sectionStart, this.index)
+      this.handleAttrNameEnd(c)
+    } else if (
+      (__DEV__ || !__BROWSER__) &&
+      (c === CharCodes.DoubleQuote ||
+        c === CharCodes.SingleQuote ||
+        c === CharCodes.Lt)
+    ) {
+      this.cbs.onerr(
+        ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
+        this.index,
+      )
+    }
+  }
+  private stateInDirName(c: number): void {
+    if (c === CharCodes.Eq || isEndOfTagSection(c)) {
+      this.cbs.ondirname(this.sectionStart, this.index)
+      this.handleAttrNameEnd(c)
+    } else if (c === CharCodes.Colon) {
+      this.cbs.ondirname(this.sectionStart, this.index)
+      this.state = State.InDirArg
+      this.sectionStart = this.index + 1
+    } else if (c === CharCodes.Dot) {
+      this.cbs.ondirname(this.sectionStart, this.index)
+      this.state = State.InDirModifier
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateInDirArg(c: number): void {
+    if (c === CharCodes.Eq || isEndOfTagSection(c)) {
+      this.cbs.ondirarg(this.sectionStart, this.index)
+      this.handleAttrNameEnd(c)
+    } else if (c === CharCodes.LeftSquare) {
+      this.state = State.InDirDynamicArg
+    } else if (c === CharCodes.Dot) {
+      this.cbs.ondirarg(this.sectionStart, this.index)
+      this.state = State.InDirModifier
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateInDynamicDirArg(c: number): void {
+    if (c === CharCodes.RightSquare) {
+      this.state = State.InDirArg
+    } else if (c === CharCodes.Eq || isEndOfTagSection(c)) {
+      this.cbs.ondirarg(this.sectionStart, this.index + 1)
+      this.handleAttrNameEnd(c)
+      if (__DEV__ || !__BROWSER__) {
+        this.cbs.onerr(
+          ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END,
+          this.index,
+        )
+      }
+    }
+  }
+  private stateInDirModifier(c: number): void {
+    if (c === CharCodes.Eq || isEndOfTagSection(c)) {
+      this.cbs.ondirmodifier(this.sectionStart, this.index)
+      this.handleAttrNameEnd(c)
+    } else if (c === CharCodes.Dot) {
+      this.cbs.ondirmodifier(this.sectionStart, this.index)
+      this.sectionStart = this.index + 1
+    }
+  }
+  private handleAttrNameEnd(c: number): void {
+    this.sectionStart = this.index
+    this.state = State.AfterAttrName
+    this.cbs.onattribnameend(this.index)
+    this.stateAfterAttrName(c)
+  }
+  private stateAfterAttrName(c: number): void {
+    if (c === CharCodes.Eq) {
+      this.state = State.BeforeAttrValue
+    } else if (c === CharCodes.Slash || c === CharCodes.Gt) {
+      this.cbs.onattribend(QuoteType.NoValue, this.sectionStart)
+      this.sectionStart = -1
+      this.state = State.BeforeAttrName
+      this.stateBeforeAttrName(c)
+    } else if (!isWhitespace(c)) {
+      this.cbs.onattribend(QuoteType.NoValue, this.sectionStart)
+      this.handleAttrStart(c)
+    }
+  }
+  private stateBeforeAttrValue(c: number): void {
+    if (c === CharCodes.DoubleQuote) {
+      this.state = State.InAttrValueDq
+      this.sectionStart = this.index + 1
+    } else if (c === CharCodes.SingleQuote) {
+      this.state = State.InAttrValueSq
+      this.sectionStart = this.index + 1
+    } else if (!isWhitespace(c)) {
+      this.sectionStart = this.index
+      this.state = State.InAttrValueNq
+      this.stateInAttrValueNoQuotes(c) // Reconsume token
+    }
+  }
+  private handleInAttrValue(c: number, quote: number) {
+    if (c === quote || (__BROWSER__ && this.fastForwardTo(quote))) {
+      this.cbs.onattribdata(this.sectionStart, this.index)
+      this.sectionStart = -1
+      this.cbs.onattribend(
+        quote === CharCodes.DoubleQuote ? QuoteType.Double : QuoteType.Single,
+        this.index + 1,
+      )
+      this.state = State.BeforeAttrName
+    } else if (!__BROWSER__ && c === CharCodes.Amp) {
+      this.startEntity()
+    }
+  }
+  private stateInAttrValueDoubleQuotes(c: number): void {
+    this.handleInAttrValue(c, CharCodes.DoubleQuote)
+  }
+  private stateInAttrValueSingleQuotes(c: number): void {
+    this.handleInAttrValue(c, CharCodes.SingleQuote)
+  }
+  private stateInAttrValueNoQuotes(c: number): void {
+    if (isWhitespace(c) || c === CharCodes.Gt) {
+      this.cbs.onattribdata(this.sectionStart, this.index)
+      this.sectionStart = -1
+      this.cbs.onattribend(QuoteType.Unquoted, this.index)
+      this.state = State.BeforeAttrName
+      this.stateBeforeAttrName(c)
+    } else if (
+      ((__DEV__ || !__BROWSER__) && c === CharCodes.DoubleQuote) ||
+      c === CharCodes.SingleQuote ||
+      c === CharCodes.Lt ||
+      c === CharCodes.Eq ||
+      c === CharCodes.GraveAccent
+    ) {
+      this.cbs.onerr(
+        ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
+        this.index,
+      )
+    } else if (!__BROWSER__ && c === CharCodes.Amp) {
+      this.startEntity()
+    }
+  }
+  private stateBeforeDeclaration(c: number): void {
+    if (c === CharCodes.LeftSquare) {
+      this.state = State.CDATASequence
+      this.sequenceIndex = 0
+    } else {
+      this.state =
+        c === CharCodes.Dash ? State.BeforeComment : State.InDeclaration
+    }
+  }
+  private stateInDeclaration(c: number): void {
+    if (c === CharCodes.Gt || this.fastForwardTo(CharCodes.Gt)) {
+      // this.cbs.ondeclaration(this.sectionStart, this.index)
+      this.state = State.Text
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateInProcessingInstruction(c: number): void {
+    if (c === CharCodes.Gt || this.fastForwardTo(CharCodes.Gt)) {
+      this.cbs.onprocessinginstruction(this.sectionStart, this.index)
+      this.state = State.Text
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateBeforeComment(c: number): void {
+    if (c === CharCodes.Dash) {
+      this.state = State.InCommentLike
+      this.currentSequence = Sequences.CommentEnd
+      // Allow short comments (eg. <!-->)
+      this.sequenceIndex = 2
+      this.sectionStart = this.index + 1
+    } else {
+      this.state = State.InDeclaration
+    }
+  }
+  private stateInSpecialComment(c: number): void {
+    if (c === CharCodes.Gt || this.fastForwardTo(CharCodes.Gt)) {
+      this.cbs.oncomment(this.sectionStart, this.index)
+      this.state = State.Text
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateBeforeSpecialS(c: number): void {
+    if (c === Sequences.ScriptEnd[3]) {
+      this.startSpecial(Sequences.ScriptEnd, 4)
+    } else if (c === Sequences.StyleEnd[3]) {
+      this.startSpecial(Sequences.StyleEnd, 4)
+    } else {
+      this.state = State.InTagName
+      this.stateInTagName(c) // Consume the token again
+    }
+  }
+  private stateBeforeSpecialT(c: number): void {
+    if (c === Sequences.TitleEnd[3]) {
+      this.startSpecial(Sequences.TitleEnd, 4)
+    } else if (c === Sequences.TextareaEnd[3]) {
+      this.startSpecial(Sequences.TextareaEnd, 4)
+    } else {
+      this.state = State.InTagName
+      this.stateInTagName(c) // Consume the token again
+    }
+  }
+
+  private startEntity() {
+    if (!__BROWSER__) {
+      this.baseState = this.state
+      this.state = State.InEntity
+      this.entityStart = this.index
+      this.entityDecoder!.startEntity(
+        this.baseState === State.Text || this.baseState === State.InRCDATA
+          ? DecodingMode.Legacy
+          : DecodingMode.Attribute,
+      )
+    }
+  }
+
+  private stateInEntity(): void {
+    if (!__BROWSER__) {
+      const length = this.entityDecoder!.write(this.buffer, this.index)
+
+      // If `length` is positive, we are done with the entity.
+      if (length >= 0) {
+        this.state = this.baseState
+
+        if (length === 0) {
+          this.index = this.entityStart
+        }
+      } else {
+        // Mark buffer as consumed.
+        this.index = this.buffer.length - 1
+      }
+    }
+  }
+
+  /**
+   * Iterates through the buffer, calling the function corresponding to the current state.
+   *
+   * States that are more likely to be hit are higher up, as a performance improvement.
+   */
+  public parse(input: string): void {
+    this.buffer = input
+    while (this.index < this.buffer.length) {
+      const c = this.buffer.charCodeAt(this.index)
+      if (c === CharCodes.NewLine) {
+        this.newlines.push(this.index)
+      }
+      switch (this.state) {
+        case State.Text: {
+          this.stateText(c)
+          break
+        }
+        case State.InterpolationOpen: {
+          this.stateInterpolationOpen(c)
+          break
+        }
+        case State.Interpolation: {
+          this.stateInterpolation(c)
+          break
+        }
+        case State.InterpolationClose: {
+          this.stateInterpolationClose(c)
+          break
+        }
+        case State.SpecialStartSequence: {
+          this.stateSpecialStartSequence(c)
+          break
+        }
+        case State.InRCDATA: {
+          this.stateInRCDATA(c)
+          break
+        }
+        case State.CDATASequence: {
+          this.stateCDATASequence(c)
+          break
+        }
+        case State.InAttrValueDq: {
+          this.stateInAttrValueDoubleQuotes(c)
+          break
+        }
+        case State.InAttrName: {
+          this.stateInAttrName(c)
+          break
+        }
+        case State.InDirName: {
+          this.stateInDirName(c)
+          break
+        }
+        case State.InDirArg: {
+          this.stateInDirArg(c)
+          break
+        }
+        case State.InDirDynamicArg: {
+          this.stateInDynamicDirArg(c)
+          break
+        }
+        case State.InDirModifier: {
+          this.stateInDirModifier(c)
+          break
+        }
+        case State.InCommentLike: {
+          this.stateInCommentLike(c)
+          break
+        }
+        case State.InSpecialComment: {
+          this.stateInSpecialComment(c)
+          break
+        }
+        case State.BeforeAttrName: {
+          this.stateBeforeAttrName(c)
+          break
+        }
+        case State.InTagName: {
+          this.stateInTagName(c)
+          break
+        }
+        case State.InSFCRootTagName: {
+          this.stateInSFCRootTagName(c)
+          break
+        }
+        case State.InClosingTagName: {
+          this.stateInClosingTagName(c)
+          break
+        }
+        case State.BeforeTagName: {
+          this.stateBeforeTagName(c)
+          break
+        }
+        case State.AfterAttrName: {
+          this.stateAfterAttrName(c)
+          break
+        }
+        case State.InAttrValueSq: {
+          this.stateInAttrValueSingleQuotes(c)
+          break
+        }
+        case State.BeforeAttrValue: {
+          this.stateBeforeAttrValue(c)
+          break
+        }
+        case State.BeforeClosingTagName: {
+          this.stateBeforeClosingTagName(c)
+          break
+        }
+        case State.AfterClosingTagName: {
+          this.stateAfterClosingTagName(c)
+          break
+        }
+        case State.BeforeSpecialS: {
+          this.stateBeforeSpecialS(c)
+          break
+        }
+        case State.BeforeSpecialT: {
+          this.stateBeforeSpecialT(c)
+          break
+        }
+        case State.InAttrValueNq: {
+          this.stateInAttrValueNoQuotes(c)
+          break
+        }
+        case State.InSelfClosingTag: {
+          this.stateInSelfClosingTag(c)
+          break
+        }
+        case State.InDeclaration: {
+          this.stateInDeclaration(c)
+          break
+        }
+        case State.BeforeDeclaration: {
+          this.stateBeforeDeclaration(c)
+          break
+        }
+        case State.BeforeComment: {
+          this.stateBeforeComment(c)
+          break
+        }
+        case State.InProcessingInstruction: {
+          this.stateInProcessingInstruction(c)
+          break
+        }
+        case State.InEntity: {
+          this.stateInEntity()
+          break
+        }
+      }
+      this.index++
+    }
+    this.cleanup()
+    this.finish()
+  }
+
+  /**
+   * Remove data that has already been consumed from the buffer.
+   */
+  private cleanup() {
+    // If we are inside of text or attributes, emit what we already have.
+    if (this.sectionStart !== this.index) {
+      if (
+        this.state === State.Text ||
+        (this.state === State.InRCDATA && this.sequenceIndex === 0)
+      ) {
+        this.cbs.ontext(this.sectionStart, this.index)
+        this.sectionStart = this.index
+      } else if (
+        this.state === State.InAttrValueDq ||
+        this.state === State.InAttrValueSq ||
+        this.state === State.InAttrValueNq
+      ) {
+        this.cbs.onattribdata(this.sectionStart, this.index)
+        this.sectionStart = this.index
+      }
+    }
+  }
+
+  private finish() {
+    if (!__BROWSER__ && this.state === State.InEntity) {
+      this.entityDecoder!.end()
+      this.state = this.baseState
+    }
+
+    this.handleTrailingData()
+
+    this.cbs.onend()
+  }
+
+  /** Handle any trailing data. */
+  private handleTrailingData() {
+    const endIndex = this.buffer.length
+
+    // If there is no remaining data, we are done.
+    if (this.sectionStart >= endIndex) {
+      return
+    }
+
+    if (this.state === State.InCommentLike) {
+      if (this.currentSequence === Sequences.CdataEnd) {
+        this.cbs.oncdata(this.sectionStart, endIndex)
+      } else {
+        this.cbs.oncomment(this.sectionStart, endIndex)
+      }
+    } else if (
+      this.state === State.InTagName ||
+      this.state === State.BeforeAttrName ||
+      this.state === State.BeforeAttrValue ||
+      this.state === State.AfterAttrName ||
+      this.state === State.InAttrName ||
+      this.state === State.InDirName ||
+      this.state === State.InDirArg ||
+      this.state === State.InDirDynamicArg ||
+      this.state === State.InDirModifier ||
+      this.state === State.InAttrValueSq ||
+      this.state === State.InAttrValueDq ||
+      this.state === State.InAttrValueNq ||
+      this.state === State.InClosingTagName
+    ) {
+      /*
+       * If we are currently in an opening or closing tag, us not calling the
+       * respective callback signals that the tag should be ignored.
+       */
+    } else {
+      this.cbs.ontext(this.sectionStart, endIndex)
+    }
+  }
+
+  private emitCodePoint(cp: number, consumed: number): void {
+    if (!__BROWSER__) {
+      if (this.baseState !== State.Text && this.baseState !== State.InRCDATA) {
+        if (this.sectionStart < this.entityStart) {
+          this.cbs.onattribdata(this.sectionStart, this.entityStart)
+        }
+        this.sectionStart = this.entityStart + consumed
+        this.index = this.sectionStart - 1
+
+        this.cbs.onattribentity(
+          fromCodePoint(cp),
+          this.entityStart,
+          this.sectionStart,
+        )
+      } else {
+        if (this.sectionStart < this.entityStart) {
+          this.cbs.ontext(this.sectionStart, this.entityStart)
+        }
+        this.sectionStart = this.entityStart + consumed
+        this.index = this.sectionStart - 1
+
+        this.cbs.ontextentity(
+          fromCodePoint(cp),
+          this.entityStart,
+          this.sectionStart,
+        )
+      }
+    }
+  }
+}
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 2053e26ce..b47b6b8d4 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -1,45 +1,44 @@
-import { TransformOptions } from './options'
+import type { TransformOptions } from './options'
 import {
-  RootNode,
-  NodeTypes,
-  ParentNode,
-  TemplateChildNode,
-  ElementNode,
-  DirectiveNode,
-  Property,
-  ExpressionNode,
-  createSimpleExpression,
-  JSChildNode,
-  SimpleExpressionNode,
-  ElementTypes,
-  CacheExpression,
-  createCacheExpression,
-  TemplateLiteral,
-  createVNodeCall,
+  type ArrayExpression,
+  type CacheExpression,
   ConstantTypes,
-  ArrayExpression,
-  convertToBlock
+  type DirectiveNode,
+  type ElementNode,
+  ElementTypes,
+  type ExpressionNode,
+  type JSChildNode,
+  NodeTypes,
+  type ParentNode,
+  type Property,
+  type RootNode,
+  type SimpleExpressionNode,
+  type TemplateChildNode,
+  type TemplateLiteral,
+  convertToBlock,
+  createCacheExpression,
+  createSimpleExpression,
+  createVNodeCall,
 } from './ast'
 import {
-  isString,
-  isArray,
+  EMPTY_OBJ,
   NOOP,
   PatchFlags,
-  PatchFlagNames,
-  EMPTY_OBJ,
+  camelize,
   capitalize,
-  camelize
+  isArray,
+  isString,
 } from '@vue/shared'
 import { defaultOnError, defaultOnWarn } from './errors'
 import {
-  TO_DISPLAY_STRING,
+  CREATE_COMMENT,
   FRAGMENT,
+  TO_DISPLAY_STRING,
   helperNameMap,
-  CREATE_COMMENT
 } from './runtimeHelpers'
 import { isVSlot } from './utils'
-import { hoistStatic, isSingleElementRoot } from './transforms/hoistStatic'
-import { CompilerCompatOptions } from './compat/compatConfig'
+import { cacheStatic, isSingleElementRoot } from './transforms/cacheStatic'
+import type { CompilerCompatOptions } from './compat/compatConfig'
 
 // There are two types of transforms:
 //
@@ -48,7 +47,7 @@ import { CompilerCompatOptions } from './compat/compatConfig'
 //   replace or remove the node being processed.
 export type NodeTransform = (
   node: RootNode | TemplateChildNode,
-  context: TransformContext
+  context: TransformContext,
 ) => void | (() => void) | (() => void)[]
 
 // - DirectiveTransform:
@@ -60,7 +59,7 @@ export type DirectiveTransform = (
   context: TransformContext,
   // a platform specific compiler can import the base transform and augment
   // it by passing in this optional argument.
-  augmentor?: (ret: DirectiveTransformResult) => DirectiveTransformResult
+  augmentor?: (ret: DirectiveTransformResult) => DirectiveTransformResult,
 ) => DirectiveTransformResult
 
 export interface DirectiveTransformResult {
@@ -74,7 +73,7 @@ export interface DirectiveTransformResult {
 export type StructuralDirectiveTransform = (
   node: ElementNode,
   dir: DirectiveNode,
-  context: TransformContext
+  context: TransformContext,
 ) => void | (() => void)
 
 export interface ImportItem {
@@ -83,9 +82,7 @@ export interface ImportItem {
 }
 
 export interface TransformContext
-  extends Required<
-      Omit<TransformOptions, 'filename' | keyof CompilerCompatOptions>
-    >,
+  extends Required<Omit<TransformOptions, keyof CompilerCompatOptions>>,
     CompilerCompatOptions {
   selfName: string | null
   root: RootNode
@@ -95,7 +92,7 @@ export interface TransformContext
   hoists: (JSChildNode | null)[]
   imports: ImportItem[]
   temps: number
-  cached: number
+  cached: (CacheExpression | null)[]
   identifiers: { [name: string]: number | undefined }
   scopes: {
     vFor: number
@@ -104,6 +101,9 @@ export interface TransformContext
     vOnce: number
   }
   parent: ParentNode | null
+  // we could use a stack but in practice we've only ever needed two layers up
+  // so this is more efficient
+  grandParent: ParentNode | null
   childIndex: number
   currentNode: RootNode | TemplateChildNode | null
   inVOnce: boolean
@@ -116,7 +116,7 @@ export interface TransformContext
   addIdentifiers(exp: ExpressionNode | string): void
   removeIdentifiers(exp: ExpressionNode | string): void
   hoist(exp: string | JSChildNode | ArrayExpression): SimpleExpressionNode
-  cache<T extends JSChildNode>(exp: T, isVNode?: boolean): CacheExpression | T
+  cache(exp: JSChildNode, isVNode?: boolean): CacheExpression
   constantCache: WeakMap<TemplateChildNode, ConstantTypes>
 
   // 2.x Compat only
@@ -147,12 +147,13 @@ export function createTransformContext(
     isTS = false,
     onError = defaultOnError,
     onWarn = defaultOnWarn,
-    compatConfig
-  }: TransformOptions
+    compatConfig,
+  }: TransformOptions,
 ): TransformContext {
   const nameMatch = filename.replace(/\?.*$/, '').match(/([^/\\]+)\.\w+$/)
   const context: TransformContext = {
     // options
+    filename,
     selfName: nameMatch && capitalize(camelize(nameMatch[1])),
     prefixIdentifiers,
     hoistStatic,
@@ -183,17 +184,18 @@ export function createTransformContext(
     directives: new Set(),
     hoists: [],
     imports: [],
+    cached: [],
     constantCache: new WeakMap(),
     temps: 0,
-    cached: 0,
     identifiers: Object.create(null),
     scopes: {
       vFor: 0,
       vSlot: 0,
       vPre: 0,
-      vOnce: 0
+      vOnce: 0,
     },
     parent: null,
+    grandParent: null,
     currentNode: root,
     childIndex: 0,
     inVOnce: false,
@@ -219,7 +221,7 @@ export function createTransformContext(
       return `_${helperNameMap[context.helper(name)]}`
     },
     replaceNode(node) {
-      /* istanbul ignore if */
+      /* v8 ignore start */
       if (__DEV__) {
         if (!context.currentNode) {
           throw new Error(`Node being replaced is already removed.`)
@@ -228,9 +230,11 @@ export function createTransformContext(
           throw new Error(`Cannot replace root node.`)
         }
       }
+      /* v8 ignore stop */
       context.parent!.children[context.childIndex] = context.currentNode = node
     },
     removeNode(node) {
+      /* v8 ignore next 3 */
       if (__DEV__ && !context.parent) {
         throw new Error(`Cannot remove root node.`)
       }
@@ -240,7 +244,7 @@ export function createTransformContext(
         : context.currentNode
           ? context.childIndex
           : -1
-      /* istanbul ignore if */
+      /* v8 ignore next 3 */
       if (__DEV__ && removalIndex < 0) {
         throw new Error(`node being removed is not a child of current parent`)
       }
@@ -257,7 +261,7 @@ export function createTransformContext(
       }
       context.parent!.children.splice(removalIndex, 1)
     },
-    onNodeRemoved: () => {},
+    onNodeRemoved: NOOP,
     addIdentifiers(exp) {
       // identifier tracking only happens in non-browser builds.
       if (!__BROWSER__) {
@@ -288,14 +292,20 @@ export function createTransformContext(
         `_hoisted_${context.hoists.length}`,
         false,
         exp.loc,
-        ConstantTypes.CAN_HOIST
+        ConstantTypes.CAN_CACHE,
       )
       identifier.hoisted = exp
       return identifier
     },
     cache(exp, isVNode = false) {
-      return createCacheExpression(context.cached++, exp, isVNode)
-    }
+      const cacheExp = createCacheExpression(
+        context.cached.length,
+        exp,
+        isVNode,
+      )
+      context.cached.push(cacheExp)
+      return cacheExp
+    },
   }
 
   if (__COMPAT__) {
@@ -317,11 +327,11 @@ export function createTransformContext(
   return context
 }
 
-export function transform(root: RootNode, options: TransformOptions) {
+export function transform(root: RootNode, options: TransformOptions): void {
   const context = createTransformContext(root, options)
   traverseNode(root, context)
   if (options.hoistStatic) {
-    hoistStatic(root, context)
+    cacheStatic(root, context)
   }
   if (!options.ssr) {
     createRootCodegen(root, context)
@@ -334,6 +344,7 @@ export function transform(root: RootNode, options: TransformOptions) {
   root.hoists = context.hoists
   root.temps = context.temps
   root.cached = context.cached
+  root.transformed = true
 
   if (__COMPAT__) {
     root.filters = [...context.filters!]
@@ -363,7 +374,6 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
   } else if (children.length > 1) {
     // root has multiple nodes - return a fragment block.
     let patchFlag = PatchFlags.STABLE_FRAGMENT
-    let patchFlagText = PatchFlagNames[PatchFlags.STABLE_FRAGMENT]
     // check if the fragment actually contains a single valid child with
     // the rest being comments
     if (
@@ -371,19 +381,18 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
       children.filter(c => c.type !== NodeTypes.COMMENT).length === 1
     ) {
       patchFlag |= PatchFlags.DEV_ROOT_FRAGMENT
-      patchFlagText += `, ${PatchFlagNames[PatchFlags.DEV_ROOT_FRAGMENT]}`
     }
     root.codegenNode = createVNodeCall(
       context,
       helper(FRAGMENT),
       undefined,
       root.children,
-      patchFlag + (__DEV__ ? ` /* ${patchFlagText} */` : ``),
+      patchFlag,
       undefined,
       undefined,
       true,
       undefined,
-      false /* isComponent */
+      false /* isComponent */,
     )
   } else {
     // no children = noop. codegen will return null.
@@ -392,8 +401,8 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
 
 export function traverseChildren(
   parent: ParentNode,
-  context: TransformContext
-) {
+  context: TransformContext,
+): void {
   let i = 0
   const nodeRemoved = () => {
     i--
@@ -401,6 +410,7 @@ export function traverseChildren(
   for (; i < parent.children.length; i++) {
     const child = parent.children[i]
     if (isString(child)) continue
+    context.grandParent = context.parent
     context.parent = parent
     context.childIndex = i
     context.onNodeRemoved = nodeRemoved
@@ -410,8 +420,8 @@ export function traverseChildren(
 
 export function traverseNode(
   node: RootNode | TemplateChildNode,
-  context: TransformContext
-) {
+  context: TransformContext,
+): void {
   context.currentNode = node
   // apply transform plugins
   const { nodeTransforms } = context
@@ -473,7 +483,7 @@ export function traverseNode(
 
 export function createStructuralDirectiveTransform(
   name: string | RegExp,
-  fn: StructuralDirectiveTransform
+  fn: StructuralDirectiveTransform,
 ): NodeTransform {
   const matches = isString(name)
     ? (n: string) => n === name
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/cacheStatic.ts
similarity index 66%
rename from packages/compiler-core/src/transforms/hoistStatic.ts
rename to packages/compiler-core/src/transforms/cacheStatic.ts
index fd443496c..8d5961643 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/cacheStatic.ts
@@ -1,45 +1,50 @@
 import {
+  type CacheExpression,
+  type CallExpression,
+  type ComponentNode,
   ConstantTypes,
-  RootNode,
-  NodeTypes,
-  TemplateChildNode,
-  SimpleExpressionNode,
   ElementTypes,
-  PlainElementNode,
-  ComponentNode,
-  TemplateNode,
-  VNodeCall,
-  ParentNode,
-  JSChildNode,
-  CallExpression,
+  type ExpressionNode,
+  type JSChildNode,
+  NodeTypes,
+  type ParentNode,
+  type PlainElementNode,
+  type RootNode,
+  type SimpleExpressionNode,
+  type SlotFunctionExpression,
+  type TemplateChildNode,
+  type TemplateNode,
+  type TextCallNode,
+  type VNodeCall,
   createArrayExpression,
   getVNodeBlockHelper,
-  getVNodeHelper
+  getVNodeHelper,
 } from '../ast'
-import { TransformContext } from '../transform'
-import { PatchFlags, isString, isSymbol, isArray } from '@vue/shared'
-import { isSlotOutlet } from '../utils'
+import type { TransformContext } from '../transform'
+import { PatchFlags, isArray, isString, isSymbol } from '@vue/shared'
+import { findDir, isSlotOutlet } from '../utils'
 import {
-  OPEN_BLOCK,
   GUARD_REACTIVE_PROPS,
   NORMALIZE_CLASS,
   NORMALIZE_PROPS,
-  NORMALIZE_STYLE
+  NORMALIZE_STYLE,
+  OPEN_BLOCK,
 } from '../runtimeHelpers'
 
-export function hoistStatic(root: RootNode, context: TransformContext) {
+export function cacheStatic(root: RootNode, context: TransformContext): void {
   walk(
     root,
+    undefined,
     context,
     // Root node is unfortunately non-hoistable due to potential parent
     // fallthrough attributes.
-    isSingleElementRoot(root, root.children[0])
+    isSingleElementRoot(root, root.children[0]),
   )
 }
 
 export function isSingleElementRoot(
   root: RootNode,
-  child: TemplateChildNode
+  child: TemplateChildNode,
 ): child is PlainElementNode | ComponentNode | TemplateNode {
   const { children } = root
   return (
@@ -51,16 +56,16 @@ export function isSingleElementRoot(
 
 function walk(
   node: ParentNode,
+  parent: ParentNode | undefined,
   context: TransformContext,
-  doNotHoistNode: boolean = false
+  doNotHoistNode: boolean = false,
+  inFor = false,
 ) {
   const { children } = node
-  const originalCount = children.length
-  let hoistedCount = 0
-
+  const toCache: (PlainElementNode | TextCallNode)[] = []
   for (let i = 0; i < children.length; i++) {
     const child = children[i]
-    // only plain elements & text calls are eligible for hoisting.
+    // only plain elements & text calls are eligible for caching.
     if (
       child.type === NodeTypes.ELEMENT &&
       child.tagType === ElementTypes.ELEMENT
@@ -69,11 +74,9 @@ function walk(
         ? ConstantTypes.NOT_CONSTANT
         : getConstantType(child, context)
       if (constantType > ConstantTypes.NOT_CONSTANT) {
-        if (constantType >= ConstantTypes.CAN_HOIST) {
-          ;(child.codegenNode as VNodeCall).patchFlag =
-            PatchFlags.HOISTED + (__DEV__ ? ` /* HOISTED */` : ``)
-          child.codegenNode = context.hoist(child.codegenNode!)
-          hoistedCount++
+        if (constantType >= ConstantTypes.CAN_CACHE) {
+          ;(child.codegenNode as VNodeCall).patchFlag = PatchFlags.CACHED
+          toCache.push(child)
           continue
         }
       } else {
@@ -81,13 +84,13 @@ function walk(
         // hoisting.
         const codegenNode = child.codegenNode!
         if (codegenNode.type === NodeTypes.VNODE_CALL) {
-          const flag = getPatchFlag(codegenNode)
+          const flag = codegenNode.patchFlag
           if (
-            (!flag ||
+            (flag === undefined ||
               flag === PatchFlags.NEED_PATCH ||
               flag === PatchFlags.TEXT) &&
             getGeneratedPropsConstantType(child, context) >=
-              ConstantTypes.CAN_HOIST
+              ConstantTypes.CAN_CACHE
           ) {
             const props = getNodeProps(child)
             if (props) {
@@ -99,6 +102,14 @@ function walk(
           }
         }
       }
+    } else if (child.type === NodeTypes.TEXT_CALL) {
+      const constantType = doNotHoistNode
+        ? ConstantTypes.NOT_CONSTANT
+        : getConstantType(child, context)
+      if (constantType >= ConstantTypes.CAN_CACHE) {
+        toCache.push(child)
+        continue
+      }
     }
 
     // walk further
@@ -107,55 +118,123 @@ function walk(
       if (isComponent) {
         context.scopes.vSlot++
       }
-      walk(child, context)
+      walk(child, node, context, false, inFor)
       if (isComponent) {
         context.scopes.vSlot--
       }
     } else if (child.type === NodeTypes.FOR) {
       // Do not hoist v-for single child because it has to be a block
-      walk(child, context, child.children.length === 1)
+      walk(child, node, context, child.children.length === 1, true)
     } else if (child.type === NodeTypes.IF) {
       for (let i = 0; i < child.branches.length; i++) {
         // Do not hoist v-if single child because it has to be a block
         walk(
           child.branches[i],
+          node,
           context,
-          child.branches[i].children.length === 1
+          child.branches[i].children.length === 1,
+          inFor,
         )
       }
     }
   }
 
-  if (hoistedCount && context.transformHoist) {
-    context.transformHoist(children, context, node)
+  let cachedAsArray = false
+  if (toCache.length === children.length && node.type === NodeTypes.ELEMENT) {
+    if (
+      node.tagType === ElementTypes.ELEMENT &&
+      node.codegenNode &&
+      node.codegenNode.type === NodeTypes.VNODE_CALL &&
+      isArray(node.codegenNode.children)
+    ) {
+      // all children were hoisted - the entire children array is cacheable.
+      node.codegenNode.children = getCacheExpression(
+        createArrayExpression(node.codegenNode.children),
+      )
+      cachedAsArray = true
+    } else if (
+      node.tagType === ElementTypes.COMPONENT &&
+      node.codegenNode &&
+      node.codegenNode.type === NodeTypes.VNODE_CALL &&
+      node.codegenNode.children &&
+      !isArray(node.codegenNode.children) &&
+      node.codegenNode.children.type === NodeTypes.JS_OBJECT_EXPRESSION
+    ) {
+      // default slot
+      const slot = getSlotNode(node.codegenNode, 'default')
+      if (slot) {
+        slot.returns = getCacheExpression(
+          createArrayExpression(slot.returns as TemplateChildNode[]),
+        )
+        cachedAsArray = true
+      }
+    } else if (
+      node.tagType === ElementTypes.TEMPLATE &&
+      parent &&
+      parent.type === NodeTypes.ELEMENT &&
+      parent.tagType === ElementTypes.COMPONENT &&
+      parent.codegenNode &&
+      parent.codegenNode.type === NodeTypes.VNODE_CALL &&
+      parent.codegenNode.children &&
+      !isArray(parent.codegenNode.children) &&
+      parent.codegenNode.children.type === NodeTypes.JS_OBJECT_EXPRESSION
+    ) {
+      // named <template> slot
+      const slotName = findDir(node, 'slot', true)
+      const slot =
+        slotName &&
+        slotName.arg &&
+        getSlotNode(parent.codegenNode, slotName.arg)
+      if (slot) {
+        slot.returns = getCacheExpression(
+          createArrayExpression(slot.returns as TemplateChildNode[]),
+        )
+        cachedAsArray = true
+      }
+    }
   }
 
-  // all children were hoisted - the entire children array is hoistable.
-  if (
-    hoistedCount &&
-    hoistedCount === originalCount &&
-    node.type === NodeTypes.ELEMENT &&
-    node.tagType === ElementTypes.ELEMENT &&
-    node.codegenNode &&
-    node.codegenNode.type === NodeTypes.VNODE_CALL &&
-    isArray(node.codegenNode.children)
-  ) {
-    const hoisted = context.hoist(
-      createArrayExpression(node.codegenNode.children)
-    )
-    // #6978, #7138, #7114
-    // a hoisted children array inside v-for can caused HMR errors since
-    // it might be mutated when mounting the v-for list
-    if (context.hmr) {
-      hoisted.content = `[...${hoisted.content}]`
+  if (!cachedAsArray) {
+    for (const child of toCache) {
+      child.codegenNode = context.cache(child.codegenNode!)
     }
-    node.codegenNode.children = hoisted
+  }
+
+  function getCacheExpression(value: JSChildNode): CacheExpression {
+    const exp = context.cache(value)
+    // #6978, #7138, #7114
+    // a cached children array inside v-for can caused HMR errors since
+    // it might be mutated when mounting the first item
+    if (inFor && context.hmr) {
+      exp.needArraySpread = true
+    }
+    return exp
+  }
+
+  function getSlotNode(
+    node: VNodeCall,
+    name: string | ExpressionNode,
+  ): SlotFunctionExpression | undefined {
+    if (
+      node.children &&
+      !isArray(node.children) &&
+      node.children.type === NodeTypes.JS_OBJECT_EXPRESSION
+    ) {
+      const slot = node.children.properties.find(
+        p => p.key === name || (p.key as SimpleExpressionNode).content === name,
+      )
+      return slot && slot.value
+    }
+  }
+
+  if (toCache.length && context.transformHoist) {
+    context.transformHoist(children, context, node)
   }
 }
 
 export function getConstantType(
-  node: TemplateChildNode | SimpleExpressionNode,
-  context: TransformContext
+  node: TemplateChildNode | SimpleExpressionNode | CacheExpression,
+  context: TransformContext,
 ): ConstantTypes {
   const { constantCache } = context
   switch (node.type) {
@@ -174,12 +253,12 @@ export function getConstantType(
       if (
         codegenNode.isBlock &&
         node.tag !== 'svg' &&
-        node.tag !== 'foreignObject'
+        node.tag !== 'foreignObject' &&
+        node.tag !== 'math'
       ) {
         return ConstantTypes.NOT_CONSTANT
       }
-      const flag = getPatchFlag(codegenNode)
-      if (!flag) {
+      if (codegenNode.patchFlag === undefined) {
         let returnType = ConstantTypes.CAN_STRINGIFY
 
         // Element itself has no patch flag. However we still need to check:
@@ -244,7 +323,7 @@ export function getConstantType(
 
           context.removeHelper(OPEN_BLOCK)
           context.removeHelper(
-            getVNodeBlockHelper(context.inSSR, codegenNode.isComponent)
+            getVNodeBlockHelper(context.inSSR, codegenNode.isComponent),
           )
           codegenNode.isBlock = false
           context.helper(getVNodeHelper(context.inSSR, codegenNode.isComponent))
@@ -283,6 +362,8 @@ export function getConstantType(
         }
       }
       return returnType
+    case NodeTypes.JS_CACHE_EXPRESSION:
+      return ConstantTypes.CAN_CACHE
     default:
       if (__DEV__) {
         const exhaustiveCheck: never = node
@@ -296,12 +377,12 @@ const allowHoistedHelperSet = new Set([
   NORMALIZE_CLASS,
   NORMALIZE_STYLE,
   NORMALIZE_PROPS,
-  GUARD_REACTIVE_PROPS
+  GUARD_REACTIVE_PROPS,
 ])
 
 function getConstantTypeOfHelperCall(
   value: CallExpression,
-  context: TransformContext
+  context: TransformContext,
 ): ConstantTypes {
   if (
     value.type === NodeTypes.JS_CALL_EXPRESSION &&
@@ -321,7 +402,7 @@ function getConstantTypeOfHelperCall(
 
 function getGeneratedPropsConstantType(
   node: PlainElementNode,
-  context: TransformContext
+  context: TransformContext,
 ): ConstantTypes {
   let returnType = ConstantTypes.CAN_STRINGIFY
   const props = getNodeProps(node)
@@ -364,8 +445,3 @@ function getNodeProps(node: PlainElementNode) {
     return codegenNode.props
   }
 }
-
-function getPatchFlag(node: VNodeCall): number | undefined {
-  const flag = node.patchFlag
-  return flag ? parseInt(flag, 10) : undefined
-}
diff --git a/packages/compiler-core/src/transforms/noopDirectiveTransform.ts b/packages/compiler-core/src/transforms/noopDirectiveTransform.ts
index 5975069be..cd8e21453 100644
--- a/packages/compiler-core/src/transforms/noopDirectiveTransform.ts
+++ b/packages/compiler-core/src/transforms/noopDirectiveTransform.ts
@@ -1,3 +1,3 @@
-import { DirectiveTransform } from '../transform'
+import type { DirectiveTransform } from '../transform'
 
 export const noopDirectiveTransform: DirectiveTransform = () => ({ props: [] })
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index ccede3777..76ca1d443 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -1,71 +1,69 @@
-import { NodeTransform, TransformContext } from '../transform'
+import type { NodeTransform, TransformContext } from '../transform'
 import {
-  NodeTypes,
+  type ArrayExpression,
+  type CallExpression,
+  type ComponentNode,
+  ConstantTypes,
+  type DirectiveArguments,
+  type DirectiveNode,
+  type ElementNode,
   ElementTypes,
-  CallExpression,
-  ObjectExpression,
-  ElementNode,
-  DirectiveNode,
-  ExpressionNode,
-  ArrayExpression,
-  createCallExpression,
+  type ExpressionNode,
+  type JSChildNode,
+  NodeTypes,
+  type ObjectExpression,
+  type Property,
+  type TemplateTextChildNode,
+  type VNodeCall,
   createArrayExpression,
+  createCallExpression,
+  createObjectExpression,
   createObjectProperty,
   createSimpleExpression,
-  createObjectExpression,
-  Property,
-  ComponentNode,
-  VNodeCall,
-  TemplateTextChildNode,
-  DirectiveArguments,
   createVNodeCall,
-  ConstantTypes,
-  JSChildNode
 } from '../ast'
 import {
   PatchFlags,
-  PatchFlagNames,
-  isSymbol,
-  isOn,
-  isObject,
-  isReservedProp,
-  capitalize,
   camelize,
-  isBuiltInDirective
+  capitalize,
+  isBuiltInDirective,
+  isObject,
+  isOn,
+  isReservedProp,
+  isSymbol,
 } from '@vue/shared'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import {
-  RESOLVE_DIRECTIVE,
-  RESOLVE_COMPONENT,
-  RESOLVE_DYNAMIC_COMPONENT,
+  GUARD_REACTIVE_PROPS,
+  KEEP_ALIVE,
   MERGE_PROPS,
   NORMALIZE_CLASS,
-  NORMALIZE_STYLE,
   NORMALIZE_PROPS,
-  TO_HANDLERS,
-  TELEPORT,
-  KEEP_ALIVE,
+  NORMALIZE_STYLE,
+  RESOLVE_COMPONENT,
+  RESOLVE_DIRECTIVE,
+  RESOLVE_DYNAMIC_COMPONENT,
   SUSPENSE,
+  TELEPORT,
+  TO_HANDLERS,
   UNREF,
-  GUARD_REACTIVE_PROPS
 } from '../runtimeHelpers'
 import {
-  getInnerRange,
-  toValidAssetId,
   findProp,
   isCoreComponent,
   isStaticArgOf,
-  findDir,
-  isStaticExp
+  isStaticExp,
+  toValidAssetId,
 } from '../utils'
 import { buildSlots } from './vSlot'
-import { getConstantType } from './hoistStatic'
+import { getConstantType } from './cacheStatic'
 import { BindingTypes } from '../options'
 import {
-  checkCompatEnabled,
   CompilerDeprecationTypes,
-  isCompatEnabled
+  checkCompatEnabled,
+  isCompatEnabled,
 } from '../compat/compatConfig'
+import { processExpression } from './transformExpression'
 
 // some directive transforms (e.g. v-model) may return a symbol for runtime
 // import, which should be used instead of a resolveDirective call.
@@ -102,8 +100,7 @@ export const transformElement: NodeTransform = (node, context) => {
 
     let vnodeProps: VNodeCall['props']
     let vnodeChildren: VNodeCall['children']
-    let vnodePatchFlag: VNodeCall['patchFlag']
-    let patchFlag: number = 0
+    let patchFlag: VNodeCall['patchFlag'] | 0 = 0
     let vnodeDynamicProps: VNodeCall['dynamicProps']
     let dynamicPropNames: string[] | undefined
     let vnodeDirectives: VNodeCall['directives']
@@ -118,7 +115,7 @@ export const transformElement: NodeTransform = (node, context) => {
         // updates inside get proper isSVG flag at runtime. (#639, #643)
         // This is technically web-specific, but splitting the logic out of core
         // leads to too much unnecessary complexity.
-        (tag === 'svg' || tag === 'foreignObject'))
+        (tag === 'svg' || tag === 'foreignObject' || tag === 'math'))
 
     // props
     if (props.length > 0) {
@@ -127,7 +124,7 @@ export const transformElement: NodeTransform = (node, context) => {
         context,
         undefined,
         isComponent,
-        isDynamicComponent
+        isDynamicComponent,
       )
       vnodeProps = propsBuildResult.props
       patchFlag = propsBuildResult.patchFlag
@@ -136,7 +133,7 @@ export const transformElement: NodeTransform = (node, context) => {
       vnodeDirectives =
         directives && directives.length
           ? (createArrayExpression(
-              directives.map(dir => buildDirectiveArgs(dir, context))
+              directives.map(dir => buildDirectiveArgs(dir, context)),
             ) as DirectiveArguments)
           : undefined
 
@@ -162,8 +159,8 @@ export const transformElement: NodeTransform = (node, context) => {
             createCompilerError(ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN, {
               start: node.children[0].loc.start,
               end: node.children[node.children.length - 1].loc.end,
-              source: ''
-            })
+              source: '',
+            }),
           )
         }
       }
@@ -207,27 +204,8 @@ export const transformElement: NodeTransform = (node, context) => {
     }
 
     // patchFlag & dynamicPropNames
-    if (patchFlag !== 0) {
-      if (__DEV__) {
-        if (patchFlag < 0) {
-          // special flags (negative and mutually exclusive)
-          vnodePatchFlag =
-            patchFlag + ` /* ${PatchFlagNames[patchFlag as PatchFlags]} */`
-        } else {
-          // bitwise flags
-          const flagNames = Object.keys(PatchFlagNames)
-            .map(Number)
-            .filter(n => n > 0 && patchFlag & n)
-            .map(n => PatchFlagNames[n as PatchFlags])
-            .join(`, `)
-          vnodePatchFlag = patchFlag + ` /* ${flagNames} */`
-        }
-      } else {
-        vnodePatchFlag = String(patchFlag)
-      }
-      if (dynamicPropNames && dynamicPropNames.length) {
-        vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames)
-      }
+    if (dynamicPropNames && dynamicPropNames.length) {
+      vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames)
     }
 
     node.codegenNode = createVNodeCall(
@@ -235,13 +213,13 @@ export const transformElement: NodeTransform = (node, context) => {
       vnodeTag,
       vnodeProps,
       vnodeChildren,
-      vnodePatchFlag,
+      patchFlag === 0 ? undefined : patchFlag,
       vnodeDynamicProps,
       vnodeDirectives,
       !!shouldUseBlock,
       false /* disableTracking */,
       isComponent,
-      node.loc
+      node.loc,
     )
   }
 }
@@ -249,29 +227,38 @@ export const transformElement: NodeTransform = (node, context) => {
 export function resolveComponentType(
   node: ComponentNode,
   context: TransformContext,
-  ssr = false
-) {
+  ssr = false,
+): string | symbol | CallExpression {
   let { tag } = node
 
   // 1. dynamic component
   const isExplicitDynamic = isComponentTag(tag)
-  const isProp = findProp(node, 'is')
+  const isProp = findProp(node, 'is', false, true /* allow empty */)
   if (isProp) {
     if (
       isExplicitDynamic ||
       (__COMPAT__ &&
         isCompatEnabled(
           CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
-          context
+          context,
         ))
     ) {
-      const exp =
-        isProp.type === NodeTypes.ATTRIBUTE
-          ? isProp.value && createSimpleExpression(isProp.value.content, true)
-          : isProp.exp
+      let exp: ExpressionNode | undefined
+      if (isProp.type === NodeTypes.ATTRIBUTE) {
+        exp = isProp.value && createSimpleExpression(isProp.value.content, true)
+      } else {
+        exp = isProp.exp
+        if (!exp) {
+          // #10469 handle :is shorthand
+          exp = createSimpleExpression(`is`, false, isProp.arg!.loc)
+          if (!__BROWSER__) {
+            exp = isProp.exp = processExpression(exp, context)
+          }
+        }
+      }
       if (exp) {
         return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [
-          exp
+          exp,
         ])
       }
     } else if (
@@ -286,19 +273,6 @@ export function resolveComponentType(
     }
   }
 
-  // 1.5 v-is (TODO: remove in 3.4)
-  const isDir = !isExplicitDynamic && findDir(node, 'is')
-  if (isDir && isDir.exp) {
-    if (__DEV__) {
-      context.onWarn(
-        createCompilerError(ErrorCodes.DEPRECATION_V_IS, isDir.loc)
-      )
-    }
-    return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [
-      isDir.exp
-    ])
-  }
-
   // 2. built-in components (Teleport, Transition, KeepAlive, Suspense...)
   const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag)
   if (builtIn) {
@@ -400,10 +374,10 @@ export type PropsExpression = ObjectExpression | CallExpression | ExpressionNode
 export function buildProps(
   node: ElementNode,
   context: TransformContext,
-  props: ElementNode['props'] = node.props,
+  props: ElementNode['props'] | undefined = node.props,
   isComponent: boolean,
   isDynamicComponent: boolean,
-  ssr = false
+  ssr = false,
 ): {
   props: PropsExpression | undefined
   directives: DirectiveNode[]
@@ -431,13 +405,25 @@ export function buildProps(
   const pushMergeArg = (arg?: PropsExpression) => {
     if (properties.length) {
       mergeArgs.push(
-        createObjectExpression(dedupeProperties(properties), elementLoc)
+        createObjectExpression(dedupeProperties(properties), elementLoc),
       )
       properties = []
     }
     if (arg) mergeArgs.push(arg)
   }
 
+  // mark template ref on v-for
+  const pushRefVForMarker = () => {
+    if (context.scopes.vFor > 0) {
+      properties.push(
+        createObjectProperty(
+          createSimpleExpression('ref_for', true),
+          createSimpleExpression('true'),
+        ),
+      )
+    }
+  }
+
   const analyzePatchFlag = ({ key, value }: Property) => {
     if (isStaticExp(key)) {
       const name = key.content
@@ -503,18 +489,11 @@ export function buildProps(
     // static attribute
     const prop = props[i]
     if (prop.type === NodeTypes.ATTRIBUTE) {
-      const { loc, name, value } = prop
+      const { loc, name, nameLoc, value } = prop
       let isStatic = true
       if (name === 'ref') {
         hasRef = true
-        if (context.scopes.vFor > 0) {
-          properties.push(
-            createObjectProperty(
-              createSimpleExpression('ref_for', true),
-              createSimpleExpression('true')
-            )
-          )
-        }
+        pushRefVForMarker()
         // in inline mode there is no setupState object, so we can't use string
         // keys to set the ref. Instead, we need to transform it to pass the
         // actual ref instead.
@@ -529,8 +508,8 @@ export function buildProps(
             properties.push(
               createObjectProperty(
                 createSimpleExpression('ref_key', true),
-                createSimpleExpression(value.content, true, value.loc)
-              )
+                createSimpleExpression(value.content, true, value.loc),
+              ),
             )
           }
         }
@@ -543,24 +522,20 @@ export function buildProps(
           (__COMPAT__ &&
             isCompatEnabled(
               CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
-              context
+              context,
             )))
       ) {
         continue
       }
       properties.push(
         createObjectProperty(
-          createSimpleExpression(
-            name,
-            true,
-            getInnerRange(loc, 0, name.length)
-          ),
+          createSimpleExpression(name, true, nameLoc),
           createSimpleExpression(
             value ? value.content : '',
             isStatic,
-            value ? value.loc : loc
-          )
-        )
+            value ? value.loc : loc,
+          ),
+        ),
       )
     } else {
       // directives
@@ -572,7 +547,7 @@ export function buildProps(
       if (name === 'slot') {
         if (!isComponent) {
           context.onError(
-            createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, loc)
+            createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, loc),
           )
         }
         continue
@@ -590,7 +565,7 @@ export function buildProps(
             (__COMPAT__ &&
               isCompatEnabled(
                 CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
-                context
+                context,
               ))))
       ) {
         continue
@@ -610,13 +585,8 @@ export function buildProps(
         shouldUseBlock = true
       }
 
-      if (isVBind && isStaticArgOf(arg, 'ref') && context.scopes.vFor > 0) {
-        properties.push(
-          createObjectProperty(
-            createSimpleExpression('ref_for', true),
-            createSimpleExpression('true')
-          )
-        )
+      if (isVBind && isStaticArgOf(arg, 'ref')) {
+        pushRefVForMarker()
       }
 
       // special case for v-bind and v-on with no argument
@@ -624,6 +594,8 @@ export function buildProps(
         hasDynamicKeys = true
         if (exp) {
           if (isVBind) {
+            // #10696 in case a v-bind object contains ref
+            pushRefVForMarker()
             // have to merge early for compat build check
             pushMergeArg()
             if (__COMPAT__) {
@@ -653,7 +625,7 @@ export function buildProps(
                   checkCompatEnabled(
                     CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER,
                     context,
-                    loc
+                    loc,
                   )
                 }
               }
@@ -661,7 +633,7 @@ export function buildProps(
               if (
                 isCompatEnabled(
                   CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER,
-                  context
+                  context,
                 )
               ) {
                 mergeArgs.unshift(exp)
@@ -676,7 +648,7 @@ export function buildProps(
               type: NodeTypes.JS_CALL_EXPRESSION,
               loc,
               callee: context.helper(TO_HANDLERS),
-              arguments: isComponent ? [exp] : [exp, `true`]
+              arguments: isComponent ? [exp] : [exp, `true`],
             })
           }
         } else {
@@ -685,15 +657,15 @@ export function buildProps(
               isVBind
                 ? ErrorCodes.X_V_BIND_NO_EXPRESSION
                 : ErrorCodes.X_V_ON_NO_EXPRESSION,
-              loc
-            )
+              loc,
+            ),
           )
         }
         continue
       }
 
       // force hydration for v-bind with .prop modifier
-      if (isVBind && modifiers.includes('prop')) {
+      if (isVBind && modifiers.some(mod => mod.content === 'prop')) {
         patchFlag |= PatchFlags.NEED_HYDRATION
       }
 
@@ -735,7 +707,7 @@ export function buildProps(
       propsExpression = createCallExpression(
         context.helper(MERGE_PROPS),
         mergeArgs,
-        elementLoc
+        elementLoc,
       )
     } else {
       // single v-bind with nothing else - no need for a mergeProps call
@@ -744,7 +716,7 @@ export function buildProps(
   } else if (properties.length) {
     propsExpression = createObjectExpression(
       dedupeProperties(properties),
-      elementLoc
+      elementLoc,
     )
   }
 
@@ -804,7 +776,7 @@ export function buildProps(
           if (classProp && !isStaticExp(classProp.value)) {
             classProp.value = createCallExpression(
               context.helper(NORMALIZE_CLASS),
-              [classProp.value]
+              [classProp.value],
             )
           }
           if (
@@ -820,14 +792,14 @@ export function buildProps(
           ) {
             styleProp.value = createCallExpression(
               context.helper(NORMALIZE_STYLE),
-              [styleProp.value]
+              [styleProp.value],
             )
           }
         } else {
           // dynamic key binding, wrap with `normalizeProps`
           propsExpression = createCallExpression(
             context.helper(NORMALIZE_PROPS),
-            [propsExpression]
+            [propsExpression],
           )
         }
         break
@@ -840,9 +812,9 @@ export function buildProps(
           context.helper(NORMALIZE_PROPS),
           [
             createCallExpression(context.helper(GUARD_REACTIVE_PROPS), [
-              propsExpression
-            ])
-          ]
+              propsExpression,
+            ]),
+          ],
         )
         break
     }
@@ -853,7 +825,7 @@ export function buildProps(
     directives: runtimeDirectives,
     patchFlag,
     dynamicPropNames,
-    shouldUseBlock
+    shouldUseBlock,
   }
 }
 
@@ -894,14 +866,14 @@ function mergeAsArray(existing: Property, incoming: Property) {
   } else {
     existing.value = createArrayExpression(
       [existing.value, incoming.value],
-      existing.loc
+      existing.loc,
     )
   }
 }
 
 export function buildDirectiveArgs(
   dir: DirectiveNode,
-  context: TransformContext
+  context: TransformContext,
 ): ArrayExpression {
   const dirArgs: ArrayExpression['elements'] = []
   const runtime = directiveImportMap.get(dir)
@@ -941,10 +913,10 @@ export function buildDirectiveArgs(
     dirArgs.push(
       createObjectExpression(
         dir.modifiers.map(modifier =>
-          createObjectProperty(modifier, trueExpression)
+          createObjectProperty(modifier, trueExpression),
         ),
-        loc
-      )
+        loc,
+      ),
     )
   }
   return createArrayExpression(dirArgs, dir.loc)
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 52d1fb42a..ec2d46853 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -7,53 +7,50 @@
 // - This transform is only applied in non-browser builds because it relies on
 //   an additional JavaScript parser. In the browser, there is no source-map
 //   support and the code is wrapped in `with (this) { ... }`.
-import { NodeTransform, TransformContext } from '../transform'
+import type { NodeTransform, TransformContext } from '../transform'
 import {
+  type CompoundExpressionNode,
+  ConstantTypes,
+  type ExpressionNode,
   NodeTypes,
-  createSimpleExpression,
-  ExpressionNode,
-  SimpleExpressionNode,
-  CompoundExpressionNode,
+  type SimpleExpressionNode,
   createCompoundExpression,
-  ConstantTypes
+  createSimpleExpression,
 } from '../ast'
 import {
   isInDestructureAssignment,
+  isInNewExpression,
   isStaticProperty,
   isStaticPropertyKey,
-  walkIdentifiers
+  walkIdentifiers,
 } from '../babelUtils'
 import { advancePositionWithClone, isSimpleIdentifier } from '../utils'
 import {
-  isGloballyAllowed,
-  makeMap,
+  genPropsAccessExp,
   hasOwn,
+  isGloballyAllowed,
   isString,
-  genPropsAccessExp
+  makeMap,
 } from '@vue/shared'
-import { createCompilerError, ErrorCodes } from '../errors'
-import {
-  Node,
-  Identifier,
+import { ErrorCodes, createCompilerError } from '../errors'
+import type {
   AssignmentExpression,
-  UpdateExpression
+  Identifier,
+  Node,
+  UpdateExpression,
 } from '@babel/types'
 import { validateBrowserExpression } from '../validateExpression'
-import { parse } from '@babel/parser'
+import { parseExpression } from '@babel/parser'
 import { IS_REF, UNREF } from '../runtimeHelpers'
 import { BindingTypes } from '../options'
 
-const isLiteralWhitelisted = /*#__PURE__*/ makeMap('true,false,null,this')
-
-// a heuristic safeguard to bail constant expressions on presence of
-// likely function invocation and member access
-const constantBailRE = /\w\s*\(|\.[^\d]/
+const isLiteralWhitelisted = /*@__PURE__*/ makeMap('true,false,null,this')
 
 export const transformExpression: NodeTransform = (node, context) => {
   if (node.type === NodeTypes.INTERPOLATION) {
     node.content = processExpression(
       node.content as SimpleExpressionNode,
-      context
+      context,
     )
   } else if (node.type === NodeTypes.ELEMENT) {
     // handle directives on element
@@ -74,7 +71,7 @@ export const transformExpression: NodeTransform = (node, context) => {
             exp,
             context,
             // slot args must be processed as function params
-            dir.name === 'slot'
+            dir.name === 'slot',
           )
         }
         if (arg && arg.type === NodeTypes.SIMPLE_EXPRESSION && !arg.isStatic) {
@@ -104,7 +101,7 @@ export function processExpression(
   asParams = false,
   // v-on handler values may contain multiple statements
   asRawStatements = false,
-  localVars: Record<string, number> = Object.create(context.identifiers)
+  localVars: Record<string, number> = Object.create(context.identifiers),
 ): ExpressionNode {
   if (__BROWSER__) {
     if (__DEV__) {
@@ -119,7 +116,11 @@ export function processExpression(
   }
 
   const { inline, bindingMetadata } = context
-  const rewriteIdentifier = (raw: string, parent?: Node, id?: Identifier) => {
+  const rewriteIdentifier = (
+    raw: string,
+    parent?: Node | null,
+    id?: Identifier,
+  ) => {
     const type = hasOwn(bindingMetadata, raw) && bindingMetadata[raw]
     if (inline) {
       // x = y
@@ -131,6 +132,11 @@ export function processExpression(
       // ({ x } = y)
       const isDestructureAssignment =
         parent && isInDestructureAssignment(parent, parentStack)
+      const isNewExpression = parent && isInNewExpression(parentStack)
+      const wrapWithUnref = (raw: string) => {
+        const wrapped = `${context.helperString(UNREF)}(${raw})`
+        return isNewExpression ? `(${wrapped})` : wrapped
+      }
 
       if (
         isConst(type) ||
@@ -147,7 +153,7 @@ export function processExpression(
         // that assumes the value to be a ref for more efficiency
         return isAssignmentLVal || isUpdateArg || isDestructureAssignment
           ? `${raw}.value`
-          : `${context.helperString(UNREF)}(${raw})`
+          : wrapWithUnref(raw)
       } else if (type === BindingTypes.SETUP_LET) {
         if (isAssignmentLVal) {
           // let binding.
@@ -163,8 +169,8 @@ export function processExpression(
               context,
               false,
               false,
-              knownIds
-            )
+              knownIds,
+            ),
           )
           return `${context.helperString(IS_REF)}(${raw})${
             context.isTS ? ` //@ts-ignore\n` : ``
@@ -190,7 +196,7 @@ export function processExpression(
           // for now
           return raw
         } else {
-          return `${context.helperString(UNREF)}(${raw})`
+          return wrapWithUnref(raw)
         }
       } else if (type === BindingTypes.PROPS) {
         // use __props which is generated by compileScript so in ts mode
@@ -220,10 +226,15 @@ export function processExpression(
 
   // fast path if expression is a simple identifier.
   const rawExp = node.content
-  // bail constant on parens (function invocation) and dot (member access)
-  const bailConstant = constantBailRE.test(rawExp)
 
-  if (isSimpleIdentifier(rawExp)) {
+  let ast = node.ast
+
+  if (ast === false) {
+    // ast being false means it has caused an error already during parse phase
+    return node
+  }
+
+  if (ast === null || (!ast && isSimpleIdentifier(rawExp))) {
     const isScopeVarReference = context.identifiers[rawExp]
     const isAllowedGlobal = isGloballyAllowed(rawExp)
     const isLiteral = isLiteralWhitelisted(rawExp)
@@ -243,35 +254,37 @@ export function processExpression(
       if (isLiteral) {
         node.constType = ConstantTypes.CAN_STRINGIFY
       } else {
-        node.constType = ConstantTypes.CAN_HOIST
+        node.constType = ConstantTypes.CAN_CACHE
       }
     }
     return node
   }
 
-  let ast: any
-  // exp needs to be parsed differently:
-  // 1. Multiple inline statements (v-on, with presence of `;`): parse as raw
-  //    exp, but make sure to pad with spaces for consistent ranges
-  // 2. Expressions: wrap with parens (for e.g. object expressions)
-  // 3. Function arguments (v-for, v-slot): place in a function argument position
-  const source = asRawStatements
-    ? ` ${rawExp} `
-    : `(${rawExp})${asParams ? `=>{}` : ``}`
-  try {
-    ast = parse(source, {
-      plugins: context.expressionPlugins
-    }).program
-  } catch (e: any) {
-    context.onError(
-      createCompilerError(
-        ErrorCodes.X_INVALID_EXPRESSION,
-        node.loc,
-        undefined,
-        e.message
+  if (!ast) {
+    // exp needs to be parsed differently:
+    // 1. Multiple inline statements (v-on, with presence of `;`): parse as raw
+    //    exp, but make sure to pad with spaces for consistent ranges
+    // 2. Expressions: wrap with parens (for e.g. object expressions)
+    // 3. Function arguments (v-for, v-slot): place in a function argument position
+    const source = asRawStatements
+      ? ` ${rawExp} `
+      : `(${rawExp})${asParams ? `=>{}` : ``}`
+    try {
+      ast = parseExpression(source, {
+        sourceType: 'module',
+        plugins: context.expressionPlugins,
+      })
+    } catch (e: any) {
+      context.onError(
+        createCompilerError(
+          ErrorCodes.X_INVALID_EXPRESSION,
+          node.loc,
+          undefined,
+          e.message,
+        ),
       )
-    )
-    return node
+      return node
+    }
   }
 
   type QualifiedId = Identifier & PrefixMeta
@@ -302,7 +315,13 @@ export function processExpression(
       } else {
         // The identifier is considered constant unless it's pointing to a
         // local scope variable (a v-for alias, or a v-slot prop)
-        if (!(needPrefix && isLocal) && !bailConstant) {
+        if (
+          !(needPrefix && isLocal) &&
+          (!parent ||
+            (parent.type !== 'CallExpression' &&
+              parent.type !== 'NewExpression' &&
+              parent.type !== 'MemberExpression'))
+        ) {
           ;(node as QualifiedId).isConstant = true
         }
         // also generate sub-expressions for other identifiers for better
@@ -312,7 +331,7 @@ export function processExpression(
     },
     true, // invoke on ALL identifiers
     parentStack,
-    knownIds
+    knownIds,
   )
 
   // We break up the compound expression into an array of strings and sub
@@ -336,12 +355,14 @@ export function processExpression(
         id.name,
         false,
         {
-          source,
           start: advancePositionWithClone(node.loc.start, source, start),
-          end: advancePositionWithClone(node.loc.start, source, end)
+          end: advancePositionWithClone(node.loc.start, source, end),
+          source,
         },
-        id.isConstant ? ConstantTypes.CAN_STRINGIFY : ConstantTypes.NOT_CONSTANT
-      )
+        id.isConstant
+          ? ConstantTypes.CAN_STRINGIFY
+          : ConstantTypes.NOT_CONSTANT,
+      ),
     )
     if (i === ids.length - 1 && end < rawExp.length) {
       children.push(rawExp.slice(end))
@@ -351,11 +372,10 @@ export function processExpression(
   let ret
   if (children.length) {
     ret = createCompoundExpression(children, node.loc)
+    ret.ast = ast
   } else {
     ret = node
-    ret.constType = bailConstant
-      ? ConstantTypes.NOT_CONSTANT
-      : ConstantTypes.CAN_STRINGIFY
+    ret.constType = ConstantTypes.CAN_STRINGIFY
   }
   ret.identifiers = Object.keys(knownIds)
   return ret
diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
index 5fc0af5f7..ea635e997 100644
--- a/packages/compiler-core/src/transforms/transformSlotOutlet.ts
+++ b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
@@ -1,17 +1,19 @@
-import { NodeTransform, TransformContext } from '../transform'
+import type { NodeTransform, TransformContext } from '../transform'
 import {
+  type CallExpression,
+  type ExpressionNode,
   NodeTypes,
-  CallExpression,
+  type SlotOutletNode,
   createCallExpression,
-  ExpressionNode,
-  SlotOutletNode,
-  createFunctionExpression
+  createFunctionExpression,
+  createSimpleExpression,
 } from '../ast'
 import { isSlotOutlet, isStaticArgOf, isStaticExp } from '../utils'
-import { buildProps, PropsExpression } from './transformElement'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { type PropsExpression, buildProps } from './transformElement'
+import { ErrorCodes, createCompilerError } from '../errors'
 import { RENDER_SLOT } from '../runtimeHelpers'
 import { camelize } from '@vue/shared'
+import { processExpression } from './transformExpression'
 
 export const transformSlotOutlet: NodeTransform = (node, context) => {
   if (isSlotOutlet(node)) {
@@ -23,7 +25,7 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
       slotName,
       '{}',
       'undefined',
-      'true'
+      'true',
     ]
     let expectedLen = 2
 
@@ -45,7 +47,7 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
     node.codegenNode = createCallExpression(
       context.helper(RENDER_SLOT),
       slotArgs,
-      loc
+      loc,
     )
   }
 }
@@ -57,7 +59,7 @@ interface SlotOutletProcessResult {
 
 export function processSlotOutlet(
   node: SlotOutletNode,
-  context: TransformContext
+  context: TransformContext,
 ): SlotOutletProcessResult {
   let slotName: string | ExpressionNode = `"default"`
   let slotProps: PropsExpression | undefined = undefined
@@ -76,7 +78,15 @@ export function processSlotOutlet(
       }
     } else {
       if (p.name === 'bind' && isStaticArgOf(p.arg, 'name')) {
-        if (p.exp) slotName = p.exp
+        if (p.exp) {
+          slotName = p.exp
+        } else if (p.arg && p.arg.type === NodeTypes.SIMPLE_EXPRESSION) {
+          const name = camelize(p.arg.content)
+          slotName = p.exp = createSimpleExpression(name, false, p.arg.loc)
+          if (!__BROWSER__) {
+            slotName = p.exp = processExpression(p.exp, context)
+          }
+        }
       } else {
         if (p.name === 'bind' && p.arg && isStaticExp(p.arg)) {
           p.arg.content = camelize(p.arg.content)
@@ -92,7 +102,7 @@ export function processSlotOutlet(
       context,
       nonNameProps,
       false,
-      false
+      false,
     )
     slotProps = props
 
@@ -100,14 +110,14 @@ export function processSlotOutlet(
       context.onError(
         createCompilerError(
           ErrorCodes.X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET,
-          directives[0].loc
-        )
+          directives[0].loc,
+        ),
       )
     }
   }
 
   return {
     slotName,
-    slotProps
+    slotProps,
   }
 }
diff --git a/packages/compiler-core/src/transforms/transformText.ts b/packages/compiler-core/src/transforms/transformText.ts
index 2c8ab384f..6ae97d903 100644
--- a/packages/compiler-core/src/transforms/transformText.ts
+++ b/packages/compiler-core/src/transforms/transformText.ts
@@ -1,17 +1,17 @@
-import { NodeTransform } from '../transform'
+import type { NodeTransform } from '../transform'
 import {
-  NodeTypes,
-  CompoundExpressionNode,
-  createCallExpression,
-  CallExpression,
-  ElementTypes,
+  type CallExpression,
+  type CompoundExpressionNode,
   ConstantTypes,
-  createCompoundExpression
+  ElementTypes,
+  NodeTypes,
+  createCallExpression,
+  createCompoundExpression,
 } from '../ast'
 import { isText } from '../utils'
 import { CREATE_TEXT } from '../runtimeHelpers'
-import { PatchFlags, PatchFlagNames } from '@vue/shared'
-import { getConstantType } from './hoistStatic'
+import { PatchFlagNames, PatchFlags } from '@vue/shared'
+import { getConstantType } from './cacheStatic'
 
 // Merge adjacent text nodes and expressions into a single expression
 // e.g. <div>abc {{ d }} {{ e }}</div> should have a single expression node as child.
@@ -39,7 +39,7 @@ export const transformText: NodeTransform = (node, context) => {
               if (!currentContainer) {
                 currentContainer = children[i] = createCompoundExpression(
                   [child],
-                  child.loc
+                  child.loc,
                 )
               }
               // merge adjacent text node into current
@@ -72,7 +72,7 @@ export const transformText: NodeTransform = (node, context) => {
               !node.props.find(
                 p =>
                   p.type === NodeTypes.DIRECTIVE &&
-                  !context.directiveTransforms[p.name]
+                  !context.directiveTransforms[p.name],
               ) &&
               // in compat mode, <template> tags with no special directives
               // will be rendered as a fragment so its children must be
@@ -100,7 +100,7 @@ export const transformText: NodeTransform = (node, context) => {
           ) {
             callArgs.push(
               PatchFlags.TEXT +
-                (__DEV__ ? ` /* ${PatchFlagNames[PatchFlags.TEXT]} */` : ``)
+                (__DEV__ ? ` /* ${PatchFlagNames[PatchFlags.TEXT]} */` : ``),
             )
           }
           children[i] = {
@@ -109,8 +109,8 @@ export const transformText: NodeTransform = (node, context) => {
             loc: child.loc,
             codegenNode: createCallExpression(
               context.helper(CREATE_TEXT),
-              callArgs
-            )
+              callArgs,
+            ),
           }
         }
       }
diff --git a/packages/compiler-core/src/transforms/vBind.ts b/packages/compiler-core/src/transforms/vBind.ts
index ffaf903b9..233ed1e7e 100644
--- a/packages/compiler-core/src/transforms/vBind.ts
+++ b/packages/compiler-core/src/transforms/vBind.ts
@@ -1,21 +1,66 @@
-import { DirectiveTransform } from '../transform'
+import type { DirectiveTransform, TransformContext } from '../transform'
 import {
+  type DirectiveNode,
+  type ExpressionNode,
+  NodeTypes,
+  type SimpleExpressionNode,
   createObjectProperty,
   createSimpleExpression,
-  ExpressionNode,
-  NodeTypes
 } from '../ast'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import { camelize } from '@vue/shared'
 import { CAMELIZE } from '../runtimeHelpers'
+import { processExpression } from './transformExpression'
 
 // v-bind without arg is handled directly in ./transformElements.ts due to it affecting
 // codegen for the entire props object. This transform here is only for v-bind
 // *with* args.
 export const transformBind: DirectiveTransform = (dir, _node, context) => {
-  const { exp, modifiers, loc } = dir
+  const { modifiers, loc } = dir
   const arg = dir.arg!
 
+  let { exp } = dir
+
+  // handle empty expression
+  if (exp && exp.type === NodeTypes.SIMPLE_EXPRESSION && !exp.content.trim()) {
+    if (!__BROWSER__) {
+      // #10280 only error against empty expression in non-browser build
+      // because :foo in in-DOM templates will be parsed into :foo="" by the
+      // browser
+      context.onError(
+        createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, loc),
+      )
+      return {
+        props: [
+          createObjectProperty(arg, createSimpleExpression('', true, loc)),
+        ],
+      }
+    } else {
+      exp = undefined
+    }
+  }
+
+  // same-name shorthand - :arg is expanded to :arg="arg"
+  if (!exp) {
+    if (arg.type !== NodeTypes.SIMPLE_EXPRESSION || !arg.isStatic) {
+      // only simple expression is allowed for same-name shorthand
+      context.onError(
+        createCompilerError(
+          ErrorCodes.X_V_BIND_INVALID_SAME_NAME_ARGUMENT,
+          arg.loc,
+        ),
+      )
+      return {
+        props: [
+          createObjectProperty(arg, createSimpleExpression('', true, loc)),
+        ],
+      }
+    }
+
+    transformBindShorthand(dir, context)
+    exp = dir.exp!
+  }
+
   if (arg.type !== NodeTypes.SIMPLE_EXPRESSION) {
     arg.children.unshift(`(`)
     arg.children.push(`) || ""`)
@@ -24,7 +69,7 @@ export const transformBind: DirectiveTransform = (dir, _node, context) => {
   }
 
   // .sync is replaced by v-model:arg
-  if (modifiers.includes('camel')) {
+  if (modifiers.some(mod => mod.content === 'camel')) {
     if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
       if (arg.isStatic) {
         arg.content = camelize(arg.content)
@@ -38,26 +83,29 @@ export const transformBind: DirectiveTransform = (dir, _node, context) => {
   }
 
   if (!context.inSSR) {
-    if (modifiers.includes('prop')) {
+    if (modifiers.some(mod => mod.content === 'prop')) {
       injectPrefix(arg, '.')
     }
-    if (modifiers.includes('attr')) {
+    if (modifiers.some(mod => mod.content === 'attr')) {
       injectPrefix(arg, '^')
     }
   }
 
-  if (
-    !exp ||
-    (exp.type === NodeTypes.SIMPLE_EXPRESSION && !exp.content.trim())
-  ) {
-    context.onError(createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, loc))
-    return {
-      props: [createObjectProperty(arg, createSimpleExpression('', true, loc))]
-    }
-  }
-
   return {
-    props: [createObjectProperty(arg, exp)]
+    props: [createObjectProperty(arg, exp)],
+  }
+}
+
+export const transformBindShorthand = (
+  dir: DirectiveNode,
+  context: TransformContext,
+): void => {
+  const arg = dir.arg!
+
+  const propName = camelize((arg as SimpleExpressionNode).content)
+  dir.exp = createSimpleExpression(propName, false, arg.loc)
+  if (!__BROWSER__) {
+    dir.exp = processExpression(dir.exp, context)
   }
 }
 
diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
index 3f725b71b..ec1c21ff8 100644
--- a/packages/compiler-core/src/transforms/vFor.ts
+++ b/packages/compiler-core/src/transforms/vFor.ts
@@ -1,56 +1,56 @@
 import {
+  type NodeTransform,
+  type TransformContext,
   createStructuralDirectiveTransform,
-  TransformContext
 } from '../transform'
 import {
+  type BlockCodegenNode,
+  ConstantTypes,
+  type DirectiveNode,
+  type ElementNode,
+  type ExpressionNode,
+  type ForCodegenNode,
+  type ForIteratorExpression,
+  type ForNode,
+  type ForParseResult,
+  type ForRenderListExpression,
   NodeTypes,
-  ExpressionNode,
-  createSimpleExpression,
-  SourceLocation,
-  SimpleExpressionNode,
+  type PlainElementNode,
+  type RenderSlotCall,
+  type SimpleExpressionNode,
+  type SlotOutletNode,
+  type VNodeCall,
+  createBlockStatement,
   createCallExpression,
+  createCompoundExpression,
   createFunctionExpression,
   createObjectExpression,
   createObjectProperty,
-  ForCodegenNode,
-  RenderSlotCall,
-  SlotOutletNode,
-  ElementNode,
-  DirectiveNode,
-  ForNode,
-  PlainElementNode,
+  createSimpleExpression,
   createVNodeCall,
-  VNodeCall,
-  ForRenderListExpression,
-  BlockCodegenNode,
-  ForIteratorExpression,
-  ConstantTypes,
-  createBlockStatement,
-  createCompoundExpression,
   getVNodeBlockHelper,
-  getVNodeHelper
+  getVNodeHelper,
 } from '../ast'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import {
-  getInnerRange,
-  findProp,
-  isTemplateNode,
-  isSlotOutlet,
-  injectProp,
   findDir,
-  forAliasRE
+  findProp,
+  injectProp,
+  isSlotOutlet,
+  isTemplateNode,
 } from '../utils'
 import {
-  RENDER_LIST,
-  OPEN_BLOCK,
   FRAGMENT,
-  IS_MEMO_SAME
+  IS_MEMO_SAME,
+  OPEN_BLOCK,
+  RENDER_LIST,
 } from '../runtimeHelpers'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
-import { PatchFlags, PatchFlagNames } from '@vue/shared'
+import { PatchFlags } from '@vue/shared'
+import { transformBindShorthand } from './vBind'
 
-export const transformFor = createStructuralDirectiveTransform(
+export const transformFor: NodeTransform = createStructuralDirectiveTransform(
   'for',
   (node, dir, context) => {
     const { helper, removeHelper } = context
@@ -58,17 +58,24 @@ export const transformFor = createStructuralDirectiveTransform(
       // create the loop render function expression now, and add the
       // iterator on exit after all children have been traversed
       const renderExp = createCallExpression(helper(RENDER_LIST), [
-        forNode.source
+        forNode.source,
       ]) as ForRenderListExpression
       const isTemplate = isTemplateNode(node)
       const memo = findDir(node, 'memo')
-      const keyProp = findProp(node, `key`)
+      const keyProp = findProp(node, `key`, false, true)
+      if (keyProp && keyProp.type === NodeTypes.DIRECTIVE && !keyProp.exp) {
+        // resolve :key shorthand #10882
+        transformBindShorthand(keyProp, context)
+      }
       const keyExp =
         keyProp &&
         (keyProp.type === NodeTypes.ATTRIBUTE
-          ? createSimpleExpression(keyProp.value!.content, true)
-          : keyProp.exp!)
-      const keyProperty = keyProp ? createObjectProperty(`key`, keyExp!) : null
+          ? keyProp.value
+            ? createSimpleExpression(keyProp.value.content, true)
+            : undefined
+          : keyProp.exp)
+      const keyProperty =
+        keyProp && keyExp ? createObjectProperty(`key`, keyExp) : null
 
       if (!__BROWSER__ && isTemplate) {
         // #2085 / #5288 process :key and v-memo expressions need to be
@@ -78,13 +85,13 @@ export const transformFor = createStructuralDirectiveTransform(
         if (memo) {
           memo.exp = processExpression(
             memo.exp! as SimpleExpressionNode,
-            context
+            context,
           )
         }
         if (keyProperty && keyProp!.type !== NodeTypes.ATTRIBUTE) {
           keyProperty.value = processExpression(
             keyProperty.value as SimpleExpressionNode,
-            context
+            context,
           )
         }
       }
@@ -103,14 +110,13 @@ export const transformFor = createStructuralDirectiveTransform(
         helper(FRAGMENT),
         undefined,
         renderExp,
-        fragmentFlag +
-          (__DEV__ ? ` /* ${PatchFlagNames[fragmentFlag]} */` : ``),
+        fragmentFlag,
         undefined,
         undefined,
         true /* isBlock */,
         !isStableFragment /* disableTracking */,
         false /* isComponent */,
-        node.loc
+        node.loc,
       ) as ForCodegenNode
 
       return () => {
@@ -127,8 +133,8 @@ export const transformFor = createStructuralDirectiveTransform(
                 context.onError(
                   createCompilerError(
                     ErrorCodes.X_V_FOR_TEMPLATE_KEY_PLACEMENT,
-                    key.loc
-                  )
+                    key.loc,
+                  ),
                 )
                 return true
               }
@@ -163,15 +169,12 @@ export const transformFor = createStructuralDirectiveTransform(
             helper(FRAGMENT),
             keyProperty ? createObjectExpression([keyProperty]) : undefined,
             node.children,
-            PatchFlags.STABLE_FRAGMENT +
-              (__DEV__
-                ? ` /* ${PatchFlagNames[PatchFlags.STABLE_FRAGMENT]} */`
-                : ``),
+            PatchFlags.STABLE_FRAGMENT,
             undefined,
             undefined,
             true,
             undefined,
-            false /* isComponent */
+            false /* isComponent */,
           )
         } else {
           // Normal element v-for. Directly use the child's codegenNode
@@ -186,12 +189,12 @@ export const transformFor = createStructuralDirectiveTransform(
               // switch from block to vnode
               removeHelper(OPEN_BLOCK)
               removeHelper(
-                getVNodeBlockHelper(context.inSSR, childBlock.isComponent)
+                getVNodeBlockHelper(context.inSSR, childBlock.isComponent),
               )
             } else {
               // switch from vnode to block
               removeHelper(
-                getVNodeHelper(context.inSSR, childBlock.isComponent)
+                getVNodeHelper(context.inSSR, childBlock.isComponent),
               )
             }
           }
@@ -207,8 +210,8 @@ export const transformFor = createStructuralDirectiveTransform(
         if (memo) {
           const loop = createFunctionExpression(
             createForLoopParams(forNode.parseResult, [
-              createSimpleExpression(`_cached`)
-            ])
+              createSimpleExpression(`_cached`),
+            ]),
           )
           loop.body = createBlockStatement([
             createCompoundExpression([`const _memo = (`, memo.exp!, `)`]),
@@ -216,30 +219,32 @@ export const transformFor = createStructuralDirectiveTransform(
               `if (_cached`,
               ...(keyExp ? [` && _cached.key === `, keyExp] : []),
               ` && ${context.helperString(
-                IS_MEMO_SAME
-              )}(_cached, _memo)) return _cached`
+                IS_MEMO_SAME,
+              )}(_cached, _memo)) return _cached`,
             ]),
             createCompoundExpression([`const _item = `, childBlock as any]),
             createSimpleExpression(`_item.memo = _memo`),
-            createSimpleExpression(`return _item`)
+            createSimpleExpression(`return _item`),
           ])
           renderExp.arguments.push(
             loop as ForIteratorExpression,
             createSimpleExpression(`_cache`),
-            createSimpleExpression(String(context.cached++))
+            createSimpleExpression(String(context.cached.length)),
           )
+          // increment cache count
+          context.cached.push(null)
         } else {
           renderExp.arguments.push(
             createFunctionExpression(
               createForLoopParams(forNode.parseResult),
               childBlock,
-              true /* force newline */
-            ) as ForIteratorExpression
+              true /* force newline */,
+            ) as ForIteratorExpression,
           )
         }
       }
     })
-  }
+  },
 )
 
 // target-agnostic transform used for both Client and SSR
@@ -247,29 +252,26 @@ export function processFor(
   node: ElementNode,
   dir: DirectiveNode,
   context: TransformContext,
-  processCodegen?: (forNode: ForNode) => (() => void) | undefined
+  processCodegen?: (forNode: ForNode) => (() => void) | undefined,
 ) {
   if (!dir.exp) {
     context.onError(
-      createCompilerError(ErrorCodes.X_V_FOR_NO_EXPRESSION, dir.loc)
+      createCompilerError(ErrorCodes.X_V_FOR_NO_EXPRESSION, dir.loc),
     )
     return
   }
 
-  const parseResult = parseForExpression(
-    // can only be simple expression because vFor transform is applied
-    // before expression transform.
-    dir.exp as SimpleExpressionNode,
-    context
-  )
+  const parseResult = dir.forParseResult
 
   if (!parseResult) {
     context.onError(
-      createCompilerError(ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION, dir.loc)
+      createCompilerError(ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION, dir.loc),
     )
     return
   }
 
+  finalizeForParseResult(parseResult, context)
+
   const { addIdentifiers, removeIdentifiers, scopes } = context
   const { source, value, key, index } = parseResult
 
@@ -281,7 +283,7 @@ export function processFor(
     keyAlias: key,
     objectIndexAlias: index,
     parseResult,
-    children: isTemplateNode(node) ? node.children : [node]
+    children: isTemplateNode(node) ? node.children : [node],
   }
 
   context.replaceNode(forNode)
@@ -298,7 +300,7 @@ export function processFor(
 
   const onExit = processCodegen && processCodegen(forNode)
 
-  return () => {
+  return (): void => {
     scopes.vFor--
     if (!__BROWSER__ && context.prefixIdentifiers) {
       value && removeIdentifiers(value)
@@ -309,139 +311,75 @@ export function processFor(
   }
 }
 
-// This regex doesn't cover the case if key or index aliases have destructuring,
-// but those do not make sense in the first place, so this works in practice.
-const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
-const stripParensRE = /^\(|\)$/g
+export function finalizeForParseResult(
+  result: ForParseResult,
+  context: TransformContext,
+): void {
+  if (result.finalized) return
 
-export interface ForParseResult {
-  source: ExpressionNode
-  value: ExpressionNode | undefined
-  key: ExpressionNode | undefined
-  index: ExpressionNode | undefined
-}
-
-export function parseForExpression(
-  input: SimpleExpressionNode,
-  context: TransformContext
-): ForParseResult | undefined {
-  const loc = input.loc
-  const exp = input.content
-  const inMatch = exp.match(forAliasRE)
-  if (!inMatch) return
-
-  const [, LHS, RHS] = inMatch
-
-  const result: ForParseResult = {
-    source: createAliasExpression(
-      loc,
-      RHS.trim(),
-      exp.indexOf(RHS, LHS.length)
-    ),
-    value: undefined,
-    key: undefined,
-    index: undefined
-  }
   if (!__BROWSER__ && context.prefixIdentifiers) {
     result.source = processExpression(
       result.source as SimpleExpressionNode,
-      context
+      context,
     )
-  }
-  if (__DEV__ && __BROWSER__) {
-    validateBrowserExpression(result.source as SimpleExpressionNode, context)
-  }
-
-  let valueContent = LHS.trim().replace(stripParensRE, '').trim()
-  const trimmedOffset = LHS.indexOf(valueContent)
-
-  const iteratorMatch = valueContent.match(forIteratorRE)
-  if (iteratorMatch) {
-    valueContent = valueContent.replace(forIteratorRE, '').trim()
-
-    const keyContent = iteratorMatch[1].trim()
-    let keyOffset: number | undefined
-    if (keyContent) {
-      keyOffset = exp.indexOf(keyContent, trimmedOffset + valueContent.length)
-      result.key = createAliasExpression(loc, keyContent, keyOffset)
-      if (!__BROWSER__ && context.prefixIdentifiers) {
-        result.key = processExpression(result.key, context, true)
-      }
-      if (__DEV__ && __BROWSER__) {
-        validateBrowserExpression(
-          result.key as SimpleExpressionNode,
-          context,
-          true
-        )
-      }
+    if (result.key) {
+      result.key = processExpression(
+        result.key as SimpleExpressionNode,
+        context,
+        true,
+      )
     }
-
-    if (iteratorMatch[2]) {
-      const indexContent = iteratorMatch[2].trim()
-
-      if (indexContent) {
-        result.index = createAliasExpression(
-          loc,
-          indexContent,
-          exp.indexOf(
-            indexContent,
-            result.key
-              ? keyOffset! + keyContent.length
-              : trimmedOffset + valueContent.length
-          )
-        )
-        if (!__BROWSER__ && context.prefixIdentifiers) {
-          result.index = processExpression(result.index, context, true)
-        }
-        if (__DEV__ && __BROWSER__) {
-          validateBrowserExpression(
-            result.index as SimpleExpressionNode,
-            context,
-            true
-          )
-        }
-      }
+    if (result.index) {
+      result.index = processExpression(
+        result.index as SimpleExpressionNode,
+        context,
+        true,
+      )
     }
-  }
-
-  if (valueContent) {
-    result.value = createAliasExpression(loc, valueContent, trimmedOffset)
-    if (!__BROWSER__ && context.prefixIdentifiers) {
-      result.value = processExpression(result.value, context, true)
-    }
-    if (__DEV__ && __BROWSER__) {
-      validateBrowserExpression(
+    if (result.value) {
+      result.value = processExpression(
         result.value as SimpleExpressionNode,
         context,
-        true
+        true,
       )
     }
   }
-
-  return result
-}
-
-function createAliasExpression(
-  range: SourceLocation,
-  content: string,
-  offset: number
-): SimpleExpressionNode {
-  return createSimpleExpression(
-    content,
-    false,
-    getInnerRange(range, offset, content.length)
-  )
+  if (__DEV__ && __BROWSER__) {
+    validateBrowserExpression(result.source as SimpleExpressionNode, context)
+    if (result.key) {
+      validateBrowserExpression(
+        result.key as SimpleExpressionNode,
+        context,
+        true,
+      )
+    }
+    if (result.index) {
+      validateBrowserExpression(
+        result.index as SimpleExpressionNode,
+        context,
+        true,
+      )
+    }
+    if (result.value) {
+      validateBrowserExpression(
+        result.value as SimpleExpressionNode,
+        context,
+        true,
+      )
+    }
+  }
+  result.finalized = true
 }
 
 export function createForLoopParams(
   { value, key, index }: ForParseResult,
-  memoArgs: ExpressionNode[] = []
+  memoArgs: ExpressionNode[] = [],
 ): ExpressionNode[] {
   return createParamsList([value, key, index, ...memoArgs])
 }
 
 function createParamsList(
-  args: (ExpressionNode | undefined)[]
+  args: (ExpressionNode | undefined)[],
 ): ExpressionNode[] {
   let i = args.length
   while (i--) {
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index 4e1673561..caefa197e 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -1,45 +1,40 @@
 import {
+  type NodeTransform,
+  type TransformContext,
   createStructuralDirectiveTransform,
-  TransformContext,
-  traverseNode
+  traverseNode,
 } from '../transform'
 import {
-  NodeTypes,
+  type AttributeNode,
+  type BlockCodegenNode,
+  type CacheExpression,
+  ConstantTypes,
+  type DirectiveNode,
+  type ElementNode,
   ElementTypes,
-  ElementNode,
-  DirectiveNode,
-  IfBranchNode,
-  SimpleExpressionNode,
+  type IfBranchNode,
+  type IfConditionalExpression,
+  type IfNode,
+  type MemoExpression,
+  NodeTypes,
+  type SimpleExpressionNode,
+  convertToBlock,
   createCallExpression,
   createConditionalExpression,
-  createSimpleExpression,
-  createObjectProperty,
   createObjectExpression,
-  IfConditionalExpression,
-  BlockCodegenNode,
-  IfNode,
+  createObjectProperty,
+  createSimpleExpression,
   createVNodeCall,
-  AttributeNode,
   locStub,
-  CacheExpression,
-  ConstantTypes,
-  MemoExpression,
-  convertToBlock
 } from '../ast'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
-import { FRAGMENT, CREATE_COMMENT } from '../runtimeHelpers'
-import {
-  injectProp,
-  findDir,
-  findProp,
-  isBuiltInType,
-  getMemoedVNodeCall
-} from '../utils'
-import { PatchFlags, PatchFlagNames } from '@vue/shared'
+import { CREATE_COMMENT, FRAGMENT } from '../runtimeHelpers'
+import { findDir, findProp, getMemoedVNodeCall, injectProp } from '../utils'
+import { PatchFlags } from '@vue/shared'
 
-export const transformIf = createStructuralDirectiveTransform(
+export const transformIf: NodeTransform = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
   (node, dir, context) => {
     return processIf(node, dir, context, (ifNode, branch, isRoot) => {
@@ -63,7 +58,7 @@ export const transformIf = createStructuralDirectiveTransform(
           ifNode.codegenNode = createCodegenNodeForBranch(
             branch,
             key,
-            context
+            context,
           ) as IfConditionalExpression
         } else {
           // attach this branch's codegen node to the v-if root.
@@ -71,12 +66,12 @@ export const transformIf = createStructuralDirectiveTransform(
           parentCondition.alternate = createCodegenNodeForBranch(
             branch,
             key + ifNode.branches.length - 1,
-            context
+            context,
           )
         }
       }
     })
-  }
+  },
 )
 
 // target-agnostic transform used for both Client and SSR
@@ -87,16 +82,16 @@ export function processIf(
   processCodegen?: (
     node: IfNode,
     branch: IfBranchNode,
-    isRoot: boolean
-  ) => (() => void) | undefined
-) {
+    isRoot: boolean,
+  ) => (() => void) | undefined,
+): (() => void) | undefined {
   if (
     dir.name !== 'else' &&
     (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim())
   ) {
     const loc = dir.exp ? dir.exp.loc : node.loc
     context.onError(
-      createCompilerError(ErrorCodes.X_V_IF_NO_EXPRESSION, dir.loc)
+      createCompilerError(ErrorCodes.X_V_IF_NO_EXPRESSION, dir.loc),
     )
     dir.exp = createSimpleExpression(`true`, false, loc)
   }
@@ -116,7 +111,7 @@ export function processIf(
     const ifNode: IfNode = {
       type: NodeTypes.IF,
       loc: node.loc,
-      branches: [branch]
+      branches: [branch],
     }
     context.replaceNode(ifNode)
     if (processCodegen) {
@@ -151,7 +146,7 @@ export function processIf(
           sibling.branches[sibling.branches.length - 1].condition === undefined
         ) {
           context.onError(
-            createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc)
+            createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc),
           )
         }
 
@@ -165,7 +160,8 @@ export function processIf(
           !(
             context.parent &&
             context.parent.type === NodeTypes.ELEMENT &&
-            isBuiltInType(context.parent.tag, 'transition')
+            (context.parent.tag === 'transition' ||
+              context.parent.tag === 'Transition')
           )
         ) {
           branch.children = [...comments, ...branch.children]
@@ -180,8 +176,8 @@ export function processIf(
                 context.onError(
                   createCompilerError(
                     ErrorCodes.X_V_IF_SAME_KEY,
-                    branch.userKey!.loc
-                  )
+                    branch.userKey!.loc,
+                  ),
                 )
               }
             })
@@ -200,7 +196,7 @@ export function processIf(
         context.currentNode = null
       } else {
         context.onError(
-          createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc)
+          createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc),
         )
       }
       break
@@ -216,14 +212,14 @@ function createIfBranch(node: ElementNode, dir: DirectiveNode): IfBranchNode {
     condition: dir.name === 'else' ? undefined : dir.exp,
     children: isTemplateIf && !findDir(node, 'for') ? node.children : [node],
     userKey: findProp(node, `key`),
-    isTemplateIf
+    isTemplateIf,
   }
 }
 
 function createCodegenNodeForBranch(
   branch: IfBranchNode,
   keyIndex: number,
-  context: TransformContext
+  context: TransformContext,
 ): IfConditionalExpression | BlockCodegenNode | MemoExpression {
   if (branch.condition) {
     return createConditionalExpression(
@@ -233,8 +229,8 @@ function createCodegenNodeForBranch(
       // closes the current block.
       createCallExpression(context.helper(CREATE_COMMENT), [
         __DEV__ ? '"v-if"' : '""',
-        'true'
-      ])
+        'true',
+      ]),
     ) as IfConditionalExpression
   } else {
     return createChildrenCodegenNode(branch, keyIndex, context)
@@ -244,7 +240,7 @@ function createCodegenNodeForBranch(
 function createChildrenCodegenNode(
   branch: IfBranchNode,
   keyIndex: number,
-  context: TransformContext
+  context: TransformContext,
 ): BlockCodegenNode | MemoExpression {
   const { helper } = context
   const keyProperty = createObjectProperty(
@@ -253,8 +249,8 @@ function createChildrenCodegenNode(
       `${keyIndex}`,
       false,
       locStub,
-      ConstantTypes.CAN_HOIST
-    )
+      ConstantTypes.CAN_CACHE,
+    ),
   )
   const { children } = branch
   const firstChild = children[0]
@@ -268,7 +264,6 @@ function createChildrenCodegenNode(
       return vnodeCall
     } else {
       let patchFlag = PatchFlags.STABLE_FRAGMENT
-      let patchFlagText = PatchFlagNames[PatchFlags.STABLE_FRAGMENT]
       // check if the fragment actually contains a single valid child with
       // the rest being comments
       if (
@@ -277,7 +272,6 @@ function createChildrenCodegenNode(
         children.filter(c => c.type !== NodeTypes.COMMENT).length === 1
       ) {
         patchFlag |= PatchFlags.DEV_ROOT_FRAGMENT
-        patchFlagText += `, ${PatchFlagNames[PatchFlags.DEV_ROOT_FRAGMENT]}`
       }
 
       return createVNodeCall(
@@ -285,13 +279,13 @@ function createChildrenCodegenNode(
         helper(FRAGMENT),
         createObjectExpression([keyProperty]),
         children,
-        patchFlag + (__DEV__ ? ` /* ${patchFlagText} */` : ``),
+        patchFlag,
         undefined,
         undefined,
         true,
         false,
         false /* isComponent */,
-        branch.loc
+        branch.loc,
       )
     }
   } else {
@@ -311,7 +305,7 @@ function createChildrenCodegenNode(
 
 function isSameKey(
   a: AttributeNode | DirectiveNode | undefined,
-  b: AttributeNode | DirectiveNode
+  b: AttributeNode | DirectiveNode,
 ): boolean {
   if (!a || a.type !== b.type) {
     return false
@@ -339,7 +333,7 @@ function isSameKey(
 }
 
 function getParentCondition(
-  node: IfConditionalExpression | CacheExpression
+  node: IfConditionalExpression | CacheExpression,
 ): IfConditionalExpression {
   while (true) {
     if (node.type === NodeTypes.JS_CONDITIONAL_EXPRESSION) {
diff --git a/packages/compiler-core/src/transforms/vMemo.ts b/packages/compiler-core/src/transforms/vMemo.ts
index c14f6ceb8..83295a45c 100644
--- a/packages/compiler-core/src/transforms/vMemo.ts
+++ b/packages/compiler-core/src/transforms/vMemo.ts
@@ -1,13 +1,13 @@
-import { NodeTransform } from '../transform'
+import type { NodeTransform } from '../transform'
 import { findDir } from '../utils'
 import {
+  ElementTypes,
+  type MemoExpression,
+  NodeTypes,
+  type PlainElementNode,
   convertToBlock,
   createCallExpression,
   createFunctionExpression,
-  ElementTypes,
-  MemoExpression,
-  NodeTypes,
-  PlainElementNode
 } from '../ast'
 import { WITH_MEMO } from '../runtimeHelpers'
 
@@ -33,8 +33,10 @@ export const transformMemo: NodeTransform = (node, context) => {
           dir.exp!,
           createFunctionExpression(undefined, codegenNode),
           `_cache`,
-          String(context.cached++)
+          String(context.cached.length),
         ]) as MemoExpression
+        // increment cache count
+        context.cached.push(null)
       }
     }
   }
diff --git a/packages/compiler-core/src/transforms/vModel.ts b/packages/compiler-core/src/transforms/vModel.ts
index 3f13f3270..598c1ea43 100644
--- a/packages/compiler-core/src/transforms/vModel.ts
+++ b/packages/compiler-core/src/transforms/vModel.ts
@@ -1,20 +1,20 @@
-import { DirectiveTransform } from '../transform'
+import type { DirectiveTransform } from '../transform'
 import {
-  createSimpleExpression,
-  createObjectProperty,
-  createCompoundExpression,
-  NodeTypes,
-  Property,
+  ConstantTypes,
   ElementTypes,
-  ExpressionNode,
-  ConstantTypes
+  type ExpressionNode,
+  NodeTypes,
+  type Property,
+  createCompoundExpression,
+  createObjectProperty,
+  createSimpleExpression,
 } from '../ast'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import {
+  hasScopeRef,
   isMemberExpression,
   isSimpleIdentifier,
-  hasScopeRef,
-  isStaticExp
+  isStaticExp,
 } from '../utils'
 import { IS_REF } from '../runtimeHelpers'
 import { BindingTypes } from '../options'
@@ -24,12 +24,14 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
   const { exp, arg } = dir
   if (!exp) {
     context.onError(
-      createCompilerError(ErrorCodes.X_V_MODEL_NO_EXPRESSION, dir.loc)
+      createCompilerError(ErrorCodes.X_V_MODEL_NO_EXPRESSION, dir.loc),
     )
     return createTransformProps()
   }
 
-  const rawExp = exp.loc.source
+  // we assume v-model directives are always parsed
+  // (not artificially created by a transform)
+  const rawExp = exp.loc.source.trim()
   const expString =
     exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : rawExp
 
@@ -53,12 +55,9 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       bindingType === BindingTypes.SETUP_REF ||
       bindingType === BindingTypes.SETUP_MAYBE_REF)
 
-  if (
-    !expString.trim() ||
-    (!isMemberExpression(expString, context) && !maybeRef)
-  ) {
+  if (!expString.trim() || (!isMemberExpression(exp, context) && !maybeRef)) {
     context.onError(
-      createCompilerError(ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION, exp.loc)
+      createCompilerError(ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION, exp.loc),
     )
     return createTransformProps()
   }
@@ -70,7 +69,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     context.identifiers[expString]
   ) {
     context.onError(
-      createCompilerError(ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE, exp.loc)
+      createCompilerError(ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE, exp.loc),
     )
     return createTransformProps()
   }
@@ -90,7 +89,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       assignmentExp = createCompoundExpression([
         `${eventArg} => ((`,
         createSimpleExpression(rawExp, false, exp.loc),
-        `).value = $event)`
+        `).value = $event)`,
       ])
     } else {
       // v-model used on a potentially ref binding in <script setup> inline mode.
@@ -100,14 +99,14 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       assignmentExp = createCompoundExpression([
         `${eventArg} => (${context.helperString(IS_REF)}(${rawExp}) ? (`,
         createSimpleExpression(rawExp, false, exp.loc),
-        `).value = $event : ${altAssignment})`
+        `).value = $event : ${altAssignment})`,
       ])
     }
   } else {
     assignmentExp = createCompoundExpression([
       `${eventArg} => ((`,
       exp,
-      `) = $event)`
+      `) = $event)`,
     ])
   }
 
@@ -115,7 +114,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     // modelValue: foo
     createObjectProperty(propName, dir.exp!),
     // "onUpdate:modelValue": $event => (foo = $event)
-    createObjectProperty(eventName, assignmentExp)
+    createObjectProperty(eventName, assignmentExp),
   ]
 
   // cache v-model handler if applicable (when it doesn't refer any scope vars)
@@ -132,6 +131,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
   // modelModifiers: { foo: true, "bar-baz": true }
   if (dir.modifiers.length && node.tagType === ElementTypes.COMPONENT) {
     const modifiers = dir.modifiers
+      .map(m => m.content)
       .map(m => (isSimpleIdentifier(m) ? m : JSON.stringify(m)) + `: true`)
       .join(`, `)
     const modifiersKey = arg
@@ -146,9 +146,9 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
           `{ ${modifiers} }`,
           false,
           dir.loc,
-          ConstantTypes.CAN_HOIST
-        )
-      )
+          ConstantTypes.CAN_CACHE,
+        ),
+      ),
     )
   }
 
diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts
index 3deee2024..ed809a2d7 100644
--- a/packages/compiler-core/src/transforms/vOn.ts
+++ b/packages/compiler-core/src/transforms/vOn.ts
@@ -1,24 +1,21 @@
-import { DirectiveTransform, DirectiveTransformResult } from '../transform'
+import type { DirectiveTransform, DirectiveTransformResult } from '../transform'
 import {
+  type DirectiveNode,
+  ElementTypes,
+  type ExpressionNode,
+  NodeTypes,
+  type SimpleExpressionNode,
   createCompoundExpression,
   createObjectProperty,
   createSimpleExpression,
-  DirectiveNode,
-  ElementTypes,
-  ExpressionNode,
-  NodeTypes,
-  SimpleExpressionNode
 } from '../ast'
 import { camelize, toHandlerKey } from '@vue/shared'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
-import { hasScopeRef, isMemberExpression } from '../utils'
+import { hasScopeRef, isFnExpression, isMemberExpression } from '../utils'
 import { TO_HANDLER_KEY } from '../runtimeHelpers'
 
-const fnExpRE =
-  /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/
-
 export interface VOnDirectiveNode extends DirectiveNode {
   // v-on without arg is handled directly in ./transformElements.ts due to it affecting
   // codegen for the entire props object. This transform here is only for v-on
@@ -33,7 +30,7 @@ export const transformOn: DirectiveTransform = (
   dir,
   node,
   context,
-  augmentor
+  augmentor,
 ) => {
   const { loc, modifiers, arg } = dir as VOnDirectiveNode
   if (!dir.exp && !modifiers.length) {
@@ -44,9 +41,7 @@ export const transformOn: DirectiveTransform = (
     if (arg.isStatic) {
       let rawName = arg.content
       if (__DEV__ && rawName.startsWith('vnode')) {
-        context.onWarn(
-          createCompilerError(ErrorCodes.DEPRECATION_VNODE_HOOKS, arg.loc)
-        )
+        context.onError(createCompilerError(ErrorCodes.X_VNODE_HOOKS, arg.loc))
       }
       if (rawName.startsWith('vue:')) {
         rawName = `vnode-${rawName.slice(4)}`
@@ -67,7 +62,7 @@ export const transformOn: DirectiveTransform = (
       eventName = createCompoundExpression([
         `${context.helperString(TO_HANDLER_KEY)}(`,
         arg,
-        `)`
+        `)`,
       ])
     }
   } else {
@@ -86,8 +81,8 @@ export const transformOn: DirectiveTransform = (
   }
   let shouldCache: boolean = context.cacheHandlers && !exp && !context.inVOnce
   if (exp) {
-    const isMemberExp = isMemberExpression(exp.content, context)
-    const isInlineStatement = !(isMemberExp || fnExpRE.test(exp.content))
+    const isMemberExp = isMemberExpression(exp, context)
+    const isInlineStatement = !(isMemberExp || isFnExpression(exp, context))
     const hasMultipleStatements = exp.content.includes(`;`)
 
     // process the expression since it's been skipped
@@ -97,7 +92,7 @@ export const transformOn: DirectiveTransform = (
         exp,
         context,
         false,
-        hasMultipleStatements
+        hasMultipleStatements,
       )
       isInlineStatement && context.removeIdentifiers(`$event`)
       // with scope analysis, the function is hoistable if it has no reference
@@ -136,7 +131,7 @@ export const transformOn: DirectiveTransform = (
         exp as SimpleExpressionNode,
         context,
         false,
-        hasMultipleStatements
+        hasMultipleStatements,
       )
     }
 
@@ -153,7 +148,7 @@ export const transformOn: DirectiveTransform = (
               }(...args)`
         } => ${hasMultipleStatements ? `{` : `(`}`,
         exp,
-        hasMultipleStatements ? `}` : `)`
+        hasMultipleStatements ? `}` : `)`,
       ])
     }
   }
@@ -162,9 +157,9 @@ export const transformOn: DirectiveTransform = (
     props: [
       createObjectProperty(
         eventName,
-        exp || createSimpleExpression(`() => {}`, false, loc)
-      )
-    ]
+        exp || createSimpleExpression(`() => {}`, false, loc),
+      ),
+    ],
   }
 
   // apply extended compiler augmentor
diff --git a/packages/compiler-core/src/transforms/vOnce.ts b/packages/compiler-core/src/transforms/vOnce.ts
index e1ec5e129..483b98da9 100644
--- a/packages/compiler-core/src/transforms/vOnce.ts
+++ b/packages/compiler-core/src/transforms/vOnce.ts
@@ -1,6 +1,6 @@
-import { NodeTransform } from '../transform'
+import type { NodeTransform } from '../transform'
 import { findDir } from '../utils'
-import { ElementNode, ForNode, IfNode, NodeTypes } from '../ast'
+import { type ElementNode, type ForNode, type IfNode, NodeTypes } from '../ast'
 import { SET_BLOCK_TRACKING } from '../runtimeHelpers'
 
 const seen = new WeakSet()
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index 156a8461a..db367f39c 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -1,38 +1,37 @@
 import {
-  ElementNode,
-  ObjectExpression,
-  createObjectExpression,
+  type CallExpression,
+  type ConditionalExpression,
+  type DirectiveNode,
+  type ElementNode,
+  ElementTypes,
+  type ExpressionNode,
+  type FunctionExpression,
   NodeTypes,
+  type ObjectExpression,
+  type Property,
+  type SlotsExpression,
+  type SourceLocation,
+  type TemplateChildNode,
+  createArrayExpression,
+  createCallExpression,
+  createConditionalExpression,
+  createFunctionExpression,
+  createObjectExpression,
   createObjectProperty,
   createSimpleExpression,
-  createFunctionExpression,
-  DirectiveNode,
-  ElementTypes,
-  ExpressionNode,
-  Property,
-  TemplateChildNode,
-  SourceLocation,
-  createConditionalExpression,
-  ConditionalExpression,
-  SimpleExpressionNode,
-  FunctionExpression,
-  CallExpression,
-  createCallExpression,
-  createArrayExpression,
-  SlotsExpression
 } from '../ast'
-import { TransformContext, NodeTransform } from '../transform'
-import { createCompilerError, ErrorCodes } from '../errors'
+import type { NodeTransform, TransformContext } from '../transform'
+import { ErrorCodes, createCompilerError } from '../errors'
 import {
-  findDir,
-  isTemplateNode,
   assert,
-  isVSlot,
+  findDir,
   hasScopeRef,
-  isStaticExp
+  isStaticExp,
+  isTemplateNode,
+  isVSlot,
 } from '../utils'
 import { CREATE_SLOTS, RENDER_LIST, WITH_CTX } from '../runtimeHelpers'
-import { parseForExpression, createForLoopParams } from './vFor'
+import { createForLoopParams, finalizeForParseResult } from './vFor'
 import { SlotFlags, slotFlagsText } from '@vue/shared'
 
 const defaultFallback = createSimpleExpression(`undefined`, false)
@@ -78,11 +77,9 @@ export const trackVForSlotScopes: NodeTransform = (node, context) => {
     node.props.some(isVSlot) &&
     (vFor = findDir(node, 'for'))
   ) {
-    const result = (vFor.parseResult = parseForExpression(
-      vFor.exp as SimpleExpressionNode,
-      context
-    ))
+    const result = vFor.forParseResult
     if (result) {
+      finalizeForParseResult(result, context)
       const { value, key, index } = result
       const { addIdentifiers, removeIdentifiers } = context
       value && addIdentifiers(value)
@@ -100,9 +97,9 @@ export const trackVForSlotScopes: NodeTransform = (node, context) => {
 
 export type SlotFnBuilder = (
   slotProps: ExpressionNode | undefined,
-  vForExp: ExpressionNode | undefined,
+  vFor: DirectiveNode | undefined,
   slotChildren: TemplateChildNode[],
-  loc: SourceLocation
+  loc: SourceLocation,
 ) => FunctionExpression
 
 const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
@@ -111,7 +108,7 @@ const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
     children,
     false /* newline */,
     true /* isSlot */,
-    children.length ? children[0].loc : loc
+    children.length ? children[0].loc : loc,
   )
 
 // Instead of being a DirectiveTransform, v-slot processing is called during
@@ -119,7 +116,7 @@ const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
 export function buildSlots(
   node: ElementNode,
   context: TransformContext,
-  buildSlotFn: SlotFnBuilder = buildClientSlotFn
+  buildSlotFn: SlotFnBuilder = buildClientSlotFn,
 ): {
   slots: SlotsExpression
   hasDynamicSlots: boolean
@@ -150,8 +147,8 @@ export function buildSlots(
     slotsProperties.push(
       createObjectProperty(
         arg || createSimpleExpression('default', true),
-        buildSlotFn(exp, undefined, children, loc)
-      )
+        buildSlotFn(exp, undefined, children, loc),
+      ),
     )
   }
 
@@ -181,7 +178,7 @@ export function buildSlots(
     if (onComponentSlot) {
       // already has on-component slot - this is incorrect usage.
       context.onError(
-        createCompilerError(ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE, slotDir.loc)
+        createCompilerError(ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE, slotDir.loc),
       )
       break
     }
@@ -191,7 +188,7 @@ export function buildSlots(
     const {
       arg: slotName = createSimpleExpression(`default`, true),
       exp: slotProps,
-      loc: dirLoc
+      loc: dirLoc,
     } = slotDir
 
     // check if name is dynamic.
@@ -203,12 +200,7 @@ export function buildSlots(
     }
 
     const vFor = findDir(slotElement, 'for')
-    const slotFunction = buildSlotFn(
-      slotProps,
-      vFor?.exp,
-      slotChildren,
-      slotLoc
-    )
+    const slotFunction = buildSlotFn(slotProps, vFor, slotChildren, slotLoc)
 
     // check if this slot is conditional (v-if/v-for)
     let vIf: DirectiveNode | undefined
@@ -219,8 +211,8 @@ export function buildSlots(
         createConditionalExpression(
           vIf.exp!,
           buildDynamicSlot(slotName, slotFunction, conditionalBranchIndex++),
-          defaultFallback
-        )
+          defaultFallback,
+        ),
       )
     } else if (
       (vElse = findDir(slotElement, /^else(-if)?$/, true /* allowEmpty */))
@@ -234,10 +226,7 @@ export function buildSlots(
           break
         }
       }
-      if (prev && isTemplateNode(prev) && findDir(prev, 'if')) {
-        // remove node
-        children.splice(i, 1)
-        i--
+      if (prev && isTemplateNode(prev) && findDir(prev, /^(else-)?if$/)) {
         __TEST__ && assert(dynamicSlots.length > 0)
         // attach this slot to previous conditional
         let conditional = dynamicSlots[
@@ -254,22 +243,21 @@ export function buildSlots(
               buildDynamicSlot(
                 slotName,
                 slotFunction,
-                conditionalBranchIndex++
+                conditionalBranchIndex++,
               ),
-              defaultFallback
+              defaultFallback,
             )
           : buildDynamicSlot(slotName, slotFunction, conditionalBranchIndex++)
       } else {
         context.onError(
-          createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, vElse.loc)
+          createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, vElse.loc),
         )
       }
     } else if (vFor) {
       hasDynamicSlots = true
-      const parseResult =
-        vFor.parseResult ||
-        parseForExpression(vFor.exp as SimpleExpressionNode, context)
+      const parseResult = vFor.forParseResult
       if (parseResult) {
+        finalizeForParseResult(parseResult, context)
         // Render the dynamic slots as an array and add it to the createSlot()
         // args. The runtime knows how to handle it appropriately.
         dynamicSlots.push(
@@ -278,13 +266,16 @@ export function buildSlots(
             createFunctionExpression(
               createForLoopParams(parseResult),
               buildDynamicSlot(slotName, slotFunction),
-              true /* force newline */
-            )
-          ])
+              true /* force newline */,
+            ),
+          ]),
         )
       } else {
         context.onError(
-          createCompilerError(ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION, vFor.loc)
+          createCompilerError(
+            ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+            vFor.loc,
+          ),
         )
       }
     } else {
@@ -294,8 +285,8 @@ export function buildSlots(
           context.onError(
             createCompilerError(
               ErrorCodes.X_V_SLOT_DUPLICATE_SLOT_NAMES,
-              dirLoc
-            )
+              dirLoc,
+            ),
           )
           continue
         }
@@ -311,7 +302,7 @@ export function buildSlots(
   if (!onComponentSlot) {
     const buildDefaultSlotProperty = (
       props: ExpressionNode | undefined,
-      children: TemplateChildNode[]
+      children: TemplateChildNode[],
     ) => {
       const fn = buildSlotFn(props, undefined, children, loc)
       if (__COMPAT__ && context.compatConfig) {
@@ -335,12 +326,12 @@ export function buildSlots(
         context.onError(
           createCompilerError(
             ErrorCodes.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
-            implicitDefaultChildren[0].loc
-          )
+            implicitDefaultChildren[0].loc,
+          ),
         )
       } else {
         slotsProperties.push(
-          buildDefaultSlotProperty(undefined, implicitDefaultChildren)
+          buildDefaultSlotProperty(undefined, implicitDefaultChildren),
         )
       }
     }
@@ -360,37 +351,37 @@ export function buildSlots(
         // 1 = compiled and static = can skip normalization AND diff as optimized
         createSimpleExpression(
           slotFlag + (__DEV__ ? ` /* ${slotFlagsText[slotFlag]} */` : ``),
-          false
-        )
-      )
+          false,
+        ),
+      ),
     ),
-    loc
+    loc,
   ) as SlotsExpression
   if (dynamicSlots.length) {
     slots = createCallExpression(context.helper(CREATE_SLOTS), [
       slots,
-      createArrayExpression(dynamicSlots)
+      createArrayExpression(dynamicSlots),
     ]) as SlotsExpression
   }
 
   return {
     slots,
-    hasDynamicSlots
+    hasDynamicSlots,
   }
 }
 
 function buildDynamicSlot(
   name: ExpressionNode,
   fn: FunctionExpression,
-  index?: number
+  index?: number,
 ): ObjectExpression {
   const props = [
     createObjectProperty(`name`, name),
-    createObjectProperty(`fn`, fn)
+    createObjectProperty(`fn`, fn),
   ]
   if (index != null) {
     props.push(
-      createObjectProperty(`key`, createSimpleExpression(String(index), true))
+      createObjectProperty(`key`, createSimpleExpression(String(index), true)),
     )
   }
   return createObjectExpression(props)
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index baffe5086..b49d70bb2 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -1,89 +1,97 @@
 import {
-  SourceLocation,
-  Position,
-  ElementNode,
-  NodeTypes,
-  CallExpression,
-  createCallExpression,
-  DirectiveNode,
+  type BlockCodegenNode,
+  type CacheExpression,
+  type CallExpression,
+  type DirectiveNode,
+  type ElementNode,
   ElementTypes,
-  TemplateChildNode,
-  RootNode,
-  ObjectExpression,
-  Property,
-  JSChildNode,
+  type ExpressionNode,
+  type IfBranchNode,
+  type InterpolationNode,
+  type JSChildNode,
+  type MemoExpression,
+  NodeTypes,
+  type ObjectExpression,
+  type Position,
+  type Property,
+  type RenderSlotCall,
+  type RootNode,
+  type SimpleExpressionNode,
+  type SlotOutletNode,
+  type TemplateChildNode,
+  type TemplateNode,
+  type TextNode,
+  type VNodeCall,
+  createCallExpression,
   createObjectExpression,
-  SlotOutletNode,
-  TemplateNode,
-  RenderSlotCall,
-  ExpressionNode,
-  IfBranchNode,
-  TextNode,
-  InterpolationNode,
-  VNodeCall,
-  SimpleExpressionNode,
-  BlockCodegenNode,
-  MemoExpression
 } from './ast'
-import { TransformContext } from './transform'
+import type { TransformContext } from './transform'
 import {
-  MERGE_PROPS,
-  TELEPORT,
-  SUSPENSE,
-  KEEP_ALIVE,
   BASE_TRANSITION,
-  TO_HANDLERS,
-  NORMALIZE_PROPS,
   GUARD_REACTIVE_PROPS,
-  WITH_MEMO
+  KEEP_ALIVE,
+  MERGE_PROPS,
+  NORMALIZE_PROPS,
+  SUSPENSE,
+  TELEPORT,
+  TO_HANDLERS,
+  WITH_MEMO,
 } from './runtimeHelpers'
-import { isString, isObject, hyphenate, extend, NOOP } from '@vue/shared'
-import { PropsExpression } from './transforms/transformElement'
+import { NOOP, isObject, isString } from '@vue/shared'
+import type { PropsExpression } from './transforms/transformElement'
 import { parseExpression } from '@babel/parser'
-import { Expression } from '@babel/types'
+import type { Expression, Node } from '@babel/types'
+import { unwrapTSNode } from './babelUtils'
 
 export const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode =>
   p.type === NodeTypes.SIMPLE_EXPRESSION && p.isStatic
 
-export const isBuiltInType = (tag: string, expected: string): boolean =>
-  tag === expected || tag === hyphenate(expected)
-
 export function isCoreComponent(tag: string): symbol | void {
-  if (isBuiltInType(tag, 'Teleport')) {
-    return TELEPORT
-  } else if (isBuiltInType(tag, 'Suspense')) {
-    return SUSPENSE
-  } else if (isBuiltInType(tag, 'KeepAlive')) {
-    return KEEP_ALIVE
-  } else if (isBuiltInType(tag, 'BaseTransition')) {
-    return BASE_TRANSITION
+  switch (tag) {
+    case 'Teleport':
+    case 'teleport':
+      return TELEPORT
+    case 'Suspense':
+    case 'suspense':
+      return SUSPENSE
+    case 'KeepAlive':
+    case 'keep-alive':
+      return KEEP_ALIVE
+    case 'BaseTransition':
+    case 'base-transition':
+      return BASE_TRANSITION
   }
 }
 
-const nonIdentifierRE = /^\d|[^\$\w]/
+const nonIdentifierRE = /^\d|[^\$\w\xA0-\uFFFF]/
 export const isSimpleIdentifier = (name: string): boolean =>
   !nonIdentifierRE.test(name)
 
-const enum MemberExpLexState {
+enum MemberExpLexState {
   inMemberExp,
   inBrackets,
   inParens,
-  inString
+  inString,
 }
 
 const validFirstIdentCharRE = /[A-Za-z_$\xA0-\uFFFF]/
 const validIdentCharRE = /[\.\?\w$\xA0-\uFFFF]/
 const whitespaceRE = /\s+[.[]\s*|\s*[.[]\s+/g
 
+const getExpSource = (exp: ExpressionNode): string =>
+  exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : exp.loc.source
+
 /**
  * Simple lexer to check if an expression is a member expression. This is
  * lax and only checks validity at the root level (i.e. does not validate exps
  * inside square brackets), but it's ok since these are only used on template
  * expressions and false positives are invalid expressions in the first place.
  */
-export const isMemberExpressionBrowser = (path: string): boolean => {
+export const isMemberExpressionBrowser = (exp: ExpressionNode): boolean => {
   // remove whitespaces around . or [ first
-  path = path.trim().replace(whitespaceRE, s => s.trim())
+  const path = getExpSource(exp)
+    .trim()
+    .replace(whitespaceRE, s => s.trim())
 
   let state = MemberExpLexState.inMemberExp
   let stateStack: MemberExpLexState[] = []
@@ -150,64 +158,91 @@ export const isMemberExpressionBrowser = (path: string): boolean => {
   return !currentOpenBracketCount && !currentOpenParensCount
 }
 
-export const isMemberExpressionNode = __BROWSER__
-  ? (NOOP as any as (path: string, context: TransformContext) => boolean)
-  : (path: string, context: TransformContext): boolean => {
+export const isMemberExpressionNode: (
+  exp: ExpressionNode,
+  context: TransformContext,
+) => boolean = __BROWSER__
+  ? (NOOP as any)
+  : (exp, context) => {
       try {
-        let ret: Expression = parseExpression(path, {
-          plugins: context.expressionPlugins
-        })
-        if (ret.type === 'TSAsExpression' || ret.type === 'TSTypeAssertion') {
-          ret = ret.expression
-        }
+        let ret: Node =
+          exp.ast ||
+          parseExpression(getExpSource(exp), {
+            plugins: context.expressionPlugins
+              ? [...context.expressionPlugins, 'typescript']
+              : ['typescript'],
+          })
+        ret = unwrapTSNode(ret) as Expression
         return (
           ret.type === 'MemberExpression' ||
           ret.type === 'OptionalMemberExpression' ||
-          ret.type === 'Identifier'
+          (ret.type === 'Identifier' && ret.name !== 'undefined')
         )
       } catch (e) {
         return false
       }
     }
 
-export const isMemberExpression = __BROWSER__
-  ? isMemberExpressionBrowser
-  : isMemberExpressionNode
+export const isMemberExpression: (
+  exp: ExpressionNode,
+  context: TransformContext,
+) => boolean = __BROWSER__ ? isMemberExpressionBrowser : isMemberExpressionNode
 
-export function getInnerRange(
-  loc: SourceLocation,
-  offset: number,
-  length: number
-): SourceLocation {
-  __TEST__ && assert(offset <= loc.source.length)
-  const source = loc.source.slice(offset, offset + length)
-  const newLoc: SourceLocation = {
-    source,
-    start: advancePositionWithClone(loc.start, loc.source, offset),
-    end: loc.end
-  }
+const fnExpRE =
+  /^\s*(async\s*)?(\([^)]*?\)|[\w$_]+)\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/
 
-  if (length != null) {
-    __TEST__ && assert(offset + length <= loc.source.length)
-    newLoc.end = advancePositionWithClone(
-      loc.start,
-      loc.source,
-      offset + length
-    )
-  }
+export const isFnExpressionBrowser: (exp: ExpressionNode) => boolean = exp =>
+  fnExpRE.test(getExpSource(exp))
 
-  return newLoc
-}
+export const isFnExpressionNode: (
+  exp: ExpressionNode,
+  context: TransformContext,
+) => boolean = __BROWSER__
+  ? (NOOP as any)
+  : (exp, context) => {
+      try {
+        let ret: Node =
+          exp.ast ||
+          parseExpression(getExpSource(exp), {
+            plugins: context.expressionPlugins
+              ? [...context.expressionPlugins, 'typescript']
+              : ['typescript'],
+          })
+        // parser may parse the exp as statements when it contains semicolons
+        if (ret.type === 'Program') {
+          ret = ret.body[0]
+          if (ret.type === 'ExpressionStatement') {
+            ret = ret.expression
+          }
+        }
+        ret = unwrapTSNode(ret) as Expression
+        return (
+          ret.type === 'FunctionExpression' ||
+          ret.type === 'ArrowFunctionExpression'
+        )
+      } catch (e) {
+        return false
+      }
+    }
+
+export const isFnExpression: (
+  exp: ExpressionNode,
+  context: TransformContext,
+) => boolean = __BROWSER__ ? isFnExpressionBrowser : isFnExpressionNode
 
 export function advancePositionWithClone(
   pos: Position,
   source: string,
-  numberOfCharacters: number = source.length
+  numberOfCharacters: number = source.length,
 ): Position {
   return advancePositionWithMutation(
-    extend({}, pos),
+    {
+      offset: pos.offset,
+      line: pos.line,
+      column: pos.column,
+    },
     source,
-    numberOfCharacters
+    numberOfCharacters,
   )
 }
 
@@ -216,7 +251,7 @@ export function advancePositionWithClone(
 export function advancePositionWithMutation(
   pos: Position,
   source: string,
-  numberOfCharacters: number = source.length
+  numberOfCharacters: number = source.length,
 ): Position {
   let linesCount = 0
   let lastNewLinePos = -1
@@ -237,8 +272,8 @@ export function advancePositionWithMutation(
   return pos
 }
 
-export function assert(condition: boolean, msg?: string) {
-  /* istanbul ignore if */
+export function assert(condition: boolean, msg?: string): void {
+  /* v8 ignore next 3 */
   if (!condition) {
     throw new Error(msg || `unexpected compiler condition`)
   }
@@ -247,7 +282,7 @@ export function assert(condition: boolean, msg?: string) {
 export function findDir(
   node: ElementNode,
   name: string | RegExp,
-  allowEmpty: boolean = false
+  allowEmpty: boolean = false,
 ): DirectiveNode | undefined {
   for (let i = 0; i < node.props.length; i++) {
     const p = node.props[i]
@@ -265,7 +300,7 @@ export function findProp(
   node: ElementNode,
   name: string,
   dynamicOnly: boolean = false,
-  allowEmpty: boolean = false
+  allowEmpty: boolean = false,
 ): ElementNode['props'][0] | undefined {
   for (let i = 0; i < node.props.length; i++) {
     const p = node.props[i]
@@ -286,7 +321,7 @@ export function findProp(
 
 export function isStaticArgOf(
   arg: DirectiveNode['arg'],
-  name: string
+  name: string,
 ): boolean {
   return !!(arg && isStaticExp(arg) && arg.content === name)
 }
@@ -298,12 +333,12 @@ export function hasDynamicKeyVBind(node: ElementNode): boolean {
       p.name === 'bind' &&
       (!p.arg || // v-bind="obj"
         p.arg.type !== NodeTypes.SIMPLE_EXPRESSION || // v-bind:[_ctx.foo]
-        !p.arg.isStatic) // v-bind:[foo]
+        !p.arg.isStatic), // v-bind:[foo]
   )
 }
 
 export function isText(
-  node: TemplateChildNode
+  node: TemplateChildNode,
 ): node is TextNode | InterpolationNode {
   return node.type === NodeTypes.INTERPOLATION || node.type === NodeTypes.TEXT
 }
@@ -313,7 +348,7 @@ export function isVSlot(p: ElementNode['props'][0]): p is DirectiveNode {
 }
 
 export function isTemplateNode(
-  node: RootNode | TemplateChildNode
+  node: RootNode | TemplateChildNode,
 ): node is TemplateNode {
   return (
     node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.TEMPLATE
@@ -321,7 +356,7 @@ export function isTemplateNode(
 }
 
 export function isSlotOutlet(
-  node: RootNode | TemplateChildNode
+  node: RootNode | TemplateChildNode,
 ): node is SlotOutletNode {
   return node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT
 }
@@ -330,7 +365,7 @@ const propsHelperSet = new Set([NORMALIZE_PROPS, GUARD_REACTIVE_PROPS])
 
 function getUnnormalizedProps(
   props: PropsExpression | '{}',
-  callPath: CallExpression[] = []
+  callPath: CallExpression[] = [],
 ): [PropsExpression | '{}', CallExpression[]] {
   if (
     props &&
@@ -341,7 +376,7 @@ function getUnnormalizedProps(
     if (!isString(callee) && propsHelperSet.has(callee)) {
       return getUnnormalizedProps(
         props.arguments[0] as PropsExpression,
-        callPath.concat(props)
+        callPath.concat(props),
       )
     }
   }
@@ -350,8 +385,8 @@ function getUnnormalizedProps(
 export function injectProp(
   node: VNodeCall | RenderSlotCall,
   prop: Property,
-  context: TransformContext
-) {
+  context: TransformContext,
+): void {
   let propsWithInjection: ObjectExpression | CallExpression | undefined
   /**
    * 1. mergeProps(...)
@@ -393,7 +428,7 @@ export function injectProp(
         // #2366
         propsWithInjection = createCallExpression(context.helper(MERGE_PROPS), [
           createObjectExpression([prop]),
-          props
+          props,
         ])
       } else {
         props.arguments.unshift(createObjectExpression([prop]))
@@ -409,7 +444,7 @@ export function injectProp(
     // single v-bind with expression, return a merged replacement
     propsWithInjection = createCallExpression(context.helper(MERGE_PROPS), [
       createObjectExpression([prop]),
-      props
+      props,
     ])
     // in the case of nested helper call, e.g. `normalizeProps(guardReactiveProps(props))`,
     // it will be rewritten as `normalizeProps(mergeProps({ key: 0 }, props))`,
@@ -441,7 +476,7 @@ function hasProp(prop: Property, props: ObjectExpression) {
     result = props.properties.some(
       p =>
         p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
-        p.key.content === propKeyName
+        p.key.content === propKeyName,
     )
   }
   return result
@@ -449,7 +484,7 @@ function hasProp(prop: Property, props: ObjectExpression) {
 
 export function toValidAssetId(
   name: string,
-  type: 'component' | 'directive' | 'filter'
+  type: 'component' | 'directive' | 'filter',
 ): string {
   // see issue#4422, we need adding identifier on validAssetId if variable `name` has specific character
   return `_${type}_${name.replace(/[^\w]/g, (searchValue, replaceValue) => {
@@ -459,8 +494,13 @@ export function toValidAssetId(
 
 // Check if a node contains expressions that reference current context scope ids
 export function hasScopeRef(
-  node: TemplateChildNode | IfBranchNode | ExpressionNode | undefined,
-  ids: TransformContext['identifiers']
+  node:
+    | TemplateChildNode
+    | IfBranchNode
+    | ExpressionNode
+    | CacheExpression
+    | undefined,
+  ids: TransformContext['identifiers'],
 ): boolean {
   if (!node || Object.keys(ids).length === 0) {
     return false
@@ -502,6 +542,7 @@ export function hasScopeRef(
       return hasScopeRef(node.content, ids)
     case NodeTypes.TEXT:
     case NodeTypes.COMMENT:
+    case NodeTypes.JS_CACHE_EXPRESSION:
       return false
     default:
       if (__DEV__) {
@@ -512,7 +553,9 @@ export function hasScopeRef(
   }
 }
 
-export function getMemoedVNodeCall(node: BlockCodegenNode | MemoExpression) {
+export function getMemoedVNodeCall(
+  node: BlockCodegenNode | MemoExpression,
+): VNodeCall | RenderSlotCall {
   if (node.type === NodeTypes.JS_CALL_EXPRESSION && node.callee === WITH_MEMO) {
     return node.arguments[1].returns as VNodeCall
   } else {
@@ -520,4 +563,4 @@ export function getMemoedVNodeCall(node: BlockCodegenNode | MemoExpression) {
   }
 }
 
-export const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
+export const forAliasRE: RegExp = /([\s\S]*?)\s+(?:in|of)\s+(\S[\s\S]*)/
diff --git a/packages/compiler-core/src/validateExpression.ts b/packages/compiler-core/src/validateExpression.ts
index 83998eee2..a8b7a4fd3 100644
--- a/packages/compiler-core/src/validateExpression.ts
+++ b/packages/compiler-core/src/validateExpression.ts
@@ -1,6 +1,6 @@
-import { SimpleExpressionNode } from './ast'
-import { TransformContext } from './transform'
-import { createCompilerError, ErrorCodes } from './errors'
+import type { SimpleExpressionNode } from './ast'
+import type { TransformContext } from './transform'
+import { ErrorCodes, createCompilerError } from './errors'
 
 // these keywords should not appear inside expressions, but operators like
 // 'typeof', 'instanceof', and 'in' are allowed
@@ -13,7 +13,7 @@ const prohibitedKeywordRE = new RegExp(
     )
       .split(',')
       .join('\\b|\\b') +
-    '\\b'
+    '\\b',
 )
 
 // strip strings in expressions
@@ -29,8 +29,8 @@ export function validateBrowserExpression(
   node: SimpleExpressionNode,
   context: TransformContext,
   asParams = false,
-  asRawStatements = false
-) {
+  asRawStatements = false,
+): void {
   const exp = node.content
 
   // empty expressions are validated per-directive since some directives
@@ -43,7 +43,7 @@ export function validateBrowserExpression(
     new Function(
       asRawStatements
         ? ` ${exp} `
-        : `return ${asParams ? `(${exp}) => {}` : `(${exp})`}`
+        : `return ${asParams ? `(${exp}) => {}` : `(${exp})`}`,
     )
   } catch (e: any) {
     let message = e.message
@@ -58,8 +58,8 @@ export function validateBrowserExpression(
         ErrorCodes.X_INVALID_EXPRESSION,
         node.loc,
         undefined,
-        message
-      )
+        message,
+      ),
     )
   }
 }
diff --git a/packages/compiler-dom/README.md b/packages/compiler-dom/README.md
index 0027f5426..57748e661 100644
--- a/packages/compiler-dom/README.md
+++ b/packages/compiler-dom/README.md
@@ -1 +1 @@
-# @vue/compiler-dom
\ No newline at end of file
+# @vue/compiler-dom
diff --git a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
index 17f974ee1..6d49307a1 100644
--- a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
@@ -8,13 +8,13 @@ return function render(_ctx, _cache) {
     const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, normalizeStyle: _normalizeStyle, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
-      _createElementVNode(\\"div\\", {
+      _createElementVNode("div", {
         textContent: _toDisplayString(text)
-      }, null, 8 /* PROPS */, [\\"textContent\\"]),
-      _createElementVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
-      _createElementVNode(\\"div\\", null, \\"test\\"),
-      _createElementVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),
-      _createElementVNode(\\"div\\", {
+      }, null, 8 /* PROPS */, ["textContent"]),
+      _createElementVNode("div", { innerHTML: html }, null, 8 /* PROPS */, ["innerHTML"]),
+      _createElementVNode("div", null, "test"),
+      _createElementVNode("div", { style: {"color":"red"} }, "red"),
+      _createElementVNode("div", {
         style: _normalizeStyle({color: 'green'})
       }, null, 4 /* STYLE */)
     ], 64 /* STABLE_FRAGMENT */))
diff --git a/packages/compiler-dom/__tests__/decoderHtmlBrowser.spec.ts b/packages/compiler-dom/__tests__/decoderHtmlBrowser.spec.ts
index 03c0929db..507d4243b 100644
--- a/packages/compiler-dom/__tests__/decoderHtmlBrowser.spec.ts
+++ b/packages/compiler-dom/__tests__/decoderHtmlBrowser.spec.ts
@@ -29,16 +29,18 @@ describe('decodeHtmlBrowser', () => {
 
     // #3001 html tags inside attribute values
     expect(decodeHtmlBrowser('<strong>Text</strong>', true)).toBe(
-      '<strong>Text</strong>'
+      '<strong>Text</strong>',
     )
     expect(decodeHtmlBrowser('<strong>&amp;</strong>', true)).toBe(
-      '<strong>&</strong>'
+      '<strong>&</strong>',
     )
     expect(
       decodeHtmlBrowser(
         '<strong>&lt;strong&gt;&amp;&lt;/strong&gt;</strong>',
-        true
-      )
+        true,
+      ),
     ).toBe('<strong><strong>&</strong></strong>')
+    expect(decodeHtmlBrowser('"', true)).toBe('"')
+    expect(decodeHtmlBrowser("'", true)).toBe("'")
   })
 })
diff --git a/packages/compiler-dom/__tests__/parse.spec.ts b/packages/compiler-dom/__tests__/parse.spec.ts
index 736ea729f..7418b8e33 100644
--- a/packages/compiler-dom/__tests__/parse.spec.ts
+++ b/packages/compiler-dom/__tests__/parse.spec.ts
@@ -1,38 +1,68 @@
 import {
-  baseParse as parse,
-  NodeTypes,
-  ElementNode,
-  TextNode,
-  ErrorCodes,
+  type AttributeNode,
+  ConstantTypes,
+  type ElementNode,
   ElementTypes,
-  InterpolationNode,
-  AttributeNode,
-  ConstantTypes
+  type InterpolationNode,
+  Namespaces,
+  NodeTypes,
+  type TextNode,
+  baseParse as parse,
 } from '@vue/compiler-core'
-import { parserOptions, DOMNamespaces } from '../src/parserOptions'
+import { parserOptions } from '../src/parserOptions'
 
 describe('DOM parser', () => {
   describe('Text', () => {
     test('textarea handles comments/elements as just text', () => {
       const ast = parse(
         '<textarea>some<div>text</div>and<!--comment--></textarea>',
-        parserOptions
+        parserOptions,
       )
       const element = ast.children[0] as ElementNode
       const text = element.children[0] as TextNode
-
+      expect(element.children.length).toBe(1)
       expect(text).toStrictEqual({
         type: NodeTypes.TEXT,
         content: 'some<div>text</div>and<!--comment-->',
         loc: {
           start: { offset: 10, line: 1, column: 11 },
           end: { offset: 46, line: 1, column: 47 },
-          source: 'some<div>text</div>and<!--comment-->'
-        }
+          source: 'some<div>text</div>and<!--comment-->',
+        },
       })
     })
 
-    test('textarea handles character references', () => {
+    test('<textarea> should remove leading newline', () => {
+      const ast = parse('<textarea>\nhello</textarea>', parserOptions)
+      const element = ast.children[0] as ElementNode
+      const text = element.children[0] as TextNode
+      expect(element.children.length).toBe(1)
+      expect(text).toStrictEqual({
+        type: NodeTypes.TEXT,
+        content: 'hello',
+        loc: {
+          start: { offset: 10, line: 1, column: 11 },
+          end: { offset: 16, line: 2, column: 6 },
+          source: '\nhello',
+        },
+      })
+    })
+
+    test('should not treat Uppercase component as special tag', () => {
+      const ast = parse(
+        '<TextArea>some<div>text</div>and<!--comment--></TextArea>',
+        parserOptions,
+      )
+      const element = ast.children[0] as ElementNode
+      expect(element.children.map(n => n.type)).toMatchObject([
+        NodeTypes.TEXT,
+        NodeTypes.ELEMENT,
+        NodeTypes.TEXT,
+        NodeTypes.COMMENT,
+      ])
+    })
+
+    test('textarea handles entities', () => {
       const ast = parse('<textarea>&amp;</textarea>', parserOptions)
       const element = ast.children[0] as ElementNode
       const text = element.children[0] as TextNode
@@ -43,8 +73,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 10, line: 1, column: 11 },
           end: { offset: 15, line: 1, column: 16 },
-          source: '&amp;'
-        }
+          source: '&amp;',
+        },
       })
     })
 
@@ -58,16 +88,16 @@ describe('DOM parser', () => {
           content: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `foo`,
-            isStatic: false
-          }
-        }
+            isStatic: false,
+          },
+        },
       ])
     })
 
     test('style handles comments/elements as just a text', () => {
       const ast = parse(
         '<style>some<div>text</div>and<!--comment--></style>',
-        parserOptions
+        parserOptions,
       )
       const element = ast.children[0] as ElementNode
       const text = element.children[0] as TextNode
@@ -78,8 +108,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 7, line: 1, column: 8 },
           end: { offset: 43, line: 1, column: 44 },
-          source: 'some<div>text</div>and<!--comment-->'
-        }
+          source: 'some<div>text</div>and<!--comment-->',
+        },
       })
     })
 
@@ -94,8 +124,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 7, line: 1, column: 8 },
           end: { offset: 12, line: 1, column: 13 },
-          source: '&amp;'
-        }
+          source: '&amp;',
+        },
       })
     })
 
@@ -109,8 +139,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 14, line: 1, column: 15 },
           end: { offset: 23, line: 1, column: 24 },
-          source: 'some text'
-        }
+          source: 'some text',
+        },
       })
     })
 
@@ -120,21 +150,21 @@ describe('DOM parser', () => {
       expect((ast.children[0] as ElementNode).children).toMatchObject([
         {
           type: NodeTypes.TEXT,
-          content: `  \na   `
+          content: `  \na   `,
         },
         {
           type: NodeTypes.ELEMENT,
           children: [
             {
               type: NodeTypes.TEXT,
-              content: `foo \n bar`
-            }
-          ]
+              content: `foo \n bar`,
+            },
+          ],
         },
         {
           type: NodeTypes.TEXT,
-          content: `   \n   c`
-        }
+          content: `   \n   c`,
+        },
       ])
     })
 
@@ -145,7 +175,7 @@ describe('DOM parser', () => {
       expect((ast.children[0] as ElementNode).children).toMatchObject([
         {
           type: NodeTypes.TEXT,
-          content: `hello`
+          content: `hello`,
         },
         {
           type: NodeTypes.ELEMENT,
@@ -153,10 +183,10 @@ describe('DOM parser', () => {
             {
               type: NodeTypes.TEXT,
               // should not remove the leading newline for nested elements
-              content: `\nbye`
-            }
-          ]
-        }
+              content: `\nbye`,
+            },
+          ],
+        },
       ])
     })
 
@@ -166,7 +196,7 @@ describe('DOM parser', () => {
       const ast = parse(`foo&nbsp;&nbsp;bar`, parserOptions)
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.TEXT,
-        content: `foo${nbsp}${nbsp}bar`
+        content: `foo${nbsp}${nbsp}bar`,
       })
     })
 
@@ -181,8 +211,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 11, line: 1, column: 12 },
-          source: '&ampersand;'
-        }
+          source: '&ampersand;',
+        },
       })
     })
 
@@ -190,7 +220,7 @@ describe('DOM parser', () => {
     test('HTML entities compatibility in attribute', () => {
       const ast = parse(
         '<div a="&ampersand;" b="&amp;ersand;" c="&amp!"></div>',
-        parserOptions
+        parserOptions,
       )
       const element = ast.children[0] as ElementNode
       const text1 = (element.props[0] as AttributeNode).value
@@ -203,8 +233,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 7, line: 1, column: 8 },
           end: { offset: 20, line: 1, column: 21 },
-          source: '"&ampersand;"'
-        }
+          source: '"&ampersand;"',
+        },
       })
       expect(text2).toStrictEqual({
         type: NodeTypes.TEXT,
@@ -212,8 +242,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 23, line: 1, column: 24 },
           end: { offset: 37, line: 1, column: 38 },
-          source: '"&amp;ersand;"'
-        }
+          source: '"&amp;ersand;"',
+        },
       })
       expect(text3).toStrictEqual({
         type: NodeTypes.TEXT,
@@ -221,8 +251,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 40, line: 1, column: 41 },
           end: { offset: 47, line: 1, column: 48 },
-          source: '"&amp!"'
-        }
+          source: '"&amp!"',
+        },
       })
     })
 
@@ -236,8 +266,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 6, line: 1, column: 7 },
-          source: '&#x86;'
-        }
+          source: '&#x86;',
+        },
       })
     })
   })
@@ -258,14 +288,14 @@ describe('DOM parser', () => {
           loc: {
             start: { offset: 8, line: 1, column: 9 },
             end: { offset: 16, line: 1, column: 17 },
-            source: 'a &lt; b'
-          }
+            source: 'a &lt; b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 19, line: 1, column: 20 },
-          source: '{{ a &lt; b }}'
-        }
+          source: '{{ a &lt; b }}',
+        },
       })
     })
   })
@@ -277,18 +307,17 @@ describe('DOM parser', () => {
 
       expect(element).toStrictEqual({
         type: NodeTypes.ELEMENT,
-        ns: DOMNamespaces.HTML,
+        ns: Namespaces.HTML,
         tag: 'img',
         tagType: ElementTypes.ELEMENT,
         props: [],
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: '<img>'
+          source: '<img>',
         },
-        codegenNode: undefined
+        codegenNode: undefined,
       })
     })
 
@@ -298,33 +327,26 @@ describe('DOM parser', () => {
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
 
       expect(ast.children[2]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
     test('Strict end tag detection for textarea.', () => {
       const ast = parse(
-        '<textarea>hello</textarea</textarea0></texTArea a="<>">',
-        {
-          ...parserOptions,
-          onError: err => {
-            if (err.code !== ErrorCodes.END_TAG_WITH_ATTRIBUTES) {
-              throw err
-            }
-          }
-        }
+        '<textarea>hello</textarea</textarea0></texTArea>',
+        parserOptions,
       )
       const element = ast.children[0] as ElementNode
       const text = element.children[0] as TextNode
@@ -336,8 +358,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 10, line: 1, column: 11 },
           end: { offset: 37, line: 1, column: 38 },
-          source: 'hello</textarea</textarea0>'
-        }
+          source: 'hello</textarea</textarea0>',
+        },
       })
     })
   })
@@ -347,74 +369,74 @@ describe('DOM parser', () => {
       const ast = parse('<html>test</html>', parserOptions)
       const element = ast.children[0] as ElementNode
 
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('SVG namespace', () => {
       const ast = parse('<svg>test</svg>', parserOptions)
       const element = ast.children[0] as ElementNode
 
-      expect(element.ns).toBe(DOMNamespaces.SVG)
+      expect(element.ns).toBe(Namespaces.SVG)
     })
 
     test('MATH_ML namespace', () => {
       const ast = parse('<math>test</math>', parserOptions)
       const element = ast.children[0] as ElementNode
 
-      expect(element.ns).toBe(DOMNamespaces.MATH_ML)
+      expect(element.ns).toBe(Namespaces.MATH_ML)
     })
 
     test('SVG in MATH_ML namespace', () => {
       const ast = parse(
         '<math><annotation-xml><svg></svg></annotation-xml></math>',
-        parserOptions
+        parserOptions,
       )
       const elementMath = ast.children[0] as ElementNode
       const elementAnnotation = elementMath.children[0] as ElementNode
       const elementSvg = elementAnnotation.children[0] as ElementNode
 
-      expect(elementMath.ns).toBe(DOMNamespaces.MATH_ML)
-      expect(elementSvg.ns).toBe(DOMNamespaces.SVG)
+      expect(elementMath.ns).toBe(Namespaces.MATH_ML)
+      expect(elementSvg.ns).toBe(Namespaces.SVG)
     })
 
     test('html text/html in MATH_ML namespace', () => {
       const ast = parse(
         '<math><annotation-xml encoding="text/html"><test/></annotation-xml></math>',
-        parserOptions
+        parserOptions,
       )
 
       const elementMath = ast.children[0] as ElementNode
       const elementAnnotation = elementMath.children[0] as ElementNode
       const element = elementAnnotation.children[0] as ElementNode
 
-      expect(elementMath.ns).toBe(DOMNamespaces.MATH_ML)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementMath.ns).toBe(Namespaces.MATH_ML)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('html application/xhtml+xml in MATH_ML namespace', () => {
       const ast = parse(
         '<math><annotation-xml encoding="application/xhtml+xml"><test/></annotation-xml></math>',
-        parserOptions
+        parserOptions,
       )
       const elementMath = ast.children[0] as ElementNode
       const elementAnnotation = elementMath.children[0] as ElementNode
       const element = elementAnnotation.children[0] as ElementNode
 
-      expect(elementMath.ns).toBe(DOMNamespaces.MATH_ML)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementMath.ns).toBe(Namespaces.MATH_ML)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('mtext malignmark in MATH_ML namespace', () => {
       const ast = parse(
         '<math><mtext><malignmark/></mtext></math>',
-        parserOptions
+        parserOptions,
       )
       const elementMath = ast.children[0] as ElementNode
       const elementText = elementMath.children[0] as ElementNode
       const element = elementText.children[0] as ElementNode
 
-      expect(elementMath.ns).toBe(DOMNamespaces.MATH_ML)
-      expect(element.ns).toBe(DOMNamespaces.MATH_ML)
+      expect(elementMath.ns).toBe(Namespaces.MATH_ML)
+      expect(element.ns).toBe(Namespaces.MATH_ML)
     })
 
     test('mtext and not malignmark tag in MATH_ML namespace', () => {
@@ -423,21 +445,21 @@ describe('DOM parser', () => {
       const elementText = elementMath.children[0] as ElementNode
       const element = elementText.children[0] as ElementNode
 
-      expect(elementMath.ns).toBe(DOMNamespaces.MATH_ML)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementMath.ns).toBe(Namespaces.MATH_ML)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('foreignObject tag in SVG namespace', () => {
       const ast = parse(
         '<svg><foreignObject><test/></foreignObject></svg>',
-        parserOptions
+        parserOptions,
       )
       const elementSvg = ast.children[0] as ElementNode
       const elementForeignObject = elementSvg.children[0] as ElementNode
       const element = elementForeignObject.children[0] as ElementNode
 
-      expect(elementSvg.ns).toBe(DOMNamespaces.SVG)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementSvg.ns).toBe(Namespaces.SVG)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('desc tag in SVG namespace', () => {
@@ -446,8 +468,8 @@ describe('DOM parser', () => {
       const elementDesc = elementSvg.children[0] as ElementNode
       const element = elementDesc.children[0] as ElementNode
 
-      expect(elementSvg.ns).toBe(DOMNamespaces.SVG)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementSvg.ns).toBe(Namespaces.SVG)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('title tag in SVG namespace', () => {
@@ -456,8 +478,8 @@ describe('DOM parser', () => {
       const elementTitle = elementSvg.children[0] as ElementNode
       const element = elementTitle.children[0] as ElementNode
 
-      expect(elementSvg.ns).toBe(DOMNamespaces.SVG)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementSvg.ns).toBe(Namespaces.SVG)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('SVG in HTML namespace', () => {
@@ -465,8 +487,8 @@ describe('DOM parser', () => {
       const elementHtml = ast.children[0] as ElementNode
       const element = elementHtml.children[0] as ElementNode
 
-      expect(elementHtml.ns).toBe(DOMNamespaces.HTML)
-      expect(element.ns).toBe(DOMNamespaces.SVG)
+      expect(elementHtml.ns).toBe(Namespaces.HTML)
+      expect(element.ns).toBe(Namespaces.SVG)
     })
 
     test('MATH in HTML namespace', () => {
@@ -474,8 +496,35 @@ describe('DOM parser', () => {
       const elementHtml = ast.children[0] as ElementNode
       const element = elementHtml.children[0] as ElementNode
 
-      expect(elementHtml.ns).toBe(DOMNamespaces.HTML)
-      expect(element.ns).toBe(DOMNamespaces.MATH_ML)
+      expect(elementHtml.ns).toBe(Namespaces.HTML)
+      expect(element.ns).toBe(Namespaces.MATH_ML)
+    })
+
+    test('root ns', () => {
+      const ast = parse('<foreignObject><test/></foreignObject>', {
+        ...parserOptions,
+        ns: Namespaces.SVG,
+      })
+      const elementForieng = ast.children[0] as ElementNode
+      const element = elementForieng.children[0] as ElementNode
+
+      expect(elementForieng.ns).toBe(Namespaces.SVG)
+      expect(element.ns).toBe(Namespaces.HTML)
+    })
+
+    test('correct XML handling with root ns', () => {
+      // when root ns is an XML namespace, there should be no special content
+      // treatment for <script>, <style>, <textarea> etc.
+      const ast = parse('<script><g/><g/></script>', {
+        ...parserOptions,
+        ns: Namespaces.SVG,
+      })
+      const elementSvg = ast.children[0] as ElementNode
+      // should parse as nodes instead of text
+      expect(elementSvg.children).toMatchObject([
+        { type: NodeTypes.ELEMENT, tag: 'g' },
+        { type: NodeTypes.ELEMENT, tag: 'g' },
+      ])
     })
   })
 })
diff --git a/packages/compiler-dom/__tests__/transforms/Transition.spec.ts b/packages/compiler-dom/__tests__/transforms/Transition.spec.ts
index 12eb280aa..8f64adb80 100644
--- a/packages/compiler-dom/__tests__/transforms/Transition.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/Transition.spec.ts
@@ -4,7 +4,7 @@ describe('Transition multi children warnings', () => {
   function checkWarning(
     template: string,
     shouldWarn: boolean,
-    message = `<Transition> expects exactly one child element or component.`
+    message = `<Transition> expects exactly one child element or component.`,
   ) {
     const spy = vi.fn()
     compile(template.trim(), {
@@ -12,7 +12,7 @@ describe('Transition multi children warnings', () => {
       transformHoist: null,
       onError: err => {
         spy(err.message)
-      }
+      },
     })
 
     if (shouldWarn) expect(spy).toHaveBeenCalledWith(message)
@@ -27,7 +27,7 @@ describe('Transition multi children warnings', () => {
         <div>hey</div>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -38,7 +38,7 @@ describe('Transition multi children warnings', () => {
         <div v-for="i in items">hey</div>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -50,7 +50,7 @@ describe('Transition multi children warnings', () => {
         <div v-else v-for="i in items">hey</div>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -61,7 +61,7 @@ describe('Transition multi children warnings', () => {
         <template v-if="ok"></template>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -73,7 +73,7 @@ describe('Transition multi children warnings', () => {
         <template v-else></template>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -85,7 +85,7 @@ describe('Transition multi children warnings', () => {
         <div v-if="other">hey</div>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -96,7 +96,7 @@ describe('Transition multi children warnings', () => {
         <div>hey</div>
       </transition>
       `,
-      false
+      false,
     )
   })
 
@@ -107,7 +107,7 @@ describe('Transition multi children warnings', () => {
         <div v-if="a">hey</div>
       </transition>
       `,
-      false
+      false,
     )
   })
 
@@ -120,7 +120,7 @@ describe('Transition multi children warnings', () => {
         <div v-else>hey</div>
       </transition>
       `,
-      false
+      false,
     )
   })
 
@@ -132,7 +132,7 @@ describe('Transition multi children warnings', () => {
         <div v-else>hey</div>
       </transition>
       `,
-      false
+      false,
     )
   })
 })
@@ -143,7 +143,7 @@ test('inject persisted when child has v-show', () => {
     <transition>
       <div v-show="ok" />
     </transition>
-    `).code
+    `).code,
   ).toMatchSnapshot()
 })
 
@@ -161,6 +161,6 @@ test('the v-if/else-if/else branches in Transition should ignore comments', () =
         <p v-else/>
       </div>
     </transition>
-    `).code
+    `).code,
   ).toMatchSnapshot()
 })
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap
index 0e842e96e..aa08c1366 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap
@@ -7,9 +7,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vShow: _vShow, createElementVNode: _createElementVNode, withDirectives: _withDirectives, Transition: _Transition, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
-    return (_openBlock(), _createBlock(_Transition, { persisted: \\"\\" }, {
+    return (_openBlock(), _createBlock(_Transition, { persisted: "" }, {
       default: _withCtx(() => [
-        _withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
+        _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
           [_vShow, ok]
         ])
       ]),
@@ -29,15 +29,15 @@ return function render(_ctx, _cache) {
     return (_openBlock(), _createBlock(_Transition, null, {
       default: _withCtx(() => [
         a
-          ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"hey\\"))
+          ? (_openBlock(), _createElementBlock("div", { key: 0 }, "hey"))
           : b
-            ? (_openBlock(), _createElementBlock(\\"div\\", { key: 1 }, \\"hey\\"))
-            : (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }, [
+            ? (_openBlock(), _createElementBlock("div", { key: 1 }, "hey"))
+            : (_openBlock(), _createElementBlock("div", { key: 2 }, [
                 c
-                  ? (_openBlock(), _createElementBlock(\\"p\\", { key: 0 }))
+                  ? (_openBlock(), _createElementBlock("p", { key: 0 }))
                   : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
-                      _createCommentVNode(\\" this should not be ignored \\"),
-                      _createElementVNode(\\"p\\")
+                      _createCommentVNode(" this should not be ignored "),
+                      _createElementVNode("p")
                     ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
               ]))
       ]),
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
index b671d3252..78b576af5 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
@@ -1,64 +1,140 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`stringify static html > should bail on bindings that are hoisted but not stringifiable 1`] = `
-"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
-
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
-  /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
-  /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
-  /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
-  /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
-  /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
-  /*#__PURE__*/_createElementVNode(\\"img\\", { src: _imports_0_ })
-], -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
+exports[`stringify static html > eligible content (elements > 20) + non-eligible content 1`] = `
+"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createStaticVNode("<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>", 20),
+    _createElementVNode("div", { key: "1" }, "1", -1 /* HOISTED */),
+    _createStaticVNode("<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>", 20)
+  ])))
+}"
+`;
+
+exports[`stringify static html > escape 1`] = `
+"const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createStaticVNode("<div><span class=\\"foo&gt;ar\\">1 + &lt;</span><span>&amp;</span><span class=\\"foo&gt;ar\\">1 + &lt;</span><span>&amp;</span><span class=\\"foo&gt;ar\\">1 + &lt;</span><span>&amp;</span><span class=\\"foo&gt;ar\\">1 + &lt;</span><span>&amp;</span><span class=\\"foo&gt;ar\\">1 + &lt;</span><span>&amp;</span></div>", 1)
+  ])))
+}"
+`;
+
+exports[`stringify static html > serializing constant bindings 1`] = `
+"const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createStaticVNode("<div style=\\"color:red;\\"><span class=\\"foo bar\\">1 + false</span><span class=\\"foo bar\\">1 + false</span><span class=\\"foo bar\\">1 + false</span><span class=\\"foo bar\\">1 + false</span><span class=\\"foo bar\\">1 + false</span></div>", 1)
+  ])))
+}"
+`;
+
+exports[`stringify static html > should bail for <option> elements with number values 1`] = `
+"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createElementVNode("select", null, [
+      _createElementVNode("option", { value: 1 }),
+      _createElementVNode("option", { value: 1 }),
+      _createElementVNode("option", { value: 1 }),
+      _createElementVNode("option", { value: 1 }),
+      _createElementVNode("option", { value: 1 })
+    ], -1 /* HOISTED */)
+  ])))
+}"
+`;
+
+exports[`stringify static html > should bail on bindings that are cached but not stringifiable 1`] = `
+"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createElementVNode("div", null, [
+      _createElementVNode("span", { class: "foo" }, "foo"),
+      _createElementVNode("span", { class: "foo" }, "foo"),
+      _createElementVNode("span", { class: "foo" }, "foo"),
+      _createElementVNode("span", { class: "foo" }, "foo"),
+      _createElementVNode("span", { class: "foo" }, "foo"),
+      _createElementVNode("img", { src: _imports_0_ })
+    ], -1 /* HOISTED */)
+  ])))
+}"
+`;
+
+exports[`stringify static html > should work for <option> elements with string values 1`] = `
+"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createStaticVNode("<select><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option></select>", 1)
+  ])))
+}"
+`;
+
+exports[`stringify static html > should work for multiple adjacent nodes 1`] = `
+"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createStaticVNode("<span class=\\"foo\\"></span><span class=\\"foo\\"></span><span class=\\"foo\\"></span><span class=\\"foo\\"></span><span class=\\"foo\\"></span>", 5)
+  ])))
+}"
+`;
+
+exports[`stringify static html > should work on eligible content (elements > 20) 1`] = `
+"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createStaticVNode("<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>", 1)
+  ])))
+}"
+`;
+
+exports[`stringify static html > should work on eligible content (elements with binding > 5) 1`] = `
+"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createStaticVNode("<div><span class=\\"foo\\"></span><span class=\\"foo\\"></span><span class=\\"foo\\"></span><span class=\\"foo\\"></span><span class=\\"foo\\"></span></div>", 1)
+  ])))
 }"
 `;
 
 exports[`stringify static html > should work with bindings that are non-static but stringifiable 1`] = `
 "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<div><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><img src=\\\\\\"\\" + _imports_0_ + \\"\\\\\\"></div>\\", 1)
-const _hoisted_2 = [
-  _hoisted_1
-]
-
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createStaticVNode("<div><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><img src=\\"" + _imports_0_ + "\\"></div>", 1)
+  ])))
 }"
 `;
 
 exports[`stringify static html > stringify v-html 1`] = `
 "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code><span>show-it </span></code></pre><div class><span class>1</span><span class>2</span></div>\\", 2)
-
 return function render(_ctx, _cache) {
-  return _hoisted_1
+  return _cache[0] || (_cache[0] = _createStaticVNode("<pre data-type=\\"js\\"><code><span>show-it </span></code></pre><div class><span class>1</span><span class>2</span></div>", 2))
 }"
 `;
 
 exports[`stringify static html > stringify v-text 1`] = `
 "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code>&lt;span&gt;show-it &lt;/span&gt;</code></pre><div class><span class>1</span><span class>2</span></div>\\", 2)
-
 return function render(_ctx, _cache) {
-  return _hoisted_1
+  return _cache[0] || (_cache[0] = _createStaticVNode("<pre data-type=\\"js\\"><code>&lt;span&gt;show-it &lt;/span&gt;</code></pre><div class><span class>1</span><span class>2</span></div>", 2))
 }"
 `;
 
 exports[`stringify static html > stringify v-text with escape 1`] = `
 "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code>text1</code></pre><div class><span class>1</span><span class>2</span></div>\\", 2)
-
 return function render(_ctx, _cache) {
-  return _hoisted_1
+  return _cache[0] || (_cache[0] = _createStaticVNode("<pre data-type=\\"js\\"><code>text1</code></pre><div class><span class>1</span><span class>2</span></div>", 2))
 }"
 `;
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index d2c9aaa78..5b610745e 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -7,9 +7,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"my-input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("my-input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelText, model]
     ])
   }
@@ -23,9 +23,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", _mergeProps(obj, {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", _mergeProps(obj, {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }), null, 16 /* FULL_PROPS */, ["onUpdate:modelValue"])), [
       [_vModelDynamic, model]
     ])
   }
@@ -39,9 +39,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelDynamic, model]
     ])
   }
@@ -55,9 +55,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [
         _vModelText,
         model,
@@ -76,9 +76,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [
         _vModelText,
         model,
@@ -97,9 +97,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [
         _vModelText,
         model,
@@ -118,9 +118,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelText, model]
     ])
   }
@@ -134,10 +134,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelCheckbox: _vModelCheckbox, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      type: \\"checkbox\\",
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      type: "checkbox",
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelCheckbox, model]
     ])
   }
@@ -151,9 +151,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelDynamic, model]
     ])
   }
@@ -167,10 +167,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelRadio: _vModelRadio, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      type: \\"radio\\",
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      type: "radio",
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelRadio, model]
     ])
   }
@@ -184,10 +184,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      type: \\"text\\",
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      type: "text",
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelText, model]
     ])
   }
@@ -201,9 +201,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelSelect: _vModelSelect, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"select\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("select", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelSelect, model]
     ])
   }
@@ -217,9 +217,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"textarea\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("textarea", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelText, model]
     ])
   }
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
index bd9926e5b..b0ed8d8d6 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
@@ -7,7 +7,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vShow: _vShow, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
+    return _withDirectives((_openBlock(), _createElementBlock("div", null, null, 512 /* NEED_PATCH */)), [
       [_vShow, a]
     ])
   }
diff --git a/packages/compiler-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts b/packages/compiler-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts
index 4df6ee297..f06b9fd52 100644
--- a/packages/compiler-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts
@@ -1,4 +1,4 @@
-import { compile, CompilerError } from '../../src'
+import { type CompilerError, compile } from '../../src'
 
 describe('compiler: ignore side effect tags', () => {
   it('should ignore script', () => {
@@ -6,7 +6,7 @@ describe('compiler: ignore side effect tags', () => {
     const { code } = compile(`<script>console.log(1)</script>`, {
       onError(e) {
         err = e
-      }
+      },
     })
     expect(code).not.toMatch('script')
     expect(err).toBeDefined()
@@ -18,7 +18,7 @@ describe('compiler: ignore side effect tags', () => {
     const { code } = compile(`<style>h1 { color: red }</style>`, {
       onError(e) {
         err = e
-      }
+      },
     })
     expect(code).not.toMatch('style')
     expect(err).toBeDefined()
diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
index 90eb25c72..a35b52231 100644
--- a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -1,13 +1,13 @@
 import {
-  compile,
-  NodeTypes,
   CREATE_STATIC,
+  ConstantTypes,
+  NodeTypes,
+  compile,
   createSimpleExpression,
-  ConstantTypes
 } from '../../src'
 import {
+  StringifyThresholds,
   stringifyStatic,
-  StringifyThresholds
 } from '../../src/transforms/stringifyStatic'
 
 describe('stringify static html', () => {
@@ -15,7 +15,7 @@ describe('stringify static html', () => {
     return compile(template, {
       hoistStatic: true,
       prefixIdentifiers: true,
-      transformHoist: stringifyStatic
+      transformHoist: stringifyStatic,
     })
   }
 
@@ -23,166 +23,171 @@ describe('stringify static html', () => {
     return code.repeat(n)
   }
 
+  /**
+   * Assert cached node NOT stringified
+   */
+  function cachedArrayBailedMatcher(n = 1) {
+    return {
+      type: NodeTypes.JS_CACHE_EXPRESSION,
+      value: {
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+        elements: new Array(n).fill(0).map(() => ({
+          // should remain VNODE_CALL instead of JS_CALL_EXPRESSION
+          codegenNode: { type: NodeTypes.VNODE_CALL },
+        })),
+      },
+    }
+  }
+
+  /**
+   * Assert cached node is stringified (no content check)
+   */
+  function cachedArraySuccessMatcher(n = 1) {
+    return {
+      type: NodeTypes.JS_CACHE_EXPRESSION,
+      value: {
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+        elements: new Array(n).fill(0).map(() => ({
+          type: NodeTypes.JS_CALL_EXPRESSION,
+          callee: CREATE_STATIC,
+        })),
+      },
+    }
+  }
+
+  /**
+   * Assert cached node stringified with desired content and node count
+   */
+  function cachedArrayStaticNodeMatcher(content: string, count: number) {
+    return {
+      type: NodeTypes.JS_CACHE_EXPRESSION,
+      value: {
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+        elements: [
+          {
+            type: NodeTypes.JS_CALL_EXPRESSION,
+            callee: CREATE_STATIC,
+            arguments: [JSON.stringify(content), String(count)],
+          },
+        ],
+      },
+    }
+  }
+
   test('should bail on non-eligible static trees', () => {
     const { ast } = compileWithStringify(
-      `<div><div><div>hello</div><div>hello</div></div></div>`
+      `<div><div><div>hello</div><div>hello</div></div></div>`,
     )
-    // should be a normal vnode call
-    expect(ast.hoists[0]!.type).toBe(NodeTypes.VNODE_CALL)
+    // should be cached children array
+    expect(ast.cached[0]!.value.type).toBe(NodeTypes.JS_ARRAY_EXPRESSION)
   })
 
   test('should work on eligible content (elements with binding > 5)', () => {
-    const { ast } = compileWithStringify(
+    const { code, ast } = compileWithStringify(
       `<div><div>${repeat(
         `<span class="foo"/>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div></div>`,
     )
+
     // should be optimized now
-    expect(ast.hoists).toMatchObject([
-      {
-        type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: CREATE_STATIC,
-        arguments: [
-          JSON.stringify(
-            `<div>${repeat(
-              `<span class="foo"></span>`,
-              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-            )}</div>`
-          ),
-          '1'
-        ]
-      }, // the children array is hoisted as well
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+    expect(ast.cached).toMatchObject([
+      cachedArrayStaticNodeMatcher(
+        `<div>${repeat(
+          `<span class="foo"></span>`,
+          StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+        )}</div>`,
+        1,
+      ),
     ])
+
+    expect(code).toMatchSnapshot()
   })
 
   test('should work on eligible content (elements > 20)', () => {
-    const { ast } = compileWithStringify(
+    const { code, ast } = compileWithStringify(
       `<div><div>${repeat(
         `<span/>`,
-        StringifyThresholds.NODE_COUNT
-      )}</div></div>`
+        StringifyThresholds.NODE_COUNT,
+      )}</div></div>`,
     )
     // should be optimized now
-    expect(ast.hoists).toMatchObject([
-      {
-        type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: CREATE_STATIC,
-        arguments: [
-          JSON.stringify(
-            `<div>${repeat(
-              `<span></span>`,
-              StringifyThresholds.NODE_COUNT
-            )}</div>`
-          ),
-          '1'
-        ]
-      },
-      // the children array is hoisted as well
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+    expect(ast.cached).toMatchObject([
+      cachedArrayStaticNodeMatcher(
+        `<div>${repeat(`<span></span>`, StringifyThresholds.NODE_COUNT)}</div>`,
+        1,
+      ),
     ])
+
+    expect(code).toMatchSnapshot()
   })
 
   test('should work for multiple adjacent nodes', () => {
-    const { ast } = compileWithStringify(
+    const { ast, code } = compileWithStringify(
       `<div>${repeat(
         `<span class="foo"/>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div>`,
     )
-    // should have 6 hoisted nodes (including the entire array),
-    // but 2~5 should be null because they are merged into 1
-    expect(ast.hoists).toMatchObject([
-      {
-        type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: CREATE_STATIC,
-        arguments: [
-          JSON.stringify(
-            repeat(
-              `<span class="foo"></span>`,
-              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-            )
-          ),
-          '5'
-        ]
-      },
-      null,
-      null,
-      null,
-      null,
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+    expect(ast.cached).toMatchObject([
+      cachedArrayStaticNodeMatcher(
+        repeat(
+          `<span class="foo"></span>`,
+          StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+        ),
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      ),
     ])
+
+    expect(code).toMatchSnapshot()
   })
 
   test('serializing constant bindings', () => {
-    const { ast } = compileWithStringify(
+    const { ast, code } = compileWithStringify(
       `<div><div :style="{ color: 'red' }">${repeat(
         `<span :class="[{ foo: true }, { bar: true }]">{{ 1 }} + {{ false }}</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div></div>`,
     )
     // should be optimized now
-    expect(ast.hoists).toMatchObject([
-      {
-        type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: CREATE_STATIC,
-        arguments: [
-          JSON.stringify(
-            `<div style="color:red;">${repeat(
-              `<span class="foo bar">1 + false</span>`,
-              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-            )}</div>`
-          ),
-          '1'
-        ]
-      },
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+    expect(ast.cached).toMatchObject([
+      cachedArrayStaticNodeMatcher(
+        `<div style="color:red;">${repeat(
+          `<span class="foo bar">1 + false</span>`,
+          StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+        )}</div>`,
+        1,
+      ),
     ])
+    expect(code).toMatchSnapshot()
   })
 
   test('escape', () => {
-    const { ast } = compileWithStringify(
+    const { ast, code } = compileWithStringify(
       `<div><div>${repeat(
         `<span :class="'foo' + '&gt;ar'">{{ 1 }} + {{ '<' }}</span>` +
           `<span>&amp;</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div></div>`,
     )
     // should be optimized now
-    expect(ast.hoists).toMatchObject([
-      {
-        type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: CREATE_STATIC,
-        arguments: [
-          JSON.stringify(
-            `<div>${repeat(
-              `<span class="foo&gt;ar">1 + &lt;</span>` + `<span>&amp;</span>`,
-              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-            )}</div>`
-          ),
-          '1'
-        ]
-      },
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+    expect(ast.cached).toMatchObject([
+      cachedArrayStaticNodeMatcher(
+        `<div>${repeat(
+          `<span class="foo&gt;ar">1 + &lt;</span>` + `<span>&amp;</span>`,
+          StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+        )}</div>`,
+        1,
+      ),
     ])
+    expect(code).toMatchSnapshot()
   })
 
-  test('should bail on bindings that are hoisted but not stringifiable', () => {
+  test('should bail on bindings that are cached but not stringifiable', () => {
     const { ast, code } = compile(
       `<div><div>${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
       )}<img src="./foo" /></div></div>`,
       {
         hoistStatic: true,
@@ -195,7 +200,7 @@ describe('stringify static html', () => {
                 '_imports_0_',
                 false,
                 node.loc,
-                ConstantTypes.CAN_HOIST
+                ConstantTypes.CAN_CACHE,
               )
               node.props[0] = {
                 type: NodeTypes.DIRECTIVE,
@@ -203,24 +208,14 @@ describe('stringify static html', () => {
                 arg: createSimpleExpression('src', true),
                 exp,
                 modifiers: [],
-                loc: node.loc
+                loc: node.loc,
               }
             }
-          }
-        ]
-      }
-    )
-    expect(ast.hoists).toMatchObject([
-      {
-        // the expression and the tree are still hoistable
-        // but should stay NodeTypes.VNODE_CALL
-        // if it's stringified it will be NodeTypes.JS_CALL_EXPRESSION
-        type: NodeTypes.VNODE_CALL
+          },
+        ],
       },
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
-    ])
+    )
+    expect(ast.cached).toMatchObject([cachedArrayBailedMatcher()])
     expect(code).toMatchSnapshot()
   })
 
@@ -230,7 +225,7 @@ describe('stringify static html', () => {
     const { ast, code } = compile(
       `<div><div>${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
       )}<img src="./foo" /></div></div>`,
       {
         hoistStatic: true,
@@ -243,7 +238,7 @@ describe('stringify static html', () => {
                 '_imports_0_',
                 false,
                 node.loc,
-                ConstantTypes.CAN_STRINGIFY
+                ConstantTypes.CAN_STRINGIFY,
               )
               node.props[0] = {
                 type: NodeTypes.DIRECTIVE,
@@ -251,160 +246,98 @@ describe('stringify static html', () => {
                 arg: createSimpleExpression('src', true),
                 exp,
                 modifiers: [],
-                loc: node.loc
+                loc: node.loc,
               }
             }
-          }
-        ]
-      }
-    )
-    expect(ast.hoists).toMatchObject([
-      {
-        // the hoisted node should be NodeTypes.JS_CALL_EXPRESSION
-        // of `createStaticVNode()` instead of dynamic NodeTypes.VNODE_CALL
-        type: NodeTypes.JS_CALL_EXPRESSION
+          },
+        ],
       },
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
-    ])
+    )
+    expect(ast.cached).toMatchObject([cachedArraySuccessMatcher()])
     expect(code).toMatchSnapshot()
   })
 
   // #1128
-  test('should bail on non attribute bindings', () => {
+  test('should bail on non-attribute bindings', () => {
     const { ast } = compileWithStringify(
       `<div><div><input indeterminate>${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div></div>`,
     )
-    expect(ast.hoists).toMatchObject([
-      {
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
-      },
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
-    ])
+    expect(ast.cached).toMatchObject([cachedArrayBailedMatcher()])
 
     const { ast: ast2 } = compileWithStringify(
       `<div><div><input :indeterminate="true">${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div></div>`,
     )
-    expect(ast2.hoists).toMatchObject([
-      {
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
-      },
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
-    ])
-  })
+    expect(ast2.cached).toMatchObject([cachedArrayBailedMatcher()])
 
-  test('should bail on non attribute bindings', () => {
-    const { ast } = compileWithStringify(
+    const { ast: ast3 } = compileWithStringify(
       `<div><div>${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}<input indeterminate></div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}<input indeterminate></div></div>`,
     )
-    expect(ast.hoists).toMatchObject([
-      {
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
-      },
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
-    ])
+    expect(ast3.cached).toMatchObject([cachedArrayBailedMatcher()])
 
-    const { ast: ast2 } = compileWithStringify(
+    const { ast: ast4 } = compileWithStringify(
       `<div><div>${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}<input :indeterminate="true"></div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}<input :indeterminate="true"></div></div>`,
     )
-    expect(ast2.hoists).toMatchObject([
-      {
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
-      },
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
-    ])
+    expect(ast4.cached).toMatchObject([cachedArrayBailedMatcher()])
   })
 
   test('should bail on tags that has placement constraints (eg.tables related tags)', () => {
     const { ast } = compileWithStringify(
       `<table><tbody>${repeat(
         `<tr class="foo"><td>foo</td></tr>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</tbody></table>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</tbody></table>`,
     )
-    expect(ast.hoists).toMatchObject([
-      {
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
-      },
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
-    ])
+    expect(ast.cached).toMatchObject([cachedArrayBailedMatcher()])
   })
 
   test('should bail inside slots', () => {
     const { ast } = compileWithStringify(
       `<foo>${repeat(
         `<div class="foo"></div>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</foo>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</foo>`,
     )
-    expect(ast.hoists.length).toBe(
-      StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-    )
-    ast.hoists.forEach(node => {
-      expect(node).toMatchObject({
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
-      })
-    })
+    expect(ast.cached).toMatchObject([
+      cachedArrayBailedMatcher(StringifyThresholds.ELEMENT_WITH_BINDING_COUNT),
+    ])
 
     const { ast: ast2 } = compileWithStringify(
       `<foo><template #foo>${repeat(
         `<div class="foo"></div>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</template></foo>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</template></foo>`,
     )
-    expect(ast2.hoists.length).toBe(
-      StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-    )
-    ast2.hoists.forEach(node => {
-      expect(node).toMatchObject({
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
-      })
-    })
+    expect(ast2.cached).toMatchObject([
+      cachedArrayBailedMatcher(StringifyThresholds.ELEMENT_WITH_BINDING_COUNT),
+    ])
   })
 
   test('should remove attribute for `null`', () => {
     const { ast } = compileWithStringify(
       `<div>${repeat(
         `<span :title="null"></span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div>`,
     )
-    expect(ast.hoists[0]).toMatchObject({
-      type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: CREATE_STATIC,
-      arguments: [
-        JSON.stringify(
-          `${repeat(
-            `<span></span>`,
-            StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-          )}`
-        ),
-        '5'
-      ]
-    })
+
+    expect(ast.cached).toMatchObject([
+      cachedArrayStaticNodeMatcher(
+        repeat(`<span></span>`, StringifyThresholds.ELEMENT_WITH_BINDING_COUNT),
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      ),
+    ])
   })
 
   // #6617
@@ -412,22 +345,27 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<button :disabled="false">enable</button>${repeat(
         `<div></div>`,
-        StringifyThresholds.NODE_COUNT
-      )}`
+        StringifyThresholds.NODE_COUNT,
+      )}`,
     )
-    expect(ast.hoists[0]).toMatchObject({
-      type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: CREATE_STATIC,
-      arguments: [
-        JSON.stringify(
-          `<button>enable</button>${repeat(
-            `<div></div>`,
-            StringifyThresholds.NODE_COUNT
-          )}`
-        ),
-        '21'
-      ]
-    })
+    expect(ast.cached).toMatchObject([
+      {
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+        value: {
+          type: NodeTypes.JS_CALL_EXPRESSION,
+          callee: CREATE_STATIC,
+          arguments: [
+            JSON.stringify(
+              `<button>enable</button>${repeat(
+                `<div></div>`,
+                StringifyThresholds.NODE_COUNT,
+              )}`,
+            ),
+            '21',
+          ],
+        },
+      },
+    ])
   })
 
   test('should stringify svg', () => {
@@ -436,22 +374,37 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<div>${svg}${repeat(
         repeated,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</svg></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</svg></div>`,
     )
-    expect(ast.hoists[0]).toMatchObject({
-      type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: CREATE_STATIC,
-      arguments: [
-        JSON.stringify(
-          `${svg}${repeat(
-            repeated,
-            StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-          )}</svg>`
-        ),
-        '1'
-      ]
-    })
+
+    expect(ast.cached).toMatchObject([
+      cachedArrayStaticNodeMatcher(
+        `${svg}${repeat(
+          repeated,
+          StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+        )}</svg>`,
+        1,
+      ),
+    ])
+  })
+
+  test('should stringify mathML', () => {
+    const math = `<math xmlns="http://www.w3.org/1998/Math/MathML">`
+    const repeated = `<ms>1</ms>`
+    const { ast } = compileWithStringify(
+      `<div>${math}${repeat(
+        repeated,
+        StringifyThresholds.NODE_COUNT,
+      )}</math></div>`,
+    )
+
+    expect(ast.cached).toMatchObject([
+      cachedArrayStaticNodeMatcher(
+        `${math}${repeat(repeated, StringifyThresholds.NODE_COUNT)}</math>`,
+        1,
+      ),
+    ])
   })
 
   // #5439
@@ -485,4 +438,49 @@ describe('stringify static html', () => {
     expect(code).toMatch(`<code>text1</code>`)
     expect(code).toMatchSnapshot()
   })
+
+  test('should work for <option> elements with string values', () => {
+    const { ast, code } = compileWithStringify(
+      `<div><select>${repeat(
+        `<option value="1" />`,
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</select></div>`,
+    )
+    // should be optimized now
+    expect(ast.cached).toMatchObject([
+      cachedArrayStaticNodeMatcher(
+        `<select>${repeat(
+          `<option value="1"></option>`,
+          StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+        )}</select>`,
+        1,
+      ),
+    ])
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should bail for <option> elements with number values', () => {
+    const { ast, code } = compileWithStringify(
+      `<div><select>${repeat(
+        `<option :value="1" />`,
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</select></div>`,
+    )
+    expect(ast.cached).toMatchObject([cachedArrayBailedMatcher()])
+    expect(code).toMatchSnapshot()
+  })
+
+  test('eligible content (elements > 20) + non-eligible content', () => {
+    const { code } = compileWithStringify(
+      `<div>${repeat(
+        `<span/>`,
+        StringifyThresholds.NODE_COUNT,
+      )}<div key="1">1</div>${repeat(
+        `<span/>`,
+        StringifyThresholds.NODE_COUNT,
+      )}</div>`,
+    )
+
+    expect(code).toMatchSnapshot()
+  })
 })
diff --git a/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts b/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
index 6eee9f8ba..51c40c45d 100644
--- a/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
@@ -1,10 +1,10 @@
 import {
+  type CompilerOptions,
+  type ElementNode,
+  NodeTypes,
+  type VNodeCall,
   baseParse as parse,
   transform,
-  CompilerOptions,
-  ElementNode,
-  NodeTypes,
-  VNodeCall
 } from '@vue/compiler-core'
 import { transformBind } from '../../../compiler-core/src/transforms/vBind'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
@@ -12,16 +12,16 @@ import { transformStyle } from '../../src/transforms/transformStyle'
 
 function transformWithStyleTransform(
   template: string,
-  options: CompilerOptions = {}
+  options: CompilerOptions = {},
 ) {
   const ast = parse(template)
   transform(ast, {
     nodeTransforms: [transformStyle],
-    ...options
+    ...options,
   })
   return {
     root: ast,
-    node: ast.children[0] as ElementNode
+    node: ast.children[0] as ElementNode,
   }
 }
 
@@ -34,13 +34,13 @@ describe('compiler: style transform', () => {
       arg: {
         type: NodeTypes.SIMPLE_EXPRESSION,
         content: `style`,
-        isStatic: true
+        isStatic: true,
       },
       exp: {
         type: NodeTypes.SIMPLE_EXPRESSION,
         content: `{"color":"red"}`,
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
   })
 
@@ -48,8 +48,8 @@ describe('compiler: style transform', () => {
     const { node } = transformWithStyleTransform(`<div style="color: red"/>`, {
       nodeTransforms: [transformStyle, transformElement],
       directiveTransforms: {
-        bind: transformBind
-      }
+        bind: transformBind,
+      },
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -58,15 +58,15 @@ describe('compiler: style transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `style`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `{"color":"red"}`,
-            isStatic: false
-          }
-        }
-      ]
+            isStatic: false,
+          },
+        },
+      ],
     })
     // should not cause the STYLE patchFlag to be attached
     expect((node.codegenNode as VNodeCall).patchFlag).toBeUndefined()
diff --git a/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts b/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
index af3365239..bca2fdf95 100644
--- a/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
@@ -1,15 +1,12 @@
 import {
+  type CompilerOptions,
+  type PlainElementNode,
   baseParse as parse,
   transform,
-  PlainElementNode,
-  CompilerOptions
 } from '@vue/compiler-core'
 import { transformVHtml } from '../../src/transforms/vHtml'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
-import {
-  createObjectMatcher,
-  genFlagText
-} from '../../../compiler-core/__tests__/testUtils'
+import { createObjectMatcher } from '../../../compiler-core/__tests__/testUtils'
 import { PatchFlags } from '@vue/shared'
 import { DOMErrorCodes } from '../../src/errors'
 
@@ -18,9 +15,9 @@ function transformWithVHtml(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms: [transformElement],
     directiveTransforms: {
-      html: transformVHtml
+      html: transformVHtml,
     },
-    ...options
+    ...options,
   })
   return ast
 }
@@ -31,40 +28,40 @@ describe('compiler: v-html transform', () => {
     expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
-        innerHTML: `[test]`
+        innerHTML: `[test]`,
       }),
       children: undefined,
-      patchFlag: genFlagText(PatchFlags.PROPS),
-      dynamicProps: `["innerHTML"]`
+      patchFlag: PatchFlags.PROPS,
+      dynamicProps: `["innerHTML"]`,
     })
   })
 
   it('should raise error and ignore children when v-html is present', () => {
     const onError = vi.fn()
     const ast = transformWithVHtml(`<div v-html="test">hello</div>`, {
-      onError
+      onError,
     })
     expect(onError.mock.calls).toMatchObject([
-      [{ code: DOMErrorCodes.X_V_HTML_WITH_CHILDREN }]
+      [{ code: DOMErrorCodes.X_V_HTML_WITH_CHILDREN }],
     ])
     expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
-        innerHTML: `[test]`
+        innerHTML: `[test]`,
       }),
       children: undefined, // <-- children should have been removed
-      patchFlag: genFlagText(PatchFlags.PROPS),
-      dynamicProps: `["innerHTML"]`
+      patchFlag: PatchFlags.PROPS,
+      dynamicProps: `["innerHTML"]`,
     })
   })
 
   it('should raise error if has no expression', () => {
     const onError = vi.fn()
     transformWithVHtml(`<div v-html></div>`, {
-      onError
+      onError,
     })
     expect(onError.mock.calls).toMatchObject([
-      [{ code: DOMErrorCodes.X_V_HTML_NO_EXPRESSION }]
+      [{ code: DOMErrorCodes.X_V_HTML_NO_EXPRESSION }],
     ])
   })
 })
diff --git a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
index a67ca5d69..02d188f01 100644
--- a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
@@ -1,8 +1,8 @@
 import {
+  type CompilerOptions,
+  generate,
   baseParse as parse,
   transform,
-  CompilerOptions,
-  generate
 } from '@vue/compiler-core'
 import { transformModel } from '../../src/transforms/vModel'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
@@ -12,7 +12,7 @@ import {
   V_MODEL_DYNAMIC,
   V_MODEL_RADIO,
   V_MODEL_SELECT,
-  V_MODEL_TEXT
+  V_MODEL_TEXT,
 } from '../../src/runtimeHelpers'
 
 function transformWithModel(template: string, options: CompilerOptions = {}) {
@@ -20,9 +20,9 @@ function transformWithModel(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms: [transformElement],
     directiveTransforms: {
-      model: transformModel
+      model: transformModel,
     },
-    ...options
+    ...options,
   })
   return ast
 }
@@ -70,7 +70,7 @@ describe('compiler: transform v-model', () => {
     expect(generate(root).code).toMatchSnapshot()
 
     const root2 = transformWithModel(
-      '<input v-bind:[key]="val" v-model="model" />'
+      '<input v-bind:[key]="val" v-model="model" />',
     )
     expect(root2.helpers).toContain(V_MODEL_DYNAMIC)
     expect(generate(root2).code).toMatchSnapshot()
@@ -98,8 +98,8 @@ describe('compiler: transform v-model', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT
-        })
+          code: DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT,
+        }),
       )
     })
 
@@ -110,8 +110,8 @@ describe('compiler: transform v-model', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT
-        })
+          code: DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT,
+        }),
       )
     })
 
@@ -119,7 +119,7 @@ describe('compiler: transform v-model', () => {
       const onError = vi.fn()
       const root = transformWithModel('<my-input v-model="model" />', {
         onError,
-        isCustomElement: tag => tag.startsWith('my-')
+        isCustomElement: tag => tag.startsWith('my-'),
       })
       expect(root.helpers).toContain(V_MODEL_TEXT)
       expect(onError).not.toHaveBeenCalled()
@@ -129,24 +129,24 @@ describe('compiler: transform v-model', () => {
     test('should raise error if used file input element', () => {
       const onError = vi.fn()
       transformWithModel(`<input type="file" v-model="test"/>`, {
-        onError
+        onError,
       })
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT
-        })
+          code: DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT,
+        }),
       )
     })
 
     test('should error on dynamic value binding alongside v-model', () => {
       const onError = vi.fn()
       transformWithModel(`<input v-model="test" :value="test" />`, {
-        onError
+        onError,
       })
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE
-        })
+          code: DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE,
+        }),
       )
     })
 
@@ -154,7 +154,7 @@ describe('compiler: transform v-model', () => {
     test('should NOT error on static value binding alongside v-model', () => {
       const onError = vi.fn()
       transformWithModel(`<input v-model="test" value="test" />`, {
-        onError
+        onError,
       })
       expect(onError).not.toHaveBeenCalled()
     })
diff --git a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
index 42b4cd798..ee9ea93c3 100644
--- a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
@@ -1,20 +1,19 @@
 import {
-  baseParse as parse,
-  CompilerOptions,
-  ElementNode,
-  TO_HANDLER_KEY,
-  helperNameMap,
+  BindingTypes,
+  type CompilerOptions,
+  type ElementNode,
   NodeTypes,
-  ObjectExpression,
+  type ObjectExpression,
+  TO_HANDLER_KEY,
+  type VNodeCall,
+  helperNameMap,
+  baseParse as parse,
   transform,
-  VNodeCall,
-  BindingTypes
 } from '@vue/compiler-core'
 import { transformOn } from '../../src/transforms/vOn'
 import { V_ON_WITH_KEYS, V_ON_WITH_MODIFIERS } from '../../src/runtimeHelpers'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
 import { transformExpression } from '../../../compiler-core/src/transforms/transformExpression'
-import { genFlagText } from '../../../compiler-core/__tests__/testUtils'
 import { PatchFlags } from '@vue/shared'
 
 function parseWithVOn(template: string, options: CompilerOptions = {}) {
@@ -22,31 +21,31 @@ function parseWithVOn(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms: [transformExpression, transformElement],
     directiveTransforms: {
-      on: transformOn
+      on: transformOn,
     },
-    ...options
+    ...options,
   })
   const node = (ast.children[0] as ElementNode).codegenNode as VNodeCall
   return {
     root: ast,
     node,
-    props: (node.props as ObjectExpression).properties
+    props: (node.props as ObjectExpression).properties,
   }
 }
 
 describe('compiler-dom: transform v-on', () => {
   it('should support multiple modifiers w/ prefixIdentifiers: true', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @click.stop.prevent="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_MODIFIERS,
-        arguments: [{ content: '_ctx.test' }, '["stop","prevent"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["stop","prevent"]'],
+      },
     })
   })
 
@@ -54,8 +53,8 @@ describe('compiler-dom: transform v-on', () => {
     const { props } = parseWithVOn(
       `<div @click.stop="test" @keyup.enter="test" />`,
       {
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     const [clickProp, keyUpProp] = props
 
@@ -64,95 +63,95 @@ describe('compiler-dom: transform v-on', () => {
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_MODIFIERS,
-        arguments: [{ content: '_ctx.test' }, '["stop"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["stop"]'],
+      },
     })
     expect(keyUpProp).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_KEYS,
-        arguments: [{ content: '_ctx.test' }, '["enter"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["enter"]'],
+      },
     })
   })
 
   it('should support multiple modifiers and event options w/ prefixIdentifiers: true', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @click.stop.capture.once="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       key: {
-        content: `onClickCaptureOnce`
+        content: `onClickCaptureOnce`,
       },
       value: {
         callee: V_ON_WITH_MODIFIERS,
-        arguments: [{ content: '_ctx.test' }, '["stop"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["stop"]'],
+      },
     })
   })
 
   it('should wrap keys guard for keyboard events or dynamic events', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @keydown.stop.capture.ctrl.a="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       key: {
-        content: `onKeydownCapture`
+        content: `onKeydownCapture`,
       },
       value: {
         callee: V_ON_WITH_KEYS,
         arguments: [
           {
             callee: V_ON_WITH_MODIFIERS,
-            arguments: [{ content: '_ctx.test' }, '["stop","ctrl"]']
+            arguments: [{ content: '_ctx.test' }, '["stop","ctrl"]'],
           },
-          '["a"]'
-        ]
-      }
+          '["a"]',
+        ],
+      },
     })
   })
 
   it('should not wrap keys guard if no key modifier is present', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @keyup.exact="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_MODIFIERS,
-        arguments: [{ content: '_ctx.test' }, '["exact"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["exact"]'],
+      },
     })
   })
 
   it('should wrap keys guard for static key event w/ left/right modifiers', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @keyup.left="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_KEYS,
-        arguments: [{ content: '_ctx.test' }, '["left"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["left"]'],
+      },
     })
   })
 
   it('should wrap both for dynamic key event w/ left/right modifiers', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @[e].left="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
@@ -161,41 +160,41 @@ describe('compiler-dom: transform v-on', () => {
         arguments: [
           {
             callee: V_ON_WITH_MODIFIERS,
-            arguments: [{ content: `_ctx.test` }, `["left"]`]
+            arguments: [{ content: `_ctx.test` }, `["left"]`],
           },
-          '["left"]'
-        ]
-      }
+          '["left"]',
+        ],
+      },
     })
   })
 
   it('should not wrap normal guard if there is only keys guard', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @keyup.enter="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_KEYS,
-        arguments: [{ content: '_ctx.test' }, '["enter"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["enter"]'],
+      },
     })
   })
 
   test('should transform click.right', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @click.right="test"/>`)
     expect(prop.key).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `onContextmenu`
+      content: `onContextmenu`,
     })
 
     // dynamic
     const {
-      props: [prop2]
+      props: [prop2],
     } = parseWithVOn(`<div @[event].right="test"/>`)
     // (_toHandlerKey(event)).toLowerCase() === "onclick" ? "onContextmenu" : (_toHandlerKey(event))
     expect(prop2.key).toMatchObject({
@@ -206,34 +205,34 @@ describe('compiler-dom: transform v-on', () => {
           children: [
             `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
-            `)`
-          ]
+            `)`,
+          ],
         },
         `) === "onClick" ? "onContextmenu" : (`,
         {
           children: [
             `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
-            `)`
-          ]
+            `)`,
+          ],
         },
-        `)`
-      ]
+        `)`,
+      ],
     })
   })
 
   test('should transform click.middle', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @click.middle="test"/>`)
     expect(prop.key).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `onMouseup`
+      content: `onMouseup`,
     })
 
     // dynamic
     const {
-      props: [prop2]
+      props: [prop2],
     } = parseWithVOn(`<div @[event].middle="test"/>`)
     // (_eventNaming(event)).toLowerCase() === "onclick" ? "onMouseup" : (_eventNaming(event))
     expect(prop2.key).toMatchObject({
@@ -244,48 +243,48 @@ describe('compiler-dom: transform v-on', () => {
           children: [
             `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
-            `)`
-          ]
+            `)`,
+          ],
         },
         `) === "onClick" ? "onMouseup" : (`,
         {
           children: [
             `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
-            `)`
-          ]
+            `)`,
+          ],
         },
-        `)`
-      ]
+        `)`,
+      ],
     })
   })
 
   test('cache handler w/ modifiers', () => {
     const {
       root,
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @keyup.enter.capture="foo" />`, {
       prefixIdentifiers: true,
-      cacheHandlers: true
+      cacheHandlers: true,
     })
-    expect(root.cached).toBe(1)
+    expect(root.cached.length).toBe(1)
     // should not treat cached handler as dynamicProp, so it should have no
     // dynamicProps flags and only the hydration flag
     expect((root as any).children[0].codegenNode.patchFlag).toBe(
-      genFlagText(PatchFlags.NEED_HYDRATION)
+      PatchFlags.NEED_HYDRATION,
     )
     expect(prop).toMatchObject({
       key: {
-        content: `onKeyupCapture`
+        content: `onKeyupCapture`,
       },
       value: {
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
         value: {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: V_ON_WITH_KEYS
-        }
-      }
+          callee: V_ON_WITH_KEYS,
+        },
+      },
     })
   })
 
@@ -293,13 +292,13 @@ describe('compiler-dom: transform v-on', () => {
     const { node } = parseWithVOn(`<div @keydown.up="foo" />`, {
       prefixIdentifiers: true,
       bindingMetadata: {
-        foo: BindingTypes.SETUP_CONST
+        foo: BindingTypes.SETUP_CONST,
       },
       directiveTransforms: {
-        on: transformOn
-      }
+        on: transformOn,
+      },
     })
     // should only have hydration flag
-    expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_HYDRATION))
+    expect(node.patchFlag).toBe(PatchFlags.NEED_HYDRATION)
   })
 })
diff --git a/packages/compiler-dom/__tests__/transforms/vShow.spec.ts b/packages/compiler-dom/__tests__/transforms/vShow.spec.ts
index 6d521c8e1..11aa62464 100644
--- a/packages/compiler-dom/__tests__/transforms/vShow.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vShow.spec.ts
@@ -1,8 +1,8 @@
 import {
+  type CompilerOptions,
+  generate,
   baseParse as parse,
   transform,
-  generate,
-  CompilerOptions
 } from '@vue/compiler-core'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
 import { transformShow } from '../../src/transforms/vShow'
@@ -13,9 +13,9 @@ function transformWithShow(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms: [transformElement],
     directiveTransforms: {
-      show: transformShow
+      show: transformShow,
     },
-    ...options
+    ...options,
   })
   return ast
 }
@@ -34,8 +34,8 @@ describe('compiler: v-show transform', () => {
     expect(onError).toHaveBeenCalledTimes(1)
     expect(onError).toHaveBeenCalledWith(
       expect.objectContaining({
-        code: DOMErrorCodes.X_V_SHOW_NO_EXPRESSION
-      })
+        code: DOMErrorCodes.X_V_SHOW_NO_EXPRESSION,
+      }),
     )
   })
 })
diff --git a/packages/compiler-dom/__tests__/transforms/vText.spec.ts b/packages/compiler-dom/__tests__/transforms/vText.spec.ts
index 22db3ec05..e96ab2972 100644
--- a/packages/compiler-dom/__tests__/transforms/vText.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vText.spec.ts
@@ -1,15 +1,12 @@
 import {
+  type CompilerOptions,
+  type PlainElementNode,
   baseParse as parse,
   transform,
-  PlainElementNode,
-  CompilerOptions
 } from '@vue/compiler-core'
 import { transformVText } from '../../src/transforms/vText'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
-import {
-  createObjectMatcher,
-  genFlagText
-} from '../../../compiler-core/__tests__/testUtils'
+import { createObjectMatcher } from '../../../compiler-core/__tests__/testUtils'
 import { PatchFlags } from '@vue/shared'
 import { DOMErrorCodes } from '../../src/errors'
 
@@ -18,9 +15,9 @@ function transformWithVText(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms: [transformElement],
     directiveTransforms: {
-      text: transformVText
+      text: transformVText,
     },
-    ...options
+    ...options,
   })
   return ast
 }
@@ -32,43 +29,43 @@ describe('compiler: v-text transform', () => {
       tag: `"div"`,
       props: createObjectMatcher({
         textContent: {
-          arguments: [{ content: 'test' }]
-        }
+          arguments: [{ content: 'test' }],
+        },
       }),
       children: undefined,
-      patchFlag: genFlagText(PatchFlags.PROPS),
-      dynamicProps: `["textContent"]`
+      patchFlag: PatchFlags.PROPS,
+      dynamicProps: `["textContent"]`,
     })
   })
 
   it('should raise error and ignore children when v-text is present', () => {
     const onError = vi.fn()
     const ast = transformWithVText(`<div v-text="test">hello</div>`, {
-      onError
+      onError,
     })
     expect(onError.mock.calls).toMatchObject([
-      [{ code: DOMErrorCodes.X_V_TEXT_WITH_CHILDREN }]
+      [{ code: DOMErrorCodes.X_V_TEXT_WITH_CHILDREN }],
     ])
     expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
         textContent: {
-          arguments: [{ content: 'test' }]
-        }
+          arguments: [{ content: 'test' }],
+        },
       }),
       children: undefined, // <-- children should have been removed
-      patchFlag: genFlagText(PatchFlags.PROPS),
-      dynamicProps: `["textContent"]`
+      patchFlag: PatchFlags.PROPS,
+      dynamicProps: `["textContent"]`,
     })
   })
 
   it('should raise error if has no expression', () => {
     const onError = vi.fn()
     transformWithVText(`<div v-text></div>`, {
-      onError
+      onError,
     })
     expect(onError.mock.calls).toMatchObject([
-      [{ code: DOMErrorCodes.X_V_TEXT_NO_EXPRESSION }]
+      [{ code: DOMErrorCodes.X_V_TEXT_NO_EXPRESSION }],
     ])
   })
 })
diff --git a/packages/compiler-dom/__tests__/transforms/validateHtmlNesting.spec.ts b/packages/compiler-dom/__tests__/transforms/validateHtmlNesting.spec.ts
new file mode 100644
index 000000000..ad9f91713
--- /dev/null
+++ b/packages/compiler-dom/__tests__/transforms/validateHtmlNesting.spec.ts
@@ -0,0 +1,20 @@
+import { type CompilerError, compile } from '../../src'
+
+describe('validate html nesting', () => {
+  it('should warn with p > div', () => {
+    let err: CompilerError | undefined
+    compile(`<p><div></div></p>`, {
+      onWarn: e => (err = e),
+    })
+    expect(err).toBeDefined()
+    expect(err!.message).toMatch(`<div> cannot be child of <p>`)
+  })
+
+  it('should not warn with select > hr', () => {
+    let err: CompilerError | undefined
+    compile(`<select><hr></select>`, {
+      onWarn: e => (err = e),
+    })
+    expect(err).toBeUndefined()
+  })
+})
diff --git a/packages/compiler-dom/package.json b/packages/compiler-dom/package.json
index e6f610010..ed5950dc7 100644
--- a/packages/compiler-dom/package.json
+++ b/packages/compiler-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.3.9",
+  "version": "3.5.11",
   "description": "@vue/compiler-dom",
   "main": "index.js",
   "module": "dist/compiler-dom.esm-bundler.js",
@@ -11,6 +11,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/compiler-dom.d.ts",
+      "node": {
+        "production": "./dist/compiler-dom.cjs.prod.js",
+        "development": "./dist/compiler-dom.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/compiler-dom.esm-bundler.js",
+      "import": "./dist/compiler-dom.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "sideEffects": false,
   "buildOptions": {
     "name": "VueCompilerDOM",
diff --git a/packages/compiler-dom/src/decodeHtml.ts b/packages/compiler-dom/src/decodeHtml.ts
deleted file mode 100644
index 68b0277a4..000000000
--- a/packages/compiler-dom/src/decodeHtml.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { ParserOptions } from '@vue/compiler-core'
-import namedCharacterReferences from './namedChars.json'
-
-// lazy compute this to make this file tree-shakable for browser
-let maxCRNameLength: number
-
-export const decodeHtml: ParserOptions['decodeEntities'] = (
-  rawText,
-  asAttr
-) => {
-  let offset = 0
-  const end = rawText.length
-  let decodedText = ''
-
-  function advance(length: number) {
-    offset += length
-    rawText = rawText.slice(length)
-  }
-
-  while (offset < end) {
-    const head = /&(?:#x?)?/i.exec(rawText)
-    if (!head || offset + head.index >= end) {
-      const remaining = end - offset
-      decodedText += rawText.slice(0, remaining)
-      advance(remaining)
-      break
-    }
-
-    // Advance to the "&".
-    decodedText += rawText.slice(0, head.index)
-    advance(head.index)
-
-    if (head[0] === '&') {
-      // Named character reference.
-      let name = ''
-      let value: string | undefined = undefined
-      if (/[0-9a-z]/i.test(rawText[1])) {
-        if (!maxCRNameLength) {
-          maxCRNameLength = Object.keys(namedCharacterReferences).reduce(
-            (max, name) => Math.max(max, name.length),
-            0
-          )
-        }
-        for (let length = maxCRNameLength; !value && length > 0; --length) {
-          name = rawText.slice(1, 1 + length)
-          value = (namedCharacterReferences as Record<string, string>)[name]
-        }
-        if (value) {
-          const semi = name.endsWith(';')
-          if (
-            asAttr &&
-            !semi &&
-            /[=a-z0-9]/i.test(rawText[name.length + 1] || '')
-          ) {
-            decodedText += '&' + name
-            advance(1 + name.length)
-          } else {
-            decodedText += value
-            advance(1 + name.length)
-          }
-        } else {
-          decodedText += '&' + name
-          advance(1 + name.length)
-        }
-      } else {
-        decodedText += '&'
-        advance(1)
-      }
-    } else {
-      // Numeric character reference.
-      const hex = head[0] === '&#x'
-      const pattern = hex ? /^&#x([0-9a-f]+);?/i : /^&#([0-9]+);?/
-      const body = pattern.exec(rawText)
-      if (!body) {
-        decodedText += head[0]
-        advance(head[0].length)
-      } else {
-        // https://html.spec.whatwg.org/multipage/parsing.html#numeric-character-reference-end-state
-        let cp = Number.parseInt(body[1], hex ? 16 : 10)
-        if (cp === 0) {
-          cp = 0xfffd
-        } else if (cp > 0x10ffff) {
-          cp = 0xfffd
-        } else if (cp >= 0xd800 && cp <= 0xdfff) {
-          cp = 0xfffd
-        } else if ((cp >= 0xfdd0 && cp <= 0xfdef) || (cp & 0xfffe) === 0xfffe) {
-          // noop
-        } else if (
-          (cp >= 0x01 && cp <= 0x08) ||
-          cp === 0x0b ||
-          (cp >= 0x0d && cp <= 0x1f) ||
-          (cp >= 0x7f && cp <= 0x9f)
-        ) {
-          cp = CCR_REPLACEMENTS[cp] || cp
-        }
-        decodedText += String.fromCodePoint(cp)
-        advance(body[0].length)
-      }
-    }
-  }
-  return decodedText
-}
-
-// https://html.spec.whatwg.org/multipage/parsing.html#numeric-character-reference-end-state
-const CCR_REPLACEMENTS: Record<number, number | undefined> = {
-  0x80: 0x20ac,
-  0x82: 0x201a,
-  0x83: 0x0192,
-  0x84: 0x201e,
-  0x85: 0x2026,
-  0x86: 0x2020,
-  0x87: 0x2021,
-  0x88: 0x02c6,
-  0x89: 0x2030,
-  0x8a: 0x0160,
-  0x8b: 0x2039,
-  0x8c: 0x0152,
-  0x8e: 0x017d,
-  0x91: 0x2018,
-  0x92: 0x2019,
-  0x93: 0x201c,
-  0x94: 0x201d,
-  0x95: 0x2022,
-  0x96: 0x2013,
-  0x97: 0x2014,
-  0x98: 0x02dc,
-  0x99: 0x2122,
-  0x9a: 0x0161,
-  0x9b: 0x203a,
-  0x9c: 0x0153,
-  0x9e: 0x017e,
-  0x9f: 0x0178
-}
diff --git a/packages/compiler-dom/src/errors.ts b/packages/compiler-dom/src/errors.ts
index b519dbdb7..b47624840 100644
--- a/packages/compiler-dom/src/errors.ts
+++ b/packages/compiler-dom/src/errors.ts
@@ -1,8 +1,8 @@
 import {
-  SourceLocation,
-  CompilerError,
+  type CompilerError,
+  ErrorCodes,
+  type SourceLocation,
   createCompilerError,
-  ErrorCodes
 } from '@vue/compiler-core'
 
 export interface DOMCompilerError extends CompilerError {
@@ -11,16 +11,16 @@ export interface DOMCompilerError extends CompilerError {
 
 export function createDOMCompilerError(
   code: DOMErrorCodes,
-  loc?: SourceLocation
+  loc?: SourceLocation,
 ) {
   return createCompilerError(
     code,
     loc,
-    __DEV__ || !__BROWSER__ ? DOMErrorMessages : undefined
+    __DEV__ || !__BROWSER__ ? DOMErrorMessages : undefined,
   ) as DOMCompilerError
 }
 
-export const enum DOMErrorCodes {
+export enum DOMErrorCodes {
   X_V_HTML_NO_EXPRESSION = 53 /* ErrorCodes.__EXTEND_POINT__ */,
   X_V_HTML_WITH_CHILDREN,
   X_V_TEXT_NO_EXPRESSION,
@@ -32,18 +32,18 @@ export const enum DOMErrorCodes {
   X_V_SHOW_NO_EXPRESSION,
   X_TRANSITION_INVALID_CHILDREN,
   X_IGNORED_SIDE_EFFECT_TAG,
-  __EXTEND_POINT__
+  __EXTEND_POINT__,
 }
 
 if (__TEST__) {
-  // esbuild cannot infer const enum increments if first value is from another
+  // esbuild cannot infer enum increments if first value is from another
   // file, so we have to manually keep them in sync. this check ensures it
   // errors out if there are collisions.
   if (DOMErrorCodes.X_V_HTML_NO_EXPRESSION < ErrorCodes.__EXTEND_POINT__) {
     throw new Error(
       `DOMErrorCodes need to be updated to ${
         ErrorCodes.__EXTEND_POINT__ + 1
-      } to match extension point from core ErrorCodes.`
+      } to match extension point from core ErrorCodes.`,
     )
   }
 }
@@ -59,5 +59,5 @@ export const DOMErrorMessages: { [code: number]: string } = {
   [DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
   [DOMErrorCodes.X_V_SHOW_NO_EXPRESSION]: `v-show is missing expression.`,
   [DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN]: `<Transition> expects exactly one child element or component.`,
-  [DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`
+  [DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`,
 }
diff --git a/packages/compiler-dom/src/htmlNesting.ts b/packages/compiler-dom/src/htmlNesting.ts
new file mode 100644
index 000000000..cb0a7626d
--- /dev/null
+++ b/packages/compiler-dom/src/htmlNesting.ts
@@ -0,0 +1,195 @@
+/**
+ * Copied from https://github.com/MananTank/validate-html-nesting
+ * with ISC license
+ *
+ * To avoid runtime dependency on validate-html-nesting
+ * This file should not change very often in the original repo
+ * but we may need to keep it up-to-date from time to time.
+ */
+
+/**
+ * returns true if given parent-child nesting is valid HTML
+ */
+export function isValidHTMLNesting(parent: string, child: string): boolean {
+  // if we know the list of children that are the only valid children for the given parent
+  if (parent in onlyValidChildren) {
+    return onlyValidChildren[parent].has(child)
+  }
+
+  // if we know the list of parents that are the only valid parents for the given child
+  if (child in onlyValidParents) {
+    return onlyValidParents[child].has(parent)
+  }
+
+  // if we know the list of children that are NOT valid for the given parent
+  if (parent in knownInvalidChildren) {
+    // check if the child is in the list of invalid children
+    // if so, return false
+    if (knownInvalidChildren[parent].has(child)) return false
+  }
+
+  // if we know the list of parents that are NOT valid for the given child
+  if (child in knownInvalidParents) {
+    // check if the parent is in the list of invalid parents
+    // if so, return false
+    if (knownInvalidParents[child].has(parent)) return false
+  }
+
+  return true
+}
+
+const headings = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
+const emptySet = new Set([])
+
+/**
+ * maps element to set of elements that can be it's children, no other */
+const onlyValidChildren: Record<string, Set<string>> = {
+  head: new Set([
+    'base',
+    'basefront',
+    'bgsound',
+    'link',
+    'meta',
+    'title',
+    'noscript',
+    'noframes',
+    'style',
+    'script',
+    'template',
+  ]),
+  optgroup: new Set(['option']),
+  select: new Set(['optgroup', 'option', 'hr']),
+  // table
+  table: new Set(['caption', 'colgroup', 'tbody', 'tfoot', 'thead']),
+  tr: new Set(['td', 'th']),
+  colgroup: new Set(['col']),
+  tbody: new Set(['tr']),
+  thead: new Set(['tr']),
+  tfoot: new Set(['tr']),
+  // these elements can not have any children elements
+  script: emptySet,
+  iframe: emptySet,
+  option: emptySet,
+  textarea: emptySet,
+  style: emptySet,
+  title: emptySet,
+}
+
+/** maps elements to set of elements which can be it's parent, no other */
+const onlyValidParents: Record<string, Set<string>> = {
+  // sections
+  html: emptySet,
+  body: new Set(['html']),
+  head: new Set(['html']),
+  // table
+  td: new Set(['tr']),
+  colgroup: new Set(['table']),
+  caption: new Set(['table']),
+  tbody: new Set(['table']),
+  tfoot: new Set(['table']),
+  col: new Set(['colgroup']),
+  th: new Set(['tr']),
+  thead: new Set(['table']),
+  tr: new Set(['tbody', 'thead', 'tfoot']),
+  // data list
+  dd: new Set(['dl', 'div']),
+  dt: new Set(['dl', 'div']),
+  // other
+  figcaption: new Set(['figure']),
+  // li: new Set(["ul", "ol"]),
+  summary: new Set(['details']),
+  area: new Set(['map']),
+} as const
+
+/** maps element to set of elements that can not be it's children, others can */
+const knownInvalidChildren: Record<string, Set<string>> = {
+  p: new Set([
+    'address',
+    'article',
+    'aside',
+    'blockquote',
+    'center',
+    'details',
+    'dialog',
+    'dir',
+    'div',
+    'dl',
+    'fieldset',
+    'figure',
+    'footer',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'header',
+    'hgroup',
+    'hr',
+    'li',
+    'main',
+    'nav',
+    'menu',
+    'ol',
+    'p',
+    'pre',
+    'section',
+    'table',
+    'ul',
+  ]),
+  svg: new Set([
+    'b',
+    'blockquote',
+    'br',
+    'code',
+    'dd',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'embed',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'hr',
+    'i',
+    'img',
+    'li',
+    'menu',
+    'meta',
+    'ol',
+    'p',
+    'pre',
+    'ruby',
+    's',
+    'small',
+    'span',
+    'strong',
+    'sub',
+    'sup',
+    'table',
+    'u',
+    'ul',
+    'var',
+  ]),
+} as const
+
+/** maps element to set of elements that can not be it's parent, others can */
+const knownInvalidParents: Record<string, Set<string>> = {
+  a: new Set(['a']),
+  button: new Set(['button']),
+  dd: new Set(['dd', 'dt']),
+  dt: new Set(['dd', 'dt']),
+  form: new Set(['form']),
+  li: new Set(['li']),
+  h1: headings,
+  h2: headings,
+  h3: headings,
+  h4: headings,
+  h5: headings,
+  h6: headings,
+}
diff --git a/packages/compiler-dom/src/index.ts b/packages/compiler-dom/src/index.ts
index 2c6f71cef..809f37080 100644
--- a/packages/compiler-dom/src/index.ts
+++ b/packages/compiler-dom/src/index.ts
@@ -1,13 +1,13 @@
 import {
+  type CodegenResult,
+  type CompilerOptions,
+  type DirectiveTransform,
+  type NodeTransform,
+  type ParserOptions,
+  type RootNode,
   baseCompile,
   baseParse,
-  CompilerOptions,
-  CodegenResult,
-  ParserOptions,
-  RootNode,
   noopDirectiveTransform,
-  NodeTransform,
-  DirectiveTransform
 } from '@vue/compiler-core'
 import { parserOptions } from './parserOptions'
 import { transformStyle } from './transforms/transformStyle'
@@ -19,13 +19,14 @@ import { transformShow } from './transforms/vShow'
 import { transformTransition } from './transforms/Transition'
 import { stringifyStatic } from './transforms/stringifyStatic'
 import { ignoreSideEffectTags } from './transforms/ignoreSideEffectTags'
+import { validateHtmlNesting } from './transforms/validateHtmlNesting'
 import { extend } from '@vue/shared'
 
 export { parserOptions }
 
 export const DOMNodeTransforms: NodeTransform[] = [
   transformStyle,
-  ...(__DEV__ ? [transformTransition] : [])
+  ...(__DEV__ ? [transformTransition, validateHtmlNesting] : []),
 ]
 
 export const DOMDirectiveTransforms: Record<string, DirectiveTransform> = {
@@ -34,15 +35,15 @@ export const DOMDirectiveTransforms: Record<string, DirectiveTransform> = {
   text: transformVText,
   model: transformModel, // override compiler-core
   on: transformOn, // override compiler-core
-  show: transformShow
+  show: transformShow,
 }
 
 export function compile(
-  template: string,
-  options: CompilerOptions = {}
+  src: string | RootNode,
+  options: CompilerOptions = {},
 ): CodegenResult {
   return baseCompile(
-    template,
+    src,
     extend({}, parserOptions, options, {
       nodeTransforms: [
         // ignore <script> and <tag>
@@ -50,15 +51,15 @@ export function compile(
         // by compiler-ssr to generate vnode fallback branches
         ignoreSideEffectTags,
         ...DOMNodeTransforms,
-        ...(options.nodeTransforms || [])
+        ...(options.nodeTransforms || []),
       ],
       directiveTransforms: extend(
         {},
         DOMDirectiveTransforms,
-        options.directiveTransforms || {}
+        options.directiveTransforms || {},
       ),
-      transformHoist: __BROWSER__ ? null : stringifyStatic
-    })
+      transformHoist: __BROWSER__ ? null : stringifyStatic,
+    }),
   )
 }
 
@@ -68,5 +69,9 @@ export function parse(template: string, options: ParserOptions = {}): RootNode {
 
 export * from './runtimeHelpers'
 export { transformStyle } from './transforms/transformStyle'
-export { createDOMCompilerError, DOMErrorCodes } from './errors'
+export {
+  createDOMCompilerError,
+  DOMErrorCodes,
+  DOMErrorMessages,
+} from './errors'
 export * from '@vue/compiler-core'
diff --git a/packages/compiler-dom/src/namedChars.json b/packages/compiler-dom/src/namedChars.json
deleted file mode 100644
index 0bda5db6f..000000000
--- a/packages/compiler-dom/src/namedChars.json
+++ /dev/null
@@ -1,2233 +0,0 @@
-{
-  "GT": ">",
-  "gt": ">",
-  "LT": "<",
-  "lt": "<",
-  "ac;": "∾",
-  "af;": "⁡",
-  "AMP": "&",
-  "amp": "&",
-  "ap;": "≈",
-  "DD;": "ⅅ",
-  "dd;": "ⅆ",
-  "deg": "°",
-  "ee;": "ⅇ",
-  "eg;": "⪚",
-  "el;": "⪙",
-  "ETH": "Ð",
-  "eth": "ð",
-  "gE;": "≧",
-  "ge;": "≥",
-  "Gg;": "⋙",
-  "gg;": "≫",
-  "gl;": "≷",
-  "GT;": ">",
-  "Gt;": "≫",
-  "gt;": ">",
-  "ic;": "⁣",
-  "ii;": "ⅈ",
-  "Im;": "ℑ",
-  "in;": "∈",
-  "it;": "⁢",
-  "lE;": "≦",
-  "le;": "≤",
-  "lg;": "≶",
-  "Ll;": "⋘",
-  "ll;": "≪",
-  "LT;": "<",
-  "Lt;": "≪",
-  "lt;": "<",
-  "mp;": "∓",
-  "Mu;": "Μ",
-  "mu;": "μ",
-  "ne;": "≠",
-  "ni;": "∋",
-  "not": "¬",
-  "Nu;": "Ν",
-  "nu;": "ν",
-  "Or;": "⩔",
-  "or;": "∨",
-  "oS;": "Ⓢ",
-  "Pi;": "Π",
-  "pi;": "π",
-  "pm;": "±",
-  "Pr;": "⪻",
-  "pr;": "≺",
-  "Re;": "ℜ",
-  "REG": "®",
-  "reg": "®",
-  "rx;": "℞",
-  "Sc;": "⪼",
-  "sc;": "≻",
-  "shy": "­",
-  "uml": "¨",
-  "wp;": "℘",
-  "wr;": "≀",
-  "Xi;": "Ξ",
-  "xi;": "ξ",
-  "yen": "¥",
-  "acd;": "∿",
-  "acE;": "∾̳",
-  "Acy;": "А",
-  "acy;": "а",
-  "Afr;": "𝔄",
-  "afr;": "𝔞",
-  "AMP;": "&",
-  "amp;": "&",
-  "And;": "⩓",
-  "and;": "∧",
-  "ang;": "∠",
-  "apE;": "⩰",
-  "ape;": "≊",
-  "ast;": "*",
-  "Auml": "Ä",
-  "auml": "ä",
-  "Bcy;": "Б",
-  "bcy;": "б",
-  "Bfr;": "𝔅",
-  "bfr;": "𝔟",
-  "bne;": "=⃥",
-  "bot;": "⊥",
-  "Cap;": "⋒",
-  "cap;": "∩",
-  "cent": "¢",
-  "Cfr;": "ℭ",
-  "cfr;": "𝔠",
-  "Chi;": "Χ",
-  "chi;": "χ",
-  "cir;": "○",
-  "COPY": "©",
-  "copy": "©",
-  "Cup;": "⋓",
-  "cup;": "∪",
-  "Dcy;": "Д",
-  "dcy;": "д",
-  "deg;": "°",
-  "Del;": "∇",
-  "Dfr;": "𝔇",
-  "dfr;": "𝔡",
-  "die;": "¨",
-  "div;": "÷",
-  "Dot;": "¨",
-  "dot;": "˙",
-  "Ecy;": "Э",
-  "ecy;": "э",
-  "Efr;": "𝔈",
-  "efr;": "𝔢",
-  "egs;": "⪖",
-  "ell;": "ℓ",
-  "els;": "⪕",
-  "ENG;": "Ŋ",
-  "eng;": "ŋ",
-  "Eta;": "Η",
-  "eta;": "η",
-  "ETH;": "Ð",
-  "eth;": "ð",
-  "Euml": "Ë",
-  "euml": "ë",
-  "Fcy;": "Ф",
-  "fcy;": "ф",
-  "Ffr;": "𝔉",
-  "ffr;": "𝔣",
-  "gap;": "⪆",
-  "Gcy;": "Г",
-  "gcy;": "г",
-  "gEl;": "⪌",
-  "gel;": "⋛",
-  "geq;": "≥",
-  "ges;": "⩾",
-  "Gfr;": "𝔊",
-  "gfr;": "𝔤",
-  "ggg;": "⋙",
-  "gla;": "⪥",
-  "glE;": "⪒",
-  "glj;": "⪤",
-  "gnE;": "≩",
-  "gne;": "⪈",
-  "Hat;": "^",
-  "Hfr;": "ℌ",
-  "hfr;": "𝔥",
-  "Icy;": "И",
-  "icy;": "и",
-  "iff;": "⇔",
-  "Ifr;": "ℑ",
-  "ifr;": "𝔦",
-  "Int;": "∬",
-  "int;": "∫",
-  "Iuml": "Ï",
-  "iuml": "ï",
-  "Jcy;": "Й",
-  "jcy;": "й",
-  "Jfr;": "𝔍",
-  "jfr;": "𝔧",
-  "Kcy;": "К",
-  "kcy;": "к",
-  "Kfr;": "𝔎",
-  "kfr;": "𝔨",
-  "lap;": "⪅",
-  "lat;": "⪫",
-  "Lcy;": "Л",
-  "lcy;": "л",
-  "lEg;": "⪋",
-  "leg;": "⋚",
-  "leq;": "≤",
-  "les;": "⩽",
-  "Lfr;": "𝔏",
-  "lfr;": "𝔩",
-  "lgE;": "⪑",
-  "lnE;": "≨",
-  "lne;": "⪇",
-  "loz;": "◊",
-  "lrm;": "‎",
-  "Lsh;": "↰",
-  "lsh;": "↰",
-  "macr": "¯",
-  "Map;": "⤅",
-  "map;": "↦",
-  "Mcy;": "М",
-  "mcy;": "м",
-  "Mfr;": "𝔐",
-  "mfr;": "𝔪",
-  "mho;": "℧",
-  "mid;": "∣",
-  "nap;": "≉",
-  "nbsp": " ",
-  "Ncy;": "Н",
-  "ncy;": "н",
-  "Nfr;": "𝔑",
-  "nfr;": "𝔫",
-  "ngE;": "≧̸",
-  "nge;": "≱",
-  "nGg;": "⋙̸",
-  "nGt;": "≫⃒",
-  "ngt;": "≯",
-  "nis;": "⋼",
-  "niv;": "∋",
-  "nlE;": "≦̸",
-  "nle;": "≰",
-  "nLl;": "⋘̸",
-  "nLt;": "≪⃒",
-  "nlt;": "≮",
-  "Not;": "⫬",
-  "not;": "¬",
-  "npr;": "⊀",
-  "nsc;": "⊁",
-  "num;": "#",
-  "Ocy;": "О",
-  "ocy;": "о",
-  "Ofr;": "𝔒",
-  "ofr;": "𝔬",
-  "ogt;": "⧁",
-  "ohm;": "Ω",
-  "olt;": "⧀",
-  "ord;": "⩝",
-  "ordf": "ª",
-  "ordm": "º",
-  "orv;": "⩛",
-  "Ouml": "Ö",
-  "ouml": "ö",
-  "par;": "∥",
-  "para": "¶",
-  "Pcy;": "П",
-  "pcy;": "п",
-  "Pfr;": "𝔓",
-  "pfr;": "𝔭",
-  "Phi;": "Φ",
-  "phi;": "φ",
-  "piv;": "ϖ",
-  "prE;": "⪳",
-  "pre;": "⪯",
-  "Psi;": "Ψ",
-  "psi;": "ψ",
-  "Qfr;": "𝔔",
-  "qfr;": "𝔮",
-  "QUOT": "\"",
-  "quot": "\"",
-  "Rcy;": "Р",
-  "rcy;": "р",
-  "REG;": "®",
-  "reg;": "®",
-  "Rfr;": "ℜ",
-  "rfr;": "𝔯",
-  "Rho;": "Ρ",
-  "rho;": "ρ",
-  "rlm;": "‏",
-  "Rsh;": "↱",
-  "rsh;": "↱",
-  "scE;": "⪴",
-  "sce;": "⪰",
-  "Scy;": "С",
-  "scy;": "с",
-  "sect": "§",
-  "Sfr;": "𝔖",
-  "sfr;": "𝔰",
-  "shy;": "­",
-  "sim;": "∼",
-  "smt;": "⪪",
-  "sol;": "/",
-  "squ;": "□",
-  "Sub;": "⋐",
-  "sub;": "⊂",
-  "Sum;": "∑",
-  "sum;": "∑",
-  "Sup;": "⋑",
-  "sup;": "⊃",
-  "sup1": "¹",
-  "sup2": "²",
-  "sup3": "³",
-  "Tab;": "\t",
-  "Tau;": "Τ",
-  "tau;": "τ",
-  "Tcy;": "Т",
-  "tcy;": "т",
-  "Tfr;": "𝔗",
-  "tfr;": "𝔱",
-  "top;": "⊤",
-  "Ucy;": "У",
-  "ucy;": "у",
-  "Ufr;": "𝔘",
-  "ufr;": "𝔲",
-  "uml;": "¨",
-  "Uuml": "Ü",
-  "uuml": "ü",
-  "Vcy;": "В",
-  "vcy;": "в",
-  "Vee;": "⋁",
-  "vee;": "∨",
-  "Vfr;": "𝔙",
-  "vfr;": "𝔳",
-  "Wfr;": "𝔚",
-  "wfr;": "𝔴",
-  "Xfr;": "𝔛",
-  "xfr;": "𝔵",
-  "Ycy;": "Ы",
-  "ycy;": "ы",
-  "yen;": "¥",
-  "Yfr;": "𝔜",
-  "yfr;": "𝔶",
-  "yuml": "ÿ",
-  "Zcy;": "З",
-  "zcy;": "з",
-  "Zfr;": "ℨ",
-  "zfr;": "𝔷",
-  "zwj;": "‍",
-  "Acirc": "Â",
-  "acirc": "â",
-  "acute": "´",
-  "AElig": "Æ",
-  "aelig": "æ",
-  "andd;": "⩜",
-  "andv;": "⩚",
-  "ange;": "⦤",
-  "Aopf;": "𝔸",
-  "aopf;": "𝕒",
-  "apid;": "≋",
-  "apos;": "'",
-  "Aring": "Å",
-  "aring": "å",
-  "Ascr;": "𝒜",
-  "ascr;": "𝒶",
-  "Auml;": "Ä",
-  "auml;": "ä",
-  "Barv;": "⫧",
-  "bbrk;": "⎵",
-  "Beta;": "Β",
-  "beta;": "β",
-  "beth;": "ℶ",
-  "bNot;": "⫭",
-  "bnot;": "⌐",
-  "Bopf;": "𝔹",
-  "bopf;": "𝕓",
-  "boxH;": "═",
-  "boxh;": "─",
-  "boxV;": "║",
-  "boxv;": "│",
-  "Bscr;": "ℬ",
-  "bscr;": "𝒷",
-  "bsim;": "∽",
-  "bsol;": "\\",
-  "bull;": "•",
-  "bump;": "≎",
-  "caps;": "∩︀",
-  "Cdot;": "Ċ",
-  "cdot;": "ċ",
-  "cedil": "¸",
-  "cent;": "¢",
-  "CHcy;": "Ч",
-  "chcy;": "ч",
-  "circ;": "ˆ",
-  "cirE;": "⧃",
-  "cire;": "≗",
-  "comp;": "∁",
-  "cong;": "≅",
-  "Copf;": "ℂ",
-  "copf;": "𝕔",
-  "COPY;": "©",
-  "copy;": "©",
-  "Cscr;": "𝒞",
-  "cscr;": "𝒸",
-  "csub;": "⫏",
-  "csup;": "⫐",
-  "cups;": "∪︀",
-  "Darr;": "↡",
-  "dArr;": "⇓",
-  "darr;": "↓",
-  "dash;": "‐",
-  "dHar;": "⥥",
-  "diam;": "⋄",
-  "DJcy;": "Ђ",
-  "djcy;": "ђ",
-  "Dopf;": "𝔻",
-  "dopf;": "𝕕",
-  "Dscr;": "𝒟",
-  "dscr;": "𝒹",
-  "DScy;": "Ѕ",
-  "dscy;": "ѕ",
-  "dsol;": "⧶",
-  "dtri;": "▿",
-  "DZcy;": "Џ",
-  "dzcy;": "џ",
-  "ecir;": "≖",
-  "Ecirc": "Ê",
-  "ecirc": "ê",
-  "Edot;": "Ė",
-  "eDot;": "≑",
-  "edot;": "ė",
-  "emsp;": " ",
-  "ensp;": " ",
-  "Eopf;": "𝔼",
-  "eopf;": "𝕖",
-  "epar;": "⋕",
-  "epsi;": "ε",
-  "Escr;": "ℰ",
-  "escr;": "ℯ",
-  "Esim;": "⩳",
-  "esim;": "≂",
-  "Euml;": "Ë",
-  "euml;": "ë",
-  "euro;": "€",
-  "excl;": "!",
-  "flat;": "♭",
-  "fnof;": "ƒ",
-  "Fopf;": "𝔽",
-  "fopf;": "𝕗",
-  "fork;": "⋔",
-  "Fscr;": "ℱ",
-  "fscr;": "𝒻",
-  "Gdot;": "Ġ",
-  "gdot;": "ġ",
-  "geqq;": "≧",
-  "gesl;": "⋛︀",
-  "GJcy;": "Ѓ",
-  "gjcy;": "ѓ",
-  "gnap;": "⪊",
-  "gneq;": "⪈",
-  "Gopf;": "𝔾",
-  "gopf;": "𝕘",
-  "Gscr;": "𝒢",
-  "gscr;": "ℊ",
-  "gsim;": "≳",
-  "gtcc;": "⪧",
-  "gvnE;": "≩︀",
-  "half;": "½",
-  "hArr;": "⇔",
-  "harr;": "↔",
-  "hbar;": "ℏ",
-  "Hopf;": "ℍ",
-  "hopf;": "𝕙",
-  "Hscr;": "ℋ",
-  "hscr;": "𝒽",
-  "Icirc": "Î",
-  "icirc": "î",
-  "Idot;": "İ",
-  "IEcy;": "Е",
-  "iecy;": "е",
-  "iexcl": "¡",
-  "imof;": "⊷",
-  "IOcy;": "Ё",
-  "iocy;": "ё",
-  "Iopf;": "𝕀",
-  "iopf;": "𝕚",
-  "Iota;": "Ι",
-  "iota;": "ι",
-  "Iscr;": "ℐ",
-  "iscr;": "𝒾",
-  "isin;": "∈",
-  "Iuml;": "Ï",
-  "iuml;": "ï",
-  "Jopf;": "𝕁",
-  "jopf;": "𝕛",
-  "Jscr;": "𝒥",
-  "jscr;": "𝒿",
-  "KHcy;": "Х",
-  "khcy;": "х",
-  "KJcy;": "Ќ",
-  "kjcy;": "ќ",
-  "Kopf;": "𝕂",
-  "kopf;": "𝕜",
-  "Kscr;": "𝒦",
-  "kscr;": "𝓀",
-  "Lang;": "⟪",
-  "lang;": "⟨",
-  "laquo": "«",
-  "Larr;": "↞",
-  "lArr;": "⇐",
-  "larr;": "←",
-  "late;": "⪭",
-  "lcub;": "{",
-  "ldca;": "⤶",
-  "ldsh;": "↲",
-  "leqq;": "≦",
-  "lesg;": "⋚︀",
-  "lHar;": "⥢",
-  "LJcy;": "Љ",
-  "ljcy;": "љ",
-  "lnap;": "⪉",
-  "lneq;": "⪇",
-  "Lopf;": "𝕃",
-  "lopf;": "𝕝",
-  "lozf;": "⧫",
-  "lpar;": "(",
-  "Lscr;": "ℒ",
-  "lscr;": "𝓁",
-  "lsim;": "≲",
-  "lsqb;": "[",
-  "ltcc;": "⪦",
-  "ltri;": "◃",
-  "lvnE;": "≨︀",
-  "macr;": "¯",
-  "male;": "♂",
-  "malt;": "✠",
-  "micro": "µ",
-  "mlcp;": "⫛",
-  "mldr;": "…",
-  "Mopf;": "𝕄",
-  "mopf;": "𝕞",
-  "Mscr;": "ℳ",
-  "mscr;": "𝓂",
-  "nang;": "∠⃒",
-  "napE;": "⩰̸",
-  "nbsp;": " ",
-  "ncap;": "⩃",
-  "ncup;": "⩂",
-  "ngeq;": "≱",
-  "nges;": "⩾̸",
-  "ngtr;": "≯",
-  "nGtv;": "≫̸",
-  "nisd;": "⋺",
-  "NJcy;": "Њ",
-  "njcy;": "њ",
-  "nldr;": "‥",
-  "nleq;": "≰",
-  "nles;": "⩽̸",
-  "nLtv;": "≪̸",
-  "nmid;": "∤",
-  "Nopf;": "ℕ",
-  "nopf;": "𝕟",
-  "npar;": "∦",
-  "npre;": "⪯̸",
-  "nsce;": "⪰̸",
-  "Nscr;": "𝒩",
-  "nscr;": "𝓃",
-  "nsim;": "≁",
-  "nsub;": "⊄",
-  "nsup;": "⊅",
-  "ntgl;": "≹",
-  "ntlg;": "≸",
-  "nvap;": "≍⃒",
-  "nvge;": "≥⃒",
-  "nvgt;": ">⃒",
-  "nvle;": "≤⃒",
-  "nvlt;": "<⃒",
-  "oast;": "⊛",
-  "ocir;": "⊚",
-  "Ocirc": "Ô",
-  "ocirc": "ô",
-  "odiv;": "⨸",
-  "odot;": "⊙",
-  "ogon;": "˛",
-  "oint;": "∮",
-  "omid;": "⦶",
-  "Oopf;": "𝕆",
-  "oopf;": "𝕠",
-  "opar;": "⦷",
-  "ordf;": "ª",
-  "ordm;": "º",
-  "oror;": "⩖",
-  "Oscr;": "𝒪",
-  "oscr;": "ℴ",
-  "osol;": "⊘",
-  "Ouml;": "Ö",
-  "ouml;": "ö",
-  "para;": "¶",
-  "part;": "∂",
-  "perp;": "⊥",
-  "phiv;": "ϕ",
-  "plus;": "+",
-  "Popf;": "ℙ",
-  "popf;": "𝕡",
-  "pound": "£",
-  "prap;": "⪷",
-  "prec;": "≺",
-  "prnE;": "⪵",
-  "prod;": "∏",
-  "prop;": "∝",
-  "Pscr;": "𝒫",
-  "pscr;": "𝓅",
-  "qint;": "⨌",
-  "Qopf;": "ℚ",
-  "qopf;": "𝕢",
-  "Qscr;": "𝒬",
-  "qscr;": "𝓆",
-  "QUOT;": "\"",
-  "quot;": "\"",
-  "race;": "∽̱",
-  "Rang;": "⟫",
-  "rang;": "⟩",
-  "raquo": "»",
-  "Rarr;": "↠",
-  "rArr;": "⇒",
-  "rarr;": "→",
-  "rcub;": "}",
-  "rdca;": "⤷",
-  "rdsh;": "↳",
-  "real;": "ℜ",
-  "rect;": "▭",
-  "rHar;": "⥤",
-  "rhov;": "ϱ",
-  "ring;": "˚",
-  "Ropf;": "ℝ",
-  "ropf;": "𝕣",
-  "rpar;": ")",
-  "Rscr;": "ℛ",
-  "rscr;": "𝓇",
-  "rsqb;": "]",
-  "rtri;": "▹",
-  "scap;": "⪸",
-  "scnE;": "⪶",
-  "sdot;": "⋅",
-  "sect;": "§",
-  "semi;": ";",
-  "sext;": "✶",
-  "SHcy;": "Ш",
-  "shcy;": "ш",
-  "sime;": "≃",
-  "simg;": "⪞",
-  "siml;": "⪝",
-  "smid;": "∣",
-  "smte;": "⪬",
-  "solb;": "⧄",
-  "Sopf;": "𝕊",
-  "sopf;": "𝕤",
-  "spar;": "∥",
-  "Sqrt;": "√",
-  "squf;": "▪",
-  "Sscr;": "𝒮",
-  "sscr;": "𝓈",
-  "Star;": "⋆",
-  "star;": "☆",
-  "subE;": "⫅",
-  "sube;": "⊆",
-  "succ;": "≻",
-  "sung;": "♪",
-  "sup1;": "¹",
-  "sup2;": "²",
-  "sup3;": "³",
-  "supE;": "⫆",
-  "supe;": "⊇",
-  "szlig": "ß",
-  "tbrk;": "⎴",
-  "tdot;": "⃛",
-  "THORN": "Þ",
-  "thorn": "þ",
-  "times": "×",
-  "tint;": "∭",
-  "toea;": "⤨",
-  "Topf;": "𝕋",
-  "topf;": "𝕥",
-  "tosa;": "⤩",
-  "trie;": "≜",
-  "Tscr;": "𝒯",
-  "tscr;": "𝓉",
-  "TScy;": "Ц",
-  "tscy;": "ц",
-  "Uarr;": "↟",
-  "uArr;": "⇑",
-  "uarr;": "↑",
-  "Ucirc": "Û",
-  "ucirc": "û",
-  "uHar;": "⥣",
-  "Uopf;": "𝕌",
-  "uopf;": "𝕦",
-  "Upsi;": "ϒ",
-  "upsi;": "υ",
-  "Uscr;": "𝒰",
-  "uscr;": "𝓊",
-  "utri;": "▵",
-  "Uuml;": "Ü",
-  "uuml;": "ü",
-  "vArr;": "⇕",
-  "varr;": "↕",
-  "Vbar;": "⫫",
-  "vBar;": "⫨",
-  "Vert;": "‖",
-  "vert;": "|",
-  "Vopf;": "𝕍",
-  "vopf;": "𝕧",
-  "Vscr;": "𝒱",
-  "vscr;": "𝓋",
-  "Wopf;": "𝕎",
-  "wopf;": "𝕨",
-  "Wscr;": "𝒲",
-  "wscr;": "𝓌",
-  "xcap;": "⋂",
-  "xcup;": "⋃",
-  "xmap;": "⟼",
-  "xnis;": "⋻",
-  "Xopf;": "𝕏",
-  "xopf;": "𝕩",
-  "Xscr;": "𝒳",
-  "xscr;": "𝓍",
-  "xvee;": "⋁",
-  "YAcy;": "Я",
-  "yacy;": "я",
-  "YIcy;": "Ї",
-  "yicy;": "ї",
-  "Yopf;": "𝕐",
-  "yopf;": "𝕪",
-  "Yscr;": "𝒴",
-  "yscr;": "𝓎",
-  "YUcy;": "Ю",
-  "yucy;": "ю",
-  "Yuml;": "Ÿ",
-  "yuml;": "ÿ",
-  "Zdot;": "Ż",
-  "zdot;": "ż",
-  "Zeta;": "Ζ",
-  "zeta;": "ζ",
-  "ZHcy;": "Ж",
-  "zhcy;": "ж",
-  "Zopf;": "ℤ",
-  "zopf;": "𝕫",
-  "Zscr;": "𝒵",
-  "zscr;": "𝓏",
-  "zwnj;": "‌",
-  "Aacute": "Á",
-  "aacute": "á",
-  "Acirc;": "Â",
-  "acirc;": "â",
-  "acute;": "´",
-  "AElig;": "Æ",
-  "aelig;": "æ",
-  "Agrave": "À",
-  "agrave": "à",
-  "aleph;": "ℵ",
-  "Alpha;": "Α",
-  "alpha;": "α",
-  "Amacr;": "Ā",
-  "amacr;": "ā",
-  "amalg;": "⨿",
-  "angle;": "∠",
-  "angrt;": "∟",
-  "angst;": "Å",
-  "Aogon;": "Ą",
-  "aogon;": "ą",
-  "Aring;": "Å",
-  "aring;": "å",
-  "asymp;": "≈",
-  "Atilde": "Ã",
-  "atilde": "ã",
-  "awint;": "⨑",
-  "bcong;": "≌",
-  "bdquo;": "„",
-  "bepsi;": "϶",
-  "blank;": "␣",
-  "blk12;": "▒",
-  "blk14;": "░",
-  "blk34;": "▓",
-  "block;": "█",
-  "boxDL;": "╗",
-  "boxDl;": "╖",
-  "boxdL;": "╕",
-  "boxdl;": "┐",
-  "boxDR;": "╔",
-  "boxDr;": "╓",
-  "boxdR;": "╒",
-  "boxdr;": "┌",
-  "boxHD;": "╦",
-  "boxHd;": "╤",
-  "boxhD;": "╥",
-  "boxhd;": "┬",
-  "boxHU;": "╩",
-  "boxHu;": "╧",
-  "boxhU;": "╨",
-  "boxhu;": "┴",
-  "boxUL;": "╝",
-  "boxUl;": "╜",
-  "boxuL;": "╛",
-  "boxul;": "┘",
-  "boxUR;": "╚",
-  "boxUr;": "╙",
-  "boxuR;": "╘",
-  "boxur;": "└",
-  "boxVH;": "╬",
-  "boxVh;": "╫",
-  "boxvH;": "╪",
-  "boxvh;": "┼",
-  "boxVL;": "╣",
-  "boxVl;": "╢",
-  "boxvL;": "╡",
-  "boxvl;": "┤",
-  "boxVR;": "╠",
-  "boxVr;": "╟",
-  "boxvR;": "╞",
-  "boxvr;": "├",
-  "Breve;": "˘",
-  "breve;": "˘",
-  "brvbar": "¦",
-  "bsemi;": "⁏",
-  "bsime;": "⋍",
-  "bsolb;": "⧅",
-  "bumpE;": "⪮",
-  "bumpe;": "≏",
-  "caret;": "⁁",
-  "caron;": "ˇ",
-  "ccaps;": "⩍",
-  "Ccedil": "Ç",
-  "ccedil": "ç",
-  "Ccirc;": "Ĉ",
-  "ccirc;": "ĉ",
-  "ccups;": "⩌",
-  "cedil;": "¸",
-  "check;": "✓",
-  "clubs;": "♣",
-  "Colon;": "∷",
-  "colon;": ":",
-  "comma;": ",",
-  "crarr;": "↵",
-  "Cross;": "⨯",
-  "cross;": "✗",
-  "csube;": "⫑",
-  "csupe;": "⫒",
-  "ctdot;": "⋯",
-  "cuepr;": "⋞",
-  "cuesc;": "⋟",
-  "cupor;": "⩅",
-  "curren": "¤",
-  "cuvee;": "⋎",
-  "cuwed;": "⋏",
-  "cwint;": "∱",
-  "Dashv;": "⫤",
-  "dashv;": "⊣",
-  "dblac;": "˝",
-  "ddarr;": "⇊",
-  "Delta;": "Δ",
-  "delta;": "δ",
-  "dharl;": "⇃",
-  "dharr;": "⇂",
-  "diams;": "♦",
-  "disin;": "⋲",
-  "divide": "÷",
-  "doteq;": "≐",
-  "dtdot;": "⋱",
-  "dtrif;": "▾",
-  "duarr;": "⇵",
-  "duhar;": "⥯",
-  "Eacute": "É",
-  "eacute": "é",
-  "Ecirc;": "Ê",
-  "ecirc;": "ê",
-  "eDDot;": "⩷",
-  "efDot;": "≒",
-  "Egrave": "È",
-  "egrave": "è",
-  "Emacr;": "Ē",
-  "emacr;": "ē",
-  "empty;": "∅",
-  "Eogon;": "Ę",
-  "eogon;": "ę",
-  "eplus;": "⩱",
-  "epsiv;": "ϵ",
-  "eqsim;": "≂",
-  "Equal;": "⩵",
-  "equiv;": "≡",
-  "erarr;": "⥱",
-  "erDot;": "≓",
-  "esdot;": "≐",
-  "exist;": "∃",
-  "fflig;": "ff",
-  "filig;": "fi",
-  "fjlig;": "fj",
-  "fllig;": "fl",
-  "fltns;": "▱",
-  "forkv;": "⫙",
-  "frac12": "½",
-  "frac14": "¼",
-  "frac34": "¾",
-  "frasl;": "⁄",
-  "frown;": "⌢",
-  "Gamma;": "Γ",
-  "gamma;": "γ",
-  "Gcirc;": "Ĝ",
-  "gcirc;": "ĝ",
-  "gescc;": "⪩",
-  "gimel;": "ℷ",
-  "gneqq;": "≩",
-  "gnsim;": "⋧",
-  "grave;": "`",
-  "gsime;": "⪎",
-  "gsiml;": "⪐",
-  "gtcir;": "⩺",
-  "gtdot;": "⋗",
-  "Hacek;": "ˇ",
-  "harrw;": "↭",
-  "Hcirc;": "Ĥ",
-  "hcirc;": "ĥ",
-  "hoarr;": "⇿",
-  "Iacute": "Í",
-  "iacute": "í",
-  "Icirc;": "Î",
-  "icirc;": "î",
-  "iexcl;": "¡",
-  "Igrave": "Ì",
-  "igrave": "ì",
-  "iiint;": "∭",
-  "iiota;": "℩",
-  "IJlig;": "IJ",
-  "ijlig;": "ij",
-  "Imacr;": "Ī",
-  "imacr;": "ī",
-  "image;": "ℑ",
-  "imath;": "ı",
-  "imped;": "Ƶ",
-  "infin;": "∞",
-  "Iogon;": "Į",
-  "iogon;": "į",
-  "iprod;": "⨼",
-  "iquest": "¿",
-  "isinE;": "⋹",
-  "isins;": "⋴",
-  "isinv;": "∈",
-  "Iukcy;": "І",
-  "iukcy;": "і",
-  "Jcirc;": "Ĵ",
-  "jcirc;": "ĵ",
-  "jmath;": "ȷ",
-  "Jukcy;": "Є",
-  "jukcy;": "є",
-  "Kappa;": "Κ",
-  "kappa;": "κ",
-  "lAarr;": "⇚",
-  "langd;": "⦑",
-  "laquo;": "«",
-  "larrb;": "⇤",
-  "lates;": "⪭︀",
-  "lBarr;": "⤎",
-  "lbarr;": "⤌",
-  "lbbrk;": "❲",
-  "lbrke;": "⦋",
-  "lceil;": "⌈",
-  "ldquo;": "“",
-  "lescc;": "⪨",
-  "lhard;": "↽",
-  "lharu;": "↼",
-  "lhblk;": "▄",
-  "llarr;": "⇇",
-  "lltri;": "◺",
-  "lneqq;": "≨",
-  "lnsim;": "⋦",
-  "loang;": "⟬",
-  "loarr;": "⇽",
-  "lobrk;": "⟦",
-  "lopar;": "⦅",
-  "lrarr;": "⇆",
-  "lrhar;": "⇋",
-  "lrtri;": "⊿",
-  "lsime;": "⪍",
-  "lsimg;": "⪏",
-  "lsquo;": "‘",
-  "ltcir;": "⩹",
-  "ltdot;": "⋖",
-  "ltrie;": "⊴",
-  "ltrif;": "◂",
-  "mdash;": "—",
-  "mDDot;": "∺",
-  "micro;": "µ",
-  "middot": "·",
-  "minus;": "−",
-  "mumap;": "⊸",
-  "nabla;": "∇",
-  "napid;": "≋̸",
-  "napos;": "ʼn",
-  "natur;": "♮",
-  "nbump;": "≎̸",
-  "ncong;": "≇",
-  "ndash;": "–",
-  "neArr;": "⇗",
-  "nearr;": "↗",
-  "nedot;": "≐̸",
-  "nesim;": "≂̸",
-  "ngeqq;": "≧̸",
-  "ngsim;": "≵",
-  "nhArr;": "⇎",
-  "nharr;": "↮",
-  "nhpar;": "⫲",
-  "nlArr;": "⇍",
-  "nlarr;": "↚",
-  "nleqq;": "≦̸",
-  "nless;": "≮",
-  "nlsim;": "≴",
-  "nltri;": "⋪",
-  "notin;": "∉",
-  "notni;": "∌",
-  "npart;": "∂̸",
-  "nprec;": "⊀",
-  "nrArr;": "⇏",
-  "nrarr;": "↛",
-  "nrtri;": "⋫",
-  "nsime;": "≄",
-  "nsmid;": "∤",
-  "nspar;": "∦",
-  "nsubE;": "⫅̸",
-  "nsube;": "⊈",
-  "nsucc;": "⊁",
-  "nsupE;": "⫆̸",
-  "nsupe;": "⊉",
-  "Ntilde": "Ñ",
-  "ntilde": "ñ",
-  "numsp;": " ",
-  "nvsim;": "∼⃒",
-  "nwArr;": "⇖",
-  "nwarr;": "↖",
-  "Oacute": "Ó",
-  "oacute": "ó",
-  "Ocirc;": "Ô",
-  "ocirc;": "ô",
-  "odash;": "⊝",
-  "OElig;": "Œ",
-  "oelig;": "œ",
-  "ofcir;": "⦿",
-  "Ograve": "Ò",
-  "ograve": "ò",
-  "ohbar;": "⦵",
-  "olarr;": "↺",
-  "olcir;": "⦾",
-  "oline;": "‾",
-  "Omacr;": "Ō",
-  "omacr;": "ō",
-  "Omega;": "Ω",
-  "omega;": "ω",
-  "operp;": "⦹",
-  "oplus;": "⊕",
-  "orarr;": "↻",
-  "order;": "ℴ",
-  "Oslash": "Ø",
-  "oslash": "ø",
-  "Otilde": "Õ",
-  "otilde": "õ",
-  "ovbar;": "⌽",
-  "parsl;": "⫽",
-  "phone;": "☎",
-  "plusb;": "⊞",
-  "pluse;": "⩲",
-  "plusmn": "±",
-  "pound;": "£",
-  "prcue;": "≼",
-  "Prime;": "″",
-  "prime;": "′",
-  "prnap;": "⪹",
-  "prsim;": "≾",
-  "quest;": "?",
-  "rAarr;": "⇛",
-  "radic;": "√",
-  "rangd;": "⦒",
-  "range;": "⦥",
-  "raquo;": "»",
-  "rarrb;": "⇥",
-  "rarrc;": "⤳",
-  "rarrw;": "↝",
-  "ratio;": "∶",
-  "RBarr;": "⤐",
-  "rBarr;": "⤏",
-  "rbarr;": "⤍",
-  "rbbrk;": "❳",
-  "rbrke;": "⦌",
-  "rceil;": "⌉",
-  "rdquo;": "”",
-  "reals;": "ℝ",
-  "rhard;": "⇁",
-  "rharu;": "⇀",
-  "rlarr;": "⇄",
-  "rlhar;": "⇌",
-  "rnmid;": "⫮",
-  "roang;": "⟭",
-  "roarr;": "⇾",
-  "robrk;": "⟧",
-  "ropar;": "⦆",
-  "rrarr;": "⇉",
-  "rsquo;": "’",
-  "rtrie;": "⊵",
-  "rtrif;": "▸",
-  "sbquo;": "‚",
-  "sccue;": "≽",
-  "Scirc;": "Ŝ",
-  "scirc;": "ŝ",
-  "scnap;": "⪺",
-  "scsim;": "≿",
-  "sdotb;": "⊡",
-  "sdote;": "⩦",
-  "seArr;": "⇘",
-  "searr;": "↘",
-  "setmn;": "∖",
-  "sharp;": "♯",
-  "Sigma;": "Σ",
-  "sigma;": "σ",
-  "simeq;": "≃",
-  "simgE;": "⪠",
-  "simlE;": "⪟",
-  "simne;": "≆",
-  "slarr;": "←",
-  "smile;": "⌣",
-  "smtes;": "⪬︀",
-  "sqcap;": "⊓",
-  "sqcup;": "⊔",
-  "sqsub;": "⊏",
-  "sqsup;": "⊐",
-  "srarr;": "→",
-  "starf;": "★",
-  "strns;": "¯",
-  "subnE;": "⫋",
-  "subne;": "⊊",
-  "supnE;": "⫌",
-  "supne;": "⊋",
-  "swArr;": "⇙",
-  "swarr;": "↙",
-  "szlig;": "ß",
-  "Theta;": "Θ",
-  "theta;": "θ",
-  "thkap;": "≈",
-  "THORN;": "Þ",
-  "thorn;": "þ",
-  "Tilde;": "∼",
-  "tilde;": "˜",
-  "times;": "×",
-  "TRADE;": "™",
-  "trade;": "™",
-  "trisb;": "⧍",
-  "TSHcy;": "Ћ",
-  "tshcy;": "ћ",
-  "twixt;": "≬",
-  "Uacute": "Ú",
-  "uacute": "ú",
-  "Ubrcy;": "Ў",
-  "ubrcy;": "ў",
-  "Ucirc;": "Û",
-  "ucirc;": "û",
-  "udarr;": "⇅",
-  "udhar;": "⥮",
-  "Ugrave": "Ù",
-  "ugrave": "ù",
-  "uharl;": "↿",
-  "uharr;": "↾",
-  "uhblk;": "▀",
-  "ultri;": "◸",
-  "Umacr;": "Ū",
-  "umacr;": "ū",
-  "Union;": "⋃",
-  "Uogon;": "Ų",
-  "uogon;": "ų",
-  "uplus;": "⊎",
-  "upsih;": "ϒ",
-  "UpTee;": "⊥",
-  "Uring;": "Ů",
-  "uring;": "ů",
-  "urtri;": "◹",
-  "utdot;": "⋰",
-  "utrif;": "▴",
-  "uuarr;": "⇈",
-  "varpi;": "ϖ",
-  "vBarv;": "⫩",
-  "VDash;": "⊫",
-  "Vdash;": "⊩",
-  "vDash;": "⊨",
-  "vdash;": "⊢",
-  "veeeq;": "≚",
-  "vltri;": "⊲",
-  "vnsub;": "⊂⃒",
-  "vnsup;": "⊃⃒",
-  "vprop;": "∝",
-  "vrtri;": "⊳",
-  "Wcirc;": "Ŵ",
-  "wcirc;": "ŵ",
-  "Wedge;": "⋀",
-  "wedge;": "∧",
-  "xcirc;": "◯",
-  "xdtri;": "▽",
-  "xhArr;": "⟺",
-  "xharr;": "⟷",
-  "xlArr;": "⟸",
-  "xlarr;": "⟵",
-  "xodot;": "⨀",
-  "xrArr;": "⟹",
-  "xrarr;": "⟶",
-  "xutri;": "△",
-  "Yacute": "Ý",
-  "yacute": "ý",
-  "Ycirc;": "Ŷ",
-  "ycirc;": "ŷ",
-  "Aacute;": "Á",
-  "aacute;": "á",
-  "Abreve;": "Ă",
-  "abreve;": "ă",
-  "Agrave;": "À",
-  "agrave;": "à",
-  "andand;": "⩕",
-  "angmsd;": "∡",
-  "angsph;": "∢",
-  "apacir;": "⩯",
-  "approx;": "≈",
-  "Assign;": "≔",
-  "Atilde;": "Ã",
-  "atilde;": "ã",
-  "barvee;": "⊽",
-  "Barwed;": "⌆",
-  "barwed;": "⌅",
-  "becaus;": "∵",
-  "bernou;": "ℬ",
-  "bigcap;": "⋂",
-  "bigcup;": "⋃",
-  "bigvee;": "⋁",
-  "bkarow;": "⤍",
-  "bottom;": "⊥",
-  "bowtie;": "⋈",
-  "boxbox;": "⧉",
-  "bprime;": "‵",
-  "brvbar;": "¦",
-  "bullet;": "•",
-  "Bumpeq;": "≎",
-  "bumpeq;": "≏",
-  "Cacute;": "Ć",
-  "cacute;": "ć",
-  "capand;": "⩄",
-  "capcap;": "⩋",
-  "capcup;": "⩇",
-  "capdot;": "⩀",
-  "Ccaron;": "Č",
-  "ccaron;": "č",
-  "Ccedil;": "Ç",
-  "ccedil;": "ç",
-  "circeq;": "≗",
-  "cirmid;": "⫯",
-  "Colone;": "⩴",
-  "colone;": "≔",
-  "commat;": "@",
-  "compfn;": "∘",
-  "Conint;": "∯",
-  "conint;": "∮",
-  "coprod;": "∐",
-  "copysr;": "℗",
-  "cularr;": "↶",
-  "CupCap;": "≍",
-  "cupcap;": "⩆",
-  "cupcup;": "⩊",
-  "cupdot;": "⊍",
-  "curarr;": "↷",
-  "curren;": "¤",
-  "cylcty;": "⌭",
-  "Dagger;": "‡",
-  "dagger;": "†",
-  "daleth;": "ℸ",
-  "Dcaron;": "Ď",
-  "dcaron;": "ď",
-  "dfisht;": "⥿",
-  "divide;": "÷",
-  "divonx;": "⋇",
-  "dlcorn;": "⌞",
-  "dlcrop;": "⌍",
-  "dollar;": "$",
-  "DotDot;": "⃜",
-  "drcorn;": "⌟",
-  "drcrop;": "⌌",
-  "Dstrok;": "Đ",
-  "dstrok;": "đ",
-  "Eacute;": "É",
-  "eacute;": "é",
-  "easter;": "⩮",
-  "Ecaron;": "Ě",
-  "ecaron;": "ě",
-  "ecolon;": "≕",
-  "Egrave;": "È",
-  "egrave;": "è",
-  "egsdot;": "⪘",
-  "elsdot;": "⪗",
-  "emptyv;": "∅",
-  "emsp13;": " ",
-  "emsp14;": " ",
-  "eparsl;": "⧣",
-  "eqcirc;": "≖",
-  "equals;": "=",
-  "equest;": "≟",
-  "Exists;": "∃",
-  "female;": "♀",
-  "ffilig;": "ffi",
-  "ffllig;": "ffl",
-  "ForAll;": "∀",
-  "forall;": "∀",
-  "frac12;": "½",
-  "frac13;": "⅓",
-  "frac14;": "¼",
-  "frac15;": "⅕",
-  "frac16;": "⅙",
-  "frac18;": "⅛",
-  "frac23;": "⅔",
-  "frac25;": "⅖",
-  "frac34;": "¾",
-  "frac35;": "⅗",
-  "frac38;": "⅜",
-  "frac45;": "⅘",
-  "frac56;": "⅚",
-  "frac58;": "⅝",
-  "frac78;": "⅞",
-  "gacute;": "ǵ",
-  "Gammad;": "Ϝ",
-  "gammad;": "ϝ",
-  "Gbreve;": "Ğ",
-  "gbreve;": "ğ",
-  "Gcedil;": "Ģ",
-  "gesdot;": "⪀",
-  "gesles;": "⪔",
-  "gtlPar;": "⦕",
-  "gtrarr;": "⥸",
-  "gtrdot;": "⋗",
-  "gtrsim;": "≳",
-  "hairsp;": " ",
-  "hamilt;": "ℋ",
-  "HARDcy;": "Ъ",
-  "hardcy;": "ъ",
-  "hearts;": "♥",
-  "hellip;": "…",
-  "hercon;": "⊹",
-  "homtht;": "∻",
-  "horbar;": "―",
-  "hslash;": "ℏ",
-  "Hstrok;": "Ħ",
-  "hstrok;": "ħ",
-  "hybull;": "⁃",
-  "hyphen;": "‐",
-  "Iacute;": "Í",
-  "iacute;": "í",
-  "Igrave;": "Ì",
-  "igrave;": "ì",
-  "iiiint;": "⨌",
-  "iinfin;": "⧜",
-  "incare;": "℅",
-  "inodot;": "ı",
-  "intcal;": "⊺",
-  "iquest;": "¿",
-  "isinsv;": "⋳",
-  "Itilde;": "Ĩ",
-  "itilde;": "ĩ",
-  "Jsercy;": "Ј",
-  "jsercy;": "ј",
-  "kappav;": "ϰ",
-  "Kcedil;": "Ķ",
-  "kcedil;": "ķ",
-  "kgreen;": "ĸ",
-  "Lacute;": "Ĺ",
-  "lacute;": "ĺ",
-  "lagran;": "ℒ",
-  "Lambda;": "Λ",
-  "lambda;": "λ",
-  "langle;": "⟨",
-  "larrfs;": "⤝",
-  "larrhk;": "↩",
-  "larrlp;": "↫",
-  "larrpl;": "⤹",
-  "larrtl;": "↢",
-  "lAtail;": "⤛",
-  "latail;": "⤙",
-  "lbrace;": "{",
-  "lbrack;": "[",
-  "Lcaron;": "Ľ",
-  "lcaron;": "ľ",
-  "Lcedil;": "Ļ",
-  "lcedil;": "ļ",
-  "ldquor;": "„",
-  "lesdot;": "⩿",
-  "lesges;": "⪓",
-  "lfisht;": "⥼",
-  "lfloor;": "⌊",
-  "lharul;": "⥪",
-  "llhard;": "⥫",
-  "Lmidot;": "Ŀ",
-  "lmidot;": "ŀ",
-  "lmoust;": "⎰",
-  "loplus;": "⨭",
-  "lowast;": "∗",
-  "lowbar;": "_",
-  "lparlt;": "⦓",
-  "lrhard;": "⥭",
-  "lsaquo;": "‹",
-  "lsquor;": "‚",
-  "Lstrok;": "Ł",
-  "lstrok;": "ł",
-  "lthree;": "⋋",
-  "ltimes;": "⋉",
-  "ltlarr;": "⥶",
-  "ltrPar;": "⦖",
-  "mapsto;": "↦",
-  "marker;": "▮",
-  "mcomma;": "⨩",
-  "midast;": "*",
-  "midcir;": "⫰",
-  "middot;": "·",
-  "minusb;": "⊟",
-  "minusd;": "∸",
-  "mnplus;": "∓",
-  "models;": "⊧",
-  "mstpos;": "∾",
-  "Nacute;": "Ń",
-  "nacute;": "ń",
-  "nbumpe;": "≏̸",
-  "Ncaron;": "Ň",
-  "ncaron;": "ň",
-  "Ncedil;": "Ņ",
-  "ncedil;": "ņ",
-  "nearhk;": "⤤",
-  "nequiv;": "≢",
-  "nesear;": "⤨",
-  "nexist;": "∄",
-  "nltrie;": "⋬",
-  "notinE;": "⋹̸",
-  "nparsl;": "⫽⃥",
-  "nprcue;": "⋠",
-  "nrarrc;": "⤳̸",
-  "nrarrw;": "↝̸",
-  "nrtrie;": "⋭",
-  "nsccue;": "⋡",
-  "nsimeq;": "≄",
-  "Ntilde;": "Ñ",
-  "ntilde;": "ñ",
-  "numero;": "№",
-  "nVDash;": "⊯",
-  "nVdash;": "⊮",
-  "nvDash;": "⊭",
-  "nvdash;": "⊬",
-  "nvHarr;": "⤄",
-  "nvlArr;": "⤂",
-  "nvrArr;": "⤃",
-  "nwarhk;": "⤣",
-  "nwnear;": "⤧",
-  "Oacute;": "Ó",
-  "oacute;": "ó",
-  "Odblac;": "Ő",
-  "odblac;": "ő",
-  "odsold;": "⦼",
-  "Ograve;": "Ò",
-  "ograve;": "ò",
-  "ominus;": "⊖",
-  "origof;": "⊶",
-  "Oslash;": "Ø",
-  "oslash;": "ø",
-  "Otilde;": "Õ",
-  "otilde;": "õ",
-  "Otimes;": "⨷",
-  "otimes;": "⊗",
-  "parsim;": "⫳",
-  "percnt;": "%",
-  "period;": ".",
-  "permil;": "‰",
-  "phmmat;": "ℳ",
-  "planck;": "ℏ",
-  "plankv;": "ℏ",
-  "plusdo;": "∔",
-  "plusdu;": "⨥",
-  "plusmn;": "±",
-  "preceq;": "⪯",
-  "primes;": "ℙ",
-  "prnsim;": "⋨",
-  "propto;": "∝",
-  "prurel;": "⊰",
-  "puncsp;": " ",
-  "qprime;": "⁗",
-  "Racute;": "Ŕ",
-  "racute;": "ŕ",
-  "rangle;": "⟩",
-  "rarrap;": "⥵",
-  "rarrfs;": "⤞",
-  "rarrhk;": "↪",
-  "rarrlp;": "↬",
-  "rarrpl;": "⥅",
-  "Rarrtl;": "⤖",
-  "rarrtl;": "↣",
-  "rAtail;": "⤜",
-  "ratail;": "⤚",
-  "rbrace;": "}",
-  "rbrack;": "]",
-  "Rcaron;": "Ř",
-  "rcaron;": "ř",
-  "Rcedil;": "Ŗ",
-  "rcedil;": "ŗ",
-  "rdquor;": "”",
-  "rfisht;": "⥽",
-  "rfloor;": "⌋",
-  "rharul;": "⥬",
-  "rmoust;": "⎱",
-  "roplus;": "⨮",
-  "rpargt;": "⦔",
-  "rsaquo;": "›",
-  "rsquor;": "’",
-  "rthree;": "⋌",
-  "rtimes;": "⋊",
-  "Sacute;": "Ś",
-  "sacute;": "ś",
-  "Scaron;": "Š",
-  "scaron;": "š",
-  "Scedil;": "Ş",
-  "scedil;": "ş",
-  "scnsim;": "⋩",
-  "searhk;": "⤥",
-  "seswar;": "⤩",
-  "sfrown;": "⌢",
-  "SHCHcy;": "Щ",
-  "shchcy;": "щ",
-  "sigmaf;": "ς",
-  "sigmav;": "ς",
-  "simdot;": "⩪",
-  "smashp;": "⨳",
-  "SOFTcy;": "Ь",
-  "softcy;": "ь",
-  "solbar;": "⌿",
-  "spades;": "♠",
-  "sqcaps;": "⊓︀",
-  "sqcups;": "⊔︀",
-  "sqsube;": "⊑",
-  "sqsupe;": "⊒",
-  "Square;": "□",
-  "square;": "□",
-  "squarf;": "▪",
-  "ssetmn;": "∖",
-  "ssmile;": "⌣",
-  "sstarf;": "⋆",
-  "subdot;": "⪽",
-  "Subset;": "⋐",
-  "subset;": "⊂",
-  "subsim;": "⫇",
-  "subsub;": "⫕",
-  "subsup;": "⫓",
-  "succeq;": "⪰",
-  "supdot;": "⪾",
-  "Supset;": "⋑",
-  "supset;": "⊃",
-  "supsim;": "⫈",
-  "supsub;": "⫔",
-  "supsup;": "⫖",
-  "swarhk;": "⤦",
-  "swnwar;": "⤪",
-  "target;": "⌖",
-  "Tcaron;": "Ť",
-  "tcaron;": "ť",
-  "Tcedil;": "Ţ",
-  "tcedil;": "ţ",
-  "telrec;": "⌕",
-  "there4;": "∴",
-  "thetav;": "ϑ",
-  "thinsp;": " ",
-  "thksim;": "∼",
-  "timesb;": "⊠",
-  "timesd;": "⨰",
-  "topbot;": "⌶",
-  "topcir;": "⫱",
-  "tprime;": "‴",
-  "tridot;": "◬",
-  "Tstrok;": "Ŧ",
-  "tstrok;": "ŧ",
-  "Uacute;": "Ú",
-  "uacute;": "ú",
-  "Ubreve;": "Ŭ",
-  "ubreve;": "ŭ",
-  "Udblac;": "Ű",
-  "udblac;": "ű",
-  "ufisht;": "⥾",
-  "Ugrave;": "Ù",
-  "ugrave;": "ù",
-  "ulcorn;": "⌜",
-  "ulcrop;": "⌏",
-  "urcorn;": "⌝",
-  "urcrop;": "⌎",
-  "Utilde;": "Ũ",
-  "utilde;": "ũ",
-  "vangrt;": "⦜",
-  "varphi;": "ϕ",
-  "varrho;": "ϱ",
-  "Vdashl;": "⫦",
-  "veebar;": "⊻",
-  "vellip;": "⋮",
-  "Verbar;": "‖",
-  "verbar;": "|",
-  "vsubnE;": "⫋︀",
-  "vsubne;": "⊊︀",
-  "vsupnE;": "⫌︀",
-  "vsupne;": "⊋︀",
-  "Vvdash;": "⊪",
-  "wedbar;": "⩟",
-  "wedgeq;": "≙",
-  "weierp;": "℘",
-  "wreath;": "≀",
-  "xoplus;": "⨁",
-  "xotime;": "⨂",
-  "xsqcup;": "⨆",
-  "xuplus;": "⨄",
-  "xwedge;": "⋀",
-  "Yacute;": "Ý",
-  "yacute;": "ý",
-  "Zacute;": "Ź",
-  "zacute;": "ź",
-  "Zcaron;": "Ž",
-  "zcaron;": "ž",
-  "zeetrf;": "ℨ",
-  "alefsym;": "ℵ",
-  "angrtvb;": "⊾",
-  "angzarr;": "⍼",
-  "asympeq;": "≍",
-  "backsim;": "∽",
-  "Because;": "∵",
-  "because;": "∵",
-  "bemptyv;": "⦰",
-  "between;": "≬",
-  "bigcirc;": "◯",
-  "bigodot;": "⨀",
-  "bigstar;": "★",
-  "bnequiv;": "≡⃥",
-  "boxplus;": "⊞",
-  "Cayleys;": "ℭ",
-  "Cconint;": "∰",
-  "ccupssm;": "⩐",
-  "Cedilla;": "¸",
-  "cemptyv;": "⦲",
-  "cirscir;": "⧂",
-  "coloneq;": "≔",
-  "congdot;": "⩭",
-  "cudarrl;": "⤸",
-  "cudarrr;": "⤵",
-  "cularrp;": "⤽",
-  "curarrm;": "⤼",
-  "dbkarow;": "⤏",
-  "ddagger;": "‡",
-  "ddotseq;": "⩷",
-  "demptyv;": "⦱",
-  "Diamond;": "⋄",
-  "diamond;": "⋄",
-  "digamma;": "ϝ",
-  "dotplus;": "∔",
-  "DownTee;": "⊤",
-  "dwangle;": "⦦",
-  "Element;": "∈",
-  "Epsilon;": "Ε",
-  "epsilon;": "ε",
-  "eqcolon;": "≕",
-  "equivDD;": "⩸",
-  "gesdoto;": "⪂",
-  "gtquest;": "⩼",
-  "gtrless;": "≷",
-  "harrcir;": "⥈",
-  "Implies;": "⇒",
-  "intprod;": "⨼",
-  "isindot;": "⋵",
-  "larrbfs;": "⤟",
-  "larrsim;": "⥳",
-  "lbrksld;": "⦏",
-  "lbrkslu;": "⦍",
-  "ldrdhar;": "⥧",
-  "LeftTee;": "⊣",
-  "lesdoto;": "⪁",
-  "lessdot;": "⋖",
-  "lessgtr;": "≶",
-  "lesssim;": "≲",
-  "lotimes;": "⨴",
-  "lozenge;": "◊",
-  "ltquest;": "⩻",
-  "luruhar;": "⥦",
-  "maltese;": "✠",
-  "minusdu;": "⨪",
-  "napprox;": "≉",
-  "natural;": "♮",
-  "nearrow;": "↗",
-  "NewLine;": "\n",
-  "nexists;": "∄",
-  "NoBreak;": "⁠",
-  "notinva;": "∉",
-  "notinvb;": "⋷",
-  "notinvc;": "⋶",
-  "NotLess;": "≮",
-  "notniva;": "∌",
-  "notnivb;": "⋾",
-  "notnivc;": "⋽",
-  "npolint;": "⨔",
-  "npreceq;": "⪯̸",
-  "nsqsube;": "⋢",
-  "nsqsupe;": "⋣",
-  "nsubset;": "⊂⃒",
-  "nsucceq;": "⪰̸",
-  "nsupset;": "⊃⃒",
-  "nvinfin;": "⧞",
-  "nvltrie;": "⊴⃒",
-  "nvrtrie;": "⊵⃒",
-  "nwarrow;": "↖",
-  "olcross;": "⦻",
-  "Omicron;": "Ο",
-  "omicron;": "ο",
-  "orderof;": "ℴ",
-  "orslope;": "⩗",
-  "OverBar;": "‾",
-  "pertenk;": "‱",
-  "planckh;": "ℎ",
-  "pluscir;": "⨢",
-  "plussim;": "⨦",
-  "plustwo;": "⨧",
-  "precsim;": "≾",
-  "Product;": "∏",
-  "quatint;": "⨖",
-  "questeq;": "≟",
-  "rarrbfs;": "⤠",
-  "rarrsim;": "⥴",
-  "rbrksld;": "⦎",
-  "rbrkslu;": "⦐",
-  "rdldhar;": "⥩",
-  "realine;": "ℛ",
-  "rotimes;": "⨵",
-  "ruluhar;": "⥨",
-  "searrow;": "↘",
-  "simplus;": "⨤",
-  "simrarr;": "⥲",
-  "subedot;": "⫃",
-  "submult;": "⫁",
-  "subplus;": "⪿",
-  "subrarr;": "⥹",
-  "succsim;": "≿",
-  "supdsub;": "⫘",
-  "supedot;": "⫄",
-  "suphsol;": "⟉",
-  "suphsub;": "⫗",
-  "suplarr;": "⥻",
-  "supmult;": "⫂",
-  "supplus;": "⫀",
-  "swarrow;": "↙",
-  "topfork;": "⫚",
-  "triplus;": "⨹",
-  "tritime;": "⨻",
-  "UpArrow;": "↑",
-  "Uparrow;": "⇑",
-  "uparrow;": "↑",
-  "Upsilon;": "Υ",
-  "upsilon;": "υ",
-  "uwangle;": "⦧",
-  "vzigzag;": "⦚",
-  "zigrarr;": "⇝",
-  "andslope;": "⩘",
-  "angmsdaa;": "⦨",
-  "angmsdab;": "⦩",
-  "angmsdac;": "⦪",
-  "angmsdad;": "⦫",
-  "angmsdae;": "⦬",
-  "angmsdaf;": "⦭",
-  "angmsdag;": "⦮",
-  "angmsdah;": "⦯",
-  "angrtvbd;": "⦝",
-  "approxeq;": "≊",
-  "awconint;": "∳",
-  "backcong;": "≌",
-  "barwedge;": "⌅",
-  "bbrktbrk;": "⎶",
-  "bigoplus;": "⨁",
-  "bigsqcup;": "⨆",
-  "biguplus;": "⨄",
-  "bigwedge;": "⋀",
-  "boxminus;": "⊟",
-  "boxtimes;": "⊠",
-  "bsolhsub;": "⟈",
-  "capbrcup;": "⩉",
-  "circledR;": "®",
-  "circledS;": "Ⓢ",
-  "cirfnint;": "⨐",
-  "clubsuit;": "♣",
-  "cupbrcap;": "⩈",
-  "curlyvee;": "⋎",
-  "cwconint;": "∲",
-  "DDotrahd;": "⤑",
-  "doteqdot;": "≑",
-  "DotEqual;": "≐",
-  "dotminus;": "∸",
-  "drbkarow;": "⤐",
-  "dzigrarr;": "⟿",
-  "elinters;": "⏧",
-  "emptyset;": "∅",
-  "eqvparsl;": "⧥",
-  "fpartint;": "⨍",
-  "geqslant;": "⩾",
-  "gesdotol;": "⪄",
-  "gnapprox;": "⪊",
-  "hksearow;": "⤥",
-  "hkswarow;": "⤦",
-  "imagline;": "ℐ",
-  "imagpart;": "ℑ",
-  "infintie;": "⧝",
-  "integers;": "ℤ",
-  "Integral;": "∫",
-  "intercal;": "⊺",
-  "intlarhk;": "⨗",
-  "laemptyv;": "⦴",
-  "ldrushar;": "⥋",
-  "leqslant;": "⩽",
-  "lesdotor;": "⪃",
-  "LessLess;": "⪡",
-  "llcorner;": "⌞",
-  "lnapprox;": "⪉",
-  "lrcorner;": "⌟",
-  "lurdshar;": "⥊",
-  "mapstoup;": "↥",
-  "multimap;": "⊸",
-  "naturals;": "ℕ",
-  "ncongdot;": "⩭̸",
-  "NotEqual;": "≠",
-  "notindot;": "⋵̸",
-  "NotTilde;": "≁",
-  "otimesas;": "⨶",
-  "parallel;": "∥",
-  "PartialD;": "∂",
-  "plusacir;": "⨣",
-  "pointint;": "⨕",
-  "Precedes;": "≺",
-  "precneqq;": "⪵",
-  "precnsim;": "⋨",
-  "profalar;": "⌮",
-  "profline;": "⌒",
-  "profsurf;": "⌓",
-  "raemptyv;": "⦳",
-  "realpart;": "ℜ",
-  "RightTee;": "⊢",
-  "rppolint;": "⨒",
-  "rtriltri;": "⧎",
-  "scpolint;": "⨓",
-  "setminus;": "∖",
-  "shortmid;": "∣",
-  "smeparsl;": "⧤",
-  "sqsubset;": "⊏",
-  "sqsupset;": "⊐",
-  "subseteq;": "⊆",
-  "Succeeds;": "≻",
-  "succneqq;": "⪶",
-  "succnsim;": "⋩",
-  "SuchThat;": "∋",
-  "Superset;": "⊃",
-  "supseteq;": "⊇",
-  "thetasym;": "ϑ",
-  "thicksim;": "∼",
-  "timesbar;": "⨱",
-  "triangle;": "▵",
-  "triminus;": "⨺",
-  "trpezium;": "⏢",
-  "Uarrocir;": "⥉",
-  "ulcorner;": "⌜",
-  "UnderBar;": "_",
-  "urcorner;": "⌝",
-  "varkappa;": "ϰ",
-  "varsigma;": "ς",
-  "vartheta;": "ϑ",
-  "backprime;": "‵",
-  "backsimeq;": "⋍",
-  "Backslash;": "∖",
-  "bigotimes;": "⨂",
-  "CenterDot;": "·",
-  "centerdot;": "·",
-  "checkmark;": "✓",
-  "CircleDot;": "⊙",
-  "complexes;": "ℂ",
-  "Congruent;": "≡",
-  "Coproduct;": "∐",
-  "dotsquare;": "⊡",
-  "DoubleDot;": "¨",
-  "DownArrow;": "↓",
-  "Downarrow;": "⇓",
-  "downarrow;": "↓",
-  "DownBreve;": "̑",
-  "gtrapprox;": "⪆",
-  "gtreqless;": "⋛",
-  "gvertneqq;": "≩︀",
-  "heartsuit;": "♥",
-  "HumpEqual;": "≏",
-  "LeftArrow;": "←",
-  "Leftarrow;": "⇐",
-  "leftarrow;": "←",
-  "LeftFloor;": "⌊",
-  "lesseqgtr;": "⋚",
-  "LessTilde;": "≲",
-  "lvertneqq;": "≨︀",
-  "Mellintrf;": "ℳ",
-  "MinusPlus;": "∓",
-  "ngeqslant;": "⩾̸",
-  "nleqslant;": "⩽̸",
-  "NotCupCap;": "≭",
-  "NotExists;": "∄",
-  "NotSubset;": "⊂⃒",
-  "nparallel;": "∦",
-  "nshortmid;": "∤",
-  "nsubseteq;": "⊈",
-  "nsupseteq;": "⊉",
-  "OverBrace;": "⏞",
-  "pitchfork;": "⋔",
-  "PlusMinus;": "±",
-  "rationals;": "ℚ",
-  "spadesuit;": "♠",
-  "subseteqq;": "⫅",
-  "subsetneq;": "⊊",
-  "supseteqq;": "⫆",
-  "supsetneq;": "⊋",
-  "Therefore;": "∴",
-  "therefore;": "∴",
-  "ThinSpace;": " ",
-  "triangleq;": "≜",
-  "TripleDot;": "⃛",
-  "UnionPlus;": "⊎",
-  "varpropto;": "∝",
-  "Bernoullis;": "ℬ",
-  "circledast;": "⊛",
-  "CirclePlus;": "⊕",
-  "complement;": "∁",
-  "curlywedge;": "⋏",
-  "eqslantgtr;": "⪖",
-  "EqualTilde;": "≂",
-  "Fouriertrf;": "ℱ",
-  "gtreqqless;": "⪌",
-  "ImaginaryI;": "ⅈ",
-  "Laplacetrf;": "ℒ",
-  "LeftVector;": "↼",
-  "lessapprox;": "⪅",
-  "lesseqqgtr;": "⪋",
-  "Lleftarrow;": "⇚",
-  "lmoustache;": "⎰",
-  "longmapsto;": "⟼",
-  "mapstodown;": "↧",
-  "mapstoleft;": "↤",
-  "nLeftarrow;": "⇍",
-  "nleftarrow;": "↚",
-  "NotElement;": "∉",
-  "NotGreater;": "≯",
-  "nsubseteqq;": "⫅̸",
-  "nsupseteqq;": "⫆̸",
-  "precapprox;": "⪷",
-  "Proportion;": "∷",
-  "RightArrow;": "→",
-  "Rightarrow;": "⇒",
-  "rightarrow;": "→",
-  "RightFloor;": "⌋",
-  "rmoustache;": "⎱",
-  "sqsubseteq;": "⊑",
-  "sqsupseteq;": "⊒",
-  "subsetneqq;": "⫋",
-  "succapprox;": "⪸",
-  "supsetneqq;": "⫌",
-  "ThickSpace;": "  ",
-  "TildeEqual;": "≃",
-  "TildeTilde;": "≈",
-  "UnderBrace;": "⏟",
-  "UpArrowBar;": "⤒",
-  "UpTeeArrow;": "↥",
-  "upuparrows;": "⇈",
-  "varepsilon;": "ϵ",
-  "varnothing;": "∅",
-  "backepsilon;": "϶",
-  "blacksquare;": "▪",
-  "circledcirc;": "⊚",
-  "circleddash;": "⊝",
-  "CircleMinus;": "⊖",
-  "CircleTimes;": "⊗",
-  "curlyeqprec;": "⋞",
-  "curlyeqsucc;": "⋟",
-  "diamondsuit;": "♦",
-  "eqslantless;": "⪕",
-  "Equilibrium;": "⇌",
-  "expectation;": "ℰ",
-  "GreaterLess;": "≷",
-  "LeftCeiling;": "⌈",
-  "LessGreater;": "≶",
-  "MediumSpace;": " ",
-  "NotLessLess;": "≪̸",
-  "NotPrecedes;": "⊀",
-  "NotSucceeds;": "⊁",
-  "NotSuperset;": "⊃⃒",
-  "nRightarrow;": "⇏",
-  "nrightarrow;": "↛",
-  "OverBracket;": "⎴",
-  "preccurlyeq;": "≼",
-  "precnapprox;": "⪹",
-  "quaternions;": "ℍ",
-  "RightVector;": "⇀",
-  "Rrightarrow;": "⇛",
-  "RuleDelayed;": "⧴",
-  "SmallCircle;": "∘",
-  "SquareUnion;": "⊔",
-  "straightphi;": "ϕ",
-  "SubsetEqual;": "⊆",
-  "succcurlyeq;": "≽",
-  "succnapprox;": "⪺",
-  "thickapprox;": "≈",
-  "UpDownArrow;": "↕",
-  "Updownarrow;": "⇕",
-  "updownarrow;": "↕",
-  "VerticalBar;": "∣",
-  "blacklozenge;": "⧫",
-  "DownArrowBar;": "⤓",
-  "DownTeeArrow;": "↧",
-  "ExponentialE;": "ⅇ",
-  "exponentiale;": "ⅇ",
-  "GreaterEqual;": "≥",
-  "GreaterTilde;": "≳",
-  "HilbertSpace;": "ℋ",
-  "HumpDownHump;": "≎",
-  "Intersection;": "⋂",
-  "LeftArrowBar;": "⇤",
-  "LeftTeeArrow;": "↤",
-  "LeftTriangle;": "⊲",
-  "LeftUpVector;": "↿",
-  "NotCongruent;": "≢",
-  "NotHumpEqual;": "≏̸",
-  "NotLessEqual;": "≰",
-  "NotLessTilde;": "≴",
-  "Proportional;": "∝",
-  "RightCeiling;": "⌉",
-  "risingdotseq;": "≓",
-  "RoundImplies;": "⥰",
-  "ShortUpArrow;": "↑",
-  "SquareSubset;": "⊏",
-  "triangledown;": "▿",
-  "triangleleft;": "◃",
-  "UnderBracket;": "⎵",
-  "varsubsetneq;": "⊊︀",
-  "varsupsetneq;": "⊋︀",
-  "VerticalLine;": "|",
-  "ApplyFunction;": "⁡",
-  "bigtriangleup;": "△",
-  "blacktriangle;": "▴",
-  "DifferentialD;": "ⅆ",
-  "divideontimes;": "⋇",
-  "DoubleLeftTee;": "⫤",
-  "DoubleUpArrow;": "⇑",
-  "fallingdotseq;": "≒",
-  "hookleftarrow;": "↩",
-  "leftarrowtail;": "↢",
-  "leftharpoonup;": "↼",
-  "LeftTeeVector;": "⥚",
-  "LeftVectorBar;": "⥒",
-  "LessFullEqual;": "≦",
-  "LongLeftArrow;": "⟵",
-  "Longleftarrow;": "⟸",
-  "longleftarrow;": "⟵",
-  "looparrowleft;": "↫",
-  "measuredangle;": "∡",
-  "NotEqualTilde;": "≂̸",
-  "NotTildeEqual;": "≄",
-  "NotTildeTilde;": "≉",
-  "ntriangleleft;": "⋪",
-  "Poincareplane;": "ℌ",
-  "PrecedesEqual;": "⪯",
-  "PrecedesTilde;": "≾",
-  "RightArrowBar;": "⇥",
-  "RightTeeArrow;": "↦",
-  "RightTriangle;": "⊳",
-  "RightUpVector;": "↾",
-  "shortparallel;": "∥",
-  "smallsetminus;": "∖",
-  "SucceedsEqual;": "⪰",
-  "SucceedsTilde;": "≿",
-  "SupersetEqual;": "⊇",
-  "triangleright;": "▹",
-  "UpEquilibrium;": "⥮",
-  "upharpoonleft;": "↿",
-  "varsubsetneqq;": "⫋︀",
-  "varsupsetneqq;": "⫌︀",
-  "VerticalTilde;": "≀",
-  "VeryThinSpace;": " ",
-  "curvearrowleft;": "↶",
-  "DiacriticalDot;": "˙",
-  "doublebarwedge;": "⌆",
-  "DoubleRightTee;": "⊨",
-  "downdownarrows;": "⇊",
-  "DownLeftVector;": "↽",
-  "GreaterGreater;": "⪢",
-  "hookrightarrow;": "↪",
-  "HorizontalLine;": "─",
-  "InvisibleComma;": "⁣",
-  "InvisibleTimes;": "⁢",
-  "LeftDownVector;": "⇃",
-  "leftleftarrows;": "⇇",
-  "LeftRightArrow;": "↔",
-  "Leftrightarrow;": "⇔",
-  "leftrightarrow;": "↔",
-  "leftthreetimes;": "⋋",
-  "LessSlantEqual;": "⩽",
-  "LongRightArrow;": "⟶",
-  "Longrightarrow;": "⟹",
-  "longrightarrow;": "⟶",
-  "looparrowright;": "↬",
-  "LowerLeftArrow;": "↙",
-  "NestedLessLess;": "≪",
-  "NotGreaterLess;": "≹",
-  "NotLessGreater;": "≸",
-  "NotSubsetEqual;": "⊈",
-  "NotVerticalBar;": "∤",
-  "nshortparallel;": "∦",
-  "ntriangleright;": "⋫",
-  "OpenCurlyQuote;": "‘",
-  "ReverseElement;": "∋",
-  "rightarrowtail;": "↣",
-  "rightharpoonup;": "⇀",
-  "RightTeeVector;": "⥛",
-  "RightVectorBar;": "⥓",
-  "ShortDownArrow;": "↓",
-  "ShortLeftArrow;": "←",
-  "SquareSuperset;": "⊐",
-  "TildeFullEqual;": "≅",
-  "trianglelefteq;": "⊴",
-  "upharpoonright;": "↾",
-  "UpperLeftArrow;": "↖",
-  "ZeroWidthSpace;": "​",
-  "bigtriangledown;": "▽",
-  "circlearrowleft;": "↺",
-  "CloseCurlyQuote;": "’",
-  "ContourIntegral;": "∮",
-  "curvearrowright;": "↷",
-  "DoubleDownArrow;": "⇓",
-  "DoubleLeftArrow;": "⇐",
-  "downharpoonleft;": "⇃",
-  "DownRightVector;": "⇁",
-  "leftharpoondown;": "↽",
-  "leftrightarrows;": "⇆",
-  "LeftRightVector;": "⥎",
-  "LeftTriangleBar;": "⧏",
-  "LeftUpTeeVector;": "⥠",
-  "LeftUpVectorBar;": "⥘",
-  "LowerRightArrow;": "↘",
-  "nLeftrightarrow;": "⇎",
-  "nleftrightarrow;": "↮",
-  "NotGreaterEqual;": "≱",
-  "NotGreaterTilde;": "≵",
-  "NotHumpDownHump;": "≎̸",
-  "NotLeftTriangle;": "⋪",
-  "NotSquareSubset;": "⊏̸",
-  "ntrianglelefteq;": "⋬",
-  "OverParenthesis;": "⏜",
-  "RightDownVector;": "⇂",
-  "rightleftarrows;": "⇄",
-  "rightsquigarrow;": "↝",
-  "rightthreetimes;": "⋌",
-  "ShortRightArrow;": "→",
-  "straightepsilon;": "ϵ",
-  "trianglerighteq;": "⊵",
-  "UpperRightArrow;": "↗",
-  "vartriangleleft;": "⊲",
-  "circlearrowright;": "↻",
-  "DiacriticalAcute;": "´",
-  "DiacriticalGrave;": "`",
-  "DiacriticalTilde;": "˜",
-  "DoubleRightArrow;": "⇒",
-  "DownArrowUpArrow;": "⇵",
-  "downharpoonright;": "⇂",
-  "EmptySmallSquare;": "◻",
-  "GreaterEqualLess;": "⋛",
-  "GreaterFullEqual;": "≧",
-  "LeftAngleBracket;": "⟨",
-  "LeftUpDownVector;": "⥑",
-  "LessEqualGreater;": "⋚",
-  "NonBreakingSpace;": " ",
-  "NotPrecedesEqual;": "⪯̸",
-  "NotRightTriangle;": "⋫",
-  "NotSucceedsEqual;": "⪰̸",
-  "NotSucceedsTilde;": "≿̸",
-  "NotSupersetEqual;": "⊉",
-  "ntrianglerighteq;": "⋭",
-  "rightharpoondown;": "⇁",
-  "rightrightarrows;": "⇉",
-  "RightTriangleBar;": "⧐",
-  "RightUpTeeVector;": "⥜",
-  "RightUpVectorBar;": "⥔",
-  "twoheadleftarrow;": "↞",
-  "UnderParenthesis;": "⏝",
-  "UpArrowDownArrow;": "⇅",
-  "vartriangleright;": "⊳",
-  "blacktriangledown;": "▾",
-  "blacktriangleleft;": "◂",
-  "DoubleUpDownArrow;": "⇕",
-  "DoubleVerticalBar;": "∥",
-  "DownLeftTeeVector;": "⥞",
-  "DownLeftVectorBar;": "⥖",
-  "FilledSmallSquare;": "◼",
-  "GreaterSlantEqual;": "⩾",
-  "LeftDoubleBracket;": "⟦",
-  "LeftDownTeeVector;": "⥡",
-  "LeftDownVectorBar;": "⥙",
-  "leftrightharpoons;": "⇋",
-  "LeftTriangleEqual;": "⊴",
-  "NegativeThinSpace;": "​",
-  "NotGreaterGreater;": "≫̸",
-  "NotLessSlantEqual;": "⩽̸",
-  "NotNestedLessLess;": "⪡̸",
-  "NotReverseElement;": "∌",
-  "NotSquareSuperset;": "⊐̸",
-  "NotTildeFullEqual;": "≇",
-  "RightAngleBracket;": "⟩",
-  "rightleftharpoons;": "⇌",
-  "RightUpDownVector;": "⥏",
-  "SquareSubsetEqual;": "⊑",
-  "twoheadrightarrow;": "↠",
-  "VerticalSeparator;": "❘",
-  "blacktriangleright;": "▸",
-  "DownRightTeeVector;": "⥟",
-  "DownRightVectorBar;": "⥗",
-  "LongLeftRightArrow;": "⟷",
-  "Longleftrightarrow;": "⟺",
-  "longleftrightarrow;": "⟷",
-  "NegativeThickSpace;": "​",
-  "NotLeftTriangleBar;": "⧏̸",
-  "PrecedesSlantEqual;": "≼",
-  "ReverseEquilibrium;": "⇋",
-  "RightDoubleBracket;": "⟧",
-  "RightDownTeeVector;": "⥝",
-  "RightDownVectorBar;": "⥕",
-  "RightTriangleEqual;": "⊵",
-  "SquareIntersection;": "⊓",
-  "SucceedsSlantEqual;": "≽",
-  "DoubleLongLeftArrow;": "⟸",
-  "DownLeftRightVector;": "⥐",
-  "LeftArrowRightArrow;": "⇆",
-  "leftrightsquigarrow;": "↭",
-  "NegativeMediumSpace;": "​",
-  "NotGreaterFullEqual;": "≧̸",
-  "NotRightTriangleBar;": "⧐̸",
-  "RightArrowLeftArrow;": "⇄",
-  "SquareSupersetEqual;": "⊒",
-  "CapitalDifferentialD;": "ⅅ",
-  "DoubleLeftRightArrow;": "⇔",
-  "DoubleLongRightArrow;": "⟹",
-  "EmptyVerySmallSquare;": "▫",
-  "NestedGreaterGreater;": "≫",
-  "NotDoubleVerticalBar;": "∦",
-  "NotGreaterSlantEqual;": "⩾̸",
-  "NotLeftTriangleEqual;": "⋬",
-  "NotSquareSubsetEqual;": "⋢",
-  "OpenCurlyDoubleQuote;": "“",
-  "ReverseUpEquilibrium;": "⥯",
-  "CloseCurlyDoubleQuote;": "”",
-  "DoubleContourIntegral;": "∯",
-  "FilledVerySmallSquare;": "▪",
-  "NegativeVeryThinSpace;": "​",
-  "NotPrecedesSlantEqual;": "⋠",
-  "NotRightTriangleEqual;": "⋭",
-  "NotSucceedsSlantEqual;": "⋡",
-  "DiacriticalDoubleAcute;": "˝",
-  "NotSquareSupersetEqual;": "⋣",
-  "NotNestedGreaterGreater;": "⪢̸",
-  "ClockwiseContourIntegral;": "∲",
-  "DoubleLongLeftRightArrow;": "⟺",
-  "CounterClockwiseContourIntegral;": "∳"
-}
diff --git a/packages/compiler-dom/src/parserOptions.ts b/packages/compiler-dom/src/parserOptions.ts
index 4d06a776b..7da13bf53 100644
--- a/packages/compiler-dom/src/parserOptions.ts
+++ b/packages/compiler-dom/src/parserOptions.ts
@@ -1,48 +1,31 @@
-import {
-  TextModes,
-  ParserOptions,
-  ElementNode,
-  NodeTypes,
-  isBuiltInType
-} from '@vue/compiler-core'
-import { makeMap, isVoidTag, isHTMLTag, isSVGTag } from '@vue/shared'
+import { Namespaces, NodeTypes, type ParserOptions } from '@vue/compiler-core'
+import { isHTMLTag, isMathMLTag, isSVGTag, isVoidTag } from '@vue/shared'
 import { TRANSITION, TRANSITION_GROUP } from './runtimeHelpers'
-import { decodeHtml } from './decodeHtml'
 import { decodeHtmlBrowser } from './decodeHtmlBrowser'
 
-const isRawTextContainer = /*#__PURE__*/ makeMap(
-  'style,iframe,script,noscript',
-  true
-)
-
-export const enum DOMNamespaces {
-  HTML = 0 /* Namespaces.HTML */,
-  SVG,
-  MATH_ML
-}
-
 export const parserOptions: ParserOptions = {
+  parseMode: 'html',
   isVoidTag,
-  isNativeTag: tag => isHTMLTag(tag) || isSVGTag(tag),
+  isNativeTag: tag => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
   isPreTag: tag => tag === 'pre',
-  decodeEntities: __BROWSER__ ? decodeHtmlBrowser : decodeHtml,
+  isIgnoreNewlineTag: tag => tag === 'pre' || tag === 'textarea',
+  decodeEntities: __BROWSER__ ? decodeHtmlBrowser : undefined,
 
-  isBuiltInComponent: (tag: string): symbol | undefined => {
-    if (isBuiltInType(tag, `Transition`)) {
+  isBuiltInComponent: tag => {
+    if (tag === 'Transition' || tag === 'transition') {
       return TRANSITION
-    } else if (isBuiltInType(tag, `TransitionGroup`)) {
+    } else if (tag === 'TransitionGroup' || tag === 'transition-group') {
       return TRANSITION_GROUP
     }
   },
 
   // https://html.spec.whatwg.org/multipage/parsing.html#tree-construction-dispatcher
-  getNamespace(tag: string, parent: ElementNode | undefined): DOMNamespaces {
-    let ns = parent ? parent.ns : DOMNamespaces.HTML
-
-    if (parent && ns === DOMNamespaces.MATH_ML) {
+  getNamespace(tag, parent, rootNamespace) {
+    let ns = parent ? parent.ns : rootNamespace
+    if (parent && ns === Namespaces.MATH_ML) {
       if (parent.tag === 'annotation-xml') {
         if (tag === 'svg') {
-          return DOMNamespaces.SVG
+          return Namespaces.SVG
         }
         if (
           parent.props.some(
@@ -51,49 +34,36 @@ export const parserOptions: ParserOptions = {
               a.name === 'encoding' &&
               a.value != null &&
               (a.value.content === 'text/html' ||
-                a.value.content === 'application/xhtml+xml')
+                a.value.content === 'application/xhtml+xml'),
           )
         ) {
-          ns = DOMNamespaces.HTML
+          ns = Namespaces.HTML
         }
       } else if (
         /^m(?:[ions]|text)$/.test(parent.tag) &&
         tag !== 'mglyph' &&
         tag !== 'malignmark'
       ) {
-        ns = DOMNamespaces.HTML
+        ns = Namespaces.HTML
       }
-    } else if (parent && ns === DOMNamespaces.SVG) {
+    } else if (parent && ns === Namespaces.SVG) {
       if (
         parent.tag === 'foreignObject' ||
         parent.tag === 'desc' ||
         parent.tag === 'title'
       ) {
-        ns = DOMNamespaces.HTML
+        ns = Namespaces.HTML
       }
     }
 
-    if (ns === DOMNamespaces.HTML) {
+    if (ns === Namespaces.HTML) {
       if (tag === 'svg') {
-        return DOMNamespaces.SVG
+        return Namespaces.SVG
       }
       if (tag === 'math') {
-        return DOMNamespaces.MATH_ML
+        return Namespaces.MATH_ML
       }
     }
     return ns
   },
-
-  // https://html.spec.whatwg.org/multipage/parsing.html#parsing-html-fragments
-  getTextMode({ tag, ns }: ElementNode): TextModes {
-    if (ns === DOMNamespaces.HTML) {
-      if (tag === 'textarea' || tag === 'title') {
-        return TextModes.RCDATA
-      }
-      if (isRawTextContainer(tag)) {
-        return TextModes.RAWTEXT
-      }
-    }
-    return TextModes.DATA
-  }
 }
diff --git a/packages/compiler-dom/src/runtimeHelpers.ts b/packages/compiler-dom/src/runtimeHelpers.ts
index 19c595ef6..c5349ad79 100644
--- a/packages/compiler-dom/src/runtimeHelpers.ts
+++ b/packages/compiler-dom/src/runtimeHelpers.ts
@@ -1,18 +1,30 @@
 import { registerRuntimeHelpers } from '@vue/compiler-core'
 
-export const V_MODEL_RADIO = Symbol(__DEV__ ? `vModelRadio` : ``)
-export const V_MODEL_CHECKBOX = Symbol(__DEV__ ? `vModelCheckbox` : ``)
-export const V_MODEL_TEXT = Symbol(__DEV__ ? `vModelText` : ``)
-export const V_MODEL_SELECT = Symbol(__DEV__ ? `vModelSelect` : ``)
-export const V_MODEL_DYNAMIC = Symbol(__DEV__ ? `vModelDynamic` : ``)
+export const V_MODEL_RADIO: unique symbol = Symbol(__DEV__ ? `vModelRadio` : ``)
+export const V_MODEL_CHECKBOX: unique symbol = Symbol(
+  __DEV__ ? `vModelCheckbox` : ``,
+)
+export const V_MODEL_TEXT: unique symbol = Symbol(__DEV__ ? `vModelText` : ``)
+export const V_MODEL_SELECT: unique symbol = Symbol(
+  __DEV__ ? `vModelSelect` : ``,
+)
+export const V_MODEL_DYNAMIC: unique symbol = Symbol(
+  __DEV__ ? `vModelDynamic` : ``,
+)
 
-export const V_ON_WITH_MODIFIERS = Symbol(__DEV__ ? `vOnModifiersGuard` : ``)
-export const V_ON_WITH_KEYS = Symbol(__DEV__ ? `vOnKeysGuard` : ``)
+export const V_ON_WITH_MODIFIERS: unique symbol = Symbol(
+  __DEV__ ? `vOnModifiersGuard` : ``,
+)
+export const V_ON_WITH_KEYS: unique symbol = Symbol(
+  __DEV__ ? `vOnKeysGuard` : ``,
+)
 
-export const V_SHOW = Symbol(__DEV__ ? `vShow` : ``)
+export const V_SHOW: unique symbol = Symbol(__DEV__ ? `vShow` : ``)
 
-export const TRANSITION = Symbol(__DEV__ ? `Transition` : ``)
-export const TRANSITION_GROUP = Symbol(__DEV__ ? `TransitionGroup` : ``)
+export const TRANSITION: unique symbol = Symbol(__DEV__ ? `Transition` : ``)
+export const TRANSITION_GROUP: unique symbol = Symbol(
+  __DEV__ ? `TransitionGroup` : ``,
+)
 
 registerRuntimeHelpers({
   [V_MODEL_RADIO]: `vModelRadio`,
@@ -24,5 +36,5 @@ registerRuntimeHelpers({
   [V_ON_WITH_KEYS]: `withKeys`,
   [V_SHOW]: `vShow`,
   [TRANSITION]: `Transition`,
-  [TRANSITION_GROUP]: `TransitionGroup`
+  [TRANSITION_GROUP]: `TransitionGroup`,
 })
diff --git a/packages/compiler-dom/src/transforms/Transition.ts b/packages/compiler-dom/src/transforms/Transition.ts
index 56d05ef03..f6cf968e3 100644
--- a/packages/compiler-dom/src/transforms/Transition.ts
+++ b/packages/compiler-dom/src/transforms/Transition.ts
@@ -1,12 +1,12 @@
 import {
-  NodeTransform,
-  NodeTypes,
+  type ComponentNode,
   ElementTypes,
-  ComponentNode,
-  IfBranchNode
+  type IfBranchNode,
+  type NodeTransform,
+  NodeTypes,
 } from '@vue/compiler-core'
 import { TRANSITION } from '../runtimeHelpers'
-import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const transformTransition: NodeTransform = (node, context) => {
   if (
@@ -28,9 +28,9 @@ export const transformTransition: NodeTransform = (node, context) => {
               {
                 start: node.children[0].loc.start,
                 end: node.children[node.children.length - 1].loc.end,
-                source: ''
-              }
-            )
+                source: '',
+              },
+            ),
           )
         }
 
@@ -43,8 +43,9 @@ export const transformTransition: NodeTransform = (node, context) => {
               node.props.push({
                 type: NodeTypes.ATTRIBUTE,
                 name: 'persisted',
+                nameLoc: node.loc,
                 value: undefined,
-                loc: node.loc
+                loc: node.loc,
               })
             }
           }
@@ -59,7 +60,7 @@ function hasMultipleChildren(node: ComponentNode | IfBranchNode): boolean {
   const children = (node.children = node.children.filter(
     c =>
       c.type !== NodeTypes.COMMENT &&
-      !(c.type === NodeTypes.TEXT && !c.content.trim())
+      !(c.type === NodeTypes.TEXT && !c.content.trim()),
   ))
   const child = children[0]
   return (
diff --git a/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts b/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts
index fa37b366f..81dc49849 100644
--- a/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts
+++ b/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts
@@ -1,4 +1,4 @@
-import { NodeTransform, NodeTypes, ElementTypes } from '@vue/compiler-core'
+import { ElementTypes, type NodeTransform, NodeTypes } from '@vue/compiler-core'
 import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const ignoreSideEffectTags: NodeTransform = (node, context) => {
@@ -11,8 +11,8 @@ export const ignoreSideEffectTags: NodeTransform = (node, context) => {
       context.onError(
         createDOMCompilerError(
           DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG,
-          node.loc
-        )
+          node.loc,
+        ),
       )
     context.removeNode()
   }
diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
index 67042b2d7..a608ea3c4 100644
--- a/packages/compiler-dom/src/transforms/stringifyStatic.ts
+++ b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -2,40 +2,43 @@
  * This module is Node-only.
  */
 import {
-  NodeTypes,
-  ElementNode,
-  TransformContext,
-  TemplateChildNode,
-  SimpleExpressionNode,
-  createCallExpression,
-  HoistTransform,
   CREATE_STATIC,
-  ExpressionNode,
+  type CacheExpression,
+  ConstantTypes,
+  type ElementNode,
   ElementTypes,
-  PlainElementNode,
-  JSChildNode,
-  TextCallNode,
-  ConstantTypes
+  type ExpressionNode,
+  type HoistTransform,
+  Namespaces,
+  NodeTypes,
+  type PlainElementNode,
+  type SimpleExpressionNode,
+  type TemplateChildNode,
+  type TextCallNode,
+  type TransformContext,
+  createCallExpression,
+  isStaticArgOf,
 } from '@vue/compiler-core'
 import {
-  isVoidTag,
+  escapeHtml,
+  isArray,
+  isBooleanAttr,
+  isKnownHtmlAttr,
+  isKnownMathMLAttr,
+  isKnownSvgAttr,
   isString,
   isSymbol,
-  isKnownHtmlAttr,
-  escapeHtml,
-  toDisplayString,
+  isVoidTag,
+  makeMap,
   normalizeClass,
   normalizeStyle,
   stringifyStyle,
-  makeMap,
-  isKnownSvgAttr,
-  isBooleanAttr
+  toDisplayString,
 } from '@vue/shared'
-import { DOMNamespaces } from '../parserOptions'
 
-export const enum StringifyThresholds {
+export enum StringifyThresholds {
   ELEMENT_WITH_BINDING_COUNT = 5,
-  NODE_COUNT = 20
+  NODE_COUNT = 20,
 }
 
 type StringifiableNode = PlainElementNode | TextCallNode
@@ -75,6 +78,14 @@ export const stringifyStatic: HoistTransform = (children, context, parent) => {
     return
   }
 
+  const isParentCached =
+    parent.type === NodeTypes.ELEMENT &&
+    parent.codegenNode &&
+    parent.codegenNode.type === NodeTypes.VNODE_CALL &&
+    parent.codegenNode.children &&
+    !isArray(parent.codegenNode.children) &&
+    parent.codegenNode.children.type === NodeTypes.JS_CACHE_EXPRESSION
+
   let nc = 0 // current node count
   let ec = 0 // current element with binding count
   const currentChunk: StringifiableNode[] = []
@@ -87,26 +98,46 @@ export const stringifyStatic: HoistTransform = (children, context, parent) => {
       // combine all currently eligible nodes into a single static vnode call
       const staticCall = createCallExpression(context.helper(CREATE_STATIC), [
         JSON.stringify(
-          currentChunk.map(node => stringifyNode(node, context)).join('')
+          currentChunk.map(node => stringifyNode(node, context)).join(''),
         ).replace(expReplaceRE, `" + $1 + "`),
         // the 2nd argument indicates the number of DOM nodes this static vnode
         // will insert / hydrate
-        String(currentChunk.length)
+        String(currentChunk.length),
       ])
-      // replace the first node's hoisted expression with the static vnode call
-      replaceHoist(currentChunk[0], staticCall, context)
 
-      if (currentChunk.length > 1) {
-        for (let i = 1; i < currentChunk.length; i++) {
-          // for the merged nodes, set their hoisted expression to null
-          replaceHoist(currentChunk[i], null, context)
+      const deleteCount = currentChunk.length - 1
+
+      if (isParentCached) {
+        // if the parent is cached, then `children` is also the value of the
+        // CacheExpression. Just replace the corresponding range in the cached
+        // list with staticCall.
+        children.splice(
+          currentIndex - currentChunk.length,
+          currentChunk.length,
+          // @ts-expect-error
+          staticCall,
+        )
+      } else {
+        // replace the first node's hoisted expression with the static vnode call
+        ;(currentChunk[0].codegenNode as CacheExpression).value = staticCall
+        if (currentChunk.length > 1) {
+          // remove merged nodes from children
+          children.splice(currentIndex - currentChunk.length + 1, deleteCount)
+          // also adjust index for the remaining cache items
+          const cacheIndex = context.cached.indexOf(
+            currentChunk[currentChunk.length - 1]
+              .codegenNode as CacheExpression,
+          )
+          if (cacheIndex > -1) {
+            for (let i = cacheIndex; i < context.cached.length; i++) {
+              const c = context.cached[i]
+              if (c) c.index -= deleteCount
+            }
+            context.cached.splice(cacheIndex - deleteCount + 1, deleteCount)
+          }
         }
-
-        // also remove merged nodes from children
-        const deleteCount = currentChunk.length - 1
-        children.splice(currentIndex - currentChunk.length + 1, deleteCount)
-        return deleteCount
       }
+      return deleteCount
     }
     return 0
   }
@@ -114,16 +145,15 @@ export const stringifyStatic: HoistTransform = (children, context, parent) => {
   let i = 0
   for (; i < children.length; i++) {
     const child = children[i]
-    const hoisted = getHoistedNode(child)
-    if (hoisted) {
-      // presence of hoisted means child must be a stringifiable node
-      const node = child as StringifiableNode
-      const result = analyzeNode(node)
+    const isCached = isParentCached || getCachedNode(child)
+    if (isCached) {
+      // presence of cached means child must be a stringifiable node
+      const result = analyzeNode(child as StringifiableNode)
       if (result) {
         // node is stringifiable, record state
         nc += result[0]
         ec += result[1]
-        currentChunk.push(node)
+        currentChunk.push(child as StringifiableNode)
         continue
       }
     }
@@ -140,39 +170,39 @@ export const stringifyStatic: HoistTransform = (children, context, parent) => {
   stringifyCurrentChunk(i)
 }
 
-const getHoistedNode = (node: TemplateChildNode) =>
-  ((node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.ELEMENT) ||
-    node.type == NodeTypes.TEXT_CALL) &&
-  node.codegenNode &&
-  node.codegenNode.type === NodeTypes.SIMPLE_EXPRESSION &&
-  node.codegenNode.hoisted
+const getCachedNode = (
+  node: TemplateChildNode,
+): CacheExpression | undefined => {
+  if (
+    ((node.type === NodeTypes.ELEMENT &&
+      node.tagType === ElementTypes.ELEMENT) ||
+      node.type === NodeTypes.TEXT_CALL) &&
+    node.codegenNode &&
+    node.codegenNode.type === NodeTypes.JS_CACHE_EXPRESSION
+  ) {
+    return node.codegenNode
+  }
+}
 
 const dataAriaRE = /^(data|aria)-/
-const isStringifiableAttr = (name: string, ns: DOMNamespaces) => {
+const isStringifiableAttr = (name: string, ns: Namespaces) => {
   return (
-    (ns === DOMNamespaces.HTML
+    (ns === Namespaces.HTML
       ? isKnownHtmlAttr(name)
-      : ns === DOMNamespaces.SVG
+      : ns === Namespaces.SVG
         ? isKnownSvgAttr(name)
-        : false) || dataAriaRE.test(name)
+        : ns === Namespaces.MATH_ML
+          ? isKnownMathMLAttr(name)
+          : false) || dataAriaRE.test(name)
   )
 }
 
-const replaceHoist = (
-  node: StringifiableNode,
-  replacement: JSChildNode | null,
-  context: TransformContext
-) => {
-  const hoistToReplace = (node.codegenNode as SimpleExpressionNode).hoisted!
-  context.hoists[context.hoists.indexOf(hoistToReplace)] = replacement
-}
-
-const isNonStringifiable = /*#__PURE__*/ makeMap(
-  `caption,thead,tr,th,tbody,td,tfoot,colgroup,col`
+const isNonStringifiable = /*@__PURE__*/ makeMap(
+  `caption,thead,tr,th,tbody,td,tfoot,colgroup,col`,
 )
 
 /**
- * for a hoisted node, analyze it and return:
+ * for a cached node, analyze it and return:
  * - false: bailed (contains non-stringifiable props or runtime constant)
  * - [nc, ec] where
  *   - nc is the number of nodes inside
@@ -200,6 +230,7 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
   // probably only need to check for most common case
   // i.e. non-phrasing-content tags inside `<p>`
   function walk(node: ElementNode): boolean {
+    const isOptionTag = node.tag === 'option' && node.ns === Namespaces.HTML
     for (let i = 0; i < node.props.length; i++) {
       const p = node.props[i]
       // bail on non-attr bindings
@@ -225,6 +256,16 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
         ) {
           return bail()
         }
+        // <option :value="1"> cannot be safely stringified
+        if (
+          isOptionTag &&
+          isStaticArgOf(p.arg, 'value') &&
+          p.exp &&
+          p.exp.ast &&
+          p.exp.ast.type !== 'StringLiteral'
+        ) {
+          return bail()
+        }
       }
     }
     for (let i = 0; i < node.children.length; i++) {
@@ -248,7 +289,7 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
 
 function stringifyNode(
   node: string | TemplateChildNode,
-  context: TransformContext
+  context: TransformContext,
 ): string {
   if (isString(node)) {
     return node
@@ -277,7 +318,7 @@ function stringifyNode(
 
 function stringifyElement(
   node: ElementNode,
-  context: TransformContext
+  context: TransformContext,
 ): string {
   let res = `<${node.tag}`
   let innerHTML = ''
@@ -316,7 +357,7 @@ function stringifyElement(
             evaluated = stringifyStyle(normalizeStyle(evaluated))
           }
           res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
-            evaluated
+            evaluated,
           )}"`
         }
       } else if (p.name === 'html') {
@@ -325,7 +366,7 @@ function stringifyElement(
         innerHTML = evaluateConstant(p.exp as SimpleExpressionNode)
       } else if (p.name === 'text') {
         innerHTML = escapeHtml(
-          toDisplayString(evaluateConstant(p.exp as SimpleExpressionNode))
+          toDisplayString(evaluateConstant(p.exp as SimpleExpressionNode)),
         )
       }
     }
@@ -369,7 +410,7 @@ function evaluateConstant(exp: ExpressionNode): string {
       } else if (c.type === NodeTypes.INTERPOLATION) {
         res += toDisplayString(evaluateConstant(c.content))
       } else {
-        res += evaluateConstant(c)
+        res += evaluateConstant(c as ExpressionNode)
       }
     })
     return res
diff --git a/packages/compiler-dom/src/transforms/transformStyle.ts b/packages/compiler-dom/src/transforms/transformStyle.ts
index d87b24160..405b6da47 100644
--- a/packages/compiler-dom/src/transforms/transformStyle.ts
+++ b/packages/compiler-dom/src/transforms/transformStyle.ts
@@ -1,10 +1,10 @@
 import {
-  NodeTransform,
+  ConstantTypes,
+  type NodeTransform,
   NodeTypes,
+  type SimpleExpressionNode,
+  type SourceLocation,
   createSimpleExpression,
-  SimpleExpressionNode,
-  SourceLocation,
-  ConstantTypes
 } from '@vue/compiler-core'
 import { parseStringStyle } from '@vue/shared'
 
@@ -25,7 +25,7 @@ export const transformStyle: NodeTransform = node => {
           arg: createSimpleExpression(`style`, true, p.loc),
           exp: parseInlineCSS(p.value.content, p.loc),
           modifiers: [],
-          loc: p.loc
+          loc: p.loc,
         }
       }
     })
@@ -34,13 +34,13 @@ export const transformStyle: NodeTransform = node => {
 
 const parseInlineCSS = (
   cssText: string,
-  loc: SourceLocation
+  loc: SourceLocation,
 ): SimpleExpressionNode => {
   const normalized = parseStringStyle(cssText)
   return createSimpleExpression(
     JSON.stringify(normalized),
     false,
     loc,
-    ConstantTypes.CAN_STRINGIFY
+    ConstantTypes.CAN_STRINGIFY,
   )
 }
diff --git a/packages/compiler-dom/src/transforms/vHtml.ts b/packages/compiler-dom/src/transforms/vHtml.ts
index e42451a58..d44ae508f 100644
--- a/packages/compiler-dom/src/transforms/vHtml.ts
+++ b/packages/compiler-dom/src/transforms/vHtml.ts
@@ -1,20 +1,20 @@
 import {
-  DirectiveTransform,
+  type DirectiveTransform,
   createObjectProperty,
-  createSimpleExpression
+  createSimpleExpression,
 } from '@vue/compiler-core'
-import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const transformVHtml: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
   if (!exp) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_HTML_NO_EXPRESSION, loc)
+      createDOMCompilerError(DOMErrorCodes.X_V_HTML_NO_EXPRESSION, loc),
     )
   }
   if (node.children.length) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_HTML_WITH_CHILDREN, loc)
+      createDOMCompilerError(DOMErrorCodes.X_V_HTML_WITH_CHILDREN, loc),
     )
     node.children.length = 0
   }
@@ -22,8 +22,8 @@ export const transformVHtml: DirectiveTransform = (dir, node, context) => {
     props: [
       createObjectProperty(
         createSimpleExpression(`innerHTML`, true, loc),
-        exp || createSimpleExpression('', true)
-      )
-    ]
+        exp || createSimpleExpression('', true),
+      ),
+    ],
   }
 }
diff --git a/packages/compiler-dom/src/transforms/vModel.ts b/packages/compiler-dom/src/transforms/vModel.ts
index bc1f6fcd2..5c28580b9 100644
--- a/packages/compiler-dom/src/transforms/vModel.ts
+++ b/packages/compiler-dom/src/transforms/vModel.ts
@@ -1,20 +1,20 @@
 import {
-  transformModel as baseTransform,
-  DirectiveTransform,
+  type DirectiveTransform,
   ElementTypes,
-  findProp,
   NodeTypes,
-  hasDynamicKeyVBind,
+  transformModel as baseTransform,
   findDir,
-  isStaticArgOf
+  findProp,
+  hasDynamicKeyVBind,
+  isStaticArgOf,
 } from '@vue/compiler-core'
-import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 import {
   V_MODEL_CHECKBOX,
+  V_MODEL_DYNAMIC,
   V_MODEL_RADIO,
   V_MODEL_SELECT,
   V_MODEL_TEXT,
-  V_MODEL_DYNAMIC
 } from '../runtimeHelpers'
 
 export const transformModel: DirectiveTransform = (dir, node, context) => {
@@ -28,8 +28,8 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     context.onError(
       createDOMCompilerError(
         DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT,
-        dir.arg.loc
-      )
+        dir.arg.loc,
+      ),
     )
   }
 
@@ -39,8 +39,8 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       context.onError(
         createDOMCompilerError(
           DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE,
-          value.loc
-        )
+          value.loc,
+        ),
       )
     }
   }
@@ -74,8 +74,8 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
               context.onError(
                 createDOMCompilerError(
                   DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT,
-                  dir.loc
-                )
+                  dir.loc,
+                ),
               )
               break
             default:
@@ -108,8 +108,8 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     context.onError(
       createDOMCompilerError(
         DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT,
-        dir.loc
-      )
+        dir.loc,
+      ),
     )
   }
 
@@ -120,7 +120,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       !(
         p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
         p.key.content === 'modelValue'
-      )
+      ),
   )
 
   return baseResult
diff --git a/packages/compiler-dom/src/transforms/vOn.ts b/packages/compiler-dom/src/transforms/vOn.ts
index e84bbd917..1bb576318 100644
--- a/packages/compiler-dom/src/transforms/vOn.ts
+++ b/packages/compiler-dom/src/transforms/vOn.ts
@@ -1,50 +1,47 @@
 import {
-  transformOn as baseTransform,
-  DirectiveTransform,
-  createObjectProperty,
-  createCallExpression,
-  createSimpleExpression,
-  NodeTypes,
-  createCompoundExpression,
-  ExpressionNode,
-  SimpleExpressionNode,
-  isStaticExp,
   CompilerDeprecationTypes,
-  TransformContext,
-  SourceLocation,
-  checkCompatEnabled
+  type DirectiveTransform,
+  type ExpressionNode,
+  NodeTypes,
+  type SimpleExpressionNode,
+  type SourceLocation,
+  type TransformContext,
+  transformOn as baseTransform,
+  checkCompatEnabled,
+  createCallExpression,
+  createCompoundExpression,
+  createObjectProperty,
+  createSimpleExpression,
+  isStaticExp,
 } from '@vue/compiler-core'
-import { V_ON_WITH_MODIFIERS, V_ON_WITH_KEYS } from '../runtimeHelpers'
-import { makeMap, capitalize } from '@vue/shared'
+import { V_ON_WITH_KEYS, V_ON_WITH_MODIFIERS } from '../runtimeHelpers'
+import { capitalize, makeMap } from '@vue/shared'
 
-const isEventOptionModifier = /*#__PURE__*/ makeMap(`passive,once,capture`)
-const isNonKeyModifier = /*#__PURE__*/ makeMap(
+const isEventOptionModifier = /*@__PURE__*/ makeMap(`passive,once,capture`)
+const isNonKeyModifier = /*@__PURE__*/ makeMap(
   // event propagation management
   `stop,prevent,self,` +
     // system modifiers + exact
     `ctrl,shift,alt,meta,exact,` +
     // mouse
-    `middle`
+    `middle`,
 )
 // left & right could be mouse or key modifiers based on event type
-const maybeKeyModifier = /*#__PURE__*/ makeMap('left,right')
-const isKeyboardEvent = /*#__PURE__*/ makeMap(
-  `onkeyup,onkeydown,onkeypress`,
-  true
-)
+const maybeKeyModifier = /*@__PURE__*/ makeMap('left,right')
+const isKeyboardEvent = /*@__PURE__*/ makeMap(`onkeyup,onkeydown,onkeypress`)
 
 const resolveModifiers = (
   key: ExpressionNode,
-  modifiers: string[],
+  modifiers: SimpleExpressionNode[],
   context: TransformContext,
-  loc: SourceLocation
+  loc: SourceLocation,
 ) => {
   const keyModifiers = []
   const nonKeyModifiers = []
   const eventOptionModifiers = []
 
   for (let i = 0; i < modifiers.length; i++) {
-    const modifier = modifiers[i]
+    const modifier = modifiers[i].content
 
     if (
       __COMPAT__ &&
@@ -52,7 +49,7 @@ const resolveModifiers = (
       checkCompatEnabled(
         CompilerDeprecationTypes.COMPILER_V_ON_NATIVE,
         context,
-        loc
+        loc,
       )
     ) {
       eventOptionModifiers.push(modifier)
@@ -64,7 +61,9 @@ const resolveModifiers = (
       // runtimeModifiers: modifiers that needs runtime guards
       if (maybeKeyModifier(modifier)) {
         if (isStaticExp(key)) {
-          if (isKeyboardEvent((key as SimpleExpressionNode).content)) {
+          if (
+            isKeyboardEvent((key as SimpleExpressionNode).content.toLowerCase())
+          ) {
             keyModifiers.push(modifier)
           } else {
             nonKeyModifiers.push(modifier)
@@ -86,7 +85,7 @@ const resolveModifiers = (
   return {
     keyModifiers,
     nonKeyModifiers,
-    eventOptionModifiers
+    eventOptionModifiers,
   }
 }
 
@@ -101,7 +100,7 @@ const transformClick = (key: ExpressionNode, event: string) => {
           key,
           `) === "onClick" ? "${event}" : (`,
           key,
-          `)`
+          `)`,
         ])
       : key
 }
@@ -126,18 +125,18 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
     if (nonKeyModifiers.length) {
       handlerExp = createCallExpression(context.helper(V_ON_WITH_MODIFIERS), [
         handlerExp,
-        JSON.stringify(nonKeyModifiers)
+        JSON.stringify(nonKeyModifiers),
       ])
     }
 
     if (
       keyModifiers.length &&
       // if event name is dynamic, always wrap with keys guard
-      (!isStaticExp(key) || isKeyboardEvent(key.content))
+      (!isStaticExp(key) || isKeyboardEvent(key.content.toLowerCase()))
     ) {
       handlerExp = createCallExpression(context.helper(V_ON_WITH_KEYS), [
         handlerExp,
-        JSON.stringify(keyModifiers)
+        JSON.stringify(keyModifiers),
       ])
     }
 
@@ -149,7 +148,7 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
     }
 
     return {
-      props: [createObjectProperty(key, handlerExp)]
+      props: [createObjectProperty(key, handlerExp)],
     }
   })
 }
diff --git a/packages/compiler-dom/src/transforms/vShow.ts b/packages/compiler-dom/src/transforms/vShow.ts
index 7fe76d0ba..37c077a0c 100644
--- a/packages/compiler-dom/src/transforms/vShow.ts
+++ b/packages/compiler-dom/src/transforms/vShow.ts
@@ -1,17 +1,17 @@
-import { DirectiveTransform } from '@vue/compiler-core'
-import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import type { DirectiveTransform } from '@vue/compiler-core'
+import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 import { V_SHOW } from '../runtimeHelpers'
 
 export const transformShow: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
   if (!exp) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION, loc)
+      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION, loc),
     )
   }
 
   return {
     props: [],
-    needRuntime: context.helper(V_SHOW)
+    needRuntime: context.helper(V_SHOW),
   }
 }
diff --git a/packages/compiler-dom/src/transforms/vText.ts b/packages/compiler-dom/src/transforms/vText.ts
index 77bf0032b..de46e40ff 100644
--- a/packages/compiler-dom/src/transforms/vText.ts
+++ b/packages/compiler-dom/src/transforms/vText.ts
@@ -1,23 +1,23 @@
 import {
-  DirectiveTransform,
-  createObjectProperty,
-  createSimpleExpression,
+  type DirectiveTransform,
   TO_DISPLAY_STRING,
   createCallExpression,
-  getConstantType
+  createObjectProperty,
+  createSimpleExpression,
+  getConstantType,
 } from '@vue/compiler-core'
-import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const transformVText: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
   if (!exp) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_NO_EXPRESSION, loc)
+      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_NO_EXPRESSION, loc),
     )
   }
   if (node.children.length) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_WITH_CHILDREN, loc)
+      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_WITH_CHILDREN, loc),
     )
     node.children.length = 0
   }
@@ -31,10 +31,10 @@ export const transformVText: DirectiveTransform = (dir, node, context) => {
             : createCallExpression(
                 context.helperString(TO_DISPLAY_STRING),
                 [exp],
-                loc
+                loc,
               )
-          : createSimpleExpression('', true)
-      )
-    ]
+          : createSimpleExpression('', true),
+      ),
+    ],
   }
 }
diff --git a/packages/compiler-dom/src/transforms/validateHtmlNesting.ts b/packages/compiler-dom/src/transforms/validateHtmlNesting.ts
new file mode 100644
index 000000000..540c0c258
--- /dev/null
+++ b/packages/compiler-dom/src/transforms/validateHtmlNesting.ts
@@ -0,0 +1,27 @@
+import {
+  type CompilerError,
+  ElementTypes,
+  type NodeTransform,
+  NodeTypes,
+} from '@vue/compiler-core'
+import { isValidHTMLNesting } from '../htmlNesting'
+
+export const validateHtmlNesting: NodeTransform = (node, context) => {
+  if (
+    node.type === NodeTypes.ELEMENT &&
+    node.tagType === ElementTypes.ELEMENT &&
+    context.parent &&
+    context.parent.type === NodeTypes.ELEMENT &&
+    context.parent.tagType === ElementTypes.ELEMENT &&
+    !isValidHTMLNesting(context.parent.tag, node.tag)
+  ) {
+    const error = new SyntaxError(
+      `<${node.tag}> cannot be child of <${context.parent.tag}>, ` +
+        'according to HTML specifications. ' +
+        'This can cause hydration errors or ' +
+        'potentially disrupt future functionality.',
+    ) as CompilerError
+    error.loc = node.loc
+    context.onWarn(error)
+  }
+}
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index b0076294e..7fcc1d395 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -14,12 +14,13 @@ return { a }
 `;
 
 exports[`SFC analyze <script> bindings > auto name inference > do not overwrite manual name (call) 1`] = `
-"import { defineComponent } from 'vue'
+"
+        import { defineComponent } from 'vue'
         const __default__ = defineComponent({
           name: 'Baz'
         })
         
-export default /*#__PURE__*/Object.assign(__default__, {
+export default /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 const a = 1
@@ -30,11 +31,12 @@ return { a, defineComponent }
 `;
 
 exports[`SFC analyze <script> bindings > auto name inference > do not overwrite manual name (object) 1`] = `
-"const __default__ = {
+"
+        const __default__ = {
           name: 'Baz'
         }
         
-export default /*#__PURE__*/Object.assign(__default__, {
+export default /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 const a = 1
@@ -45,12 +47,13 @@ return { a }
 `;
 
 exports[`SFC compile <script setup> > <script> and <script setup> co-usage > export call expression as default 1`] = `
-"function fn() {
-        return \\"hello, world\\";
+"
+      function fn() {
+        return "hello, world";
       }
       const __default__ = fn();
       
-export default /*#__PURE__*/Object.assign(__default__, {
+export default /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -63,7 +66,8 @@ return { fn }
 `;
 
 exports[`SFC compile <script setup> > <script> and <script setup> co-usage > keep original semi style 1`] = `
-"export default {
+"
+export default {
   props: ['item'],
   emits: ['change'],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -87,7 +91,7 @@ exports[`SFC compile <script setup> > <script> and <script setup> co-usage > scr
 
       const __default__ = {}
       
-export default /*#__PURE__*/Object.assign(__default__, {
+export default /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -106,7 +110,7 @@ exports[`SFC compile <script setup> > <script> and <script setup> co-usage > scr
       const __default__ = {}
       
 
-export default /*#__PURE__*/Object.assign(__default__, {
+export default /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -123,11 +127,11 @@ exports[`SFC compile <script setup> > <script> and <script setup> co-usage > scr
 import { x } from './x'
       
       const __default__ = {
-        name: \\"test\\"
+        name: "test"
       }
       
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   ...__default__,
   setup(__props, { expose: __expose }) {
   __expose();
@@ -150,7 +154,7 @@ exports[`SFC compile <script setup> > <script> and <script setup> co-usage > scr
 const __default__ = def
 
 
-export default /*#__PURE__*/Object.assign(__default__, {
+export default /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -170,7 +174,7 @@ exports[`SFC compile <script setup> > <script> and <script setup> co-usage > spa
           some:'option'
         }
         
-export default /*#__PURE__*/Object.assign(__default__, {
+export default /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -190,7 +194,7 @@ exports[`SFC compile <script setup> > <script> and <script setup> co-usage > spa
           some:'option'
         }
         
-export default /*#__PURE__*/Object.assign(__default__, {
+export default /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -515,27 +519,28 @@ return {  }
 `;
 
 exports[`SFC compile <script setup> > async/await detection > ref 1`] = `
-"import { withAsyncContext as _withAsyncContext, ref as _ref } from 'vue'
+"import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
   async setup(__props, { expose: __expose }) {
   __expose();
 
 let __temp, __restore
-let a = _ref(1 + ((
+let a = ref(1 + ((
   ([__temp,__restore] = _withAsyncContext(() => foo)),
   __temp = await __temp,
   __restore(),
   __temp
 )))
-return { a }
+return { get a() { return a }, set a(v) { a = v } }
 }
 
 }"
 `;
 
 exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 1`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
   __expose();
 async function foo() { await bar }
@@ -546,7 +551,8 @@ return { foo }
 `;
 
 exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 2`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
   __expose();
 const foo = async () => { await bar }
@@ -557,7 +563,8 @@ return { foo }
 `;
 
 exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 3`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
   __expose();
 const obj = { async method() { await bar }}
@@ -568,7 +575,8 @@ return { obj }
 `;
 
 exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 4`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
   __expose();
 const cls = class Foo { async method() { await bar }}
@@ -618,7 +626,8 @@ return { a }
 `;
 
 exports[`SFC compile <script setup> > binding analysis for destructure 1`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -630,145 +639,6 @@ return { foo, bar, baz, y, z }
 }"
 `;
 
-exports[`SFC compile <script setup> > dev mode import usage check > TS annotations 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { Foo, Bar, Baz, Qux, Fred } from './x'
-        const a = 1
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        function b() {}
-        
-return { a, b, get Baz() { return Baz } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > attribute expressions 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { bar, baz } from './x'
-        const cond = true
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { cond, get bar() { return bar }, get baz() { return baz } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > components 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { FooBar, FooBaz, FooQux, foo } from './x'
-        const fooBar: FooBar = 1
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { fooBar, get FooBaz() { return FooBaz }, get FooQux() { return FooQux }, get foo() { return foo } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > directive 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { vMyDir } from './x'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get vMyDir() { return vMyDir } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > dynamic arguments 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { FooBar, foo, bar, unused, baz } from './x'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > js template string interpolations 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { VAR, VAR2, VAR3 } from './x'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get VAR() { return VAR }, get VAR3() { return VAR3 } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > last tag 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { FooBaz, Last } from './x'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get FooBaz() { return FooBaz }, get Last() { return Last } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > template ref 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { foo, bar, Baz } from './foo'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-          
-return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > vue interpolations 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { x, y, z, x$y } from './x'
-      
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-      
-return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }
-}
-
-})"
-`;
-
 exports[`SFC compile <script setup> > errors > should allow defineProps/Emit() referencing imported binding 1`] = `
 "import { bar } from './bar'
         
@@ -818,23 +688,29 @@ return { bar }
 `;
 
 exports[`SFC compile <script setup> > imports > dedupe between user & helper 1`] = `
-"import { ref as _ref } from 'vue'
-import { ref } from 'vue'
+"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
+import { useCssVars, ref } from 'vue'
       
 export default {
   setup(__props, { expose: __expose }) {
   __expose();
 
-      let foo = _ref(1)
+_useCssVars(_ctx => ({
+  "xxxxxxxx-msg": (msg.value)
+}))
+
+      const msg = ref()
       
-return { foo, ref }
+return { msg, useCssVars, ref }
 }
 
 }"
 `;
 
 exports[`SFC compile <script setup> > imports > import dedupe between <script> and <script setup> 1`] = `
-"import { x } from './x'
+"
+        
+        import { x } from './x'
         
 export default {
   setup(__props, { expose: __expose }) {
@@ -898,7 +774,9 @@ return { ref }
 `;
 
 exports[`SFC compile <script setup> > imports > should support module string names syntax 1`] = `
-"import { \\"😏\\" as foo } from './foo'
+"
+      
+        import { "😏" as foo } from './foo'
       
 export default {
   setup(__props, { expose: __expose }) {
@@ -912,7 +790,7 @@ return { get foo() { return foo } }
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > avoid unref() when necessary 1`] = `
-"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import { ref } from 'vue'
         import Foo, { bar } from './Foo.vue'
@@ -936,8 +814,8 @@ return (_ctx, _cache) => {
       ]),
       _: 1 /* STABLE */
     }),
-    _createElementVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */),
-    _createTextVNode(\\" \\" + _toDisplayString(tree.foo()), 1 /* TEXT */)
+    _createElementVNode("div", { onClick: fn }, _toDisplayString(count.value) + " " + _toDisplayString(constant) + " " + _toDisplayString(_unref(maybe)) + " " + _toDisplayString(_unref(lett)) + " " + _toDisplayString(_unref(other)), 1 /* TEXT */),
+    _createTextVNode(" " + _toDisplayString(tree.foo()), 1 /* TEXT */)
   ], 64 /* STABLE_FRAGMENT */))
 }
 }
@@ -946,7 +824,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > referencing scope components and directives 1`] = `
-"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import ChildComp from './Child.vue'
         import SomeOtherComp from './Other.vue'
@@ -958,7 +836,7 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
+    _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
       [_unref(vMyDir)]
     ]),
     _createVNode(ChildComp),
@@ -971,9 +849,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = `
-"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
-
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */)
+"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import { ref } from 'vue'
         
@@ -984,8 +860,8 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"div\\", null, _toDisplayString(count.value), 1 /* TEXT */),
-    _hoisted_1
+    _createElementVNode("div", null, _toDisplayString(count.value), 1 /* TEXT */),
+    _cache[0] || (_cache[0] = _createElementVNode("div", null, "static", -1 /* HOISTED */))
   ], 64 /* STABLE_FRAGMENT */))
 }
 }
@@ -994,7 +870,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > ssr codegen 1`] = `
-"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from \\"vue/server-renderer\\"
+"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "vue/server-renderer"
 
 import { ref } from 'vue'
         
@@ -1004,11 +880,13 @@ export default {
 
         const count = ref(0)
         const style = { color: 'red' }
+        const height = ref(0)
         
 return (_ctx, _push, _parent, _attrs) => {
   const _cssVars = { style: {
-  \\"--xxxxxxxx-count\\": (count.value),
-  \\"--xxxxxxxx-style\\\\\\\\.color\\": (style.color)
+  "--xxxxxxxx-count": (count.value),
+  "--xxxxxxxx-style\\\\.color": (style.color),
+  "--xxxxxxxx-height\\\\ \\\\+\\\\ \\\\\\"px\\\\\\"": (height.value + "px")
 }}
   _push(\`<!--[--><div\${
     _ssrRenderAttrs(_cssVars)
@@ -1024,7 +902,7 @@ return (_ctx, _push, _parent, _attrs) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > template assignment expression codegen 1`] = `
-"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import { ref } from 'vue'
         
@@ -1038,28 +916,28 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[0] || (_cache[0] = $event => (count.value = 1))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[1] || (_cache[1] = $event => (maybe.value = count.value))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[2] || (_cache[2] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[3] || (_cache[3] = $event => (_isRef(v) ? v.value += 1 : v += 1))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[5] || (_cache[5] = () => {
               let a = '' + _unref(lett)
               _isRef(v) ? v.value = a : v = a
            })
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[6] || (_cache[6] = () => {
               // nested scopes
               (()=>{
@@ -1081,7 +959,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > template destructure assignment codegen 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import { ref } from 'vue'
         
@@ -1095,13 +973,13 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[0] || (_cache[0] = $event => (({ count: count.value } = val)))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[1] || (_cache[1] = $event => ([maybe.value] = val))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[2] || (_cache[2] = $event => (({ lett: lett } = val)))
     })
   ], 64 /* STABLE_FRAGMENT */))
@@ -1112,7 +990,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > template update expression codegen 1`] = `
-"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import { ref } from 'vue'
         
@@ -1125,22 +1003,22 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[0] || (_cache[0] = $event => (count.value++))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[1] || (_cache[1] = $event => (--count.value))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[2] || (_cache[2] = $event => (maybe.value++))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[3] || (_cache[3] = $event => (--maybe.value))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[4] || (_cache[4] = $event => (_isRef(lett) ? lett.value++ : lett++))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[5] || (_cache[5] = $event => (_isRef(lett) ? --lett.value : --lett))
     })
   ], 64 /* STABLE_FRAGMENT */))
@@ -1150,8 +1028,28 @@ return (_ctx, _cache) => {
 }"
 `;
 
+exports[`SFC compile <script setup> > inlineTemplate mode > unref + new expression 1`] = `
+"import { unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+import Foo from './foo'
+        
+export default {
+  setup(__props) {
+
+        
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode("div", null, _toDisplayString(new (_unref(Foo))()), 1 /* TEXT */),
+    _createElementVNode("div", null, _toDisplayString(new (_unref(Foo)).Bar()), 1 /* TEXT */)
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > inlineTemplate mode > v-model codegen 1`] = `
-"import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import { ref } from 'vue'
         
@@ -1164,18 +1062,18 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _withDirectives(_createElementVNode(\\"input\\", {
-      \\"onUpdate:modelValue\\": _cache[0] || (_cache[0] = $event => ((count).value = $event))
+    _withDirectives(_createElementVNode("input", {
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((count).value = $event))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, count.value]
     ]),
-    _withDirectives(_createElementVNode(\\"input\\", {
-      \\"onUpdate:modelValue\\": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? (maybe).value = $event : null))
+    _withDirectives(_createElementVNode("input", {
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? (maybe).value = $event : null))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, _unref(maybe)]
     ]),
-    _withDirectives(_createElementVNode(\\"input\\", {
-      \\"onUpdate:modelValue\\": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? (lett).value = $event : lett = $event))
+    _withDirectives(_createElementVNode("input", {
+      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? (lett).value = $event : lett = $event))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, _unref(lett)]
     ])
@@ -1186,8 +1084,32 @@ return (_ctx, _cache) => {
 }"
 `;
 
+exports[`SFC compile <script setup> > inlineTemplate mode > v-model w/ newlines codegen 1`] = `
+"import { unref as _unref, isRef as _isRef, vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  setup(__props) {
+
+        const count = ref(0)
+        
+return (_ctx, _cache) => {
+  return _withDirectives((_openBlock(), _createElementBlock("input", {
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (_isRef(count) ? (count).value = $event : null))
+  }, null, 512 /* NEED_PATCH */)), [
+    [_vModelText, 
+          _unref(count)
+          ]
+  ])
+}
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > inlineTemplate mode > with defineExpose() 1`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
 
         const count = ref(0)
@@ -1243,7 +1165,7 @@ exports[`SFC compile <script setup> > with TypeScript > const Enum 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 const enum Foo { A = 123 }
         
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1259,7 +1181,7 @@ exports[`SFC compile <script setup> > with TypeScript > hoist type declarations
 export interface Foo {}
         type Bar = {}
       
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1275,7 +1197,7 @@ exports[`SFC compile <script setup> > with TypeScript > import type 1`] = `
 import type { Foo } from './main.ts'
         import { type Bar, Baz } from './main.ts'
         
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1290,7 +1212,7 @@ exports[`SFC compile <script setup> > with TypeScript > runtime Enum 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 enum Foo { A = 123 }
         
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1304,11 +1226,11 @@ return { Foo }
 exports[`SFC compile <script setup> > with TypeScript > runtime Enum in normal script 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-          export enum D { D = \\"D\\" }
-          const enum C { C = \\"C\\" }
-          enum B { B = \\"B\\" }
+          export enum D { D = "D" }
+          const enum C { C = "C" }
+          enum B { B = "B" }
         
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1320,6 +1242,21 @@ return { D, C, B, Foo }
 })"
 `;
 
+exports[`SFC compile <script setup> > with TypeScript > with generic attribute 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+type Bar = {}
+      
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        
+return {  }
+}
+
+})"
+`;
+
 exports[`SFC genDefaultAs > <script setup> only 1`] = `
 "const a = 1
       
@@ -1338,7 +1275,7 @@ exports[`SFC genDefaultAs > <script setup> only w/ ts 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 const a = 1
       
-const _sfc_ = /*#__PURE__*/_defineComponent({
+const _sfc_ = /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1350,9 +1287,10 @@ return { a }
 `;
 
 exports[`SFC genDefaultAs > <script> + <script setup> 1`] = `
-"const __default__ = {}
+"
+      const __default__ = {}
       
-const _sfc_ = /*#__PURE__*/Object.assign(__default__, {
+const _sfc_ = /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1365,9 +1303,10 @@ return { a }
 `;
 
 exports[`SFC genDefaultAs > <script> + <script setup> 2`] = `
-"const __default__ = {}
+"
+      const __default__ = {}
       
-const _sfc_ = /*#__PURE__*/Object.assign(__default__, {
+const _sfc_ = /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1384,7 +1323,7 @@ exports[`SFC genDefaultAs > <script> + <script setup> w/ ts 1`] = `
 
       const __default__ = {}
       
-const _sfc_ = /*#__PURE__*/_defineComponent({
+const _sfc_ = /*@__PURE__*/_defineComponent({
   ...__default__,
   setup(__props, { expose: __expose }) {
   __expose();
@@ -1410,7 +1349,7 @@ exports[`SFC genDefaultAs > normal <script> w/ cssVars 1`] = `
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-x\\": (_ctx.x)
+  "xxxxxxxx-x": (_ctx.x)
 }))}
 const __setup__ = _sfc_.setup
 _sfc_.setup = __setup__
@@ -1418,3 +1357,52 @@ _sfc_.setup = __setup__
   : __injectCSSVars__
 "
 `;
+
+exports[`SFC genDefaultAs > parser plugins > import attributes (user override for deprecated syntax) 1`] = `
+"import { foo } from './foo.js' assert { type: 'foobar' }
+        
+export default {
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        
+return { get foo() { return foo } }
+}
+
+}"
+`;
+
+exports[`SFC genDefaultAs > parser plugins > import attributes 1`] = `
+"import { foo } from './foo.js' with { type: 'foobar' }
+        
+export default {
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        
+return { get foo() { return foo } }
+}
+
+}"
+`;
+
+exports[`compileScript > should care about runtimeModuleName 1`] = `
+"import { withAsyncContext as _withAsyncContext } from "npm:vue"
+
+export default {
+  async setup(__props, { expose: __expose }) {
+  __expose();
+
+let __temp, __restore
+
+        ;(
+  ([__temp,__restore] = _withAsyncContext(() => Promise.resolve(1))),
+  await __temp,
+  __restore()
+)
+      
+return {  }
+}
+
+}"
+`;
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
index 35b87c4ec..784ff1bf1 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`dynamic v-on + static v-on should merged 1`] = `
-"import { toHandlerKey as _toHandlerKey, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { toHandlerKey as _toHandlerKey, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"input\\", _mergeProps({
+  return (_openBlock(), _createElementBlock("input", _mergeProps({
     onBlur: _cache[0] || (_cache[0] = (...args) => (_ctx.onBlur && _ctx.onBlur(...args)))
   }, {
     [_toHandlerKey(_ctx.validateEvent)]: _cache[1] || (_cache[1] = (...args) => (_ctx.onValidateEvent && _ctx.onValidateEvent(...args)))
@@ -13,19 +13,19 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`should not hoist srcset URLs in SSR mode 1`] = `
-"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
-import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
+"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
+import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
 import _imports_0 from './img/foo.svg'
 import _imports_1 from './img/bar.svg'
 
 
 export function ssrRender(_ctx, _push, _parent, _attrs) {
-  const _component_router_link = _resolveComponent(\\"router-link\\")
+  const _component_router_link = _resolveComponent("router-link")
 
   _push(\`<!--[--><picture><source\${
-    _ssrRenderAttr(\\"srcset\\", _imports_0)
+    _ssrRenderAttr("srcset", _imports_0)
   }><img\${
-    _ssrRenderAttr(\\"src\\", _imports_0)
+    _ssrRenderAttr("src", _imports_0)
   }></picture>\`)
   _push(_ssrRenderComponent(_component_router_link, null, {
     default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -33,21 +33,21 @@ export function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<picture\${
           _scopeId
         }><source\${
-          _ssrRenderAttr(\\"srcset\\", _imports_1)
+          _ssrRenderAttr("srcset", _imports_1)
         }\${
           _scopeId
         }><img\${
-          _ssrRenderAttr(\\"src\\", _imports_1)
+          _ssrRenderAttr("src", _imports_1)
         }\${
           _scopeId
         }></picture>\`)
       } else {
         return [
-          _createVNode(\\"picture\\", null, [
-            _createVNode(\\"source\\", {
+          _createVNode("picture", null, [
+            _createVNode("source", {
               srcset: _imports_1
             }),
-            _createVNode(\\"img\\", { src: _imports_1 })
+            _createVNode("img", { src: _imports_1 })
           ])
         ]
       }
@@ -58,28 +58,9 @@ export function ssrRender(_ctx, _push, _parent, _attrs) {
 }"
 `;
 
-exports[`source map 1`] = `
-{
-  "mappings": ";;;wBACE,oBAA8B;IAAzB,oBAAmB,4BAAbA,WAAM",
-  "names": [
-    "render",
-  ],
-  "sources": [
-    "example.vue",
-  ],
-  "sourcesContent": [
-    "
-  <div><p>{{ render }}</p></div>
-",
-  ],
-  "version": 3,
-}
-`;
-
 exports[`template errors 1`] = `
 [
   [SyntaxError: Error parsing JavaScript expression: Unexpected token (1:3)],
-  [SyntaxError: v-bind is missing expression.],
   [SyntaxError: v-model can only be used on <input>, <textarea> and <select> elements.],
 ]
 `;
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
index 1e99f6087..ec3f79f86 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`CSS vars injection > codegen > <script> w/ default export 1`] = `
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (_ctx.color)
+  "xxxxxxxx-color": (_ctx.color)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -23,7 +23,7 @@ exports[`CSS vars injection > codegen > <script> w/ default export in strings/co
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (_ctx.color)
+  "xxxxxxxx-color": (_ctx.color)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -39,7 +39,7 @@ const __default__ = {}
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (_ctx.color)
+  "xxxxxxxx-color": (_ctx.color)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -57,7 +57,7 @@ export default {
   __expose();
 
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-width\\": (width)
+  "xxxxxxxx-width": (width)
 }))
 
 return { color, width }
@@ -74,10 +74,10 @@ export default {
   __expose();
 
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-foo\\": (_unref(foo)),
-  \\"xxxxxxxx-foo\\\\ \\\\+\\\\ \\\\'px\\\\'\\": (_unref(foo) + 'px'),
-  \\"xxxxxxxx-\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\ \\\\/\\\\ 2\\\\ \\\\+\\\\ \\\\'px\\\\'\\": ((_unref(a) + _unref(b)) / 2 + 'px'),
-  \\"xxxxxxxx-\\\\(\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\)\\\\ \\\\/\\\\ \\\\(2\\\\ \\\\*\\\\ a\\\\)\\": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
+  "xxxxxxxx-foo": (_unref(foo)),
+  "xxxxxxxx-foo\\ \\+\\ \\'px\\'": (_unref(foo) + 'px'),
+  "xxxxxxxx-\\(a\\ \\+\\ b\\)\\ \\/\\ 2\\ \\+\\ \\'px\\'": ((_unref(a) + _unref(b)) / 2 + 'px'),
+  "xxxxxxxx-\\(\\(a\\ \\+\\ b\\)\\)\\ \\/\\ \\(2\\ \\*\\ a\\)": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
 }))
 
         let a = 100
@@ -98,7 +98,7 @@ export default {
   __expose();
 
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (color)
+  "xxxxxxxx-color": (color)
 }))
 
 return { color }
@@ -116,7 +116,7 @@ export default {
   __expose();
 
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (color)
+  "xxxxxxxx-color": (color)
 }))
 
         
@@ -132,8 +132,8 @@ const __default__ = {}
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (_ctx.color),
-  \\"xxxxxxxx-font\\\\.size\\": (_ctx.font.size)
+  "xxxxxxxx-color": (_ctx.color),
+  "xxxxxxxx-font\\.size": (_ctx.font.size)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -156,9 +156,9 @@ export default {
   __expose();
 
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (color),
-  \\"xxxxxxxx-size\\": (size.value),
-  \\"xxxxxxxx-foo\\": (__props.foo)
+  "xxxxxxxx-color": (color),
+  "xxxxxxxx-size": (size.value),
+  "xxxxxxxx-foo": (__props.foo)
 }))
 
         const size = ref('10px')
@@ -183,7 +183,7 @@ exports[`CSS vars injection > w/ normal <script> binding analysis 1`] = `
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-size\\": (_ctx.size)
+  "xxxxxxxx-size": (_ctx.size)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
index 1d238adbe..85ae6194a 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
@@ -1,125 +1,120 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler sfc: transform asset url > should allow for full base URLs, with paths 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/src/logo.png\\" }))
+  return (_openBlock(), _createElementBlock("img", { src: "http://localhost:3000/src/logo.png" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > should allow for full base URLs, without paths 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/logo.png\\" }))
+  return (_openBlock(), _createElementBlock("img", { src: "http://localhost:3000/logo.png" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > should allow for full base URLs, without port 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost/logo.png\\" }))
+  return (_openBlock(), _createElementBlock("img", { src: "http://localhost/logo.png" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > should allow for full base URLs, without protocol 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"//localhost/logo.png\\" }))
+  return (_openBlock(), _createElementBlock("img", { src: "//localhost/logo.png" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > support uri fragment 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from '@svg/file.svg'
 
 
 const _hoisted_1 = _imports_0 + '#fragment'
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"use\\", { href: _hoisted_1 }, null, -1 /* HOISTED */)
-const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"use\\", { href: _hoisted_1 }, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _hoisted_2,
-    _hoisted_3
+    _cache[0] || (_cache[0] = _createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)),
+    _cache[1] || (_cache[1] = _createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */))
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > support uri is empty 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"use\\", { href: '' }))
+  return (_openBlock(), _createElementBlock("use", { href: '' }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > transform assetUrls 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
 import _imports_1 from 'fixtures/logo.png'
 
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"img\\", { src: _imports_0 }),
-    _createElementVNode(\\"img\\", { src: _imports_1 }),
-    _createElementVNode(\\"img\\", { src: _imports_1 }),
-    _createElementVNode(\\"img\\", { src: \\"http://example.com/fixtures/logo.png\\" }),
-    _createElementVNode(\\"img\\", { src: \\"//example.com/fixtures/logo.png\\" }),
-    _createElementVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" }),
-    _createElementVNode(\\"img\\", { src: \\"data:image/png;base64,i\\" })
+    _createElementVNode("img", { src: _imports_0 }),
+    _createElementVNode("img", { src: _imports_1 }),
+    _createElementVNode("img", { src: _imports_1 }),
+    _createElementVNode("img", { src: "http://example.com/fixtures/logo.png" }),
+    _createElementVNode("img", { src: "//example.com/fixtures/logo.png" }),
+    _createElementVNode("img", { src: "/fixtures/logo.png" }),
+    _createElementVNode("img", { src: "data:image/png;base64,i" })
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > transform with stringify 1`] = `
-"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './bar.png'
 import _imports_1 from '/bar.png'
 
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<img src=\\\\\\"\\" + _imports_0 + \\"\\\\\\"><img src=\\\\\\"\\" + _imports_1 + \\"\\\\\\"><img src=\\\\\\"https://foo.bar/baz.png\\\\\\"><img src=\\\\\\"//foo.bar/baz.png\\\\\\"><img src=\\\\\\"\\" + _imports_0 + \\"\\\\\\">\\", 5)
-const _hoisted_6 = [
-  _hoisted_1
-]
-
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_6))
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createStaticVNode("<img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\">", 5)
+  ])))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > with explicit base 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from 'bar.png'
 import _imports_1 from '@theme/bar.png'
 
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"img\\", { src: \\"/foo/bar.png\\" }),
-    _createElementVNode(\\"img\\", { src: \\"bar.png\\" }),
-    _createElementVNode(\\"img\\", { src: _imports_0 }),
-    _createElementVNode(\\"img\\", { src: _imports_1 })
+    _createElementVNode("img", { src: "/foo/bar.png" }),
+    _createElementVNode("img", { src: "bar.png" }),
+    _createElementVNode("img", { src: _imports_0 }),
+    _createElementVNode("img", { src: _imports_1 })
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > with includeAbsolute: true 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './bar.png'
 import _imports_1 from '/bar.png'
 
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"img\\", { src: _imports_0 }),
-    _createElementVNode(\\"img\\", { src: _imports_1 }),
-    _createElementVNode(\\"img\\", { src: \\"https://foo.bar/baz.png\\" }),
-    _createElementVNode(\\"img\\", { src: \\"//foo.bar/baz.png\\" })
+    _createElementVNode("img", { src: _imports_0 }),
+    _createElementVNode("img", { src: _imports_1 }),
+    _createElementVNode("img", { src: "https://foo.bar/baz.png" }),
+    _createElementVNode("img", { src: "//foo.bar/baz.png" })
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
index 49711504c..81cdb51b9 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
@@ -1,25 +1,23 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler sfc: transform srcset > srcset w/ explicit base option 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from '@/logo.png'
 
 
 const _hoisted_1 = _imports_0 + ', ' + _imports_0 + ' 2x'
-const _hoisted_2 = _imports_0 + ' 1x, ' + \\"/foo/logo.png\\" + ' 2x'
-const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"img\\", { srcset: _hoisted_1 }, null, -1 /* HOISTED */)
-const _hoisted_4 = /*#__PURE__*/_createElementVNode(\\"img\\", { srcset: _hoisted_2 }, null, -1 /* HOISTED */)
+const _hoisted_2 = _imports_0 + ' 1x, ' + "/foo/logo.png" + ' 2x'
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _hoisted_3,
-    _hoisted_4
+    _cache[0] || (_cache[0] = _createElementVNode("img", { srcset: _hoisted_1 }, null, -1 /* HOISTED */)),
+    _cache[1] || (_cache[1] = _createElementVNode("img", { srcset: _hoisted_2 }, null, -1 /* HOISTED */))
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
 
 
@@ -30,146 +28,121 @@ const _hoisted_4 = _imports_0 + ', ' + _imports_0 + ' 2x'
 const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0
 const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
-const _hoisted_8 = \\"/logo.png\\" + ', ' + _imports_0 + ' 2x'
-const _hoisted_9 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_1
-}, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_2
-}, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_3
-}, null, -1 /* HOISTED */)
-const _hoisted_13 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_4
-}, null, -1 /* HOISTED */)
-const _hoisted_14 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_5
-}, null, -1 /* HOISTED */)
-const _hoisted_15 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_6
-}, null, -1 /* HOISTED */)
-const _hoisted_16 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_7
-}, null, -1 /* HOISTED */)
-const _hoisted_17 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
-  srcset: \\"/logo.png, /logo.png 2x\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_18 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"https://example.com/logo.png\\",
-  srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_19 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
-  srcset: _hoisted_8
-}, null, -1 /* HOISTED */)
-const _hoisted_20 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"data:image/png;base64,i\\",
-  srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
-}, null, -1 /* HOISTED */)
+const _hoisted_8 = "/logo.png" + ', ' + _imports_0 + ' 2x'
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _hoisted_9,
-    _hoisted_10,
-    _hoisted_11,
-    _hoisted_12,
-    _hoisted_13,
-    _hoisted_14,
-    _hoisted_15,
-    _hoisted_16,
-    _hoisted_17,
-    _hoisted_18,
-    _hoisted_19,
-    _hoisted_20
+    _cache[0] || (_cache[0] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: ""
+    }, null, -1 /* HOISTED */)),
+    _cache[1] || (_cache[1] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_1
+    }, null, -1 /* HOISTED */)),
+    _cache[2] || (_cache[2] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_2
+    }, null, -1 /* HOISTED */)),
+    _cache[3] || (_cache[3] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_3
+    }, null, -1 /* HOISTED */)),
+    _cache[4] || (_cache[4] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_4
+    }, null, -1 /* HOISTED */)),
+    _cache[5] || (_cache[5] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_5
+    }, null, -1 /* HOISTED */)),
+    _cache[6] || (_cache[6] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_6
+    }, null, -1 /* HOISTED */)),
+    _cache[7] || (_cache[7] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_7
+    }, null, -1 /* HOISTED */)),
+    _cache[8] || (_cache[8] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: "/logo.png, /logo.png 2x"
+    }, null, -1 /* HOISTED */)),
+    _cache[9] || (_cache[9] = _createElementVNode("img", {
+      src: "https://example.com/logo.png",
+      srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
+    }, null, -1 /* HOISTED */)),
+    _cache[10] || (_cache[10] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: _hoisted_8
+    }, null, -1 /* HOISTED */)),
+    _cache[11] || (_cache[11] = _createElementVNode("img", {
+      src: "data:image/png;base64,i",
+      srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
+    }, null, -1 /* HOISTED */))
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset w/ base 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
-
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png 2x\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_4 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png 2x\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_5 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png, /foo/logo.png 2x\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_6 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png 2x, /foo/logo.png\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_7 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png 2x, /foo/logo.png 3x\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_8 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_9 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
-  srcset: \\"/logo.png, /logo.png 2x\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"https://example.com/logo.png\\",
-  srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
-  srcset: \\"/logo.png, /foo/logo.png 2x\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"data:image/png;base64,i\\",
-  srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
-}, null, -1 /* HOISTED */)
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _hoisted_1,
-    _hoisted_2,
-    _hoisted_3,
-    _hoisted_4,
-    _hoisted_5,
-    _hoisted_6,
-    _hoisted_7,
-    _hoisted_8,
-    _hoisted_9,
-    _hoisted_10,
-    _hoisted_11,
-    _hoisted_12
+    _cache[0] || (_cache[0] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: ""
+    }, null, -1 /* HOISTED */)),
+    _cache[1] || (_cache[1] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png"
+    }, null, -1 /* HOISTED */)),
+    _cache[2] || (_cache[2] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png 2x"
+    }, null, -1 /* HOISTED */)),
+    _cache[3] || (_cache[3] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png 2x"
+    }, null, -1 /* HOISTED */)),
+    _cache[4] || (_cache[4] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png, /foo/logo.png 2x"
+    }, null, -1 /* HOISTED */)),
+    _cache[5] || (_cache[5] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png 2x, /foo/logo.png"
+    }, null, -1 /* HOISTED */)),
+    _cache[6] || (_cache[6] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png 2x, /foo/logo.png 3x"
+    }, null, -1 /* HOISTED */)),
+    _cache[7] || (_cache[7] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x"
+    }, null, -1 /* HOISTED */)),
+    _cache[8] || (_cache[8] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: "/logo.png, /logo.png 2x"
+    }, null, -1 /* HOISTED */)),
+    _cache[9] || (_cache[9] = _createElementVNode("img", {
+      src: "https://example.com/logo.png",
+      srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
+    }, null, -1 /* HOISTED */)),
+    _cache[10] || (_cache[10] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: "/logo.png, /foo/logo.png 2x"
+    }, null, -1 /* HOISTED */)),
+    _cache[11] || (_cache[11] = _createElementVNode("img", {
+      src: "data:image/png;base64,i",
+      srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
+    }, null, -1 /* HOISTED */))
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset w/ includeAbsolute: true 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
 import _imports_1 from '/logo.png'
 
@@ -183,75 +156,63 @@ const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
 const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
-const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_1
-}, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_2
-}, null, -1 /* HOISTED */)
-const _hoisted_13 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_3
-}, null, -1 /* HOISTED */)
-const _hoisted_14 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_4
-}, null, -1 /* HOISTED */)
-const _hoisted_15 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_5
-}, null, -1 /* HOISTED */)
-const _hoisted_16 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_6
-}, null, -1 /* HOISTED */)
-const _hoisted_17 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: _hoisted_7
-}, null, -1 /* HOISTED */)
-const _hoisted_18 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
-  srcset: _hoisted_8
-}, null, -1 /* HOISTED */)
-const _hoisted_19 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"https://example.com/logo.png\\",
-  srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
-}, null, -1 /* HOISTED */)
-const _hoisted_20 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
-  srcset: _hoisted_9
-}, null, -1 /* HOISTED */)
-const _hoisted_21 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"data:image/png;base64,i\\",
-  srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
-}, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _hoisted_10,
-    _hoisted_11,
-    _hoisted_12,
-    _hoisted_13,
-    _hoisted_14,
-    _hoisted_15,
-    _hoisted_16,
-    _hoisted_17,
-    _hoisted_18,
-    _hoisted_19,
-    _hoisted_20,
-    _hoisted_21
+    _cache[0] || (_cache[0] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: ""
+    }, null, -1 /* HOISTED */)),
+    _cache[1] || (_cache[1] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_1
+    }, null, -1 /* HOISTED */)),
+    _cache[2] || (_cache[2] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_2
+    }, null, -1 /* HOISTED */)),
+    _cache[3] || (_cache[3] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_3
+    }, null, -1 /* HOISTED */)),
+    _cache[4] || (_cache[4] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_4
+    }, null, -1 /* HOISTED */)),
+    _cache[5] || (_cache[5] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_5
+    }, null, -1 /* HOISTED */)),
+    _cache[6] || (_cache[6] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_6
+    }, null, -1 /* HOISTED */)),
+    _cache[7] || (_cache[7] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_7
+    }, null, -1 /* HOISTED */)),
+    _cache[8] || (_cache[8] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: _hoisted_8
+    }, null, -1 /* HOISTED */)),
+    _cache[9] || (_cache[9] = _createElementVNode("img", {
+      src: "https://example.com/logo.png",
+      srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
+    }, null, -1 /* HOISTED */)),
+    _cache[10] || (_cache[10] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: _hoisted_9
+    }, null, -1 /* HOISTED */)),
+    _cache[11] || (_cache[11] = _createElementVNode("img", {
+      src: "data:image/png;base64,i",
+      srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
+    }, null, -1 /* HOISTED */))
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset w/ stringify 1`] = `
-"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
 import _imports_1 from '/logo.png'
 
@@ -265,12 +226,10 @@ const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
 const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
-const _hoisted_10 = /*#__PURE__*/_createStaticVNode(\\"<img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_1 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_2 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_3 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_4 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_5 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_6 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_7 + \\"\\\\\\"><img src=\\\\\\"/logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_8 + \\"\\\\\\"><img src=\\\\\\"https://example.com/logo.png\\\\\\" srcset=\\\\\\"https://example.com/logo.png, https://example.com/logo.png 2x\\\\\\"><img src=\\\\\\"/logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_9 + \\"\\\\\\"><img src=\\\\\\"data:image/png;base64,i\\\\\\" srcset=\\\\\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\\\\\">\\", 12)
-const _hoisted_22 = [
-  _hoisted_10
-]
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_22))
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createStaticVNode("<img src=\\"./logo.png\\" srcset=\\"\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_1 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_2 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_3 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_4 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_5 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_6 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_7 + "\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_8 + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_9 + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">", 12)
+  ])))
 }"
 `;
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index d046fbd9d..11b5661c1 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -1,5 +1,5 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { compileSFCScript as compile, assertCode, mockId } from './utils'
+import { assertCode, compileSFCScript as compile, mockId } from './utils'
 
 describe('SFC compile <script setup>', () => {
   test('should compile JS syntax', () => {
@@ -34,7 +34,7 @@ describe('SFC compile <script setup>', () => {
     expect(content).toMatch(
       `return { get aa() { return aa }, set aa(v) { aa = v }, ` +
         `bb, cc, dd, get a() { return a }, set a(v) { a = v }, b, c, d, ` +
-        `get xx() { return xx }, get x() { return x } }`
+        `get xx() { return xx }, get x() { return x } }`,
     )
     expect(bindings).toStrictEqual({
       x: BindingTypes.SETUP_MAYBE_REF,
@@ -46,7 +46,7 @@ describe('SFC compile <script setup>', () => {
       aa: BindingTypes.SETUP_LET,
       bb: BindingTypes.LITERAL_CONST,
       cc: BindingTypes.SETUP_CONST,
-      dd: BindingTypes.SETUP_CONST
+      dd: BindingTypes.SETUP_CONST,
     })
     assertCode(content)
   })
@@ -63,7 +63,7 @@ describe('SFC compile <script setup>', () => {
       bar: BindingTypes.SETUP_MAYBE_REF,
       baz: BindingTypes.SETUP_MAYBE_REF,
       y: BindingTypes.SETUP_MAYBE_REF,
-      z: BindingTypes.SETUP_MAYBE_REF
+      z: BindingTypes.SETUP_MAYBE_REF,
     })
     assertCode(content)
   })
@@ -209,7 +209,7 @@ describe('SFC compile <script setup>', () => {
         compile(`<script setup>
           import { ref } from 'vue'
           import 'foo/css'
-        </script>`).content
+        </script>`).content,
       )
     })
 
@@ -220,7 +220,7 @@ describe('SFC compile <script setup>', () => {
         import a from 'a' // comment
         import b from 'b'
         </script>
-        `).content
+        `).content,
       )
     })
 
@@ -232,7 +232,7 @@ describe('SFC compile <script setup>', () => {
       defineProps(['foo'])
       defineEmits(['bar'])
       const r = ref(0)
-      </script>`).content
+      </script>`).content,
       )
     })
 
@@ -240,14 +240,22 @@ describe('SFC compile <script setup>', () => {
       const { content } = compile(
         `
       <script setup>
-      import { ref } from 'vue'
-      let foo = $ref(1)
+      import { useCssVars, ref } from 'vue'
+      const msg = ref()
       </script>
+
+      <style>
+      .foo {
+        color: v-bind(msg)
+      }
+      </style>
       `,
-        { reactivityTransform: true }
       )
       assertCode(content)
-      expect(content).toMatch(`import { ref } from 'vue'`)
+      expect(content).toMatch(
+        `import { useCssVars as _useCssVars, unref as _unref } from 'vue'`,
+      )
+      expect(content).toMatch(`import { useCssVars, ref } from 'vue'`)
     })
 
     test('import dedupe between <script> and <script setup>', () => {
@@ -262,7 +270,7 @@ describe('SFC compile <script setup>', () => {
         `)
       assertCode(content)
       expect(content.indexOf(`import { x }`)).toEqual(
-        content.lastIndexOf(`import { x }`)
+        content.lastIndexOf(`import { x }`),
       )
     })
 
@@ -280,7 +288,7 @@ describe('SFC compile <script setup>', () => {
           ref: BindingTypes.SETUP_MAYBE_REF,
           reactive: BindingTypes.SETUP_MAYBE_REF,
           foo: BindingTypes.SETUP_MAYBE_REF,
-          bar: BindingTypes.SETUP_MAYBE_REF
+          bar: BindingTypes.SETUP_MAYBE_REF,
         })
       })
 
@@ -297,7 +305,7 @@ describe('SFC compile <script setup>', () => {
           _reactive: BindingTypes.SETUP_MAYBE_REF,
           _ref: BindingTypes.SETUP_MAYBE_REF,
           foo: BindingTypes.SETUP_MAYBE_REF,
-          bar: BindingTypes.SETUP_MAYBE_REF
+          bar: BindingTypes.SETUP_MAYBE_REF,
         })
       })
 
@@ -310,7 +318,7 @@ describe('SFC compile <script setup>', () => {
       `)
         expect(bindings).toStrictEqual({
           bar: BindingTypes.SETUP_REACTIVE_CONST,
-          x: BindingTypes.SETUP_CONST
+          x: BindingTypes.SETUP_CONST,
         })
       })
     })
@@ -326,192 +334,11 @@ describe('SFC compile <script setup>', () => {
     `)
       assertCode(content)
       expect(bindings).toStrictEqual({
-        foo: BindingTypes.SETUP_MAYBE_REF
+        foo: BindingTypes.SETUP_MAYBE_REF,
       })
     })
   })
 
-  // in dev mode, declared bindings are returned as an object from setup()
-  // when using TS, users may import types which should not be returned as
-  // values, so we need to check import usage in the template to determine
-  // what to be returned.
-  describe('dev mode import usage check', () => {
-    test('components', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { FooBar, FooBaz, FooQux, foo } from './x'
-        const fooBar: FooBar = 1
-        </script>
-        <template>
-          <FooBaz></FooBaz>
-          <foo-qux/>
-          <foo/>
-          FooBar
-        </template>
-        `)
-      // FooBar: should not be matched by plain text or incorrect case
-      // FooBaz: used as PascalCase component
-      // FooQux: used as kebab-case component
-      // foo: lowercase component
-      expect(content).toMatch(
-        `return { fooBar, get FooBaz() { return FooBaz }, ` +
-          `get FooQux() { return FooQux }, get foo() { return foo } }`
-      )
-      assertCode(content)
-    })
-
-    test('directive', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { vMyDir } from './x'
-        </script>
-        <template>
-          <div v-my-dir></div>
-        </template>
-        `)
-      expect(content).toMatch(`return { get vMyDir() { return vMyDir } }`)
-      assertCode(content)
-    })
-
-    test('dynamic arguments', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { FooBar, foo, bar, unused, baz } from './x'
-        </script>
-        <template>
-          <FooBar #[foo.slotName] />
-          <FooBar #unused />
-          <div :[bar.attrName]="15"></div>
-          <div unused="unused"></div>
-          <div #[\`item:\${baz.key}\`]="{ value }"></div>
-        </template>
-        `)
-      expect(content).toMatch(
-        `return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
-          `get bar() { return bar }, get baz() { return baz } }`
-      )
-      assertCode(content)
-    })
-
-    // https://github.com/vuejs/core/issues/4599
-    test('attribute expressions', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { bar, baz } from './x'
-        const cond = true
-        </script>
-        <template>
-          <div :class="[cond ? '' : bar(), 'default']" :style="baz"></div>
-        </template>
-        `)
-      expect(content).toMatch(
-        `return { cond, get bar() { return bar }, get baz() { return baz } }`
-      )
-      assertCode(content)
-    })
-
-    test('vue interpolations', () => {
-      const { content } = compile(`
-      <script setup lang="ts">
-      import { x, y, z, x$y } from './x'
-      </script>
-      <template>
-        <div :id="z + 'y'">{{ x }} {{ yy }} {{ x$y }}</div>
-      </template>
-      `)
-      // x: used in interpolation
-      // y: should not be matched by {{ yy }} or 'y' in binding exps
-      // x$y: #4274 should escape special chars when creating Regex
-      expect(content).toMatch(
-        `return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }`
-      )
-      assertCode(content)
-    })
-
-    // #4340 interpolations in template strings
-    test('js template string interpolations', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { VAR, VAR2, VAR3 } from './x'
-        </script>
-        <template>
-          {{ \`\${VAR}VAR2\${VAR3}\` }}
-        </template>
-        `)
-      // VAR2 should not be matched
-      expect(content).toMatch(
-        `return { get VAR() { return VAR }, get VAR3() { return VAR3 } }`
-      )
-      assertCode(content)
-    })
-
-    // edge case: last tag in template
-    test('last tag', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { FooBaz, Last } from './x'
-        </script>
-        <template>
-          <FooBaz></FooBaz>
-          <Last/>
-        </template>
-        `)
-      expect(content).toMatch(
-        `return { get FooBaz() { return FooBaz }, get Last() { return Last } }`
-      )
-      assertCode(content)
-    })
-
-    test('TS annotations', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { Foo, Bar, Baz, Qux, Fred } from './x'
-        const a = 1
-        function b() {}
-        </script>
-        <template>
-          {{ a as Foo }}
-          {{ b<Bar>() }}
-          {{ Baz }}
-          <Comp v-slot="{ data }: Qux">{{ data }}</Comp>
-          <div v-for="{ z = x as Qux } in list as Fred"/>
-        </template>
-        `)
-      expect(content).toMatch(`return { a, b, get Baz() { return Baz } }`)
-      assertCode(content)
-    })
-
-    // vuejs/vue#12591
-    test('v-on inline statement', () => {
-      // should not error
-      compile(`
-      <script setup lang="ts">
-        import { foo } from './foo'
-      </script>
-      <template>
-        <div @click="$emit('update:a');"></div>
-      </template>
-      `)
-    })
-
-    test('template ref', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-          import { foo, bar, Baz } from './foo'
-        </script>
-        <template>
-          <div ref="foo"></div>
-          <div ref=""></div>
-          <Baz ref="bar" />
-        </template>
-        `)
-      expect(content).toMatch(
-        'return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }'
-      )
-      assertCode(content)
-    })
-  })
-
   describe('inlineTemplate mode', () => {
     test('should work', () => {
       const { content } = compile(
@@ -525,7 +352,7 @@ describe('SFC compile <script setup>', () => {
           <div>static</div>
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // check snapshot and make sure helper imports and
       // hoists are placed correctly.
@@ -543,7 +370,7 @@ describe('SFC compile <script setup>', () => {
         defineExpose({ count })
         </script>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       assertCode(content)
       expect(content).toMatch(`setup(__props, { expose: __expose })`)
@@ -564,7 +391,7 @@ describe('SFC compile <script setup>', () => {
           <some-other-comp/>
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       expect(content).toMatch('[_unref(vMyDir)]')
       expect(content).toMatch('_createVNode(ChildComp)')
@@ -593,7 +420,7 @@ describe('SFC compile <script setup>', () => {
           {{ tree.foo() }}
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // no need to unref vue component import
       expect(content).toMatch(`createVNode(Foo,`)
@@ -632,7 +459,7 @@ describe('SFC compile <script setup>', () => {
           <input v-model="lett">
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // known const ref: set value
       expect(content).toMatch(`(count).value = $event`)
@@ -640,11 +467,28 @@ describe('SFC compile <script setup>', () => {
       expect(content).toMatch(`_isRef(maybe) ? (maybe).value = $event : null`)
       // let: handle both cases
       expect(content).toMatch(
-        `_isRef(lett) ? (lett).value = $event : lett = $event`
+        `_isRef(lett) ? (lett).value = $event : lett = $event`,
       )
       assertCode(content)
     })
 
+    test('v-model w/ newlines codegen', () => {
+      const { content } = compile(
+        `<script setup>
+        const count = ref(0)
+        </script>
+        <template>
+          <input v-model="
+          count
+          ">
+        </template>
+        `,
+        { inlineTemplate: true },
+      )
+      expect(content).toMatch(`_isRef(count) ? (count).value = $event : null`)
+      assertCode(content)
+    })
+
     test('v-model should not generate ref assignment code for non-setup bindings', () => {
       const { content } = compile(
         `<script setup>
@@ -660,7 +504,7 @@ describe('SFC compile <script setup>', () => {
           <input v-model="foo">
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       expect(content).not.toMatch(`_isRef(foo)`)
     })
@@ -698,7 +542,7 @@ describe('SFC compile <script setup>', () => {
            }"/>
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // known const ref: set value
       expect(content).toMatch(`count.value = 1`)
@@ -706,7 +550,7 @@ describe('SFC compile <script setup>', () => {
       expect(content).toMatch(`maybe.value = count.value`)
       // let: handle both cases
       expect(content).toMatch(
-        `_isRef(lett) ? lett.value = count.value : lett = count.value`
+        `_isRef(lett) ? lett.value = count.value : lett = count.value`,
       )
       expect(content).toMatch(`_isRef(v) ? v.value += 1 : v += 1`)
       expect(content).toMatch(`_isRef(v) ? v.value -= 1 : v -= 1`)
@@ -732,7 +576,7 @@ describe('SFC compile <script setup>', () => {
           <div @click="--lett"/>
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // known const ref: set value
       expect(content).toMatch(`count.value++`)
@@ -761,7 +605,7 @@ describe('SFC compile <script setup>', () => {
           <div @click="({ lett } = val)"/>
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // known const ref: set value
       expect(content).toMatch(`({ count: count.value } = val)`)
@@ -779,6 +623,7 @@ describe('SFC compile <script setup>', () => {
         import { ref } from 'vue'
         const count = ref(0)
         const style = { color: 'red' }
+        const height = ref(0)
         </script>
         <template>
           <div>{{ count }}</div>
@@ -787,14 +632,15 @@ describe('SFC compile <script setup>', () => {
         <style>
         div { color: v-bind(count) }
         span { color: v-bind(style.color) }
+        span { color: v-bind(height + "px") }
         </style>
         `,
         {
           inlineTemplate: true,
           templateOptions: {
-            ssr: true
-          }
-        }
+            ssr: true,
+          },
+        },
       )
       expect(content).toMatch(`\n  __ssrInlineRender: true,\n`)
       expect(content).toMatch(`return (_ctx, _push`)
@@ -802,6 +648,9 @@ describe('SFC compile <script setup>', () => {
       expect(content).not.toMatch(`useCssVars`)
       expect(content).toMatch(`"--${mockId}-count": (count.value)`)
       expect(content).toMatch(`"--${mockId}-style\\\\.color": (style.color)`)
+      expect(content).toMatch(
+        `"--${mockId}-height\\\\ \\\\+\\\\ \\\\\\"px\\\\\\"": (height.value + "px")`,
+      )
       assertCode(content)
     })
 
@@ -818,11 +667,29 @@ describe('SFC compile <script setup>', () => {
         </template>
         `,
           {
-            inlineTemplate: false
-          }
-        )
+            inlineTemplate: false,
+          },
+        ),
       ).not.toThrowError()
     })
+
+    test('unref + new expression', () => {
+      const { content } = compile(
+        `
+        <script setup>
+        import Foo from './foo'
+        </script>
+        <template>
+          <div>{{ new Foo() }}</div>
+          <div>{{ new Foo.Bar() }}</div>
+        </template>
+        `,
+        { inlineTemplate: true },
+      )
+      expect(content).toMatch(`new (_unref(Foo))()`)
+      expect(content).toMatch(`new (_unref(Foo)).Bar()`)
+      assertCode(content)
+    })
   })
 
   describe('with TypeScript', () => {
@@ -839,11 +706,11 @@ describe('SFC compile <script setup>', () => {
       const { content, bindings } = compile(
         `<script setup lang="ts">
         enum Foo { A = 123 }
-        </script>`
+        </script>`,
       )
       assertCode(content)
       expect(bindings).toStrictEqual({
-        Foo: BindingTypes.LITERAL_CONST
+        Foo: BindingTypes.LITERAL_CONST,
       })
     })
 
@@ -856,14 +723,14 @@ describe('SFC compile <script setup>', () => {
         </script>
         <script setup lang="ts">
         enum Foo { A = 123 }
-        </script>`
+        </script>`,
       )
       assertCode(content)
       expect(bindings).toStrictEqual({
         D: BindingTypes.LITERAL_CONST,
         C: BindingTypes.LITERAL_CONST,
         B: BindingTypes.LITERAL_CONST,
-        Foo: BindingTypes.LITERAL_CONST
+        Foo: BindingTypes.LITERAL_CONST,
       })
     })
 
@@ -872,11 +739,11 @@ describe('SFC compile <script setup>', () => {
         `<script setup lang="ts">
         const enum Foo { A = 123 }
         </script>`,
-        { hoistStatic: true }
+        { hoistStatic: true },
       )
       assertCode(content)
       expect(bindings).toStrictEqual({
-        Foo: BindingTypes.LITERAL_CONST
+        Foo: BindingTypes.LITERAL_CONST,
       })
     })
 
@@ -885,18 +752,24 @@ describe('SFC compile <script setup>', () => {
         `<script setup lang="ts">
         import type { Foo } from './main.ts'
         import { type Bar, Baz } from './main.ts'
-        </script>`
+        </script>`,
       )
       expect(content).toMatch(`return { get Baz() { return Baz } }`)
       assertCode(content)
     })
+
+    test('with generic attribute', () => {
+      const { content } = compile(`
+      <script setup lang="ts" generic="T extends Record<string,string>">
+        type Bar = {}
+      </script>`)
+      assertCode(content)
+    })
   })
 
   describe('async/await detection', () => {
     function assertAwaitDetection(code: string, shouldAsync = true) {
-      const { content } = compile(`<script setup>${code}</script>`, {
-        reactivityTransform: true
-      })
+      const { content } = compile(`<script setup>${code}</script>`)
       if (shouldAsync) {
         expect(content).toMatch(`let __temp, __restore`)
       }
@@ -914,7 +787,7 @@ describe('SFC compile <script setup>', () => {
     })
 
     test('ref', () => {
-      assertAwaitDetection(`let a = $ref(1 + (await foo))`)
+      assertAwaitDetection(`let a = ref(1 + (await foo))`)
     })
 
     // #4448
@@ -1003,7 +876,7 @@ describe('SFC compile <script setup>', () => {
       // class method
       assertAwaitDetection(
         `const cls = class Foo { async method() { await bar }}`,
-        false
+        false,
       )
     })
   })
@@ -1011,7 +884,7 @@ describe('SFC compile <script setup>', () => {
   describe('errors', () => {
     test('<script> and <script setup> must have same lang', () => {
       expect(() =>
-        compile(`<script>foo()</script><script setup lang="ts">bar()</script>`)
+        compile(`<script>foo()</script><script setup lang="ts">bar()</script>`),
       ).toThrow(`<script> and <script setup> must have the same language type`)
     })
 
@@ -1021,20 +894,20 @@ describe('SFC compile <script setup>', () => {
       expect(() =>
         compile(`<script setup>
         export const a = 1
-        </script>`)
+        </script>`),
       ).toThrow(moduleErrorMsg)
 
       expect(() =>
         compile(`<script setup>
         export * from './foo'
-        </script>`)
+        </script>`),
       ).toThrow(moduleErrorMsg)
 
       expect(() =>
         compile(`<script setup>
           const bar = 1
           export { bar as default }
-        </script>`)
+        </script>`),
       ).toThrow(moduleErrorMsg)
     })
 
@@ -1047,14 +920,14 @@ describe('SFC compile <script setup>', () => {
             default: () => bar
           }
         })
-        </script>`)
+        </script>`),
       ).toThrow(`cannot reference locally declared variables`)
 
       expect(() =>
         compile(`<script setup>
         let bar = 'hello'
         defineEmits([bar])
-        </script>`)
+        </script>`),
       ).toThrow(`cannot reference locally declared variables`)
 
       // #4644
@@ -1067,7 +940,7 @@ describe('SFC compile <script setup>', () => {
             default: () => bar
           }
         })
-        </script>`)
+        </script>`),
       ).not.toThrow(`cannot reference locally declared variables`)
     })
 
@@ -1083,7 +956,7 @@ describe('SFC compile <script setup>', () => {
           defineEmits({
             foo: bar => bar > 1
           })
-        </script>`).content
+        </script>`).content,
       )
     })
 
@@ -1099,9 +972,41 @@ describe('SFC compile <script setup>', () => {
         defineEmits({
           foo: () => bar > 1
         })
-        </script>`).content
+        </script>`).content,
       )
     })
+
+    test('defineModel() referencing local var', () => {
+      expect(() =>
+        compile(`<script setup>
+        let bar = 1
+        defineModel({
+          default: () => bar
+        })
+        </script>`),
+      ).toThrow(`cannot reference locally declared variables`)
+
+      // allow const
+      expect(() =>
+        compile(`<script setup>
+        const bar = 1
+        defineModel({
+          default: () => bar
+        })
+        </script>`),
+      ).not.toThrow(`cannot reference locally declared variables`)
+
+      // allow in get/set
+      expect(() =>
+        compile(`<script setup>
+        let bar = 1
+        defineModel({
+          get: () => bar,
+          set: () => bar
+        })
+        </script>`),
+      ).not.toThrow(`cannot reference locally declared variables`)
+    })
   })
 })
 
@@ -1133,7 +1038,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
-      bar: BindingTypes.PROPS
+      bar: BindingTypes.PROPS,
     })
     expect(bindings!.__isScriptSetup).toBe(false)
   })
@@ -1157,7 +1062,7 @@ describe('SFC analyze <script> bindings', () => {
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS,
       baz: BindingTypes.PROPS,
-      qux: BindingTypes.PROPS
+      qux: BindingTypes.PROPS,
     })
     expect(bindings!.__isScriptSetup).toBe(false)
   })
@@ -1178,7 +1083,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.SETUP_MAYBE_REF,
-      bar: BindingTypes.SETUP_MAYBE_REF
+      bar: BindingTypes.SETUP_MAYBE_REF,
     })
     expect(bindings!.__isScriptSetup).toBe(false)
   })
@@ -1193,7 +1098,7 @@ describe('SFC analyze <script> bindings', () => {
       </script>
     `)
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.LITERAL_CONST
+      foo: BindingTypes.LITERAL_CONST,
     })
   })
 
@@ -1213,7 +1118,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.SETUP_MAYBE_REF,
-      bar: BindingTypes.SETUP_MAYBE_REF
+      bar: BindingTypes.SETUP_MAYBE_REF,
     })
     expect(bindings!.__isScriptSetup).toBe(false)
   })
@@ -1234,7 +1139,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.DATA,
-      bar: BindingTypes.DATA
+      bar: BindingTypes.DATA,
     })
   })
 
@@ -1267,7 +1172,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.OPTIONS,
-      bar: BindingTypes.OPTIONS
+      bar: BindingTypes.OPTIONS,
     })
   })
 
@@ -1281,7 +1186,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.OPTIONS,
-      bar: BindingTypes.OPTIONS
+      bar: BindingTypes.OPTIONS,
     })
   })
 
@@ -1298,7 +1203,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.OPTIONS,
-      bar: BindingTypes.OPTIONS
+      bar: BindingTypes.OPTIONS,
     })
   })
 
@@ -1335,7 +1240,7 @@ describe('SFC analyze <script> bindings', () => {
       baz: BindingTypes.SETUP_MAYBE_REF,
       qux: BindingTypes.DATA,
       quux: BindingTypes.OPTIONS,
-      quuz: BindingTypes.OPTIONS
+      quuz: BindingTypes.OPTIONS,
     })
   })
 
@@ -1362,7 +1267,7 @@ describe('SFC analyze <script> bindings', () => {
       c: BindingTypes.LITERAL_CONST,
       d: BindingTypes.SETUP_MAYBE_REF,
       e: BindingTypes.SETUP_LET,
-      foo: BindingTypes.PROPS
+      foo: BindingTypes.PROPS,
     })
   })
 
@@ -1373,8 +1278,8 @@ describe('SFC analyze <script> bindings', () => {
         <template>{{ a }}</template>`,
         undefined,
         {
-          filename: 'FooBar.vue'
-        }
+          filename: 'FooBar.vue',
+        },
       )
       expect(content).toMatch(`export default {
   __name: 'FooBar'`)
@@ -1392,8 +1297,8 @@ describe('SFC analyze <script> bindings', () => {
         <template>{{ a }}</template>`,
         undefined,
         {
-          filename: 'FooBar.vue'
-        }
+          filename: 'FooBar.vue',
+        },
       )
       expect(content).not.toMatch(`name: 'FooBar'`)
       expect(content).toMatch(`name: 'Baz'`)
@@ -1412,8 +1317,8 @@ describe('SFC analyze <script> bindings', () => {
         <template>{{ a }}</template>`,
         undefined,
         {
-          filename: 'FooBar.vue'
-        }
+          filename: 'FooBar.vue',
+        },
       )
       expect(content).not.toMatch(`name: 'FooBar'`)
       expect(content).toMatch(`name: 'Baz'`)
@@ -1429,8 +1334,8 @@ describe('SFC genDefaultAs', () => {
       export default {}
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(`const _sfc_ = {}`)
@@ -1446,8 +1351,8 @@ describe('SFC genDefaultAs', () => {
       .foo { color: v-bind(x) }
       </style>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).not.toMatch('__default__')
@@ -1464,12 +1369,12 @@ describe('SFC genDefaultAs', () => {
       const a = 1
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(
-      `const _sfc_ = /*#__PURE__*/Object.assign(__default__`
+      `const _sfc_ = /*@__PURE__*/Object.assign(__default__`,
     )
     assertCode(content)
   })
@@ -1483,12 +1388,12 @@ describe('SFC genDefaultAs', () => {
       const a = 1
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(
-      `const _sfc_ = /*#__PURE__*/Object.assign(__default__`
+      `const _sfc_ = /*@__PURE__*/Object.assign(__default__`,
     )
     assertCode(content)
   })
@@ -1499,8 +1404,8 @@ describe('SFC genDefaultAs', () => {
       const a = 1
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(`const _sfc_ = {\n  setup`)
@@ -1513,11 +1418,11 @@ describe('SFC genDefaultAs', () => {
       const a = 1
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
-    expect(content).toMatch(`const _sfc_ = /*#__PURE__*/_defineComponent(`)
+    expect(content).toMatch(`const _sfc_ = /*@__PURE__*/_defineComponent(`)
     assertCode(content)
   })
 
@@ -1530,12 +1435,12 @@ describe('SFC genDefaultAs', () => {
       const a = 1
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(
-      `const _sfc_ = /*#__PURE__*/_defineComponent({\n  ...__default__`
+      `const _sfc_ = /*@__PURE__*/_defineComponent({\n  ...__default__`,
     )
     assertCode(content)
   })
@@ -1546,12 +1451,69 @@ describe('SFC genDefaultAs', () => {
       import { toRef } from 'vue'
       const props = defineProps<{foo: string}>()
       const foo = toRef(() => props.foo)
-      </script>`
+      </script>`,
     )
     expect(bindings).toStrictEqual({
       toRef: BindingTypes.SETUP_CONST,
       props: BindingTypes.SETUP_REACTIVE_CONST,
-      foo: BindingTypes.SETUP_REF
+      foo: BindingTypes.SETUP_REF,
+    })
+  })
+
+  describe('parser plugins', () => {
+    test('import attributes', () => {
+      const { content } = compile(`
+        <script setup>
+        import { foo } from './foo.js' with { type: 'foobar' }
+        </script>
+      `)
+      assertCode(content)
+
+      expect(() =>
+        compile(`
+      <script setup>
+        import { foo } from './foo.js' assert { type: 'foobar' }
+        </script>`),
+      ).toThrow()
+    })
+
+    test('import attributes (user override for deprecated syntax)', () => {
+      const { content } = compile(
+        `
+        <script setup>
+        import { foo } from './foo.js' assert { type: 'foobar' }
+        </script>
+      `,
+        {
+          babelParserPlugins: [
+            ['importAttributes', { deprecatedAssertSyntax: true }],
+          ],
+        },
+      )
+      assertCode(content)
     })
   })
 })
+
+describe('compileScript', () => {
+  test('should care about runtimeModuleName', () => {
+    const { content } = compile(
+      `
+      <script setup>
+        await Promise.resolve(1)
+      </script>
+      `,
+      {
+        templateOptions: {
+          compilerOptions: {
+            runtimeModuleName: 'npm:vue',
+          },
+        },
+      },
+    )
+    expect(content).toMatch(
+      `import { withAsyncContext as _withAsyncContext } from "npm:vue"\n`,
+    )
+    assertCode(content)
+  })
+})
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
index b6d10a17b..b2a69d777 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`defineEmits > basic usage 1`] = `
-"export default {
+"
+export default {
   emits: ['foo', 'bar'],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -41,7 +42,7 @@ return { Foo, Bar, emit }
 exports[`defineEmits > w/ runtime options 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ['a', 'b'],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -58,8 +59,8 @@ exports[`defineEmits > w/ type (exported interface) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export interface Emits { (e: 'foo' | 'bar'): void }
     
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -75,8 +76,8 @@ exports[`defineEmits > w/ type (exported type alias) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export type Emits = { (e: 'foo' | 'bar'): void }
     
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -92,7 +93,7 @@ exports[`defineEmits > w/ type (interface ts type) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 interface Emits { (e: 'foo'): void }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ['foo'],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -110,8 +111,8 @@ exports[`defineEmits > w/ type (interface w/ extends) 1`] = `
 interface Base { (e: 'foo'): void }
     interface Emits extends Base { (e: 'bar'): void }
     
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"bar\\", \\"foo\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["bar", "foo"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -127,8 +128,8 @@ exports[`defineEmits > w/ type (interface) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 interface Emits { (e: 'foo' | 'bar'): void }
     
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -143,8 +144,8 @@ return { emit }
 exports[`defineEmits > w/ type (property syntax string literal) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo:bar\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo:bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -159,8 +160,8 @@ return { emit }
 exports[`defineEmits > w/ type (property syntax) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -176,8 +177,8 @@ exports[`defineEmits > w/ type (referenced exported function type) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export type Emits = (e: 'foo' | 'bar') => void
     
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -193,8 +194,8 @@ exports[`defineEmits > w/ type (referenced function type) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 type Emits = (e: 'foo' | 'bar') => void
     
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -210,8 +211,8 @@ exports[`defineEmits > w/ type (type alias) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 type Emits = { (e: 'foo' | 'bar'): void }
     
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -226,8 +227,8 @@ return { emit }
 exports[`defineEmits > w/ type (type literal w/ call signatures) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\", \\"baz\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo", "bar", "baz"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -241,11 +242,11 @@ return { emit }
 
 exports[`defineEmits > w/ type (type references in union) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
-type BaseEmit = \\"change\\"
-    type Emit = \\"some\\" | \\"emit\\" | BaseEmit
+type BaseEmit = "change"
+    type Emit = "some" | "emit" | BaseEmit
     
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"some\\", \\"emit\\", \\"change\\", \\"another\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["some", "emit", "change", "another"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -260,8 +261,8 @@ return { emit }
 exports[`defineEmits > w/ type (union) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\", \\"baz\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo", "bar", "baz"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -276,8 +277,8 @@ return { emit }
 exports[`defineEmits > w/ type 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -294,8 +295,8 @@ exports[`defineEmits > w/ type from normal script 1`] = `
 
       export interface Emits { (e: 'foo' | 'bar'): void }
     
-export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+export default /*@__PURE__*/_defineComponent({
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineExpose.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineExpose.spec.ts.snap
index d72726460..f8754f8a9 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineExpose.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineExpose.spec.ts.snap
@@ -16,7 +16,8 @@ return { n, get x() { return x } }
 `;
 
 exports[`defineExpose() 1`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
 
 __expose({ foo: 123 })
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
index 27c358c5a..12462dcf4 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
@@ -5,17 +5,20 @@ exports[`defineModel() > basic usage 1`] = `
 
 export default {
   props: {
-    \\"modelValue\\": { required: true },
-    \\"count\\": {},
-    \\"toString\\": { type: Function },
+    "modelValue": { required: true },
+    "modelModifiers": {},
+    "count": {},
+    "countModifiers": {},
+    "toString": { type: Function },
+    "toStringModifiers": {},
   },
-  emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:toString\\"],
+  emits: ["update:modelValue", "update:count", "update:toString"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-      const modelValue = _useModel(__props, \\"modelValue\\")
-      const c = _useModel(__props, \\"count\\")
-      const toString = _useModel(__props, \\"toString\\")
+      const modelValue = _useModel(__props, "modelValue")
+      const c = _useModel(__props, 'count')
+      const toString = _useModel(__props, 'toString')
       
 return { modelValue, c, toString }
 }
@@ -23,19 +26,117 @@ return { modelValue, c, toString }
 }"
 `;
 
+exports[`defineModel() > get / set transformers 1`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*@__PURE__*/_defineComponent({
+  props: {
+    "modelValue": {
+        required: true
+      },
+    "modelModifiers": {},
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      const modelValue = _useModel(__props, "modelValue", {
+        get(v) { return v - 1 },
+        set: (v) => { return v + 1 },
+        })
+      
+return { modelValue }
+}
+
+})"
+`;
+
+exports[`defineModel() > get / set transformers 2`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*@__PURE__*/_defineComponent({
+  props: {
+    "modelValue": {
+        default: 0,
+        required: true,
+        },
+    "modelModifiers": {},
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      const modelValue = _useModel(__props, "modelValue", {
+        get(v) { return v - 1 },
+        set: (v) => { return v + 1 },
+      })
+      
+return { modelValue }
+}
+
+})"
+`;
+
+exports[`defineModel() > usage w/ props destructure 1`] = `
+"import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'
+
+export default /*@__PURE__*/_defineComponent({
+  props: /*@__PURE__*/_mergeModels({
+    x: { type: Number, required: true }
+  }, {
+    "modelValue": {
+        },
+    "modelModifiers": {},
+  }),
+  emits: ["update:modelValue"],
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+      
+      const modelValue = _useModel(__props, "modelValue", {
+        set: (v) => { return v + __props.x }
+      })
+      
+return { modelValue }
+}
+
+})"
+`;
+
+exports[`defineModel() > w/ Boolean And Function types, production mode 1`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*@__PURE__*/_defineComponent({
+  props: {
+    "modelValue": { type: [Boolean, String] },
+    "modelModifiers": {},
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      const modelValue = _useModel<boolean | string>(__props, "modelValue")
+      
+return { modelValue }
+}
+
+})"
+`;
+
 exports[`defineModel() > w/ array props 1`] = `
 "import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
 
 export default {
-  props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
-    \\"count\\": {},
+  props: /*@__PURE__*/_mergeModels(['foo', 'bar'], {
+    "count": {},
+    "countModifiers": {},
   }),
-  emits: [\\"update:count\\"],
+  emits: ["update:count"],
   setup(__props, { expose: __expose }) {
   __expose();
 
       
-      const count = _useModel(__props, \\"count\\")
+      const count = _useModel(__props, 'count')
       
 return { count }
 }
@@ -47,16 +148,17 @@ exports[`defineModel() > w/ defineProps and defineEmits 1`] = `
 "import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
 
 export default {
-  props: /*#__PURE__*/_mergeModels({ foo: String }, {
-    \\"modelValue\\": { default: 0 },
+  props: /*@__PURE__*/_mergeModels({ foo: String }, {
+    "modelValue": { default: 0 },
+    "modelModifiers": {},
   }),
-  emits: /*#__PURE__*/_mergeModels(['change'], [\\"update:modelValue\\"]),
+  emits: /*@__PURE__*/_mergeModels(['change'], ["update:modelValue"]),
   setup(__props, { expose: __expose }) {
   __expose();
 
       
       
-      const count = _useModel(__props, \\"modelValue\\")
+      const count = _useModel(__props, "modelValue")
       
 return { count }
 }
@@ -64,56 +166,28 @@ return { count }
 }"
 `;
 
-exports[`defineModel() > w/ local flag 1`] = `
-"import { useModel as _useModel } from 'vue'
-const local = true
-      
-export default {
-  props: {
-    \\"modelValue\\": { local: true, default: 1 },
-    \\"bar\\": { [key]: true },
-    \\"baz\\": { ...x },
-    \\"qux\\": x,
-    \\"foo2\\": { local: true, ...x },
-    \\"hoist\\": { local },
-  },
-  emits: [\\"update:modelValue\\", \\"update:bar\\", \\"update:baz\\", \\"update:qux\\", \\"update:foo2\\", \\"update:hoist\\"],
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-      const foo = _useModel(__props, \\"modelValue\\", { local: true })
-      const bar = _useModel(__props, \\"bar\\", { [key]: true })
-      const baz = _useModel(__props, \\"baz\\", { ...x })
-      const qux = _useModel(__props, \\"qux\\", x)
-
-      const foo2 = _useModel(__props, \\"foo2\\", { local: true })
-
-      const hoist = _useModel(__props, \\"hoist\\", { local })
-      
-return { foo, bar, baz, qux, foo2, local, hoist }
-}
-
-}"
-`;
-
 exports[`defineModel() > w/ types, basic usage 1`] = `
 "import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
-    \\"modelValue\\": { type: [Boolean, String] },
-    \\"count\\": { type: Number },
-    \\"disabled\\": { type: Number, ...{ required: false } },
-    \\"any\\": { type: Boolean, skipCheck: true },
+    "modelValue": { type: [Boolean, String] },
+    "modelModifiers": {},
+    "count": { type: Number },
+    "countModifiers": {},
+    "disabled": { type: Number, ...{ required: false } },
+    "disabledModifiers": {},
+    "any": { type: Boolean, skipCheck: true },
+    "anyModifiers": {},
   },
-  emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\", \\"update:any\\"],
+  emits: ["update:modelValue", "update:count", "update:disabled", "update:any"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-      const modelValue = _useModel(__props, \\"modelValue\\")
-      const count = _useModel(__props, \\"count\\")
-      const disabled = _useModel(__props, \\"disabled\\")
-      const any = _useModel(__props, \\"any\\")
+      const modelValue = _useModel<boolean | string>(__props, "modelValue")
+      const count = _useModel<number>(__props, 'count')
+      const disabled = _useModel<number>(__props, 'disabled')
+      const any = _useModel<any | boolean>(__props, 'any')
       
 return { modelValue, count, disabled, any }
 }
@@ -124,26 +198,71 @@ return { modelValue, count, disabled, any }
 exports[`defineModel() > w/ types, production mode 1`] = `
 "import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
-    \\"modelValue\\": { type: Boolean },
-    \\"fn\\": {},
-    \\"fnWithDefault\\": { type: Function, ...{ default: () => null } },
-    \\"str\\": {},
-    \\"optional\\": { required: false },
+    "modelValue": { type: Boolean },
+    "modelModifiers": {},
+    "fn": {},
+    "fnModifiers": {},
+    "fnWithDefault": { type: Function, ...{ default: () => null } },
+    "fnWithDefaultModifiers": {},
+    "str": {},
+    "strModifiers": {},
+    "optional": { required: false },
+    "optionalModifiers": {},
   },
-  emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:fnWithDefault\\", \\"update:str\\", \\"update:optional\\"],
+  emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-      const modelValue = _useModel(__props, \\"modelValue\\")
-      const fn = _useModel(__props, \\"fn\\")
-      const fnWithDefault = _useModel(__props, \\"fnWithDefault\\")
-      const str = _useModel(__props, \\"str\\")
-      const optional = _useModel(__props, \\"optional\\")
+      const modelValue = _useModel<boolean>(__props, "modelValue")
+      const fn = _useModel<() => void>(__props, 'fn')
+      const fnWithDefault = _useModel<() => void>(__props, 'fnWithDefault')
+      const str = _useModel<string>(__props, 'str')
+      const optional = _useModel<string>(__props, 'optional')
       
 return { modelValue, fn, fnWithDefault, str, optional }
 }
 
 })"
 `;
+
+exports[`defineModel() > w/ types, production mode, boolean + multiple types 1`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*@__PURE__*/_defineComponent({
+  props: {
+    "modelValue": { type: [Boolean, String, Object] },
+    "modelModifiers": {},
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      const modelValue = _useModel<boolean | string | {}>(__props, "modelValue")
+      
+return { modelValue }
+}
+
+})"
+`;
+
+exports[`defineModel() > w/ types, production mode, function + runtime opts + multiple types 1`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*@__PURE__*/_defineComponent({
+  props: {
+    "modelValue": { type: [Number, Function], ...{ default: () => 1 } },
+    "modelModifiers": {},
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      const modelValue = _useModel<number | (() => number)>(__props, "modelValue")
+      
+return { modelValue }
+}
+
+})"
+`;
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineOptions.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineOptions.spec.ts.snap
index 47f3cef0a..cdc81c7c8 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineOptions.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineOptions.spec.ts.snap
@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`defineOptions() > basic usage 1`] = `
-"export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, {
+"
+export default /*@__PURE__*/Object.assign({ name: 'FooApp' }, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -14,7 +15,8 @@ return {  }
 `;
 
 exports[`defineOptions() > empty argument 1`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
   __expose();
 
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
index c5f50be5d..d59807b85 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
@@ -18,10 +18,51 @@ return { props, bar }
 }"
 `;
 
+exports[`defineProps > custom element retains the props type & default value & production mode 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+interface Props { 
+          foo?: number;
+      }
+      
+export default /*@__PURE__*/_defineComponent({
+  __name: 'app.ce',
+  props: {
+    foo: { default: 5.5, type: Number }
+  },
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+      const props = __props;
+      
+return { props }
+}
+
+})"
+`;
+
+exports[`defineProps > custom element retains the props type & production mode 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*@__PURE__*/_defineComponent({
+  __name: 'app.ce',
+  props: {
+    foo: {type: Number}
+  },
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+      const props = __props
+      
+return { props }
+}
+
+})"
+`;
+
 exports[`defineProps > defineProps w/ runtime options 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: { foo: String },
   setup(__props, { expose: __expose }) {
   __expose();
@@ -37,7 +78,7 @@ return { props }
 exports[`defineProps > destructure without enabling reactive destructure 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     foo: { type: null, required: true }
   },
@@ -46,7 +87,7 @@ export default /*#__PURE__*/_defineComponent({
 
       const { foo } = __props
       
-return {  }
+return { foo }
 }
 
 })"
@@ -55,36 +96,36 @@ return {  }
 exports[`defineProps > should escape names w/ special symbols 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
-    \\"spa ce\\": { type: null, required: true },
-    \\"exclamation!mark\\": { type: null, required: true },
-    \\"double\\\\\\"quote\\": { type: null, required: true },
-    \\"hash#tag\\": { type: null, required: true },
-    \\"dollar$sign\\": { type: null, required: true },
-    \\"percentage%sign\\": { type: null, required: true },
-    \\"amper&sand\\": { type: null, required: true },
-    \\"single'quote\\": { type: null, required: true },
-    \\"round(brack)ets\\": { type: null, required: true },
-    \\"aste*risk\\": { type: null, required: true },
-    \\"pl+us\\": { type: null, required: true },
-    \\"com,ma\\": { type: null, required: true },
-    \\"do.t\\": { type: null, required: true },
-    \\"sla/sh\\": { type: null, required: true },
-    \\"co:lon\\": { type: null, required: true },
-    \\"semi;colon\\": { type: null, required: true },
-    \\"angle<brack>ets\\": { type: null, required: true },
-    \\"equal=sign\\": { type: null, required: true },
-    \\"question?mark\\": { type: null, required: true },
-    \\"at@sign\\": { type: null, required: true },
-    \\"square[brack]ets\\": { type: null, required: true },
-    \\"back\\\\\\\\slash\\": { type: null, required: true },
-    \\"ca^ret\\": { type: null, required: true },
-    \\"back\`tick\\": { type: null, required: true },
-    \\"curly{bra}ces\\": { type: null, required: true },
-    \\"pi|pe\\": { type: null, required: true },
-    \\"til~de\\": { type: null, required: true },
-    \\"da-sh\\": { type: null, required: true }
+    "spa ce": { type: null, required: true },
+    "exclamation!mark": { type: null, required: true },
+    "double\\"quote": { type: null, required: true },
+    "hash#tag": { type: null, required: true },
+    "dollar$sign": { type: null, required: true },
+    "percentage%sign": { type: null, required: true },
+    "amper&sand": { type: null, required: true },
+    "single'quote": { type: null, required: true },
+    "round(brack)ets": { type: null, required: true },
+    "aste*risk": { type: null, required: true },
+    "pl+us": { type: null, required: true },
+    "com,ma": { type: null, required: true },
+    "do.t": { type: null, required: true },
+    "sla/sh": { type: null, required: true },
+    "co:lon": { type: null, required: true },
+    "semi;colon": { type: null, required: true },
+    "angle<brack>ets": { type: null, required: true },
+    "equal=sign": { type: null, required: true },
+    "question?mark": { type: null, required: true },
+    "at@sign": { type: null, required: true },
+    "square[brack]ets": { type: null, required: true },
+    "back\\\\slash": { type: null, required: true },
+    "ca^ret": { type: null, required: true },
+    "back\`tick": { type: null, required: true },
+    "curly{bra}ces": { type: null, required: true },
+    "pi|pe": { type: null, required: true },
+    "til~de": { type: null, required: true },
+    "da-sh": { type: null, required: true }
   },
   setup(__props: any, { expose: __expose }) {
   __expose();
@@ -100,7 +141,7 @@ return {  }
 exports[`defineProps > w/ TS assertion 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: ['foo'],
   setup(__props, { expose: __expose }) {
   __expose();
@@ -117,7 +158,7 @@ exports[`defineProps > w/ exported interface 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export interface Props { x?: number }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     x: { type: Number, required: false }
   },
@@ -137,7 +178,7 @@ exports[`defineProps > w/ exported interface in normal script 1`] = `
 
       export interface Props { x?: number }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     x: { type: Number, required: false }
   },
@@ -156,7 +197,7 @@ exports[`defineProps > w/ exported type alias 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export type Props = { x?: number }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     x: { type: Number, required: false }
   },
@@ -181,7 +222,7 @@ interface Bar extends Foo { y?: number }
       
       interface Foo { x?: number }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     z: { type: Number, required: true },
     y: { type: String, required: true },
@@ -218,7 +259,7 @@ exports[`defineProps > w/ interface 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 interface Props { x?: number }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     x: { type: Number, required: false }
   },
@@ -255,7 +296,7 @@ interface Test {}
     type Alias = number[]
 
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     string: { type: String, required: true },
     number: { type: Number, required: true },
@@ -312,7 +353,7 @@ exports[`defineProps > w/ type alias 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 type Props = { x?: number }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     x: { type: Number, required: false }
   },
@@ -331,8 +372,8 @@ exports[`defineProps > withDefaults (dynamic) 1`] = `
 "import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from 'vue'
 import { defaults } from './foo'
     
-export default /*#__PURE__*/_defineComponent({
-  props: /*#__PURE__*/_mergeDefaults({
+export default /*@__PURE__*/_defineComponent({
+  props: /*@__PURE__*/_mergeDefaults({
     foo: { type: String, required: false },
     bar: { type: Number, required: false },
     baz: { type: Boolean, required: true }
@@ -352,8 +393,8 @@ exports[`defineProps > withDefaults (dynamic) w/ production mode 1`] = `
 "import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from 'vue'
 import { defaults } from './foo'
     
-export default /*#__PURE__*/_defineComponent({
-  props: /*#__PURE__*/_mergeDefaults({
+export default /*@__PURE__*/_defineComponent({
+  props: /*@__PURE__*/_mergeDefaults({
     foo: { type: Function },
     bar: { type: Boolean },
     baz: { type: [Boolean, Function] },
@@ -374,8 +415,8 @@ exports[`defineProps > withDefaults (reference) 1`] = `
 "import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from 'vue'
 import { defaults } from './foo'
     
-export default /*#__PURE__*/_defineComponent({
-  props: /*#__PURE__*/_mergeDefaults({
+export default /*@__PURE__*/_defineComponent({
+  props: /*@__PURE__*/_mergeDefaults({
     foo: { type: String, required: false },
     bar: { type: Number, required: false },
     baz: { type: Boolean, required: true }
@@ -398,9 +439,9 @@ exports[`defineProps > withDefaults (static) + normal script 1`] = `
         a?: string;
       }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
-    a: { type: String, required: false, default: \\"a\\" }
+    a: { type: String, required: false, default: "a" }
   },
   setup(__props: any, { expose: __expose }) {
   __expose();
@@ -416,7 +457,7 @@ return { props }
 exports[`defineProps > withDefaults (static) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     foo: { type: String, required: false, default: 'hi' },
     bar: { type: Number, required: false },
@@ -440,7 +481,7 @@ return { props }
 exports[`defineProps > withDefaults (static) w/ production mode 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     foo: {},
     bar: { type: Boolean },
@@ -461,8 +502,8 @@ return { props }
 exports[`defineProps > withDefaults w/ dynamic object method 1`] = `
 "import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
-  props: /*#__PURE__*/_mergeDefaults({
+export default /*@__PURE__*/_defineComponent({
+  props: /*@__PURE__*/_mergeDefaults({
     foo: { type: Function, required: false }
   }, {
       ['fo' + 'o']() { return 'foo' }
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
index 5aa7d3e87..12d5a67db 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`sfc reactive props destructure > aliasing 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
+"import { toDisplayString as _toDisplayString } from "vue"
 
 
 export default {
@@ -21,7 +21,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`sfc reactive props destructure > basic usage 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
+"import { toDisplayString as _toDisplayString } from "vue"
 
 
 export default {
@@ -40,7 +40,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`sfc reactive props destructure > computed static key 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
+"import { toDisplayString as _toDisplayString } from "vue"
 
 
 export default {
@@ -62,7 +62,7 @@ exports[`sfc reactive props destructure > default values w/ array runtime declar
 "import { mergeDefaults as _mergeDefaults } from 'vue'
 
 export default {
-  props: /*#__PURE__*/_mergeDefaults(['foo', 'bar', 'baz'], {
+  props: /*@__PURE__*/_mergeDefaults(['foo', 'bar', 'baz'], {
   foo: 1,
   bar: () => ({}),
   func: () => {}, __skip_func: true
@@ -81,7 +81,7 @@ exports[`sfc reactive props destructure > default values w/ object runtime decla
 "import { mergeDefaults as _mergeDefaults } from 'vue'
 
 export default {
-  props: /*#__PURE__*/_mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
+  props: /*@__PURE__*/_mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
   foo: 1,
   bar: () => ({}),
   func: () => {}, __skip_func: true,
@@ -101,9 +101,9 @@ exports[`sfc reactive props destructure > default values w/ runtime declaration
 "import { mergeDefaults as _mergeDefaults } from 'vue'
 
 export default {
-  props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
+  props: /*@__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
   foo: 1,
-  \\"foo:bar\\": 'foo-bar'
+  "foo:bar": 'foo-bar'
 }),
   setup(__props) {
 
@@ -118,12 +118,12 @@ return () => {}
 exports[`sfc reactive props destructure > default values w/ type declaration & key is string 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     foo: { type: Number, required: true, default: 1 },
     bar: { type: Number, required: true, default: 2 },
-    \\"foo:bar\\": { type: String, required: true, default: 'foo-bar' },
-    \\"onUpdate:modelValue\\": { type: Function, required: true }
+    "foo:bar": { type: String, required: true, default: 'foo-bar' },
+    "onUpdate:modelValue": { type: Function, required: true }
   },
   setup(__props: any) {
 
@@ -138,7 +138,7 @@ return () => {}
 exports[`sfc reactive props destructure > default values w/ type declaration 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     foo: { type: Number, required: false, default: 1 },
     bar: { type: Object, required: false, default: () => ({}) },
@@ -157,7 +157,7 @@ return () => {}
 exports[`sfc reactive props destructure > default values w/ type declaration, prod mode 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     foo: { default: 1 },
     bar: { default: () => ({}) },
@@ -177,7 +177,8 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > defineProps/defineEmits in multi-variable declaration (full removal) 1`] = `
-"export default {
+"
+export default {
   props: ['item'],
   emits: ['a'],
   setup(__props, { emit: __emit }) {
@@ -192,7 +193,8 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > multi-variable declaration 1`] = `
-"export default {
+"
+export default {
   props: ['item'],
   setup(__props) {
 
@@ -205,7 +207,8 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > multi-variable declaration fix #6757  1`] = `
-"export default {
+"
+export default {
   props: ['item'],
   setup(__props) {
 
@@ -218,7 +221,8 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > multi-variable declaration fix #7422 1`] = `
-"export default {
+"
+export default {
   props: ['item'],
   setup(__props) {
 
@@ -232,7 +236,7 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > multiple variable declarations 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
 export default {
@@ -242,7 +246,7 @@ export default {
       const bar = 'fish', hello = 'world'
       
 return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.foo) + \\" \\" + _toDisplayString(hello) + \\" \\" + _toDisplayString(bar), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.foo) + " " + _toDisplayString(hello) + " " + _toDisplayString(bar), 1 /* TEXT */))
 }
 }
 
@@ -250,7 +254,8 @@ return (_ctx, _cache) => {
 `;
 
 exports[`sfc reactive props destructure > nested scope 1`] = `
-"export default {
+"
+export default {
   props: ['foo', 'bar'],
   setup(__props) {
 
@@ -267,7 +272,7 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > non-identifier prop names 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
+"import { toDisplayString as _toDisplayString } from "vue"
 
 
 export default {
@@ -275,10 +280,10 @@ export default {
   setup(__props) {
 
       
-      let x = __props[\\"foo.bar\\"]
+      let x = __props["foo.bar"]
       
 return (_ctx, _cache) => {
-  return _toDisplayString(__props[\\"foo.bar\\"])
+  return _toDisplayString(__props["foo.bar"])
 }
 }
 
@@ -292,10 +297,26 @@ export default {
   props: ['foo', 'bar', 'baz'],
   setup(__props) {
 
-      const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"])
+      const rest = _createPropsRestProxy(__props, ["foo","bar"])
       
 return () => {}
 }
 
 }"
 `;
+
+exports[`sfc reactive props destructure > rest spread non-inline 1`] = `
+"import { createPropsRestProxy as _createPropsRestProxy } from 'vue'
+
+export default {
+  props: ['foo', 'bar'],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      const rest = _createPropsRestProxy(__props, ["foo"])
+      
+return { rest }
+}
+
+}"
+`;
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineSlots.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineSlots.spec.ts.snap
index 26e1a0c74..9d3e46698 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineSlots.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineSlots.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`defineSlots() > basic usage 1`] = `
 "import { useSlots as _useSlots, defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -33,7 +33,7 @@ return { slots }
 exports[`defineSlots() > w/o return value 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/hoistStatic.spec.ts.snap
index 307b3e212..7e795bf57 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/hoistStatic.spec.ts.snap
@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`sfc hoist static > should enable when only script setup 1`] = `
-"const foo = 'bar'
+"
+    const foo = 'bar'
     
 export default {
   setup(__props) {
@@ -70,7 +71,7 @@ return () => {}
 exports[`sfc hoist static > should not hoist a constant initialized to a reference value 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props) {
 
     const KEY1 = Boolean
@@ -91,7 +92,8 @@ return () => {}
 `;
 
 exports[`sfc hoist static > should not hoist a function or class 1`] = `
-"export default {
+"
+export default {
   setup(__props) {
 
     const fn = () => {}
@@ -105,7 +107,8 @@ return () => {}
 `;
 
 exports[`sfc hoist static > should not hoist a object or array 1`] = `
-"export default {
+"
+export default {
   setup(__props) {
 
     const obj = { foo: 'bar' }
@@ -118,7 +121,8 @@ return () => {}
 `;
 
 exports[`sfc hoist static > should not hoist a variable 1`] = `
-"export default {
+"
+export default {
   setup(__props) {
 
     let KEY1 = 'default value'
@@ -133,7 +137,8 @@ return () => {}
 `;
 
 exports[`sfc hoist static > should not hoist when disabled 1`] = `
-"export default {
+"
+export default {
   setup(__props) {
 
     const foo = 'bar'
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap
new file mode 100644
index 000000000..e64858744
--- /dev/null
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap
@@ -0,0 +1,200 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TS annotations 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz, Qux, Fred } from './x'
+    const a = 1
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    function b() {}
+    
+return { a, b, get Baz() { return Baz } }
+}
+
+})"
+`;
+
+exports[`attribute expressions 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { bar, baz } from './x'
+    const cond = true
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { cond, get bar() { return bar }, get baz() { return baz } }
+}
+
+})"
+`;
+
+exports[`components 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { FooBar, FooBaz, FooQux, foo } from './x'
+    const fooBar: FooBar = 1
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { fooBar, get FooBaz() { return FooBaz }, get FooQux() { return FooQux }, get foo() { return foo } }
+}
+
+})"
+`;
+
+exports[`directive 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { vMyDir } from './x'
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get vMyDir() { return vMyDir } }
+}
+
+})"
+`;
+
+exports[`dynamic arguments 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { FooBar, foo, bar, unused, baz, msg } from './x'
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz }, get msg() { return msg } }
+}
+
+})"
+`;
+
+exports[`js template string interpolations 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { VAR, VAR2, VAR3 } from './x'
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get VAR() { return VAR }, get VAR3() { return VAR3 } }
+}
+
+})"
+`;
+
+exports[`last tag 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { FooBaz, Last } from './x'
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get FooBaz() { return FooBaz }, get Last() { return Last } }
+}
+
+})"
+`;
+
+exports[`namespace / dot component usage 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import * as Foo from './foo'
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`property access (whitespace) 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz } from './foo'
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`property access 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz } from './foo'
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`spread operator 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz } from './foo'
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`template ref 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { foo, bar, Baz } from './foo'
+    
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }
+}
+
+})"
+`;
+
+exports[`vue interpolations 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { x, y, z, x$y } from './x'
+  
+export default /*@__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+  
+return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }
+}
+
+})"
+`;
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/reactivityTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/reactivityTransform.spec.ts.snap
deleted file mode 100644
index e20640d8a..000000000
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/reactivityTransform.spec.ts.snap
+++ /dev/null
@@ -1,113 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`sfc ref transform > $ unwrapping 1`] = `
-"import { ref, shallowRef } from 'vue'
-    
-export default {
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-    let foo = (ref())
-    let a = (ref(1))
-    let b = (shallowRef({
-      count: 0
-    }))
-    let c = () => {}
-    let d
-    
-return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d }, set d(v) { d = v }, ref, shallowRef }
-}
-
-}"
-`;
-
-exports[`sfc ref transform > $ref & $shallowRef declarations 1`] = `
-"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
-
-export default {
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-    let foo = _ref()
-    let a = _ref(1)
-    let b = _shallowRef({
-      count: 0
-    })
-    let c = () => {}
-    let d
-    
-return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d }, set d(v) { d = v } }
-}
-
-}"
-`;
-
-exports[`sfc ref transform > usage /w typescript 1`] = `
-"import { ref as _ref, defineComponent as _defineComponent } from 'vue'
-
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        let msg = _ref<string | number>('foo');
-        let bar = _ref <string | number>('bar');
-      
-return { msg, bar }
-}
-
-})"
-`;
-
-exports[`sfc ref transform > usage in normal <script> 1`] = `
-"import { ref as _ref } from 'vue'
-
-    export default {
-      setup() {
-        let count = _ref(0)
-        const inc = () => count.value++
-        return ({ count })
-      }
-    }
-    "
-`;
-
-exports[`sfc ref transform > usage with normal <script> (has macro usage) + <script setup> (no macro usage) 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let data = _ref()
-    
-export default {
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-    console.log(data.value)
-    
-return { data }
-}
-
-}"
-`;
-
-exports[`sfc ref transform > usage with normal <script> + <script setup> 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(0)
-    let c = _ref(0)
-    
-export default {
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-    let b = _ref(0)
-    let c = 0
-    function change() {
-      a.value++
-      b.value++
-      c++
-    }
-    
-return { a, c, b, change }
-}
-
-}"
-`;
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts
index cb14c1227..6de4b9923 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts
@@ -1,5 +1,5 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 describe('defineEmits', () => {
   test('basic usage', () => {
@@ -10,13 +10,13 @@ const myEmit = defineEmits(['foo', 'bar'])
   `)
     assertCode(content)
     expect(bindings).toStrictEqual({
-      myEmit: BindingTypes.SETUP_CONST
+      myEmit: BindingTypes.SETUP_CONST,
     })
     // should remove defineEmits import and call
     expect(content).not.toMatch('defineEmits')
     // should generate correct setup signature
     expect(content).toMatch(
-      `setup(__props, { expose: __expose, emit: __emit }) {`
+      `setup(__props, { expose: __expose, emit: __emit }) {`,
     )
     expect(content).toMatch('const myEmit = __emit')
     // should include context options in default export
@@ -31,7 +31,7 @@ const emit = defineEmits(['a', 'b'])
 </script>
     `)
     assertCode(content)
-    expect(content).toMatch(`export default /*#__PURE__*/_defineComponent({
+    expect(content).toMatch(`export default /*@__PURE__*/_defineComponent({
   emits: ['a', 'b'],
   setup(__props, { expose: __expose, emit: __emit }) {`)
     expect(content).toMatch('const emit = __emit')
@@ -244,9 +244,9 @@ const emit = defineEmits(['a', 'b'])
           foo: []
           (e: 'hi'): void
         }>()
-        </script>`)
+        </script>`),
       ).toThrow(
-        `defineEmits() type cannot mixed call signature and property syntax.`
+        `defineEmits() type cannot mixed call signature and property syntax.`,
       )
     })
   })
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineExpose.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineExpose.spec.ts
index 8ddd28a89..7b2a9f7cb 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineExpose.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineExpose.spec.ts
@@ -1,4 +1,4 @@
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 test('defineExpose()', () => {
   const { content } = compile(`
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
index 46890109c..5d696a95d 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
@@ -1,5 +1,5 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 describe('defineModel()', () => {
   test('basic usage', () => {
@@ -11,7 +11,6 @@ describe('defineModel()', () => {
       const toString = defineModel('toString', { type: Function })
       </script>
       `,
-      { defineModel: true }
     )
     assertCode(content)
     expect(content).toMatch('props: {')
@@ -19,12 +18,13 @@ describe('defineModel()', () => {
     expect(content).toMatch('"count": {},')
     expect(content).toMatch('"toString": { type: Function },')
     expect(content).toMatch(
-      'emits: ["update:modelValue", "update:count", "update:toString"],'
+      'emits: ["update:modelValue", "update:count", "update:toString"],',
     )
     expect(content).toMatch(
-      `const modelValue = _useModel(__props, "modelValue")`
+      `const modelValue = _useModel(__props, "modelValue")`,
     )
-    expect(content).toMatch(`const c = _useModel(__props, "count")`)
+    expect(content).toMatch(`const c = _useModel(__props, 'count')`)
+    expect(content).toMatch(`const toString = _useModel(__props, 'toString')`)
     expect(content).toMatch(`return { modelValue, c, toString }`)
     expect(content).not.toMatch('defineModel')
 
@@ -32,7 +32,7 @@ describe('defineModel()', () => {
       modelValue: BindingTypes.SETUP_REF,
       count: BindingTypes.PROPS,
       c: BindingTypes.SETUP_REF,
-      toString: BindingTypes.SETUP_REF
+      toString: BindingTypes.SETUP_REF,
     })
   })
 
@@ -45,17 +45,16 @@ describe('defineModel()', () => {
       const count = defineModel({ default: 0 })
       </script>
     `,
-      { defineModel: true }
     )
     assertCode(content)
-    expect(content).toMatch(`props: /*#__PURE__*/_mergeModels({ foo: String }`)
+    expect(content).toMatch(`props: /*@__PURE__*/_mergeModels({ foo: String }`)
     expect(content).toMatch(`"modelValue": { default: 0 }`)
     expect(content).toMatch(`const count = _useModel(__props, "modelValue")`)
     expect(content).not.toMatch('defineModel')
     expect(bindings).toStrictEqual({
       count: BindingTypes.SETUP_REF,
       foo: BindingTypes.PROPS,
-      modelValue: BindingTypes.PROPS
+      modelValue: BindingTypes.PROPS,
     })
   })
 
@@ -67,45 +66,21 @@ describe('defineModel()', () => {
       const count = defineModel('count')
       </script>
     `,
-      { defineModel: true }
     )
     assertCode(content)
-    expect(content).toMatch(`props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
+    expect(content).toMatch(`props: /*@__PURE__*/_mergeModels(['foo', 'bar'], {
     "count": {},
+    "countModifiers": {},
   })`)
-    expect(content).toMatch(`const count = _useModel(__props, "count")`)
+    expect(content).toMatch(`const count = _useModel(__props, 'count')`)
     expect(content).not.toMatch('defineModel')
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS,
-      count: BindingTypes.SETUP_REF
+      count: BindingTypes.SETUP_REF,
     })
   })
 
-  test('w/ local flag', () => {
-    const { content } = compile(
-      `<script setup>
-      const foo = defineModel({ local: true, default: 1 })
-      const bar = defineModel('bar', { [key]: true })
-      const baz = defineModel('baz', { ...x })
-      const qux = defineModel('qux', x)
-
-      const foo2 = defineModel('foo2', { local: true, ...x })
-
-      const local = true
-      const hoist = defineModel('hoist', { local })
-      </script>`,
-      { defineModel: true }
-    )
-    assertCode(content)
-    expect(content).toMatch(`_useModel(__props, "modelValue", { local: true })`)
-    expect(content).toMatch(`_useModel(__props, "bar", { [key]: true })`)
-    expect(content).toMatch(`_useModel(__props, "baz", { ...x })`)
-    expect(content).toMatch(`_useModel(__props, "qux", x)`)
-    expect(content).toMatch(`_useModel(__props, "foo2", { local: true })`)
-    expect(content).toMatch(`_useModel(__props, "hoist", { local })`)
-  })
-
   test('w/ types, basic usage', () => {
     const { content, bindings } = compile(
       `
@@ -116,31 +91,35 @@ describe('defineModel()', () => {
       const any = defineModel<any | boolean>('any')
       </script>
       `,
-      { defineModel: true }
     )
     assertCode(content)
     expect(content).toMatch('"modelValue": { type: [Boolean, String] }')
+    expect(content).toMatch('"modelModifiers": {}')
     expect(content).toMatch('"count": { type: Number }')
     expect(content).toMatch(
-      '"disabled": { type: Number, ...{ required: false } }'
+      '"disabled": { type: Number, ...{ required: false } }',
     )
     expect(content).toMatch('"any": { type: Boolean, skipCheck: true }')
     expect(content).toMatch(
-      'emits: ["update:modelValue", "update:count", "update:disabled", "update:any"]'
+      'emits: ["update:modelValue", "update:count", "update:disabled", "update:any"]',
     )
 
     expect(content).toMatch(
-      `const modelValue = _useModel(__props, "modelValue")`
+      `const modelValue = _useModel<boolean | string>(__props, "modelValue")`,
+    )
+    expect(content).toMatch(`const count = _useModel<number>(__props, 'count')`)
+    expect(content).toMatch(
+      `const disabled = _useModel<number>(__props, 'disabled')`,
+    )
+    expect(content).toMatch(
+      `const any = _useModel<any | boolean>(__props, 'any')`,
     )
-    expect(content).toMatch(`const count = _useModel(__props, "count")`)
-    expect(content).toMatch(`const disabled = _useModel(__props, "disabled")`)
-    expect(content).toMatch(`const any = _useModel(__props, "any")`)
 
     expect(bindings).toStrictEqual({
       modelValue: BindingTypes.SETUP_REF,
       count: BindingTypes.SETUP_REF,
       disabled: BindingTypes.SETUP_REF,
-      any: BindingTypes.SETUP_REF
+      any: BindingTypes.SETUP_REF,
     })
   })
 
@@ -155,30 +134,139 @@ describe('defineModel()', () => {
       const optional = defineModel<string>('optional', { required: false })
       </script>
       `,
-      { defineModel: true, isProd: true }
+      { isProd: true },
     )
     assertCode(content)
     expect(content).toMatch('"modelValue": { type: Boolean }')
     expect(content).toMatch('"fn": {}')
     expect(content).toMatch(
-      '"fnWithDefault": { type: Function, ...{ default: () => null } },'
+      '"fnWithDefault": { type: Function, ...{ default: () => null } },',
     )
     expect(content).toMatch('"str": {}')
     expect(content).toMatch('"optional": { required: false }')
     expect(content).toMatch(
-      'emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"]'
+      'emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"]',
     )
     expect(content).toMatch(
-      `const modelValue = _useModel(__props, "modelValue")`
+      `const modelValue = _useModel<boolean>(__props, "modelValue")`,
     )
-    expect(content).toMatch(`const fn = _useModel(__props, "fn")`)
-    expect(content).toMatch(`const str = _useModel(__props, "str")`)
+    expect(content).toMatch(`const fn = _useModel<() => void>(__props, 'fn')`)
+    expect(content).toMatch(`const str = _useModel<string>(__props, 'str')`)
     expect(bindings).toStrictEqual({
       modelValue: BindingTypes.SETUP_REF,
       fn: BindingTypes.SETUP_REF,
       fnWithDefault: BindingTypes.SETUP_REF,
       str: BindingTypes.SETUP_REF,
-      optional: BindingTypes.SETUP_REF
+      optional: BindingTypes.SETUP_REF,
+    })
+  })
+
+  test('w/ types, production mode, boolean + multiple types', () => {
+    const { content } = compile(
+      `
+      <script setup lang="ts">
+      const modelValue = defineModel<boolean | string | {}>()
+      </script>
+      `,
+      { isProd: true },
+    )
+    assertCode(content)
+    expect(content).toMatch('"modelValue": { type: [Boolean, String, Object] }')
+  })
+
+  test('w/ types, production mode, function + runtime opts + multiple types', () => {
+    const { content } = compile(
+      `
+      <script setup lang="ts">
+      const modelValue = defineModel<number | (() => number)>({ default: () => 1 })
+      </script>
+      `,
+      { isProd: true },
+    )
+    assertCode(content)
+    expect(content).toMatch(
+      '"modelValue": { type: [Number, Function], ...{ default: () => 1 } }',
+    )
+  })
+
+  test('get / set transformers', () => {
+    const { content } = compile(
+      `
+      <script setup lang="ts">
+      const modelValue = defineModel({
+        get(v) { return v - 1 },
+        set: (v) => { return v + 1 },
+        required: true
+      })
+      </script>
+      `,
+    )
+    assertCode(content)
+    expect(content).toMatch(/"modelValue": {\s+required: true,?\s+}/m)
+    expect(content).toMatch(
+      `_useModel(__props, "modelValue", {
+        get(v) { return v - 1 },
+        set: (v) => { return v + 1 },
+        })`,
+    )
+
+    const { content: content2 } = compile(
+      `
+      <script setup lang="ts">
+      const modelValue = defineModel({
+        default: 0,
+        get(v) { return v - 1 },
+        required: true,
+        set: (v) => { return v + 1 },
+      })
+      </script>
+      `,
+    )
+    assertCode(content2)
+    expect(content2).toMatch(
+      /"modelValue": {\s+default: 0,\s+required: true,?\s+}/m,
+    )
+    expect(content2).toMatch(
+      `_useModel(__props, "modelValue", {
+        get(v) { return v - 1 },
+        set: (v) => { return v + 1 },
+      })`,
+    )
+  })
+
+  test('usage w/ props destructure', () => {
+    const { content } = compile(
+      `
+      <script setup lang="ts">
+      const { x } = defineProps<{ x: number }>()
+      const modelValue = defineModel({
+        set: (v) => { return v + x }
+      })
+      </script>
+      `,
+      { propsDestructure: true },
+    )
+    assertCode(content)
+    expect(content).toMatch(`set: (v) => { return v + __props.x }`)
+  })
+
+  test('w/ Boolean And Function types, production mode', () => {
+    const { content, bindings } = compile(
+      `
+      <script setup lang="ts">
+      const modelValue = defineModel<boolean | string>()
+      </script>
+      `,
+      { isProd: true },
+    )
+    assertCode(content)
+    expect(content).toMatch('"modelValue": { type: [Boolean, String] }')
+    expect(content).toMatch('emits: ["update:modelValue"]')
+    expect(content).toMatch(
+      `const modelValue = _useModel<boolean | string>(__props, "modelValue")`,
+    )
+    expect(bindings).toStrictEqual({
+      modelValue: BindingTypes.SETUP_REF,
     })
   })
 })
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineOptions.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineOptions.spec.ts
index e4f50be38..286f1e11b 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineOptions.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineOptions.spec.ts
@@ -1,4 +1,4 @@
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 describe('defineOptions()', () => {
   test('basic usage', () => {
@@ -12,7 +12,7 @@ describe('defineOptions()', () => {
     expect(content).not.toMatch('defineOptions')
     // should include context options in default export
     expect(content).toMatch(
-      `export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, `
+      `export default /*@__PURE__*/Object.assign({ name: 'FooApp' }, `,
     )
   })
 
@@ -35,7 +35,7 @@ describe('defineOptions()', () => {
       defineOptions({ name: 'FooApp' })
       defineOptions({ name: 'BarApp' })
       </script>
-      `)
+      `),
     ).toThrowError('[@vue/compiler-sfc] duplicate defineOptions() call')
   })
 
@@ -45,9 +45,9 @@ describe('defineOptions()', () => {
       <script setup>
       defineOptions({ props: { foo: String } })
       </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead.'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead.',
     )
 
     expect(() =>
@@ -55,9 +55,9 @@ describe('defineOptions()', () => {
       <script setup>
       defineOptions({ emits: ['update'] })
       </script>
-    `)
+    `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare emits. Use defineEmits() instead.'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare emits. Use defineEmits() instead.',
     )
 
     expect(() =>
@@ -65,9 +65,9 @@ describe('defineOptions()', () => {
       <script setup>
       defineOptions({ expose: ['foo'] })
       </script>
-    `)
+    `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare expose. Use defineExpose() instead.'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare expose. Use defineExpose() instead.',
     )
 
     expect(() =>
@@ -75,9 +75,9 @@ describe('defineOptions()', () => {
       <script setup>
       defineOptions({ slots: ['foo'] })
       </script>
-    `)
+    `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare slots. Use defineSlots() instead.'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare slots. Use defineSlots() instead.',
     )
   })
 
@@ -87,9 +87,9 @@ describe('defineOptions()', () => {
       <script setup lang="ts">
       defineOptions<{ name: 'FooApp' }>()
       </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot accept type arguments'
+      '[@vue/compiler-sfc] defineOptions() cannot accept type arguments',
     )
   })
 
@@ -99,9 +99,9 @@ describe('defineOptions()', () => {
       <script setup lang="ts">
       defineOptions({ props: [] } as any)
       </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead.'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead.',
     )
   })
 
@@ -111,9 +111,9 @@ describe('defineOptions()', () => {
         <script setup>
         defineOptions({ props: ['foo'] })
         </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead',
     )
 
     expect(() =>
@@ -121,9 +121,9 @@ describe('defineOptions()', () => {
         <script setup>
         defineOptions({ emits: ['update'] })
         </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare emits. Use defineEmits() instead'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare emits. Use defineEmits() instead',
     )
 
     expect(() =>
@@ -131,9 +131,9 @@ describe('defineOptions()', () => {
         <script setup>
         defineOptions({ expose: ['foo'] })
         </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare expose. Use defineExpose() instead'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare expose. Use defineExpose() instead',
     )
 
     expect(() =>
@@ -141,9 +141,9 @@ describe('defineOptions()', () => {
         <script setup lang="ts">
         defineOptions({ slots: Object })
         </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare slots. Use defineSlots() instead'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare slots. Use defineSlots() instead',
     )
   })
 })
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
index 23d6a806f..c9ef103c4 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
@@ -1,5 +1,5 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 describe('defineProps', () => {
   test('basic usage', () => {
@@ -17,7 +17,7 @@ const bar = 1
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
       bar: BindingTypes.LITERAL_CONST,
-      props: BindingTypes.SETUP_REACTIVE_CONST
+      props: BindingTypes.SETUP_REACTIVE_CONST,
     })
 
     // should remove defineOptions import and call
@@ -64,7 +64,7 @@ const props = defineProps({ foo: String })
 </script>
     `)
     assertCode(content)
-    expect(content).toMatch(`export default /*#__PURE__*/_defineComponent({
+    expect(content).toMatch(`export default /*@__PURE__*/_defineComponent({
   props: { foo: String },
   setup(__props, { expose: __expose }) {`)
   })
@@ -146,11 +146,11 @@ const props = defineProps({ foo: String })
     expect(content).toMatch(`symbol: { type: Symbol, required: true }`)
     expect(content).toMatch(`error: { type: Error, required: true }`)
     expect(content).toMatch(
-      `objectOrFn: { type: [Function, Object], required: true },`
+      `objectOrFn: { type: [Function, Object], required: true },`,
     )
     expect(content).toMatch(`extract: { type: Number, required: true }`)
     expect(content).toMatch(
-      `exclude: { type: [Number, Boolean], required: true }`
+      `exclude: { type: [Number, Boolean], required: true }`,
     )
     expect(content).toMatch(`uppercase: { type: String, required: true }`)
     expect(content).toMatch(`params: { type: Array, required: true }`)
@@ -158,10 +158,10 @@ const props = defineProps({ foo: String })
     expect(content).toMatch(`union: { type: [String, Number], required: true }`)
     expect(content).toMatch(`literalUnion: { type: String, required: true }`)
     expect(content).toMatch(
-      `literalUnionNumber: { type: Number, required: true }`
+      `literalUnionNumber: { type: Number, required: true }`,
     )
     expect(content).toMatch(
-      `literalUnionMixed: { type: [String, Number, Boolean], required: true }`
+      `literalUnionMixed: { type: [String, Number, Boolean], required: true }`,
     )
     expect(content).toMatch(`intersection: { type: Object, required: true }`)
     expect(content).toMatch(`intersection2: { type: String, required: true }`)
@@ -171,13 +171,13 @@ const props = defineProps({ foo: String })
     expect(content).toMatch(`unknownUnion: { type: null, required: true }`)
     // intersection containing unknown type: narrow to the known types
     expect(content).toMatch(
-      `unknownIntersection: { type: Object, required: true },`
+      `unknownIntersection: { type: Object, required: true },`,
     )
     expect(content).toMatch(
-      `unknownUnionWithBoolean: { type: Boolean, required: true, skipCheck: true },`
+      `unknownUnionWithBoolean: { type: Boolean, required: true, skipCheck: true },`,
     )
     expect(content).toMatch(
-      `unknownUnionWithFunction: { type: Function, required: true, skipCheck: true }`
+      `unknownUnionWithFunction: { type: Function, required: true, skipCheck: true }`,
     )
     expect(bindings).toStrictEqual({
       string: BindingTypes.PROPS,
@@ -218,7 +218,7 @@ const props = defineProps({ foo: String })
       unknownUnion: BindingTypes.PROPS,
       unknownIntersection: BindingTypes.PROPS,
       unknownUnionWithBoolean: BindingTypes.PROPS,
-      unknownUnionWithFunction: BindingTypes.PROPS
+      unknownUnionWithFunction: BindingTypes.PROPS,
     })
   })
 
@@ -232,7 +232,7 @@ const props = defineProps({ foo: String })
     assertCode(content)
     expect(content).toMatch(`x: { type: Number, required: false }`)
     expect(bindings).toStrictEqual({
-      x: BindingTypes.PROPS
+      x: BindingTypes.PROPS,
     })
   })
 
@@ -257,7 +257,7 @@ const props = defineProps({ foo: String })
     expect(bindings).toStrictEqual({
       x: BindingTypes.PROPS,
       y: BindingTypes.PROPS,
-      z: BindingTypes.PROPS
+      z: BindingTypes.PROPS,
     })
   })
 
@@ -271,7 +271,7 @@ const props = defineProps({ foo: String })
     assertCode(content)
     expect(content).toMatch(`x: { type: Number, required: false }`)
     expect(bindings).toStrictEqual({
-      x: BindingTypes.PROPS
+      x: BindingTypes.PROPS,
     })
   })
 
@@ -287,7 +287,7 @@ const props = defineProps({ foo: String })
     assertCode(content)
     expect(content).toMatch(`x: { type: Number, required: false }`)
     expect(bindings).toStrictEqual({
-      x: BindingTypes.PROPS
+      x: BindingTypes.PROPS,
     })
   })
 
@@ -301,7 +301,7 @@ const props = defineProps({ foo: String })
     assertCode(content)
     expect(content).toMatch(`x: { type: Number, required: false }`)
     expect(bindings).toStrictEqual({
-      x: BindingTypes.PROPS
+      x: BindingTypes.PROPS,
     })
   })
 
@@ -315,7 +315,7 @@ const props = defineProps({ foo: String })
     assertCode(content)
     expect(content).toMatch(`x: { type: Number, required: false }`)
     expect(bindings).toStrictEqual({
-      x: BindingTypes.PROPS
+      x: BindingTypes.PROPS,
     })
   })
 
@@ -328,7 +328,7 @@ const props = defineProps({ foo: String })
     expect(content).toMatch(`props: ['foo']`)
     assertCode(content)
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.PROPS
+      foo: BindingTypes.PROPS,
     })
   })
 
@@ -354,21 +354,21 @@ const props = defineProps({ foo: String })
     `)
     assertCode(content)
     expect(content).toMatch(
-      `foo: { type: String, required: false, default: 'hi' }`
+      `foo: { type: String, required: false, default: 'hi' }`,
     )
     expect(content).toMatch(`bar: { type: Number, required: false }`)
     expect(content).toMatch(`baz: { type: Boolean, required: true }`)
     expect(content).toMatch(
-      `qux: { type: Function, required: false, default() { return 1 } }`
+      `qux: { type: Function, required: false, default() { return 1 } }`,
     )
     expect(content).toMatch(
-      `quux: { type: Function, required: false, default() { } }`
+      `quux: { type: Function, required: false, default() { } }`,
     )
     expect(content).toMatch(
-      `quuxx: { type: Promise, required: false, async default() { return await Promise.resolve('hi') } }`
+      `quuxx: { type: Promise, required: false, async default() { return await Promise.resolve('hi') } }`,
     )
     expect(content).toMatch(
-      `fred: { type: String, required: false, get default() { return 'fred' } }`
+      `fred: { type: String, required: false, get default() { return 'fred' } }`,
     )
     expect(content).toMatch(`const props = __props`)
     expect(bindings).toStrictEqual({
@@ -379,7 +379,7 @@ const props = defineProps({ foo: String })
       quux: BindingTypes.PROPS,
       quuxx: BindingTypes.PROPS,
       fred: BindingTypes.PROPS,
-      props: BindingTypes.SETUP_CONST
+      props: BindingTypes.SETUP_CONST,
     })
   })
 
@@ -415,7 +415,7 @@ const props = defineProps({ foo: String })
     })
     </script>
     `,
-      { isProd: true }
+      { isProd: true },
     )
     assertCode(content)
     expect(content).toMatch(`const props = __props`)
@@ -446,7 +446,7 @@ const props = defineProps({ foo: String })
     foo: { type: String, required: false },
     bar: { type: Number, required: false },
     baz: { type: Boolean, required: true }
-  }, { ...defaults })`.trim()
+  }, { ...defaults })`.trim(),
     )
   })
 
@@ -469,7 +469,7 @@ const props = defineProps({ foo: String })
     foo: { type: String, required: false },
     bar: { type: Number, required: false },
     baz: { type: Boolean, required: true }
-  }, defaults)`.trim()
+  }, defaults)`.trim(),
     )
   })
 
@@ -487,7 +487,7 @@ const props = defineProps({ foo: String })
     }>(), { ...defaults })
     </script>
     `,
-      { isProd: true }
+      { isProd: true },
     )
     assertCode(content)
     expect(content).toMatch(`import { mergeDefaults as _mergeDefaults`)
@@ -498,7 +498,7 @@ const props = defineProps({ foo: String })
     bar: { type: Boolean },
     baz: { type: [Boolean, Function] },
     qux: {}
-  }, { ...defaults })`.trim()
+  }, { ...defaults })`.trim(),
     )
   })
 
@@ -520,7 +520,7 @@ const props = defineProps({ foo: String })
     foo: { type: Function, required: false }
   }, {
       ['fo' + 'o']() { return 'foo' }
-    })`.trim()
+    })`.trim(),
     )
   })
 
@@ -533,8 +533,8 @@ const props = defineProps({ foo: String })
         foo: Foo
       }>()
       </script>`,
-        { hoistStatic: true }
-      ).content
+        { hoistStatic: true },
+      ).content,
     ).toMatch(`foo: { type: Number`)
 
     expect(
@@ -545,8 +545,8 @@ const props = defineProps({ foo: String })
         foo: Foo
       }>()
       </script>`,
-        { hoistStatic: true }
-      ).content
+        { hoistStatic: true },
+      ).content,
     ).toMatch(`foo: { type: String`)
 
     expect(
@@ -557,8 +557,8 @@ const props = defineProps({ foo: String })
         foo: Foo
       }>()
       </script>`,
-        { hoistStatic: true }
-      ).content
+        { hoistStatic: true },
+      ).content,
     ).toMatch(`foo: { type: [String, Number]`)
 
     expect(
@@ -569,8 +569,8 @@ const props = defineProps({ foo: String })
         foo: Foo
       }>()
       </script>`,
-        { hoistStatic: true }
-      ).content
+        { hoistStatic: true },
+      ).content,
     ).toMatch(`foo: { type: Number`)
   })
 
@@ -585,23 +585,45 @@ const props = defineProps({ foo: String })
   `)
     expect(bindings).toStrictEqual({
       bar: BindingTypes.SETUP_REF,
-      computed: BindingTypes.SETUP_CONST
+      computed: BindingTypes.SETUP_CONST,
     })
   })
 
   // #8289
   test('destructure without enabling reactive destructure', () => {
-    const { content } = compile(
+    const { content, bindings } = compile(
       `<script setup lang="ts">
       const { foo } = defineProps<{
         foo: Foo
       }>()
-      </script>`
+      </script>`,
+      {
+        propsDestructure: false,
+      },
     )
     expect(content).toMatch(`const { foo } = __props`)
+    expect(content).toMatch(`return { foo }`)
+    expect(bindings).toStrictEqual({
+      foo: BindingTypes.SETUP_CONST,
+    })
     assertCode(content)
   })
 
+  test('prohibiting reactive destructure', () => {
+    expect(() =>
+      compile(
+        `<script setup lang="ts">
+      const { foo } = defineProps<{
+        foo: Foo
+      }>()
+      </script>`,
+        {
+          propsDestructure: 'error',
+        },
+      ),
+    ).toThrow()
+  })
+
   describe('errors', () => {
     test('w/ both type and non-type args', () => {
       expect(() => {
@@ -649,7 +671,7 @@ const props = defineProps({ foo: String })
     assertCode(content)
     expect(content).toMatch(`"spa ce": { type: null, required: true }`)
     expect(content).toMatch(
-      `"exclamation!mark": { type: null, required: true }`
+      `"exclamation!mark": { type: null, required: true }`,
     )
     expect(content).toMatch(`"double\\"quote": { type: null, required: true }`)
     expect(content).toMatch(`"hash#tag": { type: null, required: true }`)
@@ -670,7 +692,7 @@ const props = defineProps({ foo: String })
     expect(content).toMatch(`"question?mark": { type: null, required: true }`)
     expect(content).toMatch(`"at@sign": { type: null, required: true }`)
     expect(content).toMatch(
-      `"square[brack]ets": { type: null, required: true }`
+      `"square[brack]ets": { type: null, required: true }`,
     )
     expect(content).toMatch(`"back\\\\slash": { type: null, required: true }`)
     expect(content).toMatch(`"ca^ret": { type: null, required: true }`)
@@ -707,7 +729,38 @@ const props = defineProps({ foo: String })
       'curly{bra}ces': BindingTypes.PROPS,
       'pi|pe': BindingTypes.PROPS,
       'til~de': BindingTypes.PROPS,
-      'da-sh': BindingTypes.PROPS
+      'da-sh': BindingTypes.PROPS,
     })
   })
+
+  // #8989
+  test('custom element retains the props type & production mode', () => {
+    const { content } = compile(
+      `<script setup lang="ts">
+      const props = defineProps<{ foo: number}>()
+      </script>`,
+      { isProd: true, customElement: filename => /\.ce\.vue$/.test(filename) },
+      { filename: 'app.ce.vue' },
+    )
+
+    expect(content).toMatch(`foo: {type: Number}`)
+    assertCode(content)
+  })
+
+  test('custom element retains the props type & default value & production mode', () => {
+    const { content } = compile(
+      `<script setup lang="ts">
+      interface Props { 
+          foo?: number;
+      }
+      const props = withDefaults(defineProps<Props>(), {
+          foo: 5.5,
+      });
+      </script>`,
+      { isProd: true, customElement: filename => /\.ce\.vue$/.test(filename) },
+      { filename: 'app.ce.vue' },
+    )
+    expect(content).toMatch(`foo: { default: 5.5, type: Number }`)
+    assertCode(content)
+  })
 })
diff --git a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
index 89cc31340..106e469f1 100644
--- a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
@@ -1,13 +1,12 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { SFCScriptCompileOptions } from '../../src'
-import { compileSFCScript, assertCode } from '../utils'
+import type { SFCScriptCompileOptions } from '../../src'
+import { assertCode, compileSFCScript } from '../utils'
 
 describe('sfc reactive props destructure', () => {
   function compile(src: string, options?: Partial<SFCScriptCompileOptions>) {
     return compileSFCScript(src, {
       inlineTemplate: true,
-      propsDestructure: true,
-      ...options
+      ...options,
     })
   }
 
@@ -24,7 +23,7 @@ describe('sfc reactive props destructure', () => {
     expect(content).toMatch(`_toDisplayString(__props.foo)`)
     assertCode(content)
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.PROPS
+      foo: BindingTypes.PROPS,
     })
   })
 
@@ -44,7 +43,7 @@ describe('sfc reactive props destructure', () => {
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
       bar: BindingTypes.LITERAL_CONST,
-      hello: BindingTypes.LITERAL_CONST
+      hello: BindingTypes.LITERAL_CONST,
     })
   })
 
@@ -65,7 +64,7 @@ describe('sfc reactive props destructure', () => {
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS,
-      test: BindingTypes.SETUP_CONST
+      test: BindingTypes.SETUP_CONST,
     })
   })
 
@@ -79,7 +78,7 @@ describe('sfc reactive props destructure', () => {
     // function
     // functions need to be marked with a skip marker
     expect(content)
-      .toMatch(`props: /*#__PURE__*/_mergeDefaults(['foo', 'bar', 'baz'], {
+      .toMatch(`props: /*@__PURE__*/_mergeDefaults(['foo', 'bar', 'baz'], {
   foo: 1,
   bar: () => ({}),
   func: () => {}, __skip_func: true
@@ -99,7 +98,7 @@ describe('sfc reactive props destructure', () => {
     // safely infer whether runtime type is Function (e.g. if the runtime decl
     // is imported, or spreads another object)
     expect(content)
-      .toMatch(`props: /*#__PURE__*/_mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
+      .toMatch(`props: /*@__PURE__*/_mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
   foo: 1,
   bar: () => ({}),
   func: () => {}, __skip_func: true,
@@ -115,15 +114,15 @@ describe('sfc reactive props destructure', () => {
     `)
     expect(bindings).toStrictEqual({
       __propsAliases: {
-        fooBar: 'foo:bar'
+        fooBar: 'foo:bar',
       },
       foo: BindingTypes.PROPS,
       'foo:bar': BindingTypes.PROPS,
-      fooBar: BindingTypes.PROPS_ALIASED
+      fooBar: BindingTypes.PROPS_ALIASED,
     })
 
     expect(content).toMatch(`
-  props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
+  props: /*@__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
   foo: 1,
   "foo:bar": 'foo-bar'
 }),`)
@@ -159,13 +158,13 @@ describe('sfc reactive props destructure', () => {
     `)
     expect(bindings).toStrictEqual({
       __propsAliases: {
-        fooBar: 'foo:bar'
+        fooBar: 'foo:bar',
       },
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS,
       'foo:bar': BindingTypes.PROPS,
       fooBar: BindingTypes.PROPS_ALIASED,
-      'onUpdate:modelValue': BindingTypes.PROPS
+      'onUpdate:modelValue': BindingTypes.PROPS,
     })
     expect(content).toMatch(`
   props: {
@@ -184,7 +183,7 @@ describe('sfc reactive props destructure', () => {
       const { foo = 1, bar = {}, func = () => {} } = defineProps<{ foo?: number, bar?: object, baz?: any, boola?: boolean, boolb?: boolean | number, func?: Function }>()
       </script>
     `,
-      { isProd: true }
+      { isProd: true },
     )
     assertCode(content)
     // literals can be used as-is, non-literals are always returned from a
@@ -220,8 +219,8 @@ describe('sfc reactive props destructure', () => {
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS_ALIASED,
       __propsAliases: {
-        bar: 'foo'
-      }
+        bar: 'foo',
+      },
     })
   })
 
@@ -242,8 +241,8 @@ describe('sfc reactive props destructure', () => {
       'foo.bar': BindingTypes.PROPS,
       fooBar: BindingTypes.PROPS_ALIASED,
       __propsAliases: {
-        fooBar: 'foo.bar'
-      }
+        fooBar: 'foo.bar',
+      },
     })
   })
 
@@ -254,14 +253,35 @@ describe('sfc reactive props destructure', () => {
       </script>
     `)
     expect(content).toMatch(
-      `const rest = _createPropsRestProxy(__props, ["foo","bar"])`
+      `const rest = _createPropsRestProxy(__props, ["foo","bar"])`,
     )
     assertCode(content)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS,
       baz: BindingTypes.PROPS,
-      rest: BindingTypes.SETUP_REACTIVE_CONST
+      rest: BindingTypes.SETUP_REACTIVE_CONST,
+    })
+  })
+
+  test('rest spread non-inline', () => {
+    const { content, bindings } = compile(
+      `
+      <script setup>
+      const { foo, ...rest } = defineProps(['foo', 'bar'])
+      </script>
+      <template>{{ rest.bar }}</template>
+    `,
+      { inlineTemplate: false },
+    )
+    expect(content).toMatch(
+      `const rest = _createPropsRestProxy(__props, ["foo"])`,
+    )
+    assertCode(content)
+    expect(bindings).toStrictEqual({
+      foo: BindingTypes.PROPS,
+      bar: BindingTypes.PROPS,
+      rest: BindingTypes.SETUP_REACTIVE_CONST,
     })
   })
 
@@ -279,7 +299,7 @@ describe('sfc reactive props destructure', () => {
     expect(content).toMatch(`_toDisplayString(__props.foo)`)
     assertCode(content)
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.PROPS
+      foo: BindingTypes.PROPS,
     })
   })
 
@@ -339,33 +359,34 @@ describe('sfc reactive props destructure', () => {
     test('should error on deep destructure', () => {
       expect(() =>
         compile(
-          `<script setup>const { foo: [bar] } = defineProps(['foo'])</script>`
-        )
+          `<script setup>const { foo: [bar] } = defineProps(['foo'])</script>`,
+        ),
       ).toThrow(`destructure does not support nested patterns`)
 
       expect(() =>
         compile(
-          `<script setup>const { foo: { bar } } = defineProps(['foo'])</script>`
-        )
+          `<script setup>const { foo: { bar } } = defineProps(['foo'])</script>`,
+        ),
       ).toThrow(`destructure does not support nested patterns`)
     })
 
     test('should error on computed key', () => {
       expect(() =>
         compile(
-          `<script setup>const { [foo]: bar } = defineProps(['foo'])</script>`
-        )
+          `<script setup>const { [foo]: bar } = defineProps(['foo'])</script>`,
+        ),
       ).toThrow(`destructure cannot use computed key`)
     })
 
-    test('should error when used with withDefaults', () => {
-      expect(() =>
-        compile(
-          `<script setup lang="ts">
-          const { foo } = withDefaults(defineProps<{ foo: string }>(), { foo: 'foo' })
-          </script>`
-        )
-      ).toThrow(`withDefaults() is unnecessary when using destructure`)
+    test('should warn when used with withDefaults', () => {
+      compile(
+        `<script setup lang="ts">
+        const { foo } = withDefaults(defineProps<{ foo: string }>(), { foo: 'foo' })
+        </script>`,
+      )
+      expect(
+        `withDefaults() is unnecessary when using destructure`,
+      ).toHaveBeenWarned()
     })
 
     test('should error if destructure reference local vars', () => {
@@ -376,8 +397,8 @@ describe('sfc reactive props destructure', () => {
           const {
             foo = () => x
           } = defineProps(['foo'])
-          </script>`
-        )
+          </script>`,
+        ),
       ).toThrow(`cannot reference locally declared variables`)
     })
 
@@ -387,8 +408,8 @@ describe('sfc reactive props destructure', () => {
           `<script setup>
           const { foo } = defineProps(['foo'])
           foo = 'bar'
-          </script>`
-        )
+          </script>`,
+        ),
       ).toThrow(`Cannot assign to destructured props`)
 
       expect(() =>
@@ -396,8 +417,8 @@ describe('sfc reactive props destructure', () => {
           `<script setup>
           let { foo } = defineProps(['foo'])
           foo = 'bar'
-          </script>`
-        )
+          </script>`,
+        ),
       ).toThrow(`Cannot assign to destructured props`)
     })
 
@@ -408,10 +429,10 @@ describe('sfc reactive props destructure', () => {
         import { watch } from 'vue'
         const { foo } = defineProps(['foo'])
         watch(foo, () => {})
-        </script>`
-        )
+        </script>`,
+        ),
       ).toThrow(
-        `"foo" is a destructured prop and should not be passed directly to watch().`
+        `"foo" is a destructured prop and should not be passed directly to watch().`,
       )
 
       expect(() =>
@@ -420,10 +441,10 @@ describe('sfc reactive props destructure', () => {
         import { watch as w } from 'vue'
         const { foo } = defineProps(['foo'])
         w(foo, () => {})
-        </script>`
-        )
+        </script>`,
+        ),
       ).toThrow(
-        `"foo" is a destructured prop and should not be passed directly to watch().`
+        `"foo" is a destructured prop and should not be passed directly to watch().`,
       )
 
       expect(() =>
@@ -432,10 +453,10 @@ describe('sfc reactive props destructure', () => {
         import { toRef } from 'vue'
         const { foo } = defineProps(['foo'])
         toRef(foo)
-        </script>`
-        )
+        </script>`,
+        ),
       ).toThrow(
-        `"foo" is a destructured prop and should not be passed directly to toRef().`
+        `"foo" is a destructured prop and should not be passed directly to toRef().`,
       )
 
       expect(() =>
@@ -444,10 +465,10 @@ describe('sfc reactive props destructure', () => {
         import { toRef as r } from 'vue'
         const { foo } = defineProps(['foo'])
         r(foo)
-        </script>`
-        )
+        </script>`,
+        ),
       ).toThrow(
-        `"foo" is a destructured prop and should not be passed directly to toRef().`
+        `"foo" is a destructured prop and should not be passed directly to toRef().`,
       )
     })
 
@@ -457,8 +478,8 @@ describe('sfc reactive props destructure', () => {
         compile(
           `<script setup lang="ts">
         const { foo = 'hello' } = defineProps<{ foo?: number }>()
-        </script>`
-        )
+        </script>`,
+        ),
       ).toThrow(`Default value of prop "foo" does not match declared type.`)
     })
 
@@ -472,8 +493,8 @@ describe('sfc reactive props destructure', () => {
         const { error: e, info } = useRequest();
         watch(e, () => {});
         watch(info, () => {});
-        </script>`
-        )
+        </script>`,
+        ),
       ).not.toThrowError()
     })
   })
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineSlots.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineSlots.spec.ts
index c7becacc0..357709afd 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineSlots.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineSlots.spec.ts
@@ -1,4 +1,4 @@
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 describe('defineSlots()', () => {
   test('basic usage', () => {
diff --git a/packages/compiler-sfc/__tests__/compileScript/hoistStatic.spec.ts b/packages/compiler-sfc/__tests__/compileScript/hoistStatic.spec.ts
index d2c76c9a2..ce6191777 100644
--- a/packages/compiler-sfc/__tests__/compileScript/hoistStatic.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/hoistStatic.spec.ts
@@ -1,13 +1,13 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { SFCScriptCompileOptions } from '../../src'
-import { compileSFCScript, assertCode } from '../utils'
+import type { SFCScriptCompileOptions } from '../../src'
+import { assertCode, compileSFCScript } from '../utils'
 
 describe('sfc hoist static', () => {
   function compile(src: string, options?: Partial<SFCScriptCompileOptions>) {
     return compileSFCScript(src, {
       inlineTemplate: true,
       hoistStatic: true,
-      ...options
+      ...options,
     })
   }
 
@@ -34,7 +34,7 @@ describe('sfc hoist static', () => {
       boolean: BindingTypes.LITERAL_CONST,
       nil: BindingTypes.LITERAL_CONST,
       bigint: BindingTypes.LITERAL_CONST,
-      template: BindingTypes.LITERAL_CONST
+      template: BindingTypes.LITERAL_CONST,
     })
     assertCode(content)
   })
@@ -57,7 +57,7 @@ describe('sfc hoist static', () => {
       binary: BindingTypes.LITERAL_CONST,
       conditional: BindingTypes.LITERAL_CONST,
       unary: BindingTypes.LITERAL_CONST,
-      sequence: BindingTypes.LITERAL_CONST
+      sequence: BindingTypes.LITERAL_CONST,
     })
     assertCode(content)
   })
@@ -79,7 +79,7 @@ describe('sfc hoist static', () => {
     expect(content.startsWith(hoistCode)).toBe(true)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
-      defaultValue: BindingTypes.LITERAL_CONST
+      defaultValue: BindingTypes.LITERAL_CONST,
     })
     assertCode(content)
   })
@@ -100,7 +100,7 @@ describe('sfc hoist static', () => {
       KEY1: BindingTypes.SETUP_LET,
       KEY2: BindingTypes.SETUP_LET,
       regex: BindingTypes.SETUP_CONST,
-      undef: BindingTypes.SETUP_MAYBE_REF
+      undef: BindingTypes.SETUP_MAYBE_REF,
     })
     expect(content).toMatch(`setup(__props) {\n\n    ${code}`)
     assertCode(content)
@@ -131,7 +131,7 @@ describe('sfc hoist static', () => {
       KEY4: BindingTypes.SETUP_CONST,
       KEY5: BindingTypes.SETUP_CONST,
       KEY6: BindingTypes.SETUP_CONST,
-      i: BindingTypes.SETUP_LET
+      i: BindingTypes.SETUP_LET,
     })
     expect(content).toMatch(`setup(__props) {\n\n    ${code}`)
     assertCode(content)
@@ -149,7 +149,7 @@ describe('sfc hoist static', () => {
     `)
     expect(bindings).toStrictEqual({
       arr: BindingTypes.SETUP_CONST,
-      obj: BindingTypes.SETUP_CONST
+      obj: BindingTypes.SETUP_CONST,
     })
     expect(content).toMatch(`setup(__props) {\n\n    ${code}`)
     assertCode(content)
@@ -169,7 +169,7 @@ describe('sfc hoist static', () => {
     expect(bindings).toStrictEqual({
       Foo: BindingTypes.SETUP_CONST,
       fn: BindingTypes.SETUP_CONST,
-      fn2: BindingTypes.SETUP_CONST
+      fn2: BindingTypes.SETUP_CONST,
     })
     expect(content).toMatch(`setup(__props) {\n\n    ${code}`)
     assertCode(content)
@@ -185,7 +185,7 @@ describe('sfc hoist static', () => {
     </script>
     `)
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.SETUP_CONST
+      foo: BindingTypes.SETUP_CONST,
     })
     assertCode(content)
   })
@@ -197,10 +197,10 @@ describe('sfc hoist static', () => {
     const foo = 'bar'
     </script>
     `,
-      { hoistStatic: false }
+      { hoistStatic: false },
     )
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.SETUP_CONST
+      foo: BindingTypes.SETUP_CONST,
     })
     assertCode(content)
   })
@@ -212,7 +212,7 @@ describe('sfc hoist static', () => {
     const foo = 'bar'
     </script>
     <template>{{ foo }}</template>
-    `
+    `,
     )
     expect(content).toMatch('_toDisplayString(foo)')
   })
diff --git a/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts b/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts
new file mode 100644
index 000000000..210fa0968
--- /dev/null
+++ b/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts
@@ -0,0 +1,267 @@
+import { assertCode, compileSFCScript as compile } from '../utils'
+
+// in dev mode, declared bindings are returned as an object from setup()
+// when using TS, users may import types which should not be returned as
+// values, so we need to check import usage in the template to determine
+// what to be returned.
+
+test('components', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { FooBar, FooBaz, FooQux, foo } from './x'
+    const fooBar: FooBar = 1
+    </script>
+    <template>
+      <FooBaz></FooBaz>
+      <foo-qux/>
+      <foo/>
+      FooBar
+    </template>
+    `)
+  // FooBar: should not be matched by plain text or incorrect case
+  // FooBaz: used as PascalCase component
+  // FooQux: used as kebab-case component
+  // foo: lowercase component
+  expect(content).toMatch(
+    `return { fooBar, get FooBaz() { return FooBaz }, ` +
+      `get FooQux() { return FooQux }, get foo() { return foo } }`,
+  )
+  assertCode(content)
+})
+
+test('directive', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { vMyDir } from './x'
+    </script>
+    <template>
+      <div v-my-dir></div>
+    </template>
+    `)
+  expect(content).toMatch(`return { get vMyDir() { return vMyDir } }`)
+  assertCode(content)
+})
+
+test('dynamic arguments', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { FooBar, foo, bar, unused, baz, msg } from './x'
+    </script>
+    <template>
+      <FooBar #[foo.slotName] />
+      <FooBar #unused />
+      <div :[bar.attrName]="15"></div>
+      <div unused="unused"></div>
+      <div #[\`item:\${baz.key}\`]="{ value }"></div>
+      <FooBar :msg />
+    </template>
+    `)
+  expect(content).toMatch(
+    `return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
+      `get bar() { return bar }, get baz() { return baz }, get msg() { return msg } }`,
+  )
+  assertCode(content)
+})
+
+// https://github.com/vuejs/core/issues/4599
+test('attribute expressions', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { bar, baz } from './x'
+    const cond = true
+    </script>
+    <template>
+      <div :class="[cond ? '' : bar(), 'default']" :style="baz"></div>
+    </template>
+    `)
+  expect(content).toMatch(
+    `return { cond, get bar() { return bar }, get baz() { return baz } }`,
+  )
+  assertCode(content)
+})
+
+test('vue interpolations', () => {
+  const { content } = compile(`
+  <script setup lang="ts">
+  import { x, y, z, x$y } from './x'
+  </script>
+  <template>
+    <div :id="z + 'y'">{{ x }} {{ yy }} {{ x$y }}</div>
+  </template>
+  `)
+  // x: used in interpolation
+  // y: should not be matched by {{ yy }} or 'y' in binding exps
+  // x$y: #4274 should escape special chars when creating Regex
+  expect(content).toMatch(
+    `return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }`,
+  )
+  assertCode(content)
+})
+
+// #4340 interpolations in template strings
+test('js template string interpolations', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { VAR, VAR2, VAR3 } from './x'
+    </script>
+    <template>
+      {{ \`\${VAR}VAR2\${VAR3}\` }}
+    </template>
+    `)
+  // VAR2 should not be matched
+  expect(content).toMatch(
+    `return { get VAR() { return VAR }, get VAR3() { return VAR3 } }`,
+  )
+  assertCode(content)
+})
+
+// edge case: last tag in template
+test('last tag', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { FooBaz, Last } from './x'
+    </script>
+    <template>
+      <FooBaz></FooBaz>
+      <Last/>
+    </template>
+    `)
+  expect(content).toMatch(
+    `return { get FooBaz() { return FooBaz }, get Last() { return Last } }`,
+  )
+  assertCode(content)
+})
+
+test('TS annotations', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { Foo, Bar, Baz, Qux, Fred } from './x'
+    const a = 1
+    function b() {}
+    </script>
+    <template>
+      {{ a as Foo }}
+      {{ b<Bar>() }}
+      {{ Baz }}
+      <Comp v-slot="{ data }: Qux">{{ data }}</Comp>
+      <div v-for="{ z = x as Qux } in list as Fred"/>
+    </template>
+    `)
+  expect(content).toMatch(`return { a, b, get Baz() { return Baz } }`)
+  assertCode(content)
+})
+
+// vuejs/vue#12591
+test('v-on inline statement', () => {
+  // should not error
+  compile(`
+  <script setup lang="ts">
+    import { foo } from './foo'
+  </script>
+  <template>
+    <div @click="$emit('update:a');"></div>
+  </template>
+  `)
+})
+
+test('template ref', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { foo, bar, Baz } from './foo'
+    </script>
+    <template>
+      <div ref="foo"></div>
+      <div ref=""></div>
+      <Baz ref="bar" />
+    </template>
+    `)
+  expect(content).toMatch(
+    'return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }',
+  )
+  assertCode(content)
+})
+
+// https://github.com/nuxt/nuxt/issues/22416
+test('property access', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { Foo, Bar, Baz } from './foo'
+    </script>
+    <template>
+      <div>{{ Foo.Bar.Baz }}</div>
+    </template>
+    `)
+  expect(content).toMatch('return { get Foo() { return Foo } }')
+  assertCode(content)
+})
+
+test('spread operator', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { Foo, Bar, Baz } from './foo'
+    </script>
+    <template>
+      <div v-bind="{ ...Foo.Bar.Baz }"></div>
+    </template>
+    `)
+  expect(content).toMatch('return { get Foo() { return Foo } }')
+  assertCode(content)
+})
+
+test('property access (whitespace)', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { Foo, Bar, Baz } from './foo'
+    </script>
+    <template>
+      <div>{{ Foo . Bar . Baz }}</div>
+    </template>
+    `)
+  expect(content).toMatch('return { get Foo() { return Foo } }')
+  assertCode(content)
+})
+
+// #9974
+test('namespace / dot component usage', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import * as Foo from './foo'
+    </script>
+    <template>
+      <Foo.Bar />
+    </template>
+    `)
+  expect(content).toMatch('return { get Foo() { return Foo } }')
+  assertCode(content)
+})
+
+test('check when has explicit parse options', () => {
+  const { content } = compile(
+    `
+    <script setup lang="ts">
+      import { x } from './x'
+    </script>
+    <template>
+      {{ x }}
+    </template>
+    `,
+    undefined,
+    { templateParseOptions: {} },
+  )
+  expect(content).toMatch('return { get x() { return x } }')
+})
+
+// #11745
+test('shorthand binding w/ kebab-case', () => {
+  const { content } = compile(
+    `
+    <script setup lang="ts">
+      import { fooBar } from "./foo.ts"
+    </script>
+    <template>
+      <div :foo-bar></div>
+    </template>
+    `,
+  )
+  expect(content).toMatch('return { get fooBar() { return fooBar }')
+})
diff --git a/packages/compiler-sfc/__tests__/compileScript/reactivityTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScript/reactivityTransform.spec.ts
deleted file mode 100644
index 44d51c14e..000000000
--- a/packages/compiler-sfc/__tests__/compileScript/reactivityTransform.spec.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-// TODO remove in 3.4
-import { BindingTypes } from '@vue/compiler-core'
-import { compileSFCScript as compile, assertCode } from '../utils'
-
-// this file only tests integration with SFC - main test case for the ref
-// transform can be found in <root>/packages/reactivity-transform/__tests__
-describe('sfc ref transform', () => {
-  function compileWithReactivityTransform(src: string) {
-    return compile(src, { reactivityTransform: true })
-  }
-
-  test('$ unwrapping', () => {
-    const { content, bindings } = compileWithReactivityTransform(`<script setup>
-    import { ref, shallowRef } from 'vue'
-    let foo = $(ref())
-    let a = $(ref(1))
-    let b = $(shallowRef({
-      count: 0
-    }))
-    let c = () => {}
-    let d
-    </script>`)
-    expect(content).not.toMatch(`$(ref())`)
-    expect(content).not.toMatch(`$(ref(1))`)
-    expect(content).not.toMatch(`$(shallowRef({`)
-    expect(content).toMatch(`let foo = (ref())`)
-    expect(content).toMatch(`let a = (ref(1))`)
-    expect(content).toMatch(`
-    let b = (shallowRef({
-      count: 0
-    }))
-    `)
-    // normal declarations left untouched
-    expect(content).toMatch(`let c = () => {}`)
-    expect(content).toMatch(`let d`)
-    expect(content).toMatch(
-      `return { foo, a, b, get c() { return c }, set c(v) { c = v }, ` +
-        `get d() { return d }, set d(v) { d = v }, ref, shallowRef }`
-    )
-    assertCode(content)
-    expect(bindings).toStrictEqual({
-      foo: BindingTypes.SETUP_REF,
-      a: BindingTypes.SETUP_REF,
-      b: BindingTypes.SETUP_REF,
-      c: BindingTypes.SETUP_LET,
-      d: BindingTypes.SETUP_LET,
-      ref: BindingTypes.SETUP_CONST,
-      shallowRef: BindingTypes.SETUP_CONST
-    })
-  })
-
-  test('$ref & $shallowRef declarations', () => {
-    const { content, bindings } = compileWithReactivityTransform(`<script setup>
-    let foo = $ref()
-    let a = $ref(1)
-    let b = $shallowRef({
-      count: 0
-    })
-    let c = () => {}
-    let d
-    </script>`)
-    expect(content).toMatch(
-      `import { ref as _ref, shallowRef as _shallowRef } from 'vue'`
-    )
-    expect(content).not.toMatch(`$ref()`)
-    expect(content).not.toMatch(`$ref(1)`)
-    expect(content).not.toMatch(`$shallowRef({`)
-    expect(content).toMatch(`let foo = _ref()`)
-    expect(content).toMatch(`let a = _ref(1)`)
-    expect(content).toMatch(`
-    let b = _shallowRef({
-      count: 0
-    })
-    `)
-    // normal declarations left untouched
-    expect(content).toMatch(`let c = () => {}`)
-    expect(content).toMatch(`let d`)
-    assertCode(content)
-    expect(bindings).toStrictEqual({
-      foo: BindingTypes.SETUP_REF,
-      a: BindingTypes.SETUP_REF,
-      b: BindingTypes.SETUP_REF,
-      c: BindingTypes.SETUP_LET,
-      d: BindingTypes.SETUP_LET
-    })
-  })
-
-  test('usage in normal <script>', () => {
-    const { content } = compileWithReactivityTransform(`<script>
-    export default {
-      setup() {
-        let count = $ref(0)
-        const inc = () => count++
-        return $$({ count })
-      }
-    }
-    </script>`)
-    expect(content).not.toMatch(`$ref(0)`)
-    expect(content).toMatch(`import { ref as _ref } from 'vue'`)
-    expect(content).toMatch(`let count = _ref(0)`)
-    expect(content).toMatch(`count.value++`)
-    expect(content).toMatch(`return ({ count })`)
-    assertCode(content)
-  })
-
-  test('usage /w typescript', () => {
-    const { content } = compileWithReactivityTransform(`
-      <script setup lang="ts">
-        let msg = $ref<string | number>('foo');
-        let bar = $ref <string | number>('bar');
-      </script>
-    `)
-    expect(content).toMatch(`import { ref as _ref`)
-    expect(content).toMatch(`let msg = _ref<string | number>('foo')`)
-    expect(content).toMatch(`let bar = _ref <string | number>('bar')`)
-    assertCode(content)
-  })
-
-  test('usage with normal <script> + <script setup>', () => {
-    const { content, bindings } = compileWithReactivityTransform(`<script>
-    let a = $ref(0)
-    let c = $ref(0)
-    </script>
-    <script setup>
-    let b = $ref(0)
-    let c = 0
-    function change() {
-      a++
-      b++
-      c++
-    }
-    </script>`)
-    // should dedupe helper imports
-    expect(content).toMatch(`import { ref as _ref } from 'vue'`)
-
-    expect(content).toMatch(`let a = _ref(0)`)
-    expect(content).toMatch(`let b = _ref(0)`)
-
-    // root level ref binding declared in <script> should be inherited in <script setup>
-    expect(content).toMatch(`a.value++`)
-    expect(content).toMatch(`b.value++`)
-    // c shadowed
-    expect(content).toMatch(`c++`)
-    assertCode(content)
-    expect(bindings).toStrictEqual({
-      a: BindingTypes.SETUP_REF,
-      b: BindingTypes.SETUP_REF,
-      c: BindingTypes.SETUP_REF,
-      change: BindingTypes.SETUP_CONST
-    })
-  })
-
-  test('usage with normal <script> (has macro usage) + <script setup> (no macro usage)', () => {
-    const { content } = compileWithReactivityTransform(`
-    <script>
-    let data = $ref()
-    </script>
-    <script setup>
-    console.log(data)
-    </script>
-    `)
-    expect(content).toMatch(`console.log(data.value)`)
-    assertCode(content)
-  })
-
-  describe('errors', () => {
-    test('defineProps/Emit() referencing ref declarations', () => {
-      expect(() =>
-        compile(
-          `<script setup>
-        let bar = $ref(1)
-        defineProps({
-          bar
-        })
-      </script>`,
-          { reactivityTransform: true }
-        )
-      ).toThrow(`cannot reference locally declared variables`)
-
-      expect(() =>
-        compile(
-          `<script setup>
-        let bar = $ref(1)
-        defineEmits({
-          bar
-        })
-      </script>`,
-          { reactivityTransform: true }
-        )
-      ).toThrow(`cannot reference locally declared variables`)
-    })
-  })
-})
diff --git a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
index b67423e0a..816d74bc6 100644
--- a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
@@ -1,16 +1,17 @@
 import { normalize } from 'node:path'
-import { Identifier } from '@babel/types'
-import { SFCScriptCompileOptions, parse } from '../../src'
+import type { Identifier } from '@babel/types'
+import { type SFCScriptCompileOptions, parse } from '../../src'
 import { ScriptCompileContext } from '../../src/script/context'
 import {
   inferRuntimeType,
   invalidateTypeCache,
   recordImports,
+  registerTS,
   resolveTypeElements,
-  registerTS
 } from '../../src/script/resolveType'
-
+import { UNKNOWN_TYPE } from '../../src/script/utils'
 import ts from 'typescript'
+
 registerTS(() => ts)
 
 describe('resolveType', () => {
@@ -25,7 +26,7 @@ describe('resolveType', () => {
     expect(props).toStrictEqual({
       foo: ['Number'],
       bar: ['Function'],
-      baz: ['String']
+      baz: ['String'],
     })
     expect(calls?.length).toBe(2)
   })
@@ -35,9 +36,9 @@ describe('resolveType', () => {
       resolve(`
     type Aliased = { foo: number }
     defineProps<Aliased>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -46,9 +47,9 @@ describe('resolveType', () => {
       resolve(`
     export type Aliased = { foo: number }
     defineProps<Aliased>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -57,9 +58,9 @@ describe('resolveType', () => {
       resolve(`
     interface Aliased { foo: number }
     defineProps<Aliased>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -68,9 +69,9 @@ describe('resolveType', () => {
       resolve(`
     export interface Aliased { foo: number }
     defineProps<Aliased>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -82,12 +83,12 @@ describe('resolveType', () => {
     interface C { c: string }
     interface Aliased extends B, C { foo: number }
     defineProps<Aliased>()
-    `).props
+    `).props,
     ).toStrictEqual({
       a: ['Function'],
       b: ['Boolean'],
       c: ['String'],
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -96,9 +97,9 @@ describe('resolveType', () => {
       resolve(`
     class Foo {}
     defineProps<{ foo: Foo }>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Object']
+      foo: ['Object'],
     })
   })
 
@@ -106,7 +107,7 @@ describe('resolveType', () => {
     expect(
       resolve(`
     defineProps<(e: 'foo') => void>()
-    `).calls?.length
+    `).calls?.length,
     ).toBe(1)
   })
 
@@ -115,7 +116,7 @@ describe('resolveType', () => {
       resolve(`
     type Fn = (e: 'foo') => void
     defineProps<Fn>()
-    `).calls?.length
+    `).calls?.length,
     ).toBe(1)
   })
 
@@ -126,13 +127,25 @@ describe('resolveType', () => {
     type Bar = { bar: string }
     type Baz = { bar: string | boolean }
     defineProps<{ self: any } & Foo & Bar & Baz>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      self: ['Unknown'],
+      self: [UNKNOWN_TYPE],
       foo: ['Number'],
       // both Bar & Baz has 'bar', but Baz['bar] is wider so it should be
       // preferred
-      bar: ['String', 'Boolean']
+      bar: ['String', 'Boolean'],
+    })
+  })
+
+  test('intersection type with ignore', () => {
+    expect(
+      resolve(`
+    type Foo = { foo: number }
+    type Bar = { bar: string }
+    defineProps<Foo & /* @vue-ignore */ Bar>()
+    `).props,
+    ).toStrictEqual({
+      foo: ['Number'],
     })
   })
 
@@ -156,12 +169,12 @@ describe('resolveType', () => {
         }
 
     defineProps<CommonProps & ConditionalProps>()
-    `).props
+    `).props,
     ).toStrictEqual({
       size: ['String'],
       color: ['String', 'Number'],
       appearance: ['String'],
-      note: ['String']
+      note: ['String'],
     })
   })
 
@@ -173,12 +186,12 @@ describe('resolveType', () => {
     defineProps<{
       [\`_\${T}_\${S}_\`]: string
     }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       _foo_x_: ['String'],
       _foo_y_: ['String'],
       _bar_x_: ['String'],
-      _bar_y_: ['String']
+      _bar_y_: ['String'],
     })
   })
 
@@ -195,7 +208,7 @@ describe('resolveType', () => {
     } & {
       [K in \`x\${T}\`]: string
     }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String', 'Number'],
       bar: ['String', 'Number'],
@@ -204,7 +217,7 @@ describe('resolveType', () => {
       FOO: ['String'],
       xfoo: ['String'],
       xbar: ['String'],
-      optional: ['Boolean']
+      optional: ['Boolean'],
     })
   })
 
@@ -213,14 +226,14 @@ describe('resolveType', () => {
       resolve(`
     type T = { foo: number, bar: string }
     defineProps<Partial<T>>()
-    `).raw.props
+    `).raw.props,
     ).toMatchObject({
       foo: {
-        optional: true
+        optional: true,
       },
       bar: {
-        optional: true
-      }
+        optional: true,
+      },
     })
   })
 
@@ -229,14 +242,14 @@ describe('resolveType', () => {
       resolve(`
     type T = { foo?: number, bar?: string }
     defineProps<Required<T>>()
-    `).raw.props
+    `).raw.props,
     ).toMatchObject({
       foo: {
-        optional: false
+        optional: false,
       },
       bar: {
-        optional: false
-      }
+        optional: false,
+      },
     })
   })
 
@@ -246,10 +259,10 @@ describe('resolveType', () => {
     type T = { foo: number, bar: string, baz: boolean }
     type K = 'foo' | 'bar'
     defineProps<Pick<T, K>>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['Number'],
-      bar: ['String']
+      bar: ['String'],
     })
   })
 
@@ -259,9 +272,30 @@ describe('resolveType', () => {
     type T = { foo: number, bar: string, baz: boolean }
     type K = 'foo' | 'bar'
     defineProps<Omit<T, K>>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      baz: ['Boolean']
+      baz: ['Boolean'],
+    })
+  })
+
+  test('utility type: ReadonlyArray', () => {
+    expect(
+      resolve(`
+    defineProps<{ foo: ReadonlyArray<string> }>()
+    `).props,
+    ).toStrictEqual({
+      foo: ['Array'],
+    })
+  })
+
+  test('utility type: ReadonlyMap & Readonly Set', () => {
+    expect(
+      resolve(`
+    defineProps<{ foo: ReadonlyMap<string, unknown>, bar: ReadonlySet<string> }>()
+    `).props,
+    ).toStrictEqual({
+      foo: ['Map'],
+      bar: ['Set'],
     })
   })
 
@@ -271,9 +305,9 @@ describe('resolveType', () => {
     type T = { bar: number }
     type S = { nested: { foo: T['bar'] }}
     defineProps<S['nested']>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -284,10 +318,10 @@ describe('resolveType', () => {
     type T = { foo: string, bar: number }
     type S = { foo: { foo: T[string] }, bar: { bar: string } }
     defineProps<S[K]>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String', 'Number'],
-      bar: ['String']
+      bar: ['String'],
     })
   })
 
@@ -299,12 +333,12 @@ describe('resolveType', () => {
     type T = [1, 'foo']
     type TT = [foo: 1, bar: 'foo']
     defineProps<{ foo: A[number], bar: AA[number], tuple: T[number], namedTuple: TT[number] }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String', 'Number'],
       bar: ['String'],
       tuple: ['Number', 'String'],
-      namedTuple: ['Number', 'String']
+      namedTuple: ['Number', 'String'],
     })
   })
 
@@ -321,9 +355,9 @@ describe('resolveType', () => {
         }
       }
       defineProps<Foo.Bar.A>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -340,10 +374,10 @@ describe('resolveType', () => {
         foo: Foo['a'],
         bar: Foo['b']
       }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String'],
-      bar: ['Number']
+      bar: ['Number'],
     })
   })
 
@@ -360,10 +394,10 @@ describe('resolveType', () => {
         foo: Foo.A,
         bar: Foo.B
       }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String'],
-      bar: ['Number']
+      bar: ['Number'],
     })
   })
 
@@ -380,10 +414,10 @@ describe('resolveType', () => {
         foo: Foo.A,
         bar: Foo['b']
       }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String'],
-      bar: ['Number']
+      bar: ['Number'],
     })
   })
 
@@ -399,9 +433,9 @@ describe('resolveType', () => {
       defineProps<{
         foo: Foo
       }>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number', 'String']
+      foo: ['Number', 'String'],
     })
   })
 
@@ -410,9 +444,214 @@ describe('resolveType', () => {
       resolve(`
       declare const a: string
       defineProps<{ foo: typeof a }>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['String']
+      foo: ['String'],
+    })
+  })
+
+  test('readonly', () => {
+    expect(
+      resolve(`
+    defineProps<{ foo: readonly unknown[] }>()
+    `).props,
+    ).toStrictEqual({
+      foo: ['Array'],
+    })
+  })
+
+  test('keyof', () => {
+    const files = {
+      '/foo.ts': `export type IMP = { ${1}: 1 };`,
+    }
+
+    const { props } = resolve(
+      `
+      import { IMP } from './foo'
+      interface Foo { foo: 1, ${1}: 1 }
+      type Bar = { bar: 1 }
+      declare const obj: Bar
+      declare const set: Set<any>
+      declare const arr: Array<any>
+
+      defineProps<{
+        imp: keyof IMP,
+        foo: keyof Foo,
+        bar: keyof Bar,
+        obj: keyof typeof obj,
+        set: keyof typeof set,
+        arr: keyof typeof arr
+      }>()
+      `,
+      files,
+    )
+
+    expect(props).toStrictEqual({
+      imp: ['Number'],
+      foo: ['String', 'Number'],
+      bar: ['String'],
+      obj: ['String'],
+      set: ['String'],
+      arr: ['String', 'Number'],
+    })
+  })
+
+  test('keyof: index signature', () => {
+    const { props } = resolve(
+      `
+      declare const num: number;
+      interface Foo {
+        [key: symbol]: 1
+        [key: string]: 1
+        [key: typeof num]: 1,
+      }
+
+      type Test<T> = T
+      type Bar = {
+        [key: string]: 1
+        [key: Test<number>]: 1
+      }
+
+      defineProps<{
+        foo: keyof Foo 
+        bar: keyof Bar
+      }>()
+      `,
+    )
+
+    expect(props).toStrictEqual({
+      foo: ['Symbol', 'String', 'Number'],
+      bar: [UNKNOWN_TYPE],
+    })
+  })
+
+  // #11129
+  test('keyof: intersection type', () => {
+    const { props } = resolve(`
+    type A = { name: string }
+    type B = A & { [key: number]: string }
+    defineProps<{
+      foo: keyof B
+    }>()`)
+    expect(props).toStrictEqual({
+      foo: ['String', 'Number'],
+    })
+  })
+
+  test('keyof: union type', () => {
+    const { props } = resolve(`
+    type A = { name: string }
+    type B = A | { [key: number]: string }
+    defineProps<{
+      foo: keyof B
+    }>()`)
+    expect(props).toStrictEqual({
+      foo: ['String', 'Number'],
+    })
+  })
+
+  test('keyof: utility type', () => {
+    const { props } = resolve(
+      `
+      type Foo = Record<symbol | string, any>
+      type Bar = { [key: string]: any }
+      type AnyRecord = Record<keyof any, any>
+      type Baz = { a: 1, ${1}: 2, b: 3}
+
+      defineProps<{
+        record: keyof Foo,
+        anyRecord: keyof AnyRecord 
+        partial: keyof Partial<Bar>,
+        required: keyof Required<Bar>,
+        readonly: keyof Readonly<Bar>,
+        pick: keyof Pick<Baz, 'a' | 1>
+        extract: keyof Extract<keyof Baz, 'a' | 1>
+      }>()
+      `,
+    )
+
+    expect(props).toStrictEqual({
+      record: ['Symbol', 'String'],
+      anyRecord: ['String', 'Number', 'Symbol'],
+      partial: ['String'],
+      required: ['String'],
+      readonly: ['String'],
+      pick: ['String', 'Number'],
+      extract: ['String', 'Number'],
+    })
+  })
+
+  test('keyof: fallback to Unknown', () => {
+    const { props } = resolve(
+      `
+      interface Barr {}
+      interface Bar extends Barr {}
+      type Foo = keyof Bar
+      defineProps<{ foo: Foo }>()
+      `,
+    )
+
+    expect(props).toStrictEqual({
+      foo: [UNKNOWN_TYPE],
+    })
+  })
+
+  test('keyof: nested object with number', () => {
+    const { props } = resolve(
+      `
+      interface Type {
+        deep: {
+          1: any
+        }
+      }
+
+      defineProps<{
+        route: keyof Type['deep']
+      }>()`,
+    )
+
+    expect(props).toStrictEqual({
+      route: ['Number'],
+    })
+  })
+
+  test('keyof: nested object with string', () => {
+    const { props } = resolve(
+      `
+      interface Type {
+        deep: {
+          foo: any
+        }
+      }
+
+      defineProps<{
+        route: keyof Type['deep']
+      }>()`,
+    )
+
+    expect(props).toStrictEqual({
+      route: ['String'],
+    })
+  })
+
+  test('keyof: nested object with intermediate', () => {
+    const { props } = resolve(
+      `
+      interface Type {
+        deep: {
+          foo: any
+        }
+      }
+
+      type Foo = Type['deep']
+
+      defineProps<{
+        route: keyof Foo
+      }>()`,
+    )
+
+    expect(props).toStrictEqual({
+      route: ['String'],
     })
   })
 
@@ -429,11 +668,11 @@ describe('resolveType', () => {
       }
       type Props = ExtractPropTypes<typeof props>
       defineProps<Props>()
-    `
+    `,
     )
     expect(props).toStrictEqual({
       foo: ['String'],
-      bar: ['Boolean']
+      bar: ['Boolean'],
     })
     expect(raw.props.bar.optional).toBe(false)
   })
@@ -447,11 +686,31 @@ describe('resolveType', () => {
       }
       type Props = Partial<import('vue').ExtractPropTypes<ReturnType<typeof props>>>
       defineProps<Props>()
-    `
+    `,
     )
     expect(props).toStrictEqual({
       foo: ['String'],
-      bar: ['Boolean']
+      bar: ['Boolean'],
+    })
+  })
+
+  // #11266
+  test('correctly parse type annotation for declared function', () => {
+    const { props } = resolve(`
+    import { ExtractPropTypes } from 'vue'
+    interface UploadFile<T = any> {
+      xhr?: T
+    }
+    declare function uploadProps<T = any>(): {
+      fileList: {
+        type: PropType<UploadFile<T>[]>
+        default: UploadFile<T>[]
+      }
+    }
+    type UploadProps = ExtractPropTypes<ReturnType<typeof uploadProps>>
+    defineProps<UploadProps>()`)
+    expect(props).toStrictEqual({
+      fileList: ['Array'],
     })
   })
 
@@ -461,9 +720,9 @@ describe('resolveType', () => {
         resolve(`
         type Props<T> = T
         defineProps<Props<{ foo: string }>>()
-      `).props
+      `).props,
       ).toStrictEqual({
-        foo: ['String']
+        foo: ['String'],
       })
     })
 
@@ -474,11 +733,11 @@ describe('resolveType', () => {
         type Bar = { bar: number; }
         type Props<T,U> = T & U & { baz: boolean }
         defineProps<Props<Foo, Bar>>()
-      `).props
+      `).props,
       ).toStrictEqual({
         foo: ['String'],
         bar: ['Number'],
-        baz: ['Boolean']
+        baz: ['Boolean'],
       })
     })
 
@@ -489,9 +748,9 @@ describe('resolveType', () => {
         type Props<T> = Aliased<T>
         type Foo = { foo: string; }
         defineProps<Props<Foo>>()
-      `).props
+      `).props,
       ).toStrictEqual({
-        foo: ['String']
+        foo: ['String'],
       })
     })
 
@@ -500,9 +759,9 @@ describe('resolveType', () => {
         resolve(`
         type Aliased<T> = { foo: T }
         defineProps<Aliased<string>>()
-      `).props
+      `).props,
       ).toStrictEqual({
-        foo: ['String']
+        foo: ['String'],
       })
     })
 
@@ -514,25 +773,25 @@ describe('resolveType', () => {
         }
         type Foo = string
         defineProps<Props<Foo>>()
-      `).props
+      `).props,
       ).toStrictEqual({
-        foo: ['String']
+        foo: ['String'],
       })
     })
 
     test('generic from external-file', () => {
       const files = {
-        '/foo.ts': 'export type P<T> = { foo: T }'
+        '/foo.ts': 'export type P<T> = { foo: T }',
       }
       const { props } = resolve(
         `
         import { P } from './foo'
         defineProps<P<string>>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
-        foo: ['String']
+        foo: ['String'],
       })
     })
   })
@@ -544,7 +803,7 @@ describe('resolveType', () => {
         '/bar.d.ts':
           'type X = { bar: string }; export { X as Y };' +
           // verify that we can parse syntax that is only valid in d.ts
-          'export const baz: boolean'
+          'export const baz: boolean',
       }
       const { props, deps } = resolve(
         `
@@ -552,11 +811,32 @@ describe('resolveType', () => {
         import { Y as PP } from './bar'
         defineProps<P & PP>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['Number'],
-        bar: ['String']
+        bar: ['String'],
+      })
+      expect(deps && [...deps]).toStrictEqual(Object.keys(files))
+    })
+
+    // #10635
+    test('relative tsx', () => {
+      const files = {
+        '/foo.tsx': 'export type P = { foo: number }',
+        '/bar/index.tsx': 'export type PP = { bar: string }',
+      }
+      const { props, deps } = resolve(
+        `
+        import { P } from './foo'
+        import { PP } from './bar'
+        defineProps<P & PP>()
+        `,
+        files,
+      )
+      expect(props).toStrictEqual({
+        foo: ['Number'],
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -568,7 +848,7 @@ describe('resolveType', () => {
           'type X = { bar: string }; export { X as Y };' +
           // verify that we can parse syntax that is only valid in d.ts
           'export const baz: boolean',
-        'C:\\Test\\FolderB\\buz.ts': 'export type Z = { buz: string }'
+        'C:\\Test\\FolderB\\buz.ts': 'export type Z = { buz: string }',
       }
       const { props, deps } = resolve(
         `
@@ -579,32 +859,32 @@ describe('resolveType', () => {
     `,
         files,
         {},
-        'C:\\Test\\FolderA\\Test.vue'
+        'C:\\Test\\FolderA\\Test.vue',
       )
       expect(props).toStrictEqual({
         foo: ['Number'],
         bar: ['String'],
-        buz: ['String']
+        buz: ['String'],
       })
       expect(deps && [...deps].map(normalize)).toStrictEqual(
-        Object.keys(files).map(normalize)
+        Object.keys(files).map(normalize),
       )
     })
 
     // #8244
     test('utility type in external file', () => {
       const files = {
-        '/foo.ts': 'type A = { n?: number }; export type B = Required<A>'
+        '/foo.ts': 'type A = { n?: number }; export type B = Required<A>',
       }
       const { props } = resolve(
         `
         import { B } from './foo'
         defineProps<B>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
-        n: ['Number']
+        n: ['Number'],
       })
     })
 
@@ -613,7 +893,7 @@ describe('resolveType', () => {
         '/foo.vue':
           '<script lang="ts">export type P = { foo: number }</script>',
         '/bar.vue':
-          '<script setup lang="tsx">export type P = { bar: string }</script>'
+          '<script setup lang="tsx">export type P = { bar: string }</script>',
       }
       const { props, deps } = resolve(
         `
@@ -621,11 +901,11 @@ describe('resolveType', () => {
         import { P as PP } from './bar.vue'
         defineProps<P & PP>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['Number'],
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -635,18 +915,18 @@ describe('resolveType', () => {
         '/foo.ts': `import type { P as PP } from './nested/bar.vue'
           export type P = { foo: number } & PP`,
         '/nested/bar.vue':
-          '<script setup lang="ts">export type P = { bar: string }</script>'
+          '<script setup lang="ts">export type P = { bar: string }</script>',
       }
       const { props, deps } = resolve(
         `
         import { P } from './foo'
         defineProps<P>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['Number'],
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -654,17 +934,17 @@ describe('resolveType', () => {
     test('relative (chained, re-export)', () => {
       const files = {
         '/foo.ts': `export { P as PP } from './bar'`,
-        '/bar.ts': 'export type P = { bar: string }'
+        '/bar.ts': 'export type P = { bar: string }',
       }
       const { props, deps } = resolve(
         `
         import { PP as P } from './foo'
         defineProps<P>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -672,17 +952,17 @@ describe('resolveType', () => {
     test('relative (chained, export *)', () => {
       const files = {
         '/foo.ts': `export * from './bar'`,
-        '/bar.ts': 'export type P = { bar: string }'
+        '/bar.ts': 'export type P = { bar: string }',
       }
       const { props, deps } = resolve(
         `
         import { P } from './foo'
         defineProps<P>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -690,7 +970,7 @@ describe('resolveType', () => {
     test('relative (default export)', () => {
       const files = {
         '/foo.ts': `export default interface P { foo: string }`,
-        '/bar.ts': `type X = { bar: string }; export default X`
+        '/bar.ts': `type X = { bar: string }; export default X`,
       }
       const { props, deps } = resolve(
         `
@@ -698,11 +978,11 @@ describe('resolveType', () => {
         import X from './bar'
         defineProps<P & X>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['String'],
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -711,7 +991,7 @@ describe('resolveType', () => {
       const files = {
         '/bar.ts': `export { default } from './foo'`,
         '/foo.ts': `export default interface P { foo: string }; export interface PP { bar: number }`,
-        '/baz.ts': `export { PP as default } from './foo'`
+        '/baz.ts': `export { PP as default } from './foo'`,
       }
       const { props, deps } = resolve(
         `
@@ -719,11 +999,11 @@ describe('resolveType', () => {
         import PP from './baz'
         defineProps<P & PP>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['String'],
-        bar: ['Number']
+        bar: ['Number'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -732,17 +1012,17 @@ describe('resolveType', () => {
       const files = {
         '/foo.ts': `export default interface P { foo: string }`,
         '/bar.ts': `export default interface PP { bar: number }`,
-        '/baz.ts': `export { default as X } from './foo'; export { default as XX } from './bar'; `
+        '/baz.ts': `export { default as X } from './foo'; export { default as XX } from './bar'; `,
       }
       const { props, deps } = resolve(
         `import { X, XX } from './baz'
         defineProps<X & XX>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['String'],
-        bar: ['Number']
+        bar: ['Number'],
       })
       expect(deps && [...deps]).toStrictEqual(['/baz.ts', '/foo.ts', '/bar.ts'])
     })
@@ -750,17 +1030,17 @@ describe('resolveType', () => {
     test('relative (dynamic import)', () => {
       const files = {
         '/foo.ts': `export type P = { foo: string, bar: import('./bar').N }`,
-        '/bar.ts': 'export type N = number'
+        '/bar.ts': 'export type N = number',
       }
       const { props, deps } = resolve(
         `
         defineProps<import('./foo').P>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['String'],
-        bar: ['Number']
+        bar: ['Number'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -770,17 +1050,17 @@ describe('resolveType', () => {
       const files = {
         '/foo.d.ts':
           'import { PP } from "./bar.js"; export type P = { foo: PP }',
-        '/bar.d.ts': 'export type PP = "foo" | "bar"'
+        '/bar.d.ts': 'export type PP = "foo" | "bar"',
       }
       const { props, deps } = resolve(
         `
         import { P } from './foo'
         defineProps<P>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
-        foo: ['String']
+        foo: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -788,17 +1068,17 @@ describe('resolveType', () => {
     test('ts module resolve', () => {
       const files = {
         '/node_modules/foo/package.json': JSON.stringify({
-          types: 'index.d.ts'
+          types: 'index.d.ts',
         }),
         '/node_modules/foo/index.d.ts': 'export type P = { foo: number }',
         '/tsconfig.json': JSON.stringify({
           compilerOptions: {
             paths: {
-              bar: ['./pp.ts']
-            }
-          }
+              bar: ['./pp.ts'],
+            },
+          },
         }),
-        '/pp.ts': 'export type PP = { bar: string }'
+        '/pp.ts': 'export type PP = { bar: string }',
       }
 
       const { props, deps } = resolve(
@@ -807,16 +1087,16 @@ describe('resolveType', () => {
         import { PP } from 'bar'
         defineProps<P & PP>()
         `,
-        files
+        files,
       )
 
       expect(props).toStrictEqual({
         foo: ['Number'],
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual([
         '/node_modules/foo/index.d.ts',
-        '/pp.ts'
+        '/pp.ts',
       ])
     })
 
@@ -825,23 +1105,23 @@ describe('resolveType', () => {
         '/tsconfig.json': JSON.stringify({
           references: [
             {
-              path: './tsconfig.app.json'
-            }
-          ]
+              path: './tsconfig.app.json',
+            },
+          ],
         }),
         '/tsconfig.app.json': JSON.stringify({
           include: ['**/*.ts', '**/*.vue'],
-          extends: './tsconfig.web.json'
+          extends: './tsconfig.web.json',
         }),
         '/tsconfig.web.json': JSON.stringify({
           compilerOptions: {
             composite: true,
             paths: {
-              bar: ['./user.ts']
-            }
-          }
+              bar: ['./user.ts'],
+            },
+          },
         }),
-        '/user.ts': 'export type User = { bar: string }'
+        '/user.ts': 'export type User = { bar: string }',
       }
 
       const { props, deps } = resolve(
@@ -849,11 +1129,101 @@ describe('resolveType', () => {
         import { User } from 'bar'
         defineProps<User>()
         `,
-        files
+        files,
       )
 
       expect(props).toStrictEqual({
-        bar: ['String']
+        bar: ['String'],
+      })
+      expect(deps && [...deps]).toStrictEqual(['/user.ts'])
+    })
+
+    test('ts module resolve w/ project reference folder', () => {
+      const files = {
+        '/tsconfig.json': JSON.stringify({
+          references: [
+            {
+              path: './web',
+            },
+            {
+              path: './empty',
+            },
+            {
+              path: './noexists-should-ignore',
+            },
+          ],
+        }),
+        '/web/tsconfig.json': JSON.stringify({
+          include: ['../**/*.ts', '../**/*.vue'],
+          compilerOptions: {
+            composite: true,
+            paths: {
+              bar: ['../user.ts'],
+            },
+          },
+        }),
+        // tsconfig with no include / paths defined, should match nothing
+        '/empty/tsconfig.json': JSON.stringify({
+          compilerOptions: {
+            composite: true,
+          },
+        }),
+        '/user.ts': 'export type User = { bar: string }',
+      }
+
+      const { props, deps } = resolve(
+        `
+        import { User } from 'bar'
+        defineProps<User>() 
+        `,
+        files,
+      )
+
+      expect(props).toStrictEqual({
+        bar: ['String'],
+      })
+      expect(deps && [...deps]).toStrictEqual(['/user.ts'])
+    })
+
+    // #11382
+    test('ts module resolve circular project reference', () => {
+      const files = {
+        '/tsconfig.json': JSON.stringify({
+          exclude: ['**/*.ts', '**/*.vue'],
+          references: [
+            {
+              path: './tsconfig.web.json',
+            },
+          ],
+        }),
+        '/tsconfig.web.json': JSON.stringify({
+          include: ['**/*.ts', '**/*.vue'],
+          compilerOptions: {
+            composite: true,
+            paths: {
+              user: ['./user.ts'],
+            },
+          },
+          references: [
+            {
+              // circular reference
+              path: './tsconfig.json',
+            },
+          ],
+        }),
+        '/user.ts': 'export type User = { bar: string }',
+      }
+
+      const { props, deps } = resolve(
+        `
+        import { User } from 'user'
+        defineProps<User>() 
+        `,
+        files,
+      )
+
+      expect(props).toStrictEqual({
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(['/user.ts'])
     })
@@ -864,12 +1234,12 @@ describe('resolveType', () => {
           compilerOptions: {
             include: ['**/*.ts', '**/*.vue'],
             paths: {
-              '@/*': ['./src/*']
-            }
-          }
+              '@/*': ['./src/*'],
+            },
+          },
         }),
         '/src/Foo.vue':
-          '<script lang="ts">export type P = { bar: string }</script>'
+          '<script lang="ts">export type P = { bar: string }</script>',
       }
 
       const { props, deps } = resolve(
@@ -877,11 +1247,11 @@ describe('resolveType', () => {
         import { P } from '@/Foo.vue'
         defineProps<P>()
         `,
-        files
+        files,
       )
 
       expect(props).toStrictEqual({
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(['/src/Foo.vue'])
     })
@@ -898,16 +1268,16 @@ describe('resolveType', () => {
             type PP = { bar: string }
           }
           export {}
-        `
+        `,
       }
 
       const { props, deps } = resolve(`defineProps<App.User & PP>()`, files, {
-        globalTypeFiles: Object.keys(files)
+        globalTypeFiles: Object.keys(files),
       })
 
       expect(props).toStrictEqual({
         name: ['String'],
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -927,16 +1297,44 @@ describe('resolveType', () => {
               id: string
             }
           }
-        `
+        `,
       }
 
       const { props } = resolve(`defineProps<App.Data.AircraftData>()`, files, {
-        globalTypeFiles: Object.keys(files)
+        globalTypeFiles: Object.keys(files),
       })
 
       expect(props).toStrictEqual({
         id: ['String'],
-        manufacturer: ['Object']
+        manufacturer: ['Object'],
+      })
+    })
+
+    // #9871
+    test('shared generics with different args', () => {
+      const files = {
+        '/foo.ts': `export interface Foo<T> { value: T }`,
+      }
+      const { props } = resolve(
+        `import type { Foo } from './foo'
+        defineProps<Foo<string>>()`,
+        files,
+        undefined,
+        `/One.vue`,
+      )
+      expect(props).toStrictEqual({
+        value: ['String'],
+      })
+      const { props: props2 } = resolve(
+        `import type { Foo } from './foo'
+        defineProps<Foo<number>>()`,
+        files,
+        undefined,
+        `/Two.vue`,
+        false /* do not invalidate cache */,
+      )
+      expect(props2).toStrictEqual({
+        value: ['Number'],
       })
     })
   })
@@ -944,25 +1342,25 @@ describe('resolveType', () => {
   describe('errors', () => {
     test('failed type reference', () => {
       expect(() => resolve(`defineProps<X>()`)).toThrow(
-        `Unresolvable type reference`
+        `Unresolvable type reference`,
       )
     })
 
     test('unsupported computed keys', () => {
       expect(() => resolve(`defineProps<{ [Foo]: string }>()`)).toThrow(
-        `Unsupported computed key in type referenced by a macro`
+        `Unsupported computed key in type referenced by a macro`,
       )
     })
 
     test('unsupported index type', () => {
       expect(() => resolve(`defineProps<X[K]>()`)).toThrow(
-        `Unsupported type when resolving index type`
+        `Unsupported type when resolving index type`,
       )
     })
 
     test('failed import source resolve', () => {
       expect(() =>
-        resolve(`import { X } from './foo'; defineProps<X>()`)
+        resolve(`import { X } from './foo'; defineProps<X>()`),
       ).toThrow(`Failed to resolve import source "./foo"`)
     })
 
@@ -973,7 +1371,7 @@ describe('resolveType', () => {
         resolve(`
         import type P from 'unknown'
         defineProps<{ foo: P }>()
-      `)
+      `),
       ).not.toThrow()
     })
 
@@ -983,7 +1381,7 @@ describe('resolveType', () => {
         import type Base from 'unknown'
         interface Props extends Base {}
         defineProps<Props>()
-      `)
+      `),
       ).toThrow(`@vue-ignore`)
     })
 
@@ -998,11 +1396,42 @@ describe('resolveType', () => {
           foo: string
         }
         defineProps<Props>()
-      `))
+      `)),
       ).not.toThrow(`@vue-ignore`)
 
       expect(res.props).toStrictEqual({
-        foo: ['String']
+        foo: ['String'],
+      })
+    })
+  })
+
+  describe('template literals', () => {
+    test('mapped types with string type', () => {
+      expect(
+        resolve(`
+      type X = 'a' | 'b'
+      defineProps<{[K in X as \`\${K}_foo\`]: string}>()
+      `).props,
+      ).toStrictEqual({
+        a_foo: ['String'],
+        b_foo: ['String'],
+      })
+    })
+
+    // #10962
+    test('mapped types with generic parameters', () => {
+      const { props } = resolve(`
+      type Breakpoints = 'sm' | 'md' | 'lg'
+      type BreakpointFactory<T extends string, V> = {
+        [K in Breakpoints as \`\${T}\${Capitalize<K>}\`]: V
+      }
+      type ColsBreakpoints = BreakpointFactory<'cols', number>
+      defineProps<ColsBreakpoints>()
+      `)
+      expect(props).toStrictEqual({
+        colsSm: ['Number'],
+        colsMd: ['Number'],
+        colsLg: ['Number'],
       })
     })
   })
@@ -1012,10 +1441,11 @@ function resolve(
   code: string,
   files: Record<string, string> = {},
   options?: Partial<SFCScriptCompileOptions>,
-  sourceFileName: string = '/Test.vue'
+  sourceFileName: string = '/Test.vue',
+  invalidateCache = true,
 ) {
   const { descriptor } = parse(`<script setup lang="ts">\n${code}\n</script>`, {
-    filename: sourceFileName
+    filename: sourceFileName,
   })
   const ctx = new ScriptCompileContext(descriptor, {
     id: 'test',
@@ -1025,13 +1455,15 @@ function resolve(
       },
       readFile(file) {
         return files[file] ?? files[normalize(file)]
-      }
+      },
     },
-    ...options
+    ...options,
   })
 
-  for (const file in files) {
-    invalidateTypeCache(file)
+  if (invalidateCache) {
+    for (const file in files) {
+      invalidateTypeCache(file)
+    }
   }
 
   // ctx.userImports is collected when calling compileScript(), but we are
@@ -1057,6 +1489,6 @@ function resolve(
     props,
     calls: raw.calls,
     deps: ctx.deps,
-    raw
+    raw,
   }
 }
diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index 66fc201f5..b76414364 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -1,20 +1,20 @@
 import {
+  type SFCStyleCompileOptions,
   compileStyle,
   compileStyleAsync,
-  SFCStyleCompileOptions
 } from '../src/compileStyle'
-import path from 'path'
+import path from 'node:path'
 
 export function compileScoped(
   source: string,
-  options?: Partial<SFCStyleCompileOptions>
+  options?: Partial<SFCStyleCompileOptions>,
 ): string {
   const res = compileStyle({
     source,
     filename: 'test.css',
     id: 'data-v-test',
     scoped: true,
-    ...options
+    ...options,
   })
   if (res.errors.length) {
     res.errors.forEach(err => {
@@ -28,34 +28,72 @@ export function compileScoped(
 describe('SFC scoped CSS', () => {
   test('simple selectors', () => {
     expect(compileScoped(`h1 { color: red; }`)).toMatch(
-      `h1[data-v-test] { color: red;`
+      `h1[data-v-test] { color: red;`,
     )
     expect(compileScoped(`.foo { color: red; }`)).toMatch(
-      `.foo[data-v-test] { color: red;`
+      `.foo[data-v-test] { color: red;`,
     )
   })
 
   test('descendent selector', () => {
     expect(compileScoped(`h1 .foo { color: red; }`)).toMatch(
-      `h1 .foo[data-v-test] { color: red;`
+      `h1 .foo[data-v-test] { color: red;`,
+    )
+  })
+
+  test('nesting selector', () => {
+    expect(compileScoped(`h1 { color: red; .foo { color: red; } }`)).toMatch(
+      `h1 {\n&[data-v-test] { color: red;\n}\n.foo[data-v-test] { color: red;`,
+    )
+  })
+
+  test('nesting selector with atrule and comment', () => {
+    expect(
+      compileScoped(
+        `h1 {
+color: red;
+/*background-color: pink;*/
+@media only screen and (max-width: 800px) {
+  background-color: green;
+  .bar { color: white }
+}
+.foo { color: red; }
+}`,
+      ),
+    ).toMatch(
+      `h1 {
+&[data-v-test] {
+color: red
+/*background-color: pink;*/
+}
+@media only screen and (max-width: 800px) {
+&[data-v-test] {
+  background-color: green
+}
+.bar[data-v-test] { color: white
+}
+}
+.foo[data-v-test] { color: red;
+}
+}`,
     )
   })
 
   test('multiple selectors', () => {
     expect(compileScoped(`h1 .foo, .bar, .baz { color: red; }`)).toMatch(
-      `h1 .foo[data-v-test], .bar[data-v-test], .baz[data-v-test] { color: red;`
+      `h1 .foo[data-v-test], .bar[data-v-test], .baz[data-v-test] { color: red;`,
     )
   })
 
   test('pseudo class', () => {
     expect(compileScoped(`.foo:after { color: red; }`)).toMatch(
-      `.foo[data-v-test]:after { color: red;`
+      `.foo[data-v-test]:after { color: red;`,
     )
   })
 
   test('pseudo element', () => {
     expect(compileScoped(`::selection { display: none; }`)).toMatch(
-      '[data-v-test]::selection {'
+      '[data-v-test]::selection {',
     )
   })
 
@@ -95,6 +133,13 @@ describe('SFC scoped CSS', () => {
       ":where(.foo[data-v-test] .bar) { color: red;
       }"
     `)
+    expect(compileScoped(`:deep(.foo) { color: red; .bar { color: red; } }`))
+      .toMatchInlineSnapshot(`
+      "[data-v-test] .foo { color: red;
+      .bar { color: red;
+      }
+      }"
+    `)
   })
 
   test('::v-slotted', () => {
@@ -144,6 +189,62 @@ describe('SFC scoped CSS', () => {
     `)
   })
 
+  test(':is() and :where() with multiple selectors', () => {
+    expect(compileScoped(`:is(.foo) { color: red; }`)).toMatchInlineSnapshot(`
+      ":is(.foo[data-v-test]) { color: red;
+      }"
+    `)
+    expect(compileScoped(`:where(.foo, .bar) { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ":where(.foo[data-v-test], .bar[data-v-test]) { color: red;
+      }"
+    `)
+    expect(compileScoped(`:is(.foo, .bar) div { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ":is(.foo, .bar) div[data-v-test] { color: red;
+      }"
+    `)
+  })
+
+  // #10511
+  test(':is() and :where() in compound selectors', () => {
+    expect(
+      compileScoped(`.div { color: red; } .div:where(:hover) { color: blue; }`),
+    ).toMatchInlineSnapshot(`
+    ".div[data-v-test] { color: red;
+    }
+    .div[data-v-test]:where(:hover) { color: blue;
+    }"`)
+
+    expect(
+      compileScoped(`.div { color: red; } .div:is(:hover) { color: blue; }`),
+    ).toMatchInlineSnapshot(`
+    ".div[data-v-test] { color: red;
+    }
+    .div[data-v-test]:is(:hover) { color: blue;
+    }"`)
+
+    expect(
+      compileScoped(
+        `.div { color: red; } .div:where(.foo:hover) { color: blue; }`,
+      ),
+    ).toMatchInlineSnapshot(`
+    ".div[data-v-test] { color: red;
+    }
+    .div[data-v-test]:where(.foo:hover) { color: blue;
+    }"`)
+
+    expect(
+      compileScoped(
+        `.div { color: red; } .div:is(.foo:hover) { color: blue; }`,
+      ),
+    ).toMatchInlineSnapshot(`
+    ".div[data-v-test] { color: red;
+    }
+    .div[data-v-test]:is(.foo:hover) { color: blue;
+    }"`)
+  })
+
   test('media query', () => {
     expect(compileScoped(`@media print { .foo { color: red }}`))
       .toMatchInlineSnapshot(`
@@ -200,30 +301,30 @@ describe('SFC scoped CSS', () => {
   to { opacity: 1; }
 }
     `,
-      { id: 'data-v-test' }
+      { id: 'data-v-test' },
     )
 
     expect(style).toContain(
-      `.anim[data-v-test] {\n  animation: color-test 5s infinite, other 5s;`
+      `.anim[data-v-test] {\n  animation: color-test 5s infinite, other 5s;`,
     )
     expect(style).toContain(
-      `.anim-2[data-v-test] {\n  animation-name: color-test`
+      `.anim-2[data-v-test] {\n  animation-name: color-test`,
     )
     expect(style).toContain(
-      `.anim-3[data-v-test] {\n  animation: 5s color-test infinite, 5s other;`
+      `.anim-3[data-v-test] {\n  animation: 5s color-test infinite, 5s other;`,
     )
     expect(style).toContain(`@keyframes color-test {`)
     expect(style).toContain(`@-webkit-keyframes color-test {`)
 
     expect(style).toContain(
-      `.anim-multiple[data-v-test] {\n  animation: color-test 5s infinite,opacity-test 2s;`
+      `.anim-multiple[data-v-test] {\n  animation: color-test 5s infinite,opacity-test 2s;`,
     )
     expect(style).toContain(
-      `.anim-multiple-2[data-v-test] {\n  animation-name: color-test,opacity-test;`
+      `.anim-multiple-2[data-v-test] {\n  animation-name: color-test,opacity-test;`,
     )
     expect(style).toContain(`@keyframes opacity-test {\nfrom { opacity: 0;`)
     expect(style).toContain(
-      `@-webkit-keyframes opacity-test {\nfrom { opacity: 0;`
+      `@-webkit-keyframes opacity-test {\nfrom { opacity: 0;`,
     )
   })
 
@@ -248,7 +349,7 @@ describe('SFC scoped CSS', () => {
         }"
       `)
       expect(
-        `::v-deep usage as a combinator has been deprecated.`
+        `::v-deep usage as a combinator has been deprecated.`,
       ).toHaveBeenWarned()
     })
 
@@ -259,7 +360,7 @@ describe('SFC scoped CSS', () => {
         }"
       `)
       expect(
-        `the >>> and /deep/ combinators have been deprecated.`
+        `the >>> and /deep/ combinators have been deprecated.`,
       ).toHaveBeenWarned()
     })
 
@@ -270,7 +371,7 @@ describe('SFC scoped CSS', () => {
         }"
       `)
       expect(
-        `the >>> and /deep/ combinators have been deprecated.`
+        `the >>> and /deep/ combinators have been deprecated.`,
       ).toHaveBeenWarned()
     })
   })
@@ -282,7 +383,7 @@ describe('SFC CSS modules', () => {
       source: `.red { color: red }\n.green { color: green }\n:global(.blue) { color: blue }`,
       filename: `test.css`,
       id: 'test',
-      modules: true
+      modules: true,
     })
     expect(result.modules).toBeDefined()
     expect(result.modules!.red).toMatch('_red_')
@@ -299,8 +400,8 @@ describe('SFC CSS modules', () => {
       modulesOptions: {
         scopeBehaviour: 'global',
         generateScopedName: `[name]__[local]__[hash:base64:5]`,
-        localsConvention: 'camelCaseOnly'
-      }
+        localsConvention: 'camelCaseOnly',
+      },
     })
     expect(result.modules).toBeDefined()
     expect(result.modules!.fooBar).toMatch('__foo-bar__')
@@ -316,11 +417,11 @@ describe('SFC style preprocessors', () => {
       `,
       filename: path.resolve(__dirname, './fixture/test.scss'),
       id: '',
-      preprocessLang: 'scss'
+      preprocessLang: 'scss',
     })
 
     expect([...res.dependencies]).toStrictEqual([
-      path.join(__dirname, './fixture/import.scss')
+      path.join(__dirname, './fixture/import.scss'),
     ])
   })
 
@@ -331,7 +432,7 @@ describe('SFC style preprocessors', () => {
           @mixin square($size) {
             width: $size;
             height: $size;
-          }`
+          }`,
       },
       source: `
         .square {
@@ -340,7 +441,7 @@ describe('SFC style preprocessors', () => {
       `,
       filename: path.resolve(__dirname, './fixture/test.scss'),
       id: '',
-      preprocessLang: 'scss'
+      preprocessLang: 'scss',
     })
 
     expect(res.errors.length).toBe(0)
@@ -363,14 +464,33 @@ describe('SFC style preprocessors', () => {
             width: $size;
             height: $size;
           }`
-        }
+        },
       },
       source,
       filename,
       id: '',
-      preprocessLang: 'scss'
+      preprocessLang: 'scss',
     })
 
     expect(res.errors.length).toBe(0)
   })
+
+  test('should mount scope on correct selector when have universal selector', () => {
+    expect(compileScoped(`* { color: red; }`)).toMatchInlineSnapshot(`
+      "[data-v-test] { color: red;
+      }"
+    `)
+    expect(compileScoped('* .foo { color: red; }')).toMatchInlineSnapshot(`
+      ".foo[data-v-test] { color: red;
+      }"
+    `)
+    expect(compileScoped(`*.foo { color: red; }`)).toMatchInlineSnapshot(`
+      ".foo[data-v-test] { color: red;
+      }"
+    `)
+    expect(compileScoped(`.foo * { color: red; }`)).toMatchInlineSnapshot(`
+      ".foo[data-v-test] * { color: red;
+      }"
+    `)
+  })
 })
diff --git a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
index 9026a7e90..2ea1eb9d3 100644
--- a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
@@ -1,13 +1,16 @@
+import { type RawSourceMap, SourceMapConsumer } from 'source-map-js'
+import { parse as babelParse } from '@babel/parser'
 import {
+  type SFCTemplateCompileOptions,
   compileTemplate,
-  SFCTemplateCompileOptions
 } from '../src/compileTemplate'
-import { parse, SFCTemplateBlock } from '../src/parse'
+import { type SFCTemplateBlock, parse } from '../src/parse'
+import { compileScript } from '../src'
 
 function compile(opts: Omit<SFCTemplateCompileOptions, 'id'>) {
   return compileTemplate({
     ...opts,
-    id: ''
+    id: '',
   })
 }
 
@@ -48,13 +51,13 @@ body
     p Cool Pug example!
 </template>
 `,
-    { filename: 'example.vue', sourceMap: true }
+    { filename: 'example.vue', sourceMap: true },
   ).descriptor.template as SFCTemplateBlock
 
   const result = compile({
     filename: 'example.vue',
     source: template.content,
-    preprocessLang: template.lang
+    preprocessLang: template.lang,
   })
 
   expect(result.errors.length).toBe(0)
@@ -72,31 +75,31 @@ test('preprocess pug with indents and blank lines', () => {
     p This is the last line.
 </template>
 `,
-    { filename: 'example.vue', sourceMap: true }
+    { filename: 'example.vue', sourceMap: true },
   ).descriptor.template as SFCTemplateBlock
 
   const result = compile({
     filename: 'example.vue',
     source: template.content,
-    preprocessLang: template.lang
+    preprocessLang: template.lang,
   })
 
   expect(result.errors.length).toBe(0)
   expect(result.source).toBe(
-    '<body><h1>The next line contains four spaces.</h1><div class="container"><p>The next line is empty.</p></div><p>This is the last line.</p></body>'
+    '<body><h1>The next line contains four spaces.</h1><div class="container"><p>The next line is empty.</p></div><p>This is the last line.</p></body>',
   )
 })
 
 test('warn missing preprocessor', () => {
   const template = parse(`<template lang="unknownLang">hi</template>\n`, {
     filename: 'example.vue',
-    sourceMap: true
+    sourceMap: true,
   }).descriptor.template as SFCTemplateBlock
 
   const result = compile({
     filename: 'example.vue',
     source: template.content,
-    preprocessLang: template.lang
+    preprocessLang: template.lang,
   })
 
   expect(result.errors.length).toBe(1)
@@ -108,8 +111,8 @@ test('transform asset url options', () => {
   const { code: code1 } = compile({
     ...input,
     transformAssetUrls: {
-      tags: { foo: ['bar'] }
-    }
+      tags: { foo: ['bar'] },
+    },
   })
   expect(code1).toMatch(`import _imports_0 from 'baz'\n`)
 
@@ -117,15 +120,15 @@ test('transform asset url options', () => {
   const { code: code2 } = compile({
     ...input,
     transformAssetUrls: {
-      foo: ['bar']
-    }
+      foo: ['bar'],
+    },
   })
   expect(code2).toMatch(`import _imports_0 from 'baz'\n`)
 
   // false option
   const { code: code3 } = compile({
     ...input,
-    transformAssetUrls: false
+    transformAssetUrls: false,
   })
   expect(code3).not.toMatch(`import _imports_0 from 'baz'\n`)
 })
@@ -134,25 +137,194 @@ test('source map', () => {
   const template = parse(
     `
 <template>
-  <div><p>{{ render }}</p></div>
+  <div><p>{{ foobar }}</p></div>
 </template>
 `,
-    { filename: 'example.vue', sourceMap: true }
-  ).descriptor.template as SFCTemplateBlock
+    { filename: 'example.vue', sourceMap: true },
+  ).descriptor.template!
 
-  const result = compile({
+  const { code, map } = compile({
     filename: 'example.vue',
-    source: template.content
+    source: template.content,
   })
 
-  expect(result.map).toMatchSnapshot()
+  expect(map!.sources).toEqual([`example.vue`])
+  expect(map!.sourcesContent).toEqual([template.content])
+
+  const consumer = new SourceMapConsumer(map as RawSourceMap)
+  expect(
+    consumer.originalPositionFor(getPositionInCode(code, 'foobar')),
+  ).toMatchObject(getPositionInCode(template.content, `foobar`))
+})
+
+test('should work w/ AST from descriptor', () => {
+  const source = `
+  <template>
+    <div><p>{{ foobar }}</p></div>
+  </template>
+  `
+  const template = parse(source, {
+    filename: 'example.vue',
+    sourceMap: true,
+  }).descriptor.template!
+
+  expect(template.ast!.source).toBe(source)
+
+  const { code, map } = compile({
+    filename: 'example.vue',
+    source: template.content,
+    ast: template.ast,
+  })
+
+  expect(map!.sources).toEqual([`example.vue`])
+  // when reusing AST from SFC parse for template compile,
+  // the source corresponds to the entire SFC
+  expect(map!.sourcesContent).toEqual([source])
+
+  const consumer = new SourceMapConsumer(map as RawSourceMap)
+  expect(
+    consumer.originalPositionFor(getPositionInCode(code, 'foobar')),
+  ).toMatchObject(getPositionInCode(source, `foobar`))
+
+  expect(code).toBe(
+    compile({
+      filename: 'example.vue',
+      source: template.content,
+    }).code,
+  )
+})
+
+test('should work w/ AST from descriptor in SSR mode', () => {
+  const source = `
+  <template>
+    <div><p>{{ foobar }}</p></div>
+  </template>
+  `
+  const template = parse(source, {
+    filename: 'example.vue',
+    sourceMap: true,
+  }).descriptor.template!
+
+  expect(template.ast!.source).toBe(source)
+
+  const { code, map } = compile({
+    filename: 'example.vue',
+    source: '', // make sure it's actually using the AST instead of source
+    ast: template.ast,
+    ssr: true,
+  })
+
+  expect(map!.sources).toEqual([`example.vue`])
+  // when reusing AST from SFC parse for template compile,
+  // the source corresponds to the entire SFC
+  expect(map!.sourcesContent).toEqual([source])
+
+  const consumer = new SourceMapConsumer(map as RawSourceMap)
+  expect(
+    consumer.originalPositionFor(getPositionInCode(code, 'foobar')),
+  ).toMatchObject(getPositionInCode(source, `foobar`))
+
+  expect(code).toBe(
+    compile({
+      filename: 'example.vue',
+      source: template.content,
+      ssr: true,
+    }).code,
+  )
+})
+
+test('should not reuse AST if using custom compiler', () => {
+  const source = `
+  <template>
+    <div><p>{{ foobar }}</p></div>
+  </template>
+  `
+  const template = parse(source, {
+    filename: 'example.vue',
+    sourceMap: true,
+  }).descriptor.template!
+
+  const { code } = compile({
+    filename: 'example.vue',
+    source: template.content,
+    ast: template.ast,
+    compiler: {
+      parse: () => null as any,
+      // @ts-expect-error
+      compile: input => ({ code: input }),
+    },
+  })
+
+  // what we really want to assert is that the `input` received by the custom
+  // compiler is the source string, not the AST.
+  expect(code).toBe(template.content)
+})
+
+test('should force re-parse on already transformed AST', () => {
+  const source = `
+  <template>
+    <div><p>{{ foobar }}</p></div>
+  </template>
+  `
+  const template = parse(source, {
+    filename: 'example.vue',
+    sourceMap: true,
+  }).descriptor.template!
+
+  // force set to empty, if this is reused then it won't generate proper code
+  template.ast!.children = []
+  template.ast!.transformed = true
+
+  const { code } = compile({
+    filename: 'example.vue',
+    source: '',
+    ast: template.ast,
+  })
+
+  expect(code).toBe(
+    compile({
+      filename: 'example.vue',
+      source: template.content,
+    }).code,
+  )
+})
+
+test('should force re-parse with correct compiler in SSR mode', () => {
+  const source = `
+  <template>
+    <div><p>{{ foobar }}</p></div>
+  </template>
+  `
+  const template = parse(source, {
+    filename: 'example.vue',
+    sourceMap: true,
+  }).descriptor.template!
+
+  // force set to empty, if this is reused then it won't generate proper code
+  template.ast!.children = []
+  template.ast!.transformed = true
+
+  const { code } = compile({
+    filename: 'example.vue',
+    source: '',
+    ast: template.ast,
+    ssr: true,
+  })
+
+  expect(code).toBe(
+    compile({
+      filename: 'example.vue',
+      source: template.content,
+      ssr: true,
+    }).code,
+  )
 })
 
 test('template errors', () => {
   const result = compile({
     filename: 'example.vue',
-    source: `<div :foo
-      :bar="a[" v-model="baz"/>`
+    source: `<div
+      :bar="a[" v-model="baz"/>`,
   })
   expect(result.errors).toMatchSnapshot()
 })
@@ -164,20 +336,20 @@ test('preprocessor errors', () => {
   div(class='class)
 </template>
 `,
-    { filename: 'example.vue', sourceMap: true }
+    { filename: 'example.vue', sourceMap: true },
   ).descriptor.template as SFCTemplateBlock
 
   const result = compile({
     filename: 'example.vue',
     source: template.content,
-    preprocessLang: template.lang
+    preprocessLang: template.lang,
   })
 
   expect(result.errors.length).toBe(1)
   const message = result.errors[0].toString()
   expect(message).toMatch(`Error: example.vue:3:1`)
   expect(message).toMatch(
-    `The end of the string reached with no closing bracket ) found.`
+    `The end of the string reached with no closing bracket ) found.`,
   )
 })
 
@@ -191,7 +363,7 @@ test('should generate the correct imports expression', () => {
         <img src="./bar.svg"/>
       </Comp>
     `,
-    ssr: true
+    ssr: true,
   })
   expect(code).toMatch(`_ssrRenderAttr(\"src\", _imports_1)`)
   expect(code).toMatch(`_createVNode(\"img\", { src: _imports_1 })`)
@@ -213,7 +385,7 @@ test('should not hoist srcset URLs in SSR mode', () => {
       </picture>
     </router-link>
     `,
-    ssr: true
+    ssr: true,
   })
   expect(code).toMatchSnapshot()
 })
@@ -226,3 +398,120 @@ test('dynamic v-on + static v-on should merged', () => {
 
   expect(result.code).toMatchSnapshot()
 })
+
+// #9853 regression found in Nuxt tests
+// walkIdentifiers can get called multiple times on the same node
+// due to #9729 calling it during SFC template usage check.
+// conditions needed:
+// 1. `<script setup lang="ts">`
+// 2. Has import
+// 3. inlineTemplate: false
+// 4. AST being reused
+test('prefixing edge case for reused AST', () => {
+  const src = `
+  <script setup lang="ts">
+    import { Foo } from './foo'
+  </script>
+  <template>
+    {{ list.map((t, index) => ({ t: t })) }}
+  </template>
+  `
+  const { descriptor } = parse(src)
+  // compileScript triggers importUsageCheck
+  compileScript(descriptor, { id: 'xxx' })
+  const { code } = compileTemplate({
+    id: 'xxx',
+    filename: 'test.vue',
+    ast: descriptor.template!.ast,
+    source: descriptor.template!.content,
+  })
+  expect(code).not.toMatch(`_ctx.t`)
+})
+
+test('prefixing edge case for reused AST ssr mode', () => {
+  const src = `
+  <script setup lang="ts">
+    import { Foo } from './foo'
+  </script>
+  <template>
+    <Bar>
+      <template #option="{ foo }"></template>
+    </Bar>
+  </template>
+  `
+  const { descriptor } = parse(src)
+  // compileScript triggers importUsageCheck
+  compileScript(descriptor, { id: 'xxx' })
+  expect(() =>
+    compileTemplate({
+      id: 'xxx',
+      filename: 'test.vue',
+      ast: descriptor.template!.ast,
+      source: descriptor.template!.content,
+      ssr: true,
+    }),
+  ).not.toThrowError()
+})
+
+// #10852
+test('non-identifier expression in legacy filter syntax', () => {
+  const src = `
+  <template>
+    <div>
+      Today is
+      {{ new Date() | formatDate }}
+    </div>
+  </template>
+  `
+
+  const { descriptor } = parse(src)
+  const compilationResult = compileTemplate({
+    id: 'xxx',
+    filename: 'test.vue',
+    ast: descriptor.template!.ast,
+    source: descriptor.template!.content,
+    ssr: false,
+    compilerOptions: {
+      compatConfig: {
+        MODE: 2,
+      },
+    },
+  })
+
+  expect(() => {
+    babelParse(compilationResult.code, { sourceType: 'module' })
+  }).not.toThrow()
+})
+
+interface Pos {
+  line: number
+  column: number
+  name?: string
+}
+
+function getPositionInCode(
+  code: string,
+  token: string,
+  expectName: string | boolean = false,
+): Pos {
+  const generatedOffset = code.indexOf(token)
+  let line = 1
+  let lastNewLinePos = -1
+  for (let i = 0; i < generatedOffset; i++) {
+    if (code.charCodeAt(i) === 10 /* newline char code */) {
+      line++
+      lastNewLinePos = i
+    }
+  }
+  const res: Pos = {
+    line,
+    column:
+      lastNewLinePos === -1
+        ? generatedOffset
+        : generatedOffset - lastNewLinePos - 1,
+  }
+  if (expectName) {
+    res.name = typeof expectName === 'string' ? expectName : token
+  }
+  return res
+}
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index 9fb72d7ad..323c9c7a5 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -1,5 +1,5 @@
 import { compileStyle, parse } from '../src'
-import { mockId, compileSFCScript, assertCode } from './utils'
+import { assertCode, compileSFCScript, mockId } from './utils'
 
 describe('CSS vars injection', () => {
   test('generating correct code for nested paths', () => {
@@ -8,7 +8,7 @@ describe('CSS vars injection', () => {
         `<style>div{
           color: v-bind(color);
           font-size: v-bind('font.size');
-        }</style>`
+        }</style>`,
     )
     expect(content).toMatch(`_useCssVars(_ctx => ({
   "${mockId}-color": (_ctx.color),
@@ -32,7 +32,7 @@ describe('CSS vars injection', () => {
           div {
             font-size: v-bind(size);
           }
-        </style>`
+        </style>`,
     )
     expect(content).toMatch(`_useCssVars(_ctx => ({
   "${mockId}-size": (_ctx.size)
@@ -57,7 +57,7 @@ describe('CSS vars injection', () => {
             font-size: v-bind(size);
             border: v-bind(foo);
           }
-        </style>`
+        </style>`,
     )
     // should handle:
     // 1. local const bindings
@@ -69,7 +69,7 @@ describe('CSS vars injection', () => {
   "${mockId}-foo": (__props.foo)
 })`)
     expect(content).toMatch(
-      `import { useCssVars as _useCssVars, unref as _unref } from 'vue'`
+      `import { useCssVars as _useCssVars, unref as _unref } from 'vue'`,
     )
     assertCode(content)
   })
@@ -85,12 +85,12 @@ describe('CSS vars injection', () => {
         font-family: v-bind(フォント);
       }`,
       filename: 'test.css',
-      id: 'data-v-test'
+      id: 'data-v-test',
     })
     expect(code).toMatchInlineSnapshot(`
       ".foo {
               color: var(--test-color);
-              font-size: var(--test-font\\\\.size);
+              font-size: var(--test-font\\.size);
 
               font-weight: var(--test-_φ);
               font-size: var(--test-1-字号);
@@ -106,7 +106,7 @@ describe('CSS vars injection', () => {
           color: v-bind(color);
           font-size: v-bind('font.size');
         }</style>`,
-      { isProd: true }
+      { isProd: true },
     )
     expect(content).toMatch(`_useCssVars(_ctx => ({
   "4003f1a6": (_ctx.color),
@@ -120,7 +120,7 @@ describe('CSS vars injection', () => {
       }`,
       filename: 'test.css',
       id: mockId,
-      isProd: true
+      isProd: true,
     })
     expect(code).toMatchInlineSnapshot(`
       ".foo {
@@ -135,8 +135,8 @@ describe('CSS vars injection', () => {
       assertCode(
         compileSFCScript(
           `<script>const a = 1</script>\n` +
-            `<style>div{ color: v-bind(color); }</style>`
-        ).content
+            `<style>div{ color: v-bind(color); }</style>`,
+        ).content,
       )
     })
 
@@ -144,8 +144,8 @@ describe('CSS vars injection', () => {
       assertCode(
         compileSFCScript(
           `<script>export default { setup() {} }</script>\n` +
-            `<style>div{ color: v-bind(color); }</style>`
-        ).content
+            `<style>div{ color: v-bind(color); }</style>`,
+        ).content,
       )
     })
 
@@ -155,8 +155,8 @@ describe('CSS vars injection', () => {
           `<script>
           // export default {}
           export default {}
-        </script>\n` + `<style>div{ color: v-bind(color); }</style>`
-        ).content
+        </script>\n` + `<style>div{ color: v-bind(color); }</style>`,
+        ).content,
       )
     })
 
@@ -164,8 +164,8 @@ describe('CSS vars injection', () => {
       assertCode(
         compileSFCScript(
           `<script setup>const color = 'red'</script>\n` +
-            `<style>div{ color: v-bind(color); }</style>`
-        ).content
+            `<style>div{ color: v-bind(color); }</style>`,
+        ).content,
       )
     })
 
@@ -178,7 +178,7 @@ describe('CSS vars injection', () => {
             div{ /* color: v-bind(color); */ width:20; }
             div{ width: v-bind(width); }
             /* comment */
-          </style>`
+          </style>`,
       )
 
       expect(content).not.toMatch(`"${mockId}-color": (color)`)
@@ -198,7 +198,7 @@ describe('CSS vars injection', () => {
           p {
             color: v-bind(color);
           }
-        </style>`
+        </style>`,
       )
       // color should only be injected once, even if it is twice in style
       expect(content).toMatch(`_useCssVars(_ctx => ({
@@ -229,7 +229,7 @@ describe('CSS vars injection', () => {
           p {
             color: v-bind(((a + b)) / (2 * a));
           }
-        </style>`
+        </style>`,
       )
       expect(content).toMatch(`_useCssVars(_ctx => ({
   "${mockId}-foo": (_unref(foo)),
@@ -243,7 +243,7 @@ describe('CSS vars injection', () => {
     // #6022
     test('should be able to parse incomplete expressions', () => {
       const {
-        descriptor: { cssVars }
+        descriptor: { cssVars },
       } = parse(
         `<script setup>let xxx = 1</script>
         <style scoped>
@@ -251,7 +251,7 @@ describe('CSS vars injection', () => {
           font-weight: v-bind("count.toString(");
           font-weight: v-bind(xxx);
         }
-        </style>`
+        </style>`,
       )
       expect(cssVars).toMatchObject([`count.toString(`, `xxx`])
     })
@@ -266,10 +266,10 @@ describe('CSS vars injection', () => {
              label {
                background: v-bind(background);
              }
-             </style>`
+             </style>`,
       )
       expect(content).toMatch(
-        `export default {\n  setup(__props, { expose: __expose }) {\n  __expose();\n\n_useCssVars(_ctx => ({\n  "xxxxxxxx-background": (_unref(background))\n}))`
+        `export default {\n  setup(__props, { expose: __expose }) {\n  __expose();\n\n_useCssVars(_ctx => ({\n  "xxxxxxxx-background": (_unref(background))\n}))`,
       )
     })
 
@@ -287,9 +287,9 @@ describe('CSS vars injection', () => {
           {
             inlineTemplate: true,
             templateOptions: {
-              ssr: true
-            }
-          }
+              ssr: true,
+            },
+          },
         )
         expect(content).not.toMatch(`_useCssVars`)
       })
@@ -308,9 +308,9 @@ describe('CSS vars injection', () => {
           {
             inlineTemplate: false,
             templateOptions: {
-              ssr: true
-            }
-          }
+              ssr: true,
+            },
+          },
         )
         expect(content).not.toMatch(`_useCssVars`)
       })
@@ -333,9 +333,9 @@ describe('CSS vars injection', () => {
             </style>`,
           {
             templateOptions: {
-              ssr: true
-            }
-          }
+              ssr: true,
+            },
+          },
         )
         expect(content).not.toMatch(`_useCssVars`)
       })
diff --git a/packages/compiler-sfc/__tests__/parse.spec.ts b/packages/compiler-sfc/__tests__/parse.spec.ts
index ae362da02..87cd05ed0 100644
--- a/packages/compiler-sfc/__tests__/parse.spec.ts
+++ b/packages/compiler-sfc/__tests__/parse.spec.ts
@@ -1,5 +1,10 @@
 import { parse } from '../src'
-import { baseParse, baseCompile } from '@vue/compiler-core'
+import {
+  ElementTypes,
+  NodeTypes,
+  baseCompile,
+  createRoot,
+} from '@vue/compiler-core'
 import { SourceMapConsumer } from 'source-map-js'
 
 describe('compiler:sfc', () => {
@@ -7,15 +12,61 @@ describe('compiler:sfc', () => {
     test('style block', () => {
       // Padding determines how many blank lines will there be before the style block
       const padding = Math.round(Math.random() * 10)
-      const style = parse(
-        `${'\n'.repeat(padding)}<style>\n.color {\n color: red;\n }\n</style>\n`
-      ).descriptor.styles[0]
+      const src =
+        `${'\n'.repeat(padding)}` +
+        `<style>
+.css {
+color: red;
+}
+</style>
 
-      expect(style.map).not.toBeUndefined()
+<style module>
+.css-module {
+color: red;
+}
+</style>
 
-      const consumer = new SourceMapConsumer(style.map!)
+<style scoped>
+.css-scoped {
+color: red;
+}
+</style>
+
+<style scoped>
+.css-scoped-nested {
+color: red;
+.dummy {
+color: green;
+}
+font-weight: bold;
+}
+</style>`
+      const {
+        descriptor: { styles },
+      } = parse(src)
+
+      expect(styles[0].map).not.toBeUndefined()
+      const consumer = new SourceMapConsumer(styles[0].map!)
+      const lineOffset =
+        src.slice(0, src.indexOf(`<style>`)).split('\n').length - 1
       consumer.eachMapping(mapping => {
-        expect(mapping.originalLine - mapping.generatedLine).toBe(padding)
+        expect(mapping.generatedLine + lineOffset).toBe(mapping.originalLine)
+      })
+
+      expect(styles[1].map).not.toBeUndefined()
+      const consumer1 = new SourceMapConsumer(styles[1].map!)
+      const lineOffset1 =
+        src.slice(0, src.indexOf(`<style module>`)).split('\n').length - 1
+      consumer1.eachMapping(mapping => {
+        expect(mapping.generatedLine + lineOffset1).toBe(mapping.originalLine)
+      })
+
+      expect(styles[2].map).not.toBeUndefined()
+      const consumer2 = new SourceMapConsumer(styles[2].map!)
+      const lineOffset2 =
+        src.slice(0, src.indexOf(`<style scoped>`)).split('\n').length - 1
+      consumer2.eachMapping(mapping => {
+        expect(mapping.generatedLine + lineOffset2).toBe(mapping.originalLine)
       })
     })
 
@@ -23,7 +74,7 @@ describe('compiler:sfc', () => {
       // Padding determines how many blank lines will there be before the style block
       const padding = Math.round(Math.random() * 10)
       const script = parse(
-        `${'\n'.repeat(padding)}<script>\nconsole.log(1)\n }\n</script>\n`
+        `${'\n'.repeat(padding)}<script>\nconsole.log(1)\n }\n</script>\n`,
       ).descriptor.script
 
       expect(script!.map).not.toBeUndefined()
@@ -42,7 +93,7 @@ describe('compiler:sfc', () => {
   h1 foo
     div bar
     span baz
-</template>\n`
+</template>\n`,
       ).descriptor.template!
 
       expect(template.map).not.toBeUndefined()
@@ -57,7 +108,7 @@ describe('compiler:sfc', () => {
     test('custom block', () => {
       const padding = Math.round(Math.random() * 10)
       const custom = parse(
-        `${'\n'.repeat(padding)}<i18n>\n{\n  "greeting": "hello"\n}\n</i18n>\n`
+        `${'\n'.repeat(padding)}<i18n>\n{\n  "greeting": "hello"\n}\n</i18n>\n`,
       ).descriptor.customBlocks[0]
 
       expect(custom!.map).not.toBeUndefined()
@@ -92,42 +143,42 @@ h1 { color: red }
 
     const padTrue = parse(content.trim(), { pad: true }).descriptor
     expect(padTrue.script!.content).toBe(
-      Array(3 + 1).join('//\n') + '\nexport default {}\n'
+      Array(3 + 1).join('//\n') + '\nexport default {}\n',
     )
     expect(padTrue.styles[0].content).toBe(
-      Array(6 + 1).join('\n') + '\nh1 { color: red }\n'
+      Array(6 + 1).join('\n') + '\nh1 { color: red }\n',
     )
     expect(padTrue.customBlocks[0].content).toBe(
-      Array(9 + 1).join('\n') + '\n{ "greeting": "hello" }\n'
+      Array(9 + 1).join('\n') + '\n{ "greeting": "hello" }\n',
     )
 
     const padLine = parse(content.trim(), { pad: 'line' }).descriptor
     expect(padLine.script!.content).toBe(
-      Array(3 + 1).join('//\n') + '\nexport default {}\n'
+      Array(3 + 1).join('//\n') + '\nexport default {}\n',
     )
     expect(padLine.styles[0].content).toBe(
-      Array(6 + 1).join('\n') + '\nh1 { color: red }\n'
+      Array(6 + 1).join('\n') + '\nh1 { color: red }\n',
     )
     expect(padLine.customBlocks[0].content).toBe(
-      Array(9 + 1).join('\n') + '\n{ "greeting": "hello" }\n'
+      Array(9 + 1).join('\n') + '\n{ "greeting": "hello" }\n',
     )
 
     const padSpace = parse(content.trim(), { pad: 'space' }).descriptor
     expect(padSpace.script!.content).toBe(
       `<template>\n<div></div>\n</template>\n<script>`.replace(/./g, ' ') +
-        '\nexport default {}\n'
+        '\nexport default {}\n',
     )
     expect(padSpace.styles[0].content).toBe(
       `<template>\n<div></div>\n</template>\n<script>\nexport default {}\n</script>\n<style>`.replace(
         /./g,
-        ' '
-      ) + '\nh1 { color: red }\n'
+        ' ',
+      ) + '\nh1 { color: red }\n',
     )
     expect(padSpace.customBlocks[0].content).toBe(
       `<template>\n<div></div>\n</template>\n<script>\nexport default {}\n</script>\n<style>\nh1 { color: red }\n</style>\n<i18n>`.replace(
         /./g,
-        ' '
-      ) + '\n{ "greeting": "hello" }\n'
+        ' ',
+      ) + '\n{ "greeting": "hello" }\n',
     )
   })
 
@@ -141,9 +192,8 @@ h1 { color: red }
       end: {
         line: 3,
         column: 1,
-        offset: 10 + content.length
+        offset: 10 + content.length,
       },
-      source: content
     })
   })
 
@@ -152,9 +202,8 @@ h1 { color: red }
     expect(descriptor.template).toBeTruthy()
     expect(descriptor.template!.content).toBeFalsy()
     expect(descriptor.template!.loc).toMatchObject({
-      start: { line: 1, column: 1, offset: 0 },
-      end: { line: 1, column: 1, offset: 0 },
-      source: ''
+      start: { line: 1, column: 12, offset: 11 },
+      end: { line: 1, column: 12, offset: 11 },
     })
   })
 
@@ -165,7 +214,6 @@ h1 { color: red }
     expect(descriptor.template!.loc).toMatchObject({
       start: { line: 1, column: 11, offset: 10 },
       end: { line: 1, column: 11, offset: 10 },
-      source: ''
     })
   })
 
@@ -176,7 +224,7 @@ h1 { color: red }
     expect(parse(`<style> \n\t </style>`).descriptor.styles.length).toBe(0)
     expect(parse(`<custom/>`).descriptor.customBlocks.length).toBe(0)
     expect(
-      parse(`<custom> \n\t </custom>`).descriptor.customBlocks.length
+      parse(`<custom> \n\t </custom>`).descriptor.customBlocks.length,
     ).toBe(0)
   })
 
@@ -187,25 +235,28 @@ h1 { color: red }
     expect(descriptor.script!.attrs['src']).toBe('com')
   })
 
+  test('should not expose ast on template node if has src import', () => {
+    const { descriptor } = parse(`<template src="./foo.html"/>`)
+    expect(descriptor.template!.ast).toBeUndefined()
+  })
+
   test('ignoreEmpty: false', () => {
     const { descriptor } = parse(
       `<script></script>\n<script setup>\n</script>`,
       {
-        ignoreEmpty: false
-      }
+        ignoreEmpty: false,
+      },
     )
     expect(descriptor.script).toBeTruthy()
     expect(descriptor.script!.loc).toMatchObject({
-      source: '',
       start: { line: 1, column: 9, offset: 8 },
-      end: { line: 1, column: 9, offset: 8 }
+      end: { line: 1, column: 9, offset: 8 },
     })
 
     expect(descriptor.scriptSetup).toBeTruthy()
     expect(descriptor.scriptSetup!.loc).toMatchObject({
-      source: '\n',
       start: { line: 2, column: 15, offset: 32 },
-      end: { line: 3, column: 1, offset: 33 }
+      end: { line: 3, column: 1, offset: 33 },
     })
   })
 
@@ -221,20 +272,22 @@ h1 { color: red }
   test('treat empty lang attribute as the html', () => {
     const content = `<div><template v-if="ok">ok</template></div>`
     const { descriptor, errors } = parse(
-      `<template lang="">${content}</template>`
+      `<template lang="">${content}</template>`,
     )
     expect(descriptor.template!.content).toBe(content)
     expect(errors.length).toBe(0)
   })
 
   // #1120
-  test('alternative template lang should be treated as plain text', () => {
-    const content = `p(v-if="1 < 2") test`
+  test('template with preprocessor lang should be treated as plain text', () => {
+    const content = `p(v-if="1 < 2") test <div/>`
     const { descriptor, errors } = parse(
-      `<template lang="pug">` + content + `</template>`
+      `<template lang="pug">` + content + `</template>`,
     )
     expect(errors.length).toBe(0)
     expect(descriptor.template!.content).toBe(content)
+    // should not attempt to parse the content
+    expect(descriptor.template!.ast!.children.length).toBe(1)
   })
 
   //#2566
@@ -253,17 +306,17 @@ h1 { color: red }
     expect(parse(`<template>hi</template>`).descriptor.slotted).toBe(false)
     expect(
       parse(`<template>hi</template><style>h1{color:red;}</style>`).descriptor
-        .slotted
+        .slotted,
     ).toBe(false)
     expect(
       parse(
-        `<template>hi</template><style scoped>:slotted(h1){color:red;}</style>`
-      ).descriptor.slotted
+        `<template>hi</template><style scoped>:slotted(h1){color:red;}</style>`,
+      ).descriptor.slotted,
     ).toBe(true)
     expect(
       parse(
-        `<template>hi</template><style scoped>::v-slotted(h1){color:red;}</style>`
-      ).descriptor.slotted
+        `<template>hi</template><style scoped>::v-slotted(h1){color:red;}</style>`,
+      ).descriptor.slotted,
     ).toBe(true)
   })
 
@@ -280,21 +333,54 @@ h1 { color: red }
   test('custom compiler', () => {
     const { errors } = parse(`<template><input></template>`, {
       compiler: {
-        parse: baseParse,
-        compile: baseCompile
-      }
+        parse: (_, options) => {
+          options.onError!(new Error('foo') as any)
+          return createRoot([])
+        },
+        compile: baseCompile,
+      },
     })
-    expect(errors.length).toBe(1)
+    expect(errors.length).toBe(2)
+    // error thrown by the custom parse
+    expect(errors[0].message).toBe('foo')
+    // error thrown based on the returned root
+    expect(errors[1].message).toMatch('At least one')
   })
 
   test('treat custom blocks as raw text', () => {
     const { errors, descriptor } = parse(
-      `<template><input></template><foo> <-& </foo>`
+      `<template><input></template><foo> <-& </foo>`,
     )
     expect(errors.length).toBe(0)
     expect(descriptor.customBlocks[0].content).toBe(` <-& `)
   })
 
+  test('should accept parser options', () => {
+    const { errors, descriptor } = parse(`<template><hello/></template>`, {
+      templateParseOptions: {
+        isCustomElement: t => t === 'hello',
+      },
+    })
+    expect(errors.length).toBe(0)
+    expect(descriptor.template!.ast!.children[0]).toMatchObject({
+      type: NodeTypes.ELEMENT,
+      tag: 'hello',
+      tagType: ElementTypes.ELEMENT,
+    })
+
+    // test cache invalidation on different options
+    const { descriptor: d2 } = parse(`<template><hello/></template>`, {
+      templateParseOptions: {
+        isCustomElement: t => t !== 'hello',
+      },
+    })
+    expect(d2.template!.ast!.children[0]).toMatchObject({
+      type: NodeTypes.ELEMENT,
+      tag: 'hello',
+      tagType: ElementTypes.COMPONENT,
+    })
+  })
+
   describe('warnings', () => {
     function assertWarning(errors: Error[], msg: string) {
       expect(errors.some(e => e.message.match(msg))).toBe(true)
@@ -303,7 +389,7 @@ h1 { color: red }
     test('should only allow single template element', () => {
       assertWarning(
         parse(`<template><div/></template><template><div/></template>`).errors,
-        `Single file component can contain only one <template> element`
+        `Single file component can contain only one <template> element`,
       )
     })
 
@@ -311,24 +397,24 @@ h1 { color: red }
       assertWarning(
         parse(`<script>console.log(1)</script><script>console.log(1)</script>`)
           .errors,
-        `Single file component can contain only one <script> element`
+        `Single file component can contain only one <script> element`,
       )
     })
 
     test('should only allow single script setup element', () => {
       assertWarning(
         parse(
-          `<script setup>console.log(1)</script><script setup>console.log(1)</script>`
+          `<script setup>console.log(1)</script><script setup>console.log(1)</script>`,
         ).errors,
-        `Single file component can contain only one <script setup> element`
+        `Single file component can contain only one <script setup> element`,
       )
     })
 
     test('should not warn script & script setup', () => {
       expect(
         parse(
-          `<script setup>console.log(1)</script><script>console.log(1)</script>`
-        ).errors.length
+          `<script setup>console.log(1)</script><script>console.log(1)</script>`,
+        ).errors.length,
       ).toBe(0)
     })
 
@@ -336,7 +422,17 @@ h1 { color: red }
     test('should throw error if no <template> or <script> is present', () => {
       assertWarning(
         parse(`import { ref } from 'vue'`).errors,
-        `At least one <template> or <script> is required in a single file component`
+        `At least one <template> or <script> is required in a single file component`,
+      )
+    })
+
+    test('should throw error if template functional is given', () => {
+      assertWarning(
+        parse(`<template functional></template>`).errors,
+        `<template functional> is no longer supported in Vue 3, since ` +
+          `functional components no longer have significant performance ` +
+          `difference from stateful ones. Just use a normal <template> ` +
+          `instead.`,
       )
     })
   })
diff --git a/packages/compiler-sfc/__tests__/rewriteDefault.spec.ts b/packages/compiler-sfc/__tests__/rewriteDefault.spec.ts
index bed27e3ae..5b30b2062 100644
--- a/packages/compiler-sfc/__tests__/rewriteDefault.spec.ts
+++ b/packages/compiler-sfc/__tests__/rewriteDefault.spec.ts
@@ -11,7 +11,7 @@ describe('compiler sfc: rewriteDefault', () => {
 
   test('rewrite export default', () => {
     expect(
-      rewriteDefault(`export  default {}`, 'script')
+      rewriteDefault(`export  default {}`, 'script'),
     ).toMatchInlineSnapshot(`"const script = {}"`)
   })
 
@@ -27,8 +27,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `const a = 1 \n export { a as b, a as default, a as c}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const a = 1 
        export { a as b,  a as c}
@@ -38,8 +38,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `const a = 1 \n export { a as b, a as default    , a as c}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const a = 1 
        export { a as b,  a as c}
@@ -49,8 +49,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `const a = 1 \n export { a as b } \n export { a as default, a as c }`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const a = 1 
        export { a as b } 
@@ -69,7 +69,7 @@ describe('compiler sfc: rewriteDefault', () => {
 
   test('export named default multiline', () => {
     expect(
-      rewriteDefault(`let App = {}\n export {\nApp as default\n}`, '_sfc_main')
+      rewriteDefault(`let App = {}\n export {\nApp as default\n}`, '_sfc_main'),
     ).toMatchInlineSnapshot(`
       "let App = {}
        export {
@@ -84,8 +84,8 @@ describe('compiler sfc: rewriteDefault', () => {
       rewriteDefault(
         `const a = 1 \n export {\n a as b,\n a as default,\n a as c}\n` +
           `// export { myFunction as default }`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const a = 1 
        export {
@@ -100,8 +100,8 @@ describe('compiler sfc: rewriteDefault', () => {
       rewriteDefault(
         `const a = 1 \n export {\n a as b,\n a as default      ,\n a as c}\n` +
           `// export { myFunction as default }`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const a = 1 
        export {
@@ -115,7 +115,7 @@ describe('compiler sfc: rewriteDefault', () => {
 
   test(`export { default } from '...'`, async () => {
     expect(
-      rewriteDefault(`export { default, foo } from './index.js'`, 'script')
+      rewriteDefault(`export { default, foo } from './index.js'`, 'script'),
     ).toMatchInlineSnapshot(`
       "import { default as __VUE_DEFAULT__ } from './index.js'
       export {  foo } from './index.js'
@@ -123,7 +123,7 @@ describe('compiler sfc: rewriteDefault', () => {
     `)
 
     expect(
-      rewriteDefault(`export { default    , foo } from './index.js'`, 'script')
+      rewriteDefault(`export { default    , foo } from './index.js'`, 'script'),
     ).toMatchInlineSnapshot(`
       "import { default as __VUE_DEFAULT__ } from './index.js'
       export {  foo } from './index.js'
@@ -131,7 +131,7 @@ describe('compiler sfc: rewriteDefault', () => {
     `)
 
     expect(
-      rewriteDefault(`export { foo,   default } from './index.js'`, 'script')
+      rewriteDefault(`export { foo,   default } from './index.js'`, 'script'),
     ).toMatchInlineSnapshot(`
       "import { default as __VUE_DEFAULT__ } from './index.js'
       export { foo,    } from './index.js'
@@ -141,8 +141,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export { foo as default, bar } from './index.js'`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "import { foo as __VUE_DEFAULT__ } from './index.js'
       export {  bar } from './index.js'
@@ -152,8 +152,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export { foo as default     , bar } from './index.js'`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "import { foo as __VUE_DEFAULT__ } from './index.js'
       export {  bar } from './index.js'
@@ -163,8 +163,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export { bar,   foo as default } from './index.js'`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "import { foo as __VUE_DEFAULT__ } from './index.js'
       export { bar,    } from './index.js'
@@ -174,8 +174,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export { foo as default } from './index.js' \n const foo = 1`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "import { foo as __VUE_DEFAULT__ } from './index.js'
       export {  } from './index.js' 
@@ -186,8 +186,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `const a = 1 \nexport { a as default } from 'xxx'`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "import { a as __VUE_DEFAULT__ } from 'xxx'
       const a = 1 
@@ -206,7 +206,10 @@ describe('compiler sfc: rewriteDefault', () => {
 
   test('export default class w/ comments', async () => {
     expect(
-      rewriteDefault(`// export default\nexport default class Foo {}`, 'script')
+      rewriteDefault(
+        `// export default\nexport default class Foo {}`,
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "// export default
        class Foo {}
@@ -218,8 +221,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export default {}\n` + `// export default class Foo {}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const script = {}
       // export default class Foo {}"
@@ -230,8 +233,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `/*\nexport default class Foo {}*/\n` + `export default class Bar {}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "/*
       export default class Foo {}*/
@@ -243,8 +246,8 @@ describe('compiler sfc: rewriteDefault', () => {
   test('@Component\nexport default class', async () => {
     expect(
       rewriteDefault(`@Component\nexport default class Foo {}`, 'script', [
-        'decorators-legacy'
-      ])
+        'decorators-legacy',
+      ]),
     ).toMatchInlineSnapshot(`
       "@Component class Foo {}
       const script = Foo"
@@ -256,8 +259,8 @@ describe('compiler sfc: rewriteDefault', () => {
       rewriteDefault(
         `// export default\n@Component\nexport default class Foo {}`,
         'script',
-        ['decorators-legacy']
-      )
+        ['decorators-legacy'],
+      ),
     ).toMatchInlineSnapshot(`
       "// export default
       @Component class Foo {}
@@ -269,8 +272,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export default {}\n` + `// @Component\n// export default class Foo {}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const script = {}
       // @Component
@@ -283,8 +286,8 @@ describe('compiler sfc: rewriteDefault', () => {
       rewriteDefault(
         `/*\n@Component\nexport default class Foo {}*/\n` +
           `export default class Bar {}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "/*
       @Component
diff --git a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
index 44c13e47e..a1f62f43a 100644
--- a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
+++ b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
@@ -1,14 +1,14 @@
 import {
-  generate,
+  type TransformOptions,
   baseParse,
+  generate,
   transform,
-  TransformOptions
 } from '@vue/compiler-core'
 import {
-  transformAssetUrl,
+  type AssetURLOptions,
   createAssetUrlTransformWithOptions,
-  AssetURLOptions,
-  normalizeOptions
+  normalizeOptions,
+  transformAssetUrl,
 } from '../src/template/transformAssetUrl'
 import { transformElement } from '../../compiler-core/src/transforms/transformElement'
 import { transformBind } from '../../compiler-core/src/transforms/vBind'
@@ -17,7 +17,7 @@ import { stringifyStatic } from '../../compiler-dom/src/transforms/stringifyStat
 function compileWithAssetUrls(
   template: string,
   options?: AssetURLOptions,
-  transformOptions?: TransformOptions
+  transformOptions?: TransformOptions,
 ) {
   const ast = baseParse(template)
   const t = options
@@ -26,9 +26,9 @@ function compileWithAssetUrls(
   transform(ast, {
     nodeTransforms: [t, transformElement],
     directiveTransforms: {
-      bind: transformBind
+      bind: transformBind,
     },
-    ...transformOptions
+    ...transformOptions,
   })
   return generate(ast, { mode: 'module' })
 }
@@ -57,8 +57,8 @@ describe('compiler sfc: transform asset url', () => {
         '<use href="~@svg/file.svg#fragment"></use>',
       {},
       {
-        hoistStatic: true
-      }
+        hoistStatic: true,
+      },
     )
     expect(result.code).toMatchSnapshot()
   })
@@ -79,8 +79,8 @@ describe('compiler sfc: transform asset url', () => {
         `<img src="~bar.png"></img>` + // -> still converts to import
         `<img src="@theme/bar.png"></img>`, // -> still converts to import
       {
-        base: '/foo'
-      }
+        base: '/foo',
+      },
     )
     expect(code).toMatch(`import _imports_0 from 'bar.png'`)
     expect(code).toMatch(`import _imports_1 from '@theme/bar.png'`)
@@ -94,8 +94,8 @@ describe('compiler sfc: transform asset url', () => {
         `<img src="https://foo.bar/baz.png"/>` +
         `<img src="//foo.bar/baz.png"/>`,
       {
-        includeAbsolute: true
-      }
+        includeAbsolute: true,
+      },
     )
     expect(code).toMatchSnapshot()
   })
@@ -108,7 +108,7 @@ describe('compiler sfc: transform asset url', () => {
           <circle id="myCircle" cx="0" cy="0" r="5" />
         </defs>
         <use x="5" y="5" xlink:href="#myCircle" />
-      </svg>`
+      </svg>`,
     )
     // should not remove it
     expect(code).toMatch(`"xlink:href": "#myCircle"`)
@@ -116,7 +116,7 @@ describe('compiler sfc: transform asset url', () => {
 
   test('should allow for full base URLs, with paths', () => {
     const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
-      base: 'http://localhost:3000/src/'
+      base: 'http://localhost:3000/src/',
     })
 
     expect(code).toMatchSnapshot()
@@ -124,7 +124,7 @@ describe('compiler sfc: transform asset url', () => {
 
   test('should allow for full base URLs, without paths', () => {
     const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
-      base: 'http://localhost:3000'
+      base: 'http://localhost:3000',
     })
 
     expect(code).toMatchSnapshot()
@@ -132,7 +132,7 @@ describe('compiler sfc: transform asset url', () => {
 
   test('should allow for full base URLs, without port', () => {
     const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
-      base: 'http://localhost'
+      base: 'http://localhost',
     })
 
     expect(code).toMatchSnapshot()
@@ -140,7 +140,7 @@ describe('compiler sfc: transform asset url', () => {
 
   test('should allow for full base URLs, without protocol', () => {
     const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
-      base: '//localhost'
+      base: '//localhost',
     })
 
     expect(code).toMatchSnapshot()
@@ -156,12 +156,12 @@ describe('compiler sfc: transform asset url', () => {
         `<img src="./bar.png"/>` +
         `</div>`,
       {
-        includeAbsolute: true
+        includeAbsolute: true,
       },
       {
         hoistStatic: true,
-        transformHoist: stringifyStatic
-      }
+        transformHoist: stringifyStatic,
+      },
     )
     expect(code).toMatch(`_createStaticVNode`)
     expect(code).toMatchSnapshot()
@@ -171,12 +171,12 @@ describe('compiler sfc: transform asset url', () => {
     const { code } = compileWithAssetUrls(
       `<div><img src="/foo bar.png"/></div>`,
       {
-        includeAbsolute: true
+        includeAbsolute: true,
       },
       {
         hoistStatic: true,
-        transformHoist: stringifyStatic
-      }
+        transformHoist: stringifyStatic,
+      },
     )
     expect(code).toMatch(`_createElementVNode`)
     expect(code).toContain(`import _imports_0 from '/foo bar.png'`)
@@ -186,12 +186,12 @@ describe('compiler sfc: transform asset url', () => {
     const { code } = compileWithAssetUrls(
       `<div><img src="./foo bar.png"/></div>`,
       {
-        includeAbsolute: true
+        includeAbsolute: true,
       },
       {
         hoistStatic: true,
-        transformHoist: stringifyStatic
-      }
+        transformHoist: stringifyStatic,
+      },
     )
     expect(code).toMatch(`_createElementVNode`)
     expect(code).toContain(`import _imports_0 from './foo bar.png'`)
diff --git a/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts b/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts
index 174e3ca9f..491731f94 100644
--- a/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts
+++ b/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts
@@ -1,25 +1,25 @@
 import {
-  generate,
+  type TransformOptions,
   baseParse,
+  generate,
   transform,
-  TransformOptions
 } from '@vue/compiler-core'
 import {
+  createSrcsetTransformWithOptions,
   transformSrcset,
-  createSrcsetTransformWithOptions
 } from '../src/template/transformSrcset'
 import { transformElement } from '../../compiler-core/src/transforms/transformElement'
 import { transformBind } from '../../compiler-core/src/transforms/vBind'
 import {
-  AssetURLOptions,
-  normalizeOptions
+  type AssetURLOptions,
+  normalizeOptions,
 } from '../src/template/transformAssetUrl'
 import { stringifyStatic } from '../../compiler-dom/src/transforms/stringifyStatic'
 
 function compileWithSrcset(
   template: string,
   options?: AssetURLOptions,
-  transformOptions?: TransformOptions
+  transformOptions?: TransformOptions,
 ) {
   const ast = baseParse(template)
   const srcsetTransform = options
@@ -29,9 +29,9 @@ function compileWithSrcset(
     hoistStatic: true,
     nodeTransforms: [srcsetTransform, transformElement],
     directiveTransforms: {
-      bind: transformBind
+      bind: transformBind,
     },
-    ...transformOptions
+    ...transformOptions,
   })
   return generate(ast, { mode: 'module' })
 }
@@ -59,16 +59,16 @@ describe('compiler sfc: transform srcset', () => {
   test('transform srcset w/ base', () => {
     expect(
       compileWithSrcset(src, {
-        base: '/foo'
-      }).code
+        base: '/foo',
+      }).code,
     ).toMatchSnapshot()
   })
 
   test('transform srcset w/ includeAbsolute: true', () => {
     expect(
       compileWithSrcset(src, {
-        includeAbsolute: true
-      }).code
+        includeAbsolute: true,
+      }).code,
     ).toMatchSnapshot()
   })
 
@@ -76,12 +76,12 @@ describe('compiler sfc: transform srcset', () => {
     const code = compileWithSrcset(
       `<div>${src}</div>`,
       {
-        includeAbsolute: true
+        includeAbsolute: true,
       },
       {
         hoistStatic: true,
-        transformHoist: stringifyStatic
-      }
+        transformHoist: stringifyStatic,
+      },
     ).code
     expect(code).toMatch(`_createStaticVNode`)
     expect(code).toMatchSnapshot()
@@ -94,7 +94,7 @@ describe('compiler sfc: transform srcset', () => {
       <img srcset="@/logo.png 1x, ./logo.png 2x"/>
     `,
       { base: '/foo/' },
-      { hoistStatic: true }
+      { hoistStatic: true },
     ).code
     expect(code).toMatchSnapshot()
   })
diff --git a/packages/compiler-sfc/__tests__/templateUtils.spec.ts b/packages/compiler-sfc/__tests__/templateUtils.spec.ts
index 7e2060384..b2adbf36c 100644
--- a/packages/compiler-sfc/__tests__/templateUtils.spec.ts
+++ b/packages/compiler-sfc/__tests__/templateUtils.spec.ts
@@ -1,7 +1,7 @@
 import {
-  isRelativeUrl,
+  isDataUrl,
   isExternalUrl,
-  isDataUrl
+  isRelativeUrl,
 } from '../src/template/templateUtils'
 
 describe('compiler sfc:templateUtils isRelativeUrl', () => {
diff --git a/packages/compiler-sfc/__tests__/utils.ts b/packages/compiler-sfc/__tests__/utils.ts
index ffa12652c..5a58a6b58 100644
--- a/packages/compiler-sfc/__tests__/utils.ts
+++ b/packages/compiler-sfc/__tests__/utils.ts
@@ -1,8 +1,9 @@
 import {
-  parse,
-  SFCScriptCompileOptions,
+  type SFCParseOptions,
+  type SFCScriptBlock,
+  type SFCScriptCompileOptions,
   compileScript,
-  SFCParseOptions
+  parse,
 } from '../src'
 import { parse as babelParse } from '@babel/parser'
 
@@ -11,21 +12,27 @@ export const mockId = 'xxxxxxxx'
 export function compileSFCScript(
   src: string,
   options?: Partial<SFCScriptCompileOptions>,
-  parseOptions?: SFCParseOptions
-) {
-  const { descriptor } = parse(src, parseOptions)
+  parseOptions?: SFCParseOptions,
+): SFCScriptBlock {
+  const { descriptor, errors } = parse(src, parseOptions)
+  if (errors.length) {
+    console.warn(errors[0])
+  }
   return compileScript(descriptor, {
     ...options,
-    id: mockId
+    id: mockId,
   })
 }
 
-export function assertCode(code: string) {
+export function assertCode(code: string): void {
   // parse the generated code to make sure it is valid
   try {
     babelParse(code, {
       sourceType: 'module',
-      plugins: ['typescript']
+      plugins: [
+        'typescript',
+        ['importAttributes', { deprecatedAssertSyntax: true }],
+      ],
     })
   } catch (e: any) {
     console.log(code)
diff --git a/packages/compiler-sfc/package.json b/packages/compiler-sfc/package.json
index 134dfb4b7..7cbeb9a3c 100644
--- a/packages/compiler-sfc/package.json
+++ b/packages/compiler-sfc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.3.9",
+  "version": "3.5.11",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -8,6 +8,16 @@
   "files": [
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/compiler-sfc.d.ts",
+      "node": "./dist/compiler-sfc.cjs.js",
+      "module": "./dist/compiler-sfc.esm-browser.js",
+      "import": "./dist/compiler-sfc.esm-browser.js",
+      "require": "./dist/compiler-sfc.cjs.js"
+    },
+    "./*": "./*"
+  },
   "buildOptions": {
     "name": "VueCompilerSFC",
     "formats": [
@@ -32,27 +42,26 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.4",
+    "@babel/parser": "catalog:",
     "@vue/compiler-core": "workspace:*",
     "@vue/compiler-dom": "workspace:*",
     "@vue/compiler-ssr": "workspace:*",
-    "@vue/reactivity-transform": "workspace:*",
     "@vue/shared": "workspace:*",
-    "estree-walker": "^2.0.2",
-    "magic-string": "^0.30.5",
-    "postcss": "^8.4.31",
-    "source-map-js": "^1.0.2"
+    "estree-walker": "catalog:",
+    "magic-string": "catalog:",
+    "postcss": "^8.4.47",
+    "source-map-js": "catalog:"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.4",
-    "@vue/consolidate": "^0.17.3",
+    "@babel/types": "catalog:",
+    "@vue/consolidate": "^1.0.0",
     "hash-sum": "^2.0.0",
-    "lru-cache": "^10.1.0",
+    "lru-cache": "10.1.0",
     "merge-source-map": "^1.1.0",
-    "minimatch": "^9.0.3",
-    "postcss-modules": "^4.3.1",
-    "postcss-selector-parser": "^6.0.13",
-    "pug": "^3.0.2",
-    "sass": "^1.69.5"
+    "minimatch": "~9.0.5",
+    "postcss-modules": "^6.0.0",
+    "postcss-selector-parser": "^6.1.2",
+    "pug": "^3.0.3",
+    "sass": "^1.79.4"
   }
 }
diff --git a/packages/compiler-sfc/src/cache.ts b/packages/compiler-sfc/src/cache.ts
index f04b231f6..0bedc7b4d 100644
--- a/packages/compiler-sfc/src/cache.ts
+++ b/packages/compiler-sfc/src/cache.ts
@@ -1,8 +1,9 @@
 import { LRUCache } from 'lru-cache'
 
 export function createCache<T extends {}>(
-  max = 500
+  max = 500,
 ): Map<string, T> | LRUCache<string, T> {
+  /* v8 ignore next 3 */
   if (__GLOBAL__ || __ESM_BROWSER__) {
     return new Map<string, T>()
   }
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 9a05d3b32..fee05beed 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -2,54 +2,56 @@ import {
   BindingTypes,
   UNREF,
   isFunctionType,
-  walkIdentifiers
+  unwrapTSNode,
+  walkIdentifiers,
 } from '@vue/compiler-dom'
-import { DEFAULT_FILENAME, SFCDescriptor, SFCScriptBlock } from './parse'
-import { ParserPlugin } from '@babel/parser'
-import { generateCodeFrame } from '@vue/shared'
 import {
-  Node,
-  Declaration,
-  ObjectPattern,
+  DEFAULT_FILENAME,
+  type SFCDescriptor,
+  type SFCScriptBlock,
+} from './parse'
+import type { ParserPlugin } from '@babel/parser'
+import { generateCodeFrame } from '@vue/shared'
+import type {
   ArrayPattern,
-  Identifier,
+  CallExpression,
+  Declaration,
   ExportSpecifier,
+  Identifier,
+  Node,
+  ObjectPattern,
   Statement,
-  CallExpression
 } from '@babel/types'
 import { walk } from 'estree-walker'
-import { RawSourceMap } from 'source-map-js'
+import type { RawSourceMap } from 'source-map-js'
 import {
+  normalScriptDefaultVar,
   processNormalScript,
-  normalScriptDefaultVar
 } from './script/normalScript'
 import { CSS_VARS_HELPER, genCssVarsCode } from './style/cssVars'
-import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
+import {
+  type SFCTemplateCompileOptions,
+  compileTemplate,
+} from './compileTemplate'
 import { warnOnce } from './warn'
-import { shouldTransform, transformAST } from '@vue/reactivity-transform'
 import { transformDestructuredProps } from './script/definePropsDestructure'
 import { ScriptCompileContext } from './script/context'
 import {
-  processDefineProps,
-  genRuntimeProps,
   DEFINE_PROPS,
-  WITH_DEFAULTS
+  WITH_DEFAULTS,
+  genRuntimeProps,
+  processDefineProps,
 } from './script/defineProps'
 import {
-  processDefineEmits,
+  DEFINE_EMITS,
   genRuntimeEmits,
-  DEFINE_EMITS
+  processDefineEmits,
 } from './script/defineEmits'
 import { DEFINE_EXPOSE, processDefineExpose } from './script/defineExpose'
 import { DEFINE_OPTIONS, processDefineOptions } from './script/defineOptions'
-import { processDefineSlots } from './script/defineSlots'
+import { DEFINE_SLOTS, processDefineSlots } from './script/defineSlots'
 import { DEFINE_MODEL, processDefineModel } from './script/defineModel'
-import {
-  isLiteralNode,
-  unwrapTSNode,
-  isCallOf,
-  getImportedName
-} from './script/utils'
+import { getImportedName, isCallOf, isLiteralNode } from './script/utils'
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
 import { isImportUsed } from './script/importUsageCheck'
 import { processAwait } from './script/topLevelAwait'
@@ -104,15 +106,11 @@ export interface SFCScriptCompileOptions {
    */
   hoistStatic?: boolean
   /**
-   * (**Experimental**) Enable macro `defineModel`
-   * @default false
+   * Set to `false` to disable reactive destructure for `defineProps` (pre-3.5
+   * behavior), or set to `'error'` to throw hard error on props destructures.
+   * @default true
    */
-  defineModel?: boolean
-  /**
-   * (**Experimental**) Enable reactive destructure for `defineProps`
-   * @default false
-   */
-  propsDestructure?: boolean
+  propsDestructure?: boolean | 'error'
   /**
    * File system access methods to be used when resolving types
    * imported in SFC macros. Defaults to ts.sys in Node.js, can be overwritten
@@ -121,15 +119,12 @@ export interface SFCScriptCompileOptions {
   fs?: {
     fileExists(file: string): boolean
     readFile(file: string): string | undefined
+    realpath?(file: string): string
   }
   /**
-   * (Experimental) Enable syntax transform for using refs without `.value` and
-   * using destructured props with reactivity
-   * @deprecated the Reactivity Transform proposal has been dropped. This
-   * feature will be removed from Vue core in 3.4. If you intend to continue
-   * using it, disable this and switch to the [Vue Macros implementation](https://vue-macros.sxzz.moe/features/reactivity-transform.html).
+   * Transform Vue SFCs into custom elements.
    */
-  reactivityTransform?: boolean
+  customElement?: boolean | ((filename: string) => boolean)
 }
 
 export interface ImportBinding {
@@ -141,6 +136,16 @@ export interface ImportBinding {
   isUsedInTemplate: boolean
 }
 
+const MACROS = [
+  DEFINE_PROPS,
+  DEFINE_EMITS,
+  DEFINE_EXPOSE,
+  DEFINE_OPTIONS,
+  DEFINE_SLOTS,
+  DEFINE_MODEL,
+  WITH_DEFAULTS,
+]
+
 /**
  * Compile `<script setup>`
  * It requires the whole SFC descriptor because we need to handle and merge
@@ -148,13 +153,13 @@ export interface ImportBinding {
  */
 export function compileScript(
   sfc: SFCDescriptor,
-  options: SFCScriptCompileOptions
+  options: SFCScriptCompileOptions,
 ): SFCScriptBlock {
   if (!options.id) {
     warnOnce(
       `compileScript now requires passing the \`id\` option.\n` +
         `Upgrade your vite or vue-loader version for compatibility with ` +
-        `the latest experimental proposals.`
+        `the latest experimental proposals.`,
     )
   }
 
@@ -165,8 +170,6 @@ export function compileScript(
   const scriptLang = script && script.lang
   const scriptSetupLang = scriptSetup && scriptSetup.lang
 
-  // TODO remove in 3.4
-  const enableReactivityTransform = !!options.reactivityTransform
   let refBindings: string[] | undefined
 
   if (!scriptSetup) {
@@ -180,7 +183,7 @@ export function compileScript(
   if (script && scriptLang !== scriptSetupLang) {
     throw new Error(
       `[@vue/compiler-sfc] <script> and <script setup> must have the same ` +
-        `language type.`
+        `language type.`,
     )
   }
 
@@ -229,7 +232,7 @@ export function compileScript(
     imported: string,
     isType: boolean,
     isFromSetup: boolean,
-    needTemplateUsageCheck: boolean
+    needTemplateUsageCheck: boolean,
   ) {
     // template usage check is only needed in non-inline mode, so we can skip
     // the work if inlineTemplate is true.
@@ -250,7 +253,7 @@ export function compileScript(
       local,
       source,
       isFromSetup,
-      isUsedInTemplate
+      isUsedInTemplate,
     }
   }
 
@@ -265,7 +268,7 @@ export function compileScript(
             `setup() function. If your component options require initialization ` +
             `in the module scope, use a separate normal <script> to export ` +
             `the options instead.`,
-          id
+          id,
         )
       }
     })
@@ -289,7 +292,7 @@ export function compileScript(
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
             false,
-            !options.inlineTemplate
+            !options.inlineTemplate,
           )
         }
       }
@@ -315,7 +318,7 @@ export function compileScript(
             : current.start! + startOffset,
           next && !removeLeft
             ? next.start! + startOffset
-            : current.end! + startOffset
+            : current.end! + startOffset,
         )
       }
 
@@ -325,15 +328,18 @@ export function compileScript(
         const imported = getImportedName(specifier)
         const source = node.source.value
         const existing = ctx.userImports[local]
-        if (
-          source === 'vue' &&
-          (imported === DEFINE_PROPS ||
-            imported === DEFINE_EMITS ||
-            imported === DEFINE_EXPOSE)
-        ) {
-          warnOnce(
-            `\`${imported}\` is a compiler macro and no longer needs to be imported.`
-          )
+        if (source === 'vue' && MACROS.includes(imported)) {
+          if (local === imported) {
+            warnOnce(
+              `\`${imported}\` is a compiler macro and no longer needs to be imported.`,
+            )
+          } else {
+            ctx.error(
+              `\`${imported}\` is a compiler macro and cannot be aliased to ` +
+                `a different name.`,
+              specifier,
+            )
+          }
           removeSpecifier(i)
         } else if (existing) {
           if (existing.source === source && existing.imported === imported) {
@@ -342,7 +348,7 @@ export function compileScript(
           } else {
             ctx.error(
               `different imports aliased to same local name.`,
-              specifier
+              specifier,
             )
           }
         } else {
@@ -354,7 +360,7 @@ export function compileScript(
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
             true,
-            !options.inlineTemplate
+            !options.inlineTemplate,
           )
         }
       }
@@ -419,7 +425,8 @@ export function compileScript(
         ctx.s.overwrite(start, end, `const ${normalScriptDefaultVar} = `)
       } else if (node.type === 'ExportNamedDeclaration') {
         const defaultSpecifier = node.specifiers.find(
-          s => s.exported.type === 'Identifier' && s.exported.name === 'default'
+          s =>
+            s.exported.type === 'Identifier' && s.exported.name === 'default',
         ) as ExportSpecifier
         if (defaultSpecifier) {
           defaultExport = node
@@ -427,12 +434,12 @@ export function compileScript(
           if (node.specifiers.length > 1) {
             ctx.s.remove(
               defaultSpecifier.start! + scriptStartOffset!,
-              defaultSpecifier.end! + scriptStartOffset!
+              defaultSpecifier.end! + scriptStartOffset!,
             )
           } else {
             ctx.s.remove(
               node.start! + scriptStartOffset!,
-              node.end! + scriptStartOffset!
+              node.end! + scriptStartOffset!,
             )
           }
           if (node.source) {
@@ -440,14 +447,14 @@ export function compileScript(
             // rewrite to `import { x as __default__ } from './x'` and
             // add to top
             ctx.s.prepend(
-              `import { ${defaultSpecifier.local.name} as ${normalScriptDefaultVar} } from '${node.source.value}'\n`
+              `import { ${defaultSpecifier.local.name} as ${normalScriptDefaultVar} } from '${node.source.value}'\n`,
             )
           } else {
             // export { x as default }
             // rewrite to `const __default__ = x` and move to end
             ctx.s.appendLeft(
               scriptEndOffset!,
-              `\nconst ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}\n`
+              `\nconst ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}\n`,
             )
           }
         }
@@ -457,7 +464,7 @@ export function compileScript(
             node.declaration,
             scriptBindings,
             vueImportAliases,
-            hoistStatic
+            hoistStatic,
           )
         }
       } else if (
@@ -472,25 +479,11 @@ export function compileScript(
           node,
           scriptBindings,
           vueImportAliases,
-          hoistStatic
+          hoistStatic,
         )
       }
     }
 
-    // apply reactivity transform
-    // TODO remove in 3.4
-    if (enableReactivityTransform && shouldTransform(script.content)) {
-      const { rootRefs, importedHelpers } = transformAST(
-        scriptAst,
-        ctx.s,
-        scriptStartOffset!
-      )
-      refBindings = rootRefs
-      for (const h of importedHelpers) {
-        ctx.helperImports.add(h)
-      }
-    }
-
     // <script> after <script setup>
     // we need to move the block up so that `const __default__` is
     // declared before being used in the actual component definition
@@ -521,7 +514,7 @@ export function compileScript(
         ctx.s.overwrite(
           callee.start! + startOffset,
           callee.end! + startOffset,
-          '__expose'
+          '__expose',
         )
       } else {
         processDefineModel(ctx, expr)
@@ -540,12 +533,18 @@ export function compileScript(
           if (processDefineOptions(ctx, init)) {
             ctx.error(
               `${DEFINE_OPTIONS}() has no returning value, it cannot be assigned.`,
-              node
+              node,
             )
           }
 
-          // defineProps / defineEmits
+          // defineProps
           const isDefineProps = processDefineProps(ctx, init, decl.id)
+          if (ctx.propsDestructureRestId) {
+            setupBindings[ctx.propsDestructureRestId] =
+              BindingTypes.SETUP_REACTIVE_CONST
+          }
+
+          // defineEmits
           const isDefineEmits =
             !isDefineProps && processDefineEmits(ctx, init, decl.id)
           !isDefineEmits &&
@@ -578,7 +577,7 @@ export function compileScript(
             ctx.s.overwrite(
               startOffset + init.start!,
               startOffset + init.end!,
-              '__emit'
+              '__emit',
             )
           } else {
             lastNonRemoved = i
@@ -601,7 +600,8 @@ export function compileScript(
         node,
         setupBindings,
         vueImportAliases,
-        hoistStatic
+        hoistStatic,
+        !!ctx.propsDestructureDecl,
       )
     }
 
@@ -618,7 +618,7 @@ export function compileScript(
     ) {
       const scope: Statement[][] = [scriptSetupAst.body]
       walk(node, {
-        enter(child: Node, parent: Node | undefined) {
+        enter(child: Node, parent: Node | null) {
           if (isFunctionType(child)) {
             this.skip()
           }
@@ -643,13 +643,13 @@ export function compileScript(
               ctx,
               child,
               needsSemi,
-              parent!.type === 'ExpressionStatement'
+              parent!.type === 'ExpressionStatement',
             )
           }
         },
         exit(node: Node) {
           if (node.type === 'BlockStatement') scope.pop()
-        }
+        },
       })
     }
 
@@ -662,7 +662,7 @@ export function compileScript(
         `<script setup> cannot contain ES module exports. ` +
           `If you are using a previous version of <script setup>, please ` +
           `consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.`,
-        node
+        node,
       )
     }
 
@@ -686,34 +686,20 @@ export function compileScript(
     transformDestructuredProps(ctx, vueImportAliases)
   }
 
-  // 4. Apply reactivity transform
-  // TODO remove in 3.4
-  if (
-    enableReactivityTransform &&
-    // normal <script> had ref bindings that maybe used in <script setup>
-    (refBindings || shouldTransform(scriptSetup.content))
-  ) {
-    const { rootRefs, importedHelpers } = transformAST(
-      scriptSetupAst,
-      ctx.s,
-      startOffset,
-      refBindings
-    )
-    refBindings = refBindings ? [...refBindings, ...rootRefs] : rootRefs
-    for (const h of importedHelpers) {
-      ctx.helperImports.add(h)
-    }
-  }
-
-  // 5. check macro args to make sure it doesn't reference setup scope
+  // 4. check macro args to make sure it doesn't reference setup scope
   // variables
   checkInvalidScopeReference(ctx.propsRuntimeDecl, DEFINE_PROPS)
   checkInvalidScopeReference(ctx.propsRuntimeDefaults, DEFINE_PROPS)
   checkInvalidScopeReference(ctx.propsDestructureDecl, DEFINE_PROPS)
   checkInvalidScopeReference(ctx.emitsRuntimeDecl, DEFINE_EMITS)
   checkInvalidScopeReference(ctx.optionsRuntimeDecl, DEFINE_OPTIONS)
+  for (const { runtimeOptionNodes } of Object.values(ctx.modelDecls)) {
+    for (const node of runtimeOptionNodes) {
+      checkInvalidScopeReference(node, DEFINE_MODEL)
+    }
+  }
 
-  // 6. remove non-script content
+  // 5. remove non-script content
   if (script) {
     if (startOffset < scriptStartOffset!) {
       // <script setup> before <script>
@@ -732,13 +718,13 @@ export function compileScript(
     ctx.s.remove(endOffset, source.length)
   }
 
-  // 7. analyze binding metadata
+  // 6. analyze binding metadata
   // `defineProps` & `defineModel` also register props bindings
   if (scriptAst) {
     Object.assign(ctx.bindingMetadata, analyzeScriptBindings(scriptAst.body))
   }
   for (const [key, { isType, imported, source }] of Object.entries(
-    ctx.userImports
+    ctx.userImports,
   )) {
     if (isType) continue
     ctx.bindingMetadata[key] =
@@ -761,7 +747,7 @@ export function compileScript(
     }
   }
 
-  // 8. inject `useCssVars` calls
+  // 7. inject `useCssVars` calls
   if (
     sfc.cssVars.length &&
     // no need to do this when targeting SSR
@@ -775,12 +761,12 @@ export function compileScript(
         sfc.cssVars,
         ctx.bindingMetadata,
         scopeId,
-        !!options.isProd
-      )}\n`
+        !!options.isProd,
+      )}\n`,
     )
   }
 
-  // 9. finalize setup() argument signature
+  // 8. finalize setup() argument signature
   let args = `__props`
   if (ctx.propsTypeDecl) {
     // mark as any and only cast on assignment
@@ -797,19 +783,19 @@ export function compileScript(
         startOffset + ctx.propsCall!.start!,
         startOffset + ctx.propsCall!.end!,
         `${ctx.helper(`createPropsRestProxy`)}(__props, ${JSON.stringify(
-          Object.keys(ctx.propsDestructuredBindings)
-        )})`
+          Object.keys(ctx.propsDestructuredBindings),
+        )})`,
       )
       ctx.s.overwrite(
         startOffset + ctx.propsDestructureDecl!.start!,
         startOffset + ctx.propsDestructureDecl!.end!,
-        ctx.propsDestructureRestId
+        ctx.propsDestructureRestId,
       )
     } else if (!ctx.propsDestructureDecl) {
       ctx.s.overwrite(
         startOffset + ctx.propsCall!.start!,
         startOffset + ctx.propsCall!.end!,
-        '__props'
+        '__props',
       )
     }
   }
@@ -831,7 +817,7 @@ export function compileScript(
     args += `, { ${destructureElements.join(', ')} }`
   }
 
-  // 10. generate return statement
+  // 9. generate return statement
   let returned
   if (
     !options.inlineTemplate ||
@@ -841,7 +827,7 @@ export function compileScript(
     // return bindings from script and script setup
     const allBindings: Record<string, any> = {
       ...scriptBindings,
-      ...setupBindings
+      ...setupBindings,
     }
     for (const key in ctx.userImports) {
       if (
@@ -882,6 +868,7 @@ export function compileScript(
       // inline it right here
       const { code, ast, preamble, tips, errors } = compileTemplate({
         filename,
+        ast: sfc.template.ast,
         source: sfc.template.content,
         inMap: sfc.template.map,
         ...options.templateOptions,
@@ -894,8 +881,8 @@ export function compileScript(
             options.templateOptions.compilerOptions),
           inline: true,
           isTS: ctx.isTS,
-          bindingMetadata: ctx.bindingMetadata
-        }
+          bindingMetadata: ctx.bindingMetadata,
+        },
       })
       if (tips.length) {
         tips.forEach(warnOnce)
@@ -912,7 +899,7 @@ export function compileScript(
             generateCodeFrame(
               source,
               err.loc.start.offset,
-              err.loc.end.offset
+              err.loc.end.offset,
             ) +
             `\n`
         }
@@ -941,13 +928,13 @@ export function compileScript(
       `\nconst __returned__ = ${returned}\n` +
         `Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })\n` +
         `return __returned__` +
-        `\n}\n\n`
+        `\n}\n\n`,
     )
   } else {
     ctx.s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
   }
 
-  // 11. finalize default export
+  // 10. finalize default export
   const genDefaultAs = options.genDefaultAs
     ? `const ${options.genDefaultAs} =`
     : `export default`
@@ -992,11 +979,11 @@ export function compileScript(
       (definedOptions ? `\n  ...${definedOptions},` : '')
     ctx.s.prependLeft(
       startOffset,
-      `\n${genDefaultAs} /*#__PURE__*/${ctx.helper(
-        `defineComponent`
+      `\n${genDefaultAs} /*@__PURE__*/${ctx.helper(
+        `defineComponent`,
       )}({${def}${runtimeOptions}\n  ${
         hasAwait ? `async ` : ``
-      }setup(${args}) {\n${exposeCall}`
+      }setup(${args}) {\n${exposeCall}`,
     )
     ctx.s.appendRight(endOffset, `})`)
   } else {
@@ -1005,33 +992,36 @@ export function compileScript(
       // export default Object.assign(__default__, { ... })
       ctx.s.prependLeft(
         startOffset,
-        `\n${genDefaultAs} /*#__PURE__*/Object.assign(${
+        `\n${genDefaultAs} /*@__PURE__*/Object.assign(${
           defaultExport ? `${normalScriptDefaultVar}, ` : ''
         }${definedOptions ? `${definedOptions}, ` : ''}{${runtimeOptions}\n  ` +
-          `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`
+          `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`,
       )
       ctx.s.appendRight(endOffset, `})`)
     } else {
       ctx.s.prependLeft(
         startOffset,
         `\n${genDefaultAs} {${runtimeOptions}\n  ` +
-          `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`
+          `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`,
       )
       ctx.s.appendRight(endOffset, `}`)
     }
   }
 
-  // 12. finalize Vue helper imports
+  // 11. finalize Vue helper imports
   if (ctx.helperImports.size > 0) {
+    const runtimeModuleName =
+      options.templateOptions?.compilerOptions?.runtimeModuleName
+    const importSrc = runtimeModuleName
+      ? JSON.stringify(runtimeModuleName)
+      : `'vue'`
     ctx.s.prepend(
       `import { ${[...ctx.helperImports]
         .map(h => `${h} as _${h}`)
-        .join(', ')} } from 'vue'\n`
+        .join(', ')} } from ${importSrc}\n`,
     )
   }
 
-  ctx.s.trim()
-
   return {
     ...scriptSetup,
     bindings: ctx.bindingMetadata,
@@ -1042,19 +1032,19 @@ export function compileScript(
         ? (ctx.s.generateMap({
             source: filename,
             hires: true,
-            includeContent: true
+            includeContent: true,
           }) as unknown as RawSourceMap)
         : undefined,
     scriptAst: scriptAst?.body,
     scriptSetupAst: scriptSetupAst?.body,
-    deps: ctx.deps ? [...ctx.deps] : undefined
+    deps: ctx.deps ? [...ctx.deps] : undefined,
   }
 }
 
 function registerBinding(
   bindings: Record<string, BindingTypes>,
   node: Identifier,
-  type: BindingTypes
+  type: BindingTypes,
 ) {
   bindings[node.name] = type
 }
@@ -1064,7 +1054,8 @@ function walkDeclaration(
   node: Declaration,
   bindings: Record<string, BindingTypes>,
   userImportAliases: Record<string, string>,
-  hoistStatic: boolean
+  hoistStatic: boolean,
+  isPropsDestructureEnabled = false,
 ): boolean {
   let isAllLiteral = false
 
@@ -1073,19 +1064,22 @@ function walkDeclaration(
     isAllLiteral =
       isConst &&
       node.declarations.every(
-        decl => decl.id.type === 'Identifier' && isStaticNode(decl.init!)
+        decl => decl.id.type === 'Identifier' && isStaticNode(decl.init!),
       )
 
     // export const foo = ...
     for (const { id, init: _init } of node.declarations) {
       const init = _init && unwrapTSNode(_init)
-      const isDefineCall = !!(
+      const isConstMacroCall =
         isConst &&
         isCallOf(
           init,
-          c => c === DEFINE_PROPS || c === DEFINE_EMITS || c === WITH_DEFAULTS
+          c =>
+            c === DEFINE_PROPS ||
+            c === DEFINE_EMITS ||
+            c === WITH_DEFAULTS ||
+            c === DEFINE_SLOTS,
         )
-      )
       if (id.type === 'Identifier') {
         let bindingType
         const userReactiveBinding = userImportAliases['reactive']
@@ -1102,7 +1096,7 @@ function walkDeclaration(
         } else if (
           // if a declaration is a const literal, we can mark it so that
           // the generated render fn code doesn't need to unref() it
-          isDefineCall ||
+          isConstMacroCall ||
           (isConst && canNeverBeRef(init!, userReactiveBinding))
         ) {
           bindingType = isCallOf(init, DEFINE_PROPS)
@@ -1118,7 +1112,7 @@ function walkDeclaration(
                 m === userImportAliases['shallowRef'] ||
                 m === userImportAliases['customRef'] ||
                 m === userImportAliases['toRef'] ||
-                m === DEFINE_MODEL
+                m === DEFINE_MODEL,
             )
           ) {
             bindingType = BindingTypes.SETUP_REF
@@ -1130,19 +1124,19 @@ function walkDeclaration(
         }
         registerBinding(bindings, id, bindingType)
       } else {
-        if (isCallOf(init, DEFINE_PROPS)) {
+        if (isCallOf(init, DEFINE_PROPS) && isPropsDestructureEnabled) {
           continue
         }
         if (id.type === 'ObjectPattern') {
-          walkObjectPattern(id, bindings, isConst, isDefineCall)
+          walkObjectPattern(id, bindings, isConst, isConstMacroCall)
         } else if (id.type === 'ArrayPattern') {
-          walkArrayPattern(id, bindings, isConst, isDefineCall)
+          walkArrayPattern(id, bindings, isConst, isConstMacroCall)
         }
       }
     }
   } else if (node.type === 'TSEnumDeclaration') {
     isAllLiteral = node.members.every(
-      member => !member.initializer || isStaticNode(member.initializer)
+      member => !member.initializer || isStaticNode(member.initializer),
     )
     bindings[node.id!.name] = isAllLiteral
       ? BindingTypes.LITERAL_CONST
@@ -1163,7 +1157,7 @@ function walkObjectPattern(
   node: ObjectPattern,
   bindings: Record<string, BindingTypes>,
   isConst: boolean,
-  isDefineCall = false
+  isDefineCall = false,
 ) {
   for (const p of node.properties) {
     if (p.type === 'ObjectProperty') {
@@ -1191,7 +1185,7 @@ function walkArrayPattern(
   node: ArrayPattern,
   bindings: Record<string, BindingTypes>,
   isConst: boolean,
-  isDefineCall = false
+  isDefineCall = false,
 ) {
   for (const e of node.elements) {
     e && walkPattern(e, bindings, isConst, isDefineCall)
@@ -1202,7 +1196,7 @@ function walkPattern(
   node: Node,
   bindings: Record<string, BindingTypes>,
   isConst: boolean,
-  isDefineCall = false
+  isDefineCall = false,
 ) {
   if (node.type === 'Identifier') {
     const type = isDefineCall
@@ -1251,7 +1245,7 @@ function canNeverBeRef(node: Node, userReactiveImport?: string): boolean {
     case 'SequenceExpression':
       return canNeverBeRef(
         node.expressions[node.expressions.length - 1],
-        userReactiveImport
+        userReactiveImport,
       )
     default:
       if (isLiteralNode(node)) {
diff --git a/packages/compiler-sfc/src/compileStyle.ts b/packages/compiler-sfc/src/compileStyle.ts
index 47f90e824..f27a6338e 100644
--- a/packages/compiler-sfc/src/compileStyle.ts
+++ b/packages/compiler-sfc/src/compileStyle.ts
@@ -1,19 +1,19 @@
 import postcss, {
-  ProcessOptions,
-  Result,
-  SourceMap,
-  Message,
-  LazyResult
+  type LazyResult,
+  type Message,
+  type ProcessOptions,
+  type Result,
+  type SourceMap,
 } from 'postcss'
 import trimPlugin from './style/pluginTrim'
 import scopedPlugin from './style/pluginScoped'
 import {
+  type PreprocessLang,
+  type StylePreprocessor,
+  type StylePreprocessorResults,
   processors,
-  StylePreprocessor,
-  StylePreprocessorResults,
-  PreprocessLang
 } from './style/preprocessors'
-import { RawSourceMap } from 'source-map-js'
+import type { RawSourceMap } from '@vue/compiler-core'
 import { cssVarsPlugin } from './style/cssVars'
 import postcssModules from 'postcss-modules'
 
@@ -69,25 +69,25 @@ export interface SFCStyleCompileResults {
 }
 
 export function compileStyle(
-  options: SFCStyleCompileOptions
+  options: SFCStyleCompileOptions,
 ): SFCStyleCompileResults {
   return doCompileStyle({
     ...options,
-    isAsync: false
+    isAsync: false,
   }) as SFCStyleCompileResults
 }
 
 export function compileStyleAsync(
-  options: SFCAsyncStyleCompileOptions
+  options: SFCAsyncStyleCompileOptions,
 ): Promise<SFCStyleCompileResults> {
   return doCompileStyle({
     ...options,
-    isAsync: true
+    isAsync: true,
   }) as Promise<SFCStyleCompileResults>
 }
 
 export function doCompileStyle(
-  options: SFCAsyncStyleCompileOptions
+  options: SFCAsyncStyleCompileOptions,
 ): SFCStyleCompileResults | Promise<SFCStyleCompileResults> {
   const {
     filename,
@@ -99,7 +99,7 @@ export function doCompileStyle(
     modulesOptions = {},
     preprocessLang,
     postcssOptions,
-    postcssPlugins
+    postcssPlugins,
   } = options
   const preprocessor = preprocessLang && processors[preprocessLang]
   const preProcessedSource = preprocessor && preprocess(options, preprocessor)
@@ -123,12 +123,12 @@ export function doCompileStyle(
   if (modules) {
     if (__GLOBAL__ || __ESM_BROWSER__) {
       throw new Error(
-        '[@vue/compiler-sfc] `modules` option is not supported in the browser build.'
+        '[@vue/compiler-sfc] `modules` option is not supported in the browser build.',
       )
     }
     if (!options.isAsync) {
       throw new Error(
-        '[@vue/compiler-sfc] `modules` option can only be used with compileStyleAsync().'
+        '[@vue/compiler-sfc] `modules` option can only be used with compileStyleAsync().',
       )
     }
     plugins.push(
@@ -136,21 +136,21 @@ export function doCompileStyle(
         ...modulesOptions,
         getJSON: (_cssFileName: string, json: Record<string, string>) => {
           cssModules = json
-        }
-      })
+        },
+      }),
     )
   }
 
   const postCSSOptions: ProcessOptions = {
     ...postcssOptions,
     to: filename,
-    from: filename
+    from: filename,
   }
   if (map) {
     postCSSOptions.map = {
       inline: false,
       annotation: false,
-      prev: map
+      prev: map,
     }
   }
 
@@ -159,7 +159,7 @@ export function doCompileStyle(
   let outMap: SourceMap | undefined
   // stylus output include plain css. so need remove the repeat item
   const dependencies = new Set(
-    preProcessedSource ? preProcessedSource.dependencies : []
+    preProcessedSource ? preProcessedSource.dependencies : [],
   )
   // sass has filename self when provided filename option
   dependencies.delete(filename)
@@ -191,14 +191,14 @@ export function doCompileStyle(
           errors,
           modules: cssModules,
           rawResult: result,
-          dependencies: recordPlainCssDependencies(result.messages)
+          dependencies: recordPlainCssDependencies(result.messages),
         }))
         .catch(error => ({
           code: '',
           map: undefined,
           errors: [...errors, error],
           rawResult: undefined,
-          dependencies
+          dependencies,
         }))
     }
 
@@ -215,19 +215,19 @@ export function doCompileStyle(
     map: outMap && outMap.toJSON(),
     errors,
     rawResult: result,
-    dependencies
+    dependencies,
   }
 }
 
 function preprocess(
   options: SFCStyleCompileOptions,
-  preprocessor: StylePreprocessor
+  preprocessor: StylePreprocessor,
 ): StylePreprocessorResults {
   if ((__ESM_BROWSER__ || __GLOBAL__) && !options.preprocessCustomRequire) {
     throw new Error(
       `[@vue/compiler-sfc] Style preprocessing in the browser build must ` +
         `provide the \`preprocessCustomRequire\` option to return the in-browser ` +
-        `version of the preprocessor.`
+        `version of the preprocessor.`,
     )
   }
 
@@ -236,8 +236,8 @@ function preprocess(
     options.inMap || options.map,
     {
       filename: options.filename,
-      ...options.preprocessOptions
+      ...options.preprocessOptions,
     },
-    options.preprocessCustomRequire
+    options.preprocessCustomRequire,
   )
 }
diff --git a/packages/compiler-sfc/src/compileTemplate.ts b/packages/compiler-sfc/src/compileTemplate.ts
index 8b1adea8e..322b1570e 100644
--- a/packages/compiler-sfc/src/compileTemplate.ts
+++ b/packages/compiler-sfc/src/compileTemplate.ts
@@ -1,26 +1,26 @@
 import {
-  CompilerOptions,
-  CodegenResult,
-  CompilerError,
-  NodeTransform,
-  ParserOptions,
-  RootNode
+  type CodegenResult,
+  type CompilerError,
+  type CompilerOptions,
+  type ElementNode,
+  type NodeTransform,
+  NodeTypes,
+  type ParserOptions,
+  type RawSourceMap,
+  type RootNode,
+  createRoot,
 } from '@vue/compiler-core'
+import { SourceMapConsumer, SourceMapGenerator } from 'source-map-js'
 import {
-  SourceMapConsumer,
-  SourceMapGenerator,
-  RawSourceMap
-} from 'source-map-js'
-import {
-  transformAssetUrl,
-  AssetURLOptions,
+  type AssetURLOptions,
+  type AssetURLTagConfig,
   createAssetUrlTransformWithOptions,
-  AssetURLTagConfig,
-  normalizeOptions
+  normalizeOptions,
+  transformAssetUrl,
 } from './template/transformAssetUrl'
 import {
+  createSrcsetTransformWithOptions,
   transformSrcset,
-  createSrcsetTransformWithOptions
 } from './template/transformSrcset'
 import { generateCodeFrame, isObject } from '@vue/shared'
 import * as CompilerDOM from '@vue/compiler-dom'
@@ -30,7 +30,7 @@ import { warnOnce } from './warn'
 import { genCssVarsFromList } from './style/cssVars'
 
 export interface TemplateCompiler {
-  compile(template: string, options: CompilerOptions): CodegenResult
+  compile(source: string | RootNode, options: CompilerOptions): CodegenResult
   parse(template: string, options: ParserOptions): RootNode
 }
 
@@ -46,6 +46,7 @@ export interface SFCTemplateCompileResults {
 
 export interface SFCTemplateCompileOptions {
   source: string
+  ast?: RootNode
   filename: string
   id: string
   scoped?: boolean
@@ -75,13 +76,13 @@ interface PreProcessor {
   render(
     source: string,
     options: any,
-    cb: (err: Error | null, res: string) => void
+    cb: (err: Error | null, res: string) => void,
   ): void
 }
 
 function preprocess(
   { source, filename, preprocessOptions }: SFCTemplateCompileOptions,
-  preprocessor: PreProcessor
+  preprocessor: PreProcessor,
 ): string {
   // Consolidate exposes a callback based API, but the callback is in fact
   // called synchronously for most templating engines. In our case, we have to
@@ -96,7 +97,7 @@ function preprocess(
     (_err, _res) => {
       if (_err) err = _err
       res = _res
-    }
+    },
   )
 
   if (err) throw err
@@ -104,7 +105,7 @@ function preprocess(
 }
 
 export function compileTemplate(
-  options: SFCTemplateCompileOptions
+  options: SFCTemplateCompileOptions,
 ): SFCTemplateCompileResults {
   const { preprocessLang, preprocessCustomRequire } = options
 
@@ -116,7 +117,7 @@ export function compileTemplate(
     throw new Error(
       `[@vue/compiler-sfc] Template preprocessing in the browser build must ` +
         `provide the \`preprocessCustomRequire\` option to return the in-browser ` +
-        `version of the preprocessor in the shape of { render(): string }.`
+        `version of the preprocessor in the shape of { render(): string }.`,
     )
   }
 
@@ -131,14 +132,15 @@ export function compileTemplate(
     try {
       return doCompileTemplate({
         ...options,
-        source: preprocess(options, preprocessor)
+        source: preprocess(options, preprocessor),
+        ast: undefined, // invalidate AST if template goes through preprocessor
       })
     } catch (e: any) {
       return {
         code: `export default function render() {}`,
         source: options.source,
         tips: [],
-        errors: [e]
+        errors: [e],
       }
     }
   } else if (preprocessLang) {
@@ -146,11 +148,11 @@ export function compileTemplate(
       code: `export default function render() {}`,
       source: options.source,
       tips: [
-        `Component ${options.filename} uses lang ${preprocessLang} for template. Please install the language preprocessor.`
+        `Component ${options.filename} uses lang ${preprocessLang} for template. Please install the language preprocessor.`,
       ],
       errors: [
-        `Component ${options.filename} uses lang ${preprocessLang} for template, however it is not installed.`
-      ]
+        `Component ${options.filename} uses lang ${preprocessLang} for template, however it is not installed.`,
+      ],
     }
   } else {
     return doCompileTemplate(options)
@@ -164,12 +166,13 @@ function doCompileTemplate({
   slotted,
   inMap,
   source,
+  ast: inAST,
   ssr = false,
   ssrCssVars,
   isProd = false,
-  compiler = ssr ? (CompilerSSR as TemplateCompiler) : CompilerDOM,
+  compiler,
   compilerOptions = {},
-  transformAssetUrls
+  transformAssetUrls,
 }: SFCTemplateCompileOptions): SFCTemplateCompileResults {
   const errors: CompilerError[] = []
   const warnings: CompilerError[] = []
@@ -179,7 +182,7 @@ function doCompileTemplate({
     const assetOptions = normalizeOptions(transformAssetUrls)
     nodeTransforms = [
       createAssetUrlTransformWithOptions(assetOptions),
-      createSrcsetTransformWithOptions(assetOptions)
+      createSrcsetTransformWithOptions(assetOptions),
     ]
   } else if (transformAssetUrls !== false) {
     nodeTransforms = [transformAssetUrl, transformSrcset]
@@ -188,18 +191,43 @@ function doCompileTemplate({
   if (ssr && !ssrCssVars) {
     warnOnce(
       `compileTemplate is called with \`ssr: true\` but no ` +
-        `corresponding \`cssVars\` option.\`.`
+        `corresponding \`cssVars\` option.`,
     )
   }
   if (!id) {
-    warnOnce(`compileTemplate now requires the \`id\` option.\`.`)
+    warnOnce(`compileTemplate now requires the \`id\` option.`)
     id = ''
   }
 
   const shortId = id.replace(/^data-v-/, '')
   const longId = `data-v-${shortId}`
 
-  let { code, ast, preamble, map } = compiler.compile(source, {
+  const defaultCompiler = ssr ? (CompilerSSR as TemplateCompiler) : CompilerDOM
+  compiler = compiler || defaultCompiler
+
+  if (compiler !== defaultCompiler) {
+    // user using custom compiler, this means we cannot reuse the AST from
+    // the descriptor as they might be different.
+    inAST = undefined
+  }
+
+  if (inAST?.transformed) {
+    // If input AST has already been transformed, then it cannot be reused.
+    // We need to parse a fresh one. Can't just use `source` here since we need
+    // the AST location info to be relative to the entire SFC.
+    const newAST = (ssr ? CompilerDOM : compiler).parse(inAST.source, {
+      prefixIdentifiers: true,
+      ...compilerOptions,
+      parseMode: 'sfc',
+      onError: e => errors.push(e),
+    })
+    const template = newAST.children.find(
+      node => node.type === NodeTypes.ELEMENT && node.tag === 'template',
+    ) as ElementNode
+    inAST = createRoot(template.children, inAST.source)
+  }
+
+  let { code, ast, preamble, map } = compiler.compile(inAST || source, {
     mode: 'module',
     prefixIdentifiers: true,
     hoistStatic: true,
@@ -216,13 +244,13 @@ function doCompileTemplate({
     nodeTransforms: nodeTransforms.concat(compilerOptions.nodeTransforms || []),
     filename,
     onError: e => errors.push(e),
-    onWarn: w => warnings.push(w)
+    onWarn: w => warnings.push(w),
   })
 
   // inMap should be the map produced by ./parse.ts which is a simple line-only
   // mapping. If it is present, we need to adjust the final map and errors to
   // reflect the original line numbers.
-  if (inMap) {
+  if (inMap && !inAST) {
     if (map) {
       map = mapLines(inMap, map)
     }
@@ -235,9 +263,9 @@ function doCompileTemplate({
     let msg = w.message
     if (w.loc) {
       msg += `\n${generateCodeFrame(
-        source,
+        inAST?.source || source,
         w.loc.start.offset,
-        w.loc.end.offset
+        w.loc.end.offset,
       )}`
     }
     return msg
@@ -261,7 +289,7 @@ function mapLines(oldMap: RawSourceMap, newMap: RawSourceMap): RawSourceMap {
 
     const origPosInOldMap = oldMapConsumer.originalPositionFor({
       line: m.originalLine,
-      column: m.originalColumn
+      column: m.originalColumn,
     })
 
     if (origPosInOldMap.source == null) {
@@ -271,16 +299,16 @@ function mapLines(oldMap: RawSourceMap, newMap: RawSourceMap): RawSourceMap {
     mergedMapGenerator.addMapping({
       generated: {
         line: m.generatedLine,
-        column: m.generatedColumn
+        column: m.generatedColumn,
       },
       original: {
         line: origPosInOldMap.line, // map line
         // use current column, since the oldMap produced by @vue/compiler-sfc
         // does not
-        column: m.originalColumn
+        column: m.originalColumn,
       },
       source: origPosInOldMap.source,
-      name: origPosInOldMap.name
+      name: origPosInOldMap.name,
     })
   })
 
@@ -302,7 +330,7 @@ function mapLines(oldMap: RawSourceMap, newMap: RawSourceMap): RawSourceMap {
 function patchErrors(
   errors: CompilerError[],
   source: string,
-  inMap: RawSourceMap
+  inMap: RawSourceMap,
 ) {
   const originalSource = inMap.sourcesContent![0]
   const offset = originalSource.indexOf(source)
diff --git a/packages/compiler-sfc/src/index.ts b/packages/compiler-sfc/src/index.ts
index c63e302e0..5123a9089 100644
--- a/packages/compiler-sfc/src/index.ts
+++ b/packages/compiler-sfc/src/index.ts
@@ -1,4 +1,4 @@
-export const version = __VERSION__
+export const version: string = __VERSION__
 
 // API
 export { parse } from './parse'
@@ -8,16 +8,20 @@ export { compileScript } from './compileScript'
 export { rewriteDefault, rewriteDefaultAST } from './rewriteDefault'
 export { resolveTypeElements, inferRuntimeType } from './script/resolveType'
 
-import { SFCParseResult, parseCache as _parseCache } from './parse'
+import { type SFCParseResult, parseCache as _parseCache } from './parse'
 // #9521 export parseCache as a simple map to avoid exposing LRU types
 export const parseCache = _parseCache as Map<string, SFCParseResult>
 
-// TODO remove in 3.4
-export {
-  shouldTransform as shouldTransformRef,
-  transform as transformRef,
-  transformAST as transformRefAST
-} from '@vue/reactivity-transform'
+// error messages
+import {
+  DOMErrorMessages,
+  errorMessages as coreErrorMessages,
+} from '@vue/compiler-dom'
+
+export const errorMessages: Record<number, string> = {
+  ...coreErrorMessages,
+  ...DOMErrorMessages,
+}
 
 // Utilities
 export { parse as babelParse } from '@babel/parser'
@@ -32,11 +36,13 @@ export {
   walkIdentifiers,
   extractIdentifiers,
   isInDestructureAssignment,
-  isStaticProperty
+  isStaticProperty,
 } from '@vue/compiler-core'
 
 // Internals for type resolution
 export { invalidateTypeCache, registerTS } from './script/resolveType'
+export { extractRuntimeProps } from './script/defineProps'
+export { extractRuntimeEmits } from './script/defineEmits'
 
 // Types
 export type {
@@ -46,30 +52,38 @@ export type {
   SFCBlock,
   SFCTemplateBlock,
   SFCScriptBlock,
-  SFCStyleBlock
+  SFCStyleBlock,
 } from './parse'
 export type {
   TemplateCompiler,
   SFCTemplateCompileOptions,
-  SFCTemplateCompileResults
+  SFCTemplateCompileResults,
 } from './compileTemplate'
 export type {
   SFCStyleCompileOptions,
   SFCAsyncStyleCompileOptions,
-  SFCStyleCompileResults
+  SFCStyleCompileResults,
 } from './compileStyle'
 export type { SFCScriptCompileOptions } from './compileScript'
 export type { ScriptCompileContext } from './script/context'
 export type {
   TypeResolveContext,
-  SimpleTypeResolveContext
+  SimpleTypeResolveOptions,
+  SimpleTypeResolveContext,
 } from './script/resolveType'
 export type {
   AssetURLOptions,
-  AssetURLTagConfig
+  AssetURLTagConfig,
 } from './template/transformAssetUrl'
 export type {
   CompilerOptions,
   CompilerError,
-  BindingMetadata
+  BindingMetadata,
 } from '@vue/compiler-core'
+
+/**
+ * @deprecated this is preserved to avoid breaking vite-plugin-vue < 5.0
+ * with reactivityTransform: true. The desired behavior should be silently
+ * ignoring the option instead of breaking.
+ */
+export const shouldTransformRef = () => false
diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
index 60ee4b654..c8be86550 100644
--- a/packages/compiler-sfc/src/parse.ts
+++ b/packages/compiler-sfc/src/parse.ts
@@ -1,18 +1,24 @@
 import {
+  type BindingMetadata,
+  type CodegenSourceMapGenerator,
+  type CompilerError,
+  type ElementNode,
   NodeTypes,
-  ElementNode,
-  SourceLocation,
-  CompilerError,
-  TextModes,
-  BindingMetadata
+  type ParserOptions,
+  type RawSourceMap,
+  type RootNode,
+  type SourceLocation,
+  createRoot,
 } from '@vue/compiler-core'
 import * as CompilerDOM from '@vue/compiler-dom'
-import { RawSourceMap, SourceMapGenerator } from 'source-map-js'
-import { TemplateCompiler } from './compileTemplate'
+import { SourceMapGenerator } from 'source-map-js'
+import type { TemplateCompiler } from './compileTemplate'
 import { parseCssVars } from './style/cssVars'
 import { createCache } from './cache'
-import { ImportBinding } from './compileScript'
+import type { ImportBinding } from './compileScript'
 import { isImportUsed } from './script/importUsageCheck'
+import type { LRUCache } from 'lru-cache'
+import { genCacheKey } from '@vue/shared'
 
 export const DEFAULT_FILENAME = 'anonymous.vue'
 
@@ -23,6 +29,7 @@ export interface SFCParseOptions {
   pad?: boolean | 'line' | 'space'
   ignoreEmpty?: boolean
   compiler?: TemplateCompiler
+  templateParseOptions?: ParserOptions
 }
 
 export interface SFCBlock {
@@ -37,7 +44,7 @@ export interface SFCBlock {
 
 export interface SFCTemplateBlock extends SFCBlock {
   type: 'template'
-  ast: ElementNode
+  ast?: RootNode
 }
 
 export interface SFCScriptBlock extends SFCBlock {
@@ -93,25 +100,32 @@ export interface SFCParseResult {
   errors: (CompilerError | SyntaxError)[]
 }
 
-export const parseCache = createCache<SFCParseResult>()
+export const parseCache:
+  | Map<string, SFCParseResult>
+  | LRUCache<string, SFCParseResult> = createCache<SFCParseResult>()
 
 export function parse(
   source: string,
-  {
+  options: SFCParseOptions = {},
+): SFCParseResult {
+  const sourceKey = genCacheKey(source, {
+    ...options,
+    compiler: { parse: options.compiler?.parse },
+  })
+  const cache = parseCache.get(sourceKey)
+  if (cache) {
+    return cache
+  }
+
+  const {
     sourceMap = true,
     filename = DEFAULT_FILENAME,
     sourceRoot = '',
     pad = false,
     ignoreEmpty = true,
-    compiler = CompilerDOM
-  }: SFCParseOptions = {}
-): SFCParseResult {
-  const sourceKey =
-    source + sourceMap + filename + sourceRoot + pad + compiler.parse
-  const cache = parseCache.get(sourceKey)
-  if (cache) {
-    return cache
-  }
+    compiler = CompilerDOM,
+    templateParseOptions = {},
+  } = options
 
   const descriptor: SFCDescriptor = {
     filename,
@@ -123,45 +137,24 @@ export function parse(
     customBlocks: [],
     cssVars: [],
     slotted: false,
-    shouldForceReload: prevImports => hmrShouldReload(prevImports, descriptor)
+    shouldForceReload: prevImports => hmrShouldReload(prevImports, descriptor),
   }
 
   const errors: (CompilerError | SyntaxError)[] = []
   const ast = compiler.parse(source, {
-    // there are no components at SFC parsing level
-    isNativeTag: () => true,
-    // preserve all whitespaces
-    isPreTag: () => true,
-    getTextMode: ({ tag, props }, parent) => {
-      // all top level elements except <template> are parsed as raw text
-      // containers
-      if (
-        (!parent && tag !== 'template') ||
-        // <template lang="xxx"> should also be treated as raw text
-        (tag === 'template' &&
-          props.some(
-            p =>
-              p.type === NodeTypes.ATTRIBUTE &&
-              p.name === 'lang' &&
-              p.value &&
-              p.value.content &&
-              p.value.content !== 'html'
-          ))
-      ) {
-        return TextModes.RAWTEXT
-      } else {
-        return TextModes.DATA
-      }
-    },
+    parseMode: 'sfc',
+    prefixIdentifiers: true,
+    ...templateParseOptions,
     onError: e => {
       errors.push(e)
-    }
+    },
   })
   ast.children.forEach(node => {
     if (node.type !== NodeTypes.ELEMENT) {
       return
     }
-    // we only want to keep the nodes that are not empty (when the tag is not a template)
+    // we only want to keep the nodes that are not empty
+    // (when the tag is not a template)
     if (
       ignoreEmpty &&
       node.tag !== 'template' &&
@@ -176,9 +169,12 @@ export function parse(
           const templateBlock = (descriptor.template = createBlock(
             node,
             source,
-            false
+            false,
           ) as SFCTemplateBlock)
-          templateBlock.ast = node
+
+          if (!templateBlock.attrs.src) {
+            templateBlock.ast = createRoot(node.children, source)
+          }
 
           // warn against 2.x <template functional>
           if (templateBlock.attrs.functional) {
@@ -186,9 +182,11 @@ export function parse(
               `<template functional> is no longer supported in Vue 3, since ` +
                 `functional components no longer have significant performance ` +
                 `difference from stateful ones. Just use a normal <template> ` +
-                `instead.`
+                `instead.`,
             ) as CompilerError
-            err.loc = node.props.find(p => p.name === 'functional')!.loc
+            err.loc = node.props.find(
+              p => p.type === NodeTypes.ATTRIBUTE && p.name === 'functional',
+            )!.loc
             errors.push(err)
           }
         } else {
@@ -214,8 +212,8 @@ export function parse(
           errors.push(
             new SyntaxError(
               `<style vars> has been replaced by a new proposal: ` +
-                `https://github.com/vuejs/rfcs/pull/231`
-            )
+                `https://github.com/vuejs/rfcs/pull/231`,
+            ),
           )
         }
         descriptor.styles.push(styleBlock)
@@ -228,8 +226,8 @@ export function parse(
   if (!descriptor.template && !descriptor.script && !descriptor.scriptSetup) {
     errors.push(
       new SyntaxError(
-        `At least one <template> or <script> is required in a single file component.`
-      )
+        `At least one <template> or <script> is required in a single file component. ${descriptor.filename}`,
+      ),
     )
   }
   if (descriptor.scriptSetup) {
@@ -237,8 +235,8 @@ export function parse(
       errors.push(
         new SyntaxError(
           `<script setup> cannot use the "src" attribute because ` +
-            `its syntax will be ambiguous outside of the component.`
-        )
+            `its syntax will be ambiguous outside of the component.`,
+        ),
       )
       descriptor.scriptSetup = null
     }
@@ -246,8 +244,8 @@ export function parse(
       errors.push(
         new SyntaxError(
           `<script> cannot use the "src" attribute when <script setup> is ` +
-            `also present because they must be processed together.`
-        )
+            `also present because they must be processed together.`,
+        ),
       )
       descriptor.script = null
     }
@@ -260,7 +258,7 @@ export function parse(
     (descriptor.template.lang === 'pug' || descriptor.template.lang === 'jade')
   ) {
     ;[descriptor.template.content, templateColumnOffset] = dedent(
-      descriptor.template.content
+      descriptor.template.content,
     )
   }
 
@@ -273,14 +271,14 @@ export function parse(
           block.content,
           sourceRoot,
           !pad || block.type === 'template' ? block.loc.start.line - 1 : 0,
-          columnOffset
+          columnOffset,
         )
       }
     }
     genMap(descriptor.template, templateColumnOffset)
     genMap(descriptor.script)
-    descriptor.styles.forEach(genMap)
-    descriptor.customBlocks.forEach(genMap)
+    descriptor.styles.forEach(s => genMap(s))
+    descriptor.customBlocks.forEach(s => genMap(s))
   }
 
   // parse CSS vars
@@ -289,12 +287,12 @@ export function parse(
   // check if the SFC uses :slotted
   const slottedRE = /(?:::v-|:)slotted\(/
   descriptor.slotted = descriptor.styles.some(
-    s => s.scoped && slottedRE.test(s.content)
+    s => s.scoped && slottedRE.test(s.content),
   )
 
   const result = {
     descriptor,
-    errors
+    errors,
   }
   parseCache.set(sourceKey, result)
   return result
@@ -302,12 +300,12 @@ export function parse(
 
 function createDuplicateBlockError(
   node: ElementNode,
-  isScriptSetup = false
+  isScriptSetup = false,
 ): CompilerError {
   const err = new SyntaxError(
     `Single file component can contain only one <${node.tag}${
       isScriptSetup ? ` setup` : ``
-    }> element`
+    }> element`,
   ) as CompilerError
   err.loc = node.loc
   return err
@@ -316,55 +314,35 @@ function createDuplicateBlockError(
 function createBlock(
   node: ElementNode,
   source: string,
-  pad: SFCParseOptions['pad']
+  pad: SFCParseOptions['pad'],
 ): SFCBlock {
   const type = node.tag
-  let { start, end } = node.loc
-  let content = ''
-  if (node.children.length) {
-    start = node.children[0].loc.start
-    end = node.children[node.children.length - 1].loc.end
-    content = source.slice(start.offset, end.offset)
-  } else {
-    const offset = node.loc.source.indexOf(`</`)
-    if (offset > -1) {
-      start = {
-        line: start.line,
-        column: start.column + offset,
-        offset: start.offset + offset
-      }
-    }
-    end = { ...start }
-  }
-  const loc = {
-    source: content,
-    start,
-    end
-  }
+  const loc = node.innerLoc!
   const attrs: Record<string, string | true> = {}
   const block: SFCBlock = {
     type,
-    content,
+    content: source.slice(loc.start.offset, loc.end.offset),
     loc,
-    attrs
+    attrs,
   }
   if (pad) {
     block.content = padContent(source, block, pad) + block.content
   }
   node.props.forEach(p => {
     if (p.type === NodeTypes.ATTRIBUTE) {
-      attrs[p.name] = p.value ? p.value.content || true : true
-      if (p.name === 'lang') {
+      const name = p.name
+      attrs[name] = p.value ? p.value.content || true : true
+      if (name === 'lang') {
         block.lang = p.value && p.value.content
-      } else if (p.name === 'src') {
+      } else if (name === 'src') {
         block.src = p.value && p.value.content
       } else if (type === 'style') {
-        if (p.name === 'scoped') {
+        if (name === 'scoped') {
           ;(block as SFCStyleBlock).scoped = true
-        } else if (p.name === 'module') {
-          ;(block as SFCStyleBlock).module = attrs[p.name]
+        } else if (name === 'module') {
+          ;(block as SFCStyleBlock).module = attrs[name]
         }
-      } else if (type === 'script' && p.name === 'setup') {
+      } else if (type === 'script' && name === 'setup') {
         ;(block as SFCScriptBlock).setup = attrs.setup
       }
     }
@@ -382,41 +360,39 @@ function generateSourceMap(
   generated: string,
   sourceRoot: string,
   lineOffset: number,
-  columnOffset: number
+  columnOffset: number,
 ): RawSourceMap {
   const map = new SourceMapGenerator({
     file: filename.replace(/\\/g, '/'),
-    sourceRoot: sourceRoot.replace(/\\/g, '/')
-  })
+    sourceRoot: sourceRoot.replace(/\\/g, '/'),
+  }) as unknown as CodegenSourceMapGenerator
   map.setSourceContent(filename, source)
+  map._sources.add(filename)
   generated.split(splitRE).forEach((line, index) => {
     if (!emptyRE.test(line)) {
       const originalLine = index + 1 + lineOffset
       const generatedLine = index + 1
       for (let i = 0; i < line.length; i++) {
         if (!/\s/.test(line[i])) {
-          map.addMapping({
+          map._mappings.add({
+            originalLine,
+            originalColumn: i + columnOffset,
+            generatedLine,
+            generatedColumn: i,
             source: filename,
-            original: {
-              line: originalLine,
-              column: i + columnOffset
-            },
-            generated: {
-              line: generatedLine,
-              column: i
-            }
+            name: null,
           })
         }
       }
     }
   })
-  return JSON.parse(map.toString())
+  return map.toJSON()
 }
 
 function padContent(
   content: string,
   block: SFCBlock,
-  pad: SFCParseOptions['pad']
+  pad: SFCParseOptions['pad'],
 ): string {
   content = content.slice(0, block.loc.start.offset)
   if (pad === 'space') {
@@ -458,7 +434,7 @@ function isEmpty(node: ElementNode) {
  */
 export function hmrShouldReload(
   prevImports: Record<string, ImportBinding>,
-  next: SFCDescriptor
+  next: SFCDescriptor,
 ): boolean {
   if (
     !next.scriptSetup ||
@@ -504,6 +480,6 @@ function dedent(s: string): [string, number] {
         return line.slice(minIndent)
       })
       .join('\n'),
-    minIndent
+    minIndent,
   ]
 }
diff --git a/packages/compiler-sfc/src/rewriteDefault.ts b/packages/compiler-sfc/src/rewriteDefault.ts
index 277eedce0..e6714c990 100644
--- a/packages/compiler-sfc/src/rewriteDefault.ts
+++ b/packages/compiler-sfc/src/rewriteDefault.ts
@@ -2,15 +2,16 @@ import { parse } from '@babel/parser'
 import MagicString from 'magic-string'
 import type { ParserPlugin } from '@babel/parser'
 import type { Identifier, Statement } from '@babel/types'
+import { resolveParserPlugins } from './script/context'
 
 export function rewriteDefault(
   input: string,
   as: string,
-  parserPlugins?: ParserPlugin[]
+  parserPlugins?: ParserPlugin[],
 ): string {
   const ast = parse(input, {
     sourceType: 'module',
-    plugins: parserPlugins
+    plugins: resolveParserPlugins('js', parserPlugins),
   }).program.body
   const s = new MagicString(input)
 
@@ -26,7 +27,7 @@ export function rewriteDefault(
 export function rewriteDefaultAST(
   ast: Statement[],
   s: MagicString,
-  as: string
+  as: string,
 ): void {
   if (!hasDefaultExport(ast)) {
     s.append(`\nconst ${as} = {}`)
@@ -59,7 +60,7 @@ export function rewriteDefaultAST(
           if (node.source) {
             if (specifier.local.name === 'default') {
               s.prepend(
-                `import { default as __VUE_DEFAULT__ } from '${node.source.value}'\n`
+                `import { default as __VUE_DEFAULT__ } from '${node.source.value}'\n`,
               )
               const end = specifierEnd(s, specifier.local.end!, node.end!)
               s.remove(specifier.start!, end)
@@ -69,8 +70,8 @@ export function rewriteDefaultAST(
               s.prepend(
                 `import { ${s.slice(
                   specifier.local.start!,
-                  specifier.local.end!
-                )} as __VUE_DEFAULT__ } from '${node.source.value}'\n`
+                  specifier.local.end!,
+                )} as __VUE_DEFAULT__ } from '${node.source.value}'\n`,
               )
               const end = specifierEnd(s, specifier.exported.end!, node.end!)
               s.remove(specifier.start!, end)
@@ -95,7 +96,7 @@ export function hasDefaultExport(ast: Statement[]): boolean {
     } else if (
       stmt.type === 'ExportNamedDeclaration' &&
       stmt.specifiers.some(
-        spec => (spec.exported as Identifier).name === 'default'
+        spec => (spec.exported as Identifier).name === 'default',
       )
     ) {
       return true
diff --git a/packages/compiler-sfc/src/script/analyzeScriptBindings.ts b/packages/compiler-sfc/src/script/analyzeScriptBindings.ts
index 5adbb1b43..ae544f640 100644
--- a/packages/compiler-sfc/src/script/analyzeScriptBindings.ts
+++ b/packages/compiler-sfc/src/script/analyzeScriptBindings.ts
@@ -1,10 +1,10 @@
-import {
+import type {
   ArrayExpression,
   Node,
   ObjectExpression,
-  Statement
+  Statement,
 } from '@babel/types'
-import { BindingMetadata, BindingTypes } from '@vue/compiler-dom'
+import { type BindingMetadata, BindingTypes } from '@vue/compiler-dom'
 import { resolveObjectKey } from './utils'
 
 /**
@@ -30,7 +30,7 @@ function analyzeBindingsFromOptions(node: ObjectExpression): BindingMetadata {
   // mark non-script-setup so we don't resolve components/directives from these
   Object.defineProperty(bindings, '__isScriptSetup', {
     enumerable: false,
-    value: false
+    value: false,
   })
   for (const property of node.properties) {
     if (
diff --git a/packages/compiler-sfc/src/script/context.ts b/packages/compiler-sfc/src/script/context.ts
index b05b8d910..47b6b442a 100644
--- a/packages/compiler-sfc/src/script/context.ts
+++ b/packages/compiler-sfc/src/script/context.ts
@@ -1,26 +1,29 @@
-import { CallExpression, Node, ObjectPattern, Program } from '@babel/types'
-import { SFCDescriptor } from '../parse'
-import { generateCodeFrame } from '@vue/shared'
-import { parse as babelParse, ParserPlugin } from '@babel/parser'
-import { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
-import { PropsDestructureBindings } from './defineProps'
-import { ModelDecl } from './defineModel'
-import { BindingMetadata } from '../../../compiler-core/src'
+import type { CallExpression, Node, ObjectPattern, Program } from '@babel/types'
+import type { SFCDescriptor } from '../parse'
+import { generateCodeFrame, isArray } from '@vue/shared'
+import { type ParserPlugin, parse as babelParse } from '@babel/parser'
+import type { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
+import type { PropsDestructureBindings } from './defineProps'
+import type { ModelDecl } from './defineModel'
+import type { BindingMetadata } from '../../../compiler-core/src'
 import MagicString from 'magic-string'
-import { TypeScope } from './resolveType'
+import type { TypeScope } from './resolveType'
+import { warn } from '../warn'
 
 export class ScriptCompileContext {
   isJS: boolean
   isTS: boolean
+  isCE = false
 
   scriptAst: Program | null
   scriptSetupAst: Program | null
 
-  source = this.descriptor.source
-  filename = this.descriptor.filename
-  s = new MagicString(this.source)
-  startOffset = this.descriptor.scriptSetup?.loc.start.offset
-  endOffset = this.descriptor.scriptSetup?.loc.end.offset
+  source: string = this.descriptor.source
+  filename: string = this.descriptor.filename
+  s: MagicString = new MagicString(this.source)
+  startOffset: number | undefined =
+    this.descriptor.scriptSetup?.loc.start.offset
+  endOffset: number | undefined = this.descriptor.scriptSetup?.loc.end.offset
 
   // import / type analysis
   scope?: TypeScope
@@ -78,7 +81,7 @@ export class ScriptCompileContext {
 
   constructor(
     public descriptor: SFCDescriptor,
-    public options: Partial<SFCScriptCompileOptions>
+    public options: Partial<SFCScriptCompileOptions>,
   ) {
     const { script, scriptSetup } = descriptor
     const scriptLang = script && script.lang
@@ -95,17 +98,25 @@ export class ScriptCompileContext {
       scriptSetupLang === 'ts' ||
       scriptSetupLang === 'tsx'
 
+    const customElement = options.customElement
+    const filename = this.descriptor.filename
+    if (customElement) {
+      this.isCE =
+        typeof customElement === 'boolean'
+          ? customElement
+          : customElement(filename)
+    }
     // resolve parser plugins
     const plugins: ParserPlugin[] = resolveParserPlugins(
       (scriptLang || scriptSetupLang)!,
-      options.babelParserPlugins
+      options.babelParserPlugins,
     )
 
     function parse(input: string, offset: number): Program {
       try {
         return babelParse(input, {
           plugins,
-          sourceType: 'module'
+          sourceType: 'module',
         }).program
       } catch (e: any) {
         e.message = `[vue/compiler-sfc] ${e.message}\n\n${
@@ -113,7 +124,7 @@ export class ScriptCompileContext {
         }\n${generateCodeFrame(
           descriptor.source,
           e.pos + offset,
-          e.pos + offset + 1
+          e.pos + offset + 1,
         )}`
         throw e
       }
@@ -135,35 +146,57 @@ export class ScriptCompileContext {
     return block.content.slice(node.start!, node.end!)
   }
 
+  warn(msg: string, node: Node, scope?: TypeScope): void {
+    warn(generateError(msg, node, this, scope))
+  }
+
   error(msg: string, node: Node, scope?: TypeScope): never {
-    const offset = scope ? scope.offset : this.startOffset!
     throw new Error(
-      `[@vue/compiler-sfc] ${msg}\n\n${
-        (scope || this.descriptor).filename
-      }\n${generateCodeFrame(
-        (scope || this.descriptor).source,
-        node.start! + offset,
-        node.end! + offset
-      )}`
+      `[@vue/compiler-sfc] ${generateError(msg, node, this, scope)}`,
     )
   }
 }
 
+function generateError(
+  msg: string,
+  node: Node,
+  ctx: ScriptCompileContext,
+  scope?: TypeScope,
+) {
+  const offset = scope ? scope.offset : ctx.startOffset!
+  return `${msg}\n\n${(scope || ctx.descriptor).filename}\n${generateCodeFrame(
+    (scope || ctx.descriptor).source,
+    node.start! + offset,
+    node.end! + offset,
+  )}`
+}
+
 export function resolveParserPlugins(
   lang: string,
   userPlugins?: ParserPlugin[],
-  dts = false
-) {
+  dts = false,
+): ParserPlugin[] {
   const plugins: ParserPlugin[] = []
-  if (lang === 'jsx' || lang === 'tsx') {
+  if (
+    !userPlugins ||
+    !userPlugins.some(
+      p =>
+        p === 'importAssertions' ||
+        p === 'importAttributes' ||
+        (isArray(p) && p[0] === 'importAttributes'),
+    )
+  ) {
+    plugins.push('importAttributes')
+  }
+  if (lang === 'jsx' || lang === 'tsx' || lang === 'mtsx') {
     plugins.push('jsx')
   } else if (userPlugins) {
     // If don't match the case of adding jsx
     // should remove the jsx from user options
     userPlugins = userPlugins.filter(p => p !== 'jsx')
   }
-  if (lang === 'ts' || lang === 'tsx') {
-    plugins.push(['typescript', { dts }])
+  if (lang === 'ts' || lang === 'mts' || lang === 'tsx' || lang === 'mtsx') {
+    plugins.push(['typescript', { dts }], 'explicitResourceManagement')
     if (!userPlugins || !userPlugins.includes('decorators')) {
       plugins.push('decorators-legacy')
     }
diff --git a/packages/compiler-sfc/src/script/defineEmits.ts b/packages/compiler-sfc/src/script/defineEmits.ts
index 052f772a9..c48c7e560 100644
--- a/packages/compiler-sfc/src/script/defineEmits.ts
+++ b/packages/compiler-sfc/src/script/defineEmits.ts
@@ -1,18 +1,19 @@
-import {
+import type {
   ArrayPattern,
   Identifier,
   LVal,
   Node,
   ObjectPattern,
-  RestElement
+  RestElement,
 } from '@babel/types'
 import { isCallOf } from './utils'
-import { ScriptCompileContext } from './context'
+import type { ScriptCompileContext } from './context'
 import {
+  type TypeResolveContext,
   resolveTypeElements,
   resolveUnionType,
   resolveTypeReference,
-  resolveEnumMemberValue
+  resolveEnumMemberValue,
 } from './resolveType'
 
 export const DEFINE_EMITS = 'defineEmits'
@@ -20,7 +21,7 @@ export const DEFINE_EMITS = 'defineEmits'
 export function processDefineEmits(
   ctx: ScriptCompileContext,
   node: Node,
-  declId?: LVal
+  declId?: LVal,
 ): boolean {
   if (!isCallOf(node, DEFINE_EMITS)) {
     return false
@@ -35,7 +36,7 @@ export function processDefineEmits(
       ctx.error(
         `${DEFINE_EMITS}() cannot accept both type and non-type arguments ` +
           `at the same time. Use one or the other.`,
-        node
+        node,
       )
     }
     ctx.emitsTypeDecl = node.typeParameters.params[0]
@@ -63,15 +64,15 @@ export function genRuntimeEmits(ctx: ScriptCompileContext): string | undefined {
       .map(n => JSON.stringify(`update:${n}`))
       .join(', ')}]`
     emitsDecl = emitsDecl
-      ? `/*#__PURE__*/${ctx.helper(
-          'mergeModels'
+      ? `/*@__PURE__*/${ctx.helper(
+          'mergeModels',
         )}(${emitsDecl}, ${modelEmitsDecl})`
       : modelEmitsDecl
   }
   return emitsDecl
 }
 
-function extractRuntimeEmits(ctx: ScriptCompileContext): Set<string> {
+export function extractRuntimeEmits(ctx: TypeResolveContext): Set<string> {
   const emits = new Set<string>()
   const node = ctx.emitsTypeDecl!
 
@@ -92,7 +93,7 @@ function extractRuntimeEmits(ctx: ScriptCompileContext): Set<string> {
     if (hasProperty) {
       ctx.error(
         `defineEmits() type cannot mixed call signature and property syntax.`,
-        node
+        node,
       )
     }
     for (const call of calls) {
@@ -104,9 +105,9 @@ function extractRuntimeEmits(ctx: ScriptCompileContext): Set<string> {
 }
 
 function extractEventNames(
-  ctx: ScriptCompileContext,
+  ctx: TypeResolveContext,
   eventName: ArrayPattern | Identifier | ObjectPattern | RestElement,
-  emits: Set<string>
+  emits: Set<string>,
 ) {
   if (
     eventName.type === 'Identifier' &&
diff --git a/packages/compiler-sfc/src/script/defineExpose.ts b/packages/compiler-sfc/src/script/defineExpose.ts
index 636fdba8d..ba13e26c1 100644
--- a/packages/compiler-sfc/src/script/defineExpose.ts
+++ b/packages/compiler-sfc/src/script/defineExpose.ts
@@ -1,12 +1,12 @@
-import { Node } from '@babel/types'
+import type { Node } from '@babel/types'
 import { isCallOf } from './utils'
-import { ScriptCompileContext } from './context'
+import type { ScriptCompileContext } from './context'
 
 export const DEFINE_EXPOSE = 'defineExpose'
 
 export function processDefineExpose(
   ctx: ScriptCompileContext,
-  node: Node
+  node: Node,
 ): boolean {
   if (isCallOf(node, DEFINE_EXPOSE)) {
     if (ctx.hasDefineExposeCall) {
diff --git a/packages/compiler-sfc/src/script/defineModel.ts b/packages/compiler-sfc/src/script/defineModel.ts
index 432b8676f..050828002 100644
--- a/packages/compiler-sfc/src/script/defineModel.ts
+++ b/packages/compiler-sfc/src/script/defineModel.ts
@@ -1,15 +1,8 @@
-import { LVal, Node, ObjectProperty, TSType } from '@babel/types'
-import { ScriptCompileContext } from './context'
+import type { LVal, Node, TSType } from '@babel/types'
+import type { ScriptCompileContext } from './context'
 import { inferRuntimeType } from './resolveType'
-import {
-  UNKNOWN_TYPE,
-  concatStrings,
-  isCallOf,
-  toRuntimeTypeString,
-  unwrapTSNode
-} from './utils'
-import { BindingTypes } from '@vue/compiler-dom'
-import { warnOnce } from '../warn'
+import { UNKNOWN_TYPE, isCallOf, toRuntimeTypeString } from './utils'
+import { BindingTypes, unwrapTSNode } from '@vue/compiler-dom'
 
 export const DEFINE_MODEL = 'defineModel'
 
@@ -17,32 +10,18 @@ export interface ModelDecl {
   type: TSType | undefined
   options: string | undefined
   identifier: string | undefined
+  runtimeOptionNodes: Node[]
 }
 
 export function processDefineModel(
   ctx: ScriptCompileContext,
   node: Node,
-  declId?: LVal
+  declId?: LVal,
 ): boolean {
   if (!isCallOf(node, DEFINE_MODEL)) {
     return false
   }
 
-  if (!ctx.options.defineModel) {
-    warnOnce(
-      `defineModel() is an experimental feature and disabled by default.\n` +
-        `To enable it, follow the RFC at https://github.com/vuejs/rfcs/discussions/503.`
-    )
-    return false
-  }
-
-  warnOnce(
-    `This project is using defineModel(), which is an experimental ` +
-      `feature. It may receive breaking changes or be removed in the future, so ` +
-      `use at your own risk.\n` +
-      `To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/503.`
-  )
-
   ctx.hasDefineModelCall = true
 
   const type =
@@ -50,7 +29,8 @@ export function processDefineModel(
   let modelName: string
   let options: Node | undefined
   const arg0 = node.arguments[0] && unwrapTSNode(node.arguments[0])
-  if (arg0 && arg0.type === 'StringLiteral') {
+  const hasName = arg0 && arg0.type === 'StringLiteral'
+  if (hasName) {
     modelName = arg0.value
     options = node.arguments[1]
   } else {
@@ -62,47 +42,73 @@ export function processDefineModel(
     ctx.error(`duplicate model name ${JSON.stringify(modelName)}`, node)
   }
 
-  const optionsString = options && ctx.getString(options)
+  let optionsString = options && ctx.getString(options)
+  let optionsRemoved = !options
+  const runtimeOptionNodes: Node[] = []
+
+  if (
+    options &&
+    options.type === 'ObjectExpression' &&
+    !options.properties.some(p => p.type === 'SpreadElement' || p.computed)
+  ) {
+    let removed = 0
+    for (let i = options.properties.length - 1; i >= 0; i--) {
+      const p = options.properties[i]
+      const next = options.properties[i + 1]
+      const start = p.start!
+      const end = next ? next.start! : options.end! - 1
+      if (
+        (p.type === 'ObjectProperty' || p.type === 'ObjectMethod') &&
+        ((p.key.type === 'Identifier' &&
+          (p.key.name === 'get' || p.key.name === 'set')) ||
+          (p.key.type === 'StringLiteral' &&
+            (p.key.value === 'get' || p.key.value === 'set')))
+      ) {
+        // remove runtime-only options from prop options to avoid duplicates
+        optionsString =
+          optionsString.slice(0, start - options.start!) +
+          optionsString.slice(end - options.start!)
+      } else {
+        // remove prop options from runtime options
+        removed++
+        ctx.s.remove(ctx.startOffset! + start, ctx.startOffset! + end)
+        // record prop options for invalid scope var reference check
+        runtimeOptionNodes.push(p)
+      }
+    }
+    if (removed === options.properties.length) {
+      optionsRemoved = true
+      ctx.s.remove(
+        ctx.startOffset! + (hasName ? arg0.end! : options.start!),
+        ctx.startOffset! + options.end!,
+      )
+    }
+  }
 
   ctx.modelDecls[modelName] = {
     type,
     options: optionsString,
-    identifier: declId && declId.type === 'Identifier' ? declId.name : undefined
+    runtimeOptionNodes,
+    identifier:
+      declId && declId.type === 'Identifier' ? declId.name : undefined,
   }
   // register binding type
   ctx.bindingMetadata[modelName] = BindingTypes.PROPS
 
-  let runtimeOptions = ''
-  if (options) {
-    if (options.type === 'ObjectExpression') {
-      const local = options.properties.find(
-        p =>
-          p.type === 'ObjectProperty' &&
-          ((p.key.type === 'Identifier' && p.key.name === 'local') ||
-            (p.key.type === 'StringLiteral' && p.key.value === 'local'))
-      ) as ObjectProperty
-
-      if (local) {
-        runtimeOptions = `{ ${ctx.getString(local)} }`
-      } else {
-        for (const p of options.properties) {
-          if (p.type === 'SpreadElement' || p.computed) {
-            runtimeOptions = optionsString!
-            break
-          }
-        }
-      }
-    } else {
-      runtimeOptions = optionsString!
-    }
-  }
-
+  // defineModel -> useModel
   ctx.s.overwrite(
-    ctx.startOffset! + node.start!,
-    ctx.startOffset! + node.end!,
-    `${ctx.helper('useModel')}(__props, ${JSON.stringify(modelName)}${
-      runtimeOptions ? `, ${runtimeOptions}` : ``
-    })`
+    ctx.startOffset! + node.callee.start!,
+    ctx.startOffset! + node.callee.end!,
+    ctx.helper('useModel'),
+  )
+  // inject arguments
+  ctx.s.appendLeft(
+    ctx.startOffset! +
+      (node.arguments.length ? node.arguments[0].start! : node.end! - 1),
+    `__props, ` +
+      (hasName
+        ? ``
+        : `${JSON.stringify(modelName)}${optionsRemoved ? `` : `, `}`),
   )
 
   return true
@@ -113,42 +119,58 @@ export function genModelProps(ctx: ScriptCompileContext) {
 
   const isProd = !!ctx.options.isProd
   let modelPropsDecl = ''
-  for (const [name, { type, options }] of Object.entries(ctx.modelDecls)) {
+  for (const [name, { type, options: runtimeOptions }] of Object.entries(
+    ctx.modelDecls,
+  )) {
     let skipCheck = false
-
+    let codegenOptions = ``
     let runtimeTypes = type && inferRuntimeType(ctx, type)
     if (runtimeTypes) {
+      const hasBoolean = runtimeTypes.includes('Boolean')
+      const hasFunction = runtimeTypes.includes('Function')
       const hasUnknownType = runtimeTypes.includes(UNKNOWN_TYPE)
 
-      runtimeTypes = runtimeTypes.filter(el => {
-        if (el === UNKNOWN_TYPE) return false
-        return isProd
-          ? el === 'Boolean' || (el === 'Function' && options)
-          : true
-      })
-      skipCheck = !isProd && hasUnknownType && runtimeTypes.length > 0
+      if (hasUnknownType) {
+        if (hasBoolean || hasFunction) {
+          runtimeTypes = runtimeTypes.filter(t => t !== UNKNOWN_TYPE)
+          skipCheck = true
+        } else {
+          runtimeTypes = ['null']
+        }
+      }
+
+      if (!isProd) {
+        codegenOptions =
+          `type: ${toRuntimeTypeString(runtimeTypes)}` +
+          (skipCheck ? ', skipCheck: true' : '')
+      } else if (hasBoolean || (runtimeOptions && hasFunction)) {
+        // preserve types if contains boolean, or
+        // function w/ runtime options that may contain default
+        codegenOptions = `type: ${toRuntimeTypeString(runtimeTypes)}`
+      } else {
+        // able to drop types in production
+      }
     }
 
-    let runtimeType =
-      (runtimeTypes &&
-        runtimeTypes.length > 0 &&
-        toRuntimeTypeString(runtimeTypes)) ||
-      undefined
-
-    const codegenOptions = concatStrings([
-      runtimeType && `type: ${runtimeType}`,
-      skipCheck && 'skipCheck: true'
-    ])
-
     let decl: string
-    if (runtimeType && options) {
+    if (codegenOptions && runtimeOptions) {
       decl = ctx.isTS
-        ? `{ ${codegenOptions}, ...${options} }`
-        : `Object.assign({ ${codegenOptions} }, ${options})`
+        ? `{ ${codegenOptions}, ...${runtimeOptions} }`
+        : `Object.assign({ ${codegenOptions} }, ${runtimeOptions})`
+    } else if (codegenOptions) {
+      decl = `{ ${codegenOptions} }`
+    } else if (runtimeOptions) {
+      decl = runtimeOptions
     } else {
-      decl = options || (runtimeType ? `{ ${codegenOptions} }` : '{}')
+      decl = `{}`
     }
     modelPropsDecl += `\n    ${JSON.stringify(name)}: ${decl},`
+
+    // also generate modifiers prop
+    const modifierPropName = JSON.stringify(
+      name === 'modelValue' ? `modelModifiers` : `${name}Modifiers`,
+    )
+    modelPropsDecl += `\n    ${modifierPropName}: {},`
   }
   return `{${modelPropsDecl}\n  }`
 }
diff --git a/packages/compiler-sfc/src/script/defineOptions.ts b/packages/compiler-sfc/src/script/defineOptions.ts
index 8da3dbc0b..0ab6de308 100644
--- a/packages/compiler-sfc/src/script/defineOptions.ts
+++ b/packages/compiler-sfc/src/script/defineOptions.ts
@@ -1,6 +1,7 @@
-import { Node } from '@babel/types'
-import { ScriptCompileContext } from './context'
-import { isCallOf, unwrapTSNode } from './utils'
+import type { Node } from '@babel/types'
+import { unwrapTSNode } from '@vue/compiler-dom'
+import type { ScriptCompileContext } from './context'
+import { isCallOf } from './utils'
 import { DEFINE_PROPS } from './defineProps'
 import { DEFINE_EMITS } from './defineEmits'
 import { DEFINE_EXPOSE } from './defineExpose'
@@ -10,7 +11,7 @@ export const DEFINE_OPTIONS = 'defineOptions'
 
 export function processDefineOptions(
   ctx: ScriptCompileContext,
-  node: Node
+  node: Node,
 ): boolean {
   if (!isCallOf(node, DEFINE_OPTIONS)) {
     return false
@@ -36,10 +37,23 @@ export function processDefineOptions(
         (prop.type === 'ObjectProperty' || prop.type === 'ObjectMethod') &&
         prop.key.type === 'Identifier'
       ) {
-        if (prop.key.name === 'props') propsOption = prop
-        if (prop.key.name === 'emits') emitsOption = prop
-        if (prop.key.name === 'expose') exposeOption = prop
-        if (prop.key.name === 'slots') slotsOption = prop
+        switch (prop.key.name) {
+          case 'props':
+            propsOption = prop
+            break
+
+          case 'emits':
+            emitsOption = prop
+            break
+
+          case 'expose':
+            exposeOption = prop
+            break
+
+          case 'slots':
+            slotsOption = prop
+            break
+        }
       }
     }
   }
@@ -47,25 +61,25 @@ export function processDefineOptions(
   if (propsOption) {
     ctx.error(
       `${DEFINE_OPTIONS}() cannot be used to declare props. Use ${DEFINE_PROPS}() instead.`,
-      propsOption
+      propsOption,
     )
   }
   if (emitsOption) {
     ctx.error(
       `${DEFINE_OPTIONS}() cannot be used to declare emits. Use ${DEFINE_EMITS}() instead.`,
-      emitsOption
+      emitsOption,
     )
   }
   if (exposeOption) {
     ctx.error(
       `${DEFINE_OPTIONS}() cannot be used to declare expose. Use ${DEFINE_EXPOSE}() instead.`,
-      exposeOption
+      exposeOption,
     )
   }
   if (slotsOption) {
     ctx.error(
       `${DEFINE_OPTIONS}() cannot be used to declare slots. Use ${DEFINE_SLOTS}() instead.`,
-      slotsOption
+      slotsOption,
     )
   }
 
diff --git a/packages/compiler-sfc/src/script/defineProps.ts b/packages/compiler-sfc/src/script/defineProps.ts
index 0d35cdd77..9a4880a1a 100644
--- a/packages/compiler-sfc/src/script/defineProps.ts
+++ b/packages/compiler-sfc/src/script/defineProps.ts
@@ -1,23 +1,26 @@
-import {
-  Node,
+import type {
+  Expression,
   LVal,
-  ObjectProperty,
-  ObjectMethod,
+  Node,
   ObjectExpression,
-  Expression
+  ObjectMethod,
+  ObjectProperty,
 } from '@babel/types'
-import { BindingTypes, isFunctionType } from '@vue/compiler-dom'
-import { ScriptCompileContext } from './context'
-import { inferRuntimeType, resolveTypeElements } from './resolveType'
+import { BindingTypes, isFunctionType, unwrapTSNode } from '@vue/compiler-dom'
+import type { ScriptCompileContext } from './context'
+import {
+  type TypeResolveContext,
+  inferRuntimeType,
+  resolveTypeElements,
+} from './resolveType'
 import {
-  resolveObjectKey,
   UNKNOWN_TYPE,
   concatStrings,
-  isLiteralNode,
+  getEscapedPropName,
   isCallOf,
-  unwrapTSNode,
+  isLiteralNode,
+  resolveObjectKey,
   toRuntimeTypeString,
-  getEscapedPropName
 } from './utils'
 import { genModelProps } from './defineModel'
 import { getObjectOrArrayExpressionKeys } from './analyzeScriptBindings'
@@ -44,8 +47,9 @@ export type PropsDestructureBindings = Record<
 export function processDefineProps(
   ctx: ScriptCompileContext,
   node: Node,
-  declId?: LVal
-) {
+  declId?: LVal,
+  isWithDefaults = false,
+): boolean {
   if (!isCallOf(node, DEFINE_PROPS)) {
     return processWithDefaults(ctx, node, declId)
   }
@@ -71,14 +75,14 @@ export function processDefineProps(
       ctx.error(
         `${DEFINE_PROPS}() cannot accept both type and non-type arguments ` +
           `at the same time. Use one or the other.`,
-        node
+        node,
       )
     }
     ctx.propsTypeDecl = node.typeParameters.params[0]
   }
 
   // handle props destructure
-  if (declId && declId.type === 'ObjectPattern') {
+  if (!isWithDefaults && declId && declId.type === 'ObjectPattern') {
     processPropsDestructure(ctx, declId)
   }
 
@@ -91,15 +95,22 @@ export function processDefineProps(
 function processWithDefaults(
   ctx: ScriptCompileContext,
   node: Node,
-  declId?: LVal
+  declId?: LVal,
 ): boolean {
   if (!isCallOf(node, WITH_DEFAULTS)) {
     return false
   }
-  if (!processDefineProps(ctx, node.arguments[0], declId)) {
+  if (
+    !processDefineProps(
+      ctx,
+      node.arguments[0],
+      declId,
+      true /* isWithDefaults */,
+    )
+  ) {
     ctx.error(
       `${WITH_DEFAULTS}' first argument must be a ${DEFINE_PROPS} call.`,
-      node.arguments[0] || node
+      node.arguments[0] || node,
     )
   }
 
@@ -107,14 +118,15 @@ function processWithDefaults(
     ctx.error(
       `${WITH_DEFAULTS} can only be used with type-based ` +
         `${DEFINE_PROPS} declaration.`,
-      node
+      node,
     )
   }
-  if (ctx.propsDestructureDecl) {
-    ctx.error(
+  if (declId && declId.type === 'ObjectPattern') {
+    ctx.warn(
       `${WITH_DEFAULTS}() is unnecessary when using destructure with ${DEFINE_PROPS}().\n` +
-        `Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(...).`,
-      node.callee
+        `Reactive destructure will be disabled when using withDefaults().\n` +
+        `Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(...). `,
+      node.callee,
     )
   }
   ctx.propsRuntimeDefaults = node.arguments[1]
@@ -140,31 +152,33 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
           defaults.push(
             `${finalKey}: ${d.valueString}${
               d.needSkipFactory ? `, __skip_${finalKey}: true` : ``
-            }`
+            }`,
           )
       }
       if (defaults.length) {
-        propsDecls = `/*#__PURE__*/${ctx.helper(
-          `mergeDefaults`
+        propsDecls = `/*@__PURE__*/${ctx.helper(
+          `mergeDefaults`,
         )}(${propsDecls}, {\n  ${defaults.join(',\n  ')}\n})`
       }
     }
   } else if (ctx.propsTypeDecl) {
-    propsDecls = genRuntimePropsFromTypes(ctx)
+    propsDecls = extractRuntimeProps(ctx)
   }
 
   const modelsDecls = genModelProps(ctx)
 
   if (propsDecls && modelsDecls) {
-    return `/*#__PURE__*/${ctx.helper(
-      'mergeModels'
+    return `/*@__PURE__*/${ctx.helper(
+      'mergeModels',
     )}(${propsDecls}, ${modelsDecls})`
   } else {
     return modelsDecls || propsDecls
   }
 }
 
-function genRuntimePropsFromTypes(ctx: ScriptCompileContext) {
+export function extractRuntimeProps(
+  ctx: TypeResolveContext,
+): string | undefined {
   // this is only called if propsTypeDecl exists
   const props = resolveRuntimePropsFromType(ctx, ctx.propsTypeDecl!)
   if (!props.length) {
@@ -177,7 +191,7 @@ function genRuntimePropsFromTypes(ctx: ScriptCompileContext) {
   for (const prop of props) {
     propStrings.push(genRuntimePropFromType(ctx, prop, hasStaticDefaults))
     // register bindings
-    if (!(prop.key in ctx.bindingMetadata)) {
+    if ('bindingMetadata' in ctx && !(prop.key in ctx.bindingMetadata)) {
       ctx.bindingMetadata[prop.key] = BindingTypes.PROPS
     }
   }
@@ -186,8 +200,8 @@ function genRuntimePropsFromTypes(ctx: ScriptCompileContext) {
     ${propStrings.join(',\n    ')}\n  }`
 
   if (ctx.propsRuntimeDefaults && !hasStaticDefaults) {
-    propsDecls = `/*#__PURE__*/${ctx.helper(
-      'mergeDefaults'
+    propsDecls = `/*@__PURE__*/${ctx.helper(
+      'mergeDefaults',
     )}(${propsDecls}, ${ctx.getString(ctx.propsRuntimeDefaults)})`
   }
 
@@ -195,8 +209,8 @@ function genRuntimePropsFromTypes(ctx: ScriptCompileContext) {
 }
 
 function resolveRuntimePropsFromType(
-  ctx: ScriptCompileContext,
-  node: Node
+  ctx: TypeResolveContext,
+  node: Node,
 ): PropTypeData[] {
   const props: PropTypeData[] = []
   const elements = resolveTypeElements(ctx, node)
@@ -217,16 +231,16 @@ function resolveRuntimePropsFromType(
       key,
       required: !e.optional,
       type: type || [`null`],
-      skipCheck
+      skipCheck,
     })
   }
   return props
 }
 
 function genRuntimePropFromType(
-  ctx: ScriptCompileContext,
+  ctx: TypeResolveContext,
   { key, required, type, skipCheck }: PropTypeData,
-  hasStaticDefaults: boolean
+  hasStaticDefaults: boolean,
 ): string {
   let defaultString: string | undefined
   const destructured = genDestructuredDefaultValue(ctx, key, type)
@@ -239,7 +253,7 @@ function genRuntimePropFromType(
       node => {
         if (node.type === 'SpreadElement') return false
         return resolveObjectKey(node.key, node.computed) === key
-      }
+      },
     ) as ObjectProperty | ObjectMethod
     if (prop) {
       if (prop.type === 'ObjectProperty') {
@@ -259,13 +273,13 @@ function genRuntimePropFromType(
       `type: ${toRuntimeTypeString(type)}`,
       `required: ${required}`,
       skipCheck && 'skipCheck: true',
-      defaultString
+      defaultString,
     ])} }`
   } else if (
     type.some(
       el =>
         el === 'Boolean' ||
-        ((!hasStaticDefaults || defaultString) && el === 'Function')
+        ((!hasStaticDefaults || defaultString) && el === 'Function'),
     )
   ) {
     // #4783 for boolean, should keep the type
@@ -273,9 +287,20 @@ function genRuntimePropFromType(
     // in production
     return `${finalKey}: { ${concatStrings([
       `type: ${toRuntimeTypeString(type)}`,
-      defaultString
+      defaultString,
     ])} }`
   } else {
+    // #8989 for custom element, should keep the type
+    if (ctx.isCE) {
+      if (defaultString) {
+        return `${finalKey}: ${`{ ${defaultString}, type: ${toRuntimeTypeString(
+          type,
+        )} }`}`
+      } else {
+        return `${finalKey}: {type: ${toRuntimeTypeString(type)}}`
+      }
+    }
+
     // production: checks are useless
     return `${finalKey}: ${defaultString ? `{ ${defaultString} }` : `{}`}`
   }
@@ -286,22 +311,22 @@ function genRuntimePropFromType(
  * static properties, we can directly generate more optimized default
  * declarations. Otherwise we will have to fallback to runtime merging.
  */
-function hasStaticWithDefaults(ctx: ScriptCompileContext) {
+function hasStaticWithDefaults(ctx: TypeResolveContext) {
   return !!(
     ctx.propsRuntimeDefaults &&
     ctx.propsRuntimeDefaults.type === 'ObjectExpression' &&
     ctx.propsRuntimeDefaults.properties.every(
       node =>
         node.type !== 'SpreadElement' &&
-        (!node.computed || node.key.type.endsWith('Literal'))
+        (!node.computed || node.key.type.endsWith('Literal')),
     )
   )
 }
 
 function genDestructuredDefaultValue(
-  ctx: ScriptCompileContext,
+  ctx: TypeResolveContext,
   key: string,
-  inferredType?: string[]
+  inferredType?: string[],
 ):
   | {
       valueString: string
@@ -319,7 +344,7 @@ function genDestructuredDefaultValue(
       if (valueType && !inferredType.includes(valueType)) {
         ctx.error(
           `Default value of prop "${key}" does not match declared type.`,
-          unwrapped
+          unwrapped,
         )
       }
     }
@@ -339,7 +364,7 @@ function genDestructuredDefaultValue(
 
     return {
       valueString: needFactoryWrap ? `() => (${value})` : value,
-      needSkipFactory
+      needSkipFactory,
     }
   }
 }
diff --git a/packages/compiler-sfc/src/script/definePropsDestructure.ts b/packages/compiler-sfc/src/script/definePropsDestructure.ts
index 5aa895bc7..f9a56e32e 100644
--- a/packages/compiler-sfc/src/script/definePropsDestructure.ts
+++ b/packages/compiler-sfc/src/script/definePropsDestructure.ts
@@ -1,11 +1,11 @@
-import {
-  Node,
-  Identifier,
+import type {
   BlockStatement,
+  Expression,
+  Identifier,
+  Node,
+  ObjectPattern,
   Program,
   VariableDeclaration,
-  ObjectPattern,
-  Expression
 } from '@babel/types'
 import { walk } from 'estree-walker'
 import {
@@ -15,35 +15,30 @@ import {
   isInDestructureAssignment,
   isReferencedIdentifier,
   isStaticProperty,
-  walkFunctionParams
+  unwrapTSNode,
+  walkFunctionParams,
 } from '@vue/compiler-dom'
 import { genPropsAccessExp } from '@vue/shared'
-import { isCallOf, resolveObjectKey, unwrapTSNode } from './utils'
-import { ScriptCompileContext } from './context'
+import { isCallOf, resolveObjectKey } from './utils'
+import type { ScriptCompileContext } from './context'
 import { DEFINE_PROPS } from './defineProps'
-import { warnOnce } from '../warn'
 
 export function processPropsDestructure(
   ctx: ScriptCompileContext,
-  declId: ObjectPattern
-) {
-  if (!ctx.options.propsDestructure && !ctx.options.reactivityTransform) {
+  declId: ObjectPattern,
+): void {
+  if (ctx.options.propsDestructure === 'error') {
+    ctx.error(`Props destructure is explicitly prohibited via config.`, declId)
+  } else if (ctx.options.propsDestructure === false) {
     return
   }
 
-  warnOnce(
-    `This project is using reactive props destructure, which is an experimental ` +
-      `feature. It may receive breaking changes or be removed in the future, so ` +
-      `use at your own risk.\n` +
-      `To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/502.`
-  )
-
   ctx.propsDestructureDecl = declId
 
   const registerBinding = (
     key: string,
     local: string,
-    defaultValue?: Expression
+    defaultValue?: Expression,
   ) => {
     ctx.propsDestructuredBindings[key] = { local, default: defaultValue }
     if (local !== key) {
@@ -60,7 +55,7 @@ export function processPropsDestructure(
       if (!propKey) {
         ctx.error(
           `${DEFINE_PROPS}() destructure cannot use computed key.`,
-          prop.key
+          prop.key,
         )
       }
 
@@ -70,7 +65,7 @@ export function processPropsDestructure(
         if (left.type !== 'Identifier') {
           ctx.error(
             `${DEFINE_PROPS}() destructure does not support nested patterns.`,
-            left
+            left,
           )
         }
         registerBinding(propKey, left.name, right)
@@ -80,7 +75,7 @@ export function processPropsDestructure(
       } else {
         ctx.error(
           `${DEFINE_PROPS}() destructure does not support nested patterns.`,
-          prop.value
+          prop.value,
         )
       }
     } else {
@@ -101,13 +96,13 @@ type Scope = Record<string, boolean>
 
 export function transformDestructuredProps(
   ctx: ScriptCompileContext,
-  vueImportAliases: Record<string, string>
-) {
-  if (!ctx.options.propsDestructure && !ctx.options.reactivityTransform) {
+  vueImportAliases: Record<string, string>,
+): void {
+  if (ctx.options.propsDestructure === false) {
     return
   }
 
-  const rootScope: Scope = {}
+  const rootScope: Scope = Object.create(null)
   const scopeStack: Scope[] = [rootScope]
   let currentScope: Scope = rootScope
   const excludedIds = new WeakSet<Identifier>()
@@ -136,7 +131,7 @@ export function transformDestructuredProps(
     } else {
       ctx.error(
         'registerBinding called without active scope, something is wrong.',
-        id
+        id,
       )
     }
   }
@@ -208,7 +203,7 @@ export function transformDestructuredProps(
         // { prop } -> { prop: __props.prop }
         ctx.s.appendLeft(
           id.end! + ctx.startOffset!,
-          `: ${genPropsAccessExp(propsLocalToPublicMap[id.name])}`
+          `: ${genPropsAccessExp(propsLocalToPublicMap[id.name])}`,
         )
       }
     } else {
@@ -216,7 +211,7 @@ export function transformDestructuredProps(
       ctx.s.overwrite(
         id.start! + ctx.startOffset!,
         id.end! + ctx.startOffset!,
-        genPropsAccessExp(propsLocalToPublicMap[id.name])
+        genPropsAccessExp(propsLocalToPublicMap[id.name]),
       )
     }
   }
@@ -228,7 +223,7 @@ export function transformDestructuredProps(
         ctx.error(
           `"${arg.name}" is a destructured prop and should not be passed directly to ${method}(). ` +
             `Pass a getter () => ${arg.name} instead.`,
-          arg
+          arg,
         )
       }
     }
@@ -238,7 +233,7 @@ export function transformDestructuredProps(
   const ast = ctx.scriptSetupAst!
   walkScope(ast, true)
   walk(ast, {
-    enter(node: Node, parent?: Node) {
+    enter(node: Node, parent: Node | null) {
       parent && parentStack.push(parent)
 
       // skip type nodes
@@ -247,6 +242,7 @@ export function transformDestructuredProps(
         parent.type.startsWith('TS') &&
         parent.type !== 'TSAsExpression' &&
         parent.type !== 'TSNonNullExpression' &&
+        parent.type !== 'TSSatisfiesExpression' &&
         parent.type !== 'TSTypeAssertion'
       ) {
         return this.skip()
@@ -293,7 +289,7 @@ export function transformDestructuredProps(
         }
       }
     },
-    leave(node: Node, parent?: Node) {
+    leave(node: Node, parent: Node | null) {
       parent && parentStack.pop()
       if (
         (node.type === 'BlockStatement' && !isFunctionType(parent!)) ||
@@ -301,6 +297,6 @@ export function transformDestructuredProps(
       ) {
         popScope()
       }
-    }
+    },
   })
 }
diff --git a/packages/compiler-sfc/src/script/defineSlots.ts b/packages/compiler-sfc/src/script/defineSlots.ts
index cd7dc2e48..d8f66d757 100644
--- a/packages/compiler-sfc/src/script/defineSlots.ts
+++ b/packages/compiler-sfc/src/script/defineSlots.ts
@@ -1,13 +1,13 @@
-import { LVal, Node } from '@babel/types'
+import type { LVal, Node } from '@babel/types'
 import { isCallOf } from './utils'
-import { ScriptCompileContext } from './context'
+import type { ScriptCompileContext } from './context'
 
 export const DEFINE_SLOTS = 'defineSlots'
 
 export function processDefineSlots(
   ctx: ScriptCompileContext,
   node: Node,
-  declId?: LVal
+  declId?: LVal,
 ): boolean {
   if (!isCallOf(node, DEFINE_SLOTS)) {
     return false
@@ -25,7 +25,7 @@ export function processDefineSlots(
     ctx.s.overwrite(
       ctx.startOffset! + node.start!,
       ctx.startOffset! + node.end!,
-      `${ctx.helper('useSlots')}()`
+      `${ctx.helper('useSlots')}()`,
     )
   }
 
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index 34e95f191..22ef37cf3 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -1,13 +1,11 @@
-import { parseExpression } from '@babel/parser'
-import { SFCDescriptor } from '../parse'
+import type { SFCDescriptor } from '../parse'
 import {
+  type ExpressionNode,
   NodeTypes,
-  SimpleExpressionNode,
-  createRoot,
-  forAliasRE,
+  type SimpleExpressionNode,
+  type TemplateChildNode,
   parserOptions,
-  transform,
-  walkIdentifiers
+  walkIdentifiers,
 } from '@vue/compiler-dom'
 import { createCache } from '../cache'
 import { camelize, capitalize, isBuiltInDirective } from '@vue/shared'
@@ -18,112 +16,79 @@ import { camelize, capitalize, isBuiltInDirective } from '@vue/shared'
  * when not using inline mode.
  */
 export function isImportUsed(local: string, sfc: SFCDescriptor): boolean {
-  return new RegExp(
-    // #4274 escape $ since it's a special char in regex
-    // (and is the only regex special char that is valid in identifiers)
-    `[^\\w$_]${local.replace(/\$/g, '\\$')}[^\\w$_]`
-  ).test(resolveTemplateUsageCheckString(sfc))
+  return resolveTemplateUsedIdentifiers(sfc).has(local)
 }
 
-const templateUsageCheckCache = createCache<string>()
+const templateUsageCheckCache = createCache<Set<string>>()
 
-function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
+function resolveTemplateUsedIdentifiers(sfc: SFCDescriptor): Set<string> {
   const { content, ast } = sfc.template!
   const cached = templateUsageCheckCache.get(content)
   if (cached) {
     return cached
   }
 
-  let code = ''
-  transform(createRoot([ast]), {
-    nodeTransforms: [
-      node => {
-        if (node.type === NodeTypes.ELEMENT) {
-          if (
-            !parserOptions.isNativeTag!(node.tag) &&
-            !parserOptions.isBuiltInComponent!(node.tag)
-          ) {
-            code += `,${camelize(node.tag)},${capitalize(camelize(node.tag))}`
-          }
-          for (let i = 0; i < node.props.length; i++) {
-            const prop = node.props[i]
-            if (prop.type === NodeTypes.DIRECTIVE) {
-              if (!isBuiltInDirective(prop.name)) {
-                code += `,v${capitalize(camelize(prop.name))}`
-              }
+  const ids = new Set<string>()
 
-              // process dynamic directive arguments
-              if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
-                code += `,${stripStrings(
-                  (prop.arg as SimpleExpressionNode).content
-                )}`
-              }
+  ast!.children.forEach(walk)
 
-              if (prop.exp) {
-                code += `,${processExp(
-                  (prop.exp as SimpleExpressionNode).content,
-                  prop.name
-                )}`
-              }
-            }
-            if (
-              prop.type === NodeTypes.ATTRIBUTE &&
-              prop.name === 'ref' &&
-              prop.value?.content
-            ) {
-              code += `,${prop.value.content}`
-            }
-          }
-        } else if (node.type === NodeTypes.INTERPOLATION) {
-          code += `,${processExp(
-            (node.content as SimpleExpressionNode).content
-          )}`
+  function walk(node: TemplateChildNode) {
+    switch (node.type) {
+      case NodeTypes.ELEMENT:
+        let tag = node.tag
+        if (tag.includes('.')) tag = tag.split('.')[0].trim()
+        if (
+          !parserOptions.isNativeTag!(tag) &&
+          !parserOptions.isBuiltInComponent!(tag)
+        ) {
+          ids.add(camelize(tag))
+          ids.add(capitalize(camelize(tag)))
         }
-      }
-    ]
-  })
+        for (let i = 0; i < node.props.length; i++) {
+          const prop = node.props[i]
+          if (prop.type === NodeTypes.DIRECTIVE) {
+            if (!isBuiltInDirective(prop.name)) {
+              ids.add(`v${capitalize(camelize(prop.name))}`)
+            }
 
-  code += ';'
-  templateUsageCheckCache.set(content, code)
-  return code
-}
+            // process dynamic directive arguments
+            if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
+              extractIdentifiers(ids, prop.arg)
+            }
 
-function processExp(exp: string, dir?: string): string {
-  if (/ as\s+\w|<.*>|:/.test(exp)) {
-    if (dir === 'slot') {
-      exp = `(${exp})=>{}`
-    } else if (dir === 'on') {
-      exp = `()=>{return ${exp}}`
-    } else if (dir === 'for') {
-      const inMatch = exp.match(forAliasRE)
-      if (inMatch) {
-        let [, LHS, RHS] = inMatch
-        // #6088
-        LHS = LHS.trim().replace(/^\(|\)$/g, '')
-        return processExp(`(${LHS})=>{}`) + processExp(RHS)
-      }
+            if (prop.name === 'for') {
+              extractIdentifiers(ids, prop.forParseResult!.source)
+            } else if (prop.exp) {
+              extractIdentifiers(ids, prop.exp)
+            } else if (prop.name === 'bind' && !prop.exp) {
+              // v-bind shorthand name as identifier
+              ids.add(camelize((prop.arg as SimpleExpressionNode).content))
+            }
+          }
+          if (
+            prop.type === NodeTypes.ATTRIBUTE &&
+            prop.name === 'ref' &&
+            prop.value?.content
+          ) {
+            ids.add(prop.value.content)
+          }
+        }
+        node.children.forEach(walk)
+        break
+      case NodeTypes.INTERPOLATION:
+        extractIdentifiers(ids, node.content)
+        break
     }
-    let ret = ''
-    // has potential type cast or generic arguments that uses types
-    const ast = parseExpression(exp, { plugins: ['typescript'] })
-    walkIdentifiers(ast, node => {
-      ret += `,` + node.name
-    })
-    return ret
   }
-  return stripStrings(exp)
+
+  templateUsageCheckCache.set(content, ids)
+  return ids
 }
 
-function stripStrings(exp: string) {
-  return exp
-    .replace(/'[^']*'|"[^"]*"/g, '')
-    .replace(/`[^`]+`/g, stripTemplateString)
-}
-
-function stripTemplateString(str: string): string {
-  const interpMatch = str.match(/\${[^}]+}/g)
-  if (interpMatch) {
-    return interpMatch.map(m => m.slice(2, -1)).join(',')
+function extractIdentifiers(ids: Set<string>, node: ExpressionNode) {
+  if (node.ast) {
+    walkIdentifiers(node.ast, n => ids.add(n.name))
+  } else if (node.ast === null) {
+    ids.add((node as SimpleExpressionNode).content)
   }
-  return ''
 }
diff --git a/packages/compiler-sfc/src/script/normalScript.ts b/packages/compiler-sfc/src/script/normalScript.ts
index d0f161342..7fd859290 100644
--- a/packages/compiler-sfc/src/script/normalScript.ts
+++ b/packages/compiler-sfc/src/script/normalScript.ts
@@ -1,17 +1,16 @@
-import { shouldTransform, transformAST } from '@vue/reactivity-transform'
 import { analyzeScriptBindings } from './analyzeScriptBindings'
-import { ScriptCompileContext } from './context'
+import type { ScriptCompileContext } from './context'
 import MagicString from 'magic-string'
-import { RawSourceMap } from 'source-map-js'
 import { rewriteDefaultAST } from '../rewriteDefault'
 import { genNormalScriptCssVarsCode } from '../style/cssVars'
+import type { SFCScriptBlock } from '../parse'
 
 export const normalScriptDefaultVar = `__default__`
 
 export function processNormalScript(
   ctx: ScriptCompileContext,
-  scopeId: string
-) {
+  scopeId: string,
+): SFCScriptBlock {
   const script = ctx.descriptor.script!
   if (script.lang && !ctx.isJS && !ctx.isTS) {
     // do not process non js/ts script blocks
@@ -22,33 +21,8 @@ export function processNormalScript(
     let map = script.map
     const scriptAst = ctx.scriptAst!
     const bindings = analyzeScriptBindings(scriptAst.body)
-    const { source, filename, cssVars } = ctx.descriptor
-    const { sourceMap, genDefaultAs, isProd } = ctx.options
-
-    // TODO remove in 3.4
-    if (ctx.options.reactivityTransform && shouldTransform(content)) {
-      const s = new MagicString(source)
-      const startOffset = script.loc.start.offset
-      const endOffset = script.loc.end.offset
-      const { importedHelpers } = transformAST(scriptAst, s, startOffset)
-      if (importedHelpers.length) {
-        s.prepend(
-          `import { ${importedHelpers
-            .map(h => `${h} as _${h}`)
-            .join(', ')} } from 'vue'\n`
-        )
-      }
-      s.remove(0, startOffset)
-      s.remove(endOffset, source.length)
-      content = s.toString()
-      if (sourceMap !== false) {
-        map = s.generateMap({
-          source: filename,
-          hires: true,
-          includeContent: true
-        }) as unknown as RawSourceMap
-      }
-    }
+    const { cssVars } = ctx.descriptor
+    const { genDefaultAs, isProd } = ctx.options
 
     if (cssVars.length || genDefaultAs) {
       const defaultVar = genDefaultAs || normalScriptDefaultVar
@@ -61,7 +35,7 @@ export function processNormalScript(
           bindings,
           scopeId,
           !!isProd,
-          defaultVar
+          defaultVar,
         )
       }
       if (!genDefaultAs) {
@@ -73,7 +47,7 @@ export function processNormalScript(
       content,
       map,
       bindings,
-      scriptAst: scriptAst.body
+      scriptAst: scriptAst.body,
     }
   } catch (e: any) {
     // silently fallback if parse fails since user may be using custom
diff --git a/packages/compiler-sfc/src/script/resolveType.ts b/packages/compiler-sfc/src/script/resolveType.ts
index ed6c40e72..f77247079 100644
--- a/packages/compiler-sfc/src/script/resolveType.ts
+++ b/packages/compiler-sfc/src/script/resolveType.ts
@@ -1,4 +1,4 @@
-import {
+import type {
   Expression,
   Identifier,
   Node,
@@ -22,27 +22,34 @@ import {
   TSTypeLiteral,
   TSTypeQuery,
   TSTypeReference,
-  TemplateLiteral
+  TemplateLiteral,
 } from '@babel/types'
 import {
   UNKNOWN_TYPE,
   createGetCanonicalFileName,
   getId,
   getImportedName,
+  joinPaths,
   normalizePath,
-  joinPaths
 } from './utils'
-import { ScriptCompileContext, resolveParserPlugins } from './context'
-import { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
+import { type ScriptCompileContext, resolveParserPlugins } from './context'
+import type { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
 import { capitalize, hasOwn } from '@vue/shared'
 import { parse as babelParse } from '@babel/parser'
 import { parse } from '../parse'
 import { createCache } from '../cache'
 import type TS from 'typescript'
-import { extname, dirname, join } from 'path'
+import { dirname, extname, join } from 'path'
 import { minimatch as isMatch } from 'minimatch'
 import * as process from 'process'
 
+export type SimpleTypeResolveOptions = Partial<
+  Pick<
+    SFCScriptCompileOptions,
+    'globalTypeFiles' | 'fs' | 'babelParserPlugins' | 'isProd'
+  >
+>
+
 /**
  * TypeResolveContext is compatible with ScriptCompileContext
  * but also allows a simpler version of it with minimal required properties
@@ -60,13 +67,31 @@ import * as process from 'process'
  */
 export type SimpleTypeResolveContext = Pick<
   ScriptCompileContext,
-  // required
-  'source' | 'filename' | 'error' | 'options'
+  // file
+  | 'source'
+  | 'filename'
+
+  // utils
+  | 'error'
+  | 'helper'
+  | 'getString'
+
+  // props
+  | 'propsTypeDecl'
+  | 'propsRuntimeDefaults'
+  | 'propsDestructuredBindings'
+
+  // emits
+  | 'emitsTypeDecl'
+
+  // customElement
+  | 'isCE'
 > &
   Partial<
     Pick<ScriptCompileContext, 'scope' | 'globalScopes' | 'deps' | 'fs'>
   > & {
     ast: Statement[]
+    options: SimpleTypeResolveOptions
   }
 
 export type TypeResolveContext = ScriptCompileContext | SimpleTypeResolveContext
@@ -88,9 +113,9 @@ export class TypeScope {
     public offset: number = 0,
     public imports: Record<string, Import> = Object.create(null),
     public types: Record<string, ScopeTypeNode> = Object.create(null),
-    public declares: Record<string, ScopeTypeNode> = Object.create(null)
+    public declares: Record<string, ScopeTypeNode> = Object.create(null),
   ) {}
-
+  isGenericScope = false
   resolvedImportSources: Record<string, string> = Object.create(null)
   exportedTypes: Record<string, ScopeTypeNode> = Object.create(null)
   exportedDeclares: Record<string, ScopeTypeNode> = Object.create(null)
@@ -119,37 +144,46 @@ export function resolveTypeElements(
   ctx: TypeResolveContext,
   node: Node & MaybeWithScope & { _resolvedElements?: ResolvedElements },
   scope?: TypeScope,
-  typeParameters?: Record<string, Node>
+  typeParameters?: Record<string, Node>,
 ): ResolvedElements {
-  if (node._resolvedElements) {
+  const canCache = !typeParameters
+  if (canCache && node._resolvedElements) {
     return node._resolvedElements
   }
-  return (node._resolvedElements = innerResolveTypeElements(
+  const resolved = innerResolveTypeElements(
     ctx,
     node,
     node._ownerScope || scope || ctxToScope(ctx),
-    typeParameters
-  ))
+    typeParameters,
+  )
+  return canCache ? (node._resolvedElements = resolved) : resolved
 }
 
 function innerResolveTypeElements(
   ctx: TypeResolveContext,
   node: Node,
   scope: TypeScope,
-  typeParameters?: Record<string, Node>
+  typeParameters?: Record<string, Node>,
 ): ResolvedElements {
+  if (
+    node.leadingComments &&
+    node.leadingComments.some(c => c.value.includes('@vue-ignore'))
+  ) {
+    return { props: {} }
+  }
   switch (node.type) {
     case 'TSTypeLiteral':
       return typeElementsToMap(ctx, node.members, scope, typeParameters)
     case 'TSInterfaceDeclaration':
       return resolveInterfaceMembers(ctx, node, scope, typeParameters)
     case 'TSTypeAliasDeclaration':
+    case 'TSTypeAnnotation':
     case 'TSParenthesizedType':
       return resolveTypeElements(
         ctx,
         node.typeAnnotation,
         scope,
-        typeParameters
+        typeParameters,
       )
     case 'TSFunctionType': {
       return { props: {}, calls: [node] }
@@ -158,15 +192,15 @@ function innerResolveTypeElements(
     case 'TSIntersectionType':
       return mergeElements(
         node.types.map(t => resolveTypeElements(ctx, t, scope, typeParameters)),
-        node.type
+        node.type,
       )
     case 'TSMappedType':
-      return resolveMappedType(ctx, node, scope)
+      return resolveMappedType(ctx, node, scope, typeParameters)
     case 'TSIndexedAccessType': {
       const types = resolveIndexType(ctx, node, scope)
       return mergeElements(
         types.map(t => resolveTypeElements(ctx, t, t._ownerScope)),
-        'TSUnionType'
+        'TSUnionType',
       )
     }
     case 'TSExpressionWithTypeArguments': // referenced by interface extends
@@ -183,31 +217,32 @@ function innerResolveTypeElements(
             ctx,
             node.typeParameters.params[0],
             scope,
-            typeParameters
+            typeParameters,
           ),
-          scope
+          scope,
         )
       }
       const resolved = resolveTypeReference(ctx, node, scope)
       if (resolved) {
-        const typeParams: Record<string, Node> = Object.create(null)
+        let typeParams: Record<string, Node> | undefined
         if (
           (resolved.type === 'TSTypeAliasDeclaration' ||
             resolved.type === 'TSInterfaceDeclaration') &&
           resolved.typeParameters &&
           node.typeParameters
         ) {
+          typeParams = Object.create(null)
           resolved.typeParameters.params.forEach((p, i) => {
             let param = typeParameters && typeParameters[p.name]
             if (!param) param = node.typeParameters!.params[i]
-            typeParams[p.name] = param
+            typeParams![p.name] = param
           })
         }
         return resolveTypeElements(
           ctx,
           resolved,
           resolved._ownerScope,
-          typeParams
+          typeParams,
         )
       } else {
         if (typeof typeName === 'string') {
@@ -216,11 +251,11 @@ function innerResolveTypeElements(
               ctx,
               typeParameters[typeName],
               scope,
-              typeParameters
+              typeParameters,
             )
           }
           if (
-            // @ts-ignore
+            // @ts-expect-error
             SupportedBuiltinsSet.has(typeName)
           ) {
             return resolveBuiltin(
@@ -228,14 +263,14 @@ function innerResolveTypeElements(
               node,
               typeName as any,
               scope,
-              typeParameters
+              typeParameters,
             )
           } else if (typeName === 'ReturnType' && node.typeParameters) {
             // limited support, only reference types
             const ret = resolveReturnType(
               ctx,
               node.typeParameters.params[0],
-              scope
+              scope,
             )
             if (ret) {
               return resolveTypeElements(ctx, ret, scope)
@@ -245,7 +280,7 @@ function innerResolveTypeElements(
         return ctx.error(
           `Unresolvable type reference or unsupported built-in utility type`,
           node,
-          scope
+          scope,
         )
       }
     }
@@ -258,14 +293,14 @@ function innerResolveTypeElements(
       ) {
         return resolveExtractPropTypes(
           resolveTypeElements(ctx, node.typeParameters.params[0], scope),
-          scope
+          scope,
         )
       }
       const sourceScope = importSourceToScope(
         ctx,
         node.argument,
         scope,
-        node.argument.value
+        node.argument.value,
       )
       const resolved = resolveTypeReference(ctx, node, sourceScope)
       if (resolved) {
@@ -289,7 +324,7 @@ function typeElementsToMap(
   ctx: TypeResolveContext,
   elements: TSTypeElement[],
   scope = ctxToScope(ctx),
-  typeParameters?: Record<string, Node>
+  typeParameters?: Record<string, Node>,
 ): ResolvedElements {
   const res: ResolvedElements = { props: {} }
   for (const e of elements) {
@@ -297,6 +332,7 @@ function typeElementsToMap(
       // capture generic parameters on node's scope
       if (typeParameters) {
         scope = createChildScope(scope)
+        scope.isGenericScope = true
         Object.assign(scope.types, typeParameters)
       }
       ;(e as MaybeWithScope)._ownerScope = scope
@@ -311,7 +347,7 @@ function typeElementsToMap(
         ctx.error(
           `Unsupported computed key in type referenced by a macro`,
           e.key,
-          scope
+          scope,
         )
       }
     } else if (e.type === 'TSCallSignatureDeclaration') {
@@ -323,7 +359,7 @@ function typeElementsToMap(
 
 function mergeElements(
   maps: ResolvedElements[],
-  type: 'TSUnionType' | 'TSIntersectionType'
+  type: 'TSUnionType' | 'TSIntersectionType',
 ): ResolvedElements {
   if (maps.length === 1) return maps[0]
   const res: ResolvedElements = { props: {} }
@@ -337,11 +373,11 @@ function mergeElements(
           baseProps[key].key,
           {
             type,
-            // @ts-ignore
-            types: [baseProps[key], props[key]]
+            // @ts-expect-error
+            types: [baseProps[key], props[key]],
           },
           baseProps[key]._ownerScope,
-          baseProps[key].optional || props[key].optional
+          baseProps[key].optional || props[key].optional,
         )
       }
     }
@@ -356,7 +392,7 @@ function createProperty(
   key: Expression,
   typeAnnotation: TSType,
   scope: TypeScope,
-  optional: boolean
+  optional: boolean,
 ): TSPropertySignature & WithScope {
   return {
     type: 'TSPropertySignature',
@@ -365,9 +401,9 @@ function createProperty(
     optional,
     typeAnnotation: {
       type: 'TSTypeAnnotation',
-      typeAnnotation
+      typeAnnotation,
     },
-    _ownerScope: scope
+    _ownerScope: scope,
   }
 }
 
@@ -375,22 +411,16 @@ function resolveInterfaceMembers(
   ctx: TypeResolveContext,
   node: TSInterfaceDeclaration & MaybeWithScope,
   scope: TypeScope,
-  typeParameters?: Record<string, Node>
+  typeParameters?: Record<string, Node>,
 ): ResolvedElements {
   const base = typeElementsToMap(
     ctx,
     node.body.body,
     node._ownerScope,
-    typeParameters
+    typeParameters,
   )
   if (node.extends) {
     for (const ext of node.extends) {
-      if (
-        ext.leadingComments &&
-        ext.leadingComments.some(c => c.value.includes('@vue-ignore'))
-      ) {
-        continue
-      }
       try {
         const { props, calls } = resolveTypeElements(ctx, ext, scope)
         for (const key in props) {
@@ -409,7 +439,8 @@ function resolveInterfaceMembers(
             `interface Props extends /* @vue-ignore */ Base {}\n\n` +
             `Note: both in 3.2 or with the ignore, the properties in the base ` +
             `type are treated as fallthrough attrs at runtime.`,
-          ext
+          ext,
+          scope,
         )
       }
     }
@@ -420,19 +451,28 @@ function resolveInterfaceMembers(
 function resolveMappedType(
   ctx: TypeResolveContext,
   node: TSMappedType,
-  scope: TypeScope
+  scope: TypeScope,
+  typeParameters?: Record<string, Node>,
 ): ResolvedElements {
   const res: ResolvedElements = { props: {} }
-  const keys = resolveStringType(ctx, node.typeParameter.constraint!, scope)
+  let keys: string[]
+  if (node.nameType) {
+    const { name, constraint } = node.typeParameter
+    scope = createChildScope(scope)
+    Object.assign(scope.types, { ...typeParameters, [name]: constraint })
+    keys = resolveStringType(ctx, node.nameType, scope)
+  } else {
+    keys = resolveStringType(ctx, node.typeParameter.constraint!, scope)
+  }
   for (const key of keys) {
     res.props[key] = createProperty(
       {
         type: 'Identifier',
-        name: key
+        name: key,
       },
       node.typeAnnotation!,
       scope,
-      !!node.optional
+      !!node.optional,
     )
   }
   return res
@@ -441,7 +481,7 @@ function resolveMappedType(
 function resolveIndexType(
   ctx: TypeResolveContext,
   node: TSIndexedAccessType,
-  scope: TypeScope
+  scope: TypeScope,
 ): (TSType & MaybeWithScope)[] {
   if (node.indexType.type === 'TSNumberKeyword') {
     return resolveArrayElementType(ctx, node.objectType, scope)
@@ -472,7 +512,7 @@ function resolveIndexType(
 function resolveArrayElementType(
   ctx: TypeResolveContext,
   node: Node,
-  scope: TypeScope
+  scope: TypeScope,
 ): TSType[] {
   // type[]
   if (node.type === 'TSArrayType') {
@@ -481,7 +521,7 @@ function resolveArrayElementType(
   // tuple
   if (node.type === 'TSTupleType') {
     return node.elementTypes.map(t =>
-      t.type === 'TSNamedTupleMember' ? t.elementType : t
+      t.type === 'TSNamedTupleMember' ? t.elementType : t,
     )
   }
   if (node.type === 'TSTypeReference') {
@@ -498,14 +538,14 @@ function resolveArrayElementType(
   return ctx.error(
     'Failed to resolve element type from target type',
     node,
-    scope
+    scope,
   )
 }
 
 function resolveStringType(
   ctx: TypeResolveContext,
   node: Node,
-  scope: TypeScope
+  scope: TypeScope,
 ): string[] {
   switch (node.type) {
     case 'StringLiteral':
@@ -544,7 +584,7 @@ function resolveStringType(
             ctx.error(
               'Unsupported type when resolving index type',
               node.typeName,
-              scope
+              scope,
             )
         }
       }
@@ -556,7 +596,7 @@ function resolveStringType(
 function resolveTemplateKeys(
   ctx: TypeResolveContext,
   node: TemplateLiteral,
-  scope: TypeScope
+  scope: TypeScope,
 ): string[] {
   if (!node.expressions.length) {
     return [node.quasis[0].value.raw]
@@ -572,9 +612,9 @@ function resolveTemplateKeys(
     {
       ...node,
       expressions: node.expressions.slice(1),
-      quasis: q ? node.quasis.slice(1) : node.quasis
+      quasis: q ? node.quasis.slice(1) : node.quasis,
     },
-    scope
+    scope,
   )
 
   for (const r of resolved) {
@@ -591,7 +631,7 @@ const SupportedBuiltinsSet = new Set([
   'Required',
   'Readonly',
   'Pick',
-  'Omit'
+  'Omit',
 ] as const)
 
 type GetSetType<T> = T extends Set<infer V> ? V : never
@@ -601,13 +641,13 @@ function resolveBuiltin(
   node: TSTypeReference | TSExpressionWithTypeArguments,
   name: GetSetType<typeof SupportedBuiltinsSet>,
   scope: TypeScope,
-  typeParameters?: Record<string, Node>
+  typeParameters?: Record<string, Node>,
 ): ResolvedElements {
   const t = resolveTypeElements(
     ctx,
     node.typeParameters!.params[0],
     scope,
-    typeParameters
+    typeParameters,
   )
   switch (name) {
     case 'Partial': {
@@ -630,7 +670,7 @@ function resolveBuiltin(
       const picked = resolveStringType(
         ctx,
         node.typeParameters!.params[1],
-        scope
+        scope,
       )
       const res: ResolvedElements = { props: {}, calls: t.calls }
       for (const key of picked) {
@@ -642,7 +682,7 @@ function resolveBuiltin(
       const omitted = resolveStringType(
         ctx,
         node.typeParameters!.params[1],
-        scope
+        scope,
       )
       const res: ResolvedElements = { props: {}, calls: t.calls }
       for (const key in t.props) {
@@ -668,18 +708,20 @@ export function resolveTypeReference(
   },
   scope?: TypeScope,
   name?: string,
-  onlyExported = false
+  onlyExported = false,
 ): ScopeTypeNode | undefined {
-  if (node._resolvedReference) {
+  const canCache = !scope?.isGenericScope
+  if (canCache && node._resolvedReference) {
     return node._resolvedReference
   }
-  return (node._resolvedReference = innerResolveTypeReference(
+  const resolved = innerResolveTypeReference(
     ctx,
     scope || ctxToScope(ctx),
     name || getReferenceName(node),
     node,
-    onlyExported
-  ))
+    onlyExported,
+  )
+  return canCache ? (node._resolvedReference = resolved) : resolved
 }
 
 function innerResolveTypeReference(
@@ -687,7 +729,7 @@ function innerResolveTypeReference(
   scope: TypeScope,
   name: string | string[],
   node: ReferenceTypes,
-  onlyExported: boolean
+  onlyExported: boolean,
 ): ScopeTypeNode | undefined {
   if (typeof name === 'string') {
     if (scope.imports[name]) {
@@ -787,7 +829,7 @@ function resolveGlobalScope(ctx: TypeResolveContext): TypeScope[] | undefined {
       throw new Error('[vue/compiler-sfc] globalTypeFiles requires fs access.')
     }
     return ctx.options.globalTypeFiles.map(file =>
-      fileToScope(ctx, normalizePath(file), true)
+      fileToScope(ctx, normalizePath(file), true),
     )
   }
 }
@@ -798,7 +840,7 @@ let loadTS: (() => typeof TS) | undefined
 /**
  * @private
  */
-export function registerTS(_loadTS: () => typeof TS) {
+export function registerTS(_loadTS: () => typeof TS): void {
   loadTS = () => {
     try {
       return _loadTS()
@@ -809,11 +851,11 @@ export function registerTS(_loadTS: () => typeof TS) {
       ) {
         throw new Error(
           'Failed to load TypeScript, which is required for resolving imported types. ' +
-            'Please make sure "typescript" is installed as a project dependency.'
+            'Please make sure "typescript" is installed as a project dependency.',
         )
       } else {
         throw new Error(
-          'Failed to load TypeScript for resolving imported types.'
+          'Failed to load TypeScript for resolving imported types.',
         )
       }
     }
@@ -845,7 +887,8 @@ function resolveFS(ctx: TypeResolveContext): FS | undefined {
         file = file.replace(/\.ts$/, '')
       }
       return fs.readFile(file)
-    }
+    },
+    realpath: fs.realpath,
   })
 }
 
@@ -853,7 +896,7 @@ function resolveTypeFromImport(
   ctx: TypeResolveContext,
   node: ReferenceTypes,
   name: string,
-  scope: TypeScope
+  scope: TypeScope,
 ): ScopeTypeNode | undefined {
   const { source, imported } = scope.imports[name]
   const sourceScope = importSourceToScope(ctx, node, scope, source)
@@ -864,7 +907,7 @@ function importSourceToScope(
   ctx: TypeResolveContext,
   node: Node,
   scope: TypeScope,
-  source: string
+  source: string,
 ): TypeScope {
   let fs: FS | undefined
   try {
@@ -877,7 +920,7 @@ function importSourceToScope(
       `No fs option provided to \`compileScript\` in non-Node environment. ` +
         `File system access is required for resolving imported types.`,
       node,
-      scope
+      scope,
     )
   }
 
@@ -888,17 +931,17 @@ function importSourceToScope(
 
       const filename = osSpecificJoinFn(dirname(scope.filename), source)
       resolved = resolveExt(filename, fs)
-    } else if (source.startsWith('.')) {
+    } else if (source[0] === '.') {
       // relative import - fast path
       const filename = joinPaths(dirname(scope.filename), source)
       resolved = resolveExt(filename, fs)
     } else {
       // module or aliased import - use full TS resolution, only supported in Node
-      if (!__NODE_JS__) {
+      if (!__CJS__) {
         return ctx.error(
           `Type import from non-relative sources is not supported in the browser build.`,
           node,
-          scope
+          scope,
         )
       }
       if (!ts) {
@@ -909,7 +952,7 @@ function importSourceToScope(
               `typescript is required as a peer dep for vue in order ` +
               `to support resolving types from module imports.`,
             node,
-            scope
+            scope,
           )
         }
       }
@@ -927,7 +970,7 @@ function importSourceToScope(
     return ctx.error(
       `Failed to resolve import source ${JSON.stringify(source)}.`,
       node,
-      scope
+      scope,
     )
   }
 }
@@ -941,8 +984,10 @@ function resolveExt(filename: string, fs: FS) {
   return (
     tryResolve(filename) ||
     tryResolve(filename + `.ts`) ||
+    tryResolve(filename + `.tsx`) ||
     tryResolve(filename + `.d.ts`) ||
     tryResolve(joinPaths(filename, `index.ts`)) ||
+    tryResolve(joinPaths(filename, `index.tsx`)) ||
     tryResolve(joinPaths(filename, `index.d.ts`))
   )
 }
@@ -959,9 +1004,9 @@ function resolveWithTS(
   containingFile: string,
   source: string,
   ts: typeof TS,
-  fs: FS
+  fs: FS,
 ): string | undefined {
-  if (!__NODE_JS__) return
+  if (!__CJS__) return
 
   // 1. resolve tsconfig.json
   const configPath = ts.findConfigFile(containingFile, fs.fileExists)
@@ -986,13 +1031,13 @@ function resolveWithTS(
       for (const c of configs) {
         const base = normalizePath(
           (c.config.options.pathsBasePath as string) ||
-            dirname(c.config.options.configFilePath as string)
+            dirname(c.config.options.configFilePath as string),
         )
-        const included: string[] = c.config.raw?.include
-        const excluded: string[] = c.config.raw?.exclude
+        const included: string[] | undefined = c.config.raw?.include
+        const excluded: string[] | undefined = c.config.raw?.exclude
         if (
           (!included && (!base || containingFile.startsWith(base))) ||
-          included.some(p => isMatch(containingFile, joinPaths(base, p)))
+          included?.some(p => isMatch(containingFile, joinPaths(base, p)))
         ) {
           if (
             excluded &&
@@ -1014,7 +1059,7 @@ function resolveWithTS(
       (matchedConfig.cache = ts.createModuleResolutionCache(
         process.cwd(),
         createGetCanonicalFileName(ts.sys.useCaseSensitiveFileNames),
-        tsCompilerOptions
+        tsCompilerOptions,
       ))
   } else {
     tsCompilerOptions = {}
@@ -1026,7 +1071,7 @@ function resolveWithTS(
     containingFile,
     tsCompilerOptions,
     fs,
-    tsResolveCache
+    tsResolveCache,
   )
 
   if (res.resolvedModule) {
@@ -1034,14 +1079,15 @@ function resolveWithTS(
     if (filename.endsWith('.vue.ts')) {
       filename = filename.replace(/\.ts$/, '')
     }
-    return filename
+    return fs.realpath ? fs.realpath(filename) : filename
   }
 }
 
 function loadTSConfig(
   configPath: string,
   ts: typeof TS,
-  fs: FS
+  fs: FS,
+  visited = new Set<string>(),
 ): TS.ParsedCommandLine[] {
   // The only case where `fs` is NOT `ts.sys` is during tests.
   // parse config host requires an extra `readDirectory` method
@@ -1050,7 +1096,7 @@ function loadTSConfig(
     ? {
         ...fs,
         useCaseSensitiveFileNames: true,
-        readDirectory: () => []
+        readDirectory: () => [],
       }
     : ts.sys
   const config = ts.parseJsonConfigFileContent(
@@ -1058,13 +1104,18 @@ function loadTSConfig(
     parseConfigHost,
     dirname(configPath),
     undefined,
-    configPath
+    configPath,
   )
   const res = [config]
+  visited.add(configPath)
   if (config.projectReferences) {
     for (const ref of config.projectReferences) {
-      tsConfigRefMap.set(ref.path, configPath)
-      res.unshift(...loadTSConfig(ref.path, ts, fs))
+      const refPath = ts.resolveProjectReferencePath(ref)
+      if (visited.has(refPath) || !fs.fileExists(refPath)) {
+        continue
+      }
+      tsConfigRefMap.set(refPath, configPath)
+      res.unshift(...loadTSConfig(refPath, ts, fs, visited))
     }
   }
   return res
@@ -1075,7 +1126,7 @@ const fileToScopeCache = createCache<TypeScope>()
 /**
  * @private
  */
-export function invalidateTypeCache(filename: string) {
+export function invalidateTypeCache(filename: string): void {
   filename = normalizePath(filename)
   fileToScopeCache.delete(filename)
   tsConfigCache.delete(filename)
@@ -1086,7 +1137,7 @@ export function invalidateTypeCache(filename: string) {
 export function fileToScope(
   ctx: TypeResolveContext,
   filename: string,
-  asGlobal = false
+  asGlobal = false,
 ): TypeScope {
   const cached = fileToScopeCache.get(filename)
   if (cached) {
@@ -1105,21 +1156,21 @@ export function fileToScope(
 function parseFile(
   filename: string,
   content: string,
-  parserPlugins?: SFCScriptCompileOptions['babelParserPlugins']
+  parserPlugins?: SFCScriptCompileOptions['babelParserPlugins'],
 ): Statement[] {
   const ext = extname(filename)
-  if (ext === '.ts' || ext === '.tsx') {
+  if (ext === '.ts' || ext === '.mts' || ext === '.tsx' || ext === '.mtsx') {
     return babelParse(content, {
       plugins: resolveParserPlugins(
         ext.slice(1),
         parserPlugins,
-        filename.endsWith('.d.ts')
+        /\.d\.m?ts$/.test(filename),
       ),
-      sourceType: 'module'
+      sourceType: 'module',
     }).program.body
   } else if (ext === '.vue') {
     const {
-      descriptor: { script, scriptSetup }
+      descriptor: { script, scriptSetup },
     } = parse(content)
     if (!script && !scriptSetup) {
       return []
@@ -1144,7 +1195,7 @@ function parseFile(
     const lang = script?.lang || scriptSetup?.lang
     return babelParse(scriptContent, {
       plugins: resolveParserPlugins(lang!, parserPlugins),
-      sourceType: 'module'
+      sourceType: 'module',
     }).program.body
   }
   return []
@@ -1166,7 +1217,7 @@ function ctxToScope(ctx: TypeResolveContext): TypeScope {
     ctx.filename,
     ctx.source,
     'startOffset' in ctx ? ctx.startOffset! : 0,
-    'userImports' in ctx ? Object.create(ctx.userImports) : recordImports(body)
+    'userImports' in ctx ? Object.create(ctx.userImports) : recordImports(body),
   )
 
   recordTypes(ctx, body, scope)
@@ -1177,7 +1228,7 @@ function ctxToScope(ctx: TypeResolveContext): TypeScope {
 function moduleDeclToScope(
   ctx: TypeResolveContext,
   node: TSModuleDeclaration & { _resolvedChildScope?: TypeScope },
-  parentScope: TypeScope
+  parentScope: TypeScope,
 ): TypeScope {
   if (node._resolvedChildScope) {
     return node._resolvedChildScope
@@ -1204,7 +1255,7 @@ function createChildScope(parentScope: TypeScope) {
     parentScope.offset,
     Object.create(parentScope.imports),
     Object.create(parentScope.types),
-    Object.create(parentScope.declares)
+    Object.create(parentScope.declares),
   )
 }
 
@@ -1214,7 +1265,7 @@ function recordTypes(
   ctx: TypeResolveContext,
   body: Statement[],
   scope: TypeScope,
-  asGlobal = false
+  asGlobal = false,
 ) {
   const { types, declares, exportedTypes, exportedDeclares, imports } = scope
   const isAmbient = asGlobal
@@ -1250,15 +1301,15 @@ function recordTypes(
                 // re-export, register an import + export as a type reference
                 imports[exported] = {
                   source: stmt.source.value,
-                  imported: local
+                  imported: local,
                 }
                 exportedTypes[exported] = {
                   type: 'TSTypeReference',
                   typeName: {
                     type: 'Identifier',
-                    name: local
+                    name: local,
                   },
-                  _ownerScope: scope
+                  _ownerScope: scope,
                 }
               } else if (types[local]) {
                 // exporting local defined type
@@ -1272,7 +1323,7 @@ function recordTypes(
           ctx,
           stmt.source,
           scope,
-          stmt.source.value
+          stmt.source.value,
         )
         Object.assign(scope.exportedTypes, sourceScope.exportedTypes)
       } else if (stmt.type === 'ExportDefaultDeclaration' && stmt.declaration) {
@@ -1282,7 +1333,7 @@ function recordTypes(
             stmt.declaration,
             exportedTypes,
             exportedDeclares,
-            'default'
+            'default',
           )
         } else if (types[stmt.declaration.name]) {
           exportedTypes['default'] = types[stmt.declaration.name]
@@ -1304,7 +1355,7 @@ function recordType(
   node: Node,
   types: Record<string, Node>,
   declares: Record<string, Node>,
-  overwriteId?: string
+  overwriteId?: string,
 ) {
   switch (node.type) {
     case 'TSInterfaceDeclaration':
@@ -1379,7 +1430,7 @@ function mergeNamespaces(to: TSModuleDeclaration, from: TSModuleDeclaration) {
         type: 'ExportNamedDeclaration',
         declaration: toBody,
         exportKind: 'type',
-        specifiers: []
+        specifiers: [],
       })
     }
   } else if (fromBody.type === 'TSModuleDeclaration') {
@@ -1388,7 +1439,7 @@ function mergeNamespaces(to: TSModuleDeclaration, from: TSModuleDeclaration) {
       type: 'ExportNamedDeclaration',
       declaration: fromBody,
       exportKind: 'type',
-      specifiers: []
+      specifiers: [],
     })
   } else {
     // both block
@@ -1398,7 +1449,7 @@ function mergeNamespaces(to: TSModuleDeclaration, from: TSModuleDeclaration) {
 
 function attachNamespace(
   to: Node & { _ns?: TSModuleDeclaration },
-  ns: TSModuleDeclaration
+  ns: TSModuleDeclaration,
 ) {
   if (!to._ns) {
     to._ns = ns
@@ -1407,7 +1458,7 @@ function attachNamespace(
   }
 }
 
-export function recordImports(body: Statement[]) {
+export function recordImports(body: Statement[]): Record<string, Import> {
   const imports: TypeScope['imports'] = Object.create(null)
   for (const s of body) {
     recordImport(s, imports)
@@ -1422,7 +1473,7 @@ function recordImport(node: Node, imports: TypeScope['imports']) {
   for (const s of node.specifiers) {
     imports[s.local.name] = {
       imported: getImportedName(s),
-      source: node.source.value
+      source: node.source.value,
     }
   }
 }
@@ -1430,7 +1481,8 @@ function recordImport(node: Node, imports: TypeScope['imports']) {
 export function inferRuntimeType(
   ctx: TypeResolveContext,
   node: Node & MaybeWithScope,
-  scope = node._ownerScope || ctxToScope(ctx)
+  scope: TypeScope = node._ownerScope || ctxToScope(ctx),
+  isKeyOf = false,
 ): string[] {
   try {
     switch (node.type) {
@@ -1450,8 +1502,29 @@ export function inferRuntimeType(
         const types = new Set<string>()
         const members =
           node.type === 'TSTypeLiteral' ? node.members : node.body.body
+
         for (const m of members) {
-          if (
+          if (isKeyOf) {
+            if (
+              m.type === 'TSPropertySignature' &&
+              m.key.type === 'NumericLiteral'
+            ) {
+              types.add('Number')
+            } else if (m.type === 'TSIndexSignature') {
+              const annotation = m.parameters[0].typeAnnotation
+              if (annotation && annotation.type !== 'Noop') {
+                const type = inferRuntimeType(
+                  ctx,
+                  annotation.typeAnnotation,
+                  scope,
+                )[0]
+                if (type === UNKNOWN_TYPE) return [UNKNOWN_TYPE]
+                types.add(type)
+              }
+            } else {
+              types.add('String')
+            }
+          } else if (
             m.type === 'TSCallSignatureDeclaration' ||
             m.type === 'TSConstructSignatureDeclaration'
           ) {
@@ -1460,16 +1533,20 @@ export function inferRuntimeType(
             types.add('Object')
           }
         }
-        return types.size ? Array.from(types) : ['Object']
+
+        return types.size
+          ? Array.from(types)
+          : [isKeyOf ? UNKNOWN_TYPE : 'Object']
       }
       case 'TSPropertySignature':
         if (node.typeAnnotation) {
           return inferRuntimeType(
             ctx,
             node.typeAnnotation.typeAnnotation,
-            scope
+            scope,
           )
         }
+        break
       case 'TSMethodSignature':
       case 'TSFunctionType':
         return ['Function']
@@ -1494,71 +1571,132 @@ export function inferRuntimeType(
       case 'TSTypeReference': {
         const resolved = resolveTypeReference(ctx, node, scope)
         if (resolved) {
-          return inferRuntimeType(ctx, resolved, resolved._ownerScope)
+          return inferRuntimeType(ctx, resolved, resolved._ownerScope, isKeyOf)
         }
+
         if (node.typeName.type === 'Identifier') {
-          switch (node.typeName.name) {
-            case 'Array':
-            case 'Function':
-            case 'Object':
-            case 'Set':
-            case 'Map':
-            case 'WeakSet':
-            case 'WeakMap':
-            case 'Date':
-            case 'Promise':
-            case 'Error':
-              return [node.typeName.name]
+          if (isKeyOf) {
+            switch (node.typeName.name) {
+              case 'String':
+              case 'Array':
+              case 'ArrayLike':
+              case 'Parameters':
+              case 'ConstructorParameters':
+              case 'ReadonlyArray':
+                return ['String', 'Number']
 
-            // TS built-in utility types
-            // https://www.typescriptlang.org/docs/handbook/utility-types.html
-            case 'Partial':
-            case 'Required':
-            case 'Readonly':
-            case 'Record':
-            case 'Pick':
-            case 'Omit':
-            case 'InstanceType':
-              return ['Object']
+              // TS built-in utility types
+              case 'Record':
+              case 'Partial':
+              case 'Required':
+              case 'Readonly':
+                if (node.typeParameters && node.typeParameters.params[0]) {
+                  return inferRuntimeType(
+                    ctx,
+                    node.typeParameters.params[0],
+                    scope,
+                    true,
+                  )
+                }
+                break
+              case 'Pick':
+              case 'Extract':
+                if (node.typeParameters && node.typeParameters.params[1]) {
+                  return inferRuntimeType(
+                    ctx,
+                    node.typeParameters.params[1],
+                    scope,
+                  )
+                }
+                break
 
-            case 'Uppercase':
-            case 'Lowercase':
-            case 'Capitalize':
-            case 'Uncapitalize':
-              return ['String']
+              case 'Function':
+              case 'Object':
+              case 'Set':
+              case 'Map':
+              case 'WeakSet':
+              case 'WeakMap':
+              case 'Date':
+              case 'Promise':
+              case 'Error':
+              case 'Uppercase':
+              case 'Lowercase':
+              case 'Capitalize':
+              case 'Uncapitalize':
+              case 'ReadonlyMap':
+              case 'ReadonlySet':
+                return ['String']
+            }
+          } else {
+            switch (node.typeName.name) {
+              case 'Array':
+              case 'Function':
+              case 'Object':
+              case 'Set':
+              case 'Map':
+              case 'WeakSet':
+              case 'WeakMap':
+              case 'Date':
+              case 'Promise':
+              case 'Error':
+                return [node.typeName.name]
 
-            case 'Parameters':
-            case 'ConstructorParameters':
-              return ['Array']
+              // TS built-in utility types
+              // https://www.typescriptlang.org/docs/handbook/utility-types.html
+              case 'Partial':
+              case 'Required':
+              case 'Readonly':
+              case 'Record':
+              case 'Pick':
+              case 'Omit':
+              case 'InstanceType':
+                return ['Object']
 
-            case 'NonNullable':
-              if (node.typeParameters && node.typeParameters.params[0]) {
-                return inferRuntimeType(
-                  ctx,
-                  node.typeParameters.params[0],
-                  scope
-                ).filter(t => t !== 'null')
-              }
-              break
-            case 'Extract':
-              if (node.typeParameters && node.typeParameters.params[1]) {
-                return inferRuntimeType(
-                  ctx,
-                  node.typeParameters.params[1],
-                  scope
-                )
-              }
-              break
-            case 'Exclude':
-            case 'OmitThisParameter':
-              if (node.typeParameters && node.typeParameters.params[0]) {
-                return inferRuntimeType(
-                  ctx,
-                  node.typeParameters.params[0],
-                  scope
-                )
-              }
-              break
+              case 'Uppercase':
+              case 'Lowercase':
+              case 'Capitalize':
+              case 'Uncapitalize':
+                return ['String']
+
+              case 'Parameters':
+              case 'ConstructorParameters':
+              case 'ReadonlyArray':
+                return ['Array']
+
+              case 'ReadonlyMap':
+                return ['Map']
+              case 'ReadonlySet':
+                return ['Set']
+
+              case 'NonNullable':
+                if (node.typeParameters && node.typeParameters.params[0]) {
+                  return inferRuntimeType(
+                    ctx,
+                    node.typeParameters.params[0],
+                    scope,
+                  ).filter(t => t !== 'null')
+                }
+                break
+              case 'Extract':
+                if (node.typeParameters && node.typeParameters.params[1]) {
+                  return inferRuntimeType(
+                    ctx,
+                    node.typeParameters.params[1],
+                    scope,
+                  )
+                }
+                break
+              case 'Exclude':
+              case 'OmitThisParameter':
+                if (node.typeParameters && node.typeParameters.params[0]) {
+                  return inferRuntimeType(
+                    ctx,
+                    node.typeParameters.params[0],
+                    scope,
+                  )
+                }
+                break
+            }
           }
         }
         // cannot infer, fallback to UNKNOWN: ThisParameterType
@@ -1569,10 +1707,10 @@ export function inferRuntimeType(
         return inferRuntimeType(ctx, node.typeAnnotation, scope)
 
       case 'TSUnionType':
-        return flattenTypes(ctx, node.types, scope)
+        return flattenTypes(ctx, node.types, scope, isKeyOf)
       case 'TSIntersectionType': {
-        return flattenTypes(ctx, node.types, scope).filter(
-          t => t !== UNKNOWN_TYPE
+        return flattenTypes(ctx, node.types, scope, isKeyOf).filter(
+          t => t !== UNKNOWN_TYPE,
         )
       }
 
@@ -1584,7 +1722,7 @@ export function inferRuntimeType(
 
       case 'TSIndexedAccessType': {
         const types = resolveIndexType(ctx, node, scope)
-        return flattenTypes(ctx, types, scope)
+        return flattenTypes(ctx, types, scope, isKeyOf)
       }
 
       case 'ClassDeclaration':
@@ -1595,7 +1733,7 @@ export function inferRuntimeType(
           ctx,
           node.argument,
           scope,
-          node.argument.value
+          node.argument.value,
         )
         const resolved = resolveTypeReference(ctx, node, sourceScope)
         if (resolved) {
@@ -1610,11 +1748,28 @@ export function inferRuntimeType(
           // typeof only support identifier in local scope
           const matched = scope.declares[id.name]
           if (matched) {
-            return inferRuntimeType(ctx, matched, matched._ownerScope)
+            return inferRuntimeType(ctx, matched, matched._ownerScope, isKeyOf)
           }
         }
         break
       }
+
+      // e.g. readonly
+      case 'TSTypeOperator': {
+        return inferRuntimeType(
+          ctx,
+          node.typeAnnotation,
+          scope,
+          node.operator === 'keyof',
+        )
+      }
+
+      case 'TSAnyKeyword': {
+        if (isKeyOf) {
+          return ['String', 'Number', 'Symbol']
+        }
+        break
+      }
     }
   } catch (e) {
     // always soft fail on failed runtime type inference
@@ -1625,17 +1780,18 @@ export function inferRuntimeType(
 function flattenTypes(
   ctx: TypeResolveContext,
   types: TSType[],
-  scope: TypeScope
+  scope: TypeScope,
+  isKeyOf: boolean = false,
 ): string[] {
   if (types.length === 1) {
-    return inferRuntimeType(ctx, types[0], scope)
+    return inferRuntimeType(ctx, types[0], scope, isKeyOf)
   }
   return [
     ...new Set(
       ([] as string[]).concat(
-        ...types.map(t => inferRuntimeType(ctx, t, scope))
-      )
-    )
+        ...types.map(t => inferRuntimeType(ctx, t, scope, isKeyOf)),
+      ),
+    ),
   ]
 }
 
@@ -1662,7 +1818,7 @@ function inferEnumType(node: TSEnumDeclaration): string[] {
  */
 function resolveExtractPropTypes(
   { props }: ResolvedElements,
-  scope: TypeScope
+  scope: TypeScope,
 ): ResolvedElements {
   const res: ResolvedElements = { props: {} }
   for (const key in props) {
@@ -1670,7 +1826,7 @@ function resolveExtractPropTypes(
     res.props[key] = reverseInferType(
       raw.key,
       raw.typeAnnotation!.typeAnnotation,
-      scope
+      scope,
     )
   }
   return res
@@ -1681,7 +1837,7 @@ function reverseInferType(
   node: TSType,
   scope: TypeScope,
   optional = true,
-  checkObjectSyntax = true
+  checkObjectSyntax = true,
 ): TSPropertySignature & WithScope {
   if (checkObjectSyntax && node.type === 'TSTypeLiteral') {
     // check { type: xxx }
@@ -1705,7 +1861,7 @@ function reverseInferType(
         key,
         ctorToType(node.typeName.name),
         scope,
-        optional
+        optional,
       )
     } else if (node.typeName.name === 'PropType' && node.typeParameters) {
       // PropType<{}>
@@ -1743,7 +1899,7 @@ function ctorToType(ctorType: string): TSType {
     case 'Promise':
       return {
         type: 'TSTypeReference',
-        typeName: { type: 'Identifier', name: ctor }
+        typeName: { type: 'Identifier', name: ctor },
       }
   }
   // fallback to null
@@ -1756,7 +1912,7 @@ function findStaticPropertyType(node: TSTypeLiteral, key: string) {
       m.type === 'TSPropertySignature' &&
       !m.computed &&
       getId(m.key) === key &&
-      m.typeAnnotation
+      m.typeAnnotation,
   )
   return prop && prop.typeAnnotation!.typeAnnotation
 }
@@ -1764,7 +1920,7 @@ function findStaticPropertyType(node: TSTypeLiteral, key: string) {
 function resolveReturnType(
   ctx: TypeResolveContext,
   arg: Node,
-  scope: TypeScope
+  scope: TypeScope,
 ) {
   let resolved: Node | undefined = arg
   if (
@@ -1786,7 +1942,7 @@ function resolveReturnType(
 export function resolveUnionType(
   ctx: TypeResolveContext,
   node: Node & MaybeWithScope & { _resolvedElements?: ResolvedElements },
-  scope?: TypeScope
+  scope?: TypeScope,
 ): Node[] {
   if (node.type === 'TSTypeReference') {
     const resolved = resolveTypeReference(ctx, node, scope)
diff --git a/packages/compiler-sfc/src/script/topLevelAwait.ts b/packages/compiler-sfc/src/script/topLevelAwait.ts
index 26534ee95..c0e00e615 100644
--- a/packages/compiler-sfc/src/script/topLevelAwait.ts
+++ b/packages/compiler-sfc/src/script/topLevelAwait.ts
@@ -1,5 +1,5 @@
-import { AwaitExpression } from '@babel/types'
-import { ScriptCompileContext } from './context'
+import type { AwaitExpression } from '@babel/types'
+import type { ScriptCompileContext } from './context'
 
 /**
  * Support context-persistence between top-level await expressions:
@@ -38,8 +38,8 @@ export function processAwait(
   ctx: ScriptCompileContext,
   node: AwaitExpression,
   needSemi: boolean,
-  isStatement: boolean
-) {
+  isStatement: boolean,
+): void {
   const argumentStart =
     node.argument.extra && node.argument.extra.parenthesized
       ? (node.argument.extra.parenStart as number)
@@ -48,7 +48,7 @@ export function processAwait(
   const startOffset = ctx.startOffset!
   const argumentStr = ctx.descriptor.source.slice(
     argumentStart + startOffset,
-    node.argument.end! + startOffset
+    node.argument.end! + startOffset,
   )
 
   const containsNestedAwait = /\bawait\b/.test(argumentStr)
@@ -57,13 +57,13 @@ export function processAwait(
     node.start! + startOffset,
     argumentStart + startOffset,
     `${needSemi ? `;` : ``}(\n  ([__temp,__restore] = ${ctx.helper(
-      `withAsyncContext`
-    )}(${containsNestedAwait ? `async ` : ``}() => `
+      `withAsyncContext`,
+    )}(${containsNestedAwait ? `async ` : ``}() => `,
   )
   ctx.s.appendLeft(
     node.end! + startOffset,
     `)),\n  ${isStatement ? `` : `__temp = `}await __temp,\n  __restore()${
       isStatement ? `` : `,\n  __temp`
-    }\n)`
+    }\n)`,
   )
 }
diff --git a/packages/compiler-sfc/src/script/utils.ts b/packages/compiler-sfc/src/script/utils.ts
index bc621d258..39f163c6b 100644
--- a/packages/compiler-sfc/src/script/utils.ts
+++ b/packages/compiler-sfc/src/script/utils.ts
@@ -1,4 +1,4 @@
-import {
+import type {
   CallExpression,
   Expression,
   Identifier,
@@ -6,14 +6,16 @@ import {
   ImportNamespaceSpecifier,
   ImportSpecifier,
   Node,
-  StringLiteral
+  StringLiteral,
 } from '@babel/types'
 import path from 'path'
-import { TS_NODE_TYPES } from '@vue/compiler-dom'
 
 export const UNKNOWN_TYPE = 'Unknown'
 
-export function resolveObjectKey(node: Node, computed: boolean) {
+export function resolveObjectKey(
+  node: Node,
+  computed: boolean,
+): string | undefined {
   switch (node.type) {
     case 'StringLiteral':
     case 'NumericLiteral':
@@ -24,25 +26,19 @@ export function resolveObjectKey(node: Node, computed: boolean) {
   return undefined
 }
 
-export function concatStrings(strs: Array<string | null | undefined | false>) {
+export function concatStrings(
+  strs: Array<string | null | undefined | false>,
+): string {
   return strs.filter((s): s is string => !!s).join(', ')
 }
 
-export function isLiteralNode(node: Node) {
+export function isLiteralNode(node: Node): boolean {
   return node.type.endsWith('Literal')
 }
 
-export function unwrapTSNode(node: Node): Node {
-  if (TS_NODE_TYPES.includes(node.type)) {
-    return unwrapTSNode((node as any).expression)
-  } else {
-    return node
-  }
-}
-
 export function isCallOf(
   node: Node | null | undefined,
-  test: string | ((id: string) => boolean) | null | undefined
+  test: string | ((id: string) => boolean) | null | undefined,
 ): node is CallExpression {
   return !!(
     node &&
@@ -55,13 +51,16 @@ export function isCallOf(
   )
 }
 
-export function toRuntimeTypeString(types: string[]) {
+export function toRuntimeTypeString(types: string[]): string {
   return types.length > 1 ? `[${types.join(', ')}]` : types[0]
 }
 
 export function getImportedName(
-  specifier: ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier
-) {
+  specifier:
+    | ImportSpecifier
+    | ImportDefaultSpecifier
+    | ImportNamespaceSpecifier,
+): string {
   if (specifier.type === 'ImportSpecifier')
     return specifier.imported.type === 'Identifier'
       ? specifier.imported.name
@@ -95,7 +94,9 @@ function toFileNameLowerCase(x: string) {
  * but TS does not expose it directly. This implementation is repllicated from
  * the TS source code.
  */
-export function createGetCanonicalFileName(useCaseSensitiveFileNames: boolean) {
+export function createGetCanonicalFileName(
+  useCaseSensitiveFileNames: boolean,
+): (str: string) => string {
   return useCaseSensitiveFileNames ? identity : toFileNameLowerCase
 }
 
@@ -103,26 +104,20 @@ export function createGetCanonicalFileName(useCaseSensitiveFileNames: boolean) {
 // posix behavior.
 const normalize = (path.posix || path).normalize
 const windowsSlashRE = /\\/g
-export function normalizePath(p: string) {
+export function normalizePath(p: string): string {
   return normalize(p.replace(windowsSlashRE, '/'))
 }
 
-export const joinPaths = (path.posix || path).join
+export const joinPaths: (...paths: string[]) => string = (path.posix || path)
+  .join
 
 /**
  * key may contain symbols
  * e.g. onUpdate:modelValue -> "onUpdate:modelValue"
  */
-export const propNameEscapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~\-]/
+export const propNameEscapeSymbolsRE: RegExp =
+  /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~\-]/
 
-export function getEscapedPropName(key: string) {
+export function getEscapedPropName(key: string): string {
   return propNameEscapeSymbolsRE.test(key) ? JSON.stringify(key) : key
 }
-
-export const cssVarNameEscapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
-
-export function getEscapedCssVarName(key: string, doubleEscape: boolean) {
-  return key.replace(cssVarNameEscapeSymbolsRE, s =>
-    doubleEscape ? `\\\\${s}` : `\\${s}`
-  )
-}
diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index cb5274bc2..0397c7d79 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -1,16 +1,16 @@
 import {
-  processExpression,
-  createTransformContext,
-  createSimpleExpression,
-  createRoot,
+  type BindingMetadata,
   NodeTypes,
-  SimpleExpressionNode,
-  BindingMetadata
+  type SimpleExpressionNode,
+  createRoot,
+  createSimpleExpression,
+  createTransformContext,
+  processExpression,
 } from '@vue/compiler-dom'
-import { SFCDescriptor } from '../parse'
-import { getEscapedCssVarName } from '../script/utils'
-import { PluginCreator } from 'postcss'
+import type { SFCDescriptor } from '../parse'
+import type { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
+import { getEscapedCssVarName } from '@vue/shared'
 
 export const CSS_VARS_HELPER = `useCssVars`
 
@@ -18,12 +18,12 @@ export function genCssVarsFromList(
   vars: string[],
   id: string,
   isProd: boolean,
-  isSSR = false
+  isSSR = false,
 ): string {
   return `{\n  ${vars
     .map(
       key =>
-        `"${isSSR ? `--` : ``}${genVarName(id, key, isProd, isSSR)}": (${key})`
+        `"${isSSR ? `--` : ``}${genVarName(id, key, isProd, isSSR)}": (${key})`,
     )
     .join(',\n  ')}\n}`
 }
@@ -32,7 +32,7 @@ function genVarName(
   id: string,
   raw: string,
   isProd: boolean,
-  isSSR = false
+  isSSR = false,
 ): string {
   if (isProd) {
     return hash(id + raw)
@@ -78,10 +78,10 @@ export function parseCssVars(sfc: SFCDescriptor): string[] {
   return vars
 }
 
-const enum LexerState {
+enum LexerState {
   inParens,
   inSingleQuoteString,
-  inDoubleQuoteString
+  inDoubleQuoteString,
 }
 
 function lexBinding(content: string, start: number): number | null {
@@ -152,7 +152,7 @@ export const cssVarsPlugin: PluginCreator<CssVarsPluginOptions> = opts => {
         }
         decl.value = transformed + value.slice(lastIndex)
       }
-    }
+    },
   }
 }
 cssVarsPlugin.postcss = true
@@ -161,14 +161,14 @@ export function genCssVarsCode(
   vars: string[],
   bindings: BindingMetadata,
   id: string,
-  isProd: boolean
+  isProd: boolean,
 ) {
   const varsExp = genCssVarsFromList(vars, id, isProd)
   const exp = createSimpleExpression(varsExp, false)
   const context = createTransformContext(createRoot([]), {
     prefixIdentifiers: true,
     inline: true,
-    bindingMetadata: bindings.__isScriptSetup === false ? undefined : bindings
+    bindingMetadata: bindings.__isScriptSetup === false ? undefined : bindings,
   })
   const transformed = processExpression(exp, context)
   const transformedString =
@@ -192,7 +192,7 @@ export function genNormalScriptCssVarsCode(
   bindings: BindingMetadata,
   id: string,
   isProd: boolean,
-  defaultVar: string
+  defaultVar: string,
 ): string {
   return (
     `\nimport { ${CSS_VARS_HELPER} as _${CSS_VARS_HELPER} } from 'vue'\n` +
@@ -200,7 +200,7 @@ export function genNormalScriptCssVarsCode(
       cssVars,
       bindings,
       id,
-      isProd
+      isProd,
     )}}\n` +
     `const __setup__ = ${defaultVar}.setup\n` +
     `${defaultVar}.setup = __setup__\n` +
diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
index 5394b7774..b0224cf20 100644
--- a/packages/compiler-sfc/src/style/pluginScoped.ts
+++ b/packages/compiler-sfc/src/style/pluginScoped.ts
@@ -1,4 +1,10 @@
-import { PluginCreator, Rule, AtRule } from 'postcss'
+import {
+  type AtRule,
+  type Container,
+  type Document,
+  type PluginCreator,
+  Rule,
+} from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 import { warn } from '../warn'
 
@@ -55,7 +61,7 @@ const scopedPlugin: PluginCreator<string> = (id = '') => {
           }
         })
       }
-    }
+    },
   }
 }
 
@@ -71,21 +77,32 @@ function processRule(id: string, rule: Rule) {
     return
   }
   processedRules.add(rule)
+  let deep = false
+  let parent: Document | Container | undefined = rule.parent
+  while (parent && parent.type !== 'root') {
+    if ((parent as any).__deep) {
+      deep = true
+      break
+    }
+    parent = parent.parent
+  }
   rule.selector = selectorParser(selectorRoot => {
     selectorRoot.each(selector => {
-      rewriteSelector(id, selector, selectorRoot)
+      rewriteSelector(id, rule, selector, selectorRoot, deep)
     })
   }).processSync(rule.selector)
 }
 
 function rewriteSelector(
   id: string,
+  rule: Rule,
   selector: selectorParser.Selector,
   selectorRoot: selectorParser.Root,
-  slotted = false
+  deep: boolean,
+  slotted = false,
 ) {
   let node: selectorParser.Node | null = null
-  let shouldInject = true
+  let shouldInject = !deep
   // find the last child node to insert attribute selector
   selector.each(n => {
     // DEPRECATED ">>>" and "/deep/" combinator
@@ -97,7 +114,7 @@ function rewriteSelector(
       n.spaces.before = n.spaces.after = ''
       warn(
         `the >>> and /deep/ combinators have been deprecated. ` +
-          `Use :deep() instead.`
+          `Use :deep() instead.`,
       )
       return false
     }
@@ -107,6 +124,7 @@ function rewriteSelector(
       // deep: inject [id] attribute at the node before the ::v-deep
       // combinator.
       if (value === ':deep' || value === '::v-deep') {
+        ;(rule as any).__deep = true
         if (n.nodes.length) {
           // .foo ::v-deep(.bar) -> .foo[xxxxxxx] .bar
           // replace the current node with ::v-deep's inner selector
@@ -121,8 +139,8 @@ function rewriteSelector(
             selector.insertAfter(
               n,
               selectorParser.combinator({
-                value: ' '
-              })
+                value: ' ',
+              }),
             )
           }
           selector.removeChild(n)
@@ -131,7 +149,7 @@ function rewriteSelector(
           // .foo ::v-deep .bar -> .foo[xxxxxxx] .bar
           warn(
             `${value} usage as a combinator has been deprecated. ` +
-              `Use :deep(<inner-selector>) instead of ${value} <inner-selector>.`
+              `Use :deep(<inner-selector>) instead of ${value} <inner-selector>.`,
           )
 
           const prev = selector.at(selector.index(n) - 1)
@@ -147,7 +165,14 @@ function rewriteSelector(
       // instead.
       // ::v-slotted(.foo) -> .foo[xxxxxxx-s]
       if (value === ':slotted' || value === '::v-slotted') {
-        rewriteSelector(id, n.nodes[0], selectorRoot, true /* slotted */)
+        rewriteSelector(
+          id,
+          rule,
+          n.nodes[0],
+          selectorRoot,
+          deep,
+          true /* slotted */,
+        )
         let last: selectorParser.Selector['nodes'][0] = n
         n.nodes[0].each(ss => {
           selector.insertAfter(last, ss)
@@ -170,16 +195,64 @@ function rewriteSelector(
       }
     }
 
-    if (n.type !== 'pseudo' && n.type !== 'combinator') {
-      node = n
+    if (n.type === 'universal') {
+      const prev = selector.at(selector.index(n) - 1)
+      const next = selector.at(selector.index(n) + 1)
+      // * ... {}
+      if (!prev) {
+        // * .foo {} -> .foo[xxxxxxx] {}
+        if (next) {
+          if (next.type === 'combinator' && next.value === ' ') {
+            selector.removeChild(next)
+          }
+          selector.removeChild(n)
+          return
+        } else {
+          // * {} -> [xxxxxxx] {}
+          node = selectorParser.combinator({
+            value: '',
+          })
+          selector.insertBefore(n, node)
+          selector.removeChild(n)
+          return false
+        }
+      }
+      // .foo * -> .foo[xxxxxxx] *
+      if (node) return
     }
 
-    if (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where')) {
-      rewriteSelector(id, n.nodes[0], selectorRoot, slotted)
-      shouldInject = false
+    if (
+      (n.type !== 'pseudo' && n.type !== 'combinator') ||
+      (n.type === 'pseudo' &&
+        (n.value === ':is' || n.value === ':where') &&
+        !node)
+    ) {
+      node = n
     }
   })
 
+  if (rule.nodes.some(node => node.type === 'rule')) {
+    const deep = (rule as any).__deep
+    if (!deep) {
+      extractAndWrapNodes(rule)
+      const atruleNodes = rule.nodes.filter(node => node.type === 'atrule')
+      for (const atnode of atruleNodes) {
+        extractAndWrapNodes(atnode)
+      }
+    }
+    shouldInject = deep
+  }
+
+  if (node) {
+    const { type, value } = node as selectorParser.Node
+    if (type === 'pseudo' && (value === ':is' || value === ':where')) {
+      ;(node as selectorParser.Pseudo).nodes.forEach(value =>
+        rewriteSelector(id, rule, value, selectorRoot, deep, slotted),
+      )
+      shouldInject = false
+    }
+  }
+
   if (node) {
     ;(node as selectorParser.Node).spaces.after = ''
   } else {
@@ -199,8 +272,8 @@ function rewriteSelector(
         attribute: idToAdd,
         value: idToAdd,
         raws: {},
-        quoteMark: `"`
-      })
+        quoteMark: `"`,
+      }),
     )
   }
 }
@@ -209,5 +282,22 @@ function isSpaceCombinator(node: selectorParser.Node) {
   return node.type === 'combinator' && /^\s+$/.test(node.value)
 }
 
+function extractAndWrapNodes(parentNode: Rule | AtRule) {
+  if (!parentNode.nodes) return
+  const nodes = parentNode.nodes.filter(
+    node => node.type === 'decl' || node.type === 'comment',
+  )
+  if (nodes.length) {
+    for (const node of nodes) {
+      parentNode.removeChild(node)
+    }
+    const wrappedRule = new Rule({
+      nodes: nodes,
+      selector: '&',
+    })
+    parentNode.prepend(wrappedRule)
+  }
+}
+
 scopedPlugin.postcss = true
 export default scopedPlugin
diff --git a/packages/compiler-sfc/src/style/pluginTrim.ts b/packages/compiler-sfc/src/style/pluginTrim.ts
index 67c4a3f0f..ab5283438 100644
--- a/packages/compiler-sfc/src/style/pluginTrim.ts
+++ b/packages/compiler-sfc/src/style/pluginTrim.ts
@@ -1,4 +1,4 @@
-import { PluginCreator } from 'postcss'
+import type { PluginCreator } from 'postcss'
 
 const trimPlugin: PluginCreator<{}> = () => {
   return {
@@ -10,7 +10,7 @@ const trimPlugin: PluginCreator<{}> = () => {
           if ('after' in raws && raws.after) raws.after = '\n'
         }
       })
-    }
+    },
   }
 }
 
diff --git a/packages/compiler-sfc/src/style/preprocessors.ts b/packages/compiler-sfc/src/style/preprocessors.ts
index 9b3610501..6a974368e 100644
--- a/packages/compiler-sfc/src/style/preprocessors.ts
+++ b/packages/compiler-sfc/src/style/preprocessors.ts
@@ -1,6 +1,6 @@
 import merge from 'merge-source-map'
-import { RawSourceMap } from 'source-map-js'
-import { SFCStyleCompileOptions } from '../compileStyle'
+import type { RawSourceMap } from '@vue/compiler-core'
+import type { SFCStyleCompileOptions } from '../compileStyle'
 import { isFunction } from '@vue/shared'
 
 export type StylePreprocessor = (
@@ -11,7 +11,7 @@ export type StylePreprocessor = (
     additionalData?: string | ((source: string, filename: string) => string)
     filename: string
   },
-  customRequire: SFCStyleCompileOptions['preprocessCustomRequire']
+  customRequire: SFCStyleCompileOptions['preprocessCustomRequire'],
 ) => StylePreprocessorResults
 
 export interface StylePreprocessorResults {
@@ -29,7 +29,7 @@ const scss: StylePreprocessor = (source, map, options, load = require) => {
     data: getSource(source, options.filename, options.additionalData),
     file: options.filename,
     outFile: options.filename,
-    sourceMap: !!map
+    sourceMap: !!map,
   }
 
   try {
@@ -40,7 +40,7 @@ const scss: StylePreprocessor = (source, map, options, load = require) => {
         code: result.css.toString(),
         map: merge(map, JSON.parse(result.map.toString())),
         errors: [],
-        dependencies
+        dependencies,
       }
     }
 
@@ -56,9 +56,9 @@ const sass: StylePreprocessor = (source, map, options, load) =>
     map,
     {
       ...options,
-      indentedSyntax: true
+      indentedSyntax: true,
     },
-    load
+    load,
   )
 
 // .less
@@ -73,7 +73,7 @@ const less: StylePreprocessor = (source, map, options, load = require) => {
     (err: Error | null, output: any) => {
       error = err
       result = output
-    }
+    },
   )
 
   if (error) return { code: '', errors: [error], dependencies: [] }
@@ -83,14 +83,14 @@ const less: StylePreprocessor = (source, map, options, load = require) => {
       code: result.css.toString(),
       map: merge(map, result.map),
       errors: [],
-      dependencies: dependencies
+      dependencies: dependencies,
     }
   }
 
   return {
     code: result.css.toString(),
     errors: [],
-    dependencies: dependencies
+    dependencies: dependencies,
   }
 }
 
@@ -108,7 +108,7 @@ const styl: StylePreprocessor = (source, map, options, load = require) => {
         code: result,
         map: merge(map, ref.sourcemap),
         errors: [],
-        dependencies
+        dependencies,
       }
     }
 
@@ -121,7 +121,7 @@ const styl: StylePreprocessor = (source, map, options, load = require) => {
 function getSource(
   source: string,
   filename: string,
-  additionalData?: string | ((source: string, filename: string) => string)
+  additionalData?: string | ((source: string, filename: string) => string),
 ) {
   if (!additionalData) return source
   if (isFunction(additionalData)) {
@@ -137,5 +137,5 @@ export const processors: Record<PreprocessLang, StylePreprocessor> = {
   sass,
   scss,
   styl,
-  stylus: styl
+  stylus: styl,
 }
diff --git a/packages/compiler-sfc/src/template/templateUtils.ts b/packages/compiler-sfc/src/template/templateUtils.ts
index 0966945a5..c1414d1ec 100644
--- a/packages/compiler-sfc/src/template/templateUtils.ts
+++ b/packages/compiler-sfc/src/template/templateUtils.ts
@@ -1,4 +1,4 @@
-import { UrlWithStringQuery, parse as uriParse } from 'url'
+import { type UrlWithStringQuery, parse as uriParse } from 'url'
 import { isString } from '@vue/shared'
 
 export function isRelativeUrl(url: string): boolean {
diff --git a/packages/compiler-sfc/src/template/transformAssetUrl.ts b/packages/compiler-sfc/src/template/transformAssetUrl.ts
index 4267d4ea3..6291e21bb 100644
--- a/packages/compiler-sfc/src/template/transformAssetUrl.ts
+++ b/packages/compiler-sfc/src/template/transformAssetUrl.ts
@@ -1,19 +1,19 @@
 import path from 'path'
 import {
   ConstantTypes,
-  createSimpleExpression,
-  ExpressionNode,
-  NodeTransform,
+  type ExpressionNode,
+  type NodeTransform,
   NodeTypes,
-  SimpleExpressionNode,
-  SourceLocation,
-  TransformContext
+  type SimpleExpressionNode,
+  type SourceLocation,
+  type TransformContext,
+  createSimpleExpression,
 } from '@vue/compiler-core'
 import {
+  isDataUrl,
+  isExternalUrl,
   isRelativeUrl,
   parseUrl,
-  isExternalUrl,
-  isDataUrl
 } from './templateUtils'
 import { isArray } from '@vue/shared'
 
@@ -42,28 +42,28 @@ export const defaultAssetUrlOptions: Required<AssetURLOptions> = {
     source: ['src'],
     img: ['src'],
     image: ['xlink:href', 'href'],
-    use: ['xlink:href', 'href']
-  }
+    use: ['xlink:href', 'href'],
+  },
 }
 
 export const normalizeOptions = (
-  options: AssetURLOptions | AssetURLTagConfig
+  options: AssetURLOptions | AssetURLTagConfig,
 ): Required<AssetURLOptions> => {
   if (Object.keys(options).some(key => isArray((options as any)[key]))) {
     // legacy option format which directly passes in tags config
     return {
       ...defaultAssetUrlOptions,
-      tags: options as any
+      tags: options as any,
     }
   }
   return {
     ...defaultAssetUrlOptions,
-    ...options
+    ...options,
   }
 }
 
 export const createAssetUrlTransformWithOptions = (
-  options: Required<AssetURLOptions>
+  options: Required<AssetURLOptions>,
 ): NodeTransform => {
   return (node, context) =>
     (transformAssetUrl as Function)(node, context, options)
@@ -85,7 +85,7 @@ export const createAssetUrlTransformWithOptions = (
 export const transformAssetUrl: NodeTransform = (
   node,
   context,
-  options: AssetURLOptions = defaultAssetUrlOptions
+  options: AssetURLOptions = defaultAssetUrlOptions,
 ) => {
   if (node.type === NodeTypes.ELEMENT) {
     if (!node.props.length) {
@@ -141,7 +141,7 @@ export const transformAssetUrl: NodeTransform = (
         arg: createSimpleExpression(attr.name, true, attr.loc),
         exp,
         modifiers: [],
-        loc: attr.loc
+        loc: attr.loc,
       }
     })
   }
@@ -151,7 +151,7 @@ function getImportsExpressionExp(
   path: string | null,
   hash: string | null,
   loc: SourceLocation,
-  context: TransformContext
+  context: TransformContext,
 ): ExpressionNode {
   if (path) {
     let name: string
@@ -166,14 +166,14 @@ function getImportsExpressionExp(
         name,
         false,
         loc,
-        ConstantTypes.CAN_STRINGIFY
+        ConstantTypes.CAN_STRINGIFY,
       )
 
       // We need to ensure the path is not encoded (to %2F),
       // so we decode it back in case it is encoded
       context.imports.push({
         exp,
-        path: decodeURIComponent(path)
+        path: decodeURIComponent(path),
       })
     }
 
@@ -186,7 +186,7 @@ function getImportsExpressionExp(
       hashExp,
       false,
       loc,
-      ConstantTypes.CAN_STRINGIFY
+      ConstantTypes.CAN_STRINGIFY,
     )
 
     if (!context.hoistStatic) {
@@ -206,7 +206,7 @@ function getImportsExpressionExp(
         `_hoisted_${existingHoistIndex + 1}`,
         false,
         loc,
-        ConstantTypes.CAN_STRINGIFY
+        ConstantTypes.CAN_STRINGIFY,
       )
     }
     return context.hoist(finalExp)
diff --git a/packages/compiler-sfc/src/template/transformSrcset.ts b/packages/compiler-sfc/src/template/transformSrcset.ts
index 18b9d0b0b..8f00f86e3 100644
--- a/packages/compiler-sfc/src/template/transformSrcset.ts
+++ b/packages/compiler-sfc/src/template/transformSrcset.ts
@@ -1,20 +1,23 @@
 import path from 'path'
 import {
   ConstantTypes,
+  type ExpressionNode,
+  type NodeTransform,
+  NodeTypes,
+  type SimpleExpressionNode,
   createCompoundExpression,
   createSimpleExpression,
-  ExpressionNode,
-  NodeTransform,
-  NodeTypes,
-  SimpleExpressionNode
 } from '@vue/compiler-core'
 import {
+  isDataUrl,
+  isExternalUrl,
   isRelativeUrl,
   parseUrl,
-  isExternalUrl,
-  isDataUrl
 } from './templateUtils'
-import { AssetURLOptions, defaultAssetUrlOptions } from './transformAssetUrl'
+import {
+  type AssetURLOptions,
+  defaultAssetUrlOptions,
+} from './transformAssetUrl'
 
 const srcsetTags = ['img', 'source']
 
@@ -27,7 +30,7 @@ interface ImageCandidate {
 const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
 
 export const createSrcsetTransformWithOptions = (
-  options: Required<AssetURLOptions>
+  options: Required<AssetURLOptions>,
 ): NodeTransform => {
   return (node, context) =>
     (transformSrcset as Function)(node, context, options)
@@ -36,7 +39,7 @@ export const createSrcsetTransformWithOptions = (
 export const transformSrcset: NodeTransform = (
   node,
   context,
-  options: Required<AssetURLOptions> = defaultAssetUrlOptions
+  options: Required<AssetURLOptions> = defaultAssetUrlOptions,
 ) => {
   if (node.type === NodeTypes.ELEMENT) {
     if (srcsetTags.includes(node.tag) && node.props.length) {
@@ -109,21 +112,21 @@ export const transformSrcset: NodeTransform = (
               let exp: SimpleExpressionNode
               if (path) {
                 const existingImportsIndex = context.imports.findIndex(
-                  i => i.path === path
+                  i => i.path === path,
                 )
                 if (existingImportsIndex > -1) {
                   exp = createSimpleExpression(
                     `_imports_${existingImportsIndex}`,
                     false,
                     attr.loc,
-                    ConstantTypes.CAN_STRINGIFY
+                    ConstantTypes.CAN_STRINGIFY,
                   )
                 } else {
                   exp = createSimpleExpression(
                     `_imports_${context.imports.length}`,
                     false,
                     attr.loc,
-                    ConstantTypes.CAN_STRINGIFY
+                    ConstantTypes.CAN_STRINGIFY,
                   )
                   context.imports.push({ exp, path })
                 }
@@ -134,7 +137,7 @@ export const transformSrcset: NodeTransform = (
                 `"${url}"`,
                 false,
                 attr.loc,
-                ConstantTypes.CAN_STRINGIFY
+                ConstantTypes.CAN_STRINGIFY,
               )
               compoundExpression.children.push(exp)
             }
@@ -160,7 +163,7 @@ export const transformSrcset: NodeTransform = (
             arg: createSimpleExpression('srcset', true, attr.loc),
             exp,
             modifiers: [],
-            loc: attr.loc
+            loc: attr.loc,
           }
         }
       })
diff --git a/packages/compiler-sfc/src/warn.ts b/packages/compiler-sfc/src/warn.ts
index 13cfa4da7..486f4572c 100644
--- a/packages/compiler-sfc/src/warn.ts
+++ b/packages/compiler-sfc/src/warn.ts
@@ -1,6 +1,6 @@
 const hasWarned: Record<string, boolean> = {}
 
-export function warnOnce(msg: string) {
+export function warnOnce(msg: string): void {
   const isNodeProd =
     typeof process !== 'undefined' && process.env.NODE_ENV === 'production'
   if (!isNodeProd && !__TEST__ && !hasWarned[msg]) {
@@ -9,8 +9,8 @@ export function warnOnce(msg: string) {
   }
 }
 
-export function warn(msg: string) {
+export function warn(msg: string): void {
   console.warn(
-    `\x1b[1m\x1b[33m[@vue/compiler-sfc]\x1b[0m\x1b[33m ${msg}\x1b[0m\n`
+    `\x1b[1m\x1b[33m[@vue/compiler-sfc]\x1b[0m\x1b[33m ${msg}\x1b[0m\n`,
   )
 }
diff --git a/packages/compiler-ssr/README.md b/packages/compiler-ssr/README.md
index 5beb121e1..9337906f4 100644
--- a/packages/compiler-ssr/README.md
+++ b/packages/compiler-ssr/README.md
@@ -1 +1 @@
-# @vue/compiler-ssr
\ No newline at end of file
+# @vue/compiler-ssr
diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index a8ea08a53..2fde4560e 100644
--- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
@@ -3,14 +3,14 @@ import { compile } from '../src'
 describe('ssr: components', () => {
   test('basic', () => {
     expect(compile(`<foo id="a" :prop="b" />`).code).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _push(_ssrRenderComponent(_component_foo, _mergeProps({
-          id: \\"a\\",
+          id: "a",
           prop: _ctx.b
         }, _attrs), null, _parent))
       }"
@@ -20,11 +20,11 @@ describe('ssr: components', () => {
   // event listeners should still be passed
   test('event listeners', () => {
     expect(compile(`<foo @click="bar" />`).code).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _push(_ssrRenderComponent(_component_foo, _mergeProps({ onClick: _ctx.bar }, _attrs), null, _parent))
       }"
@@ -34,21 +34,21 @@ describe('ssr: components', () => {
   test('dynamic component', () => {
     expect(compile(`<component is="foo" prop="b" />`).code)
       .toMatchInlineSnapshot(`
-        "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
-        const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
+        "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue")
+        const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(\\"foo\\"), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
+          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent("foo"), _mergeProps({ prop: "b" }, _attrs), null), _parent)
         }"
       `)
 
     expect(compile(`<component :is="foo" prop="b" />`).code)
       .toMatchInlineSnapshot(`
-        "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
-        const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
+        "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue")
+        const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
+          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: "b" }, _attrs), null), _parent)
         }"
       `)
   })
@@ -56,11 +56,11 @@ describe('ssr: components', () => {
   describe('slots', () => {
     test('implicit default slot', () => {
       expect(compile(`<foo>hello<div/></foo>`).code).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
+          const _component_foo = _resolveComponent("foo")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -68,8 +68,8 @@ describe('ssr: components', () => {
                 _push(\`hello<div\${_scopeId}></div>\`)
               } else {
                 return [
-                  _createTextVNode(\\"hello\\"),
-                  _createVNode(\\"div\\")
+                  _createTextVNode("hello"),
+                  _createVNode("div")
                 ]
               }
             }),
@@ -82,11 +82,11 @@ describe('ssr: components', () => {
     test('explicit default slot', () => {
       expect(compile(`<foo v-slot="{ msg }">{{ msg + outer }}</foo>`).code)
         .toMatchInlineSnapshot(`
-          "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require(\\"vue\\")
-          const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+          "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue")
+          const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
           return function ssrRender(_ctx, _push, _parent, _attrs) {
-            const _component_foo = _resolveComponent(\\"foo\\")
+            const _component_foo = _resolveComponent("foo")
 
             _push(_ssrRenderComponent(_component_foo, _attrs, {
               default: _withCtx(({ msg }, _push, _parent, _scopeId) => {
@@ -114,13 +114,13 @@ describe('ssr: components', () => {
         compile(`<foo>
         <template v-slot>foo</template>
         <template v-slot:named>bar</template>
-      </foo>`).code
+      </foo>`).code,
       ).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
+          const _component_foo = _resolveComponent("foo")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -128,7 +128,7 @@ describe('ssr: components', () => {
                 _push(\`foo\`)
               } else {
                 return [
-                  _createTextVNode(\\"foo\\")
+                  _createTextVNode("foo")
                 ]
               }
             }),
@@ -137,7 +137,7 @@ describe('ssr: components', () => {
                 _push(\`bar\`)
               } else {
                 return [
-                  _createTextVNode(\\"bar\\")
+                  _createTextVNode("bar")
                 ]
               }
             }),
@@ -151,28 +151,28 @@ describe('ssr: components', () => {
       expect(
         compile(`<foo>
         <template v-slot:named v-if="ok">foo</template>
-      </foo>`).code
+      </foo>`).code,
       ).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
+          const _component_foo = _resolveComponent("foo")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
             (_ctx.ok)
               ? {
-                  name: \\"named\\",
+                  name: "named",
                   fn: _withCtx((_, _push, _parent, _scopeId) => {
                     if (_push) {
                       _push(\`foo\`)
                     } else {
                       return [
-                        _createTextVNode(\\"foo\\")
+                        _createTextVNode("foo")
                       ]
                     }
                   }),
-                  key: \\"0\\"
+                  key: "0"
                 }
               : undefined
           ]), _parent))
@@ -189,11 +189,11 @@ describe('ssr: components', () => {
       expect(code).not.toMatch(`_ctx.index`)
       expect(code).toMatch(`_ctx.bar`)
       expect(code).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
+          const _component_foo = _resolveComponent("foo")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
             _renderList(_ctx.names, (key, index) => {
@@ -228,13 +228,13 @@ describe('ssr: components', () => {
             <span v-for="i in list"></span>
           </div>
         </template>
-      </foo>`).code
+      </foo>`).code,
       ).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
+          const _component_foo = _resolveComponent("foo")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, {
             foo: _withCtx(({ list }, _push, _parent, _scopeId) => {
@@ -251,12 +251,12 @@ describe('ssr: components', () => {
               } else {
                 return [
                   (_ctx.ok)
-                    ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
+                    ? (_openBlock(), _createBlock("div", { key: 0 }, [
                         (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
-                          return (_openBlock(), _createBlock(\\"span\\"))
+                          return (_openBlock(), _createBlock("span"))
                         }), 256 /* UNKEYED_FRAGMENT */))
                       ]))
-                    : _createCommentVNode(\\"v-if\\", true)
+                    : _createCommentVNode("v-if", true)
                 ]
               }
             }),
@@ -274,12 +274,12 @@ describe('ssr: components', () => {
               } else {
                 return [
                   ok
-                    ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
+                    ? (_openBlock(), _createBlock("div", { key: 0 }, [
                         (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (i) => {
-                          return (_openBlock(), _createBlock(\\"span\\"))
+                          return (_openBlock(), _createBlock("span"))
                         }), 256 /* UNKEYED_FRAGMENT */))
                       ]))
-                    : _createCommentVNode(\\"v-if\\", true)
+                    : _createCommentVNode("v-if", true)
                 ]
               }
             }),
@@ -294,12 +294,12 @@ describe('ssr: components', () => {
       const { code } = compile(`<foo><bar v-once /></foo>`)
       expect(code).not.toMatch(`_cache`)
       expect(compile(`<foo><bar v-once /></foo>`).code).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
-          const _component_bar = _resolveComponent(\\"bar\\")
+          const _component_foo = _resolveComponent("foo")
+          const _component_bar = _resolveComponent("bar")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -321,7 +321,7 @@ describe('ssr: components', () => {
       test('transition', () => {
         expect(compile(`<transition><div/></transition>`).code)
           .toMatchInlineSnapshot(`
-            "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+            "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
             return function ssrRender(_ctx, _push, _parent, _attrs) {
               _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
@@ -332,11 +332,11 @@ describe('ssr: components', () => {
       test('keep-alive', () => {
         expect(compile(`<keep-alive><foo/></keep-alive>`).code)
           .toMatchInlineSnapshot(`
-            "const { resolveComponent: _resolveComponent } = require(\\"vue\\")
-            const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+            "const { resolveComponent: _resolveComponent } = require("vue")
+            const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
             return function ssrRender(_ctx, _push, _parent, _attrs) {
-              const _component_foo = _resolveComponent(\\"foo\\")
+              const _component_foo = _resolveComponent("foo")
 
               _push(_ssrRenderComponent(_component_foo, _attrs, null, _parent))
             }"
@@ -347,13 +347,13 @@ describe('ssr: components', () => {
       test('should push marker string if is slot root', () => {
         expect(
           compile(`<foo><transition><div v-if="false"/></transition></foo>`)
-            .code
+            .code,
         ).toMatchInlineSnapshot(`
-          "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, createVNode: _createVNode } = require(\\"vue\\")
-          const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+          "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, createVNode: _createVNode } = require("vue")
+          const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
           return function ssrRender(_ctx, _push, _parent, _attrs) {
-            const _component_foo = _resolveComponent(\\"foo\\")
+            const _component_foo = _resolveComponent("foo")
 
             _push(_ssrRenderComponent(_component_foo, _attrs, {
               default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -369,8 +369,8 @@ describe('ssr: components', () => {
                     _createVNode(_Transition, null, {
                       default: _withCtx(() => [
                         false
-                          ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
-                          : _createCommentVNode(\\"v-if\\", true)
+                          ? (_openBlock(), _createBlock("div", { key: 0 }))
+                          : _createCommentVNode("v-if", true)
                       ]),
                       _: 1 /* STABLE */
                     })
@@ -388,14 +388,14 @@ describe('ssr: components', () => {
   describe('custom directive', () => {
     test('basic', () => {
       expect(compile(`<foo v-xxx:x.y="z" />`).code).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require(\\"vue\\")
-        const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require("vue")
+        const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
-          const _directive_xxx = _resolveDirective(\\"xxx\\")
+          const _component_foo = _resolveComponent("foo")
+          const _directive_xxx = _resolveDirective("xxx")
 
-          _push(_ssrRenderComponent(_component_foo, _mergeProps(_attrs, _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true })), null, _parent))
+          _push(_ssrRenderComponent(_component_foo, _mergeProps(_attrs, _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true })), null, _parent))
         }"
       `)
     })
diff --git a/packages/compiler-ssr/__tests__/ssrElement.spec.ts b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
index 65608bdd3..723ef7b35 100644
--- a/packages/compiler-ssr/__tests__/ssrElement.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
@@ -4,16 +4,16 @@ import { compile } from '../src'
 describe('ssr: element', () => {
   test('basic elements', () => {
     expect(getCompiledString(`<div></div>`)).toMatchInlineSnapshot(
-      `"\`<div></div>\`"`
+      `"\`<div></div>\`"`,
     )
     expect(getCompiledString(`<div/>`)).toMatchInlineSnapshot(
-      `"\`<div></div>\`"`
+      `"\`<div></div>\`"`,
     )
   })
 
   test('nested elements', () => {
     expect(
-      getCompiledString(`<div><span></span><span></span></div>`)
+      getCompiledString(`<div><span></span><span></span></div>`),
     ).toMatchInlineSnapshot(`"\`<div><span></span><span></span></div>\`"`)
   })
 
@@ -25,7 +25,7 @@ describe('ssr: element', () => {
     test('v-html', () => {
       expect(getCompiledString(`<div v-html="foo"/>`)).toMatchInlineSnapshot(`
         "\`<div>\${
-            _ctx.foo
+            (_ctx.foo) ?? ''
           }</div>\`"
       `)
     })
@@ -49,23 +49,23 @@ describe('ssr: element', () => {
 
     test('<textarea> with static value', () => {
       expect(
-        getCompiledString(`<textarea value="fo&gt;o"/>`)
+        getCompiledString(`<textarea value="fo&gt;o"/>`),
       ).toMatchInlineSnapshot(`"\`<textarea>fo&gt;o</textarea>\`"`)
     })
 
     test('<textarea> with dynamic v-bind', () => {
       expect(compile(`<textarea v-bind="obj">fallback</textarea>`).code)
         .toMatchInlineSnapshot(`
-          "const { mergeProps: _mergeProps } = require(\\"vue\\")
-          const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+          "const { mergeProps: _mergeProps } = require("vue")
+          const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
           return function ssrRender(_ctx, _push, _parent, _attrs) {
             let _temp0
 
             _push(\`<textarea\${
-              _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), \\"textarea\\")
+              _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), "textarea")
             }>\${
-              _ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"fallback\\")
+              _ssrInterpolate(("value" in _temp0) ? _temp0.value : "fallback")
             }</textarea>\`)
           }"
         `)
@@ -73,9 +73,9 @@ describe('ssr: element', () => {
 
     test('multiple _ssrInterpolate at parent and child import dependency once', () => {
       expect(
-        compile(`<div>{{ hello }}<textarea v-bind="a"></textarea></div>`).code
+        compile(`<div>{{ hello }}<textarea v-bind="a"></textarea></div>`).code,
       ).toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           let _temp0
@@ -85,9 +85,9 @@ describe('ssr: element', () => {
           }>\${
             _ssrInterpolate(_ctx.hello)
           }<textarea\${
-            _ssrRenderAttrs(_temp0 = _ctx.a, \\"textarea\\")
+            _ssrRenderAttrs(_temp0 = _ctx.a, "textarea")
           }>\${
-            _ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"\\")
+            _ssrInterpolate(("value" in _temp0) ? _temp0.value : "")
           }</textarea></div>\`)
         }"
       `)
@@ -96,14 +96,14 @@ describe('ssr: element', () => {
     test('should pass tag to custom elements w/ dynamic v-bind', () => {
       expect(
         compile(`<my-foo v-bind="obj"></my-foo>`, {
-          isCustomElement: () => true
-        }).code
+          isCustomElement: () => true,
+        }).code,
       ).toMatchInlineSnapshot(`
-        "const { mergeProps: _mergeProps } = require(\\"vue\\")
-        const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { mergeProps: _mergeProps } = require("vue")
+        const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _push(\`<my-foo\${_ssrRenderAttrs(_mergeProps(_ctx.obj, _attrs), \\"my-foo\\")}></my-foo>\`)
+          _push(\`<my-foo\${_ssrRenderAttrs(_mergeProps(_ctx.obj, _attrs), "my-foo")}></my-foo>\`)
         }"
       `)
     })
@@ -112,72 +112,72 @@ describe('ssr: element', () => {
   describe('attrs', () => {
     test('static attrs', () => {
       expect(
-        getCompiledString(`<div id="foo" class="bar"></div>`)
-      ).toMatchInlineSnapshot('"`<div id=\\"foo\\" class=\\"bar\\"></div>`"')
+        getCompiledString(`<div id="foo" class="bar"></div>`),
+      ).toMatchInlineSnapshot(`"\`<div id="foo" class="bar"></div>\`"`)
     })
 
     test('ignore static key/ref', () => {
       expect(
-        getCompiledString(`<div key="1" ref="el"></div>`)
+        getCompiledString(`<div key="1" ref="el"></div>`),
       ).toMatchInlineSnapshot(`"\`<div></div>\`"`)
     })
 
     test('ignore v-bind key/ref', () => {
       expect(
-        getCompiledString(`<div :key="1" :ref="el"></div>`)
+        getCompiledString(`<div :key="1" :ref="el"></div>`),
       ).toMatchInlineSnapshot(`"\`<div></div>\`"`)
     })
 
     test('v-bind:class', () => {
       expect(getCompiledString(`<div id="foo" :class="bar"></div>`))
         .toMatchInlineSnapshot(`
-          "\`<div id=\\"foo\\" class=\\"\${
+          "\`<div id="foo" class="\${
               _ssrRenderClass(_ctx.bar)
-            }\\"></div>\`"
+            }"></div>\`"
         `)
     })
 
     test('static class + v-bind:class', () => {
       expect(getCompiledString(`<div class="foo" :class="bar"></div>`))
         .toMatchInlineSnapshot(`
-          "\`<div class=\\"\${
-              _ssrRenderClass([_ctx.bar, \\"foo\\"])
-            }\\"></div>\`"
+          "\`<div class="\${
+              _ssrRenderClass([_ctx.bar, "foo"])
+            }"></div>\`"
         `)
     })
 
     test('v-bind:class + static class', () => {
       expect(getCompiledString(`<div :class="bar" class="foo"></div>`))
         .toMatchInlineSnapshot(`
-          "\`<div class=\\"\${
-              _ssrRenderClass([_ctx.bar, \\"foo\\"])
-            }\\"></div>\`"
+          "\`<div class="\${
+              _ssrRenderClass([_ctx.bar, "foo"])
+            }"></div>\`"
         `)
     })
 
     test('v-bind:style', () => {
       expect(getCompiledString(`<div id="foo" :style="bar"></div>`))
         .toMatchInlineSnapshot(`
-          "\`<div id=\\"foo\\" style=\\"\${
+          "\`<div id="foo" style="\${
               _ssrRenderStyle(_ctx.bar)
-            }\\"></div>\`"
+            }"></div>\`"
         `)
     })
 
     test('static style + v-bind:style', () => {
       expect(getCompiledString(`<div style="color:red;" :style="bar"></div>`))
         .toMatchInlineSnapshot(`
-          "\`<div style=\\"\${
-              _ssrRenderStyle([{\\"color\\":\\"red\\"}, _ctx.bar])
-            }\\"></div>\`"
+          "\`<div style="\${
+              _ssrRenderStyle([{"color":"red"}, _ctx.bar])
+            }"></div>\`"
         `)
     })
 
     test('v-bind:arg (boolean)', () => {
       expect(getCompiledString(`<input type="checkbox" :checked="checked">`))
         .toMatchInlineSnapshot(`
-          "\`<input type=\\"checkbox\\"\${
-              (_ssrIncludeBooleanAttr(_ctx.checked)) ? \\" checked\\" : \\"\\"
+          "\`<input type="checkbox"\${
+              (_ssrIncludeBooleanAttr(_ctx.checked)) ? " checked" : ""
             }>\`"
         `)
     })
@@ -186,8 +186,8 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div :id="id" class="bar"></div>`))
         .toMatchInlineSnapshot(`
           "\`<div\${
-              _ssrRenderAttr(\\"id\\", _ctx.id)
-            } class=\\"bar\\"></div>\`"
+              _ssrRenderAttr("id", _ctx.id)
+            } class="bar"></div>\`"
         `)
     })
 
@@ -195,7 +195,7 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div v-bind:[key]="value"></div>`))
         .toMatchInlineSnapshot(`
           "\`<div\${
-              _ssrRenderAttrs({ [_ctx.key || \\"\\"]: _ctx.value })
+              _ssrRenderAttrs({ [_ctx.key || ""]: _ctx.value })
             }></div>\`"
         `)
 
@@ -203,8 +203,8 @@ describe('ssr: element', () => {
         .toMatchInlineSnapshot(`
           "\`<div\${
               _ssrRenderAttrs({
-                class: \\"foo\\",
-                [_ctx.key || \\"\\"]: _ctx.value
+                class: "foo",
+                [_ctx.key || ""]: _ctx.value
               })
             }></div>\`"
         `)
@@ -214,7 +214,7 @@ describe('ssr: element', () => {
           "\`<div\${
               _ssrRenderAttrs({
                 id: _ctx.id,
-                [_ctx.key || \\"\\"]: _ctx.value
+                [_ctx.key || ""]: _ctx.value
               })
             }></div>\`"
         `)
@@ -231,7 +231,7 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div class="foo" v-bind="obj"></div>`))
         .toMatchInlineSnapshot(`
           "\`<div\${
-              _ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ctx.obj))
+              _ssrRenderAttrs(_mergeProps({ class: "foo" }, _ctx.obj))
             }></div>\`"
         `)
 
@@ -246,7 +246,7 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div :[key]="id" v-bind="obj"></div>`))
         .toMatchInlineSnapshot(`
           "\`<div\${
-              _ssrRenderAttrs(_mergeProps({ [_ctx.key || \\"\\"]: _ctx.id }, _ctx.obj))
+              _ssrRenderAttrs(_mergeProps({ [_ctx.key || ""]: _ctx.id }, _ctx.obj))
             }></div>\`"
         `)
 
@@ -255,7 +255,7 @@ describe('ssr: element', () => {
         .toMatchInlineSnapshot(`
           "\`<div\${
               _ssrRenderAttrs(_mergeProps({
-                class: [\\"a\\", _ctx.b]
+                class: ["a", _ctx.b]
               }, _ctx.obj))
             }></div>\`"
         `)
@@ -263,12 +263,12 @@ describe('ssr: element', () => {
       // should merge style and :style
       expect(
         getCompiledString(
-          `<div style="color:red;" :style="b" v-bind="obj"></div>`
-        )
+          `<div style="color:red;" :style="b" v-bind="obj"></div>`,
+        ),
       ).toMatchInlineSnapshot(`
         "\`<div\${
             _ssrRenderAttrs(_mergeProps({
-              style: [{\\"color\\":\\"red\\"}, _ctx.b]
+              style: [{"color":"red"}, _ctx.b]
             }, _ctx.obj))
           }></div>\`"
       `)
@@ -276,11 +276,11 @@ describe('ssr: element', () => {
 
     test('should ignore v-on', () => {
       expect(
-        getCompiledString(`<div id="foo" @click="bar"/>`)
-      ).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
+        getCompiledString(`<div id="foo" @click="bar"/>`),
+      ).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`)
       expect(
-        getCompiledString(`<div id="foo" v-on="bar"/>`)
-      ).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
+        getCompiledString(`<div id="foo" v-on="bar"/>`),
+      ).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`)
       expect(getCompiledString(`<div v-bind="foo" v-on="bar"/>`))
         .toMatchInlineSnapshot(`
         "\`<div\${
@@ -288,12 +288,27 @@ describe('ssr: element', () => {
           }></div>\`"
       `)
     })
+  })
 
-    test('custom dir', () => {
+  describe('custom directives', () => {
+    // #8112 should respect textContent / innerHTML from directive getSSRProps
+    // if the element has no children
+    test('custom dir without children', () => {
       expect(getCompiledString(`<div v-xxx:x.y="z" />`)).toMatchInlineSnapshot(`
         "\`<div\${
-            _ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true }))
-          }></div>\`"
+            _ssrRenderAttrs(_temp0 = _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true }))
+          }>\${
+            ("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
+          }</div>\`"
+      `)
+    })
+
+    test('custom dir with children', () => {
+      expect(getCompiledString(`<div v-xxx:x.y="z">hello</div>`))
+        .toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true }))
+          }>hello</div>\`"
       `)
     })
 
@@ -301,42 +316,50 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div class="foo" v-xxx />`))
         .toMatchInlineSnapshot(`
           "\`<div\${
-              _ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
-            }></div>\`"
+              _ssrRenderAttrs(_temp0 = _mergeProps({ class: "foo" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
+            }>\${
+              ("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
+            }</div>\`"
         `)
     })
 
     test('custom dir with v-bind', () => {
       expect(getCompiledString(`<div :title="foo" :class="bar" v-xxx />`))
         .toMatchInlineSnapshot(`
-        "\`<div\${
-            _ssrRenderAttrs(_mergeProps({
-              title: _ctx.foo,
-              class: _ctx.bar
-            }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
-          }></div>\`"
-      `)
+          "\`<div\${
+              _ssrRenderAttrs(_temp0 = _mergeProps({
+                title: _ctx.foo,
+                class: _ctx.bar
+              }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
+            }>\${
+              ("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
+            }</div>\`"
+        `)
     })
 
     test('custom dir with object v-bind', () => {
       expect(getCompiledString(`<div v-bind="x" v-xxx />`))
         .toMatchInlineSnapshot(`
-        "\`<div\${
-            _ssrRenderAttrs(_mergeProps(_ctx.x, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
-          }></div>\`"
-      `)
+          "\`<div\${
+              _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.x, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
+            }>\${
+              ("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
+            }</div>\`"
+        `)
     })
 
     test('custom dir with object v-bind + normal bindings', () => {
       expect(
-        getCompiledString(`<div v-bind="x" class="foo" v-xxx title="bar" />`)
+        getCompiledString(`<div v-bind="x" class="foo" v-xxx title="bar" />`),
       ).toMatchInlineSnapshot(`
         "\`<div\${
-            _ssrRenderAttrs(_mergeProps(_ctx.x, {
-              class: \\"foo\\",
-              title: \\"bar\\"
+            _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.x, {
+              class: "foo",
+              title: "bar"
             }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
-          }></div>\`"
+          }>\${
+            ("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
+          }</div>\`"
       `)
     })
   })
diff --git a/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts b/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
index 6032dd29e..7b3d1962c 100644
--- a/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
@@ -3,7 +3,7 @@ import { compile } from '../src'
 describe('ssr: attrs fallthrough', () => {
   test('basic', () => {
     expect(compile(`<div/>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
@@ -13,7 +13,7 @@ describe('ssr: attrs fallthrough', () => {
 
   test('with comments', () => {
     expect(compile(`<!--!--><div/>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[--><!--!--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
@@ -40,7 +40,7 @@ describe('ssr: attrs fallthrough', () => {
   test('fallthrough component content (root with comments)', () => {
     expect(compile(`<!--root--><transition><div/></transition>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
diff --git a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
index 0e29fb7e4..9e70dac0b 100644
--- a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
@@ -5,11 +5,11 @@ describe('ssr: inject <style vars>', () => {
   test('basic', () => {
     expect(
       compile(`<div/>`, {
-        ssrCssVars: `{ color }`
-      }).code
+        ssrCssVars: `{ color }`,
+      }).code,
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -21,10 +21,10 @@ describe('ssr: inject <style vars>', () => {
   test('fragment', () => {
     expect(
       compile(`<div/><div/>`, {
-        ssrCssVars: `{ color }`
-      }).code
+        ssrCssVars: `{ color }`,
+      }).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -40,14 +40,14 @@ describe('ssr: inject <style vars>', () => {
   test('passing on to components', () => {
     expect(
       compile(`<div/><foo/>`, {
-        ssrCssVars: `{ color }`
-      }).code
+        ssrCssVars: `{ color }`,
+      }).code,
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         const _cssVars = { style: { color: _ctx.color }}
         _push(\`<!--[--><div\${_ssrRenderAttrs(_cssVars)}></div>\`)
@@ -60,11 +60,11 @@ describe('ssr: inject <style vars>', () => {
   test('v-if branches', () => {
     expect(
       compile(`<div v-if="ok"/><template v-else><div/><div/></template>`, {
-        ssrCssVars: `{ color }`
-      }).code
+        ssrCssVars: `{ color }`,
+      }).code,
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -91,12 +91,12 @@ describe('ssr: inject <style vars>', () => {
           </template>
         </Suspense>`,
         {
-          ssrCssVars: `{ color }`
-        }
-      ).code
+          ssrCssVars: `{ color }`,
+        },
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
+      "const { withCtx: _withCtx } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -117,12 +117,12 @@ describe('ssr: inject <style vars>', () => {
     const result = compile(`<div/>`, {
       inline: true,
       bindingMetadata: { dynamic: BindingTypes.SETUP_MAYBE_REF },
-      ssrCssVars: '{ "--hash": (dynamic) }'
+      ssrCssVars: '{ "--hash": (dynamic) }',
     })
 
     expect(result.code).toMatchInlineSnapshot(`
       "(_ctx, _push, _parent, _attrs) => {
-        const _cssVars = { style: { \\"--hash\\": (_unref(dynamic)) }}
+        const _cssVars = { style: { "--hash": (_unref(dynamic)) }}
         _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
       }"
     `)
diff --git a/packages/compiler-ssr/__tests__/ssrPortal.spec.ts b/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
index 8f3dda5a6..bb262fad0 100644
--- a/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
@@ -4,7 +4,7 @@ describe('ssr compile: teleport', () => {
   test('should work', () => {
     expect(compile(`<teleport :to="target"><div/></teleport>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _ssrRenderTeleport(_push, (_push) => {
@@ -17,7 +17,7 @@ describe('ssr compile: teleport', () => {
   test('disabled prop handling', () => {
     expect(compile(`<teleport :to="target" disabled><div/></teleport>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _ssrRenderTeleport(_push, (_push) => {
@@ -27,9 +27,9 @@ describe('ssr compile: teleport', () => {
       `)
 
     expect(
-      compile(`<teleport :to="target" :disabled="foo"><div/></teleport>`).code
+      compile(`<teleport :to="target" :disabled="foo"><div/></teleport>`).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _ssrRenderTeleport(_push, (_push) => {
diff --git a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
index 1be6a2c18..c3bfd7d8f 100644
--- a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
@@ -7,10 +7,10 @@ describe('ssr: scopeId', () => {
     expect(
       compile(`<div><span>hello</span></div>`, {
         scopeId,
-        mode: 'module'
-      }).code
+        mode: 'module',
+      }).code,
     ).toMatchInlineSnapshot(`
-      "import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
+      "import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
@@ -23,14 +23,14 @@ describe('ssr: scopeId', () => {
     expect(
       compile(`<foo>foo</foo>`, {
         scopeId,
-        mode: 'module'
-      }).code
+        mode: 'module',
+      }).code,
     ).toMatchInlineSnapshot(`
-      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from \\"vue\\"
-      import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
+      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from "vue"
+      import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _push(_ssrRenderComponent(_component_foo, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -38,7 +38,7 @@ describe('ssr: scopeId', () => {
               _push(\`foo\`)
             } else {
               return [
-                _createTextVNode(\\"foo\\")
+                _createTextVNode("foo")
               ]
             }
           }),
@@ -52,14 +52,14 @@ describe('ssr: scopeId', () => {
     expect(
       compile(`<foo><span>hello</span></foo>`, {
         scopeId,
-        mode: 'module'
-      }).code
+        mode: 'module',
+      }).code,
     ).toMatchInlineSnapshot(`
-      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
-      import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
+      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
+      import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _push(_ssrRenderComponent(_component_foo, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -67,7 +67,7 @@ describe('ssr: scopeId', () => {
               _push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
             } else {
               return [
-                _createVNode(\\"span\\", null, \\"hello\\")
+                _createVNode("span", null, "hello")
               ]
             }
           }),
@@ -81,15 +81,15 @@ describe('ssr: scopeId', () => {
     expect(
       compile(`<foo><span>hello</span><bar><span/></bar></foo>`, {
         scopeId,
-        mode: 'module'
-      }).code
+        mode: 'module',
+      }).code,
     ).toMatchInlineSnapshot(`
-      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
-      import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
+      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
+      import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
-        const _component_bar = _resolveComponent(\\"bar\\")
+        const _component_foo = _resolveComponent("foo")
+        const _component_bar = _resolveComponent("bar")
 
         _push(_ssrRenderComponent(_component_foo, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -101,7 +101,7 @@ describe('ssr: scopeId', () => {
                     _push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`)
                   } else {
                     return [
-                      _createVNode(\\"span\\")
+                      _createVNode("span")
                     ]
                   }
                 }),
@@ -109,10 +109,10 @@ describe('ssr: scopeId', () => {
               }, _parent, _scopeId))
             } else {
               return [
-                _createVNode(\\"span\\", null, \\"hello\\"),
+                _createVNode("span", null, "hello"),
                 _createVNode(_component_bar, null, {
                   default: _withCtx(() => [
-                    _createVNode(\\"span\\")
+                    _createVNode("span")
                   ]),
                   _: 1 /* STABLE */
                 })
@@ -132,15 +132,15 @@ describe('ssr: scopeId', () => {
         `<transition-group tag="div" class="red"><span>hello</span></transition-group>`,
         {
           scopeId,
-          mode: 'module'
-        }
-      ).code
+          mode: 'module',
+        },
+      ).code,
     ).toMatchInlineSnapshot(`
-      "import { mergeProps as _mergeProps } from \\"vue\\"
-      import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
+      "import { mergeProps as _mergeProps } from "vue"
+      import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${_ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs))} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
+        _push(\`<div\${_ssrRenderAttrs(_mergeProps({ class: "red" }, _attrs))} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
       }"
     `)
 
@@ -150,18 +150,18 @@ describe('ssr: scopeId', () => {
         `<transition-group :tag="someTag" class="red"><span>hello</span></transition-group>`,
         {
           scopeId,
-          mode: 'module'
-        }
-      ).code
+          mode: 'module',
+        },
+      ).code,
     ).toMatchInlineSnapshot(`
-      "import { mergeProps as _mergeProps } from \\"vue\\"
-      import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
+      "import { mergeProps as _mergeProps } from "vue"
+      import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<\${
           _ctx.someTag
         }\${
-          _ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs))
+          _ssrRenderAttrs(_mergeProps({ class: "red" }, _attrs))
         } data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></\${
           _ctx.someTag
         }>\`)
diff --git a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
index f1a5945c1..86863cfb8 100644
--- a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
@@ -1,30 +1,30 @@
 import { compile } from '../src'
-import { ssrHelpers, SSR_RENDER_SLOT_INNER } from '../src/runtimeHelpers'
+import { SSR_RENDER_SLOT_INNER, ssrHelpers } from '../src/runtimeHelpers'
 
 describe('ssr: <slot>', () => {
   test('basic', () => {
     expect(compile(`<slot/>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
+        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
       }"
     `)
   })
 
   test('with name', () => {
     expect(compile(`<slot name="foo" />`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, \\"foo\\", {}, null, _push, _parent)
+        _ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent)
       }"
     `)
   })
 
   test('with dynamic name', () => {
     expect(compile(`<slot :name="bar.baz" />`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent)
@@ -35,12 +35,12 @@ describe('ssr: <slot>', () => {
   test('with props', () => {
     expect(compile(`<slot name="foo" :p="1" bar="2" />`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _ssrRenderSlot(_ctx.$slots, \\"foo\\", {
+          _ssrRenderSlot(_ctx.$slots, "foo", {
             p: 1,
-            bar: \\"2\\"
+            bar: "2"
           }, null, _push, _parent)
         }"
       `)
@@ -49,10 +49,10 @@ describe('ssr: <slot>', () => {
   test('with fallback', () => {
     expect(compile(`<slot>some {{ fallback }} content</slot>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderSlot: _ssrRenderSlot, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderSlot: _ssrRenderSlot, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, () => {
+          _ssrRenderSlot(_ctx.$slots, "default", {}, () => {
             _push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`)
           }, _push, _parent)
         }"
@@ -62,13 +62,13 @@ describe('ssr: <slot>', () => {
   test('with scopeId', async () => {
     expect(
       compile(`<slot/>`, {
-        scopeId: 'hello'
-      }).code
+        scopeId: 'hello',
+      }).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\")
+        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "hello-s")
       }"
     `)
   })
@@ -77,13 +77,13 @@ describe('ssr: <slot>', () => {
     expect(
       compile(`<slot/>`, {
         scopeId: 'hello',
-        slotted: false
-      }).code
+        slotted: false,
+      }).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
+        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
       }"
     `)
   })
@@ -91,22 +91,22 @@ describe('ssr: <slot>', () => {
   test('with forwarded scopeId', async () => {
     expect(
       compile(`<Comp><slot/></Comp>`, {
-        scopeId: 'hello'
-      }).code
+        scopeId: 'hello',
+      }).code,
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require(\\"vue\\")
-      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require("vue")
+      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_Comp = _resolveComponent(\\"Comp\\")
+        const _component_Comp = _resolveComponent("Comp")
 
         _push(_ssrRenderComponent(_component_Comp, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
-              _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\" + _scopeId)
+              _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "hello-s" + _scopeId)
             } else {
               return [
-                _renderSlot(_ctx.$slots, \\"default\\")
+                _renderSlot(_ctx.$slots, "default")
               ]
             }
           }),
@@ -120,10 +120,42 @@ describe('ssr: <slot>', () => {
     const { code } = compile(`<transition><slot/></transition>`)
     expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER])
     expect(code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlotInner: _ssrRenderSlotInner } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlotInner: _ssrRenderSlotInner } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlotInner(_ctx.$slots, \\"default\\", {}, null, _push, _parent, null, true)
+        _ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true)
+      }"
+    `)
+  })
+
+  test('inside transition-group', () => {
+    const { code } = compile(
+      `<TransitionGroup tag="div"><slot/></TransitionGroup>`,
+    )
+    expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER])
+    expect(code).toMatchInlineSnapshot(`
+      "const { ssrRenderSlotInner: _ssrRenderSlotInner, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
+        _ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true)
+        _push(\`</div>\`)
+      }"
+    `)
+  })
+
+  test('with v-if inside transition', () => {
+    const { code } = compile(`<transition><slot v-if="true"/></transition>`)
+    expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER])
+    expect(code).toMatchInlineSnapshot(`
+      "const { ssrRenderSlotInner: _ssrRenderSlotInner } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (true) {
+          _ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true)
+        } else {
+          _push(\`<!---->\`)
+        }
       }"
     `)
   })
diff --git a/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts b/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
index a4d348019..dd8853c8d 100644
--- a/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
@@ -3,11 +3,11 @@ import { compile } from '../src'
 describe('ssr compile: suspense', () => {
   test('implicit default', () => {
     expect(compile(`<suspense><foo/></suspense>`).code).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _ssrRenderSuspense(_push, {
           default: () => {
@@ -28,13 +28,13 @@ describe('ssr compile: suspense', () => {
       <template #fallback>
         loading...
       </template>
-    </suspense>`).code
+    </suspense>`).code,
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _ssrRenderSuspense(_push, {
           default: () => {
diff --git a/packages/compiler-ssr/__tests__/ssrText.spec.ts b/packages/compiler-ssr/__tests__/ssrText.spec.ts
index 37cf2df37..1aa391e6a 100644
--- a/packages/compiler-ssr/__tests__/ssrText.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrText.spec.ts
@@ -8,7 +8,7 @@ describe('ssr: text', () => {
 
   test('static text with template string special chars', () => {
     expect(getCompiledString(`\`\${foo}\``)).toMatchInlineSnapshot(
-      '"`\\\\`\\\\${foo}\\\\``"'
+      `"\`\\\`\\\${foo}\\\`\`"`,
     )
   })
 
@@ -17,33 +17,33 @@ describe('ssr: text', () => {
     // snapshot -> inline snapshot goes through two escapes
     // so that makes a total of 3 * 2 * 2 = 12 back slashes
     expect(getCompiledString(`\\$foo`)).toMatchInlineSnapshot(
-      '"`\\\\\\\\\\\\$foo`"'
+      `"\`\\\\\\$foo\`"`,
     )
   })
 
   test('comments', () => {
     expect(getCompiledString(`<!--bar-->`)).toMatchInlineSnapshot(
-      `"\`<!--bar-->\`"`
+      `"\`<!--bar-->\`"`,
     )
   })
 
   test('static text escape', () => {
     expect(getCompiledString(`&lt;foo&gt;`)).toMatchInlineSnapshot(
-      `"\`&lt;foo&gt;\`"`
+      `"\`&lt;foo&gt;\`"`,
     )
   })
 
   test('nested elements with static text', () => {
     expect(
-      getCompiledString(`<div><span>hello</span><span>bye</span></div>`)
+      getCompiledString(`<div><span>hello</span><span>bye</span></div>`),
     ).toMatchInlineSnapshot(
-      `"\`<div><span>hello</span><span>bye</span></div>\`"`
+      `"\`<div><span>hello</span><span>bye</span></div>\`"`,
     )
   })
 
   test('interpolation', () => {
     expect(compile(`foo {{ bar }} baz`).code).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+      "const { ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`foo \${_ssrInterpolate(_ctx.bar)} baz\`)
@@ -54,9 +54,9 @@ describe('ssr: text', () => {
   test('nested elements with interpolation', () => {
     expect(
       compile(`<div><span>{{ foo }} bar</span><span>baz {{ qux }}</span></div>`)
-        .code
+        .code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
diff --git a/packages/compiler-ssr/__tests__/ssrTransition.spec.ts b/packages/compiler-ssr/__tests__/ssrTransition.spec.ts
index 319b39022..760393f16 100644
--- a/packages/compiler-ssr/__tests__/ssrTransition.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrTransition.spec.ts
@@ -4,22 +4,22 @@ describe('transition', () => {
   test('basic', () => {
     expect(compile(`<transition><div>foo</div></transition>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${_ssrRenderAttrs(_attrs)}>foo</div>\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<div\${_ssrRenderAttrs(_attrs)}>foo</div>\`)
+        }"
+      `)
   })
 
   test('with appear', () => {
     expect(compile(`<transition appear><div>foo</div></transition>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<template><div\${_ssrRenderAttrs(_attrs)}>foo</div></template>\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<template><div\${_ssrRenderAttrs(_attrs)}>foo</div></template>\`)
+        }"
+      `)
   })
 })
diff --git a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
index 2a3b6d3b4..82122e621 100644
--- a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
@@ -6,9 +6,9 @@ describe('transition-group', () => {
   test('basic', () => {
     expect(
       compile(`<transition-group><div v-for="i in list"/></transition-group>`)
-        .code
+        .code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -23,10 +23,51 @@ describe('transition-group', () => {
   test('with static tag', () => {
     expect(
       compile(
-        `<transition-group tag="ul"><div v-for="i in list"/></transition-group>`
-      ).code
+        `<transition-group tag="ul"><div v-for="i in list"/></transition-group>`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<ul\${_ssrRenderAttrs(_attrs)}>\`)
+        _ssrRenderList(_ctx.list, (i) => {
+          _push(\`<div></div>\`)
+        })
+        _push(\`</ul>\`)
+      }"
+    `)
+  })
+
+  // #11514
+  test('with static tag + v-if comment', () => {
+    expect(
+      compile(
+        `<transition-group tag="ul"><div v-for="i in list"/><div v-if="false"></div></transition-group>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<ul\${_ssrRenderAttrs(_attrs)}>\`)
+        _ssrRenderList(_ctx.list, (i) => {
+          _push(\`<div></div>\`)
+        })
+        if (false) {
+          _push(\`<div></div>\`)
+        }
+        _push(\`</ul>\`)
+      }"
+    `)
+  })
+
+  // #11958
+  test('with static tag + comment', () => {
+    expect(
+      compile(
+        `<transition-group tag="ul"><div v-for="i in list"/><!--test--></transition-group>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<ul\${_ssrRenderAttrs(_attrs)}>\`)
@@ -41,10 +82,10 @@ describe('transition-group', () => {
   test('with dynamic tag', () => {
     expect(
       compile(
-        `<transition-group :tag="someTag"><div v-for="i in list"/></transition-group>`
-      ).code
+        `<transition-group :tag="someTag"><div v-for="i in list"/></transition-group>`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<\${
@@ -67,10 +108,10 @@ describe('transition-group', () => {
               <div v-for="i in 10"/>
               <div v-for="i in 10"/>
               <template v-if="ok"><div>ok</div></template>
-            </transition-group>`
-      ).code
+            </transition-group>`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -82,8 +123,6 @@ describe('transition-group', () => {
         })
         if (_ctx.ok) {
           _push(\`<div>ok</div>\`)
-        } else {
-          _push(\`<!---->\`)
         }
         _push(\`<!--]-->\`)
       }"
@@ -94,16 +133,16 @@ describe('transition-group', () => {
     expect(
       compile(
         `<transition-group tag="ul" class="red" id="ok">
-        </transition-group>`
-      ).code
+        </transition-group>`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<ul\${_ssrRenderAttrs(_mergeProps({
-          class: \\"red\\",
-          id: \\"ok\\"
+          class: "red",
+          id: "ok"
         }, _attrs))}></ul>\`)
       }"
     `)
diff --git a/packages/compiler-ssr/__tests__/ssrVFor.spec.ts b/packages/compiler-ssr/__tests__/ssrVFor.spec.ts
index f34aa03d2..0d9572651 100644
--- a/packages/compiler-ssr/__tests__/ssrVFor.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVFor.spec.ts
@@ -3,7 +3,7 @@ import { compile } from '../src'
 describe('ssr: v-for', () => {
   test('basic', () => {
     expect(compile(`<div v-for="i in list" />`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -18,7 +18,7 @@ describe('ssr: v-for', () => {
   test('nested content', () => {
     expect(compile(`<div v-for="i in list">foo<span>bar</span></div>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<!--[-->\`)
@@ -35,10 +35,10 @@ describe('ssr: v-for', () => {
       compile(
         `<div v-for="row, i in list">` +
           `<div v-for="j in row">{{ i }},{{ j }}</div>` +
-          `</div>`
-      ).code
+          `</div>`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -61,7 +61,7 @@ describe('ssr: v-for', () => {
   test('template v-for (text)', () => {
     expect(compile(`<template v-for="i in list">{{ i }}</template>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+        "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<!--[-->\`)
@@ -76,9 +76,9 @@ describe('ssr: v-for', () => {
   test('template v-for (single element)', () => {
     expect(
       compile(`<template v-for="i in list"><span>{{ i }}</span></template>`)
-        .code
+        .code,
     ).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -93,10 +93,10 @@ describe('ssr: v-for', () => {
   test('template v-for (multi element)', () => {
     expect(
       compile(
-        `<template v-for="i in list"><span>{{ i }}</span><span>{{ i + 1 }}</span></template>`
-      ).code
+        `<template v-for="i in list"><span>{{ i }}</span><span>{{ i + 1 }}</span></template>`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -114,13 +114,13 @@ describe('ssr: v-for', () => {
 
   test('render loop args should not be prefixed', () => {
     const { code } = compile(
-      `<div v-for="{ foo }, index in list">{{ foo + bar + index }}</div>`
+      `<div v-for="{ foo }, index in list">{{ foo + bar + index }}</div>`,
     )
     expect(code).toMatch(`_ctx.bar`)
     expect(code).not.toMatch(`_ctx.foo`)
     expect(code).not.toMatch(`_ctx.index`)
     expect(code).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
diff --git a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts b/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
index f9d81bcca..b544adadc 100644
--- a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
@@ -3,7 +3,7 @@ import { compile } from '../src'
 describe('ssr: v-if', () => {
   test('basic', () => {
     expect(compile(`<div v-if="foo"></div>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
@@ -18,7 +18,7 @@ describe('ssr: v-if', () => {
   test('with nested content', () => {
     expect(compile(`<div v-if="foo">hello<span>ok</span></div>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
@@ -33,7 +33,7 @@ describe('ssr: v-if', () => {
   test('v-if + v-else', () => {
     expect(compile(`<div v-if="foo"/><span v-else/>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
@@ -48,7 +48,7 @@ describe('ssr: v-if', () => {
   test('v-if + v-else-if', () => {
     expect(compile(`<div v-if="foo"/><span v-else-if="bar"/>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
@@ -65,7 +65,7 @@ describe('ssr: v-if', () => {
   test('v-if + v-else-if + v-else', () => {
     expect(compile(`<div v-if="foo"/><span v-else-if="bar"/><p v-else/>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
@@ -97,7 +97,7 @@ describe('ssr: v-if', () => {
     // single element should not wrap with fragment
     expect(compile(`<template v-if="foo"><div>hi</div></template>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
@@ -111,7 +111,8 @@ describe('ssr: v-if', () => {
 
   test('<template v-if> (multiple element)', () => {
     expect(
-      compile(`<template v-if="foo"><div>hi</div><div>ho</div></template>`).code
+      compile(`<template v-if="foo"><div>hi</div><div>ho</div></template>`)
+        .code,
     ).toMatchInlineSnapshot(`
       "
       return function ssrRender(_ctx, _push, _parent, _attrs) {
@@ -126,9 +127,9 @@ describe('ssr: v-if', () => {
 
   test('<template v-if> (with v-for inside)', () => {
     expect(
-      compile(`<template v-if="foo"><div v-for="i in list"/></template>`).code
+      compile(`<template v-if="foo"><div v-for="i in list"/></template>`).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
@@ -147,10 +148,10 @@ describe('ssr: v-if', () => {
   test('<template v-if> + normal v-else', () => {
     expect(
       compile(
-        `<template v-if="foo"><div>hi</div><div>ho</div></template><div v-else/>`
-      ).code
+        `<template v-if="foo"><div>hi</div><div>ho</div></template><div v-else/>`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
diff --git a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
index f28c38d40..f2c04f0a5 100644
--- a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
@@ -8,26 +8,26 @@ describe('ssr: v-model', () => {
   test('<input> (text types)', () => {
     expect(compileWithWrapper(`<input v-model="bar">`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
           }><input\${
-            _ssrRenderAttr(\\"value\\", _ctx.bar)
+            _ssrRenderAttr("value", _ctx.bar)
           }></div>\`)
         }"
       `)
 
     expect(compileWithWrapper(`<input type="email" v-model="bar">`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
-          }><input type=\\"email\\"\${
-            _ssrRenderAttr(\\"value\\", _ctx.bar)
+          }><input type="email"\${
+            _ssrRenderAttr("value", _ctx.bar)
           }></div>\`)
         }"
       `)
@@ -36,49 +36,49 @@ describe('ssr: v-model', () => {
   test('<select v-model>', () => {
     expect(
       compileWithWrapper(
-        `<select v-model="model"><option value="1"></option></select>`
-      ).code
+        `<select v-model="model"><option value="1"></option></select>`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><select><option value=\\"1\\"\${
+        }><select><option value="1"\${
           (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
-            ? _ssrLooseContain(_ctx.model, \\"1\\")
-            : _ssrLooseEqual(_ctx.model, \\"1\\"))) ? \\" selected\\" : \\"\\"
+            ? _ssrLooseContain(_ctx.model, "1")
+            : _ssrLooseEqual(_ctx.model, "1"))) ? " selected" : ""
         }></option></select></div>\`)
       }"
     `)
 
     expect(
       compileWithWrapper(
-        `<select multiple v-model="model"><option value="1" selected></option><option value="2"></option></select>`
-      ).code
+        `<select multiple v-model="model"><option value="1" selected></option><option value="2"></option></select>`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><select multiple><option value=\\"1\\" selected></option><option value=\\"2\\"\${
+        }><select multiple><option value="1" selected></option><option value="2"\${
           (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
-            ? _ssrLooseContain(_ctx.model, \\"2\\")
-            : _ssrLooseEqual(_ctx.model, \\"2\\"))) ? \\" selected\\" : \\"\\"
+            ? _ssrLooseContain(_ctx.model, "2")
+            : _ssrLooseEqual(_ctx.model, "2"))) ? " selected" : ""
         }></option></select></div>\`)
       }"
     `)
 
     expect(
       compileWithWrapper(`<select multiple v-model="model"><slot/></select>`)
-        .code
+        .code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple>\`)
-        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
+        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
         _push(\`</select></div>\`)
       }"
     `)
@@ -89,17 +89,17 @@ describe('ssr: v-model', () => {
           <optgroup label="foo">
             <option value="bar">bar</option>
           </optgroup>
-        </select>`).code
+        </select>`).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><select multiple><optgroup label=\\"foo\\"><option value=\\"bar\\"\${
+        }><select multiple><optgroup label="foo"><option value="bar"\${
           (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
-            ? _ssrLooseContain(_ctx.model, \\"bar\\")
-            : _ssrLooseEqual(_ctx.model, \\"bar\\"))) ? \\" selected\\" : \\"\\"
+            ? _ssrLooseContain(_ctx.model, "bar")
+            : _ssrLooseEqual(_ctx.model, "bar"))) ? " selected" : ""
         }>bar</option></optgroup></select></div>\`)
       }"
     `)
@@ -110,13 +110,13 @@ describe('ssr: v-model', () => {
           <optgroup label="foo">
             <slot/>
           </optgroup>
-        </select>`).code
+        </select>`).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup label=\\"foo\\">\`)
-        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup label="foo">\`)
+        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
         _push(\`</optgroup></select></div>\`)
       }"
     `)
@@ -124,15 +124,15 @@ describe('ssr: v-model', () => {
 
   test('<input type="radio">', () => {
     expect(
-      compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code
+      compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type=\\"radio\\" value=\\"foo\\"\${
-          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, \\"foo\\"))) ? \\" checked\\" : \\"\\"
+        }><input type="radio" value="foo"\${
+          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, "foo"))) ? " checked" : ""
         }></div>\`)
       }"
     `)
@@ -141,64 +141,64 @@ describe('ssr: v-model', () => {
   test('<input type="checkbox">', () => {
     expect(compileWithWrapper(`<input type="checkbox" v-model="bar">`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
-          }><input type=\\"checkbox\\"\${
+          }><input type="checkbox"\${
             (_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
               ? _ssrLooseContain(_ctx.bar, null)
-              : _ctx.bar)) ? \\" checked\\" : \\"\\"
+              : _ctx.bar)) ? " checked" : ""
           }></div>\`)
         }"
       `)
 
     expect(
       compileWithWrapper(`<input type="checkbox" value="foo" v-model="bar">`)
-        .code
+        .code,
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type=\\"checkbox\\" value=\\"foo\\"\${
+        }><input type="checkbox" value="foo"\${
           (_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
-            ? _ssrLooseContain(_ctx.bar, \\"foo\\")
-            : _ctx.bar)) ? \\" checked\\" : \\"\\"
+            ? _ssrLooseContain(_ctx.bar, "foo")
+            : _ctx.bar)) ? " checked" : ""
         }></div>\`)
       }"
     `)
 
     expect(
       compileWithWrapper(
-        `<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">`
-      ).code
+        `<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type=\\"checkbox\\"\${
-          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? \\" checked\\" : \\"\\"
+        }><input type="checkbox"\${
+          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? " checked" : ""
         }></div>\`)
       }"
     `)
 
     expect(
       compileWithWrapper(
-        `<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">`
-      ).code
+        `<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type=\\"checkbox\\"\${
-          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, \\"foo\\"))) ? \\" checked\\" : \\"\\"
+        }><input type="checkbox"\${
+          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, "foo"))) ? " checked" : ""
         }></div>\`)
       }"
     `)
@@ -207,7 +207,7 @@ describe('ssr: v-model', () => {
   test('<textarea>', () => {
     expect(compileWithWrapper(`<textarea v-model="foo">bar</textarea>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
@@ -222,13 +222,13 @@ describe('ssr: v-model', () => {
   test('<input :type="x">', () => {
     expect(compileWithWrapper(`<input :type="x" v-model="foo">`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
           }><input\${
-            _ssrRenderAttr(\\"type\\", _ctx.x)
+            _ssrRenderAttr("type", _ctx.x)
           }\${
             _ssrRenderDynamicModel(_ctx.x, _ctx.foo, null)
           }></div>\`)
@@ -236,35 +236,35 @@ describe('ssr: v-model', () => {
       `)
 
     expect(
-      compileWithWrapper(`<input :type="x" v-model="foo" value="bar">`).code
+      compileWithWrapper(`<input :type="x" v-model="foo" value="bar">`).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
         }><input\${
-          _ssrRenderAttr(\\"type\\", _ctx.x)
+          _ssrRenderAttr("type", _ctx.x)
         }\${
-          _ssrRenderDynamicModel(_ctx.x, _ctx.foo, \\"bar\\")
-        } value=\\"bar\\"></div>\`)
+          _ssrRenderDynamicModel(_ctx.x, _ctx.foo, "bar")
+        } value="bar"></div>\`)
       }"
     `)
 
     expect(
-      compileWithWrapper(`<input :type="x" v-model="foo" :value="bar">`).code
+      compileWithWrapper(`<input :type="x" v-model="foo" :value="bar">`).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
         }><input\${
-          _ssrRenderAttr(\\"type\\", _ctx.x)
+          _ssrRenderAttr("type", _ctx.x)
         }\${
           _ssrRenderDynamicModel(_ctx.x, _ctx.foo, _ctx.bar)
         }\${
-          _ssrRenderAttr(\\"value\\", _ctx.bar)
+          _ssrRenderAttr("value", _ctx.bar)
         }></div>\`)
       }"
     `)
@@ -273,8 +273,8 @@ describe('ssr: v-model', () => {
   test('<input v-bind="obj">', () => {
     expect(compileWithWrapper(`<input v-bind="obj" v-model="foo">`).code)
       .toMatchInlineSnapshot(`
-        "const { mergeProps: _mergeProps } = require(\\"vue\\")
-        const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
+        "const { mergeProps: _mergeProps } = require("vue")
+        const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           let _temp0
@@ -289,10 +289,10 @@ describe('ssr: v-model', () => {
 
     expect(
       compileWithWrapper(`<input id="x" v-bind="obj" v-model="foo" class="y">`)
-        .code
+        .code,
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         let _temp0
@@ -300,7 +300,7 @@ describe('ssr: v-model', () => {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
         }><input\${
-          _ssrRenderAttrs((_temp0 = _mergeProps({ id: \\"x\\" }, _ctx.obj, { class: \\"y\\" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
+          _ssrRenderAttrs((_temp0 = _mergeProps({ id: "x" }, _ctx.obj, { class: "y" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
         }></div>\`)
       }"
     `)
diff --git a/packages/compiler-ssr/__tests__/ssrVShow.spec.ts b/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
index 089d39af7..d0f3ec930 100644
--- a/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
@@ -7,12 +7,12 @@ function compileWithWrapper(src: string) {
 describe('ssr: v-show', () => {
   test('basic as root', () => {
     expect(compile(`<div v-show="foo"/>`).code).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${_ssrRenderAttrs(_mergeProps({
-          style: (_ctx.foo) ? null : { display: \\"none\\" }
+          style: (_ctx.foo) ? null : { display: "none" }
         }, _attrs))}></div>\`)
       }"
     `)
@@ -21,14 +21,14 @@ describe('ssr: v-show', () => {
   test('basic', () => {
     expect(compileWithWrapper(`<div v-show="foo"/>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
-          }><div style=\\"\${
-            _ssrRenderStyle((_ctx.foo) ? null : { display: \\"none\\" })
-          }\\"></div></div>\`)
+          }><div style="\${
+            _ssrRenderStyle((_ctx.foo) ? null : { display: "none" })
+          }"></div></div>\`)
         }"
       `)
   })
@@ -36,36 +36,36 @@ describe('ssr: v-show', () => {
   test('with static style', () => {
     expect(compileWithWrapper(`<div style="color:red" v-show="foo"/>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
-          }><div style=\\"\${
+          }><div style="\${
             _ssrRenderStyle([
-              {\\"color\\":\\"red\\"},
-              (_ctx.foo) ? null : { display: \\"none\\" }
+              {"color":"red"},
+              (_ctx.foo) ? null : { display: "none" }
             ])
-          }\\"></div></div>\`)
+          }"></div></div>\`)
         }"
       `)
   })
 
   test('with dynamic style', () => {
     expect(
-      compileWithWrapper(`<div :style="{ color: 'red' }" v-show="foo"/>`).code
+      compileWithWrapper(`<div :style="{ color: 'red' }" v-show="foo"/>`).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><div style=\\"\${
+        }><div style="\${
           _ssrRenderStyle([
             { color: 'red' },
-            (_ctx.foo) ? null : { display: \\"none\\" }
+            (_ctx.foo) ? null : { display: "none" }
           ])
-        }\\"></div></div>\`)
+        }"></div></div>\`)
       }"
     `)
   })
@@ -73,21 +73,21 @@ describe('ssr: v-show', () => {
   test('with static + dynamic style', () => {
     expect(
       compileWithWrapper(
-        `<div style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
-      ).code
+        `<div style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><div style=\\"\${
+        }><div style="\${
           _ssrRenderStyle([
-            {\\"color\\":\\"red\\"},
+            {"color":"red"},
             { fontSize: 14 },
-            (_ctx.foo) ? null : { display: \\"none\\" }
+            (_ctx.foo) ? null : { display: "none" }
           ])
-        }\\"></div></div>\`)
+        }"></div></div>\`)
       }"
     `)
   })
@@ -95,11 +95,11 @@ describe('ssr: v-show', () => {
   test('with v-bind', () => {
     expect(
       compileWithWrapper(
-        `<div v-bind="baz" style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
-      ).code
+        `<div v-bind="baz" style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`,
+      ).code,
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
@@ -107,9 +107,9 @@ describe('ssr: v-show', () => {
         }><div\${
           _ssrRenderAttrs(_mergeProps(_ctx.baz, {
             style: [
-              {\\"color\\":\\"red\\"},
+              {"color":"red"},
               { fontSize: 14 },
-              (_ctx.foo) ? null : { display: \\"none\\" }
+              (_ctx.foo) ? null : { display: "none" }
             ]
           }))
         }></div></div>\`)
diff --git a/packages/compiler-ssr/__tests__/utils.ts b/packages/compiler-ssr/__tests__/utils.ts
index 08dec4deb..c656517cd 100644
--- a/packages/compiler-ssr/__tests__/utils.ts
+++ b/packages/compiler-ssr/__tests__/utils.ts
@@ -6,7 +6,7 @@ export function getCompiledString(src: string): string {
   // but also means this util can only be used for non-root cases.
   const { code } = compile(`<div>${src}</div>`)
   const match = code.match(
-    /_push\(\`<div\${\s*_ssrRenderAttrs\(_attrs\)\s*}>([^]*)<\/div>\`\)/
+    /_push\(\`<div\${\s*_ssrRenderAttrs\(_attrs\)\s*}>([^]*)<\/div>\`\)/,
   )
 
   if (!match) {
diff --git a/packages/compiler-ssr/package.json b/packages/compiler-ssr/package.json
index 59eda541b..16da421ad 100644
--- a/packages/compiler-ssr/package.json
+++ b/packages/compiler-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-ssr",
-  "version": "3.3.9",
+  "version": "3.5.11",
   "description": "@vue/compiler-ssr",
   "main": "dist/compiler-ssr.cjs.js",
   "types": "dist/compiler-ssr.d.ts",
diff --git a/packages/compiler-ssr/src/errors.ts b/packages/compiler-ssr/src/errors.ts
index e8e5a3a54..e4fd505d2 100644
--- a/packages/compiler-ssr/src/errors.ts
+++ b/packages/compiler-ssr/src/errors.ts
@@ -1,8 +1,8 @@
 import {
-  SourceLocation,
-  CompilerError,
+  type CompilerError,
+  DOMErrorCodes,
+  type SourceLocation,
   createCompilerError,
-  DOMErrorCodes
 } from '@vue/compiler-dom'
 
 export interface SSRCompilerError extends CompilerError {
@@ -11,26 +11,26 @@ export interface SSRCompilerError extends CompilerError {
 
 export function createSSRCompilerError(
   code: SSRErrorCodes,
-  loc?: SourceLocation
+  loc?: SourceLocation,
 ) {
   return createCompilerError(code, loc, SSRErrorMessages) as SSRCompilerError
 }
 
-export const enum SSRErrorCodes {
+export enum SSRErrorCodes {
   X_SSR_UNSAFE_ATTR_NAME = 65 /* DOMErrorCodes.__EXTEND_POINT__ */,
   X_SSR_NO_TELEPORT_TARGET,
-  X_SSR_INVALID_AST_NODE
+  X_SSR_INVALID_AST_NODE,
 }
 
 if (__TEST__) {
-  // esbuild cannot infer const enum increments if first value is from another
+  // esbuild cannot infer enum increments if first value is from another
   // file, so we have to manually keep them in sync. this check ensures it
   // errors out if there are collisions.
   if (SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME < DOMErrorCodes.__EXTEND_POINT__) {
     throw new Error(
       `SSRErrorCodes need to be updated to ${
         DOMErrorCodes.__EXTEND_POINT__ + 1
-      } to match extension point from core DOMErrorCodes.`
+      } to match extension point from core DOMErrorCodes.`,
     )
   }
 }
@@ -38,5 +38,5 @@ if (__TEST__) {
 export const SSRErrorMessages: { [code: number]: string } = {
   [SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME]: `Unsafe attribute name for SSR.`,
   [SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET]: `Missing the 'to' prop on teleport element.`,
-  [SSRErrorCodes.X_SSR_INVALID_AST_NODE]: `Invalid AST node during SSR transform.`
+  [SSRErrorCodes.X_SSR_INVALID_AST_NODE]: `Invalid AST node during SSR transform.`,
 }
diff --git a/packages/compiler-ssr/src/index.ts b/packages/compiler-ssr/src/index.ts
index 1e5f90550..f8a686555 100644
--- a/packages/compiler-ssr/src/index.ts
+++ b/packages/compiler-ssr/src/index.ts
@@ -1,23 +1,24 @@
 import {
-  CodegenResult,
+  type CodegenResult,
+  type CompilerOptions,
+  type RootNode,
   baseParse,
-  parserOptions,
-  transform,
   generate,
-  CompilerOptions,
-  transformExpression,
-  trackVForSlotScopes,
-  trackSlotScopes,
   noopDirectiveTransform,
+  parserOptions,
+  trackSlotScopes,
+  trackVForSlotScopes,
+  transform,
   transformBind,
+  transformExpression,
+  transformOn,
   transformStyle,
-  transformOn
 } from '@vue/compiler-dom'
 import { ssrCodegenTransform } from './ssrCodegenTransform'
 import { ssrTransformElement } from './transforms/ssrTransformElement'
 import {
+  rawOptionsMap,
   ssrTransformComponent,
-  rawOptionsMap
 } from './transforms/ssrTransformComponent'
 import { ssrTransformSlotOutlet } from './transforms/ssrTransformSlotOutlet'
 import { ssrTransformIf } from './transforms/ssrVIf'
@@ -28,12 +29,11 @@ import { ssrInjectFallthroughAttrs } from './transforms/ssrInjectFallthroughAttr
 import { ssrInjectCssVars } from './transforms/ssrInjectCssVars'
 
 export function compile(
-  template: string,
-  options: CompilerOptions = {}
+  source: string | RootNode,
+  options: CompilerOptions = {},
 ): CodegenResult {
   options = {
     ...options,
-    // apply DOM-specific parsing options
     ...parserOptions,
     ssr: true,
     inSSR: true,
@@ -42,10 +42,10 @@ export function compile(
     prefixIdentifiers: true,
     // disable optimizations that are unnecessary for ssr
     cacheHandlers: false,
-    hoistStatic: false
+    hoistStatic: false,
   }
 
-  const ast = baseParse(template, options)
+  const ast = typeof source === 'string' ? baseParse(source, options) : source
 
   // Save raw options for AST. This is needed when performing sub-transforms
   // on slot vnode branches.
@@ -66,7 +66,7 @@ export function compile(
       ssrTransformComponent,
       trackSlotScopes,
       transformStyle,
-      ...(options.nodeTransforms || []) // user transforms
+      ...(options.nodeTransforms || []), // user transforms
     ],
     directiveTransforms: {
       // reusing core v-bind
@@ -80,8 +80,8 @@ export function compile(
       cloak: noopDirectiveTransform,
       once: noopDirectiveTransform,
       memo: noopDirectiveTransform,
-      ...(options.directiveTransforms || {}) // user transforms
-    }
+      ...(options.directiveTransforms || {}), // user transforms
+    },
   })
 
   // traverse the template AST and convert into SSR codegen AST
diff --git a/packages/compiler-ssr/src/runtimeHelpers.ts b/packages/compiler-ssr/src/runtimeHelpers.ts
index 220af4854..0e2c8c67b 100644
--- a/packages/compiler-ssr/src/runtimeHelpers.ts
+++ b/packages/compiler-ssr/src/runtimeHelpers.ts
@@ -1,26 +1,34 @@
 import { registerRuntimeHelpers } from '@vue/compiler-dom'
 
-export const SSR_INTERPOLATE = Symbol(`ssrInterpolate`)
-export const SSR_RENDER_VNODE = Symbol(`ssrRenderVNode`)
-export const SSR_RENDER_COMPONENT = Symbol(`ssrRenderComponent`)
-export const SSR_RENDER_SLOT = Symbol(`ssrRenderSlot`)
-export const SSR_RENDER_SLOT_INNER = Symbol(`ssrRenderSlotInner`)
-export const SSR_RENDER_CLASS = Symbol(`ssrRenderClass`)
-export const SSR_RENDER_STYLE = Symbol(`ssrRenderStyle`)
-export const SSR_RENDER_ATTRS = Symbol(`ssrRenderAttrs`)
-export const SSR_RENDER_ATTR = Symbol(`ssrRenderAttr`)
-export const SSR_RENDER_DYNAMIC_ATTR = Symbol(`ssrRenderDynamicAttr`)
-export const SSR_RENDER_LIST = Symbol(`ssrRenderList`)
-export const SSR_INCLUDE_BOOLEAN_ATTR = Symbol(`ssrIncludeBooleanAttr`)
-export const SSR_LOOSE_EQUAL = Symbol(`ssrLooseEqual`)
-export const SSR_LOOSE_CONTAIN = Symbol(`ssrLooseContain`)
-export const SSR_RENDER_DYNAMIC_MODEL = Symbol(`ssrRenderDynamicModel`)
-export const SSR_GET_DYNAMIC_MODEL_PROPS = Symbol(`ssrGetDynamicModelProps`)
-export const SSR_RENDER_TELEPORT = Symbol(`ssrRenderTeleport`)
-export const SSR_RENDER_SUSPENSE = Symbol(`ssrRenderSuspense`)
-export const SSR_GET_DIRECTIVE_PROPS = Symbol(`ssrGetDirectiveProps`)
+export const SSR_INTERPOLATE: unique symbol = Symbol(`ssrInterpolate`)
+export const SSR_RENDER_VNODE: unique symbol = Symbol(`ssrRenderVNode`)
+export const SSR_RENDER_COMPONENT: unique symbol = Symbol(`ssrRenderComponent`)
+export const SSR_RENDER_SLOT: unique symbol = Symbol(`ssrRenderSlot`)
+export const SSR_RENDER_SLOT_INNER: unique symbol = Symbol(`ssrRenderSlotInner`)
+export const SSR_RENDER_CLASS: unique symbol = Symbol(`ssrRenderClass`)
+export const SSR_RENDER_STYLE: unique symbol = Symbol(`ssrRenderStyle`)
+export const SSR_RENDER_ATTRS: unique symbol = Symbol(`ssrRenderAttrs`)
+export const SSR_RENDER_ATTR: unique symbol = Symbol(`ssrRenderAttr`)
+export const SSR_RENDER_DYNAMIC_ATTR: unique symbol =
+  Symbol(`ssrRenderDynamicAttr`)
+export const SSR_RENDER_LIST: unique symbol = Symbol(`ssrRenderList`)
+export const SSR_INCLUDE_BOOLEAN_ATTR: unique symbol = Symbol(
+  `ssrIncludeBooleanAttr`,
+)
+export const SSR_LOOSE_EQUAL: unique symbol = Symbol(`ssrLooseEqual`)
+export const SSR_LOOSE_CONTAIN: unique symbol = Symbol(`ssrLooseContain`)
+export const SSR_RENDER_DYNAMIC_MODEL: unique symbol = Symbol(
+  `ssrRenderDynamicModel`,
+)
+export const SSR_GET_DYNAMIC_MODEL_PROPS: unique symbol = Symbol(
+  `ssrGetDynamicModelProps`,
+)
+export const SSR_RENDER_TELEPORT: unique symbol = Symbol(`ssrRenderTeleport`)
+export const SSR_RENDER_SUSPENSE: unique symbol = Symbol(`ssrRenderSuspense`)
+export const SSR_GET_DIRECTIVE_PROPS: unique symbol =
+  Symbol(`ssrGetDirectiveProps`)
 
-export const ssrHelpers = {
+export const ssrHelpers: Record<symbol, string> = {
   [SSR_INTERPOLATE]: `ssrInterpolate`,
   [SSR_RENDER_VNODE]: `ssrRenderVNode`,
   [SSR_RENDER_COMPONENT]: `ssrRenderComponent`,
@@ -39,7 +47,7 @@ export const ssrHelpers = {
   [SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`,
   [SSR_RENDER_TELEPORT]: `ssrRenderTeleport`,
   [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`,
-  [SSR_GET_DIRECTIVE_PROPS]: `ssrGetDirectiveProps`
+  [SSR_GET_DIRECTIVE_PROPS]: `ssrGetDirectiveProps`,
 }
 
 // Note: these are helpers imported from @vue/server-renderer
diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
index 954863b53..536cbb5c1 100644
--- a/packages/compiler-ssr/src/ssrCodegenTransform.ts
+++ b/packages/compiler-ssr/src/ssrCodegenTransform.ts
@@ -1,31 +1,33 @@
 import {
-  RootNode,
-  BlockStatement,
-  TemplateLiteral,
-  createCallExpression,
-  createTemplateLiteral,
-  NodeTypes,
-  TemplateChildNode,
+  type BlockStatement,
+  type CallExpression,
+  type CompilerError,
+  type CompilerOptions,
   ElementTypes,
+  type IfStatement,
+  type JSChildNode,
+  NodeTypes,
+  type RootNode,
+  type TemplateChildNode,
+  type TemplateLiteral,
   createBlockStatement,
-  CompilerOptions,
-  IfStatement,
-  CallExpression,
+  createCallExpression,
+  createCompoundExpression,
+  createRoot,
+  createSimpleExpression,
+  createTemplateLiteral,
+  createTransformContext,
   isText,
   processExpression,
-  createSimpleExpression,
-  createCompoundExpression,
-  createTransformContext,
-  createRoot
 } from '@vue/compiler-dom'
-import { isString, escapeHtml } from '@vue/shared'
+import { escapeHtml, isString } from '@vue/shared'
 import { SSR_INTERPOLATE, ssrHelpers } from './runtimeHelpers'
 import { ssrProcessIf } from './transforms/ssrVIf'
 import { ssrProcessFor } from './transforms/ssrVFor'
 import { ssrProcessSlotOutlet } from './transforms/ssrTransformSlotOutlet'
 import { ssrProcessComponent } from './transforms/ssrTransformComponent'
 import { ssrProcessElement } from './transforms/ssrTransformElement'
-import { createSSRCompilerError, SSRErrorCodes } from './errors'
+import { SSRErrorCodes, createSSRCompilerError } from './errors'
 
 // Because SSR codegen output is completely different from client-side output
 // (e.g. multiple elements can be concatenated into a single template literal
@@ -33,7 +35,10 @@ import { createSSRCompilerError, SSRErrorCodes } from './errors'
 // transform pass to convert the template AST into a fresh JS AST before
 // passing it to codegen.
 
-export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
+export function ssrCodegenTransform(
+  ast: RootNode,
+  options: CompilerOptions,
+): void {
   const context = createSSRTransformContext(ast, options)
 
   // inject SFC <style> CSS variables
@@ -43,10 +48,10 @@ export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
     const cssContext = createTransformContext(createRoot([]), options)
     const varsExp = processExpression(
       createSimpleExpression(options.ssrCssVars, false),
-      cssContext
+      cssContext,
     )
     context.body.push(
-      createCompoundExpression([`const _cssVars = { style: `, varsExp, `}`])
+      createCompoundExpression([`const _cssVars = { style: `, varsExp, `}`]),
     )
     Array.from(cssContext.helpers.keys()).forEach(helper => {
       ast.helpers.add(helper)
@@ -63,21 +68,31 @@ export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
   ast.ssrHelpers = Array.from(
     new Set([
       ...Array.from(ast.helpers).filter(h => h in ssrHelpers),
-      ...context.helpers
-    ])
+      ...context.helpers,
+    ]),
   )
 
   ast.helpers = new Set(Array.from(ast.helpers).filter(h => !(h in ssrHelpers)))
 }
 
-export type SSRTransformContext = ReturnType<typeof createSSRTransformContext>
+export interface SSRTransformContext {
+  root: RootNode
+  options: CompilerOptions
+  body: (JSChildNode | IfStatement)[]
+  helpers: Set<symbol>
+  withSlotScopeId: boolean
+  onError: (error: CompilerError) => void
+  helper<T extends symbol>(name: T): T
+  pushStringPart(part: TemplateLiteral['elements'][0]): void
+  pushStatement(statement: IfStatement | CallExpression): void
+}
 
 function createSSRTransformContext(
   root: RootNode,
   options: CompilerOptions,
   helpers: Set<symbol> = new Set(),
-  withSlotScopeId = false
-) {
+  withSlotScopeId = false,
+): SSRTransformContext {
   const body: BlockStatement['body'] = []
   let currentString: TemplateLiteral | null = null
 
@@ -96,7 +111,7 @@ function createSSRTransformContext(
       helpers.add(name)
       return name
     },
-    pushStringPart(part: TemplateLiteral['elements'][0]) {
+    pushStringPart(part) {
       if (!currentString) {
         const currentCall = createCallExpression(`_push`)
         body.push(currentCall)
@@ -111,24 +126,24 @@ function createSSRTransformContext(
         bufferedElements.push(part)
       }
     },
-    pushStatement(statement: IfStatement | CallExpression) {
+    pushStatement(statement) {
       // close current string
       currentString = null
       body.push(statement)
-    }
+    },
   }
 }
 
 function createChildContext(
   parent: SSRTransformContext,
-  withSlotScopeId = parent.withSlotScopeId
+  withSlotScopeId = parent.withSlotScopeId,
 ): SSRTransformContext {
   // ensure child inherits parent helpers
   return createSSRTransformContext(
     parent.root,
     parent.options,
     parent.helpers,
-    withSlotScopeId
+    withSlotScopeId,
   )
 }
 
@@ -140,8 +155,9 @@ export function processChildren(
   parent: Container,
   context: SSRTransformContext,
   asFragment = false,
-  disableNestedFragments = false
-) {
+  disableNestedFragments = false,
+  disableComment = false,
+): void {
   if (asFragment) {
     context.pushStringPart(`<!--[-->`)
   }
@@ -167,8 +183,8 @@ export function processChildren(
             context.onError(
               createSSRCompilerError(
                 SSRErrorCodes.X_SSR_INVALID_AST_NODE,
-                (child as any).loc
-              )
+                (child as any).loc,
+              ),
             )
             // make sure we exhaust all possible types
             const exhaustiveCheck: never = child
@@ -181,15 +197,19 @@ export function processChildren(
       case NodeTypes.COMMENT:
         // no need to escape comment here because the AST can only
         // contain valid comments.
-        context.pushStringPart(`<!--${child.content}-->`)
+        if (!disableComment) {
+          context.pushStringPart(`<!--${child.content}-->`)
+        }
         break
       case NodeTypes.INTERPOLATION:
         context.pushStringPart(
-          createCallExpression(context.helper(SSR_INTERPOLATE), [child.content])
+          createCallExpression(context.helper(SSR_INTERPOLATE), [
+            child.content,
+          ]),
         )
         break
       case NodeTypes.IF:
-        ssrProcessIf(child, context, disableNestedFragments)
+        ssrProcessIf(child, context, disableNestedFragments, disableComment)
         break
       case NodeTypes.FOR:
         ssrProcessFor(child, context, disableNestedFragments)
@@ -206,8 +226,8 @@ export function processChildren(
         context.onError(
           createSSRCompilerError(
             SSRErrorCodes.X_SSR_INVALID_AST_NODE,
-            (child as any).loc
-          )
+            (child as any).loc,
+          ),
         )
         // make sure we exhaust all possible types
         const exhaustiveCheck: never = child
@@ -223,7 +243,7 @@ export function processChildrenAsStatement(
   parent: Container,
   parentContext: SSRTransformContext,
   asFragment = false,
-  withSlotScopeId = parentContext.withSlotScopeId
+  withSlotScopeId: boolean = parentContext.withSlotScopeId,
 ): BlockStatement {
   const childContext = createChildContext(parentContext, withSlotScopeId)
   processChildren(parent, childContext, asFragment)
diff --git a/packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts b/packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts
index d5c0daee7..7a69414ce 100644
--- a/packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts
+++ b/packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts
@@ -1,13 +1,12 @@
 import {
-  NodeTransform,
-  NodeTypes,
   ElementTypes,
-  locStub,
+  type NodeTransform,
+  NodeTypes,
+  type RootNode,
+  type TemplateChildNode,
   createSimpleExpression,
-  RootNode,
-  TemplateChildNode,
   findDir,
-  isBuiltInType
+  locStub,
 } from '@vue/compiler-dom'
 
 export const ssrInjectCssVars: NodeTransform = (node, context) => {
@@ -43,7 +42,7 @@ function injectCssVars(node: RootNode | TemplateChildNode) {
       node.tagType === ElementTypes.COMPONENT) &&
     !findDir(node, 'for')
   ) {
-    if (isBuiltInType(node.tag, 'Suspense')) {
+    if (node.tag === 'suspense' || node.tag === 'Suspense') {
       for (const child of node.children) {
         if (
           child.type === NodeTypes.ELEMENT &&
@@ -62,7 +61,7 @@ function injectCssVars(node: RootNode | TemplateChildNode) {
         arg: undefined,
         exp: createSimpleExpression(`_cssVars`, false),
         modifiers: [],
-        loc: locStub
+        loc: locStub,
       })
     }
   }
diff --git a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
index 2b5c350a5..b1aac0d74 100644
--- a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
+++ b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
@@ -1,14 +1,13 @@
 import {
-  NodeTransform,
-  NodeTypes,
   ElementTypes,
-  locStub,
+  type NodeTransform,
+  NodeTypes,
+  type ParentNode,
+  type RootNode,
+  type TemplateChildNode,
   createSimpleExpression,
-  RootNode,
-  TemplateChildNode,
-  ParentNode,
   findDir,
-  isBuiltInType
+  locStub,
 } from '@vue/compiler-dom'
 
 const filterChild = (node: ParentNode) =>
@@ -28,8 +27,10 @@ export const ssrInjectFallthroughAttrs: NodeTransform = (node, context) => {
   if (
     node.type === NodeTypes.ELEMENT &&
     node.tagType === ElementTypes.COMPONENT &&
-    (isBuiltInType(node.tag, 'Transition') ||
-      isBuiltInType(node.tag, 'KeepAlive'))
+    (node.tag === 'transition' ||
+      node.tag === 'Transition' ||
+      node.tag === 'KeepAlive' ||
+      node.tag === 'keep-alive')
   ) {
     const rootChildren = filterChild(context.root)
     if (rootChildren.length === 1 && rootChildren[0] === node) {
@@ -84,7 +85,7 @@ function injectFallthroughAttrs(node: RootNode | TemplateChildNode) {
       arg: undefined,
       exp: createSimpleExpression(`_attrs`, false),
       modifiers: [],
-      loc: locStub
+      loc: locStub,
     })
   }
 }
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index 7a12cb290..cad1ee810 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -1,64 +1,65 @@
 import {
-  NodeTransform,
-  NodeTypes,
-  ElementTypes,
-  createCallExpression,
-  resolveComponentType,
-  buildProps,
-  ComponentNode,
-  SlotFnBuilder,
-  createFunctionExpression,
-  buildSlots,
-  FunctionExpression,
-  TemplateChildNode,
-  createIfStatement,
-  createSimpleExpression,
-  getBaseTransformPreset,
-  DOMNodeTransforms,
-  DOMDirectiveTransforms,
-  createReturnStatement,
-  ReturnStatement,
-  Namespaces,
-  locStub,
-  RootNode,
-  TransformContext,
-  CompilerOptions,
-  TransformOptions,
-  createRoot,
-  createTransformContext,
-  traverseNode,
-  ExpressionNode,
-  TemplateNode,
-  SUSPENSE,
-  TELEPORT,
-  TRANSITION_GROUP,
   CREATE_VNODE,
-  CallExpression,
-  JSChildNode,
+  type CallExpression,
+  type CompilerOptions,
+  type ComponentNode,
+  DOMDirectiveTransforms,
+  DOMNodeTransforms,
+  type DirectiveNode,
+  ElementTypes,
+  type ExpressionNode,
+  type FunctionExpression,
+  type JSChildNode,
+  Namespaces,
+  type NodeTransform,
+  NodeTypes,
   RESOLVE_DYNAMIC_COMPONENT,
+  type ReturnStatement,
+  type RootNode,
+  SUSPENSE,
+  type SlotFnBuilder,
+  TELEPORT,
   TRANSITION,
-  stringifyExpression
+  TRANSITION_GROUP,
+  type TemplateChildNode,
+  type TemplateNode,
+  type TransformContext,
+  type TransformOptions,
+  buildProps,
+  buildSlots,
+  createCallExpression,
+  createFunctionExpression,
+  createIfStatement,
+  createReturnStatement,
+  createRoot,
+  createSimpleExpression,
+  createTransformContext,
+  getBaseTransformPreset,
+  locStub,
+  resolveComponentType,
+  stringifyExpression,
+  traverseNode,
 } from '@vue/compiler-dom'
 import { SSR_RENDER_COMPONENT, SSR_RENDER_VNODE } from '../runtimeHelpers'
 import {
-  SSRTransformContext,
+  type SSRTransformContext,
   processChildren,
-  processChildrenAsStatement
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
 import { ssrProcessTeleport } from './ssrTransformTeleport'
 import {
   ssrProcessSuspense,
-  ssrTransformSuspense
+  ssrTransformSuspense,
 } from './ssrTransformSuspense'
 import {
   ssrProcessTransitionGroup,
-  ssrTransformTransitionGroup
+  ssrTransformTransitionGroup,
 } from './ssrTransformTransitionGroup'
-import { isSymbol, isObject, isArray } from '@vue/shared'
+import { extend, isArray, isObject, isPlainObject, isSymbol } from '@vue/shared'
 import { buildSSRProps } from './ssrTransformElement'
 import {
   ssrProcessTransition,
-  ssrTransformTransition
+  ssrTransformTransition,
 } from './ssrTransformTransition'
 
 // We need to construct the slot functions in the 1st pass to ensure proper
@@ -127,7 +128,7 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
     if (clonedNode.children.length) {
       buildSlots(clonedNode, context, (props, vFor, children) => {
         vnodeBranches.push(
-          createVNodeSlotBranch(props, vFor, children, context)
+          createVNodeSlotBranch(props, vFor, children, context),
         )
         return createFunctionExpression(undefined)
       })
@@ -142,7 +143,7 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
         context,
         undefined,
         true,
-        isDynamicComponent
+        isDynamicComponent,
       )
       if (props || directives.length) {
         propsExp = buildSSRProps(props, directives, context)
@@ -159,14 +160,14 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
         undefined, // no return, assign body later
         true, // newline
         true, // isSlot
-        loc
+        loc,
       )
       wipEntries.push({
         type: WIP_SLOT,
         fn,
         children,
         // also collect the corresponding vnode branch built earlier
-        vnodeBranch: vnodeBranches[wipEntries.length]
+        vnodeBranch: vnodeBranches[wipEntries.length],
       })
       return fn
     }
@@ -186,15 +187,15 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
           createCallExpression(context.helper(CREATE_VNODE), [
             component,
             propsExp,
-            slots
+            slots,
           ]),
-          `_parent`
-        ]
+          `_parent`,
+        ],
       )
     } else {
       node.ssrCodegenNode = createCallExpression(
         context.helper(SSR_RENDER_COMPONENT),
-        [component, propsExp, slots, `_parent`]
+        [component, propsExp, slots, `_parent`],
       )
     }
   }
@@ -203,8 +204,8 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
 export function ssrProcessComponent(
   node: ComponentNode,
   context: SSRTransformContext,
-  parent: { children: TemplateChildNode[] }
-) {
+  parent: { children: TemplateChildNode[] },
+): void {
   const component = componentTypeMap.get(node)!
   if (!node.ssrCodegenNode) {
     // this is a built-in component that fell-through.
@@ -243,9 +244,9 @@ export function ssrProcessComponent(
           wipEntries[i],
           context,
           false,
-          true /* withSlotScopeId */
+          true /* withSlotScopeId */,
         ),
-        vnodeBranch
+        vnodeBranch,
       )
     }
 
@@ -257,7 +258,7 @@ export function ssrProcessComponent(
     if (typeof component === 'string') {
       // static component
       context.pushStatement(
-        createCallExpression(`_push`, [node.ssrCodegenNode])
+        createCallExpression(`_push`, [node.ssrCodegenNode]),
       )
     } else {
       // dynamic component (`resolveDynamicComponent` call)
@@ -267,21 +268,24 @@ export function ssrProcessComponent(
   }
 }
 
-export const rawOptionsMap = new WeakMap<RootNode, CompilerOptions>()
+export const rawOptionsMap: WeakMap<RootNode, CompilerOptions> = new WeakMap<
+  RootNode,
+  CompilerOptions
+>()
 
 const [baseNodeTransforms, baseDirectiveTransforms] =
   getBaseTransformPreset(true)
 const vnodeNodeTransforms = [...baseNodeTransforms, ...DOMNodeTransforms]
 const vnodeDirectiveTransforms = {
   ...baseDirectiveTransforms,
-  ...DOMDirectiveTransforms
+  ...DOMDirectiveTransforms,
 }
 
 function createVNodeSlotBranch(
-  props: ExpressionNode | undefined,
-  vForExp: ExpressionNode | undefined,
+  slotProps: ExpressionNode | undefined,
+  vFor: DirectiveNode | undefined,
   children: TemplateChildNode[],
-  parentContext: TransformContext
+  parentContext: TransformContext,
 ): ReturnStatement {
   // apply a sub-transform using vnode-based transforms.
   const rawOptions = rawOptionsMap.get(parentContext.root)!
@@ -291,44 +295,40 @@ function createVNodeSlotBranch(
     // overwrite with vnode-based transforms
     nodeTransforms: [
       ...vnodeNodeTransforms,
-      ...(rawOptions.nodeTransforms || [])
+      ...(rawOptions.nodeTransforms || []),
     ],
     directiveTransforms: {
       ...vnodeDirectiveTransforms,
-      ...(rawOptions.directiveTransforms || {})
-    }
+      ...(rawOptions.directiveTransforms || {}),
+    },
   }
 
   // wrap the children with a wrapper template for proper children treatment.
+  // important: provide v-slot="props" and v-for="exp" on the wrapper for
+  // proper scope analysis
+  const wrapperProps: TemplateNode['props'] = []
+  if (slotProps) {
+    wrapperProps.push({
+      type: NodeTypes.DIRECTIVE,
+      name: 'slot',
+      exp: slotProps,
+      arg: undefined,
+      modifiers: [],
+      loc: locStub,
+    })
+  }
+  if (vFor) {
+    wrapperProps.push(extend({}, vFor))
+  }
   const wrapperNode: TemplateNode = {
     type: NodeTypes.ELEMENT,
     ns: Namespaces.HTML,
     tag: 'template',
     tagType: ElementTypes.TEMPLATE,
-    isSelfClosing: false,
-    // important: provide v-slot="props" and v-for="exp" on the wrapper for
-    // proper scope analysis
-    props: [
-      {
-        type: NodeTypes.DIRECTIVE,
-        name: 'slot',
-        exp: props,
-        arg: undefined,
-        modifiers: [],
-        loc: locStub
-      },
-      {
-        type: NodeTypes.DIRECTIVE,
-        name: 'for',
-        exp: vForExp,
-        arg: undefined,
-        modifiers: [],
-        loc: locStub
-      }
-    ],
+    props: wrapperProps,
     children,
     loc: locStub,
-    codegenNode: undefined
+    codegenNode: undefined,
   }
   subTransform(wrapperNode, subOptions, parentContext)
   return createReturnStatement(children)
@@ -337,7 +337,7 @@ function createVNodeSlotBranch(
 function subTransform(
   node: TemplateChildNode,
   options: TransformOptions,
-  parentContext: TransformContext
+  parentContext: TransformContext,
 ) {
   const childRoot = createRoot([node])
   const childContext = createTransformContext(childRoot, options)
@@ -374,10 +374,10 @@ function subTransform(
 function clone(v: any): any {
   if (isArray(v)) {
     return v.map(clone)
-  } else if (isObject(v)) {
+  } else if (isPlainObject(v)) {
     const res: any = {}
     for (const key in v) {
-      res[key] = clone(v[key])
+      res[key] = clone(v[key as keyof typeof v])
     }
     return res
   } else {
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index 2c42a83ba..6a028953e 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -1,57 +1,61 @@
 import {
-  NodeTransform,
-  NodeTypes,
+  type ArrayExpression,
+  type AttributeNode,
+  type CallExpression,
+  type DirectiveNode,
   ElementTypes,
-  TemplateLiteral,
-  createTemplateLiteral,
-  createInterpolation,
-  createCallExpression,
-  createConditionalExpression,
-  createSimpleExpression,
-  buildProps,
-  DirectiveNode,
-  PlainElementNode,
-  createCompilerError,
   ErrorCodes,
-  CallExpression,
-  createArrayExpression,
-  ExpressionNode,
-  JSChildNode,
-  ArrayExpression,
-  createAssignmentExpression,
-  TextNode,
-  hasDynamicKeyVBind,
+  type ExpressionNode,
+  type InterpolationNode,
+  type JSChildNode,
   MERGE_PROPS,
-  isStaticArgOf,
-  createSequenceExpression,
-  InterpolationNode,
-  isStaticExp,
-  AttributeNode,
+  type NodeTransform,
+  NodeTypes,
+  type PlainElementNode,
+  type PropsExpression,
+  type TemplateLiteral,
+  type TextNode,
+  type TransformContext,
   buildDirectiveArgs,
-  TransformContext,
-  PropsExpression
+  buildProps,
+  createArrayExpression,
+  createAssignmentExpression,
+  createCallExpression,
+  createCompilerError,
+  createCompoundExpression,
+  createConditionalExpression,
+  createInterpolation,
+  createSequenceExpression,
+  createSimpleExpression,
+  createTemplateLiteral,
+  hasDynamicKeyVBind,
+  isStaticArgOf,
+  isStaticExp,
 } from '@vue/compiler-dom'
 import {
+  NO,
   escapeHtml,
   isBooleanAttr,
   isBuiltInDirective,
   isSSRSafeAttrName,
-  NO,
-  propsToAttrMap
+  propsToAttrMap,
 } from '@vue/shared'
-import { createSSRCompilerError, SSRErrorCodes } from '../errors'
+import { SSRErrorCodes, createSSRCompilerError } from '../errors'
 import {
-  SSR_RENDER_ATTR,
-  SSR_RENDER_CLASS,
-  SSR_RENDER_STYLE,
-  SSR_RENDER_DYNAMIC_ATTR,
-  SSR_RENDER_ATTRS,
-  SSR_INTERPOLATE,
+  SSR_GET_DIRECTIVE_PROPS,
   SSR_GET_DYNAMIC_MODEL_PROPS,
   SSR_INCLUDE_BOOLEAN_ATTR,
-  SSR_GET_DIRECTIVE_PROPS
+  SSR_INTERPOLATE,
+  SSR_RENDER_ATTR,
+  SSR_RENDER_ATTRS,
+  SSR_RENDER_CLASS,
+  SSR_RENDER_DYNAMIC_ATTR,
+  SSR_RENDER_STYLE,
 } from '../runtimeHelpers'
-import { SSRTransformContext, processChildren } from '../ssrCodegenTransform'
+import {
+  type SSRTransformContext,
+  processChildren,
+} from '../ssrCodegenTransform'
 
 // for directives with children overwrite (e.g. v-html & v-text), we need to
 // store the raw children so that they can be added in the 2nd pass.
@@ -81,7 +85,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
     // so when they are present we need to bail out to full `renderAttrs`
     const hasDynamicVBind = hasDynamicKeyVBind(node)
     const hasCustomDir = node.props.some(
-      p => p.type === NodeTypes.DIRECTIVE && !isBuiltInDirective(p.name)
+      p => p.type === NodeTypes.DIRECTIVE && !isBuiltInDirective(p.name),
     )
     const needMergeProps = hasDynamicVBind || hasCustomDir
     if (needMergeProps) {
@@ -91,13 +95,13 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
         node.props,
         false /* isComponent */,
         false /* isDynamicComponent */,
-        true /* ssr */
+        true /* ssr */,
       )
       if (props || directives.length) {
         const mergedProps = buildSSRProps(props, directives, context)
         const propsExp = createCallExpression(
           context.helper(SSR_RENDER_ATTRS),
-          [mergedProps]
+          [mergedProps],
         )
 
         if (node.tag === 'textarea') {
@@ -116,8 +120,8 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
             propsExp.arguments = [
               createAssignmentExpression(
                 createSimpleExpression(tempId, false),
-                mergedProps
-              )
+                mergedProps,
+              ),
             ]
             rawChildrenMap.set(
               node,
@@ -127,11 +131,11 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                   createSimpleExpression(`${tempId}.value`, false),
                   createSimpleExpression(
                     existingText ? existingText.content : ``,
-                    true
+                    true,
                   ),
-                  false
-                )
-              ])
+                  false,
+                ),
+              ]),
             )
           }
         } else if (node.tag === 'input') {
@@ -152,13 +156,32 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                     context.helper(SSR_GET_DYNAMIC_MODEL_PROPS),
                     [
                       tempExp, // existing props
-                      vModel.exp! // model
-                    ]
-                  )
-                ])
-              ])
+                      vModel.exp!, // model
+                    ],
+                  ),
+                ]),
+              ]),
             ]
           }
+        } else if (directives.length && !node.children.length) {
+          const tempId = `_temp${context.temps++}`
+          propsExp.arguments = [
+            createAssignmentExpression(
+              createSimpleExpression(tempId, false),
+              mergedProps,
+            ),
+          ]
+          rawChildrenMap.set(
+            node,
+            createConditionalExpression(
+              createSimpleExpression(`"textContent" in ${tempId}`, false),
+              createCallExpression(context.helper(SSR_INTERPOLATE), [
+                createSimpleExpression(`${tempId}.textContent`, false),
+              ]),
+              createSimpleExpression(`${tempId}.innerHTML ?? ''`, false),
+              false,
+            ),
+          )
         }
 
         if (needTagForRuntime) {
@@ -185,12 +208,15 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
       // special cases with children override
       if (prop.type === NodeTypes.DIRECTIVE) {
         if (prop.name === 'html' && prop.exp) {
-          rawChildrenMap.set(node, prop.exp)
+          rawChildrenMap.set(
+            node,
+            createCompoundExpression([`(`, prop.exp, `) ?? ''`]),
+          )
         } else if (prop.name === 'text' && prop.exp) {
           node.children = [createInterpolation(prop.exp, prop.loc)]
         } else if (prop.name === 'slot') {
           context.onError(
-            createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, prop.loc)
+            createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, prop.loc),
           )
         } else if (isTextareaWithValue(node, prop) && prop.exp) {
           if (!needMergeProps) {
@@ -203,7 +229,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
             const { props, ssrTagParts } = directiveTransform(
               prop,
               node,
-              context
+              context,
             )
             if (ssrTagParts) {
               openTag.push(...ssrTagParts)
@@ -221,9 +247,9 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                     ` class="`,
                     (dynamicClassBinding = createCallExpression(
                       context.helper(SSR_RENDER_CLASS),
-                      [value]
+                      [value],
                     )),
-                    `"`
+                    `"`,
                   )
                 } else if (attrName === 'style') {
                   if (dynamicStyleBinding) {
@@ -234,9 +260,9 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                       ` style="`,
                       (dynamicStyleBinding = createCallExpression(
                         context.helper(SSR_RENDER_STYLE),
-                        [value]
+                        [value],
                       )),
-                      `"`
+                      `"`,
                     )
                   }
                 } else {
@@ -249,26 +275,26 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                       createConditionalExpression(
                         createCallExpression(
                           context.helper(SSR_INCLUDE_BOOLEAN_ATTR),
-                          [value]
+                          [value],
                         ),
                         createSimpleExpression(' ' + attrName, true),
                         createSimpleExpression('', true),
-                        false /* no newline */
-                      )
+                        false /* no newline */,
+                      ),
                     )
                   } else if (isSSRSafeAttrName(attrName)) {
                     openTag.push(
                       createCallExpression(context.helper(SSR_RENDER_ATTR), [
                         key,
-                        value
-                      ])
+                        value,
+                      ]),
                     )
                   } else {
                     context.onError(
                       createSSRCompilerError(
                         SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME,
-                        key.loc
-                      )
+                        key.loc,
+                      ),
                     )
                   }
                 }
@@ -283,8 +309,8 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                 openTag.push(
                   createCallExpression(
                     context.helper(SSR_RENDER_DYNAMIC_ATTR),
-                    args
-                  )
+                    args,
+                  ),
                 )
               }
             }
@@ -292,19 +318,20 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
         }
       } else {
         // special case: value on <textarea>
-        if (node.tag === 'textarea' && prop.name === 'value' && prop.value) {
+        const name = prop.name
+        if (node.tag === 'textarea' && name === 'value' && prop.value) {
           rawChildrenMap.set(node, escapeHtml(prop.value.content))
         } else if (!needMergeProps) {
-          if (prop.name === 'key' || prop.name === 'ref') {
+          if (name === 'key' || name === 'ref') {
             continue
           }
           // static prop
-          if (prop.name === 'class' && prop.value) {
+          if (name === 'class' && prop.value) {
             staticClassBinding = JSON.stringify(prop.value.content)
           }
           openTag.push(
             ` ${prop.name}` +
-              (prop.value ? `="${escapeHtml(prop.value.content)}"` : ``)
+              (prop.value ? `="${escapeHtml(prop.value.content)}"` : ``),
           )
         }
       }
@@ -327,7 +354,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
 export function buildSSRProps(
   props: PropsExpression | undefined,
   directives: DirectiveNode[],
-  context: TransformContext
+  context: TransformContext,
 ): JSChildNode {
   let mergePropsArgs: JSChildNode[] = []
   if (props) {
@@ -343,8 +370,8 @@ export function buildSSRProps(
       mergePropsArgs.push(
         createCallExpression(context.helper(SSR_GET_DIRECTIVE_PROPS), [
           `_ctx`,
-          ...buildDirectiveArgs(dir, context).elements
-        ] as JSChildNode[])
+          ...buildDirectiveArgs(dir, context).elements,
+        ] as JSChildNode[]),
       )
     }
   }
@@ -369,7 +396,7 @@ function isTrueFalseValue(prop: DirectiveNode | AttributeNode) {
 
 function isTextareaWithValue(
   node: PlainElementNode,
-  prop: DirectiveNode
+  prop: DirectiveNode,
 ): boolean {
   return !!(
     node.tag === 'textarea' &&
@@ -389,7 +416,7 @@ function mergeCall(call: CallExpression, arg: string | JSChildNode) {
 
 function removeStaticBinding(
   tag: TemplateLiteral['elements'],
-  binding: string
+  binding: string,
 ) {
   const regExp = new RegExp(`^ ${binding}=".+"$`)
 
@@ -402,14 +429,14 @@ function removeStaticBinding(
 
 function findVModel(node: PlainElementNode): DirectiveNode | undefined {
   return node.props.find(
-    p => p.type === NodeTypes.DIRECTIVE && p.name === 'model' && p.exp
+    p => p.type === NodeTypes.DIRECTIVE && p.name === 'model' && p.exp,
   ) as DirectiveNode | undefined
 }
 
 export function ssrProcessElement(
   node: PlainElementNode,
-  context: SSRTransformContext
-) {
+  context: SSRTransformContext,
+): void {
   const isVoidTag = context.options.isVoidTag || NO
   const elementsToAdd = node.ssrCodegenNode!.elements
   for (let j = 0; j < elementsToAdd.length; j++) {
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts b/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
index c4bbb6ff6..aae7a31e8 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
@@ -1,19 +1,20 @@
 import {
-  NodeTransform,
+  ElementTypes,
+  type NodeTransform,
+  NodeTypes,
+  type SlotOutletNode,
+  TRANSITION,
+  TRANSITION_GROUP,
+  createCallExpression,
+  createFunctionExpression,
   isSlotOutlet,
   processSlotOutlet,
-  createCallExpression,
-  SlotOutletNode,
-  createFunctionExpression,
-  NodeTypes,
-  ElementTypes,
   resolveComponentType,
-  TRANSITION
 } from '@vue/compiler-dom'
 import { SSR_RENDER_SLOT, SSR_RENDER_SLOT_INNER } from '../runtimeHelpers'
 import {
-  SSRTransformContext,
-  processChildrenAsStatement
+  type SSRTransformContext,
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
 
 export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
@@ -27,7 +28,7 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
       // fallback content placeholder. will be replaced in the process phase
       `null`,
       `_push`,
-      `_parent`
+      `_parent`,
     ]
 
     // inject slot scope id if current template uses :slotted
@@ -37,23 +38,32 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
 
     let method = SSR_RENDER_SLOT
 
-    // #3989
+    // #3989, #9933
     // check if this is a single slot inside a transition wrapper - since
-    // transition will unwrap the slot fragment into a single vnode at runtime,
-    // we need to avoid rendering the slot as a fragment.
-    const parent = context.parent
-    if (
-      parent &&
-      parent.type === NodeTypes.ELEMENT &&
-      parent.tagType === ElementTypes.COMPONENT &&
-      resolveComponentType(parent, context, true) === TRANSITION &&
-      parent.children.filter(c => c.type === NodeTypes.ELEMENT).length === 1
-    ) {
-      method = SSR_RENDER_SLOT_INNER
-      if (!(context.scopeId && context.slotted !== false)) {
-        args.push('null')
+    // transition/transition-group will unwrap the slot fragment into vnode(s)
+    // at runtime, we need to avoid rendering the slot as a fragment.
+    let parent = context.parent!
+    if (parent) {
+      const children = parent.children
+      // #10743 <slot v-if> in <Transition>
+      if (parent.type === NodeTypes.IF_BRANCH) {
+        parent = context.grandParent!
+      }
+      let componentType
+      if (
+        parent.type === NodeTypes.ELEMENT &&
+        parent.tagType === ElementTypes.COMPONENT &&
+        ((componentType = resolveComponentType(parent, context, true)) ===
+          TRANSITION ||
+          componentType === TRANSITION_GROUP) &&
+        children.filter(c => c.type === NodeTypes.ELEMENT).length === 1
+      ) {
+        method = SSR_RENDER_SLOT_INNER
+        if (!(context.scopeId && context.slotted !== false)) {
+          args.push('null')
+        }
+        args.push('true')
       }
-      args.push('true')
     }
 
     node.ssrCodegenNode = createCallExpression(context.helper(method), args)
@@ -62,8 +72,8 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
 
 export function ssrProcessSlotOutlet(
   node: SlotOutletNode,
-  context: SSRTransformContext
-) {
+  context: SSRTransformContext,
+): void {
   const renderCall = node.ssrCodegenNode!
 
   // has fallback content
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts b/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts
index e7efbe1fb..d1e19f96f 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts
@@ -1,16 +1,16 @@
 import {
-  ComponentNode,
-  TransformContext,
+  type ComponentNode,
+  type FunctionExpression,
+  type SlotsExpression,
+  type TemplateChildNode,
+  type TransformContext,
   buildSlots,
-  createFunctionExpression,
-  FunctionExpression,
-  TemplateChildNode,
   createCallExpression,
-  SlotsExpression
+  createFunctionExpression,
 } from '@vue/compiler-dom'
 import {
-  SSRTransformContext,
-  processChildrenAsStatement
+  type SSRTransformContext,
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
 import { SSR_RENDER_SUSPENSE } from '../runtimeHelpers'
 
@@ -27,13 +27,13 @@ interface WIPEntry {
 // phase 1
 export function ssrTransformSuspense(
   node: ComponentNode,
-  context: TransformContext
+  context: TransformContext,
 ) {
-  return () => {
+  return (): void => {
     if (node.children.length) {
       const wipEntry: WIPEntry = {
         slotsExp: null!, // to be immediately set
-        wipSlots: []
+        wipSlots: [],
       }
       wipMap.set(node, wipEntry)
       wipEntry.slotsExp = buildSlots(
@@ -45,14 +45,14 @@ export function ssrTransformSuspense(
             undefined, // no return, assign body later
             true, // newline
             false, // suspense slots are not treated as normal slots
-            loc
+            loc,
           )
           wipEntry.wipSlots.push({
             fn,
-            children
+            children,
           })
           return fn
-        }
+        },
       ).slots
     }
   }
@@ -61,8 +61,8 @@ export function ssrTransformSuspense(
 // phase 2
 export function ssrProcessSuspense(
   node: ComponentNode,
-  context: SSRTransformContext
-) {
+  context: SSRTransformContext,
+): void {
   // complete wip slots with ssr code
   const wipEntry = wipMap.get(node)
   if (!wipEntry) {
@@ -77,7 +77,7 @@ export function ssrProcessSuspense(
   context.pushStatement(
     createCallExpression(context.helper(SSR_RENDER_SUSPENSE), [
       `_push`,
-      slotsExp
-    ])
+      slotsExp,
+    ]),
   )
 }
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts b/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
index f470ca711..d7cbccd53 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
@@ -1,28 +1,28 @@
 import {
-  ComponentNode,
-  findProp,
+  type ComponentNode,
+  type ExpressionNode,
   NodeTypes,
-  createSimpleExpression,
-  createFunctionExpression,
   createCallExpression,
-  ExpressionNode
+  createFunctionExpression,
+  createSimpleExpression,
+  findProp,
 } from '@vue/compiler-dom'
 import {
-  SSRTransformContext,
-  processChildrenAsStatement
+  type SSRTransformContext,
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
-import { createSSRCompilerError, SSRErrorCodes } from '../errors'
+import { SSRErrorCodes, createSSRCompilerError } from '../errors'
 import { SSR_RENDER_TELEPORT } from '../runtimeHelpers'
 
 // Note: this is a 2nd-pass codegen transform.
 export function ssrProcessTeleport(
   node: ComponentNode,
-  context: SSRTransformContext
-) {
+  context: SSRTransformContext,
+): void {
   const targetProp = findProp(node, 'to')
   if (!targetProp) {
     context.onError(
-      createSSRCompilerError(SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET, node.loc)
+      createSSRCompilerError(SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET, node.loc),
     )
     return
   }
@@ -38,8 +38,8 @@ export function ssrProcessTeleport(
     context.onError(
       createSSRCompilerError(
         SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET,
-        targetProp.loc
-      )
+        targetProp.loc,
+      ),
     )
     return
   }
@@ -56,7 +56,7 @@ export function ssrProcessTeleport(
     undefined, // Body is added later
     true, // newline
     false, // isSlot
-    node.loc
+    node.loc,
   )
   contentRenderFn.body = processChildrenAsStatement(node, context)
   context.pushStatement(
@@ -65,7 +65,7 @@ export function ssrProcessTeleport(
       contentRenderFn,
       target,
       disabled,
-      `_parent`
-    ])
+      `_parent`,
+    ]),
   )
 }
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts
index d09a806f7..ced208168 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts
@@ -1,18 +1,21 @@
 import {
-  ComponentNode,
-  findProp,
+  type ComponentNode,
   NodeTypes,
-  TransformContext
+  type TransformContext,
+  findProp,
 } from '@vue/compiler-dom'
-import { processChildren, SSRTransformContext } from '../ssrCodegenTransform'
+import {
+  type SSRTransformContext,
+  processChildren,
+} from '../ssrCodegenTransform'
 
 const wipMap = new WeakMap<ComponentNode, Boolean>()
 
 export function ssrTransformTransition(
   node: ComponentNode,
-  context: TransformContext
+  context: TransformContext,
 ) {
-  return () => {
+  return (): void => {
     const appear = findProp(node, 'appear', false, true)
     wipMap.set(node, !!appear)
   }
@@ -20,8 +23,8 @@ export function ssrTransformTransition(
 
 export function ssrProcessTransition(
   node: ComponentNode,
-  context: SSRTransformContext
-) {
+  context: SSRTransformContext,
+): void {
   // #5351: filter out comment children inside transition
   node.children = node.children.filter(c => c.type !== NodeTypes.COMMENT)
 
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
index b0f96e4dd..27ddebec1 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
@@ -1,16 +1,19 @@
 import {
-  AttributeNode,
-  buildProps,
-  ComponentNode,
-  createCallExpression,
-  DirectiveNode,
-  findProp,
-  JSChildNode,
+  type AttributeNode,
+  type ComponentNode,
+  type DirectiveNode,
+  type JSChildNode,
   NodeTypes,
-  TransformContext
+  type TransformContext,
+  buildProps,
+  createCallExpression,
+  findProp,
 } from '@vue/compiler-dom'
 import { SSR_RENDER_ATTRS } from '../runtimeHelpers'
-import { processChildren, SSRTransformContext } from '../ssrCodegenTransform'
+import {
+  type SSRTransformContext,
+  processChildren,
+} from '../ssrCodegenTransform'
 import { buildSSRProps } from './ssrTransformElement'
 
 const wipMap = new WeakMap<ComponentNode, WIPEntry>()
@@ -24,9 +27,9 @@ interface WIPEntry {
 // phase 1: build props
 export function ssrTransformTransitionGroup(
   node: ComponentNode,
-  context: TransformContext
+  context: TransformContext,
 ) {
-  return () => {
+  return (): void => {
     const tag = findProp(node, 'tag')
     if (tag) {
       const otherProps = node.props.filter(p => p !== tag)
@@ -36,18 +39,18 @@ export function ssrTransformTransitionGroup(
         otherProps,
         true /* isComponent */,
         false /* isDynamicComponent */,
-        true /* ssr (skip event listeners) */
+        true /* ssr (skip event listeners) */,
       )
       let propsExp = null
       if (props || directives.length) {
         propsExp = createCallExpression(context.helper(SSR_RENDER_ATTRS), [
-          buildSSRProps(props, directives, context)
+          buildSSRProps(props, directives, context),
         ])
       }
       wipMap.set(node, {
         tag,
         propsExp,
-        scopeId: context.scopeId || null
+        scopeId: context.scopeId || null,
       })
     }
   }
@@ -56,8 +59,8 @@ export function ssrTransformTransitionGroup(
 // phase 2: process children
 export function ssrProcessTransitionGroup(
   node: ComponentNode,
-  context: SSRTransformContext
-) {
+  context: SSRTransformContext,
+): void {
   const entry = wipMap.get(node)
   if (entry) {
     const { tag, propsExp, scopeId } = entry
@@ -83,7 +86,14 @@ export function ssrProcessTransitionGroup(
          * be patched using the same key map) so we need to account for that here
          * by disabling nested fragment wrappers from being generated.
          */
-        true
+        true,
+        /**
+         * TransitionGroup filters out comment children at runtime and thus
+         * doesn't expect comments to be present during hydration. We need to
+         * account for that by disabling the empty comment that is otherwise
+         * rendered for a falsy v-if that has no v-else specified. (#6715)
+         */
+        true,
       )
       context.pushStringPart(`</`)
       context.pushStringPart(tag.exp!)
@@ -98,11 +108,11 @@ export function ssrProcessTransitionGroup(
         context.pushStringPart(` ${scopeId}`)
       }
       context.pushStringPart(`>`)
-      processChildren(node, context, false, true)
+      processChildren(node, context, false, true, true)
       context.pushStringPart(`</${tag.value!.content}>`)
     }
   } else {
     // fragment
-    processChildren(node, context, true, true)
+    processChildren(node, context, true, true, true)
   }
 }
diff --git a/packages/compiler-ssr/src/transforms/ssrVFor.ts b/packages/compiler-ssr/src/transforms/ssrVFor.ts
index 0515993d4..6537eee82 100644
--- a/packages/compiler-ssr/src/transforms/ssrVFor.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVFor.ts
@@ -1,41 +1,40 @@
 import {
-  createStructuralDirectiveTransform,
-  ForNode,
-  processFor,
+  type ForNode,
+  type NodeTransform,
+  NodeTypes,
   createCallExpression,
-  createFunctionExpression,
   createForLoopParams,
-  NodeTypes
+  createFunctionExpression,
+  createStructuralDirectiveTransform,
+  processFor,
 } from '@vue/compiler-dom'
 import {
-  SSRTransformContext,
-  processChildrenAsStatement
+  type SSRTransformContext,
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
 import { SSR_RENDER_LIST } from '../runtimeHelpers'
 
 // Plugin for the first transform pass, which simply constructs the AST node
-export const ssrTransformFor = createStructuralDirectiveTransform(
-  'for',
-  processFor
-)
+export const ssrTransformFor: NodeTransform =
+  createStructuralDirectiveTransform('for', processFor)
 
 // This is called during the 2nd transform pass to construct the SSR-specific
 // codegen nodes.
 export function ssrProcessFor(
   node: ForNode,
   context: SSRTransformContext,
-  disableNestedFragments = false
-) {
+  disableNestedFragments = false,
+): void {
   const needFragmentWrapper =
     !disableNestedFragments &&
     (node.children.length !== 1 || node.children[0].type !== NodeTypes.ELEMENT)
   const renderLoop = createFunctionExpression(
-    createForLoopParams(node.parseResult)
+    createForLoopParams(node.parseResult),
   )
   renderLoop.body = processChildrenAsStatement(
     node,
     context,
-    needFragmentWrapper
+    needFragmentWrapper,
   )
   // v-for always renders a fragment unless explicitly disabled
   if (!disableNestedFragments) {
@@ -44,8 +43,8 @@ export function ssrProcessFor(
   context.pushStatement(
     createCallExpression(context.helper(SSR_RENDER_LIST), [
       node.source,
-      renderLoop
-    ])
+      renderLoop,
+    ]),
   )
   if (!disableNestedFragments) {
     context.pushStringPart(`<!--]-->`)
diff --git a/packages/compiler-ssr/src/transforms/ssrVIf.ts b/packages/compiler-ssr/src/transforms/ssrVIf.ts
index 9de1d0e9a..0e3880247 100644
--- a/packages/compiler-ssr/src/transforms/ssrVIf.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVIf.ts
@@ -1,23 +1,24 @@
 import {
-  createStructuralDirectiveTransform,
-  processIf,
-  IfNode,
-  createIfStatement,
+  type BlockStatement,
+  type IfBranchNode,
+  type IfNode,
+  type NodeTransform,
+  NodeTypes,
   createBlockStatement,
   createCallExpression,
-  IfBranchNode,
-  BlockStatement,
-  NodeTypes
+  createIfStatement,
+  createStructuralDirectiveTransform,
+  processIf,
 } from '@vue/compiler-dom'
 import {
-  SSRTransformContext,
-  processChildrenAsStatement
+  type SSRTransformContext,
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
 
 // Plugin for the first transform pass, which simply constructs the AST node
-export const ssrTransformIf = createStructuralDirectiveTransform(
+export const ssrTransformIf: NodeTransform = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
-  processIf
+  processIf,
 )
 
 // This is called during the 2nd transform pass to construct the SSR-specific
@@ -25,12 +26,13 @@ export const ssrTransformIf = createStructuralDirectiveTransform(
 export function ssrProcessIf(
   node: IfNode,
   context: SSRTransformContext,
-  disableNestedFragments = false
-) {
+  disableNestedFragments = false,
+  disableComment = false,
+): void {
   const [rootBranch] = node.branches
   const ifStatement = createIfStatement(
     rootBranch.condition!,
-    processIfBranch(rootBranch, context, disableNestedFragments)
+    processIfBranch(rootBranch, context, disableNestedFragments),
   )
   context.pushStatement(ifStatement)
 
@@ -40,13 +42,13 @@ export function ssrProcessIf(
     const branchBlockStatement = processIfBranch(
       branch,
       context,
-      disableNestedFragments
+      disableNestedFragments,
     )
     if (branch.condition) {
       // else-if
       currentIf = currentIf.alternate = createIfStatement(
         branch.condition,
-        branchBlockStatement
+        branchBlockStatement,
       )
     } else {
       // else
@@ -54,9 +56,9 @@ export function ssrProcessIf(
     }
   }
 
-  if (!currentIf.alternate) {
+  if (!currentIf.alternate && !disableComment) {
     currentIf.alternate = createBlockStatement([
-      createCallExpression(`_push`, ['`<!---->`'])
+      createCallExpression(`_push`, ['`<!---->`']),
     ])
   }
 }
@@ -64,7 +66,7 @@ export function ssrProcessIf(
 function processIfBranch(
   branch: IfBranchNode,
   context: SSRTransformContext,
-  disableNestedFragments = false
+  disableNestedFragments = false,
 ): BlockStatement {
   const { children } = branch
   const needFragmentWrapper =
diff --git a/packages/compiler-ssr/src/transforms/ssrVModel.ts b/packages/compiler-ssr/src/transforms/ssrVModel.ts
index 0c4bd1778..9a645397e 100644
--- a/packages/compiler-ssr/src/transforms/ssrVModel.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVModel.ts
@@ -1,27 +1,27 @@
 import {
-  DirectiveTransform,
-  ElementTypes,
-  transformModel,
-  findProp,
-  NodeTypes,
-  createDOMCompilerError,
   DOMErrorCodes,
+  type DirectiveTransform,
+  ElementTypes,
+  type ExpressionNode,
+  NodeTypes,
+  type PlainElementNode,
+  createCallExpression,
+  createConditionalExpression,
+  createDOMCompilerError,
+  createInterpolation,
   createObjectProperty,
   createSimpleExpression,
-  createCallExpression,
-  PlainElementNode,
-  ExpressionNode,
-  createConditionalExpression,
-  createInterpolation,
-  hasDynamicKeyVBind
+  findProp,
+  hasDynamicKeyVBind,
+  transformModel,
 } from '@vue/compiler-dom'
 import {
-  SSR_LOOSE_EQUAL,
+  SSR_INCLUDE_BOOLEAN_ATTR,
   SSR_LOOSE_CONTAIN,
+  SSR_LOOSE_EQUAL,
   SSR_RENDER_DYNAMIC_MODEL,
-  SSR_INCLUDE_BOOLEAN_ATTR
 } from '../runtimeHelpers'
-import { DirectiveTransformResult } from 'packages/compiler-core/src/transform'
+import type { DirectiveTransformResult } from 'packages/compiler-core/src/transform'
 
 export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
   const model = dir.exp!
@@ -32,8 +32,8 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
       context.onError(
         createDOMCompilerError(
           DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE,
-          value.loc
-        )
+          value.loc,
+        ),
       )
     }
   }
@@ -49,23 +49,23 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
                 createCallExpression(`Array.isArray`, [model]),
                 createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
                   model,
-                  value
+                  value,
                 ]),
                 createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
                   model,
-                  value
-                ])
-              )
+                  value,
+                ]),
+              ),
             ]),
             createSimpleExpression(' selected', true),
             createSimpleExpression('', true),
-            false /* no newline */
-          )
+            false /* no newline */,
+          ),
         )
       }
     } else if (plainNode.tag === 'optgroup') {
       plainNode.children.forEach(option =>
-        processOption(option as PlainElementNode)
+        processOption(option as PlainElementNode),
       )
     }
   }
@@ -74,7 +74,7 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
     const res: DirectiveTransformResult = { props: [] }
     const defaultProps = [
       // default value binding for text type inputs
-      createObjectProperty(`value`, model)
+      createObjectProperty(`value`, model),
     ]
     if (node.tag === 'input') {
       const type = findProp(node, 'type')
@@ -86,8 +86,8 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
             createCallExpression(context.helper(SSR_RENDER_DYNAMIC_MODEL), [
               type.exp!,
               model,
-              value
-            ])
+              value,
+            ]),
           ]
         } else if (type.value) {
           // static type
@@ -98,9 +98,9 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
                   `checked`,
                   createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
                     model,
-                    value
-                  ])
-                )
+                    value,
+                  ]),
+                ),
               ]
               break
             case 'checkbox':
@@ -115,9 +115,9 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
                     `checked`,
                     createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
                       model,
-                      trueValue
-                    ])
-                  )
+                      trueValue,
+                    ]),
+                  ),
                 ]
               } else {
                 res.props = [
@@ -127,11 +127,11 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
                       createCallExpression(`Array.isArray`, [model]),
                       createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
                         model,
-                        value
+                        value,
                       ]),
-                      model
-                    )
-                  )
+                      model,
+                    ),
+                  ),
                 ]
               }
               break
@@ -139,8 +139,8 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
               context.onError(
                 createDOMCompilerError(
                   DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT,
-                  dir.loc
-                )
+                  dir.loc,
+                ),
               )
               break
             default:
@@ -171,8 +171,8 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
       context.onError(
         createDOMCompilerError(
           DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT,
-          dir.loc
-        )
+          dir.loc,
+        ),
       )
     }
 
diff --git a/packages/compiler-ssr/src/transforms/ssrVShow.ts b/packages/compiler-ssr/src/transforms/ssrVShow.ts
index ecd1c0d60..3e3be4342 100644
--- a/packages/compiler-ssr/src/transforms/ssrVShow.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVShow.ts
@@ -1,17 +1,17 @@
 import {
-  DirectiveTransform,
   DOMErrorCodes,
+  type DirectiveTransform,
+  createConditionalExpression,
+  createDOMCompilerError,
+  createObjectExpression,
   createObjectProperty,
   createSimpleExpression,
-  createConditionalExpression,
-  createObjectExpression,
-  createDOMCompilerError
 } from '@vue/compiler-dom'
 
 export const ssrTransformShow: DirectiveTransform = (dir, node, context) => {
   if (!dir.exp) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION)
+      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION),
     )
   }
   return {
@@ -24,12 +24,12 @@ export const ssrTransformShow: DirectiveTransform = (dir, node, context) => {
           createObjectExpression([
             createObjectProperty(
               `display`,
-              createSimpleExpression(`none`, true)
-            )
+              createSimpleExpression(`none`, true),
+            ),
           ]),
-          false /* no newline */
-        )
-      )
-    ]
+          false /* no newline */,
+        ),
+      ),
+    ],
   }
 }
diff --git a/packages/dts-test/README.md b/packages/dts-test/README.md
deleted file mode 100644
index 197005a56..000000000
--- a/packages/dts-test/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# dts-test
-
-Tests Typescript types to ensure the types remain as expected.
-
-- This directory is included in the root `tsconfig.json`, where package imports are aliased to `src` directories, so in IDEs and the `pnpm check` script the types are validated against source code.
-
-- When running `tsc` with `packages/dts-test/tsconfig.test.json`, packages are resolved using normal `node` resolution, so the types are validated against actual **built** types. This requires the types to be built first via `pnpm build-types`.
diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts
deleted file mode 100644
index f4f238641..000000000
--- a/packages/dts-test/defineCustomElement.test-d.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import {
-  defineCustomElement,
-  defineComponent,
-  type VueElementConstructor
-} from 'vue'
-import { expectType, describe, test } from './utils'
-
-describe('inject', () => {
-  // with object inject
-  defineCustomElement({
-    props: {
-      a: String
-    },
-    inject: {
-      foo: 'foo',
-      bar: 'bar'
-    },
-    created() {
-      expectType<unknown>(this.foo)
-      expectType<unknown>(this.bar)
-      //  @ts-expect-error
-      this.foobar = 1
-    }
-  })
-
-  // with array inject
-  defineCustomElement({
-    props: ['a', 'b'],
-    inject: ['foo', 'bar'],
-    created() {
-      expectType<unknown>(this.foo)
-      expectType<unknown>(this.bar)
-      //  @ts-expect-error
-      this.foobar = 1
-    }
-  })
-
-  // with no props
-  defineCustomElement({
-    inject: {
-      foo: {
-        from: 'pbar',
-        default: 'foo'
-      },
-      bar: {
-        from: 'pfoo',
-        default: 'bar'
-      }
-    },
-    created() {
-      expectType<unknown>(this.foo)
-      expectType<unknown>(this.bar)
-      //  @ts-expect-error
-      this.foobar = 1
-    }
-  })
-
-  // without inject
-  defineCustomElement({
-    props: ['a', 'b'],
-    created() {
-      //  @ts-expect-error
-      this.foo = 1
-      //  @ts-expect-error
-      this.bar = 1
-    }
-  })
-})
-
-describe('defineCustomElement using defineComponent return type', () => {
-  test('with emits', () => {
-    const Comp1Vue = defineComponent({
-      props: {
-        a: String
-      },
-      emits: {
-        click: () => true
-      }
-    })
-    const Comp = defineCustomElement(Comp1Vue)
-    expectType<VueElementConstructor>(Comp)
-
-    expectType<string | undefined>(new Comp().a)
-  })
-})
diff --git a/packages/dts-test/reactivityMacros.test-d.ts b/packages/dts-test/reactivityMacros.test-d.ts
deleted file mode 100644
index 9f9b5faed..000000000
--- a/packages/dts-test/reactivityMacros.test-d.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { ref, computed, Ref, ComputedRef, WritableComputedRef } from 'vue'
-import 'vue/macros-global'
-import { RefType, RefTypes } from 'vue/macros'
-import { expectType } from './utils'
-
-// wrapping refs
-
-// normal
-let n = $(ref(1))
-n = 2
-// @ts-expect-error
-n = 'foo'
-
-// #4499 nullable
-let msg = $(ref<string | null>(null))
-msg = 'hello world'
-msg = null
-expectType<RefTypes.Ref | undefined>(msg![RefType])
-
-// computed
-let m = $(computed(() => n + 1))
-m * 1
-// @ts-expect-error
-m.slice()
-expectType<RefTypes.ComputedRef | undefined>(m[RefType])
-
-// writable computed
-let wc = $(
-  computed({
-    get: () => n + 1,
-    set: v => (n = v - 1)
-  })
-)
-wc = 2
-// @ts-expect-error
-wc = 'foo'
-expectType<RefTypes.WritableComputedRef | undefined>(wc[RefType])
-
-// destructure
-function useFoo() {
-  let x = $ref(1)
-  let y = $computed(() => 'hi')
-
-  return $$({
-    x,
-    y,
-    z: 123
-  })
-}
-
-const fooRes = useFoo()
-const { x, y, z } = $(fooRes)
-expectType<number>(x)
-expectType<string>(y)
-expectType<number>(z)
-
-// $ref
-expectType<number>($ref(1))
-expectType<number>($ref(ref(1)))
-expectType<{ foo: number }>($ref({ foo: ref(1) }))
-
-// $shallowRef
-expectType<number>($shallowRef(1))
-expectType<{ foo: Ref<number> }>($shallowRef({ foo: ref(1) }))
-
-// $computed
-expectType<number>($computed(() => 1))
-let b = $ref(1)
-expectType<number>(
-  $computed(() => b, {
-    onTrack() {}
-  })
-)
-
-// writable computed
-expectType<number>(
-  $computed({
-    get: () => 1,
-    set: () => {}
-  })
-)
-
-// $$
-const xRef = $$(x)
-expectType<Ref<number>>(xRef)
-
-const yRef = $$(y)
-expectType<ComputedRef<string>>(yRef)
-
-const c = $computed(() => 1)
-const cRef = $$(c)
-expectType<ComputedRef<number>>(cRef)
-
-const c2 = $computed({
-  get: () => 1,
-  set: () => {}
-})
-const c2Ref = $$(c2)
-expectType<WritableComputedRef<number>>(c2Ref)
-
-// $$ on object
-const obj = $$({
-  n,
-  m,
-  wc
-})
-
-expectType<Ref<number>>(obj.n)
-expectType<ComputedRef<number>>(obj.m)
-expectType<WritableComputedRef<number>>(obj.wc)
diff --git a/packages/dts-test/watch.test-d.ts b/packages/dts-test/watch.test-d.ts
deleted file mode 100644
index cc631d37a..000000000
--- a/packages/dts-test/watch.test-d.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { ref, computed, watch, defineComponent, shallowRef } from 'vue'
-import { expectType } from './utils'
-
-const source = ref('foo')
-const source2 = computed(() => source.value)
-const source3 = () => 1
-
-// lazy watcher will have consistent types for oldValue.
-watch(source, (value, oldValue) => {
-  expectType<string>(value)
-  expectType<string>(oldValue)
-})
-
-watch([source, source2, source3], (values, oldValues) => {
-  expectType<[string, string, number]>(values)
-  expectType<[string, string, number]>(oldValues)
-})
-
-// const array
-watch([source, source2, source3] as const, (values, oldValues) => {
-  expectType<Readonly<[string, string, number]>>(values)
-  expectType<Readonly<[string, string, number]>>(oldValues)
-})
-
-// immediate watcher's oldValue will be undefined on first run.
-watch(
-  source,
-  (value, oldValue) => {
-    expectType<string>(value)
-    expectType<string | undefined>(oldValue)
-  },
-  { immediate: true }
-)
-
-watch(
-  [source, source2, source3],
-  (values, oldValues) => {
-    expectType<[string, string, number]>(values)
-    expectType<[string | undefined, string | undefined, number | undefined]>(
-      oldValues
-    )
-  },
-  { immediate: true }
-)
-
-// const array
-watch(
-  [source, source2, source3] as const,
-  (values, oldValues) => {
-    expectType<Readonly<[string, string, number]>>(values)
-    expectType<
-      Readonly<[string | undefined, string | undefined, number | undefined]>
-    >(oldValues)
-  },
-  { immediate: true }
-)
-
-// should provide correct ref.value inner type to callbacks
-const nestedRefSource = ref({
-  foo: ref(1)
-})
-
-watch(nestedRefSource, (v, ov) => {
-  expectType<{ foo: number }>(v)
-  expectType<{ foo: number }>(ov)
-})
-
-const someRef = ref({ test: 'test' })
-const otherRef = ref({ a: 'b' })
-watch([someRef, otherRef], values => {
-  const value1 = values[0]
-  // no type error
-  console.log(value1.test)
-
-  const value2 = values[1]
-  // no type error
-  console.log(value2.a)
-})
-
-// #6135
-defineComponent({
-  data() {
-    return { a: 1 }
-  },
-  created() {
-    this.$watch(
-      () => this.a,
-      (v, ov) => {
-        expectType<number>(v)
-        expectType<number>(ov)
-      }
-    )
-  }
-})
-
-{
-  //#7852
-  type Steps = { step: '1' } | { step: '2' }
-  const shallowUnionGenParam = shallowRef<Steps>({ step: '1' })
-  const shallowUnionAsCast = shallowRef({ step: '1' } as Steps)
-
-  watch(shallowUnionGenParam, value => {
-    expectType<Steps>(value)
-  })
-  watch(shallowUnionAsCast, value => {
-    expectType<Steps>(value)
-  })
-}
diff --git a/packages/global.d.ts b/packages/global.d.ts
index 97405129b..8b627d2e5 100644
--- a/packages/global.d.ts
+++ b/packages/global.d.ts
@@ -1,5 +1,3 @@
-/// <reference types="vite/client" />
-
 // Global compile-time constants
 declare var __DEV__: boolean
 declare var __TEST__: boolean
@@ -7,9 +5,8 @@ declare var __BROWSER__: boolean
 declare var __GLOBAL__: boolean
 declare var __ESM_BUNDLER__: boolean
 declare var __ESM_BROWSER__: boolean
-declare var __NODE_JS__: boolean
+declare var __CJS__: boolean
 declare var __SSR__: boolean
-declare var __COMMIT__: string
 declare var __VERSION__: string
 declare var __COMPAT__: boolean
 
@@ -17,30 +14,18 @@ declare var __COMPAT__: boolean
 declare var __FEATURE_OPTIONS_API__: boolean
 declare var __FEATURE_PROD_DEVTOOLS__: boolean
 declare var __FEATURE_SUSPENSE__: boolean
-
-// for tests
-declare namespace jest {
-  interface Matchers<R, T> {
-    toHaveBeenWarned(): R
-    toHaveBeenWarnedLast(): R
-    toHaveBeenWarnedTimes(n: number): R
-  }
-}
+declare var __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: boolean
 
 declare module '*.vue' {}
 
-declare module 'file-saver' {
-  export function saveAs(blob: any, name: any): void
-}
-
 declare module 'estree-walker' {
   export function walk<T>(
     root: T,
     options: {
-      enter?: (node: T, parent: T | undefined) => any
-      leave?: (node: T, parent: T | undefined) => any
+      enter?: (node: T, parent: T | null) => any
+      leave?: (node: T, parent: T | null) => any
       exit?: (node: T) => any
-    } & ThisType<{ skip: () => void }>
+    } & ThisType<{ skip: () => void }>,
   )
 }
 
diff --git a/packages/reactivity-transform/LICENSE b/packages/reactivity-transform/LICENSE
deleted file mode 100644
index 15f1f7e7a..000000000
--- a/packages/reactivity-transform/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2018-present, Yuxi (Evan) You
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
diff --git a/packages/reactivity-transform/README.md b/packages/reactivity-transform/README.md
deleted file mode 100644
index 931702b3b..000000000
--- a/packages/reactivity-transform/README.md
+++ /dev/null
@@ -1,123 +0,0 @@
-# @vue/reactivity-transform
-
-> ⚠️ This is experimental and the proposal has been dropped.
-> The feature is now marked as deprecated and will be removed from Vue core
-> in 3.4.
->
-> See reason for deprecation [here](https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028).
-
-## Basic Rules
-
-- Ref-creating APIs have `$`-prefixed versions that create reactive variables instead. They also do not need to be explicitly imported. These include:
-  - `ref`
-  - `computed`
-  - `shallowRef`
-  - `customRef`
-  - `toRef`
-- `$()` can be used to destructure an object into reactive variables, or turn existing refs into reactive variables
-- `$$()` to "escape" the transform, which allows access to underlying refs
-
-```js
-import { watchEffect } from 'vue'
-
-// bind ref as a variable
-let count = $ref(0)
-
-watchEffect(() => {
-  // no need for .value
-  console.log(count)
-})
-
-// assignments are reactive
-count++
-
-// get the actual ref
-console.log($$(count)) // { value: 1 }
-```
-
-Macros can be optionally imported to make it more explicit:
-
-```js
-// not necessary, but also works
-import { $, $ref } from 'vue/macros'
-
-let count = $ref(0)
-const { x, y } = $(useMouse())
-```
-
-### Global Types
-
-To enable types for the macros globally, include the following in a `.d.ts` file:
-
-```ts
-/// <reference types="vue/macros-global" />
-```
-
-## API
-
-This package is the lower-level transform that can be used standalone. Higher-level tooling (e.g. `@vitejs/plugin-vue` and `vue-loader`) will provide integration via options.
-
-### `shouldTransform`
-
-Can be used to do a cheap check to determine whether full transform should be performed.
-
-```js
-import { shouldTransform } from '@vue/reactivity-transform'
-
-shouldTransform(`let a = ref(0)`) // false
-shouldTransform(`let a = $ref(0)`) // true
-```
-
-### `transform`
-
-```js
-import { transform } from '@vue/reactivity-transform'
-
-const src = `let a = $ref(0); a++`
-const {
-  code, // import { ref as _ref } from 'vue'; let a = (ref(0)); a.value++"
-  map
-} = transform(src, {
-  filename: 'foo.ts',
-  sourceMap: true,
-
-  // @babel/parser plugins to enable.
-  // 'typescript' and 'jsx' will be auto-inferred from filename if provided,
-  // so in most cases explicit parserPlugins are not necessary
-  parserPlugins: [
-    /* ... */
-  ]
-})
-```
-
-**Options**
-
-```ts
-interface RefTransformOptions {
-  filename?: string
-  sourceMap?: boolean // default: false
-  parserPlugins?: ParserPlugin[]
-  importHelpersFrom?: string // default: "vue"
-}
-```
-
-### `transformAST`
-
-Transform with an existing Babel AST + MagicString instance. This is used internally by `@vue/compiler-sfc` to avoid double parse/transform cost.
-
-```js
-import { transformAST } from '@vue/reactivity-transform'
-import { parse } from '@babel/parser'
-import MagicString from 'magic-string'
-
-const src = `let a = $ref(0); a++`
-const ast = parse(src, { sourceType: 'module' })
-const s = new MagicString(src)
-
-const {
-  rootRefs, // ['a']
-  importedHelpers // ['ref']
-} = transformAST(ast, s)
-
-console.log(s.toString()) // let a = _ref(0); a.value++
-```
diff --git a/packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap b/packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap
deleted file mode 100644
index 3c3f85244..000000000
--- a/packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap
+++ /dev/null
@@ -1,292 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`$ unwrapping 1`] = `
-"
-    import { ref, shallowRef } from 'vue'
-    let foo = (ref())
-    export let a = (ref(1))
-    let b = (shallowRef({
-      count: 0
-    }))
-    let c = () => {}
-    let d
-    label: var e = (ref())
-    "
-`;
-
-exports[`$$ 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(1)
-    const b = (a)
-    const c = ({ a })
-    callExternal((a))
-    "
-`;
-
-exports[`$$ with some edge cases 1`] = `
-"import { ref as _ref } from 'vue'
-
-    ;(  /* 2 */ count /* 2 */   )
-    ;(   count /* 2 */, /**/ a   )
-    ;(   (count /* 2 */, /**/ a) /**/   )
-    {
-      a:(count,a)
-    }
-    ;((count) + 1)
-    ;([count])
-    ; (count )
-    console.log(((a)))
-    ;(a,b)
-    ;(((a++,b)))
-    count = ( a++ ,b)
-    count = ()=>(a++,b)
-    let r1 = _ref(a, (a++,b))
-    let r2 = { a:(a++,b),b: (a) }
-    switch((c)){
-      case d:
-        ;(a)
-        ;((h,f))
-        break
-    }
-    ((count++,(count),(count,a)))
-    "
-`;
-
-exports[`$computed declaration 1`] = `
-"import { computed as _computed } from 'vue'
-
-    let a = _computed(() => 1)
-    "
-`;
-
-exports[`$ref & $shallowRef declarations 1`] = `
-"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
-
-    let foo = _ref()
-    export let a = _ref(1)
-    let b = _shallowRef({
-      count: 0
-    })
-    let c = () => {}
-    let d
-    label: var e = _ref()
-    "
-`;
-
-exports[`accessing ref binding 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(1)
-    console.log(a.value)
-    function get() {
-      return a.value + 1
-    }
-    "
-`;
-
-exports[`array destructure 1`] = `
-"import { ref as _ref, toRef as _toRef } from 'vue'
-
-    let n = _ref(1), __$temp_1 = (useFoo()),
-  a = _toRef(__$temp_1, 0),
-  b = _toRef(__$temp_1, 1, 1);
-    console.log(n.value, a.value, b.value)
-    "
-`;
-
-exports[`handle TS casting syntax 1`] = `
-"import { ref as _ref } from 'vue'
-
-      let a = _ref(1)
-      console.log(a.value!)
-      console.log(a.value! + 1)
-      console.log(a.value as number)
-      console.log((a.value as number) + 1)
-      console.log(<number>a.value)
-      console.log(<number>a.value + 1)
-      console.log(a.value! + (a.value as number))
-      console.log(a.value! + <number>a.value)
-      console.log((a.value as number) + <number>a.value)
-      "
-`;
-
-exports[`macro import alias and removal 1`] = `
-"import { ref as _ref, toRef as _toRef } from 'vue'
-
-    
-
-    let a = _ref(1)
-    const __$temp_1 = (useMouse()),
-  x = _toRef(__$temp_1, 'x'),
-  y = _toRef(__$temp_1, 'y');
-    "
-`;
-
-exports[`mixing $ref & $computed declarations 1`] = `
-"import { ref as _ref, computed as _computed } from 'vue'
-
-    let a = _ref(1), b = _computed(() => a.value + 1)
-    "
-`;
-
-exports[`multi $ref declarations 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(1), b = _ref(2), c = _ref({
-      count: 0
-    })
-    "
-`;
-
-exports[`mutating ref binding 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(1)
-    let b = _ref({ count: 0 })
-    function inc() {
-      a.value++
-      a.value = a.value + 1
-      b.value.count++
-      b.value.count = b.value.count + 1
-      ;({ a: a.value } = { a: 2 })
-      ;[a.value] = [1]
-    }
-    "
-`;
-
-exports[`nested destructure 1`] = `
-"import { toRef as _toRef } from 'vue'
-
-    let __$temp_1 = (useFoo()),
-  b = _toRef(__$temp_1[0].a, 'b');
-    let __$temp_2 = (useBar()),
-  d = _toRef(__$temp_2.c, 0),
-  e = _toRef(__$temp_2.c, 1);
-    console.log(b.value, d.value, e.value)
-    "
-`;
-
-exports[`nested scopes 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(0)
-    let b = _ref(0)
-    let c = 0
-
-    a.value++ // outer a
-    b.value++ // outer b
-    c++ // outer c
-
-    let bar = _ref(0)
-    bar.value++ // outer bar
-
-    function foo({ a }) {
-      a++ // inner a
-      b.value++ // inner b
-      let c = _ref(0)
-      c.value++ // inner c
-      let d = _ref(0)
-
-      function bar(c) {
-        c++ // nested c
-        d.value++ // nested d
-      }
-      bar() // inner bar
-
-      if (true) {
-        let a = _ref(0)
-        a.value++ // if block a
-      }
-
-      return ({ a, b, c, d })
-    }
-    "
-`;
-
-exports[`object destructure 1`] = `
-"import { ref as _ref, toRef as _toRef } from 'vue'
-
-    let n = _ref(1), __$temp_1 = (useFoo()),
-  a = _toRef(__$temp_1, 'a'),
-  c = _toRef(__$temp_1, 'b'),
-  d = _toRef(__$temp_1, 'd', 1),
-  f = _toRef(__$temp_1, 'e', 2),
-  h = _toRef(__$temp_1, g);
-    let __$temp_2 = (useSomething(() => 1)),
-  foo = _toRef(__$temp_2, 'foo');;
-    console.log(n.value, a.value, c.value, d.value, f.value, h.value, foo.value)
-    "
-`;
-
-exports[`object destructure w/ mid-path default values 1`] = `
-"import { toRef as _toRef } from 'vue'
-
-    const __$temp_1 = (useFoo()),
-  b = _toRef((__$temp_1.a || { b: 123 }), 'b');
-    console.log(b.value)
-  "
-`;
-
-exports[`should not overwrite current scope 1`] = `
-"
-    const fn = () => {
-      const $ = () => 'foo'
-      const $ref = () => 'bar'
-      const $$ = () => 'baz'
-      console.log($())
-      console.log($ref())
-      console.log($$())
-    }
-    "
-`;
-
-exports[`should not overwrite importing 1`] = `
-"
-    import { $, $$ } from './foo'
-    $('foo')
-    $$('bar')
-    "
-`;
-
-exports[`should not rewrite scope variable 1`] = `
-"import { ref as _ref } from 'vue'
-
-
-      let a = _ref(1)
-      let b = _ref(1)
-      let d = _ref(1)
-      const e = 1
-      function test() {
-        const a = 2
-        console.log(a)
-        console.log(b.value)
-        let c = { c: 3 }
-        console.log(c)
-        console.log(d.value)
-        console.log(e)
-      }
-      let err = _ref(null)
-      try {
-      } catch (err) {
-        console.log(err)
-      }
-    "
-`;
-
-exports[`should not rewrite type identifiers 1`] = `
-"import { ref as _ref } from 'vue'
-const props = defineProps<{msg: string; ids?: string[]}>()
-        let ids = _ref([])"
-`;
-
-exports[`using ref binding in property shorthand 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(1)
-    const b = { a: a.value }
-    function test() {
-      const { a } = b
-    }
-    "
-`;
diff --git a/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts b/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts
deleted file mode 100644
index 5255be6ba..000000000
--- a/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts
+++ /dev/null
@@ -1,564 +0,0 @@
-import { parse } from '@babel/parser'
-import { transform } from '../src'
-
-function assertCode(code: string) {
-  // parse the generated code to make sure it is valid
-  try {
-    parse(code, {
-      sourceType: 'module',
-      plugins: ['typescript']
-    })
-  } catch (e: any) {
-    console.log(code)
-    throw e
-  }
-  expect(code).toMatchSnapshot()
-}
-
-test('$ unwrapping', () => {
-  const { code, rootRefs } = transform(`
-    import { ref, shallowRef } from 'vue'
-    let foo = $(ref())
-    export let a = $(ref(1))
-    let b = $(shallowRef({
-      count: 0
-    }))
-    let c = () => {}
-    let d
-    label: var e = $(ref())
-    `)
-  expect(code).not.toMatch(`$(ref())`)
-  expect(code).not.toMatch(`$(ref(1))`)
-  expect(code).not.toMatch(`$(shallowRef({`)
-  expect(code).toMatch(`let foo = (ref())`)
-  expect(code).toMatch(`export let a = (ref(1))`)
-  expect(code).toMatch(`
-    let b = (shallowRef({
-      count: 0
-    }))
-    `)
-  // normal declarations left untouched
-  expect(code).toMatch(`let c = () => {}`)
-  expect(code).toMatch(`let d`)
-  expect(code).toMatch(`label: var e = (ref())`)
-  expect(rootRefs).toStrictEqual(['foo', 'a', 'b', 'e'])
-  assertCode(code)
-})
-
-test('$ref & $shallowRef declarations', () => {
-  const { code, rootRefs, importedHelpers } = transform(`
-    let foo = $ref()
-    export let a = $ref(1)
-    let b = $shallowRef({
-      count: 0
-    })
-    let c = () => {}
-    let d
-    label: var e = $ref()
-    `)
-  expect(code).toMatch(
-    `import { ref as _ref, shallowRef as _shallowRef } from 'vue'`
-  )
-  expect(code).not.toMatch(`$ref()`)
-  expect(code).not.toMatch(`$ref(1)`)
-  expect(code).not.toMatch(`$shallowRef({`)
-  expect(code).toMatch(`let foo = _ref()`)
-  expect(code).toMatch(`let a = _ref(1)`)
-  expect(code).toMatch(`
-    let b = _shallowRef({
-      count: 0
-    })
-    `)
-  // normal declarations left untouched
-  expect(code).toMatch(`let c = () => {}`)
-  expect(code).toMatch(`let d`)
-  expect(code).toMatch(`label: var e = _ref()`)
-  expect(rootRefs).toStrictEqual(['foo', 'a', 'b', 'e'])
-  expect(importedHelpers).toStrictEqual(['ref', 'shallowRef'])
-  assertCode(code)
-})
-
-test('multi $ref declarations', () => {
-  const { code, rootRefs, importedHelpers } = transform(`
-    let a = $ref(1), b = $ref(2), c = $ref({
-      count: 0
-    })
-    `)
-  expect(code).toMatch(`
-    let a = _ref(1), b = _ref(2), c = _ref({
-      count: 0
-    })
-    `)
-  expect(rootRefs).toStrictEqual(['a', 'b', 'c'])
-  expect(importedHelpers).toStrictEqual(['ref'])
-  assertCode(code)
-})
-
-test('$computed declaration', () => {
-  const { code, rootRefs, importedHelpers } = transform(`
-    let a = $computed(() => 1)
-    `)
-  expect(code).toMatch(`
-    let a = _computed(() => 1)
-    `)
-  expect(rootRefs).toStrictEqual(['a'])
-  expect(importedHelpers).toStrictEqual(['computed'])
-  assertCode(code)
-})
-
-test('mixing $ref & $computed declarations', () => {
-  const { code, rootRefs, importedHelpers } = transform(`
-    let a = $ref(1), b = $computed(() => a + 1)
-    `)
-  expect(code).toMatch(`
-    let a = _ref(1), b = _computed(() => a.value + 1)
-    `)
-  expect(rootRefs).toStrictEqual(['a', 'b'])
-  expect(importedHelpers).toStrictEqual(['ref', 'computed'])
-  assertCode(code)
-})
-
-test('accessing ref binding', () => {
-  const { code } = transform(`
-    let a = $ref(1)
-    console.log(a)
-    function get() {
-      return a + 1
-    }
-    `)
-  expect(code).toMatch(`console.log(a.value)`)
-  expect(code).toMatch(`return a.value + 1`)
-  assertCode(code)
-})
-
-describe('cases that should not append .value', () => {
-  test('member expression', () => {
-    const { code } = transform(`
-      let a = $ref(1)
-      console.log(b.a)
-      `)
-    expect(code).not.toMatch(`a.value`)
-  })
-
-  test('function argument', () => {
-    const { code } = transform(`
-      let a = $ref(1)
-      function get(a) {
-        return a + 1
-      }
-      function get2({ a }) {
-        return a + 1
-      }
-      function get3([a]) {
-        return a + 1
-      }
-      `)
-    expect(code).not.toMatch(`a.value`)
-  })
-
-  test('for in/of loops', () => {
-    const { code } = transform(`
-    let a = $ref(1)
-    for (const [a, b] of arr) {
-      console.log(a)
-    }
-    for (let a in arr) {
-      console.log(a)
-    }
-    `)
-    expect(code).not.toMatch(`a.value`)
-  })
-})
-
-test('mutating ref binding', () => {
-  const { code } = transform(`
-    let a = $ref(1)
-    let b = $ref({ count: 0 })
-    function inc() {
-      a++
-      a = a + 1
-      b.count++
-      b.count = b.count + 1
-      ;({ a } = { a: 2 })
-      ;[a] = [1]
-    }
-    `)
-  expect(code).toMatch(`a.value++`)
-  expect(code).toMatch(`a.value = a.value + 1`)
-  expect(code).toMatch(`b.value.count++`)
-  expect(code).toMatch(`b.value.count = b.value.count + 1`)
-  expect(code).toMatch(`;({ a: a.value } = { a: 2 })`)
-  expect(code).toMatch(`;[a.value] = [1]`)
-  assertCode(code)
-})
-
-test('using ref binding in property shorthand', () => {
-  const { code } = transform(`
-    let a = $ref(1)
-    const b = { a }
-    function test() {
-      const { a } = b
-    }
-    `)
-  expect(code).toMatch(`const b = { a: a.value }`)
-  // should not convert destructure
-  expect(code).toMatch(`const { a } = b`)
-  assertCode(code)
-})
-
-test('should not rewrite scope variable', () => {
-  const { code } = transform(`
-
-      let a = $ref(1)
-      let b = $ref(1)
-      let d = $ref(1)
-      const e = 1
-      function test() {
-        const a = 2
-        console.log(a)
-        console.log(b)
-        let c = { c: 3 }
-        console.log(c)
-        console.log(d)
-        console.log(e)
-      }
-      let err = $ref(null)
-      try {
-      } catch (err) {
-        console.log(err)
-      }
-    `)
-  expect(code).toMatch('console.log(a)')
-  expect(code).toMatch('console.log(b.value)')
-  expect(code).toMatch('console.log(c)')
-  expect(code).toMatch('console.log(d.value)')
-  expect(code).toMatch('console.log(e)')
-  expect(code).toMatch('console.log(err)')
-  assertCode(code)
-})
-
-test('object destructure', () => {
-  const { code, rootRefs } = transform(`
-    let n = $ref(1), { a, b: c, d = 1, e: f = 2, [g]: h } = $(useFoo())
-    let { foo } = $(useSomething(() => 1));
-    console.log(n, a, c, d, f, h, foo)
-    `)
-  expect(code).toMatch(`a = _toRef(__$temp_1, 'a')`)
-  expect(code).toMatch(`c = _toRef(__$temp_1, 'b')`)
-  expect(code).toMatch(`d = _toRef(__$temp_1, 'd', 1)`)
-  expect(code).toMatch(`f = _toRef(__$temp_1, 'e', 2)`)
-  expect(code).toMatch(`h = _toRef(__$temp_1, g)`)
-  expect(code).toMatch(`foo = _toRef(__$temp_2, 'foo')`)
-  expect(code).toMatch(
-    `console.log(n.value, a.value, c.value, d.value, f.value, h.value, foo.value)`
-  )
-  expect(rootRefs).toStrictEqual(['n', 'a', 'c', 'd', 'f', 'h', 'foo'])
-  assertCode(code)
-})
-
-test('object destructure w/ mid-path default values', () => {
-  const { code, rootRefs } = transform(`
-    const { a: { b } = { b: 123 }} = $(useFoo())
-    console.log(b)
-  `)
-  expect(code).toMatch(`b = _toRef((__$temp_1.a || { b: 123 }), 'b')`)
-  expect(code).toMatch(`console.log(b.value)`)
-  expect(rootRefs).toStrictEqual(['b'])
-  assertCode(code)
-})
-
-test('array destructure', () => {
-  const { code, rootRefs } = transform(`
-    let n = $ref(1), [a, b = 1] = $(useFoo())
-    console.log(n, a, b)
-    `)
-  expect(code).toMatch(`a = _toRef(__$temp_1, 0)`)
-  expect(code).toMatch(`b = _toRef(__$temp_1, 1, 1)`)
-  expect(code).toMatch(`console.log(n.value, a.value, b.value)`)
-  expect(rootRefs).toStrictEqual(['n', 'a', 'b'])
-  assertCode(code)
-})
-
-test('nested destructure', () => {
-  const { code, rootRefs } = transform(`
-    let [{ a: { b }}] = $(useFoo())
-    let { c: [d, e] } = $(useBar())
-    console.log(b, d, e)
-    `)
-  expect(code).toMatch(`b = _toRef(__$temp_1[0].a, 'b')`)
-  expect(code).toMatch(`d = _toRef(__$temp_2.c, 0)`)
-  expect(code).toMatch(`e = _toRef(__$temp_2.c, 1)`)
-  expect(rootRefs).toStrictEqual(['b', 'd', 'e'])
-  assertCode(code)
-})
-
-test('$$', () => {
-  const { code } = transform(`
-    let a = $ref(1)
-    const b = $$(a)
-    const c = $$({ a })
-    callExternal($$(a))
-    `)
-  expect(code).toMatch(`const b = (a)`)
-  expect(code).toMatch(`const c = ({ a })`)
-  expect(code).toMatch(`callExternal((a))`)
-  assertCode(code)
-})
-
-test('$$ with some edge cases', () => {
-  const { code } = transform(`
-    $$(  /* 2 */ count /* 2 */   )
-    $$(   count /* 2 */, /**/ a   )
-    $$(   (count /* 2 */, /**/ a) /**/   )
-    {
-      a:$$(count,a)
-    }
-    $$((count) + 1)
-    $$([count])
-    $$ (count )
-    console.log($$($$(a)))
-    $$(a,b)
-    $$($$((a++,b)))
-    count = $$( a++ ,b)
-    count = ()=>$$(a++,b)
-    let r1 = $ref(a, $$(a++,b))
-    let r2 = { a:$$(a++,b),b:$$ (a) }
-    switch($$(c)){
-      case d:
-        $$(a)
-        $$($$(h,f))
-        break
-    }
-    ($$(count++,$$(count),$$(count,a)))
-    `)
-  expect(code).toMatch(`/* 2 */ count /* 2 */`)
-  expect(code).toMatch(`;(   count /* 2 */, /**/ a   )`)
-  expect(code).toMatch(`;(   (count /* 2 */, /**/ a) /**/   )`)
-  expect(code).toMatch(`a:(count,a)`)
-  expect(code).toMatch(`;((count) + 1)`)
-  expect(code).toMatch(`;([count])`)
-  expect(code).toMatch(`;(a,b)`)
-  expect(code).toMatch(`log(((a)))`)
-  expect(code).toMatch(`count = ( a++ ,b)`)
-  expect(code).toMatch(`()=>(a++,b)`)
-  expect(code).toMatch(`_ref(a, (a++,b))`)
-  expect(code).toMatch(`{ a:(a++,b),b: (a) }`)
-  expect(code).toMatch(`switch((c))`)
-  expect(code).toMatch(`;((h,f))`)
-  expect(code).toMatch(`((count++,(count),(count,a)))`)
-  assertCode(code)
-})
-
-test('nested scopes', () => {
-  const { code, rootRefs } = transform(`
-    let a = $ref(0)
-    let b = $ref(0)
-    let c = 0
-
-    a++ // outer a
-    b++ // outer b
-    c++ // outer c
-
-    let bar = $ref(0)
-    bar++ // outer bar
-
-    function foo({ a }) {
-      a++ // inner a
-      b++ // inner b
-      let c = $ref(0)
-      c++ // inner c
-      let d = $ref(0)
-
-      function bar(c) {
-        c++ // nested c
-        d++ // nested d
-      }
-      bar() // inner bar
-
-      if (true) {
-        let a = $ref(0)
-        a++ // if block a
-      }
-
-      return $$({ a, b, c, d })
-    }
-    `)
-  expect(rootRefs).toStrictEqual(['a', 'b', 'bar'])
-
-  expect(code).toMatch('a.value++ // outer a')
-  expect(code).toMatch('b.value++ // outer b')
-  expect(code).toMatch('c++ // outer c')
-
-  expect(code).toMatch('a++ // inner a') // shadowed by function arg
-  expect(code).toMatch('b.value++ // inner b')
-  expect(code).toMatch('c.value++ // inner c') // shadowed by local ref binding
-
-  expect(code).toMatch('c++ // nested c') // shadowed by inline fn arg
-  expect(code).toMatch(`d.value++ // nested d`)
-
-  expect(code).toMatch(`a.value++ // if block a`) // if block
-
-  expect(code).toMatch(`bar.value++ // outer bar`)
-  // inner bar shadowed by function declaration
-  expect(code).toMatch(`bar() // inner bar`)
-
-  expect(code).toMatch(`return ({ a, b, c, d })`)
-  assertCode(code)
-})
-
-//#4062
-test('should not rewrite type identifiers', () => {
-  const { code } = transform(
-    `const props = defineProps<{msg: string; ids?: string[]}>()
-        let ids = $ref([])`,
-    {
-      parserPlugins: ['typescript']
-    }
-  )
-  expect(code).not.toMatch('.value')
-  assertCode(code)
-})
-
-// #4254
-test('handle TS casting syntax', () => {
-  const { code } = transform(
-    `
-      let a = $ref(1)
-      console.log(a!)
-      console.log(a! + 1)
-      console.log(a as number)
-      console.log((a as number) + 1)
-      console.log(<number>a)
-      console.log(<number>a + 1)
-      console.log(a! + (a as number))
-      console.log(a! + <number>a)
-      console.log((a as number) + <number>a)
-      `,
-    {
-      parserPlugins: ['typescript']
-    }
-  )
-  expect(code).toMatch('console.log(a.value!)')
-  expect(code).toMatch('console.log(a.value as number)')
-  expect(code).toMatch('console.log(<number>a.value)')
-  assertCode(code)
-})
-
-test('macro import alias and removal', () => {
-  const { code } = transform(
-    `
-    import { $ as fromRefs, $ref } from 'vue/macros'
-
-    let a = $ref(1)
-    const { x, y } = fromRefs(useMouse())
-    `
-  )
-  // should remove imports
-  expect(code).not.toMatch(`from 'vue/macros'`)
-  expect(code).toMatch(`let a = _ref(1)`)
-  expect(code).toMatch(`const __$temp_1 = (useMouse())`)
-  assertCode(code)
-})
-
-// #6838
-test('should not overwrite importing', () => {
-  const { code } = transform(
-    `
-    import { $, $$ } from './foo'
-    $('foo')
-    $$('bar')
-    `
-  )
-  assertCode(code)
-})
-
-// #6838
-test('should not overwrite current scope', () => {
-  const { code } = transform(
-    `
-    const fn = () => {
-      const $ = () => 'foo'
-      const $ref = () => 'bar'
-      const $$ = () => 'baz'
-      console.log($())
-      console.log($ref())
-      console.log($$())
-    }
-    `
-  )
-  assertCode(code)
-})
-
-describe('errors', () => {
-  test('$ref w/ destructure', () => {
-    expect(() => transform(`let { a } = $ref(1)`)).toThrow(
-      `cannot be used with destructure`
-    )
-  })
-
-  test('$computed w/ destructure', () => {
-    expect(() => transform(`let { a } = $computed(() => 1)`)).toThrow(
-      `cannot be used with destructure`
-    )
-  })
-
-  test('warn usage in non-init positions', () => {
-    expect(() =>
-      transform(
-        `let bar = $ref(1)
-          bar = $ref(2)`
-      )
-    ).toThrow(`$ref can only be used as the initializer`)
-
-    expect(() => transform(`let bar = { foo: $computed(1) }`)).toThrow(
-      `$computed can only be used as the initializer`
-    )
-  })
-
-  test('not transform the prototype attributes', () => {
-    const { code } = transform(`
-    const hasOwnProperty = Object.prototype.hasOwnProperty
-    const hasOwn = (val, key) => hasOwnProperty.call(val, key)
-    `)
-    expect(code).not.toMatch('.value')
-  })
-
-  test('rest element in $() destructure', () => {
-    expect(() => transform(`let { a, ...b } = $(foo())`)).toThrow(
-      `does not support rest element`
-    )
-    expect(() => transform(`let [a, ...b] = $(foo())`)).toThrow(
-      `does not support rest element`
-    )
-  })
-
-  test('assignment to constant variable', () => {
-    expect(() =>
-      transform(`
-        const foo = $ref(0)
-        foo = 1
-      `)
-    ).toThrow(`Assignment to constant variable.`)
-
-    expect(() =>
-      transform(`
-        const [a, b] = $([1, 2])
-        a = 1
-      `)
-    ).toThrow(`Assignment to constant variable.`)
-
-    expect(() =>
-      transform(`
-        const foo = $ref(0)
-        foo++
-      `)
-    ).toThrow(`Assignment to constant variable.`)
-
-    expect(() =>
-      transform(`
-      const foo = $ref(0)
-      bar = foo
-      `)
-    ).not.toThrow()
-  })
-})
diff --git a/packages/reactivity-transform/package.json b/packages/reactivity-transform/package.json
deleted file mode 100644
index c68bd5aca..000000000
--- a/packages/reactivity-transform/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-  "name": "@vue/reactivity-transform",
-  "version": "3.3.9",
-  "description": "@vue/reactivity-transform",
-  "main": "dist/reactivity-transform.cjs.js",
-  "files": [
-    "dist"
-  ],
-  "buildOptions": {
-    "formats": [
-      "cjs"
-    ],
-    "prod": false
-  },
-  "types": "dist/reactivity-transform.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vuejs/core.git",
-    "directory": "packages/reactivity-transform"
-  },
-  "keywords": [
-    "vue"
-  ],
-  "author": "Evan You",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/vuejs/core/issues"
-  },
-  "homepage": "https://github.com/vuejs/core/tree/dev/packages/reactivity-transform#readme",
-  "dependencies": {
-    "@babel/parser": "^7.23.4",
-    "@vue/compiler-core": "workspace:*",
-    "@vue/shared": "workspace:*",
-    "estree-walker": "^2.0.2",
-    "magic-string": "^0.30.5"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/types": "^7.23.4"
-  }
-}
diff --git a/packages/reactivity-transform/src/babelPlugin.ts b/packages/reactivity-transform/src/babelPlugin.ts
deleted file mode 100644
index 757ad9c1f..000000000
--- a/packages/reactivity-transform/src/babelPlugin.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function plugin() {
-  // TODO
-}
diff --git a/packages/reactivity-transform/src/index.ts b/packages/reactivity-transform/src/index.ts
deleted file mode 100644
index 0a4d85f00..000000000
--- a/packages/reactivity-transform/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './reactivityTransform'
diff --git a/packages/reactivity-transform/src/reactivityTransform.ts b/packages/reactivity-transform/src/reactivityTransform.ts
deleted file mode 100644
index 596de0e12..000000000
--- a/packages/reactivity-transform/src/reactivityTransform.ts
+++ /dev/null
@@ -1,794 +0,0 @@
-import {
-  Node,
-  Identifier,
-  BlockStatement,
-  CallExpression,
-  ObjectPattern,
-  ArrayPattern,
-  Program,
-  VariableDeclarator,
-  Expression,
-  VariableDeclaration,
-  ImportDeclaration,
-  ImportSpecifier,
-  ImportDefaultSpecifier,
-  ImportNamespaceSpecifier
-} from '@babel/types'
-import MagicString, { SourceMap } from 'magic-string'
-import { walk } from 'estree-walker'
-import {
-  extractIdentifiers,
-  isFunctionType,
-  isInDestructureAssignment,
-  isReferencedIdentifier,
-  isStaticProperty,
-  walkFunctionParams
-} from '@vue/compiler-core'
-import { parse, ParserPlugin } from '@babel/parser'
-import { hasOwn, isArray, isString, genPropsAccessExp } from '@vue/shared'
-
-const CONVERT_SYMBOL = '$'
-const ESCAPE_SYMBOL = '$$'
-const IMPORT_SOURCE = 'vue/macros'
-const shorthands = ['ref', 'computed', 'shallowRef', 'toRef', 'customRef']
-const transformCheckRE = /[^\w]\$(?:\$|ref|computed|shallowRef)?\s*(\(|\<)/
-
-/**
- * @deprecated will be removed in 3.4
- */
-export function shouldTransform(src: string): boolean {
-  return transformCheckRE.test(src)
-}
-
-interface Binding {
-  isConst?: boolean
-  isProp?: boolean
-}
-type Scope = Record<string, Binding | false>
-
-export interface RefTransformOptions {
-  filename?: string
-  sourceMap?: boolean
-  parserPlugins?: ParserPlugin[]
-  importHelpersFrom?: string
-}
-
-export interface RefTransformResults {
-  code: string
-  map: SourceMap | null
-  rootRefs: string[]
-  importedHelpers: string[]
-}
-
-export interface ImportBinding {
-  local: string
-  imported: string
-  source: string
-  specifier: ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier
-}
-
-/**
- * @deprecated will be removed in 3.4
- */
-export function transform(
-  src: string,
-  {
-    filename,
-    sourceMap,
-    parserPlugins,
-    importHelpersFrom = 'vue'
-  }: RefTransformOptions = {}
-): RefTransformResults {
-  const plugins: ParserPlugin[] = parserPlugins || []
-  if (filename) {
-    if (/\.tsx?$/.test(filename)) {
-      plugins.push('typescript')
-    }
-    if (filename.endsWith('x')) {
-      plugins.push('jsx')
-    }
-  }
-
-  const ast = parse(src, {
-    sourceType: 'module',
-    plugins
-  })
-  const s = new MagicString(src)
-  const res = transformAST(ast.program, s, 0)
-
-  // inject helper imports
-  if (res.importedHelpers.length) {
-    s.prepend(
-      `import { ${res.importedHelpers
-        .map(h => `${h} as _${h}`)
-        .join(', ')} } from '${importHelpersFrom}'\n`
-    )
-  }
-
-  return {
-    ...res,
-    code: s.toString(),
-    map: sourceMap
-      ? s.generateMap({
-          source: filename,
-          hires: true,
-          includeContent: true
-        })
-      : null
-  }
-}
-
-/**
- * @deprecated will be removed in 3.4
- */
-export function transformAST(
-  ast: Program,
-  s: MagicString,
-  offset = 0,
-  knownRefs?: string[],
-  knownProps?: Record<
-    string, // public prop key
-    {
-      local: string // local identifier, may be different
-      default?: any
-      isConst?: boolean
-    }
-  >
-): {
-  rootRefs: string[]
-  importedHelpers: string[]
-} {
-  warnExperimental()
-
-  const userImports: Record<string, ImportBinding> = Object.create(null)
-  for (const node of ast.body) {
-    if (node.type !== 'ImportDeclaration') continue
-    walkImportDeclaration(node)
-  }
-
-  // macro import handling
-  let convertSymbol: string | undefined
-  let escapeSymbol: string | undefined
-  for (const { local, imported, source, specifier } of Object.values(
-    userImports
-  )) {
-    if (source === IMPORT_SOURCE) {
-      if (imported === ESCAPE_SYMBOL) {
-        escapeSymbol = local
-      } else if (imported === CONVERT_SYMBOL) {
-        convertSymbol = local
-      } else if (imported !== local) {
-        error(
-          `macro imports for ref-creating methods do not support aliasing.`,
-          specifier
-        )
-      }
-    }
-  }
-
-  // default symbol
-  if (!convertSymbol && !userImports[CONVERT_SYMBOL]) {
-    convertSymbol = CONVERT_SYMBOL
-  }
-  if (!escapeSymbol && !userImports[ESCAPE_SYMBOL]) {
-    escapeSymbol = ESCAPE_SYMBOL
-  }
-
-  const importedHelpers = new Set<string>()
-  const rootScope: Scope = {}
-  const scopeStack: Scope[] = [rootScope]
-  let currentScope: Scope = rootScope
-  let escapeScope: CallExpression | undefined // inside $$()
-  const excludedIds = new WeakSet<Identifier>()
-  const parentStack: Node[] = []
-  const propsLocalToPublicMap: Record<string, string> = Object.create(null)
-
-  if (knownRefs) {
-    for (const key of knownRefs) {
-      rootScope[key] = {}
-    }
-  }
-  if (knownProps) {
-    for (const key in knownProps) {
-      const { local, isConst } = knownProps[key]
-      rootScope[local] = {
-        isProp: true,
-        isConst: !!isConst
-      }
-      propsLocalToPublicMap[local] = key
-    }
-  }
-
-  function walkImportDeclaration(node: ImportDeclaration) {
-    const source = node.source.value
-    if (source === IMPORT_SOURCE) {
-      s.remove(node.start! + offset, node.end! + offset)
-    }
-
-    for (const specifier of node.specifiers) {
-      const local = specifier.local.name
-      const imported =
-        (specifier.type === 'ImportSpecifier' &&
-          specifier.imported.type === 'Identifier' &&
-          specifier.imported.name) ||
-        'default'
-      userImports[local] = {
-        source,
-        local,
-        imported,
-        specifier
-      }
-    }
-  }
-
-  function isRefCreationCall(callee: string): string | false {
-    if (!convertSymbol || currentScope[convertSymbol] !== undefined) {
-      return false
-    }
-    if (callee === convertSymbol) {
-      return convertSymbol
-    }
-    if (callee[0] === '$' && shorthands.includes(callee.slice(1))) {
-      return callee
-    }
-    return false
-  }
-
-  function error(msg: string, node: Node): never {
-    const e = new Error(msg)
-    ;(e as any).node = node
-    throw e
-  }
-
-  function helper(msg: string) {
-    importedHelpers.add(msg)
-    return `_${msg}`
-  }
-
-  function registerBinding(id: Identifier, binding?: Binding) {
-    excludedIds.add(id)
-    if (currentScope) {
-      currentScope[id.name] = binding ? binding : false
-    } else {
-      error(
-        'registerBinding called without active scope, something is wrong.',
-        id
-      )
-    }
-  }
-
-  const registerRefBinding = (id: Identifier, isConst = false) =>
-    registerBinding(id, { isConst })
-
-  let tempVarCount = 0
-  function genTempVar() {
-    return `__$temp_${++tempVarCount}`
-  }
-
-  function snip(node: Node) {
-    return s.original.slice(node.start! + offset, node.end! + offset)
-  }
-
-  function walkScope(node: Program | BlockStatement, isRoot = false) {
-    for (const stmt of node.body) {
-      if (stmt.type === 'VariableDeclaration') {
-        walkVariableDeclaration(stmt, isRoot)
-      } else if (
-        stmt.type === 'FunctionDeclaration' ||
-        stmt.type === 'ClassDeclaration'
-      ) {
-        if (stmt.declare || !stmt.id) continue
-        registerBinding(stmt.id)
-      } else if (
-        (stmt.type === 'ForOfStatement' || stmt.type === 'ForInStatement') &&
-        stmt.left.type === 'VariableDeclaration'
-      ) {
-        walkVariableDeclaration(stmt.left)
-      } else if (
-        stmt.type === 'ExportNamedDeclaration' &&
-        stmt.declaration &&
-        stmt.declaration.type === 'VariableDeclaration'
-      ) {
-        walkVariableDeclaration(stmt.declaration, isRoot)
-      } else if (
-        stmt.type === 'LabeledStatement' &&
-        stmt.body.type === 'VariableDeclaration'
-      ) {
-        walkVariableDeclaration(stmt.body, isRoot)
-      }
-    }
-  }
-
-  function walkVariableDeclaration(stmt: VariableDeclaration, isRoot = false) {
-    if (stmt.declare) {
-      return
-    }
-    for (const decl of stmt.declarations) {
-      let refCall
-      const isCall =
-        decl.init &&
-        decl.init.type === 'CallExpression' &&
-        decl.init.callee.type === 'Identifier'
-      if (
-        isCall &&
-        (refCall = isRefCreationCall((decl as any).init.callee.name))
-      ) {
-        processRefDeclaration(
-          refCall,
-          decl.id,
-          decl.init as CallExpression,
-          stmt.kind === 'const'
-        )
-      } else {
-        const isProps =
-          isRoot && isCall && (decl as any).init.callee.name === 'defineProps'
-        for (const id of extractIdentifiers(decl.id)) {
-          if (isProps) {
-            // for defineProps destructure, only exclude them since they
-            // are already passed in as knownProps
-            excludedIds.add(id)
-          } else {
-            registerBinding(id)
-          }
-        }
-      }
-    }
-  }
-
-  function processRefDeclaration(
-    method: string,
-    id: VariableDeclarator['id'],
-    call: CallExpression,
-    isConst: boolean
-  ) {
-    excludedIds.add(call.callee as Identifier)
-    if (method === convertSymbol) {
-      // $
-      // remove macro
-      s.remove(call.callee.start! + offset, call.callee.end! + offset)
-      if (id.type === 'Identifier') {
-        // single variable
-        registerRefBinding(id, isConst)
-      } else if (id.type === 'ObjectPattern') {
-        processRefObjectPattern(id, call, isConst)
-      } else if (id.type === 'ArrayPattern') {
-        processRefArrayPattern(id, call, isConst)
-      }
-    } else {
-      // shorthands
-      if (id.type === 'Identifier') {
-        registerRefBinding(id, isConst)
-        // replace call
-        s.overwrite(
-          call.start! + offset,
-          call.start! + method.length + offset,
-          helper(method.slice(1))
-        )
-      } else {
-        error(`${method}() cannot be used with destructure patterns.`, call)
-      }
-    }
-  }
-
-  function processRefObjectPattern(
-    pattern: ObjectPattern,
-    call: CallExpression,
-    isConst: boolean,
-    tempVar?: string,
-    path: PathSegment[] = []
-  ) {
-    if (!tempVar) {
-      tempVar = genTempVar()
-      // const { x } = $(useFoo()) --> const __$temp_1 = useFoo()
-      s.overwrite(pattern.start! + offset, pattern.end! + offset, tempVar)
-    }
-
-    let nameId: Identifier | undefined
-    for (const p of pattern.properties) {
-      let key: Expression | string | undefined
-      let defaultValue: Expression | undefined
-      if (p.type === 'ObjectProperty') {
-        if (p.key.start! === p.value.start!) {
-          // shorthand { foo }
-          nameId = p.key as Identifier
-          if (p.value.type === 'Identifier') {
-            // avoid shorthand value identifier from being processed
-            excludedIds.add(p.value)
-          } else if (
-            p.value.type === 'AssignmentPattern' &&
-            p.value.left.type === 'Identifier'
-          ) {
-            // { foo = 1 }
-            excludedIds.add(p.value.left)
-            defaultValue = p.value.right
-          }
-        } else {
-          key = p.computed ? (p.key as Expression) : (p.key as Identifier).name
-          if (p.value.type === 'Identifier') {
-            // { foo: bar }
-            nameId = p.value
-          } else if (p.value.type === 'ObjectPattern') {
-            processRefObjectPattern(p.value, call, isConst, tempVar, [
-              ...path,
-              key
-            ])
-          } else if (p.value.type === 'ArrayPattern') {
-            processRefArrayPattern(p.value, call, isConst, tempVar, [
-              ...path,
-              key
-            ])
-          } else if (p.value.type === 'AssignmentPattern') {
-            if (p.value.left.type === 'Identifier') {
-              // { foo: bar = 1 }
-              nameId = p.value.left
-              defaultValue = p.value.right
-            } else if (p.value.left.type === 'ObjectPattern') {
-              processRefObjectPattern(p.value.left, call, isConst, tempVar, [
-                ...path,
-                [key, p.value.right]
-              ])
-            } else if (p.value.left.type === 'ArrayPattern') {
-              processRefArrayPattern(p.value.left, call, isConst, tempVar, [
-                ...path,
-                [key, p.value.right]
-              ])
-            } else {
-              // MemberExpression case is not possible here, ignore
-            }
-          }
-        }
-      } else {
-        // rest element { ...foo }
-        error(`reactivity destructure does not support rest elements.`, p)
-      }
-      if (nameId) {
-        registerRefBinding(nameId, isConst)
-        // inject toRef() after original replaced pattern
-        const source = pathToString(tempVar, path)
-        const keyStr = isString(key)
-          ? `'${key}'`
-          : key
-            ? snip(key)
-            : `'${nameId.name}'`
-        const defaultStr = defaultValue ? `, ${snip(defaultValue)}` : ``
-        s.appendLeft(
-          call.end! + offset,
-          `,\n  ${nameId.name} = ${helper(
-            'toRef'
-          )}(${source}, ${keyStr}${defaultStr})`
-        )
-      }
-    }
-    if (nameId) {
-      s.appendLeft(call.end! + offset, ';')
-    }
-  }
-
-  function processRefArrayPattern(
-    pattern: ArrayPattern,
-    call: CallExpression,
-    isConst: boolean,
-    tempVar?: string,
-    path: PathSegment[] = []
-  ) {
-    if (!tempVar) {
-      // const [x] = $(useFoo()) --> const __$temp_1 = useFoo()
-      tempVar = genTempVar()
-      s.overwrite(pattern.start! + offset, pattern.end! + offset, tempVar)
-    }
-
-    let nameId: Identifier | undefined
-    for (let i = 0; i < pattern.elements.length; i++) {
-      const e = pattern.elements[i]
-      if (!e) continue
-      let defaultValue: Expression | undefined
-      if (e.type === 'Identifier') {
-        // [a] --> [__a]
-        nameId = e
-      } else if (e.type === 'AssignmentPattern') {
-        // [a = 1]
-        nameId = e.left as Identifier
-        defaultValue = e.right
-      } else if (e.type === 'RestElement') {
-        // [...a]
-        error(`reactivity destructure does not support rest elements.`, e)
-      } else if (e.type === 'ObjectPattern') {
-        processRefObjectPattern(e, call, isConst, tempVar, [...path, i])
-      } else if (e.type === 'ArrayPattern') {
-        processRefArrayPattern(e, call, isConst, tempVar, [...path, i])
-      }
-      if (nameId) {
-        registerRefBinding(nameId, isConst)
-        // inject toRef() after original replaced pattern
-        const source = pathToString(tempVar, path)
-        const defaultStr = defaultValue ? `, ${snip(defaultValue)}` : ``
-        s.appendLeft(
-          call.end! + offset,
-          `,\n  ${nameId.name} = ${helper(
-            'toRef'
-          )}(${source}, ${i}${defaultStr})`
-        )
-      }
-    }
-    if (nameId) {
-      s.appendLeft(call.end! + offset, ';')
-    }
-  }
-
-  type PathSegmentAtom = Expression | string | number
-
-  type PathSegment =
-    | PathSegmentAtom
-    | [PathSegmentAtom, Expression /* default value */]
-
-  function pathToString(source: string, path: PathSegment[]): string {
-    if (path.length) {
-      for (const seg of path) {
-        if (isArray(seg)) {
-          source = `(${source}${segToString(seg[0])} || ${snip(seg[1])})`
-        } else {
-          source += segToString(seg)
-        }
-      }
-    }
-    return source
-  }
-
-  function segToString(seg: PathSegmentAtom): string {
-    if (typeof seg === 'number') {
-      return `[${seg}]`
-    } else if (typeof seg === 'string') {
-      return `.${seg}`
-    } else {
-      return snip(seg)
-    }
-  }
-
-  function rewriteId(
-    scope: Scope,
-    id: Identifier,
-    parent: Node,
-    parentStack: Node[]
-  ): boolean {
-    if (hasOwn(scope, id.name)) {
-      const binding = scope[id.name]
-
-      if (binding) {
-        if (
-          binding.isConst &&
-          ((parent.type === 'AssignmentExpression' && id === parent.left) ||
-            parent.type === 'UpdateExpression')
-        ) {
-          error(`Assignment to constant variable.`, id)
-        }
-
-        const { isProp } = binding
-        if (isStaticProperty(parent) && parent.shorthand) {
-          // let binding used in a property shorthand
-          // skip for destructure patterns
-          if (
-            !(parent as any).inPattern ||
-            isInDestructureAssignment(parent, parentStack)
-          ) {
-            if (isProp) {
-              if (escapeScope) {
-                // prop binding in $$()
-                // { prop } -> { prop: __props_prop }
-                registerEscapedPropBinding(id)
-                s.appendLeft(
-                  id.end! + offset,
-                  `: __props_${propsLocalToPublicMap[id.name]}`
-                )
-              } else {
-                // { prop } -> { prop: __props.prop }
-                s.appendLeft(
-                  id.end! + offset,
-                  `: ${genPropsAccessExp(propsLocalToPublicMap[id.name])}`
-                )
-              }
-            } else {
-              // { foo } -> { foo: foo.value }
-              s.appendLeft(id.end! + offset, `: ${id.name}.value`)
-            }
-          }
-        } else {
-          if (isProp) {
-            if (escapeScope) {
-              // x --> __props_x
-              registerEscapedPropBinding(id)
-              s.overwrite(
-                id.start! + offset,
-                id.end! + offset,
-                `__props_${propsLocalToPublicMap[id.name]}`
-              )
-            } else {
-              // x --> __props.x
-              s.overwrite(
-                id.start! + offset,
-                id.end! + offset,
-                genPropsAccessExp(propsLocalToPublicMap[id.name])
-              )
-            }
-          } else {
-            // x --> x.value
-            s.appendLeft(id.end! + offset, '.value')
-          }
-        }
-      }
-      return true
-    }
-    return false
-  }
-
-  const propBindingRefs: Record<string, true> = {}
-  function registerEscapedPropBinding(id: Identifier) {
-    if (!propBindingRefs.hasOwnProperty(id.name)) {
-      propBindingRefs[id.name] = true
-      const publicKey = propsLocalToPublicMap[id.name]
-      s.prependRight(
-        offset,
-        `const __props_${publicKey} = ${helper(
-          `toRef`
-        )}(__props, '${publicKey}');\n`
-      )
-    }
-  }
-
-  // check root scope first
-  walkScope(ast, true)
-  walk(ast, {
-    enter(node: Node, parent?: Node) {
-      parent && parentStack.push(parent)
-
-      // function scopes
-      if (isFunctionType(node)) {
-        scopeStack.push((currentScope = {}))
-        walkFunctionParams(node, registerBinding)
-        if (node.body.type === 'BlockStatement') {
-          walkScope(node.body)
-        }
-        return
-      }
-
-      // catch param
-      if (node.type === 'CatchClause') {
-        scopeStack.push((currentScope = {}))
-        if (node.param && node.param.type === 'Identifier') {
-          registerBinding(node.param)
-        }
-        walkScope(node.body)
-        return
-      }
-
-      // non-function block scopes
-      if (node.type === 'BlockStatement' && !isFunctionType(parent!)) {
-        scopeStack.push((currentScope = {}))
-        walkScope(node)
-        return
-      }
-
-      // skip type nodes
-      if (
-        parent &&
-        parent.type.startsWith('TS') &&
-        parent.type !== 'TSAsExpression' &&
-        parent.type !== 'TSNonNullExpression' &&
-        parent.type !== 'TSTypeAssertion'
-      ) {
-        return this.skip()
-      }
-
-      if (node.type === 'Identifier') {
-        const binding = rootScope[node.name]
-        if (
-          // if inside $$(), skip unless this is a destructured prop binding
-          !(escapeScope && (!binding || !binding.isProp)) &&
-          isReferencedIdentifier(node, parent!, parentStack) &&
-          !excludedIds.has(node)
-        ) {
-          // walk up the scope chain to check if id should be appended .value
-          let i = scopeStack.length
-          while (i--) {
-            if (rewriteId(scopeStack[i], node, parent!, parentStack)) {
-              return
-            }
-          }
-        }
-      }
-
-      if (node.type === 'CallExpression' && node.callee.type === 'Identifier') {
-        const callee = node.callee.name
-
-        const refCall = isRefCreationCall(callee)
-        if (refCall && (!parent || parent.type !== 'VariableDeclarator')) {
-          return error(
-            `${refCall} can only be used as the initializer of ` +
-              `a variable declaration.`,
-            node
-          )
-        }
-
-        if (
-          escapeSymbol &&
-          currentScope[escapeSymbol] === undefined &&
-          callee === escapeSymbol
-        ) {
-          escapeScope = node
-          s.remove(node.callee.start! + offset, node.callee.end! + offset)
-
-          if (parent?.type === 'ExpressionStatement') {
-            // edge case where the call expression is an expression statement
-            // if its own - prepend semicolon to avoid it being parsed as
-            // function invocation of previous line
-            let i =
-              (node.leadingComments
-                ? node.leadingComments[0].start
-                : node.start)! + offset
-            while (i--) {
-              const char = s.original.charAt(i)
-              if (char === '\n') {
-                // only insert semi if it's actually the first thing after
-                // newline
-                s.prependRight(node.start! + offset, ';')
-                break
-              } else if (!/\s/.test(char)) {
-                break
-              }
-            }
-          }
-        }
-      }
-    },
-    leave(node: Node, parent?: Node) {
-      parent && parentStack.pop()
-      if (
-        (node.type === 'BlockStatement' && !isFunctionType(parent!)) ||
-        isFunctionType(node)
-      ) {
-        scopeStack.pop()
-        currentScope = scopeStack[scopeStack.length - 1] || null
-      }
-      if (node === escapeScope) {
-        escapeScope = undefined
-      }
-    }
-  })
-
-  return {
-    rootRefs: Object.keys(rootScope).filter(key => {
-      const binding = rootScope[key]
-      return binding && !binding.isProp
-    }),
-    importedHelpers: [...importedHelpers]
-  }
-}
-
-const hasWarned: Record<string, boolean> = {}
-
-function warnExperimental() {
-  // eslint-disable-next-line
-  if (typeof window !== 'undefined') {
-    return
-  }
-  warnOnce(
-    `Reactivity Transform was an experimental feature and has now been deprecated. ` +
-      `It will be removed from Vue core in 3.4. If you intend to continue using it, ` +
-      `switch to https://vue-macros.sxzz.moe/features/reactivity-transform.html.\n` +
-      `See reason for deprecation here: https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028`
-  )
-}
-
-function warnOnce(msg: string) {
-  const isNodeProd =
-    typeof process !== 'undefined' && process.env.NODE_ENV === 'production'
-  if (!isNodeProd && !__TEST__ && !hasWarned[msg]) {
-    hasWarned[msg] = true
-    warn(msg)
-  }
-}
-
-function warn(msg: string) {
-  console.warn(
-    `\x1b[1m\x1b[33m[@vue/reactivity-transform]\x1b[0m\x1b[33m ${msg}\x1b[0m\n`
-  )
-}
diff --git a/packages/reactivity/__benchmarks__/computed.bench.ts b/packages/reactivity/__benchmarks__/computed.bench.ts
new file mode 100644
index 000000000..d9757501f
--- /dev/null
+++ b/packages/reactivity/__benchmarks__/computed.bench.ts
@@ -0,0 +1,200 @@
+import { bench, describe } from 'vitest'
+import { type ComputedRef, type Ref, computed, effect, ref } from '../src'
+
+describe('computed', () => {
+  bench('create computed', () => {
+    computed(() => 100)
+  })
+
+  {
+    const v = ref(100)
+    computed(() => v.value * 2)
+    let i = 0
+    bench("write ref, don't read computed (without effect)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const c = computed(() => {
+      return v.value * 2
+    })
+    effect(() => c.value)
+    let i = 0
+    bench("write ref, don't read computed (with effect)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const c = computed(() => {
+      return v.value * 2
+    })
+    let i = 0
+    bench('write ref, read computed (without effect)', () => {
+      v.value = i++
+      c.value
+    })
+  }
+
+  {
+    const v = ref(100)
+    const c = computed(() => {
+      return v.value * 2
+    })
+    effect(() => c.value)
+    let i = 0
+    bench('write ref, read computed (with effect)', () => {
+      v.value = i++
+      c.value
+    })
+  }
+
+  {
+    const v = ref(100)
+    const computeds: ComputedRef<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      computeds.push(c)
+    }
+    let i = 0
+    bench("write ref, don't read 1000 computeds (without effect)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const computeds: ComputedRef<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      effect(() => c.value)
+      computeds.push(c)
+    }
+    let i = 0
+    bench(
+      "write ref, don't read 1000 computeds (with multiple effects)",
+      () => {
+        v.value = i++
+      },
+    )
+  }
+
+  {
+    const v = ref(100)
+    const computeds: ComputedRef<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      computeds.push(c)
+    }
+    effect(() => {
+      for (let i = 0; i < 1000; i++) {
+        computeds[i].value
+      }
+    })
+    let i = 0
+    bench("write ref, don't read 1000 computeds (with single effect)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const computeds: ComputedRef<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      computeds.push(c)
+    }
+    let i = 0
+    bench('write ref, read 1000 computeds (no effect)', () => {
+      v.value = i++
+      computeds.forEach(c => c.value)
+    })
+  }
+
+  {
+    const v = ref(100)
+    const computeds: ComputedRef<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      effect(() => c.value)
+      computeds.push(c)
+    }
+    let i = 0
+    bench('write ref, read 1000 computeds (with multiple effects)', () => {
+      v.value = i++
+      computeds.forEach(c => c.value)
+    })
+  }
+
+  {
+    const v = ref(100)
+    const computeds: ComputedRef<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      effect(() => c.value)
+      computeds.push(c)
+    }
+    effect(() => {
+      for (let i = 0; i < 1000; i++) {
+        computeds[i].value
+      }
+    })
+    let i = 0
+    bench('write ref, read 1000 computeds (with single effect)', () => {
+      v.value = i++
+      computeds.forEach(c => c.value)
+    })
+  }
+
+  {
+    const refs: Ref<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      refs.push(ref(i))
+    }
+    const c = computed(() => {
+      let total = 0
+      refs.forEach(ref => (total += ref.value))
+      return total
+    })
+    let i = 0
+    const n = refs.length
+    bench('1000 refs, read 1 computed (without effect)', () => {
+      refs[i++ % n].value++
+      c.value
+    })
+  }
+
+  {
+    const refs: Ref<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      refs.push(ref(i))
+    }
+    const c = computed(() => {
+      let total = 0
+      refs.forEach(ref => (total += ref.value))
+      return total
+    })
+    effect(() => c.value)
+    let i = 0
+    const n = refs.length
+    bench('1000 refs, read 1 computed (with effect)', () => {
+      refs[i++ % n].value++
+      c.value
+    })
+  }
+})
diff --git a/packages/reactivity/__benchmarks__/effect.bench.ts b/packages/reactivity/__benchmarks__/effect.bench.ts
new file mode 100644
index 000000000..8d3d6ecfb
--- /dev/null
+++ b/packages/reactivity/__benchmarks__/effect.bench.ts
@@ -0,0 +1,111 @@
+import { bench, describe } from 'vitest'
+import { type Ref, effect, ref } from '../src'
+
+describe('effect', () => {
+  {
+    let i = 0
+    const n = ref(0)
+    effect(() => n.value)
+    bench('single ref invoke', () => {
+      n.value = i++
+    })
+  }
+
+  function benchEffectCreate(size: number) {
+    bench(`create an effect that tracks ${size} refs`, () => {
+      const refs: Ref[] = []
+      for (let i = 0; i < size; i++) {
+        refs.push(ref(i))
+      }
+      effect(() => {
+        for (let i = 0; i < size; i++) {
+          refs[i].value
+        }
+      })
+    })
+  }
+
+  benchEffectCreate(1)
+  benchEffectCreate(10)
+  benchEffectCreate(100)
+  benchEffectCreate(1000)
+
+  function benchEffectCreateAndStop(size: number) {
+    bench(`create and stop an effect that tracks ${size} refs`, () => {
+      const refs: Ref[] = []
+      for (let i = 0; i < size; i++) {
+        refs.push(ref(i))
+      }
+      const e = effect(() => {
+        for (let i = 0; i < size; i++) {
+          refs[i].value
+        }
+      })
+      e.effect.stop()
+    })
+  }
+
+  benchEffectCreateAndStop(1)
+  benchEffectCreateAndStop(10)
+  benchEffectCreateAndStop(100)
+  benchEffectCreateAndStop(1000)
+
+  function benchWithRefs(size: number) {
+    let j = 0
+    const refs: Ref[] = []
+    for (let i = 0; i < size; i++) {
+      refs.push(ref(i))
+    }
+    effect(() => {
+      for (let i = 0; i < size; i++) {
+        refs[i].value
+      }
+    })
+    bench(`1 effect, mutate ${size} refs`, () => {
+      for (let i = 0; i < size; i++) {
+        refs[i].value = i + j++
+      }
+    })
+  }
+
+  benchWithRefs(10)
+  benchWithRefs(100)
+  benchWithRefs(1000)
+
+  function benchWithBranches(size: number) {
+    const toggle = ref(true)
+    const refs: Ref[] = []
+    for (let i = 0; i < size; i++) {
+      refs.push(ref(i))
+    }
+    effect(() => {
+      if (toggle.value) {
+        for (let i = 0; i < size; i++) {
+          refs[i].value
+        }
+      }
+    })
+    bench(`${size} refs branch toggle`, () => {
+      toggle.value = !toggle.value
+    })
+  }
+
+  benchWithBranches(10)
+  benchWithBranches(100)
+  benchWithBranches(1000)
+
+  function benchMultipleEffects(size: number) {
+    let i = 0
+    const n = ref(0)
+    for (let i = 0; i < size; i++) {
+      effect(() => n.value)
+    }
+    bench(`1 ref invoking ${size} effects`, () => {
+      n.value = i++
+    })
+  }
+
+  benchMultipleEffects(10)
+  benchMultipleEffects(100)
+  benchMultipleEffects(1000)
+})
diff --git a/packages/reactivity/__benchmarks__/reactiveArray.bench.ts b/packages/reactivity/__benchmarks__/reactiveArray.bench.ts
new file mode 100644
index 000000000..f5032cf7a
--- /dev/null
+++ b/packages/reactivity/__benchmarks__/reactiveArray.bench.ts
@@ -0,0 +1,154 @@
+import { bench } from 'vitest'
+import { effect, reactive, shallowReadArray } from '../src'
+
+for (let amount = 1e1; amount < 1e4; amount *= 10) {
+  {
+    const rawArray: number[] = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const arr = reactive(rawArray)
+
+    bench(`track for loop, ${amount} elements`, () => {
+      let sum = 0
+      effect(() => {
+        for (let i = 0; i < arr.length; i++) {
+          sum += arr[i]
+        }
+      })
+    })
+  }
+
+  {
+    const rawArray: number[] = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const arr = reactive(rawArray)
+
+    bench(`track manual reactiveReadArray, ${amount} elements`, () => {
+      let sum = 0
+      effect(() => {
+        const raw = shallowReadArray(arr)
+        for (let i = 0; i < raw.length; i++) {
+          sum += raw[i]
+        }
+      })
+    })
+  }
+
+  {
+    const rawArray: number[] = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const arr = reactive(rawArray)
+
+    bench(`track iteration, ${amount} elements`, () => {
+      let sum = 0
+      effect(() => {
+        for (let x of arr) {
+          sum += x
+        }
+      })
+    })
+  }
+
+  {
+    const rawArray: number[] = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const arr = reactive(rawArray)
+
+    bench(`track forEach, ${amount} elements`, () => {
+      let sum = 0
+      effect(() => {
+        arr.forEach(x => (sum += x))
+      })
+    })
+  }
+
+  {
+    const rawArray: number[] = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const arr = reactive(rawArray)
+
+    bench(`track reduce, ${amount} elements`, () => {
+      let sum = 0
+      effect(() => {
+        sum = arr.reduce((v, a) => a + v, 0)
+      })
+    })
+  }
+
+  {
+    const rawArray: any[] = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = reactive(rawArray)
+    effect(() => r.reduce((v, a) => a + v, 0))
+
+    bench(
+      `trigger index mutation (1st only), tracked with reduce, ${amount} elements`,
+      () => {
+        r[0]++
+      },
+    )
+  }
+
+  {
+    const rawArray: any[] = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = reactive(rawArray)
+    effect(() => r.reduce((v, a) => a + v, 0))
+
+    bench(
+      `trigger index mutation (all), tracked with reduce, ${amount} elements`,
+      () => {
+        for (let i = 0, n = r.length; i < n; i++) {
+          r[i]++
+        }
+      },
+    )
+  }
+
+  {
+    const rawArray: number[] = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const arr = reactive(rawArray)
+    let sum = 0
+    effect(() => {
+      for (let x of arr) {
+        sum += x
+      }
+    })
+
+    bench(`push() trigger, tracked via iteration, ${amount} elements`, () => {
+      arr.push(1)
+    })
+  }
+
+  {
+    const rawArray: number[] = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const arr = reactive(rawArray)
+    let sum = 0
+    effect(() => {
+      arr.forEach(x => (sum += x))
+    })
+
+    bench(`push() trigger, tracked via forEach, ${amount} elements`, () => {
+      arr.push(1)
+    })
+  }
+}
diff --git a/packages/reactivity/__benchmarks__/reactiveMap.bench.ts b/packages/reactivity/__benchmarks__/reactiveMap.bench.ts
new file mode 100644
index 000000000..f8b461115
--- /dev/null
+++ b/packages/reactivity/__benchmarks__/reactiveMap.bench.ts
@@ -0,0 +1,143 @@
+import { bench } from 'vitest'
+import { type ComputedRef, computed, reactive } from '../src'
+
+function createMap(obj: Record<string, any>) {
+  const map = new Map()
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      map.set(key, obj[key])
+    }
+  }
+  return map
+}
+
+bench('create reactive map', () => {
+  reactive(createMap({ a: 1 }))
+})
+
+{
+  let i = 0
+  const r = reactive(createMap({ a: 1 }))
+  bench('write reactive map property', () => {
+    r.set('a', i++)
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  computed(() => {
+    return r.get('a') * 2
+  })
+  let i = 0
+  bench("write reactive map, don't read computed (never invoked)", () => {
+    r.set('a', i++)
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  const c = computed(() => {
+    return r.get('a') * 2
+  })
+  c.value
+  let i = 0
+  bench("write reactive map, don't read computed (invoked)", () => {
+    r.set('a', i++)
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  const c = computed(() => {
+    return r.get('a') * 2
+  })
+  let i = 0
+  bench('write reactive map, read computed', () => {
+    r.set('a', i++)
+    c.value
+  })
+}
+
+{
+  const _m = new Map()
+  for (let i = 0; i < 10000; i++) {
+    _m.set(i, i)
+  }
+  const r = reactive(_m)
+  const c = computed(() => {
+    let total = 0
+    r.forEach((value, key) => {
+      total += value
+    })
+    return total
+  })
+  bench("write reactive map (10'000 items), read computed", () => {
+    r.set(5000, r.get(5000) + 1)
+    c.value
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  const computeds: any[] = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    const c = computed(() => {
+      return r.get('a') * 2
+    })
+    computeds.push(c)
+  }
+  let i = 0
+  bench("write reactive map, don't read 1000 computeds (never invoked)", () => {
+    r.set('a', i++)
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  const computeds: any[] = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    const c = computed(() => {
+      return r.get('a') * 2
+    })
+    c.value
+    computeds.push(c)
+  }
+  let i = 0
+  bench("write reactive map, don't read 1000 computeds (invoked)", () => {
+    r.set('a', i++)
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  const computeds: ComputedRef<number>[] = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    const c = computed(() => {
+      return r.get('a') * 2
+    })
+    computeds.push(c)
+  }
+  let i = 0
+  bench('write reactive map, read 1000 computeds', () => {
+    r.set('a', i++)
+    computeds.forEach(c => c.value)
+  })
+}
+
+{
+  const reactives: Map<any, any>[] = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    reactives.push(reactive(createMap({ a: i })))
+  }
+  const c = computed(() => {
+    let total = 0
+    reactives.forEach(r => (total += r.get('a')))
+    return total
+  })
+  let i = 0
+  const n = reactives.length
+  bench('1000 reactive maps, 1 computed', () => {
+    reactives[i++ % n].set('a', reactives[i++ % n].get('a') + 1)
+    c.value
+  })
+}
diff --git a/packages/reactivity/__benchmarks__/reactiveObject.bench.ts b/packages/reactivity/__benchmarks__/reactiveObject.bench.ts
new file mode 100644
index 000000000..a326a111b
--- /dev/null
+++ b/packages/reactivity/__benchmarks__/reactiveObject.bench.ts
@@ -0,0 +1,21 @@
+import { bench } from 'vitest'
+import { reactive } from '../src'
+
+bench('create reactive obj', () => {
+  reactive({ a: 1 })
+})
+
+{
+  const r = reactive({ a: 1 })
+  bench('read reactive obj property', () => {
+    r.a
+  })
+}
+
+{
+  let i = 0
+  const r = reactive({ a: 1 })
+  bench('write reactive obj property', () => {
+    r.a = i++
+  })
+}
diff --git a/packages/reactivity/__benchmarks__/ref.bench.ts b/packages/reactivity/__benchmarks__/ref.bench.ts
new file mode 100644
index 000000000..0c0589017
--- /dev/null
+++ b/packages/reactivity/__benchmarks__/ref.bench.ts
@@ -0,0 +1,32 @@
+import { bench, describe } from 'vitest'
+import { ref } from '../src/index'
+
+describe('ref', () => {
+  bench('create ref', () => {
+    ref(100)
+  })
+
+  {
+    let i = 0
+    const v = ref(100)
+    bench('write ref', () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    bench('read ref', () => {
+      v.value
+    })
+  }
+
+  {
+    let i = 0
+    const v = ref(100)
+    bench('write/read ref', () => {
+      v.value = i++
+      v.value
+    })
+  }
+})
diff --git a/packages/reactivity/__tests__/collections/Map.spec.ts b/packages/reactivity/__tests__/collections/Map.spec.ts
index 0cbe10fc2..a0de8feaf 100644
--- a/packages/reactivity/__tests__/collections/Map.spec.ts
+++ b/packages/reactivity/__tests__/collections/Map.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, effect, toRaw, isReactive } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   function coverCollectionFn(collection: Map<any, any>, fnName: string) {
@@ -69,7 +69,6 @@ describe('reactivity/collections', () => {
       const map = reactive(new Map())
       effect(() => {
         dummy = 0
-        // eslint-disable-next-line no-unused-vars
         for (let [key, num] of map) {
           key
           dummy += num
@@ -164,7 +163,6 @@ describe('reactivity/collections', () => {
       effect(() => {
         dummy = ''
         dummy2 = 0
-        // eslint-disable-next-line no-unused-vars
         for (let [key, num] of map.entries()) {
           dummy += key
           dummy2 += num
@@ -411,7 +409,7 @@ describe('reactivity/collections', () => {
       const map = reactive(raw)
       map.set(key, 2)
       expect(
-        `Reactive Map contains both the raw and reactive`
+        `Reactive Map contains both the raw and reactive`,
       ).toHaveBeenWarned()
     })
 
diff --git a/packages/reactivity/__tests__/collections/Set.spec.ts b/packages/reactivity/__tests__/collections/Set.spec.ts
index ae74eb476..2aeef1982 100644
--- a/packages/reactivity/__tests__/collections/Set.spec.ts
+++ b/packages/reactivity/__tests__/collections/Set.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, effect, isReactive, toRaw } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   function coverCollectionFn(collection: Set<any>, fnName: string) {
@@ -125,7 +125,6 @@ describe('reactivity/collections', () => {
       const set = reactive(new Set<number>())
       effect(() => {
         dummy = 0
-        // eslint-disable-next-line no-unused-vars
         for (let [key, num] of set.entries()) {
           key
           dummy += num
@@ -413,7 +412,7 @@ describe('reactivity/collections', () => {
       const set = reactive(raw)
       set.delete(key)
       expect(
-        `Reactive Set contains both the raw and reactive`
+        `Reactive Set contains both the raw and reactive`,
       ).toHaveBeenWarned()
     })
 
diff --git a/packages/reactivity/__tests__/collections/WeakMap.spec.ts b/packages/reactivity/__tests__/collections/WeakMap.spec.ts
index d7657a9f9..757808a43 100644
--- a/packages/reactivity/__tests__/collections/WeakMap.spec.ts
+++ b/packages/reactivity/__tests__/collections/WeakMap.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, effect, toRaw, isReactive } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   describe('WeakMap', () => {
diff --git a/packages/reactivity/__tests__/collections/WeakSet.spec.ts b/packages/reactivity/__tests__/collections/WeakSet.spec.ts
index 9ec300197..c9a4b68aa 100644
--- a/packages/reactivity/__tests__/collections/WeakSet.spec.ts
+++ b/packages/reactivity/__tests__/collections/WeakSet.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, isReactive, effect, toRaw } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   describe('WeakSet', () => {
diff --git a/packages/reactivity/__tests__/collections/shallowReadonly.spec.ts b/packages/reactivity/__tests__/collections/shallowReadonly.spec.ts
index 11eb002fc..2f13ea653 100644
--- a/packages/reactivity/__tests__/collections/shallowReadonly.spec.ts
+++ b/packages/reactivity/__tests__/collections/shallowReadonly.spec.ts
@@ -14,7 +14,7 @@ describe('reactivity/collections', () => {
 
         sroMap.set(key, {} as any)
         expect(
-          `Set operation on key "[object Object]" failed: target is readonly.`
+          `Set operation on key "[object Object]" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
 
@@ -28,7 +28,7 @@ describe('reactivity/collections', () => {
 
         sroMap.get(key)!.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
@@ -48,7 +48,7 @@ describe('reactivity/collections', () => {
 
       values1[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
 
       expect(isReadonly(values2[0][1])).toBe(false)
@@ -57,7 +57,7 @@ describe('reactivity/collections', () => {
 
       values2[0][1].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -73,7 +73,7 @@ describe('reactivity/collections', () => {
 
         val.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
@@ -91,7 +91,7 @@ describe('reactivity/collections', () => {
 
         sroSet.add({} as any)
         expect(
-          `Add operation on key "[object Object]" failed: target is readonly.`
+          `Add operation on key "[object Object]" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
     })
@@ -109,12 +109,12 @@ describe('reactivity/collections', () => {
 
       sroSet.add({} as any)
       expect(
-        `Add operation on key "[object Object]" failed: target is readonly.`
+        `Add operation on key "[object Object]" failed: target is readonly.`,
       ).toHaveBeenWarned()
 
       values[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -132,7 +132,7 @@ describe('reactivity/collections', () => {
 
       values1[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
 
       expect(isReadonly(values2[0][1])).toBe(false)
@@ -141,7 +141,7 @@ describe('reactivity/collections', () => {
 
       values2[0][1].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -157,7 +157,7 @@ describe('reactivity/collections', () => {
 
         val.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
diff --git a/packages/reactivity/__tests__/computed.spec.ts b/packages/reactivity/__tests__/computed.spec.ts
index c044b5feb..36c477adb 100644
--- a/packages/reactivity/__tests__/computed.spec.ts
+++ b/packages/reactivity/__tests__/computed.spec.ts
@@ -1,16 +1,32 @@
 import {
-  computed,
-  reactive,
-  effect,
-  ref,
-  WritableComputedRef,
-  isReadonly,
-  DebuggerEvent,
-  toRaw,
-  TrackOpTypes,
+  type TestElement,
+  defineComponent,
+  h,
+  nextTick,
+  nodeOps,
+  onMounted,
+  onUnmounted,
+  render,
+  serializeInner,
+  triggerEvent,
+} from '@vue/runtime-test'
+import {
+  type DebuggerEvent,
   ITERATE_KEY,
-  TriggerOpTypes
+  TrackOpTypes,
+  TriggerOpTypes,
+  type WritableComputedRef,
+  computed,
+  effect,
+  isReadonly,
+  reactive,
+  ref,
+  shallowRef,
+  toRaw,
+  triggerRef,
 } from '../src'
+import { EffectFlags, pauseTracking, resetTracking } from '../src/effect'
+import type { ComputedRef, ComputedRefImpl } from '../src/computed'
 
 describe('reactivity/computed', () => {
   it('should return updated value', () => {
@@ -21,6 +37,20 @@ describe('reactivity/computed', () => {
     expect(cValue.value).toBe(1)
   })
 
+  it('pass oldValue to computed getter', () => {
+    const count = ref(0)
+    const oldValue = ref()
+    const curValue = computed(pre => {
+      oldValue.value = pre
+      return count.value
+    })
+    expect(curValue.value).toBe(0)
+    expect(oldValue.value).toBe(undefined)
+    count.value++
+    expect(curValue.value).toBe(1)
+    expect(oldValue.value).toBe(0)
+  })
+
   it('should compute lazily', () => {
     const value = reactive<{ foo?: number }>({})
     const getter = vi.fn(() => value.foo)
@@ -119,28 +149,13 @@ describe('reactivity/computed', () => {
     expect(getter2).toHaveBeenCalledTimes(2)
   })
 
-  it('should no longer update when stopped', () => {
-    const value = reactive<{ foo?: number }>({})
-    const cValue = computed(() => value.foo)
-    let dummy
-    effect(() => {
-      dummy = cValue.value
-    })
-    expect(dummy).toBe(undefined)
-    value.foo = 1
-    expect(dummy).toBe(1)
-    cValue.effect.stop()
-    value.foo = 2
-    expect(dummy).toBe(1)
-  })
-
   it('should support setter', () => {
     const n = ref(1)
     const plusOne = computed({
       get: () => n.value + 1,
       set: val => {
         n.value = val - 1
-      }
+      },
     })
 
     expect(plusOne.value).toBe(2)
@@ -157,7 +172,7 @@ describe('reactivity/computed', () => {
       get: () => n.value + 1,
       set: val => {
         n.value = val - 1
-      }
+      },
     })
 
     let dummy
@@ -184,7 +199,7 @@ describe('reactivity/computed', () => {
     // mutate n
     n.value++
     // on the 2nd run, plusOne.value should have already updated.
-    expect(plusOneValues).toMatchObject([1, 2, 2])
+    expect(plusOneValues).toMatchObject([1, 2])
   })
 
   it('should warn if trying to set a readonly computed', () => {
@@ -193,7 +208,7 @@ describe('reactivity/computed', () => {
     ;(plusOne as WritableComputedRef<number>).value++ // Type cast to prevent TS from preventing the error
 
     expect(
-      'Write operation failed: computed value is readonly'
+      'Write operation failed: computed value is readonly',
     ).toHaveBeenWarnedLast()
   })
 
@@ -209,18 +224,12 @@ describe('reactivity/computed', () => {
       },
       set(v) {
         a = v
-      }
+      },
     })
     expect(isReadonly(z)).toBe(false)
     expect(isReadonly(z.value.a)).toBe(false)
   })
 
-  it('should expose value when stopped', () => {
-    const x = computed(() => 1)
-    x.effect.stop()
-    expect(x.value).toBe(1)
-  })
-
   it('debug: onTrack', () => {
     let events: DebuggerEvent[] = []
     const onTrack = vi.fn((e: DebuggerEvent) => {
@@ -228,33 +237,33 @@ describe('reactivity/computed', () => {
     })
     const obj = reactive({ foo: 1, bar: 2 })
     const c = computed(() => (obj.foo, 'bar' in obj, Object.keys(obj)), {
-      onTrack
+      onTrack,
     })
     expect(c.value).toEqual(['foo', 'bar'])
     expect(onTrack).toHaveBeenCalledTimes(3)
     expect(events).toEqual([
       {
-        effect: c.effect,
+        effect: c,
         target: toRaw(obj),
         type: TrackOpTypes.GET,
-        key: 'foo'
+        key: 'foo',
       },
       {
-        effect: c.effect,
+        effect: c,
         target: toRaw(obj),
         type: TrackOpTypes.HAS,
-        key: 'bar'
+        key: 'bar',
       },
       {
-        effect: c.effect,
+        effect: c,
         target: toRaw(obj),
         type: TrackOpTypes.ITERATE,
-        key: ITERATE_KEY
-      }
+        key: ITERATE_KEY,
+      },
     ])
   })
 
-  it('debug: onTrigger', () => {
+  it('debug: onTrigger (reactive)', () => {
     let events: DebuggerEvent[] = []
     const onTrigger = vi.fn((e: DebuggerEvent) => {
       events.push(e)
@@ -262,30 +271,840 @@ describe('reactivity/computed', () => {
     const obj = reactive<{ foo?: number }>({ foo: 1 })
     const c = computed(() => obj.foo, { onTrigger })
 
-    // computed won't trigger compute until accessed
-    c.value
+    // computed won't track until it has a subscriber
+    effect(() => c.value)
 
     obj.foo!++
     expect(c.value).toBe(2)
     expect(onTrigger).toHaveBeenCalledTimes(1)
     expect(events[0]).toEqual({
-      effect: c.effect,
+      effect: c,
       target: toRaw(obj),
       type: TriggerOpTypes.SET,
       key: 'foo',
       oldValue: 1,
-      newValue: 2
+      newValue: 2,
     })
 
     delete obj.foo
     expect(c.value).toBeUndefined()
     expect(onTrigger).toHaveBeenCalledTimes(2)
     expect(events[1]).toEqual({
-      effect: c.effect,
+      effect: c,
       target: toRaw(obj),
       type: TriggerOpTypes.DELETE,
       key: 'foo',
-      oldValue: 2
+      oldValue: 2,
     })
   })
+
+  // https://github.com/vuejs/core/pull/5912#issuecomment-1497596875
+  it('should query deps dirty sequentially', () => {
+    const cSpy = vi.fn()
+
+    const a = ref<null | { v: number }>({
+      v: 1,
+    })
+    const b = computed(() => {
+      return a.value
+    })
+    const c = computed(() => {
+      cSpy()
+      return b.value?.v
+    })
+    const d = computed(() => {
+      if (b.value) {
+        return c.value
+      }
+      return 0
+    })
+
+    d.value
+    a.value!.v = 2
+    a.value = null
+    d.value
+    expect(cSpy).toHaveBeenCalledTimes(1)
+  })
+
+  // https://github.com/vuejs/core/pull/5912#issuecomment-1738257692
+  it('chained computed dirty reallocation after querying dirty', () => {
+    let _msg: string | undefined
+
+    const items = ref<number[]>()
+    const isLoaded = computed(() => {
+      return !!items.value
+    })
+    const msg = computed(() => {
+      if (isLoaded.value) {
+        return 'The items are loaded'
+      } else {
+        return 'The items are not loaded'
+      }
+    })
+
+    effect(() => {
+      _msg = msg.value
+    })
+
+    items.value = [1, 2, 3]
+    items.value = [1, 2, 3]
+    items.value = undefined
+
+    expect(_msg).toBe('The items are not loaded')
+  })
+
+  it('chained computed dirty reallocation after trigger computed getter', () => {
+    let _msg: string | undefined
+
+    const items = ref<number[]>()
+    const isLoaded = computed(() => {
+      return !!items.value
+    })
+    const msg = computed(() => {
+      if (isLoaded.value) {
+        return 'The items are loaded'
+      } else {
+        return 'The items are not loaded'
+      }
+    })
+
+    _msg = msg.value
+    items.value = [1, 2, 3]
+    isLoaded.value // <- trigger computed getter
+    _msg = msg.value
+    items.value = undefined
+    _msg = msg.value
+
+    expect(_msg).toBe('The items are not loaded')
+  })
+
+  // https://github.com/vuejs/core/pull/5912#issuecomment-1739159832
+  it('deps order should be consistent with the last time get value', () => {
+    const cSpy = vi.fn()
+
+    const a = ref(0)
+    const b = computed(() => {
+      return a.value % 3 !== 0
+    }) as unknown as ComputedRefImpl
+    const c = computed(() => {
+      cSpy()
+      if (a.value % 3 === 2) {
+        return 'expensive'
+      }
+      return 'cheap'
+    }) as unknown as ComputedRefImpl
+    const d = computed(() => {
+      return a.value % 3 === 2
+    }) as unknown as ComputedRefImpl
+    const e = computed(() => {
+      if (b.value) {
+        if (d.value) {
+          return 'Avoiding expensive calculation'
+        }
+      }
+      return c.value
+    }) as unknown as ComputedRefImpl
+
+    e.value
+    a.value++
+    e.value
+
+    expect(e.deps!.dep).toBe(b.dep)
+    expect(e.deps!.nextDep!.dep).toBe(d.dep)
+    expect(e.deps!.nextDep!.nextDep!.dep).toBe(c.dep)
+    expect(cSpy).toHaveBeenCalledTimes(2)
+
+    a.value++
+    e.value
+
+    expect(cSpy).toHaveBeenCalledTimes(2)
+  })
+
+  it('should trigger by the second computed that maybe dirty', () => {
+    const cSpy = vi.fn()
+
+    const src1 = ref(0)
+    const src2 = ref(0)
+    const c1 = computed(() => src1.value)
+    const c2 = computed(() => (src1.value % 2) + src2.value)
+    const c3 = computed(() => {
+      cSpy()
+      c1.value
+      c2.value
+    })
+
+    c3.value
+    src1.value = 2
+    c3.value
+    expect(cSpy).toHaveBeenCalledTimes(2)
+    src2.value = 1
+    c3.value
+    expect(cSpy).toHaveBeenCalledTimes(3)
+  })
+
+  it('should trigger the second effect', () => {
+    const fnSpy = vi.fn()
+    const v = ref(1)
+    const c = computed(() => v.value)
+
+    effect(() => {
+      c.value
+    })
+    effect(() => {
+      c.value
+      fnSpy()
+    })
+
+    expect(fnSpy).toBeCalledTimes(1)
+    v.value = 2
+    expect(fnSpy).toBeCalledTimes(2)
+  })
+
+  it('should chained recursive effects clear dirty after trigger', () => {
+    const v = ref(1)
+    const c1 = computed(() => v.value) as unknown as ComputedRefImpl
+    const c2 = computed(() => c1.value) as unknown as ComputedRefImpl
+
+    c2.value
+    expect(c1.flags & EffectFlags.DIRTY).toBeFalsy()
+    expect(c2.flags & EffectFlags.DIRTY).toBeFalsy()
+  })
+
+  it('should chained computeds dirtyLevel update with first computed effect', () => {
+    const v = ref(0)
+    const c1 = computed(() => {
+      if (v.value === 0) {
+        v.value = 1
+      }
+      return v.value
+    })
+    const c2 = computed(() => c1.value)
+    const c3 = computed(() => c2.value)
+
+    c3.value
+    // expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  it('should work when chained(ref+computed)', () => {
+    const v = ref(0)
+    const c1 = computed(() => {
+      if (v.value === 0) {
+        v.value = 1
+      }
+      return 'foo'
+    })
+    const c2 = computed(() => v.value + c1.value)
+    expect(c2.value).toBe('0foo')
+    expect(c2.value).toBe('1foo')
+    // expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  it('should trigger effect even computed already dirty', () => {
+    const fnSpy = vi.fn()
+    const v = ref(0)
+    const c1 = computed(() => {
+      if (v.value === 0) {
+        v.value = 1
+      }
+      return 'foo'
+    })
+    const c2 = computed(() => v.value + c1.value)
+
+    effect(() => {
+      fnSpy(c2.value)
+    })
+    expect(fnSpy).toBeCalledTimes(1)
+    expect(fnSpy.mock.calls).toMatchObject([['0foo']])
+    expect(v.value).toBe(1)
+    v.value = 2
+    expect(fnSpy).toBeCalledTimes(2)
+    expect(fnSpy.mock.calls).toMatchObject([['0foo'], ['2foo']])
+    expect(v.value).toBe(2)
+    // expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  // #10185
+  it('should not override queried MaybeDirty result', () => {
+    class Item {
+      v = ref(0)
+    }
+    const v1 = shallowRef()
+    const v2 = ref(false)
+    const c1 = computed(() => {
+      let c = v1.value
+      if (!v1.value) {
+        c = new Item()
+        v1.value = c
+      }
+      return c.v.value
+    })
+    const c2 = computed(() => {
+      if (!v2.value) return 'no'
+      return c1.value ? 'yes' : 'no'
+    })
+    const c3 = computed(() => c2.value)
+
+    c3.value
+    v2.value = true
+
+    c3.value
+    v1.value.v.value = 999
+
+    expect(c3.value).toBe('yes')
+    // expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  it('should be not dirty after deps mutate (mutate deps in computed)', async () => {
+    const state = reactive<any>({})
+    const consumer = computed(() => {
+      if (!('a' in state)) state.a = 1
+      return state.a
+    })
+    const Comp = {
+      setup: () => {
+        nextTick().then(() => {
+          state.a = 2
+        })
+        return () => consumer.value
+      },
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    await nextTick()
+    await nextTick()
+    expect(serializeInner(root)).toBe(`2`)
+    // expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  it('should not trigger effect scheduler by recursive computed effect', async () => {
+    const v = ref('Hello')
+    const c = computed(() => {
+      v.value += ' World'
+      return v.value
+    })
+    const Comp = {
+      setup: () => {
+        return () => c.value
+      },
+    }
+    const root = nodeOps.createElement('div')
+
+    render(h(Comp), root)
+    await nextTick()
+    expect(serializeInner(root)).toBe('Hello World')
+
+    v.value += ' World'
+    await nextTick()
+    expect(serializeInner(root)).toBe('Hello World World World World')
+    // expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  test('should not trigger if value did not change', () => {
+    const src = ref(0)
+    const c = computed(() => src.value % 2)
+    const spy = vi.fn()
+    effect(() => {
+      spy(c.value)
+    })
+    expect(spy).toHaveBeenCalledTimes(1)
+    src.value = 2
+
+    // should not trigger
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    src.value = 3
+    src.value = 5
+    // should trigger because latest value changes
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+
+  test('chained computed trigger', () => {
+    const effectSpy = vi.fn()
+    const c1Spy = vi.fn()
+    const c2Spy = vi.fn()
+
+    const src = ref(0)
+    const c1 = computed(() => {
+      c1Spy()
+      return src.value % 2
+    })
+    const c2 = computed(() => {
+      c2Spy()
+      return c1.value + 1
+    })
+
+    effect(() => {
+      effectSpy(c2.value)
+    })
+
+    expect(c1Spy).toHaveBeenCalledTimes(1)
+    expect(c2Spy).toHaveBeenCalledTimes(1)
+    expect(effectSpy).toHaveBeenCalledTimes(1)
+
+    src.value = 1
+    expect(c1Spy).toHaveBeenCalledTimes(2)
+    expect(c2Spy).toHaveBeenCalledTimes(2)
+    expect(effectSpy).toHaveBeenCalledTimes(2)
+  })
+
+  test('chained computed avoid re-compute', () => {
+    const effectSpy = vi.fn()
+    const c1Spy = vi.fn()
+    const c2Spy = vi.fn()
+
+    const src = ref(0)
+    const c1 = computed(() => {
+      c1Spy()
+      return src.value % 2
+    })
+    const c2 = computed(() => {
+      c2Spy()
+      return c1.value + 1
+    })
+
+    effect(() => {
+      effectSpy(c2.value)
+    })
+
+    expect(effectSpy).toHaveBeenCalledTimes(1)
+    src.value = 2
+    src.value = 4
+    src.value = 6
+    expect(c1Spy).toHaveBeenCalledTimes(4)
+    // c2 should not have to re-compute because c1 did not change.
+    expect(c2Spy).toHaveBeenCalledTimes(1)
+    // effect should not trigger because c2 did not change.
+    expect(effectSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('chained computed value invalidation', () => {
+    const effectSpy = vi.fn()
+    const c1Spy = vi.fn()
+    const c2Spy = vi.fn()
+
+    const src = ref(0)
+    const c1 = computed(() => {
+      c1Spy()
+      return src.value % 2
+    })
+    const c2 = computed(() => {
+      c2Spy()
+      return c1.value + 1
+    })
+
+    effect(() => {
+      effectSpy(c2.value)
+    })
+
+    expect(effectSpy).toHaveBeenCalledTimes(1)
+    expect(effectSpy).toHaveBeenCalledWith(1)
+    expect(c2.value).toBe(1)
+
+    expect(c1Spy).toHaveBeenCalledTimes(1)
+    expect(c2Spy).toHaveBeenCalledTimes(1)
+
+    src.value = 1
+    // value should be available sync
+    expect(c2.value).toBe(2)
+    expect(c2Spy).toHaveBeenCalledTimes(2)
+  })
+
+  test('sync access of invalidated chained computed should not prevent final effect from running', () => {
+    const effectSpy = vi.fn()
+    const c1Spy = vi.fn()
+    const c2Spy = vi.fn()
+
+    const src = ref(0)
+    const c1 = computed(() => {
+      c1Spy()
+      return src.value % 2
+    })
+    const c2 = computed(() => {
+      c2Spy()
+      return c1.value + 1
+    })
+
+    effect(() => {
+      effectSpy(c2.value)
+    })
+    expect(effectSpy).toHaveBeenCalledTimes(1)
+
+    src.value = 1
+    // sync access c2
+    c2.value
+    expect(effectSpy).toHaveBeenCalledTimes(2)
+  })
+
+  it('computed should force track in untracked zone', () => {
+    const n = ref(0)
+    const spy1 = vi.fn()
+    const spy2 = vi.fn()
+
+    let c: ComputedRef
+    effect(() => {
+      spy1()
+      pauseTracking()
+      n.value
+      c = computed(() => n.value + 1)
+      // access computed now to force refresh
+      c.value
+      effect(() => spy2(c.value))
+      n.value
+      resetTracking()
+    })
+
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).toHaveBeenCalledTimes(1)
+
+    n.value++
+    // outer effect should not trigger
+    expect(spy1).toHaveBeenCalledTimes(1)
+    // inner effect should trigger
+    expect(spy2).toHaveBeenCalledTimes(2)
+  })
+
+  // not recommended behavior, but needed for backwards compatibility
+  // used in VueUse asyncComputed
+  it('computed side effect should be able trigger', () => {
+    const a = ref(false)
+    const b = ref(false)
+    const c = computed(() => {
+      a.value = true
+      return b.value
+    })
+    effect(() => {
+      if (a.value) {
+        b.value = true
+      }
+    })
+    expect(b.value).toBe(false)
+    // accessing c triggers change
+    c.value
+    expect(b.value).toBe(true)
+    expect(c.value).toBe(true)
+  })
+
+  it('chained computed should work when accessed before having subs', () => {
+    const n = ref(0)
+    const c = computed(() => n.value)
+    const d = computed(() => c.value + 1)
+    const spy = vi.fn()
+
+    // access
+    d.value
+
+    let dummy
+    effect(() => {
+      spy()
+      dummy = d.value
+    })
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(dummy).toBe(1)
+
+    n.value++
+    expect(spy).toHaveBeenCalledTimes(2)
+    expect(dummy).toBe(2)
+  })
+
+  // #10236
+  it('chained computed should still refresh after owner component unmount', async () => {
+    const a = ref(0)
+    const spy = vi.fn()
+
+    const Child = {
+      setup() {
+        const b = computed(() => a.value + 1)
+        const c = computed(() => b.value + 1)
+        // access
+        c.value
+        onUnmounted(() => spy(c.value))
+        return () => {}
+      },
+    }
+
+    const show = ref(true)
+    const Parent = {
+      setup() {
+        return () => (show.value ? h(Child) : null)
+      },
+    }
+
+    render(h(Parent), nodeOps.createElement('div'))
+
+    a.value++
+    show.value = false
+
+    await nextTick()
+    expect(spy).toHaveBeenCalledWith(3)
+  })
+
+  // case: radix-vue `useForwardExpose` sets a template ref during mount,
+  // and checks for the element's closest form element in a computed.
+  // the computed is expected to only evaluate after mount.
+  it('computed deps should only be refreshed when the subscribing effect is run, not when scheduled', async () => {
+    const calls: string[] = []
+    const a = ref(0)
+    const b = computed(() => {
+      calls.push('b eval')
+      return a.value + 1
+    })
+
+    const App = {
+      setup() {
+        onMounted(() => {
+          calls.push('mounted')
+        })
+        return () =>
+          h(
+            'div',
+            {
+              ref: () => (a.value = 1),
+            },
+            b.value,
+          )
+      },
+    }
+
+    render(h(App), nodeOps.createElement('div'))
+
+    await nextTick()
+    expect(calls).toMatchObject(['b eval', 'mounted', 'b eval'])
+  })
+
+  it('should chained computeds keep reactivity when computed effect happens', async () => {
+    const v = ref('Hello')
+    const c = computed(() => {
+      v.value += ' World'
+      return v.value
+    })
+    const d = computed(() => c.value)
+    const e = computed(() => d.value)
+    const Comp = {
+      setup: () => {
+        return () => d.value + ' | ' + e.value
+      },
+    }
+    const root = nodeOps.createElement('div')
+
+    render(h(Comp), root)
+    await nextTick()
+    expect(serializeInner(root)).toBe('Hello World | Hello World')
+
+    v.value += ' World'
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      'Hello World World World World | Hello World World World World',
+    )
+  })
+
+  it('should keep dirty level when side effect computed value changed', () => {
+    const v = ref(0)
+    const c = computed(() => {
+      v.value += 1
+      return v.value
+    })
+    const d = computed(() => {
+      return { d: c.value }
+    })
+
+    const Comp = {
+      setup: () => {
+        return () => {
+          return [d.value.d, d.value.d]
+        }
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+
+    expect(d.value.d).toBe(1)
+    expect(serializeInner(root)).toBe('11')
+  })
+
+  it('should be recomputed without being affected by side effects', () => {
+    const v = ref(0)
+    const c1 = computed(() => {
+      v.value = 1
+      return 0
+    })
+    const c2 = computed(() => {
+      return v.value + ',' + c1.value
+    })
+
+    expect(c2.value).toBe('0,0')
+    v.value = 1
+    expect(c2.value).toBe('1,0')
+    // expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  it('debug: onTrigger (ref)', () => {
+    let events: DebuggerEvent[] = []
+    const onTrigger = vi.fn((e: DebuggerEvent) => {
+      events.push(e)
+    })
+    const obj = ref(1)
+    const c = computed(() => obj.value, { onTrigger })
+
+    // computed won't track until it has a subscriber
+    effect(() => c.value)
+
+    obj.value++
+
+    expect(c.value).toBe(2)
+    expect(onTrigger).toHaveBeenCalledTimes(1)
+    expect(events[0]).toEqual({
+      effect: c,
+      target: toRaw(obj),
+      type: TriggerOpTypes.SET,
+      key: 'value',
+      oldValue: 1,
+      newValue: 2,
+    })
+  })
+
+  // #11797
+  test('should prevent endless recursion in self-referencing computed getters', async () => {
+    const Comp = defineComponent({
+      data() {
+        return {
+          counter: 0,
+        }
+      },
+
+      computed: {
+        message(): string {
+          if (this.counter === 0) {
+            this.counter++
+            return this.message
+          } else {
+            return `Step ${this.counter}`
+          }
+        },
+      },
+
+      render() {
+        return [
+          h(
+            'button',
+            {
+              onClick: () => {
+                this.counter++
+              },
+            },
+            'Step',
+          ),
+          h('p', this.message),
+        ]
+      },
+    })
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(serializeInner(root)).toBe(`<button>Step</button><p>Step 1</p>`)
+    triggerEvent(root.children[1] as TestElement, 'click')
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<button>Step</button><p>Step 2</p>`)
+  })
+
+  test('manual trigger computed', () => {
+    const cValue = computed(() => 1)
+    triggerRef(cValue)
+    expect(cValue.value).toBe(1)
+  })
+
+  test('computed should remain live after losing all subscribers', () => {
+    const state = reactive({ a: 1 })
+    const p = computed(() => state.a + 1)
+    const { effect: e } = effect(() => p.value)
+    e.stop()
+
+    expect(p.value).toBe(2)
+    state.a++
+    expect(p.value).toBe(3)
+  })
+
+  // #11995
+  test('computed dep cleanup should not cause property dep to be deleted', () => {
+    const toggle = ref(true)
+    const state = reactive({ a: 1 })
+    const p = computed(() => {
+      return toggle.value ? state.a : 111
+    })
+    const pp = computed(() => state.a)
+    effect(() => p.value)
+
+    expect(pp.value).toBe(1)
+    toggle.value = false
+    state.a++
+    expect(pp.value).toBe(2)
+  })
+
+  // #12020
+  test('computed value updates correctly after dep cleanup', () => {
+    const obj = reactive({ foo: 1, flag: 1 })
+    const c1 = computed(() => obj.foo)
+
+    let foo
+    effect(() => {
+      foo = obj.flag ? (obj.foo, c1.value) : 0
+    })
+    expect(foo).toBe(1)
+
+    obj.flag = 0
+    expect(foo).toBe(0)
+
+    obj.foo = 2
+    obj.flag = 1
+    expect(foo).toBe(2)
+  })
+
+  // #11928
+  test('should not lead to exponential perf cost with deeply chained computed', () => {
+    const start = {
+      prop1: shallowRef(1),
+      prop2: shallowRef(2),
+      prop3: shallowRef(3),
+      prop4: shallowRef(4),
+    }
+
+    let layer = start
+
+    const LAYERS = 1000
+
+    for (let i = LAYERS; i > 0; i--) {
+      const m = layer
+      const s = {
+        prop1: computed(() => m.prop2.value),
+        prop2: computed(() => m.prop1.value - m.prop3.value),
+        prop3: computed(() => m.prop2.value + m.prop4.value),
+        prop4: computed(() => m.prop3.value),
+      }
+      effect(() => s.prop1.value)
+      effect(() => s.prop2.value)
+      effect(() => s.prop3.value)
+      effect(() => s.prop4.value)
+
+      s.prop1.value
+      s.prop2.value
+      s.prop3.value
+      s.prop4.value
+
+      layer = s
+    }
+
+    const t = performance.now()
+    start.prop1.value = 4
+    start.prop2.value = 3
+    start.prop3.value = 2
+    start.prop4.value = 1
+    expect(performance.now() - t).toBeLessThan(process.env.CI ? 100 : 30)
+
+    const end = layer
+    expect([
+      end.prop1.value,
+      end.prop2.value,
+      end.prop3.value,
+      end.prop4.value,
+    ]).toMatchObject([-2, -4, 2, 3])
+  })
 })
diff --git a/packages/reactivity/__tests__/deferredComputed.spec.ts b/packages/reactivity/__tests__/deferredComputed.spec.ts
deleted file mode 100644
index 100f14ae3..000000000
--- a/packages/reactivity/__tests__/deferredComputed.spec.ts
+++ /dev/null
@@ -1,185 +0,0 @@
-import { computed, deferredComputed, effect, ref } from '../src'
-
-describe('deferred computed', () => {
-  const tick = Promise.resolve()
-
-  test('should only trigger once on multiple mutations', async () => {
-    const src = ref(0)
-    const c = deferredComputed(() => src.value)
-    const spy = vi.fn()
-    effect(() => {
-      spy(c.value)
-    })
-    expect(spy).toHaveBeenCalledTimes(1)
-    src.value = 1
-    src.value = 2
-    src.value = 3
-    // not called yet
-    expect(spy).toHaveBeenCalledTimes(1)
-    await tick
-    // should only trigger once
-    expect(spy).toHaveBeenCalledTimes(2)
-    expect(spy).toHaveBeenCalledWith(c.value)
-  })
-
-  test('should not trigger if value did not change', async () => {
-    const src = ref(0)
-    const c = deferredComputed(() => src.value % 2)
-    const spy = vi.fn()
-    effect(() => {
-      spy(c.value)
-    })
-    expect(spy).toHaveBeenCalledTimes(1)
-    src.value = 1
-    src.value = 2
-
-    await tick
-    // should not trigger
-    expect(spy).toHaveBeenCalledTimes(1)
-
-    src.value = 3
-    src.value = 4
-    src.value = 5
-    await tick
-    // should trigger because latest value changes
-    expect(spy).toHaveBeenCalledTimes(2)
-  })
-
-  test('chained computed trigger', async () => {
-    const effectSpy = vi.fn()
-    const c1Spy = vi.fn()
-    const c2Spy = vi.fn()
-
-    const src = ref(0)
-    const c1 = deferredComputed(() => {
-      c1Spy()
-      return src.value % 2
-    })
-    const c2 = computed(() => {
-      c2Spy()
-      return c1.value + 1
-    })
-
-    effect(() => {
-      effectSpy(c2.value)
-    })
-
-    expect(c1Spy).toHaveBeenCalledTimes(1)
-    expect(c2Spy).toHaveBeenCalledTimes(1)
-    expect(effectSpy).toHaveBeenCalledTimes(1)
-
-    src.value = 1
-    await tick
-    expect(c1Spy).toHaveBeenCalledTimes(2)
-    expect(c2Spy).toHaveBeenCalledTimes(2)
-    expect(effectSpy).toHaveBeenCalledTimes(2)
-  })
-
-  test('chained computed avoid re-compute', async () => {
-    const effectSpy = vi.fn()
-    const c1Spy = vi.fn()
-    const c2Spy = vi.fn()
-
-    const src = ref(0)
-    const c1 = deferredComputed(() => {
-      c1Spy()
-      return src.value % 2
-    })
-    const c2 = computed(() => {
-      c2Spy()
-      return c1.value + 1
-    })
-
-    effect(() => {
-      effectSpy(c2.value)
-    })
-
-    expect(effectSpy).toHaveBeenCalledTimes(1)
-    src.value = 2
-    src.value = 4
-    src.value = 6
-    await tick
-    // c1 should re-compute once.
-    expect(c1Spy).toHaveBeenCalledTimes(2)
-    // c2 should not have to re-compute because c1 did not change.
-    expect(c2Spy).toHaveBeenCalledTimes(1)
-    // effect should not trigger because c2 did not change.
-    expect(effectSpy).toHaveBeenCalledTimes(1)
-  })
-
-  test('chained computed value invalidation', async () => {
-    const effectSpy = vi.fn()
-    const c1Spy = vi.fn()
-    const c2Spy = vi.fn()
-
-    const src = ref(0)
-    const c1 = deferredComputed(() => {
-      c1Spy()
-      return src.value % 2
-    })
-    const c2 = deferredComputed(() => {
-      c2Spy()
-      return c1.value + 1
-    })
-
-    effect(() => {
-      effectSpy(c2.value)
-    })
-
-    expect(effectSpy).toHaveBeenCalledTimes(1)
-    expect(effectSpy).toHaveBeenCalledWith(1)
-    expect(c2.value).toBe(1)
-
-    expect(c1Spy).toHaveBeenCalledTimes(1)
-    expect(c2Spy).toHaveBeenCalledTimes(1)
-
-    src.value = 1
-    // value should be available sync
-    expect(c2.value).toBe(2)
-    expect(c2Spy).toHaveBeenCalledTimes(2)
-  })
-
-  test('sync access of invalidated chained computed should not prevent final effect from running', async () => {
-    const effectSpy = vi.fn()
-    const c1Spy = vi.fn()
-    const c2Spy = vi.fn()
-
-    const src = ref(0)
-    const c1 = deferredComputed(() => {
-      c1Spy()
-      return src.value % 2
-    })
-    const c2 = deferredComputed(() => {
-      c2Spy()
-      return c1.value + 1
-    })
-
-    effect(() => {
-      effectSpy(c2.value)
-    })
-    expect(effectSpy).toHaveBeenCalledTimes(1)
-
-    src.value = 1
-    // sync access c2
-    c2.value
-    await tick
-    expect(effectSpy).toHaveBeenCalledTimes(2)
-  })
-
-  test('should not compute if deactivated before scheduler is called', async () => {
-    const c1Spy = vi.fn()
-    const src = ref(0)
-    const c1 = deferredComputed(() => {
-      c1Spy()
-      return src.value % 2
-    })
-    effect(() => c1.value)
-    expect(c1Spy).toHaveBeenCalledTimes(1)
-
-    c1.effect.stop()
-    // trigger
-    src.value++
-    await tick
-    expect(c1Spy).toHaveBeenCalledTimes(1)
-  })
-})
diff --git a/packages/reactivity/__tests__/effect.spec.ts b/packages/reactivity/__tests__/effect.spec.ts
index e34c7b31e..242fc7071 100644
--- a/packages/reactivity/__tests__/effect.spec.ts
+++ b/packages/reactivity/__tests__/effect.spec.ts
@@ -1,18 +1,33 @@
 import {
-  ref,
-  reactive,
-  effect,
-  stop,
-  toRaw,
+  type DebuggerEvent,
+  type ReactiveEffectRunner,
   TrackOpTypes,
   TriggerOpTypes,
-  DebuggerEvent,
+  effect,
   markRaw,
-  shallowReactive,
+  reactive,
   readonly,
-  ReactiveEffectRunner
+  shallowReactive,
+  stop,
+  toRaw,
 } from '../src/index'
-import { ITERATE_KEY } from '../src/effect'
+import { type Dep, ITERATE_KEY, getDepFromReactive } from '../src/dep'
+import {
+  computed,
+  h,
+  nextTick,
+  nodeOps,
+  ref,
+  render,
+  serializeInner,
+} from '@vue/runtime-test'
+import {
+  endBatch,
+  onEffectCleanup,
+  pauseTracking,
+  resetTracking,
+  startBatch,
+} from '../src/effect'
 
 describe('reactivity/effect', () => {
   it('should run the passed function once (wrapped by a effect)', () => {
@@ -129,7 +144,7 @@ describe('reactivity/effect', () => {
       },
       get prop() {
         return hiddenValue
-      }
+      },
     })
     Object.setPrototypeOf(obj, parent)
     effect(() => (dummy = obj.prop))
@@ -243,6 +258,22 @@ describe('reactivity/effect', () => {
     expect(dummy).toBe(undefined)
   })
 
+  it('should not observe well-known symbol keyed properties in has operation', () => {
+    const key = Symbol.isConcatSpreadable
+    const obj = reactive({
+      [key]: true,
+    }) as any
+
+    const spy = vi.fn(() => {
+      key in obj
+    })
+    effect(spy)
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    obj[key] = false
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
   it('should support manipulating an array while observing symbol keyed properties', () => {
     const key = Symbol()
     let dummy
@@ -277,7 +308,7 @@ describe('reactivity/effect', () => {
       a: 1,
       get b() {
         return this.a
-      }
+      },
     })
 
     let dummy
@@ -292,7 +323,7 @@ describe('reactivity/effect', () => {
       a: 1,
       b() {
         return this.a
-      }
+      },
     })
 
     let dummy
@@ -349,7 +380,7 @@ describe('reactivity/effect', () => {
       },
       get prop() {
         return hiddenValue
-      }
+      },
     })
     Object.setPrototypeOf(obj, parent)
     effect(() => (dummy = obj.prop))
@@ -574,8 +605,8 @@ describe('reactivity/effect', () => {
     expect(output.fx2).toBe(1 + 3 + 3)
     expect(fx1Spy).toHaveBeenCalledTimes(1)
 
-    // Invoked twice due to change of fx1.
-    expect(fx2Spy).toHaveBeenCalledTimes(2)
+    // Invoked due to change of fx1.
+    expect(fx2Spy).toHaveBeenCalledTimes(1)
 
     fx1Spy.mockClear()
     fx2Spy.mockClear()
@@ -689,18 +720,6 @@ describe('reactivity/effect', () => {
     expect(dummy).toBe(1)
   })
 
-  it('lazy', () => {
-    const obj = reactive({ foo: 1 })
-    let dummy
-    const runner = effect(() => (dummy = obj.foo), { lazy: true })
-    expect(dummy).toBe(undefined)
-
-    expect(runner()).toBe(1)
-    expect(dummy).toBe(1)
-    obj.foo = 2
-    expect(dummy).toBe(2)
-  })
-
   it('scheduler', () => {
     let dummy
     let run: any
@@ -712,7 +731,7 @@ describe('reactivity/effect', () => {
       () => {
         dummy = obj.foo
       },
-      { scheduler }
+      { scheduler },
     )
     expect(scheduler).not.toHaveBeenCalled()
     expect(dummy).toBe(1)
@@ -740,7 +759,7 @@ describe('reactivity/effect', () => {
         dummy = 'bar' in obj
         dummy = Object.keys(obj)
       },
-      { onTrack }
+      { onTrack },
     )
     expect(dummy).toEqual(['foo', 'bar'])
     expect(onTrack).toHaveBeenCalledTimes(3)
@@ -749,23 +768,49 @@ describe('reactivity/effect', () => {
         effect: runner.effect,
         target: toRaw(obj),
         type: TrackOpTypes.GET,
-        key: 'foo'
+        key: 'foo',
       },
       {
         effect: runner.effect,
         target: toRaw(obj),
         type: TrackOpTypes.HAS,
-        key: 'bar'
+        key: 'bar',
       },
       {
         effect: runner.effect,
         target: toRaw(obj),
         type: TrackOpTypes.ITERATE,
-        key: ITERATE_KEY
-      }
+        key: ITERATE_KEY,
+      },
     ])
   })
 
+  it('debug: the call sequence of onTrack', () => {
+    const seq: number[] = []
+    const s = ref(0)
+
+    const track1 = () => seq.push(1)
+    const track2 = () => seq.push(2)
+
+    effect(
+      () => {
+        s.value
+      },
+      {
+        onTrack: track1,
+      },
+    )
+    effect(
+      () => {
+        s.value
+      },
+      {
+        onTrack: track2,
+      },
+    )
+    expect(seq.toString()).toBe('1,2')
+  })
+
   it('events: onTrigger', () => {
     let events: DebuggerEvent[] = []
     let dummy
@@ -777,7 +822,7 @@ describe('reactivity/effect', () => {
       () => {
         dummy = obj.foo
       },
-      { onTrigger }
+      { onTrigger },
     )
 
     obj.foo!++
@@ -789,7 +834,7 @@ describe('reactivity/effect', () => {
       type: TriggerOpTypes.SET,
       key: 'foo',
       oldValue: 1,
-      newValue: 2
+      newValue: 2,
     })
 
     delete obj.foo
@@ -800,10 +845,55 @@ describe('reactivity/effect', () => {
       target: toRaw(obj),
       type: TriggerOpTypes.DELETE,
       key: 'foo',
-      oldValue: 2
+      oldValue: 2,
     })
   })
 
+  it('debug: the call sequence of onTrigger', () => {
+    const seq: number[] = []
+    const s = ref(0)
+
+    const trigger1 = () => seq.push(1)
+    const trigger2 = () => seq.push(2)
+    const trigger3 = () => seq.push(3)
+    const trigger4 = () => seq.push(4)
+
+    effect(
+      () => {
+        s.value
+      },
+      {
+        onTrigger: trigger1,
+      },
+    )
+    effect(
+      () => {
+        s.value
+        effect(
+          () => {
+            s.value
+            effect(
+              () => {
+                s.value
+              },
+              {
+                onTrigger: trigger4,
+              },
+            )
+          },
+          {
+            onTrigger: trigger3,
+          },
+        )
+      },
+      {
+        onTrigger: trigger2,
+      },
+    )
+    s.value++
+    expect(seq.toString()).toBe('1,2,3,4')
+  })
+
   it('stop', () => {
     let dummy
     const obj = reactive({ prop: 1 })
@@ -821,30 +911,35 @@ describe('reactivity/effect', () => {
     expect(dummy).toBe(3)
   })
 
-  // #5707
-  // when an effect completes its run, it should clear the tracking bits of
-  // its tracked deps. However, if the effect stops itself, the deps list is
-  // emptied so their bits are never cleared.
-  it('edge case: self-stopping effect tracking ref', () => {
-    const c = ref(true)
+  it('stop with multiple dependencies', () => {
+    let dummy1, dummy2
+    const obj1 = reactive({ prop: 1 })
+    const obj2 = reactive({ prop: 1 })
     const runner = effect(() => {
-      // reference ref
-      if (!c.value) {
-        // stop itself while running
-        stop(runner)
-      }
+      dummy1 = obj1.prop
+      dummy2 = obj2.prop
     })
-    // trigger run
-    c.value = !c.value
-    // should clear bits
-    expect((c as any).dep.w).toBe(0)
-    expect((c as any).dep.n).toBe(0)
+
+    obj1.prop = 2
+    expect(dummy1).toBe(2)
+
+    obj2.prop = 3
+    expect(dummy2).toBe(3)
+
+    stop(runner)
+
+    obj1.prop = 4
+    obj2.prop = 5
+
+    // Check that both dependencies have been cleared
+    expect(dummy1).toBe(2)
+    expect(dummy2).toBe(3)
   })
 
   it('events: onStop', () => {
     const onStop = vi.fn()
     const runner = effect(() => {}, {
-      onStop
+      onStop,
     })
 
     stop(runner)
@@ -876,8 +971,8 @@ describe('reactivity/effect', () => {
   it('markRaw', () => {
     const obj = reactive({
       foo: markRaw({
-        prop: 0
-      })
+        prop: 0,
+      }),
     })
     let dummy
     effect(() => {
@@ -892,7 +987,7 @@ describe('reactivity/effect', () => {
 
   it('should not be triggered when the value and the old value both are NaN', () => {
     const obj = reactive({
-      foo: NaN
+      foo: NaN,
     })
     const fnSpy = vi.fn(() => obj.foo)
     effect(fnSpy)
@@ -1015,4 +1110,220 @@ describe('reactivity/effect', () => {
       expect(has).toBe(false)
     })
   })
+
+  it('should be triggered once with batching', () => {
+    const counter = reactive({ num: 0 })
+
+    const counterSpy = vi.fn(() => counter.num)
+    effect(counterSpy)
+
+    counterSpy.mockClear()
+
+    startBatch()
+    counter.num++
+    counter.num++
+    endBatch()
+    expect(counterSpy).toHaveBeenCalledTimes(1)
+  })
+
+  // #10082
+  it('should set dirtyLevel when effect is allowRecurse and is running', async () => {
+    const s = ref(0)
+    const n = computed(() => s.value + 1)
+
+    const Child = {
+      setup() {
+        s.value++
+        return () => n.value
+      },
+    }
+
+    const renderSpy = vi.fn()
+    const Parent = {
+      setup() {
+        return () => {
+          renderSpy()
+          return [n.value, h(Child)]
+        }
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    await nextTick()
+    expect(serializeInner(root)).toBe('22')
+    expect(renderSpy).toHaveBeenCalledTimes(2)
+  })
+
+  it('nested effect should force track in untracked zone', () => {
+    const n = ref(0)
+    const spy1 = vi.fn()
+    const spy2 = vi.fn()
+
+    effect(() => {
+      spy1()
+      pauseTracking()
+      n.value
+      effect(() => {
+        n.value
+        spy2()
+      })
+      n.value
+      resetTracking()
+    })
+
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).toHaveBeenCalledTimes(1)
+
+    n.value++
+    // outer effect should not trigger
+    expect(spy1).toHaveBeenCalledTimes(1)
+    // inner effect should trigger
+    expect(spy2).toHaveBeenCalledTimes(2)
+  })
+
+  describe('dep unsubscribe', () => {
+    function getSubCount(dep: Dep | undefined) {
+      let count = 0
+      let sub = dep!.subs
+      while (sub) {
+        count++
+        sub = sub.prevSub
+      }
+      return count
+    }
+
+    it('should remove the dep when the effect is stopped', () => {
+      const obj = reactive({ prop: 1 })
+      const runner = effect(() => obj.prop)
+      const dep = getDepFromReactive(toRaw(obj), 'prop')
+      expect(getSubCount(dep)).toBe(1)
+      obj.prop = 2
+      expect(getSubCount(dep)).toBe(1)
+      stop(runner)
+      expect(getSubCount(dep)).toBe(0)
+      obj.prop = 3
+      runner()
+      expect(getSubCount(dep)).toBe(0)
+    })
+
+    it('should only remove the dep when the last effect is stopped', () => {
+      const obj = reactive({ prop: 1 })
+      const runner1 = effect(() => obj.prop)
+      const dep = getDepFromReactive(toRaw(obj), 'prop')
+      expect(getSubCount(dep)).toBe(1)
+      const runner2 = effect(() => obj.prop)
+      expect(getSubCount(dep)).toBe(2)
+      obj.prop = 2
+      expect(getSubCount(dep)).toBe(2)
+      stop(runner1)
+      expect(getSubCount(dep)).toBe(1)
+      obj.prop = 3
+      expect(getSubCount(dep)).toBe(1)
+      stop(runner2)
+      obj.prop = 4
+      runner1()
+      runner2()
+      expect(getSubCount(dep)).toBe(0)
+    })
+
+    it('should remove the dep when it is no longer used by the effect', () => {
+      const obj = reactive<{ a: number; b: number; c: 'a' | 'b' }>({
+        a: 1,
+        b: 2,
+        c: 'a',
+      })
+      effect(() => obj[obj.c])
+      const depC = getDepFromReactive(toRaw(obj), 'c')
+      expect(getSubCount(getDepFromReactive(toRaw(obj), 'a'))).toBe(1)
+      expect(getSubCount(depC)).toBe(1)
+      obj.c = 'b'
+      obj.a = 4
+      expect(getSubCount(getDepFromReactive(toRaw(obj), 'b'))).toBe(1)
+      expect(getDepFromReactive(toRaw(obj), 'c')).toBe(depC)
+      expect(getSubCount(depC)).toBe(1)
+    })
+  })
+
+  describe('onEffectCleanup', () => {
+    it('should get called correctly', async () => {
+      const count = ref(0)
+      const cleanupEffect = vi.fn()
+
+      const e = effect(() => {
+        onEffectCleanup(cleanupEffect)
+        count.value
+      })
+
+      count.value++
+      await nextTick()
+      expect(cleanupEffect).toHaveBeenCalledTimes(1)
+
+      count.value++
+      await nextTick()
+      expect(cleanupEffect).toHaveBeenCalledTimes(2)
+
+      // call it on stop
+      e.effect.stop()
+      expect(cleanupEffect).toHaveBeenCalledTimes(3)
+    })
+
+    it('should warn if called without active effect', () => {
+      onEffectCleanup(() => {})
+      expect(
+        `onEffectCleanup() was called when there was no active effect`,
+      ).toHaveBeenWarned()
+    })
+
+    it('should not warn without active effect when failSilently argument is passed', () => {
+      onEffectCleanup(() => {}, true)
+      expect(
+        `onEffectCleanup() was called when there was no active effect`,
+      ).not.toHaveBeenWarned()
+    })
+  })
+
+  test('should pause/resume effect', () => {
+    const obj = reactive({ foo: 1 })
+    const fnSpy = vi.fn(() => obj.foo)
+    const runner = effect(fnSpy)
+
+    expect(fnSpy).toHaveBeenCalledTimes(1)
+    expect(obj.foo).toBe(1)
+
+    runner.effect.pause()
+    obj.foo++
+    expect(fnSpy).toHaveBeenCalledTimes(1)
+    expect(obj.foo).toBe(2)
+
+    runner.effect.resume()
+    expect(fnSpy).toHaveBeenCalledTimes(2)
+    expect(obj.foo).toBe(2)
+
+    obj.foo++
+    expect(fnSpy).toHaveBeenCalledTimes(3)
+    expect(obj.foo).toBe(3)
+  })
+
+  test('should be executed once immediately when resume is called', () => {
+    const obj = reactive({ foo: 1 })
+    const fnSpy = vi.fn(() => obj.foo)
+    const runner = effect(fnSpy)
+
+    expect(fnSpy).toHaveBeenCalledTimes(1)
+    expect(obj.foo).toBe(1)
+
+    runner.effect.pause()
+    obj.foo++
+    expect(fnSpy).toHaveBeenCalledTimes(1)
+    expect(obj.foo).toBe(2)
+
+    obj.foo++
+    expect(fnSpy).toHaveBeenCalledTimes(1)
+    expect(obj.foo).toBe(3)
+
+    runner.effect.resume()
+    expect(fnSpy).toHaveBeenCalledTimes(2)
+    expect(obj.foo).toBe(3)
+  })
 })
diff --git a/packages/reactivity/__tests__/effectScope.spec.ts b/packages/reactivity/__tests__/effectScope.spec.ts
index b26a90a09..8a95f3252 100644
--- a/packages/reactivity/__tests__/effectScope.spec.ts
+++ b/packages/reactivity/__tests__/effectScope.spec.ts
@@ -1,33 +1,34 @@
 import { nextTick, watch, watchEffect } from '@vue/runtime-core'
 import {
-  reactive,
-  effect,
+  type ComputedRef,
   EffectScope,
-  onScopeDispose,
   computed,
+  effect,
+  effectScope,
+  getCurrentScope,
+  onScopeDispose,
+  reactive,
   ref,
-  ComputedRef,
-  getCurrentScope
 } from '../src'
 
 describe('reactivity/effect/scope', () => {
   it('should run', () => {
     const fnSpy = vi.fn(() => {})
-    new EffectScope().run(fnSpy)
+    effectScope().run(fnSpy)
     expect(fnSpy).toHaveBeenCalledTimes(1)
   })
 
   it('should accept zero argument', () => {
-    const scope = new EffectScope()
+    const scope = effectScope()
     expect(scope.effects.length).toBe(0)
   })
 
   it('should return run value', () => {
-    expect(new EffectScope().run(() => 1)).toBe(1)
+    expect(effectScope().run(() => 1)).toBe(1)
   })
 
   it('should work w/ active property', () => {
-    const scope = new EffectScope()
+    const scope = effectScope()
     scope.run(() => 1)
     expect(scope.active).toBe(true)
     scope.stop()
@@ -35,7 +36,7 @@ describe('reactivity/effect/scope', () => {
   })
 
   it('should collect the effects', () => {
-    const scope = new EffectScope()
+    const scope = effectScope()
     scope.run(() => {
       let dummy
       const counter = reactive({ num: 0 })
@@ -53,7 +54,7 @@ describe('reactivity/effect/scope', () => {
     let dummy, doubled
     const counter = reactive({ num: 0 })
 
-    const scope = new EffectScope()
+    const scope = effectScope()
     scope.run(() => {
       effect(() => (dummy = counter.num))
       effect(() => (doubled = counter.num * 2))
@@ -77,11 +78,11 @@ describe('reactivity/effect/scope', () => {
     let dummy, doubled
     const counter = reactive({ num: 0 })
 
-    const scope = new EffectScope()
+    const scope = effectScope()
     scope.run(() => {
       effect(() => (dummy = counter.num))
       // nested scope
-      new EffectScope().run(() => {
+      effectScope().run(() => {
         effect(() => (doubled = counter.num * 2))
       })
     })
@@ -107,11 +108,11 @@ describe('reactivity/effect/scope', () => {
     let dummy, doubled
     const counter = reactive({ num: 0 })
 
-    const scope = new EffectScope()
+    const scope = effectScope()
     scope.run(() => {
       effect(() => (dummy = counter.num))
       // nested scope
-      new EffectScope(true).run(() => {
+      effectScope(true).run(() => {
         effect(() => (doubled = counter.num * 2))
       })
     })
@@ -136,7 +137,7 @@ describe('reactivity/effect/scope', () => {
     let dummy, doubled
     const counter = reactive({ num: 0 })
 
-    const scope = new EffectScope()
+    const scope = effectScope()
     scope.run(() => {
       effect(() => (dummy = counter.num))
     })
@@ -160,7 +161,7 @@ describe('reactivity/effect/scope', () => {
     let dummy, doubled
     const counter = reactive({ num: 0 })
 
-    const scope = new EffectScope()
+    const scope = effectScope()
     scope.run(() => {
       effect(() => (dummy = counter.num))
     })
@@ -185,7 +186,7 @@ describe('reactivity/effect/scope', () => {
   it('should fire onScopeDispose hook', () => {
     let dummy = 0
 
-    const scope = new EffectScope()
+    const scope = effectScope()
     scope.run(() => {
       onScopeDispose(() => (dummy += 1))
       onScopeDispose(() => (dummy += 2))
@@ -203,7 +204,7 @@ describe('reactivity/effect/scope', () => {
 
   it('should warn onScopeDispose() is called when there is no active effect scope', () => {
     const spy = vi.fn()
-    const scope = new EffectScope()
+    const scope = effectScope()
     scope.run(() => {
       onScopeDispose(spy)
     })
@@ -213,7 +214,7 @@ describe('reactivity/effect/scope', () => {
     onScopeDispose(spy)
 
     expect(
-      '[Vue warn] onScopeDispose() is called when there is no active effect scope to be associated with.'
+      '[Vue warn] onScopeDispose() is called when there is no active effect scope to be associated with.',
     ).toHaveBeenWarned()
 
     scope.stop()
@@ -221,8 +222,8 @@ describe('reactivity/effect/scope', () => {
   })
 
   it('should dereference child scope from parent scope after stopping child scope (no memleaks)', () => {
-    const parent = new EffectScope()
-    const child = parent.run(() => new EffectScope())!
+    const parent = effectScope()
+    const child = parent.run(() => effectScope())!
     expect(parent.scopes!.includes(child)).toBe(true)
     child.stop()
     expect(parent.scopes!.includes(child)).toBe(false)
@@ -236,7 +237,7 @@ describe('reactivity/effect/scope', () => {
     const watchEffectSpy = vi.fn()
 
     let c: ComputedRef
-    const scope = new EffectScope()
+    const scope = effectScope()
     scope.run(() => {
       c = computed(() => {
         computedSpy()
@@ -247,16 +248,15 @@ describe('reactivity/effect/scope', () => {
       watchEffect(() => {
         watchEffectSpy()
         r.value
+        c.value
       })
     })
 
-    c!.value // computed is lazy so trigger collection
     expect(computedSpy).toHaveBeenCalledTimes(1)
     expect(watchSpy).toHaveBeenCalledTimes(0)
     expect(watchEffectSpy).toHaveBeenCalledTimes(1)
 
     r.value++
-    c!.value
     await nextTick()
     expect(computedSpy).toHaveBeenCalledTimes(2)
     expect(watchSpy).toHaveBeenCalledTimes(1)
@@ -265,7 +265,6 @@ describe('reactivity/effect/scope', () => {
     scope.stop()
 
     r.value++
-    c!.value
     await nextTick()
     // should not trigger anymore
     expect(computedSpy).toHaveBeenCalledTimes(2)
@@ -274,12 +273,12 @@ describe('reactivity/effect/scope', () => {
   })
 
   it('getCurrentScope() stays valid when running a detached nested EffectScope', () => {
-    const parentScope = new EffectScope()
+    const parentScope = effectScope()
 
     parentScope.run(() => {
       const currentScope = getCurrentScope()
       expect(currentScope).toBeDefined()
-      const detachedScope = new EffectScope(true)
+      const detachedScope = effectScope(true)
       detachedScope.run(() => {})
 
       expect(getCurrentScope()).toBe(currentScope)
@@ -287,13 +286,40 @@ describe('reactivity/effect/scope', () => {
   })
 
   it('calling .off() of a detached scope inside an active scope should not break currentScope', () => {
-    const parentScope = new EffectScope()
+    const parentScope = effectScope()
 
     parentScope.run(() => {
-      const childScope = new EffectScope(true)
+      const childScope = effectScope(true)
       childScope.on()
       childScope.off()
       expect(getCurrentScope()).toBe(parentScope)
     })
   })
+
+  it('should pause/resume EffectScope', async () => {
+    const counter = reactive({ num: 0 })
+    const fnSpy = vi.fn(() => counter.num)
+    const scope = new EffectScope()
+    scope.run(() => {
+      effect(fnSpy)
+    })
+
+    expect(fnSpy).toHaveBeenCalledTimes(1)
+
+    counter.num++
+    await nextTick()
+    expect(fnSpy).toHaveBeenCalledTimes(2)
+
+    scope.pause()
+    counter.num++
+    await nextTick()
+    expect(fnSpy).toHaveBeenCalledTimes(2)
+
+    counter.num++
+    await nextTick()
+    expect(fnSpy).toHaveBeenCalledTimes(2)
+
+    scope.resume()
+    expect(fnSpy).toHaveBeenCalledTimes(3)
+  })
 })
diff --git a/packages/reactivity/__tests__/gc.spec.ts b/packages/reactivity/__tests__/gc.spec.ts
new file mode 100644
index 000000000..a60995840
--- /dev/null
+++ b/packages/reactivity/__tests__/gc.spec.ts
@@ -0,0 +1,82 @@
+import {
+  type ComputedRef,
+  computed,
+  effect,
+  reactive,
+  shallowRef as ref,
+  toRaw,
+} from '../src/index'
+import { getDepFromReactive } from '../src/dep'
+
+describe.skipIf(!global.gc)('reactivity/gc', () => {
+  const gc = () => {
+    return new Promise<void>(resolve => {
+      setTimeout(() => {
+        global.gc!()
+        resolve()
+      })
+    })
+  }
+
+  // #9233
+  it('should release computed cache', async () => {
+    const src = ref<{} | undefined>({})
+    // @ts-expect-error ES2021 API
+    const srcRef = new WeakRef(src.value!)
+
+    let c: ComputedRef | undefined = computed(() => src.value)
+
+    c.value // cache src value
+    src.value = undefined // release value
+    c = undefined // release computed
+
+    await gc()
+    expect(srcRef.deref()).toBeUndefined()
+  })
+
+  it('should release reactive property dep', async () => {
+    const src = reactive({ foo: 1 })
+
+    let c: ComputedRef | undefined = computed(() => src.foo)
+
+    c.value
+    expect(getDepFromReactive(toRaw(src), 'foo')).not.toBeUndefined()
+
+    c = undefined
+    await gc()
+    await gc()
+    expect(getDepFromReactive(toRaw(src), 'foo')).toBeUndefined()
+  })
+
+  it('should not release effect for ref', async () => {
+    const spy = vi.fn()
+    const src = ref(0)
+
+    effect(() => {
+      spy()
+      src.value
+    })
+
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    await gc()
+    src.value++
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+
+  it('should not release effect for reactive', async () => {
+    const spy = vi.fn()
+    const src = reactive({ foo: 1 })
+
+    effect(() => {
+      spy()
+      src.foo
+    })
+
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    await gc()
+    src.foo++
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+})
diff --git a/packages/reactivity/__tests__/reactive.spec.ts b/packages/reactivity/__tests__/reactive.spec.ts
index e7fe18252..47f6aa297 100644
--- a/packages/reactivity/__tests__/reactive.spec.ts
+++ b/packages/reactivity/__tests__/reactive.spec.ts
@@ -1,7 +1,19 @@
-import { ref, isRef } from '../src/ref'
-import { reactive, isReactive, toRaw, markRaw } from '../src/reactive'
+import { isRef, ref } from '../src/ref'
+import {
+  isProxy,
+  isReactive,
+  isReadonly,
+  isShallow,
+  markRaw,
+  reactive,
+  readonly,
+  shallowReactive,
+  shallowReadonly,
+  toRaw,
+} from '../src/reactive'
 import { computed } from '../src/computed'
 import { effect } from '../src/effect'
+import { targetMap } from '../src/dep'
 
 describe('reactivity/reactive', () => {
   test('Object', () => {
@@ -35,9 +47,9 @@ describe('reactivity/reactive', () => {
   test('nested reactives', () => {
     const original = {
       nested: {
-        foo: 1
+        foo: 1,
       },
-      array: [{ bar: 2 }]
+      array: [{ bar: 2 }],
     }
     const observed = reactive(original)
     expect(isReactive(observed.nested)).toBe(true)
@@ -158,6 +170,21 @@ describe('reactivity/reactive', () => {
     expect(original.bar).toBe(original2)
   })
 
+  // #1246
+  test('mutation on objects using reactive as prototype should not trigger', () => {
+    const observed = reactive({ foo: 1 })
+    const original = Object.create(observed)
+    let dummy
+    effect(() => (dummy = original.foo))
+    expect(dummy).toBe(1)
+    observed.foo = 2
+    expect(dummy).toBe(2)
+    original.foo = 3
+    expect(dummy).toBe(2)
+    original.foo = 4
+    expect(dummy).toBe(2)
+  })
+
   test('toRaw', () => {
     const original = { foo: 1 }
     const observed = reactive(original)
@@ -166,11 +193,18 @@ describe('reactivity/reactive', () => {
   })
 
   test('toRaw on object using reactive as prototype', () => {
-    const original = reactive({})
-    const obj = Object.create(original)
+    const original = { foo: 1 }
+    const observed = reactive(original)
+    const inherted = Object.create(observed)
+    expect(toRaw(inherted)).toBe(inherted)
+  })
+
+  test('toRaw on user Proxy wrapping reactive', () => {
+    const original = {}
+    const re = reactive(original)
+    const obj = new Proxy(re, {})
     const raw = toRaw(obj)
-    expect(raw).toBe(obj)
-    expect(raw).not.toBe(toRaw(original))
+    expect(raw).toBe(original)
   })
 
   test('should not unwrap Ref<T>', () => {
@@ -187,7 +221,7 @@ describe('reactivity/reactive', () => {
     // writable
     const b = computed({
       get: () => 1,
-      set: () => {}
+      set: () => {},
     })
     const obj = reactive({ a, b })
     // check type
@@ -216,7 +250,7 @@ describe('reactivity/reactive', () => {
     const assertValue = (value: any) => {
       reactive(value)
       expect(
-        `value cannot be made reactive: ${String(value)}`
+        `value cannot be made reactive: ${String(value)}`,
       ).toHaveBeenWarnedLast()
     }
 
@@ -249,18 +283,30 @@ describe('reactivity/reactive', () => {
   test('markRaw', () => {
     const obj = reactive({
       foo: { a: 1 },
-      bar: markRaw({ b: 2 })
+      bar: markRaw({ b: 2 }),
     })
     expect(isReactive(obj.foo)).toBe(true)
     expect(isReactive(obj.bar)).toBe(false)
   })
 
+  test('markRaw should skip non-extensible objects', () => {
+    const obj = Object.seal({ foo: 1 })
+    expect(() => markRaw(obj)).not.toThrowError()
+  })
+
+  test('markRaw should not redefine on an marked object', () => {
+    const obj = markRaw({ foo: 1 })
+    const raw = markRaw(obj)
+    expect(raw).toBe(obj)
+    expect(() => markRaw(obj)).not.toThrowError()
+  })
+
   test('should not observe non-extensible objects', () => {
     const obj = reactive({
       foo: Object.preventExtensions({ a: 1 }),
       // sealed or frozen objects are considered non-extensible as well
       bar: Object.freeze({ a: 1 }),
-      baz: Object.seal({ a: 1 })
+      baz: Object.seal({ a: 1 }),
     })
     expect(isReactive(obj.foo)).toBe(false)
     expect(isReactive(obj.bar)).toBe(false)
@@ -270,9 +316,97 @@ describe('reactivity/reactive', () => {
   test('should not observe objects with __v_skip', () => {
     const original = {
       foo: 1,
-      __v_skip: true
+      __v_skip: true,
     }
     const observed = reactive(original)
     expect(isReactive(observed)).toBe(false)
   })
+
+  test('hasOwnProperty edge case: Symbol values', () => {
+    const key = Symbol()
+    const obj = reactive({ [key]: 1 }) as { [key]?: 1 }
+    let dummy
+    effect(() => {
+      dummy = obj.hasOwnProperty(key)
+    })
+    expect(dummy).toBe(true)
+
+    delete obj[key]
+    expect(dummy).toBe(false)
+  })
+
+  test('hasOwnProperty edge case: non-string values', () => {
+    const key = {}
+    const obj = reactive({ '[object Object]': 1 }) as { '[object Object]'?: 1 }
+    let dummy
+    effect(() => {
+      // @ts-expect-error
+      dummy = obj.hasOwnProperty(key)
+    })
+    expect(dummy).toBe(true)
+
+    // @ts-expect-error
+    delete obj[key]
+    expect(dummy).toBe(false)
+  })
+
+  test('isProxy', () => {
+    const foo = {}
+    expect(isProxy(foo)).toBe(false)
+
+    const fooRe = reactive(foo)
+    expect(isProxy(fooRe)).toBe(true)
+
+    const fooSRe = shallowReactive(foo)
+    expect(isProxy(fooSRe)).toBe(true)
+
+    const barRl = readonly(foo)
+    expect(isProxy(barRl)).toBe(true)
+
+    const barSRl = shallowReadonly(foo)
+    expect(isProxy(barSRl)).toBe(true)
+
+    const c = computed(() => {})
+    expect(isProxy(c)).toBe(false)
+  })
+
+  test('The results of the shallow and readonly assignments are the same (Map)', () => {
+    const map = reactive(new Map())
+    map.set('foo', shallowReactive({ a: 2 }))
+    expect(isShallow(map.get('foo'))).toBe(true)
+
+    map.set('bar', readonly({ b: 2 }))
+    expect(isReadonly(map.get('bar'))).toBe(true)
+  })
+
+  test('The results of the shallow and readonly assignments are the same (Set)', () => {
+    const set = reactive(new Set())
+    set.add(shallowReactive({ a: 2 }))
+    set.add(readonly({ b: 2 }))
+    let count = 0
+    for (const i of set) {
+      if (count === 0) expect(isShallow(i)).toBe(true)
+      else expect(isReadonly(i)).toBe(true)
+      count++
+    }
+  })
+
+  // #11696
+  test('should use correct receiver on set handler for refs', () => {
+    const a = reactive(ref(1))
+    effect(() => a.value)
+    expect(() => {
+      a.value++
+    }).not.toThrow()
+  })
+
+  // #11979
+  test('should release property Dep instance if it no longer has subscribers', () => {
+    let obj = { x: 1 }
+    let a = reactive(obj)
+    const e = effect(() => a.x)
+    expect(targetMap.get(obj)?.get('x')).toBeTruthy()
+    e.effect.stop()
+    expect(targetMap.get(obj)?.get('x')).toBeFalsy()
+  })
 })
diff --git a/packages/reactivity/__tests__/reactiveArray.spec.ts b/packages/reactivity/__tests__/reactiveArray.spec.ts
index 808c5aa55..ebb4a926a 100644
--- a/packages/reactivity/__tests__/reactiveArray.spec.ts
+++ b/packages/reactivity/__tests__/reactiveArray.spec.ts
@@ -1,5 +1,6 @@
-import { reactive, isReactive, toRaw } from '../src/reactive'
-import { ref, isRef } from '../src/ref'
+import { type ComputedRef, computed } from '../src/computed'
+import { isReactive, reactive, shallowReactive, toRaw } from '../src/reactive'
+import { isRef, ref } from '../src/ref'
 import { effect } from '../src/effect'
 
 describe('reactivity/reactive/Array', () => {
@@ -99,6 +100,54 @@ describe('reactivity/reactive/Array', () => {
     expect(fn).toHaveBeenCalledTimes(1)
   })
 
+  test('should track hasOwnProperty call with index', () => {
+    const original = [1, 2, 3]
+    const observed = reactive(original)
+
+    let dummy
+    effect(() => {
+      dummy = observed.hasOwnProperty(0)
+    })
+
+    expect(dummy).toBe(true)
+
+    delete observed[0]
+    expect(dummy).toBe(false)
+  })
+
+  test('shift on Array should trigger dependency once', () => {
+    const arr = reactive([1, 2, 3])
+    const fn = vi.fn()
+    effect(() => {
+      for (let i = 0; i < arr.length; i++) {
+        arr[i]
+      }
+      fn()
+    })
+    expect(fn).toHaveBeenCalledTimes(1)
+    arr.shift()
+    expect(fn).toHaveBeenCalledTimes(2)
+  })
+
+  //#6018
+  test('edge case: avoid trigger effect in deleteProperty when array length-decrease mutation methods called', () => {
+    const arr = ref([1])
+    const fn1 = vi.fn()
+    const fn2 = vi.fn()
+    effect(() => {
+      fn1()
+      if (arr.value.length > 0) {
+        arr.value.slice()
+        fn2()
+      }
+    })
+    expect(fn1).toHaveBeenCalledTimes(1)
+    expect(fn2).toHaveBeenCalledTimes(1)
+    arr.value.splice(0)
+    expect(fn1).toHaveBeenCalledTimes(2)
+    expect(fn2).toHaveBeenCalledTimes(1)
+  })
+
   test('add existing index on Array should not trigger length dependency', () => {
     const array = new Array(3)
     const observed = reactive(array)
@@ -142,6 +191,15 @@ describe('reactivity/reactive/Array', () => {
     expect(length).toBe('01')
   })
 
+  // #9742
+  test('mutation on user proxy of reactive Array', () => {
+    const array = reactive<number[]>([])
+    const proxy = new Proxy(array, {})
+    proxy.push(1)
+    expect(array).toHaveLength(1)
+    expect(proxy).toHaveLength(1)
+  })
+
   describe('Array methods w/ refs', () => {
     let original: any[]
     beforeEach(() => {
@@ -210,4 +268,499 @@ describe('reactivity/reactive/Array', () => {
       expect(observed.lastSearched).toBe(6)
     })
   })
+
+  describe('Optimized array methods:', () => {
+    test('iterator', () => {
+      const shallow = shallowReactive([1, 2, 3, 4])
+      let result = computed(() => {
+        let sum = 0
+        for (let x of shallow) {
+          sum += x ** 2
+        }
+        return sum
+      })
+      expect(result.value).toBe(30)
+
+      shallow[2] = 0
+      expect(result.value).toBe(21)
+
+      const deep = reactive([{ val: 1 }, { val: 2 }])
+      result = computed(() => {
+        let sum = 0
+        for (let x of deep) {
+          sum += x.val ** 2
+        }
+        return sum
+      })
+      expect(result.value).toBe(5)
+
+      deep[1].val = 3
+      expect(result.value).toBe(10)
+    })
+
+    test('concat', () => {
+      const a1 = shallowReactive([1, { val: 2 }])
+      const a2 = reactive([{ val: 3 }])
+      const a3 = [4, 5]
+
+      let result = computed(() => a1.concat(a2, a3, 6, { val: 7 }))
+      expect(result.value).toStrictEqual([
+        1,
+        { val: 2 },
+        { val: 3 },
+        4,
+        5,
+        6,
+        { val: 7 },
+      ])
+      expect(isReactive(result.value[1])).toBe(false)
+      expect(isReactive(result.value[2])).toBe(true)
+      expect(isReactive(result.value[6])).toBe(false)
+
+      a1.shift()
+      expect(result.value).toStrictEqual([
+        { val: 2 },
+        { val: 3 },
+        4,
+        5,
+        6,
+        { val: 7 },
+      ])
+
+      a2.pop()
+      expect(result.value).toStrictEqual([{ val: 2 }, 4, 5, 6, { val: 7 }])
+
+      a3.pop()
+      expect(result.value).toStrictEqual([{ val: 2 }, 4, 5, 6, { val: 7 }])
+    })
+
+    test('entries', () => {
+      const shallow = shallowReactive([0, 1])
+      const result1 = computed(() => Array.from(shallow.entries()))
+      expect(result1.value).toStrictEqual([
+        [0, 0],
+        [1, 1],
+      ])
+
+      shallow[1] = 10
+      expect(result1.value).toStrictEqual([
+        [0, 0],
+        [1, 10],
+      ])
+
+      const deep = reactive([{ val: 0 }, { val: 1 }])
+      const result2 = computed(() => Array.from(deep.entries()))
+      expect(result2.value).toStrictEqual([
+        [0, { val: 0 }],
+        [1, { val: 1 }],
+      ])
+      expect(isReactive(result2.value[0][1])).toBe(true)
+
+      deep.pop()
+      expect(Array.from(result2.value)).toStrictEqual([[0, { val: 0 }]])
+    })
+
+    test('every', () => {
+      const shallow = shallowReactive([1, 2, 5])
+      let result = computed(() => shallow.every(x => x < 5))
+      expect(result.value).toBe(false)
+
+      shallow.pop()
+      expect(result.value).toBe(true)
+
+      const deep = reactive([{ val: 1 }, { val: 5 }])
+      result = computed(() => deep.every(x => x.val < 5))
+      expect(result.value).toBe(false)
+
+      deep[1].val = 2
+      expect(result.value).toBe(true)
+    })
+
+    test('filter', () => {
+      const shallow = shallowReactive([1, 2, 3, 4])
+      const result1 = computed(() => shallow.filter(x => x < 3))
+      expect(result1.value).toStrictEqual([1, 2])
+
+      shallow[2] = 0
+      expect(result1.value).toStrictEqual([1, 2, 0])
+
+      const deep = reactive([{ val: 1 }, { val: 2 }])
+      const result2 = computed(() => deep.filter(x => x.val < 2))
+      expect(result2.value).toStrictEqual([{ val: 1 }])
+      expect(isReactive(result2.value[0])).toBe(true)
+
+      deep[1].val = 0
+      expect(result2.value).toStrictEqual([{ val: 1 }, { val: 0 }])
+    })
+
+    test('find and co.', () => {
+      const shallow = shallowReactive([{ val: 1 }, { val: 2 }])
+      let find = computed(() => shallow.find(x => x.val === 2))
+      // @ts-expect-error tests are not limited to es2016
+      let findLast = computed(() => shallow.findLast(x => x.val === 2))
+      let findIndex = computed(() => shallow.findIndex(x => x.val === 2))
+      let findLastIndex = computed(() =>
+        // @ts-expect-error tests are not limited to es2016
+        shallow.findLastIndex(x => x.val === 2),
+      )
+
+      expect(find.value).toBe(shallow[1])
+      expect(isReactive(find.value)).toBe(false)
+      expect(findLast.value).toBe(shallow[1])
+      expect(isReactive(findLast.value)).toBe(false)
+      expect(findIndex.value).toBe(1)
+      expect(findLastIndex.value).toBe(1)
+
+      shallow[1].val = 0
+
+      expect(find.value).toBe(shallow[1])
+      expect(findLast.value).toBe(shallow[1])
+      expect(findIndex.value).toBe(1)
+      expect(findLastIndex.value).toBe(1)
+
+      shallow.pop()
+
+      expect(find.value).toBe(undefined)
+      expect(findLast.value).toBe(undefined)
+      expect(findIndex.value).toBe(-1)
+      expect(findLastIndex.value).toBe(-1)
+
+      const deep = reactive([{ val: 1 }, { val: 2 }])
+      find = computed(() => deep.find(x => x.val === 2))
+      // @ts-expect-error tests are not limited to es2016
+      findLast = computed(() => deep.findLast(x => x.val === 2))
+      findIndex = computed(() => deep.findIndex(x => x.val === 2))
+      // @ts-expect-error tests are not limited to es2016
+      findLastIndex = computed(() => deep.findLastIndex(x => x.val === 2))
+
+      expect(find.value).toBe(deep[1])
+      expect(isReactive(find.value)).toBe(true)
+      expect(findLast.value).toBe(deep[1])
+      expect(isReactive(findLast.value)).toBe(true)
+      expect(findIndex.value).toBe(1)
+      expect(findLastIndex.value).toBe(1)
+
+      deep[1].val = 0
+
+      expect(find.value).toBe(undefined)
+      expect(findLast.value).toBe(undefined)
+      expect(findIndex.value).toBe(-1)
+      expect(findLastIndex.value).toBe(-1)
+    })
+
+    test('forEach', () => {
+      const shallow = shallowReactive([1, 2, 3, 4])
+      let result = computed(() => {
+        let sum = 0
+        shallow.forEach(x => (sum += x ** 2))
+        return sum
+      })
+      expect(result.value).toBe(30)
+
+      shallow[2] = 0
+      expect(result.value).toBe(21)
+
+      const deep = reactive([{ val: 1 }, { val: 2 }])
+      result = computed(() => {
+        let sum = 0
+        deep.forEach(x => (sum += x.val ** 2))
+        return sum
+      })
+      expect(result.value).toBe(5)
+
+      deep[1].val = 3
+      expect(result.value).toBe(10)
+    })
+
+    test('join', () => {
+      function toString(this: { val: number }) {
+        return this.val
+      }
+      const shallow = shallowReactive([
+        { val: 1, toString },
+        { val: 2, toString },
+      ])
+      let result = computed(() => shallow.join('+'))
+      expect(result.value).toBe('1+2')
+
+      shallow[1].val = 23
+      expect(result.value).toBe('1+2')
+
+      shallow.pop()
+      expect(result.value).toBe('1')
+
+      const deep = reactive([
+        { val: 1, toString },
+        { val: 2, toString },
+      ])
+      result = computed(() => deep.join())
+      expect(result.value).toBe('1,2')
+
+      deep[1].val = 23
+      expect(result.value).toBe('1,23')
+    })
+
+    test('map', () => {
+      const shallow = shallowReactive([1, 2, 3, 4])
+      let result = computed(() => shallow.map(x => x ** 2))
+      expect(result.value).toStrictEqual([1, 4, 9, 16])
+
+      shallow[2] = 0
+      expect(result.value).toStrictEqual([1, 4, 0, 16])
+
+      const deep = reactive([{ val: 1 }, { val: 2 }])
+      result = computed(() => deep.map(x => x.val ** 2))
+      expect(result.value).toStrictEqual([1, 4])
+
+      deep[1].val = 3
+      expect(result.value).toStrictEqual([1, 9])
+    })
+
+    test('reduce left and right', () => {
+      function toString(this: any) {
+        return this.val + '-'
+      }
+      const shallow = shallowReactive([
+        { val: 1, toString },
+        { val: 2, toString },
+      ] as any[])
+
+      expect(shallow.reduce((acc, x) => acc + '' + x.val, undefined)).toBe(
+        'undefined12',
+      )
+
+      let left = computed(() => shallow.reduce((acc, x) => acc + '' + x.val))
+      let right = computed(() =>
+        shallow.reduceRight((acc, x) => acc + '' + x.val),
+      )
+      expect(left.value).toBe('1-2')
+      expect(right.value).toBe('2-1')
+
+      shallow[1].val = 23
+      expect(left.value).toBe('1-2')
+      expect(right.value).toBe('2-1')
+
+      shallow.pop()
+      expect(left.value).toBe(shallow[0])
+      expect(right.value).toBe(shallow[0])
+
+      const deep = reactive([{ val: 1 }, { val: 2 }])
+      left = computed(() => deep.reduce((acc, x) => acc + x.val, '0'))
+      right = computed(() => deep.reduceRight((acc, x) => acc + x.val, '3'))
+      expect(left.value).toBe('012')
+      expect(right.value).toBe('321')
+
+      deep[1].val = 23
+      expect(left.value).toBe('0123')
+      expect(right.value).toBe('3231')
+    })
+
+    test('some', () => {
+      const shallow = shallowReactive([1, 2, 5])
+      let result = computed(() => shallow.some(x => x > 4))
+      expect(result.value).toBe(true)
+
+      shallow.pop()
+      expect(result.value).toBe(false)
+
+      const deep = reactive([{ val: 1 }, { val: 5 }])
+      result = computed(() => deep.some(x => x.val > 4))
+      expect(result.value).toBe(true)
+
+      deep[1].val = 2
+      expect(result.value).toBe(false)
+    })
+
+    // Node 20+
+    // @ts-expect-error tests are not limited to es2016
+    test.skipIf(!Array.prototype.toReversed)('toReversed', () => {
+      const array = reactive([1, { val: 2 }])
+      const result = computed(() => (array as any).toReversed())
+      expect(result.value).toStrictEqual([{ val: 2 }, 1])
+      expect(isReactive(result.value[0])).toBe(true)
+
+      array.splice(1, 1, 2)
+      expect(result.value).toStrictEqual([2, 1])
+    })
+
+    // Node 20+
+    // @ts-expect-error tests are not limited to es2016
+    test.skipIf(!Array.prototype.toSorted)('toSorted', () => {
+      // No comparer
+      // @ts-expect-error
+      expect(shallowReactive([2, 1, 3]).toSorted()).toStrictEqual([1, 2, 3])
+
+      const shallow = shallowReactive([{ val: 2 }, { val: 1 }, { val: 3 }])
+      let result: ComputedRef<{ val: number }[]>
+      // @ts-expect-error
+      result = computed(() => shallow.toSorted((a, b) => a.val - b.val))
+      expect(result.value.map(x => x.val)).toStrictEqual([1, 2, 3])
+      expect(isReactive(result.value[0])).toBe(false)
+
+      shallow[0].val = 4
+      expect(result.value.map(x => x.val)).toStrictEqual([1, 4, 3])
+
+      shallow.pop()
+      expect(result.value.map(x => x.val)).toStrictEqual([1, 4])
+
+      const deep = reactive([{ val: 2 }, { val: 1 }, { val: 3 }])
+      // @ts-expect-error
+      result = computed(() => deep.toSorted((a, b) => a.val - b.val))
+      expect(result.value.map(x => x.val)).toStrictEqual([1, 2, 3])
+      expect(isReactive(result.value[0])).toBe(true)
+
+      deep[0].val = 4
+      expect(result.value.map(x => x.val)).toStrictEqual([1, 3, 4])
+    })
+
+    // Node 20+
+    // @ts-expect-error tests are not limited to es2016
+    test.skipIf(!Array.prototype.toSpliced)('toSpliced', () => {
+      const array = reactive([1, 2, 3])
+      // @ts-expect-error
+      const result = computed(() => array.toSpliced(1, 1, -2))
+      expect(result.value).toStrictEqual([1, -2, 3])
+
+      array[0] = 0
+      expect(result.value).toStrictEqual([0, -2, 3])
+    })
+
+    test('values', () => {
+      const shallow = shallowReactive([{ val: 1 }, { val: 2 }])
+      const result = computed(() => Array.from(shallow.values()))
+      expect(result.value).toStrictEqual([{ val: 1 }, { val: 2 }])
+      expect(isReactive(result.value[0])).toBe(false)
+
+      shallow.pop()
+      expect(result.value).toStrictEqual([{ val: 1 }])
+
+      const deep = reactive([{ val: 1 }, { val: 2 }])
+      const firstItem = Array.from(deep.values())[0]
+      expect(isReactive(firstItem)).toBe(true)
+    })
+
+    test('extend methods', () => {
+      class Collection extends Array {
+        // @ts-expect-error
+        every(foo: any, bar: any, baz: any) {
+          expect(foo).toBe('foo')
+          expect(bar).toBe('bar')
+          expect(baz).toBe('baz')
+          return super.every(obj => obj.id === foo)
+        }
+
+        // @ts-expect-error
+        filter(foo: any, bar: any, baz: any) {
+          expect(foo).toBe('foo')
+          expect(bar).toBe('bar')
+          expect(baz).toBe('baz')
+          return super.filter(obj => obj.id === foo)
+        }
+
+        // @ts-expect-error
+        find(foo: any, bar: any, baz: any) {
+          expect(foo).toBe('foo')
+          expect(bar).toBe('bar')
+          expect(baz).toBe('baz')
+          return super.find(obj => obj.id === foo)
+        }
+
+        // @ts-expect-error
+        findIndex(foo: any, bar: any, baz: any) {
+          expect(foo).toBe('foo')
+          expect(bar).toBe('bar')
+          expect(baz).toBe('baz')
+          return super.findIndex(obj => obj.id === bar)
+        }
+
+        findLast(foo: any, bar: any, baz: any) {
+          expect(foo).toBe('foo')
+          expect(bar).toBe('bar')
+          expect(baz).toBe('baz')
+          // @ts-expect-error our code is limited to es2016 but user code is not
+          return super.findLast(obj => obj.id === bar)
+        }
+
+        findLastIndex(foo: any, bar: any, baz: any) {
+          expect(foo).toBe('foo')
+          expect(bar).toBe('bar')
+          expect(baz).toBe('baz')
+          return super.findIndex(obj => obj.id === bar)
+        }
+
+        // @ts-expect-error
+        forEach(foo: any, bar: any, baz: any) {
+          expect(foo).toBe('foo')
+          expect(bar).toBe('bar')
+          expect(baz).toBe('baz')
+        }
+
+        // @ts-expect-error
+        map(foo: any, bar: any, baz: any) {
+          expect(foo).toBe('foo')
+          expect(bar).toBe('bar')
+          expect(baz).toBe('baz')
+          return super.map(obj => obj.value)
+        }
+
+        // @ts-expect-error
+        some(foo: any, bar: any, baz: any) {
+          expect(foo).toBe('foo')
+          expect(bar).toBe('bar')
+          expect(baz).toBe('baz')
+          return super.some(obj => obj.id === baz)
+        }
+      }
+
+      const state = reactive({
+        things: new Collection(),
+      })
+
+      const foo = { id: 'foo', value: '1' }
+      const bar = { id: 'bar', value: '2' }
+      const baz = { id: 'baz', value: '3' }
+      state.things.push(foo)
+      state.things.push(bar)
+      state.things.push(baz)
+
+      expect(state.things.every('foo', 'bar', 'baz')).toBe(false)
+      expect(state.things.filter('foo', 'bar', 'baz')).toEqual([foo])
+
+      const _foo = state.things.find('foo', 'bar', 'baz')
+      expect(isReactive(_foo)).toBe(true)
+      expect(foo).toStrictEqual(_foo)
+
+      expect(state.things.findIndex('foo', 'bar', 'baz')).toBe(1)
+
+      const _bar = state.things.findLast('foo', 'bar', 'baz')
+      expect(isReactive(_bar)).toBe(true)
+      expect(bar).toStrictEqual(_bar)
+
+      expect(state.things.findLastIndex('foo', 'bar', 'baz')).toBe(1)
+      expect(state.things.forEach('foo', 'bar', 'baz')).toBeUndefined()
+      expect(state.things.map('foo', 'bar', 'baz')).toEqual(['1', '2', '3'])
+      expect(state.things.some('foo', 'bar', 'baz')).toBe(true)
+
+      {
+        class Collection extends Array {
+          find(matcher: any) {
+            return super.find(matcher)
+          }
+        }
+
+        const state = reactive({
+          // @ts-expect-error
+          things: new Collection({ foo: '' }),
+        })
+
+        const bar = computed(() => {
+          return state.things.find((obj: any) => obj.foo === 'bar')
+        })
+        bar.value
+        state.things[0].foo = 'bar'
+
+        expect(bar.value).toEqual({ foo: 'bar' })
+      }
+    })
+  })
 })
diff --git a/packages/reactivity/__tests__/readonly.spec.ts b/packages/reactivity/__tests__/readonly.spec.ts
index 448419d31..9acd5c649 100644
--- a/packages/reactivity/__tests__/readonly.spec.ts
+++ b/packages/reactivity/__tests__/readonly.spec.ts
@@ -1,14 +1,14 @@
 import {
-  reactive,
-  readonly,
-  toRaw,
+  computed,
+  effect,
+  isProxy,
   isReactive,
   isReadonly,
   markRaw,
-  effect,
+  reactive,
+  readonly,
   ref,
-  isProxy,
-  computed
+  toRaw,
 } from '../src'
 
 /**
@@ -44,49 +44,49 @@ describe('reactivity/readonly', () => {
       const original = {
         foo: 1,
         bar: {
-          baz: 2
+          baz: 2,
         },
-        [qux]: 3
+        [qux]: 3,
       }
       const wrapped: Writable<typeof original> = readonly(original)
 
       wrapped.foo = 2
       expect(wrapped.foo).toBe(1)
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
 
       wrapped.bar.baz = 3
       expect(wrapped.bar.baz).toBe(2)
       expect(
-        `Set operation on key "baz" failed: target is readonly.`
+        `Set operation on key "baz" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
 
       wrapped[qux] = 4
       expect(wrapped[qux]).toBe(3)
       expect(
-        `Set operation on key "Symbol(qux)" failed: target is readonly.`
+        `Set operation on key "Symbol(qux)" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
 
       // @ts-expect-error
       delete wrapped.foo
       expect(wrapped.foo).toBe(1)
       expect(
-        `Delete operation on key "foo" failed: target is readonly.`
+        `Delete operation on key "foo" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
 
       // @ts-expect-error
       delete wrapped.bar.baz
       expect(wrapped.bar.baz).toBe(2)
       expect(
-        `Delete operation on key "baz" failed: target is readonly.`
+        `Delete operation on key "baz" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
 
       // @ts-expect-error
       delete wrapped[qux]
       expect(wrapped[qux]).toBe(3)
       expect(
-        `Delete operation on key "Symbol(qux)" failed: target is readonly.`
+        `Delete operation on key "Symbol(qux)" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
     })
 
@@ -131,12 +131,12 @@ describe('reactivity/readonly', () => {
       wrapped[0] = 1
       expect(wrapped[0]).not.toBe(1)
       expect(
-        `Set operation on key "0" failed: target is readonly.`
+        `Set operation on key "0" failed: target is readonly.`,
       ).toHaveBeenWarned()
       wrapped[0].foo = 2
       expect(wrapped[0].foo).toBe(1)
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).toHaveBeenWarned()
 
       // should block length mutation
@@ -144,7 +144,7 @@ describe('reactivity/readonly', () => {
       expect(wrapped.length).toBe(1)
       expect(wrapped[0].foo).toBe(1)
       expect(
-        `Set operation on key "length" failed: target is readonly.`
+        `Set operation on key "length" failed: target is readonly.`,
       ).toHaveBeenWarned()
 
       // mutation methods invoke set/length internally and thus are blocked as well
@@ -180,7 +180,7 @@ describe('reactivity/readonly', () => {
         const key2 = {}
         const original = new Collection([
           [key1, {}],
-          [key2, {}]
+          [key2, {}],
         ])
         const wrapped = readonly(original)
         expect(wrapped).not.toBe(original)
@@ -207,7 +207,7 @@ describe('reactivity/readonly', () => {
         expect(dummy).toBeUndefined()
         expect(map.has(key)).toBe(false)
         expect(
-          `Set operation on key "${key}" failed: target is readonly.`
+          `Set operation on key "${key}" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
 
@@ -233,7 +233,7 @@ describe('reactivity/readonly', () => {
           const key2 = {}
           const original = new Map([
             [key1, {}],
-            [key2, {}]
+            [key2, {}],
           ])
           const wrapped: any = readonly(original)
           expect(wrapped.size).toBe(2)
@@ -255,8 +255,8 @@ describe('reactivity/readonly', () => {
           const original = reactive(
             new Map([
               [key1, {}],
-              [key2, {}]
-            ])
+              [key2, {}],
+            ]),
           )
           const wrapped: any = readonly(original)
           expect(wrapped.size).toBe(2)
@@ -280,7 +280,7 @@ describe('reactivity/readonly', () => {
           const wrapped = readonly(new Collection())
           expect(wrapped.clear()).toBeUndefined()
           expect(
-            `Clear operation failed: target is readonly.`
+            `Clear operation failed: target is readonly.`,
           ).toHaveBeenWarned()
         })
       }
@@ -317,7 +317,7 @@ describe('reactivity/readonly', () => {
         expect(dummy).toBe(false)
         expect(set.has(key)).toBe(false)
         expect(
-          `Add operation on key "${key}" failed: target is readonly.`
+          `Add operation on key "${key}" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
 
@@ -345,7 +345,7 @@ describe('reactivity/readonly', () => {
           const wrapped = readonly(new Collection())
           expect(wrapped.clear()).toBeUndefined()
           expect(
-            `Clear operation failed: target is readonly.`
+            `Clear operation failed: target is readonly.`,
           ).toHaveBeenWarned()
         })
       }
@@ -409,7 +409,7 @@ describe('reactivity/readonly', () => {
     const eff = effect(() => {
       roArr.includes(2)
     })
-    expect(eff.effect.deps.length).toBe(0)
+    expect(eff.effect.deps).toBeUndefined()
   })
 
   test('readonly should track and trigger if wrapping reactive original (collection)', () => {
@@ -447,10 +447,10 @@ describe('reactivity/readonly', () => {
   test('markRaw', () => {
     const obj = readonly({
       foo: { a: 1 },
-      bar: markRaw({ b: 2 })
+      bar: markRaw({ b: 2 }),
     })
     expect(isReadonly(obj.foo)).toBe(true)
-    expect(isReactive(obj.bar)).toBe(false)
+    expect(isReadonly(obj.bar)).toBe(false)
   })
 
   test('should make ref readonly', () => {
@@ -459,7 +459,7 @@ describe('reactivity/readonly', () => {
     n.value = 2
     expect(n.value).toBe(1)
     expect(
-      `Set operation on key "value" failed: target is readonly.`
+      `Set operation on key "value" failed: target is readonly.`,
     ).toHaveBeenWarned()
   })
 
@@ -473,13 +473,13 @@ describe('reactivity/readonly', () => {
 
     expect(rC.value).toBe(true)
     expect(
-      'Set operation on key "_dirty" failed: target is readonly.'
+      'Set operation on key "_dirty" failed: target is readonly.',
     ).not.toHaveBeenWarned()
     // @ts-expect-error - non-existent property
     rC.randomProperty = true
 
     expect(
-      'Set operation on key "randomProperty" failed: target is readonly.'
+      'Set operation on key "randomProperty" failed: target is readonly.',
     ).toHaveBeenWarned()
   })
 
diff --git a/packages/reactivity/__tests__/ref.spec.ts b/packages/reactivity/__tests__/ref.spec.ts
index 0ee32866d..7976a5373 100644
--- a/packages/reactivity/__tests__/ref.spec.ts
+++ b/packages/reactivity/__tests__/ref.spec.ts
@@ -1,20 +1,21 @@
 import {
-  ref,
+  type Ref,
   effect,
-  reactive,
+  isReactive,
   isRef,
+  reactive,
+  ref,
   toRef,
   toRefs,
-  Ref,
-  isReactive
+  toValue,
 } from '../src/index'
 import { computed } from '@vue/runtime-dom'
-import { shallowRef, unref, customRef, triggerRef } from '../src/ref'
+import { customRef, shallowRef, triggerRef, unref } from '../src/ref'
 import {
   isReadonly,
   isShallow,
   readonly,
-  shallowReactive
+  shallowReactive,
 } from '../src/reactive'
 
 describe('reactivity/ref', () => {
@@ -42,9 +43,31 @@ describe('reactivity/ref', () => {
     expect(fn).toHaveBeenCalledTimes(2)
   })
 
+  it('ref wrapped in reactive should not track internal _value access', () => {
+    const a = ref(1)
+    const b = reactive(a)
+    let dummy
+    const fn = vi.fn(() => {
+      dummy = b.value // this will observe both b.value and a.value access
+    })
+    effect(fn)
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect(dummy).toBe(1)
+
+    // mutating a.value should only trigger effect once
+    a.value = 3
+    expect(fn).toHaveBeenCalledTimes(2)
+    expect(dummy).toBe(3)
+
+    // mutating b.value should trigger the effect twice. (once for a.value change and once for b.value change)
+    b.value = 5
+    expect(fn).toHaveBeenCalledTimes(4)
+    expect(dummy).toBe(5)
+  })
+
   it('should make nested properties reactive', () => {
     const a = ref({
-      count: 1
+      count: 1,
     })
     let dummy
     effect(() => {
@@ -71,8 +94,8 @@ describe('reactivity/ref', () => {
     const obj = reactive({
       a,
       b: {
-        c: a
-      }
+        c: a,
+      },
     })
 
     let dummy1: number
@@ -104,7 +127,7 @@ describe('reactivity/ref', () => {
 
   it('should unwrap nested values in types', () => {
     const a = {
-      b: ref(0)
+      b: ref(0),
     }
 
     const c = ref(a)
@@ -138,7 +161,7 @@ describe('reactivity/ref', () => {
       '1',
       { a: 1 },
       () => 0,
-      ref(0)
+      ref(0),
     ]
     const tupleRef = ref(tuple)
 
@@ -169,7 +192,7 @@ describe('reactivity/ref', () => {
       [Symbol.toPrimitive]: new WeakMap<Ref<boolean>, string>(),
       [Symbol.toStringTag]: { weakSet: new WeakSet<Ref<boolean>>() },
       [Symbol.unscopables]: { weakMap: new WeakMap<Ref<boolean>, string>() },
-      [customSymbol]: { arr: [ref(1)] }
+      [customSymbol]: { arr: [ref(1)] },
     }
 
     const objRef = ref(obj)
@@ -188,7 +211,7 @@ describe('reactivity/ref', () => {
       Symbol.toPrimitive,
       Symbol.toStringTag,
       Symbol.unscopables,
-      customSymbol
+      customSymbol,
     ]
 
     keys.forEach(key => {
@@ -248,9 +271,21 @@ describe('reactivity/ref', () => {
 
   test('toRef', () => {
     const a = reactive({
-      x: 1
+      x: 1,
     })
     const x = toRef(a, 'x')
+
+    const b = ref({ y: 1 })
+
+    const c = toRef(b)
+
+    const d = toRef({ z: 1 })
+
+    expect(isRef(d)).toBe(true)
+    expect(d.value.z).toBe(1)
+
+    expect(c).toBe(b)
+
     expect(isRef(x)).toBe(true)
     expect(x.value).toBe(1)
 
@@ -313,7 +348,7 @@ describe('reactivity/ref', () => {
   test('toRefs', () => {
     const a = reactive({
       x: 1,
-      y: 2
+      y: 2,
     })
 
     const { x, y } = toRefs(a)
@@ -386,7 +421,7 @@ describe('reactivity/ref', () => {
       set(newValue: number) {
         value = newValue
         _trigger = trigger
-      }
+      },
     }))
 
     expect(isRef(custom)).toBe(true)
@@ -442,4 +477,61 @@ describe('reactivity/ref', () => {
     expect(a.value).toBe(rr)
     expect(a.value).not.toBe(r)
   })
+
+  test('should not trigger when setting the same raw object', () => {
+    const obj = {}
+    const r = ref(obj)
+    const spy = vi.fn()
+    effect(() => spy(r.value))
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    r.value = obj
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
+  test('toValue', () => {
+    const a = ref(1)
+    const b = computed(() => a.value + 1)
+    const c = () => a.value + 2
+    const d = 4
+
+    expect(toValue(a)).toBe(1)
+    expect(toValue(b)).toBe(2)
+    expect(toValue(c)).toBe(3)
+    expect(toValue(d)).toBe(4)
+  })
+
+  test('ref w/ customRef w/ getterRef w/ objectRef should store value cache', () => {
+    const refValue = ref(1)
+    // @ts-expect-error private field
+    expect(refValue._value).toBe(1)
+
+    let customRefValueCache = 0
+    const customRefValue = customRef((track, trigger) => {
+      return {
+        get() {
+          track()
+          return customRefValueCache
+        },
+        set(value: number) {
+          customRefValueCache = value
+          trigger()
+        },
+      }
+    })
+    customRefValue.value
+
+    // @ts-expect-error internal field
+    expect(customRefValue._value).toBe(0)
+
+    const getterRefValue = toRef(() => 1)
+    getterRefValue.value
+    // @ts-expect-error internal field
+    expect(getterRefValue._value).toBe(1)
+
+    const objectRefValue = toRef({ value: 1 }, 'value')
+    objectRefValue.value
+    // @ts-expect-error internal field
+    expect(objectRefValue._value).toBe(1)
+  })
 })
diff --git a/packages/reactivity/__tests__/shallowReactive.spec.ts b/packages/reactivity/__tests__/shallowReactive.spec.ts
index bc4907802..91d91f3dc 100644
--- a/packages/reactivity/__tests__/shallowReactive.spec.ts
+++ b/packages/reactivity/__tests__/shallowReactive.spec.ts
@@ -3,11 +3,11 @@ import {
   isShallow,
   reactive,
   shallowReactive,
-  shallowReadonly
+  shallowReadonly,
 } from '../src/reactive'
 
 import { effect } from '../src/effect'
-import { Ref, isRef, ref } from '../src/ref'
+import { type Ref, isRef, ref } from '../src/ref'
 
 describe('shallowReactive', () => {
   test('should not make non-reactive properties reactive', () => {
@@ -50,7 +50,7 @@ describe('shallowReactive', () => {
   // vuejs/vue#12597
   test('should not unwrap refs', () => {
     const foo = shallowReactive({
-      bar: ref(123)
+      bar: ref(123),
     })
     expect(isRef(foo.bar)).toBe(true)
     expect(foo.bar.value).toBe(123)
@@ -60,7 +60,7 @@ describe('shallowReactive', () => {
   test('should not mutate refs', () => {
     const original = ref(123)
     const foo = shallowReactive<{ bar: Ref<number> | number }>({
-      bar: original
+      bar: original,
     })
     expect(foo.bar).toBe(original)
     foo.bar = 234
@@ -123,6 +123,29 @@ describe('shallowReactive', () => {
       shallowSet.forEach(x => expect(isReactive(x)).toBe(false))
     })
 
+    test('Setting a reactive object on a shallowReactive map', () => {
+      const msg = ref('ads')
+      const bar = reactive({ msg })
+      const foo = shallowReactive(new Map([['foo1', bar]]))
+      foo.set('foo2', bar)
+
+      expect(isReactive(foo.get('foo2'))).toBe(true)
+      expect(isReactive(foo.get('foo1'))).toBe(true)
+    })
+
+    test('Setting a reactive object on a shallowReactive set', () => {
+      const msg = ref(1)
+      const bar = reactive({ msg })
+      const foo = reactive({ msg })
+
+      const deps = shallowReactive(new Set([bar]))
+      deps.add(foo)
+
+      deps.forEach(dep => {
+        expect(isReactive(dep)).toBe(true)
+      })
+    })
+
     // #1210
     test('onTrack on called on objectSpread', () => {
       const onTrackFn = vi.fn()
@@ -133,8 +156,8 @@ describe('shallowReactive', () => {
           a = Array.from(shallowSet)
         },
         {
-          onTrack: onTrackFn
-        }
+          onTrack: onTrackFn,
+        },
       )
 
       expect(a).toMatchObject([])
@@ -160,6 +183,7 @@ describe('shallowReactive', () => {
       shallowArray.pop()
       expect(size).toBe(0)
     })
+
     test('should not observe when iterating', () => {
       const shallowArray = shallowReactive<object[]>([])
       const a = {}
@@ -178,8 +202,8 @@ describe('shallowReactive', () => {
           a = Array.from(shallowArray)
         },
         {
-          onTrack: onTrackFn
-        }
+          onTrack: onTrackFn,
+        },
       )
 
       expect(a).toMatchObject([])
diff --git a/packages/reactivity/__tests__/shallowReadonly.spec.ts b/packages/reactivity/__tests__/shallowReadonly.spec.ts
index b6736f4a5..193bc27c5 100644
--- a/packages/reactivity/__tests__/shallowReadonly.spec.ts
+++ b/packages/reactivity/__tests__/shallowReadonly.spec.ts
@@ -12,7 +12,7 @@ describe('reactivity/shallowReadonly', () => {
     props.n = 2
     expect(props.n).toBe(1)
     expect(
-      `Set operation on key "n" failed: target is readonly.`
+      `Set operation on key "n" failed: target is readonly.`,
     ).toHaveBeenWarned()
   })
 
@@ -23,7 +23,7 @@ describe('reactivity/shallowReadonly', () => {
     props.n.foo = 2
     expect(props.n.foo).toBe(2)
     expect(
-      `Set operation on key "foo" failed: target is readonly.`
+      `Set operation on key "foo" failed: target is readonly.`,
     ).not.toHaveBeenWarned()
   })
 
@@ -50,7 +50,7 @@ describe('reactivity/shallowReadonly', () => {
 
         sroMap.set(key, {} as any)
         expect(
-          `Set operation on key "[object Object]" failed: target is readonly.`
+          `Set operation on key "[object Object]" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
 
@@ -64,7 +64,7 @@ describe('reactivity/shallowReadonly', () => {
 
         sroMap.get(key)!.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
@@ -84,7 +84,7 @@ describe('reactivity/shallowReadonly', () => {
 
       values1[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
 
       expect(isReadonly(values2[0][1])).toBe(false)
@@ -93,7 +93,7 @@ describe('reactivity/shallowReadonly', () => {
 
       values2[0][1].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -109,7 +109,7 @@ describe('reactivity/shallowReadonly', () => {
 
         val.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
@@ -133,7 +133,7 @@ describe('reactivity/shallowReadonly', () => {
 
         sroSet.add({} as any)
         expect(
-          `Add operation on key "[object Object]" failed: target is readonly.`
+          `Add operation on key "[object Object]" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
     })
@@ -151,12 +151,12 @@ describe('reactivity/shallowReadonly', () => {
 
       sroSet.add({} as any)
       expect(
-        `Add operation on key "[object Object]" failed: target is readonly.`
+        `Add operation on key "[object Object]" failed: target is readonly.`,
       ).toHaveBeenWarned()
 
       values[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -174,7 +174,7 @@ describe('reactivity/shallowReadonly', () => {
 
       values1[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
 
       expect(isReadonly(values2[0][1])).toBe(false)
@@ -183,7 +183,7 @@ describe('reactivity/shallowReadonly', () => {
 
       values2[0][1].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -199,7 +199,7 @@ describe('reactivity/shallowReadonly', () => {
 
         val.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
diff --git a/packages/reactivity/__tests__/watch.spec.ts b/packages/reactivity/__tests__/watch.spec.ts
new file mode 100644
index 000000000..245acfd63
--- /dev/null
+++ b/packages/reactivity/__tests__/watch.spec.ts
@@ -0,0 +1,280 @@
+import {
+  EffectScope,
+  type Ref,
+  WatchErrorCodes,
+  type WatchOptions,
+  type WatchScheduler,
+  computed,
+  onWatcherCleanup,
+  ref,
+  watch,
+} from '../src'
+
+const queue: (() => void)[] = []
+
+// a simple scheduler for testing purposes
+let isFlushPending = false
+const resolvedPromise = /*@__PURE__*/ Promise.resolve() as Promise<any>
+const nextTick = (fn?: () => any) =>
+  fn ? resolvedPromise.then(fn) : resolvedPromise
+
+const scheduler: WatchScheduler = (job, isFirstRun) => {
+  if (isFirstRun) {
+    job()
+  } else {
+    queue.push(job)
+    flushJobs()
+  }
+}
+
+const flushJobs = () => {
+  if (isFlushPending) return
+  isFlushPending = true
+  resolvedPromise.then(() => {
+    queue.forEach(job => job())
+    queue.length = 0
+    isFlushPending = false
+  })
+}
+
+describe('watch', () => {
+  test('effect', () => {
+    let dummy: any
+    const source = ref(0)
+    watch(() => {
+      dummy = source.value
+    })
+    expect(dummy).toBe(0)
+    source.value++
+    expect(dummy).toBe(1)
+  })
+
+  test('with callback', () => {
+    let dummy: any
+    const source = ref(0)
+    watch(source, () => {
+      dummy = source.value
+    })
+    expect(dummy).toBe(undefined)
+    source.value++
+    expect(dummy).toBe(1)
+  })
+
+  test('call option with error handling', () => {
+    const onError = vi.fn()
+    const call: WatchOptions['call'] = function call(fn, type, args) {
+      if (Array.isArray(fn)) {
+        fn.forEach(f => call(f, type, args))
+        return
+      }
+      try {
+        fn.apply(null, args)
+      } catch (e) {
+        onError(e, type)
+      }
+    }
+
+    watch(
+      () => {
+        throw 'oops in effect'
+      },
+      null,
+      { call },
+    )
+
+    const source = ref(0)
+    const effect = watch(
+      source,
+      () => {
+        onWatcherCleanup(() => {
+          throw 'oops in cleanup'
+        })
+        throw 'oops in watch'
+      },
+      { call },
+    )
+
+    expect(onError.mock.calls.length).toBe(1)
+    expect(onError.mock.calls[0]).toMatchObject([
+      'oops in effect',
+      WatchErrorCodes.WATCH_CALLBACK,
+    ])
+
+    source.value++
+    expect(onError.mock.calls.length).toBe(2)
+    expect(onError.mock.calls[1]).toMatchObject([
+      'oops in watch',
+      WatchErrorCodes.WATCH_CALLBACK,
+    ])
+
+    effect!.stop()
+    source.value++
+    expect(onError.mock.calls.length).toBe(3)
+    expect(onError.mock.calls[2]).toMatchObject([
+      'oops in cleanup',
+      WatchErrorCodes.WATCH_CLEANUP,
+    ])
+  })
+
+  test('watch with onWatcherCleanup', async () => {
+    let dummy = 0
+    let source: Ref<number>
+    const scope = new EffectScope()
+
+    scope.run(() => {
+      source = ref(0)
+      watch(onCleanup => {
+        source.value
+
+        onCleanup(() => (dummy += 2))
+        onWatcherCleanup(() => (dummy += 3))
+        onWatcherCleanup(() => (dummy += 5))
+      })
+    })
+    expect(dummy).toBe(0)
+
+    scope.run(() => {
+      source.value++
+    })
+    expect(dummy).toBe(10)
+
+    scope.run(() => {
+      source.value++
+    })
+    expect(dummy).toBe(20)
+
+    scope.stop()
+    expect(dummy).toBe(30)
+  })
+
+  test('nested calls to baseWatch and onWatcherCleanup', async () => {
+    let calls: string[] = []
+    let source: Ref<number>
+    let copyist: Ref<number>
+    const scope = new EffectScope()
+
+    scope.run(() => {
+      source = ref(0)
+      copyist = ref(0)
+      // sync by default
+      watch(
+        () => {
+          const current = (copyist.value = source.value)
+          onWatcherCleanup(() => calls.push(`sync ${current}`))
+        },
+        null,
+        {},
+      )
+      // with scheduler
+      watch(
+        () => {
+          const current = copyist.value
+          onWatcherCleanup(() => calls.push(`post ${current}`))
+        },
+        null,
+        { scheduler },
+      )
+    })
+
+    await nextTick()
+    expect(calls).toEqual([])
+
+    scope.run(() => source.value++)
+    expect(calls).toEqual(['sync 0'])
+    await nextTick()
+    expect(calls).toEqual(['sync 0', 'post 0'])
+    calls.length = 0
+
+    scope.run(() => source.value++)
+    expect(calls).toEqual(['sync 1'])
+    await nextTick()
+    expect(calls).toEqual(['sync 1', 'post 1'])
+    calls.length = 0
+
+    scope.stop()
+    expect(calls).toEqual(['sync 2', 'post 2'])
+  })
+
+  test('once option should be ignored by simple watch', async () => {
+    let dummy: any
+    const source = ref(0)
+    watch(
+      () => {
+        dummy = source.value
+      },
+      null,
+      { once: true },
+    )
+    expect(dummy).toBe(0)
+
+    source.value++
+    expect(dummy).toBe(1)
+  })
+
+  // #12033
+  test('recursive sync watcher on computed', () => {
+    const r = ref(0)
+    const c = computed(() => r.value)
+
+    watch(c, v => {
+      if (v > 1) {
+        r.value--
+      }
+    })
+
+    expect(r.value).toBe(0)
+    expect(c.value).toBe(0)
+
+    r.value = 10
+    expect(r.value).toBe(1)
+    expect(c.value).toBe(1)
+  })
+
+  // edge case where a nested endBatch() causes an effect to be batched in a
+  // nested batch loop with its .next mutated, causing the outer loop to end
+  // early
+  test('nested batch edge case', () => {
+    // useClamp from VueUse
+    const clamp = (n: number, min: number, max: number) =>
+      Math.min(max, Math.max(min, n))
+    function useClamp(src: Ref<number>, min: number, max: number) {
+      return computed({
+        get() {
+          return (src.value = clamp(src.value, min, max))
+        },
+        set(val) {
+          src.value = clamp(val, min, max)
+        },
+      })
+    }
+
+    const src = ref(1)
+    const clamped = useClamp(src, 1, 5)
+    watch(src, val => (clamped.value = val))
+
+    const spy = vi.fn()
+    watch(clamped, spy)
+
+    src.value = 2
+    expect(spy).toHaveBeenCalledTimes(1)
+    src.value = 10
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+
+  test('should ensure correct execution order in batch processing', () => {
+    const dummy: number[] = []
+    const n1 = ref(0)
+    const n2 = ref(0)
+    const sum = computed(() => n1.value + n2.value)
+    watch(n1, () => {
+      dummy.push(1)
+      n2.value++
+    })
+    watch(sum, () => dummy.push(2))
+    watch(n1, () => dummy.push(3))
+
+    n1.value++
+
+    expect(dummy).toEqual([1, 2, 3])
+  })
+})
diff --git a/packages/reactivity/package.json b/packages/reactivity/package.json
index 4e297a631..cc02882d0 100644
--- a/packages/reactivity/package.json
+++ b/packages/reactivity/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/reactivity",
-  "version": "3.3.9",
+  "version": "3.5.11",
   "description": "@vue/reactivity",
   "main": "index.js",
   "module": "dist/reactivity.esm-bundler.js",
@@ -11,6 +11,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/reactivity.d.ts",
+      "node": {
+        "production": "./dist/reactivity.cjs.prod.js",
+        "development": "./dist/reactivity.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/reactivity.esm-bundler.js",
+      "import": "./dist/reactivity.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "sideEffects": false,
   "repository": {
     "type": "git",
diff --git a/packages/reactivity/src/arrayInstrumentations.ts b/packages/reactivity/src/arrayInstrumentations.ts
new file mode 100644
index 000000000..e031df4fe
--- /dev/null
+++ b/packages/reactivity/src/arrayInstrumentations.ts
@@ -0,0 +1,328 @@
+import { TrackOpTypes } from './constants'
+import { endBatch, pauseTracking, resetTracking, startBatch } from './effect'
+import { isProxy, isShallow, toRaw, toReactive } from './reactive'
+import { ARRAY_ITERATE_KEY, track } from './dep'
+import { isArray } from '@vue/shared'
+
+/**
+ * Track array iteration and return:
+ * - if input is reactive: a cloned raw array with reactive values
+ * - if input is non-reactive or shallowReactive: the original raw array
+ */
+export function reactiveReadArray<T>(array: T[]): T[] {
+  const raw = toRaw(array)
+  if (raw === array) return raw
+  track(raw, TrackOpTypes.ITERATE, ARRAY_ITERATE_KEY)
+  return isShallow(array) ? raw : raw.map(toReactive)
+}
+
+/**
+ * Track array iteration and return raw array
+ */
+export function shallowReadArray<T>(arr: T[]): T[] {
+  track((arr = toRaw(arr)), TrackOpTypes.ITERATE, ARRAY_ITERATE_KEY)
+  return arr
+}
+
+export const arrayInstrumentations: Record<string | symbol, Function> = <any>{
+  __proto__: null,
+
+  [Symbol.iterator]() {
+    return iterator(this, Symbol.iterator, toReactive)
+  },
+
+  concat(...args: unknown[]) {
+    return reactiveReadArray(this).concat(
+      ...args.map(x => (isArray(x) ? reactiveReadArray(x) : x)),
+    )
+  },
+
+  entries() {
+    return iterator(this, 'entries', (value: [number, unknown]) => {
+      value[1] = toReactive(value[1])
+      return value
+    })
+  },
+
+  every(
+    fn: (item: unknown, index: number, array: unknown[]) => unknown,
+    thisArg?: unknown,
+  ) {
+    return apply(this, 'every', fn, thisArg, undefined, arguments)
+  },
+
+  filter(
+    fn: (item: unknown, index: number, array: unknown[]) => unknown,
+    thisArg?: unknown,
+  ) {
+    return apply(this, 'filter', fn, thisArg, v => v.map(toReactive), arguments)
+  },
+
+  find(
+    fn: (item: unknown, index: number, array: unknown[]) => boolean,
+    thisArg?: unknown,
+  ) {
+    return apply(this, 'find', fn, thisArg, toReactive, arguments)
+  },
+
+  findIndex(
+    fn: (item: unknown, index: number, array: unknown[]) => boolean,
+    thisArg?: unknown,
+  ) {
+    return apply(this, 'findIndex', fn, thisArg, undefined, arguments)
+  },
+
+  findLast(
+    fn: (item: unknown, index: number, array: unknown[]) => boolean,
+    thisArg?: unknown,
+  ) {
+    return apply(this, 'findLast', fn, thisArg, toReactive, arguments)
+  },
+
+  findLastIndex(
+    fn: (item: unknown, index: number, array: unknown[]) => boolean,
+    thisArg?: unknown,
+  ) {
+    return apply(this, 'findLastIndex', fn, thisArg, undefined, arguments)
+  },
+
+  // flat, flatMap could benefit from ARRAY_ITERATE but are not straight-forward to implement
+
+  forEach(
+    fn: (item: unknown, index: number, array: unknown[]) => unknown,
+    thisArg?: unknown,
+  ) {
+    return apply(this, 'forEach', fn, thisArg, undefined, arguments)
+  },
+
+  includes(...args: unknown[]) {
+    return searchProxy(this, 'includes', args)
+  },
+
+  indexOf(...args: unknown[]) {
+    return searchProxy(this, 'indexOf', args)
+  },
+
+  join(separator?: string) {
+    return reactiveReadArray(this).join(separator)
+  },
+
+  // keys() iterator only reads `length`, no optimisation required
+
+  lastIndexOf(...args: unknown[]) {
+    return searchProxy(this, 'lastIndexOf', args)
+  },
+
+  map(
+    fn: (item: unknown, index: number, array: unknown[]) => unknown,
+    thisArg?: unknown,
+  ) {
+    return apply(this, 'map', fn, thisArg, undefined, arguments)
+  },
+
+  pop() {
+    return noTracking(this, 'pop')
+  },
+
+  push(...args: unknown[]) {
+    return noTracking(this, 'push', args)
+  },
+
+  reduce(
+    fn: (
+      acc: unknown,
+      item: unknown,
+      index: number,
+      array: unknown[],
+    ) => unknown,
+    ...args: unknown[]
+  ) {
+    return reduce(this, 'reduce', fn, args)
+  },
+
+  reduceRight(
+    fn: (
+      acc: unknown,
+      item: unknown,
+      index: number,
+      array: unknown[],
+    ) => unknown,
+    ...args: unknown[]
+  ) {
+    return reduce(this, 'reduceRight', fn, args)
+  },
+
+  shift() {
+    return noTracking(this, 'shift')
+  },
+
+  // slice could use ARRAY_ITERATE but also seems to beg for range tracking
+
+  some(
+    fn: (item: unknown, index: number, array: unknown[]) => unknown,
+    thisArg?: unknown,
+  ) {
+    return apply(this, 'some', fn, thisArg, undefined, arguments)
+  },
+
+  splice(...args: unknown[]) {
+    return noTracking(this, 'splice', args)
+  },
+
+  toReversed() {
+    // @ts-expect-error user code may run in es2016+
+    return reactiveReadArray(this).toReversed()
+  },
+
+  toSorted(comparer?: (a: unknown, b: unknown) => number) {
+    // @ts-expect-error user code may run in es2016+
+    return reactiveReadArray(this).toSorted(comparer)
+  },
+
+  toSpliced(...args: unknown[]) {
+    // @ts-expect-error user code may run in es2016+
+    return (reactiveReadArray(this).toSpliced as any)(...args)
+  },
+
+  unshift(...args: unknown[]) {
+    return noTracking(this, 'unshift', args)
+  },
+
+  values() {
+    return iterator(this, 'values', toReactive)
+  },
+}
+
+// instrument iterators to take ARRAY_ITERATE dependency
+function iterator(
+  self: unknown[],
+  method: keyof Array<unknown>,
+  wrapValue: (value: any) => unknown,
+) {
+  // note that taking ARRAY_ITERATE dependency here is not strictly equivalent
+  // to calling iterate on the proxified array.
+  // creating the iterator does not access any array property:
+  // it is only when .next() is called that length and indexes are accessed.
+  // pushed to the extreme, an iterator could be created in one effect scope,
+  // partially iterated in another, then iterated more in yet another.
+  // given that JS iterator can only be read once, this doesn't seem like
+  // a plausible use-case, so this tracking simplification seems ok.
+  const arr = shallowReadArray(self)
+  const iter = (arr[method] as any)() as IterableIterator<unknown> & {
+    _next: IterableIterator<unknown>['next']
+  }
+  if (arr !== self && !isShallow(self)) {
+    iter._next = iter.next
+    iter.next = () => {
+      const result = iter._next()
+      if (result.value) {
+        result.value = wrapValue(result.value)
+      }
+      return result
+    }
+  }
+  return iter
+}
+
+// in the codebase we enforce es2016, but user code may run in environments
+// higher than that
+type ArrayMethods = keyof Array<any> | 'findLast' | 'findLastIndex'
+
+const arrayProto = Array.prototype
+// instrument functions that read (potentially) all items
+// to take ARRAY_ITERATE dependency
+function apply(
+  self: unknown[],
+  method: ArrayMethods,
+  fn: (item: unknown, index: number, array: unknown[]) => unknown,
+  thisArg?: unknown,
+  wrappedRetFn?: (result: any) => unknown,
+  args?: IArguments,
+) {
+  const arr = shallowReadArray(self)
+  const needsWrap = arr !== self && !isShallow(self)
+  // @ts-expect-error our code is limited to es2016 but user code is not
+  const methodFn = arr[method]
+
+  // #11759
+  // If the method being called is from a user-extended Array, the arguments will be unknown
+  // (unknown order and unknown parameter types). In this case, we skip the shallowReadArray
+  // handling and directly call apply with self.
+  if (methodFn !== arrayProto[method as any]) {
+    const result = methodFn.apply(self, args)
+    return needsWrap ? toReactive(result) : result
+  }
+
+  let wrappedFn = fn
+  if (arr !== self) {
+    if (needsWrap) {
+      wrappedFn = function (this: unknown, item, index) {
+        return fn.call(this, toReactive(item), index, self)
+      }
+    } else if (fn.length > 2) {
+      wrappedFn = function (this: unknown, item, index) {
+        return fn.call(this, item, index, self)
+      }
+    }
+  }
+  const result = methodFn.call(arr, wrappedFn, thisArg)
+  return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result
+}
+
+// instrument reduce and reduceRight to take ARRAY_ITERATE dependency
+function reduce(
+  self: unknown[],
+  method: keyof Array<any>,
+  fn: (acc: unknown, item: unknown, index: number, array: unknown[]) => unknown,
+  args: unknown[],
+) {
+  const arr = shallowReadArray(self)
+  let wrappedFn = fn
+  if (arr !== self) {
+    if (!isShallow(self)) {
+      wrappedFn = function (this: unknown, acc, item, index) {
+        return fn.call(this, acc, toReactive(item), index, self)
+      }
+    } else if (fn.length > 3) {
+      wrappedFn = function (this: unknown, acc, item, index) {
+        return fn.call(this, acc, item, index, self)
+      }
+    }
+  }
+  return (arr[method] as any)(wrappedFn, ...args)
+}
+
+// instrument identity-sensitive methods to account for reactive proxies
+function searchProxy(
+  self: unknown[],
+  method: keyof Array<any>,
+  args: unknown[],
+) {
+  const arr = toRaw(self) as any
+  track(arr, TrackOpTypes.ITERATE, ARRAY_ITERATE_KEY)
+  // we run the method using the original args first (which may be reactive)
+  const res = arr[method](...args)
+
+  // if that didn't work, run it again using raw values.
+  if ((res === -1 || res === false) && isProxy(args[0])) {
+    args[0] = toRaw(args[0])
+    return arr[method](...args)
+  }
+
+  return res
+}
+
+// instrument length-altering mutation methods to avoid length being tracked
+// which leads to infinite loops in some cases (#2137)
+function noTracking(
+  self: unknown[],
+  method: keyof Array<any>,
+  args: unknown[] = [],
+) {
+  pauseTracking()
+  startBatch()
+  const res = (toRaw(self) as any)[method].apply(self, args)
+  endBatch()
+  resetTracking()
+  return res
+}
diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts
index fa7ebbb7d..4155c7088 100644
--- a/packages/reactivity/src/baseHandlers.ts
+++ b/packages/reactivity/src/baseHandlers.ts
@@ -1,132 +1,107 @@
 import {
+  type Target,
+  isReadonly,
+  isShallow,
   reactive,
-  readonly,
-  toRaw,
-  ReactiveFlags,
-  Target,
-  readonlyMap,
   reactiveMap,
+  readonly,
+  readonlyMap,
   shallowReactiveMap,
   shallowReadonlyMap,
-  isReadonly,
-  isShallow
+  toRaw,
 } from './reactive'
-import { TrackOpTypes, TriggerOpTypes } from './operations'
+import { arrayInstrumentations } from './arrayInstrumentations'
+import { ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './constants'
+import { ITERATE_KEY, track, trigger } from './dep'
 import {
-  track,
-  trigger,
-  ITERATE_KEY,
-  pauseTracking,
-  resetTracking
-} from './effect'
-import {
-  isObject,
-  hasOwn,
-  isSymbol,
   hasChanged,
+  hasOwn,
   isArray,
   isIntegerKey,
-  makeMap
+  isObject,
+  isSymbol,
+  makeMap,
 } from '@vue/shared'
 import { isRef } from './ref'
 import { warn } from './warning'
 
-const isNonTrackableKeys = /*#__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`)
+const isNonTrackableKeys = /*@__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`)
 
 const builtInSymbols = new Set(
-  /*#__PURE__*/
+  /*@__PURE__*/
   Object.getOwnPropertyNames(Symbol)
     // ios10.x Object.getOwnPropertyNames(Symbol) can enumerate 'arguments' and 'caller'
     // but accessing them on Symbol leads to TypeError because Symbol is a strict mode
     // function
     .filter(key => key !== 'arguments' && key !== 'caller')
-    .map(key => (Symbol as any)[key])
-    .filter(isSymbol)
+    .map(key => Symbol[key as keyof SymbolConstructor])
+    .filter(isSymbol),
 )
 
-const arrayInstrumentations = /*#__PURE__*/ createArrayInstrumentations()
-
-function createArrayInstrumentations() {
-  const instrumentations: Record<string, Function> = {}
-  // instrument identity-sensitive Array methods to account for possible reactive
-  // values
-  ;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {
-    instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
-      const arr = toRaw(this) as any
-      for (let i = 0, l = this.length; i < l; i++) {
-        track(arr, TrackOpTypes.GET, i + '')
-      }
-      // we run the method using the original args first (which may be reactive)
-      const res = arr[key](...args)
-      if (res === -1 || res === false) {
-        // if that didn't work, run it again using raw values.
-        return arr[key](...args.map(toRaw))
-      } else {
-        return res
-      }
-    }
-  })
-  // instrument length-altering mutation methods to avoid length being tracked
-  // which leads to infinite loops in some cases (#2137)
-  ;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {
-    instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
-      pauseTracking()
-      const res = (toRaw(this) as any)[key].apply(this, args)
-      resetTracking()
-      return res
-    }
-  })
-  return instrumentations
-}
-
-function hasOwnProperty(this: object, key: string) {
+function hasOwnProperty(this: object, key: unknown) {
+  // #10455 hasOwnProperty may be called with non-string values
+  if (!isSymbol(key)) key = String(key)
   const obj = toRaw(this)
   track(obj, TrackOpTypes.HAS, key)
-  return obj.hasOwnProperty(key)
+  return obj.hasOwnProperty(key as string)
 }
 
 class BaseReactiveHandler implements ProxyHandler<Target> {
   constructor(
     protected readonly _isReadonly = false,
-    protected readonly _shallow = false
+    protected readonly _isShallow = false,
   ) {}
 
-  get(target: Target, key: string | symbol, receiver: object) {
+  get(target: Target, key: string | symbol, receiver: object): any {
     const isReadonly = this._isReadonly,
-      shallow = this._shallow
+      isShallow = this._isShallow
     if (key === ReactiveFlags.IS_REACTIVE) {
       return !isReadonly
     } else if (key === ReactiveFlags.IS_READONLY) {
       return isReadonly
     } else if (key === ReactiveFlags.IS_SHALLOW) {
-      return shallow
-    } else if (
-      key === ReactiveFlags.RAW &&
-      receiver ===
-        (isReadonly
-          ? shallow
-            ? shallowReadonlyMap
-            : readonlyMap
-          : shallow
-            ? shallowReactiveMap
-            : reactiveMap
-        ).get(target)
-    ) {
-      return target
+      return isShallow
+    } else if (key === ReactiveFlags.RAW) {
+      if (
+        receiver ===
+          (isReadonly
+            ? isShallow
+              ? shallowReadonlyMap
+              : readonlyMap
+            : isShallow
+              ? shallowReactiveMap
+              : reactiveMap
+          ).get(target) ||
+        // receiver is not the reactive proxy, but has the same prototype
+        // this means the receiver is a user proxy of the reactive proxy
+        Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)
+      ) {
+        return target
+      }
+      // early return undefined
+      return
     }
 
     const targetIsArray = isArray(target)
 
     if (!isReadonly) {
-      if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
-        return Reflect.get(arrayInstrumentations, key, receiver)
+      let fn: Function | undefined
+      if (targetIsArray && (fn = arrayInstrumentations[key])) {
+        return fn
       }
       if (key === 'hasOwnProperty') {
         return hasOwnProperty
       }
     }
 
-    const res = Reflect.get(target, key, receiver)
+    const res = Reflect.get(
+      target,
+      key,
+      // if this is a proxy wrapping a ref, return methods using the raw ref
+      // as receiver so that we don't have to call `toRaw` on the ref in all
+      // its class methods
+      isRef(target) ? target : receiver,
+    )
 
     if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
       return res
@@ -136,7 +111,7 @@ class BaseReactiveHandler implements ProxyHandler<Target> {
       track(target, TrackOpTypes.GET, key)
     }
 
-    if (shallow) {
+    if (isShallow) {
       return res
     }
 
@@ -157,28 +132,30 @@ class BaseReactiveHandler implements ProxyHandler<Target> {
 }
 
 class MutableReactiveHandler extends BaseReactiveHandler {
-  constructor(shallow = false) {
-    super(false, shallow)
+  constructor(isShallow = false) {
+    super(false, isShallow)
   }
 
   set(
-    target: object,
+    target: Record<string | symbol, unknown>,
     key: string | symbol,
     value: unknown,
-    receiver: object
+    receiver: object,
   ): boolean {
-    let oldValue = (target as any)[key]
-    if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
-      return false
-    }
-    if (!this._shallow) {
+    let oldValue = target[key]
+    if (!this._isShallow) {
+      const isOldValueReadonly = isReadonly(oldValue)
       if (!isShallow(value) && !isReadonly(value)) {
         oldValue = toRaw(oldValue)
         value = toRaw(value)
       }
       if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
-        oldValue.value = value
-        return true
+        if (isOldValueReadonly) {
+          return false
+        } else {
+          oldValue.value = value
+          return true
+        }
       }
     } else {
       // in shallow mode, objects are set as-is regardless of reactive or not
@@ -188,7 +165,12 @@ class MutableReactiveHandler extends BaseReactiveHandler {
       isArray(target) && isIntegerKey(key)
         ? Number(key) < target.length
         : hasOwn(target, key)
-    const result = Reflect.set(target, key, value, receiver)
+    const result = Reflect.set(
+      target,
+      key,
+      value,
+      isRef(target) ? target : receiver,
+    )
     // don't trigger if target is something up in the prototype chain of original
     if (target === toRaw(receiver)) {
       if (!hadKey) {
@@ -200,9 +182,12 @@ class MutableReactiveHandler extends BaseReactiveHandler {
     return result
   }
 
-  deleteProperty(target: object, key: string | symbol): boolean {
+  deleteProperty(
+    target: Record<string | symbol, unknown>,
+    key: string | symbol,
+  ): boolean {
     const hadKey = hasOwn(target, key)
-    const oldValue = (target as any)[key]
+    const oldValue = target[key]
     const result = Reflect.deleteProperty(target, key)
     if (result && hadKey) {
       trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
@@ -210,33 +195,34 @@ class MutableReactiveHandler extends BaseReactiveHandler {
     return result
   }
 
-  has(target: object, key: string | symbol): boolean {
+  has(target: Record<string | symbol, unknown>, key: string | symbol): boolean {
     const result = Reflect.has(target, key)
     if (!isSymbol(key) || !builtInSymbols.has(key)) {
       track(target, TrackOpTypes.HAS, key)
     }
     return result
   }
-  ownKeys(target: object): (string | symbol)[] {
+
+  ownKeys(target: Record<string | symbol, unknown>): (string | symbol)[] {
     track(
       target,
       TrackOpTypes.ITERATE,
-      isArray(target) ? 'length' : ITERATE_KEY
+      isArray(target) ? 'length' : ITERATE_KEY,
     )
     return Reflect.ownKeys(target)
   }
 }
 
 class ReadonlyReactiveHandler extends BaseReactiveHandler {
-  constructor(shallow = false) {
-    super(true, shallow)
+  constructor(isShallow = false) {
+    super(true, isShallow)
   }
 
   set(target: object, key: string | symbol) {
     if (__DEV__) {
       warn(
         `Set operation on key "${String(key)}" failed: target is readonly.`,
-        target
+        target,
       )
     }
     return true
@@ -246,7 +232,7 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
     if (__DEV__) {
       warn(
         `Delete operation on key "${String(key)}" failed: target is readonly.`,
-        target
+        target,
       )
     }
     return true
@@ -254,17 +240,16 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
 }
 
 export const mutableHandlers: ProxyHandler<object> =
-  /*#__PURE__*/ new MutableReactiveHandler()
+  /*@__PURE__*/ new MutableReactiveHandler()
 
 export const readonlyHandlers: ProxyHandler<object> =
-  /*#__PURE__*/ new ReadonlyReactiveHandler()
+  /*@__PURE__*/ new ReadonlyReactiveHandler()
 
-export const shallowReactiveHandlers = /*#__PURE__*/ new MutableReactiveHandler(
-  true
-)
+export const shallowReactiveHandlers: MutableReactiveHandler =
+  /*@__PURE__*/ new MutableReactiveHandler(true)
 
 // Props handlers are special in the sense that it should not unwrap top-level
 // refs (in order to allow refs to be explicitly passed down), but should
 // retain the reactivity of the normal readonly object.
-export const shallowReadonlyHandlers =
-  /*#__PURE__*/ new ReadonlyReactiveHandler(true)
+export const shallowReadonlyHandlers: ReadonlyReactiveHandler =
+  /*@__PURE__*/ new ReadonlyReactiveHandler(true)
diff --git a/packages/reactivity/src/collectionHandlers.ts b/packages/reactivity/src/collectionHandlers.ts
index abf623f55..cf8ceae1b 100644
--- a/packages/reactivity/src/collectionHandlers.ts
+++ b/packages/reactivity/src/collectionHandlers.ts
@@ -1,14 +1,22 @@
-import { toRaw, ReactiveFlags, toReactive, toReadonly } from './reactive'
-import { track, trigger, ITERATE_KEY, MAP_KEY_ITERATE_KEY } from './effect'
-import { TrackOpTypes, TriggerOpTypes } from './operations'
-import { capitalize, hasOwn, hasChanged, toRawType, isMap } from '@vue/shared'
+import {
+  type Target,
+  isReadonly,
+  isShallow,
+  toRaw,
+  toReactive,
+  toReadonly,
+} from './reactive'
+import { ITERATE_KEY, MAP_KEY_ITERATE_KEY, track, trigger } from './dep'
+import { ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './constants'
+import { capitalize, hasChanged, hasOwn, isMap, toRawType } from '@vue/shared'
+import { warn } from './warning'
 
 type CollectionTypes = IterableCollections | WeakCollections
 
-type IterableCollections = Map<any, any> | Set<any>
-type WeakCollections = WeakMap<any, any> | WeakSet<any>
-type MapTypes = Map<any, any> | WeakMap<any, any>
-type SetTypes = Set<any> | WeakSet<any>
+type IterableCollections = (Map<any, any> | Set<any>) & Target
+type WeakCollections = (WeakMap<any, any> | WeakSet<any>) & Target
+type MapTypes = (Map<any, any> | WeakMap<any, any>) & Target
+type SetTypes = (Set<any> | WeakSet<any>) & Target
 
 const toShallow = <T extends unknown>(value: T): T => value
 
@@ -19,11 +27,11 @@ function get(
   target: MapTypes,
   key: unknown,
   isReadonly = false,
-  isShallow = false
+  isShallow = false,
 ) {
   // #1772: readonly(reactive(Map)) should return readonly + reactive version
   // of the value
-  target = (target as any)[ReactiveFlags.RAW]
+  target = target[ReactiveFlags.RAW]
   const rawTarget = toRaw(target)
   const rawKey = toRaw(key)
   if (!isReadonly) {
@@ -46,7 +54,7 @@ function get(
 }
 
 function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean {
-  const target = (this as any)[ReactiveFlags.RAW]
+  const target = this[ReactiveFlags.RAW]
   const rawTarget = toRaw(target)
   const rawKey = toRaw(key)
   if (!isReadonly) {
@@ -61,13 +69,15 @@ function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean {
 }
 
 function size(target: IterableCollections, isReadonly = false) {
-  target = (target as any)[ReactiveFlags.RAW]
+  target = target[ReactiveFlags.RAW]
   !isReadonly && track(toRaw(target), TrackOpTypes.ITERATE, ITERATE_KEY)
   return Reflect.get(target, 'size', target)
 }
 
-function add(this: SetTypes, value: unknown) {
-  value = toRaw(value)
+function add(this: SetTypes, value: unknown, _isShallow = false) {
+  if (!_isShallow && !isShallow(value) && !isReadonly(value)) {
+    value = toRaw(value)
+  }
   const target = toRaw(this)
   const proto = getProto(target)
   const hadKey = proto.has.call(target, value)
@@ -78,8 +88,10 @@ function add(this: SetTypes, value: unknown) {
   return this
 }
 
-function set(this: MapTypes, key: unknown, value: unknown) {
-  value = toRaw(value)
+function set(this: MapTypes, key: unknown, value: unknown, _isShallow = false) {
+  if (!_isShallow && !isShallow(value) && !isReadonly(value)) {
+    value = toRaw(value)
+  }
   const target = toRaw(this)
   const { has, get } = getProto(target)
 
@@ -141,9 +153,9 @@ function createForEach(isReadonly: boolean, isShallow: boolean) {
   return function forEach(
     this: IterableCollections,
     callback: Function,
-    thisArg?: unknown
+    thisArg?: unknown,
   ) {
-    const observed = this as any
+    const observed = this
     const target = observed[ReactiveFlags.RAW]
     const rawTarget = toRaw(target)
     const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
@@ -157,29 +169,16 @@ function createForEach(isReadonly: boolean, isShallow: boolean) {
   }
 }
 
-interface Iterable {
-  [Symbol.iterator](): Iterator
-}
-
-interface Iterator {
-  next(value?: any): IterationResult
-}
-
-interface IterationResult {
-  value: any
-  done: boolean
-}
-
 function createIterableMethod(
   method: string | symbol,
   isReadonly: boolean,
-  isShallow: boolean
+  isShallow: boolean,
 ) {
   return function (
     this: IterableCollections,
     ...args: unknown[]
-  ): Iterable & Iterator {
-    const target = (this as any)[ReactiveFlags.RAW]
+  ): Iterable<unknown> & Iterator<unknown> {
+    const target = this[ReactiveFlags.RAW]
     const rawTarget = toRaw(target)
     const targetIsMap = isMap(rawTarget)
     const isPair =
@@ -191,7 +190,7 @@ function createIterableMethod(
       track(
         rawTarget,
         TrackOpTypes.ITERATE,
-        isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY
+        isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY,
       )
     // return a wrapped iterator which returns observed versions of the
     // values emitted from the real iterator
@@ -203,13 +202,13 @@ function createIterableMethod(
           ? { value, done }
           : {
               value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
-              done
+              done,
             }
       },
       // iterable protocol
       [Symbol.iterator]() {
         return this
-      }
+      },
     }
   }
 }
@@ -218,9 +217,9 @@ function createReadonlyMethod(type: TriggerOpTypes): Function {
   return function (this: CollectionTypes, ...args: unknown[]) {
     if (__DEV__) {
       const key = args[0] ? `on key "${args[0]}" ` : ``
-      console.warn(
+      warn(
         `${capitalize(type)} operation ${key}failed: target is readonly.`,
-        toRaw(this)
+        toRaw(this),
       )
     }
     return type === TriggerOpTypes.DELETE
@@ -231,8 +230,10 @@ function createReadonlyMethod(type: TriggerOpTypes): Function {
   }
 }
 
+type Instrumentations = Record<string | symbol, Function | number>
+
 function createInstrumentations() {
-  const mutableInstrumentations: Record<string, Function | number> = {
+  const mutableInstrumentations: Instrumentations = {
     get(this: MapTypes, key: unknown) {
       return get(this, key)
     },
@@ -244,10 +245,10 @@ function createInstrumentations() {
     set,
     delete: deleteEntry,
     clear,
-    forEach: createForEach(false, false)
+    forEach: createForEach(false, false),
   }
 
-  const shallowInstrumentations: Record<string, Function | number> = {
+  const shallowInstrumentations: Instrumentations = {
     get(this: MapTypes, key: unknown) {
       return get(this, key, false, true)
     },
@@ -255,14 +256,18 @@ function createInstrumentations() {
       return size(this as unknown as IterableCollections)
     },
     has,
-    add,
-    set,
+    add(this: SetTypes, value: unknown) {
+      return add.call(this, value, true)
+    },
+    set(this: MapTypes, key: unknown, value: unknown) {
+      return set.call(this, key, value, true)
+    },
     delete: deleteEntry,
     clear,
-    forEach: createForEach(false, true)
+    forEach: createForEach(false, true),
   }
 
-  const readonlyInstrumentations: Record<string, Function | number> = {
+  const readonlyInstrumentations: Instrumentations = {
     get(this: MapTypes, key: unknown) {
       return get(this, key, true)
     },
@@ -276,10 +281,10 @@ function createInstrumentations() {
     set: createReadonlyMethod(TriggerOpTypes.SET),
     delete: createReadonlyMethod(TriggerOpTypes.DELETE),
     clear: createReadonlyMethod(TriggerOpTypes.CLEAR),
-    forEach: createForEach(true, false)
+    forEach: createForEach(true, false),
   }
 
-  const shallowReadonlyInstrumentations: Record<string, Function | number> = {
+  const shallowReadonlyInstrumentations: Instrumentations = {
     get(this: MapTypes, key: unknown) {
       return get(this, key, true, true)
     },
@@ -293,30 +298,24 @@ function createInstrumentations() {
     set: createReadonlyMethod(TriggerOpTypes.SET),
     delete: createReadonlyMethod(TriggerOpTypes.DELETE),
     clear: createReadonlyMethod(TriggerOpTypes.CLEAR),
-    forEach: createForEach(true, true)
+    forEach: createForEach(true, true),
   }
 
-  const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]
+  const iteratorMethods = [
+    'keys',
+    'values',
+    'entries',
+    Symbol.iterator,
+  ] as const
+
   iteratorMethods.forEach(method => {
-    mutableInstrumentations[method as string] = createIterableMethod(
-      method,
-      false,
-      false
-    )
-    readonlyInstrumentations[method as string] = createIterableMethod(
+    mutableInstrumentations[method] = createIterableMethod(method, false, false)
+    readonlyInstrumentations[method] = createIterableMethod(method, true, false)
+    shallowInstrumentations[method] = createIterableMethod(method, false, true)
+    shallowReadonlyInstrumentations[method] = createIterableMethod(
       method,
       true,
-      false
-    )
-    shallowInstrumentations[method as string] = createIterableMethod(
-      method,
-      false,
-      true
-    )
-    shallowReadonlyInstrumentations[method as string] = createIterableMethod(
-      method,
       true,
-      true
     )
   })
 
@@ -324,7 +323,7 @@ function createInstrumentations() {
     mutableInstrumentations,
     readonlyInstrumentations,
     shallowInstrumentations,
-    shallowReadonlyInstrumentations
+    shallowReadonlyInstrumentations,
   ]
 }
 
@@ -332,8 +331,8 @@ const [
   mutableInstrumentations,
   readonlyInstrumentations,
   shallowInstrumentations,
-  shallowReadonlyInstrumentations
-] = /* #__PURE__*/ createInstrumentations()
+  shallowReadonlyInstrumentations,
+] = /* @__PURE__*/ createInstrumentations()
 
 function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
   const instrumentations = shallow
@@ -347,7 +346,7 @@ function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
   return (
     target: CollectionTypes,
     key: string | symbol,
-    receiver: CollectionTypes
+    receiver: CollectionTypes,
   ) => {
     if (key === ReactiveFlags.IS_REACTIVE) {
       return !isReadonly
@@ -362,42 +361,42 @@ function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
         ? instrumentations
         : target,
       key,
-      receiver
+      receiver,
     )
   }
 }
 
 export const mutableCollectionHandlers: ProxyHandler<CollectionTypes> = {
-  get: /*#__PURE__*/ createInstrumentationGetter(false, false)
+  get: /*@__PURE__*/ createInstrumentationGetter(false, false),
 }
 
 export const shallowCollectionHandlers: ProxyHandler<CollectionTypes> = {
-  get: /*#__PURE__*/ createInstrumentationGetter(false, true)
+  get: /*@__PURE__*/ createInstrumentationGetter(false, true),
 }
 
 export const readonlyCollectionHandlers: ProxyHandler<CollectionTypes> = {
-  get: /*#__PURE__*/ createInstrumentationGetter(true, false)
+  get: /*@__PURE__*/ createInstrumentationGetter(true, false),
 }
 
 export const shallowReadonlyCollectionHandlers: ProxyHandler<CollectionTypes> =
   {
-    get: /*#__PURE__*/ createInstrumentationGetter(true, true)
+    get: /*@__PURE__*/ createInstrumentationGetter(true, true),
   }
 
 function checkIdentityKeys(
   target: CollectionTypes,
   has: (key: unknown) => boolean,
-  key: unknown
+  key: unknown,
 ) {
   const rawKey = toRaw(key)
   if (rawKey !== key && has.call(target, rawKey)) {
     const type = toRawType(target)
-    console.warn(
+    warn(
       `Reactive ${type} contains both the raw and reactive ` +
         `versions of the same object${type === `Map` ? ` as keys` : ``}, ` +
         `which can lead to inconsistencies. ` +
         `Avoid differentiating between the raw and reactive versions ` +
-        `of an object and only use the reactive version if possible.`
+        `of an object and only use the reactive version if possible.`,
     )
   }
 }
diff --git a/packages/reactivity/src/computed.ts b/packages/reactivity/src/computed.ts
index b24484c9e..ea798e201 100644
--- a/packages/reactivity/src/computed.ts
+++ b/packages/reactivity/src/computed.ts
@@ -1,70 +1,155 @@
-import { DebuggerOptions, ReactiveEffect } from './effect'
-import { Ref, trackRefValue, triggerRefValue } from './ref'
-import { isFunction, NOOP } from '@vue/shared'
-import { ReactiveFlags, toRaw } from './reactive'
-import { Dep } from './dep'
+import { isFunction } from '@vue/shared'
+import {
+  type DebuggerEvent,
+  type DebuggerOptions,
+  EffectFlags,
+  type Subscriber,
+  activeSub,
+  batch,
+  refreshComputed,
+} from './effect'
+import type { Ref } from './ref'
+import { warn } from './warning'
+import { Dep, type Link, globalVersion } from './dep'
+import { ReactiveFlags, TrackOpTypes } from './constants'
 
 declare const ComputedRefSymbol: unique symbol
+declare const WritableComputedRefSymbol: unique symbol
 
-export interface ComputedRef<T = any> extends WritableComputedRef<T> {
-  readonly value: T
+interface BaseComputedRef<T, S = T> extends Ref<T, S> {
   [ComputedRefSymbol]: true
+  /**
+   * @deprecated computed no longer uses effect
+   */
+  effect: ComputedRefImpl
 }
 
-export interface WritableComputedRef<T> extends Ref<T> {
-  readonly effect: ReactiveEffect<T>
+export interface ComputedRef<T = any> extends BaseComputedRef<T> {
+  readonly value: T
 }
 
-export type ComputedGetter<T> = (...args: any[]) => T
-export type ComputedSetter<T> = (v: T) => void
+export interface WritableComputedRef<T, S = T> extends BaseComputedRef<T, S> {
+  [WritableComputedRefSymbol]: true
+}
 
-export interface WritableComputedOptions<T> {
+export type ComputedGetter<T> = (oldValue?: T) => T
+export type ComputedSetter<T> = (newValue: T) => void
+
+export interface WritableComputedOptions<T, S = T> {
   get: ComputedGetter<T>
-  set: ComputedSetter<T>
+  set: ComputedSetter<S>
 }
 
-export class ComputedRefImpl<T> {
-  public dep?: Dep = undefined
+/**
+ * @private exported by @vue/reactivity for Vue core use, but not exported from
+ * the main vue package
+ */
+export class ComputedRefImpl<T = any> implements Subscriber {
+  /**
+   * @internal
+   */
+  _value: any = undefined
+  /**
+   * @internal
+   */
+  readonly dep: Dep = new Dep(this)
+  /**
+   * @internal
+   */
+  readonly __v_isRef = true
+  // TODO isolatedDeclarations ReactiveFlags.IS_REF
+  /**
+   * @internal
+   */
+  readonly __v_isReadonly: boolean
+  // TODO isolatedDeclarations ReactiveFlags.IS_READONLY
+  // A computed is also a subscriber that tracks other deps
+  /**
+   * @internal
+   */
+  deps?: Link = undefined
+  /**
+   * @internal
+   */
+  depsTail?: Link = undefined
+  /**
+   * @internal
+   */
+  flags: EffectFlags = EffectFlags.DIRTY
+  /**
+   * @internal
+   */
+  globalVersion: number = globalVersion - 1
+  /**
+   * @internal
+   */
+  isSSR: boolean
+  /**
+   * @internal
+   */
+  next?: Subscriber = undefined
 
-  private _value!: T
-  public readonly effect: ReactiveEffect<T>
+  // for backwards compat
+  effect: this = this
+  // dev only
+  onTrack?: (event: DebuggerEvent) => void
+  // dev only
+  onTrigger?: (event: DebuggerEvent) => void
 
-  public readonly __v_isRef = true
-  public readonly [ReactiveFlags.IS_READONLY]: boolean = false
-
-  public _dirty = true
-  public _cacheable: boolean
+  /**
+   * Dev only
+   * @internal
+   */
+  _warnRecursive?: boolean
 
   constructor(
-    getter: ComputedGetter<T>,
-    private readonly _setter: ComputedSetter<T>,
-    isReadonly: boolean,
-    isSSR: boolean
+    public fn: ComputedGetter<T>,
+    private readonly setter: ComputedSetter<T> | undefined,
+    isSSR: boolean,
   ) {
-    this.effect = new ReactiveEffect(getter, () => {
-      if (!this._dirty) {
-        this._dirty = true
-        triggerRefValue(this)
-      }
-    })
-    this.effect.computed = this
-    this.effect.active = this._cacheable = !isSSR
-    this[ReactiveFlags.IS_READONLY] = isReadonly
+    this[ReactiveFlags.IS_READONLY] = !setter
+    this.isSSR = isSSR
   }
 
-  get value() {
-    // the computed ref may get wrapped by other proxies e.g. readonly() #3376
-    const self = toRaw(this)
-    trackRefValue(self)
-    if (self._dirty || !self._cacheable) {
-      self._dirty = false
-      self._value = self.effect.run()!
+  /**
+   * @internal
+   */
+  notify(): true | void {
+    this.flags |= EffectFlags.DIRTY
+    if (
+      !(this.flags & EffectFlags.NOTIFIED) &&
+      // avoid infinite self recursion
+      activeSub !== this
+    ) {
+      batch(this, true)
+      return true
+    } else if (__DEV__) {
+      // TODO warn
     }
-    return self._value
   }
 
-  set value(newValue: T) {
-    this._setter(newValue)
+  get value(): T {
+    const link = __DEV__
+      ? this.dep.track({
+          target: this,
+          type: TrackOpTypes.GET,
+          key: 'value',
+        })
+      : this.dep.track()
+    refreshComputed(this)
+    // sync version after evaluation
+    if (link) {
+      link.version = this.dep.version
+    }
+    return this._value
+  }
+
+  set value(newValue) {
+    if (this.setter) {
+      this.setter(newValue)
+    } else if (__DEV__) {
+      warn('Write operation failed: computed value is readonly')
+    }
   }
 }
 
@@ -103,38 +188,32 @@ export class ComputedRefImpl<T> {
  */
 export function computed<T>(
   getter: ComputedGetter<T>,
-  debugOptions?: DebuggerOptions
+  debugOptions?: DebuggerOptions,
 ): ComputedRef<T>
-export function computed<T>(
-  options: WritableComputedOptions<T>,
-  debugOptions?: DebuggerOptions
-): WritableComputedRef<T>
+export function computed<T, S = T>(
+  options: WritableComputedOptions<T, S>,
+  debugOptions?: DebuggerOptions,
+): WritableComputedRef<T, S>
 export function computed<T>(
   getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
   debugOptions?: DebuggerOptions,
-  isSSR = false
+  isSSR = false,
 ) {
   let getter: ComputedGetter<T>
-  let setter: ComputedSetter<T>
+  let setter: ComputedSetter<T> | undefined
 
-  const onlyGetter = isFunction(getterOrOptions)
-  if (onlyGetter) {
+  if (isFunction(getterOrOptions)) {
     getter = getterOrOptions
-    setter = __DEV__
-      ? () => {
-          console.warn('Write operation failed: computed value is readonly')
-        }
-      : NOOP
   } else {
     getter = getterOrOptions.get
     setter = getterOrOptions.set
   }
 
-  const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR)
+  const cRef = new ComputedRefImpl(getter, setter, isSSR)
 
   if (__DEV__ && debugOptions && !isSSR) {
-    cRef.effect.onTrack = debugOptions.onTrack
-    cRef.effect.onTrigger = debugOptions.onTrigger
+    cRef.onTrack = debugOptions.onTrack
+    cRef.onTrigger = debugOptions.onTrigger
   }
 
   return cRef as any
diff --git a/packages/reactivity/src/constants.ts b/packages/reactivity/src/constants.ts
new file mode 100644
index 000000000..ea10f6aee
--- /dev/null
+++ b/packages/reactivity/src/constants.ts
@@ -0,0 +1,24 @@
+// using literal strings instead of numbers so that it's easier to inspect
+// debugger events
+
+export enum TrackOpTypes {
+  GET = 'get',
+  HAS = 'has',
+  ITERATE = 'iterate',
+}
+
+export enum TriggerOpTypes {
+  SET = 'set',
+  ADD = 'add',
+  DELETE = 'delete',
+  CLEAR = 'clear',
+}
+
+export enum ReactiveFlags {
+  SKIP = '__v_skip',
+  IS_REACTIVE = '__v_isReactive',
+  IS_READONLY = '__v_isReadonly',
+  IS_SHALLOW = '__v_isShallow',
+  RAW = '__v_raw',
+  IS_REF = '__v_isRef',
+}
diff --git a/packages/reactivity/src/deferredComputed.ts b/packages/reactivity/src/deferredComputed.ts
deleted file mode 100644
index a23122046..000000000
--- a/packages/reactivity/src/deferredComputed.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Dep } from './dep'
-import { ReactiveEffect } from './effect'
-import { ComputedGetter, ComputedRef } from './computed'
-import { ReactiveFlags, toRaw } from './reactive'
-import { trackRefValue, triggerRefValue } from './ref'
-
-const tick = /*#__PURE__*/ Promise.resolve()
-const queue: any[] = []
-let queued = false
-
-const scheduler = (fn: any) => {
-  queue.push(fn)
-  if (!queued) {
-    queued = true
-    tick.then(flush)
-  }
-}
-
-const flush = () => {
-  for (let i = 0; i < queue.length; i++) {
-    queue[i]()
-  }
-  queue.length = 0
-  queued = false
-}
-
-class DeferredComputedRefImpl<T> {
-  public dep?: Dep = undefined
-
-  private _value!: T
-  private _dirty = true
-  public readonly effect: ReactiveEffect<T>
-
-  public readonly __v_isRef = true
-  public readonly [ReactiveFlags.IS_READONLY] = true
-
-  constructor(getter: ComputedGetter<T>) {
-    let compareTarget: any
-    let hasCompareTarget = false
-    let scheduled = false
-    this.effect = new ReactiveEffect(getter, (computedTrigger?: boolean) => {
-      if (this.dep) {
-        if (computedTrigger) {
-          compareTarget = this._value
-          hasCompareTarget = true
-        } else if (!scheduled) {
-          const valueToCompare = hasCompareTarget ? compareTarget : this._value
-          scheduled = true
-          hasCompareTarget = false
-          scheduler(() => {
-            if (this.effect.active && this._get() !== valueToCompare) {
-              triggerRefValue(this)
-            }
-            scheduled = false
-          })
-        }
-        // chained upstream computeds are notified synchronously to ensure
-        // value invalidation in case of sync access; normal effects are
-        // deferred to be triggered in scheduler.
-        for (const e of this.dep) {
-          if (e.computed instanceof DeferredComputedRefImpl) {
-            e.scheduler!(true /* computedTrigger */)
-          }
-        }
-      }
-      this._dirty = true
-    })
-    this.effect.computed = this as any
-  }
-
-  private _get() {
-    if (this._dirty) {
-      this._dirty = false
-      return (this._value = this.effect.run()!)
-    }
-    return this._value
-  }
-
-  get value() {
-    trackRefValue(this)
-    // the computed ref may get wrapped by other proxies e.g. readonly() #3376
-    return toRaw(this)._get()
-  }
-}
-
-export function deferredComputed<T>(getter: () => T): ComputedRef<T> {
-  return new DeferredComputedRefImpl(getter) as any
-}
diff --git a/packages/reactivity/src/dep.ts b/packages/reactivity/src/dep.ts
index 8677f5757..7e4048743 100644
--- a/packages/reactivity/src/dep.ts
+++ b/packages/reactivity/src/dep.ts
@@ -1,57 +1,391 @@
-import { ReactiveEffect, trackOpBit } from './effect'
-
-export type Dep = Set<ReactiveEffect> & TrackedMarkers
+import { extend, isArray, isIntegerKey, isMap, isSymbol } from '@vue/shared'
+import type { ComputedRefImpl } from './computed'
+import { type TrackOpTypes, TriggerOpTypes } from './constants'
+import {
+  type DebuggerEventExtraInfo,
+  EffectFlags,
+  type Subscriber,
+  activeSub,
+  endBatch,
+  shouldTrack,
+  startBatch,
+} from './effect'
 
 /**
- * wasTracked and newTracked maintain the status for several levels of effect
- * tracking recursion. One bit per level is used to define whether the dependency
- * was/is tracked.
+ * Incremented every time a reactive change happens
+ * This is used to give computed a fast path to avoid re-compute when nothing
+ * has changed.
  */
-type TrackedMarkers = {
+export let globalVersion = 0
+
+/**
+ * Represents a link between a source (Dep) and a subscriber (Effect or Computed).
+ * Deps and subs have a many-to-many relationship - each link between a
+ * dep and a sub is represented by a Link instance.
+ *
+ * A Link is also a node in two doubly-linked lists - one for the associated
+ * sub to track all its deps, and one for the associated dep to track all its
+ * subs.
+ *
+ * @internal
+ */
+export class Link {
   /**
-   * wasTracked
+   * - Before each effect run, all previous dep links' version are reset to -1
+   * - During the run, a link's version is synced with the source dep on access
+   * - After the run, links with version -1 (that were never used) are cleaned
+   *   up
    */
-  w: number
+  version: number
+
   /**
-   * newTracked
+   * Pointers for doubly-linked lists
    */
-  n: number
-}
+  nextDep?: Link
+  prevDep?: Link
+  nextSub?: Link
+  prevSub?: Link
+  prevActiveLink?: Link
 
-export const createDep = (effects?: ReactiveEffect[]): Dep => {
-  const dep = new Set<ReactiveEffect>(effects) as Dep
-  dep.w = 0
-  dep.n = 0
-  return dep
-}
-
-export const wasTracked = (dep: Dep): boolean => (dep.w & trackOpBit) > 0
-
-export const newTracked = (dep: Dep): boolean => (dep.n & trackOpBit) > 0
-
-export const initDepMarkers = ({ deps }: ReactiveEffect) => {
-  if (deps.length) {
-    for (let i = 0; i < deps.length; i++) {
-      deps[i].w |= trackOpBit // set was tracked
-    }
+  constructor(
+    public sub: Subscriber,
+    public dep: Dep,
+  ) {
+    this.version = dep.version
+    this.nextDep =
+      this.prevDep =
+      this.nextSub =
+      this.prevSub =
+      this.prevActiveLink =
+        undefined
   }
 }
 
-export const finalizeDepMarkers = (effect: ReactiveEffect) => {
-  const { deps } = effect
-  if (deps.length) {
-    let ptr = 0
-    for (let i = 0; i < deps.length; i++) {
-      const dep = deps[i]
-      if (wasTracked(dep) && !newTracked(dep)) {
-        dep.delete(effect)
+/**
+ * @internal
+ */
+export class Dep {
+  version = 0
+  /**
+   * Link between this dep and the current active effect
+   */
+  activeLink?: Link = undefined
+
+  /**
+   * Doubly linked list representing the subscribing effects (tail)
+   */
+  subs?: Link = undefined
+
+  /**
+   * Doubly linked list representing the subscribing effects (head)
+   * DEV only, for invoking onTrigger hooks in correct order
+   */
+  subsHead?: Link
+
+  /**
+   * For object property deps cleanup
+   */
+  map?: KeyToDepMap = undefined
+  key?: unknown = undefined
+
+  /**
+   * Subscriber counter
+   */
+  sc: number = 0
+
+  constructor(public computed?: ComputedRefImpl | undefined) {
+    if (__DEV__) {
+      this.subsHead = undefined
+    }
+  }
+
+  track(debugInfo?: DebuggerEventExtraInfo): Link | undefined {
+    if (!activeSub || !shouldTrack || activeSub === this.computed) {
+      return
+    }
+
+    let link = this.activeLink
+    if (link === undefined || link.sub !== activeSub) {
+      link = this.activeLink = new Link(activeSub, this)
+
+      // add the link to the activeEffect as a dep (as tail)
+      if (!activeSub.deps) {
+        activeSub.deps = activeSub.depsTail = link
       } else {
-        deps[ptr++] = dep
+        link.prevDep = activeSub.depsTail
+        activeSub.depsTail!.nextDep = link
+        activeSub.depsTail = link
+      }
+
+      addSub(link)
+    } else if (link.version === -1) {
+      // reused from last run - already a sub, just sync version
+      link.version = this.version
+
+      // If this dep has a next, it means it's not at the tail - move it to the
+      // tail. This ensures the effect's dep list is in the order they are
+      // accessed during evaluation.
+      if (link.nextDep) {
+        const next = link.nextDep
+        next.prevDep = link.prevDep
+        if (link.prevDep) {
+          link.prevDep.nextDep = next
+        }
+
+        link.prevDep = activeSub.depsTail
+        link.nextDep = undefined
+        activeSub.depsTail!.nextDep = link
+        activeSub.depsTail = link
+
+        // this was the head - point to the new head
+        if (activeSub.deps === link) {
+          activeSub.deps = next
+        }
       }
-      // clear bits
-      dep.w &= ~trackOpBit
-      dep.n &= ~trackOpBit
     }
-    deps.length = ptr
+
+    if (__DEV__ && activeSub.onTrack) {
+      activeSub.onTrack(
+        extend(
+          {
+            effect: activeSub,
+          },
+          debugInfo,
+        ),
+      )
+    }
+
+    return link
+  }
+
+  trigger(debugInfo?: DebuggerEventExtraInfo): void {
+    this.version++
+    globalVersion++
+    this.notify(debugInfo)
+  }
+
+  notify(debugInfo?: DebuggerEventExtraInfo): void {
+    startBatch()
+    try {
+      if (__DEV__) {
+        // subs are notified and batched in reverse-order and then invoked in
+        // original order at the end of the batch, but onTrigger hooks should
+        // be invoked in original order here.
+        for (let head = this.subsHead; head; head = head.nextSub) {
+          if (head.sub.onTrigger && !(head.sub.flags & EffectFlags.NOTIFIED)) {
+            head.sub.onTrigger(
+              extend(
+                {
+                  effect: head.sub,
+                },
+                debugInfo,
+              ),
+            )
+          }
+        }
+      }
+      for (let link = this.subs; link; link = link.prevSub) {
+        if (link.sub.notify()) {
+          // if notify() returns `true`, this is a computed. Also call notify
+          // on its dep - it's called here instead of inside computed's notify
+          // in order to reduce call stack depth.
+          ;(link.sub as ComputedRefImpl).dep.notify()
+        }
+      }
+    } finally {
+      endBatch()
+    }
   }
 }
+
+function addSub(link: Link) {
+  link.dep.sc++
+  if (link.sub.flags & EffectFlags.TRACKING) {
+    const computed = link.dep.computed
+    // computed getting its first subscriber
+    // enable tracking + lazily subscribe to all its deps
+    if (computed && !link.dep.subs) {
+      computed.flags |= EffectFlags.TRACKING | EffectFlags.DIRTY
+      for (let l = computed.deps; l; l = l.nextDep) {
+        addSub(l)
+      }
+    }
+
+    const currentTail = link.dep.subs
+    if (currentTail !== link) {
+      link.prevSub = currentTail
+      if (currentTail) currentTail.nextSub = link
+    }
+
+    if (__DEV__ && link.dep.subsHead === undefined) {
+      link.dep.subsHead = link
+    }
+
+    link.dep.subs = link
+  }
+}
+
+// The main WeakMap that stores {target -> key -> dep} connections.
+// Conceptually, it's easier to think of a dependency as a Dep class
+// which maintains a Set of subscribers, but we simply store them as
+// raw Maps to reduce memory overhead.
+type KeyToDepMap = Map<any, Dep>
+
+export const targetMap: WeakMap<object, KeyToDepMap> = new WeakMap()
+
+export const ITERATE_KEY: unique symbol = Symbol(
+  __DEV__ ? 'Object iterate' : '',
+)
+export const MAP_KEY_ITERATE_KEY: unique symbol = Symbol(
+  __DEV__ ? 'Map keys iterate' : '',
+)
+export const ARRAY_ITERATE_KEY: unique symbol = Symbol(
+  __DEV__ ? 'Array iterate' : '',
+)
+
+/**
+ * Tracks access to a reactive property.
+ *
+ * This will check which effect is running at the moment and record it as dep
+ * which records all effects that depend on the reactive property.
+ *
+ * @param target - Object holding the reactive property.
+ * @param type - Defines the type of access to the reactive property.
+ * @param key - Identifier of the reactive property to track.
+ */
+export function track(target: object, type: TrackOpTypes, key: unknown): void {
+  if (shouldTrack && activeSub) {
+    let depsMap = targetMap.get(target)
+    if (!depsMap) {
+      targetMap.set(target, (depsMap = new Map()))
+    }
+    let dep = depsMap.get(key)
+    if (!dep) {
+      depsMap.set(key, (dep = new Dep()))
+      dep.map = depsMap
+      dep.key = key
+    }
+    if (__DEV__) {
+      dep.track({
+        target,
+        type,
+        key,
+      })
+    } else {
+      dep.track()
+    }
+  }
+}
+
+/**
+ * Finds all deps associated with the target (or a specific property) and
+ * triggers the effects stored within.
+ *
+ * @param target - The reactive object.
+ * @param type - Defines the type of the operation that needs to trigger effects.
+ * @param key - Can be used to target a specific reactive property in the target object.
+ */
+export function trigger(
+  target: object,
+  type: TriggerOpTypes,
+  key?: unknown,
+  newValue?: unknown,
+  oldValue?: unknown,
+  oldTarget?: Map<unknown, unknown> | Set<unknown>,
+): void {
+  const depsMap = targetMap.get(target)
+  if (!depsMap) {
+    // never been tracked
+    globalVersion++
+    return
+  }
+
+  const run = (dep: Dep | undefined) => {
+    if (dep) {
+      if (__DEV__) {
+        dep.trigger({
+          target,
+          type,
+          key,
+          newValue,
+          oldValue,
+          oldTarget,
+        })
+      } else {
+        dep.trigger()
+      }
+    }
+  }
+
+  startBatch()
+
+  if (type === TriggerOpTypes.CLEAR) {
+    // collection being cleared
+    // trigger all effects for target
+    depsMap.forEach(run)
+  } else {
+    const targetIsArray = isArray(target)
+    const isArrayIndex = targetIsArray && isIntegerKey(key)
+
+    if (targetIsArray && key === 'length') {
+      const newLength = Number(newValue)
+      depsMap.forEach((dep, key) => {
+        if (
+          key === 'length' ||
+          key === ARRAY_ITERATE_KEY ||
+          (!isSymbol(key) && key >= newLength)
+        ) {
+          run(dep)
+        }
+      })
+    } else {
+      // schedule runs for SET | ADD | DELETE
+      if (key !== void 0) {
+        run(depsMap.get(key))
+      }
+
+      // schedule ARRAY_ITERATE for any numeric key change (length is handled above)
+      if (isArrayIndex) {
+        run(depsMap.get(ARRAY_ITERATE_KEY))
+      }
+
+      // also run for iteration key on ADD | DELETE | Map.SET
+      switch (type) {
+        case TriggerOpTypes.ADD:
+          if (!targetIsArray) {
+            run(depsMap.get(ITERATE_KEY))
+            if (isMap(target)) {
+              run(depsMap.get(MAP_KEY_ITERATE_KEY))
+            }
+          } else if (isArrayIndex) {
+            // new index added to array -> length changes
+            run(depsMap.get('length'))
+          }
+          break
+        case TriggerOpTypes.DELETE:
+          if (!targetIsArray) {
+            run(depsMap.get(ITERATE_KEY))
+            if (isMap(target)) {
+              run(depsMap.get(MAP_KEY_ITERATE_KEY))
+            }
+          }
+          break
+        case TriggerOpTypes.SET:
+          if (isMap(target)) {
+            run(depsMap.get(ITERATE_KEY))
+          }
+          break
+      }
+    }
+  }
+
+  endBatch()
+}
+
+export function getDepFromReactive(
+  object: any,
+  key: string | number | symbol,
+): Dep | undefined {
+  const depMap = targetMap.get(object)
+  return depMap && depMap.get(key)
+}
diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts
index c982dbd0b..243518839 100644
--- a/packages/reactivity/src/effect.ts
+++ b/packages/reactivity/src/effect.ts
@@ -1,39 +1,14 @@
-import { TrackOpTypes, TriggerOpTypes } from './operations'
-import { extend, isArray, isIntegerKey, isMap, isSymbol } from '@vue/shared'
-import { EffectScope, recordEffectScope } from './effectScope'
-import {
-  createDep,
-  Dep,
-  finalizeDepMarkers,
-  initDepMarkers,
-  newTracked,
-  wasTracked
-} from './dep'
-import { ComputedRefImpl } from './computed'
-
-// The main WeakMap that stores {target -> key -> dep} connections.
-// Conceptually, it's easier to think of a dependency as a Dep class
-// which maintains a Set of subscribers, but we simply store them as
-// raw Sets to reduce memory overhead.
-type KeyToDepMap = Map<any, Dep>
-const targetMap = new WeakMap<object, KeyToDepMap>()
-
-// The number of effects currently being tracked recursively.
-let effectTrackDepth = 0
-
-export let trackOpBit = 1
-
-/**
- * The bitwise track markers support at most 30 levels of recursion.
- * This value is chosen to enable modern JS engines to use a SMI on all platforms.
- * When recursion depth is greater, fall back to using a full cleanup.
- */
-const maxMarkerBits = 30
+import { extend, hasChanged } from '@vue/shared'
+import type { ComputedRefImpl } from './computed'
+import type { TrackOpTypes, TriggerOpTypes } from './constants'
+import { type Link, globalVersion } from './dep'
+import { activeEffectScope } from './effectScope'
+import { warn } from './warning'
 
 export type EffectScheduler = (...args: any[]) => any
 
 export type DebuggerEvent = {
-  effect: ReactiveEffect
+  effect: Subscriber
 } & DebuggerEventExtraInfo
 
 export type DebuggerEventExtraInfo = {
@@ -45,119 +20,13 @@ export type DebuggerEventExtraInfo = {
   oldTarget?: Map<any, any> | Set<any>
 }
 
-export let activeEffect: ReactiveEffect | undefined
-
-export const ITERATE_KEY = Symbol(__DEV__ ? 'iterate' : '')
-export const MAP_KEY_ITERATE_KEY = Symbol(__DEV__ ? 'Map key iterate' : '')
-
-export class ReactiveEffect<T = any> {
-  active = true
-  deps: Dep[] = []
-  parent: ReactiveEffect | undefined = undefined
-
-  /**
-   * Can be attached after creation
-   * @internal
-   */
-  computed?: ComputedRefImpl<T>
-  /**
-   * @internal
-   */
-  allowRecurse?: boolean
-  /**
-   * @internal
-   */
-  private deferStop?: boolean
-
-  onStop?: () => void
-  // dev only
-  onTrack?: (event: DebuggerEvent) => void
-  // dev only
-  onTrigger?: (event: DebuggerEvent) => void
-
-  constructor(
-    public fn: () => T,
-    public scheduler: EffectScheduler | null = null,
-    scope?: EffectScope
-  ) {
-    recordEffectScope(this, scope)
-  }
-
-  run() {
-    if (!this.active) {
-      return this.fn()
-    }
-    let parent: ReactiveEffect | undefined = activeEffect
-    let lastShouldTrack = shouldTrack
-    while (parent) {
-      if (parent === this) {
-        return
-      }
-      parent = parent.parent
-    }
-    try {
-      this.parent = activeEffect
-      activeEffect = this
-      shouldTrack = true
-
-      trackOpBit = 1 << ++effectTrackDepth
-
-      if (effectTrackDepth <= maxMarkerBits) {
-        initDepMarkers(this)
-      } else {
-        cleanupEffect(this)
-      }
-      return this.fn()
-    } finally {
-      if (effectTrackDepth <= maxMarkerBits) {
-        finalizeDepMarkers(this)
-      }
-
-      trackOpBit = 1 << --effectTrackDepth
-
-      activeEffect = this.parent
-      shouldTrack = lastShouldTrack
-      this.parent = undefined
-
-      if (this.deferStop) {
-        this.stop()
-      }
-    }
-  }
-
-  stop() {
-    // stopped while running itself - defer the cleanup
-    if (activeEffect === this) {
-      this.deferStop = true
-    } else if (this.active) {
-      cleanupEffect(this)
-      if (this.onStop) {
-        this.onStop()
-      }
-      this.active = false
-    }
-  }
-}
-
-function cleanupEffect(effect: ReactiveEffect) {
-  const { deps } = effect
-  if (deps.length) {
-    for (let i = 0; i < deps.length; i++) {
-      deps[i].delete(effect)
-    }
-    deps.length = 0
-  }
-}
-
 export interface DebuggerOptions {
   onTrack?: (event: DebuggerEvent) => void
   onTrigger?: (event: DebuggerEvent) => void
 }
 
 export interface ReactiveEffectOptions extends DebuggerOptions {
-  lazy?: boolean
   scheduler?: EffectScheduler
-  scope?: EffectScope
   allowRecurse?: boolean
   onStop?: () => void
 }
@@ -167,34 +36,462 @@ export interface ReactiveEffectRunner<T = any> {
   effect: ReactiveEffect
 }
 
+export let activeSub: Subscriber | undefined
+
+export enum EffectFlags {
+  /**
+   * ReactiveEffect only
+   */
+  ACTIVE = 1 << 0,
+  RUNNING = 1 << 1,
+  TRACKING = 1 << 2,
+  NOTIFIED = 1 << 3,
+  DIRTY = 1 << 4,
+  ALLOW_RECURSE = 1 << 5,
+  PAUSED = 1 << 6,
+}
+
 /**
- * Registers the given function to track reactive updates.
- *
- * The given function will be run once immediately. Every time any reactive
- * property that's accessed within it gets updated, the function will run again.
- *
- * @param fn - The function that will track reactive updates.
- * @param options - Allows to control the effect's behaviour.
- * @returns A runner that can be used to control the effect after creation.
+ * Subscriber is a type that tracks (or subscribes to) a list of deps.
  */
+export interface Subscriber extends DebuggerOptions {
+  /**
+   * Head of the doubly linked list representing the deps
+   * @internal
+   */
+  deps?: Link
+  /**
+   * Tail of the same list
+   * @internal
+   */
+  depsTail?: Link
+  /**
+   * @internal
+   */
+  flags: EffectFlags
+  /**
+   * @internal
+   */
+  next?: Subscriber
+  /**
+   * returning `true` indicates it's a computed that needs to call notify
+   * on its dep too
+   * @internal
+   */
+  notify(): true | void
+}
+
+const pausedQueueEffects = new WeakSet<ReactiveEffect>()
+
+export class ReactiveEffect<T = any>
+  implements Subscriber, ReactiveEffectOptions
+{
+  /**
+   * @internal
+   */
+  deps?: Link = undefined
+  /**
+   * @internal
+   */
+  depsTail?: Link = undefined
+  /**
+   * @internal
+   */
+  flags: EffectFlags = EffectFlags.ACTIVE | EffectFlags.TRACKING
+  /**
+   * @internal
+   */
+  next?: Subscriber = undefined
+  /**
+   * @internal
+   */
+  cleanup?: () => void = undefined
+
+  scheduler?: EffectScheduler = undefined
+  onStop?: () => void
+  onTrack?: (event: DebuggerEvent) => void
+  onTrigger?: (event: DebuggerEvent) => void
+
+  constructor(public fn: () => T) {
+    if (activeEffectScope && activeEffectScope.active) {
+      activeEffectScope.effects.push(this)
+    }
+  }
+
+  pause(): void {
+    this.flags |= EffectFlags.PAUSED
+  }
+
+  resume(): void {
+    if (this.flags & EffectFlags.PAUSED) {
+      this.flags &= ~EffectFlags.PAUSED
+      if (pausedQueueEffects.has(this)) {
+        pausedQueueEffects.delete(this)
+        this.trigger()
+      }
+    }
+  }
+
+  /**
+   * @internal
+   */
+  notify(): void {
+    if (
+      this.flags & EffectFlags.RUNNING &&
+      !(this.flags & EffectFlags.ALLOW_RECURSE)
+    ) {
+      return
+    }
+    if (!(this.flags & EffectFlags.NOTIFIED)) {
+      batch(this)
+    }
+  }
+
+  run(): T {
+    // TODO cleanupEffect
+
+    if (!(this.flags & EffectFlags.ACTIVE)) {
+      // stopped during cleanup
+      return this.fn()
+    }
+
+    this.flags |= EffectFlags.RUNNING
+    cleanupEffect(this)
+    prepareDeps(this)
+    const prevEffect = activeSub
+    const prevShouldTrack = shouldTrack
+    activeSub = this
+    shouldTrack = true
+
+    try {
+      return this.fn()
+    } finally {
+      if (__DEV__ && activeSub !== this) {
+        warn(
+          'Active effect was not restored correctly - ' +
+            'this is likely a Vue internal bug.',
+        )
+      }
+      cleanupDeps(this)
+      activeSub = prevEffect
+      shouldTrack = prevShouldTrack
+      this.flags &= ~EffectFlags.RUNNING
+    }
+  }
+
+  stop(): void {
+    if (this.flags & EffectFlags.ACTIVE) {
+      for (let link = this.deps; link; link = link.nextDep) {
+        removeSub(link)
+      }
+      this.deps = this.depsTail = undefined
+      cleanupEffect(this)
+      this.onStop && this.onStop()
+      this.flags &= ~EffectFlags.ACTIVE
+    }
+  }
+
+  trigger(): void {
+    if (this.flags & EffectFlags.PAUSED) {
+      pausedQueueEffects.add(this)
+    } else if (this.scheduler) {
+      this.scheduler()
+    } else {
+      this.runIfDirty()
+    }
+  }
+
+  /**
+   * @internal
+   */
+  runIfDirty(): void {
+    if (isDirty(this)) {
+      this.run()
+    }
+  }
+
+  get dirty(): boolean {
+    return isDirty(this)
+  }
+}
+
+/**
+ * For debugging
+ */
+// function printDeps(sub: Subscriber) {
+//   let d = sub.deps
+//   let ds = []
+//   while (d) {
+//     ds.push(d)
+//     d = d.nextDep
+//   }
+//   return ds.map(d => ({
+//     id: d.id,
+//     prev: d.prevDep?.id,
+//     next: d.nextDep?.id,
+//   }))
+// }
+
+let batchDepth = 0
+let batchedSub: Subscriber | undefined
+let batchedComputed: Subscriber | undefined
+
+export function batch(sub: Subscriber, isComputed = false): void {
+  sub.flags |= EffectFlags.NOTIFIED
+  if (isComputed) {
+    sub.next = batchedComputed
+    batchedComputed = sub
+    return
+  }
+  sub.next = batchedSub
+  batchedSub = sub
+}
+
+/**
+ * @internal
+ */
+export function startBatch(): void {
+  batchDepth++
+}
+
+/**
+ * Run batched effects when all batches have ended
+ * @internal
+ */
+export function endBatch(): void {
+  if (--batchDepth > 0) {
+    return
+  }
+
+  if (batchedComputed) {
+    let e: Subscriber | undefined = batchedComputed
+    batchedComputed = undefined
+    while (e) {
+      const next: Subscriber | undefined = e.next
+      e.next = undefined
+      e.flags &= ~EffectFlags.NOTIFIED
+      e = next
+    }
+  }
+
+  let error: unknown
+  while (batchedSub) {
+    let e: Subscriber | undefined = batchedSub
+    batchedSub = undefined
+    while (e) {
+      const next: Subscriber | undefined = e.next
+      e.next = undefined
+      e.flags &= ~EffectFlags.NOTIFIED
+      if (e.flags & EffectFlags.ACTIVE) {
+        try {
+          // ACTIVE flag is effect-only
+          ;(e as ReactiveEffect).trigger()
+        } catch (err) {
+          if (!error) error = err
+        }
+      }
+      e = next
+    }
+  }
+
+  if (error) throw error
+}
+
+function prepareDeps(sub: Subscriber) {
+  // Prepare deps for tracking, starting from the head
+  for (let link = sub.deps; link; link = link.nextDep) {
+    // set all previous deps' (if any) version to -1 so that we can track
+    // which ones are unused after the run
+    link.version = -1
+    // store previous active sub if link was being used in another context
+    link.prevActiveLink = link.dep.activeLink
+    link.dep.activeLink = link
+  }
+}
+
+function cleanupDeps(sub: Subscriber) {
+  // Cleanup unsued deps
+  let head
+  let tail = sub.depsTail
+  let link = tail
+  while (link) {
+    const prev = link.prevDep
+    if (link.version === -1) {
+      if (link === tail) tail = prev
+      // unused - remove it from the dep's subscribing effect list
+      removeSub(link)
+      // also remove it from this effect's dep list
+      removeDep(link)
+    } else {
+      // The new head is the last node seen which wasn't removed
+      // from the doubly-linked list
+      head = link
+    }
+
+    // restore previous active link if any
+    link.dep.activeLink = link.prevActiveLink
+    link.prevActiveLink = undefined
+    link = prev
+  }
+  // set the new head & tail
+  sub.deps = head
+  sub.depsTail = tail
+}
+
+function isDirty(sub: Subscriber): boolean {
+  for (let link = sub.deps; link; link = link.nextDep) {
+    if (
+      link.dep.version !== link.version ||
+      (link.dep.computed &&
+        (refreshComputed(link.dep.computed) ||
+          link.dep.version !== link.version))
+    ) {
+      return true
+    }
+  }
+  // @ts-expect-error only for backwards compatibility where libs manually set
+  // this flag - e.g. Pinia's testing module
+  if (sub._dirty) {
+    return true
+  }
+  return false
+}
+
+/**
+ * Returning false indicates the refresh failed
+ * @internal
+ */
+export function refreshComputed(computed: ComputedRefImpl): undefined {
+  if (
+    computed.flags & EffectFlags.TRACKING &&
+    !(computed.flags & EffectFlags.DIRTY)
+  ) {
+    return
+  }
+  computed.flags &= ~EffectFlags.DIRTY
+
+  // Global version fast path when no reactive changes has happened since
+  // last refresh.
+  if (computed.globalVersion === globalVersion) {
+    return
+  }
+  computed.globalVersion = globalVersion
+
+  const dep = computed.dep
+  computed.flags |= EffectFlags.RUNNING
+  // In SSR there will be no render effect, so the computed has no subscriber
+  // and therefore tracks no deps, thus we cannot rely on the dirty check.
+  // Instead, computed always re-evaluate and relies on the globalVersion
+  // fast path above for caching.
+  if (
+    dep.version > 0 &&
+    !computed.isSSR &&
+    computed.deps &&
+    !isDirty(computed)
+  ) {
+    computed.flags &= ~EffectFlags.RUNNING
+    return
+  }
+
+  const prevSub = activeSub
+  const prevShouldTrack = shouldTrack
+  activeSub = computed
+  shouldTrack = true
+
+  try {
+    prepareDeps(computed)
+    const value = computed.fn(computed._value)
+    if (dep.version === 0 || hasChanged(value, computed._value)) {
+      computed._value = value
+      dep.version++
+    }
+  } catch (err) {
+    dep.version++
+    throw err
+  } finally {
+    activeSub = prevSub
+    shouldTrack = prevShouldTrack
+    cleanupDeps(computed)
+    computed.flags &= ~EffectFlags.RUNNING
+  }
+}
+
+function removeSub(link: Link, soft = false) {
+  const { dep, prevSub, nextSub } = link
+  if (prevSub) {
+    prevSub.nextSub = nextSub
+    link.prevSub = undefined
+  }
+  if (nextSub) {
+    nextSub.prevSub = prevSub
+    link.nextSub = undefined
+  }
+  if (dep.subs === link) {
+    // was previous tail, point new tail to prev
+    dep.subs = prevSub
+  }
+  if (__DEV__ && dep.subsHead === link) {
+    // was previous head, point new head to next
+    dep.subsHead = nextSub
+  }
+
+  if (!dep.subs && dep.computed) {
+    // if computed, unsubscribe it from all its deps so this computed and its
+    // value can be GCed
+    dep.computed.flags &= ~EffectFlags.TRACKING
+    for (let l = dep.computed.deps; l; l = l.nextDep) {
+      // here we are only "soft" unsubscribing because the computed still keeps
+      // referencing the deps and the dep should not decrease its sub count
+      removeSub(l, true)
+    }
+  }
+
+  if (!soft && !--dep.sc && dep.map) {
+    // #11979
+    // property dep no longer has effect subscribers, delete it
+    // this mostly is for the case where an object is kept in memory but only a
+    // subset of its properties is tracked at one time
+    dep.map.delete(dep.key)
+  }
+}
+
+function removeDep(link: Link) {
+  const { prevDep, nextDep } = link
+  if (prevDep) {
+    prevDep.nextDep = nextDep
+    link.prevDep = undefined
+  }
+  if (nextDep) {
+    nextDep.prevDep = prevDep
+    link.nextDep = undefined
+  }
+}
+
+export interface ReactiveEffectRunner<T = any> {
+  (): T
+  effect: ReactiveEffect
+}
+
 export function effect<T = any>(
   fn: () => T,
-  options?: ReactiveEffectOptions
-): ReactiveEffectRunner {
+  options?: ReactiveEffectOptions,
+): ReactiveEffectRunner<T> {
   if ((fn as ReactiveEffectRunner).effect instanceof ReactiveEffect) {
     fn = (fn as ReactiveEffectRunner).effect.fn
   }
 
-  const _effect = new ReactiveEffect(fn)
+  const e = new ReactiveEffect(fn)
   if (options) {
-    extend(_effect, options)
-    if (options.scope) recordEffectScope(_effect, options.scope)
+    extend(e, options)
   }
-  if (!options || !options.lazy) {
-    _effect.run()
+  try {
+    e.run()
+  } catch (err) {
+    e.stop()
+    throw err
   }
-  const runner = _effect.run.bind(_effect) as ReactiveEffectRunner
-  runner.effect = _effect
+  const runner = e.run.bind(e) as ReactiveEffectRunner
+  runner.effect = e
   return runner
 }
 
@@ -203,17 +500,20 @@ export function effect<T = any>(
  *
  * @param runner - Association with the effect to stop tracking.
  */
-export function stop(runner: ReactiveEffectRunner) {
+export function stop(runner: ReactiveEffectRunner): void {
   runner.effect.stop()
 }
 
+/**
+ * @internal
+ */
 export let shouldTrack = true
 const trackStack: boolean[] = []
 
 /**
  * Temporarily pauses tracking.
  */
-export function pauseTracking() {
+export function pauseTracking(): void {
   trackStack.push(shouldTrack)
   shouldTrack = false
 }
@@ -221,7 +521,7 @@ export function pauseTracking() {
 /**
  * Re-enables effect tracking (if it was paused).
  */
-export function enableTracking() {
+export function enableTracking(): void {
   trackStack.push(shouldTrack)
   shouldTrack = true
 }
@@ -229,201 +529,45 @@ export function enableTracking() {
 /**
  * Resets the previous global effect tracking state.
  */
-export function resetTracking() {
+export function resetTracking(): void {
   const last = trackStack.pop()
   shouldTrack = last === undefined ? true : last
 }
 
 /**
- * Tracks access to a reactive property.
+ * Registers a cleanup function for the current active effect.
+ * The cleanup function is called right before the next effect run, or when the
+ * effect is stopped.
  *
- * This will check which effect is running at the moment and record it as dep
- * which records all effects that depend on the reactive property.
+ * Throws a warning if there is no current active effect. The warning can be
+ * suppressed by passing `true` to the second argument.
  *
- * @param target - Object holding the reactive property.
- * @param type - Defines the type of access to the reactive property.
- * @param key - Identifier of the reactive property to track.
+ * @param fn - the cleanup function to be registered
+ * @param failSilently - if `true`, will not throw warning when called without
+ * an active effect.
  */
-export function track(target: object, type: TrackOpTypes, key: unknown) {
-  if (shouldTrack && activeEffect) {
-    let depsMap = targetMap.get(target)
-    if (!depsMap) {
-      targetMap.set(target, (depsMap = new Map()))
-    }
-    let dep = depsMap.get(key)
-    if (!dep) {
-      depsMap.set(key, (dep = createDep()))
-    }
-
-    const eventInfo = __DEV__
-      ? { effect: activeEffect, target, type, key }
-      : undefined
-
-    trackEffects(dep, eventInfo)
+export function onEffectCleanup(fn: () => void, failSilently = false): void {
+  if (activeSub instanceof ReactiveEffect) {
+    activeSub.cleanup = fn
+  } else if (__DEV__ && !failSilently) {
+    warn(
+      `onEffectCleanup() was called when there was no active effect` +
+        ` to associate with.`,
+    )
   }
 }
 
-export function trackEffects(
-  dep: Dep,
-  debuggerEventExtraInfo?: DebuggerEventExtraInfo
-) {
-  let shouldTrack = false
-  if (effectTrackDepth <= maxMarkerBits) {
-    if (!newTracked(dep)) {
-      dep.n |= trackOpBit // set newly tracked
-      shouldTrack = !wasTracked(dep)
-    }
-  } else {
-    // Full cleanup mode.
-    shouldTrack = !dep.has(activeEffect!)
-  }
-
-  if (shouldTrack) {
-    dep.add(activeEffect!)
-    activeEffect!.deps.push(dep)
-    if (__DEV__ && activeEffect!.onTrack) {
-      activeEffect!.onTrack(
-        extend(
-          {
-            effect: activeEffect!
-          },
-          debuggerEventExtraInfo!
-        )
-      )
+function cleanupEffect(e: ReactiveEffect) {
+  const { cleanup } = e
+  e.cleanup = undefined
+  if (cleanup) {
+    // run cleanup without active effect
+    const prevSub = activeSub
+    activeSub = undefined
+    try {
+      cleanup()
+    } finally {
+      activeSub = prevSub
     }
   }
 }
-
-/**
- * Finds all deps associated with the target (or a specific property) and
- * triggers the effects stored within.
- *
- * @param target - The reactive object.
- * @param type - Defines the type of the operation that needs to trigger effects.
- * @param key - Can be used to target a specific reactive property in the target object.
- */
-export function trigger(
-  target: object,
-  type: TriggerOpTypes,
-  key?: unknown,
-  newValue?: unknown,
-  oldValue?: unknown,
-  oldTarget?: Map<unknown, unknown> | Set<unknown>
-) {
-  const depsMap = targetMap.get(target)
-  if (!depsMap) {
-    // never been tracked
-    return
-  }
-
-  let deps: (Dep | undefined)[] = []
-  if (type === TriggerOpTypes.CLEAR) {
-    // collection being cleared
-    // trigger all effects for target
-    deps = [...depsMap.values()]
-  } else if (key === 'length' && isArray(target)) {
-    const newLength = Number(newValue)
-    depsMap.forEach((dep, key) => {
-      if (key === 'length' || (!isSymbol(key) && key >= newLength)) {
-        deps.push(dep)
-      }
-    })
-  } else {
-    // schedule runs for SET | ADD | DELETE
-    if (key !== void 0) {
-      deps.push(depsMap.get(key))
-    }
-
-    // also run for iteration key on ADD | DELETE | Map.SET
-    switch (type) {
-      case TriggerOpTypes.ADD:
-        if (!isArray(target)) {
-          deps.push(depsMap.get(ITERATE_KEY))
-          if (isMap(target)) {
-            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
-          }
-        } else if (isIntegerKey(key)) {
-          // new index added to array -> length changes
-          deps.push(depsMap.get('length'))
-        }
-        break
-      case TriggerOpTypes.DELETE:
-        if (!isArray(target)) {
-          deps.push(depsMap.get(ITERATE_KEY))
-          if (isMap(target)) {
-            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
-          }
-        }
-        break
-      case TriggerOpTypes.SET:
-        if (isMap(target)) {
-          deps.push(depsMap.get(ITERATE_KEY))
-        }
-        break
-    }
-  }
-
-  const eventInfo = __DEV__
-    ? { target, type, key, newValue, oldValue, oldTarget }
-    : undefined
-
-  if (deps.length === 1) {
-    if (deps[0]) {
-      if (__DEV__) {
-        triggerEffects(deps[0], eventInfo)
-      } else {
-        triggerEffects(deps[0])
-      }
-    }
-  } else {
-    const effects: ReactiveEffect[] = []
-    for (const dep of deps) {
-      if (dep) {
-        effects.push(...dep)
-      }
-    }
-    if (__DEV__) {
-      triggerEffects(createDep(effects), eventInfo)
-    } else {
-      triggerEffects(createDep(effects))
-    }
-  }
-}
-
-export function triggerEffects(
-  dep: Dep | ReactiveEffect[],
-  debuggerEventExtraInfo?: DebuggerEventExtraInfo
-) {
-  // spread into array for stabilization
-  const effects = isArray(dep) ? dep : [...dep]
-  for (const effect of effects) {
-    if (effect.computed) {
-      triggerEffect(effect, debuggerEventExtraInfo)
-    }
-  }
-  for (const effect of effects) {
-    if (!effect.computed) {
-      triggerEffect(effect, debuggerEventExtraInfo)
-    }
-  }
-}
-
-function triggerEffect(
-  effect: ReactiveEffect,
-  debuggerEventExtraInfo?: DebuggerEventExtraInfo
-) {
-  if (effect !== activeEffect || effect.allowRecurse) {
-    if (__DEV__ && effect.onTrigger) {
-      effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
-    }
-    if (effect.scheduler) {
-      effect.scheduler()
-    } else {
-      effect.run()
-    }
-  }
-}
-
-export function getDepFromReactive(object: any, key: string | number | symbol) {
-  return targetMap.get(object)?.get(key)
-}
diff --git a/packages/reactivity/src/effectScope.ts b/packages/reactivity/src/effectScope.ts
index a65c48d03..4fa968608 100644
--- a/packages/reactivity/src/effectScope.ts
+++ b/packages/reactivity/src/effectScope.ts
@@ -1,7 +1,7 @@
-import { ReactiveEffect } from './effect'
+import type { ReactiveEffect } from './effect'
 import { warn } from './warning'
 
-let activeEffectScope: EffectScope | undefined
+export let activeEffectScope: EffectScope | undefined
 
 export class EffectScope {
   /**
@@ -17,6 +17,8 @@ export class EffectScope {
    */
   cleanups: (() => void)[] = []
 
+  private _isPaused = false
+
   /**
    * only assigned by undetached scope
    * @internal
@@ -39,15 +41,50 @@ export class EffectScope {
     if (!detached && activeEffectScope) {
       this.index =
         (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
-          this
+          this,
         ) - 1
     }
   }
 
-  get active() {
+  get active(): boolean {
     return this._active
   }
 
+  pause(): void {
+    if (this._active) {
+      this._isPaused = true
+      let i, l
+      if (this.scopes) {
+        for (i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].pause()
+        }
+      }
+      for (i = 0, l = this.effects.length; i < l; i++) {
+        this.effects[i].pause()
+      }
+    }
+  }
+
+  /**
+   * Resumes the effect scope, including all child scopes and effects.
+   */
+  resume(): void {
+    if (this._active) {
+      if (this._isPaused) {
+        this._isPaused = false
+        let i, l
+        if (this.scopes) {
+          for (i = 0, l = this.scopes.length; i < l; i++) {
+            this.scopes[i].resume()
+          }
+        }
+        for (i = 0, l = this.effects.length; i < l; i++) {
+          this.effects[i].resume()
+        }
+      }
+    }
+  }
+
   run<T>(fn: () => T): T | undefined {
     if (this._active) {
       const currentEffectScope = activeEffectScope
@@ -66,7 +103,7 @@ export class EffectScope {
    * This should only be called on non-detached scopes
    * @internal
    */
-  on() {
+  on(): void {
     activeEffectScope = this
   }
 
@@ -74,11 +111,11 @@ export class EffectScope {
    * This should only be called on non-detached scopes
    * @internal
    */
-  off() {
+  off(): void {
     activeEffectScope = this.parent
   }
 
-  stop(fromParent?: boolean) {
+  stop(fromParent?: boolean): void {
     if (this._active) {
       let i, l
       for (i = 0, l = this.effects.length; i < l; i++) {
@@ -116,25 +153,16 @@ export class EffectScope {
  * @param detached - Can be used to create a "detached" effect scope.
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#effectscope}
  */
-export function effectScope(detached?: boolean) {
+export function effectScope(detached?: boolean): EffectScope {
   return new EffectScope(detached)
 }
 
-export function recordEffectScope(
-  effect: ReactiveEffect,
-  scope: EffectScope | undefined = activeEffectScope
-) {
-  if (scope && scope.active) {
-    scope.effects.push(effect)
-  }
-}
-
 /**
  * Returns the current active effect scope if there is one.
  *
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#getcurrentscope}
  */
-export function getCurrentScope() {
+export function getCurrentScope(): EffectScope | undefined {
   return activeEffectScope
 }
 
@@ -145,13 +173,13 @@ export function getCurrentScope() {
  * @param fn - The callback function to attach to the scope's cleanup.
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#onscopedispose}
  */
-export function onScopeDispose(fn: () => void) {
+export function onScopeDispose(fn: () => void, failSilently = false): void {
   if (activeEffectScope) {
     activeEffectScope.cleanups.push(fn)
-  } else if (__DEV__) {
+  } else if (__DEV__ && !failSilently) {
     warn(
       `onScopeDispose() is called when there is no active effect scope` +
-        ` to be associated with.`
+        ` to be associated with.`,
     )
   }
 }
diff --git a/packages/reactivity/src/index.ts b/packages/reactivity/src/index.ts
index ee4da5b19..f0445e87d 100644
--- a/packages/reactivity/src/index.ts
+++ b/packages/reactivity/src/index.ts
@@ -18,7 +18,7 @@ export {
   type ShallowRef,
   type ShallowUnwrapRef,
   type RefUnwrapBailTypes,
-  type CustomRefFactory
+  type CustomRefFactory,
 } from './ref'
 export {
   reactive,
@@ -31,11 +31,14 @@ export {
   shallowReadonly,
   markRaw,
   toRaw,
-  ReactiveFlags /* @remove */,
+  toReactive,
+  toReadonly,
   type Raw,
   type DeepReadonly,
   type ShallowReactive,
-  type UnwrapNestedRefs
+  type UnwrapNestedRefs,
+  type Reactive,
+  type ReactiveMarker,
 } from './reactive'
 export {
   computed,
@@ -43,33 +46,52 @@ export {
   type WritableComputedRef,
   type WritableComputedOptions,
   type ComputedGetter,
-  type ComputedSetter
+  type ComputedSetter,
+  type ComputedRefImpl,
 } from './computed'
-export { deferredComputed } from './deferredComputed'
 export {
   effect,
   stop,
-  trigger,
-  track,
   enableTracking,
   pauseTracking,
   resetTracking,
-  ITERATE_KEY,
+  onEffectCleanup,
   ReactiveEffect,
+  EffectFlags,
   type ReactiveEffectRunner,
   type ReactiveEffectOptions,
   type EffectScheduler,
   type DebuggerOptions,
   type DebuggerEvent,
-  type DebuggerEventExtraInfo
+  type DebuggerEventExtraInfo,
 } from './effect'
+export {
+  trigger,
+  track,
+  ITERATE_KEY,
+  ARRAY_ITERATE_KEY,
+  MAP_KEY_ITERATE_KEY,
+} from './dep'
 export {
   effectScope,
   EffectScope,
   getCurrentScope,
-  onScopeDispose
+  onScopeDispose,
 } from './effectScope'
+export { reactiveReadArray, shallowReadArray } from './arrayInstrumentations'
+export { TrackOpTypes, TriggerOpTypes, ReactiveFlags } from './constants'
 export {
-  TrackOpTypes /* @remove */,
-  TriggerOpTypes /* @remove */
-} from './operations'
+  watch,
+  getCurrentWatcher,
+  traverse,
+  onWatcherCleanup,
+  WatchErrorCodes,
+  type WatchOptions,
+  type WatchScheduler,
+  type WatchStopHandle,
+  type WatchHandle,
+  type WatchEffect,
+  type WatchSource,
+  type WatchCallback,
+  type OnCleanup,
+} from './watch'
diff --git a/packages/reactivity/src/operations.ts b/packages/reactivity/src/operations.ts
deleted file mode 100644
index 1b96e9825..000000000
--- a/packages/reactivity/src/operations.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// using literal strings instead of numbers so that it's easier to inspect
-// debugger events
-
-export const enum TrackOpTypes {
-  GET = 'get',
-  HAS = 'has',
-  ITERATE = 'iterate'
-}
-
-export const enum TriggerOpTypes {
-  SET = 'set',
-  ADD = 'add',
-  DELETE = 'delete',
-  CLEAR = 'clear'
-}
diff --git a/packages/reactivity/src/reactive.ts b/packages/reactivity/src/reactive.ts
index a5ac4c6e6..729c85496 100644
--- a/packages/reactivity/src/reactive.ts
+++ b/packages/reactivity/src/reactive.ts
@@ -1,25 +1,19 @@
-import { isObject, toRawType, def } from '@vue/shared'
+import { def, hasOwn, isObject, toRawType } from '@vue/shared'
 import {
   mutableHandlers,
   readonlyHandlers,
   shallowReactiveHandlers,
-  shallowReadonlyHandlers
+  shallowReadonlyHandlers,
 } from './baseHandlers'
 import {
   mutableCollectionHandlers,
   readonlyCollectionHandlers,
   shallowCollectionHandlers,
-  shallowReadonlyCollectionHandlers
+  shallowReadonlyCollectionHandlers,
 } from './collectionHandlers'
-import type { UnwrapRefSimple, Ref, RawSymbol } from './ref'
-
-export const enum ReactiveFlags {
-  SKIP = '__v_skip',
-  IS_REACTIVE = '__v_isReactive',
-  IS_READONLY = '__v_isReadonly',
-  IS_SHALLOW = '__v_isShallow',
-  RAW = '__v_raw'
-}
+import type { RawSymbol, Ref, UnwrapRefSimple } from './ref'
+import { ReactiveFlags } from './constants'
+import { warn } from './warning'
 
 export interface Target {
   [ReactiveFlags.SKIP]?: boolean
@@ -29,15 +23,21 @@ export interface Target {
   [ReactiveFlags.RAW]?: any
 }
 
-export const reactiveMap = new WeakMap<Target, any>()
-export const shallowReactiveMap = new WeakMap<Target, any>()
-export const readonlyMap = new WeakMap<Target, any>()
-export const shallowReadonlyMap = new WeakMap<Target, any>()
+export const reactiveMap: WeakMap<Target, any> = new WeakMap<Target, any>()
+export const shallowReactiveMap: WeakMap<Target, any> = new WeakMap<
+  Target,
+  any
+>()
+export const readonlyMap: WeakMap<Target, any> = new WeakMap<Target, any>()
+export const shallowReadonlyMap: WeakMap<Target, any> = new WeakMap<
+  Target,
+  any
+>()
 
-const enum TargetType {
+enum TargetType {
   INVALID = 0,
   COMMON = 1,
-  COLLECTION = 2
+  COLLECTION = 2,
 }
 
 function targetTypeMap(rawType: string) {
@@ -64,6 +64,15 @@ function getTargetType(value: Target) {
 // only unwrap nested ref
 export type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>
 
+declare const ReactiveMarkerSymbol: unique symbol
+
+export interface ReactiveMarker {
+  [ReactiveMarkerSymbol]?: void
+}
+
+export type Reactive<T> = UnwrapNestedRefs<T> &
+  (T extends readonly any[] ? ReactiveMarker : {})
+
 /**
  * Returns a reactive proxy of the object.
  *
@@ -79,7 +88,7 @@ export type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>
  * @param target - The source object.
  * @see {@link https://vuejs.org/api/reactivity-core.html#reactive}
  */
-export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
+export function reactive<T extends object>(target: T): Reactive<T>
 export function reactive(target: object) {
   // if trying to observe a readonly proxy, return the readonly version.
   if (isReadonly(target)) {
@@ -90,7 +99,7 @@ export function reactive(target: object) {
     false,
     mutableHandlers,
     mutableCollectionHandlers,
-    reactiveMap
+    reactiveMap,
   )
 }
 
@@ -129,19 +138,19 @@ export type ShallowReactive<T> = T & { [ShallowReactiveMarker]?: true }
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowreactive}
  */
 export function shallowReactive<T extends object>(
-  target: T
+  target: T,
 ): ShallowReactive<T> {
   return createReactiveObject(
     target,
     false,
     shallowReactiveHandlers,
     shallowCollectionHandlers,
-    shallowReactiveMap
+    shallowReactiveMap,
   )
 }
 
 type Primitive = string | number | boolean | bigint | symbol | undefined | null
-type Builtin = Primitive | Function | Date | Error | RegExp
+export type Builtin = Primitive | Function | Date | Error | RegExp
 export type DeepReadonly<T> = T extends Builtin
   ? T
   : T extends Map<infer K, infer V>
@@ -158,7 +167,7 @@ export type DeepReadonly<T> = T extends Builtin
               ? WeakSet<DeepReadonly<U>>
               : T extends Promise<infer U>
                 ? Promise<DeepReadonly<U>>
-                : T extends Ref<infer U>
+                : T extends Ref<infer U, unknown>
                   ? Readonly<Ref<DeepReadonly<U>>>
                   : T extends {}
                     ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
@@ -194,14 +203,14 @@ export type DeepReadonly<T> = T extends Builtin
  * @see {@link https://vuejs.org/api/reactivity-core.html#readonly}
  */
 export function readonly<T extends object>(
-  target: T
+  target: T,
 ): DeepReadonly<UnwrapNestedRefs<T>> {
   return createReactiveObject(
     target,
     true,
     readonlyHandlers,
     readonlyCollectionHandlers,
-    readonlyMap
+    readonlyMap,
   )
 }
 
@@ -241,7 +250,7 @@ export function shallowReadonly<T extends object>(target: T): Readonly<T> {
     true,
     shallowReadonlyHandlers,
     shallowReadonlyCollectionHandlers,
-    shallowReadonlyMap
+    shallowReadonlyMap,
   )
 }
 
@@ -250,11 +259,15 @@ function createReactiveObject(
   isReadonly: boolean,
   baseHandlers: ProxyHandler<any>,
   collectionHandlers: ProxyHandler<any>,
-  proxyMap: WeakMap<Target, any>
+  proxyMap: WeakMap<Target, any>,
 ) {
   if (!isObject(target)) {
     if (__DEV__) {
-      console.warn(`value cannot be made reactive: ${String(target)}`)
+      warn(
+        `value cannot be made ${isReadonly ? 'readonly' : 'reactive'}: ${String(
+          target,
+        )}`,
+      )
     }
     return target
   }
@@ -278,7 +291,7 @@ function createReactiveObject(
   }
   const proxy = new Proxy(
     target,
-    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
+    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers,
   )
   proxyMap.set(target, proxy)
   return proxy
@@ -335,8 +348,8 @@ export function isShallow(value: unknown): boolean {
  * @param value - The value to check.
  * @see {@link https://vuejs.org/api/reactivity-utilities.html#isproxy}
  */
-export function isProxy(value: unknown): boolean {
-  return isReactive(value) || isReadonly(value)
+export function isProxy(value: any): boolean {
+  return value ? !!value[ReactiveFlags.RAW] : false
 }
 
 /**
@@ -392,7 +405,9 @@ export type Raw<T> = T & { [RawSymbol]?: true }
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#markraw}
  */
 export function markRaw<T extends object>(value: T): Raw<T> {
-  def(value, ReactiveFlags.SKIP, true)
+  if (!hasOwn(value, ReactiveFlags.SKIP) && Object.isExtensible(value)) {
+    def(value, ReactiveFlags.SKIP, true)
+  }
   return value
 }
 
@@ -413,5 +428,5 @@ export const toReactive = <T extends unknown>(value: T): T =>
  *
  * @param value - The value for which a readonly proxy shall be created.
  */
-export const toReadonly = <T extends unknown>(value: T): T =>
-  isObject(value) ? readonly(value) : value
+export const toReadonly = <T extends unknown>(value: T): DeepReadonly<T> =>
+  isObject(value) ? readonly(value) : (value as DeepReadonly<T>)
diff --git a/packages/reactivity/src/ref.ts b/packages/reactivity/src/ref.ts
index 9f7ebdad8..6b8d54181 100644
--- a/packages/reactivity/src/ref.ts
+++ b/packages/reactivity/src/ref.ts
@@ -1,29 +1,31 @@
-import type { ComputedRef } from './computed'
 import {
-  activeEffect,
-  getDepFromReactive,
-  shouldTrack,
-  trackEffects,
-  triggerEffects
-} from './effect'
-import { TrackOpTypes, TriggerOpTypes } from './operations'
-import { isArray, hasChanged, IfAny, isFunction, isObject } from '@vue/shared'
+  type IfAny,
+  hasChanged,
+  isArray,
+  isFunction,
+  isObject,
+} from '@vue/shared'
+import { Dep, getDepFromReactive } from './dep'
 import {
+  type Builtin,
+  type ShallowReactiveMarker,
   isProxy,
-  toRaw,
   isReactive,
-  toReactive,
   isReadonly,
-  isShallow
+  isShallow,
+  toRaw,
+  toReactive,
 } from './reactive'
-import type { ShallowReactiveMarker } from './reactive'
-import { createDep, Dep } from './dep'
+import type { ComputedRef, WritableComputedRef } from './computed'
+import { ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './constants'
+import { warn } from './warning'
 
 declare const RefSymbol: unique symbol
 export declare const RawSymbol: unique symbol
 
-export interface Ref<T = any> {
-  value: T
+export interface Ref<T = any, S = T> {
+  get value(): T
+  set value(_: S)
   /**
    * Type differentiator only.
    * We need this to be in public d.ts but don't want it to show up in IDE
@@ -32,43 +34,6 @@ export interface Ref<T = any> {
   [RefSymbol]: true
 }
 
-type RefBase<T> = {
-  dep?: Dep
-  value: T
-}
-
-export function trackRefValue(ref: RefBase<any>) {
-  if (shouldTrack && activeEffect) {
-    ref = toRaw(ref)
-    if (__DEV__) {
-      trackEffects(ref.dep || (ref.dep = createDep()), {
-        target: ref,
-        type: TrackOpTypes.GET,
-        key: 'value'
-      })
-    } else {
-      trackEffects(ref.dep || (ref.dep = createDep()))
-    }
-  }
-}
-
-export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
-  ref = toRaw(ref)
-  const dep = ref.dep
-  if (dep) {
-    if (__DEV__) {
-      triggerEffects(dep, {
-        target: ref,
-        type: TriggerOpTypes.SET,
-        key: 'value',
-        newValue: newVal
-      })
-    } else {
-      triggerEffects(dep)
-    }
-  }
-}
-
 /**
  * Checks if a value is a ref object.
  *
@@ -77,7 +42,7 @@ export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
  */
 export function isRef<T>(r: Ref<T> | unknown): r is Ref<T>
 export function isRef(r: any): r is Ref {
-  return !!(r && r.__v_isRef === true)
+  return r ? r[ReactiveFlags.IS_REF] === true : false
 }
 
 /**
@@ -87,8 +52,9 @@ export function isRef(r: any): r is Ref {
  * @param value - The object to wrap in the ref.
  * @see {@link https://vuejs.org/api/reactivity-core.html#ref}
  */
-export function ref<T extends Ref>(value: T): T
-export function ref<T>(value: T): Ref<UnwrapRef<T>>
+export function ref<T>(
+  value: T,
+): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T>
 export function ref<T = any>(): Ref<T | undefined>
 export function ref(value?: unknown) {
   return createRef(value, false)
@@ -96,7 +62,9 @@ export function ref(value?: unknown) {
 
 declare const ShallowRefMarker: unique symbol
 
-export type ShallowRef<T = any> = Ref<T> & { [ShallowRefMarker]?: true }
+export type ShallowRef<T = any, S = T> = Ref<T, S> & {
+  [ShallowRefMarker]?: true
+}
 
 /**
  * Shallow version of {@link ref()}.
@@ -115,9 +83,13 @@ export type ShallowRef<T = any> = Ref<T> & { [ShallowRefMarker]?: true }
  * @param value - The "inner value" for the shallow ref.
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowref}
  */
-export function shallowRef<T>(value: MaybeRef<T>): Ref<T> | ShallowRef<T>
-export function shallowRef<T extends Ref>(value: T): T
-export function shallowRef<T>(value: T): ShallowRef<T>
+export function shallowRef<T>(
+  value: T,
+): Ref extends T
+  ? T extends Ref
+    ? IfAny<T, ShallowRef<T>, T>
+    : ShallowRef<T>
+  : ShallowRef<T>
 export function shallowRef<T = any>(): ShallowRef<T | undefined>
 export function shallowRef(value?: unknown) {
   return createRef(value, true)
@@ -130,34 +102,58 @@ function createRef(rawValue: unknown, shallow: boolean) {
   return new RefImpl(rawValue, shallow)
 }
 
-class RefImpl<T> {
-  private _value: T
+/**
+ * @internal
+ */
+class RefImpl<T = any> {
+  _value: T
   private _rawValue: T
 
-  public dep?: Dep = undefined
-  public readonly __v_isRef = true
+  dep: Dep = new Dep()
 
-  constructor(
-    value: T,
-    public readonly __v_isShallow: boolean
-  ) {
-    this._rawValue = __v_isShallow ? value : toRaw(value)
-    this._value = __v_isShallow ? value : toReactive(value)
+  public readonly [ReactiveFlags.IS_REF] = true
+  public readonly [ReactiveFlags.IS_SHALLOW]: boolean = false
+
+  constructor(value: T, isShallow: boolean) {
+    this._rawValue = isShallow ? value : toRaw(value)
+    this._value = isShallow ? value : toReactive(value)
+    this[ReactiveFlags.IS_SHALLOW] = isShallow
   }
 
   get value() {
-    trackRefValue(this)
+    if (__DEV__) {
+      this.dep.track({
+        target: this,
+        type: TrackOpTypes.GET,
+        key: 'value',
+      })
+    } else {
+      this.dep.track()
+    }
     return this._value
   }
 
-  set value(newVal) {
+  set value(newValue) {
+    const oldValue = this._rawValue
     const useDirectValue =
-      this.__v_isShallow || isShallow(newVal) || isReadonly(newVal)
-    newVal = useDirectValue ? newVal : toRaw(newVal)
-    if (hasChanged(newVal, this._rawValue)) {
-      this._rawValue = newVal
-      this._value = useDirectValue ? newVal : toReactive(newVal)
-      triggerRefValue(this, newVal)
+      this[ReactiveFlags.IS_SHALLOW] ||
+      isShallow(newValue) ||
+      isReadonly(newValue)
+    newValue = useDirectValue ? newValue : toRaw(newValue)
+    if (hasChanged(newValue, oldValue)) {
+      this._rawValue = newValue
+      this._value = useDirectValue ? newValue : toReactive(newValue)
+      if (__DEV__) {
+        this.dep.trigger({
+          target: this,
+          type: TriggerOpTypes.SET,
+          key: 'value',
+          newValue,
+          oldValue,
+        })
+      } else {
+        this.dep.trigger()
+      }
     }
   }
 }
@@ -187,12 +183,29 @@ class RefImpl<T> {
  * @param ref - The ref whose tied effects shall be executed.
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#triggerref}
  */
-export function triggerRef(ref: Ref) {
-  triggerRefValue(ref, __DEV__ ? ref.value : void 0)
+export function triggerRef(ref: Ref): void {
+  // ref may be an instance of ObjectRefImpl
+  if ((ref as unknown as RefImpl).dep) {
+    if (__DEV__) {
+      ;(ref as unknown as RefImpl).dep.trigger({
+        target: ref,
+        type: TriggerOpTypes.SET,
+        key: 'value',
+        newValue: (ref as unknown as RefImpl)._value,
+      })
+    } else {
+      ;(ref as unknown as RefImpl).dep.trigger()
+    }
+  }
 }
 
-export type MaybeRef<T = any> = T | Ref<T>
-export type MaybeRefOrGetter<T = any> = MaybeRef<T> | (() => T)
+export type MaybeRef<T = any> =
+  | T
+  | Ref<T>
+  | ShallowRef<T>
+  | WritableComputedRef<T>
+
+export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T)
 
 /**
  * Returns the inner value if the argument is a ref, otherwise return the
@@ -230,12 +243,15 @@ export function unref<T>(ref: MaybeRef<T> | ComputedRef<T>): T {
  * @param source - A getter, an existing ref, or a non-function value.
  * @see {@link https://vuejs.org/api/reactivity-utilities.html#tovalue}
  */
-export function toValue<T>(source: MaybeRefOrGetter<T> | ComputedRef<T>): T {
+export function toValue<T>(source: MaybeRefOrGetter<T>): T {
   return isFunction(source) ? source() : unref(source)
 }
 
 const shallowUnwrapHandlers: ProxyHandler<any> = {
-  get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),
+  get: (target, key, receiver) =>
+    key === ReactiveFlags.RAW
+      ? target
+      : unref(Reflect.get(target, key, receiver)),
   set: (target, key, value, receiver) => {
     const oldValue = target[key]
     if (isRef(oldValue) && !isRef(value)) {
@@ -244,21 +260,19 @@ const shallowUnwrapHandlers: ProxyHandler<any> = {
     } else {
       return Reflect.set(target, key, value, receiver)
     }
-  }
+  },
 }
 
 /**
- * Returns a reactive proxy for the given object.
- *
- * If the object already is reactive, it's returned as-is. If not, a new
- * reactive proxy is created. Direct child properties that are refs are properly
- * handled, as well.
+ * Returns a proxy for the given object that shallowly unwraps properties that
+ * are refs. If the object already is reactive, it's returned as-is. If not, a
+ * new reactive proxy is created.
  *
  * @param objectWithRefs - Either an already-reactive object or a simple object
  * that contains refs.
  */
 export function proxyRefs<T extends object>(
-  objectWithRefs: T
+  objectWithRefs: T,
 ): ShallowUnwrapRef<T> {
   return isReactive(objectWithRefs)
     ? objectWithRefs
@@ -267,31 +281,31 @@ export function proxyRefs<T extends object>(
 
 export type CustomRefFactory<T> = (
   track: () => void,
-  trigger: () => void
+  trigger: () => void,
 ) => {
   get: () => T
   set: (value: T) => void
 }
 
 class CustomRefImpl<T> {
-  public dep?: Dep = undefined
+  public dep: Dep
 
   private readonly _get: ReturnType<CustomRefFactory<T>>['get']
   private readonly _set: ReturnType<CustomRefFactory<T>>['set']
 
-  public readonly __v_isRef = true
+  public readonly [ReactiveFlags.IS_REF] = true
+
+  public _value: T = undefined!
 
   constructor(factory: CustomRefFactory<T>) {
-    const { get, set } = factory(
-      () => trackRefValue(this),
-      () => triggerRefValue(this)
-    )
+    const dep = (this.dep = new Dep())
+    const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep))
     this._get = get
     this._set = set
   }
 
   get value() {
-    return this._get()
+    return (this._value = this._get())
   }
 
   set value(newVal) {
@@ -324,7 +338,7 @@ export type ToRefs<T = any> = {
  */
 export function toRefs<T extends object>(object: T): ToRefs<T> {
   if (__DEV__ && !isProxy(object)) {
-    console.warn(`toRefs() expects a reactive object but received a plain one.`)
+    warn(`toRefs() expects a reactive object but received a plain one.`)
   }
   const ret: any = isArray(object) ? new Array(object.length) : {}
   for (const key in object) {
@@ -334,17 +348,18 @@ export function toRefs<T extends object>(object: T): ToRefs<T> {
 }
 
 class ObjectRefImpl<T extends object, K extends keyof T> {
-  public readonly __v_isRef = true
+  public readonly [ReactiveFlags.IS_REF] = true
+  public _value: T[K] = undefined!
 
   constructor(
     private readonly _object: T,
     private readonly _key: K,
-    private readonly _defaultValue?: T[K]
+    private readonly _defaultValue?: T[K],
   ) {}
 
   get value() {
     const val = this._object[this._key]
-    return val === undefined ? this._defaultValue! : val
+    return (this._value = val === undefined ? this._defaultValue! : val)
   }
 
   set value(newVal) {
@@ -357,11 +372,13 @@ class ObjectRefImpl<T extends object, K extends keyof T> {
 }
 
 class GetterRefImpl<T> {
-  public readonly __v_isRef = true
-  public readonly __v_isReadonly = true
+  public readonly [ReactiveFlags.IS_REF] = true
+  public readonly [ReactiveFlags.IS_READONLY] = true
+  public _value: T = undefined!
+
   constructor(private readonly _getter: () => T) {}
   get value() {
-    return this._getter()
+    return (this._value = this._getter())
   }
 }
 
@@ -411,7 +428,7 @@ export type ToRef<T> = IfAny<T, Ref<T>, [T] extends [Ref] ? T : Ref<T>>
  * @see {@link https://vuejs.org/api/reactivity-utilities.html#toref}
  */
 export function toRef<T>(
-  value: T
+  value: T,
 ): T extends () => infer R
   ? Readonly<Ref<R>>
   : T extends Ref
@@ -419,17 +436,17 @@ export function toRef<T>(
     : Ref<UnwrapRef<T>>
 export function toRef<T extends object, K extends keyof T>(
   object: T,
-  key: K
+  key: K,
 ): ToRef<T[K]>
 export function toRef<T extends object, K extends keyof T>(
   object: T,
   key: K,
-  defaultValue: T[K]
+  defaultValue: T[K],
 ): ToRef<Exclude<T[K], undefined>>
 export function toRef(
   source: Record<string, any> | MaybeRef,
   key?: string,
-  defaultValue?: unknown
+  defaultValue?: unknown,
 ): Ref {
   if (isRef(source)) {
     return source
@@ -445,7 +462,7 @@ export function toRef(
 function propertyToRef(
   source: Record<string, any>,
   key: string,
-  defaultValue?: unknown
+  defaultValue?: unknown,
 ) {
   const val = source[key]
   return isRef(val)
@@ -453,11 +470,6 @@ function propertyToRef(
     : (new ObjectRefImpl(source, key, defaultValue) as any)
 }
 
-// corner case when use narrows type
-// Ex. type RelativePath = string & { __brand: unknown }
-// RelativePath extends object -> true
-type BaseTypes = string | number | boolean
-
 /**
  * This is a special exported interface for other packages to declare
  * additional types that should bail out for ref unwrapping. For example
@@ -474,36 +486,33 @@ type BaseTypes = string | number | boolean
 export interface RefUnwrapBailTypes {}
 
 export type ShallowUnwrapRef<T> = {
-  [K in keyof T]: T[K] extends Ref<infer V>
-    ? V // if `V` is `unknown` that means it does not extend `Ref` and is undefined
-    : T[K] extends Ref<infer V> | undefined
-      ? unknown extends V
-        ? undefined
-        : V | undefined
-      : T[K]
+  [K in keyof T]: DistributeRef<T[K]>
 }
 
-export type UnwrapRef<T> = T extends ShallowRef<infer V>
-  ? V
-  : T extends Ref<infer V>
-    ? UnwrapRefSimple<V>
-    : UnwrapRefSimple<T>
+type DistributeRef<T> = T extends Ref<infer V, unknown> ? V : T
+
+export type UnwrapRef<T> =
+  T extends ShallowRef<infer V, unknown>
+    ? V
+    : T extends Ref<infer V, unknown>
+      ? UnwrapRefSimple<V>
+      : UnwrapRefSimple<T>
 
 export type UnwrapRefSimple<T> = T extends
-  | Function
-  | BaseTypes
+  | Builtin
   | Ref
   | RefUnwrapBailTypes[keyof RefUnwrapBailTypes]
   | { [RawSymbol]?: true }
   ? T
   : T extends Map<infer K, infer V>
-    ? Map<K, UnwrapRefSimple<V>>
+    ? Map<K, UnwrapRefSimple<V>> & UnwrapRef<Omit<T, keyof Map<any, any>>>
     : T extends WeakMap<infer K, infer V>
-      ? WeakMap<K, UnwrapRefSimple<V>>
+      ? WeakMap<K, UnwrapRefSimple<V>> &
+          UnwrapRef<Omit<T, keyof WeakMap<any, any>>>
       : T extends Set<infer V>
-        ? Set<UnwrapRefSimple<V>>
+        ? Set<UnwrapRefSimple<V>> & UnwrapRef<Omit<T, keyof Set<any>>>
         : T extends WeakSet<infer V>
-          ? WeakSet<UnwrapRefSimple<V>>
+          ? WeakSet<UnwrapRefSimple<V>> & UnwrapRef<Omit<T, keyof WeakSet<any>>>
           : T extends ReadonlyArray<any>
             ? { [K in keyof T]: UnwrapRefSimple<T[K]> }
             : T extends object & { [ShallowReactiveMarker]?: never }
diff --git a/packages/reactivity/src/warning.ts b/packages/reactivity/src/warning.ts
index c6cbdfe8c..6a39f0752 100644
--- a/packages/reactivity/src/warning.ts
+++ b/packages/reactivity/src/warning.ts
@@ -1,3 +1,3 @@
-export function warn(msg: string, ...args: any[]) {
+export function warn(msg: string, ...args: any[]): void {
   console.warn(`[Vue warn] ${msg}`, ...args)
 }
diff --git a/packages/reactivity/src/watch.ts b/packages/reactivity/src/watch.ts
new file mode 100644
index 000000000..073bf88b9
--- /dev/null
+++ b/packages/reactivity/src/watch.ts
@@ -0,0 +1,367 @@
+import {
+  EMPTY_OBJ,
+  NOOP,
+  hasChanged,
+  isArray,
+  isFunction,
+  isMap,
+  isObject,
+  isPlainObject,
+  isSet,
+  remove,
+} from '@vue/shared'
+import { warn } from './warning'
+import type { ComputedRef } from './computed'
+import { ReactiveFlags } from './constants'
+import {
+  type DebuggerOptions,
+  EffectFlags,
+  type EffectScheduler,
+  ReactiveEffect,
+  pauseTracking,
+  resetTracking,
+} from './effect'
+import { isReactive, isShallow } from './reactive'
+import { type Ref, isRef } from './ref'
+import { getCurrentScope } from './effectScope'
+
+// These errors were transferred from `packages/runtime-core/src/errorHandling.ts`
+// to @vue/reactivity to allow co-location with the moved base watch logic, hence
+// it is essential to keep these values unchanged.
+export enum WatchErrorCodes {
+  WATCH_GETTER = 2,
+  WATCH_CALLBACK,
+  WATCH_CLEANUP,
+}
+
+export type WatchEffect = (onCleanup: OnCleanup) => void
+
+export type WatchSource<T = any> = Ref<T, any> | ComputedRef<T> | (() => T)
+
+export type WatchCallback<V = any, OV = any> = (
+  value: V,
+  oldValue: OV,
+  onCleanup: OnCleanup,
+) => any
+
+export type OnCleanup = (cleanupFn: () => void) => void
+
+export interface WatchOptions<Immediate = boolean> extends DebuggerOptions {
+  immediate?: Immediate
+  deep?: boolean | number
+  once?: boolean
+  scheduler?: WatchScheduler
+  onWarn?: (msg: string, ...args: any[]) => void
+  /**
+   * @internal
+   */
+  augmentJob?: (job: (...args: any[]) => void) => void
+  /**
+   * @internal
+   */
+  call?: (
+    fn: Function | Function[],
+    type: WatchErrorCodes,
+    args?: unknown[],
+  ) => void
+}
+
+export type WatchStopHandle = () => void
+
+export interface WatchHandle extends WatchStopHandle {
+  pause: () => void
+  resume: () => void
+  stop: () => void
+}
+
+// initial value for watchers to trigger on undefined initial values
+const INITIAL_WATCHER_VALUE = {}
+
+export type WatchScheduler = (job: () => void, isFirstRun: boolean) => void
+
+const cleanupMap: WeakMap<ReactiveEffect, (() => void)[]> = new WeakMap()
+let activeWatcher: ReactiveEffect | undefined = undefined
+
+/**
+ * Returns the current active effect if there is one.
+ */
+export function getCurrentWatcher(): ReactiveEffect<any> | undefined {
+  return activeWatcher
+}
+
+/**
+ * Registers a cleanup callback on the current active effect. This
+ * registered cleanup callback will be invoked right before the
+ * associated effect re-runs.
+ *
+ * @param cleanupFn - The callback function to attach to the effect's cleanup.
+ * @param failSilently - if `true`, will not throw warning when called without
+ * an active effect.
+ * @param owner - The effect that this cleanup function should be attached to.
+ * By default, the current active effect.
+ */
+export function onWatcherCleanup(
+  cleanupFn: () => void,
+  failSilently = false,
+  owner: ReactiveEffect | undefined = activeWatcher,
+): void {
+  if (owner) {
+    let cleanups = cleanupMap.get(owner)
+    if (!cleanups) cleanupMap.set(owner, (cleanups = []))
+    cleanups.push(cleanupFn)
+  } else if (__DEV__ && !failSilently) {
+    warn(
+      `onWatcherCleanup() was called when there was no active watcher` +
+        ` to associate with.`,
+    )
+  }
+}
+
+export function watch(
+  source: WatchSource | WatchSource[] | WatchEffect | object,
+  cb?: WatchCallback | null,
+  options: WatchOptions = EMPTY_OBJ,
+): WatchHandle {
+  const { immediate, deep, once, scheduler, augmentJob, call } = options
+
+  const warnInvalidSource = (s: unknown) => {
+    ;(options.onWarn || warn)(
+      `Invalid watch source: `,
+      s,
+      `A watch source can only be a getter/effect function, a ref, ` +
+        `a reactive object, or an array of these types.`,
+    )
+  }
+
+  const reactiveGetter = (source: object) => {
+    // traverse will happen in wrapped getter below
+    if (deep) return source
+    // for `deep: false | 0` or shallow reactive, only traverse root-level properties
+    if (isShallow(source) || deep === false || deep === 0)
+      return traverse(source, 1)
+    // for `deep: undefined` on a reactive object, deeply traverse all properties
+    return traverse(source)
+  }
+
+  let effect: ReactiveEffect
+  let getter: () => any
+  let cleanup: (() => void) | undefined
+  let boundCleanup: typeof onWatcherCleanup
+  let forceTrigger = false
+  let isMultiSource = false
+
+  if (isRef(source)) {
+    getter = () => source.value
+    forceTrigger = isShallow(source)
+  } else if (isReactive(source)) {
+    getter = () => reactiveGetter(source)
+    forceTrigger = true
+  } else if (isArray(source)) {
+    isMultiSource = true
+    forceTrigger = source.some(s => isReactive(s) || isShallow(s))
+    getter = () =>
+      source.map(s => {
+        if (isRef(s)) {
+          return s.value
+        } else if (isReactive(s)) {
+          return reactiveGetter(s)
+        } else if (isFunction(s)) {
+          return call ? call(s, WatchErrorCodes.WATCH_GETTER) : s()
+        } else {
+          __DEV__ && warnInvalidSource(s)
+        }
+      })
+  } else if (isFunction(source)) {
+    if (cb) {
+      // getter with cb
+      getter = call
+        ? () => call(source, WatchErrorCodes.WATCH_GETTER)
+        : (source as () => any)
+    } else {
+      // no cb -> simple effect
+      getter = () => {
+        if (cleanup) {
+          pauseTracking()
+          try {
+            cleanup()
+          } finally {
+            resetTracking()
+          }
+        }
+        const currentEffect = activeWatcher
+        activeWatcher = effect
+        try {
+          return call
+            ? call(source, WatchErrorCodes.WATCH_CALLBACK, [boundCleanup])
+            : source(boundCleanup)
+        } finally {
+          activeWatcher = currentEffect
+        }
+      }
+    }
+  } else {
+    getter = NOOP
+    __DEV__ && warnInvalidSource(source)
+  }
+
+  if (cb && deep) {
+    const baseGetter = getter
+    const depth = deep === true ? Infinity : deep
+    getter = () => traverse(baseGetter(), depth)
+  }
+
+  const scope = getCurrentScope()
+  const watchHandle: WatchHandle = () => {
+    effect.stop()
+    if (scope) {
+      remove(scope.effects, effect)
+    }
+  }
+
+  if (once && cb) {
+    const _cb = cb
+    cb = (...args) => {
+      _cb(...args)
+      watchHandle()
+    }
+  }
+
+  let oldValue: any = isMultiSource
+    ? new Array((source as []).length).fill(INITIAL_WATCHER_VALUE)
+    : INITIAL_WATCHER_VALUE
+
+  const job = (immediateFirstRun?: boolean) => {
+    if (
+      !(effect.flags & EffectFlags.ACTIVE) ||
+      (!effect.dirty && !immediateFirstRun)
+    ) {
+      return
+    }
+    if (cb) {
+      // watch(source, cb)
+      const newValue = effect.run()
+      if (
+        deep ||
+        forceTrigger ||
+        (isMultiSource
+          ? (newValue as any[]).some((v, i) => hasChanged(v, oldValue[i]))
+          : hasChanged(newValue, oldValue))
+      ) {
+        // cleanup before running cb again
+        if (cleanup) {
+          cleanup()
+        }
+        const currentWatcher = activeWatcher
+        activeWatcher = effect
+        try {
+          const args = [
+            newValue,
+            // pass undefined as the old value when it's changed for the first time
+            oldValue === INITIAL_WATCHER_VALUE
+              ? undefined
+              : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE
+                ? []
+                : oldValue,
+            boundCleanup,
+          ]
+          call
+            ? call(cb!, WatchErrorCodes.WATCH_CALLBACK, args)
+            : // @ts-expect-error
+              cb!(...args)
+          oldValue = newValue
+        } finally {
+          activeWatcher = currentWatcher
+        }
+      }
+    } else {
+      // watchEffect
+      effect.run()
+    }
+  }
+
+  if (augmentJob) {
+    augmentJob(job)
+  }
+
+  effect = new ReactiveEffect(getter)
+
+  effect.scheduler = scheduler
+    ? () => scheduler(job, false)
+    : (job as EffectScheduler)
+
+  boundCleanup = fn => onWatcherCleanup(fn, false, effect)
+
+  cleanup = effect.onStop = () => {
+    const cleanups = cleanupMap.get(effect)
+    if (cleanups) {
+      if (call) {
+        call(cleanups, WatchErrorCodes.WATCH_CLEANUP)
+      } else {
+        for (const cleanup of cleanups) cleanup()
+      }
+      cleanupMap.delete(effect)
+    }
+  }
+
+  if (__DEV__) {
+    effect.onTrack = options.onTrack
+    effect.onTrigger = options.onTrigger
+  }
+
+  // initial run
+  if (cb) {
+    if (immediate) {
+      job(true)
+    } else {
+      oldValue = effect.run()
+    }
+  } else if (scheduler) {
+    scheduler(job.bind(null, true), true)
+  } else {
+    effect.run()
+  }
+
+  watchHandle.pause = effect.pause.bind(effect)
+  watchHandle.resume = effect.resume.bind(effect)
+  watchHandle.stop = watchHandle
+
+  return watchHandle
+}
+
+export function traverse(
+  value: unknown,
+  depth: number = Infinity,
+  seen?: Set<unknown>,
+): unknown {
+  if (depth <= 0 || !isObject(value) || (value as any)[ReactiveFlags.SKIP]) {
+    return value
+  }
+
+  seen = seen || new Set()
+  if (seen.has(value)) {
+    return value
+  }
+  seen.add(value)
+  depth--
+  if (isRef(value)) {
+    traverse(value.value, depth, seen)
+  } else if (isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      traverse(value[i], depth, seen)
+    }
+  } else if (isSet(value) || isMap(value)) {
+    value.forEach((v: any) => {
+      traverse(v, depth, seen)
+    })
+  } else if (isPlainObject(value)) {
+    for (const key in value) {
+      traverse(value[key], depth, seen)
+    }
+    for (const key of Object.getOwnPropertySymbols(value)) {
+      if (Object.prototype.propertyIsEnumerable.call(value, key)) {
+        traverse(value[key as any], depth, seen)
+      }
+    }
+  }
+  return value
+}
diff --git a/packages/runtime-core/README.md b/packages/runtime-core/README.md
index 3a5b29812..452ef520c 100644
--- a/packages/runtime-core/README.md
+++ b/packages/runtime-core/README.md
@@ -13,7 +13,7 @@ const { render, createApp } = createRenderer({
   patchProp,
   insert,
   remove,
-  createElement
+  createElement,
   // ...
 })
 
diff --git a/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts b/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts
index de9878b11..5dc78cdb4 100644
--- a/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts
+++ b/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts
@@ -1,11 +1,11 @@
 import {
+  type Component,
+  KeepAlive,
+  Suspense,
   defineAsyncComponent,
   h,
-  Component,
-  ref,
   nextTick,
-  Suspense,
-  KeepAlive
+  ref,
 } from '../src'
 import { createApp, nodeOps, serializeInner } from '@vue/runtime-test'
 import { onActivated } from '../src/components/KeepAlive'
@@ -19,13 +19,13 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     }).mount(root)
 
     expect(serializeInner(root)).toBe('<!---->')
@@ -54,13 +54,13 @@ describe('api: defineAsyncComponent', () => {
           resolve = r as any
         }),
       loadingComponent: () => 'loading',
-      delay: 1 // defaults to 200
+      delay: 1, // defaults to 200
     })
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     }).mount(root)
 
     // due to the delay, initial mount should be empty
@@ -93,13 +93,13 @@ describe('api: defineAsyncComponent', () => {
           resolve = r as any
         }),
       loadingComponent: () => 'loading',
-      delay: 0
+      delay: 0,
     })
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     }).mount(root)
 
     // with delay: 0, should show loading immediately
@@ -128,13 +128,13 @@ describe('api: defineAsyncComponent', () => {
         new Promise((_resolve, _reject) => {
           resolve = _resolve as any
           reject = _reject
-        })
+        }),
     )
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -173,13 +173,13 @@ describe('api: defineAsyncComponent', () => {
           resolve = _resolve as any
           reject = _reject
         }),
-      errorComponent: (props: { error: Error }) => props.error.message
+      errorComponent: (props: { error: Error }) => props.error.message,
     })
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -218,13 +218,13 @@ describe('api: defineAsyncComponent', () => {
           resolve = _resolve as any
           reject = _reject
         }),
-      errorComponent: (props: { error: Error }) => props.error.message
+      errorComponent: (props: { error: Error }) => props.error.message,
     })
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     })
 
     app.mount(root)
@@ -235,7 +235,7 @@ describe('api: defineAsyncComponent', () => {
     await timeout()
     expect(serializeInner(root)).toBe('errored out')
     expect(
-      'Unhandled error during execution of async component loader'
+      'Unhandled error during execution of async component loader',
     ).toHaveBeenWarned()
 
     toggle.value = false
@@ -264,13 +264,13 @@ describe('api: defineAsyncComponent', () => {
         }),
       errorComponent: (props: { error: Error }) => props.error.message,
       loadingComponent: () => 'loading',
-      delay: 1
+      delay: 1,
     })
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -316,12 +316,12 @@ describe('api: defineAsyncComponent', () => {
         new Promise(_resolve => {
           resolve = _resolve as any
         }),
-      timeout: 1
+      timeout: 1,
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
 
     const handler = vi.fn()
@@ -333,7 +333,7 @@ describe('api: defineAsyncComponent', () => {
     await timeout(1)
     expect(handler).toHaveBeenCalled()
     expect(handler.mock.calls[0][0].message).toMatch(
-      `Async component timed out after 1ms.`
+      `Async component timed out after 1ms.`,
     )
     expect(serializeInner(root)).toBe('<!---->')
 
@@ -351,12 +351,12 @@ describe('api: defineAsyncComponent', () => {
           resolve = _resolve as any
         }),
       timeout: 1,
-      errorComponent: () => 'timed out'
+      errorComponent: () => 'timed out',
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -384,12 +384,12 @@ describe('api: defineAsyncComponent', () => {
       delay: 1,
       timeout: 16,
       errorComponent: () => 'timed out',
-      loadingComponent: () => 'loading'
+      loadingComponent: () => 'loading',
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
     const handler = (app.config.errorHandler = vi.fn())
     app.mount(root)
@@ -415,12 +415,12 @@ describe('api: defineAsyncComponent', () => {
         }),
       delay: 1,
       timeout: 16,
-      loadingComponent: () => 'loading'
+      loadingComponent: () => 'loading',
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
     const handler = vi.fn()
     app.config.errorHandler = handler
@@ -432,7 +432,7 @@ describe('api: defineAsyncComponent', () => {
     await timeout(16)
     expect(handler).toHaveBeenCalled()
     expect(handler.mock.calls[0][0].message).toMatch(
-      `Async component timed out after 16ms.`
+      `Async component timed out after 16ms.`,
     )
     // should still display loading
     expect(serializeInner(root)).toBe('loading')
@@ -448,7 +448,7 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(_resolve => {
           resolve = _resolve as any
-        })
+        }),
     )
 
     const root = nodeOps.createElement('div')
@@ -456,8 +456,8 @@ describe('api: defineAsyncComponent', () => {
       render: () =>
         h(Suspense, null, {
           default: () => h('div', [h(Foo), ' & ', h(Foo)]),
-          fallback: () => 'loading'
-        })
+          fallback: () => 'loading',
+        }),
     })
 
     app.mount(root)
@@ -475,7 +475,7 @@ describe('api: defineAsyncComponent', () => {
         new Promise(_resolve => {
           resolve = _resolve as any
         }),
-      suspensible: false
+      suspensible: false,
     })
 
     const root = nodeOps.createElement('div')
@@ -483,8 +483,8 @@ describe('api: defineAsyncComponent', () => {
       render: () =>
         h(Suspense, null, {
           default: () => h('div', [h(Foo), ' & ', h(Foo)]),
-          fallback: () => 'loading'
-        })
+          fallback: () => 'loading',
+        }),
     })
 
     app.mount(root)
@@ -502,7 +502,7 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise((_resolve, _reject) => {
           reject = _reject
-        })
+        }),
     )
 
     const root = nodeOps.createElement('div')
@@ -510,8 +510,8 @@ describe('api: defineAsyncComponent', () => {
       render: () =>
         h(Suspense, null, {
           default: () => h('div', [h(Foo), ' & ', h(Foo)]),
-          fallback: () => 'loading'
-        })
+          fallback: () => 'loading',
+        }),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -543,12 +543,12 @@ describe('api: defineAsyncComponent', () => {
         } else {
           fail()
         }
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -587,12 +587,12 @@ describe('api: defineAsyncComponent', () => {
         } else {
           fail()
         }
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -627,12 +627,12 @@ describe('api: defineAsyncComponent', () => {
         } else {
           fail()
         }
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -663,14 +663,14 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
 
     const fooRef = ref<any>(null)
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     createApp({
-      render: () => (toggle.value ? h(Foo, { ref: fooRef }) : null)
+      render: () => (toggle.value ? h(Foo, { ref: fooRef }) : null),
     }).mount(root)
 
     expect(serializeInner(root)).toBe('<!---->')
@@ -679,10 +679,10 @@ describe('api: defineAsyncComponent', () => {
     resolve!({
       data() {
         return {
-          id: 'foo'
+          id: 'foo',
         }
       },
-      render: () => 'resolved'
+      render: () => 'resolved',
     })
     // first time resolve, wait for macro task since there are multiple
     // microtasks / .then() calls
@@ -709,7 +709,7 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
 
     const fooRef = ref<any>(null)
@@ -719,7 +719,7 @@ describe('api: defineAsyncComponent', () => {
     const root = nodeOps.createElement('div')
     createApp({
       render: () =>
-        toggle.value ? [h(Foo, { ref: fooRef }), updater.value] : null
+        toggle.value ? [h(Foo, { ref: fooRef }), updater.value] : null,
     }).mount(root)
 
     expect(serializeInner(root)).toBe('<!---->0')
@@ -728,10 +728,10 @@ describe('api: defineAsyncComponent', () => {
     resolve!({
       data() {
         return {
-          id: 'foo'
+          id: 'foo',
         }
       },
-      render: () => 'resolved'
+      render: () => 'resolved',
     })
 
     await timeout()
@@ -755,7 +755,7 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
     const updater = ref(0)
 
@@ -765,14 +765,14 @@ describe('api: defineAsyncComponent', () => {
       onVnodeBeforeUpdate: vi.fn(),
       onVnodeUpdated: vi.fn(),
       onVnodeBeforeUnmount: vi.fn(),
-      onVnodeUnmounted: vi.fn()
+      onVnodeUnmounted: vi.fn(),
     }
 
     const toggle = ref(true)
 
     const root = nodeOps.createElement('div')
     createApp({
-      render: () => (toggle.value ? [h(Foo, vnodeHooks), updater.value] : null)
+      render: () => (toggle.value ? [h(Foo, vnodeHooks), updater.value] : null),
     }).mount(root)
 
     expect(serializeInner(root)).toBe('<!---->0')
@@ -780,10 +780,10 @@ describe('api: defineAsyncComponent', () => {
     resolve!({
       data() {
         return {
-          id: 'foo'
+          id: 'foo',
         }
       },
-      render: () => 'resolved'
+      render: () => 'resolved',
     })
 
     await timeout()
@@ -812,7 +812,7 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
 
     const Bar = defineAsyncComponent(() => Promise.resolve(() => 'Bar'))
@@ -820,7 +820,7 @@ describe('api: defineAsyncComponent', () => {
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(KeepAlive, [toggle.value ? h(Foo) : h(Bar)])
+      render: () => h(KeepAlive, [toggle.value ? h(Foo) : h(Bar)]),
     })
 
     app.mount(root)
@@ -832,7 +832,7 @@ describe('api: defineAsyncComponent', () => {
           spy()
         })
         return () => 'Foo'
-      }
+      },
     })
 
     await timeout()
@@ -843,4 +843,37 @@ describe('api: defineAsyncComponent', () => {
     await timeout()
     expect(serializeInner(root)).toBe('Bar')
   })
+
+  // 11916
+  test('with KeepAlive + include', async () => {
+    const spy = vi.fn()
+    let resolve: (comp: Component) => void
+
+    const Foo = defineAsyncComponent(
+      () =>
+        new Promise(r => {
+          resolve = r as any
+        }),
+    )
+
+    const root = nodeOps.createElement('div')
+    const app = createApp({
+      render: () => h(KeepAlive, { include: 'Foo' }, [h(Foo)]),
+    })
+
+    app.mount(root)
+    await nextTick()
+
+    resolve!({
+      name: 'Foo',
+      setup() {
+        onActivated(spy)
+        return () => 'Foo'
+      },
+    })
+
+    await timeout()
+    expect(serializeInner(root)).toBe('Foo')
+    expect(spy).toBeCalledTimes(1)
+  })
 })
diff --git a/packages/runtime-core/__tests__/apiCreateApp.spec.ts b/packages/runtime-core/__tests__/apiCreateApp.spec.ts
index 637167931..b578fa55c 100644
--- a/packages/runtime-core/__tests__/apiCreateApp.spec.ts
+++ b/packages/runtime-core/__tests__/apiCreateApp.spec.ts
@@ -1,17 +1,20 @@
 import {
+  type Plugin,
   createApp,
+  defineComponent,
+  getCurrentInstance,
   h,
-  nodeOps,
-  serializeInner,
-  provide,
   inject,
+  nextTick,
+  nodeOps,
+  onMounted,
+  provide,
+  ref,
   resolveComponent,
   resolveDirective,
+  serializeInner,
+  watch,
   withDirectives,
-  Plugin,
-  ref,
-  getCurrentInstance,
-  defineComponent
 } from '@vue/runtime-test'
 
 describe('api: createApp', () => {
@@ -19,12 +22,12 @@ describe('api: createApp', () => {
     const Comp = defineComponent({
       props: {
         count: {
-          default: 0
-        }
+          default: 0,
+        },
       },
       setup(props) {
         return () => props.count
-      }
+      },
     })
 
     const root1 = nodeOps.createElement('div')
@@ -33,7 +36,7 @@ describe('api: createApp', () => {
     //#5571 mount multiple apps to the same host element
     createApp(Comp).mount(root1)
     expect(
-      `There is already an app instance mounted on the host container`
+      `There is already an app instance mounted on the host container`,
     ).toHaveBeenWarned()
 
     // mount with props
@@ -53,12 +56,12 @@ describe('api: createApp', () => {
     const Comp = defineComponent({
       props: {
         count: {
-          default: 0
-        }
+          default: 0,
+        },
       },
       setup(props) {
         return () => props.count
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -80,7 +83,7 @@ describe('api: createApp', () => {
         // test override
         provide('foo', 3)
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -91,7 +94,7 @@ describe('api: createApp', () => {
           inject('__proto__')
         } catch (e: any) {}
         return () => `${foo},${bar}`
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -113,12 +116,32 @@ describe('api: createApp', () => {
     const app = createApp({
       setup() {
         provide('foo', 'should not be seen')
+
+        // nested createApp
+        const childApp = createApp({
+          setup() {
+            provide('foo', 'foo from child')
+          },
+        })
+
+        childApp.provide('foo', 2)
+        expect(childApp.runWithContext(() => inject('foo'))).toBe(2)
+
         return () => h('div')
-      }
+      },
     })
     app.provide('foo', 1)
 
     expect(app.runWithContext(() => inject('foo'))).toBe(1)
+    const root = nodeOps.createElement('div')
+    app.mount(root)
+
+    expect(
+      app.runWithContext(() => {
+        app.runWithContext(() => {})
+        return inject('foo')
+      }),
+    ).toBe(1)
 
     // ensure the context is restored
     inject('foo')
@@ -129,17 +152,17 @@ describe('api: createApp', () => {
     const Root = {
       // local override
       components: {
-        BarBaz: () => 'barbaz-local!'
+        BarBaz: () => 'barbaz-local!',
       },
       setup() {
         // resolve in setup
-        const FooBar = resolveComponent('foo-bar') as any
+        const FooBar = resolveComponent('foo-bar')
         return () => {
           // resolve in render
-          const BarBaz = resolveComponent('bar-baz') as any
+          const BarBaz = resolveComponent('bar-baz')
           return h('div', [h(FooBar), h(BarBaz)])
         }
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -152,7 +175,7 @@ describe('api: createApp', () => {
 
     app.component('BarBaz', () => 'barbaz!')
     expect(
-      'Component "BarBaz" has already been registered in target app.'
+      'Component "BarBaz" has already been registered in target app.',
     ).toHaveBeenWarnedTimes(1)
 
     const root = nodeOps.createElement('div')
@@ -168,17 +191,17 @@ describe('api: createApp', () => {
     const Root = {
       // local override
       directives: {
-        BarBaz: { mounted: spy3 }
+        BarBaz: { mounted: spy3 },
       },
       setup() {
         // resolve in setup
-        const FooBar = resolveDirective('foo-bar')!
+        const FooBar = resolveDirective('foo-bar')
         return () => {
           // resolve in render
-          const BarBaz = resolveDirective('bar-baz')!
+          const BarBaz = resolveDirective('bar-baz')
           return withDirectives(h('div'), [[FooBar], [BarBaz]])
         }
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -188,14 +211,14 @@ describe('api: createApp', () => {
     expect(app.directive('FooBar')).toBe(FooBar)
 
     app.directive('BarBaz', {
-      mounted: spy2
+      mounted: spy2,
     })
 
     app.directive('BarBaz', {
-      mounted: spy2
+      mounted: spy2,
     })
     expect(
-      'Directive "BarBaz" has already been registered in target app.'
+      'Directive "BarBaz" has already been registered in target app.',
     ).toHaveBeenWarnedTimes(1)
 
     const root = nodeOps.createElement('div')
@@ -206,7 +229,7 @@ describe('api: createApp', () => {
 
     app.directive('bind', FooBar)
     expect(
-      `Do not use built-in directive ids as custom directive id: bind`
+      `Do not use built-in directive ids as custom directive id: bind`,
     ).toHaveBeenWarned()
   })
 
@@ -215,7 +238,7 @@ describe('api: createApp', () => {
     const mixinA = {
       data() {
         return {
-          a: 1
+          a: 1,
         }
       },
       created(this: any) {
@@ -226,13 +249,13 @@ describe('api: createApp', () => {
       },
       mounted() {
         calls.push('mixinA mounted')
-      }
+      },
     }
     const mixinB = {
       name: 'mixinB',
       data() {
         return {
-          b: 2
+          b: 2,
         }
       },
       created(this: any) {
@@ -243,12 +266,12 @@ describe('api: createApp', () => {
       },
       mounted() {
         calls.push('mixinB mounted')
-      }
+      },
     }
     const Comp = {
       data() {
         return {
-          c: 3
+          c: 3,
         }
       },
       created(this: any) {
@@ -262,7 +285,7 @@ describe('api: createApp', () => {
       },
       render(this: any) {
         return `${this.a}${this.b}${this.c}`
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -272,10 +295,10 @@ describe('api: createApp', () => {
     app.mixin(mixinA)
     app.mixin(mixinB)
     expect(
-      'Mixin has already been applied to target app'
+      'Mixin has already been applied to target app',
     ).toHaveBeenWarnedTimes(2)
     expect(
-      'Mixin has already been applied to target app: mixinB'
+      'Mixin has already been applied to target app: mixinB',
     ).toHaveBeenWarnedTimes(1)
 
     const root = nodeOps.createElement('div')
@@ -288,14 +311,14 @@ describe('api: createApp', () => {
       'comp created',
       'mixinA mounted',
       'mixinB mounted',
-      'comp mounted'
+      'comp mounted',
     ])
   })
 
   test('use', () => {
     const PluginA: Plugin = app => app.provide('foo', 1)
     const PluginB: Plugin = {
-      install: (app, arg1, arg2) => app.provide('bar', arg1 + arg2)
+      install: (app, arg1, arg2) => app.provide('bar', arg1 + arg2),
     }
     class PluginC {
       someProperty = {}
@@ -310,7 +333,7 @@ describe('api: createApp', () => {
         const foo = inject('foo')
         const bar = inject('bar')
         return () => `${foo},${bar}`
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -324,23 +347,53 @@ describe('api: createApp', () => {
 
     app.use(PluginA)
     expect(
-      `Plugin has already been applied to target app`
+      `Plugin has already been applied to target app`,
     ).toHaveBeenWarnedTimes(1)
 
     app.use(PluginD)
     expect(
       `A plugin must either be a function or an object with an "install" ` +
-        `function.`
+        `function.`,
     ).toHaveBeenWarnedTimes(1)
   })
 
+  test('onUnmount', () => {
+    const cleanup = vi.fn().mockName('plugin cleanup')
+    const PluginA: Plugin = app => {
+      app.provide('foo', 1)
+      app.onUnmount(cleanup)
+    }
+    const PluginB: Plugin = {
+      install: (app, arg1, arg2) => {
+        app.provide('bar', arg1 + arg2)
+        app.onUnmount(cleanup)
+      },
+    }
+
+    const app = createApp({
+      render: () => `Test`,
+    })
+    app.use(PluginA)
+    app.use(PluginB)
+
+    const root = nodeOps.createElement('div')
+    app.mount(root)
+
+    //also can be added after mount
+    app.onUnmount(cleanup)
+
+    app.unmount()
+
+    expect(cleanup).toHaveBeenCalledTimes(3)
+  })
+
   test('config.errorHandler', () => {
     const error = new Error()
     const count = ref(0)
 
     const handler = vi.fn((err, instance, info) => {
       expect(err).toBe(error)
-      expect((instance as any).count).toBe(count.value)
+      expect(instance.count).toBe(count.value)
       expect(info).toBe(`render function`)
     })
 
@@ -348,12 +401,12 @@ describe('api: createApp', () => {
       setup() {
         const count = ref(0)
         return {
-          count
+          count,
         }
       },
       render() {
         throw error
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -374,7 +427,7 @@ describe('api: createApp', () => {
       name: 'Hello',
       setup() {
         ctx = getCurrentInstance()
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -391,80 +444,75 @@ describe('api: createApp', () => {
         name: 'div',
         render() {
           return null
-        }
+        },
       }
 
       const app = createApp(Root)
 
       Object.defineProperty(app.config, 'isNativeTag', {
         value: isNativeTag,
-        writable: false
+        writable: false,
       })
 
       app.mount(nodeOps.createElement('div'))
       expect(
-        `Do not use built-in or reserved HTML elements as component id: div`
+        `Do not use built-in or reserved HTML elements as component id: div`,
       ).toHaveBeenWarned()
     })
 
     test('Component.components', () => {
       const Root = {
         components: {
-          div: () => 'div'
+          div: () => 'div',
         },
         render() {
           return null
-        }
+        },
       }
 
       const app = createApp(Root)
       Object.defineProperty(app.config, 'isNativeTag', {
         value: isNativeTag,
-        writable: false
+        writable: false,
       })
 
       app.mount(nodeOps.createElement('div'))
       expect(
-        `Do not use built-in or reserved HTML elements as component id: div`
+        `Do not use built-in or reserved HTML elements as component id: div`,
       ).toHaveBeenWarned()
     })
 
     test('Component.directives', () => {
       const Root = {
         directives: {
-          bind: () => {}
+          bind: () => {},
         },
         render() {
           return null
-        }
+        },
       }
 
       const app = createApp(Root)
-      Object.defineProperty(app.config, 'isNativeTag', {
-        value: isNativeTag,
-        writable: false
-      })
-
       app.mount(nodeOps.createElement('div'))
       expect(
-        `Do not use built-in directive ids as custom directive id: bind`
+        `Do not use built-in directive ids as custom directive id: bind`,
       ).toHaveBeenWarned()
     })
 
     test('register using app.component', () => {
       const app = createApp({
-        render() {}
+        render() {},
       })
 
       Object.defineProperty(app.config, 'isNativeTag', {
         value: isNativeTag,
-        writable: false
+        writable: false,
       })
 
       app.component('div', () => 'div')
       app.mount(nodeOps.createElement('div'))
       expect(
-        `Do not use built-in or reserved HTML elements as component id: div`
+        `Do not use built-in or reserved HTML elements as component id: div`,
       ).toHaveBeenWarned()
     })
   })
@@ -478,12 +526,12 @@ describe('api: createApp', () => {
       foo: 'local',
       beforeCreate() {
         merged = this.$options.foo
-      }
+      },
     })
 
     const app = createApp(App)
     app.mixin({
-      foo: 'global'
+      foo: 'global',
     })
     app.config.optionMergeStrategies.foo = (a, b) => (a ? `${a},` : ``) + b
 
@@ -495,7 +543,7 @@ describe('api: createApp', () => {
     const app = createApp({
       render() {
         return this.foo
-      }
+      },
     })
     app.config.globalProperties.foo = 'hello'
     const root = nodeOps.createElement('div')
@@ -503,25 +551,42 @@ describe('api: createApp', () => {
     expect(serializeInner(root)).toBe('hello')
   })
 
+  test('config.throwUnhandledErrorInProduction', () => {
+    __DEV__ = false
+    try {
+      const err = new Error()
+      const app = createApp({
+        setup() {
+          throw err
+        },
+      })
+      app.config.throwUnhandledErrorInProduction = true
+      const root = nodeOps.createElement('div')
+      expect(() => app.mount(root)).toThrow(err)
+    } finally {
+      __DEV__ = true
+    }
+  })
+
   test('return property "_" should not overwrite "ctx._", __isScriptSetup: false', () => {
     const Comp = defineComponent({
       setup() {
         return {
-          _: ref(0) // return property "_" should not overwrite "ctx._"
+          _: ref(0), // return property "_" should not overwrite "ctx._"
         }
       },
       render() {
         return h('input', {
-          ref: 'input'
+          ref: 'input',
         })
-      }
+      },
     })
 
     const root1 = nodeOps.createElement('div')
     createApp(Comp).mount(root1)
 
     expect(
-      `setup() return property "_" should not start with "$" or "_" which are reserved prefixes for Vue internals.`
+      `setup() return property "_" should not start with "$" or "_" which are reserved prefixes for Vue internals.`,
     ).toHaveBeenWarned()
   })
 
@@ -530,14 +595,14 @@ describe('api: createApp', () => {
       setup() {
         return {
           _: ref(0), // return property "_" should not overwrite "ctx._"
-          __isScriptSetup: true // mock __isScriptSetup = true
+          __isScriptSetup: true, // mock __isScriptSetup = true
         }
       },
       render() {
         return h('input', {
-          ref: 'input'
+          ref: 'input',
         })
-      }
+      },
     })
 
     const root1 = nodeOps.createElement('div')
@@ -547,10 +612,39 @@ describe('api: createApp', () => {
     app.$refs.input
 
     expect(
-      `TypeError: Cannot read property '__isScriptSetup' of undefined`
+      `TypeError: Cannot read property '__isScriptSetup' of undefined`,
     ).not.toHaveBeenWarned()
   })
 
+  // #10005
+  test('flush order edge case on nested createApp', async () => {
+    const order: string[] = []
+    const App = defineComponent({
+      setup(props) {
+        const message = ref('m1')
+        watch(
+          message,
+          () => {
+            order.push('post watcher')
+          },
+          { flush: 'post' },
+        )
+        onMounted(() => {
+          message.value = 'm2'
+          createApp(() => '').mount(nodeOps.createElement('div'))
+        })
+        return () => {
+          order.push('render')
+          return h('div', [message.value])
+        }
+      },
+    })
+
+    createApp(App).mount(nodeOps.createElement('div'))
+    await nextTick()
+    expect(order).toMatchObject(['render', 'render', 'post watcher'])
+  })
+
   // config.compilerOptions is tested in packages/vue since it is only
   // supported in the full build.
 })
diff --git a/packages/runtime-core/__tests__/apiExpose.spec.ts b/packages/runtime-core/__tests__/apiExpose.spec.ts
index b912db005..d2e425070 100644
--- a/packages/runtime-core/__tests__/apiExpose.spec.ts
+++ b/packages/runtime-core/__tests__/apiExpose.spec.ts
@@ -8,20 +8,20 @@ describe('api: expose', () => {
       setup(_, { expose }) {
         expose({
           foo: 1,
-          bar: ref(2)
+          bar: ref(2),
         })
         return {
           bar: ref(3),
-          baz: ref(4)
+          baz: ref(4),
         }
-      }
+      },
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -36,23 +36,23 @@ describe('api: expose', () => {
       render() {},
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       setup() {
         return {
           bar: ref(2),
-          baz: ref(3)
+          baz: ref(3),
         }
       },
-      expose: ['foo', 'bar']
+      expose: ['foo', 'bar'],
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -68,25 +68,25 @@ describe('api: expose', () => {
       expose: ['foo'],
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       setup(_, { expose }) {
         expose({
-          bar: ref(2)
+          bar: ref(2),
         })
         return {
           bar: ref(3),
-          baz: ref(4)
+          baz: ref(4),
         }
-      }
+      },
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -102,16 +102,16 @@ describe('api: expose', () => {
       expose: [],
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
-      }
+      },
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -125,16 +125,16 @@ describe('api: expose', () => {
       expose: [],
       setup(_, { expose }) {
         expose({
-          foo: 1
+          foo: 1,
         })
-      }
+      },
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -149,22 +149,22 @@ describe('api: expose', () => {
         expect((this.$parent! as any).bar).toBe(undefined)
         expect((this.$root! as any).foo).toBe(1)
         expect((this.$root! as any).bar).toBe(undefined)
-      }
+      },
     })
 
     const Parent = defineComponent({
       expose: [],
       setup(_, { expose }) {
         expose({
-          foo: 1
+          foo: 1,
         })
         return {
-          bar: 2
+          bar: 2,
         }
       },
       render() {
         return h(Child)
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -174,15 +174,15 @@ describe('api: expose', () => {
     const Component = defineComponent({
       setup(_, { expose }) {
         expose({
-          foo: 1
+          foo: 1,
         })
         return {
-          bar: 2
+          bar: 2,
         }
       },
       render() {
         return h('div')
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     const vm = createApp(Component).mount(root) as any
@@ -194,7 +194,7 @@ describe('api: expose', () => {
     const GrandChild = defineComponent({
       render() {
         return h('div')
-      }
+      },
     })
 
     const grandChildRef = ref()
@@ -204,17 +204,17 @@ describe('api: expose', () => {
       },
       setup(_, { expose }) {
         expose({
-          foo: 42
+          foo: 42,
         })
         return () => h(GrandChild, { ref: grandChildRef })
-      }
+      },
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -231,11 +231,11 @@ describe('api: expose', () => {
       setup(_, { expose }) {
         expose(ref(1))
         return () => null
-      }
+      },
     })
     render(h(Comp), nodeOps.createElement('div'))
     expect(
-      'expose() should be passed a plain object, received ref'
+      'expose() should be passed a plain object, received ref',
     ).toHaveBeenWarned()
   })
 
@@ -244,11 +244,11 @@ describe('api: expose', () => {
       setup(_, { expose }) {
         expose(['focus'])
         return () => null
-      }
+      },
     })
     render(h(Comp), nodeOps.createElement('div'))
     expect(
-      'expose() should be passed a plain object, received array'
+      'expose() should be passed a plain object, received array',
     ).toHaveBeenWarned()
   })
 
@@ -257,11 +257,11 @@ describe('api: expose', () => {
       setup(_, { expose }) {
         expose(() => null)
         return () => null
-      }
+      },
     })
     render(h(Comp), nodeOps.createElement('div'))
     expect(
-      'expose() should be passed a plain object, received function'
+      'expose() should be passed a plain object, received function',
     ).toHaveBeenWarned()
   })
 })
diff --git a/packages/runtime-core/__tests__/apiInject.spec.ts b/packages/runtime-core/__tests__/apiInject.spec.ts
index a7aae7ebf..e5c9267e5 100644
--- a/packages/runtime-core/__tests__/apiInject.spec.ts
+++ b/packages/runtime-core/__tests__/apiInject.spec.ts
@@ -1,37 +1,36 @@
 import {
-  h,
-  provide,
-  inject,
-  InjectionKey,
-  ref,
-  nextTick,
-  Ref,
-  readonly,
-  reactive,
+  type InjectionKey,
+  type Ref,
   defineComponent,
-  hasInjectionContext
+  h,
+  hasInjectionContext,
+  inject,
+  nextTick,
+  provide,
+  reactive,
+  readonly,
+  ref,
 } from '../src/index'
-import { render, nodeOps, serialize, createApp } from '@vue/runtime-test'
+import { createApp, nodeOps, render, serialize } from '@vue/runtime-test'
 
-// reference: https://vue-composition-api-rfc.netlify.com/api.html#provide-inject
 describe('api: provide/inject', () => {
   it('string keys', () => {
     const Provider = {
       setup() {
         provide('foo', 1)
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
       setup() {
         const foo = inject('foo')
         return () => foo
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -47,18 +46,18 @@ describe('api: provide/inject', () => {
       setup() {
         provide(key, 1)
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
       setup() {
         const foo = inject(key) || 1
         return () => foo + 1
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -71,11 +70,11 @@ describe('api: provide/inject', () => {
       setup() {
         provide('foo', 'foo')
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
@@ -85,7 +84,7 @@ describe('api: provide/inject', () => {
         // default value should be used if value is not provided
         const bar = inject('bar', 'bar')
         return () => foo + bar
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -97,7 +96,7 @@ describe('api: provide/inject', () => {
     const Provider = {
       setup() {
         return () => h(Consumer)
-      }
+      },
     }
 
     const Consumer = defineComponent({
@@ -107,13 +106,12 @@ describe('api: provide/inject', () => {
           from: 'foo',
           default() {
             return this!.$options.name
-          }
-        }
+          },
+        },
       },
       render() {
-        // @ts-ignore
         return this.foo
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -127,7 +125,7 @@ describe('api: provide/inject', () => {
         provide('foo', 'foo')
         provide('bar', 'bar')
         return () => h(ProviderTwo)
-      }
+      },
     }
 
     const ProviderTwo = {
@@ -136,7 +134,7 @@ describe('api: provide/inject', () => {
         provide('foo', 'fooOverride')
         provide('baz', 'baz')
         return () => h(Consumer)
-      }
+      },
     }
 
     const Consumer = {
@@ -145,7 +143,7 @@ describe('api: provide/inject', () => {
         const bar = inject('bar')
         const baz = inject('baz')
         return () => [foo, bar, baz].join(',')
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -160,18 +158,18 @@ describe('api: provide/inject', () => {
       setup() {
         provide('count', count)
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
       setup() {
         const count = inject<Ref<number>>('count')!
         return () => count.value
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -190,11 +188,11 @@ describe('api: provide/inject', () => {
       setup() {
         provide('count', readonly(count))
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
@@ -203,7 +201,7 @@ describe('api: provide/inject', () => {
         // should not work
         count.value++
         return () => count.value
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -211,7 +209,7 @@ describe('api: provide/inject', () => {
     expect(serialize(root)).toBe(`<div>1</div>`)
 
     expect(
-      `Set operation on key "value" failed: target is readonly`
+      `Set operation on key "value" failed: target is readonly`,
     ).toHaveBeenWarned()
 
     // source mutation should still work
@@ -227,18 +225,18 @@ describe('api: provide/inject', () => {
       setup() {
         provide('state', rootState)
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
       setup() {
         const state = inject<typeof rootState>('state')!
         return () => state.count
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -257,11 +255,11 @@ describe('api: provide/inject', () => {
       setup() {
         provide('state', readonly(rootState))
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
@@ -270,7 +268,7 @@ describe('api: provide/inject', () => {
         // should not work
         state.count++
         return () => state.count
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -278,7 +276,7 @@ describe('api: provide/inject', () => {
     expect(serialize(root)).toBe(`<div>1</div>`)
 
     expect(
-      `Set operation on key "count" failed: target is readonly`
+      `Set operation on key "count" failed: target is readonly`,
     ).toHaveBeenWarned()
 
     rootState.count++
@@ -290,11 +288,11 @@ describe('api: provide/inject', () => {
     const Provider = {
       setup() {
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
@@ -302,7 +300,7 @@ describe('api: provide/inject', () => {
         const foo = inject('foo')
         expect(foo).toBeUndefined()
         return () => foo
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -315,18 +313,18 @@ describe('api: provide/inject', () => {
     const Provider = {
       setup() {
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
       setup() {
         const foo = inject('foo', undefined)
         return () => foo
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -341,7 +339,7 @@ describe('api: provide/inject', () => {
         provide('foo', 'foo')
         const injection = inject('foo', null)
         return () => injection
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -360,7 +358,7 @@ describe('api: provide/inject', () => {
         setup() {
           expect(hasInjectionContext()).toBe(true)
           return () => null
-        }
+        },
       }
 
       const root = nodeOps.createElement('div')
diff --git a/packages/runtime-core/__tests__/apiLifecycle.spec.ts b/packages/runtime-core/__tests__/apiLifecycle.spec.ts
index b61632ae3..45ea3ac39 100644
--- a/packages/runtime-core/__tests__/apiLifecycle.spec.ts
+++ b/packages/runtime-core/__tests__/apiLifecycle.spec.ts
@@ -1,24 +1,28 @@
 import {
-  onBeforeMount,
+  KeepAlive,
+  TrackOpTypes,
   h,
+  nextTick,
   nodeOps,
+  onActivated,
+  onBeforeMount,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
+  onRenderTracked,
+  onRenderTriggered,
+  onUnmounted,
+  onUpdated,
+  reactive,
+  ref,
   render,
   serializeInner,
-  onMounted,
-  ref,
-  onBeforeUpdate,
-  nextTick,
-  onUpdated,
-  onBeforeUnmount,
-  onUnmounted,
-  onRenderTracked,
-  reactive,
-  TrackOpTypes,
-  onRenderTriggered
 } from '@vue/runtime-test'
-import { ITERATE_KEY, DebuggerEvent, TriggerOpTypes } from '@vue/reactivity'
-
-// reference: https://vue-composition-api-rfc.netlify.com/api.html#lifecycle-hooks
+import {
+  type DebuggerEvent,
+  ITERATE_KEY,
+  TriggerOpTypes,
+} from '@vue/reactivity'
 
 describe('api: lifecycle hooks', () => {
   it('onBeforeMount', () => {
@@ -32,10 +36,12 @@ describe('api: lifecycle hooks', () => {
       setup() {
         onBeforeMount(fn)
         return () => h('div')
-      }
+      },
     }
     render(h(Comp), root)
     expect(fn).toHaveBeenCalledTimes(1)
+    // #10863
+    expect(fn).toHaveBeenCalledWith()
   })
 
   it('onMounted', () => {
@@ -49,7 +55,7 @@ describe('api: lifecycle hooks', () => {
       setup() {
         onMounted(fn)
         return () => h('div')
-      }
+      },
     }
     render(h(Comp), root)
     expect(fn).toHaveBeenCalledTimes(1)
@@ -67,7 +73,7 @@ describe('api: lifecycle hooks', () => {
       setup() {
         onBeforeUpdate(fn)
         return () => h('div', count.value)
-      }
+      },
     }
     render(h(Comp), root)
 
@@ -94,7 +100,7 @@ describe('api: lifecycle hooks', () => {
           renderSpy()
           return h('div', count.value)
         }
-      }
+      },
     }
     render(h(Comp), root)
     expect(renderSpy).toHaveBeenCalledTimes(1)
@@ -118,7 +124,7 @@ describe('api: lifecycle hooks', () => {
       setup() {
         onUpdated(fn)
         return () => h('div', count.value)
-      }
+      },
     }
     render(h(Comp), root)
 
@@ -138,14 +144,14 @@ describe('api: lifecycle hooks', () => {
     const Comp = {
       setup() {
         return () => (toggle.value ? h(Child) : null)
-      }
+      },
     }
 
     const Child = {
       setup() {
         onBeforeUnmount(fn)
         return () => h('div')
-      }
+      },
     }
 
     render(h(Comp), root)
@@ -166,14 +172,14 @@ describe('api: lifecycle hooks', () => {
     const Comp = {
       setup() {
         return () => (toggle.value ? h(Child) : null)
-      }
+      },
     }
 
     const Child = {
       setup() {
         onUnmounted(fn)
         return () => h('div')
-      }
+      },
     }
 
     render(h(Comp), root)
@@ -194,7 +200,7 @@ describe('api: lifecycle hooks', () => {
     const Comp = {
       setup() {
         return () => (toggle.value ? h(Child) : null)
-      }
+      },
     }
 
     const Child = {
@@ -203,7 +209,7 @@ describe('api: lifecycle hooks', () => {
           onBeforeUnmount(fn)
         })
         return () => h('div')
-      }
+      },
     }
 
     render(h(Comp), root)
@@ -227,7 +233,7 @@ describe('api: lifecycle hooks', () => {
         onBeforeUnmount(() => calls.push('root onBeforeUnmount'))
         onUnmounted(() => calls.push('root onUnmounted'))
         return () => h(Mid, { count: count.value })
-      }
+      },
     }
 
     const Mid = {
@@ -240,7 +246,7 @@ describe('api: lifecycle hooks', () => {
         onBeforeUnmount(() => calls.push('mid onBeforeUnmount'))
         onUnmounted(() => calls.push('mid onUnmounted'))
         return () => h(Child, { count: props.count })
-      }
+      },
     }
 
     const Child = {
@@ -253,7 +259,7 @@ describe('api: lifecycle hooks', () => {
         onBeforeUnmount(() => calls.push('child onBeforeUnmount'))
         onUnmounted(() => calls.push('child onUnmounted'))
         return () => h('div', props.count)
-      }
+      },
     }
 
     // mount
@@ -264,7 +270,7 @@ describe('api: lifecycle hooks', () => {
       'child onBeforeMount',
       'child onMounted',
       'mid onMounted',
-      'root onMounted'
+      'root onMounted',
     ])
 
     calls.length = 0
@@ -278,7 +284,7 @@ describe('api: lifecycle hooks', () => {
       'child onBeforeUpdate',
       'child onUpdated',
       'mid onUpdated',
-      'root onUpdated'
+      'root onUpdated',
     ])
 
     calls.length = 0
@@ -291,7 +297,7 @@ describe('api: lifecycle hooks', () => {
       'child onBeforeUnmount',
       'child onUnmounted',
       'mid onUnmounted',
-      'root onUnmounted'
+      'root onUnmounted',
     ])
   })
 
@@ -307,7 +313,7 @@ describe('api: lifecycle hooks', () => {
         onRenderTracked(onTrack)
         return () =>
           h('div', [obj.foo, 'bar' in obj, Object.keys(obj).join('')])
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -316,18 +322,18 @@ describe('api: lifecycle hooks', () => {
       {
         target: obj,
         type: TrackOpTypes.GET,
-        key: 'foo'
+        key: 'foo',
       },
       {
         target: obj,
         type: TrackOpTypes.HAS,
-        key: 'bar'
+        key: 'bar',
       },
       {
         target: obj,
         type: TrackOpTypes.ITERATE,
-        key: ITERATE_KEY
-      }
+        key: ITERATE_KEY,
+      },
     ])
   })
 
@@ -346,7 +352,7 @@ describe('api: lifecycle hooks', () => {
         onRenderTriggered(onTrigger)
         return () =>
           h('div', [obj.foo, 'bar' in obj, Object.keys(obj).join('')])
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -358,7 +364,7 @@ describe('api: lifecycle hooks', () => {
       type: TriggerOpTypes.SET,
       key: 'foo',
       oldValue: 1,
-      newValue: 2
+      newValue: 2,
     })
 
     delete obj.bar
@@ -367,7 +373,7 @@ describe('api: lifecycle hooks', () => {
     expect(events[1]).toMatchObject({
       type: TriggerOpTypes.DELETE,
       key: 'bar',
-      oldValue: 2
+      oldValue: 2,
     })
     ;(obj as any).baz = 3
     await nextTick()
@@ -375,7 +381,7 @@ describe('api: lifecycle hooks', () => {
     expect(events[2]).toMatchObject({
       type: TriggerOpTypes.ADD,
       key: 'baz',
-      newValue: 3
+      newValue: 3,
     })
   })
 
@@ -385,14 +391,14 @@ describe('api: lifecycle hooks', () => {
     const Comp = {
       setup() {
         return () => (toggle.value ? [h(Child), h(Child)] : null)
-      }
+      },
     }
     const Child = {
       setup() {
         onMounted(fn)
         onBeforeUnmount(fn)
         return () => h('div')
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -401,4 +407,60 @@ describe('api: lifecycle hooks', () => {
     await nextTick()
     expect(fn).toHaveBeenCalledTimes(4)
   })
+
+  it('immediately trigger unmount during rendering', async () => {
+    const fn = vi.fn()
+    const toggle = ref(false)
+
+    const Child = {
+      setup() {
+        onMounted(fn)
+        // trigger unmount immediately
+        toggle.value = false
+        return () => h('div')
+      },
+    }
+
+    const Comp = {
+      setup() {
+        return () => (toggle.value ? [h(Child)] : null)
+      },
+    }
+
+    render(h(Comp), nodeOps.createElement('div'))
+
+    toggle.value = true
+    await nextTick()
+    expect(fn).toHaveBeenCalledTimes(0)
+  })
+
+  it('immediately trigger unmount during rendering(with KeepAlive)', async () => {
+    const mountedSpy = vi.fn()
+    const activeSpy = vi.fn()
+    const toggle = ref(false)
+
+    const Child = {
+      setup() {
+        onMounted(mountedSpy)
+        onActivated(activeSpy)
+
+        // trigger unmount immediately
+        toggle.value = false
+        return () => h('div')
+      },
+    }
+
+    const Comp = {
+      setup() {
+        return () => h(KeepAlive, [toggle.value ? h(Child) : null])
+      },
+    }
+
+    render(h(Comp), nodeOps.createElement('div'))
+
+    toggle.value = true
+    await nextTick()
+    expect(mountedSpy).toHaveBeenCalledTimes(0)
+    expect(activeSpy).toHaveBeenCalledTimes(0)
+  })
 })
diff --git a/packages/runtime-core/__tests__/apiOptions.spec.ts b/packages/runtime-core/__tests__/apiOptions.spec.ts
index 94f9db1b0..1d4e805ef 100644
--- a/packages/runtime-core/__tests__/apiOptions.spec.ts
+++ b/packages/runtime-core/__tests__/apiOptions.spec.ts
@@ -1,20 +1,20 @@
 /**
  * @vitest-environment jsdom
  */
-import { type Mock } from 'vitest'
+import type { Mock } from 'vitest'
 import {
+  type TestElement,
+  computed,
+  createApp,
+  defineComponent,
   h,
+  nextTick,
   nodeOps,
+  ref,
   render,
+  renderToString,
   serializeInner,
   triggerEvent,
-  TestElement,
-  nextTick,
-  renderToString,
-  ref,
-  defineComponent,
-  createApp,
-  computed
 } from '@vue/runtime-test'
 import { render as domRender } from 'vue'
 
@@ -23,7 +23,7 @@ describe('api: options', () => {
     const Comp = defineComponent({
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       render() {
@@ -32,11 +32,11 @@ describe('api: options', () => {
           {
             onClick: () => {
               this.foo++
-            }
+            },
           },
-          this.foo
+          this.foo,
         )
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -51,14 +51,14 @@ describe('api: options', () => {
     const Comp = defineComponent({
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       computed: {
         bar(): number {
           return this.foo + 1
         },
-        baz: (vm: any): number => vm.bar + 1
+        baz: (vm: any): number => vm.bar + 1,
       },
       render() {
         return h(
@@ -66,11 +66,11 @@ describe('api: options', () => {
           {
             onClick: () => {
               this.foo++
-            }
+            },
           },
-          this.bar + this.baz
+          this.bar + this.baz,
         )
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -87,7 +87,7 @@ describe('api: options', () => {
         // #3300 method on ctx should be overwritable
         this.incBy = this.incBy.bind(this, 2)
         return {
-          foo: 1
+          foo: 1,
         }
       },
       methods: {
@@ -96,18 +96,18 @@ describe('api: options', () => {
         },
         incBy(n = 0) {
           this.foo += n
-        }
+        },
       },
       render() {
         return h(
           'div',
           {
             onClick: this.inc,
-            onFoo: this.incBy
+            onFoo: this.incBy,
           },
-          this.foo
+          this.foo,
         )
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -127,11 +127,11 @@ describe('api: options', () => {
       methods: {
         foo() {
           return 'foo'
-        }
+        },
       },
       render() {
         return this.foo()
-      }
+      },
     })
     app.config.globalProperties.foo = () => 'bar'
 
@@ -157,12 +157,12 @@ describe('api: options', () => {
           foo: 1,
           bar: 2,
           baz: {
-            qux: 3
+            qux: 3,
           },
           qux: 4,
           dot: {
-            path: 5
-          }
+            path: 5,
+          },
         }
       },
       watch: {
@@ -172,20 +172,20 @@ describe('api: options', () => {
         bar: spyB,
         baz: {
           handler: spyC,
-          deep: true
+          deep: true,
         },
         qux: {
-          handler: 'onQuxChange'
+          handler: 'onQuxChange',
         },
-        'dot.path': spyE
+        'dot.path': spyE,
       },
       methods: {
         onFooChange: spyA,
-        onQuxChange: spyD
+        onQuxChange: spyD,
       },
       render() {
         ctx = this
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -237,8 +237,8 @@ describe('api: options', () => {
           foo: 1,
           bar: 2,
           baz: {
-            qux: 3
-          }
+            qux: 3,
+          },
         }
       },
       watch: {
@@ -249,16 +249,16 @@ describe('api: options', () => {
         baz: [
           {
             handler: spyC,
-            deep: true
-          }
-        ]
+            deep: true,
+          },
+        ],
       },
       methods: {
-        onFooChange: spyA
+        onFooChange: spyA,
       },
       render() {
         ctx = this
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -290,32 +290,32 @@ describe('api: options', () => {
     const mixinA = {
       data() {
         return {
-          fromMixinA: ''
+          fromMixinA: '',
         }
       },
       watch: {
         obj: {
           handler(this: any, to: any) {
             this.fromMixinA = to
-          }
-        }
-      }
+          },
+        },
+      },
     }
 
     const mixinB = {
       data() {
         return {
-          fromMixinB: ''
+          fromMixinB: '',
         }
       },
       watch: {
-        obj: 'setMixinB'
+        obj: 'setMixinB',
       },
       methods: {
         setMixinB(this: any, to: any) {
           this.fromMixinB = to
-        }
-      }
+        },
+      },
     }
 
     let vm: any
@@ -324,16 +324,16 @@ describe('api: options', () => {
       mixins: [mixinA, mixinB],
       data: () => ({
         obj: 'foo',
-        fromComp: ''
+        fromComp: '',
       }),
       watch: {
         obj(this: any, to: any) {
           this.fromComp = to
-        }
+        },
       },
       mounted() {
         vm = this
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -351,13 +351,13 @@ describe('api: options', () => {
     const Root = defineComponent({
       data() {
         return {
-          a: 1
+          a: 1,
         }
       },
       provide() {
         return {
           a: this.a,
-          [symbolKey]: 2
+          [symbolKey]: 2,
         }
       },
       render() {
@@ -371,9 +371,9 @@ describe('api: options', () => {
           h(ChildG),
           h(ChildH),
           h(ChildI),
-          h(ChildJ)
+          h(ChildJ),
         ]
-      }
+      },
     })
 
     const defineChild = (injectOptions: any, injectedKey = 'b') =>
@@ -381,53 +381,53 @@ describe('api: options', () => {
         inject: injectOptions,
         render() {
           return this[injectedKey]
-        }
+        },
       }) as any
 
     const ChildA = defineChild(['a'], 'a')
     const ChildB = defineChild({ b: 'a' })
     const ChildC = defineChild({
       b: {
-        from: 'a'
-      }
+        from: 'a',
+      },
     })
     const ChildD = defineChild(
       {
         a: {
-          default: () => 0
-        }
+          default: () => 0,
+        },
       },
-      'a'
+      'a',
     )
     const ChildE = defineChild({
       b: {
         from: 'c',
-        default: 2
-      }
+        default: 2,
+      },
     })
     const ChildF = defineChild({
       b: {
         from: 'c',
-        default: () => 3
-      }
+        default: () => 3,
+      },
     })
     const ChildG = defineChild({
       b: {
-        default: 4
-      }
+        default: 4,
+      },
     })
     const ChildH = defineChild({
       b: {
-        default: () => 5
-      }
+        default: () => 5,
+      },
     })
     const ChildI = defineChild({
-      b: symbolKey
+      b: symbolKey,
     })
     const ChildJ = defineChild({
       b: {
-        from: symbolKey
-      }
+        from: symbolKey,
+      },
     })
     expect(renderToString(h(Root))).toBe(`1111234522`)
   })
@@ -439,16 +439,16 @@ describe('api: options', () => {
       provide() {
         return {
           n,
-          np
+          np,
         }
       },
-      render: () => h(Child)
+      render: () => h(Child),
     })
     const Child = defineComponent({
       inject: ['n', 'np'],
       render(this: any) {
         return this.n + this.np
-      }
+      },
     })
     const app = createApp(Parent)
     const root = nodeOps.createElement('div')
@@ -464,28 +464,28 @@ describe('api: options', () => {
     const Base = defineComponent({
       data() {
         return {
-          a: 1
+          a: 1,
         }
       },
       provide() {
         return {
-          a: this.a
+          a: this.a,
         }
-      }
+      },
     })
 
     const Child = {
       inject: ['a'],
       render() {
         return (this as any).a
-      }
+      },
     }
 
     const Root = defineComponent({
       extends: Base,
       render() {
         return h(Child)
-      }
+      },
     })
     expect(renderToString(h(Root))).toBe(`1`)
   })
@@ -522,7 +522,7 @@ describe('api: options', () => {
       },
       render() {
         return h(Mid, { count: count.value })
-      }
+      },
     }
 
     const Mid = {
@@ -552,7 +552,7 @@ describe('api: options', () => {
       },
       render(this: any) {
         return h(Child, { count: this.$props.count })
-      }
+      },
     }
 
     const Child = {
@@ -582,7 +582,7 @@ describe('api: options', () => {
       },
       render(this: any) {
         return h('div', this.$props.count)
-      }
+      },
     }
 
     // mount
@@ -599,7 +599,7 @@ describe('api: options', () => {
       'child onBeforeMount',
       'child onMounted',
       'mid onMounted',
-      'root onMounted'
+      'root onMounted',
     ])
 
     calls.length = 0
@@ -613,7 +613,7 @@ describe('api: options', () => {
       'child onBeforeUpdate',
       'child onUpdated',
       'mid onUpdated',
-      'root onUpdated'
+      'root onUpdated',
     ])
 
     calls.length = 0
@@ -626,7 +626,7 @@ describe('api: options', () => {
       'child onBeforeUnmount',
       'child onUnmounted',
       'mid onUnmounted',
-      'root onUnmounted'
+      'root onUnmounted',
     ])
   })
 
@@ -635,7 +635,7 @@ describe('api: options', () => {
     const mixinA = defineComponent({
       data() {
         return {
-          a: 1
+          a: 1,
         }
       },
       created(this: any) {
@@ -646,17 +646,17 @@ describe('api: options', () => {
       },
       mounted() {
         calls.push('mixinA mounted')
-      }
+      },
     })
     const mixinB = defineComponent({
       props: {
         bP: {
-          type: String
-        }
+          type: String,
+        },
       },
       data() {
         return {
-          b: 2
+          b: 2,
         }
       },
       created(this: any) {
@@ -669,13 +669,13 @@ describe('api: options', () => {
       },
       mounted() {
         calls.push('mixinB mounted')
-      }
+      },
     })
     const mixinC = defineComponent({
       props: ['cP1', 'cP2'],
       data() {
         return {
-          c: 3
+          c: 3,
         }
       },
       created() {
@@ -686,17 +686,17 @@ describe('api: options', () => {
       },
       mounted() {
         calls.push('mixinC mounted')
-      }
+      },
     })
     const Comp = defineComponent({
       props: {
-        aaa: String
+        aaa: String,
       },
       mixins: [mixinA, mixinB, mixinC],
       data() {
         return {
           c: 4,
-          z: 4
+          z: 4,
         }
       },
       created() {
@@ -713,7 +713,7 @@ describe('api: options', () => {
       },
       render() {
         return `${this.a}${this.b}${this.c}`
-      }
+      },
     })
     expect(renderToString(h(Comp))).toBe(`124`)
     expect(calls).toEqual([
@@ -724,7 +724,7 @@ describe('api: options', () => {
       'mixinA mounted',
       'mixinB mounted',
       'mixinC mounted',
-      'comp mounted'
+      'comp mounted',
     ])
   })
 
@@ -732,9 +732,9 @@ describe('api: options', () => {
     const Comp = {
       mixins: [
         {
-          render: () => 'from mixin'
-        }
-      ]
+          render: () => 'from mixin',
+        },
+      ],
     }
     expect(renderToString(h(Comp))).toBe('from mixin')
   })
@@ -747,7 +747,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('mixinA created')
-      }
+      },
     }
 
     const extendA = {
@@ -757,7 +757,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('extendA created')
-      }
+      },
     }
 
     const Comp = {
@@ -768,7 +768,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('self created')
-      }
+      },
     }
 
     expect(renderToString(h(Comp))).toBe(`123`)
@@ -778,23 +778,21 @@ describe('api: options', () => {
       'self beforeCreate',
       'mixinA created',
       'extendA created',
-      'self created'
+      'self created',
     ])
   })
 
   test('unlikely mixin usage', () => {
     const MixinA = {
-      data() {}
+      data() {},
     }
     const MixinB = {
-      data() {}
+      data() {},
     }
     defineComponent({
-      // @ts-expect-error edge case after #7963, unlikely to happen in practice
       // since the user will want to type the mixins themselves.
       mixins: [defineComponent(MixinA), defineComponent(MixinB)],
-      // @ts-expect-error
-      data() {}
+      data() {},
     })
   })
 
@@ -807,7 +805,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('extendA created')
-      }
+      },
     }
 
     const mixinA = {
@@ -817,7 +815,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('mixinA created')
-      }
+      },
     }
 
     const Comp = {
@@ -828,7 +826,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('self created')
-      }
+      },
     }
 
     expect(renderToString(h(Comp))).toBe(`123`)
@@ -838,7 +836,7 @@ describe('api: options', () => {
       'self beforeCreate',
       'extendA created',
       'mixinA created',
-      'self created'
+      'self created',
     ])
   })
 
@@ -848,23 +846,23 @@ describe('api: options', () => {
       data() {
         return {
           a: 1,
-          b: 1
+          b: 1,
         }
       },
       methods: {
-        sayA() {}
+        sayA() {},
       },
       mounted(this: any) {
         expect(this.a).toBe(1)
         expect(this.b).toBe(2)
         calls.push('base')
-      }
+      },
     })
     const Comp = defineComponent({
       extends: Base,
       data() {
         return {
-          b: 2
+          b: 2,
         }
       },
       mounted() {
@@ -872,7 +870,7 @@ describe('api: options', () => {
       },
       render() {
         return `${this.a}${this.b}`
-      }
+      },
     })
 
     expect(renderToString(h(Comp))).toBe(`12`)
@@ -885,24 +883,24 @@ describe('api: options', () => {
       data() {
         return {
           a: 1,
-          x: 'base'
+          x: 'base',
         }
       },
       methods: {
-        sayA() {}
+        sayA() {},
       },
       mounted(this: any) {
         expect(this.a).toBe(1)
         expect(this.b).toBeTruthy()
         expect(this.c).toBe(2)
         calls.push('base')
-      }
+      },
     })
     const Mixin = defineComponent({
       data() {
         return {
           b: true,
-          x: 'mixin'
+          x: 'mixin',
         }
       },
       mounted(this: any) {
@@ -910,14 +908,14 @@ describe('api: options', () => {
         expect(this.b).toBeTruthy()
         expect(this.c).toBe(2)
         calls.push('mixin')
-      }
+      },
     })
     const Comp = defineComponent({
       extends: Base,
       mixins: [Mixin],
       data() {
         return {
-          c: 2
+          c: 2,
         }
       },
       mounted() {
@@ -925,7 +923,7 @@ describe('api: options', () => {
       },
       render() {
         return `${this.a}${this.b}${this.c}${this.x}`
-      }
+      },
     })
 
     expect(renderToString(h(Comp))).toBe(`1true2mixin`)
@@ -940,7 +938,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('createdA')
-      }
+      },
     }
     const BaseB = {
       extends: BaseA,
@@ -949,7 +947,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('createdB')
-      }
+      },
     }
 
     const MixinA = {
@@ -958,7 +956,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('createdC')
-      }
+      },
     }
     const MixinB = {
       mixins: [MixinA],
@@ -967,7 +965,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('createdD')
-      }
+      },
     }
 
     const Comp = {
@@ -979,7 +977,7 @@ describe('api: options', () => {
       created() {
         calls.push('selfCreated')
       },
-      render() {}
+      render() {},
     }
 
     renderToString(h(Comp))
@@ -993,29 +991,29 @@ describe('api: options', () => {
       'createdB',
       'createdC',
       'createdD',
-      'selfCreated'
+      'selfCreated',
     ])
   })
 
   test('flatten merged options', async () => {
     const MixinBase = {
-      msg1: 'base'
+      msg1: 'base',
     }
     const ExtendsBase = {
-      msg2: 'base'
+      msg2: 'base',
     }
     const Mixin = {
-      mixins: [MixinBase]
+      mixins: [MixinBase],
     }
     const Extends = {
-      extends: ExtendsBase
+      extends: ExtendsBase,
     }
     const Comp = defineComponent({
       extends: defineComponent(Extends),
       mixins: [defineComponent(Mixin)],
       render() {
         return `${this.$options.msg1},${this.$options.msg2}`
-      }
+      },
     })
 
     expect(renderToString(h(Comp))).toBe('base,base')
@@ -1024,8 +1022,8 @@ describe('api: options', () => {
   test('extends template', () => {
     const Comp = {
       extends: {
-        template: `<h1>Foo</h1>`
-      }
+        template: `<h1>Foo</h1>`,
+      },
     }
 
     const root = document.createElement('div') as any
@@ -1035,10 +1033,10 @@ describe('api: options', () => {
 
   test('options defined in component have higher priority', async () => {
     const Mixin = {
-      msg1: 'base'
+      msg1: 'base',
     }
     const Extends = {
-      msg2: 'base'
+      msg2: 'base',
     }
     const Comp = defineComponent({
       msg1: 'local',
@@ -1047,7 +1045,7 @@ describe('api: options', () => {
       mixins: [defineComponent(Mixin)],
       render() {
         return `${this.$options.msg1},${this.$options.msg2}`
-      }
+      },
     })
 
     expect(renderToString(h(Comp))).toBe('local,local')
@@ -1057,33 +1055,33 @@ describe('api: options', () => {
     const Comp = defineComponent({
       setup() {
         return {
-          count: ref(0)
+          count: ref(0),
         }
       },
       data() {
         return {
-          plusOne: (this as any).count + 1
+          plusOne: (this as any).count + 1,
         }
       },
       computed: {
         plusTwo(): number {
           return this.count + 2
-        }
+        },
       },
       methods: {
         inc() {
           this.count++
-        }
+        },
       },
       render() {
         return h(
           'div',
           {
-            onClick: this.inc
+            onClick: this.inc,
           },
-          `${this.count},${this.plusOne},${this.plusTwo}`
+          `${this.count},${this.plusOne},${this.plusTwo}`,
         )
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -1099,26 +1097,26 @@ describe('api: options', () => {
     const mixin1 = {
       data() {
         return {
-          mixin1Data: 'mixin1'
+          mixin1Data: 'mixin1',
         }
       },
-      methods: {}
+      methods: {},
     }
 
     const watchSpy = vi.fn()
     const mixin2 = {
       watch: {
-        mixin3Data: watchSpy
-      }
+        mixin3Data: watchSpy,
+      },
     }
 
     const mixin3 = {
       data() {
         return {
-          mixin3Data: 'mixin3'
+          mixin3Data: 'mixin3',
         }
       },
-      methods: {}
+      methods: {},
     }
 
     let vm: any
@@ -1127,7 +1125,7 @@ describe('api: options', () => {
       render() {},
       created() {
         vm = this
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -1142,50 +1140,50 @@ describe('api: options', () => {
   test('injection from closest ancestor', () => {
     const Root = defineComponent({
       provide: {
-        a: 'root'
+        a: 'root',
       },
       render() {
         return [h(Mid), ' ', h(MidWithProvide), ' ', h(MidWithMixinProvide)]
-      }
+      },
     })
 
     const Mid = {
       render() {
         return h(Child)
-      }
+      },
     } as any
 
     const MidWithProvide = {
       provide: {
-        a: 'midWithProvide'
+        a: 'midWithProvide',
       },
       render() {
         return h(Child)
-      }
+      },
     } as any
 
     const mixin = {
       provide: {
-        a: 'midWithMixinProvide'
-      }
+        a: 'midWithMixinProvide',
+      },
     }
 
     const MidWithMixinProvide = {
       mixins: [mixin],
       render() {
         return h(Child)
-      }
+      },
     } as any
 
     const Child = {
       inject: ['a'],
       render() {
         return this.a
-      }
+      },
     } as any
 
     expect(renderToString(h(Root))).toBe(
-      'root midWithProvide midWithMixinProvide'
+      'root midWithProvide midWithMixinProvide',
     )
   })
 
@@ -1194,14 +1192,14 @@ describe('api: options', () => {
       const mixin = {
         data() {
           return { foo: 1, bar: 2 }
-        }
+        },
       }
       createApp({
         mixins: [mixin],
         data() {
           return {
             foo: 3,
-            baz: 4
+            baz: 4,
           }
         },
         created() {
@@ -1209,16 +1207,16 @@ describe('api: options', () => {
           expect(this.$options.data()).toEqual({
             foo: 3,
             bar: 2,
-            baz: 4
+            baz: 4,
           })
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
     test('this.$options.inject', () => {
       const mixin = {
-        inject: ['a']
+        inject: ['a'],
       }
       const app = createApp({
         mixins: [mixin],
@@ -1231,7 +1229,7 @@ describe('api: options', () => {
           expect(this.b).toBe(2)
           expect(this.c).toBe(3)
         },
-        render: () => null
+        render: () => null,
       })
 
       app.provide('a', 1)
@@ -1243,21 +1241,21 @@ describe('api: options', () => {
     test('this.$options.provide', () => {
       const mixin = {
         provide: {
-          a: 1
-        }
+          a: 1,
+        },
       }
       createApp({
         mixins: [mixin],
         provide() {
           return {
-            b: 2
+            b: 2,
           }
         },
         created() {
           expect(this.$options.provide).toBeInstanceOf(Function)
           expect(this.$options.provide()).toEqual({ a: 1, b: 2 })
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
@@ -1265,7 +1263,7 @@ describe('api: options', () => {
       const mixin = {
         mounted() {},
         beforeUnmount() {},
-        unmounted() {}
+        unmounted() {},
       }
       createApp({
         mixins: [mixin],
@@ -1280,26 +1278,26 @@ describe('api: options', () => {
           expect(this.$options.unmounted).toBeInstanceOf(Array)
           expect(this.$options.unmounted.length).toBe(2)
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
     test('this.$options[asset-name]', () => {
       const mixin = {
         components: {
-          a: {}
+          a: {},
         },
         directives: {
-          d1: {}
-        }
+          d1: {},
+        },
       }
       createApp({
         mixins: [mixin],
         components: {
-          b: {}
+          b: {},
         },
         directives: {
-          d2: {}
+          d2: {},
         },
         created() {
           expect('a' in this.$options.components).toBe(true)
@@ -1307,45 +1305,45 @@ describe('api: options', () => {
           expect('d1' in this.$options.directives).toBe(true)
           expect('d2' in this.$options.directives).toBe(true)
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
     test('this.$options.methods', () => {
       const mixin = {
         methods: {
-          fn1() {}
-        }
+          fn1() {},
+        },
       }
       createApp({
         mixins: [mixin],
         methods: {
-          fn2() {}
+          fn2() {},
         },
         created() {
           expect(this.$options.methods.fn1).toBeInstanceOf(Function)
           expect(this.$options.methods.fn2).toBeInstanceOf(Function)
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
     test('this.$options.computed', () => {
       const mixin = {
         computed: {
-          c1() {}
-        }
+          c1() {},
+        },
       }
       createApp({
         mixins: [mixin],
         computed: {
-          c2() {}
+          c2() {},
         },
         created() {
           expect(this.$options.computed.c1).toBeInstanceOf(Function)
           expect(this.$options.computed.c2).toBeInstanceOf(Function)
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
@@ -1361,14 +1359,14 @@ describe('api: options', () => {
             this.$options.computed = {}
           }
           this.$options.computed.value = () => count.value
-        }
+        },
       }
       const root = nodeOps.createElement('div')
       createApp({
         mixins: [mixin],
         render(this: any) {
           return this.value
-        }
+        },
       }).mount(root)
 
       expect(serializeInner(root)).toBe('0')
@@ -1385,27 +1383,27 @@ describe('api: options', () => {
         watch: {
           foo: 'notExistingMethod',
           foo2: {
-            handler: 'notExistingMethod2'
-          }
+            handler: 'notExistingMethod2',
+          },
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
 
       expect(
-        'Invalid watch handler specified by key "notExistingMethod"'
+        'Invalid watch handler specified by key "notExistingMethod"',
       ).toHaveBeenWarned()
       expect(
-        'Invalid watch handler specified by key "notExistingMethod2"'
+        'Invalid watch handler specified by key "notExistingMethod2"',
       ).toHaveBeenWarned()
     })
 
     test('Invalid watch option', () => {
       const Comp = {
         watch: { foo: true },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
@@ -1419,10 +1417,10 @@ describe('api: options', () => {
       const Comp = {
         computed: {
           foo: {
-            set() {}
-          }
+            set() {},
+          },
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
@@ -1435,20 +1433,20 @@ describe('api: options', () => {
       const Comp = {
         computed: {
           foo: {
-            get() {}
-          }
+            get() {},
+          },
         },
         mounted() {
           instance = this
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       instance.foo = 1
       expect(
-        'Write operation failed: computed property "foo" is readonly'
+        'Write operation failed: computed property "foo" is readonly',
       ).toHaveBeenWarned()
     })
 
@@ -1456,64 +1454,64 @@ describe('api: options', () => {
       const Comp = {
         data() {
           return {
-            a: 1
+            a: 1,
           }
         },
         provide() {
           return {
-            a: this.a
+            a: this.a,
           }
         },
         render() {
           return [h(ChildA)]
-        }
+        },
       } as any
       const ChildA = {
         props: { a: Number },
         inject: ['a'],
         render() {
           return this.a
-        }
+        },
       } as any
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Inject property "a" is already defined in Props.`
+        `Inject property "a" is already defined in Props.`,
       ).toHaveBeenWarned()
     })
 
     test('methods property is not a function', () => {
       const Comp = {
         methods: {
-          foo: 1
+          foo: 1,
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
         `Method "foo" has type "number" in the component definition. ` +
-          `Did you reference the function correctly?`
+          `Did you reference the function correctly?`,
       ).toHaveBeenWarned()
     })
 
     test('methods property is already declared in props', () => {
       const Comp = {
         props: {
-          foo: Number
+          foo: Number,
         },
         methods: {
-          foo() {}
+          foo() {},
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Methods property "foo" is already defined in Props.`
+        `Methods property "foo" is already defined in Props.`,
       ).toHaveBeenWarned()
     })
 
@@ -1521,32 +1519,32 @@ describe('api: options', () => {
       const Comp = {
         data() {
           return {
-            a: 1
+            a: 1,
           }
         },
         provide() {
           return {
-            a: this.a
+            a: this.a,
           }
         },
         render() {
           return [h(ChildA)]
-        }
+        },
       } as any
       const ChildA = {
         methods: {
-          a: () => null
+          a: () => null,
         },
         inject: ['a'],
         render() {
           return this.a
-        }
+        },
       } as any
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Methods property "a" is already defined in Inject.`
+        `Methods property "a" is already defined in Inject.`,
       ).toHaveBeenWarned()
     })
 
@@ -1554,15 +1552,15 @@ describe('api: options', () => {
       const Comp = {
         props: { foo: Number },
         data: () => ({
-          foo: 1
+          foo: 1,
         }),
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Data property "foo" is already defined in Props.`
+        `Data property "foo" is already defined in Props.`,
       ).toHaveBeenWarned()
     })
 
@@ -1570,52 +1568,52 @@ describe('api: options', () => {
       const Comp = {
         data() {
           return {
-            a: 1
+            a: 1,
           }
         },
         provide() {
           return {
-            a: this.a
+            a: this.a,
           }
         },
         render() {
           return [h(ChildA)]
-        }
+        },
       } as any
       const ChildA = {
         data() {
           return {
-            a: 1
+            a: 1,
           }
         },
         inject: ['a'],
         render() {
           return this.a
-        }
+        },
       } as any
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Data property "a" is already defined in Inject.`
+        `Data property "a" is already defined in Inject.`,
       ).toHaveBeenWarned()
     })
 
     test('data property is already declared in methods', () => {
       const Comp = {
         data: () => ({
-          foo: 1
+          foo: 1,
         }),
         methods: {
-          foo() {}
+          foo() {},
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Data property "foo" is already defined in Methods.`
+        `Data property "foo" is already defined in Methods.`,
       ).toHaveBeenWarned()
     })
 
@@ -1623,15 +1621,15 @@ describe('api: options', () => {
       const Comp = {
         props: { foo: Number },
         computed: {
-          foo() {}
+          foo() {},
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Computed property "foo" is already defined in Props.`
+        `Computed property "foo" is already defined in Props.`,
       ).toHaveBeenWarned()
     })
 
@@ -1639,71 +1637,71 @@ describe('api: options', () => {
       const Comp = {
         data() {
           return {
-            a: 1
+            a: 1,
           }
         },
         provide() {
           return {
-            a: this.a
+            a: this.a,
           }
         },
         render() {
           return [h(ChildA)]
-        }
+        },
       } as any
       const ChildA = {
         computed: {
           a: {
             get() {},
-            set() {}
-          }
+            set() {},
+          },
         },
         inject: ['a'],
         render() {
           return this.a
-        }
+        },
       } as any
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Computed property "a" is already defined in Inject.`
+        `Computed property "a" is already defined in Inject.`,
       ).toHaveBeenWarned()
     })
 
     test('computed property is already declared in methods', () => {
       const Comp = {
         computed: {
-          foo() {}
+          foo() {},
         },
         methods: {
-          foo() {}
+          foo() {},
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Computed property "foo" is already defined in Methods.`
+        `Computed property "foo" is already defined in Methods.`,
       ).toHaveBeenWarned()
     })
 
     test('computed property is already declared in data', () => {
       const Comp = {
         data: () => ({
-          foo: 1
+          foo: 1,
         }),
         computed: {
-          foo() {}
+          foo() {},
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Computed property "foo" is already defined in Data.`
+        `Computed property "foo" is already defined in Data.`,
       ).toHaveBeenWarned()
     })
   })
diff --git a/packages/runtime-core/__tests__/apiSetupContext.spec.ts b/packages/runtime-core/__tests__/apiSetupContext.spec.ts
index e0ddd9c4d..d3aab9ab2 100644
--- a/packages/runtime-core/__tests__/apiSetupContext.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupContext.spec.ts
@@ -1,19 +1,17 @@
-import { ref, reactive } from '@vue/reactivity'
+import { reactive, ref } from '@vue/reactivity'
 import {
-  renderToString,
+  type TestElement,
+  defineComponent,
   h,
+  nextTick,
   nodeOps,
   render,
+  renderToString,
   serializeInner,
-  nextTick,
-  watchEffect,
-  defineComponent,
   triggerEvent,
-  TestElement
+  watchEffect,
 } from '@vue/runtime-test'
 
-// reference: https://vue-composition-api-rfc.netlify.com/api.html#setup
-
 describe('api: setup context', () => {
   it('should expose return values to template render context', () => {
     const Comp = defineComponent({
@@ -24,12 +22,12 @@ describe('api: setup context', () => {
           // object exposed as-is
           object: reactive({ msg: 'bar' }),
           // primitive value exposed as-is
-          value: 'baz'
+          value: 'baz',
         }
       },
       render() {
         return `${this.ref} ${this.object.msg} ${this.value}`
-      }
+      },
     })
     expect(renderToString(h(Comp))).toMatch(`foo bar baz`)
   })
@@ -40,7 +38,7 @@ describe('api: setup context', () => {
         return () => {
           return h('div', 'hello')
         }
-      }
+      },
     }
     expect(renderToString(h(Comp))).toMatch(`hello`)
   })
@@ -50,7 +48,7 @@ describe('api: setup context', () => {
     let dummy
 
     const Parent = {
-      render: () => h(Child, { count: count.value })
+      render: () => h(Child, { count: count.value }),
     }
 
     const Child = defineComponent({
@@ -60,7 +58,7 @@ describe('api: setup context', () => {
           dummy = props.count
         })
         return () => h('div', props.count)
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -79,7 +77,7 @@ describe('api: setup context', () => {
     const toggle = ref(true)
 
     const Parent = {
-      render: () => h(Child, toggle.value ? { id: 'foo' } : { class: 'baz' })
+      render: () => h(Child, toggle.value ? { id: 'foo' } : { class: 'baz' }),
     }
 
     const Child = {
@@ -89,7 +87,7 @@ describe('api: setup context', () => {
       inheritAttrs: false,
       setup(props: any, { attrs }: any) {
         return () => h('div', attrs)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -107,13 +105,13 @@ describe('api: setup context', () => {
     const toggle = ref(true)
 
     const Parent = {
-      render: () => h(Child, toggle.value ? { id: 'foo' } : { class: 'baz' })
+      render: () => h(Child, toggle.value ? { id: 'foo' } : { class: 'baz' }),
     }
 
     const Wrapper = {
       render(this: any) {
         return this.$slots.default()
-      }
+      },
     }
 
     const Child = {
@@ -122,12 +120,12 @@ describe('api: setup context', () => {
         return () => {
           const vnode = h(Wrapper, null, {
             default: () => [h('div', attrs)],
-            _: 1 // mark stable slots
+            _: 1, // mark stable slots
           })
           vnode.dynamicChildren = [] // force optimized mode
           return vnode
         }
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -147,14 +145,14 @@ describe('api: setup context', () => {
       render: () =>
         h(Child, null, {
           foo: () => id.value,
-          bar: () => 'bar'
-        })
+          bar: () => 'bar',
+        }),
     }
 
     const Child = {
       setup(props: any, { slots }: any) {
         return () => h('div', [...slots.foo(), ...slots.bar()])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -178,27 +176,27 @@ describe('api: setup context', () => {
           onInc: (newVal: number) => {
             spy()
             count.value = newVal
-          }
-        })
+          },
+        }),
     }
 
     const Child = defineComponent({
       props: {
         count: {
           type: Number,
-          default: 1
-        }
+          default: 1,
+        },
       },
       setup(props, { emit }) {
         return () =>
           h(
             'div',
             {
-              onClick: () => emit('inc', props.count + 1)
+              onClick: () => emit('inc', props.count + 1),
             },
-            props.count
+            props.count,
           )
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
diff --git a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
index e5bca1d92..30c8951f4 100644
--- a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
@@ -1,5 +1,8 @@
 import {
-  ComponentInternalInstance,
+  type ComponentInternalInstance,
+  type SetupContext,
+  Suspense,
+  computed,
   createApp,
   defineComponent,
   getCurrentInstance,
@@ -8,27 +11,22 @@ import {
   onMounted,
   render,
   serializeInner,
-  SetupContext,
-  Suspense,
-  computed,
-  ComputedRef,
   shallowReactive,
-  nextTick,
-  ref
 } from '@vue/runtime-test'
 import {
+  createPropsRestProxy,
   defineEmits,
-  defineProps,
   defineExpose,
-  withDefaults,
+  defineProps,
+  mergeDefaults,
+  mergeModels,
   useAttrs,
   useSlots,
-  mergeDefaults,
   withAsyncContext,
-  createPropsRestProxy,
-  mergeModels,
-  useModel
+  withDefaults,
 } from '../src/apiSetupHelpers'
+import type { ComputedRefImpl } from '../../reactivity/src/computed'
+import { EffectFlags, type ReactiveEffectRunner, effect } from '@vue/reactivity'
 
 describe('SFC <script setup> helpers', () => {
   test('should warn runtime usage', () => {
@@ -53,12 +51,12 @@ describe('SFC <script setup> helpers', () => {
         slots = useSlots()
         attrs = useAttrs()
         return () => {}
-      }
+      },
     }
     const passedAttrs = { id: 'foo' }
     const passedSlots = {
       default: () => {},
-      x: () => {}
+      x: () => {},
     }
     render(h(Comp, passedAttrs, passedSlots), nodeOps.createElement('div'))
     expect(typeof slots!.default).toBe('function')
@@ -76,7 +74,7 @@ describe('SFC <script setup> helpers', () => {
         attrs = useAttrs()
         ctx = _ctx
         return () => {}
-      }
+      },
     })
     render(h(Comp), nodeOps.createElement('div'))
     expect(slots).toBe(ctx!.slots)
@@ -89,18 +87,18 @@ describe('SFC <script setup> helpers', () => {
         {
           foo: null,
           bar: { type: String, required: false },
-          baz: String
+          baz: String,
         },
         {
           foo: 1,
           bar: 'baz',
-          baz: 'qux'
-        }
+          baz: 'qux',
+        },
       )
       expect(merged).toMatchObject({
         foo: { default: 1 },
         bar: { type: String, required: false, default: 'baz' },
-        baz: { type: String, default: 'qux' }
+        baz: { type: String, default: 'qux' },
       })
     })
 
@@ -108,12 +106,12 @@ describe('SFC <script setup> helpers', () => {
       const merged = mergeDefaults(['foo', 'bar', 'baz'], {
         foo: 1,
         bar: 'baz',
-        baz: 'qux'
+        baz: 'qux',
       })
       expect(merged).toMatchObject({
         foo: { default: 1 },
         bar: { default: 'baz' },
-        baz: { default: 'qux' }
+        baz: { default: 'qux' },
       })
     })
 
@@ -121,17 +119,17 @@ describe('SFC <script setup> helpers', () => {
       const fn = () => {}
       const merged = mergeDefaults(['foo', 'bar', 'baz'], {
         foo: fn,
-        __skip_foo: true
+        __skip_foo: true,
       })
       expect(merged).toMatchObject({
-        foo: { default: fn, skipFactory: true }
+        foo: { default: fn, skipFactory: true },
       })
     })
 
     test('should warn missing', () => {
       mergeDefaults({}, { foo: 1 })
       expect(
-        `props default key "foo" has no corresponding declaration`
+        `props default key "foo" has no corresponding declaration`,
       ).toHaveBeenWarned()
     })
   })
@@ -141,25 +139,25 @@ describe('SFC <script setup> helpers', () => {
       expect(mergeModels(['foo', 'bar'], ['baz'])).toMatchObject([
         'foo',
         'bar',
-        'baz'
+        'baz',
       ])
     })
 
     test('object syntax', () => {
       expect(
-        mergeModels({ foo: null, bar: { required: true } }, ['baz'])
+        mergeModels({ foo: null, bar: { required: true } }, ['baz']),
       ).toMatchObject({
         foo: null,
         bar: { required: true },
-        baz: {}
+        baz: {},
       })
 
       expect(
-        mergeModels(['baz'], { foo: null, bar: { required: true } })
+        mergeModels(['baz'], { foo: null, bar: { required: true } }),
       ).toMatchObject({
         foo: null,
         bar: { required: true },
-        baz: {}
+        baz: {},
       })
     })
 
@@ -167,123 +165,21 @@ describe('SFC <script setup> helpers', () => {
       expect(
         mergeModels(
           { foo: null, bar: { required: true } },
-          { bar: {}, baz: {} }
-        )
+          { bar: {}, baz: {} },
+        ),
       ).toMatchObject({
         foo: null,
         bar: {},
-        baz: {}
+        baz: {},
       })
     })
   })
 
-  describe('useModel', () => {
-    test('basic', async () => {
-      let foo: any
-      const update = () => {
-        foo.value = 'bar'
-      }
-
-      const Comp = defineComponent({
-        props: ['modelValue'],
-        emits: ['update:modelValue'],
-        setup(props) {
-          foo = useModel(props, 'modelValue')
-        },
-        render() {}
-      })
-
-      const msg = ref('')
-      const setValue = vi.fn(v => (msg.value = v))
-      const root = nodeOps.createElement('div')
-      createApp(() =>
-        h(Comp, {
-          modelValue: msg.value,
-          'onUpdate:modelValue': setValue
-        })
-      ).mount(root)
-
-      expect(foo.value).toBe('')
-      expect(msg.value).toBe('')
-      expect(setValue).not.toBeCalled()
-
-      // update from child
-      update()
-
-      await nextTick()
-      expect(msg.value).toBe('bar')
-      expect(foo.value).toBe('bar')
-      expect(setValue).toBeCalledTimes(1)
-
-      // update from parent
-      msg.value = 'qux'
-
-      await nextTick()
-      expect(msg.value).toBe('qux')
-      expect(foo.value).toBe('qux')
-      expect(setValue).toBeCalledTimes(1)
-    })
-
-    test('local', async () => {
-      let foo: any
-      const update = () => {
-        foo.value = 'bar'
-      }
-
-      const Comp = defineComponent({
-        props: ['foo'],
-        emits: ['update:foo'],
-        setup(props) {
-          foo = useModel(props, 'foo', { local: true })
-        },
-        render() {}
-      })
-
-      const root = nodeOps.createElement('div')
-      const updateFoo = vi.fn()
-      render(h(Comp, { 'onUpdate:foo': updateFoo }), root)
-
-      expect(foo.value).toBeUndefined()
-      update()
-
-      expect(foo.value).toBe('bar')
-
-      await nextTick()
-      expect(updateFoo).toBeCalledTimes(1)
-    })
-
-    test('default value', async () => {
-      let count: any
-      const inc = () => {
-        count.value++
-      }
-      const Comp = defineComponent({
-        props: { count: { default: 0 } },
-        emits: ['update:count'],
-        setup(props) {
-          count = useModel(props, 'count', { local: true })
-        },
-        render() {}
-      })
-
-      const root = nodeOps.createElement('div')
-      const updateCount = vi.fn()
-      render(h(Comp, { 'onUpdate:count': updateCount }), root)
-
-      expect(count.value).toBe(0)
-
-      inc()
-      expect(count.value).toBe(1)
-      await nextTick()
-      expect(updateCount).toBeCalledTimes(1)
-    })
-  })
-
   test('createPropsRestProxy', () => {
     const original = shallowReactive({
       foo: 1,
       bar: 2,
-      baz: 3
+      baz: 3,
     })
     const rest = createPropsRestProxy(original, ['foo', 'bar'])
     expect('foo' in rest).toBe(false)
@@ -324,7 +220,7 @@ describe('SFC <script setup> helpers', () => {
               () =>
                 new Promise(r => {
                   resolve = r
-                })
+                }),
             )),
             (__temp = await __temp),
             __restore(),
@@ -334,13 +230,13 @@ describe('SFC <script setup> helpers', () => {
           onMounted(spy)
           afterInstance = getCurrentInstance()
           return () => msg
-        }
+        },
       })
 
       const root = nodeOps.createElement('div')
       render(
         h(() => h(Suspense, () => h(Comp))),
-        root
+        root,
       )
 
       expect(spy).not.toHaveBeenCalled()
@@ -371,7 +267,7 @@ describe('SFC <script setup> helpers', () => {
               () =>
                 new Promise((_, rj) => {
                   reject = rj
-                })
+                }),
             )
             __temp = await __temp
             __restore()
@@ -382,13 +278,13 @@ describe('SFC <script setup> helpers', () => {
           onMounted(spy)
           afterInstance = getCurrentInstance()
           return () => ''
-        }
+        },
       })
 
       const root = nodeOps.createElement('div')
       render(
         h(() => h(Suspense, () => h(Comp))),
-        root
+        root,
       )
 
       expect(spy).not.toHaveBeenCalled()
@@ -441,13 +337,13 @@ describe('SFC <script setup> helpers', () => {
             resolve()
             return ''
           }
-        }
+        },
       })
 
       const root = nodeOps.createElement('div')
       render(
         h(() => h(Suspense, () => h(Comp))),
-        root
+        root,
       )
 
       await ready
@@ -473,7 +369,7 @@ describe('SFC <script setup> helpers', () => {
           __temp = await __temp
           __restore()
         },
-        render() {}
+        render() {},
       })
 
       const app = createApp(() => h(Suspense, () => h(Comp)))
@@ -493,7 +389,7 @@ describe('SFC <script setup> helpers', () => {
     test('race conditions', async () => {
       const uids = {
         one: { before: NaN, after: NaN },
-        two: { before: NaN, after: NaN }
+        two: { before: NaN, after: NaN },
       }
 
       const Comp = defineComponent({
@@ -508,13 +404,13 @@ describe('SFC <script setup> helpers', () => {
 
           uids[props.name].after = getCurrentInstance()!.uid
           return () => ''
-        }
+        },
       })
 
       const app = createApp(() =>
         h(Suspense, () =>
-          h('div', [h(Comp, { name: 'one' }), h(Comp, { name: 'two' })])
-        )
+          h('div', [h(Comp, { name: 'one' }), h(Comp, { name: 'two' })]),
+        ),
       )
       const root = nodeOps.createElement('div')
       app.mount(root)
@@ -531,7 +427,8 @@ describe('SFC <script setup> helpers', () => {
         resolve = r
       })
 
-      let c: ComputedRef
+      let c: ComputedRefImpl
+      let e: ReactiveEffectRunner
 
       const Comp = defineComponent({
         async setup() {
@@ -540,11 +437,12 @@ describe('SFC <script setup> helpers', () => {
           __temp = await __temp
           __restore()
 
-          c = computed(() => {})
+          c = computed(() => {}) as unknown as ComputedRefImpl
+          e = effect(() => c.value)
           // register the lifecycle after an await statement
           onMounted(resolve)
-          return () => ''
-        }
+          return () => c.value
+        },
       })
 
       const app = createApp(() => h(Suspense, () => h(Comp)))
@@ -552,10 +450,12 @@ describe('SFC <script setup> helpers', () => {
       app.mount(root)
 
       await ready
-      expect(c!.effect.active).toBe(true)
+      expect(e!.effect.flags & EffectFlags.ACTIVE).toBeTruthy()
+      expect(c!.flags & EffectFlags.TRACKING).toBeTruthy()
 
       app.unmount()
-      expect(c!.effect.active).toBe(false)
+      expect(e!.effect.flags & EffectFlags.ACTIVE).toBeFalsy()
+      expect(c!.flags & EffectFlags.TRACKING).toBeFalsy()
     })
   })
 })
diff --git a/packages/runtime-core/__tests__/apiWatch.bench.ts b/packages/runtime-core/__tests__/apiWatch.bench.ts
new file mode 100644
index 000000000..58e6b1b51
--- /dev/null
+++ b/packages/runtime-core/__tests__/apiWatch.bench.ts
@@ -0,0 +1,58 @@
+import { nextTick, ref, watch, watchEffect } from '../src'
+import { bench } from 'vitest'
+
+bench('create watcher', () => {
+  const v = ref(100)
+  watch(v, v => {})
+})
+
+{
+  const v = ref(100)
+  watch(v, v => {})
+  let i = 0
+  bench('update ref to trigger watcher (scheduled but not executed)', () => {
+    v.value = i++
+  })
+}
+
+{
+  const v = ref(100)
+  watch(v, v => {})
+  let i = 0
+  bench('update ref to trigger watcher (executed)', async () => {
+    v.value = i++
+    return nextTick()
+  })
+}
+
+{
+  bench('create watchEffect', () => {
+    watchEffect(() => {})
+  })
+}
+
+{
+  const v = ref(100)
+  watchEffect(() => {
+    v.value
+  })
+  let i = 0
+  bench(
+    'update ref to trigger watchEffect (scheduled but not executed)',
+    () => {
+      v.value = i++
+    },
+  )
+}
+
+{
+  const v = ref(100)
+  watchEffect(() => {
+    v.value
+  })
+  let i = 0
+  bench('update ref to trigger watchEffect (executed)', async () => {
+    v.value = i++
+    await nextTick()
+  })
+}
diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts
index 48fdd2888..10a4fe659 100644
--- a/packages/runtime-core/__tests__/apiWatch.spec.ts
+++ b/packages/runtime-core/__tests__/apiWatch.spec.ts
@@ -1,39 +1,43 @@
 import {
-  watch,
-  watchEffect,
-  reactive,
+  type ComponentInternalInstance,
+  type ComponentPublicInstance,
   computed,
-  nextTick,
-  ref,
   defineComponent,
   getCurrentInstance,
-  ComponentInternalInstance,
-  ComponentPublicInstance
+  nextTick,
+  onErrorCaptured,
+  onWatcherCleanup,
+  reactive,
+  ref,
+  watch,
+  watchEffect,
 } from '../src/index'
 import {
-  render,
-  nodeOps,
-  serializeInner,
-  TestElement,
-  h,
+  type TestElement,
   createApp,
+  h,
+  nodeOps,
+  onMounted,
+  render,
+  serializeInner,
   watchPostEffect,
   watchSyncEffect,
-  onMounted
 } from '@vue/runtime-test'
 import {
+  type DebuggerEvent,
+  EffectFlags,
   ITERATE_KEY,
-  DebuggerEvent,
+  type Ref,
+  type ShallowRef,
   TrackOpTypes,
   TriggerOpTypes,
-  triggerRef,
-  shallowRef,
-  Ref,
   effectScope,
-  toRef
+  shallowReactive,
+  shallowRef,
+  toRef,
+  triggerRef,
 } from '@vue/reactivity'
-
-// reference: https://vue-composition-api-rfc.netlify.com/api.html#watch
+import { renderToString } from '@vue/server-renderer'
 
 describe('api: watch', () => {
   it('effect', async () => {
@@ -61,7 +65,7 @@ describe('api: watch', () => {
         if (prevCount) {
           prevCount + 1
         }
-      }
+      },
     )
     state.count++
     await nextTick()
@@ -94,6 +98,30 @@ describe('api: watch', () => {
     expect(spy).toBeCalledWith([1], [1], expect.anything())
   })
 
+  it('should not call functions inside a reactive source array', () => {
+    const spy1 = vi.fn()
+    const array = reactive([spy1])
+    const spy2 = vi.fn()
+    watch(array, spy2, { immediate: true })
+    expect(spy1).toBeCalledTimes(0)
+    expect(spy2).toBeCalledWith([spy1], undefined, expect.anything())
+  })
+
+  it('should not unwrap refs in a reactive source array', async () => {
+    const val = ref({ foo: 1 })
+    const array = reactive([val])
+    const spy = vi.fn()
+    watch(array, spy, { immediate: true })
+    expect(spy).toBeCalledTimes(1)
+    expect(spy).toBeCalledWith([val], undefined, expect.anything())
+
+    // deep by default
+    val.value.foo++
+    await nextTick()
+    expect(spy).toBeCalledTimes(2)
+    expect(spy).toBeCalledWith([val], [val], expect.anything())
+  })
+
   it('should not fire if watched getter result did not change', async () => {
     const spy = vi.fn()
     const n = ref(0)
@@ -135,8 +163,8 @@ describe('api: watch', () => {
         dummy = [c, prevCount]
       },
       {
-        deep: true
-      }
+        deep: true,
+      },
     )
     count.value++
     await nextTick()
@@ -145,7 +173,7 @@ describe('api: watch', () => {
 
   it('directly watching reactive object (with automatic deep: true)', async () => {
     const src = reactive({
-      count: 0
+      count: 0,
     })
     let dummy
     watch(src, ({ count }) => {
@@ -156,6 +184,95 @@ describe('api: watch', () => {
     expect(dummy).toBe(1)
   })
 
+  it('directly watching reactive object with explicit deep: false', async () => {
+    const src = reactive({
+      state: {
+        count: 0,
+      },
+    })
+    let dummy
+    watch(
+      src,
+      ({ state }) => {
+        dummy = state?.count
+      },
+      {
+        deep: false,
+      },
+    )
+
+    // nested should not trigger
+    src.state.count++
+    await nextTick()
+    expect(dummy).toBe(undefined)
+
+    // root level should trigger
+    src.state = { count: 1 }
+    await nextTick()
+    expect(dummy).toBe(1)
+  })
+
+  it('directly watching reactive array with explicit deep: false', async () => {
+    const val = ref(1)
+    const array: any[] = reactive([val])
+    const spy = vi.fn()
+    watch(array, spy, { immediate: true, deep: false })
+    expect(spy).toBeCalledTimes(1)
+    expect(spy).toBeCalledWith([val], undefined, expect.anything())
+
+    val.value++
+    await nextTick()
+    expect(spy).toBeCalledTimes(1)
+
+    array[1] = 2
+    await nextTick()
+    expect(spy).toBeCalledTimes(2)
+    expect(spy).toBeCalledWith([val, 2], [val, 2], expect.anything())
+  })
+
+  // #9916
+  it('watching shallow reactive array with deep: false', async () => {
+    class foo {
+      prop1: ShallowRef<string> = shallowRef('')
+      prop2: string = ''
+    }
+
+    const obj1 = new foo()
+    const obj2 = new foo()
+
+    const collection = shallowReactive([obj1, obj2])
+    const cb = vi.fn()
+    watch(collection, cb, { deep: false })
+
+    collection[0].prop1.value = 'foo'
+    await nextTick()
+    // should not trigger
+    expect(cb).toBeCalledTimes(0)
+
+    collection.push(new foo())
+    await nextTick()
+    // should trigger on array self mutation
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  it('should still respect deep: true on shallowReactive source', async () => {
+    const obj = reactive({ a: 1 })
+    const arr = shallowReactive([obj])
+
+    let dummy
+    watch(
+      arr,
+      () => {
+        dummy = arr[0].a
+      },
+      { deep: true },
+    )
+
+    obj.a++
+    await nextTick()
+    expect(dummy).toBe(2)
+  })
+
   it('watching multiple sources', async () => {
     const state = reactive({ count: 1 })
     const count = ref(1)
@@ -174,7 +291,7 @@ describe('api: watch', () => {
     await nextTick()
     expect(dummy).toMatchObject([
       [2, 2, 3],
-      [1, 1, 2]
+      [1, 1, 2],
     ])
   })
 
@@ -189,7 +306,7 @@ describe('api: watch', () => {
         expect([newA, newB]).toMatchObject([undefined, undefined])
         expect([oldA, oldB]).toMatchObject([undefined, undefined])
       },
-      { immediate: true }
+      { immediate: true },
     )
     await nextTick()
     expect(called).toBe(true)
@@ -214,7 +331,7 @@ describe('api: watch', () => {
     await nextTick()
     expect(dummy).toMatchObject([
       [2, true],
-      [1, false]
+      [1, false],
     ])
   })
 
@@ -257,6 +374,43 @@ describe('api: watch', () => {
     expect(dummy).toBe(0)
   })
 
+  it('stopping the watcher (SSR)', async () => {
+    let dummy = 0
+    const count = ref<number>(1)
+    const captureValue = (value: number) => {
+      dummy = value
+    }
+    const watchCallback = vi.fn(newValue => {
+      captureValue(newValue)
+    })
+    const Comp = defineComponent({
+      created() {
+        const getter = () => this.count
+        captureValue(getter()) // sets dummy to 1
+        const stop = this.$watch(getter, watchCallback)
+        stop()
+        this.count = 2 // shouldn't trigger side effect
+      },
+      render() {
+        return h('div', this.count)
+      },
+      setup() {
+        return { count }
+      },
+    })
+    let html
+    html = await renderToString(h(Comp))
+    // should not throw here
+    expect(html).toBe(`<div>2</div>`)
+    expect(watchCallback).not.toHaveBeenCalled()
+    expect(dummy).toBe(1)
+    await nextTick()
+    count.value = 3 // shouldn't trigger side effect
+    await nextTick()
+    expect(watchCallback).not.toHaveBeenCalled()
+    expect(dummy).toBe(1)
+  })
+
   it('stopping the watcher (with source)', async () => {
     const state = reactive({ count: 0 })
     let dummy
@@ -264,7 +418,7 @@ describe('api: watch', () => {
       () => state.count,
       count => {
         dummy = count
-      }
+      },
     )
 
     state.count++
@@ -320,6 +474,35 @@ describe('api: watch', () => {
     expect(cleanup).toHaveBeenCalledTimes(2)
   })
 
+  it('onWatcherCleanup', async () => {
+    const count = ref(0)
+    const cleanupEffect = vi.fn()
+    const cleanupWatch = vi.fn()
+
+    const stopEffect = watchEffect(() => {
+      onWatcherCleanup(cleanupEffect)
+      count.value
+    })
+    const stopWatch = watch(count, () => {
+      onWatcherCleanup(cleanupWatch)
+    })
+
+    count.value++
+    await nextTick()
+    expect(cleanupEffect).toHaveBeenCalledTimes(1)
+    expect(cleanupWatch).toHaveBeenCalledTimes(0)
+
+    count.value++
+    await nextTick()
+    expect(cleanupEffect).toHaveBeenCalledTimes(2)
+    expect(cleanupWatch).toHaveBeenCalledTimes(1)
+
+    stopEffect()
+    expect(cleanupEffect).toHaveBeenCalledTimes(3)
+    stopWatch()
+    expect(cleanupWatch).toHaveBeenCalledTimes(2)
+  })
+
   it('flush timing: pre (default)', async () => {
     const count = ref(0)
     const count2 = ref(0)
@@ -345,7 +528,7 @@ describe('api: watch', () => {
           assertion(count.value, count2.value)
         })
         return () => count.value
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -375,10 +558,10 @@ describe('api: watch', () => {
           () => {
             assertion(count.value)
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
         return () => count.value
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -404,7 +587,7 @@ describe('api: watch', () => {
           assertion(count.value)
         })
         return () => count.value
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -444,11 +627,11 @@ describe('api: watch', () => {
             assertion(count.value)
           },
           {
-            flush: 'sync'
-          }
+            flush: 'sync',
+          },
         )
         return () => count.value
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -490,7 +673,7 @@ describe('api: watch', () => {
           assertion(count.value)
         })
         return () => count.value
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -513,12 +696,12 @@ describe('api: watch', () => {
       setup() {
         watch(toggle, cb, { flush: 'post' })
       },
-      render() {}
+      render() {},
     }
     const App = {
       render() {
         return toggle.value ? h(Comp) : null
-      }
+      },
     }
     render(h(App), nodeOps.createElement('div'))
     expect(cb).not.toHaveBeenCalled()
@@ -535,12 +718,12 @@ describe('api: watch', () => {
       setup() {
         watch(toggle, cb, { flush: 'pre' })
       },
-      render() {}
+      render() {},
     }
     const App = {
       render() {
         return toggle.value ? h(Comp) : null
-      }
+      },
     }
     render(h(App), nodeOps.createElement('div'))
     expect(cb).not.toHaveBeenCalled()
@@ -549,6 +732,98 @@ describe('api: watch', () => {
     expect(cb).not.toHaveBeenCalled()
   })
 
+  // #7030
+  it('should not fire on child component unmount w/ flush: pre', async () => {
+    const visible = ref(true)
+    const cb = vi.fn()
+    const Parent = defineComponent({
+      props: ['visible'],
+      render() {
+        return visible.value ? h(Comp) : null
+      },
+    })
+    const Comp = {
+      setup() {
+        watch(visible, cb, { flush: 'pre' })
+      },
+      render() {},
+    }
+    const App = {
+      render() {
+        return h(Parent, {
+          visible: visible.value,
+        })
+      },
+    }
+    render(h(App), nodeOps.createElement('div'))
+    expect(cb).not.toHaveBeenCalled()
+    visible.value = false
+    await nextTick()
+    expect(cb).not.toHaveBeenCalled()
+  })
+
+  // #7030
+  it('flush: pre watcher in child component should not fire before parent update', async () => {
+    const b = ref(0)
+    const calls: string[] = []
+
+    const Comp = {
+      setup() {
+        watch(
+          () => b.value,
+          val => {
+            calls.push('watcher child')
+          },
+          { flush: 'pre' },
+        )
+        return () => {
+          b.value
+          calls.push('render child')
+        }
+      },
+    }
+
+    const Parent = {
+      props: ['a'],
+      setup() {
+        watch(
+          () => b.value,
+          val => {
+            calls.push('watcher parent')
+          },
+          { flush: 'pre' },
+        )
+        return () => {
+          b.value
+          calls.push('render parent')
+          return h(Comp)
+        }
+      },
+    }
+
+    const App = {
+      render() {
+        return h(Parent, {
+          a: b.value,
+        })
+      },
+    }
+
+    render(h(App), nodeOps.createElement('div'))
+    expect(calls).toEqual(['render parent', 'render child'])
+
+    b.value++
+    await nextTick()
+    expect(calls).toEqual([
+      'render parent',
+      'render child',
+      'watcher parent',
+      'render parent',
+      'watcher child',
+      'render child',
+    ])
+  })
+
   // #1763
   it('flush: pre watcher watching props should fire before child update', async () => {
     const a = ref(0)
@@ -565,7 +840,7 @@ describe('api: watch', () => {
             calls.push('watcher 1')
             c.value++
           },
-          { flush: 'pre' }
+          { flush: 'pre' },
         )
 
         // #1777 chained pre-watcher
@@ -574,19 +849,19 @@ describe('api: watch', () => {
           () => {
             calls.push('watcher 2')
           },
-          { flush: 'pre' }
+          { flush: 'pre' },
         )
         return () => {
           c.value
           calls.push('render')
         }
-      }
+      },
     }
 
     const App = {
       render() {
         return h(Comp, { a: a.value, b: b.value })
-      }
+      },
     }
 
     render(h(App), nodeOps.createElement('div'))
@@ -613,7 +888,7 @@ describe('api: watch', () => {
           () => {
             calls.push('watch ' + count.value)
           },
-          { flush: 'pre' }
+          { flush: 'pre' },
         )
         onMounted(() => {
           calls.push('mounted')
@@ -622,7 +897,7 @@ describe('api: watch', () => {
         count.value++
         count.value++
         count.value++
-      }
+      },
     }
     render(h(App), nodeOps.createElement('div'))
     expect(calls).toMatchObject(['watch 3', 'mounted'])
@@ -642,13 +917,13 @@ describe('api: watch', () => {
           () => {
             dom = domRef.value
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
 
         return () => {
           return toggle.value ? h('p', { ref: domRef }) : null
         }
-      }
+      },
     }
 
     render(h(App), nodeOps.createElement('div'))
@@ -662,14 +937,14 @@ describe('api: watch', () => {
   it('deep', async () => {
     const state = reactive({
       nested: {
-        count: ref(0)
+        count: ref(0),
       },
       array: [1, 2, 3],
       map: new Map([
         ['a', 1],
-        ['b', 2]
+        ['b', 2],
       ]),
-      set: new Set([1, 2, 3])
+      set: new Set([1, 2, 3]),
     })
 
     let dummy
@@ -680,10 +955,10 @@ describe('api: watch', () => {
           state.nested.count,
           state.array[0],
           state.map.get('a'),
-          state.set.has(1)
+          state.set.has(1),
         ]
       },
-      { deep: true }
+      { deep: true },
     )
 
     state.nested.count++
@@ -717,7 +992,7 @@ describe('api: watch', () => {
       state => {
         dummy = [state[0].value, state[1].value]
       },
-      { deep: true }
+      { deep: true },
     )
 
     count.value++
@@ -725,6 +1000,52 @@ describe('api: watch', () => {
     expect(dummy).toEqual([1, 2])
   })
 
+  it('deep with symbols', async () => {
+    const symbol1 = Symbol()
+    const symbol2 = Symbol()
+    const symbol3 = Symbol()
+    const symbol4 = Symbol()
+
+    const raw: any = {
+      [symbol1]: {
+        [symbol2]: 1,
+      },
+    }
+
+    Object.defineProperty(raw, symbol3, {
+      writable: true,
+      enumerable: false,
+      value: 1,
+    })
+
+    const state = reactive(raw)
+    const spy = vi.fn()
+
+    watch(() => state, spy, { deep: true })
+
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(0)
+
+    state[symbol1][symbol2] = 2
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    // Non-enumerable properties don't trigger deep watchers
+    state[symbol3] = 3
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    // Adding a new symbol property
+    state[symbol4] = 1
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(2)
+
+    // Removing a symbol property
+    delete state[symbol4]
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(3)
+  })
+
   it('immediate', async () => {
     const count = ref(0)
     const cb = vi.fn()
@@ -768,7 +1089,7 @@ describe('api: watch', () => {
         dummy = count.value
       },
       // @ts-expect-error
-      { immediate: false }
+      { immediate: false },
     )
     expect(dummy).toBe(0)
     expect(`"immediate" option is only respected`).toHaveBeenWarned()
@@ -787,7 +1108,7 @@ describe('api: watch', () => {
         return arr
       },
       // @ts-expect-error
-      { deep: true }
+      { deep: true },
     )
     expect(spy).toHaveBeenCalledTimes(1)
     ;(arr.value[1] as Array<number>)[0] = 3
@@ -807,7 +1128,7 @@ describe('api: watch', () => {
       () => {
         dummy = [obj.foo, 'bar' in obj, Object.keys(obj)]
       },
-      { onTrack }
+      { onTrack },
     )
     await nextTick()
     expect(dummy).toEqual([1, true, ['foo', 'bar']])
@@ -816,18 +1137,18 @@ describe('api: watch', () => {
       {
         target: obj,
         type: TrackOpTypes.GET,
-        key: 'foo'
+        key: 'foo',
       },
       {
         target: obj,
         type: TrackOpTypes.HAS,
-        key: 'bar'
+        key: 'bar',
       },
       {
         target: obj,
         type: TrackOpTypes.ITERATE,
-        key: ITERATE_KEY
-      }
+        key: ITERATE_KEY,
+      },
     ])
   })
 
@@ -842,7 +1163,7 @@ describe('api: watch', () => {
       () => {
         dummy = obj.foo
       },
-      { onTrigger }
+      { onTrigger },
     )
     await nextTick()
     expect(dummy).toBe(1)
@@ -855,7 +1176,7 @@ describe('api: watch', () => {
       type: TriggerOpTypes.SET,
       key: 'foo',
       oldValue: 1,
-      newValue: 2
+      newValue: 2,
     })
 
     delete obj.foo
@@ -865,7 +1186,7 @@ describe('api: watch', () => {
     expect(events[1]).toMatchObject({
       type: TriggerOpTypes.DELETE,
       key: 'foo',
-      oldValue: 2
+      oldValue: 2,
     })
   })
 
@@ -879,8 +1200,8 @@ describe('api: watch', () => {
         ++calls
       },
       {
-        flush: 'sync'
-      }
+        flush: 'sync',
+      },
     )
 
     expect(calls).toBe(0)
@@ -981,7 +1302,7 @@ describe('api: watch', () => {
       mounted() {
         instance = getCurrentInstance()
       },
-      unmounted() {}
+      unmounted() {},
     })
 
     const Comp = defineComponent({
@@ -994,7 +1315,7 @@ describe('api: watch', () => {
       render() {
         return this.show
           ? h(Child, {
-              ref: vm => void (this.comp = vm as ComponentPublicInstance)
+              ref: vm => void (this.comp = vm as ComponentPublicInstance),
             })
           : null
       },
@@ -1003,9 +1324,9 @@ describe('api: watch', () => {
         // the effect for this `$watch` should nonetheless be registered with Child
         this.comp!.$watch(
           () => this.show,
-          () => void 0
+          () => void 0,
         )
-      }
+      },
     })
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -1020,7 +1341,7 @@ describe('api: watch', () => {
     await nextTick()
     await nextTick()
 
-    expect(instance!.scope.effects[0].active).toBe(false)
+    expect(instance!.scope.effects[0].flags & EffectFlags.ACTIVE).toBeFalsy()
   })
 
   test('this.$watch should pass `this.proxy` to watch source as the first argument ', () => {
@@ -1032,7 +1353,7 @@ describe('api: watch', () => {
       created(this: any) {
         instance = this
         this.$watch(source, function () {})
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -1049,7 +1370,7 @@ describe('api: watch', () => {
       render() {},
       setup() {
         watch(source, () => {})
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -1070,17 +1391,17 @@ describe('api: watch', () => {
       watch: {
         a() {
           b.value
-        }
+        },
       },
       render() {
         return h('div', this.a)
-      }
+      },
     })
 
     const Parent = defineComponent({
       render() {
         return h(Child, { a: a.value })
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -1103,19 +1424,19 @@ describe('api: watch', () => {
       data() {
         return {
           a: {
-            b: 1
-          }
+            b: 1,
+          },
         }
       },
       watch: {
-        'a.b': spy
+        'a.b': spy,
       },
       created(this: any) {
         this.$watch('a.b', spy)
       },
       mounted(this: any) {
         this.a.b++
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -1158,11 +1479,11 @@ describe('api: watch', () => {
         effectScope(true).run(() => {
           watch(
             () => 1,
-            () => {}
+            () => {},
           )
         })
         return () => ''
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     createApp(Comp).mount(root)
@@ -1185,7 +1506,7 @@ describe('api: watch', () => {
           watch(trigger, () => countW++)
         })
         return () => ''
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -1206,6 +1527,44 @@ describe('api: watch', () => {
     expect(countW).toBe(2)
   })
 
+  const options = [
+    { name: 'only trigger once watch' },
+    {
+      deep: true,
+      name: 'only trigger once watch with deep',
+    },
+    {
+      flush: 'sync',
+      name: 'only trigger once watch with flush: sync',
+    },
+    {
+      flush: 'pre',
+      name: 'only trigger once watch with flush: pre',
+    },
+    {
+      immediate: true,
+      name: 'only trigger once watch with immediate',
+    },
+  ] as const
+  test.each(options)('$name', async option => {
+    const count = ref(0)
+    const cb = vi.fn()
+
+    watch(count, cb, { once: true, ...option })
+
+    count.value++
+    await nextTick()
+
+    expect(count.value).toBe(1)
+    expect(cb).toHaveBeenCalledTimes(1)
+
+    count.value++
+    await nextTick()
+
+    expect(count.value).toBe(2)
+    expect(cb).toHaveBeenCalledTimes(1)
+  })
+
   // #5151
   test('OnCleanup also needs to be cleaned，', async () => {
     const spy1 = vi.fn()
@@ -1240,4 +1599,388 @@ describe('api: watch', () => {
     expect(spy1).toHaveBeenCalledTimes(1)
     expect(spy2).toHaveBeenCalledTimes(1)
   })
+
+  it('watching reactive depth', async () => {
+    const state = reactive({
+      a: {
+        b: {
+          c: {
+            d: {
+              e: 1,
+            },
+          },
+        },
+      },
+    })
+
+    const cb = vi.fn()
+
+    watch(state, cb, { deep: 2 })
+
+    state.a.b = { c: { d: { e: 2 } } }
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(1)
+
+    state.a.b.c = { d: { e: 3 } }
+
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(1)
+
+    state.a.b = { c: { d: { e: 4 } } }
+
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(2)
+  })
+
+  it('watching ref depth', async () => {
+    const state = ref({
+      a: {
+        b: 2,
+      },
+    })
+
+    const cb = vi.fn()
+
+    watch(state, cb, { deep: 1 })
+
+    state.value.a.b = 3
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(0)
+
+    state.value.a = { b: 3 }
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(1)
+  })
+
+  it('watching array depth', async () => {
+    const arr = ref([
+      {
+        a: {
+          b: 2,
+        },
+      },
+      {
+        a: {
+          b: 3,
+        },
+      },
+    ])
+    const cb = vi.fn()
+    watch(arr, cb, { deep: 2 })
+
+    arr.value[0].a.b = 3
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(0)
+
+    arr.value[0].a = { b: 3 }
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(1)
+
+    arr.value[1].a = { b: 4 }
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(2)
+
+    arr.value.push({ a: { b: 5 } })
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(3)
+
+    arr.value.pop()
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(4)
+  })
+
+  test('pause / resume', async () => {
+    const count = ref(0)
+    const cb = vi.fn()
+    const { pause, resume } = watch(count, cb)
+
+    count.value++
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(1)
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function))
+
+    pause()
+    count.value++
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(1)
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function))
+
+    resume()
+    count.value++
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(2)
+    expect(cb).toHaveBeenLastCalledWith(3, 1, expect.any(Function))
+
+    count.value++
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(3)
+    expect(cb).toHaveBeenLastCalledWith(4, 3, expect.any(Function))
+
+    pause()
+    count.value++
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(3)
+    expect(cb).toHaveBeenLastCalledWith(4, 3, expect.any(Function))
+
+    resume()
+    await nextTick()
+    expect(cb).toHaveBeenCalledTimes(4)
+    expect(cb).toHaveBeenLastCalledWith(5, 4, expect.any(Function))
+  })
+
+  it('shallowReactive', async () => {
+    const state = shallowReactive({
+      msg: ref('hello'),
+      foo: {
+        a: ref(1),
+        b: 2,
+      },
+      bar: 'bar',
+    })
+
+    const spy = vi.fn()
+
+    watch(state, spy)
+
+    state.msg.value = 'hi'
+    await nextTick()
+    expect(spy).not.toHaveBeenCalled()
+
+    state.bar = 'bar2'
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    state.foo.a.value++
+    state.foo.b++
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    state.bar = 'bar3'
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+  it('watching reactive with deep: false', async () => {
+    const state = reactive({
+      foo: {
+        a: 2,
+      },
+      bar: 'bar',
+    })
+
+    const spy = vi.fn()
+
+    watch(state, spy, { deep: false })
+
+    state.foo.a++
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(0)
+
+    state.bar = 'bar2'
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
+  test("effect should be removed from scope's effects after it is stopped", () => {
+    const num = ref(0)
+    let unwatch: () => void
+
+    let instance: ComponentInternalInstance
+    const Comp = {
+      setup() {
+        instance = getCurrentInstance()!
+        unwatch = watch(num, () => {
+          console.log(num.value)
+        })
+        return () => null
+      },
+    }
+    const root = nodeOps.createElement('div')
+    createApp(Comp).mount(root)
+    expect(instance!.scope.effects.length).toBe(2)
+    unwatch!()
+    expect(instance!.scope.effects.length).toBe(1)
+
+    const scope = effectScope()
+    scope.run(() => {
+      unwatch = watch(num, () => {
+        console.log(num.value)
+      })
+    })
+    expect(scope.effects.length).toBe(1)
+    unwatch!()
+    expect(scope.effects.length).toBe(0)
+
+    scope.run(() => {
+      watch(num, () => {}, { once: true, immediate: true })
+    })
+    expect(scope.effects.length).toBe(0)
+  })
+
+  // simplified case of VueUse syncRef
+  test('sync watcher should not be batched', () => {
+    const a = ref(0)
+    const b = ref(0)
+    let pauseB = false
+    watch(
+      a,
+      () => {
+        pauseB = true
+        b.value = a.value + 1
+        pauseB = false
+      },
+      { flush: 'sync' },
+    )
+    watch(
+      b,
+      () => {
+        if (!pauseB) {
+          throw new Error('should not be called')
+        }
+      },
+      { flush: 'sync' },
+    )
+
+    a.value = 1
+    expect(b.value).toBe(2)
+  })
+
+  test('watchEffect should not fire on computed deps that did not change', async () => {
+    const a = ref(0)
+    const c = computed(() => a.value % 2)
+    const spy = vi.fn()
+    watchEffect(() => {
+      spy()
+      c.value
+    })
+    expect(spy).toHaveBeenCalledTimes(1)
+    a.value += 2
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
+  test('circular reference', async () => {
+    const obj = { a: 1 }
+    // @ts-expect-error
+    obj.b = obj
+    const foo = ref(obj)
+    const spy = vi.fn()
+
+    watch(foo, spy, { deep: true })
+
+    // @ts-expect-error
+    foo.value.b.a = 2
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(foo.value.a).toBe(2)
+  })
+
+  test('watch immediate error in effect scope should be catched by onErrorCaptured', async () => {
+    const warn = vi.spyOn(console, 'warn')
+    warn.mockImplementation(() => {})
+    const ERROR_IN_SCOPE = 'ERROR_IN_SCOPE'
+    const ERROR_OUT_SCOPE = 'ERROR_OUT_SCOPE'
+
+    const errors = ref<string[]>([])
+    const Comp = {
+      setup() {
+        const trigger = ref(0)
+
+        effectScope(true).run(() => {
+          watch(
+            trigger,
+            () => {
+              throw new Error(ERROR_IN_SCOPE)
+            },
+            { immediate: true },
+          )
+        })
+
+        watchEffect(() => {
+          throw new Error(ERROR_OUT_SCOPE)
+        })
+
+        return () => ''
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(
+      h(
+        {
+          setup(_, { slots }) {
+            onErrorCaptured(e => {
+              errors.value.push(e.message)
+              return false
+            })
+
+            return () => h('div', slots.default && slots.default())
+          },
+        },
+        null,
+        () => [h(Comp)],
+      ),
+      root,
+    )
+    await nextTick()
+    // only watchEffect as ran so far
+    expect(errors.value).toHaveLength(2)
+    expect(errors.value[0]).toBe(ERROR_IN_SCOPE)
+    expect(errors.value[1]).toBe(ERROR_OUT_SCOPE)
+
+    warn.mockRestore()
+  })
+
+  test('should be executed correctly', () => {
+    const v = ref(1)
+    let foo = ''
+
+    watch(
+      v,
+      () => {
+        foo += '1'
+      },
+      {
+        flush: 'sync',
+      },
+    )
+    watch(
+      v,
+      () => {
+        foo += '2'
+      },
+      {
+        flush: 'sync',
+      },
+    )
+
+    expect(foo).toBe('')
+    v.value++
+    expect(foo).toBe('12')
+  })
+
+  // 12045
+  test('sync watcher should not break pre watchers', async () => {
+    const count1 = ref(0)
+    const count2 = ref(0)
+
+    watch(
+      count1,
+      () => {
+        count2.value++
+      },
+      { flush: 'sync' },
+    )
+
+    const spy1 = vi.fn()
+    watch([count1, count2], spy1)
+
+    const spy2 = vi.fn()
+    watch(count1, spy2)
+
+    count1.value++
+
+    await nextTick()
+    expect(spy1).toHaveBeenCalled()
+    expect(spy2).toHaveBeenCalled()
+  })
 })
diff --git a/packages/runtime-core/__tests__/componentEmits.spec.ts b/packages/runtime-core/__tests__/componentEmits.spec.ts
index 0019dd9eb..dc82c0491 100644
--- a/packages/runtime-core/__tests__/componentEmits.spec.ts
+++ b/packages/runtime-core/__tests__/componentEmits.spec.ts
@@ -2,13 +2,13 @@
 // ./rendererAttrsFallthrough.spec.ts.
 
 import {
-  render,
+  type ComponentPublicInstance,
   defineComponent,
   h,
-  nodeOps,
-  toHandlers,
   nextTick,
-  ComponentPublicInstance
+  nodeOps,
+  render,
+  toHandlers,
 } from '@vue/runtime-test'
 import { isEmitListener } from '../src/componentEmits'
 
@@ -21,7 +21,7 @@ describe('component: emit', () => {
         this.$emit('foo')
         this.$emit('bar')
         this.$emit('!baz')
-      }
+      },
     })
 
     const onfoo = vi.fn()
@@ -41,13 +41,13 @@ describe('component: emit', () => {
       render() {},
       created() {
         this.$emit('test-event')
-      }
+      },
     })
 
     const fooSpy = vi.fn()
     const Comp = () =>
       h(Foo, {
-        onTestEvent: fooSpy
+        onTestEvent: fooSpy,
       })
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -59,13 +59,13 @@ describe('component: emit', () => {
       render() {},
       created() {
         this.$emit('test-event')
-      }
+      },
     })
 
     const fooSpy = vi.fn()
     const Comp = () =>
       h(Foo, {
-        'onTest-event': fooSpy
+        'onTest-event': fooSpy,
       })
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -79,7 +79,7 @@ describe('component: emit', () => {
       created() {
         this.$emit('test-event')
         this.$emit('testEvent')
-      }
+      },
     })
 
     const fooSpy = vi.fn()
@@ -90,8 +90,8 @@ describe('component: emit', () => {
         Foo,
         toHandlers({
           'test-event': fooSpy,
-          testEvent: barSpy
-        })
+          testEvent: barSpy,
+        }),
       )
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -106,7 +106,7 @@ describe('component: emit', () => {
       created() {
         this.$emit('update:fooProp')
         this.$emit('update:barProp')
-      }
+      },
     })
 
     const fooSpy = vi.fn()
@@ -114,7 +114,7 @@ describe('component: emit', () => {
     const Comp = () =>
       h(Foo, {
         'onUpdate:fooProp': fooSpy,
-        'onUpdate:bar-prop': barSpy
+        'onUpdate:bar-prop': barSpy,
       })
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -127,7 +127,7 @@ describe('component: emit', () => {
       setup(_, { emit }) {
         emit('foo', 1)
         return () => h('div')
-      }
+      },
     })
 
     const fn1 = vi.fn()
@@ -137,9 +137,9 @@ describe('component: emit', () => {
       setup() {
         return () =>
           h(Child, {
-            onFoo: [fn1, fn2]
+            onFoo: [fn1, fn2],
           })
-      }
+      },
     }
 
     render(h(App), nodeOps.createElement('div'))
@@ -155,29 +155,29 @@ describe('component: emit', () => {
       render() {},
       created() {
         // @ts-expect-error
-        this.$emit('bar')
-      }
+        this.$emit('bar-baz')
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(
-      `Component emitted event "bar" but it is neither declared`
+      `Component emitted event "bar-baz" but it is neither declared in the emits option nor as an "onBarBaz" prop`,
     ).toHaveBeenWarned()
   })
 
   test('warning for undeclared event (object)', () => {
     const Foo = defineComponent({
       emits: {
-        foo: null
+        foo: null,
       },
       render() {},
       created() {
         // @ts-expect-error
-        this.$emit('bar')
-      }
+        this.$emit('bar-baz')
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(
-      `Component emitted event "bar" but it is neither declared`
+      `Component emitted event "bar-baz" but it is neither declared in the emits option nor as an "onBarBaz" prop`,
     ).toHaveBeenWarned()
   })
 
@@ -189,23 +189,39 @@ describe('component: emit', () => {
       created() {
         // @ts-expect-error
         this.$emit('foo')
-      }
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(
-      `Component emitted event "foo" but it is neither declared`
+      `Component emitted event "foo" but it is neither declared`,
+    ).not.toHaveBeenWarned()
+  })
+
+  test('should not warn if has equivalent onXXX prop with kebab-cased event', () => {
+    const Foo = defineComponent({
+      props: ['onFooBar'],
+      emits: [],
+      render() {},
+      created() {
+        // @ts-expect-error
+        this.$emit('foo-bar')
+      },
+    })
+    render(h(Foo), nodeOps.createElement('div'))
+    expect(
+      `Component emitted event "foo-bar" but it is neither declared`,
     ).not.toHaveBeenWarned()
   })
 
   test('validator warning', () => {
     const Foo = defineComponent({
       emits: {
-        foo: (arg: number) => arg > 0
+        foo: (arg: number) => arg > 0,
       },
       render() {},
       created() {
         this.$emit('foo', -1)
-      }
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(`event validation failed for event "foo"`).toHaveBeenWarned()
@@ -214,15 +230,15 @@ describe('component: emit', () => {
   test('merging from mixins', () => {
     const mixin = {
       emits: {
-        foo: (arg: number) => arg > 0
-      }
+        foo: (arg: number) => arg > 0,
+      },
     }
     const Foo = defineComponent({
       mixins: [mixin],
       render() {},
       created() {
         this.$emit('foo', -1)
-      }
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(`event validation failed for event "foo"`).toHaveBeenWarned()
@@ -235,11 +251,11 @@ describe('component: emit', () => {
       render() {},
       created() {
         this.$emit('foo')
-      }
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(
-      `Component emitted event "foo" but it is neither declared`
+      `Component emitted event "foo" but it is neither declared`,
     ).not.toHaveBeenWarned()
   })
 
@@ -248,23 +264,23 @@ describe('component: emit', () => {
       render() {},
       emits: {
         foo: null,
-        bar: null
+        bar: null,
       },
       created() {
         this.$emit('foo')
         this.$emit('foo')
         this.$emit('bar')
         this.$emit('bar')
-      }
+      },
     })
     const fn = vi.fn()
     const barFn = vi.fn()
     render(
       h(Foo, {
         onFooOnce: fn,
-        onBarOnce: barFn
+        onBarOnce: barFn,
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
     expect(fn).toHaveBeenCalledTimes(1)
     expect(barFn).toHaveBeenCalledTimes(1)
@@ -274,21 +290,21 @@ describe('component: emit', () => {
     const Foo = defineComponent({
       render() {},
       emits: {
-        foo: null
+        foo: null,
       },
       created() {
         this.$emit('foo')
         this.$emit('foo')
-      }
+      },
     })
     const onFoo = vi.fn()
     const onFooOnce = vi.fn()
     render(
       h(Foo, {
         onFoo,
-        onFooOnce
+        onFooOnce,
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
     expect(onFoo).toHaveBeenCalledTimes(2)
     expect(onFooOnce).toHaveBeenCalledTimes(1)
@@ -300,7 +316,7 @@ describe('component: emit', () => {
       created() {
         this.$emit('update:modelValue', '1')
         this.$emit('update:foo', '2')
-      }
+      },
     })
 
     const fn1 = vi.fn()
@@ -314,7 +330,7 @@ describe('component: emit', () => {
 
         foo: null,
         fooModifiers: { number: true },
-        'onUpdate:foo': fn2
+        'onUpdate:foo': fn2,
       })
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -331,7 +347,7 @@ describe('component: emit', () => {
       created() {
         this.$emit('update:modelValue', ' one ')
         this.$emit('update:foo', '  two  ')
-      }
+      },
     })
 
     const fn1 = vi.fn()
@@ -345,7 +361,7 @@ describe('component: emit', () => {
 
         foo: null,
         fooModifiers: { trim: true },
-        'onUpdate:foo': fn2
+        'onUpdate:foo': fn2,
       })
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -356,13 +372,90 @@ describe('component: emit', () => {
     expect(fn2).toHaveBeenCalledWith('two')
   })
 
+  test('.trim modifier should work with v-model on component for kebab-cased props and camelCased emit', () => {
+    const Foo = defineComponent({
+      render() {},
+      created() {
+        this.$emit('update:firstName', ' one ')
+      },
+    })
+
+    const fn1 = vi.fn()
+
+    const Comp = () =>
+      h(Foo, {
+        'first-name': null,
+        'first-nameModifiers': { trim: true },
+        'onUpdate:first-name': fn1,
+      })
+
+    render(h(Comp), nodeOps.createElement('div'))
+
+    expect(fn1).toHaveBeenCalledTimes(1)
+    expect(fn1).toHaveBeenCalledWith('one')
+  })
+
+  test('.trim modifier should work with v-model on component for camelCased props and kebab-cased emit', () => {
+    const Foo = defineComponent({
+      render() {},
+      created() {
+        this.$emit('update:model-value', ' one ')
+        this.$emit('update:first-name', ' two ')
+      },
+    })
+
+    const fn1 = vi.fn()
+    const fn2 = vi.fn()
+
+    const Comp = () =>
+      h(Foo, {
+        modelValue: null,
+        modelModifiers: { trim: true },
+        'onUpdate:modelValue': fn1,
+
+        firstName: null,
+        firstNameModifiers: { trim: true },
+        'onUpdate:firstName': fn2,
+      })
+
+    render(h(Comp), nodeOps.createElement('div'))
+
+    expect(fn1).toHaveBeenCalledTimes(1)
+    expect(fn1).toHaveBeenCalledWith('one')
+    expect(fn2).toHaveBeenCalledTimes(1)
+    expect(fn2).toHaveBeenCalledWith('two')
+  })
+
+  test('.trim modifier should work with v-model on component for mixed cased props and emit', () => {
+    const Foo = defineComponent({
+      render() {},
+      created() {
+        this.$emit('update:base-URL', ' one ')
+      },
+    })
+
+    const fn1 = vi.fn()
+
+    const Comp = () =>
+      h(Foo, {
+        'base-URL': null,
+        'base-URLModifiers': { trim: true },
+        'onUpdate:base-URL': fn1,
+      })
+
+    render(h(Comp), nodeOps.createElement('div'))
+
+    expect(fn1).toHaveBeenCalledTimes(1)
+    expect(fn1).toHaveBeenCalledWith('one')
+  })
+
   test('.trim and .number modifiers should work with v-model on component', () => {
     const Foo = defineComponent({
       render() {},
       created() {
         this.$emit('update:modelValue', '    +01.2    ')
         this.$emit('update:foo', '    1    ')
-      }
+      },
     })
 
     const fn1 = vi.fn()
@@ -376,7 +469,7 @@ describe('component: emit', () => {
 
         foo: null,
         fooModifiers: { trim: true, number: true },
-        'onUpdate:foo': fn2
+        'onUpdate:foo': fn2,
       })
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -392,7 +485,7 @@ describe('component: emit', () => {
       render() {},
       created() {
         this.$emit('update:modelValue', ' foo ', { bar: ' bar ' })
-      }
+      },
     })
 
     const fn = vi.fn()
@@ -400,7 +493,7 @@ describe('component: emit', () => {
       h(Foo, {
         modelValue: null,
         modelModifiers: { trim: true },
-        'onUpdate:modelValue': fn
+        'onUpdate:modelValue': fn,
       })
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -414,7 +507,7 @@ describe('component: emit', () => {
       click: null,
       'test-event': null,
       fooBar: null,
-      FooBaz: null
+      FooBaz: null,
     }
     expect(isEmitListener(options, 'onClick')).toBe(true)
     expect(isEmitListener(options, 'onclick')).toBe(false)
@@ -440,11 +533,11 @@ describe('component: emit', () => {
       },
       render() {
         return h('div')
-      }
+      },
     })
     const Comp = () =>
       h(Foo, {
-        onClosing: fn
+        onClosing: fn,
       })
 
     const el = nodeOps.createElement('div')
@@ -457,10 +550,10 @@ describe('component: emit', () => {
 
   test('merge string array emits', async () => {
     const ComponentA = defineComponent({
-      emits: ['one', 'two']
+      emits: ['one', 'two'],
     })
     const ComponentB = defineComponent({
-      emits: ['three']
+      emits: ['three'],
     })
     const renderFn = vi.fn(function (this: ComponentPublicInstance) {
       expect(this.$options.emits).toEqual(['one', 'two', 'three'])
@@ -468,7 +561,7 @@ describe('component: emit', () => {
     })
     const ComponentC = defineComponent({
       render: renderFn,
-      mixins: [ComponentA, ComponentB]
+      mixins: [ComponentA, ComponentB],
     })
     const el = nodeOps.createElement('div')
     expect(renderFn).toHaveBeenCalledTimes(0)
@@ -481,24 +574,24 @@ describe('component: emit', () => {
     const ComponentA = defineComponent({
       emits: {
         one: null,
-        two: twoFn
-      }
+        two: twoFn,
+      },
     })
     const ComponentB = defineComponent({
-      emits: ['three']
+      emits: ['three'],
     })
     const renderFn = vi.fn(function (this: ComponentPublicInstance) {
       expect(this.$options.emits).toEqual({
         one: null,
         two: twoFn,
-        three: null
+        three: null,
       })
       expect(this.$options.emits.two).toBe(twoFn)
       return h('div')
     })
     const ComponentC = defineComponent({
       render: renderFn,
-      mixins: [ComponentA, ComponentB]
+      mixins: [ComponentA, ComponentB],
     })
     const el = nodeOps.createElement('div')
     expect(renderFn).toHaveBeenCalledTimes(0)
diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts
index 885e80090..8c9c38b3c 100644
--- a/packages/runtime-core/__tests__/componentProps.spec.ts
+++ b/packages/runtime-core/__tests__/componentProps.spec.ts
@@ -3,23 +3,24 @@
  */
 
 import {
-  ComponentInternalInstance,
-  getCurrentInstance,
-  render,
-  h,
-  nodeOps,
-  FunctionalComponent,
-  defineComponent,
-  ref,
-  serializeInner,
+  type ComponentInternalInstance,
+  type FunctionalComponent,
+  type SetupContext,
   createApp,
-  provide,
+  defineComponent,
+  getCurrentInstance,
+  h,
   inject,
-  watch,
+  nextTick,
+  nodeOps,
+  provide,
+  ref,
+  render,
+  serializeInner,
   toRefs,
-  SetupContext
+  watch,
 } from '@vue/runtime-test'
-import { render as domRender, nextTick } from 'vue'
+import { render as domRender } from 'vue'
 
 describe('component props', () => {
   test('stateful', () => {
@@ -33,7 +34,7 @@ describe('component props', () => {
         props = this.$props
         attrs = this.$attrs
         proxy = this
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -74,7 +75,7 @@ describe('component props', () => {
           props = _props
           attrs = _attrs
         }
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -142,20 +143,20 @@ describe('component props', () => {
         foo: Boolean,
         bar: Boolean,
         baz: Boolean,
-        qux: Boolean
+        qux: Boolean,
       },
       render() {
         proxy = this
-      }
+      },
     }
     render(
       h(Comp, {
         // absent should cast to false
         bar: '', // empty string should cast to true
         baz: 'baz', // same string should cast to true
-        qux: 'ok' // other values should be left in-tact (but raise warning)
+        qux: 'ok', // other values should be left in-tact (but raise warning)
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
 
     expect(proxy.foo).toBe(false)
@@ -173,19 +174,19 @@ describe('component props', () => {
     const Comp = {
       props: {
         foo: {
-          default: 1
+          default: 1,
         },
         bar: {
-          default: defaultFn
+          default: defaultFn,
         },
         baz: {
           type: Function,
-          default: defaultBaz
-        }
+          default: defaultBaz,
+        },
       },
       render() {
         proxy = this
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -225,21 +226,21 @@ describe('component props', () => {
     const Child = defineComponent({
       props: {
         test: {
-          default: () => inject('test', 'default')
-        }
+          default: () => inject('test', 'default'),
+        },
       },
       setup(props) {
         return () => {
           return h('div', props.test)
         }
-      }
+      },
     })
 
     const Comp = {
       setup() {
         provide('test', 'injected')
         return () => h(Child)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -250,7 +251,7 @@ describe('component props', () => {
   test('optimized props updates', async () => {
     const Child = defineComponent({
       props: ['foo'],
-      template: `<div>{{ foo }}</div>`
+      template: `<div>{{ foo }}</div>`,
     })
 
     const foo = ref(1)
@@ -260,11 +261,11 @@ describe('component props', () => {
       setup() {
         return {
           foo,
-          id
+          id,
         }
       },
       components: { Child },
-      template: `<Child :foo="foo" :id="id"/>`
+      template: `<Child :foo="foo" :id="id"/>`,
     })
 
     // Note this one is using the main Vue render so it can compile template
@@ -282,6 +283,56 @@ describe('component props', () => {
     expect(root.innerHTML).toBe('<div id="b">2</div>')
   })
 
+  describe('validator', () => {
+    test('validator should be called with two arguments', async () => {
+      const mockFn = vi.fn((...args: any[]) => true)
+      const Comp = defineComponent({
+        props: {
+          foo: {
+            type: Number,
+            validator: (value, props) => mockFn(value, props),
+          },
+          bar: {
+            type: Number,
+          },
+        },
+        template: `<div />`,
+      })
+
+      // Note this one is using the main Vue render so it can compile template
+      // on the fly
+      const root = document.createElement('div')
+      domRender(h(Comp, { foo: 1, bar: 2 }), root)
+      expect(mockFn).toHaveBeenCalledWith(1, { foo: 1, bar: 2 })
+    })
+
+    test('validator should not be able to mutate other props', async () => {
+      const mockFn = vi.fn((...args: any[]) => true)
+      const Comp = defineComponent({
+        props: {
+          foo: {
+            type: Number,
+            validator: (value, props) => !!(props.bar = 1),
+          },
+          bar: {
+            type: Number,
+            validator: value => mockFn(value),
+          },
+        },
+        template: `<div />`,
+      })
+
+      // Note this one is using the main Vue render so it can compile template
+      // on the fly
+      const root = document.createElement('div')
+      domRender(h(Comp, { foo: 1, bar: 2 }), root)
+      expect(
+        `Set operation on key "bar" failed: target is readonly.`,
+      ).toHaveBeenWarnedLast()
+      expect(mockFn).toHaveBeenCalledWith(2)
+    })
+  })
+
   test('warn props mutation', () => {
     let instance: ComponentInternalInstance
     let setupProps: any
@@ -291,7 +342,7 @@ describe('component props', () => {
         instance = getCurrentInstance()!
         setupProps = props
         return () => null
-      }
+      },
     }
     render(h(Comp, { foo: 1 }), nodeOps.createElement('div'))
     expect(setupProps.foo).toBe(1)
@@ -313,11 +364,11 @@ describe('component props', () => {
       props: {
         bool: { type: Boolean, required: true },
         str: { type: String, required: true },
-        num: { type: Number, required: true }
+        num: { type: Number, required: true },
       },
       setup() {
         return () => null
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(`Missing required prop: "bool"`).toHaveBeenWarned()
@@ -337,11 +388,11 @@ describe('component props', () => {
         cls: { type: MyClass },
         fn: { type: Function },
         skipCheck: { type: [Boolean, Function], skipCheck: true },
-        empty: { type: [] }
+        empty: { type: [] },
       },
       setup() {
         return () => null
-      }
+      },
     }
     render(
       h(Comp, {
@@ -353,36 +404,36 @@ describe('component props', () => {
         cls: {},
         fn: true,
         skipCheck: 'foo',
-        empty: [1, 2, 3]
+        empty: [1, 2, 3],
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
     expect(
-      `Invalid prop: type check failed for prop "bool". Expected Boolean, got String`
+      `Invalid prop: type check failed for prop "bool". Expected Boolean, got String`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "str". Expected String with value "100", got Number with value 100.`
+      `Invalid prop: type check failed for prop "str". Expected String with value "100", got Number with value 100.`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "num". Expected Number with value 100, got String with value "100".`
+      `Invalid prop: type check failed for prop "num". Expected Number with value 100, got String with value "100".`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "arr". Expected Array, got Object`
+      `Invalid prop: type check failed for prop "arr". Expected Array, got Object`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "obj". Expected Object, got String with value "false"`
+      `Invalid prop: type check failed for prop "obj". Expected Object, got String with value "false"`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "fn". Expected Function, got Boolean with value true.`
+      `Invalid prop: type check failed for prop "fn". Expected Function, got Boolean with value true.`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "cls". Expected MyClass, got Object`
+      `Invalid prop: type check failed for prop "cls". Expected MyClass, got Object`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "skipCheck". Expected Boolean | Function, got String with value "foo".`
+      `Invalid prop: type check failed for prop "skipCheck". Expected Boolean | Function, got String with value "foo".`,
     ).not.toHaveBeenWarned()
     expect(
-      `Prop type [] for prop "empty" won't match anything. Did you mean to use type Array instead?`
+      `Prop type [] for prop "empty" won't match anything. Did you mean to use type Array instead?`,
     ).toHaveBeenWarned()
   })
 
@@ -390,17 +441,17 @@ describe('component props', () => {
   test('should not warn required props using kebab-case', async () => {
     const Comp = {
       props: {
-        fooBar: { type: String, required: true }
+        fooBar: { type: String, required: true },
       },
       setup() {
         return () => null
-      }
+      },
     }
     render(
       h(Comp, {
-        'foo-bar': 'hello'
+        'foo-bar': 'hello',
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
     expect(`Missing required prop: "fooBar"`).not.toHaveBeenWarned()
   })
@@ -410,13 +461,13 @@ describe('component props', () => {
     let renderProxy: any
 
     const E = {
-      props: ['base']
+      props: ['base'],
     }
     const M1 = {
-      props: ['m1']
+      props: ['m1'],
     }
     const M2 = {
-      props: { m2: null }
+      props: { m2: null },
     }
     const Comp = {
       props: ['self'],
@@ -428,7 +479,7 @@ describe('component props', () => {
       render(this: any) {
         renderProxy = this
         return h('div', [this.self, this.base, this.m1, this.m2])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -436,12 +487,12 @@ describe('component props', () => {
       self: 'from self, ',
       base: 'from base, ',
       m1: 'from mixin 1, ',
-      m2: 'from mixin 2'
+      m2: 'from mixin 2',
     }
     render(h(Comp, props), root)
 
     expect(serializeInner(root)).toMatch(
-      `from self, from base, from mixin 1, from mixin 2`
+      `from self, from base, from mixin 1, from mixin 2`,
     )
     expect(setupProps).toMatchObject(props)
     expect(renderProxy.$props).toMatchObject(props)
@@ -452,10 +503,10 @@ describe('component props', () => {
     let renderProxy: any
 
     const M1 = {
-      props: ['m1']
+      props: ['m1'],
     }
     const M2 = {
-      props: { m2: null }
+      props: { m2: null },
     }
     const Comp = {
       props: ['self'],
@@ -465,13 +516,13 @@ describe('component props', () => {
       render(this: any) {
         renderProxy = this
         return h('div', [this.self, this.m1, this.m2])
-      }
+      },
     }
 
     const props = {
       self: 'from self, ',
       m1: 'from mixin 1, ',
-      m2: 'from mixin 2'
+      m2: 'from mixin 2',
     }
     const app = createApp(Comp, props)
     app.mixin(M1)
@@ -481,28 +532,118 @@ describe('component props', () => {
     app.mount(root)
 
     expect(serializeInner(root)).toMatch(
-      `from self, from mixin 1, from mixin 2`
+      `from self, from mixin 1, from mixin 2`,
     )
     expect(setupProps).toMatchObject(props)
     expect(renderProxy.$props).toMatchObject(props)
   })
 
+  test('merging props from global mixins and extends', () => {
+    let renderProxy: any
+    let extendedRenderProxy: any
+
+    const defaultProp = ' from global'
+    const props = {
+      globalProp: {
+        type: String,
+        default: defaultProp,
+      },
+    }
+    const globalMixin = {
+      props,
+    }
+    const Comp = {
+      render(this: any) {
+        renderProxy = this
+        return h('div', ['Comp', this.globalProp])
+      },
+    }
+    const ExtendedComp = {
+      extends: Comp,
+      render(this: any) {
+        extendedRenderProxy = this
+        return h('div', ['ExtendedComp', this.globalProp])
+      },
+    }
+
+    const app = createApp(
+      {
+        render: () => [h(ExtendedComp), h(Comp)],
+      },
+      {},
+    )
+    app.mixin(globalMixin)
+
+    const root = nodeOps.createElement('div')
+    app.mount(root)
+
+    expect(serializeInner(root)).toMatch(
+      `<div>ExtendedComp from global</div><div>Comp from global</div>`,
+    )
+    expect(renderProxy.$props).toMatchObject({ globalProp: defaultProp })
+    expect(extendedRenderProxy.$props).toMatchObject({
+      globalProp: defaultProp,
+    })
+  })
+
+  test('merging props for a component that is also used as a mixin', () => {
+    const CompA = {
+      render(this: any) {
+        return this.foo
+      },
+    }
+
+    const mixin = {
+      props: {
+        foo: {
+          default: 'from mixin',
+        },
+      },
+    }
+
+    const CompB = {
+      mixins: [mixin, CompA],
+      render(this: any) {
+        return this.foo
+      },
+    }
+
+    const app = createApp({
+      render() {
+        return [h(CompA), ', ', h(CompB)]
+      },
+    })
+
+    app.mixin({
+      props: {
+        foo: {
+          default: 'from global mixin',
+        },
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    app.mount(root)
+
+    expect(serializeInner(root)).toMatch(`from global mixin, from mixin`)
+  })
+
   test('props type support BigInt', () => {
     const Comp = {
       props: {
-        foo: BigInt
+        foo: BigInt,
       },
       render(this: any) {
         return h('div', [this.foo])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
     render(
       h(Comp, {
-        foo: BigInt(BigInt(100000111)) + BigInt(2000000000) * BigInt(30000000)
+        foo: BigInt(BigInt(100000111)) + BigInt(2000000000) * BigInt(30000000),
       }),
-      root
+      root,
     )
 
     expect(serializeInner(root)).toMatch('<div>60000000100000111</div>')
@@ -515,25 +656,25 @@ describe('component props', () => {
       props: {
         foo: {
           type: Object,
-          default: () => ({ val: 1 })
+          default: () => ({ val: 1 }),
         },
-        bar: Number
+        bar: Number,
       },
       setup(props: any) {
         watch(
           () => props.foo,
           () => {
             count++
-          }
+          },
         )
         return () => h('h1', [props.foo.val, props.bar])
-      }
+      },
     }
 
     const foo = ref()
     const bar = ref(0)
     const app = createApp({
-      render: () => h(Comp, { foo: foo.value, bar: bar.value })
+      render: () => h(Comp, { foo: foo.value, bar: bar.value }),
     })
 
     const root = nodeOps.createElement('div')
@@ -556,13 +697,13 @@ describe('component props', () => {
     const Comp = {
       render() {},
       props: {
-        foo: String
+        foo: String,
       },
       setup(props: any) {
         initialKeys = Object.keys(props)
         const { foo } = toRefs(props)
         watch(foo, changeSpy)
-      }
+      },
     }
 
     const Parent = () => (passFoo.value ? h(Comp, { foo: 'ok' }) : h(Comp))
@@ -590,15 +731,15 @@ describe('component props', () => {
           childProps.value && childProps.value.foo
           return slots.default!()
         }
-      }
+      },
     }
 
     const Child = {
       props: {
         foo: {
           type: Boolean,
-          required: false
-        }
+          required: false,
+        },
       },
       setup(props: { foo: boolean }) {
         const register = inject('register') as any
@@ -607,13 +748,13 @@ describe('component props', () => {
         register(props)
 
         return () => 'foo'
-      }
+      },
     }
 
     const App = {
       setup() {
         return () => h(Parent, () => h(Child as any, { foo: '' }, () => null))
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -625,9 +766,9 @@ describe('component props', () => {
   test('support null in required + multiple-type declarations', () => {
     const Comp = {
       props: {
-        foo: { type: [Function, null], required: true }
+        foo: { type: [Function, null], required: true },
       },
-      render() {}
+      render() {},
     }
     const root = nodeOps.createElement('div')
     expect(() => {
@@ -644,7 +785,7 @@ describe('component props', () => {
     const Comp = {
       render(this: any) {
         return JSON.stringify(this.$attrs) + Object.keys(this.$attrs)
-      }
+      },
     }
     const root = nodeOps.createElement('div')
 
@@ -652,12 +793,12 @@ describe('component props', () => {
 
     render(h(Comp, attrs), root)
     expect(serializeInner(root)).toBe(
-      JSON.stringify(attrs) + Object.keys(attrs)
+      JSON.stringify(attrs) + Object.keys(attrs),
     )
 
     render(h(Comp, (attrs = { foo: 'bar' })), root)
     expect(serializeInner(root)).toBe(
-      JSON.stringify(attrs) + Object.keys(attrs)
+      JSON.stringify(attrs) + Object.keys(attrs),
     )
   })
 
@@ -665,12 +806,12 @@ describe('component props', () => {
   test('should not mutate original props long-form definition object', () => {
     const props = {
       msg: {
-        type: String
-      }
+        type: String,
+      },
     }
     const Comp = defineComponent({
       props,
-      render() {}
+      render() {},
     })
 
     const root = nodeOps.createElement('div')
@@ -679,4 +820,58 @@ describe('component props', () => {
 
     expect(Object.keys(props.msg).length).toBe(1)
   })
+
+  test('should warn against reserved prop names', () => {
+    const Comp = defineComponent({
+      props: {
+        key: String,
+        ref: String,
+        $foo: String,
+      },
+      render() {},
+    })
+
+    const root = nodeOps.createElement('div')
+
+    render(h(Comp, { msg: 'test' }), root)
+
+    expect(`Invalid prop name: "key"`).toHaveBeenWarned()
+    expect(`Invalid prop name: "ref"`).toHaveBeenWarned()
+    expect(`Invalid prop name: "$foo"`).toHaveBeenWarned()
+  })
+
+  // #5517
+  test('events should not be props when component updating', async () => {
+    let props: any
+    function eventHandler() {}
+    const foo = ref(1)
+
+    const Child = defineComponent({
+      setup(_props) {
+        props = _props
+      },
+      emits: ['event'],
+      props: ['foo'],
+      template: `<div>{{ foo }}</div>`,
+    })
+
+    const Comp = defineComponent({
+      setup() {
+        return {
+          foo,
+          eventHandler,
+        }
+      },
+      components: { Child },
+      template: `<Child @event="eventHandler" :foo="foo" />`,
+    })
+
+    const root = document.createElement('div')
+    domRender(h(Comp), root)
+    expect(props).not.toHaveProperty('onEvent')
+
+    foo.value++
+    await nextTick()
+    expect(props).not.toHaveProperty('onEvent')
+  })
 })
diff --git a/packages/runtime-core/__tests__/componentPublicInstance.spec.ts b/packages/runtime-core/__tests__/componentPublicInstance.spec.ts
index 4fe63861a..37c228a51 100644
--- a/packages/runtime-core/__tests__/componentPublicInstance.spec.ts
+++ b/packages/runtime-core/__tests__/componentPublicInstance.spec.ts
@@ -1,13 +1,16 @@
 import {
-  h,
-  render,
-  getCurrentInstance,
-  nodeOps,
   createApp,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  nodeOps,
+  render,
   shallowReadonly,
-  defineComponent
 } from '@vue/runtime-test'
-import { ComponentInternalInstance, ComponentOptions } from '../src/component'
+import type {
+  ComponentInternalInstance,
+  ComponentOptions,
+} from '../src/component'
 
 describe('component: proxy', () => {
   test('data', () => {
@@ -16,7 +19,7 @@ describe('component: proxy', () => {
     const Comp = {
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       mounted() {
@@ -25,7 +28,7 @@ describe('component: proxy', () => {
       },
       render() {
         return null
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(instanceProxy.foo).toBe(1)
@@ -39,7 +42,7 @@ describe('component: proxy', () => {
     const Comp = {
       setup() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       mounted() {
@@ -48,7 +51,7 @@ describe('component: proxy', () => {
       },
       render() {
         return null
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(instanceProxy.foo).toBe(1)
@@ -64,7 +67,7 @@ describe('component: proxy', () => {
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
     render(h(Comp, { count: 1 }), nodeOps.createElement('div'))
     expect('count' in instanceProxy).toBe(false)
@@ -80,7 +83,7 @@ describe('component: proxy', () => {
       mounted() {
         instance = getCurrentInstance()!
         instanceProxy = this
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(instanceProxy.$data).toBe(instance!.data)
@@ -89,7 +92,7 @@ describe('component: proxy', () => {
     expect(instanceProxy.$slots).toBe(shallowReadonly(instance!.slots))
     expect(instanceProxy.$refs).toBe(shallowReadonly(instance!.refs))
     expect(instanceProxy.$parent).toBe(
-      instance!.parent && instance!.parent.proxy
+      instance!.parent && instance!.parent.proxy,
     )
     expect(instanceProxy.$root).toBe(instance!.root.proxy)
     expect(instanceProxy.$emit).toBe(instance!.emit)
@@ -114,7 +117,7 @@ describe('component: proxy', () => {
       mounted() {
         instance = getCurrentInstance()!
         instanceProxy = this
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     instanceProxy.foo = 1
@@ -137,7 +140,7 @@ describe('component: proxy', () => {
       mounted() {
         instance = getCurrentInstance()!
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -159,21 +162,21 @@ describe('component: proxy', () => {
     const Comp = {
       render() {},
       props: {
-        msg: String
+        msg: String,
       },
       data() {
         return {
-          foo: 0
+          foo: 0,
         }
       },
       setup() {
         return {
-          bar: 1
+          bar: 1,
         }
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp, { msg: 'hello' })
@@ -211,7 +214,7 @@ describe('component: proxy', () => {
       'msg',
       'bar',
       'foo',
-      'baz'
+      'baz',
     ])
   })
 
@@ -221,12 +224,12 @@ describe('component: proxy', () => {
       render() {},
       setup() {
         return {
-          isDisplayed: true
+          isDisplayed: true,
         }
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -244,7 +247,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'isDisplayed', {
       get() {
         return false
-      }
+      },
     })
 
     expect(instanceProxy.isDisplayed).toBe(false)
@@ -252,7 +255,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'isDisplayed', {
       get() {
         return true
-      }
+      },
     })
 
     expect(instanceProxy.isDisplayed).toBe(true)
@@ -267,12 +270,12 @@ describe('component: proxy', () => {
         return {
           toggle() {
             return 'a'
-          }
+          },
         }
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -289,7 +292,7 @@ describe('component: proxy', () => {
       get() {
         getCalledTimes++
         return () => 'b'
-      }
+      },
     })
 
     // getter should not be evaluated on initial definition
@@ -323,12 +326,12 @@ describe('component: proxy', () => {
       render() {},
       setup() {
         return {
-          toggle: 'a'
+          toggle: 'a',
         }
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -339,14 +342,14 @@ describe('component: proxy', () => {
     expect(v1).toEqual('a')
 
     Object.defineProperty(instanceProxy, 'toggle', {
-      value: 'b'
+      value: 'b',
     })
     const v2 = instanceProxy.toggle
     expect(v2).toEqual('b')
 
     // expect null to be a settable value
     Object.defineProperty(instanceProxy, 'toggle', {
-      value: null
+      value: null,
     })
     const v3 = instanceProxy.toggle
     expect(v3).toBeNull()
@@ -363,21 +366,21 @@ describe('component: proxy', () => {
       computed: {
         greet() {
           return 'Hi ' + (this as any).name
-        }
+        },
       },
       render() {},
       setup() {
         return {
-          fromSetup: true
+          fromSetup: true,
         }
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp, {
-      fromProp: true
+      fromProp: true,
     })
 
     app.mount(nodeOps.createElement('div'))
@@ -387,7 +390,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'name', {
       get() {
         return 'getter.name'
-      }
+      },
     })
 
     // computed is same still cached
@@ -403,7 +406,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'greet', {
       get() {
         return 'Hi greet.getter.computed'
-      }
+      },
     })
     expect(instanceProxy.greet).toEqual('Hi greet.getter.computed')
 
@@ -412,7 +415,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'fromSetup', {
       get() {
         return false
-      }
+      },
     })
     expect(instanceProxy.fromSetup).toBe(false)
 
@@ -421,7 +424,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'fromProp', {
       get() {
         return false
-      }
+      },
     })
     expect(instanceProxy.fromProp).toBe(false)
   })
@@ -432,11 +435,11 @@ describe('component: proxy', () => {
       props: ['test'],
       render(this: any) {
         return this.test
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(
-      `was accessed during render but is not defined`
+      `was accessed during render but is not defined`,
     ).not.toHaveBeenWarned()
   })
 
@@ -447,7 +450,7 @@ describe('component: proxy', () => {
           return '1'
         }
         return '2'
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -455,8 +458,8 @@ describe('component: proxy', () => {
 
     expect(
       `Property ${JSON.stringify(
-        Symbol.unscopables
-      )} was accessed during render ` + `but is not defined on instance.`
+        Symbol.unscopables,
+      )} was accessed during render ` + `but is not defined on instance.`,
     ).toHaveBeenWarned()
   })
 
@@ -466,7 +469,7 @@ describe('component: proxy', () => {
       setup() {
         return {
           __isScriptSetup: true,
-          foo: 1
+          foo: 1,
         }
       },
       mounted() {
@@ -474,7 +477,7 @@ describe('component: proxy', () => {
         try {
           this.foo = 123
         } catch (e) {}
-      }
+      },
     })
     render(h(Comp), nodeOps.createElement('div'))
     expect(`Cannot mutate <script setup> binding "foo"`).toHaveBeenWarned()
diff --git a/packages/runtime-core/__tests__/componentSlots.spec.ts b/packages/runtime-core/__tests__/componentSlots.spec.ts
index 708fb20c4..93d88ad0e 100644
--- a/packages/runtime-core/__tests__/componentSlots.spec.ts
+++ b/packages/runtime-core/__tests__/componentSlots.spec.ts
@@ -1,12 +1,13 @@
 import {
+  createApp,
+  getCurrentInstance,
+  h,
+  nextTick,
+  nodeOps,
   ref,
   render,
-  h,
-  nodeOps,
-  nextTick,
-  getCurrentInstance
 } from '@vue/runtime-test'
-import { normalizeVNode } from '../src/vnode'
+import { createBlock, normalizeVNode } from '../src/vnode'
 import { createSlots } from '../src/helpers/createSlots'
 
 describe('component: slots', () => {
@@ -16,7 +17,7 @@ describe('component: slots', () => {
       render() {
         instance = getCurrentInstance()
         return h('div')
-      }
+      },
     }
 
     render(h(Comp, null, slots), nodeOps.createElement('div'))
@@ -24,8 +25,21 @@ describe('component: slots', () => {
   }
 
   test('initSlots: instance.slots should be set correctly', () => {
+    let instance: any
+    const Comp = {
+      render() {
+        instance = getCurrentInstance()
+        return h('div')
+      },
+    }
+    const slots = { foo: () => {}, _: 1 }
+    render(createBlock(Comp, null, slots), nodeOps.createElement('div'))
+    expect(instance.slots).toMatchObject(slots)
+  })
+
+  test('initSlots: instance.slots should remove compiler marker if parent is using manual render function', () => {
     const { slots } = renderWithSlots({ _: 1 })
-    expect(slots).toMatchObject({ _: 1 })
+    expect(slots).toMatchObject({})
   })
 
   test('initSlots: should normalize object slots (when value is null, string, array)', () => {
@@ -33,15 +47,15 @@ describe('component: slots', () => {
       _inner: '_inner',
       foo: null,
       header: 'header',
-      footer: ['f1', 'f2']
+      footer: ['f1', 'f2'],
     })
 
     expect(
-      '[Vue warn]: Non-function value encountered for slot "header". Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for slot "header". Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(
-      '[Vue warn]: Non-function value encountered for slot "footer". Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for slot "footer". Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(slots).not.toHaveProperty('_inner')
@@ -49,7 +63,7 @@ describe('component: slots', () => {
     expect(slots.header()).toMatchObject([normalizeVNode('header')])
     expect(slots.footer()).toMatchObject([
       normalizeVNode('f1'),
-      normalizeVNode('f2')
+      normalizeVNode('f2'),
     ])
   })
 
@@ -59,14 +73,14 @@ describe('component: slots', () => {
       render() {
         proxy = getCurrentInstance()
         return h('div')
-      }
+      },
     }
 
     render(
       h(Comp, null, {
-        header: () => 'header'
+        header: () => 'header',
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
 
     expect(proxy.slots.header()).toMatchObject([normalizeVNode('header')])
@@ -76,7 +90,7 @@ describe('component: slots', () => {
     const { slots } = renderWithSlots([h('span')])
 
     expect(
-      '[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(slots.default()).toMatchObject([normalizeVNode(h('span'))])
@@ -101,16 +115,16 @@ describe('component: slots', () => {
               flag1.value
                 ? {
                     name: 'one',
-                    fn: () => [h('span')]
+                    fn: () => [h('span')],
                   }
                 : {
                     name: 'two',
-                    fn: () => [h('div')]
-                  }
-            ])
-          )
+                    fn: () => [h('div')],
+                  },
+            ]),
+          ),
         ]
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -135,19 +149,19 @@ describe('component: slots', () => {
 
     const oldSlots = {
       header: 'header',
-      footer: undefined
+      footer: undefined,
     }
     const newSlots = {
       header: undefined,
-      footer: 'footer'
+      footer: 'footer',
     }
 
     const Comp = {
       setup() {
         return () => [
-          h(Child, { n: flag1.value }, flag1.value ? oldSlots : newSlots)
+          h(Child, { n: flag1.value }, flag1.value ? oldSlots : newSlots),
         ]
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -158,11 +172,11 @@ describe('component: slots', () => {
     await nextTick()
 
     expect(
-      '[Vue warn]: Non-function value encountered for slot "header". Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for slot "header". Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(
-      '[Vue warn]: Non-function value encountered for slot "footer". Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for slot "footer". Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(instance.slots).not.toHaveProperty('header')
@@ -181,9 +195,9 @@ describe('component: slots', () => {
     const Comp = {
       setup() {
         return () => [
-          h(Child, { n: flag1.value }, flag1.value ? ['header'] : ['footer'])
+          h(Child, { n: flag1.value }, flag1.value ? ['header'] : ['footer']),
         ]
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -193,13 +207,13 @@ describe('component: slots', () => {
     await nextTick()
 
     expect(
-      '[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(instance.slots.default()).toMatchObject([normalizeVNode('footer')])
   })
 
-  test('should respect $stable flag', async () => {
+  test('should respect $stable flag with a value of true', async () => {
     const flag1 = ref(1)
     const flag2 = ref(2)
     const spy = vi.fn()
@@ -218,11 +232,11 @@ describe('component: slots', () => {
             { n: flag2.value },
             {
               foo: () => 'foo',
-              $stable: true
-            }
-          )
+              $stable: true,
+            },
+          ),
         ]
-      }
+      },
     }
 
     render(h(App), nodeOps.createElement('div'))
@@ -240,4 +254,74 @@ describe('component: slots', () => {
     await nextTick()
     expect(spy).toHaveBeenCalledTimes(2)
   })
+
+  test('should respect $stable flag with a value of false', async () => {
+    const flag1 = ref(1)
+    const flag2 = ref(2)
+    const spy = vi.fn()
+
+    const Child = () => {
+      spy()
+      return 'child'
+    }
+
+    const App = {
+      setup() {
+        return () => [
+          flag1.value,
+          h(
+            Child,
+            { n: flag2.value },
+            {
+              foo: () => 'foo',
+              $stable: false,
+            },
+          ),
+        ]
+      },
+    }
+
+    render(h(App), nodeOps.createElement('div'))
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    // parent re-render, props didn't change, slots are not stable
+    // -> child should update
+    flag1.value++
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(2)
+
+    // parent re-render, props changed
+    // -> child should update
+    flag2.value++
+    await nextTick()
+    expect(spy).toHaveBeenCalledTimes(3)
+  })
+
+  test('should not warn when mounting another app in setup', () => {
+    const Comp = {
+      setup(_: any, { slots }: any) {
+        return () => slots.default?.()
+      },
+    }
+
+    const mountComp = () => {
+      createApp({
+        setup() {
+          return () => h(Comp, () => 'msg')
+        },
+      }).mount(nodeOps.createElement('div'))
+    }
+
+    const App = {
+      setup() {
+        mountComp()
+        return () => null
+      },
+    }
+
+    createApp(App).mount(nodeOps.createElement('div'))
+    expect(
+      'Slot "default" invoked outside of the render function',
+    ).not.toHaveBeenWarned()
+  })
 })
diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
index f70402555..aaeae3fb4 100644
--- a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
+++ b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
@@ -1,22 +1,22 @@
 import {
-  nodeOps,
-  render,
-  h,
   BaseTransition,
-  BaseTransitionProps,
-  ref,
-  nextTick,
-  serializeInner,
-  serialize,
-  VNodeProps,
+  type BaseTransitionProps,
   KeepAlive,
-  TestElement
+  type TestElement,
+  type VNodeProps,
+  h,
+  nextTick,
+  nodeOps,
+  ref,
+  render,
+  serialize,
+  serializeInner,
 } from '@vue/runtime-test'
 
 function mount(
   props: BaseTransitionProps,
   slot: () => any,
-  withKeepAlive = false
+  withKeepAlive = false,
 ) {
   const root = nodeOps.createElement('div')
   const show = ref(true)
@@ -28,7 +28,7 @@ function mount(
             return withKeepAlive ? h(KeepAlive, null, slot()) : slot()
           })
         : null
-    }
+    },
   }
   render(h(App), root)
 
@@ -41,7 +41,7 @@ function mockProps(extra: BaseTransitionProps = {}, withKeepAlive = false) {
     doneLeave: Record<string, () => void>
   } = {
     doneEnter: {},
-    doneLeave: {}
+    doneLeave: {},
   }
   const props: BaseTransitionProps = {
     onBeforeEnter: vi.fn(el => {
@@ -66,21 +66,21 @@ function mockProps(extra: BaseTransitionProps = {}, withKeepAlive = false) {
     }),
     onAfterAppear: vi.fn(),
     onAppearCancelled: vi.fn(),
-    ...extra
+    ...extra,
   }
   return {
     props,
-    cbs
+    cbs,
   }
 }
 
 function assertCalls(
   props: BaseTransitionProps,
-  calls: Record<string, number>
+  calls: Record<string, number>,
 ) {
   Object.keys(calls).forEach(key => {
     expect(props[key as keyof BaseTransitionProps]).toHaveBeenCalledTimes(
-      calls[key]
+      calls[key],
     )
   })
 }
@@ -103,7 +103,7 @@ function runTestWithElements(tester: TestFn) {
     trueBranch: () => h('div'),
     falseBranch: () => h('span'),
     trueSerialized: `<div></div>`,
-    falseSerialized: `<span></span>`
+    falseSerialized: `<span></span>`,
   })
 }
 
@@ -116,7 +116,7 @@ function runTestWithComponents(tester: TestFn) {
     trueBranch: () => h(CompA, { msg: 'foo' }),
     falseBranch: () => h(CompB, { msg: 'bar' }),
     trueSerialized: `<div>foo</div>`,
-    falseSerialized: `<span>bar</span>`
+    falseSerialized: `<span>bar</span>`,
   })
 }
 
@@ -125,29 +125,29 @@ function runTestWithKeepAlive(tester: TestFn) {
     setup() {
       const count = ref(0)
       return () => h('div', count.value)
-    }
+    },
   }
   const falseComp = {
     setup() {
       const count = ref(0)
       return () => h('span', count.value)
-    }
+    },
   }
   return tester(
     {
       trueBranch: () => h(trueComp),
       falseBranch: () => h(falseComp),
       trueSerialized: `<div>0</div>`,
-      falseSerialized: `<span>0</span>`
+      falseSerialized: `<span>0</span>`,
     },
-    true /* withKeepAlive: true */
+    true /* withKeepAlive: true */,
   )
 }
 
 describe('BaseTransition', () => {
   test('appear: true w/ appear hooks', () => {
     const { props, cbs } = mockProps({
-      appear: true
+      appear: true,
     })
     mount(props, () => h('div'))
     expect(props.onBeforeAppear).toHaveBeenCalledTimes(1)
@@ -170,7 +170,7 @@ describe('BaseTransition', () => {
       onBeforeAppear: undefined,
       onAppear: undefined,
       onAfterAppear: undefined,
-      onAppearCancelled: undefined
+      onAppearCancelled: undefined,
     })
     mount(props, () => h('div'))
     expect(props.onBeforeEnter).toHaveBeenCalledTimes(1)
@@ -205,7 +205,7 @@ describe('BaseTransition', () => {
               })
             }
           }
-        }
+        },
       }
       return { state, toggle, hooks }
     }
@@ -259,14 +259,14 @@ describe('BaseTransition', () => {
         trueBranch,
         trueSerialized,
         falseBranch,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      mode?: BaseTransitionProps['mode']
+      mode?: BaseTransitionProps['mode'],
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode })
       const { root } = mount(props, () =>
-        toggle.value ? trueBranch() : falseBranch()
+        toggle.value ? trueBranch() : falseBranch(),
       )
 
       // without appear: true, enter hooks should not be called on mount
@@ -309,7 +309,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -318,7 +318,7 @@ describe('BaseTransition', () => {
         trueBranch: () => h('div'),
         trueSerialized: `<div></div>`,
         falseBranch: () => null,
-        falseSerialized: `<!---->`
+        falseSerialized: `<!---->`,
       })
     })
 
@@ -328,7 +328,7 @@ describe('BaseTransition', () => {
         trueBranch: () => h(Comp, { msg: 'hello' }),
         trueSerialized: `<div>hello</div>`,
         falseBranch: () => null,
-        falseSerialized: `<!---->`
+        falseSerialized: `<!---->`,
       })
     })
 
@@ -338,9 +338,9 @@ describe('BaseTransition', () => {
           trueBranch: () => h('div'),
           trueSerialized: `<div></div>`,
           falseBranch: () => null,
-          falseSerialized: `<!---->`
+          falseSerialized: `<!---->`,
         },
-        'in-out'
+        'in-out',
       )
     })
   })
@@ -350,12 +350,12 @@ describe('BaseTransition', () => {
       trueBranch,
       trueSerialized,
       falseBranch = () => null,
-      falseSerialized = `<!---->`
+      falseSerialized = `<!---->`,
     }: ToggleOptions) {
       const toggle = ref(false)
       const { props, cbs } = mockProps()
       const { root } = mount(props, () =>
-        toggle.value ? trueBranch() : falseBranch()
+        toggle.value ? trueBranch() : falseBranch(),
       )
 
       // start enter
@@ -402,7 +402,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -411,7 +411,7 @@ describe('BaseTransition', () => {
         trueBranch: () => h('div'),
         trueSerialized: `<div></div>`,
         falseBranch: () => null,
-        falseSerialized: `<!---->`
+        falseSerialized: `<!---->`,
       })
     })
 
@@ -421,7 +421,7 @@ describe('BaseTransition', () => {
         trueBranch: () => h(Comp, { msg: 'hello' }),
         trueSerialized: `<div>hello</div>`,
         falseBranch: () => null,
-        falseSerialized: `<!---->`
+        falseSerialized: `<!---->`,
       })
     })
   })
@@ -432,16 +432,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({}, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // without appear: true, enter hooks should not be called on mount
@@ -515,7 +515,7 @@ describe('BaseTransition', () => {
         onLeave: 2,
         onAfterLeave: 2,
         onEnterCancelled: 0,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -538,16 +538,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({}, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // start toggle
@@ -648,7 +648,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 3,
         onLeave: 3,
         onAfterLeave: withKeepAlive ? 1 : 3,
-        onLeaveCancelled: withKeepAlive ? 2 : 0
+        onLeaveCancelled: withKeepAlive ? 2 : 0,
       })
     }
 
@@ -671,16 +671,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'out-in' }, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // trigger toggle
@@ -753,7 +753,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 2,
         onLeave: 2,
         onAfterLeave: 2,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -777,16 +777,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'out-in' }, withKeepAlive)
       const { root, unmount } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // trigger toggle
@@ -835,7 +835,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -855,14 +855,14 @@ describe('BaseTransition', () => {
   describe('mode: "out-in" toggle before finish', () => {
     async function testOutInBeforeFinish(
       { trueBranch, falseBranch, trueSerialized }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'out-in' }, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // trigger toggle
@@ -907,7 +907,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -930,16 +930,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'out-in' }, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // double quick toggle
@@ -985,7 +985,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -1008,16 +1008,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'in-out' }, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       toggle.value = false
@@ -1089,7 +1089,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 2,
         onLeave: 2,
         onAfterLeave: 2,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -1112,16 +1112,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'in-out' }, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       toggle.value = false
@@ -1177,7 +1177,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -1193,4 +1193,9 @@ describe('BaseTransition', () => {
       await runTestWithKeepAlive(testInOutBeforeFinish)
     })
   })
+
+  // #10719
+  test('should not error on KeepAlive w/ function children', () => {
+    expect(() => mount({}, () => () => h('div'), true)).not.toThrow()
+  })
 })
diff --git a/packages/runtime-core/__tests__/components/KeepAlive.spec.ts b/packages/runtime-core/__tests__/components/KeepAlive.spec.ts
index ff8ea74b6..1e4176b6f 100644
--- a/packages/runtime-core/__tests__/components/KeepAlive.spec.ts
+++ b/packages/runtime-core/__tests__/components/KeepAlive.spec.ts
@@ -1,37 +1,38 @@
 import {
-  h,
-  TestElement,
-  nodeOps,
-  render,
-  ref,
+  type Component,
+  type ComponentOptions,
+  type ComponentPublicInstance,
   KeepAlive,
-  serializeInner,
-  nextTick,
-  ComponentOptions,
-  markRaw,
-  inject,
-  defineComponent,
-  ComponentPublicInstance,
-  Ref,
+  type Ref,
+  type TestElement,
   cloneVNode,
-  provide,
-  defineAsyncComponent,
-  Component,
   createApp,
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  inject,
+  markRaw,
+  nextTick,
+  nodeOps,
   onActivated,
-  onUnmounted,
+  onDeactivated,
   onMounted,
+  onUnmounted,
+  provide,
   reactive,
+  ref,
+  render,
+  serializeInner,
   shallowRef,
-  onDeactivated
 } from '@vue/runtime-test'
-import { KeepAliveProps } from '../../src/components/KeepAlive'
+import type { KeepAliveProps } from '../../src/components/KeepAlive'
 
 const timeout = (n: number = 0) => new Promise(r => setTimeout(r, n))
 
 describe('KeepAlive', () => {
   let one: ComponentOptions
   let two: ComponentOptions
+  let oneTest: ComponentOptions
   let views: Record<string, ComponentOptions>
   let root: TestElement
 
@@ -47,7 +48,19 @@ describe('KeepAlive', () => {
       mounted: vi.fn(),
       activated: vi.fn(),
       deactivated: vi.fn(),
-      unmounted: vi.fn()
+      unmounted: vi.fn(),
+    }
+    oneTest = {
+      name: 'oneTest',
+      data: () => ({ msg: 'oneTest' }),
+      render(this: any) {
+        return h('div', this.msg)
+      },
+      created: vi.fn(),
+      mounted: vi.fn(),
+      activated: vi.fn(),
+      deactivated: vi.fn(),
+      unmounted: vi.fn(),
     }
     two = {
       name: 'two',
@@ -59,11 +72,12 @@ describe('KeepAlive', () => {
       mounted: vi.fn(),
       activated: vi.fn(),
       deactivated: vi.fn(),
-      unmounted: vi.fn()
+      unmounted: vi.fn(),
     }
     views = {
       one,
-      two
+      oneTest,
+      two,
     }
   })
 
@@ -73,7 +87,7 @@ describe('KeepAlive', () => {
       component.mounted.mock.calls.length,
       component.activated.mock.calls.length,
       component.deactivated.mock.calls.length,
-      component.unmounted.mock.calls.length
+      component.unmounted.mock.calls.length,
     ]).toEqual(callCounts)
   }
 
@@ -83,9 +97,9 @@ describe('KeepAlive', () => {
     const App = {
       render() {
         return h(KeepAlive, null, {
-          default: () => h(views[viewRef.value], { ref: instanceRef })
+          default: () => h(views[viewRef.value], { ref: instanceRef }),
         })
-      }
+      },
     }
     render(h(App), root)
     expect(serializeInner(root)).toBe(`<div>one</div>`)
@@ -106,7 +120,7 @@ describe('KeepAlive', () => {
     const App = {
       render() {
         return toggle.value ? h(KeepAlive, () => h(views[viewRef.value])) : null
-      }
+      },
     }
     render(h(App), root)
 
@@ -147,7 +161,7 @@ describe('KeepAlive', () => {
     const App = {
       render() {
         return toggle.value ? h(KeepAlive, () => h(views[viewRef.value])) : null
-      }
+      },
     }
     render(h(App), root)
 
@@ -190,7 +204,7 @@ describe('KeepAlive', () => {
     const App = {
       render() {
         return h(KeepAlive, () => (toggle.value ? h(one) : null))
-      }
+      },
     }
     render(h(App), root)
 
@@ -225,21 +239,21 @@ describe('KeepAlive', () => {
       render(this: any) {
         return h('div', this.msg)
       },
-      activated: vi.fn()
+      activated: vi.fn(),
     }
     const one = {
       name: 'one',
       data: () => ({ msg: 'one' }),
       render(this: any) {
         return h(two)
-      }
+      },
     }
 
     const toggle = ref(true)
     const App = {
       render() {
         return h(KeepAlive, () => (toggle.value ? h(one) : null))
-      }
+      },
     }
     render(h(App), root)
 
@@ -255,7 +269,7 @@ describe('KeepAlive', () => {
     const App = {
       render() {
         return h(KeepAlive, () => (toggle1.value ? h(one) : null))
-      }
+      },
     }
     render(h(App), root)
 
@@ -335,7 +349,7 @@ describe('KeepAlive', () => {
         return outerRef.value
           ? h(KeepAlive, props, () => h(views[viewRef.value]))
           : null
-      }
+      },
     }
     render(h(App), root)
 
@@ -369,6 +383,128 @@ describe('KeepAlive', () => {
     assertHookCalls(two, [2, 2, 0, 0, 2])
   }
 
+  async function assertNameMatchWithFlag(props: KeepAliveProps) {
+    const outerRef = ref(true)
+    const viewRef = ref('one')
+    const App = {
+      render() {
+        return outerRef.value
+          ? h(KeepAlive, props, () => h(views[viewRef.value]))
+          : null
+      },
+    }
+    render(h(App), root)
+
+    expect(serializeInner(root)).toBe(`<div>one</div>`)
+    assertHookCalls(one, [1, 1, 1, 0, 0])
+    assertHookCalls(oneTest, [0, 0, 0, 0, 0])
+    assertHookCalls(two, [0, 0, 0, 0, 0])
+
+    viewRef.value = 'oneTest'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>oneTest</div>`)
+    assertHookCalls(one, [1, 1, 1, 1, 0])
+    assertHookCalls(oneTest, [1, 1, 1, 0, 0])
+    assertHookCalls(two, [0, 0, 0, 0, 0])
+
+    viewRef.value = 'two'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>two</div>`)
+    assertHookCalls(one, [1, 1, 1, 1, 0])
+    assertHookCalls(oneTest, [1, 1, 1, 1, 0])
+    assertHookCalls(two, [1, 1, 0, 0, 0])
+
+    viewRef.value = 'one'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>one</div>`)
+    assertHookCalls(one, [1, 1, 2, 1, 0])
+    assertHookCalls(oneTest, [1, 1, 1, 1, 0])
+    assertHookCalls(two, [1, 1, 0, 0, 1])
+
+    viewRef.value = 'oneTest'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>oneTest</div>`)
+    assertHookCalls(one, [1, 1, 2, 2, 0])
+    assertHookCalls(oneTest, [1, 1, 2, 1, 0])
+    assertHookCalls(two, [1, 1, 0, 0, 1])
+
+    viewRef.value = 'two'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>two</div>`)
+    assertHookCalls(one, [1, 1, 2, 2, 0])
+    assertHookCalls(oneTest, [1, 1, 2, 2, 0])
+    assertHookCalls(two, [2, 2, 0, 0, 1])
+
+    // teardown
+    outerRef.value = false
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<!---->`)
+    assertHookCalls(one, [1, 1, 2, 2, 1])
+    assertHookCalls(oneTest, [1, 1, 2, 2, 1])
+    assertHookCalls(two, [2, 2, 0, 0, 2])
+  }
+
+  async function assertNameMatchWithFlagExclude(props: KeepAliveProps) {
+    const outerRef = ref(true)
+    const viewRef = ref('one')
+    const App = {
+      render() {
+        return outerRef.value
+          ? h(KeepAlive, props, () => h(views[viewRef.value]))
+          : null
+      },
+    }
+    render(h(App), root)
+
+    expect(serializeInner(root)).toBe(`<div>one</div>`)
+    assertHookCalls(one, [1, 1, 0, 0, 0])
+    assertHookCalls(oneTest, [0, 0, 0, 0, 0])
+    assertHookCalls(two, [0, 0, 0, 0, 0])
+
+    viewRef.value = 'oneTest'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>oneTest</div>`)
+    assertHookCalls(one, [1, 1, 0, 0, 1])
+    assertHookCalls(oneTest, [1, 1, 0, 0, 0])
+    assertHookCalls(two, [0, 0, 0, 0, 0])
+
+    viewRef.value = 'two'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>two</div>`)
+    assertHookCalls(one, [1, 1, 0, 0, 1])
+    assertHookCalls(oneTest, [1, 1, 0, 0, 1])
+    assertHookCalls(two, [1, 1, 1, 0, 0])
+
+    viewRef.value = 'one'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>one</div>`)
+    assertHookCalls(one, [2, 2, 0, 0, 1])
+    assertHookCalls(oneTest, [1, 1, 0, 0, 1])
+    assertHookCalls(two, [1, 1, 1, 1, 0])
+
+    viewRef.value = 'oneTest'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>oneTest</div>`)
+    assertHookCalls(one, [2, 2, 0, 0, 2])
+    assertHookCalls(oneTest, [2, 2, 0, 0, 1])
+    assertHookCalls(two, [1, 1, 1, 1, 0])
+
+    viewRef.value = 'two'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>two</div>`)
+    assertHookCalls(one, [2, 2, 0, 0, 2])
+    assertHookCalls(oneTest, [2, 2, 0, 0, 2])
+    assertHookCalls(two, [1, 1, 2, 1, 0])
+
+    // teardown
+    outerRef.value = false
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<!---->`)
+    assertHookCalls(one, [2, 2, 0, 0, 2])
+    assertHookCalls(oneTest, [2, 2, 0, 0, 2])
+    assertHookCalls(two, [1, 1, 2, 2, 1])
+  }
+
   describe('props', () => {
     test('include (string)', async () => {
       await assertNameMatch({ include: 'one' })
@@ -378,6 +514,10 @@ describe('KeepAlive', () => {
       await assertNameMatch({ include: /^one$/ })
     })
 
+    test('include (regex with g flag)', async () => {
+      await assertNameMatchWithFlag({ include: /one/g })
+    })
+
     test('include (array)', async () => {
       await assertNameMatch({ include: ['one'] })
     })
@@ -390,6 +530,10 @@ describe('KeepAlive', () => {
       await assertNameMatch({ exclude: /^two$/ })
     })
 
+    test('exclude (regex with a flag)', async () => {
+      await assertNameMatchWithFlagExclude({ exclude: /one/g })
+    })
+
     test('exclude (array)', async () => {
       await assertNameMatch({ exclude: ['two'] })
     })
@@ -425,7 +569,7 @@ describe('KeepAlive', () => {
           spyCC.mock.calls.length,
           spyCA.mock.calls.length,
           spyCDA.mock.calls.length,
-          spyCUM.mock.calls.length
+          spyCUM.mock.calls.length,
         ]).toEqual(calls)
       }
 
@@ -436,22 +580,22 @@ describe('KeepAlive', () => {
           created: spyAC,
           activated: spyAA,
           deactivated: spyADA,
-          unmounted: spyAUM
+          unmounted: spyAUM,
         },
         b: {
           render: () => `two`,
           created: spyBC,
           activated: spyBA,
           deactivated: spyBDA,
-          unmounted: spyBUM
+          unmounted: spyBUM,
         },
         c: {
           render: () => `three`,
           created: spyCC,
           activated: spyCA,
           deactivated: spyCDA,
-          unmounted: spyCUM
-        }
+          unmounted: spyCUM,
+        },
       }
 
       const App = {
@@ -459,7 +603,7 @@ describe('KeepAlive', () => {
           return h(KeepAlive, { max: 2 }, () => {
             return h(views[viewRef.value])
           })
-        }
+        },
       }
       render(h(App), root)
       assertCount([1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
@@ -494,11 +638,11 @@ describe('KeepAlive', () => {
           return h(
             KeepAlive,
             {
-              include: includeRef.value
+              include: includeRef.value,
             },
-            () => h(views[viewRef.value])
+            () => h(views[viewRef.value]),
           )
-        }
+        },
       }
       render(h(App), root)
       return { viewRef, includeRef }
@@ -512,11 +656,11 @@ describe('KeepAlive', () => {
           return h(
             KeepAlive,
             {
-              exclude: excludeRef.value
+              exclude: excludeRef.value,
             },
-            () => h(views[viewRef.value])
+            () => h(views[viewRef.value]),
           )
-        }
+        },
       }
       render(h(App), root)
       return { viewRef, excludeRef }
@@ -610,13 +754,13 @@ describe('KeepAlive', () => {
       const one = {
         name: 'one',
         created: vi.fn(),
-        render: () => 'one'
+        render: () => 'one',
       }
 
       const two = {
         // anonymous
         created: vi.fn(),
-        render: () => 'two'
+        render: () => 'two',
       }
 
       const views: any = { one, two }
@@ -627,11 +771,11 @@ describe('KeepAlive', () => {
           return h(
             KeepAlive,
             {
-              include: include ? 'one' : undefined
+              include: include ? 'one' : undefined,
             },
-            () => h(views[viewRef.value])
+            () => h(views[viewRef.value]),
           )
-        }
+        },
       }
       render(h(App), root)
 
@@ -670,7 +814,7 @@ describe('KeepAlive', () => {
     test('should not destroy active instance when pruning cache', async () => {
       const Foo = {
         render: () => 'foo',
-        unmounted: vi.fn()
+        unmounted: vi.fn(),
       }
       const includeRef = ref(['foo'])
       const App = {
@@ -678,11 +822,11 @@ describe('KeepAlive', () => {
           return h(
             KeepAlive,
             {
-              include: includeRef.value
+              include: includeRef.value,
             },
-            () => h(Foo)
+            () => h(Foo),
           )
-        }
+        },
       }
       render(h(App), root)
       // condition: a render where a previous component is reused
@@ -703,7 +847,7 @@ describe('KeepAlive', () => {
         setup() {
           return () =>
             h(KeepAlive, () => (toggle.value ? h(Foo, { n: n.value }) : null))
-        }
+        },
       }
 
       render(h(App), root)
@@ -726,13 +870,13 @@ describe('KeepAlive', () => {
       name: 'Foo',
       render() {
         return h('Foo')
-      }
+      },
     })
     const Bar = markRaw({
       name: 'Bar',
       render() {
         return h('Bar')
-      }
+      },
     })
 
     const spyMounted = vi.fn()
@@ -750,19 +894,19 @@ describe('KeepAlive', () => {
           },
           onVnodeUnmounted() {
             spyUnmounted()
-          }
+          },
         }
 
         return () => {
           const child: any = slots.default!({
-            Component: Component!.value
+            Component: Component!.value,
           })[0]
 
           const innerChild = child.children[0]
           child.children[0] = cloneVNode(innerChild, componentProps)
           return child
         }
-      }
+      },
     })
 
     let toggle: () => void = () => {}
@@ -778,14 +922,14 @@ describe('KeepAlive', () => {
         }
         return {
           component,
-          toggle
+          toggle,
         }
       },
       render() {
         return h(RouterView, null, {
-          default: ({ Component }: any) => h(KeepAlive, null, [h(Component)])
+          default: ({ Component }: any) => h(KeepAlive, null, [h(Component)]),
         })
-      }
+      },
     })
 
     render(h(App), root)
@@ -810,7 +954,7 @@ describe('KeepAlive', () => {
     expect(spyUnmounted).toHaveBeenCalledTimes(4)
   })
 
-  // #1513
+  // #1511
   test('should work with cloned root due to scopeId / fallthrough attrs', async () => {
     const viewRef = ref('one')
     const instanceRef = ref<any>(null)
@@ -818,9 +962,9 @@ describe('KeepAlive', () => {
       __scopeId: 'foo',
       render: () => {
         return h(KeepAlive, null, {
-          default: () => h(views[viewRef.value], { ref: instanceRef })
+          default: () => h(views[viewRef.value], { ref: instanceRef }),
         })
-      }
+      },
     }
     render(h(App), root)
     expect(serializeInner(root)).toBe(`<div foo>one</div>`)
@@ -841,7 +985,7 @@ describe('KeepAlive', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
 
     const toggle = ref(true)
@@ -849,9 +993,9 @@ describe('KeepAlive', () => {
     const App = {
       render: () => {
         return h(KeepAlive, { include: 'Foo' }, () =>
-          toggle.value ? h(AsyncComp, { ref: instanceRef }) : null
+          toggle.value ? h(AsyncComp, { ref: instanceRef }) : null,
         )
-      }
+      },
     }
 
     render(h(App), root)
@@ -863,7 +1007,7 @@ describe('KeepAlive', () => {
       data: () => ({ count: 0 }),
       render() {
         return h('p', this.count)
-      }
+      },
     })
 
     await timeout()
@@ -890,7 +1034,7 @@ describe('KeepAlive', () => {
     const app = createApp({
       setup() {
         return () => h(KeepAlive, null, () => h(Child))
-      }
+      },
     })
 
     const Child = {
@@ -899,7 +1043,7 @@ describe('KeepAlive', () => {
           throw err
         })
       },
-      render() {}
+      render() {},
     }
 
     app.config.errorHandler = handler
@@ -926,7 +1070,7 @@ describe('KeepAlive', () => {
         onActivated(activatedA)
         onDeactivated(deactivatedA)
         return () => 'A'
-      }
+      },
     }
     const B = {
       name: 'B',
@@ -934,7 +1078,7 @@ describe('KeepAlive', () => {
         onMounted(mountedB)
         onUnmounted(unmountedB)
         return () => 'B'
-      }
+      },
     }
 
     const include = reactive<string[]>([])
@@ -946,13 +1090,13 @@ describe('KeepAlive', () => {
             h(
               KeepAlive,
               {
-                include
+                include,
               },
-              h(current.value)
-            )
+              h(current.value),
+            ),
           ]
         }
-      }
+      },
     })
 
     app.mount(root)
@@ -977,4 +1121,56 @@ describe('KeepAlive', () => {
     expect(mountedB).toHaveBeenCalledTimes(1)
     expect(unmountedB).toHaveBeenCalledTimes(0)
   })
+
+  // #11717
+  test('remove component from include then switching child', async () => {
+    const About = {
+      name: 'About',
+      render() {
+        return h('h1', 'About')
+      },
+    }
+    const mountedHome = vi.fn()
+    const unmountedHome = vi.fn()
+    const activatedHome = vi.fn()
+    const deactivatedHome = vi.fn()
+    const Home = {
+      name: 'Home',
+      setup() {
+        onMounted(mountedHome)
+        onUnmounted(unmountedHome)
+        onDeactivated(deactivatedHome)
+        onActivated(activatedHome)
+        return () => {
+          h('h1', 'Home')
+        }
+      },
+    }
+    const activeViewName = ref('Home')
+    const cacheList = reactive(['Home'])
+    const App = createApp({
+      setup() {
+        return () => {
+          return [
+            h(
+              KeepAlive,
+              {
+                include: cacheList,
+              },
+              [activeViewName.value === 'Home' ? h(Home) : h(About)],
+            ),
+          ]
+        }
+      },
+    })
+    App.mount(nodeOps.createElement('div'))
+    expect(mountedHome).toHaveBeenCalledTimes(1)
+    expect(activatedHome).toHaveBeenCalledTimes(1)
+    cacheList.splice(0, 1)
+    await nextTick()
+    activeViewName.value = 'About'
+    await nextTick()
+    expect(deactivatedHome).toHaveBeenCalledTimes(0)
+    expect(unmountedHome).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts
index d822a9928..65e801de2 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -3,38 +3,42 @@
  */
 
 import {
-  h,
-  ref,
+  type ComponentOptions,
+  Fragment,
+  KeepAlive,
   Suspense,
-  ComponentOptions,
-  render,
-  nodeOps,
-  serializeInner,
+  type SuspenseProps,
+  createCommentVNode,
+  h,
   nextTick,
+  nodeOps,
+  onErrorCaptured,
   onMounted,
+  onUnmounted,
+  ref,
+  render,
+  resolveDynamicComponent,
+  serializeInner,
+  shallowRef,
   watch,
   watchEffect,
-  onUnmounted,
-  onErrorCaptured,
-  shallowRef,
-  SuspenseProps,
-  resolveDynamicComponent,
-  Fragment
 } from '@vue/runtime-test'
-import { createApp, defineComponent } from 'vue'
-import { type RawSlots } from 'packages/runtime-core/src/componentSlots'
+import { computed, createApp, defineComponent, inject, provide } from 'vue'
+import type { RawSlots } from 'packages/runtime-core/src/componentSlots'
+import { resetSuspenseId } from '../../src/components/Suspense'
 
 describe('Suspense', () => {
   const deps: Promise<any>[] = []
 
   beforeEach(() => {
     deps.length = 0
+    resetSuspenseId()
   })
 
   // a simple async factory for testing purposes only.
   function defineAsyncComponent<T extends ComponentOptions>(
     comp: T,
-    delay: number = 0
+    delay: number = 0,
   ) {
     return {
       setup(props: any, { slots }: any) {
@@ -47,15 +51,27 @@ describe('Suspense', () => {
         // an extra tick to avoid race conditions
         deps.push(p.then(() => Promise.resolve()))
         return p
-      }
+      },
     }
   }
 
+  const RouterView = {
+    setup(_: any, { slots }: any) {
+      const route = inject('route') as any
+      const depth = inject('depth', 0)
+      provide('depth', depth + 1)
+      return () => {
+        const current = route.value[depth]
+        return slots.default({ Component: current })[0]
+      }
+    },
+  }
+
   test('fallback content', async () => {
     const Async = defineAsyncComponent({
       render() {
         return h('div', 'async')
-      }
+      },
     })
 
     const Comp = {
@@ -63,9 +79,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(Async),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -81,7 +97,7 @@ describe('Suspense', () => {
     const Async = defineAsyncComponent({
       render() {
         return h('div', 'async')
-      }
+      },
     })
 
     const onFallback = vi.fn()
@@ -99,14 +115,14 @@ describe('Suspense', () => {
               onResolve,
               onPending,
               // force displaying the fallback right away
-              timeout: 0
+              timeout: 0,
             },
             {
               default: () => (show.value ? h(Async) : null),
-              fallback: h('div', 'fallback')
-            }
+              fallback: h('div', 'fallback'),
+            },
           )
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -150,7 +166,7 @@ describe('Suspense', () => {
           calls.push('outer mounted')
         })
         return () => h(AsyncInner)
-      }
+      },
     })
 
     const AsyncInner = defineAsyncComponent(
@@ -160,9 +176,9 @@ describe('Suspense', () => {
             calls.push('inner mounted')
           })
           return () => h('div', 'inner')
-        }
+        },
       },
-      10
+      10,
     )
 
     const Comp = {
@@ -170,9 +186,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(AsyncOuter),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -195,7 +211,7 @@ describe('Suspense', () => {
     const Async = defineAsyncComponent({
       render() {
         return h('div', 'async')
-      }
+      },
     })
 
     const onResolve = vi.fn()
@@ -206,14 +222,14 @@ describe('Suspense', () => {
           h(
             Suspense,
             {
-              onResolve
+              onResolve,
             },
             {
               default: h(Async),
-              fallback: h('div', 'fallback')
-            }
+              fallback: h('div', 'fallback'),
+            },
           )
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -242,7 +258,7 @@ describe('Suspense', () => {
           () => {
             calls.push('watch effect')
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
 
         const count = ref(0)
@@ -251,7 +267,7 @@ describe('Suspense', () => {
           () => {
             calls.push('watch callback')
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
         count.value++ // trigger the watcher now
 
@@ -265,7 +281,7 @@ describe('Suspense', () => {
 
         await p
         return () => h('div', 'async')
-      }
+      },
     }
 
     const Comp = {
@@ -273,9 +289,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: toggle.value ? h(Async) : null,
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -297,7 +313,7 @@ describe('Suspense', () => {
       `watch effect`,
       `watch callback`,
       `mounted`,
-      'unmounted'
+      'unmounted',
     ])
   })
 
@@ -315,7 +331,7 @@ describe('Suspense', () => {
 
         await p
         return () => h('div', 'async')
-      }
+      },
     }
 
     const Fallback = {
@@ -328,7 +344,7 @@ describe('Suspense', () => {
           calls.push('unmounted')
         })
         return () => h('div', 'fallback')
-      }
+      },
     }
 
     const Comp = {
@@ -336,9 +352,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: toggle.value ? h(Async) : null,
-            fallback: h(Fallback)
+            fallback: h(Fallback),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -357,7 +373,7 @@ describe('Suspense', () => {
       props: { msg: String },
       setup(props: any) {
         return () => h('div', props.msg)
-      }
+      },
     })
 
     const msg = ref('foo')
@@ -367,9 +383,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(Async, { msg: msg.value }),
-            fallback: h('div', `fallback ${msg.value}`)
+            fallback: h('div', `fallback ${msg.value}`),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -403,7 +419,7 @@ describe('Suspense', () => {
           () => {
             calls.push('watch effect')
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
 
         const count = ref(0)
@@ -412,7 +428,7 @@ describe('Suspense', () => {
           () => {
             calls.push('watch callback')
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
         count.value++ // trigger the watcher now
 
@@ -426,7 +442,7 @@ describe('Suspense', () => {
 
         await p
         return () => h('div', 'async')
-      }
+      },
     }
 
     const Comp = {
@@ -434,9 +450,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: toggle.value ? h(Async) : null,
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -465,7 +481,7 @@ describe('Suspense', () => {
       setup() {
         onUnmounted(unmounted)
         return () => h('div', 'async')
-      }
+      },
     })
 
     const Comp = {
@@ -474,10 +490,10 @@ describe('Suspense', () => {
           toggle.value
             ? h(Suspense, null, {
                 default: h(Async),
-                fallback: h('div', 'fallback')
+                fallback: h('div', 'fallback'),
               })
             : null
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -505,7 +521,7 @@ describe('Suspense', () => {
         onMounted(mounted)
         onUnmounted(unmounted)
         return () => h('div', 'async')
-      }
+      },
     })
 
     const Comp = {
@@ -514,10 +530,10 @@ describe('Suspense', () => {
           toggle.value
             ? h(Suspense, null, {
                 default: h(Async),
-                fallback: h('div', 'fallback')
+                fallback: h('div', 'fallback'),
               })
             : null
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -537,6 +553,51 @@ describe('Suspense', () => {
     expect(unmounted).not.toHaveBeenCalled()
   })
 
+  // vuetifyjs/vuetify#15207
+  test('update prop of async element before suspense resolve', async () => {
+    let resolve: () => void
+    const mounted = new Promise<void>(r => {
+      resolve = r
+    })
+    const Async = {
+      async setup() {
+        onMounted(() => {
+          resolve()
+        })
+        const p = new Promise(r => setTimeout(r, 1))
+        await p
+        return () => h('div', 'async')
+      },
+    }
+
+    const Comp: ComponentOptions<{ data: string }> = {
+      props: ['data'],
+      setup(props) {
+        return () => h(Async, { 'data-test': props.data })
+      },
+    }
+
+    const Root = {
+      setup() {
+        const data = ref('1')
+        onMounted(() => {
+          data.value = '2'
+        })
+        return () =>
+          h(Suspense, null, {
+            default: h(Comp, { data: data.value }),
+            fallback: h('div', 'fallback'),
+          })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Root), root)
+    expect(serializeInner(root)).toBe(`<div>fallback</div>`)
+    await mounted
+    expect(serializeInner(root)).toBe(`<div data-test="2">async</div>`)
+  })
+
   test('nested suspense (parent resolves first)', async () => {
     const calls: string[] = []
 
@@ -547,9 +608,9 @@ describe('Suspense', () => {
             calls.push('outer mounted')
           })
           return () => h('div', 'async outer')
-        }
+        },
       },
-      1
+      1,
     )
 
     const AsyncInner = defineAsyncComponent(
@@ -559,9 +620,9 @@ describe('Suspense', () => {
             calls.push('inner mounted')
           })
           return () => h('div', 'async inner')
-        }
+        },
       },
-      10
+      10,
     )
 
     const Inner = {
@@ -569,9 +630,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(AsyncInner),
-            fallback: h('div', 'fallback inner')
+            fallback: h('div', 'fallback inner'),
           })
-      }
+      },
     }
 
     const Comp = {
@@ -579,9 +640,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h('div', [h(AsyncOuter), h(Inner)]),
-            fallback: h('div', 'fallback outer')
+            fallback: h('div', 'fallback outer'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -591,14 +652,14 @@ describe('Suspense', () => {
     await deps[0]
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>async outer</div><div>fallback inner</div></div>`
+      `<div><div>async outer</div><div>fallback inner</div></div>`,
     )
     expect(calls).toEqual([`outer mounted`])
 
     await Promise.all(deps)
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>async outer</div><div>async inner</div></div>`
+      `<div><div>async outer</div><div>async inner</div></div>`,
     )
     expect(calls).toEqual([`outer mounted`, `inner mounted`])
   })
@@ -613,9 +674,9 @@ describe('Suspense', () => {
             calls.push('outer mounted')
           })
           return () => h('div', 'async outer')
-        }
+        },
       },
-      10
+      10,
     )
 
     const AsyncInner = defineAsyncComponent(
@@ -625,9 +686,9 @@ describe('Suspense', () => {
             calls.push('inner mounted')
           })
           return () => h('div', 'async inner')
-        }
+        },
       },
-      1
+      1,
     )
 
     const Inner = {
@@ -635,9 +696,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(AsyncInner),
-            fallback: h('div', 'fallback inner')
+            fallback: h('div', 'fallback inner'),
           })
-      }
+      },
     }
 
     const Comp = {
@@ -645,9 +706,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h('div', [h(AsyncOuter), h(Inner)]),
-            fallback: h('div', 'fallback outer')
+            fallback: h('div', 'fallback outer'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -662,7 +723,7 @@ describe('Suspense', () => {
     await Promise.all(deps)
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>async outer</div><div>async inner</div></div>`
+      `<div><div>async outer</div><div>async inner</div></div>`,
     )
     expect(calls).toEqual([`inner mounted`, `outer mounted`])
   })
@@ -671,7 +732,7 @@ describe('Suspense', () => {
     const Async = {
       async setup() {
         throw new Error('oops')
-      }
+      },
     }
 
     const Comp = {
@@ -690,9 +751,9 @@ describe('Suspense', () => {
             ? h('div', errorMessage.value)
             : h(Suspense, null, {
                 default: h(Async),
-                fallback: h('div', 'fallback')
+                fallback: h('div', 'fallback'),
               })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -709,7 +770,7 @@ describe('Suspense', () => {
     const Async = {
       async setup() {
         throw new Error('oops')
-      }
+      },
     }
 
     const Comp = {
@@ -735,7 +796,7 @@ describe('Suspense', () => {
           return false
         })
         return { errorMessage }
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -760,9 +821,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(AsyncInsideNestedSuspense, { msg: props.msg }),
-            fallback: h('div', 'nested fallback')
+            fallback: h('div', 'nested fallback'),
           })
-      }
+      },
     })
 
     const AsyncInsideNestedSuspense = defineAsyncComponent(
@@ -773,9 +834,9 @@ describe('Suspense', () => {
             calls.push(2)
           })
           return () => h('div', props.msg)
-        }
+        },
       },
-      20
+      20,
     )
 
     const AsyncChildParent = defineAsyncComponent({
@@ -785,7 +846,7 @@ describe('Suspense', () => {
           calls.push(1)
         })
         return () => h(NestedAsyncChild, { msg: props.msg })
-      }
+      },
     })
 
     const NestedAsyncChild = defineAsyncComponent(
@@ -796,18 +857,18 @@ describe('Suspense', () => {
             calls.push(3)
           })
           return () => h('div', props.msg)
-        }
+        },
       },
-      10
+      10,
     )
 
     const MiddleComponent = {
       setup() {
         return () =>
           h(AsyncChildWithSuspense, {
-            msg: msg.value
+            msg: msg.value,
           })
-      }
+      },
     }
 
     const Comp = {
@@ -817,12 +878,12 @@ describe('Suspense', () => {
             default: h('div', [
               h(MiddleComponent),
               h(AsyncChildParent, {
-                msg: 'root async'
-              })
+                msg: 'root async',
+              }),
             ]),
-            fallback: h('div', 'root fallback')
+            fallback: h('div', 'root fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -853,7 +914,7 @@ describe('Suspense', () => {
     await deps[3]
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>nested fallback</div><div>root async</div></div>`
+      `<div><div>nested fallback</div><div>root async</div></div>`,
     )
     expect(calls).toEqual([0, 1, 3])
 
@@ -864,7 +925,7 @@ describe('Suspense', () => {
     await Promise.all(deps)
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>nested changed</div><div>root async</div></div>`
+      `<div><div>nested changed</div><div>root async</div></div>`,
     )
     expect(calls).toEqual([0, 1, 3, 2])
 
@@ -872,7 +933,7 @@ describe('Suspense', () => {
     msg.value = 'nested changed again'
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>nested changed again</div><div>root async</div></div>`
+      `<div><div>nested changed again</div><div>root async</div></div>`,
     )
   })
 
@@ -889,7 +950,7 @@ describe('Suspense', () => {
           calls.push('foo unmounted')
         })
         return () => h('div', ['foo', h(FooNested)])
-      }
+      },
     })
 
     const FooNested = defineAsyncComponent(
@@ -902,9 +963,9 @@ describe('Suspense', () => {
             calls.push('foo nested unmounted')
           })
           return () => h('div', 'foo nested')
-        }
+        },
       },
-      10
+      10,
     )
 
     const Bar = defineAsyncComponent(
@@ -917,9 +978,9 @@ describe('Suspense', () => {
             calls.push('bar unmounted')
           })
           return () => h('div', 'bar')
-        }
+        },
       },
-      10
+      10,
     )
 
     const Comp = {
@@ -927,9 +988,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: toggle.value ? h(Foo) : h(Bar),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -962,7 +1023,7 @@ describe('Suspense', () => {
       `foo nested mounted`,
       `bar mounted`,
       `foo nested unmounted`,
-      `foo unmounted`
+      `foo unmounted`,
     ]
     expect(calls).toEqual(tempCalls)
     expect(serializeInner(root)).toBe(`<div>bar</div>`)
@@ -986,11 +1047,207 @@ describe('Suspense', () => {
       ...tempCalls,
       `foo mounted`,
       `foo nested mounted`,
-      `bar unmounted`
+      `bar unmounted`,
     ])
     expect(serializeInner(root)).toBe(`<div>foo<div>foo nested</div></div>`)
   })
 
+  // #10098
+  test('switching branches w/ nested suspense', async () => {
+    const OuterB = defineAsyncComponent({
+      setup: () => {
+        return () =>
+          h(RouterView, null, {
+            default: ({ Component }: any) => [
+              h(Suspense, null, {
+                default: () => h(Component),
+              }),
+            ],
+          })
+      },
+    })
+
+    const InnerB = defineAsyncComponent({
+      setup: () => {
+        return () => h('div', 'innerB')
+      },
+    })
+
+    const OuterA = defineAsyncComponent({
+      setup: () => {
+        return () =>
+          h(RouterView, null, {
+            default: ({ Component }: any) => [
+              h(Suspense, null, {
+                default: () => h(Component),
+              }),
+            ],
+          })
+      },
+    })
+
+    const InnerA = defineAsyncComponent({
+      setup: () => {
+        return () => h('div', 'innerA')
+      },
+    })
+
+    const toggle = ref(true)
+    const route = computed(() => {
+      return toggle.value ? [OuterA, InnerA] : [OuterB, InnerB]
+    })
+
+    const Comp = {
+      setup() {
+        provide('route', route)
+        return () =>
+          h(RouterView, null, {
+            default: ({ Component }: any) => [
+              h(Suspense, null, {
+                default: () => h(Component),
+              }),
+            ],
+          })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<!---->`)
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>innerA</div>`)
+
+    deps.length = 0
+
+    toggle.value = false
+    await nextTick()
+    // toggle again
+    toggle.value = true
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>innerA</div>`)
+  })
+
+  // #10415
+  test('nested suspense (w/ suspensible) switch several times before parent suspense resolve', async () => {
+    const OuterA = defineAsyncComponent({
+      setup: () => {
+        return () =>
+          h(RouterView, null, {
+            default: ({ Component }: any) => [
+              h(Suspense, null, {
+                default: () => h(Component),
+              }),
+            ],
+          })
+      },
+    })
+
+    const InnerA = defineAsyncComponent({
+      setup: () => {
+        return () => h('div', 'innerA')
+      },
+    })
+
+    const route = shallowRef([OuterA, InnerA])
+    const InnerB = defineAsyncComponent(
+      {
+        setup: () => {
+          return () => h('div', 'innerB')
+        },
+      },
+      5,
+    )
+
+    const InnerB1 = defineAsyncComponent(
+      {
+        setup: () => {
+          return () => h('div', 'innerB1')
+        },
+      },
+      5,
+    )
+
+    const InnerB2 = defineAsyncComponent(
+      {
+        setup: () => {
+          return () => h('div', 'innerB2')
+        },
+      },
+      5,
+    )
+
+    const OuterB = defineAsyncComponent(
+      {
+        setup() {
+          nextTick(async () => {
+            await new Promise(resolve => setTimeout(resolve, 1))
+            route.value = [OuterB, InnerB1]
+          })
+
+          nextTick(async () => {
+            await new Promise(resolve => setTimeout(resolve, 1))
+            route.value = [OuterB, InnerB2]
+          })
+
+          return () =>
+            h(RouterView, null, {
+              default: ({ Component }: any) => [
+                h(
+                  Suspense,
+                  { suspensible: true },
+                  {
+                    default: () => h(Component),
+                  },
+                ),
+              ],
+            })
+        },
+      },
+      5,
+    )
+
+    const Comp = {
+      setup() {
+        provide('route', route)
+        return () =>
+          h(RouterView, null, {
+            default: ({ Component }: any) => [
+              h(Suspense, null, {
+                default: () => h(Component),
+              }),
+            ],
+          })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<!---->`)
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>innerA</div>`)
+
+    deps.length = 0
+
+    route.value = [OuterB, InnerB]
+    await nextTick()
+
+    await Promise.all(deps)
+    await Promise.all(deps)
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>innerB2</div>`)
+  })
+
   test('branch switch to 3rd branch before resolve', async () => {
     const calls: string[] = []
 
@@ -1005,9 +1262,9 @@ describe('Suspense', () => {
               calls.push(`${name} unmounted`)
             })
             return () => h('div', [name])
-          }
+          },
         },
-        delay
+        delay,
       )
 
     const One = makeComp('one')
@@ -1021,9 +1278,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(view.value),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -1072,9 +1329,9 @@ describe('Suspense', () => {
               calls.push(`${name} unmounted`)
             })
             return () => h('div', [name])
-          }
+          },
         },
-        delay
+        delay,
       )
 
     const One = makeComp('one')
@@ -1087,9 +1344,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(view.value),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -1133,9 +1390,9 @@ describe('Suspense', () => {
               calls.push(`${name} unmounted`)
             })
             return () => h('div', [name])
-          }
+          },
         },
-        delay
+        delay,
       )
 
     const One = makeComp('one')
@@ -1149,14 +1406,14 @@ describe('Suspense', () => {
           h(
             Suspense,
             {
-              timeout: 10
+              timeout: 10,
             },
             {
               default: h(view.value),
-              fallback: h('div', 'fallback')
-            }
+              fallback: h('div', 'fallback'),
+            },
           )
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -1185,6 +1442,72 @@ describe('Suspense', () => {
     expect(calls).toEqual([`one mounted`, `one unmounted`, `two mounted`])
   })
 
+  test('mount the fallback content is in the correct position', async () => {
+    const makeComp = (name: string, delay = 0) =>
+      defineAsyncComponent(
+        {
+          setup() {
+            return () => h('div', [name])
+          },
+        },
+        delay,
+      )
+
+    const One = makeComp('one')
+    const Two = makeComp('two', 20)
+
+    const view = shallowRef(One)
+
+    const Comp = {
+      setup() {
+        return () =>
+          h('div', [
+            h(
+              Suspense,
+              {
+                timeout: 10,
+              },
+              {
+                default: h(view.value),
+                fallback: h('div', 'fallback'),
+              },
+            ),
+            h('div', 'three'),
+          ])
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(serializeInner(root)).toBe(
+      `<div><div>fallback</div><div>three</div></div>`,
+    )
+
+    await deps[0]
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>one</div><div>three</div></div>`,
+    )
+
+    view.value = Two
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>one</div><div>three</div></div>`,
+    )
+
+    await new Promise(r => setTimeout(r, 10))
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>fallback</div><div>three</div></div>`,
+    )
+
+    await deps[1]
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>two</div><div>three</div></div>`,
+    )
+  })
+
   // #2214
   // Since suspense renders its own root like a component, it should not patch
   // its content in optimized mode.
@@ -1198,7 +1521,7 @@ describe('Suspense', () => {
       <Suspense>
         <div><span>{{ n }}</span></div>
       </Suspense>
-      `
+      `,
     }
     const root = document.createElement('div')
     createApp(Comp).mount(root)
@@ -1215,13 +1538,13 @@ describe('Suspense', () => {
     const Child = {
       async setup() {
         return () => h('div', 'child')
-      }
+      },
     }
     const Parent = () => h('div', ['parent', toggle.value ? h(Child) : null])
     const Comp = {
       setup() {
         return () => h(Suspense, () => h(Parent))
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -1246,19 +1569,19 @@ describe('Suspense', () => {
       name: 'Child',
       async setup() {
         return () => h('div', 'child')
-      }
+      },
     }
     const Parent = {
       setup() {
         return () => h('div', [h(Child)])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
 
     expect(
-      `A component with async setup() must be nested in a <Suspense>`
+      `A component with async setup() must be nested in a <Suspense>`,
     ).toHaveBeenWarned()
   })
 
@@ -1274,9 +1597,9 @@ describe('Suspense', () => {
             calls.push('innerA mounted')
           })
           return () => h('div', 'innerA')
-        }
+        },
       },
-      10
+      10,
     )
 
     const InnerB = defineAsyncComponent(
@@ -1287,9 +1610,9 @@ describe('Suspense', () => {
             calls.push('innerB mounted')
           })
           return () => h('div', 'innerB')
-        }
+        },
       },
-      10
+      10,
     )
 
     const OuterA = defineAsyncComponent(
@@ -1301,9 +1624,9 @@ describe('Suspense', () => {
           })
           return () =>
             h(Fragment, null, [h('div', 'outerA'), slots.default?.()])
-        }
+        },
       },
-      5
+      5,
     )
 
     const OuterB = defineAsyncComponent(
@@ -1315,9 +1638,9 @@ describe('Suspense', () => {
           })
           return () =>
             h(Fragment, null, [h('div', 'outerB'), slots.default?.()])
-        }
+        },
       },
-      5
+      5,
     )
 
     const outerToggle = ref(false)
@@ -1343,14 +1666,14 @@ describe('Suspense', () => {
                     Suspense,
                     { suspensible: true },
                     {
-                      default: h(innerToggle.value ? InnerB : InnerA)
-                    }
-                  )
-              })
+                      default: h(innerToggle.value ? InnerB : InnerA),
+                    },
+                  ),
+              }),
             ],
-            fallback: h('div', 'fallback outer')
+            fallback: h('div', 'fallback outer'),
           })
-      }
+      },
     }
 
     expected = `<div>fallback outer</div>`
@@ -1375,7 +1698,7 @@ describe('Suspense', () => {
       'outerA created',
       'innerA created',
       'outerA mounted',
-      'innerA mounted'
+      'innerA mounted',
     ])
 
     // toggle outer component
@@ -1421,7 +1744,7 @@ describe('Suspense', () => {
           calls.push('innerA mounted')
         })
         return () => h('div', 'innerA')
-      }
+      },
     })
 
     const InnerB = defineComponent({
@@ -1431,7 +1754,7 @@ describe('Suspense', () => {
           calls.push('innerB mounted')
         })
         return () => h('div', 'innerB')
-      }
+      },
     })
 
     const OuterA = defineComponent({
@@ -1441,7 +1764,7 @@ describe('Suspense', () => {
           calls.push('outerA mounted')
         })
         return () => h(Fragment, null, [h('div', 'outerA'), slots.default?.()])
-      }
+      },
     })
 
     const OuterB = defineComponent({
@@ -1451,7 +1774,7 @@ describe('Suspense', () => {
           calls.push('outerB mounted')
         })
         return () => h(Fragment, null, [h('div', 'outerB'), slots.default?.()])
-      }
+      },
     })
 
     const outerToggle = ref(false)
@@ -1477,14 +1800,14 @@ describe('Suspense', () => {
                     Suspense,
                     { suspensible: true },
                     {
-                      default: h(innerToggle.value ? InnerB : InnerA)
-                    }
-                  )
-              })
+                      default: h(innerToggle.value ? InnerB : InnerA),
+                    },
+                  ),
+              }),
             ],
-            fallback: h('div', 'fallback outer')
+            fallback: h('div', 'fallback outer'),
           })
-      }
+      },
     })
 
     expected = `<div>outerA</div><div>innerA</div>`
@@ -1501,7 +1824,7 @@ describe('Suspense', () => {
       'outerA created',
       'innerA created',
       'innerA mounted',
-      'outerA mounted'
+      'outerA mounted',
     ])
 
     // toggle outer component
@@ -1527,17 +1850,328 @@ describe('Suspense', () => {
     expect(serializeInner(root)).toBe(expected)
   })
 
+  //#8678
+  test('nested suspense (child suspense update before parent suspense resolve)', async () => {
+    const calls: string[] = []
+
+    const InnerA = defineAsyncComponent(
+      {
+        setup: () => {
+          calls.push('innerA created')
+          onMounted(() => {
+            calls.push('innerA mounted')
+          })
+          return () => h('div', 'innerA')
+        },
+      },
+      10,
+    )
+
+    const InnerB = defineAsyncComponent(
+      {
+        setup: () => {
+          calls.push('innerB created')
+          onMounted(() => {
+            calls.push('innerB mounted')
+          })
+          return () => h('div', 'innerB')
+        },
+      },
+      10,
+    )
+
+    const OuterA = defineAsyncComponent(
+      {
+        setup: (_, { slots }: any) => {
+          calls.push('outerA created')
+          onMounted(() => {
+            calls.push('outerA mounted')
+          })
+          return () =>
+            h(Fragment, null, [h('div', 'outerA'), slots.default?.()])
+        },
+      },
+      5,
+    )
+
+    const OuterB = defineAsyncComponent(
+      {
+        setup: (_, { slots }: any) => {
+          calls.push('outerB created')
+          onMounted(() => {
+            calls.push('outerB mounted')
+          })
+          return () =>
+            h(Fragment, null, [h('div', 'outerB'), slots.default?.()])
+        },
+      },
+      5,
+    )
+
+    const outerToggle = ref(false)
+    const innerToggle = ref(false)
+
+    /**
+     *  <Suspense>
+     *    <component :is="outerToggle ? outerB : outerA">
+     *      <Suspense>
+     *        <component :is="innerToggle ? innerB : innerA" />
+     *      </Suspense>
+     *    </component>
+     *  </Suspense>
+     */
+    const Comp = {
+      setup() {
+        return () =>
+          h(Suspense, null, {
+            default: [
+              h(outerToggle.value ? OuterB : OuterA, null, {
+                default: () =>
+                  h(Suspense, null, {
+                    default: h(innerToggle.value ? InnerB : InnerA),
+                  }),
+              }),
+            ],
+            fallback: h('div', 'fallback outer'),
+          })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(serializeInner(root)).toBe(`<div>fallback outer</div>`)
+
+    // mount outer component
+    await Promise.all(deps)
+    await nextTick()
+
+    expect(serializeInner(root)).toBe(`<div>outerA</div><!---->`)
+    expect(calls).toEqual([`outerA created`, `outerA mounted`])
+
+    // mount inner component
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>outerA</div><div>innerA</div>`)
+
+    expect(calls).toEqual([
+      'outerA created',
+      'outerA mounted',
+      'innerA created',
+      'innerA mounted',
+    ])
+
+    calls.length = 0
+    deps.length = 0
+
+    // toggle both outer and inner components
+    outerToggle.value = true
+    innerToggle.value = true
+    await nextTick()
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>outerB</div><!---->`)
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>outerB</div><div>innerB</div>`)
+
+    // innerB only mount once
+    expect(calls).toEqual([
+      'outerB created',
+      'outerB mounted',
+      'innerB created',
+      'innerB mounted',
+    ])
+  })
+
+  // #6416
+  test('KeepAlive with Suspense', async () => {
+    const Async = defineAsyncComponent({
+      render() {
+        return h('div', 'async')
+      },
+    })
+    const Sync = {
+      render() {
+        return h('div', 'sync')
+      },
+    }
+    const components = [Async, Sync]
+    const viewRef = ref(0)
+    const root = nodeOps.createElement('div')
+    const App = {
+      render() {
+        return h(KeepAlive, null, {
+          default: () => {
+            return h(Suspense, null, {
+              default: h(components[viewRef.value]),
+              fallback: h('div', 'Loading-dynamic-components'),
+            })
+          },
+        })
+      },
+    }
+    render(h(App), root)
+    expect(serializeInner(root)).toBe(`<div>Loading-dynamic-components</div>`)
+
+    viewRef.value = 1
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>sync</div>`)
+
+    viewRef.value = 0
+    await nextTick()
+
+    expect(serializeInner(root)).toBe('<div>sync</div>')
+
+    await Promise.all(deps)
+    await nextTick()
+    // when async resolve,it should be <div>async</div>
+    expect(serializeInner(root)).toBe('<div>async</div>')
+
+    viewRef.value = 1
+    await nextTick()
+    // TypeError: Cannot read properties of null (reading 'parentNode')
+    // This has been fixed
+    expect(serializeInner(root)).toBe(`<div>sync</div>`)
+  })
+
+  // #10899 / #11427
+  test('KeepAlive + Suspense switch before branch resolves', async () => {
+    const Async1 = defineAsyncComponent({
+      render() {
+        return h('div', 'async1')
+      },
+    })
+    const Async2 = defineAsyncComponent({
+      render() {
+        return h('div', 'async2')
+      },
+    })
+    const components = [Async1, Async2]
+    const viewRef = ref(0)
+    const root = nodeOps.createElement('div')
+    const App = {
+      render() {
+        return h(
+          KeepAlive,
+          {
+            max: 1,
+          },
+          {
+            default: () => {
+              return h(Suspense, null, {
+                default: h(components[viewRef.value]),
+                fallback: h('div', 'loading'),
+              })
+            },
+          },
+        )
+      },
+    }
+    render(h(App), root)
+    expect(serializeInner(root)).toBe(`<div>loading</div>`)
+
+    // switch to Async2 before Async1 resolves
+    viewRef.value = 1
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>loading</div>`)
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe('<div>async2</div>')
+
+    viewRef.value = 0
+    await nextTick()
+    await Promise.all(deps)
+    expect(serializeInner(root)).toBe(`<div>async1</div>`)
+
+    viewRef.value = 1
+    await nextTick()
+    await Promise.all(deps)
+    expect(serializeInner(root)).toBe(`<div>async2</div>`)
+  })
+
+  test('KeepAlive + Suspense + comment slot', async () => {
+    const toggle = ref(false)
+    const Async = defineAsyncComponent({
+      render() {
+        return h('div', 'async1')
+      },
+    })
+    const App = {
+      render() {
+        return h(KeepAlive, null, {
+          default: () => {
+            return h(Suspense, null, {
+              default: toggle.value ? h(Async) : createCommentVNode('v-if'),
+            })
+          },
+        })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+    expect(serializeInner(root)).toBe(`<!--v-if-->`)
+
+    toggle.value = true
+    await nextTick()
+    await Promise.all(deps)
+    expect(serializeInner(root)).toBe(`<div>async1</div>`)
+  })
+
+  // #6416 follow up / #10017
+  test('Suspense patched during HOC async component re-mount', async () => {
+    const key = ref('k')
+    const data = ref('data')
+
+    const Async = defineAsyncComponent({
+      render() {
+        return h('div', 'async')
+      },
+    })
+
+    const Comp = {
+      render() {
+        return h(Async, { key: key.value })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    const App = {
+      render() {
+        return h(Suspense, null, {
+          default: h(Comp, { k: key.value, data: data.value }),
+        })
+      },
+    }
+    render(h(App), root)
+    expect(serializeInner(root)).toBe(`<!---->`)
+
+    await Promise.all(deps)
+
+    // async mounted, but key change causing a new async comp to be loaded
+    key.value = 'k1'
+    await nextTick()
+
+    // patch the Suspense
+    // should not throw error due to Suspense vnode.el being null
+    data.value = 'data2'
+    await Promise.all(deps)
+  })
+
   describe('warnings', () => {
     // base function to check if a combination of slots warns or not
     function baseCheckWarn(
       shouldWarn: boolean,
       children: RawSlots,
-      props: SuspenseProps | null = null
+      props: SuspenseProps | null = null,
     ) {
       const Comp = {
         setup() {
           return () => h(Suspense, props, children)
-        }
+        },
       }
 
       const root = nodeOps.createElement('div')
@@ -1547,7 +2181,7 @@ describe('Suspense', () => {
         expect(`<Suspense> slots expect a single root node.`).toHaveBeenWarned()
       } else {
         expect(
-          `<Suspense> slots expect a single root node.`
+          `<Suspense> slots expect a single root node.`,
         ).not.toHaveBeenWarned()
       }
     }
@@ -1559,41 +2193,41 @@ describe('Suspense', () => {
     test('does not warn on single child', async () => {
       checkNoWarn({
         default: h('div'),
-        fallback: h('div')
+        fallback: h('div'),
       })
     })
 
     test('does not warn on null', async () => {
       checkNoWarn({
         default: null,
-        fallback: null
+        fallback: null,
       })
     })
 
     test('does not warn on <component :is="null" />', async () => {
       checkNoWarn({
         default: () => [resolveDynamicComponent(null)],
-        fallback: () => null
+        fallback: () => null,
       })
     })
 
     test('does not warn on empty array', async () => {
       checkNoWarn({
         default: [],
-        fallback: () => []
+        fallback: () => [],
       })
     })
 
     test('warns on multiple children in default', async () => {
       checkWarn({
-        default: [h('div'), h('div')]
+        default: [h('div'), h('div')],
       })
     })
 
     test('warns on multiple children in fallback', async () => {
       checkWarn({
         default: h('div'),
-        fallback: [h('div'), h('div')]
+        fallback: [h('div'), h('div')],
       })
     })
   })
diff --git a/packages/runtime-core/__tests__/components/Teleport.spec.ts b/packages/runtime-core/__tests__/components/Teleport.spec.ts
index c0dbd4cae..5dc333ad6 100644
--- a/packages/runtime-core/__tests__/components/Teleport.spec.ts
+++ b/packages/runtime-core/__tests__/components/Teleport.spec.ts
@@ -3,554 +3,699 @@
  */
 
 import {
-  nodeOps,
-  serializeInner,
-  render,
-  h,
   Teleport,
   Text,
-  ref,
-  nextTick,
-  markRaw,
+  createApp,
   defineComponent,
+  markRaw,
+  nextTick,
+  nodeOps,
+  h as originalH,
+  ref,
+  render,
+  serializeInner,
   withDirectives,
-  createApp
 } from '@vue/runtime-test'
-import { createVNode, Fragment } from '../../src/vnode'
-import { compile, render as domRender } from 'vue'
+import { Fragment, createCommentVNode, createVNode } from '../../src/vnode'
+import { compile, createApp as createDOMApp, render as domRender } from 'vue'
 
 describe('renderer: teleport', () => {
-  test('should work', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
-
-    render(
-      h(() => [
-        h(Teleport, { to: target }, h('div', 'teleported')),
-        h('div', 'root')
-      ]),
-      root
-    )
-
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
-    )
+  describe('eager mode', () => {
+    runSharedTests(false)
   })
 
-  test('should work with SVG', async () => {
-    const root = document.createElement('div')
-    const svg = ref()
-    const circle = ref()
+  describe('defer mode', () => {
+    runSharedTests(true)
 
-    const Comp = defineComponent({
-      setup() {
-        return {
-          svg,
-          circle
-        }
-      },
-      template: `
-      <svg ref="svg"></svg>
-      <teleport :to="svg" v-if="svg">
-      <circle ref="circle"></circle>
-      </teleport>`
+    const h = originalH
+
+    test('should be able to target content appearing later than the teleport with defer', () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      createDOMApp({
+        render() {
+          return [
+            h(Teleport, { to: '#target', defer: true }, h('div', 'teleported')),
+            h('div', { id: 'target' }),
+          ]
+        },
+      }).mount(root)
+
+      expect(root.innerHTML).toMatchInlineSnapshot(
+        `"<!--teleport start--><!--teleport end--><div id="target"><div>teleported</div></div>"`,
+      )
     })
 
-    domRender(h(Comp), root)
+    test('defer mode should work inside suspense', async () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
 
-    await nextTick()
+      let p: Promise<any>
 
-    expect(root.innerHTML).toMatchInlineSnapshot(
-      `"<svg><circle></circle></svg><!--teleport start--><!--teleport end-->"`
-    )
+      const Comp = defineComponent({
+        template: `
+        <suspense>
+          <div>
+            <async />
+            <teleport defer to="#target-suspense">
+              <div>teleported</div>
+            </teleport>
+            <div id="target-suspense" />
+          </div>
+        </suspense>`,
+        components: {
+          async: {
+            setup() {
+              p = Promise.resolve(() => 'async')
+              return p
+            },
+          },
+        },
+      })
 
-    expect(svg.value.namespaceURI).toBe('http://www.w3.org/2000/svg')
-    expect(circle.value.namespaceURI).toBe('http://www.w3.org/2000/svg')
+      domRender(h(Comp), root)
+      expect(root.innerHTML).toBe(`<!---->`)
+
+      await p!.then(() => Promise.resolve())
+      await nextTick()
+      expect(root.innerHTML).toBe(
+        `<div>` +
+          `async` +
+          `<!--teleport start--><!--teleport end-->` +
+          `<div id="target-suspense"><div>teleported</div></div>` +
+          `</div>`,
+      )
+    })
   })
 
-  test('should update target', async () => {
-    const targetA = nodeOps.createElement('div')
-    const targetB = nodeOps.createElement('div')
-    const target = ref(targetA)
-    const root = nodeOps.createElement('div')
+  function runSharedTests(deferMode: boolean) {
+    const h = (deferMode
+      ? (type: any, props: any, ...args: any[]) => {
+          if (type === Teleport) {
+            props.defer = true
+          }
+          return originalH(type, props, ...args)
+        }
+      : originalH) as unknown as typeof originalH
 
-    render(
-      h(() => [
-        h(Teleport, { to: target.value }, h('div', 'teleported')),
-        h('div', 'root')
-      ]),
-      root
-    )
+    test('should work', () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
 
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(targetA)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
-    )
-    expect(serializeInner(targetB)).toMatchInlineSnapshot(`""`)
-
-    target.value = targetB
-    await nextTick()
-
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(targetA)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(targetB)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
-    )
-  })
-
-  test('should update children', async () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
-    const children = ref([h('div', 'teleported')])
-
-    render(
-      h(() => h(Teleport, { to: target }, children.value)),
-      root
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
-    )
-
-    children.value = []
-    await nextTick()
-
-    expect(serializeInner(target)).toMatchInlineSnapshot(`""`)
-
-    children.value = [createVNode(Text, null, 'teleported')]
-    await nextTick()
-
-    expect(serializeInner(target)).toMatchInlineSnapshot(`"teleported"`)
-  })
-
-  test('should remove children when unmounted', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
-
-    function testUnmount(props: any) {
       render(
-        h(() => [h(Teleport, props, h('div', 'teleported')), h('div', 'root')]),
-        root
+        h(() => [
+          h(Teleport, { to: target }, h('div', 'teleported')),
+          h('div', 'root'),
+        ]),
+        root,
       )
-      expect(serializeInner(target)).toMatchInlineSnapshot(
-        props.disabled ? `""` : `"<div>teleported</div>"`
+
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
       )
+      expect(serializeInner(target)).toBe(`<div>teleported</div>`)
+    })
+
+    test('should work with SVG', async () => {
+      const root = document.createElement('div')
+      const svg = ref()
+      const circle = ref()
+
+      const Comp = defineComponent({
+        setup() {
+          return {
+            svg,
+            circle,
+          }
+        },
+        template: `
+        <svg ref="svg"></svg>
+        <teleport :to="svg" v-if="svg">
+        <circle ref="circle"></circle>
+        </teleport>`,
+      })
+
+      domRender(h(Comp), root)
+
+      await nextTick()
+
+      expect(root.innerHTML).toBe(
+        `<svg><circle></circle></svg><!--teleport start--><!--teleport end-->`,
+      )
+
+      expect(svg.value.namespaceURI).toBe('http://www.w3.org/2000/svg')
+      expect(circle.value.namespaceURI).toBe('http://www.w3.org/2000/svg')
+    })
+
+    test('should update target', async () => {
+      const targetA = nodeOps.createElement('div')
+      const targetB = nodeOps.createElement('div')
+      const target = ref(targetA)
+      const root = nodeOps.createElement('div')
+
+      render(
+        h(() => [
+          h(Teleport, { to: target.value }, h('div', 'teleported')),
+          h('div', 'root'),
+        ]),
+        root,
+      )
+
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(targetA)).toBe(`<div>teleported</div>`)
+      expect(serializeInner(targetB)).toBe(``)
+
+      target.value = targetB
+      await nextTick()
+
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(targetA)).toBe(``)
+      expect(serializeInner(targetB)).toBe(`<div>teleported</div>`)
+    })
+
+    test('should update children', async () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
+      const children = ref([h('div', 'teleported')])
+
+      render(
+        h(() => h(Teleport, { to: target }, children.value)),
+        root,
+      )
+      expect(serializeInner(target)).toBe(`<div>teleported</div>`)
+
+      children.value = []
+      await nextTick()
+
+      expect(serializeInner(target)).toBe(``)
+
+      children.value = [createVNode(Text, null, 'teleported')]
+      await nextTick()
+
+      expect(serializeInner(target)).toBe(`teleported`)
+    })
+
+    test('should remove children when unmounted', () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
+
+      function testUnmount(props: any) {
+        render(
+          h(() => [
+            h(Teleport, props, h('div', 'teleported')),
+            h('div', 'root'),
+          ]),
+          root,
+        )
+        expect(serializeInner(target)).toBe(
+          props.disabled ? `` : `<div>teleported</div>`,
+        )
+
+        render(null, root)
+        expect(serializeInner(target)).toBe('')
+        expect(target.children.length).toBe(0)
+      }
+
+      testUnmount({ to: target, disabled: false })
+      testUnmount({ to: target, disabled: true })
+      testUnmount({ to: null, disabled: true })
+    })
+
+    test('component with multi roots should be removed when unmounted', () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
+
+      const Comp = {
+        render() {
+          return [h('p'), h('p')]
+        },
+      }
+
+      render(
+        h(() => [h(Teleport, { to: target }, h(Comp)), h('div', 'root')]),
+        root,
+      )
+      expect(serializeInner(target)).toBe(`<p></p><p></p>`)
 
       render(null, root)
       expect(serializeInner(target)).toBe('')
-      expect(target.children.length).toBe(0)
-    }
-
-    testUnmount({ to: target, disabled: false })
-    testUnmount({ to: target, disabled: true })
-    testUnmount({ to: null, disabled: true })
-  })
-
-  test('component with multi roots should be removed when unmounted', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
-
-    const Comp = {
-      render() {
-        return [h('p'), h('p')]
-      }
-    }
-
-    render(
-      h(() => [h(Teleport, { to: target }, h(Comp)), h('div', 'root')]),
-      root
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(`"<p></p><p></p>"`)
-
-    render(null, root)
-    expect(serializeInner(target)).toBe('')
-  })
-
-  // #6347
-  test('descendent component should be unmounted when teleport is disabled and unmounted', () => {
-    const root = nodeOps.createElement('div')
-
-    const CompWithHook = {
-      render() {
-        return [h('p'), h('p')]
-      },
-      beforeUnmount: vi.fn(),
-      unmounted: vi.fn()
-    }
-
-    render(
-      h(() => [h(Teleport, { to: null, disabled: true }, h(CompWithHook))]),
-      root
-    )
-    expect(CompWithHook.beforeUnmount).toBeCalledTimes(0)
-    expect(CompWithHook.unmounted).toBeCalledTimes(0)
-
-    render(null, root)
-
-    expect(CompWithHook.beforeUnmount).toBeCalledTimes(1)
-    expect(CompWithHook.unmounted).toBeCalledTimes(1)
-  })
-
-  test('multiple teleport with same target', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
-
-    render(
-      h('div', [
-        h(Teleport, { to: target }, h('div', 'one')),
-        h(Teleport, { to: target }, 'two')
-      ]),
-      root
-    )
-
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(`"<div>one</div>two"`)
-
-    // update existing content
-    render(
-      h('div', [
-        h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
-        h(Teleport, { to: target }, 'three')
-      ]),
-      root
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>one</div><div>two</div>three"`
-    )
-
-    // toggling
-    render(h('div', [null, h(Teleport, { to: target }, 'three')]), root)
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!----><!--teleport start--><!--teleport end--></div>"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(`"three"`)
-
-    // toggle back
-    render(
-      h('div', [
-        h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
-        h(Teleport, { to: target }, 'three')
-      ]),
-      root
-    )
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>"`
-    )
-    // should append
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"three<div>one</div><div>two</div>"`
-    )
-
-    // toggle the other teleport
-    render(
-      h('div', [
-        h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
-        null
-      ]),
-      root
-    )
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!--teleport start--><!--teleport end--><!----></div>"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>one</div><div>two</div>"`
-    )
-  })
-
-  test('should work when using template ref as target', async () => {
-    const root = nodeOps.createElement('div')
-    const target = ref(null)
-    const disabled = ref(true)
-
-    const App = {
-      setup() {
-        return () =>
-          h(Fragment, [
-            h('div', { ref: target }),
-            h(
-              Teleport,
-              { to: target.value, disabled: disabled.value },
-              h('div', 'teleported')
-            )
-          ])
-      }
-    }
-    render(h(App), root)
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div></div><!--teleport start--><div>teleported</div><!--teleport end-->"`
-    )
-
-    disabled.value = false
-    await nextTick()
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><div>teleported</div></div><!--teleport start--><!--teleport end-->"`
-    )
-  })
-
-  test('disabled', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
-
-    const renderWithDisabled = (disabled: boolean) => {
-      return h(Fragment, [
-        h(Teleport, { to: target, disabled }, h('div', 'teleported')),
-        h('div', 'root')
-      ])
-    }
-
-    render(renderWithDisabled(false), root)
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
-    )
-
-    render(renderWithDisabled(true), root)
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(target)).toBe(``)
-
-    // toggle back
-    render(renderWithDisabled(false), root)
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
-    )
-  })
-
-  test('moving teleport while enabled', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
-
-    render(
-      h(Fragment, [
-        h(Teleport, { to: target }, h('div', 'teleported')),
-        h('div', 'root')
-      ]),
-      root
-    )
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
-    )
-
-    render(
-      h(Fragment, [
-        h('div', 'root'),
-        h(Teleport, { to: target }, h('div', 'teleported'))
-      ]),
-      root
-    )
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div>root</div><!--teleport start--><!--teleport end-->"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
-    )
-
-    render(
-      h(Fragment, [
-        h(Teleport, { to: target }, h('div', 'teleported')),
-        h('div', 'root')
-      ]),
-      root
-    )
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
-    )
-  })
-
-  test('moving teleport while disabled', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
-
-    render(
-      h(Fragment, [
-        h(Teleport, { to: target, disabled: true }, h('div', 'teleported')),
-        h('div', 'root')
-      ]),
-      root
-    )
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(target)).toBe('')
-
-    render(
-      h(Fragment, [
-        h('div', 'root'),
-        h(Teleport, { to: target, disabled: true }, h('div', 'teleported'))
-      ]),
-      root
-    )
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div>root</div><!--teleport start--><div>teleported</div><!--teleport end-->"`
-    )
-    expect(serializeInner(target)).toBe('')
-
-    render(
-      h(Fragment, [
-        h(Teleport, { to: target, disabled: true }, h('div', 'teleported')),
-        h('div', 'root')
-      ]),
-      root
-    )
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(target)).toBe('')
-  })
-
-  test('should work with block tree', async () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
-    const disabled = ref(false)
-
-    const App = {
-      setup() {
-        return {
-          target: markRaw(target),
-          disabled
-        }
-      },
-      render: compile(`
-      <teleport :to="target" :disabled="disabled">
-        <div>teleported</div><span>{{ disabled }}</span><span v-if="disabled"/>
-      </teleport>
-      <div>root</div>
-      `)
-    }
-    render(h(App), root)
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div><span>false</span><!--v-if-->"`
-    )
-
-    disabled.value = true
-    await nextTick()
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><div>teleported</div><span>true</span><span></span><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(target)).toBe(``)
-
-    // toggle back
-    disabled.value = false
-    await nextTick()
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div><span>false</span><!--v-if-->"`
-    )
-  })
-
-  // #3497
-  test(`the dir hooks of the Teleport's children should be called correctly`, async () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
-    const toggle = ref(true)
-    const dir = {
-      mounted: vi.fn(),
-      unmounted: vi.fn()
-    }
-
-    const app = createApp({
-      setup() {
-        return () => {
-          return toggle.value
-            ? h(Teleport, { to: target }, [
-                withDirectives(h('div', ['foo']), [[dir]])
-              ])
-            : null
-        }
-      }
     })
-    app.mount(root)
 
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end-->"`
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(`"<div>foo</div>"`)
-    expect(dir.mounted).toHaveBeenCalledTimes(1)
-    expect(dir.unmounted).toHaveBeenCalledTimes(0)
+    // #6347
+    test('descendent component should be unmounted when teleport is disabled and unmounted', () => {
+      const root = nodeOps.createElement('div')
 
-    toggle.value = false
-    await nextTick()
-    expect(serializeInner(root)).toMatchInlineSnapshot(`"<!---->"`)
-    expect(serializeInner(target)).toMatchInlineSnapshot(`""`)
-    expect(dir.mounted).toHaveBeenCalledTimes(1)
-    expect(dir.unmounted).toHaveBeenCalledTimes(1)
-  })
-
-  // #7835
-  test(`ensure that target changes when disabled are updated correctly when enabled`, async () => {
-    const root = nodeOps.createElement('div')
-    const target1 = nodeOps.createElement('div')
-    const target2 = nodeOps.createElement('div')
-    const target3 = nodeOps.createElement('div')
-    const target = ref(target1)
-    const disabled = ref(true)
-
-    const App = {
-      setup() {
-        return () =>
-          h(Fragment, [
-            h(
-              Teleport,
-              { to: target.value, disabled: disabled.value },
-              h('div', 'teleported')
-            )
-          ])
+      const CompWithHook = {
+        render() {
+          return [h('p'), h('p')]
+        },
+        beforeUnmount: vi.fn(),
+        unmounted: vi.fn(),
       }
-    }
-    render(h(App), root)
-    disabled.value = false
-    await nextTick()
-    expect(serializeInner(target1)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
-    )
-    expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(target3)).toMatchInlineSnapshot(`""`)
 
-    disabled.value = true
-    await nextTick()
-    target.value = target2
-    await nextTick()
-    expect(serializeInner(target1)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(target3)).toMatchInlineSnapshot(`""`)
+      render(
+        h(() => [h(Teleport, { to: null, disabled: true }, h(CompWithHook))]),
+        root,
+      )
+      expect(CompWithHook.beforeUnmount).toBeCalledTimes(0)
+      expect(CompWithHook.unmounted).toBeCalledTimes(0)
 
-    target.value = target3
-    await nextTick()
-    expect(serializeInner(target1)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(target3)).toMatchInlineSnapshot(`""`)
+      render(null, root)
 
-    disabled.value = false
-    await nextTick()
-    expect(serializeInner(target1)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(target3)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
-    )
-  })
+      expect(CompWithHook.beforeUnmount).toBeCalledTimes(1)
+      expect(CompWithHook.unmounted).toBeCalledTimes(1)
+    })
+
+    test('multiple teleport with same target', () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
+
+      render(
+        h('div', [
+          h(Teleport, { to: target }, h('div', 'one')),
+          h(Teleport, { to: target }, 'two'),
+        ]),
+        root,
+      )
+
+      expect(serializeInner(root)).toBe(
+        `<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>`,
+      )
+      expect(serializeInner(target)).toBe(`<div>one</div>two`)
+
+      // update existing content
+      render(
+        h('div', [
+          h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
+          h(Teleport, { to: target }, 'three'),
+        ]),
+        root,
+      )
+      expect(serializeInner(target)).toBe(`<div>one</div><div>two</div>three`)
+
+      // toggling
+      render(h('div', [null, h(Teleport, { to: target }, 'three')]), root)
+      expect(serializeInner(root)).toBe(
+        `<div><!----><!--teleport start--><!--teleport end--></div>`,
+      )
+      expect(serializeInner(target)).toBe(`three`)
+
+      // toggle back
+      render(
+        h('div', [
+          h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
+          h(Teleport, { to: target }, 'three'),
+        ]),
+        root,
+      )
+      expect(serializeInner(root)).toBe(
+        `<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>`,
+      )
+      // should append
+      expect(serializeInner(target)).toBe(`three<div>one</div><div>two</div>`)
+
+      // toggle the other teleport
+      render(
+        h('div', [
+          h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
+          null,
+        ]),
+        root,
+      )
+      expect(serializeInner(root)).toBe(
+        `<div><!--teleport start--><!--teleport end--><!----></div>`,
+      )
+      expect(serializeInner(target)).toBe(`<div>one</div><div>two</div>`)
+    })
+
+    test('should work when using template ref as target', async () => {
+      const root = nodeOps.createElement('div')
+      const target = ref(null)
+      const disabled = ref(true)
+
+      const App = {
+        setup() {
+          return () =>
+            h(Fragment, [
+              h('div', { ref: target }),
+              h(
+                Teleport,
+                { to: target.value, disabled: disabled.value },
+                h('div', 'teleported'),
+              ),
+            ])
+        },
+      }
+      render(h(App), root)
+      expect(serializeInner(root)).toBe(
+        `<div></div><!--teleport start--><div>teleported</div><!--teleport end-->`,
+      )
+
+      disabled.value = false
+      await nextTick()
+      expect(serializeInner(root)).toBe(
+        `<div><div>teleported</div></div><!--teleport start--><!--teleport end-->`,
+      )
+    })
+
+    test('disabled', () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
+
+      const renderWithDisabled = (disabled: boolean) => {
+        return h(Fragment, [
+          h(Teleport, { to: target, disabled }, h('div', 'teleported')),
+          h('div', 'root'),
+        ])
+      }
+
+      render(renderWithDisabled(false), root)
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe(`<div>teleported</div>`)
+
+      render(renderWithDisabled(true), root)
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe(``)
+
+      // toggle back
+      render(renderWithDisabled(false), root)
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe(`<div>teleported</div>`)
+    })
+
+    test('moving teleport while enabled', () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
+
+      render(
+        h(Fragment, [
+          h(Teleport, { to: target }, h('div', 'teleported')),
+          h('div', 'root'),
+        ]),
+        root,
+      )
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe(`<div>teleported</div>`)
+
+      render(
+        h(Fragment, [
+          h('div', 'root'),
+          h(Teleport, { to: target }, h('div', 'teleported')),
+        ]),
+        root,
+      )
+      expect(serializeInner(root)).toBe(
+        `<div>root</div><!--teleport start--><!--teleport end-->`,
+      )
+      expect(serializeInner(target)).toBe(`<div>teleported</div>`)
+
+      render(
+        h(Fragment, [
+          h(Teleport, { to: target }, h('div', 'teleported')),
+          h('div', 'root'),
+        ]),
+        root,
+      )
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe(`<div>teleported</div>`)
+    })
+
+    test('moving teleport while disabled', () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
+
+      render(
+        h(Fragment, [
+          h(Teleport, { to: target, disabled: true }, h('div', 'teleported')),
+          h('div', 'root'),
+        ]),
+        root,
+      )
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe('')
+
+      render(
+        h(Fragment, [
+          h('div', 'root'),
+          h(Teleport, { to: target, disabled: true }, h('div', 'teleported')),
+        ]),
+        root,
+      )
+      expect(serializeInner(root)).toBe(
+        `<div>root</div><!--teleport start--><div>teleported</div><!--teleport end-->`,
+      )
+      expect(serializeInner(target)).toBe('')
+
+      render(
+        h(Fragment, [
+          h(Teleport, { to: target, disabled: true }, h('div', 'teleported')),
+          h('div', 'root'),
+        ]),
+        root,
+      )
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe('')
+    })
+
+    test('should work with block tree', async () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
+      const disabled = ref(false)
+
+      const App = {
+        setup() {
+          return {
+            target: markRaw(target),
+            disabled,
+          }
+        },
+        render: compile(`
+        <teleport :to="target" :disabled="disabled">
+          <div>teleported</div><span>{{ disabled }}</span><span v-if="disabled"/>
+        </teleport>
+        <div>root</div>
+        `),
+      }
+      render(h(App), root)
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe(
+        `<div>teleported</div><span>false</span><!--v-if-->`,
+      )
+
+      disabled.value = true
+      await nextTick()
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><div>teleported</div><span>true</span><span></span><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe(``)
+
+      // toggle back
+      disabled.value = false
+      await nextTick()
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe(
+        `<div>teleported</div><span>false</span><!--v-if-->`,
+      )
+    })
+
+    // #3497
+    test(`the dir hooks of the Teleport's children should be called correctly`, async () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
+      const toggle = ref(true)
+      const dir = {
+        mounted: vi.fn(),
+        unmounted: vi.fn(),
+      }
+
+      const app = createApp({
+        setup() {
+          return () => {
+            return toggle.value
+              ? h(Teleport, { to: target }, [
+                  withDirectives(h('div', ['foo']), [[dir]]),
+                ])
+              : null
+          }
+        },
+      })
+      app.mount(root)
+
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end-->`,
+      )
+      expect(serializeInner(target)).toBe(`<div>foo</div>`)
+      await nextTick()
+      expect(dir.mounted).toHaveBeenCalledTimes(1)
+      expect(dir.unmounted).toHaveBeenCalledTimes(0)
+
+      toggle.value = false
+      await nextTick()
+      expect(serializeInner(root)).toBe(`<!---->`)
+      expect(serializeInner(target)).toBe(``)
+      expect(dir.mounted).toHaveBeenCalledTimes(1)
+      expect(dir.unmounted).toHaveBeenCalledTimes(1)
+    })
+
+    // #7835
+    test(`ensure that target changes when disabled are updated correctly when enabled`, async () => {
+      const root = nodeOps.createElement('div')
+      const target1 = nodeOps.createElement('div')
+      const target2 = nodeOps.createElement('div')
+      const target3 = nodeOps.createElement('div')
+      const target = ref(target1)
+      const disabled = ref(true)
+
+      const App = {
+        setup() {
+          return () =>
+            h(Fragment, [
+              h(
+                Teleport,
+                { to: target.value, disabled: disabled.value },
+                h('div', 'teleported'),
+              ),
+            ])
+        },
+      }
+      render(h(App), root)
+      disabled.value = false
+      await nextTick()
+      expect(serializeInner(target1)).toBe(`<div>teleported</div>`)
+      expect(serializeInner(target2)).toBe(``)
+      expect(serializeInner(target3)).toBe(``)
+
+      disabled.value = true
+      await nextTick()
+      target.value = target2
+      await nextTick()
+      expect(serializeInner(target1)).toBe(``)
+      expect(serializeInner(target2)).toBe(``)
+      expect(serializeInner(target3)).toBe(``)
+
+      target.value = target3
+      await nextTick()
+      expect(serializeInner(target1)).toBe(``)
+      expect(serializeInner(target2)).toBe(``)
+      expect(serializeInner(target3)).toBe(``)
+
+      disabled.value = false
+      await nextTick()
+      expect(serializeInner(target1)).toBe(``)
+      expect(serializeInner(target2)).toBe(``)
+      expect(serializeInner(target3)).toBe(`<div>teleported</div>`)
+    })
+
+    //#9071
+    test('toggle sibling node inside target node', async () => {
+      const root = document.createElement('div')
+      const show = ref(false)
+      const App = defineComponent({
+        setup() {
+          return () => {
+            return show.value
+              ? h(Teleport, { to: root }, [h('div', 'teleported')])
+              : h('div', 'foo')
+          }
+        },
+      })
+
+      domRender(h(App), root)
+      expect(root.innerHTML).toBe('<div>foo</div>')
+
+      show.value = true
+      await nextTick()
+
+      expect(root.innerHTML).toBe(
+        '<!--teleport start--><!--teleport end--><div>teleported</div>',
+      )
+
+      show.value = false
+      await nextTick()
+
+      expect(root.innerHTML).toBe('<div>foo</div>')
+    })
+
+    test('unmount previous sibling node inside target node', async () => {
+      const root = document.createElement('div')
+      const parentShow = ref(false)
+      const childShow = ref(true)
+
+      const Comp = {
+        setup() {
+          return () => h(Teleport, { to: root }, [h('div', 'foo')])
+        },
+      }
+
+      const App = defineComponent({
+        setup() {
+          return () => {
+            return parentShow.value
+              ? h(Fragment, { key: 0 }, [
+                  childShow.value ? h(Comp) : createCommentVNode('v-if'),
+                ])
+              : createCommentVNode('v-if')
+          }
+        },
+      })
+
+      domRender(h(App), root)
+      expect(root.innerHTML).toBe('<!--v-if-->')
+
+      parentShow.value = true
+      await nextTick()
+      expect(root.innerHTML).toBe(
+        '<!--teleport start--><!--teleport end--><div>foo</div>',
+      )
+
+      parentShow.value = false
+      await nextTick()
+      expect(root.innerHTML).toBe('<!--v-if-->')
+    })
+
+    test('accessing template refs inside teleport', async () => {
+      const target = nodeOps.createElement('div')
+      const tRef = ref()
+      let tRefInMounted
+
+      render(
+        h({
+          render: () => [
+            h(Teleport, { to: target }, h('div', { ref: tRef }, 'teleported')),
+            h('div', 'root'),
+          ],
+          mounted() {
+            tRefInMounted = tRef.value
+          },
+        }),
+        nodeOps.createElement('div'),
+      )
+
+      // children[0] is the start anchor
+      expect(tRefInMounted).toBe(target.children[1])
+    })
+  }
 })
diff --git a/packages/runtime-core/__tests__/directives.spec.ts b/packages/runtime-core/__tests__/directives.spec.ts
index 16aeb3ad4..8d9982548 100644
--- a/packages/runtime-core/__tests__/directives.spec.ts
+++ b/packages/runtime-core/__tests__/directives.spec.ts
@@ -1,16 +1,19 @@
 import {
+  type DirectiveBinding,
+  type DirectiveHook,
+  type VNode,
+  defineComponent,
   h,
-  withDirectives,
+  nextTick,
+  nodeOps,
   ref,
   render,
-  nodeOps,
-  DirectiveHook,
-  VNode,
-  DirectiveBinding,
-  nextTick,
-  defineComponent
+  withDirectives,
 } from '@vue/runtime-test'
-import { currentInstance, ComponentInternalInstance } from '../src/component'
+import {
+  type ComponentInternalInstance,
+  currentInstance,
+} from '../src/component'
 
 describe('directives', () => {
   it('should work', async () => {
@@ -105,7 +108,7 @@ describe('directives', () => {
       beforeUpdate,
       updated,
       beforeUnmount,
-      unmounted
+      unmounted,
     }
 
     let _instance: ComponentInternalInstance | null = null
@@ -125,11 +128,11 @@ describe('directives', () => {
             // argument
             'foo',
             // modifiers
-            { ok: true }
-          ]
+            { ok: true },
+          ],
         ])
         return _vnode
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -185,11 +188,11 @@ describe('directives', () => {
             // argument
             'foo',
             // modifiers
-            { ok: true }
-          ]
+            { ok: true },
+          ],
         ])
         return _vnode
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -294,7 +297,7 @@ describe('directives', () => {
       beforeUpdate,
       updated,
       beforeUnmount,
-      unmounted
+      unmounted,
     }
 
     let _instance: ComponentInternalInstance | null = null
@@ -320,10 +323,10 @@ describe('directives', () => {
             // argument
             'foo',
             // modifiers
-            { ok: true }
-          ]
+            { ok: true },
+          ],
         ])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -345,22 +348,22 @@ describe('directives', () => {
   // #2298
   it('directive merging on component root', () => {
     const d1 = {
-      mounted: vi.fn()
+      mounted: vi.fn(),
     }
     const d2 = {
-      mounted: vi.fn()
+      mounted: vi.fn(),
     }
     const Comp = {
       render() {
         return withDirectives(h('div'), [[d2]])
-      }
+      },
     }
 
     const App = {
       name: 'App',
       render() {
         return h('div', [withDirectives(h(Comp), [[d1]])])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -379,11 +382,11 @@ describe('directives', () => {
         return withDirectives(h('p', text.value), [
           [
             {
-              beforeUpdate
-            }
-          ]
+              beforeUpdate,
+            },
+          ],
         ])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -402,7 +405,7 @@ describe('directives', () => {
     const App = defineComponent({
       setup(_, { expose }) {
         expose({
-          msg: 'Test'
+          msg: 'Test',
         })
 
         return () =>
@@ -411,11 +414,11 @@ describe('directives', () => {
               {
                 mounted(el, { instance }) {
                   res = (instance as any).msg as string
-                }
-              }
-            ]
+                },
+              },
+            ],
           ])
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -424,14 +427,14 @@ describe('directives', () => {
 
   test('should not throw with unknown directive', async () => {
     const d1 = {
-      mounted: vi.fn()
+      mounted: vi.fn(),
     }
     const App = {
       name: 'App',
       render() {
         // simulates the code generated on an unknown directive
         return withDirectives(h('div'), [[undefined], [d1]])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
diff --git a/packages/runtime-core/__tests__/errorHandling.spec.ts b/packages/runtime-core/__tests__/errorHandling.spec.ts
index ebbfeb1d0..0cd3efa58 100644
--- a/packages/runtime-core/__tests__/errorHandling.spec.ts
+++ b/packages/runtime-core/__tests__/errorHandling.spec.ts
@@ -1,16 +1,19 @@
 import {
-  onMounted,
-  onErrorCaptured,
-  render,
-  h,
-  nodeOps,
-  watch,
-  ref,
-  nextTick,
+  type VNode,
+  computed,
+  createApp,
   defineComponent,
+  h,
+  nextTick,
+  nodeOps,
+  onErrorCaptured,
+  onMounted,
+  ref,
+  render,
+  watch,
   watchEffect,
-  createApp
 } from '@vue/runtime-test'
+import { ErrorCodes, ErrorTypeStrings } from '../src/errorHandling'
 
 describe('error handling', () => {
   test('propagation', () => {
@@ -24,7 +27,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -33,7 +36,7 @@ describe('error handling', () => {
           fn(err, info, 'child')
         })
         return () => h(GrandChild)
-      }
+      },
     }
 
     const GrandChild = {
@@ -42,7 +45,7 @@ describe('error handling', () => {
           throw err
         })
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -62,7 +65,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -72,7 +75,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(GrandChild)
-      }
+      },
     }
 
     const GrandChild = {
@@ -81,7 +84,7 @@ describe('error handling', () => {
           throw err
         })
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -100,7 +103,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -109,7 +112,7 @@ describe('error handling', () => {
           throw err
         })
       },
-      render() {}
+      render() {},
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -130,7 +133,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -139,7 +142,7 @@ describe('error handling', () => {
           throw err2
         })
         return () => h(GrandChild)
-      }
+      },
     }
 
     const GrandChild = {
@@ -148,7 +151,7 @@ describe('error handling', () => {
           throw err
         })
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -168,14 +171,14 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
       setup() {
         throw err
       },
-      render() {}
+      render() {},
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -195,21 +198,21 @@ describe('error handling', () => {
           return false
         })
         return () => [h(Child1), h(Child2)]
-      }
+      },
     }
 
     const Child1 = {
       created() {
         throw err
       },
-      render() {}
+      render() {},
     }
 
     const Child2 = {
       beforeCreate() {
         throw err
       },
-      render() {}
+      render() {},
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -228,7 +231,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -236,7 +239,7 @@ describe('error handling', () => {
         return () => {
           throw err
         }
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -257,7 +260,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = defineComponent(() => () => h('div', { ref }))
@@ -277,7 +280,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -286,7 +289,7 @@ describe('error handling', () => {
           throw err
         })
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -304,7 +307,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -313,10 +316,10 @@ describe('error handling', () => {
           () => {
             throw err
           },
-          () => {}
+          () => {},
         )
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -334,7 +337,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const count = ref(0)
@@ -344,10 +347,10 @@ describe('error handling', () => {
           () => count.value,
           () => {
             throw err
-          }
+          },
         )
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -369,7 +372,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -381,7 +384,7 @@ describe('error handling', () => {
           })
         })
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -405,16 +408,16 @@ describe('error handling', () => {
           h(Child, {
             onFoo: () => {
               throw err
-            }
+            },
           })
-      }
+      },
     }
 
     const Child = {
       setup(props: any, { emit }: any) {
         emit('foo')
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -435,9 +438,9 @@ describe('error handling', () => {
           h(Child, {
             async onFoo() {
               throw err
-            }
+            },
           })
-      }
+      },
     }
 
     const Child = {
@@ -445,7 +448,7 @@ describe('error handling', () => {
       setup(props: any, { emit }: any) {
         emit('foo')
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -473,17 +476,17 @@ describe('error handling', () => {
           h(Child, {
             onFoo: [
               createAsyncHandler(Promise.reject(err)),
-              createAsyncHandler(Promise.resolve(1))
-            ]
+              createAsyncHandler(Promise.resolve(1)),
+            ],
           })
-      }
+      },
     }
 
     const Child = {
       setup(props: any, { emit }: any) {
         emit('foo')
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -511,14 +514,14 @@ describe('error handling', () => {
           fn(err, info)
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
       setup() {
         throw err
       },
-      render() {}
+      render() {},
     }
 
     let caughtError
@@ -529,7 +532,7 @@ describe('error handling', () => {
     }
     expect(fn).toHaveBeenCalledWith(err, 'setup function')
     expect(
-      `Unhandled error during execution of setup function`
+      `Unhandled error during execution of setup function`,
     ).toHaveBeenWarned()
     expect(caughtError).toBe(err)
 
@@ -553,14 +556,14 @@ describe('error handling', () => {
           () => {
             throw error1
           },
-          { immediate: true }
+          { immediate: true },
         )
         watch(
           count,
           async () => {
             throw error2
           },
-          { immediate: true }
+          { immediate: true },
         )
         watchEffect(() => {
           throw error3
@@ -569,7 +572,7 @@ describe('error handling', () => {
           throw error4
         })
       },
-      render() {}
+      render() {},
     })
 
     app.config.errorHandler = handler
@@ -583,5 +586,126 @@ describe('error handling', () => {
     expect(handler).toHaveBeenCalledTimes(4)
   })
 
+  // #9574
+  test('should pause tracking in error handler', async () => {
+    const error = new Error('error')
+    const x = ref(Math.random())
+
+    const handler = vi.fn(() => {
+      x.value
+      x.value = Math.random()
+    })
+
+    const app = createApp({
+      setup() {
+        return () => {
+          throw error
+        }
+      },
+    })
+
+    app.config.errorHandler = handler
+    app.mount(nodeOps.createElement('div'))
+
+    await nextTick()
+    expect(handler).toHaveBeenCalledWith(error, {}, 'render function')
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  test('errors in scheduler job with owner instance should be caught', async () => {
+    let vnode: VNode
+    const x = ref(0)
+    const app = createApp({
+      render() {
+        return (vnode = vnode || h('div', x.value))
+      },
+    })
+
+    app.config.errorHandler = vi.fn()
+    app.mount(nodeOps.createElement('div'))
+
+    const error = new Error('error')
+    Object.defineProperty(vnode!, 'el', {
+      get() {
+        throw error
+      },
+    })
+
+    x.value++
+    await nextTick()
+    expect(app.config.errorHandler).toHaveBeenCalledWith(
+      error,
+      {},
+      ErrorTypeStrings[ErrorCodes.COMPONENT_UPDATE],
+    )
+  })
+
+  // #11286
+  test('handle error in computed', async () => {
+    const err = new Error()
+    const handler = vi.fn()
+
+    const count = ref(1)
+    const x = computed(() => {
+      if (count.value === 2) throw err
+      return count.value + 1
+    })
+
+    const app = createApp({
+      setup() {
+        return () => x.value
+      },
+    })
+
+    app.config.errorHandler = handler
+    app.mount(nodeOps.createElement('div'))
+
+    count.value = 2
+
+    await nextTick()
+    expect(handler).toHaveBeenCalledWith(
+      err,
+      {},
+      ErrorTypeStrings[ErrorCodes.COMPONENT_UPDATE],
+    )
+  })
+
+  // #11624
+  test('in computed that is used as key for watch', async () => {
+    const err = new Error('foo')
+    const fn = vi.fn()
+    const trigger = ref(false)
+
+    const Comp = {
+      setup() {
+        onErrorCaptured((err, instance, info) => {
+          fn(err, info)
+          return false
+        })
+        return () => h(Child)
+      },
+    }
+
+    const Child = {
+      setup() {
+        const foo = computed(() => {
+          if (trigger.value) throw err
+          return 1
+        })
+        watch(foo, () => {})
+        return () => null
+      },
+    }
+
+    render(h(Comp), nodeOps.createElement('div'))
+
+    trigger.value = true
+    await nextTick()
+    expect(fn).toHaveBeenCalledWith(
+      err,
+      ErrorTypeStrings[ErrorCodes.COMPONENT_UPDATE],
+    )
+  })
+
   // native event handler handling should be tested in respective renderers
 })
diff --git a/packages/runtime-core/__tests__/h.spec.ts b/packages/runtime-core/__tests__/h.spec.ts
index 21eab3c56..ee2dabe2f 100644
--- a/packages/runtime-core/__tests__/h.spec.ts
+++ b/packages/runtime-core/__tests__/h.spec.ts
@@ -1,6 +1,6 @@
 import { h } from '../src/h'
 import { createVNode } from '../src/vnode'
-import { RawSlots } from '../src/componentSlots'
+import type { RawSlots } from '../src/componentSlots'
 
 // Since h is a thin layer on top of createVNode, we are only testing its
 // own logic here. Details of vnode creation is tested in vnode.spec.ts.
@@ -11,7 +11,7 @@ describe('renderer: h', () => {
 
   test('type + props', () => {
     expect(h('div', { id: 'foo' })).toMatchObject(
-      createVNode('div', { id: 'foo' })
+      createVNode('div', { id: 'foo' }),
     )
   })
 
@@ -37,12 +37,12 @@ describe('renderer: h', () => {
     expect(h('div', {}, slots)).toMatchObject(createVNode('div', {}, slots))
     const Component = { template: '<br />' }
     expect(h(Component, {}, slots)).toMatchObject(
-      createVNode(Component, {}, slots)
+      createVNode(Component, {}, slots),
     )
     // default slot
     const slot = () => {}
     expect(h(Component, {}, slot)).toMatchObject(
-      createVNode(Component, {}, slot)
+      createVNode(Component, {}, slot),
     )
     // single vnode
     const vnode = h('div')
@@ -56,12 +56,12 @@ describe('renderer: h', () => {
     const slot = () => {}
     expect(
       h(Component, null, {
-        foo: slot
-      })
+        foo: slot,
+      }),
     ).toMatchObject(
       createVNode(Component, null, {
-        foo: slot
-      })
+        foo: slot,
+      }),
     )
   })
 
@@ -69,15 +69,15 @@ describe('renderer: h', () => {
   // note this signature is not supported in types; it's purely for usage with
   // compiled code.
   test('support variadic children', () => {
-    // @ts-ignore
+    // @ts-expect-error
     const vnode = h('div', null, h('span'), h('span'))
     expect(vnode.children).toMatchObject([
       {
-        type: 'span'
+        type: 'span',
       },
       {
-        type: 'span'
-      }
+        type: 'span',
+      },
     ])
   })
 })
diff --git a/packages/runtime-core/__tests__/helpers/createSlots.spec.ts b/packages/runtime-core/__tests__/helpers/createSlots.spec.ts
index 2af24380c..85018854e 100644
--- a/packages/runtime-core/__tests__/helpers/createSlots.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/createSlots.spec.ts
@@ -1,4 +1,4 @@
-import { Slot } from '../../src/componentSlots'
+import type { Slot } from '../../src/componentSlots'
 import { createSlots } from '../../src/helpers/createSlots'
 
 describe('createSlot', () => {
@@ -22,7 +22,7 @@ describe('createSlot', () => {
 
     const actual = createSlots(record, dynamicSlot)
     const ret = actual.descriptor()
-    // @ts-ignore
+    // @ts-expect-error
     expect(ret.key).toBe('1')
   })
 
@@ -37,7 +37,7 @@ describe('createSlot', () => {
   it('should add all slots to the record', () => {
     const dynamicSlot = [
       { name: 'descriptor', fn: slot },
-      { name: 'descriptor2', fn: slot }
+      { name: 'descriptor2', fn: slot },
     ]
 
     const actual = createSlots(record, dynamicSlot)
@@ -48,7 +48,7 @@ describe('createSlot', () => {
   it('should add slot to the record when given slot is an array', () => {
     const dynamicSlot = [
       { name: 'descriptor', fn: slot },
-      [{ name: 'descriptor2', fn: slot }]
+      [{ name: 'descriptor2', fn: slot }],
     ]
 
     const actual = createSlots(record, dynamicSlot)
@@ -61,8 +61,8 @@ describe('createSlot', () => {
       { name: 'descriptor', fn: slot },
       [
         { name: 'descriptor2', fn: slot },
-        { name: 'descriptor3', fn: slot }
-      ]
+        { name: 'descriptor3', fn: slot },
+      ],
     ]
 
     const actual = createSlots(record, dynamicSlot)
@@ -70,7 +70,7 @@ describe('createSlot', () => {
     expect(actual).toEqual({
       descriptor: slot,
       descriptor2: slot,
-      descriptor3: slot
+      descriptor3: slot,
     })
   })
 })
diff --git a/packages/runtime-core/__tests__/helpers/renderList.spec.ts b/packages/runtime-core/__tests__/helpers/renderList.spec.ts
index ae487b6be..8dd04ff8a 100644
--- a/packages/runtime-core/__tests__/helpers/renderList.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/renderList.spec.ts
@@ -1,15 +1,16 @@
+import { isReactive, reactive, shallowReactive } from '../../src/index'
 import { renderList } from '../../src/helpers/renderList'
 
 describe('renderList', () => {
   it('should render items in an array', () => {
     expect(
-      renderList(['1', '2', '3'], (item, index) => `node ${index}: ${item}`)
+      renderList(['1', '2', '3'], (item, index) => `node ${index}: ${item}`),
     ).toEqual(['node 0: 1', 'node 1: 2', 'node 2: 3'])
   })
 
   it('should render characters of a string', () => {
     expect(
-      renderList('123', (item, index) => `node ${index}: ${item}`)
+      renderList('123', (item, index) => `node ${index}: ${item}`),
     ).toEqual(['node 0: 1', 'node 1: 2', 'node 2: 3'])
   })
 
@@ -17,7 +18,7 @@ describe('renderList', () => {
     expect(renderList(3, (item, index) => `node ${index}: ${item}`)).toEqual([
       'node 0: 1',
       'node 1: 2',
-      'node 2: 3'
+      'node 2: 3',
     ])
   })
 
@@ -26,7 +27,7 @@ describe('renderList', () => {
       renderList(3.1, () => {})
     } catch (e) {}
     expect(
-      `The v-for range expect an integer value but got 3.1.`
+      `The v-for range expect an integer value but got 3.1.`,
     ).toHaveBeenWarned()
   })
 
@@ -34,8 +35,8 @@ describe('renderList', () => {
     expect(
       renderList(
         { a: 1, b: 2, c: 3 },
-        (item, key, index) => `node ${index}/${key}: ${item}`
-      )
+        (item, key, index) => `node ${index}/${key}: ${item}`,
+      ),
     ).toEqual(['node 0/a: 1', 'node 1/b: 2', 'node 2/c: 3'])
   })
 
@@ -47,13 +48,21 @@ describe('renderList', () => {
     }
 
     expect(
-      renderList(iterable(), (item, index) => `node ${index}: ${item}`)
+      renderList(iterable(), (item, index) => `node ${index}: ${item}`),
     ).toEqual(['node 0: 1', 'node 1: 2', 'node 2: 3'])
   })
 
   it('should return empty array when source is undefined', () => {
     expect(
-      renderList(undefined, (item, index) => `node ${index}: ${item}`)
+      renderList(undefined, (item, index) => `node ${index}: ${item}`),
     ).toEqual([])
   })
+
+  it('should render items in a reactive array correctly', () => {
+    const reactiveArray = reactive([{ foo: 1 }])
+    expect(renderList(reactiveArray, isReactive)).toEqual([true])
+
+    const shallowReactiveArray = shallowReactive([{ foo: 1 }])
+    expect(renderList(shallowReactiveArray, isReactive)).toEqual([false])
+  })
 })
diff --git a/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts b/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts
index 4e661c406..c4ae077ba 100644
--- a/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts
@@ -1,13 +1,13 @@
 import { renderSlot } from '../../src/helpers/renderSlot'
 import {
-  h,
-  withCtx,
-  createVNode,
-  openBlock,
-  createBlock,
   Fragment,
+  type Slot,
+  createBlock,
   createCommentVNode,
-  Slot
+  createVNode,
+  h,
+  openBlock,
+  withCtx,
 } from '../../src'
 import { PatchFlags } from '@vue/shared'
 import { setCurrentRenderingInstance } from '../../src/componentRenderContext'
@@ -25,14 +25,18 @@ describe('renderSlot', () => {
     let child
     const vnode = renderSlot(
       { default: () => [(child = h('child'))] },
-      'default'
+      'default',
+      { key: 'foo' },
     )
     expect(vnode.children).toEqual([child])
+    expect(vnode.key).toBe('foo')
   })
 
   it('should render slot fallback', () => {
-    const vnode = renderSlot({}, 'default', {}, () => ['fallback'])
+    const vnode = renderSlot({}, 'default', { key: 'foo' }, () => ['fallback'])
     expect(vnode.children).toEqual(['fallback'])
+    // should attach fallback key postfix
+    expect(vnode.key).toBe('foo_fb')
   })
 
   it('should warn render ssr slot', () => {
@@ -47,7 +51,7 @@ describe('renderSlot', () => {
         return [createVNode('div', null, 'foo', PatchFlags.TEXT)]
       },
       // mock instance
-      { type: {}, appContext: {} } as any
+      { type: {}, appContext: {} } as any,
     ) as Slot
 
     // manual invocation should not track
@@ -67,7 +71,7 @@ describe('renderSlot', () => {
         { default: () => [createCommentVNode('foo')] },
         'default',
         undefined,
-        () => [(fallback = h('fallback'))]
+        () => [(fallback = h('fallback'))],
       )
       expect(vnode.children).toEqual([fallback])
       expect(vnode.patchFlag).toBe(PatchFlags.BAIL)
@@ -79,7 +83,7 @@ describe('renderSlot', () => {
         { default: () => [renderSlot({}, 'foo')] },
         'default',
         undefined,
-        () => [(fallback = h('fallback'))]
+        () => [(fallback = h('fallback'))],
       )
       expect(vnode.children).toEqual([fallback])
       expect(vnode.patchFlag).toBe(PatchFlags.BAIL)
diff --git a/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts b/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
index fdcde4639..d77c6034b 100644
--- a/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
@@ -1,16 +1,16 @@
 import {
+  Comment,
+  type Component,
+  type Directive,
+  type VNode,
   createApp,
+  createVNode,
+  h,
   nodeOps,
   resolveComponent,
   resolveDirective,
-  Component,
-  Directive,
   resolveDynamicComponent,
-  h,
   serializeInner,
-  createVNode,
-  Comment,
-  VNode
 } from '@vue/runtime-test'
 
 describe('resolveAssets', () => {
@@ -29,10 +29,10 @@ describe('resolveAssets', () => {
 
     const Root = {
       components: {
-        FooBar: FooBar
+        FooBar: FooBar,
       },
       directives: {
-        BarBaz: BarBaz
+        BarBaz: BarBaz,
       },
       setup() {
         return () => {
@@ -48,7 +48,7 @@ describe('resolveAssets', () => {
           component4 = resolveComponent('foo-bar')!
           directive4 = resolveDirective('bar-baz')!
         }
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -76,7 +76,7 @@ describe('resolveAssets', () => {
       name: 'Root',
       components: {
         Foo,
-        Root: Foo
+        Root: Foo,
       },
       setup() {
         return () => {
@@ -84,7 +84,7 @@ describe('resolveAssets', () => {
           component2 = resolveComponent('Foo', true)
           component3 = resolveComponent('Bar', true)
         }
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -100,12 +100,12 @@ describe('resolveAssets', () => {
     test('used outside render() or setup()', () => {
       resolveComponent('foo')
       expect(
-        'resolveComponent can only be used in render() or setup().'
+        'resolveComponent can only be used in render() or setup().',
       ).toHaveBeenWarned()
 
       resolveDirective('foo')
       expect(
-        'resolveDirective can only be used in render() or setup().'
+        'resolveDirective can only be used in render() or setup().',
       ).toHaveBeenWarned()
     })
 
@@ -115,7 +115,7 @@ describe('resolveAssets', () => {
           resolveComponent('foo')
           resolveDirective('bar')
           return () => null
-        }
+        },
       }
 
       const app = createApp(Root)
@@ -129,7 +129,7 @@ describe('resolveAssets', () => {
       const dynamicComponents = {
         foo: () => 'foo',
         bar: () => 'bar',
-        baz: { render: () => 'baz' }
+        baz: { render: () => 'baz' },
       }
       let foo, bar, baz // dynamic components
       let dynamicVNode: VNode
@@ -137,7 +137,7 @@ describe('resolveAssets', () => {
       const Child = {
         render(this: any) {
           return this.$slots.default()
-        }
+        },
       }
 
       const Root = {
@@ -152,7 +152,7 @@ describe('resolveAssets', () => {
               baz = resolveDynamicComponent(dynamicComponents.baz) // <component :is="baz"/>, object
             })
           }
-        }
+        },
       }
 
       const app = createApp(Root)
@@ -170,10 +170,10 @@ describe('resolveAssets', () => {
         setup() {
           return () => {
             return createVNode(resolveDynamicComponent('div') as string, null, {
-              default: () => 'hello'
+              default: () => 'hello',
             })
           }
-        }
+        },
       }
 
       const app = createApp(Root)
@@ -198,13 +198,13 @@ describe('resolveAssets', () => {
 
     const Base = {
       components: {
-        FooBar: FooBar
-      }
+        FooBar: FooBar,
+      },
     }
     const Mixin = {
       directives: {
-        BarBaz: BarBaz
-      }
+        BarBaz: BarBaz,
+      },
     }
 
     const Root = {
@@ -224,7 +224,7 @@ describe('resolveAssets', () => {
           component4 = resolveComponent('foo-bar')!
           directive4 = resolveDirective('bar-baz')!
         }
-      }
+      },
     }
 
     const app = createApp(Root)
diff --git a/packages/runtime-core/__tests__/helpers/toHandlers.spec.ts b/packages/runtime-core/__tests__/helpers/toHandlers.spec.ts
index 3dc5bb517..f1e95e516 100644
--- a/packages/runtime-core/__tests__/helpers/toHandlers.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/toHandlers.spec.ts
@@ -6,7 +6,7 @@ describe('toHandlers', () => {
     toHandlers(undefined as any)
 
     expect(
-      'v-on with no argument expects an object value.'
+      'v-on with no argument expects an object value.',
     ).toHaveBeenWarnedTimes(2)
   })
 
@@ -16,7 +16,7 @@ describe('toHandlers', () => {
 
     expect(toHandlers({ input, change })).toStrictEqual({
       onInput: input,
-      onChange: change
+      onChange: change,
     })
   })
 })
diff --git a/packages/runtime-core/__tests__/helpers/useId.spec.ts b/packages/runtime-core/__tests__/helpers/useId.spec.ts
new file mode 100644
index 000000000..d71260cda
--- /dev/null
+++ b/packages/runtime-core/__tests__/helpers/useId.spec.ts
@@ -0,0 +1,288 @@
+/**
+ * @vitest-environment jsdom
+ */
+import {
+  type App,
+  Suspense,
+  createApp,
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  useId,
+} from 'vue'
+import { renderToString } from '@vue/server-renderer'
+
+type FactoryRes = [App, Promise<any>[]]
+type TestCaseFactory = () => FactoryRes | Promise<FactoryRes>
+
+async function runOnClient(factory: TestCaseFactory) {
+  const [app, deps] = await factory()
+  const root = document.createElement('div')
+  app.mount(root)
+  await Promise.all(deps)
+  await promiseWithDelay(null, 0)
+  return root.innerHTML
+}
+
+async function runOnServer(factory: TestCaseFactory) {
+  const [app, _] = await factory()
+  return (await renderToString(app))
+    .replace(/<!--[\[\]]-->/g, '') // remove fragment wrappers
+    .trim()
+}
+
+async function getOutput(factory: TestCaseFactory) {
+  const clientResult = await runOnClient(factory)
+  const serverResult = await runOnServer(factory)
+  expect(serverResult).toBe(clientResult)
+  return clientResult
+}
+
+function promiseWithDelay(res: any, delay: number) {
+  return new Promise<any>(r => {
+    setTimeout(() => r(res), delay)
+  })
+}
+
+const BasicComponentWithUseId = defineComponent({
+  setup() {
+    const id1 = useId()
+    const id2 = useId()
+    return () => [id1, ' ', id2]
+  },
+})
+
+describe('useId', () => {
+  test('basic', async () => {
+    expect(
+      await getOutput(() => {
+        const app = createApp(BasicComponentWithUseId)
+        return [app, []]
+      }),
+    ).toBe('v-0 v-1')
+  })
+
+  test('with config.idPrefix', async () => {
+    expect(
+      await getOutput(() => {
+        const app = createApp(BasicComponentWithUseId)
+        app.config.idPrefix = 'foo'
+        return [app, []]
+      }),
+    ).toBe('foo-0 foo-1')
+  })
+
+  test('async component', async () => {
+    const factory = (
+      delay1: number,
+      delay2: number,
+    ): ReturnType<TestCaseFactory> => {
+      const p1 = promiseWithDelay(BasicComponentWithUseId, delay1)
+      const p2 = promiseWithDelay(BasicComponentWithUseId, delay2)
+      const AsyncOne = defineAsyncComponent(() => p1)
+      const AsyncTwo = defineAsyncComponent(() => p2)
+      const app = createApp({
+        setup() {
+          const id1 = useId()
+          const id2 = useId()
+          return () => [id1, ' ', id2, ' ', h(AsyncOne), ' ', h(AsyncTwo)]
+        },
+      })
+      return [app, [p1, p2]]
+    }
+
+    const expected =
+      'v-0 v-1 ' + // root
+      'v-0-0 v-0-1 ' + // inside first async subtree
+      'v-1-0 v-1-1' // inside second async subtree
+    // assert different async resolution order does not affect id stable-ness
+    expect(await getOutput(() => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
+  })
+
+  test('serverPrefetch', async () => {
+    const factory = (
+      delay1: number,
+      delay2: number,
+    ): ReturnType<TestCaseFactory> => {
+      const p1 = promiseWithDelay(null, delay1)
+      const p2 = promiseWithDelay(null, delay2)
+
+      const SPOne = defineComponent({
+        async serverPrefetch() {
+          await p1
+        },
+        render() {
+          return h(BasicComponentWithUseId)
+        },
+      })
+
+      const SPTwo = defineComponent({
+        async serverPrefetch() {
+          await p2
+        },
+        render() {
+          return h(BasicComponentWithUseId)
+        },
+      })
+
+      const app = createApp({
+        setup() {
+          const id1 = useId()
+          const id2 = useId()
+          return () => [id1, ' ', id2, ' ', h(SPOne), ' ', h(SPTwo)]
+        },
+      })
+      return [app, [p1, p2]]
+    }
+
+    const expected =
+      'v-0 v-1 ' + // root
+      'v-0-0 v-0-1 ' + // inside first async subtree
+      'v-1-0 v-1-1' // inside second async subtree
+    // assert different async resolution order does not affect id stable-ness
+    expect(await getOutput(() => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
+  })
+
+  test('async setup()', async () => {
+    const factory = (
+      delay1: number,
+      delay2: number,
+    ): ReturnType<TestCaseFactory> => {
+      const p1 = promiseWithDelay(null, delay1)
+      const p2 = promiseWithDelay(null, delay2)
+
+      const ASOne = defineComponent({
+        async setup() {
+          await p1
+          return {}
+        },
+        render() {
+          return h(BasicComponentWithUseId)
+        },
+      })
+
+      const ASTwo = defineComponent({
+        async setup() {
+          await p2
+          return {}
+        },
+        render() {
+          return h(BasicComponentWithUseId)
+        },
+      })
+
+      const app = createApp({
+        setup() {
+          const id1 = useId()
+          const id2 = useId()
+          return () =>
+            h(Suspense, null, {
+              default: h('div', [id1, ' ', id2, ' ', h(ASOne), ' ', h(ASTwo)]),
+            })
+        },
+      })
+      return [app, [p1, p2]]
+    }
+
+    const expected =
+      '<div>' +
+      'v-0 v-1 ' + // root
+      'v-0-0 v-0-1 ' + // inside first async subtree
+      'v-1-0 v-1-1' + // inside second async subtree
+      '</div>'
+    // assert different async resolution order does not affect id stable-ness
+    expect(await getOutput(() => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
+  })
+
+  test('deep nested', async () => {
+    const factory = (): ReturnType<TestCaseFactory> => {
+      const p = Promise.resolve()
+      const One = {
+        async setup() {
+          const id = useId()
+          await p
+          return () => [id, ' ', h(Two), ' ', h(Three)]
+        },
+      }
+      const Two = {
+        async setup() {
+          const id = useId()
+          await p
+          return () => [id, ' ', h(Three), ' ', h(Three)]
+        },
+      }
+      const Three = {
+        async setup() {
+          const id = useId()
+          return () => id
+        },
+      }
+      const app = createApp({
+        setup() {
+          return () =>
+            h(Suspense, null, {
+              default: h(One),
+            })
+        },
+      })
+      return [app, [p]]
+    }
+
+    const expected =
+      'v-0 ' + // One
+      'v-0-0 ' + // Two
+      'v-0-0-0 v-0-0-1 ' + // Three + Three nested in Two
+      'v-0-1' // Three after Two
+    // assert different async resolution order does not affect id stable-ness
+    expect(await getOutput(() => factory())).toBe(expected)
+    expect(await getOutput(() => factory())).toBe(expected)
+  })
+
+  test('async component inside async setup, already resolved', async () => {
+    const factory = async (
+      delay1: number,
+      delay2: number,
+    ): Promise<FactoryRes> => {
+      const p1 = promiseWithDelay(null, delay1)
+      const p2 = promiseWithDelay(BasicComponentWithUseId, delay2)
+      const AsyncInner = defineAsyncComponent(() => p2)
+
+      const AsyncSetup = defineComponent({
+        async setup() {
+          await p1
+          return {}
+        },
+        render() {
+          return h(AsyncInner)
+        },
+      })
+
+      const app = createApp({
+        setup() {
+          const id1 = useId()
+          const id2 = useId()
+          return () =>
+            h(Suspense, null, {
+              default: h('div', [id1, ' ', id2, ' ', h(AsyncSetup)]),
+            })
+        },
+      })
+
+      // the async component may have already been resolved
+      await AsyncInner.__asyncLoader()
+      return [app, [p1, p2]]
+    }
+
+    const expected =
+      '<div>' +
+      'v-0 v-1 ' + // root
+      'v-0-0-0 v-0-0-1' + // async component inside async setup
+      '</div>'
+    // assert different async resolution order does not affect id stable-ness
+    expect(await getOutput(async () => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
+  })
+})
diff --git a/packages/runtime-core/__tests__/helpers/useModel.spec.ts b/packages/runtime-core/__tests__/helpers/useModel.spec.ts
new file mode 100644
index 000000000..3c724b0ba
--- /dev/null
+++ b/packages/runtime-core/__tests__/helpers/useModel.spec.ts
@@ -0,0 +1,752 @@
+import {
+  Fragment,
+  type Ref,
+  type TestElement,
+  createApp,
+  createBlock,
+  createElementBlock,
+  createElementVNode,
+  createVNode,
+  defineComponent,
+  h,
+  nextTick,
+  nodeOps,
+  openBlock,
+  ref,
+  render,
+  serializeInner,
+  watch,
+} from '@vue/runtime-test'
+import { useModel } from '../../src/helpers/useModel'
+
+describe('useModel', () => {
+  test('basic', async () => {
+    let foo: any
+    const update = () => {
+      foo.value = 'bar'
+    }
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['modelValue'],
+      emits: ['update:modelValue'],
+      setup(props) {
+        foo = useModel(props, 'modelValue')
+        return () => {
+          compRender()
+          return foo.value
+        }
+      },
+    })
+
+    const msg = ref('')
+    const setValue = vi.fn(v => (msg.value = v))
+    const root = nodeOps.createElement('div')
+    createApp(() =>
+      h(Comp, {
+        modelValue: msg.value,
+        'onUpdate:modelValue': setValue,
+      }),
+    ).mount(root)
+
+    expect(foo.value).toBe('')
+    expect(msg.value).toBe('')
+    expect(setValue).not.toBeCalled()
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('')
+
+    // update from child
+    update()
+
+    await nextTick()
+    expect(msg.value).toBe('bar')
+    expect(foo.value).toBe('bar')
+    expect(setValue).toBeCalledTimes(1)
+    expect(compRender).toBeCalledTimes(2)
+    expect(serializeInner(root)).toBe('bar')
+
+    // update from parent
+    msg.value = 'qux'
+    expect(msg.value).toBe('qux')
+
+    await nextTick()
+    expect(msg.value).toBe('qux')
+    expect(foo.value).toBe('qux')
+    expect(setValue).toBeCalledTimes(1)
+    expect(compRender).toBeCalledTimes(3)
+    expect(serializeInner(root)).toBe('qux')
+  })
+
+  test('without parent value (local mutation)', async () => {
+    let foo: any
+    const update = () => {
+      foo.value = 'bar'
+    }
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['foo'],
+      emits: ['update:foo'],
+      setup(props) {
+        foo = useModel(props, 'foo')
+        return () => {
+          compRender()
+          return foo.value
+        }
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    const updateFoo = vi.fn()
+    render(h(Comp, { 'onUpdate:foo': updateFoo }), root)
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('<!---->')
+
+    expect(foo.value).toBeUndefined()
+    update()
+    // when parent didn't provide value, local mutation is enabled
+    expect(foo.value).toBe('bar')
+
+    await nextTick()
+    expect(updateFoo).toBeCalledTimes(1)
+    expect(compRender).toBeCalledTimes(2)
+    expect(serializeInner(root)).toBe('bar')
+  })
+
+  test('without parent listener (local mutation)', async () => {
+    let foo: any
+    const update = () => {
+      foo.value = 'bar'
+    }
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['foo'],
+      emits: ['update:foo'],
+      setup(props) {
+        foo = useModel(props, 'foo')
+        return () => {
+          compRender()
+          return foo.value
+        }
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    // provide initial value
+    render(h(Comp, { foo: 'initial' }), root)
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('initial')
+
+    expect(foo.value).toBe('initial')
+    update()
+    // when parent didn't provide value, local mutation is enabled
+    expect(foo.value).toBe('bar')
+
+    await nextTick()
+    expect(compRender).toBeCalledTimes(2)
+    expect(serializeInner(root)).toBe('bar')
+  })
+
+  test('kebab-case v-model (should not be local)', async () => {
+    let foo: any
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['fooBar'],
+      emits: ['update:fooBar'],
+      setup(props) {
+        foo = useModel(props, 'fooBar')
+        return () => {
+          compRender()
+          return foo.value
+        }
+      },
+    })
+
+    const updateFooBar = vi.fn()
+    const root = nodeOps.createElement('div')
+    // v-model:foo-bar compiles to foo-bar and onUpdate:fooBar
+    render(
+      h(Comp, { 'foo-bar': 'initial', 'onUpdate:fooBar': updateFooBar }),
+      root,
+    )
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('initial')
+
+    expect(foo.value).toBe('initial')
+    foo.value = 'bar'
+    // should not be using local mode, so nothing should actually change
+    expect(foo.value).toBe('initial')
+
+    await nextTick()
+    expect(compRender).toBeCalledTimes(1)
+    expect(updateFooBar).toBeCalledTimes(1)
+    expect(updateFooBar).toHaveBeenCalledWith('bar')
+    expect(foo.value).toBe('initial')
+    expect(serializeInner(root)).toBe('initial')
+  })
+
+  test('kebab-case update listener (should not be local)', async () => {
+    let foo: any
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['fooBar'],
+      emits: ['update:fooBar'],
+      setup(props) {
+        foo = useModel(props, 'fooBar')
+        return () => {
+          compRender()
+          return foo.value
+        }
+      },
+    })
+
+    const updateFooBar = vi.fn()
+    const root = nodeOps.createElement('div')
+    // The template compiler won't create hyphenated listeners, but it could have been passed manually
+    render(
+      h(Comp, { 'foo-bar': 'initial', 'onUpdate:foo-bar': updateFooBar }),
+      root,
+    )
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('initial')
+
+    expect(foo.value).toBe('initial')
+    foo.value = 'bar'
+    // should not be using local mode, so nothing should actually change
+    expect(foo.value).toBe('initial')
+
+    await nextTick()
+    expect(compRender).toBeCalledTimes(1)
+    expect(updateFooBar).toBeCalledTimes(1)
+    expect(updateFooBar).toHaveBeenCalledWith('bar')
+    expect(foo.value).toBe('initial')
+    expect(serializeInner(root)).toBe('initial')
+  })
+
+  test('default value', async () => {
+    let count: any
+    const inc = () => {
+      count.value++
+    }
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: { count: { default: 0 } },
+      emits: ['update:count'],
+      setup(props) {
+        count = useModel(props, 'count')
+        return () => {
+          compRender()
+          return count.value
+        }
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    const updateCount = vi.fn()
+    render(h(Comp, { 'onUpdate:count': updateCount }), root)
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('0')
+
+    expect(count.value).toBe(0)
+
+    inc()
+    // when parent didn't provide value, local mutation is enabled
+    expect(count.value).toBe(1)
+
+    await nextTick()
+
+    expect(updateCount).toBeCalledTimes(1)
+    expect(compRender).toBeCalledTimes(2)
+    expect(serializeInner(root)).toBe('1')
+  })
+
+  test('parent limiting child value', async () => {
+    let childCount: Ref<number>
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['count'],
+      emits: ['update:count'],
+      setup(props) {
+        childCount = useModel(props, 'count')
+        return () => {
+          compRender()
+          return childCount.value
+        }
+      },
+    })
+
+    const Parent = defineComponent({
+      setup() {
+        const count = ref(0)
+        watch(count, () => {
+          if (count.value < 0) {
+            count.value = 0
+          }
+        })
+        return () =>
+          h(Comp, {
+            count: count.value,
+            'onUpdate:count': val => {
+              count.value = val
+            },
+          })
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe('0')
+
+    // child update
+    childCount!.value = 1
+    // not yet updated
+    expect(childCount!.value).toBe(0)
+
+    await nextTick()
+    expect(childCount!.value).toBe(1)
+    expect(serializeInner(root)).toBe('1')
+
+    // child update to invalid value
+    childCount!.value = -1
+    // not yet updated
+    expect(childCount!.value).toBe(1)
+
+    await nextTick()
+    // limited to 0 by parent
+    expect(childCount!.value).toBe(0)
+    expect(serializeInner(root)).toBe('0')
+  })
+
+  test('has parent value -> no parent value', async () => {
+    let childCount: Ref<number>
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['count'],
+      emits: ['update:count'],
+      setup(props) {
+        childCount = useModel(props, 'count')
+        return () => {
+          compRender()
+          return childCount.value
+        }
+      },
+    })
+
+    const toggle = ref(true)
+    const Parent = defineComponent({
+      setup() {
+        const count = ref(0)
+        return () =>
+          toggle.value
+            ? h(Comp, {
+                count: count.value,
+                'onUpdate:count': val => {
+                  count.value = val
+                },
+              })
+            : h(Comp)
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe('0')
+
+    // child update
+    childCount!.value = 1
+    // not yet updated
+    expect(childCount!.value).toBe(0)
+
+    await nextTick()
+    expect(childCount!.value).toBe(1)
+    expect(serializeInner(root)).toBe('1')
+
+    // parent change
+    toggle.value = false
+
+    await nextTick()
+    // localValue should be reset
+    expect(childCount!.value).toBeUndefined()
+    expect(serializeInner(root)).toBe('<!---->')
+
+    // child local mutation should continue to work
+    childCount!.value = 2
+    expect(childCount!.value).toBe(2)
+
+    await nextTick()
+    expect(serializeInner(root)).toBe('2')
+  })
+
+  // #9838
+  test('pass modelValue to slot (optimized mode) ', async () => {
+    let foo: any
+    const update = () => {
+      foo.value = 'bar'
+    }
+
+    const Comp = {
+      render(this: any) {
+        return this.$slots.default()
+      },
+    }
+
+    const childRender = vi.fn()
+    const slotRender = vi.fn()
+    const Child = defineComponent({
+      props: ['modelValue'],
+      emits: ['update:modelValue'],
+      setup(props) {
+        foo = useModel(props, 'modelValue')
+        return () => {
+          childRender()
+          return (
+            openBlock(),
+            createElementBlock(Fragment, null, [
+              createVNode(Comp, null, {
+                default: () => {
+                  slotRender()
+                  return createElementVNode('div', null, foo.value)
+                },
+                _: 1 /* STABLE */,
+              }),
+            ])
+          )
+        }
+      },
+    })
+
+    const msg = ref('')
+    const setValue = vi.fn(v => (msg.value = v))
+    const root = nodeOps.createElement('div')
+    createApp({
+      render() {
+        return (
+          openBlock(),
+          createBlock(
+            Child,
+            {
+              modelValue: msg.value,
+              'onUpdate:modelValue': setValue,
+            },
+            null,
+            8 /* PROPS */,
+            ['modelValue'],
+          )
+        )
+      },
+    }).mount(root)
+
+    expect(foo.value).toBe('')
+    expect(msg.value).toBe('')
+    expect(setValue).not.toBeCalled()
+    expect(childRender).toBeCalledTimes(1)
+    expect(slotRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('<div></div>')
+
+    // update from child
+    update()
+
+    await nextTick()
+    expect(msg.value).toBe('bar')
+    expect(foo.value).toBe('bar')
+    expect(setValue).toBeCalledTimes(1)
+    expect(childRender).toBeCalledTimes(2)
+    expect(slotRender).toBeCalledTimes(2)
+    expect(serializeInner(root)).toBe('<div>bar</div>')
+  })
+
+  test('with modifiers & transformers', async () => {
+    let childMsg: Ref<string>
+    let childModifiers: Record<string, true | undefined>
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['msg', 'msgModifiers'],
+      emits: ['update:msg'],
+      setup(props) {
+        ;[childMsg, childModifiers] = useModel(props, 'msg', {
+          get(val) {
+            return val.toLowerCase()
+          },
+          set(val) {
+            if (childModifiers.upper) {
+              return val.toUpperCase()
+            }
+          },
+        })
+        return () => {
+          compRender()
+          return childMsg.value
+        }
+      },
+    })
+
+    const msg = ref('HI')
+    const Parent = defineComponent({
+      setup() {
+        return () =>
+          h(Comp, {
+            msg: msg.value,
+            msgModifiers: { upper: true },
+            'onUpdate:msg': val => {
+              msg.value = val
+            },
+          })
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+
+    // should be lowered
+    expect(serializeInner(root)).toBe('hi')
+
+    // child update
+    childMsg!.value = 'Hmm'
+
+    await nextTick()
+    expect(childMsg!.value).toBe('hmm')
+    expect(serializeInner(root)).toBe('hmm')
+    // parent should get uppercase value
+    expect(msg.value).toBe('HMM')
+
+    // parent update
+    msg.value = 'Ughh'
+    await nextTick()
+    expect(serializeInner(root)).toBe('ughh')
+    expect(msg.value).toBe('Ughh')
+
+    // child update again
+    childMsg!.value = 'ughh'
+    await nextTick()
+    expect(msg.value).toBe('UGHH')
+  })
+
+  // #10279
+  test('force local update when setter formats value to the same value', async () => {
+    let childMsg: Ref<string>
+    let childModifiers: Record<string, true | undefined>
+
+    const compRender = vi.fn()
+    const parentRender = vi.fn()
+
+    const Comp = defineComponent({
+      props: ['msg', 'msgModifiers'],
+      emits: ['update:msg'],
+      setup(props) {
+        ;[childMsg, childModifiers] = useModel(props, 'msg', {
+          set(val) {
+            if (childModifiers.number) {
+              return val.replace(/\D+/g, '')
+            }
+          },
+        })
+        return () => {
+          compRender()
+          return h('input', {
+            // simulate how v-model works
+            onVnodeBeforeMount(vnode) {
+              ;(vnode.el as TestElement).props.value = childMsg.value
+            },
+            onVnodeBeforeUpdate(vnode) {
+              ;(vnode.el as TestElement).props.value = childMsg.value
+            },
+            onInput(value: any) {
+              childMsg.value = value
+            },
+          })
+        }
+      },
+    })
+
+    const msg = ref(1)
+    const Parent = defineComponent({
+      setup() {
+        return () => {
+          parentRender()
+          return h(Comp, {
+            msg: msg.value,
+            msgModifiers: { number: true },
+            'onUpdate:msg': val => {
+              msg.value = val
+            },
+          })
+        }
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+
+    expect(parentRender).toHaveBeenCalledTimes(1)
+    expect(compRender).toHaveBeenCalledTimes(1)
+    expect(serializeInner(root)).toBe('<input value=1></input>')
+
+    const input = root.children[0] as TestElement
+
+    // simulate v-model update
+    input.props.onInput((input.props.value = '2'))
+    await nextTick()
+    expect(msg.value).toBe(2)
+    expect(parentRender).toHaveBeenCalledTimes(2)
+    expect(compRender).toHaveBeenCalledTimes(2)
+    expect(serializeInner(root)).toBe('<input value=2></input>')
+
+    input.props.onInput((input.props.value = '2a'))
+    await nextTick()
+    expect(msg.value).toBe(2)
+    expect(parentRender).toHaveBeenCalledTimes(2)
+    // should force local update
+    expect(compRender).toHaveBeenCalledTimes(3)
+    expect(serializeInner(root)).toBe('<input value=2></input>')
+
+    input.props.onInput((input.props.value = '2a'))
+    await nextTick()
+    expect(parentRender).toHaveBeenCalledTimes(2)
+    // should not force local update if set to the same value
+    expect(compRender).toHaveBeenCalledTimes(3)
+  })
+
+  test('set no change value', async () => {
+    let changeChildMsg!: (val: string) => void
+
+    const setValue = vi.fn()
+    const Comp = defineComponent({
+      props: ['msg'],
+      emits: ['update:msg'],
+      setup(props) {
+        const childMsg = useModel(props, 'msg')
+        changeChildMsg = (val: string) => (childMsg.value = val)
+        return () => {
+          return childMsg.value
+        }
+      },
+    })
+
+    const defaultVal = 'defaultVal'
+    const msg = ref(defaultVal)
+    const Parent = defineComponent({
+      setup() {
+        return () =>
+          h(Comp, {
+            msg: msg.value,
+            'onUpdate:msg': val => {
+              msg.value = val
+              setValue()
+            },
+          })
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+
+    expect(setValue).toBeCalledTimes(0)
+
+    changeChildMsg(defaultVal)
+    expect(setValue).toBeCalledTimes(0)
+
+    changeChildMsg('changed')
+    changeChildMsg(defaultVal)
+    expect(setValue).toBeCalledTimes(2)
+    expect(msg.value).toBe(defaultVal)
+  })
+
+  // #11526
+  test('custom getter', () => {
+    let changeChildMsg!: (val: boolean) => void
+    const getter = (value: boolean) => !value
+
+    const Comp = defineComponent({
+      props: ['msg'],
+      emits: ['update:msg'],
+      setup(props) {
+        const childMsg = useModel(props, 'msg', {
+          get: getter,
+          set: value => !value,
+        })
+        changeChildMsg = (val: boolean) => (childMsg.value = val)
+        return () => {
+          return childMsg.value
+        }
+      },
+    })
+
+    const defaultVal = false
+    const msg = ref(defaultVal)
+    const Parent = defineComponent({
+      setup() {
+        return () =>
+          h(Comp, {
+            msg: msg.value,
+            'onUpdate:msg': val => {
+              msg.value = val
+            },
+          })
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+
+    changeChildMsg(!getter(msg.value))
+    expect(msg.value).toBe(true)
+
+    changeChildMsg(!getter(msg.value))
+    expect(msg.value).toBe(false)
+  })
+
+  // #11541
+  test('custom setter', () => {
+    let changeChildMsg!: (val: boolean) => void
+
+    const Comp = defineComponent({
+      props: ['msg'],
+      emits: ['update:msg'],
+      setup(props) {
+        const childMsg = useModel(props, 'msg', {
+          set: value => {
+            if (value === msg.value) {
+              return null
+            } else {
+              return value
+            }
+          },
+        })
+        changeChildMsg = (val: boolean) => (childMsg.value = val)
+        return () => {
+          return childMsg.value
+        }
+      },
+    })
+
+    const defaultVal = false
+    const msg = ref(defaultVal)
+    const Parent = defineComponent({
+      setup() {
+        return () =>
+          h(Comp, {
+            msg: msg.value,
+            'onUpdate:msg': val => {
+              msg.value = val
+            },
+          })
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+
+    changeChildMsg(true)
+    expect(msg.value).toBe(true)
+
+    changeChildMsg(true)
+    expect(msg.value).toBe(null)
+  })
+})
diff --git a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts
new file mode 100644
index 000000000..adc8ed66c
--- /dev/null
+++ b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts
@@ -0,0 +1,128 @@
+import {
+  type ShallowRef,
+  h,
+  nextTick,
+  nodeOps,
+  ref,
+  render,
+  useTemplateRef,
+} from '@vue/runtime-test'
+
+describe('useTemplateRef', () => {
+  test('should work', () => {
+    let tRef
+    const key = 'refKey'
+    const Comp = {
+      setup() {
+        tRef = useTemplateRef(key)
+      },
+      render() {
+        return h('div', { ref: key })
+      },
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(tRef!.value).toBe(root.children[0])
+  })
+
+  test('should be readonly', () => {
+    let tRef
+    const key = 'refKey'
+    const Comp = {
+      setup() {
+        tRef = useTemplateRef(key)
+      },
+      render() {
+        return h('div', { ref: key })
+      },
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+
+    // @ts-expect-error
+    tRef.value = 123
+
+    expect(tRef!.value).toBe(root.children[0])
+    expect('target is readonly').toHaveBeenWarned()
+  })
+
+  test('should be updated for ref of dynamic strings', async () => {
+    let t1, t2
+    const key = ref('t1')
+    const Comp = {
+      setup() {
+        t1 = useTemplateRef<HTMLAnchorElement>('t1')
+        t2 = useTemplateRef('t2')
+      },
+      render() {
+        return h('div', { ref: key.value })
+      },
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+
+    expect(t1!.value).toBe(root.children[0])
+    expect(t2!.value).toBe(null)
+
+    key.value = 't2'
+    await nextTick()
+    expect(t2!.value).toBe(root.children[0])
+    expect(t1!.value).toBe(null)
+  })
+
+  test('should warn on duplicate useTemplateRef', () => {
+    const root = nodeOps.createElement('div')
+    render(
+      h(() => {
+        useTemplateRef('foo')
+        useTemplateRef('foo')
+        return ''
+      }),
+      root,
+    )
+
+    expect(`useTemplateRef('foo') already exists.`).toHaveBeenWarned()
+  })
+
+  // #11795
+  test('should not attempt to set when variable name is same as key', () => {
+    let tRef: ShallowRef
+    const key = 'refKey'
+    const Comp = {
+      setup() {
+        tRef = useTemplateRef('_')
+        return {
+          [key]: tRef,
+        }
+      },
+      render() {
+        return h('div', { ref: key })
+      },
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+
+    expect('target is readonly').not.toHaveBeenWarned()
+    expect(tRef!.value).toBe(null)
+  })
+
+  test('should work when used as direct ref value (compiled in prod mode)', () => {
+    __DEV__ = false
+    try {
+      let foo: ShallowRef
+      const Comp = {
+        setup() {
+          foo = useTemplateRef('foo')
+          return () => h('div', { ref: foo })
+        },
+      }
+      const root = nodeOps.createElement('div')
+      render(h(Comp), root)
+
+      expect('target is readonly').not.toHaveBeenWarned()
+      expect(foo!.value).toBe(root.children[0])
+    } finally {
+      __DEV__ = true
+    }
+  })
+})
diff --git a/packages/runtime-core/__tests__/helpers/withMemo.spec.ts b/packages/runtime-core/__tests__/helpers/withMemo.spec.ts
index 60b5132bd..32f89b1d8 100644
--- a/packages/runtime-core/__tests__/helpers/withMemo.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/withMemo.spec.ts
@@ -4,7 +4,7 @@
 
 // since v-memo really is a compiler + runtime combo feature, we are performing
 // more of an integration test here.
-import { ComponentOptions, createApp, nextTick } from 'vue'
+import { type ComponentOptions, createApp, nextTick } from 'vue'
 
 describe('v-memo', () => {
   function mount(options: ComponentOptions): [HTMLElement, any] {
@@ -17,7 +17,7 @@ describe('v-memo', () => {
   test('on with external array', async () => {
     const [el, vm] = mount({
       template: `<div v-memo="arr">{{ arr[0] }} {{ arr[1] }} {{arr[2] ?? '_' }} ({{c}})</div>{{c}}`,
-      data: () => ({ arr: [0, 0], c: 0 })
+      data: () => ({ arr: [0, 0], c: 0 }),
     })
     expect(el.innerHTML).toBe(`<div>0 0 _ (0)</div>0`)
 
@@ -58,7 +58,7 @@ describe('v-memo', () => {
   test('on normal element', async () => {
     const [el, vm] = mount({
       template: `<div v-memo="[x]">{{ x }} {{ y }}</div>`,
-      data: () => ({ x: 0, y: 0 })
+      data: () => ({ x: 0, y: 0 }),
     })
     expect(el.innerHTML).toBe(`<div>0 0</div>`)
 
@@ -85,9 +85,9 @@ describe('v-memo', () => {
       components: {
         Comp: {
           props: ['x', 'y'],
-          template: `<div>{{x}} {{y}}</div>`
-        }
-      }
+          template: `<div>{{x}} {{y}}</div>`,
+        },
+      },
     })
     expect(el.innerHTML).toBe(`<div>0 0</div>`)
 
@@ -111,7 +111,7 @@ describe('v-memo', () => {
     const [el, vm] = mount({
       template: `<div v-if="ok" v-memo="[x]">{{ x }} {{ y }}</div>
         <div v-else v-memo="[y]">{{ y }} {{ x }}</div>`,
-      data: () => ({ ok: true, x: 0, y: 0 })
+      data: () => ({ ok: true, x: 0, y: 0 }),
     })
     expect(el.innerHTML).toBe(`<div>0 0</div>`)
 
@@ -148,6 +148,17 @@ describe('v-memo', () => {
     // should update
     await nextTick()
     expect(el.innerHTML).toBe(`<div>3 3</div>`)
+
+    vm.ok = true
+    await nextTick()
+    vm.ok = false
+    await nextTick()
+    expect(el.innerHTML).toBe(`<div>3 3</div>`)
+
+    vm.y++
+    // should update
+    await nextTick()
+    expect(el.innerHTML).toBe(`<div>4 3</div>`)
   })
 
   test('on v-for', async () => {
@@ -159,37 +170,37 @@ describe('v-memo', () => {
       data: () => ({
         list: [{ x: 1 }, { x: 2 }, { x: 3 }],
         y: 1,
-        z: 'z'
-      })
+        z: 'z',
+      }),
     })
     expect(el.innerHTML).toBe(
-      `<div>1 yes z</div><div>2 no z</div><div>3 no z</div>`
+      `<div>1 yes z</div><div>2 no z</div><div>3 no z</div>`,
     )
 
     vm.y = 2
     await nextTick()
     expect(el.innerHTML).toBe(
-      `<div>1 no z</div><div>2 yes z</div><div>3 no z</div>`
+      `<div>1 no z</div><div>2 yes z</div><div>3 no z</div>`,
     )
 
     vm.list[0].x = 4
     await nextTick()
     expect(el.innerHTML).toBe(
-      `<div>4 no z</div><div>2 yes z</div><div>3 no z</div>`
+      `<div>4 no z</div><div>2 yes z</div><div>3 no z</div>`,
     )
 
     vm.list[0].x = 5
     vm.y = 5
     await nextTick()
     expect(el.innerHTML).toBe(
-      `<div>5 yes z</div><div>2 no z</div><div>3 no z</div>`
+      `<div>5 yes z</div><div>2 no z</div><div>3 no z</div>`,
     )
 
     vm.z = 'zz'
     await nextTick()
     // should not update
     expect(el.innerHTML).toBe(
-      `<div>5 yes z</div><div>2 no z</div><div>3 no z</div>`
+      `<div>5 yes z</div><div>2 no z</div><div>3 no z</div>`,
     )
   })
 
@@ -199,8 +210,8 @@ describe('v-memo', () => {
           {{count}}
         </div>`,
       data: () => ({
-        count: 0
-      })
+        count: 0,
+      }),
     })
     expect(el.innerHTML).toBe(`<div>0</div><div>0</div><div>0</div>`)
 
@@ -218,7 +229,7 @@ describe('v-memo', () => {
   test('v-memo dependency is NaN should be equal', async () => {
     const [el, vm] = mount({
       template: `<div v-memo="[x]">{{ y }}</div>`,
-      data: () => ({ x: NaN, y: 0 })
+      data: () => ({ x: NaN, y: 0 }),
     })
     expect(el.innerHTML).toBe(`<div>0</div>`)
 
diff --git a/packages/runtime-core/__tests__/hmr.spec.ts b/packages/runtime-core/__tests__/hmr.spec.ts
index a5ec90ad7..3f157d009 100644
--- a/packages/runtime-core/__tests__/hmr.spec.ts
+++ b/packages/runtime-core/__tests__/hmr.spec.ts
@@ -1,17 +1,18 @@
-import { HMRRuntime } from '../src/hmr'
+import type { HMRRuntime } from '../src/hmr'
 import '../src/hmr'
-import { ComponentOptions, InternalRenderFunction } from '../src/component'
+import type { ComponentOptions, InternalRenderFunction } from '../src/component'
 import {
-  render,
-  nodeOps,
+  type TestElement,
   h,
+  nextTick,
+  nodeOps,
+  ref,
+  render,
   serializeInner,
   triggerEvent,
-  TestElement,
-  nextTick
 } from '@vue/runtime-test'
 import * as runtimeTest from '@vue/runtime-test'
-import { registerRuntimeCompiler, createApp } from '@vue/runtime-test'
+import { createApp, registerRuntimeCompiler } from '@vue/runtime-test'
 import { baseCompile } from '@vue/compiler-core'
 
 declare var __VUE_HMR_RUNTIME__: HMRRuntime
@@ -22,12 +23,14 @@ registerRuntimeCompiler(compileToFunction)
 function compileToFunction(template: string) {
   const { code } = baseCompile(template, { hoistStatic: true, hmr: true })
   const render = new Function('Vue', code)(
-    runtimeTest
+    runtimeTest,
   ) as InternalRenderFunction
   render._rc = true // isRuntimeCompiled
   return render
 }
 
+const timeout = (n: number = 0) => new Promise(r => setTimeout(r, n))
+
 describe('hot module replacement', () => {
   test('inject global runtime', () => {
     expect(createRecord).toBeDefined()
@@ -48,7 +51,7 @@ describe('hot module replacement', () => {
 
     const Child: ComponentOptions = {
       __hmrId: childId,
-      render: compileToFunction(`<div><slot/></div>`)
+      render: compileToFunction(`<div><slot/></div>`),
     }
     createRecord(childId, Child)
 
@@ -59,8 +62,8 @@ describe('hot module replacement', () => {
       },
       components: { Child },
       render: compileToFunction(
-        `<div @click="count++">{{ count }}<Child>{{ count }}</Child></div>`
-      )
+        `<div @click="count++">{{ count }}<Child>{{ count }}</Child></div>`,
+      ),
     }
     createRecord(parentId, Parent)
 
@@ -77,8 +80,8 @@ describe('hot module replacement', () => {
     rerender(
       parentId,
       compileToFunction(
-        `<div @click="count++">{{ count }}!<Child>{{ count }}</Child></div>`
-      )
+        `<div @click="count++">{{ count }}!<Child>{{ count }}</Child></div>`,
+      ),
     )
     expect(serializeInner(root)).toBe(`<div>1!<div>1</div></div>`)
 
@@ -86,8 +89,8 @@ describe('hot module replacement', () => {
     rerender(
       parentId,
       compileToFunction(
-        `<div @click="count++">{{ count }}!<Child>{{ count }}!</Child></div>`
-      )
+        `<div @click="count++">{{ count }}!<Child>{{ count }}!</Child></div>`,
+      ),
     )
     expect(serializeInner(root)).toBe(`<div>1!<div>1!</div></div>`)
 
@@ -97,8 +100,8 @@ describe('hot module replacement', () => {
       compileToFunction(
         `<div @click="count++">{{ count }}<span>{{ count }}</span>
         <Child>{{ count }}!</Child>
-      </div>`
-      )
+      </div>`,
+      ),
     )
     expect(serializeInner(root)).toBe(`<div>1<span>1</span><div>1!</div></div>`)
 
@@ -108,8 +111,8 @@ describe('hot module replacement', () => {
       compileToFunction(
         `<div @click="count++">
         <Child><span>{{ count }}</span></Child>
-      </div>`
-      )
+      </div>`,
+      ),
     )
     expect(serializeInner(root)).toBe(`<div><div><span>1</span></div></div>`)
   })
@@ -126,12 +129,12 @@ describe('hot module replacement', () => {
         return { count: 0 }
       },
       unmounted: unmountSpy,
-      render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
+      render: compileToFunction(`<div @click="count++">{{ count }}</div>`),
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
-      render: () => h(Child)
+      render: () => h(Child),
     }
 
     render(h(Parent), root)
@@ -143,7 +146,7 @@ describe('hot module replacement', () => {
         return { count: 1 }
       },
       mounted: mountSpy,
-      render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
+      render: compileToFunction(`<div @click="count++">{{ count }}</div>`),
     })
     await nextTick()
     expect(serializeInner(root)).toBe(`<div>1</div>`)
@@ -166,7 +169,7 @@ describe('hot module replacement', () => {
         return { count: 0 }
       },
       unmounted: unmountSpy,
-      render: compileToFunction(`<div>{{ count }}</div>`)
+      render: compileToFunction(`<div>{{ count }}</div>`),
     }
     createRecord(childId, Child)
 
@@ -176,8 +179,9 @@ describe('hot module replacement', () => {
         return { toggle: true }
       },
       render: compileToFunction(
-        `<button @click="toggle = !toggle"></button><KeepAlive><Child v-if="toggle" /></KeepAlive>`
-      )
+        `<button @click="toggle = !toggle" />
+        <KeepAlive><Child v-if="toggle" /></KeepAlive>`,
+      ),
     }
 
     render(h(Parent), root)
@@ -192,7 +196,7 @@ describe('hot module replacement', () => {
       unmounted: unmountSpy,
       activated: activeSpy,
       deactivated: deactiveSpy,
-      render: compileToFunction(`<div>{{ count }}</div>`)
+      render: compileToFunction(`<div>{{ count }}</div>`),
     })
     await nextTick()
     expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
@@ -233,7 +237,7 @@ describe('hot module replacement', () => {
         return { count: 0 }
       },
       unmounted: unmountSpy,
-      render: compileToFunction(`<div>{{ count }}</div>`)
+      render: compileToFunction(`<div>{{ count }}</div>`),
     }
     createRecord(childId, Child)
 
@@ -243,8 +247,11 @@ describe('hot module replacement', () => {
         return { toggle: true }
       },
       render: compileToFunction(
-        `<button @click="toggle = !toggle"></button><BaseTransition mode="out-in"><KeepAlive><Child v-if="toggle" /></KeepAlive></BaseTransition>`
-      )
+        `<button @click="toggle = !toggle" />
+        <BaseTransition>
+          <KeepAlive><Child v-if="toggle" /></KeepAlive>
+        </BaseTransition>`,
+      ),
     }
 
     render(h(Parent), root)
@@ -259,7 +266,7 @@ describe('hot module replacement', () => {
       unmounted: unmountSpy,
       activated: activeSpy,
       deactivated: deactiveSpy,
-      render: compileToFunction(`<div>{{ count }}</div>`)
+      render: compileToFunction(`<div>{{ count }}</div>`),
     })
     await nextTick()
     expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
@@ -271,7 +278,88 @@ describe('hot module replacement', () => {
     // should not unmount when toggling
     triggerEvent(root.children[1] as TestElement, 'click')
     await nextTick()
-    expect(serializeInner(root)).toBe(`<button></button><!---->`)
+    expect(serializeInner(root)).toBe(`<button></button><!--v-if-->`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(1)
+    expect(deactiveSpy).toHaveBeenCalledTimes(1)
+
+    // should not mount when toggling
+    triggerEvent(root.children[1] as TestElement, 'click')
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(2)
+    expect(deactiveSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('reload KeepAlive slot in Transition with out-in', async () => {
+    const root = nodeOps.createElement('div')
+    const childId = 'test-transition-keep-alive-reload-with-out-in'
+    const unmountSpy = vi.fn()
+    const mountSpy = vi.fn()
+    const activeSpy = vi.fn()
+    const deactiveSpy = vi.fn()
+
+    const Child: ComponentOptions = {
+      __hmrId: childId,
+      name: 'original',
+      data() {
+        return { count: 0 }
+      },
+      unmounted: unmountSpy,
+      render: compileToFunction(`<div>{{ count }}</div>`),
+    }
+    createRecord(childId, Child)
+
+    const Parent: ComponentOptions = {
+      components: { Child },
+      data() {
+        return { toggle: true }
+      },
+      methods: {
+        // @ts-expect-error
+        onLeave(_, done) {
+          setTimeout(done, 0)
+        },
+      },
+      render: compileToFunction(
+        `<button @click="toggle = !toggle" />
+        <BaseTransition mode="out-in" @leave="onLeave">
+          <KeepAlive><Child v-if="toggle" /></KeepAlive>
+        </BaseTransition>`,
+      ),
+    }
+
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe(`<button></button><div>0</div>`)
+
+    reload(childId, {
+      __hmrId: childId,
+      name: 'updated',
+      data() {
+        return { count: 1 }
+      },
+      mounted: mountSpy,
+      unmounted: unmountSpy,
+      activated: activeSpy,
+      deactivated: deactiveSpy,
+      render: compileToFunction(`<div>{{ count }}</div>`),
+    })
+    await nextTick()
+    await new Promise(r => setTimeout(r, 0))
+    expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(1)
+    expect(deactiveSpy).toHaveBeenCalledTimes(0)
+
+    // should not unmount when toggling
+    triggerEvent(root.children[1] as TestElement, 'click')
+    await nextTick()
+    await new Promise(r => setTimeout(r, 0))
+    expect(serializeInner(root)).toBe(`<button></button><!--v-if-->`)
     expect(unmountSpy).toHaveBeenCalledTimes(1)
     expect(mountSpy).toHaveBeenCalledTimes(1)
     expect(activeSpy).toHaveBeenCalledTimes(1)
@@ -300,13 +388,13 @@ describe('hot module replacement', () => {
           return { count: 0 }
         },
         unmounted: unmountSpy,
-        render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
+        render: compileToFunction(`<div @click="count++">{{ count }}</div>`),
       }
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
-      render: () => h(Child)
+      render: () => h(Child),
     }
 
     render(h(Parent), root)
@@ -319,7 +407,7 @@ describe('hot module replacement', () => {
           return { count: 1 }
         },
         mounted: mountSpy,
-        render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
+        render: compileToFunction(`<div @click="count++">{{ count }}</div>`),
       }
     }
 
@@ -330,6 +418,58 @@ describe('hot module replacement', () => {
     expect(mountSpy).toHaveBeenCalledTimes(1)
   })
 
+  // #6930
+  test('reload: avoid infinite recursion', async () => {
+    const root = nodeOps.createElement('div')
+    const childId = 'test-child-6930'
+    const unmountSpy = vi.fn()
+    const mountSpy = vi.fn()
+
+    const Child: ComponentOptions = {
+      __hmrId: childId,
+      data() {
+        return { count: 0 }
+      },
+      expose: ['count'],
+      unmounted: unmountSpy,
+      render: compileToFunction(`<div @click="count++">{{ count }}</div>`),
+    }
+    createRecord(childId, Child)
+
+    const Parent: ComponentOptions = {
+      setup() {
+        const com1 = ref()
+        const changeRef1 = (value: any) => (com1.value = value)
+
+        const com2 = ref()
+        const changeRef2 = (value: any) => (com2.value = value)
+
+        return () => [
+          h(Child, { ref: changeRef1 }),
+          h(Child, { ref: changeRef2 }),
+          com1.value?.count,
+        ]
+      },
+    }
+
+    render(h(Parent), root)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>0</div><div>0</div>0`)
+
+    reload(childId, {
+      __hmrId: childId,
+      data() {
+        return { count: 1 }
+      },
+      mounted: mountSpy,
+      render: compileToFunction(`<div @click="count++">{{ count }}</div>`),
+    })
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>1</div><div>1</div>1`)
+    expect(unmountSpy).toHaveBeenCalledTimes(2)
+    expect(mountSpy).toHaveBeenCalledTimes(2)
+  })
+
   // #1156 - static nodes should retain DOM element reference across updates
   // when HMR is active
   test('static el reference', async () => {
@@ -346,29 +486,29 @@ describe('hot module replacement', () => {
       data() {
         return { count: 0 }
       },
-      render: compileToFunction(template)
+      render: compileToFunction(template),
     }
     createRecord(id, Comp)
 
     render(h(Comp), root)
     expect(serializeInner(root)).toBe(
-      `<div><div>0</div><button>++</button></div>`
+      `<div><div>0</div><button>++</button></div>`,
     )
 
     // 1. click to trigger update
     triggerEvent((root as any).children[0].children[1], 'click')
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>1</div><button>++</button></div>`
+      `<div><div>1</div><button>++</button></div>`,
     )
 
     // 2. trigger HMR
     rerender(
       id,
-      compileToFunction(template.replace(`<button`, `<button class="foo"`))
+      compileToFunction(template.replace(`<button`, `<button class="foo"`)),
     )
     expect(serializeInner(root)).toBe(
-      `<div><div>1</div><button class="foo">++</button></div>`
+      `<div><div>1</div><button class="foo">++</button></div>`,
     )
   })
 
@@ -381,16 +521,16 @@ describe('hot module replacement', () => {
     const Child: ComponentOptions = {
       __hmrId: childId,
       props: {
-        msg: String
+        msg: String,
       },
-      render: compileToFunction(`<div>{{ msg }}</div>`)
+      render: compileToFunction(`<div>{{ msg }}</div>`),
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
       __hmrId: parentId,
       components: { Child },
-      render: compileToFunction(`<Child msg="foo" />`)
+      render: compileToFunction(`<Child msg="foo" />`),
     }
     createRecord(parentId, Parent)
 
@@ -409,14 +549,14 @@ describe('hot module replacement', () => {
 
     const Child: ComponentOptions = {
       __hmrId: childId,
-      render: compileToFunction(`<div>child</div>`)
+      render: compileToFunction(`<div>child</div>`),
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
       __hmrId: parentId,
       components: { Child },
-      render: compileToFunction(`<Child class="test" />`)
+      render: compileToFunction(`<Child class="test" />`),
     }
     createRecord(parentId, Parent)
 
@@ -436,7 +576,7 @@ describe('hot module replacement', () => {
 
     const Child: ComponentOptions = {
       __hmrId: childId,
-      render: compileToFunction(`<div>child</div>`)
+      render: compileToFunction(`<div>child</div>`),
     }
     createRecord(childId, Child)
 
@@ -445,18 +585,18 @@ describe('hot module replacement', () => {
     for (let i = 0; i < numberOfParents; i++) {
       const parentId = `${parent}${i}`
       const parentComp: ComponentOptions = {
-        __hmrId: parentId
+        __hmrId: parentId,
       }
       components.push(parentComp)
       if (i === 0) {
         parentComp.render = compileToFunction(`<Child />`)
         parentComp.components = {
-          Child
+          Child,
         }
       } else {
         parentComp.render = compileToFunction(`<Parent />`)
         parentComp.components = {
-          Parent: components[i - 1]
+          Parent: components[i - 1],
         }
       }
 
@@ -483,7 +623,7 @@ describe('hot module replacement', () => {
         return {
           // style is used to ensure that the div tag will be tracked by Teleport
           style: {},
-          target
+          target,
         }
       },
       render: compileToFunction(`
@@ -492,7 +632,7 @@ describe('hot module replacement', () => {
             <slot/>
           </div>
         </teleport>
-      `)
+      `),
     }
 
     const Parent: ComponentOptions = {
@@ -504,13 +644,13 @@ describe('hot module replacement', () => {
             <div>1</div>
           </template>
         </Child>
-      `)
+      `),
     }
     createRecord(parentId, Parent)
 
     render(h(Parent), root)
     expect(serializeInner(root)).toBe(
-      `<!--teleport start--><!--teleport end-->`
+      `<!--teleport start--><!--teleport end-->`,
     )
     expect(serializeInner(target)).toBe(`<div style={}><div>1</div></div>`)
 
@@ -523,13 +663,13 @@ describe('hot module replacement', () => {
           <div>2</div>
         </template>
       </Child>
-    `)
+    `),
     )
     expect(serializeInner(root)).toBe(
-      `<!--teleport start--><!--teleport end-->`
+      `<!--teleport start--><!--teleport end-->`,
     )
     expect(serializeInner(target)).toBe(
-      `<div style={}><div>1</div><div>2</div></div>`
+      `<div style={}><div>1</div><div>2</div></div>`,
     )
   })
 
@@ -544,12 +684,12 @@ describe('hot module replacement', () => {
       created: createSpy1,
       render() {
         return h('div')
-      }
+      },
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
-      render: () => h(Child)
+      render: () => h(Child),
     }
 
     const app = createApp(Parent)
@@ -565,7 +705,7 @@ describe('hot module replacement', () => {
       created: createSpy2,
       render() {
         return h('div')
-      }
+      },
     })
     await nextTick()
     expect(createSpy1).toHaveBeenCalledTimes(1)
@@ -577,7 +717,7 @@ describe('hot module replacement', () => {
     const id = 'no-active-instance-rerender'
     const Foo: ComponentOptions = {
       __hmrId: id,
-      render: () => 'foo'
+      render: () => 'foo',
     }
 
     createRecord(id, Foo)
@@ -592,13 +732,13 @@ describe('hot module replacement', () => {
     const id = 'no-active-instance-reload'
     const Foo: ComponentOptions = {
       __hmrId: id,
-      render: () => 'foo'
+      render: () => 'foo',
     }
 
     createRecord(id, Foo)
     reload(id, {
       __hmrId: id,
-      render: () => 'bar'
+      render: () => 'bar',
     })
 
     const root = nodeOps.createElement('div')
@@ -617,16 +757,16 @@ describe('hot module replacement', () => {
       computed: {
         slotContent() {
           return this.$slots.default?.()
-        }
+        },
       },
-      render: compileToFunction(`<component :is="() => slotContent" />`)
+      render: compileToFunction(`<component :is="() => slotContent" />`),
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
       __hmrId: parentId,
       components: { Child },
-      render: compileToFunction(`<Child>1</Child>`)
+      render: compileToFunction(`<Child>1</Child>`),
     }
     createRecord(parentId, Parent)
 
@@ -648,14 +788,14 @@ describe('hot module replacement', () => {
           <div>1</div>
         </div>
         <p>2</p>
-        <p>3</p>`
-      )
+        <p>3</p>`,
+      ),
     }
     createRecord(appId, App)
 
     render(h(App), root)
     expect(serializeInner(root)).toBe(
-      `<div><div>1</div></div><div><div>1</div></div><p>2</p><p>3</p>`
+      `<div><div>1</div></div><div><div>1</div></div><p>2</p><p>3</p>`,
     )
 
     // move the <p>3</p> into the <div>1</div>
@@ -665,11 +805,93 @@ describe('hot module replacement', () => {
         `<div v-for="item of 2">
           <div>1<p>3</p></div>
         </div>
-        <p>2</p>`
-      )
+        <p>2</p>`,
+      ),
     )
     expect(serializeInner(root)).toBe(
-      `<div><div>1<p>3</p></div></div><div><div>1<p>3</p></div></div><p>2</p>`
+      `<div><div>1<p>3</p></div></div><div><div>1<p>3</p></div></div><p>2</p>`,
     )
   })
+
+  // #11248
+  test('reload async component with multiple instances', async () => {
+    const root = nodeOps.createElement('div')
+    const childId = 'test-child-id'
+    const Child: ComponentOptions = {
+      __hmrId: childId,
+      data() {
+        return { count: 0 }
+      },
+      render: compileToFunction(`<div>{{ count }}</div>`),
+    }
+    const Comp = runtimeTest.defineAsyncComponent(() => Promise.resolve(Child))
+    const appId = 'test-app-id'
+    const App: ComponentOptions = {
+      __hmrId: appId,
+      render: () => [h(Comp), h(Comp)],
+    }
+    createRecord(appId, App)
+
+    render(h(App), root)
+
+    await timeout()
+
+    expect(serializeInner(root)).toBe(`<div>0</div><div>0</div>`)
+
+    // change count to 1
+    reload(childId, {
+      __hmrId: childId,
+      data() {
+        return { count: 1 }
+      },
+      render: compileToFunction(`<div>{{ count }}</div>`),
+    })
+
+    await timeout()
+
+    expect(serializeInner(root)).toBe(`<div>1</div><div>1</div>`)
+  })
+
+  test('reload async child wrapped in Suspense + KeepAlive', async () => {
+    const id = 'async-child-reload'
+    const AsyncChild: ComponentOptions = {
+      __hmrId: id,
+      async setup() {
+        await nextTick()
+        return () => 'foo'
+      },
+    }
+    createRecord(id, AsyncChild)
+
+    const appId = 'test-app-id'
+    const App: ComponentOptions = {
+      __hmrId: appId,
+      components: { AsyncChild },
+      render: compileToFunction(`
+        <div>
+        <Suspense>
+          <KeepAlive>
+            <AsyncChild />
+          </KeepAlive>
+        </Suspense>
+      </div>
+      `),
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+    expect(serializeInner(root)).toBe('<div><!----></div>')
+    await timeout()
+    expect(serializeInner(root)).toBe('<div>foo</div>')
+
+    reload(id, {
+      __hmrId: id,
+      async setup() {
+        await nextTick()
+        return () => 'bar'
+      },
+    })
+    await timeout()
+    expect(serializeInner(root)).toBe('<div>bar</div>')
+  })
 })
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 7ea607d33..c98f1f473 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -3,41 +3,50 @@
  */
 
 import {
-  createSSRApp,
-  h,
-  ref,
-  nextTick,
-  VNode,
-  Teleport,
-  createStaticVNode,
+  type ObjectDirective,
   Suspense,
-  onMounted,
-  defineAsyncComponent,
-  defineComponent,
+  Teleport,
+  Transition,
+  type VNode,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createElementVNode,
+  createSSRApp,
+  createStaticVNode,
   createTextVNode,
   createVNode,
-  withDirectives,
-  vModelCheckbox,
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  openBlock,
+  reactive,
+  ref,
   renderSlot,
-  Transition,
-  createCommentVNode,
-  vShow
+  useCssVars,
+  vModelCheckbox,
+  vShow,
+  withCtx,
+  withDirectives,
 } from '@vue/runtime-dom'
-import { renderToString, SSRContext } from '@vue/server-renderer'
-import { PatchFlags } from '@vue/shared'
-import { vShowOldKey } from '../../runtime-dom/src/directives/vShow'
+import { type SSRContext, renderToString } from '@vue/server-renderer'
+import { PatchFlags, normalizeStyle } from '@vue/shared'
+import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow'
+import { expect } from 'vitest'
 
 function mountWithHydration(html: string, render: () => any) {
   const container = document.createElement('div')
   container.innerHTML = html
   const app = createSSRApp({
-    render
+    render,
   })
   return {
     vnode: app.mount(container).$.subTree as VNode<Node, Element> & {
       el: Element
     },
-    container
+    container,
   }
 }
 
@@ -63,7 +72,7 @@ describe('SSR hydration', () => {
 
   test('empty text', async () => {
     const { container } = mountWithHydration('<div></div>', () =>
-      h('div', createTextVNode(''))
+      h('div', createTextVNode('')),
     )
     expect(container.textContent).toBe('')
     expect(`Hydration children mismatch in <div>`).not.toHaveBeenWarned()
@@ -78,7 +87,7 @@ describe('SSR hydration', () => {
   test('static', () => {
     const html = '<div><span>hello</span></div>'
     const { vnode, container } = mountWithHydration(html, () =>
-      createStaticVNode('', 1)
+      createStaticVNode('', 1),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(vnode.el.outerHTML).toBe(html)
@@ -109,7 +118,7 @@ describe('SSR hydration', () => {
   test('static (with text node as starting node)', () => {
     const html = ` A <span>foo</span> B`
     const { vnode, container } = mountWithHydration(html, () =>
-      createStaticVNode(` A <span>foo</span> B`, 3)
+      createStaticVNode(` A <span>foo</span> B`, 3),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(vnode.anchor).toBe(container.lastChild)
@@ -119,7 +128,7 @@ describe('SSR hydration', () => {
   test('static with content adoption', () => {
     const html = ` A <span>foo</span> B`
     const { vnode, container } = mountWithHydration(html, () =>
-      createStaticVNode(``, 3)
+      createStaticVNode(``, 3),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(vnode.anchor).toBe(container.lastChild)
@@ -131,7 +140,7 @@ describe('SSR hydration', () => {
     const msg = ref('foo')
     const { vnode, container } = mountWithHydration(
       '<div class="foo">foo</div>',
-      () => h('div', { class: msg.value }, msg.value)
+      () => h('div', { class: msg.value }, msg.value),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(container.firstChild!.textContent).toBe('foo')
@@ -140,6 +149,15 @@ describe('SSR hydration', () => {
     expect(container.innerHTML).toBe(`<div class="bar">bar</div>`)
   })
 
+  // #7285
+  test('element with multiple continuous text vnodes', async () => {
+    // should no mismatch warning
+    const { container } = mountWithHydration('<div>foo0o</div>', () =>
+      h('div', ['fo', createTextVNode('o'), 0, 'o']),
+    )
+    expect(container.textContent).toBe('foo0o')
+  })
+
   test('element with elements children', async () => {
     const msg = ref('foo')
     const fn = vi.fn()
@@ -148,15 +166,15 @@ describe('SSR hydration', () => {
       () =>
         h('div', [
           h('span', msg.value),
-          h('span', { class: msg.value, onClick: fn })
-        ])
+          h('span', { class: msg.value, onClick: fn }),
+        ]),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect((vnode.children as VNode[])[0].el).toBe(
-      container.firstChild!.childNodes[0]
+      container.firstChild!.childNodes[0],
     )
     expect((vnode.children as VNode[])[1].el).toBe(
-      container.firstChild!.childNodes[1]
+      container.firstChild!.childNodes[1],
     )
 
     // event handler
@@ -171,7 +189,7 @@ describe('SSR hydration', () => {
   test('element with ref', () => {
     const el = ref()
     const { vnode, container } = mountWithHydration('<div></div>', () =>
-      h('div', { ref: el })
+      h('div', { ref: el }),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(el.value).toBe(vnode.el)
@@ -184,13 +202,16 @@ describe('SSR hydration', () => {
       '<div><!--[--><span>foo</span><!--[--><span class="foo"></span><!--]--><!--]--></div>',
       () =>
         h('div', [
-          [h('span', msg.value), [h('span', { class: msg.value, onClick: fn })]]
-        ])
+          [
+            h('span', msg.value),
+            [h('span', { class: msg.value, onClick: fn })],
+          ],
+        ]),
     )
     expect(vnode.el).toBe(container.firstChild)
 
     expect(vnode.el.innerHTML).toBe(
-      `<!--[--><span>foo</span><!--[--><span class="foo"></span><!--]--><!--]-->`
+      `<!--[--><span>foo</span><!--[--><span class="foo"></span><!--]--><!--]-->`,
     )
 
     // start fragment 1
@@ -224,16 +245,27 @@ describe('SSR hydration', () => {
     msg.value = 'bar'
     await nextTick()
     expect(vnode.el.innerHTML).toBe(
-      `<!--[--><span>bar</span><!--[--><span class="bar"></span><!--]--><!--]-->`
+      `<!--[--><span>bar</span><!--[--><span class="bar"></span><!--]--><!--]-->`,
     )
   })
 
+  // #7285
+  test('Fragment (multiple continuous text vnodes)', async () => {
+    // should no mismatch warning
+    const { container } = mountWithHydration('<!--[-->fooo<!--]-->', () => [
+      'fo',
+      createTextVNode('o'),
+      'o',
+    ])
+    expect(container.textContent).toBe('fooo')
+  })
+
   test('Teleport', async () => {
     const msg = ref('foo')
     const fn = vi.fn()
     const teleportContainer = document.createElement('div')
     teleportContainer.id = 'teleport'
-    teleportContainer.innerHTML = `<span>foo</span><span class="foo"></span><!--teleport anchor-->`
+    teleportContainer.innerHTML = `<!--teleport start anchor--><span>foo</span><span class="foo"></span><!--teleport anchor-->`
     document.body.appendChild(teleportContainer)
 
     const { vnode, container } = mountWithHydration(
@@ -241,21 +273,22 @@ describe('SSR hydration', () => {
       () =>
         h(Teleport, { to: '#teleport' }, [
           h('span', msg.value),
-          h('span', { class: msg.value, onClick: fn })
-        ])
+          h('span', { class: msg.value, onClick: fn }),
+        ]),
     )
 
     expect(vnode.el).toBe(container.firstChild)
     expect(vnode.anchor).toBe(container.lastChild)
 
     expect(vnode.target).toBe(teleportContainer)
+    expect(vnode.targetStart).toBe(teleportContainer.childNodes[0])
     expect((vnode.children as VNode[])[0].el).toBe(
-      teleportContainer.childNodes[0]
+      teleportContainer.childNodes[1],
     )
     expect((vnode.children as VNode[])[1].el).toBe(
-      teleportContainer.childNodes[1]
+      teleportContainer.childNodes[2],
     )
-    expect(vnode.targetAnchor).toBe(teleportContainer.childNodes[2])
+    expect(vnode.targetAnchor).toBe(teleportContainer.childNodes[3])
 
     // event handler
     triggerEvent('click', teleportContainer.querySelector('.foo')!)
@@ -264,7 +297,7 @@ describe('SSR hydration', () => {
     msg.value = 'bar'
     await nextTick()
     expect(teleportContainer.innerHTML).toBe(
-      `<span>bar</span><span class="bar"></span><!--teleport anchor-->`
+      `<!--teleport start anchor--><span>bar</span><span class="bar"></span><!--teleport anchor-->`,
     )
   })
 
@@ -276,12 +309,12 @@ describe('SSR hydration', () => {
     const Comp = () => [
       h(Teleport, { to: '#teleport2' }, [
         h('span', msg.value),
-        h('span', { class: msg.value, onClick: fn1 })
+        h('span', { class: msg.value, onClick: fn1 }),
       ]),
       h(Teleport, { to: '#teleport2' }, [
         h('span', msg.value + '2'),
-        h('span', { class: msg.value + '2', onClick: fn2 })
-      ])
+        h('span', { class: msg.value + '2', onClick: fn2 }),
+      ]),
     ]
 
     const teleportContainer = document.createElement('div')
@@ -289,12 +322,12 @@ describe('SSR hydration', () => {
     const ctx: SSRContext = {}
     const mainHtml = await renderToString(h(Comp), ctx)
     expect(mainHtml).toMatchInlineSnapshot(
-      `"<!--[--><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--><!--]-->"`
+      `"<!--[--><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--><!--]-->"`,
     )
 
     const teleportHtml = ctx.teleports!['#teleport2']
     expect(teleportHtml).toMatchInlineSnapshot(
-      '"<span>foo</span><span class=\\"foo\\"></span><!--teleport anchor--><span>foo2</span><span class=\\"foo2\\"></span><!--teleport anchor-->"'
+      `"<!--teleport start anchor--><span>foo</span><span class="foo"></span><!--teleport anchor--><!--teleport start anchor--><span>foo2</span><span class="foo2"></span><!--teleport anchor-->"`,
     )
 
     teleportContainer.innerHTML = teleportHtml
@@ -310,16 +343,18 @@ describe('SSR hydration', () => {
     expect(teleportVnode2.anchor).toBe(container.childNodes[4])
 
     expect(teleportVnode1.target).toBe(teleportContainer)
+    expect(teleportVnode1.targetStart).toBe(teleportContainer.childNodes[0])
     expect((teleportVnode1 as any).children[0].el).toBe(
-      teleportContainer.childNodes[0]
+      teleportContainer.childNodes[1],
     )
-    expect(teleportVnode1.targetAnchor).toBe(teleportContainer.childNodes[2])
+    expect(teleportVnode1.targetAnchor).toBe(teleportContainer.childNodes[3])
 
     expect(teleportVnode2.target).toBe(teleportContainer)
+    expect(teleportVnode2.targetStart).toBe(teleportContainer.childNodes[4])
     expect((teleportVnode2 as any).children[0].el).toBe(
-      teleportContainer.childNodes[3]
+      teleportContainer.childNodes[5],
     )
-    expect(teleportVnode2.targetAnchor).toBe(teleportContainer.childNodes[5])
+    expect(teleportVnode2.targetAnchor).toBe(teleportContainer.childNodes[7])
 
     // // event handler
     triggerEvent('click', teleportContainer.querySelector('.foo')!)
@@ -331,7 +366,7 @@ describe('SSR hydration', () => {
     msg.value = 'bar'
     await nextTick()
     expect(teleportContainer.innerHTML).toMatchInlineSnapshot(
-      '"<span>bar</span><span class=\\"bar\\"></span><!--teleport anchor--><span>bar2</span><span class=\\"bar2\\"></span><!--teleport anchor-->"'
+      `"<!--teleport start anchor--><span>bar</span><span class="bar"></span><!--teleport anchor--><!--teleport start anchor--><span>bar2</span><span class="bar2"></span><!--teleport anchor-->"`,
     )
   })
 
@@ -344,9 +379,9 @@ describe('SSR hydration', () => {
       h('div', 'foo'),
       h(Teleport, { to: '#teleport3', disabled: true }, [
         h('span', msg.value),
-        h('span', { class: msg.value, onClick: fn1 })
+        h('span', { class: msg.value, onClick: fn1 }),
       ]),
-      h('div', { class: msg.value + '2', onClick: fn2 }, 'bar')
+      h('div', { class: msg.value + '2', onClick: fn2 }, 'bar'),
     ]
 
     const teleportContainer = document.createElement('div')
@@ -354,11 +389,13 @@ describe('SSR hydration', () => {
     const ctx: SSRContext = {}
     const mainHtml = await renderToString(h(Comp), ctx)
     expect(mainHtml).toMatchInlineSnapshot(
-      '"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class=\\"foo\\"></span><!--teleport end--><div class=\\"foo2\\">bar</div><!--]-->"'
+      `"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class="foo"></span><!--teleport end--><div class="foo2">bar</div><!--]-->"`,
     )
 
     const teleportHtml = ctx.teleports!['#teleport3']
-    expect(teleportHtml).toMatchInlineSnapshot(`"<!--teleport anchor-->"`)
+    expect(teleportHtml).toMatchInlineSnapshot(
+      `"<!--teleport start anchor--><!--teleport anchor-->"`,
+    )
 
     teleportContainer.innerHTML = teleportHtml
     document.body.appendChild(teleportContainer)
@@ -372,16 +409,17 @@ describe('SSR hydration', () => {
     const teleportVnode = children[1]
     expect(teleportVnode.el).toBe(container.childNodes[2])
     expect((teleportVnode.children as VNode[])[0].el).toBe(
-      container.childNodes[3]
+      container.childNodes[3],
     )
     expect((teleportVnode.children as VNode[])[1].el).toBe(
-      container.childNodes[4]
+      container.childNodes[4],
     )
     expect(teleportVnode.anchor).toBe(container.childNodes[5])
     expect(children[2].el).toBe(container.childNodes[6])
 
     expect(teleportVnode.target).toBe(teleportContainer)
-    expect(teleportVnode.targetAnchor).toBe(teleportContainer.childNodes[0])
+    expect(teleportVnode.targetStart).toBe(teleportContainer.childNodes[0])
+    expect(teleportVnode.targetAnchor).toBe(teleportContainer.childNodes[1])
 
     // // event handler
     triggerEvent('click', container.querySelector('.foo')!)
@@ -393,7 +431,7 @@ describe('SSR hydration', () => {
     msg.value = 'bar'
     await nextTick()
     expect(container.innerHTML).toMatchInlineSnapshot(
-      '"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class=\\"bar\\"></span><!--teleport end--><div class=\\"bar2\\">bar</div><!--]-->"'
+      `"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class="bar"></span><!--teleport end--><div class="bar2">bar</div><!--]-->"`,
     )
   })
 
@@ -405,35 +443,35 @@ describe('SSR hydration', () => {
         h('div', 'Parent fragment'),
         h(() =>
           h(Teleport, { to: 'body', disabled: true }, [
-            h('div', 'Teleport content')
-          ])
-        )
-      ]
+            h('div', 'Teleport content'),
+          ]),
+        ),
+      ],
     )
     expect(document.body.innerHTML).toBe('')
     expect(container.innerHTML).toBe(
-      '<!--[--><div>Parent fragment</div><!--teleport start--><div>Teleport content</div><!--teleport end--><!--]-->'
+      '<!--[--><div>Parent fragment</div><!--teleport start--><div>Teleport content</div><!--teleport end--><!--]-->',
     )
     expect(
-      `Hydration completed but contains mismatches.`
+      `Hydration completed but contains mismatches.`,
     ).not.toHaveBeenWarned()
   })
 
   test('Teleport (as component root)', () => {
     const teleportContainer = document.createElement('div')
     teleportContainer.id = 'teleport4'
-    teleportContainer.innerHTML = `hello<!--teleport anchor-->`
+    teleportContainer.innerHTML = `<!--teleport start anchor-->hello<!--teleport anchor-->`
     document.body.appendChild(teleportContainer)
 
     const wrapper = {
       render() {
         return h(Teleport, { to: '#teleport4' }, ['hello'])
-      }
+      },
     }
 
     const { vnode, container } = mountWithHydration(
       '<div><!--teleport start--><!--teleport end--><div></div></div>',
-      () => h('div', [h(wrapper), h('div')])
+      () => h('div', [h(wrapper), h('div')]),
     )
     expect(vnode.el).toBe(container.firstChild)
     // component el
@@ -451,22 +489,22 @@ describe('SSR hydration', () => {
   test('Teleport (nested)', () => {
     const teleportContainer = document.createElement('div')
     teleportContainer.id = 'teleport5'
-    teleportContainer.innerHTML = `<div><!--teleport start--><!--teleport end--></div><!--teleport anchor--><div>child</div><!--teleport anchor-->`
+    teleportContainer.innerHTML = `<!--teleport start anchor--><div><!--teleport start--><!--teleport end--></div><!--teleport anchor--><!--teleport start anchor--><div>child</div><!--teleport anchor-->`
     document.body.appendChild(teleportContainer)
 
     const { vnode, container } = mountWithHydration(
       '<!--teleport start--><!--teleport end-->',
       () =>
         h(Teleport, { to: '#teleport5' }, [
-          h('div', [h(Teleport, { to: '#teleport5' }, [h('div', 'child')])])
-        ])
+          h('div', [h(Teleport, { to: '#teleport5' }, [h('div', 'child')])]),
+        ]),
     )
 
     expect(vnode.el).toBe(container.firstChild)
     expect(vnode.anchor).toBe(container.lastChild)
 
     const childDivVNode = (vnode as any).children[0]
-    const div = teleportContainer.firstChild
+    const div = teleportContainer.childNodes[1]
     expect(childDivVNode.el).toBe(div)
     expect(vnode.targetAnchor).toBe(div?.nextSibling)
 
@@ -476,10 +514,182 @@ describe('SSR hydration', () => {
 
     expect(childTeleportVNode.targetAnchor).toBe(teleportContainer.lastChild)
     expect(childTeleportVNode.children[0].el).toBe(
-      teleportContainer.lastChild?.previousSibling
+      teleportContainer.lastChild?.previousSibling,
     )
   })
 
+  test('Teleport unmount (full integration)', async () => {
+    const Comp1 = {
+      template: `
+        <Teleport to="#target"> 
+          <span>Teleported Comp1</span>
+        </Teleport>
+      `,
+    }
+    const Comp2 = {
+      template: `
+        <div>Comp2</div>
+      `,
+    }
+
+    const toggle = ref(true)
+    const App = {
+      template: `
+        <div>
+          <Comp1 v-if="toggle"/>
+          <Comp2 v-else/>
+        </div>
+      `,
+      components: {
+        Comp1,
+        Comp2,
+      },
+      setup() {
+        return { toggle }
+      },
+    }
+
+    const container = document.createElement('div')
+    const teleportContainer = document.createElement('div')
+    teleportContainer.id = 'target'
+    document.body.appendChild(teleportContainer)
+
+    // server render
+    const ctx: SSRContext = {}
+    container.innerHTML = await renderToString(h(App), ctx)
+    expect(container.innerHTML).toBe(
+      '<div><!--teleport start--><!--teleport end--></div>',
+    )
+    teleportContainer.innerHTML = ctx.teleports!['#target']
+
+    // hydrate
+    createSSRApp(App).mount(container)
+    expect(container.innerHTML).toBe(
+      '<div><!--teleport start--><!--teleport end--></div>',
+    )
+    expect(teleportContainer.innerHTML).toBe(
+      '<!--teleport start anchor--><span>Teleported Comp1</span><!--teleport anchor-->',
+    )
+    expect(`Hydration children mismatch`).not.toHaveBeenWarned()
+
+    toggle.value = false
+    await nextTick()
+    expect(container.innerHTML).toBe('<div><div>Comp2</div></div>')
+    expect(teleportContainer.innerHTML).toBe('')
+  })
+
+  test('Teleport unmount (mismatch + full integration)', async () => {
+    const Comp1 = {
+      template: `
+        <Teleport to="#target"> 
+          <span>Teleported Comp1</span>
+        </Teleport>
+      `,
+    }
+    const Comp2 = {
+      template: `
+        <div>Comp2</div>
+      `,
+    }
+
+    const toggle = ref(true)
+    const App = {
+      template: `
+        <div>
+          <Comp1 v-if="toggle"/>
+          <Comp2 v-else/>
+        </div>
+      `,
+      components: {
+        Comp1,
+        Comp2,
+      },
+      setup() {
+        return { toggle }
+      },
+    }
+
+    const container = document.createElement('div')
+    const teleportContainer = document.createElement('div')
+    teleportContainer.id = 'target'
+    document.body.appendChild(teleportContainer)
+
+    // server render
+    container.innerHTML = await renderToString(h(App))
+    expect(container.innerHTML).toBe(
+      '<div><!--teleport start--><!--teleport end--></div>',
+    )
+    expect(teleportContainer.innerHTML).toBe('')
+
+    // hydrate
+    createSSRApp(App).mount(container)
+    expect(container.innerHTML).toBe(
+      '<div><!--teleport start--><!--teleport end--></div>',
+    )
+    expect(teleportContainer.innerHTML).toBe('<span>Teleported Comp1</span>')
+    expect(`Hydration children mismatch`).toHaveBeenWarned()
+
+    toggle.value = false
+    await nextTick()
+    expect(container.innerHTML).toBe('<div><div>Comp2</div></div>')
+    expect(teleportContainer.innerHTML).toBe('')
+  })
+
+  test('Teleport target change (mismatch + full integration)', async () => {
+    const target = ref('#target1')
+    const Comp = {
+      template: `
+        <Teleport :to="target"> 
+          <span>Teleported</span>
+        </Teleport>
+      `,
+      setup() {
+        return { target }
+      },
+    }
+
+    const App = {
+      template: `
+        <div>
+          <Comp />
+        </div>
+      `,
+      components: {
+        Comp,
+      },
+    }
+
+    const container = document.createElement('div')
+    const teleportContainer1 = document.createElement('div')
+    teleportContainer1.id = 'target1'
+    const teleportContainer2 = document.createElement('div')
+    teleportContainer2.id = 'target2'
+    document.body.appendChild(teleportContainer1)
+    document.body.appendChild(teleportContainer2)
+
+    // server render
+    container.innerHTML = await renderToString(h(App))
+    expect(container.innerHTML).toBe(
+      '<div><!--teleport start--><!--teleport end--></div>',
+    )
+    expect(teleportContainer1.innerHTML).toBe('')
+    expect(teleportContainer2.innerHTML).toBe('')
+
+    // hydrate
+    createSSRApp(App).mount(container)
+    expect(container.innerHTML).toBe(
+      '<div><!--teleport start--><!--teleport end--></div>',
+    )
+    expect(teleportContainer1.innerHTML).toBe('<span>Teleported</span>')
+    expect(teleportContainer2.innerHTML).toBe('')
+    expect(`Hydration children mismatch`).toHaveBeenWarned()
+
+    target.value = '#target2'
+    await nextTick()
+    expect(teleportContainer1.innerHTML).toBe('')
+    expect(teleportContainer2.innerHTML).toBe('<span>Teleported</span>')
+  })
+
   // compile SSR + client render fn from the same template & hydrate
   test('full compiler integration', async () => {
     const mounted: string[] = []
@@ -492,8 +702,8 @@ describe('SSR hydration', () => {
           count: 0,
           text: 'hello',
           style: {
-            color: 'red'
-          }
+            color: 'red',
+          },
         }
       },
       mounted() {
@@ -508,7 +718,7 @@ describe('SSR hydration', () => {
         <span class="text">{{ text }}</span>
         <input v-model="text">
       </div>
-      `
+      `,
     }
 
     const App = {
@@ -530,11 +740,11 @@ describe('SSR hydration', () => {
           <span>hello</span>
         </div>`,
       components: {
-        Child
+        Child,
       },
       methods: {
-        log
-      }
+        log,
+      },
     }
 
     const container = document.createElement('div')
@@ -586,7 +796,7 @@ describe('SSR hydration', () => {
       template: `
         <div>
           <button class="parent-click" @click="throwError">click me</button>
-        </div>`
+        </div>`,
     }
 
     const container = document.createElement('div')
@@ -613,7 +823,7 @@ describe('SSR hydration', () => {
       template: `
         <div>
           <input class="parent-click" @blur="throwError"/>
-        </div>`
+        </div>`,
     }
 
     const container = document.createElement('div')
@@ -639,14 +849,14 @@ describe('SSR hydration', () => {
             {
               onClick: () => {
                 count.value++
-              }
+              },
             },
-            count.value
+            count.value,
           )
-      }
+      },
     }
     const { vnode, container } = mountWithHydration('<span>0</span>', () =>
-      h(Suspense, () => h(AsyncChild))
+      h(Suspense, () => h(AsyncChild)),
     )
     expect(vnode.el).toBe(container.firstChild)
     // wait for hydration to finish
@@ -656,6 +866,54 @@ describe('SSR hydration', () => {
     expect(container.innerHTML).toBe(`<span>1</span>`)
   })
 
+  // #6638
+  test('Suspense + async component', async () => {
+    let isSuspenseResolved = false
+    let isSuspenseResolvedInChild: any
+    const AsyncChild = defineAsyncComponent(() =>
+      Promise.resolve(
+        defineComponent({
+          setup() {
+            isSuspenseResolvedInChild = isSuspenseResolved
+            const count = ref(0)
+            return () =>
+              h(
+                'span',
+                {
+                  onClick: () => {
+                    count.value++
+                  },
+                },
+                count.value,
+              )
+          },
+        }),
+      ),
+    )
+    const { vnode, container } = mountWithHydration('<span>0</span>', () =>
+      h(
+        Suspense,
+        {
+          onResolve() {
+            isSuspenseResolved = true
+          },
+        },
+        () => h(AsyncChild),
+      ),
+    )
+    expect(vnode.el).toBe(container.firstChild)
+    // wait for hydration to finish
+    await new Promise(r => setTimeout(r))
+
+    expect(isSuspenseResolvedInChild).toBe(false)
+    expect(isSuspenseResolved).toBe(true)
+
+    // assert interaction
+    triggerEvent('click', container.querySelector('span')!)
+    await nextTick()
+    expect(container.innerHTML).toBe(`<span>1</span>`)
+  })
+
   test('Suspense (full integration)', async () => {
     const mountedCalls: number[] = []
     const asyncDeps: Promise<any>[] = []
@@ -676,11 +934,11 @@ describe('SSR hydration', () => {
             {
               onClick: () => {
                 count.value++
-              }
+              },
             },
-            count.value
+            count.value,
           )
-      }
+      },
     })
 
     const done = vi.fn()
@@ -693,18 +951,18 @@ describe('SSR hydration', () => {
         </div>
       </Suspense>`,
       components: {
-        AsyncChild
+        AsyncChild,
       },
       methods: {
-        done
-      }
+        done,
+      },
     }
 
     const container = document.createElement('div')
     // server render
     container.innerHTML = await renderToString(h(App))
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span>1</span><span>2</span></div>"`
+      `"<div><span>1</span><span>2</span></div>"`,
     )
     // reset asyncDeps from ssr
     asyncDeps.length = 0
@@ -721,21 +979,21 @@ describe('SSR hydration', () => {
     // should flush buffered effects
     expect(mountedCalls).toMatchObject([1, 2])
     expect(container.innerHTML).toMatch(
-      `<div><span>1</span><span>2</span></div>`
+      `<div><span>1</span><span>2</span></div>`,
     )
 
     const span1 = container.querySelector('span')!
     triggerEvent('click', span1)
     await nextTick()
     expect(container.innerHTML).toMatch(
-      `<div><span>2</span><span>2</span></div>`
+      `<div><span>2</span><span>2</span></div>`,
     )
 
     const span2 = span1.nextSibling as Element
     triggerEvent('click', span2)
     await nextTick()
     expect(container.innerHTML).toMatch(
-      `<div><span>2</span><span>3</span></div>`
+      `<div><span>2</span><span>3</span></div>`,
     )
   })
 
@@ -745,9 +1003,9 @@ describe('SSR hydration', () => {
       h(
         'button',
         {
-          onClick: spy
+          onClick: spy,
         },
-        'hello!'
+        'hello!',
       )
 
     let serverResolve: any
@@ -755,13 +1013,13 @@ describe('SSR hydration', () => {
       () =>
         new Promise(r => {
           serverResolve = r
-        })
+        }),
     )
 
     const App = {
       render() {
         return ['hello', h(AsyncComp), 'world']
-      }
+      },
     }
 
     // server render
@@ -769,7 +1027,7 @@ describe('SSR hydration', () => {
     serverResolve(Comp)
     const html = await htmlPromise
     expect(html).toMatchInlineSnapshot(
-      `"<!--[-->hello<button>hello!</button>world<!--]-->"`
+      `"<!--[-->hello<button>hello!</button>world<!--]-->"`,
     )
 
     // hydration
@@ -778,7 +1036,7 @@ describe('SSR hydration', () => {
       () =>
         new Promise(r => {
           clientResolve = r
-        })
+        }),
     )
 
     const container = document.createElement('div')
@@ -802,29 +1060,29 @@ describe('SSR hydration', () => {
     const Comp = {
       render() {
         return h('h1', 'Async component')
-      }
+      },
     }
     let serverResolve: any
     let AsyncComp = defineAsyncComponent(
       () =>
         new Promise(r => {
           serverResolve = r
-        })
+        }),
     )
 
-    const bol = ref(true)
+    const toggle = ref(true)
     const App = {
       setup() {
         onMounted(() => {
           // change state, this makes updateComponent(AsyncComp) execute before
           // the async component is resolved
-          bol.value = false
+          toggle.value = false
         })
 
         return () => {
-          return [bol.value ? 'hello' : 'world', h(AsyncComp)]
+          return [toggle.value ? 'hello' : 'world', h(AsyncComp)]
         }
-      }
+      },
     }
 
     // server render
@@ -832,7 +1090,7 @@ describe('SSR hydration', () => {
     serverResolve(Comp)
     const html = await htmlPromise
     expect(html).toMatchInlineSnapshot(
-      `"<!--[-->hello<h1>Async component</h1><!--]-->"`
+      `"<!--[-->hello<h1>Async component</h1><!--]-->"`,
     )
 
     // hydration
@@ -841,7 +1099,7 @@ describe('SSR hydration', () => {
       () =>
         new Promise(r => {
           clientResolve = r
-        })
+        }),
     )
 
     const container = document.createElement('div')
@@ -855,7 +1113,148 @@ describe('SSR hydration', () => {
     // should be hydrated now
     expect(`Hydration node mismatch`).not.toHaveBeenWarned()
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<!--[-->world<h1>Async component</h1><!--]-->"`
+      `"<!--[-->world<h1>Async component</h1><!--]-->"`,
+    )
+  })
+
+  test('hydrate safely when property used by async setup changed before render', async () => {
+    const toggle = ref(true)
+
+    const AsyncComp = {
+      async setup() {
+        await new Promise<void>(r => setTimeout(r, 10))
+        return () => h('h1', 'Async component')
+      },
+    }
+
+    const AsyncWrapper = {
+      render() {
+        return h(AsyncComp)
+      },
+    }
+
+    const SiblingComp = {
+      setup() {
+        toggle.value = false
+        return () => h('span')
+      },
+    }
+
+    const App = {
+      setup() {
+        return () =>
+          h(
+            Suspense,
+            {},
+            {
+              default: () => [
+                h('main', {}, [
+                  h(AsyncWrapper, {
+                    prop: toggle.value ? 'hello' : 'world',
+                  }),
+                  h(SiblingComp),
+                ]),
+              ],
+            },
+          )
+      },
+    }
+
+    // server render
+    const html = await renderToString(h(App))
+
+    expect(html).toMatchInlineSnapshot(
+      `"<main><h1 prop="hello">Async component</h1><span></span></main>"`,
+    )
+
+    expect(toggle.value).toBe(false)
+
+    // hydration
+
+    // reset the value
+    toggle.value = true
+    expect(toggle.value).toBe(true)
+
+    const container = document.createElement('div')
+    container.innerHTML = html
+    createSSRApp(App).mount(container)
+
+    await new Promise(r => setTimeout(r, 10))
+
+    expect(toggle.value).toBe(false)
+
+    // should be hydrated now
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1 prop="world">Async component</h1><span></span></main>"`,
+    )
+  })
+
+  test('hydrate safely when property used by deep nested async setup changed before render', async () => {
+    const toggle = ref(true)
+
+    const AsyncComp = {
+      async setup() {
+        await new Promise<void>(r => setTimeout(r, 10))
+        return () => h('h1', 'Async component')
+      },
+    }
+
+    const AsyncWrapper = { render: () => h(AsyncComp) }
+    const AsyncWrapperWrapper = { render: () => h(AsyncWrapper) }
+
+    const SiblingComp = {
+      setup() {
+        toggle.value = false
+        return () => h('span')
+      },
+    }
+
+    const App = {
+      setup() {
+        return () =>
+          h(
+            Suspense,
+            {},
+            {
+              default: () => [
+                h('main', {}, [
+                  h(AsyncWrapperWrapper, {
+                    prop: toggle.value ? 'hello' : 'world',
+                  }),
+                  h(SiblingComp),
+                ]),
+              ],
+            },
+          )
+      },
+    }
+
+    // server render
+    const html = await renderToString(h(App))
+
+    expect(html).toMatchInlineSnapshot(
+      `"<main><h1 prop="hello">Async component</h1><span></span></main>"`,
+    )
+
+    expect(toggle.value).toBe(false)
+
+    // hydration
+
+    // reset the value
+    toggle.value = true
+    expect(toggle.value).toBe(true)
+
+    const container = document.createElement('div')
+    container.innerHTML = html
+    createSSRApp(App).mount(container)
+
+    await new Promise(r => setTimeout(r, 10))
+
+    expect(toggle.value).toBe(false)
+
+    // should be hydrated now
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1 prop="world">Async component</h1><span></span></main>"`,
     )
   })
 
@@ -866,7 +1265,7 @@ describe('SSR hydration', () => {
       () =>
         new Promise(r => {
           resolve = r
-        })
+        }),
     )
 
     const show = ref(true)
@@ -876,7 +1275,7 @@ describe('SSR hydration', () => {
     createSSRApp({
       render() {
         return h('div', [show.value ? h(AsyncComp) : h('div', 'hi')])
-      }
+      },
     }).mount(root)
 
     show.value = false
@@ -891,7 +1290,7 @@ describe('SSR hydration', () => {
       () =>
         new Promise(r => {
           resolve = r
-        })
+        }),
     )
 
     const show = ref(true)
@@ -901,7 +1300,7 @@ describe('SSR hydration', () => {
     createSSRApp({
       render() {
         return h('div', [show.value ? h(AsyncComp) : h('div', 'hi')])
-      }
+      },
     }).mount(root)
 
     show.value = false
@@ -913,7 +1312,7 @@ describe('SSR hydration', () => {
   test('elements with camel-case in svg ', () => {
     const { vnode, container } = mountWithHydration(
       '<animateTransform></animateTransform>',
-      () => h('animateTransform')
+      () => h('animateTransform'),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(`Hydration node mismatch`).not.toHaveBeenWarned()
@@ -923,7 +1322,7 @@ describe('SSR hydration', () => {
     const svgContainer = document.createElement('svg')
     svgContainer.innerHTML = '<g></g>'
     const app = createSSRApp({
-      render: () => h('g')
+      render: () => h('g'),
     })
 
     expect(
@@ -931,18 +1330,16 @@ describe('SSR hydration', () => {
         app.mount(svgContainer).$.subTree as VNode<Node, Element> & {
           el: Element
         }
-      ).el instanceof SVGElement
+      ).el instanceof SVGElement,
     )
   })
 
   test('force hydrate prop with `.prop` modifier', () => {
-    const { container } = mountWithHydration(
-      '<input type="checkbox" :indeterminate.prop="true">',
-      () =>
-        h('input', {
-          type: 'checkbox',
-          '.indeterminate': true
-        })
+    const { container } = mountWithHydration('<input type="checkbox">', () =>
+      h('input', {
+        type: 'checkbox',
+        '.indeterminate': true,
+      }),
     )
     expect((container.firstChild! as any).indeterminate).toBe(true)
   })
@@ -957,10 +1354,10 @@ describe('SSR hydration', () => {
             { type: 'checkbox', 'true-value': true },
             null,
             PatchFlags.PROPS,
-            ['true-value']
+            ['true-value'],
           ),
-          [[vModelCheckbox, true]]
-        )
+          [[vModelCheckbox, true]],
+        ),
     )
     expect((container.firstChild as any)._trueValue).toBe(true)
   })
@@ -973,35 +1370,55 @@ describe('SSR hydration', () => {
           'input',
           { type: 'checkbox', indeterminate: '' },
           null,
-          PatchFlags.HOISTED
-        )
+          PatchFlags.CACHED,
+        ),
     )
     expect((container.firstChild as any).indeterminate).toBe(true)
   })
 
   test('force hydrate select option with non-string value bindings', () => {
     const { container } = mountWithHydration(
-      '<select><option :value="true">ok</option></select>',
+      '<select><option value="true">ok</option></select>',
       () =>
         h('select', [
           // hoisted because bound value is a constant...
-          createVNode('option', { value: true }, null, -1 /* HOISTED */)
-        ])
+          createVNode('option', { value: true }, null, -1 /* HOISTED */),
+        ]),
     )
     expect((container.firstChild!.firstChild as any)._value).toBe(true)
   })
 
+  // #7203
+  test('force hydrate custom element with dynamic props', () => {
+    class MyElement extends HTMLElement {
+      foo = ''
+      constructor() {
+        super()
+      }
+    }
+    customElements.define('my-element-7203', MyElement)
+
+    const msg = ref('bar')
+    const container = document.createElement('div')
+    container.innerHTML = '<my-element-7203></my-element-7203>'
+    const app = createSSRApp({
+      render: () => h('my-element-7203', { foo: msg.value }),
+    })
+    app.mount(container)
+    expect((container.firstChild as any).foo).toBe(msg.value)
+  })
+
   // #5728
   test('empty text node in slot', () => {
     const Comp = {
       render(this: any) {
         return renderSlot(this.$slots, 'default', {}, () => [
-          createTextVNode('')
+          createTextVNode(''),
         ])
-      }
+      },
     }
     const { container, vnode } = mountWithHydration('<!--[--><!--]-->', () =>
-      h(Comp)
+      h(Comp),
     )
     expect(container.childNodes.length).toBe(3)
     const text = container.childNodes[1]
@@ -1011,6 +1428,53 @@ describe('SSR hydration', () => {
     expect((vnode as any).component?.subTree.children[0].el).toBe(text)
   })
 
+  // #7215
+  test('empty text node', () => {
+    const Comp = {
+      render(this: any) {
+        return h('p', [''])
+      },
+    }
+    const { container } = mountWithHydration('<p></p>', () => h(Comp))
+    expect(container.childNodes.length).toBe(1)
+    const p = container.childNodes[0]
+    expect(p.childNodes.length).toBe(1)
+    const text = p.childNodes[0]
+    expect(text.nodeType).toBe(3)
+  })
+
+  // #11372
+  test('object style value tracking in prod', async () => {
+    __DEV__ = false
+    try {
+      const style = reactive({ color: 'red' })
+      const Comp = {
+        render(this: any) {
+          return (
+            openBlock(),
+            createElementBlock(
+              'div',
+              {
+                style: normalizeStyle(style),
+              },
+              null,
+              4 /* STYLE */,
+            )
+          )
+        },
+      }
+      const { container } = mountWithHydration(
+        `<div style="color: red;"></div>`,
+        () => h(Comp),
+      )
+      style.color = 'green'
+      await nextTick()
+      expect(container.innerHTML).toBe(`<div style="color: green;"></div>`)
+    } finally {
+      __DEV__ = true
+    }
+  })
+
   test('app.unmount()', async () => {
     const container = document.createElement('DIV')
     container.innerHTML = '<button></button>'
@@ -1022,9 +1486,9 @@ describe('SSR hydration', () => {
 
         return () =>
           h('button', {
-            onClick: () => count.value++
+            onClick: () => count.value++,
           })
-      }
+      },
     })
 
     const app = createSSRApp(App)
@@ -1041,7 +1505,7 @@ describe('SSR hydration', () => {
   // #6637
   test('stringified root fragment', () => {
     mountWithHydration(`<!--[--><div></div><!--]-->`, () =>
-      createStaticVNode(`<div></div>`, 1)
+      createStaticVNode(`<div></div>`, 1),
     )
     expect(`mismatch`).not.toHaveBeenWarned()
   })
@@ -1054,9 +1518,9 @@ describe('SSR hydration', () => {
           Transition,
           { appear: true },
           {
-            default: () => h('div', 'foo')
-          }
-        )
+            default: () => h('div', 'foo'),
+          },
+        ),
     )
     expect(container.firstChild).toMatchInlineSnapshot(`
       <div
@@ -1078,9 +1542,9 @@ describe('SSR hydration', () => {
           Transition,
           { appear: true },
           {
-            default: () => (show ? h('div', 'foo') : createCommentVNode(''))
-          }
-        )
+            default: () => (show ? h('div', 'foo') : createCommentVNode('')),
+          },
+        ),
     )
     expect(container.firstChild).toMatchInlineSnapshot('<!---->')
     expect(vnode.el).toBe(container.firstChild)
@@ -1097,9 +1561,9 @@ describe('SSR hydration', () => {
           { appear: true },
           {
             default: () =>
-              withDirectives(createVNode('div', null, 'foo'), [[vShow, show]])
-          }
-        )
+              withDirectives(createVNode('div', null, 'foo'), [[vShow, show]]),
+          },
+        ),
     )
     expect(container.firstChild).toMatchInlineSnapshot(`
       <div
@@ -1109,11 +1573,128 @@ describe('SSR hydration', () => {
         foo
       </div>
     `)
-    expect((container.firstChild as any)[vShowOldKey]).toBe('')
+    expect((container.firstChild as any)[vShowOriginalDisplay]).toBe('')
     expect(vnode.el).toBe(container.firstChild)
     expect(`mismatch`).not.toHaveBeenWarned()
   })
 
+  test('transition appear w/ event listener', async () => {
+    const container = document.createElement('div')
+    container.innerHTML = `<template><button>0</button></template>`
+    createSSRApp({
+      data() {
+        return {
+          count: 0,
+        }
+      },
+      template: `
+        <Transition appear>
+          <button @click="count++">{{count}}</button>
+        </Transition>
+      `,
+    }).mount(container)
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <button
+        class="v-enter-from v-enter-active"
+      >
+        0
+      </button>
+    `)
+
+    triggerEvent('click', container.querySelector('button')!)
+    await nextTick()
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <button
+        class="v-enter-from v-enter-active"
+      >
+        1
+      </button>
+    `)
+  })
+
+  // #10607
+  test('update component stable slot (prod + optimized mode)', async () => {
+    __DEV__ = false
+    try {
+      const container = document.createElement('div')
+      container.innerHTML = `<template><div show="false"><!--[--><div><div><!----></div></div><div>0</div><!--]--></div></template>`
+      const Comp = {
+        render(this: any) {
+          return (
+            openBlock(),
+            createElementBlock('div', null, [
+              renderSlot(this.$slots, 'default'),
+            ])
+          )
+        },
+      }
+      const show = ref(false)
+      const clicked = ref(false)
+
+      const Wrapper = {
+        setup() {
+          const items = ref<number[]>([])
+          onMounted(() => {
+            items.value = [1]
+          })
+          return () => {
+            return (
+              openBlock(),
+              createBlock(Comp, null, {
+                default: withCtx(() => [
+                  createElementVNode('div', null, [
+                    createElementVNode('div', null, [
+                      clicked.value
+                        ? (openBlock(),
+                          createElementBlock('div', { key: 0 }, 'foo'))
+                        : createCommentVNode('v-if', true),
+                    ]),
+                  ]),
+                  createElementVNode(
+                    'div',
+                    null,
+                    items.value.length,
+                    1 /* TEXT */,
+                  ),
+                ]),
+                _: 1 /* STABLE */,
+              })
+            )
+          }
+        },
+      }
+      createSSRApp({
+        components: { Wrapper },
+        data() {
+          return { show }
+        },
+        template: `<Wrapper :show="show"/>`,
+      }).mount(container)
+
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div show="false"><!--[--><div><div><!----></div></div><div>1</div><!--]--></div>`,
+      )
+
+      show.value = true
+      await nextTick()
+      expect(async () => {
+        clicked.value = true
+        await nextTick()
+      }).not.toThrow("Cannot read properties of null (reading 'insertBefore')")
+
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div show="true"><!--[--><div><div><div>foo</div></div></div><div>1</div><!--]--></div>`,
+      )
+    } catch (e) {
+      throw e
+    } finally {
+      __DEV__ = true
+    }
+  })
+
   describe('mismatch handling', () => {
     test('text node', () => {
       const { container } = mountWithHydration(`foo`, () => 'bar')
@@ -1123,35 +1704,35 @@ describe('SSR hydration', () => {
 
     test('element text content', () => {
       const { container } = mountWithHydration(`<div>foo</div>`, () =>
-        h('div', 'bar')
+        h('div', 'bar'),
       )
       expect(container.innerHTML).toBe('<div>bar</div>')
-      expect(`Hydration text content mismatch in <div>`).toHaveBeenWarned()
+      expect(`Hydration text content mismatch`).toHaveBeenWarned()
     })
 
     test('not enough children', () => {
       const { container } = mountWithHydration(`<div></div>`, () =>
-        h('div', [h('span', 'foo'), h('span', 'bar')])
+        h('div', [h('span', 'foo'), h('span', 'bar')]),
       )
       expect(container.innerHTML).toBe(
-        '<div><span>foo</span><span>bar</span></div>'
+        '<div><span>foo</span><span>bar</span></div>',
       )
-      expect(`Hydration children mismatch in <div>`).toHaveBeenWarned()
+      expect(`Hydration children mismatch`).toHaveBeenWarned()
     })
 
     test('too many children', () => {
       const { container } = mountWithHydration(
         `<div><span>foo</span><span>bar</span></div>`,
-        () => h('div', [h('span', 'foo')])
+        () => h('div', [h('span', 'foo')]),
       )
       expect(container.innerHTML).toBe('<div><span>foo</span></div>')
-      expect(`Hydration children mismatch in <div>`).toHaveBeenWarned()
+      expect(`Hydration children mismatch`).toHaveBeenWarned()
     })
 
     test('complete mismatch', () => {
       const { container } = mountWithHydration(
         `<div><span>foo</span><span>bar</span></div>`,
-        () => h('div', [h('div', 'foo'), h('p', 'bar')])
+        () => h('div', [h('div', 'foo'), h('p', 'bar')]),
       )
       expect(container.innerHTML).toBe('<div><div>foo</div><p>bar</p></div>')
       expect(`Hydration node mismatch`).toHaveBeenWarnedTimes(2)
@@ -1160,7 +1741,7 @@ describe('SSR hydration', () => {
     test('fragment mismatch removal', () => {
       const { container } = mountWithHydration(
         `<div><!--[--><div>foo</div><div>bar</div><!--]--></div>`,
-        () => h('div', [h('span', 'replaced')])
+        () => h('div', [h('span', 'replaced')]),
       )
       expect(container.innerHTML).toBe('<div><span>replaced</span></div>')
       expect(`Hydration node mismatch`).toHaveBeenWarned()
@@ -1169,10 +1750,10 @@ describe('SSR hydration', () => {
     test('fragment not enough children', () => {
       const { container } = mountWithHydration(
         `<div><!--[--><div>foo</div><!--]--><div>baz</div></div>`,
-        () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')])
+        () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
       )
       expect(container.innerHTML).toBe(
-        '<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>'
+        '<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
       )
       expect(`Hydration node mismatch`).toHaveBeenWarned()
     })
@@ -1180,10 +1761,10 @@ describe('SSR hydration', () => {
     test('fragment too many children', () => {
       const { container } = mountWithHydration(
         `<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>`,
-        () => h('div', [[h('div', 'foo')], h('div', 'baz')])
+        () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
       )
       expect(container.innerHTML).toBe(
-        '<div><!--[--><div>foo</div><!--]--><div>baz</div></div>'
+        '<div><!--[--><div>foo</div><!--]--><div>baz</div></div>',
       )
       // fragment ends early and attempts to hydrate the extra <div>bar</div>
       // as 2nd fragment child.
@@ -1198,7 +1779,7 @@ describe('SSR hydration', () => {
       document.body.appendChild(teleportContainer)
 
       mountWithHydration('<!--teleport start--><!--teleport end-->', () =>
-        h(Teleport, { to: '#teleport' }, [h('span', 'value')])
+        h(Teleport, { to: '#teleport' }, [h('span', 'value')]),
       )
       expect(teleportContainer.innerHTML).toBe(`<span>value</span>`)
       expect(`Hydration children mismatch`).toHaveBeenWarned()
@@ -1206,7 +1787,7 @@ describe('SSR hydration', () => {
 
     test('comment mismatch (element)', () => {
       const { container } = mountWithHydration(`<div><span></span></div>`, () =>
-        h('div', [createCommentVNode('hi')])
+        h('div', [createCommentVNode('hi')]),
       )
       expect(container.innerHTML).toBe('<div><!--hi--></div>')
       expect(`Hydration node mismatch`).toHaveBeenWarned()
@@ -1214,10 +1795,398 @@ describe('SSR hydration', () => {
 
     test('comment mismatch (text)', () => {
       const { container } = mountWithHydration(`<div>foobar</div>`, () =>
-        h('div', [createCommentVNode('hi')])
+        h('div', [createCommentVNode('hi')]),
       )
       expect(container.innerHTML).toBe('<div><!--hi--></div>')
       expect(`Hydration node mismatch`).toHaveBeenWarned()
     })
+
+    test('class mismatch', () => {
+      mountWithHydration(`<div class="foo bar"></div>`, () =>
+        h('div', { class: ['foo', 'bar'] }),
+      )
+      mountWithHydration(`<div class="foo bar"></div>`, () =>
+        h('div', { class: { foo: true, bar: true } }),
+      )
+      mountWithHydration(`<div class="foo bar"></div>`, () =>
+        h('div', { class: 'foo bar' }),
+      )
+      // SVG classes
+      mountWithHydration(`<svg class="foo bar"></svg>`, () =>
+        h('svg', { class: 'foo bar' }),
+      )
+      // class with different order
+      mountWithHydration(`<div class="foo bar"></div>`, () =>
+        h('div', { class: 'bar foo' }),
+      )
+      expect(`Hydration class mismatch`).not.toHaveBeenWarned()
+      mountWithHydration(`<div class="foo bar"></div>`, () =>
+        h('div', { class: 'foo' }),
+      )
+      expect(`Hydration class mismatch`).toHaveBeenWarned()
+    })
+
+    test('style mismatch', () => {
+      mountWithHydration(`<div style="color:red;"></div>`, () =>
+        h('div', { style: { color: 'red' } }),
+      )
+      mountWithHydration(`<div style="color:red;"></div>`, () =>
+        h('div', { style: `color:red;` }),
+      )
+      mountWithHydration(
+        `<div style="color:red; font-size: 12px;"></div>`,
+        () => h('div', { style: `font-size: 12px; color:red;` }),
+      )
+      mountWithHydration(`<div style="color:red;display:none;"></div>`, () =>
+        withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+          [vShow, false],
+        ]),
+      )
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+      mountWithHydration(`<div style="color:red;"></div>`, () =>
+        h('div', { style: { color: 'green' } }),
+      )
+      expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+    })
+
+    test('style mismatch when no style attribute is present', () => {
+      mountWithHydration(`<div></div>`, () =>
+        h('div', { style: { color: 'red' } }),
+      )
+      expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+    })
+
+    test('style mismatch w/ v-show', () => {
+      mountWithHydration(`<div style="color:red;display:none"></div>`, () =>
+        withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+          [vShow, false],
+        ]),
+      )
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+      mountWithHydration(`<div style="color:red;"></div>`, () =>
+        withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+          [vShow, false],
+        ]),
+      )
+      expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+    })
+
+    test('attr mismatch', () => {
+      mountWithHydration(`<div id="foo"></div>`, () => h('div', { id: 'foo' }))
+      mountWithHydration(`<div spellcheck></div>`, () =>
+        h('div', { spellcheck: '' }),
+      )
+      mountWithHydration(`<div></div>`, () => h('div', { id: undefined }))
+      // boolean
+      mountWithHydration(`<select multiple></div>`, () =>
+        h('select', { multiple: true }),
+      )
+      mountWithHydration(`<select multiple></div>`, () =>
+        h('select', { multiple: 'multiple' }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<div></div>`, () => h('div', { id: 'foo' }))
+      expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(1)
+
+      mountWithHydration(`<div id="bar"></div>`, () => h('div', { id: 'foo' }))
+      expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
+    })
+
+    test('attr special case: textarea value', () => {
+      mountWithHydration(`<textarea>foo</textarea>`, () =>
+        h('textarea', { value: 'foo' }),
+      )
+      mountWithHydration(`<textarea></textarea>`, () =>
+        h('textarea', { value: '' }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<textarea>foo</textarea>`, () =>
+        h('textarea', { value: 'bar' }),
+      )
+      expect(`Hydration attribute mismatch`).toHaveBeenWarned()
+    })
+
+    // #11873
+    test('<textarea> with newlines at the beginning', async () => {
+      const render = () => h('textarea', null, '\nhello')
+      const html = await renderToString(createSSRApp({ render }))
+      mountWithHydration(html, render)
+      expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('<pre> with newlines at the beginning', async () => {
+      const render = () => h('pre', null, '\n')
+      const html = await renderToString(createSSRApp({ render }))
+      mountWithHydration(html, render)
+      expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('boolean attr handling', () => {
+      mountWithHydration(`<input />`, () => h('input', { readonly: false }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<input readonly />`, () =>
+        h('input', { readonly: true }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<input readonly="readonly" />`, () =>
+        h('input', { readonly: true }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('client value is null or undefined', () => {
+      mountWithHydration(`<div></div>`, () =>
+        h('div', { draggable: undefined }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<input />`, () => h('input', { type: null }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('should not warn against object values', () => {
+      mountWithHydration(`<input />`, () => h('input', { from: {} }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('should not warn on falsy bindings of non-property keys', () => {
+      mountWithHydration(`<button />`, () => h('button', { href: undefined }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('should not warn on non-renderable option values', () => {
+      mountWithHydration(`<select><option>hello</option></select>`, () =>
+        h('select', [h('option', { value: ['foo'] }, 'hello')]),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('should not warn css v-bind', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div style="--foo:red;color:var(--foo);" />`
+      const app = createSSRApp({
+        setup() {
+          useCssVars(() => ({
+            foo: 'red',
+          }))
+          return () => h('div', { style: { color: 'var(--foo)' } })
+        },
+      })
+      app.mount(container)
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
+
+    // #10317 - test case from #10325
+    test('css vars should only be added to expected on component root dom', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div style="--foo:red;"><div style="color:var(--foo);" /></div>`
+      const app = createSSRApp({
+        setup() {
+          useCssVars(() => ({
+            foo: 'red',
+          }))
+          return () =>
+            h('div', null, [h('div', { style: { color: 'var(--foo)' } })])
+        },
+      })
+      app.mount(container)
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
+
+    // #11188
+    test('css vars support fallthrough', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div style="padding: 4px;--foo:red;"></div>`
+      const app = createSSRApp({
+        setup() {
+          useCssVars(() => ({
+            foo: 'red',
+          }))
+          return () => h(Child)
+        },
+      })
+      const Child = {
+        setup() {
+          return () => h('div', { style: 'padding: 4px' })
+        },
+      }
+      app.mount(container)
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
+
+    // #11189
+    test('should not warn for directives that mutate DOM in created', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div class="test red"></div>`
+      const vColor: ObjectDirective = {
+        created(el, binding) {
+          el.classList.add(binding.value)
+        },
+      }
+      const app = createSSRApp({
+        setup() {
+          return () =>
+            withDirectives(h('div', { class: 'test' }), [[vColor, 'red']])
+        },
+      })
+      app.mount(container)
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('escape css var name', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div style="padding: 4px;--foo\\.bar:red;"></div>`
+      const app = createSSRApp({
+        setup() {
+          useCssVars(() => ({
+            'foo.bar': 'red',
+          }))
+          return () => h(Child)
+        },
+      })
+      const Child = {
+        setup() {
+          return () => h('div', { style: 'padding: 4px' })
+        },
+      }
+      app.mount(container)
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
+  })
+
+  describe('data-allow-mismatch', () => {
+    test('element text content', () => {
+      const { container } = mountWithHydration(
+        `<div data-allow-mismatch="text">foo</div>`,
+        () => h('div', 'bar'),
+      )
+      expect(container.innerHTML).toBe(
+        '<div data-allow-mismatch="text">bar</div>',
+      )
+      expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('not enough children', () => {
+      const { container } = mountWithHydration(
+        `<div data-allow-mismatch="children"></div>`,
+        () => h('div', [h('span', 'foo'), h('span', 'bar')]),
+      )
+      expect(container.innerHTML).toBe(
+        '<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>',
+      )
+      expect(`Hydration children mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('too many children', () => {
+      const { container } = mountWithHydration(
+        `<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>`,
+        () => h('div', [h('span', 'foo')]),
+      )
+      expect(container.innerHTML).toBe(
+        '<div data-allow-mismatch="children"><span>foo</span></div>',
+      )
+      expect(`Hydration children mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('complete mismatch', () => {
+      const { container } = mountWithHydration(
+        `<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>`,
+        () => h('div', [h('div', 'foo'), h('p', 'bar')]),
+      )
+      expect(container.innerHTML).toBe(
+        '<div data-allow-mismatch="children"><div>foo</div><p>bar</p></div>',
+      )
+      expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('fragment mismatch removal', () => {
+      const { container } = mountWithHydration(
+        `<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--></div>`,
+        () => h('div', [h('span', 'replaced')]),
+      )
+      expect(container.innerHTML).toBe(
+        '<div data-allow-mismatch="children"><span>replaced</span></div>',
+      )
+      expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('fragment not enough children', () => {
+      const { container } = mountWithHydration(
+        `<div data-allow-mismatch="children"><!--[--><div>foo</div><!--]--><div>baz</div></div>`,
+        () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
+      )
+      expect(container.innerHTML).toBe(
+        '<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
+      )
+      expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('fragment too many children', () => {
+      const { container } = mountWithHydration(
+        `<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>`,
+        () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
+      )
+      expect(container.innerHTML).toBe(
+        '<div data-allow-mismatch="children"><!--[--><div>foo</div><!--]--><div>baz</div></div>',
+      )
+      // fragment ends early and attempts to hydrate the extra <div>bar</div>
+      // as 2nd fragment child.
+      expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+      // excessive children removal
+      expect(`Hydration children mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('comment mismatch (element)', () => {
+      const { container } = mountWithHydration(
+        `<div data-allow-mismatch="children"><span></span></div>`,
+        () => h('div', [createCommentVNode('hi')]),
+      )
+      expect(container.innerHTML).toBe(
+        '<div data-allow-mismatch="children"><!--hi--></div>',
+      )
+      expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('comment mismatch (text)', () => {
+      const { container } = mountWithHydration(
+        `<div data-allow-mismatch="children">foobar</div>`,
+        () => h('div', [createCommentVNode('hi')]),
+      )
+      expect(container.innerHTML).toBe(
+        '<div data-allow-mismatch="children"><!--hi--></div>',
+      )
+      expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('class mismatch', () => {
+      mountWithHydration(
+        `<div class="foo bar" data-allow-mismatch="class"></div>`,
+        () => h('div', { class: 'foo' }),
+      )
+      expect(`Hydration class mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('style mismatch', () => {
+      mountWithHydration(
+        `<div style="color:red;" data-allow-mismatch="style"></div>`,
+        () => h('div', { style: { color: 'green' } }),
+      )
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('attr mismatch', () => {
+      mountWithHydration(`<div data-allow-mismatch="attribute"></div>`, () =>
+        h('div', { id: 'foo' }),
+      )
+      mountWithHydration(
+        `<div id="bar" data-allow-mismatch="attribute"></div>`,
+        () => h('div', { id: 'foo' }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
   })
 })
diff --git a/packages/runtime-core/__tests__/misc.spec.ts b/packages/runtime-core/__tests__/misc.spec.ts
index 4cb93eb41..dd4ab64f4 100644
--- a/packages/runtime-core/__tests__/misc.spec.ts
+++ b/packages/runtime-core/__tests__/misc.spec.ts
@@ -1,4 +1,4 @@
-import { render, h, nodeOps, reactive, isReactive } from '@vue/runtime-test'
+import { h, isReactive, nodeOps, reactive, render } from '@vue/runtime-test'
 
 describe('misc', () => {
   test('component public instance should not be observable', () => {
@@ -7,7 +7,7 @@ describe('misc', () => {
       render() {},
       mounted() {
         instance = this
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(instance).toBeDefined()
diff --git a/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts b/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
index 1de05b67b..9c985379c 100644
--- a/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
+++ b/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
@@ -4,20 +4,23 @@
 // using DOM renderer because this case is mostly DOM-specific
 
 import {
-  h,
-  render,
-  nextTick,
-  mergeProps,
-  ref,
-  onUpdated,
-  defineComponent,
-  openBlock,
-  createBlock,
-  FunctionalComponent,
-  createCommentVNode,
   Fragment,
-  withModifiers
+  type FunctionalComponent,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createElementVNode,
+  defineComponent,
+  h,
+  mergeProps,
+  nextTick,
+  onUpdated,
+  openBlock,
+  ref,
+  render,
+  withModifiers,
 } from '@vue/runtime-dom'
+import { createApp } from 'vue'
 import { PatchFlags } from '@vue/shared'
 
 describe('attribute fallthrough', () => {
@@ -41,9 +44,9 @@ describe('attribute fallthrough', () => {
             class: 'c' + count.value,
             style: { color: count.value ? 'red' : 'green' },
             onClick: inc,
-            'data-id': count.value + 1
+            'data-id': count.value + 1,
           })
-      }
+      },
     }
 
     const Child = {
@@ -54,11 +57,11 @@ describe('attribute fallthrough', () => {
             'div',
             {
               class: 'c2',
-              style: { fontWeight: 'bold' }
+              style: { fontWeight: 'bold' },
             },
-            props.foo
+            props.foo,
           )
-      }
+      },
     }
 
     const root = document.createElement('div')
@@ -103,7 +106,7 @@ describe('attribute fallthrough', () => {
         id: 'test',
         class: 'c' + count.value,
         style: { color: count.value ? 'red' : 'green' },
-        onClick: inc
+        onClick: inc,
       })
 
     const Child = (props: any) => {
@@ -112,9 +115,9 @@ describe('attribute fallthrough', () => {
         'div',
         {
           class: 'c2',
-          style: { fontWeight: 'bold' }
+          style: { fontWeight: 'bold' },
         },
-        props.foo
+        props.foo,
       )
     }
 
@@ -161,7 +164,7 @@ describe('attribute fallthrough', () => {
         id: 'test',
         class: 'c' + count.value,
         style: { color: count.value ? 'red' : 'green' },
-        onClick: inc
+        onClick: inc,
       })
 
     const Child = (props: { foo: number }) => {
@@ -170,9 +173,9 @@ describe('attribute fallthrough', () => {
         'div',
         {
           class: 'c2',
-          style: { fontWeight: 'bold' }
+          style: { fontWeight: 'bold' },
         },
-        props.foo
+        props.foo,
       )
     }
     Child.props = ['foo']
@@ -220,9 +223,9 @@ describe('attribute fallthrough', () => {
             id: 'test',
             class: 'c' + count.value,
             style: { color: count.value ? 'red' : 'green' },
-            onClick: inc
+            onClick: inc,
           })
-      }
+      },
     }
 
     const Child = {
@@ -232,13 +235,13 @@ describe('attribute fallthrough', () => {
         // this will result in merging the same attrs, but should be deduped by
         // `mergeProps`.
         return () => h(GrandChild, props)
-      }
+      },
     }
 
     const GrandChild = defineComponent({
       props: {
         id: String,
-        foo: Number
+        foo: Number,
       },
       setup(props) {
         onUpdated(grandChildUpdated)
@@ -248,11 +251,11 @@ describe('attribute fallthrough', () => {
             {
               id: props.id,
               class: 'c2',
-              style: { fontWeight: 'bold' }
+              style: { fontWeight: 'bold' },
             },
-            props.foo
+            props.foo,
           )
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -287,7 +290,7 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent' })
-      }
+      },
     }
 
     const Child = defineComponent({
@@ -295,7 +298,7 @@ describe('attribute fallthrough', () => {
       inheritAttrs: false,
       render() {
         return h('div', this.foo)
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -311,11 +314,11 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent' })
-      }
+      },
     }
 
     const mixin = {
-      inheritAttrs: false
+      inheritAttrs: false,
     }
 
     const Child = defineComponent({
@@ -323,7 +326,7 @@ describe('attribute fallthrough', () => {
       props: ['foo'],
       render() {
         return h('div', this.foo)
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -338,7 +341,7 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent' })
-      }
+      },
     }
 
     const Child = defineComponent({
@@ -349,13 +352,13 @@ describe('attribute fallthrough', () => {
           'div',
           mergeProps(
             {
-              class: 'child'
+              class: 'child',
             },
-            this.$attrs
+            this.$attrs,
           ),
-          this.foo
+          this.foo,
         )
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -370,14 +373,14 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child = defineComponent({
       props: ['foo'],
       render() {
         return [h('div'), h('div')]
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -400,7 +403,7 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { onClick: inc })
-      }
+      },
     }
 
     const Child = defineComponent({
@@ -409,12 +412,12 @@ describe('attribute fallthrough', () => {
           'div',
           mergeProps(
             {
-              onClick: withModifiers(() => {}, ['prevent', 'stop'])
+              onClick: withModifiers(() => {}, ['prevent', 'stop']),
             },
-            this.$attrs
-          )
+            this.$attrs,
+          ),
         )
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -431,14 +434,14 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child = defineComponent({
       props: ['foo'],
       render() {
         return [h('div'), h('div', this.$attrs)]
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -455,14 +458,14 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child = defineComponent({
       props: ['foo'],
       setup(_props, { attrs }) {
         return () => [h('div'), h('div', attrs)]
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -479,12 +482,12 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child: FunctionalComponent = (_, { attrs }) => [
       h('div'),
-      h('div', attrs)
+      h('div', attrs),
     ]
 
     Child.props = ['foo']
@@ -502,7 +505,7 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child = (props: any) => [h('div'), h('div', { class: props.class })]
@@ -520,7 +523,7 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child: FunctionalComponent = () => [h('div'), h('div')]
@@ -543,14 +546,14 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { 'aria-hidden': aria.value, class: cls.value })
-      }
+      },
     }
 
     const Child = {
       props: [],
       render() {
         return openBlock(), createBlock('div')
-      }
+      },
     }
 
     const root = document.createElement('div')
@@ -577,20 +580,20 @@ describe('attribute fallthrough', () => {
           {
             onClick: () => {
               this.$emit('click', 'custom')
-            }
+            },
           },
-          'hello'
+          'hello',
         )
-      }
+      },
     })
 
     const onClick = vi.fn()
     const App = {
       render() {
         return h(Child, {
-          onClick
+          onClick,
         })
-      }
+      },
     }
 
     const root = document.createElement('div')
@@ -610,7 +613,7 @@ describe('attribute fallthrough', () => {
       return h('button', {
         onClick: () => {
           emit('click', 'custom')
-        }
+        },
       })
     }
     Child.emits = ['click']
@@ -619,9 +622,9 @@ describe('attribute fallthrough', () => {
     const App = {
       render() {
         return h(Child, {
-          onClick
+          onClick,
         })
-      }
+      },
     }
 
     const root = document.createElement('div')
@@ -640,7 +643,7 @@ describe('attribute fallthrough', () => {
     const Hello = {
       setup() {
         return () => h(Child, { class: 'foo', onClick: click })
-      }
+      },
     }
 
     const Child = {
@@ -653,12 +656,12 @@ describe('attribute fallthrough', () => {
             [
               createCommentVNode('hello'),
               h('button'),
-              createCommentVNode('world')
+              createCommentVNode('world'),
             ],
-            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT
+            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
           )
         )
-      }
+      },
     }
 
     const root = document.createElement('div')
@@ -666,13 +669,65 @@ describe('attribute fallthrough', () => {
     render(h(Hello), root)
 
     expect(root.innerHTML).toBe(
-      `<!--hello--><button class="foo"></button><!--world-->`
+      `<!--hello--><button class="foo"></button><!--world-->`,
     )
     const button = root.children[0] as HTMLElement
     button.dispatchEvent(new CustomEvent('click'))
     expect(click).toHaveBeenCalled()
   })
 
+  it('should support fallthrough for nested dev root fragments', async () => {
+    const toggle = ref(false)
+
+    const Child = {
+      setup() {
+        return () => (
+          openBlock(),
+          createElementBlock(
+            Fragment,
+            null,
+            [
+              createCommentVNode(' comment A '),
+              toggle.value
+                ? (openBlock(), createElementBlock('span', { key: 0 }, 'Foo'))
+                : (openBlock(),
+                  createElementBlock(
+                    Fragment,
+                    { key: 1 },
+                    [
+                      createCommentVNode(' comment B '),
+                      createElementVNode('div', null, 'Bar'),
+                    ],
+                    PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+                  )),
+            ],
+            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+          )
+        )
+      },
+    }
+
+    const Root = {
+      setup() {
+        return () => (openBlock(), createBlock(Child, { class: 'red' }))
+      },
+    }
+
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    render(h(Root), root)
+
+    expect(root.innerHTML).toBe(
+      `<!-- comment A --><!-- comment B --><div class="red">Bar</div>`,
+    )
+
+    toggle.value = true
+    await nextTick()
+    expect(root.innerHTML).toBe(
+      `<!-- comment A --><span class=\"red\">Foo</span>`,
+    )
+  })
+
   // #1989
   it('should not fallthrough v-model listeners with corresponding declared prop', () => {
     let textFoo = ''
@@ -686,9 +741,9 @@ describe('attribute fallthrough', () => {
             modelValue: textFoo,
             'onUpdate:modelValue': (val: string) => {
               textFoo = val
-            }
+            },
           })
-      }
+      },
     })
 
     const Child = defineComponent({
@@ -700,9 +755,9 @@ describe('attribute fallthrough', () => {
             'onUpdate:modelValue': (val: string) => {
               textBar = val
               emit('update:modelValue', 'from Child')
-            }
+            },
           })
-      }
+      },
     })
 
     const GrandChild = defineComponent({
@@ -713,9 +768,9 @@ describe('attribute fallthrough', () => {
             onClick() {
               click()
               emit('update:modelValue', 'from GrandChild')
-            }
+            },
           })
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -729,4 +784,31 @@ describe('attribute fallthrough', () => {
     expect(textBar).toBe('from GrandChild')
     expect(textFoo).toBe('from Child')
   })
+
+  // covers uncaught regression #10710
+  it('should track this.$attrs access in slots', async () => {
+    const GrandChild = {
+      template: `<slot/>`,
+    }
+    const Child = {
+      components: { GrandChild },
+      template: `<div><GrandChild>{{ $attrs.foo }}</GrandChild></div>`,
+    }
+
+    const obj = ref(1)
+    const App = {
+      render() {
+        return h(Child, { foo: obj.value })
+      },
+    }
+
+    const root = document.createElement('div')
+    createApp(App).mount(root)
+
+    expect(root.innerHTML).toBe('<div foo="1">1</div>')
+
+    obj.value = 2
+    await nextTick()
+    expect(root.innerHTML).toBe('<div foo="2">2</div>')
+  })
 })
diff --git a/packages/runtime-core/__tests__/rendererChildren.spec.ts b/packages/runtime-core/__tests__/rendererChildren.spec.ts
index 747626ad5..2c3e5ff0d 100644
--- a/packages/runtime-core/__tests__/rendererChildren.spec.ts
+++ b/packages/runtime-core/__tests__/rendererChildren.spec.ts
@@ -1,12 +1,12 @@
 // reference: https://github.com/vuejs/vue/blob/dev/test/unit/modules/vdom/patch/children.spec.js
 import {
-  h,
-  render,
-  nodeOps,
+  type TestElement,
   TestNodeTypes,
-  TestElement,
+  h,
+  nodeOps,
+  render,
   serialize,
-  serializeInner
+  serializeInner,
 } from '@vue/runtime-test'
 function toSpan(content: any) {
   if (typeof content === 'string') {
@@ -65,6 +65,15 @@ test('array children -> text children', () => {
   expect(inner(root)).toBe('<div>hello</div>')
 })
 
+test('plain object child', () => {
+  const root = nodeOps.createElement('div')
+  const foo = { foo: '1' }
+  // @ts-expect-error
+  render(h('div', null, [foo]), root)
+  expect('Invalid VNode type').not.toHaveBeenWarned()
+  expect(inner(root)).toBe('<div>[object Object]</div>')
+})
+
 describe('renderer: keyed children', () => {
   let root: TestElement
   let elm: TestElement
@@ -99,7 +108,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '4',
-      '5'
+      '5',
     ])
   })
 
@@ -114,7 +123,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '4',
-      '5'
+      '5',
     ])
   })
 
@@ -129,7 +138,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '4',
-      '5'
+      '5',
     ])
   })
 
@@ -144,7 +153,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '4',
-      '5'
+      '5',
     ])
   })
 
@@ -156,7 +165,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '4',
-      '5'
+      '5',
     ])
 
     render(h('div'), root)
@@ -191,7 +200,7 @@ describe('renderer: keyed children', () => {
       '1',
       '2',
       '4',
-      '5'
+      '5',
     ])
   })
 
@@ -205,7 +214,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '1',
-      '4'
+      '4',
     ])
   })
 
@@ -219,7 +228,7 @@ describe('renderer: keyed children', () => {
       '1',
       '4',
       '2',
-      '3'
+      '3',
     ])
   })
 
@@ -242,7 +251,7 @@ describe('renderer: keyed children', () => {
       '4',
       '2',
       '3',
-      '1'
+      '1',
     ])
   })
 
@@ -257,7 +266,7 @@ describe('renderer: keyed children', () => {
       '1',
       '2',
       '3',
-      '6'
+      '6',
     ])
   })
 
@@ -291,7 +300,7 @@ describe('renderer: keyed children', () => {
       '4',
       '3',
       '2',
-      '1'
+      '1',
     ])
   })
 
@@ -306,7 +315,7 @@ describe('renderer: keyed children', () => {
       '2',
       '1',
       '5',
-      '0'
+      '0',
     ])
   })
 
@@ -324,15 +333,15 @@ describe('renderer: keyed children', () => {
       render(
         h(
           'span',
-          arr.map(n => spanNumWithOpacity(n, '1'))
+          arr.map(n => spanNumWithOpacity(n, '1')),
         ),
-        root
+        root,
       )
       elm = root.children[0] as TestElement
 
       for (let i = 0; i < elms; ++i) {
         expect(serializeInner(elm.children[i] as TestElement)).toBe(
-          i.toString()
+          i.toString(),
         )
         opacities[i] = Math.random().toFixed(5).toString()
       }
@@ -341,21 +350,21 @@ describe('renderer: keyed children', () => {
       render(
         h(
           'span',
-          arr.map(n => spanNumWithOpacity(shufArr[n], opacities[n]))
+          arr.map(n => spanNumWithOpacity(shufArr[n], opacities[n])),
         ),
-        root
+        root,
       )
       elm = root.children[0] as TestElement
       for (let i = 0; i < elms; ++i) {
         expect(serializeInner(elm.children[i] as TestElement)).toBe(
-          shufArr[i].toString()
+          shufArr[i].toString(),
         )
         expect(elm.children[i]).toMatchObject({
           props: {
             style: {
-              opacity: opacities[i]
-            }
-          }
+              opacity: opacities[i],
+            },
+          },
         })
       }
     }
@@ -367,22 +376,22 @@ describe('renderer: keyed children', () => {
         h('div', { key: 1 }, 'one'),
         h('div', { key: 2 }, 'two'),
         h('div', { key: 3 }, 'three'),
-        h('div', { key: 4 }, 'four')
+        h('div', { key: 4 }, 'four'),
       ]),
-      root
+      root,
     )
     elm = root.children[0] as TestElement
     expect((elm.children as TestElement[]).map(c => c.tag)).toEqual([
       'div',
       'div',
       'div',
-      'div'
+      'div',
     ])
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'one',
       'two',
       'three',
-      'four'
+      'four',
     ])
 
     render(
@@ -390,21 +399,21 @@ describe('renderer: keyed children', () => {
         h('div', { key: 4 }, 'four'),
         h('span', { key: 3 }, 'three'),
         h('span', { key: 2 }, 'two'),
-        h('div', { key: 1 }, 'one')
+        h('div', { key: 1 }, 'one'),
       ]),
-      root
+      root,
     )
     expect((elm.children as TestElement[]).map(c => c.tag)).toEqual([
       'div',
       'span',
       'span',
-      'div'
+      'div',
     ])
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'four',
       'three',
       'two',
-      'one'
+      'one',
     ])
   })
 
@@ -413,8 +422,8 @@ describe('renderer: keyed children', () => {
     elm = root.children[0] as TestElement
     expect(elm.children[0]).toMatchObject({
       props: {
-        class: 'hi'
-      }
+        class: 'hi',
+      },
     })
 
     render(h('div', [h('div', 'four')]), root)
@@ -423,8 +432,8 @@ describe('renderer: keyed children', () => {
       props: {
         // in the DOM renderer this will be ''
         // but the test renderer simply sets whatever value it receives.
-        class: null
-      }
+        class: null,
+      },
     })
     expect(serialize(elm.children[0])).toBe(`<div>four</div>`)
   })
@@ -456,7 +465,7 @@ describe('renderer: unkeyed children', () => {
       '1',
       'a',
       'b',
-      'c'
+      'c',
     ])
 
     elm = renderChildren(['d', 'a', 'b', 'c', 1, 'e'])
@@ -467,7 +476,7 @@ describe('renderer: unkeyed children', () => {
       'b',
       'c',
       '1',
-      'e'
+      'e',
     ])
   })
 
@@ -478,7 +487,7 @@ describe('renderer: unkeyed children', () => {
     elm = renderChildren(['hello', 'world'])
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'hello',
-      'world'
+      'world',
     ])
   })
 
@@ -488,7 +497,7 @@ describe('renderer: unkeyed children', () => {
     elm = root.children[0] as TestElement
     expect(elm.children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'text'
+      text: 'text',
     })
 
     render(h('div', ['text', h('span', ['hello'])]), root)
@@ -496,7 +505,7 @@ describe('renderer: unkeyed children', () => {
     elm = root.children[0] as TestElement
     expect(elm.children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'text'
+      text: 'text',
     })
   })
 
@@ -506,7 +515,7 @@ describe('renderer: unkeyed children', () => {
     elm = root.children[0] as TestElement
     expect(elm.children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'text'
+      text: 'text',
     })
 
     render(h('div', ['text2', h('span', ['hello'])]), root)
@@ -514,7 +523,7 @@ describe('renderer: unkeyed children', () => {
     elm = root.children[0] as TestElement
     expect(elm.children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'text2'
+      text: 'text2',
     })
   })
 
@@ -526,7 +535,7 @@ describe('renderer: unkeyed children', () => {
     render(h('div', [h('span', ['hello']), h('span', ['world'])]), root)
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'hello',
-      'world'
+      'world',
     ])
   })
 
@@ -538,24 +547,24 @@ describe('renderer: unkeyed children', () => {
     render(h('div', [h('div', ['hello']), h('span', ['world'])]), root)
     expect((elm.children as TestElement[]).map(c => c.tag)).toEqual([
       'div',
-      'span'
+      'span',
     ])
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'hello',
-      'world'
+      'world',
     ])
   })
 
   test('remove elements with updating children without keys', () => {
     render(
       h('div', [h('span', ['one']), h('span', ['two']), h('span', ['three'])]),
-      root
+      root,
     )
     elm = root.children[0] as TestElement
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'one',
       'two',
-      'three'
+      'three',
     ])
 
     render(h('div', [h('span', ['one']), h('span', ['three'])]), root)
@@ -587,7 +596,7 @@ describe('renderer: unkeyed children', () => {
     elm = root.children[0] as TestElement
     expect((elm.children as TestElement[]).map(c => serialize(c))).toEqual([
       'one',
-      '<span>two</span>'
+      '<span>two</span>',
     ])
 
     render(h('div', [h('div', ['three'])]), root)
@@ -599,24 +608,24 @@ describe('renderer: unkeyed children', () => {
   test('reorder elements', () => {
     render(
       h('div', [h('span', ['one']), h('div', ['two']), h('b', ['three'])]),
-      root
+      root,
     )
     elm = root.children[0] as TestElement
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'one',
       'two',
-      'three'
+      'three',
     ])
 
     render(
       h('div', [h('b', ['three']), h('div', ['two']), h('span', ['one'])]),
-      root
+      root,
     )
     elm = root.children[0] as TestElement
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'three',
       'two',
-      'one'
+      'one',
     ])
   })
 
diff --git a/packages/runtime-core/__tests__/rendererComponent.spec.ts b/packages/runtime-core/__tests__/rendererComponent.spec.ts
index 37daafa97..fefc41370 100644
--- a/packages/runtime-core/__tests__/rendererComponent.spec.ts
+++ b/packages/runtime-core/__tests__/rendererComponent.spec.ts
@@ -1,16 +1,16 @@
 import {
-  ref,
+  type Ref,
+  type SetupContext,
+  type VNode,
   h,
-  render,
-  nodeOps,
-  serializeInner,
-  nextTick,
-  VNode,
-  provide,
   inject,
-  Ref,
+  nextTick,
+  nodeOps,
+  provide,
+  ref,
+  render,
+  serializeInner,
   watch,
-  SetupContext
 } from '@vue/runtime-test'
 
 describe('renderer: component', () => {
@@ -24,7 +24,7 @@ describe('renderer: component', () => {
       render: () => {
         // let Parent first rerender
         return (parentVnode = h(Child))
-      }
+      },
     }
 
     const Child = {
@@ -32,7 +32,7 @@ describe('renderer: component', () => {
         return value.value
           ? (childVnode1 = h('div'))
           : (childVnode2 = h('span'))
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -50,7 +50,7 @@ describe('renderer: component', () => {
     const Comp = {
       render: () => {
         return h('div')
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp, { id: 'foo', class: 'bar' }), root)
@@ -61,7 +61,7 @@ describe('renderer: component', () => {
     const Comp = {
       render: () => {
         return h('div', 'test')
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp, { id: 'foo', class: 'bar' }), root)
@@ -72,7 +72,7 @@ describe('renderer: component', () => {
     const Comp1 = {
       render: () => {
         return h('div', 'foo')
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp1), root)
@@ -81,7 +81,7 @@ describe('renderer: component', () => {
     const Comp2 = {
       render: () => {
         return h('span', 'foo')
-      }
+      },
     }
     render(h(Comp2), root)
     expect(serializeInner(root)).toBe('<span>foo</span>')
@@ -92,20 +92,20 @@ describe('renderer: component', () => {
     const Comp1 = {
       emits: ['foo'],
       updated: vi.fn(),
-      render: () => null
+      render: () => null,
     }
     const root = nodeOps.createElement('div')
     render(
       h(Comp1, {
-        onFoo: () => {}
+        onFoo: () => {},
       }),
-      root
+      root,
     )
     render(
       h(Comp1, {
-        onFoo: () => {}
+        onFoo: () => {},
       }),
-      root
+      root,
     )
     expect(Comp1.updated).not.toHaveBeenCalled()
   })
@@ -119,7 +119,7 @@ describe('renderer: component', () => {
         return () => {
           return [h('div', n.value), h(Child)]
         }
-      }
+      },
     }
 
     const Child = {
@@ -130,7 +130,7 @@ describe('renderer: component', () => {
         return () => {
           return h('div', n.value)
         }
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -150,24 +150,24 @@ describe('renderer: component', () => {
     let instance: any
     const Comp = {
       props: {
-        testProp: String
+        testProp: String,
       },
 
       data() {
         return {
-          testData: undefined
+          testData: undefined,
         }
       },
 
       watch: {
         testProp() {
-          // @ts-ignore
+          // @ts-expect-error
           propWatchSpy(this.$el)
         },
         testData() {
-          // @ts-ignore
+          // @ts-expect-error
           dataWatchSpy(this.$el)
-        }
+        },
       },
 
       created() {
@@ -176,7 +176,7 @@ describe('renderer: component', () => {
 
       render() {
         return h('div')
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -206,11 +206,11 @@ describe('renderer: component', () => {
             h('div', inner.value),
             h(Child, {
               value: outer.value,
-              onUpdate: (val: number) => (inner.value = val)
-            })
+              onUpdate: (val: number) => (inner.value = val),
+            }),
           ]
         }
-      }
+      },
     }
 
     const Child = {
@@ -218,13 +218,13 @@ describe('renderer: component', () => {
       setup(props: any, { emit }: SetupContext) {
         watch(
           () => props.value,
-          (val: number) => emit('update', val)
+          (val: number) => emit('update', val),
         )
 
         return () => {
           return h('div', props.value)
         }
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -236,6 +236,105 @@ describe('renderer: component', () => {
     expect(serializeInner(root)).toBe(`<div>1</div><div>1</div>`)
   })
 
+  test('child only updates once when triggered in multiple ways', async () => {
+    const a = ref(0)
+    const calls: string[] = []
+
+    const Parent = {
+      setup() {
+        return () => {
+          calls.push('render parent')
+          return h(Child, { count: a.value }, () => a.value)
+        }
+      },
+    }
+
+    const Child = {
+      props: ['count'],
+      setup(props: any) {
+        return () => {
+          calls.push('render child')
+          return `${props.count} - ${a.value}`
+        }
+      },
+    }
+
+    render(h(Parent), nodeOps.createElement('div'))
+    expect(calls).toEqual(['render parent', 'render child'])
+
+    // This will trigger child rendering directly, as well as via a prop change
+    a.value++
+    await nextTick()
+    expect(calls).toEqual([
+      'render parent',
+      'render child',
+      'render parent',
+      'render child',
+    ])
+  })
+
+  // #7745
+  test(`an earlier update doesn't lead to excessive subsequent updates`, async () => {
+    const globalCount = ref(0)
+    const parentCount = ref(0)
+    const calls: string[] = []
+
+    const Root = {
+      setup() {
+        return () => {
+          calls.push('render root')
+          return h(Parent, { count: globalCount.value })
+        }
+      },
+    }
+
+    const Parent = {
+      props: ['count'],
+      setup(props: any) {
+        return () => {
+          calls.push('render parent')
+          return [
+            `${globalCount.value} - ${props.count}`,
+            h(Child, { count: parentCount.value }),
+          ]
+        }
+      },
+    }
+
+    const Child = {
+      props: ['count'],
+      setup(props: any) {
+        watch(
+          () => props.count,
+          () => {
+            calls.push('child watcher')
+            globalCount.value = props.count
+          },
+        )
+
+        return () => {
+          calls.push('render child')
+        }
+      },
+    }
+
+    render(h(Root), nodeOps.createElement('div'))
+    expect(calls).toEqual(['render root', 'render parent', 'render child'])
+
+    parentCount.value++
+    await nextTick()
+    expect(calls).toEqual([
+      'render root',
+      'render parent',
+      'render child',
+      'render parent',
+      'child watcher',
+      'render child',
+      'render root',
+      'render parent',
+    ])
+  })
+
   // #2521
   test('should pause tracking deps when initializing legacy options', async () => {
     let childInstance = null as any
@@ -243,7 +342,7 @@ describe('renderer: component', () => {
       props: ['foo'],
       data() {
         return {
-          count: 0
+          count: 0,
         }
       },
       watch: {
@@ -251,8 +350,8 @@ describe('renderer: component', () => {
           immediate: true,
           handler() {
             ;(this as any).count
-          }
-        }
+          },
+        },
       },
       created() {
         childInstance = this as any
@@ -260,14 +359,14 @@ describe('renderer: component', () => {
       },
       render() {
         return h('h1', (this as any).count)
-      }
+      },
     }
 
     const App = {
       setup() {
         return () => h(Child)
       },
-      updated: vi.fn()
+      updated: vi.fn(),
     }
 
     const root = nodeOps.createElement('div')
@@ -289,7 +388,7 @@ describe('renderer: component', () => {
         },
         render() {
           return h('h1', (this as any).foo)
-        }
+        },
       }
       const root = nodeOps.createElement('div')
 
@@ -305,7 +404,7 @@ describe('renderer: component', () => {
       render() {
         const c = [h(Comp)]
         return [c, c, c]
-      }
+      },
     }
 
     const ids: number[] = []
@@ -313,7 +412,7 @@ describe('renderer: component', () => {
       render: () => h('h1'),
       beforeUnmount() {
         ids.push((this as any).$.uid)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -332,7 +431,7 @@ describe('renderer: component', () => {
     const App = {
       render() {
         return h(Comp, { text: text.value })
-      }
+      },
     }
 
     const Comp = {
@@ -340,7 +439,7 @@ describe('renderer: component', () => {
       render(this: any) {
         spy()
         return h('h1', this.text)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -359,20 +458,20 @@ describe('renderer: component', () => {
     const App = {
       setup() {
         return {
-          __isScriptSetup: true
+          __isScriptSetup: true,
         }
       },
 
       render(this: any) {
         return this.$attrs.id
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
     render(h(App), root)
 
     expect(
-      `Property '$attrs' was accessed via 'this'. Avoid using 'this' in templates.`
+      `Property '$attrs' was accessed via 'this'. Avoid using 'this' in templates.`,
     ).toHaveBeenWarned()
   })
 })
diff --git a/packages/runtime-core/__tests__/rendererElement.spec.ts b/packages/runtime-core/__tests__/rendererElement.spec.ts
index 4e044ad40..8103832e8 100644
--- a/packages/runtime-core/__tests__/rendererElement.spec.ts
+++ b/packages/runtime-core/__tests__/rendererElement.spec.ts
@@ -1,9 +1,9 @@
 import {
+  type TestElement,
   h,
-  render,
+  serializeInner as inner,
   nodeOps,
-  TestElement,
-  serializeInner as inner
+  render,
 } from '@vue/runtime-test'
 
 describe('renderer: element', () => {
diff --git a/packages/runtime-core/__tests__/rendererFragment.spec.ts b/packages/runtime-core/__tests__/rendererFragment.spec.ts
index d0c9e5c79..81cf7b8df 100644
--- a/packages/runtime-core/__tests__/rendererFragment.spec.ts
+++ b/packages/runtime-core/__tests__/rendererFragment.spec.ts
@@ -1,19 +1,20 @@
 import {
-  h,
-  createVNode,
-  render,
-  nodeOps,
-  TestNodeTypes,
-  TestElement,
   Fragment,
-  resetOps,
-  dumpOps,
   NodeOpTypes,
-  serializeInner,
-  createTextVNode,
+  type TestElement,
+  TestNodeTypes,
+  type VNode,
   createBlock,
+  createCommentVNode,
+  createTextVNode,
+  createVNode,
+  dumpOps,
+  h,
+  nodeOps,
   openBlock,
-  createCommentVNode
+  render,
+  resetOps,
+  serializeInner,
 } from '@vue/runtime-test'
 import { PatchFlags } from '@vue/shared'
 import { renderList } from '../src/helpers/renderList'
@@ -23,7 +24,7 @@ describe('renderer: fragment', () => {
     const App = {
       render() {
         return [h('div', 'one'), 'two']
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -33,23 +34,23 @@ describe('renderer: fragment', () => {
     expect(root.children.length).toBe(4)
     expect(root.children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: ''
+      text: '',
     })
     expect(root.children[1]).toMatchObject({
       type: TestNodeTypes.ELEMENT,
-      tag: 'div'
+      tag: 'div',
     })
     expect((root.children[1] as TestElement).children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'one'
+      text: 'one',
     })
     expect(root.children[2]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'two'
+      text: 'two',
     })
     expect(root.children[3]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: ''
+      text: '',
     })
   })
 
@@ -64,22 +65,22 @@ describe('renderer: fragment', () => {
     const root = nodeOps.createElement('div')
     render(
       h(Fragment, [h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>one</div><div>two</div>`)
 
     resetOps()
     render(
       h(Fragment, [h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>two</div><div>one</div>`)
     const ops = dumpOps()
     // should be moving nodes instead of re-creating or patching them
     expect(ops).toMatchObject([
       {
-        type: NodeOpTypes.INSERT
-      }
+        type: NodeOpTypes.INSERT,
+      },
     ])
   })
 
@@ -95,11 +96,11 @@ describe('renderer: fragment', () => {
     // should be patching nodes instead of moving or re-creating them
     expect(ops).toMatchObject([
       {
-        type: NodeOpTypes.SET_ELEMENT_TEXT
+        type: NodeOpTypes.SET_ELEMENT_TEXT,
       },
       {
-        type: NodeOpTypes.SET_ELEMENT_TEXT
-      }
+        type: NodeOpTypes.SET_ELEMENT_TEXT,
+      },
     ])
   })
 
@@ -111,11 +112,11 @@ describe('renderer: fragment', () => {
         null,
         [
           createVNode('div', null, 'one', PatchFlags.TEXT),
-          createTextVNode('two')
+          createTextVNode('two'),
         ],
-        PatchFlags.UNKEYED_FRAGMENT
+        PatchFlags.UNKEYED_FRAGMENT,
       ),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>one</div>two`)
 
@@ -126,11 +127,11 @@ describe('renderer: fragment', () => {
         [
           createVNode('div', null, 'foo', PatchFlags.TEXT),
           createTextVNode('bar'),
-          createTextVNode('baz')
+          createTextVNode('baz'),
         ],
-        PatchFlags.UNKEYED_FRAGMENT
+        PatchFlags.UNKEYED_FRAGMENT,
       ),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>foo</div>barbaz`)
 
@@ -140,11 +141,11 @@ describe('renderer: fragment', () => {
         null,
         [
           createTextVNode('baz'),
-          createVNode('div', null, 'foo', PatchFlags.TEXT)
+          createVNode('div', null, 'foo', PatchFlags.TEXT),
         ],
-        PatchFlags.UNKEYED_FRAGMENT
+        PatchFlags.UNKEYED_FRAGMENT,
       ),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`baz<div>foo</div>`)
   })
@@ -157,9 +158,9 @@ describe('renderer: fragment', () => {
         Fragment,
         null,
         [h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')],
-        PatchFlags.KEYED_FRAGMENT
+        PatchFlags.KEYED_FRAGMENT,
       ),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>one</div><div>two</div>`)
 
@@ -169,17 +170,17 @@ describe('renderer: fragment', () => {
         Fragment,
         null,
         [h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')],
-        PatchFlags.KEYED_FRAGMENT
+        PatchFlags.KEYED_FRAGMENT,
       ),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>two</div><div>one</div>`)
     const ops = dumpOps()
     // should be moving nodes instead of re-creating or patching them
     expect(ops).toMatchObject([
       {
-        type: NodeOpTypes.INSERT
-      }
+        type: NodeOpTypes.INSERT,
+      },
     ])
   })
 
@@ -190,13 +191,13 @@ describe('renderer: fragment', () => {
         h('div', { key: 1 }, 'outer'),
         h(Fragment, { key: 2 }, [
           h('div', { key: 1 }, 'one'),
-          h('div', { key: 2 }, 'two')
-        ])
+          h('div', { key: 2 }, 'two'),
+        ]),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(
-      `<div><div>outer</div><div>one</div><div>two</div></div>`
+      `<div><div>outer</div><div>one</div><div>two</div></div>`,
     )
 
     resetOps()
@@ -204,14 +205,14 @@ describe('renderer: fragment', () => {
       h('div', [
         h(Fragment, { key: 2 }, [
           h('div', { key: 2 }, 'two'),
-          h('div', { key: 1 }, 'one')
+          h('div', { key: 1 }, 'one'),
         ]),
-        h('div', { key: 1 }, 'outer')
+        h('div', { key: 1 }, 'outer'),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(
-      `<div><div>two</div><div>one</div><div>outer</div></div>`
+      `<div><div>two</div><div>one</div><div>outer</div></div>`,
     )
     const ops = dumpOps()
     // should be moving nodes instead of re-creating them
@@ -224,7 +225,7 @@ describe('renderer: fragment', () => {
       { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
       { type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
       { type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
-      { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } }
+      { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
     ])
   })
 
@@ -236,13 +237,13 @@ describe('renderer: fragment', () => {
         h('div', { key: 1 }, 'outer'),
         h(Fragment, { key: 2 }, [
           h('div', { key: 1 }, 'one'),
-          h('div', { key: 2 }, 'two')
-        ])
+          h('div', { key: 2 }, 'two'),
+        ]),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(
-      `<div>outer</div><div>one</div><div>two</div>`
+      `<div>outer</div><div>one</div><div>two</div>`,
     )
 
     resetOps()
@@ -250,14 +251,14 @@ describe('renderer: fragment', () => {
       h(Fragment, [
         h(Fragment, { key: 2 }, [
           h('div', { key: 2 }, 'two'),
-          h('div', { key: 1 }, 'one')
+          h('div', { key: 1 }, 'one'),
         ]),
-        h('div', { key: 1 }, 'outer')
+        h('div', { key: 1 }, 'outer'),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(
-      `<div>two</div><div>one</div><div>outer</div>`
+      `<div>two</div><div>one</div><div>outer</div>`,
     )
     const ops = dumpOps()
     // should be moving nodes instead of re-creating them
@@ -266,7 +267,7 @@ describe('renderer: fragment', () => {
       { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
       { type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
       { type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
-      { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } }
+      { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
     ])
 
     // should properly remove nested fragments
@@ -294,28 +295,86 @@ describe('renderer: fragment', () => {
                 [
                   createCommentVNode('comment'),
                   hoisted,
-                  createVNode('div', null, item, PatchFlags.TEXT)
+                  createVNode('div', null, item, PatchFlags.TEXT),
                 ],
-                PatchFlags.STABLE_FRAGMENT
+                PatchFlags.STABLE_FRAGMENT,
               )
             )
           }),
-          PatchFlags.KEYED_FRAGMENT
+          PatchFlags.KEYED_FRAGMENT,
         )
       )
     }
 
     render(renderFn(['one', 'two']), root)
     expect(serializeInner(root)).toBe(
-      `<!--comment--><span></span><div>one</div><!--comment--><span></span><div>two</div>`
+      `<!--comment--><span></span><div>one</div><!--comment--><span></span><div>two</div>`,
     )
 
     render(renderFn(['two', 'one']), root)
     expect(serializeInner(root)).toBe(
-      `<!--comment--><span></span><div>two</div><!--comment--><span></span><div>one</div>`
+      `<!--comment--><span></span><div>two</div><!--comment--><span></span><div>one</div>`,
     )
   })
 
+  // #10547
+  test('`template` fragment w/ render function', () => {
+    const renderFn = (vnode: VNode) => {
+      return (
+        openBlock(),
+        createBlock(
+          Fragment,
+          null,
+          [createTextVNode('text'), (openBlock(), createBlock(vnode))],
+          PatchFlags.STABLE_FRAGMENT,
+        )
+      )
+    }
+
+    const root = nodeOps.createElement('div')
+    const foo = h('div', ['foo'])
+    const bar = h('div', [h('div', 'bar')])
+
+    render(renderFn(foo), root)
+    expect(serializeInner(root)).toBe(`text<div>foo</div>`)
+
+    render(renderFn(bar), root)
+    expect(serializeInner(root)).toBe(`text<div><div>bar</div></div>`)
+
+    render(renderFn(foo), root)
+    expect(serializeInner(root)).toBe(`text<div>foo</div>`)
+  })
+
+  // #10547
+  test('`template` fragment w/ render function + keyed vnode', () => {
+    const renderFn = (vnode: VNode) => {
+      return (
+        openBlock(),
+        createBlock(
+          Fragment,
+          null,
+          [createTextVNode('text'), (openBlock(), createBlock(vnode))],
+          PatchFlags.STABLE_FRAGMENT,
+        )
+      )
+    }
+
+    const root = nodeOps.createElement('div')
+    const foo = h('div', { key: 1 }, [h('div', 'foo')])
+    const bar = h('div', { key: 2 }, [h('div', 'bar'), h('div', 'bar')])
+
+    render(renderFn(foo), root)
+    expect(serializeInner(root)).toBe(`text<div><div>foo</div></div>`)
+
+    render(renderFn(bar), root)
+    expect(serializeInner(root)).toBe(
+      `text<div><div>bar</div><div>bar</div></div>`,
+    )
+
+    render(renderFn(foo), root)
+    expect(serializeInner(root)).toBe(`text<div><div>foo</div></div>`)
+  })
+
   // #6852
   test('`template` keyed fragment w/ text', () => {
     const root = nodeOps.createElement('div')
@@ -334,13 +393,13 @@ describe('renderer: fragment', () => {
                 { key: item },
                 [
                   createTextVNode('text'),
-                  createVNode('div', null, item, PatchFlags.TEXT)
+                  createVNode('div', null, item, PatchFlags.TEXT),
                 ],
-                PatchFlags.STABLE_FRAGMENT
+                PatchFlags.STABLE_FRAGMENT,
               )
             )
           }),
-          PatchFlags.KEYED_FRAGMENT
+          PatchFlags.KEYED_FRAGMENT,
         )
       )
     }
@@ -351,4 +410,16 @@ describe('renderer: fragment', () => {
     render(renderFn(['two', 'one']), root)
     expect(serializeInner(root)).toBe(`text<div>two</div>text<div>one</div>`)
   })
+
+  // #10007
+  test('empty fragment', () => {
+    const root = nodeOps.createElement('div')
+
+    const renderFn = () => {
+      return openBlock(true), createBlock(Fragment, null)
+    }
+
+    render(renderFn(), root)
+    expect(serializeInner(root)).toBe('')
+  })
 })
diff --git a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
index c2073b966..2658f4071 100644
--- a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
+++ b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
@@ -1,29 +1,32 @@
 import {
-  h,
   Fragment,
+  type FunctionalComponent,
+  type SetupContext,
   Teleport,
-  createVNode,
-  createCommentVNode,
-  openBlock,
-  createBlock,
-  render,
-  nodeOps,
-  TestElement,
-  serialize,
-  serializeInner as inner,
-  VNode,
-  ref,
-  nextTick,
-  defineComponent,
-  withCtx,
-  renderSlot,
-  onBeforeUnmount,
-  createTextVNode,
-  SetupContext,
+  type TestElement,
+  type VNode,
   createApp,
-  FunctionalComponent,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createElementVNode,
+  createTextVNode,
+  createVNode,
+  defineComponent,
+  h,
+  serializeInner as inner,
+  nextTick,
+  nodeOps,
+  onBeforeUnmount,
+  onUnmounted,
+  openBlock,
+  ref,
+  render,
   renderList,
-  onUnmounted
+  renderSlot,
+  serialize,
+  setBlockTracking,
+  withCtx,
 } from '@vue/runtime-test'
 import { PatchFlags, SlotFlags } from '@vue/shared'
 import { SuspenseImpl } from '../src/components/Suspense'
@@ -40,7 +43,7 @@ describe('renderer: optimized mode', () => {
   const renderWithBlock = (renderChildren: () => VNode[]) => {
     render(
       (openBlock(), (block = createBlock('div', null, renderChildren()))),
-      root
+      root,
     )
   }
 
@@ -54,7 +57,7 @@ describe('renderer: optimized mode', () => {
   test('block can appear anywhere in the vdom tree', () => {
     render(
       h('div', (openBlock(), (block = createBlock('p', null, 'foo')))),
-      root
+      root,
     )
 
     expect(block.dynamicChildren!.length).toBe(0)
@@ -64,12 +67,12 @@ describe('renderer: optimized mode', () => {
   test('block should collect dynamic vnodes', () => {
     renderWithBlock(() => [
       createVNode('p', null, 'foo', PatchFlags.TEXT),
-      createVNode('i')
+      createVNode('i'),
     ])
 
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p>foo</p>'
+      '<p>foo</p>',
     )
   })
 
@@ -78,9 +81,9 @@ describe('renderer: optimized mode', () => {
       // disable tracking
       (openBlock(true),
       (block = createBlock('div', null, [
-        createVNode('p', null, 'foo', PatchFlags.TEXT)
+        createVNode('p', null, 'foo', PatchFlags.TEXT),
       ]))),
-      root
+      root,
     )
 
     expect(block.dynamicChildren!.length).toBe(0)
@@ -88,23 +91,23 @@ describe('renderer: optimized mode', () => {
 
   test('block as dynamic children', () => {
     renderWithBlock(() => [
-      (openBlock(), createBlock('div', { key: 0 }, [h('p')]))
+      (openBlock(), createBlock('div', { key: 0 }, [h('p')])),
     ])
 
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(block!.dynamicChildren![0].dynamicChildren!.length).toBe(0)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<div><p></p></div>'
+      '<div><p></p></div>',
     )
 
     renderWithBlock(() => [
-      (openBlock(), createBlock('div', { key: 1 }, [h('i')]))
+      (openBlock(), createBlock('div', { key: 1 }, [h('i')])),
     ])
 
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(block!.dynamicChildren![0].dynamicChildren!.length).toBe(0)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<div><i></i></div>'
+      '<div><i></i></div>',
     )
   })
 
@@ -114,7 +117,7 @@ describe('renderer: optimized mode', () => {
     expect(inner(root)).toBe('<div><p>foo</p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p>foo</p>'
+      '<p>foo</p>',
     )
 
     renderWithBlock(() => [createVNode('p', null, 'bar', PatchFlags.TEXT)])
@@ -122,73 +125,73 @@ describe('renderer: optimized mode', () => {
     expect(inner(root)).toBe('<div><p>bar</p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p>bar</p>'
+      '<p>bar</p>',
     )
   })
 
   test('PatchFlags: PatchFlags.CLASS', async () => {
     renderWithBlock(() => [
-      createVNode('p', { class: 'foo' }, '', PatchFlags.CLASS)
+      createVNode('p', { class: 'foo' }, '', PatchFlags.CLASS),
     ])
 
     expect(inner(root)).toBe('<div><p class="foo"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p class="foo"></p>'
+      '<p class="foo"></p>',
     )
 
     renderWithBlock(() => [
-      createVNode('p', { class: 'bar' }, '', PatchFlags.CLASS)
+      createVNode('p', { class: 'bar' }, '', PatchFlags.CLASS),
     ])
 
     expect(inner(root)).toBe('<div><p class="bar"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p class="bar"></p>'
+      '<p class="bar"></p>',
     )
   })
 
   test('PatchFlags: PatchFlags.STYLE', async () => {
     renderWithBlock(() => [
-      createVNode('p', { style: 'color: red' }, '', PatchFlags.STYLE)
+      createVNode('p', { style: 'color: red' }, '', PatchFlags.STYLE),
     ])
 
     expect(inner(root)).toBe('<div><p style="color: red"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p style="color: red"></p>'
+      '<p style="color: red"></p>',
     )
 
     renderWithBlock(() => [
-      createVNode('p', { style: 'color: green' }, '', PatchFlags.STYLE)
+      createVNode('p', { style: 'color: green' }, '', PatchFlags.STYLE),
     ])
 
     expect(inner(root)).toBe('<div><p style="color: green"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p style="color: green"></p>'
+      '<p style="color: green"></p>',
     )
   })
 
   test('PatchFlags: PatchFlags.PROPS', async () => {
     renderWithBlock(() => [
-      createVNode('p', { id: 'foo' }, '', PatchFlags.PROPS, ['id'])
+      createVNode('p', { id: 'foo' }, '', PatchFlags.PROPS, ['id']),
     ])
 
     expect(inner(root)).toBe('<div><p id="foo"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p id="foo"></p>'
+      '<p id="foo"></p>',
     )
 
     renderWithBlock(() => [
-      createVNode('p', { id: 'bar' }, '', PatchFlags.PROPS, ['id'])
+      createVNode('p', { id: 'bar' }, '', PatchFlags.PROPS, ['id']),
     ])
 
     expect(inner(root)).toBe('<div><p id="bar"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p id="bar"></p>'
+      '<p id="bar"></p>',
     )
   })
 
@@ -196,24 +199,24 @@ describe('renderer: optimized mode', () => {
     let propName = 'foo'
 
     renderWithBlock(() => [
-      createVNode('p', { [propName]: 'dynamic' }, '', PatchFlags.FULL_PROPS)
+      createVNode('p', { [propName]: 'dynamic' }, '', PatchFlags.FULL_PROPS),
     ])
 
     expect(inner(root)).toBe('<div><p foo="dynamic"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p foo="dynamic"></p>'
+      '<p foo="dynamic"></p>',
     )
 
     propName = 'bar'
     renderWithBlock(() => [
-      createVNode('p', { [propName]: 'dynamic' }, '', PatchFlags.FULL_PROPS)
+      createVNode('p', { [propName]: 'dynamic' }, '', PatchFlags.FULL_PROPS),
     ])
 
     expect(inner(root)).toBe('<div><p bar="dynamic"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p bar="dynamic"></p>'
+      '<p bar="dynamic"></p>',
     )
   })
 
@@ -228,18 +231,18 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode('p', null, item, PatchFlags.TEXT)
         }),
-        PatchFlags.STABLE_FRAGMENT
+        PatchFlags.STABLE_FRAGMENT,
       ))),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<p>foo</p><p>bar</p>')
     expect(block.dynamicChildren!.length).toBe(2)
     expect(serialize(block.dynamicChildren![0].el as TestElement)).toBe(
-      '<p>foo</p>'
+      '<p>foo</p>',
     )
     expect(serialize(block.dynamicChildren![1].el as TestElement)).toBe(
-      '<p>bar</p>'
+      '<p>bar</p>',
     )
 
     list = list.map(item => item.repeat(2))
@@ -251,18 +254,18 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode('p', null, item, PatchFlags.TEXT)
         }),
-        PatchFlags.STABLE_FRAGMENT
+        PatchFlags.STABLE_FRAGMENT,
       )),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<p>foofoo</p><p>barbar</p>')
     expect(block.dynamicChildren!.length).toBe(2)
     expect(serialize(block.dynamicChildren![0].el as TestElement)).toBe(
-      '<p>foofoo</p>'
+      '<p>foofoo</p>',
     )
     expect(serialize(block.dynamicChildren![1].el as TestElement)).toBe(
-      '<p>barbar</p>'
+      '<p>barbar</p>',
     )
   })
 
@@ -278,9 +281,9 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode(item.tag, null, item.text)
         }),
-        PatchFlags.UNKEYED_FRAGMENT
+        PatchFlags.UNKEYED_FRAGMENT,
       ))),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<p>foo</p>')
@@ -295,9 +298,9 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode(item.tag, null, item.text)
         }),
-        PatchFlags.UNKEYED_FRAGMENT
+        PatchFlags.UNKEYED_FRAGMENT,
       )),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<i>bar</i><p>foo</p>')
@@ -316,9 +319,9 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode(item.tag, { key: item.tag }, item.text)
         }),
-        PatchFlags.KEYED_FRAGMENT
+        PatchFlags.KEYED_FRAGMENT,
       ))),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<p>foo</p>')
@@ -333,9 +336,9 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode(item.tag, { key: item.tag }, item.text)
         }),
-        PatchFlags.KEYED_FRAGMENT
+        PatchFlags.KEYED_FRAGMENT,
       )),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<i>bar</i><p>foo</p>')
@@ -357,12 +360,12 @@ describe('renderer: optimized mode', () => {
                 'p',
                 { onVnodeMounted: spyMounted, onVnodeBeforeUpdate: spyUpdated },
                 '',
-                PatchFlags.NEED_PATCH
-              )
+                PatchFlags.NEED_PATCH,
+              ),
             ]))
           )
         }
-      }
+      },
     }
 
     render(h(Comp), root)
@@ -370,7 +373,7 @@ describe('renderer: optimized mode', () => {
     expect(inner(root)).toBe('<div><p></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p></p>'
+      '<p></p>',
     )
     expect(spyMounted).toHaveBeenCalledTimes(1)
     expect(spyUpdated).toHaveBeenCalledTimes(0)
@@ -381,7 +384,7 @@ describe('renderer: optimized mode', () => {
     expect(inner(root)).toBe('<div><p></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p></p>'
+      '<p></p>',
     )
     expect(spyMounted).toHaveBeenCalledTimes(1)
     expect(spyUpdated).toHaveBeenCalledTimes(1)
@@ -391,7 +394,7 @@ describe('renderer: optimized mode', () => {
     render(
       (openBlock(),
       (block = createBlock('div', null, [createVNode('p', null, 'foo')]))),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<div><p>foo</p></div>')
@@ -403,9 +406,9 @@ describe('renderer: optimized mode', () => {
         'div',
         null,
         [createVNode('i', null, 'bar')],
-        PatchFlags.BAIL
+        PatchFlags.BAIL,
       ))),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<div><i>bar</i></div>')
@@ -422,27 +425,27 @@ describe('renderer: optimized mode', () => {
             (openBlock(),
             (block = createBlock('div', null, {
               default: withCtx(() => [renderSlot(slots, 'default')]),
-              _: SlotFlags.FORWARDED
+              _: SlotFlags.FORWARDED,
             })))
 
           return vnode
         }
-      }
+      },
     })
 
     const foo = ref(0)
     const App = {
       setup() {
         return () => {
-          return createVNode(Comp, null, {
+          return createBlock(Comp, null, {
             default: withCtx(() => [
-              createVNode('p', null, foo.value, PatchFlags.TEXT)
+              createVNode('p', null, foo.value, PatchFlags.TEXT),
             ]),
             // Indicates that this is a stable slot to avoid bail out
-            _: SlotFlags.STABLE
+            _: SlotFlags.STABLE,
           })
         }
-      }
+      },
     }
 
     render(h(App), root)
@@ -452,8 +455,8 @@ describe('renderer: optimized mode', () => {
     expect(block!.dynamicChildren![0].dynamicChildren!.length).toBe(1)
     expect(
       serialize(
-        block!.dynamicChildren![0].dynamicChildren![0].el as TestElement
-      )
+        block!.dynamicChildren![0].dynamicChildren![0].el as TestElement,
+      ),
     ).toBe('<p>0</p>')
 
     foo.value++
@@ -474,12 +477,12 @@ describe('renderer: optimized mode', () => {
       setup() {
         onBeforeUnmount(spy)
         return () => 'child'
-      }
+      },
     }
     const Parent = () => (
       openBlock(),
       createBlock('div', null, [
-        createVNode('div', { style: {} }, [createVNode(Child)], 4 /* STYLE */)
+        createVNode('div', { style: {} }, [createVNode(Child)], 4 /* STYLE */),
       ])
     )
     render(h(Parent), root)
@@ -487,6 +490,32 @@ describe('renderer: optimized mode', () => {
     expect(spy).toHaveBeenCalledTimes(1)
   })
 
+  test('should call onUnmounted hook for dynamic components receiving an existing vnode w/ component children', async () => {
+    const spy = vi.fn()
+    const show = ref(1)
+    const Child = {
+      setup() {
+        onUnmounted(spy)
+        return () => 'child'
+      },
+    }
+    const foo = h('div', null, h(Child))
+    const app = createApp({
+      render() {
+        return show.value
+          ? (openBlock(),
+            createBlock('div', null, [(openBlock(), createBlock(foo))]))
+          : createCommentVNode('v-if', true)
+      },
+    })
+
+    app.mount(root)
+    show.value = 0
+    await nextTick()
+
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
   // #2444
   // `KEYED_FRAGMENT` and `UNKEYED_FRAGMENT` always need to diff its children
   test('non-stable Fragment always need to diff its children', () => {
@@ -496,13 +525,13 @@ describe('renderer: optimized mode', () => {
       setup() {
         onBeforeUnmount(spyA)
         return () => 'child'
-      }
+      },
     }
     const ChildB = {
       setup() {
         onBeforeUnmount(spyB)
         return () => 'child'
-      }
+      },
     }
     const Parent = () => (
       openBlock(),
@@ -512,15 +541,15 @@ describe('renderer: optimized mode', () => {
           Fragment,
           null,
           [createVNode(ChildA, { key: 0 })],
-          128 /* KEYED_FRAGMENT */
+          128 /* KEYED_FRAGMENT */,
         )),
         (openBlock(true),
         createBlock(
           Fragment,
           null,
           [createVNode(ChildB)],
-          256 /* UNKEYED_FRAGMENT */
-        ))
+          256 /* UNKEYED_FRAGMENT */,
+        )),
       ])
     )
     render(h(Parent), root)
@@ -534,6 +563,7 @@ describe('renderer: optimized mode', () => {
     const state = ref(0)
 
     const CompA = {
+      name: 'A',
       setup(props: any, { slots }: SetupContext) {
         return () => {
           return (
@@ -541,20 +571,22 @@ describe('renderer: optimized mode', () => {
             createBlock('div', null, [renderSlot(slots, 'default')])
           )
         }
-      }
+      },
     }
 
     const Wrapper = {
+      name: 'Wrapper',
       setup(props: any, { slots }: SetupContext) {
         // use the manually written render function to rendering the optimized slots,
         // which should make subsequent updates exit the optimized mode correctly
         return () => {
           return slots.default!()[state.value]
         }
-      }
+      },
     }
 
     const app = createApp({
+      name: 'App',
       setup() {
         return () => {
           return (
@@ -563,18 +595,18 @@ describe('renderer: optimized mode', () => {
               default: withCtx(() => [
                 createVNode(CompA, null, {
                   default: withCtx(() => [createTextVNode('Hello')]),
-                  _: 1 /* STABLE */
+                  _: 1 /* STABLE */,
                 }),
                 createVNode(CompA, null, {
                   default: withCtx(() => [createTextVNode('World')]),
-                  _: 1 /* STABLE */
-                })
+                  _: 1 /* STABLE */,
+                }),
               ]),
-              _: 1 /* STABLE */
+              _: 1 /* STABLE */,
             })
           )
         }
-      }
+      },
     })
 
     app.mount(root)
@@ -586,7 +618,7 @@ describe('renderer: optimized mode', () => {
   })
 
   //#3623
-  test('nested teleport unmount need exit the optimization mode', () => {
+  test('nested teleport unmount need exit the optimization mode', async () => {
     const target = nodeOps.createElement('div')
     const root = nodeOps.createElement('div')
 
@@ -597,7 +629,7 @@ describe('renderer: optimized mode', () => {
         createBlock(
           Teleport as any,
           {
-            to: target
+            to: target,
           },
           [
             createVNode('div', null, [
@@ -605,21 +637,22 @@ describe('renderer: optimized mode', () => {
               createBlock(
                 Teleport as any,
                 {
-                  to: target
+                  to: target,
                 },
-                [createVNode('div', null, 'foo')]
-              ))
-            ])
-          ]
-        ))
+                [createVNode('div', null, 'foo')],
+              )),
+            ]),
+          ],
+        )),
       ])),
-      root
+      root,
     )
+    await nextTick()
     expect(inner(target)).toMatchInlineSnapshot(
-      `"<div><!--teleport start--><!--teleport end--></div><div>foo</div>"`
+      `"<div><!--teleport start--><!--teleport end--></div><div>foo</div>"`,
     )
     expect(inner(root)).toMatchInlineSnapshot(
-      `"<div><!--teleport start--><!--teleport end--></div>"`
+      `"<div><!--teleport start--><!--teleport end--></div>"`,
     )
 
     render(null, root)
@@ -634,11 +667,11 @@ describe('renderer: optimized mode', () => {
           return (
             openBlock(),
             (block = createBlock('section', null, [
-              renderSlot(slots, 'default')
+              renderSlot(slots, 'default'),
             ]))
           )
         }
-      }
+      },
     }
 
     let dynamicVNode: VNode
@@ -654,19 +687,19 @@ describe('renderer: optimized mode', () => {
                     'div',
                     {
                       class: {
-                        foo: !!slots.default!()
-                      }
+                        foo: !!slots.default!(),
+                      },
                     },
                     null,
-                    PatchFlags.CLASS
-                  ))
+                    PatchFlags.CLASS,
+                  )),
                 ]
               }),
-              _: 1
+              _: 1,
             })
           )
         }
-      }
+      },
     }
     const app = createApp({
       render() {
@@ -676,10 +709,10 @@ describe('renderer: optimized mode', () => {
             default: withCtx(() => {
               return [createVNode({}) /* component */]
             }),
-            _: 1
+            _: 1,
           })
         )
-      }
+      },
     })
 
     app.mount(root)
@@ -693,7 +726,7 @@ describe('renderer: optimized mode', () => {
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(block!.dynamicChildren![0].dynamicChildren!.length).toBe(1)
     expect(block!.dynamicChildren![0].dynamicChildren![0]).toEqual(
-      dynamicVNode!
+      dynamicVNode!,
     )
   })
 
@@ -705,7 +738,7 @@ describe('renderer: optimized mode', () => {
         return () => {
           return slots.default!()[index.value]
         }
-      }
+      },
     }
 
     const app = createApp({
@@ -720,13 +753,13 @@ describe('renderer: optimized mode', () => {
                   : createCommentVNode('v-if', true),
                 true
                   ? (openBlock(), createBlock('p', { key: 0 }, '2'))
-                  : createCommentVNode('v-if', true)
+                  : createCommentVNode('v-if', true),
               ]),
-              _: 1 /* STABLE */
+              _: 1 /* STABLE */,
             })
           )
         }
-      }
+      },
     })
 
     app.mount(root)
@@ -746,7 +779,7 @@ describe('renderer: optimized mode', () => {
     const Middle = {
       setup(props: any, { slots }: any) {
         return slots.default!
-      }
+      },
     }
 
     const Comp = {
@@ -758,16 +791,16 @@ describe('renderer: optimized mode', () => {
               createVNode(Middle, null, {
                 default: withCtx(
                   () => [
-                    createVNode('div', null, [renderSlot(slots, 'default')])
+                    createVNode('div', null, [renderSlot(slots, 'default')]),
                   ],
-                  undefined
+                  undefined,
                 ),
-                _: 3 /* FORWARDED */
-              })
+                _: 3 /* FORWARDED */,
+              }),
             ])
           )
         }
-      }
+      },
     }
 
     const loading = ref(false)
@@ -777,10 +810,10 @@ describe('renderer: optimized mode', () => {
           // important: write the slot content here
           const content = h('span', loading.value ? 'loading' : 'loaded')
           return h(Comp, null, {
-            default: () => content
+            default: () => content,
           })
         }
-      }
+      },
     })
 
     app.mount(root)
@@ -807,16 +840,16 @@ describe('renderer: optimized mode', () => {
               createBlock(SuspenseImpl, null, {
                 default: withCtx(() => [
                   createVNode('div', null, [
-                    createVNode('div', null, show.value, PatchFlags.TEXT)
-                  ])
+                    createVNode('div', null, show.value, PatchFlags.TEXT),
+                  ]),
                 ]),
-                _: SlotFlags.STABLE
-              }))
+                _: SlotFlags.STABLE,
+              })),
             ],
-            PatchFlags.STABLE_FRAGMENT
+            PatchFlags.STABLE_FRAGMENT,
           )
         )
-      }
+      },
     })
 
     app.mount(root)
@@ -838,17 +871,17 @@ describe('renderer: optimized mode', () => {
           openBlock(),
           createBlock(SuspenseImpl, null, {
             default: withCtx(() => [renderSlot(slots, 'default')]),
-            _: SlotFlags.FORWARDED
+            _: SlotFlags.FORWARDED,
           })
         )
-      }
+      },
     }
 
     const Child = {
       setup() {
         onUnmounted(spyUnmounted)
         return () => createVNode('div', null, show.value, PatchFlags.TEXT)
-      }
+      },
     }
 
     const app = createApp({
@@ -860,11 +893,11 @@ describe('renderer: optimized mode', () => {
               { key: 0 },
               {
                 default: withCtx(() => [createVNode(Child)]),
-                _: SlotFlags.STABLE
-              }
+                _: SlotFlags.STABLE,
+              },
             ))
           : createCommentVNode('v-if', true)
-      }
+      },
     })
 
     app.mount(root)
@@ -907,17 +940,17 @@ describe('renderer: optimized mode', () => {
                     renderList(1, item => {
                       return createVNode('li', null, [createVNode(Dummy)])
                     }),
-                    64 /* STABLE_FRAGMENT */
-                  ))
-                ])
+                    64 /* STABLE_FRAGMENT */,
+                  )),
+                ]),
               ],
               undefined,
-              true
+              true,
             ),
-            _: 1 /* STABLE */
-          }
+            _: 1 /* STABLE */,
+          },
         )
-      }
+      },
     })
 
     app.mount(root)
@@ -933,4 +966,271 @@ describe('renderer: optimized mode', () => {
     // should successfully unmount without error
     expect(inner(root)).toBe(`<!---->`)
   })
+
+  // #10870
+  test('should bail manually rendered compiler slots for both mount and update', async () => {
+    // only reproducible in prod
+    __DEV__ = false
+    function Outer(_: any, { slots }: any) {
+      return slots.default()
+    }
+    const Mid = {
+      render(ctx: any) {
+        return (
+          openBlock(),
+          createElementBlock('div', null, [renderSlot(ctx.$slots, 'default')])
+        )
+      },
+    }
+    const state1 = ref(true)
+    const state2 = ref(true)
+    const App = {
+      render() {
+        return (
+          openBlock(),
+          createBlock(Outer, null, {
+            default: withCtx(() => [
+              createVNode(
+                Mid,
+                { foo: state2.value },
+                {
+                  default: withCtx(() => [
+                    createElementVNode('div', null, [
+                      createElementVNode('div', null, [
+                        state2.value
+                          ? (openBlock(),
+                            createElementBlock(
+                              'div',
+                              {
+                                key: 0,
+                                id: 'if',
+                                foo: state1.value,
+                              },
+                              null,
+                              8 /* PROPS */,
+                              ['foo'],
+                            ))
+                          : createCommentVNode('v-if', true),
+                      ]),
+                    ]),
+                  ]),
+                  _: 1 /* STABLE */,
+                },
+                8 /* PROPS */,
+                ['foo'],
+              ),
+            ]),
+            _: 1 /* STABLE */,
+          })
+        )
+      },
+    }
+
+    const app = createApp(App)
+    app.config.errorHandler = vi.fn()
+
+    try {
+      app.mount(root)
+
+      state1.value = false
+      await nextTick()
+
+      state2.value = false
+      await nextTick()
+    } finally {
+      __DEV__ = true
+      expect(app.config.errorHandler).not.toHaveBeenCalled()
+    }
+  })
+
+  // #11336
+  test('should bail manually rendered compiler slots for both mount and update (2)', async () => {
+    // only reproducible in prod
+    __DEV__ = false
+    const n = ref(0)
+    function Outer(_: any, { slots }: any) {
+      n.value // track
+      return slots.default()
+    }
+    const Mid = {
+      render(ctx: any) {
+        return (
+          openBlock(),
+          createElementBlock('div', null, [renderSlot(ctx.$slots, 'default')])
+        )
+      },
+    }
+    const show = ref(false)
+    const App = {
+      render() {
+        return (
+          openBlock(),
+          createBlock(Outer, null, {
+            default: withCtx(() => [
+              createVNode(Mid, null, {
+                default: withCtx(() => [
+                  createElementVNode('div', null, [
+                    show.value
+                      ? (openBlock(),
+                        createElementBlock('div', { key: 0 }, '1'))
+                      : createCommentVNode('v-if', true),
+                    createElementVNode('div', null, '2'),
+                    createElementVNode('div', null, '3'),
+                  ]),
+                  createElementVNode('div', null, '4'),
+                ]),
+                _: 1 /* STABLE */,
+              }),
+            ]),
+            _: 1 /* STABLE */,
+          })
+        )
+      },
+    }
+
+    const app = createApp(App)
+    app.config.errorHandler = vi.fn()
+
+    try {
+      app.mount(root)
+
+      // force Outer update, which will assign new slots to Mid
+      // we want to make sure the compiled slot flag doesn't accidentally
+      // get assigned again
+      n.value++
+      await nextTick()
+
+      show.value = true
+      await nextTick()
+    } finally {
+      __DEV__ = true
+      expect(app.config.errorHandler).not.toHaveBeenCalled()
+    }
+  })
+
+  test('diff slot and slot fallback node', async () => {
+    const Comp = {
+      props: ['show'],
+      setup(props: any, { slots }: SetupContext) {
+        return () => {
+          return (
+            openBlock(),
+            createElementBlock('div', null, [
+              renderSlot(slots, 'default', { hide: !props.show }, () => [
+                (openBlock(),
+                (block = createElementBlock(
+                  Fragment,
+                  { key: 0 },
+                  [createTextVNode('foo')],
+                  PatchFlags.STABLE_FRAGMENT,
+                ))),
+              ]),
+            ])
+          )
+        }
+      },
+    }
+
+    const show = ref(true)
+    const app = createApp({
+      render() {
+        return (
+          openBlock(),
+          createBlock(
+            Comp,
+            { show: show.value },
+            {
+              default: withCtx(({ hide }: { hide: boolean }) => [
+                !hide
+                  ? (openBlock(),
+                    createElementBlock(
+                      Fragment,
+                      { key: 0 },
+                      [
+                        createCommentVNode('comment'),
+                        createElementVNode(
+                          'div',
+                          null,
+                          'bar',
+                          PatchFlags.CACHED,
+                        ),
+                      ],
+                      PatchFlags.STABLE_FRAGMENT,
+                    ))
+                  : createCommentVNode('v-if', true),
+              ]),
+              _: SlotFlags.STABLE,
+            },
+            PatchFlags.PROPS,
+            ['show'],
+          )
+        )
+      },
+    })
+
+    app.mount(root)
+    expect(inner(root)).toBe('<div><!--comment--><div>bar</div></div>')
+    expect(block).toBe(null)
+
+    show.value = false
+    await nextTick()
+    expect(inner(root)).toBe('<div>foo</div>')
+
+    show.value = true
+    await nextTick()
+    expect(inner(root)).toBe('<div><!--comment--><div>bar</div></div>')
+  })
+
+  test('should not take unmount children fast path if children contain cached nodes', async () => {
+    const show = ref(true)
+    const spyUnmounted = vi.fn()
+
+    const Child = {
+      setup() {
+        onUnmounted(spyUnmounted)
+        return () => createVNode('div', null, 'Child')
+      },
+    }
+
+    const app = createApp({
+      render(_: any, cache: any) {
+        return show.value
+          ? (openBlock(),
+            createBlock('div', null, [
+              createVNode('div', null, [
+                cache[0] ||
+                  (setBlockTracking(-1),
+                  ((cache[0] = createVNode('div', null, [
+                    createVNode(Child),
+                  ])).cacheIndex = 0),
+                  setBlockTracking(1),
+                  cache[0]),
+              ]),
+            ]))
+          : createCommentVNode('v-if', true)
+      },
+    })
+
+    app.mount(root)
+    expect(inner(root)).toBe(
+      '<div><div><div><div>Child</div></div></div></div>',
+    )
+
+    show.value = false
+    await nextTick()
+    expect(inner(root)).toBe('<!--v-if-->')
+    expect(spyUnmounted).toHaveBeenCalledTimes(1)
+
+    show.value = true
+    await nextTick()
+    expect(inner(root)).toBe(
+      '<div><div><div><div>Child</div></div></div></div>',
+    )
+
+    // should unmount again, this verifies previous cache was properly cleared
+    show.value = false
+    await nextTick()
+    expect(inner(root)).toBe('<!--v-if-->')
+    expect(spyUnmounted).toHaveBeenCalledTimes(2)
+  })
 })
diff --git a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
index 28d7a95eb..799108dca 100644
--- a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
+++ b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
@@ -1,17 +1,15 @@
 import {
-  ref,
-  nodeOps,
-  h,
-  render,
-  nextTick,
   defineComponent,
+  h,
+  nextTick,
+  nodeOps,
   reactive,
+  ref,
+  render,
   serializeInner,
-  shallowRef
+  shallowRef,
 } from '@vue/runtime-test'
 
-// reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs
-
 describe('api: template refs', () => {
   it('string ref mount', () => {
     const root = nodeOps.createElement('div')
@@ -20,12 +18,12 @@ describe('api: template refs', () => {
     const Comp = {
       setup() {
         return {
-          refKey: el
+          refKey: el,
         }
       },
       render() {
         return h('div', { ref: 'refKey' })
-      }
+      },
     }
     render(h(Comp), root)
     expect(el.value).toBe(root.children[0])
@@ -41,12 +39,12 @@ describe('api: template refs', () => {
       setup() {
         return {
           foo: fooEl,
-          bar: barEl
+          bar: barEl,
         }
       },
       render() {
         return h('div', { ref: refKey.value })
-      }
+      },
     }
     render(h(Comp), root)
     expect(fooEl.value).toBe(root.children[0])
@@ -66,12 +64,12 @@ describe('api: template refs', () => {
     const Comp = {
       setup() {
         return {
-          refKey: el
+          refKey: el,
         }
       },
       render() {
         return toggle.value ? h('div', { ref: 'refKey' }) : null
-      }
+      },
     }
     render(h(Comp), root)
     expect(el.value).toBe(root.children[0])
@@ -116,7 +114,7 @@ describe('api: template refs', () => {
     const toggle = ref(true)
 
     const Comp = defineComponent(
-      () => () => (toggle.value ? h('div', { ref: fn }) : null)
+      () => () => (toggle.value ? h('div', { ref: fn }) : null),
     )
     render(h(Comp), root)
     expect(fn.mock.calls[0][0]).toBe(root.children[0])
@@ -132,7 +130,7 @@ describe('api: template refs', () => {
     const Comp = {
       setup() {
         return () => h('div', { ref: el })
-      }
+      },
     }
     render(h(Comp), root)
     expect(el.value).toBe(root.children[0])
@@ -142,14 +140,14 @@ describe('api: template refs', () => {
     const root = nodeOps.createElement('div')
     const refs = {
       foo: ref(null),
-      bar: ref(null)
+      bar: ref(null),
     }
     const refKey = ref<keyof typeof refs>('foo')
 
     const Comp = {
       setup() {
         return () => h('div', { ref: refs[refKey.value] })
-      }
+      },
     }
     render(h(Comp), root)
     expect(refs.foo.value).toBe(root.children[0])
@@ -169,7 +167,7 @@ describe('api: template refs', () => {
     const Comp = {
       setup() {
         return () => (toggle.value ? h('div', { ref: el }) : null)
-      }
+      },
     }
     render(h(Comp), root)
     expect(el.value).toBe(root.children[0])
@@ -185,7 +183,7 @@ describe('api: template refs', () => {
     const Child = {
       render(this: any) {
         return this.$slots.default()
-      }
+      },
     }
 
     const Comp = {
@@ -196,7 +194,7 @@ describe('api: template refs', () => {
       },
       mounted(this: any) {
         spy(this.$refs.foo.tag)
-      }
+      },
     }
     render(h(Comp), root)
 
@@ -206,7 +204,7 @@ describe('api: template refs', () => {
   it('should work with direct reactive property', () => {
     const root = nodeOps.createElement('div')
     const state = reactive({
-      refKey: null
+      refKey: null,
     })
 
     const Comp = {
@@ -215,7 +213,7 @@ describe('api: template refs', () => {
       },
       render() {
         return h('div', { ref: 'refKey' })
-      }
+      },
     }
     render(h(Comp), root)
     expect(state.refKey).toBe(root.children[0])
@@ -232,16 +230,16 @@ describe('api: template refs', () => {
         return {
           refKey1,
           refKey2,
-          refKey3
+          refKey3,
         }
       },
       render() {
         return [
           h('div', { ref: 'refKey1' }),
           h('div', { ref: 'refKey2' }),
-          h('div', { ref: 'refKey3' })
+          h('div', { ref: 'refKey3' }),
         ]
-      }
+      },
     }
     render(h(Comp), root)
     expect(refKey1.value).toBe(root.children[1])
@@ -258,7 +256,7 @@ describe('api: template refs', () => {
       },
       render(this: any) {
         return h('div', { id: 'foo', ref: 'el' }, this.el && this.el.props.id)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -279,7 +277,7 @@ describe('api: template refs', () => {
       render(this: any) {
         return [
           h('p', { ref: refToggle.value ? 'foo' : 'bar' }),
-          h('i', { ref: refToggle.value ? 'bar' : 'foo' })
+          h('i', { ref: refToggle.value ? 'bar' : 'foo' }),
         ]
       },
       mounted(this: any) {
@@ -287,7 +285,7 @@ describe('api: template refs', () => {
       },
       updated(this: any) {
         spy(this.$refs.foo.tag, this.$refs.bar.tag)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -315,7 +313,7 @@ describe('api: template refs', () => {
       },
       updated(this: any) {
         spy(this.$refs.foo.tag)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -330,10 +328,10 @@ describe('api: template refs', () => {
   // #2078
   test('handling multiple merged refs', async () => {
     const Foo = {
-      render: () => h('div', 'foo')
+      render: () => h('div', 'foo'),
     }
     const Bar = {
-      render: () => h('div', 'bar')
+      render: () => h('div', 'bar'),
     }
 
     const viewRef = shallowRef<any>(Foo)
@@ -347,7 +345,7 @@ describe('api: template refs', () => {
         }
         const view = h(viewRef.value, { ref: elRef1 })
         return h(view, { ref: elRef2 })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -381,11 +379,11 @@ describe('api: template refs', () => {
           'div',
           {
             ref: el,
-            ref_key: 'el'
+            ref_key: 'el',
           },
-          'hello'
+          'hello',
         )
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -411,14 +409,14 @@ describe('api: template refs', () => {
                   'li',
                   {
                     ref: listRefs,
-                    ref_for: true
+                    ref_for: true,
                   },
-                  i
-                )
-              )
+                  i,
+                ),
+              ),
             )
           : null
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -462,14 +460,14 @@ describe('api: template refs', () => {
                   'li',
                   {
                     ref: 'listRefs',
-                    ref_for: true
+                    ref_for: true,
                   },
-                  i
-                )
-              )
+                  i,
+                ),
+              ),
             )
           : null
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -512,31 +510,31 @@ describe('api: template refs', () => {
                 'li',
                 {
                   ref: 'listRefs',
-                  ref_for: true
+                  ref_for: true,
                 },
-                i
-              )
-            )
-          )
+                i,
+              ),
+            ),
+          ),
         ])
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
 
     await nextTick()
     expect(String(listRefs.value)).toBe(
-      '[object Object],[object Object],[object Object]'
+      '[object Object],[object Object],[object Object]',
     )
     expect(serializeInner(root)).toBe(
-      '<div><div>[object Object],[object Object],[object Object]</div><ul><li>1</li><li>2</li><li>3</li></ul></div>'
+      '<div><div>[object Object],[object Object],[object Object]</div><ul><li>1</li><li>2</li><li>3</li></ul></div>',
     )
 
     list.value.splice(0, 1)
     await nextTick()
     expect(String(listRefs.value)).toBe('[object Object],[object Object]')
     expect(serializeInner(root)).toBe(
-      '<div><div>[object Object],[object Object]</div><ul><li>2</li><li>3</li></ul></div>'
+      '<div><div>[object Object],[object Object]</div><ul><li>2</li><li>3</li></ul></div>',
     )
   })
 })
diff --git a/packages/runtime-core/__tests__/scheduler.spec.ts b/packages/runtime-core/__tests__/scheduler.spec.ts
index 119d0f708..3e454aec0 100644
--- a/packages/runtime-core/__tests__/scheduler.spec.ts
+++ b/packages/runtime-core/__tests__/scheduler.spec.ts
@@ -1,10 +1,11 @@
 import {
-  queueJob,
-  nextTick,
-  queuePostFlushCb,
-  invalidateJob,
+  type SchedulerJob,
+  SchedulerJobFlags,
   flushPostFlushCbs,
-  flushPreFlushCbs
+  flushPreFlushCbs,
+  nextTick,
+  queueJob,
+  queuePostFlushCb,
 } from '../src/scheduler'
 
 describe('scheduler', () => {
@@ -119,12 +120,12 @@ describe('scheduler', () => {
       const job1 = () => {
         calls.push('job1')
       }
-      const cb1 = () => {
+      const cb1: SchedulerJob = () => {
         // queueJob in postFlushCb
         calls.push('cb1')
         queueJob(job1)
       }
-      cb1.pre = true
+      cb1.flags! |= SchedulerJobFlags.PRE
 
       queueJob(cb1)
       await nextTick()
@@ -138,25 +139,25 @@ describe('scheduler', () => {
       }
       job1.id = 1
 
-      const cb1 = () => {
+      const cb1: SchedulerJob = () => {
         calls.push('cb1')
         queueJob(job1)
         // cb2 should execute before the job
         queueJob(cb2)
         queueJob(cb3)
       }
-      cb1.pre = true
+      cb1.flags! |= SchedulerJobFlags.PRE
 
-      const cb2 = () => {
+      const cb2: SchedulerJob = () => {
         calls.push('cb2')
       }
-      cb2.pre = true
+      cb2.flags! |= SchedulerJobFlags.PRE
       cb2.id = 1
 
-      const cb3 = () => {
+      const cb3: SchedulerJob = () => {
         calls.push('cb3')
       }
-      cb3.pre = true
+      cb3.flags! |= SchedulerJobFlags.PRE
       cb3.id = 1
 
       queueJob(cb1)
@@ -166,37 +167,37 @@ describe('scheduler', () => {
 
     it('should insert jobs after pre jobs with the same id', async () => {
       const calls: string[] = []
-      const job1 = () => {
+      const job1: SchedulerJob = () => {
         calls.push('job1')
       }
       job1.id = 1
-      job1.pre = true
-      const job2 = () => {
+      job1.flags! |= SchedulerJobFlags.PRE
+      const job2: SchedulerJob = () => {
         calls.push('job2')
         queueJob(job5)
         queueJob(job6)
       }
       job2.id = 2
-      job2.pre = true
-      const job3 = () => {
+      job2.flags! |= SchedulerJobFlags.PRE
+      const job3: SchedulerJob = () => {
         calls.push('job3')
       }
       job3.id = 2
-      job3.pre = true
-      const job4 = () => {
+      job3.flags! |= SchedulerJobFlags.PRE
+      const job4: SchedulerJob = () => {
         calls.push('job4')
       }
       job4.id = 3
-      job4.pre = true
-      const job5 = () => {
+      job4.flags! |= SchedulerJobFlags.PRE
+      const job5: SchedulerJob = () => {
         calls.push('job5')
       }
       job5.id = 2
-      const job6 = () => {
+      const job6: SchedulerJob = () => {
         calls.push('job6')
       }
       job6.id = 2
-      job6.pre = true
+      job6.flags! |= SchedulerJobFlags.PRE
 
       // We need several jobs to test this properly, otherwise
       // findInsertionIndex can yield the correct index by chance
@@ -221,27 +222,58 @@ describe('scheduler', () => {
         flushPreFlushCbs()
         calls.push('job1')
       }
-      const cb1 = () => {
+      const cb1: SchedulerJob = () => {
         calls.push('cb1')
         // a cb triggers its parent job, which should be skipped
         queueJob(job1)
       }
-      cb1.pre = true
-      const cb2 = () => {
+      cb1.flags! |= SchedulerJobFlags.PRE
+      const cb2: SchedulerJob = () => {
         calls.push('cb2')
       }
-      cb2.pre = true
+      cb2.flags! |= SchedulerJobFlags.PRE
 
       queueJob(job1)
       await nextTick()
       expect(calls).toEqual(['cb1', 'cb2', 'job1'])
     })
 
+    it('should insert pre jobs without ids first during flushing', async () => {
+      const calls: string[] = []
+      const job1: SchedulerJob = () => {
+        calls.push('job1')
+        queueJob(job3)
+        queueJob(job4)
+      }
+      // job1 has no id
+      job1.flags! |= SchedulerJobFlags.PRE
+      const job2: SchedulerJob = () => {
+        calls.push('job2')
+      }
+      job2.id = 1
+      job2.flags! |= SchedulerJobFlags.PRE
+      const job3: SchedulerJob = () => {
+        calls.push('job3')
+      }
+      // job3 has no id
+      job3.flags! |= SchedulerJobFlags.PRE
+      const job4: SchedulerJob = () => {
+        calls.push('job4')
+      }
+      // job4 has no id
+      job4.flags! |= SchedulerJobFlags.PRE
+
+      queueJob(job1)
+      queueJob(job2)
+      await nextTick()
+      expect(calls).toEqual(['job1', 'job3', 'job4', 'job2'])
+    })
+
     // #3806
     it('queue preFlushCb inside postFlushCb', async () => {
       const spy = vi.fn()
-      const cb = () => spy()
-      cb.pre = true
+      const cb: SchedulerJob = () => spy()
+      cb.flags! |= SchedulerJobFlags.PRE
       queuePostFlushCb(() => {
         queueJob(cb)
       })
@@ -409,33 +441,29 @@ describe('scheduler', () => {
       await nextTick()
       expect(calls).toEqual(['job1', 'job2', 'cb1', 'cb2'])
     })
-  })
 
-  test('invalidateJob', async () => {
-    const calls: string[] = []
-    const job1 = () => {
-      calls.push('job1')
-      invalidateJob(job2)
-      job2()
-    }
-    const job2 = () => {
-      calls.push('job2')
-    }
-    const job3 = () => {
-      calls.push('job3')
-    }
-    const job4 = () => {
-      calls.push('job4')
-    }
-    // queue all jobs
-    queueJob(job1)
-    queueJob(job2)
-    queueJob(job3)
-    queuePostFlushCb(job4)
-    expect(calls).toEqual([])
-    await nextTick()
-    // job2 should be called only once
-    expect(calls).toEqual(['job1', 'job2', 'job3', 'job4'])
+    test('jobs added during post flush are ordered correctly', async () => {
+      const calls: string[] = []
+
+      const job1: SchedulerJob = () => {
+        calls.push('job1')
+      }
+      job1.id = 1
+
+      const job2: SchedulerJob = () => {
+        calls.push('job2')
+      }
+      job2.id = 2
+
+      queuePostFlushCb(() => {
+        queueJob(job2)
+        queueJob(job1)
+      })
+
+      await nextTick()
+
+      expect(calls).toEqual(['job1', 'job2'])
+    })
   })
 
   test('sort job based on id', async () => {
@@ -446,12 +474,20 @@ describe('scheduler', () => {
     job2.id = 2
     const job3 = () => calls.push('job3')
     job3.id = 1
+    const job4: SchedulerJob = () => calls.push('job4')
+    job4.id = 2
+    job4.flags! |= SchedulerJobFlags.PRE
+    const job5: SchedulerJob = () => calls.push('job5')
+    // job5 has no id
+    job5.flags! |= SchedulerJobFlags.PRE
 
     queueJob(job1)
     queueJob(job2)
     queueJob(job3)
+    queueJob(job4)
+    queueJob(job5)
     await nextTick()
-    expect(calls).toEqual(['job3', 'job2', 'job1'])
+    expect(calls).toEqual(['job5', 'job3', 'job4', 'job2', 'job1'])
   })
 
   test('sort SchedulerCbs based on id', async () => {
@@ -497,13 +533,52 @@ describe('scheduler', () => {
       expect(e).toBe(err)
     }
     expect(
-      `Unhandled error during execution of scheduler flush`
+      `Unhandled error during execution of scheduler flush`,
     ).toHaveBeenWarned()
 
     // this one should no longer error
     await nextTick()
   })
 
+  test('jobs can be re-queued after an error', async () => {
+    const err = new Error('test')
+    let shouldThrow = true
+
+    const job1: SchedulerJob = vi.fn(() => {
+      if (shouldThrow) {
+        shouldThrow = false
+        throw err
+      }
+    })
+    job1.id = 1
+
+    const job2: SchedulerJob = vi.fn()
+    job2.id = 2
+
+    queueJob(job1)
+    queueJob(job2)
+
+    try {
+      await nextTick()
+    } catch (e: any) {
+      expect(e).toBe(err)
+    }
+    expect(
+      `Unhandled error during execution of scheduler flush`,
+    ).toHaveBeenWarned()
+
+    expect(job1).toHaveBeenCalledTimes(1)
+    expect(job2).toHaveBeenCalledTimes(0)
+
+    queueJob(job1)
+    queueJob(job2)
+
+    await nextTick()
+
+    expect(job1).toHaveBeenCalledTimes(2)
+    expect(job2).toHaveBeenCalledTimes(1)
+  })
+
   test('should prevent self-triggering jobs by default', async () => {
     let count = 0
     const job = () => {
@@ -521,30 +596,137 @@ describe('scheduler', () => {
   test('should allow explicitly marked jobs to trigger itself', async () => {
     // normal job
     let count = 0
-    const job = () => {
+    const job: SchedulerJob = () => {
       if (count < 3) {
         count++
         queueJob(job)
       }
     }
-    job.allowRecurse = true
+    job.flags! |= SchedulerJobFlags.ALLOW_RECURSE
     queueJob(job)
     await nextTick()
     expect(count).toBe(3)
 
     // post cb
-    const cb = () => {
+    const cb: SchedulerJob = () => {
       if (count < 5) {
         count++
         queuePostFlushCb(cb)
       }
     }
-    cb.allowRecurse = true
+    cb.flags! |= SchedulerJobFlags.ALLOW_RECURSE
     queuePostFlushCb(cb)
     await nextTick()
     expect(count).toBe(5)
   })
 
+  test('recursive jobs can only be queued once non-recursively', async () => {
+    const job: SchedulerJob = vi.fn()
+    job.id = 1
+    job.flags = SchedulerJobFlags.ALLOW_RECURSE
+
+    queueJob(job)
+    queueJob(job)
+
+    await nextTick()
+
+    expect(job).toHaveBeenCalledTimes(1)
+  })
+
+  test('recursive jobs can only be queued once recursively', async () => {
+    let recurse = true
+
+    const job: SchedulerJob = vi.fn(() => {
+      if (recurse) {
+        queueJob(job)
+        queueJob(job)
+        recurse = false
+      }
+    })
+    job.id = 1
+    job.flags = SchedulerJobFlags.ALLOW_RECURSE
+
+    queueJob(job)
+
+    await nextTick()
+
+    expect(job).toHaveBeenCalledTimes(2)
+  })
+
+  test(`recursive jobs can't be re-queued by other jobs`, async () => {
+    let recurse = true
+
+    const job1: SchedulerJob = () => {
+      if (recurse) {
+        // job2 is already queued, so this shouldn't do anything
+        queueJob(job2)
+        recurse = false
+      }
+    }
+    job1.id = 1
+
+    const job2: SchedulerJob = vi.fn(() => {
+      if (recurse) {
+        queueJob(job1)
+        queueJob(job2)
+      }
+    })
+    job2.id = 2
+    job2.flags = SchedulerJobFlags.ALLOW_RECURSE
+
+    queueJob(job2)
+
+    await nextTick()
+
+    expect(job2).toHaveBeenCalledTimes(2)
+  })
+
+  test('jobs are de-duplicated correctly when calling flushPreFlushCbs', async () => {
+    let recurse = true
+
+    const job1: SchedulerJob = vi.fn(() => {
+      queueJob(job3)
+      queueJob(job3)
+      flushPreFlushCbs()
+    })
+    job1.id = 1
+    job1.flags = SchedulerJobFlags.PRE
+
+    const job2: SchedulerJob = vi.fn(() => {
+      if (recurse) {
+        // job2 does not allow recurse, so this shouldn't do anything
+        queueJob(job2)
+
+        // job3 is already queued, so this shouldn't do anything
+        queueJob(job3)
+        recurse = false
+      }
+    })
+    job2.id = 2
+    job2.flags = SchedulerJobFlags.PRE
+
+    const job3: SchedulerJob = vi.fn(() => {
+      if (recurse) {
+        queueJob(job2)
+        queueJob(job3)
+
+        // The jobs are already queued, so these should have no effect
+        queueJob(job2)
+        queueJob(job3)
+      }
+    })
+    job3.id = 3
+    job3.flags = SchedulerJobFlags.ALLOW_RECURSE | SchedulerJobFlags.PRE
+
+    queueJob(job1)
+
+    await nextTick()
+
+    expect(job1).toHaveBeenCalledTimes(1)
+    expect(job2).toHaveBeenCalledTimes(1)
+    expect(job3).toHaveBeenCalledTimes(2)
+  })
+
   // #1947 flushPostFlushCbs should handle nested calls
   // e.g. app.mount inside app.mount
   test('flushPostFlushCbs', async () => {
@@ -571,8 +753,8 @@ describe('scheduler', () => {
 
     // simulate parent component that toggles child
     const job1 = () => {
-      // @ts-ignore
-      job2.active = false
+      // @ts-expect-error
+      job2.flags! |= SchedulerJobFlags.DISPOSED
     }
     // simulate child that's triggered by the same reactive change that
     // triggers its toggle
@@ -589,16 +771,47 @@ describe('scheduler', () => {
 
   it('flushPreFlushCbs inside a pre job', async () => {
     const spy = vi.fn()
-    const job = () => {
+    const job: SchedulerJob = () => {
       spy()
       flushPreFlushCbs()
     }
-    job.pre = true
+    job.flags! |= SchedulerJobFlags.PRE
     queueJob(job)
     await nextTick()
     expect(spy).toHaveBeenCalledTimes(1)
   })
 
+  test('flushPreFlushCbs inside a post job', async () => {
+    const calls: string[] = []
+    const callsAfterFlush: string[] = []
+
+    const job1: SchedulerJob = () => {
+      calls.push('job1')
+    }
+    job1.id = 1
+    job1.flags! |= SchedulerJobFlags.PRE
+
+    const job2: SchedulerJob = () => {
+      calls.push('job2')
+    }
+    job2.id = 2
+    job2.flags! |= SchedulerJobFlags.PRE
+
+    queuePostFlushCb(() => {
+      queueJob(job2)
+      queueJob(job1)
+
+      // e.g. nested app.mount() call
+      flushPreFlushCbs()
+      callsAfterFlush.push(...calls)
+    })
+
+    await nextTick()
+
+    expect(callsAfterFlush).toEqual(['job1', 'job2'])
+    expect(calls).toEqual(['job1', 'job2'])
+  })
+
   it('nextTick should return promise', async () => {
     const fn = vi.fn(() => {
       return 1
@@ -610,4 +823,25 @@ describe('scheduler', () => {
     expect(await p).toBe(1)
     expect(fn).toHaveBeenCalledTimes(1)
   })
+
+  // #10003
+  test('nested flushPostFlushCbs', async () => {
+    const calls: string[] = []
+    const cb1 = () => calls.push('cb1')
+    // cb1 has no id
+    const cb2 = () => calls.push('cb2')
+    cb2.id = -1
+    const queueAndFlush = (hook: Function) => {
+      queuePostFlushCb(hook)
+      flushPostFlushCbs()
+    }
+
+    queueAndFlush(() => {
+      queuePostFlushCb([cb1, cb2])
+      flushPostFlushCbs()
+    })
+
+    await nextTick()
+    expect(calls).toEqual(['cb2', 'cb1'])
+  })
 })
diff --git a/packages/runtime-core/__tests__/scopeId.spec.ts b/packages/runtime-core/__tests__/scopeId.spec.ts
index cdbb81c41..d9a7d4dbf 100644
--- a/packages/runtime-core/__tests__/scopeId.spec.ts
+++ b/packages/runtime-core/__tests__/scopeId.spec.ts
@@ -1,20 +1,30 @@
 import {
+  Fragment,
+  Suspense,
+  createBlock,
+  createCommentVNode,
+  createVNode,
+  defineComponent,
   h,
-  render,
+  nextTick,
   nodeOps,
-  serializeInner,
-  renderSlot,
-  withScopeId,
+  openBlock,
+  popScopeId,
   pushScopeId,
-  popScopeId
+  ref,
+  render,
+  renderSlot,
+  serializeInner,
+  withScopeId,
 } from '@vue/runtime-test'
 import { withCtx } from '../src/componentRenderContext'
+import { PatchFlags } from '@vue/shared'
 
 describe('scopeId runtime support', () => {
   test('should attach scopeId', () => {
     const App = {
       __scopeId: 'parent',
-      render: () => h('div', [h('div')])
+      render: () => h('div', [h('div')]),
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -24,31 +34,74 @@ describe('scopeId runtime support', () => {
   test('should attach scopeId to components in parent component', () => {
     const Child = {
       __scopeId: 'child',
-      render: () => h('div')
+      render: () => h('div'),
     }
     const App = {
       __scopeId: 'parent',
-      render: () => h('div', [h(Child)])
+      render: () => h('div', [h(Child)]),
     }
 
     const root = nodeOps.createElement('div')
     render(h(App), root)
     expect(serializeInner(root)).toBe(
-      `<div parent><div child parent></div></div>`
+      `<div parent><div child parent></div></div>`,
     )
   })
 
+  // #5148
+  test('should attach scopeId to suspense content', async () => {
+    const deps: Promise<any>[] = []
+    const Child = {
+      async setup() {
+        const p = new Promise(r => setTimeout(r, 1))
+        deps.push(p.then(() => Promise.resolve()))
+
+        await p
+        return () => h('div', 'async')
+      },
+    }
+
+    const Wrapper = {
+      setup(_: any, { slots }: any) {
+        return () => slots.default({ Component: h(Child) })
+      },
+    }
+
+    const App = {
+      __scopeId: 'parent',
+      setup() {
+        return () =>
+          h(Wrapper, null, {
+            default: withCtx(({ Component }: any) =>
+              h(Suspense, null, {
+                default: h(Component),
+                fallback: h('div', 'fallback'),
+              }),
+            ),
+          })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+    expect(serializeInner(root)).toBe(`<div parent>fallback</div>`)
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div parent>async</div>`)
+  })
+
   // :slotted basic
   test('should work on slots', () => {
     const Child = {
       __scopeId: 'child',
       render(this: any) {
         return h('div', renderSlot(this.$slots, 'default'))
-      }
+      },
     }
     const Child2 = {
       __scopeId: 'child2',
-      render: () => h('span')
+      render: () => h('span'),
     }
     const App = {
       __scopeId: 'parent',
@@ -57,9 +110,9 @@ describe('scopeId runtime support', () => {
           Child,
           withCtx(() => {
             return [h('div'), h(Child2)]
-          })
+          }),
         )
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -74,7 +127,7 @@ describe('scopeId runtime support', () => {
         // - slotted scopeId from slot owner
         // - its own scopeId
         `<span child2 parent child-s></span>` +
-        `</div>`
+        `</div>`,
     )
   })
 
@@ -90,10 +143,10 @@ describe('scopeId runtime support', () => {
             'default',
             {},
             undefined,
-            true /* noSlotted */
-          )
+            true /* noSlotted */,
+          ),
         ])
-      }
+      },
     }
 
     const Slotted = {
@@ -101,9 +154,9 @@ describe('scopeId runtime support', () => {
       render(this: any) {
         // <Wrapper><slot/></Wrapper>
         return h(Wrapper, null, {
-          default: withCtx(() => [renderSlot(this.$slots, 'default')])
+          default: withCtx(() => [renderSlot(this.$slots, 'default')]),
         })
-      }
+      },
     }
 
     // simulate hoisted node
@@ -118,9 +171,9 @@ describe('scopeId runtime support', () => {
         return h(Slotted, null, {
           default: withCtx(() => {
             return [hoisted, h('div', 'dynamic')]
-          })
+          }),
         })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -129,7 +182,7 @@ describe('scopeId runtime support', () => {
       `<div wrapper slotted root class="wrapper">` +
         `<div root slotted-s>hoisted</div>` +
         `<div root slotted-s>dynamic</div>` +
-        `</div>`
+        `</div>`,
     )
 
     const Root2 = {
@@ -143,11 +196,11 @@ describe('scopeId runtime support', () => {
         return h(Slotted, null, {
           default: withCtx(() => [
             h(Wrapper, null, {
-              default: withCtx(() => [hoisted, h('div', 'dynamic')])
-            })
-          ])
+              default: withCtx(() => [hoisted, h('div', 'dynamic')]),
+            }),
+          ]),
         })
-      }
+      },
     }
     const root2 = nodeOps.createElement('div')
     render(h(Root2), root2)
@@ -157,7 +210,7 @@ describe('scopeId runtime support', () => {
         `<div root>hoisted</div>` +
         `<div root>dynamic</div>` +
         `</div>` +
-        `</div>`
+        `</div>`,
     )
   })
 
@@ -167,7 +220,7 @@ describe('scopeId runtime support', () => {
       __scopeId: 'parent',
       render: () => {
         return h(Child)
-      }
+      },
     }
 
     function Child() {
@@ -184,6 +237,55 @@ describe('scopeId runtime support', () => {
 
     expect(serializeInner(root)).toBe(`<div parent></div>`)
   })
+
+  test('should inherit scopeId through nested DEV_ROOT_FRAGMENT with inheritAttrs: false', async () => {
+    const Parent = {
+      __scopeId: 'parent',
+      render() {
+        return h(Child, { class: 'foo' })
+      },
+    }
+
+    const ok = ref(true)
+    const Child = defineComponent({
+      inheritAttrs: false,
+      render() {
+        return (
+          openBlock(),
+          createBlock(
+            Fragment,
+            null,
+            [
+              createCommentVNode('comment1'),
+              ok.value
+                ? (openBlock(), createBlock('div', { key: 0 }, 'div1'))
+                : (openBlock(),
+                  createBlock(
+                    Fragment,
+                    { key: 1 },
+                    [
+                      createCommentVNode('comment2'),
+                      createVNode('div', null, 'div2'),
+                    ],
+                    PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+                  )),
+            ],
+            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+          )
+        )
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe(`<!--comment1--><div parent>div1</div>`)
+
+    ok.value = false
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<!--comment1--><!--comment2--><div parent>div2</div>`,
+    )
+  })
 })
 
 describe('backwards compat with <=3.0.7', () => {
@@ -195,7 +297,7 @@ describe('backwards compat with <=3.0.7', () => {
       __scopeId: 'parent',
       render: withParentId(() => {
         return h('div', [h('div')])
-      })
+      }),
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -207,19 +309,19 @@ describe('backwards compat with <=3.0.7', () => {
       __scopeId: 'child',
       render: withChildId(() => {
         return h('div')
-      })
+      }),
     }
     const App = {
       __scopeId: 'parent',
       render: withParentId(() => {
         return h('div', [h(Child)])
-      })
+      }),
     }
 
     const root = nodeOps.createElement('div')
     render(h(App), root)
     expect(serializeInner(root)).toBe(
-      `<div parent><div child parent></div></div>`
+      `<div parent><div child parent></div></div>`,
     )
   })
 
@@ -228,12 +330,12 @@ describe('backwards compat with <=3.0.7', () => {
       __scopeId: 'child',
       render: withChildId(function (this: any) {
         return h('div', renderSlot(this.$slots, 'default'))
-      })
+      }),
     }
     const withChild2Id = withScopeId('child2')
     const Child2 = {
       __scopeId: 'child2',
-      render: withChild2Id(() => h('span'))
+      render: withChild2Id(() => h('span')),
     }
     const App = {
       __scopeId: 'parent',
@@ -242,9 +344,9 @@ describe('backwards compat with <=3.0.7', () => {
           Child,
           withParentId(() => {
             return [h('div'), h(Child2)]
-          })
+          }),
         )
-      })
+      }),
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -259,7 +361,7 @@ describe('backwards compat with <=3.0.7', () => {
         // - slotted scopeId from slot owner
         // - its own scopeId
         `<span child2 parent child-s></span>` +
-        `</div>`
+        `</div>`,
     )
   })
 
@@ -270,7 +372,7 @@ describe('backwards compat with <=3.0.7', () => {
       __scopeId: 'parent',
       render: withParentId(() => {
         return h(Child)
-      })
+      }),
     }
 
     function Child() {
@@ -295,14 +397,14 @@ describe('backwards compat with <=3.0.7', () => {
 
     const App = {
       __scopeId: 'foobar',
-      render: () => h('div', [hoisted])
+      render: () => h('div', [hoisted]),
     }
 
     const root = nodeOps.createElement('div')
     render(h(App), root)
 
     expect(serializeInner(root)).toBe(
-      `<div foobar><div foobar>hello</div></div>`
+      `<div foobar><div foobar>hello</div></div>`,
     )
   })
 })
diff --git a/packages/runtime-core/__tests__/vnode.spec.ts b/packages/runtime-core/__tests__/vnode.spec.ts
index 11b2044a9..2e0eee1f2 100644
--- a/packages/runtime-core/__tests__/vnode.spec.ts
+++ b/packages/runtime-core/__tests__/vnode.spec.ts
@@ -1,19 +1,20 @@
 import {
-  createBlock,
-  createVNode,
-  openBlock,
   Comment,
   Fragment,
   Text,
+  type VNode,
   cloneVNode,
+  createBlock,
+  createVNode,
+  isBlockTreeEnabled,
   mergeProps,
   normalizeVNode,
+  openBlock,
   transformVNodeArgs,
-  isBlockTreeEnabled
 } from '../src/vnode'
-import { Data } from '../src/component'
-import { ShapeFlags, PatchFlags } from '@vue/shared'
-import { h, reactive, isReactive, setBlockTracking, ref, withCtx } from '../src'
+import type { Data } from '../src/component'
+import { PatchFlags, ShapeFlags } from '@vue/shared'
+import { h, isReactive, reactive, ref, setBlockTracking, withCtx } from '../src'
 import { createApp, nodeOps, serializeInner } from '@vue/runtime-test'
 import { setCurrentRenderingInstance } from '../src/componentRenderContext'
 
@@ -56,10 +57,21 @@ describe('vnode', () => {
       type: 'p',
       props: {
         id: 'foo',
-        class: 'bar'
+        class: 'bar',
       },
       children: 'baz',
-      shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN
+      shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN,
+    })
+  })
+
+  test('create from an existing text vnode', () => {
+    const vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT)
+    const vnode2 = createVNode(vnode1)
+    expect(vnode2).toMatchObject({
+      type: 'div',
+      patchFlag: PatchFlags.BAIL,
+      children: 'text',
+      shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN,
     })
   })
 
@@ -94,7 +106,7 @@ describe('vnode', () => {
 
     test('array<object>', () => {
       const vnode = createVNode('p', {
-        class: [{ foo: 'foo' }, { baz: 'baz' }]
+        class: [{ foo: 'foo' }, { baz: 'baz' }],
       })
       expect(vnode.props).toMatchObject({ class: 'foo baz' })
     })
@@ -108,7 +120,7 @@ describe('vnode', () => {
   describe('style normalization', () => {
     test('array', () => {
       const vnode = createVNode('p', {
-        style: [{ foo: 'foo' }, { baz: 'baz' }]
+        style: [{ foo: 'foo' }, { baz: 'baz' }],
       })
       expect(vnode.props).toMatchObject({ style: { foo: 'foo', baz: 'baz' } })
     })
@@ -132,7 +144,7 @@ describe('vnode', () => {
       const vnode = createVNode('p', null, ['foo'])
       expect(vnode.children).toMatchObject(['foo'])
       expect(vnode.shapeFlag).toBe(
-        ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN
+        ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN,
       )
     })
 
@@ -140,7 +152,7 @@ describe('vnode', () => {
       const vnode = createVNode({}, null, { foo: 'foo' })
       expect(vnode.children).toMatchObject({ foo: 'foo' })
       expect(vnode.shapeFlag).toBe(
-        ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.SLOTS_CHILDREN
+        ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.SLOTS_CHILDREN,
       )
     })
 
@@ -148,7 +160,7 @@ describe('vnode', () => {
       const vnode = createVNode('p', null, nop)
       expect(vnode.children).toMatchObject({ default: nop })
       expect(vnode.shapeFlag).toBe(
-        ShapeFlags.ELEMENT | ShapeFlags.SLOTS_CHILDREN
+        ShapeFlags.ELEMENT | ShapeFlags.SLOTS_CHILDREN,
       )
     })
 
@@ -156,19 +168,19 @@ describe('vnode', () => {
       const vnode = createVNode('p', null, 'foo')
       expect(vnode.children).toBe('foo')
       expect(vnode.shapeFlag).toBe(
-        ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN
+        ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN,
       )
     })
 
     test('element with slots', () => {
       const children = [createVNode('span', null, 'hello')]
       const vnode = createVNode('div', null, {
-        default: () => children
+        default: () => children,
       })
 
       expect(vnode.children).toBe(children)
       expect(vnode.shapeFlag).toBe(
-        ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN
+        ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN,
       )
     })
   })
@@ -207,7 +219,7 @@ describe('vnode', () => {
     expect(createVNode('div').shapeFlag).toBe(ShapeFlags.ELEMENT)
     expect(createVNode({}).shapeFlag).toBe(ShapeFlags.STATEFUL_COMPONENT)
     expect(createVNode(() => {}).shapeFlag).toBe(
-      ShapeFlags.FUNCTIONAL_COMPONENT
+      ShapeFlags.FUNCTIONAL_COMPONENT,
     )
     expect(createVNode(Text).shapeFlag).toBe(0)
   })
@@ -239,7 +251,7 @@ describe('vnode', () => {
     expect(original.ref).toMatchObject({
       i: mockInstance1,
       r: 'foo',
-      f: false
+      f: false,
     })
 
     // clone and preserve original ref
@@ -276,7 +288,7 @@ describe('vnode', () => {
     expect(original3.ref).toMatchObject({
       i: mockInstance2,
       r: 'foo',
-      f: true
+      f: true,
     })
     const cloned7 = cloneVNode(original3, { ref: 'bar', ref_for: true })
     expect(cloned7.ref).toMatchObject({ i: mockInstance2, r: 'bar', f: true })
@@ -286,11 +298,21 @@ describe('vnode', () => {
     expect(original4.ref).toMatchObject({
       i: mockInstance2,
       r,
-      k: 'foo'
+      k: 'foo',
     })
     const cloned8 = cloneVNode(original4)
     expect(cloned8.ref).toMatchObject({ i: mockInstance2, r, k: 'foo' })
 
+    // @ts-expect-error #8230
+    const original5 = createVNode('div', { ref: 111, ref_key: 'foo' })
+    expect(original5.ref).toMatchObject({
+      i: mockInstance2,
+      r: '111',
+      k: 'foo',
+    })
+    const cloned9 = cloneVNode(original5)
+    expect(cloned9.ref).toMatchObject({ i: mockInstance2, r: '111', k: 'foo' })
+
     setCurrentRenderingInstance(null)
   })
 
@@ -307,7 +329,7 @@ describe('vnode', () => {
     const cloned1 = cloneVNode(original, { ref: 'bar' }, true)
     expect(cloned1.ref).toMatchObject([
       { i: mockInstance1, r: 'foo', f: false },
-      { i: mockInstance2, r: 'bar', f: false }
+      { i: mockInstance2, r: 'bar', f: false },
     ])
 
     setCurrentRenderingInstance(null)
@@ -316,19 +338,19 @@ describe('vnode', () => {
   test('cloneVNode class normalization', () => {
     const vnode = createVNode('div')
     const expectedProps = {
-      class: 'a b'
+      class: 'a b',
     }
     expect(cloneVNode(vnode, { class: 'a b' }).props).toMatchObject(
-      expectedProps
+      expectedProps,
     )
     expect(cloneVNode(vnode, { class: ['a', 'b'] }).props).toMatchObject(
-      expectedProps
+      expectedProps,
     )
     expect(
-      cloneVNode(vnode, { class: { a: true, b: true } }).props
+      cloneVNode(vnode, { class: { a: true, b: true } }).props,
     ).toMatchObject(expectedProps)
     expect(
-      cloneVNode(vnode, { class: [{ a: true, b: true }] }).props
+      cloneVNode(vnode, { class: [{ a: true, b: true }] }).props,
     ).toMatchObject(expectedProps)
   })
 
@@ -337,29 +359,29 @@ describe('vnode', () => {
     const expectedProps = {
       style: {
         color: 'blue',
-        width: '300px'
-      }
+        width: '300px',
+      },
     }
     expect(
-      cloneVNode(vnode, { style: 'color: blue; width: 300px;' }).props
+      cloneVNode(vnode, { style: 'color: blue; width: 300px;' }).props,
     ).toMatchObject(expectedProps)
     expect(
       cloneVNode(vnode, {
         style: {
           color: 'blue',
-          width: '300px'
-        }
-      }).props
+          width: '300px',
+        },
+      }).props,
     ).toMatchObject(expectedProps)
     expect(
       cloneVNode(vnode, {
         style: [
           {
             color: 'blue',
-            width: '300px'
-          }
-        ]
-      }).props
+            width: '300px',
+          },
+        ],
+      }).props,
     ).toMatchObject(expectedProps)
   })
 
@@ -370,7 +392,7 @@ describe('vnode', () => {
       let props3: Data = { class: [{ ccc: true }] }
       let props4: Data = { class: { cccc: true } }
       expect(mergeProps(props1, props2, props3, props4)).toMatchObject({
-        class: 'c cc ccc cccc'
+        class: 'c cc ccc cccc',
       })
     })
 
@@ -379,49 +401,49 @@ describe('vnode', () => {
         style: [
           {
             color: 'red',
-            fontSize: 10
-          }
-        ]
+            fontSize: 10,
+          },
+        ],
       }
       let props2: Data = {
         style: [
           {
             color: 'blue',
-            width: '200px'
+            width: '200px',
           },
           {
             width: '300px',
             height: '300px',
-            fontSize: 30
-          }
-        ]
+            fontSize: 30,
+          },
+        ],
       }
       expect(mergeProps(props1, props2)).toMatchObject({
         style: {
           color: 'blue',
           width: '300px',
           height: '300px',
-          fontSize: 30
-        }
+          fontSize: 30,
+        },
       })
     })
 
     test('style w/ strings', () => {
       let props1: Data = {
-        style: 'width:100px;right:10;top:10'
+        style: 'width:100px;right:10;top:10',
       }
       let props2: Data = {
         style: [
           {
             color: 'blue',
-            width: '200px'
+            width: '200px',
           },
           {
             width: '300px',
             height: '300px',
-            fontSize: 30
-          }
-        ]
+            fontSize: 30,
+          },
+        ],
       }
       expect(mergeProps(props1, props2)).toMatchObject({
         style: {
@@ -430,8 +452,8 @@ describe('vnode', () => {
           height: '300px',
           fontSize: 30,
           right: '10',
-          top: '10'
-        }
+          top: '10',
+        },
       })
     })
 
@@ -444,11 +466,11 @@ describe('vnode', () => {
       let props2: Data = { onClick: clickHandler2, onFocus: focusHandler2 }
       expect(mergeProps(props1, props2)).toMatchObject({
         onClick: [clickHandler1, clickHandler2],
-        onFocus: focusHandler2
+        onFocus: focusHandler2,
       })
       let props3: Data = { onClick: undefined }
       expect(mergeProps(props1, props3)).toMatchObject({
-        onClick: clickHandler1
+        onClick: clickHandler1,
       })
     })
 
@@ -459,7 +481,7 @@ describe('vnode', () => {
       expect(mergeProps(props1, props2, props3)).toMatchObject({
         foo: {},
         bar: ['cc'],
-        baz: { ccc: true }
+        baz: { ccc: true },
       })
     })
   })
@@ -472,7 +494,7 @@ describe('vnode', () => {
         (openBlock(),
         createBlock('div', null, [
           hoist,
-          (vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT))
+          (vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT)),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
     })
@@ -483,7 +505,7 @@ describe('vnode', () => {
         (openBlock(),
         createBlock('div', null, [
           hoist,
-          createVNode('div', null, 'text', PatchFlags.NEED_HYDRATION)
+          createVNode('div', null, 'text', PatchFlags.NEED_HYDRATION),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([])
     })
@@ -500,8 +522,8 @@ describe('vnode', () => {
             (openBlock(),
             createBlock('div', null, [
               hoist,
-              (vnode3 = createVNode('div', null, 'text', PatchFlags.TEXT))
-            ])))
+              (vnode3 = createVNode('div', null, 'text', PatchFlags.TEXT)),
+            ]))),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1, vnode2])
       expect(vnode2.dynamicChildren).toStrictEqual([vnode3])
@@ -514,7 +536,7 @@ describe('vnode', () => {
         (openBlock(),
         createBlock('div', null, [
           hoist,
-          (vnode1 = createVNode({}, null, 'text'))
+          (vnode1 = createVNode({}, null, 'text')),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
     })
@@ -526,7 +548,7 @@ describe('vnode', () => {
         (openBlock(),
         createBlock('div', null, [
           hoist,
-          (vnode1 = createVNode(() => {}, null, 'text'))
+          (vnode1 = createVNode(() => {}, null, 'text')),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
     })
@@ -538,7 +560,7 @@ describe('vnode', () => {
         (openBlock(),
         createBlock('div', null, [
           hoist,
-          (vnode1 = createVNode(() => {}, null, 'text'))
+          (vnode1 = createVNode(() => {}, null, 'text')),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
     })
@@ -558,9 +580,9 @@ describe('vnode', () => {
           default: () => {
             return [
               hoist,
-              (vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT))
+              (vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT)),
             ]
-          }
+          },
         }))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
     })
@@ -578,8 +600,8 @@ describe('vnode', () => {
             (openBlock(true),
             createBlock(Fragment, null, [
               hoist,
-              /*vnode2*/ createVNode(() => {}, null, 'text')
-            ])))
+              /*vnode2*/ createVNode(() => {}, null, 'text'),
+            ]))),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
       expect(vnode1.dynamicChildren).toStrictEqual([])
@@ -595,8 +617,8 @@ describe('vnode', () => {
             (openBlock(),
             createBlock(Fragment, null, [
               hoist,
-              (vnode2 = createVNode(() => {}, null, 'text'))
-            ])))
+              (vnode2 = createVNode(() => {}, null, 'text')),
+            ]))),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
       expect(vnode1.dynamicChildren).toStrictEqual([vnode2])
@@ -610,9 +632,11 @@ describe('vnode', () => {
           setBlockTracking(-1),
           (vnode1 = (openBlock(), createBlock('div'))),
           setBlockTracking(1),
-          vnode1
+          vnode1,
         ]))
-      expect(vnode.dynamicChildren).toStrictEqual([])
+      const expected: VNode['dynamicChildren'] = []
+      expected.hasOnce = true
+      expect(vnode.dynamicChildren).toStrictEqual(expected)
     })
     // #5657
     test('error of slot function execution should not affect block tracking', () => {
@@ -621,7 +645,7 @@ describe('vnode', () => {
         () => {
           throw new Error('slot execution error')
         },
-        { type: {}, appContext: {} } as any
+        { type: {}, appContext: {} } as any,
       )
       const Parent = {
         setup(_: any, { slots }: any) {
@@ -630,7 +654,7 @@ describe('vnode', () => {
               slots.default()
             } catch (e) {}
           }
-        }
+        },
       }
       const vnode =
         (openBlock(), createBlock(Parent, null, { default: slotFn }))
@@ -652,7 +676,7 @@ describe('vnode', () => {
         type: 'div',
         props: { id: 'foo' },
         children: 'hello',
-        shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN
+        shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN,
       })
     })
 
@@ -663,7 +687,7 @@ describe('vnode', () => {
         type: 'div',
         props: { id: 'foo' },
         children: 'hello',
-        shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN
+        shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN,
       })
     })
 
@@ -680,7 +704,7 @@ describe('vnode', () => {
         name: 'Root Component',
         render() {
           return h('p') // this will be overwritten by the transform
-        }
+        },
       }
       const root = nodeOps.createElement('div')
       createApp(App).mount(root)
diff --git a/packages/runtime-core/__tests__/vnodeHooks.spec.ts b/packages/runtime-core/__tests__/vnodeHooks.spec.ts
index 15478bfd7..bd3a8a378 100644
--- a/packages/runtime-core/__tests__/vnodeHooks.spec.ts
+++ b/packages/runtime-core/__tests__/vnodeHooks.spec.ts
@@ -1,11 +1,11 @@
 import {
-  h,
-  render,
-  nodeOps,
-  VNodeProps,
-  TestElement,
+  type TestElement,
   TestNodeTypes,
-  VNode
+  type VNode,
+  type VNodeProps,
+  h,
+  nodeOps,
+  render,
 } from '@vue/runtime-test'
 
 describe('renderer: vnode hooks', () => {
@@ -45,17 +45,17 @@ describe('renderer: vnode hooks', () => {
       onVnodeBeforeUpdate: vi.fn(vnode => {
         expect((vnode.el as TestElement).children[0]).toMatchObject({
           type: TestNodeTypes.TEXT,
-          text: 'foo'
+          text: 'foo',
         })
       }),
       onVnodeUpdated: vi.fn(vnode => {
         expect((vnode.el as TestElement).children[0]).toMatchObject({
           type: TestNodeTypes.TEXT,
-          text: 'bar'
+          text: 'bar',
         })
       }),
       onVnodeBeforeUnmount: vi.fn(),
-      onVnodeUnmounted: vi.fn()
+      onVnodeUnmounted: vi.fn(),
     }
 
     assertHooks(hooks, h('div', hooks, 'foo'), h('div', hooks, 'bar'))
@@ -70,29 +70,29 @@ describe('renderer: vnode hooks', () => {
       onVnodeBeforeUpdate: vi.fn(vnode => {
         expect(vnode.el as TestElement).toMatchObject({
           type: TestNodeTypes.TEXT,
-          text: 'foo'
+          text: 'foo',
         })
       }),
       onVnodeUpdated: vi.fn(vnode => {
         expect(vnode.el as TestElement).toMatchObject({
           type: TestNodeTypes.TEXT,
-          text: 'bar'
+          text: 'bar',
         })
       }),
       onVnodeBeforeUnmount: vi.fn(),
-      onVnodeUnmounted: vi.fn()
+      onVnodeUnmounted: vi.fn(),
     }
 
     assertHooks(
       hooks,
       h(Comp, {
         ...hooks,
-        msg: 'foo'
+        msg: 'foo',
       }),
       h(Comp, {
         ...hooks,
-        msg: 'bar'
-      })
+        msg: 'bar',
+      }),
     )
   })
 })
diff --git a/packages/runtime-core/package.json b/packages/runtime-core/package.json
index 8e8df1e07..0e10386a0 100644
--- a/packages/runtime-core/package.json
+++ b/packages/runtime-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-core",
-  "version": "3.3.9",
+  "version": "3.5.11",
   "description": "@vue/runtime-core",
   "main": "index.js",
   "module": "dist/runtime-core.esm-bundler.js",
@@ -9,6 +9,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/runtime-core.d.ts",
+      "node": {
+        "production": "./dist/runtime-core.cjs.prod.js",
+        "development": "./dist/runtime-core.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/runtime-core.esm-bundler.js",
+      "import": "./dist/runtime-core.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "buildOptions": {
     "name": "VueRuntimeCore",
     "formats": [
diff --git a/packages/runtime-core/src/apiAsyncComponent.ts b/packages/runtime-core/src/apiAsyncComponent.ts
index 342339042..199b451f6 100644
--- a/packages/runtime-core/src/apiAsyncComponent.ts
+++ b/packages/runtime-core/src/apiAsyncComponent.ts
@@ -1,20 +1,21 @@
 import {
-  Component,
-  ConcreteComponent,
+  type Component,
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ConcreteComponent,
   currentInstance,
-  ComponentInternalInstance,
   isInSSRComponentSetup,
-  ComponentOptions
 } from './component'
 import { isFunction, isObject } from '@vue/shared'
-import { ComponentPublicInstance } from './componentPublicInstance'
-import { createVNode, VNode } from './vnode'
+import type { ComponentPublicInstance } from './componentPublicInstance'
+import { type VNode, createVNode } from './vnode'
 import { defineComponent } from './apiDefineComponent'
 import { warn } from './warning'
 import { ref } from '@vue/reactivity'
-import { handleError, ErrorCodes } from './errorHandling'
+import { ErrorCodes, handleError } from './errorHandling'
 import { isKeepAlive } from './components/KeepAlive'
-import { queueJob } from './scheduler'
+import { markAsyncBoundary } from './helpers/useId'
+import { type HydrationStrategy, forEachElement } from './hydrationStrategies'
 
 export type AsyncComponentResolveResult<T = Component> = T | { default: T } // es modules
 
@@ -29,11 +30,12 @@ export interface AsyncComponentOptions<T = any> {
   delay?: number
   timeout?: number
   suspensible?: boolean
+  hydrate?: HydrationStrategy
   onError?: (
     error: Error,
     retry: () => void,
     fail: () => void,
-    attempts: number
+    attempts: number,
   ) => any
 }
 
@@ -42,7 +44,7 @@ export const isAsyncWrapper = (i: ComponentInternalInstance | VNode): boolean =>
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineAsyncComponent<
-  T extends Component = { new (): ComponentPublicInstance }
+  T extends Component = { new (): ComponentPublicInstance },
 >(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T {
   if (isFunction(source)) {
     source = { loader: source }
@@ -53,9 +55,10 @@ export function defineAsyncComponent<
     loadingComponent,
     errorComponent,
     delay = 200,
+    hydrate: hydrateStrategy,
     timeout, // undefined = never times out
     suspensible = true,
-    onError: userOnError
+    onError: userOnError,
   } = source
 
   let pendingRequest: Promise<ConcreteComponent> | null = null
@@ -93,7 +96,7 @@ export function defineAsyncComponent<
             if (__DEV__ && !comp) {
               warn(
                 `Async component loader resolved to undefined. ` +
-                  `If you are using retry(), make sure to return its return value.`
+                  `If you are using retry(), make sure to return its return value.`,
               )
             }
             // interop module default
@@ -117,12 +120,31 @@ export function defineAsyncComponent<
 
     __asyncLoader: load,
 
+    __asyncHydrate(el, instance, hydrate) {
+      const doHydrate = hydrateStrategy
+        ? () => {
+            const teardown = hydrateStrategy(hydrate, cb =>
+              forEachElement(el, cb),
+            )
+            if (teardown) {
+              ;(instance.bum || (instance.bum = [])).push(teardown)
+            }
+          }
+        : hydrate
+      if (resolvedComp) {
+        doHydrate()
+      } else {
+        load().then(() => !instance.isUnmounted && doHydrate())
+      }
+    },
+
     get __asyncResolved() {
       return resolvedComp
     },
 
     setup() {
       const instance = currentInstance!
+      markAsyncBoundary(instance)
 
       // already resolved
       if (resolvedComp) {
@@ -135,7 +157,7 @@ export function defineAsyncComponent<
           err,
           instance,
           ErrorCodes.ASYNC_COMPONENT_LOADER,
-          !errorComponent /* do not throw in dev if user provided error component */
+          !errorComponent /* do not throw in dev if user provided error component */,
         )
       }
 
@@ -153,7 +175,7 @@ export function defineAsyncComponent<
             return () =>
               errorComponent
                 ? createVNode(errorComponent as ConcreteComponent, {
-                    error: err
+                    error: err,
                   })
                 : null
           })
@@ -173,7 +195,7 @@ export function defineAsyncComponent<
         setTimeout(() => {
           if (!loaded.value && !error.value) {
             const err = new Error(
-              `Async component timed out after ${timeout}ms.`
+              `Async component timed out after ${timeout}ms.`,
             )
             onError(err)
             error.value = err
@@ -187,7 +209,7 @@ export function defineAsyncComponent<
           if (instance.parent && isKeepAlive(instance.parent.vnode)) {
             // parent is keep-alive, force update so the loaded component's
             // name is taken into account
-            queueJob(instance.parent.update)
+            instance.parent.update()
           }
         })
         .catch(err => {
@@ -200,19 +222,19 @@ export function defineAsyncComponent<
           return createInnerComp(resolvedComp, instance)
         } else if (error.value && errorComponent) {
           return createVNode(errorComponent, {
-            error: error.value
+            error: error.value,
           })
         } else if (loadingComponent && !delayed.value) {
           return createVNode(loadingComponent)
         }
       }
-    }
+    },
   }) as T
 }
 
 function createInnerComp(
   comp: ConcreteComponent,
-  parent: ComponentInternalInstance
+  parent: ComponentInternalInstance,
 ) {
   const { ref, props, children, ce } = parent.vnode
   const vnode = createVNode(comp, props, children)
diff --git a/packages/runtime-core/src/apiComputed.ts b/packages/runtime-core/src/apiComputed.ts
index 1cd9c2ec2..2ebb2d4e6 100644
--- a/packages/runtime-core/src/apiComputed.ts
+++ b/packages/runtime-core/src/apiComputed.ts
@@ -1,10 +1,17 @@
-import { computed as _computed } from '@vue/reactivity'
-import { isInSSRComponentSetup } from './component'
+import { type ComputedRefImpl, computed as _computed } from '@vue/reactivity'
+import { getCurrentInstance, isInSSRComponentSetup } from './component'
 
 export const computed: typeof _computed = (
   getterOrOptions: any,
-  debugOptions?: any
+  debugOptions?: any,
 ) => {
-  // @ts-ignore
-  return _computed(getterOrOptions, debugOptions, isInSSRComponentSetup)
+  // @ts-expect-error
+  const c = _computed(getterOrOptions, debugOptions, isInSSRComponentSetup)
+  if (__DEV__) {
+    const i = getCurrentInstance()
+    if (i && i.appContext.config.warnRecursiveComputed) {
+      ;(c as unknown as ComputedRefImpl<any>)._warnRecursive = true
+    }
+  }
+  return c as any
 }
diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts
index 8e58e6937..3d53716de 100644
--- a/packages/runtime-core/src/apiCreateApp.ts
+++ b/packages/runtime-core/src/apiCreateApp.ts
@@ -1,33 +1,34 @@
 import {
-  ConcreteComponent,
-  Data,
+  type Component,
+  type ComponentInternalInstance,
+  type ConcreteComponent,
+  type Data,
+  getComponentPublicInstance,
   validateComponentName,
-  Component,
-  ComponentInternalInstance,
-  getExposeProxy
 } from './component'
-import {
+import type {
   ComponentOptions,
   MergedComponentOptions,
-  RuntimeCompilerOptions
+  RuntimeCompilerOptions,
 } from './componentOptions'
-import {
+import type {
   ComponentCustomProperties,
-  ComponentPublicInstance
+  ComponentPublicInstance,
 } from './componentPublicInstance'
-import { Directive, validateDirectiveName } from './directives'
-import { RootRenderFunction } from './renderer'
-import { InjectionKey } from './apiInject'
+import { type Directive, validateDirectiveName } from './directives'
+import type { ElementNamespace, RootRenderFunction } from './renderer'
+import type { InjectionKey } from './apiInject'
 import { warn } from './warning'
-import { createVNode, cloneVNode, VNode } from './vnode'
-import { RootHydrateFunction } from './hydration'
+import { type VNode, cloneVNode, createVNode } from './vnode'
+import type { RootHydrateFunction } from './hydration'
 import { devtoolsInitApp, devtoolsUnmountApp } from './devtools'
-import { isFunction, NO, isObject, extend } from '@vue/shared'
+import { NO, extend, isFunction, isObject } from '@vue/shared'
 import { version } from '.'
 import { installAppCompatProperties } from './compat/global'
-import { NormalizedPropsOptions } from './componentProps'
-import { ObjectEmitsOptions } from './componentEmits'
-import { DefineComponent } from './apiDefineComponent'
+import type { NormalizedPropsOptions } from './componentProps'
+import type { ObjectEmitsOptions } from './componentEmits'
+import { ErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
+import type { DefineComponent } from './apiDefineComponent'
 
 export interface App<HostElement = any> {
   version: string
@@ -41,16 +42,48 @@ export interface App<HostElement = any> {
 
   mixin(mixin: ComponentOptions): this
   component(name: string): Component | undefined
-  component(name: string, component: Component | DefineComponent): this
-  directive(name: string): Directive | undefined
-  directive(name: string, directive: Directive): this
+  component<T extends Component | DefineComponent>(
+    name: string,
+    component: T,
+  ): this
+  directive<
+    HostElement = any,
+    Value = any,
+    Modifiers extends string = string,
+    Arg extends string = string,
+  >(
+    name: string,
+  ): Directive<HostElement, Value, Modifiers, Arg> | undefined
+  directive<
+    HostElement = any,
+    Value = any,
+    Modifiers extends string = string,
+    Arg extends string = string,
+  >(
+    name: string,
+    directive: Directive<HostElement, Value, Modifiers, Arg>,
+  ): this
   mount(
     rootContainer: HostElement | string,
+    /**
+     * @internal
+     */
     isHydrate?: boolean,
-    isSVG?: boolean
+    /**
+     * @internal
+     */
+    namespace?: boolean | ElementNamespace,
+    /**
+     * @internal
+     */
+    vnode?: VNode,
   ): ComponentPublicInstance
   unmount(): void
-  provide<T>(key: InjectionKey<T> | string, value: T): this
+  onUnmount(cb: () => void): void
+  provide<T, K = InjectionKey<T> | string | number>(
+    key: K,
+    value: K extends InjectionKey<infer V> ? V : T,
+  ): this
 
   /**
    * Runs a function with the app as active instance. This allows using of `inject()` within the function to get access
@@ -68,6 +101,11 @@ export interface App<HostElement = any> {
   _context: AppContext
   _instance: ComponentInternalInstance | null
 
+  /**
+   * @internal custom element vnode
+   */
+  _ceVNode?: VNode
+
   /**
    * v2 compat only
    */
@@ -84,7 +122,7 @@ export type OptionMergeFunction = (to: unknown, from: unknown) => any
 
 export interface AppConfig {
   // @private
-  readonly isNativeTag?: (tag: string) => boolean
+  readonly isNativeTag: (tag: string) => boolean
 
   performance: boolean
   optionMergeStrategies: Record<string, OptionMergeFunction>
@@ -92,12 +130,12 @@ export interface AppConfig {
   errorHandler?: (
     err: unknown,
     instance: ComponentPublicInstance | null,
-    info: string
+    info: string,
   ) => void
   warnHandler?: (
     msg: string,
     instance: ComponentPublicInstance | null,
-    trace: string
+    trace: string,
   ) => void
 
   /**
@@ -111,12 +149,23 @@ export interface AppConfig {
    */
   isCustomElement?: (tag: string) => boolean
 
-  // TODO remove in 3.4
   /**
-   * Temporary config for opt-in to unwrap injected refs.
-   * @deprecated this no longer has effect. 3.3 always unwraps injected refs.
+   * TODO document for 3.5
+   * Enable warnings for computed getters that recursively trigger itself.
    */
-  unwrapInjectedRef?: boolean
+  warnRecursiveComputed?: boolean
+
+  /**
+   * Whether to throw unhandled errors in production.
+   * Default is `false` to avoid crashing on any error (and only logs it)
+   * But in some cases, e.g. SSR, throwing might be more desirable.
+   */
+  throwUnhandledErrorInProduction?: boolean
+
+  /**
+   * Prefix for all useId() calls within this app
+   */
+  idPrefix?: string
 }
 
 export interface AppContext {
@@ -156,17 +205,19 @@ export interface AppContext {
   filters?: Record<string, Function>
 }
 
-type PluginInstallFunction<Options> = Options extends unknown[]
+type PluginInstallFunction<Options = any[]> = Options extends unknown[]
   ? (app: App, ...options: Options) => any
   : (app: App, options: Options) => any
 
+export type ObjectPlugin<Options = any[]> = {
+  install: PluginInstallFunction<Options>
+}
+export type FunctionPlugin<Options = any[]> = PluginInstallFunction<Options> &
+  Partial<ObjectPlugin<Options>>
+
 export type Plugin<Options = any[]> =
-  | (PluginInstallFunction<Options> & {
-      install?: PluginInstallFunction<Options>
-    })
-  | {
-      install: PluginInstallFunction<Options>
-    }
+  | FunctionPlugin<Options>
+  | ObjectPlugin<Options>
 
 export function createAppContext(): AppContext {
   return {
@@ -178,7 +229,7 @@ export function createAppContext(): AppContext {
       optionMergeStrategies: {},
       errorHandler: undefined,
       warnHandler: undefined,
-      compilerOptions: {}
+      compilerOptions: {},
     },
     mixins: [],
     components: {},
@@ -186,20 +237,20 @@ export function createAppContext(): AppContext {
     provides: Object.create(null),
     optionsCache: new WeakMap(),
     propsCache: new WeakMap(),
-    emitsCache: new WeakMap()
+    emitsCache: new WeakMap(),
   }
 }
 
 export type CreateAppFunction<HostElement> = (
   rootComponent: Component,
-  rootProps?: Data | null
+  rootProps?: Data | null,
 ) => App<HostElement>
 
 let uid = 0
 
 export function createAppAPI<HostElement>(
   render: RootRenderFunction<HostElement>,
-  hydrate?: RootHydrateFunction
+  hydrate?: RootHydrateFunction,
 ): CreateAppFunction<HostElement> {
   return function createApp(rootComponent, rootProps = null) {
     if (!isFunction(rootComponent)) {
@@ -212,23 +263,8 @@ export function createAppAPI<HostElement>(
     }
 
     const context = createAppContext()
-
-    // TODO remove in 3.4
-    if (__DEV__) {
-      Object.defineProperty(context.config, 'unwrapInjectedRef', {
-        get() {
-          return true
-        },
-        set() {
-          warn(
-            `app.config.unwrapInjectedRef has been deprecated. ` +
-              `3.3 now always unwraps injected refs in Options API.`
-          )
-        }
-      })
-    }
-
     const installedPlugins = new WeakSet()
+    const pluginCleanupFns: Array<() => any> = []
 
     let isMounted = false
 
@@ -249,7 +285,7 @@ export function createAppAPI<HostElement>(
       set config(v) {
         if (__DEV__) {
           warn(
-            `app.config cannot be replaced. Modify individual options instead.`
+            `app.config cannot be replaced. Modify individual options instead.`,
           )
         }
       },
@@ -266,7 +302,7 @@ export function createAppAPI<HostElement>(
         } else if (__DEV__) {
           warn(
             `A plugin must either be a function or an object with an "install" ` +
-              `function.`
+              `function.`,
           )
         }
         return app
@@ -279,7 +315,7 @@ export function createAppAPI<HostElement>(
           } else if (__DEV__) {
             warn(
               'Mixin has already been applied to target app' +
-                (mixin.name ? `: ${mixin.name}` : '')
+                (mixin.name ? `: ${mixin.name}` : ''),
             )
           }
         } else if (__DEV__) {
@@ -320,7 +356,7 @@ export function createAppAPI<HostElement>(
       mount(
         rootContainer: HostElement,
         isHydrate?: boolean,
-        isSVG?: boolean
+        namespace?: boolean | ElementNamespace,
       ): any {
         if (!isMounted) {
           // #5571
@@ -328,25 +364,37 @@ export function createAppAPI<HostElement>(
             warn(
               `There is already an app instance mounted on the host container.\n` +
                 ` If you want to mount another app on the same host container,` +
-                ` you need to unmount the previous app by calling \`app.unmount()\` first.`
+                ` you need to unmount the previous app by calling \`app.unmount()\` first.`,
             )
           }
-          const vnode = createVNode(rootComponent, rootProps)
+          const vnode = app._ceVNode || createVNode(rootComponent, rootProps)
           // store app context on the root VNode.
           // this will be set on the root instance on initial mount.
           vnode.appContext = context
 
+          if (namespace === true) {
+            namespace = 'svg'
+          } else if (namespace === false) {
+            namespace = undefined
+          }
+
           // HMR root reload
           if (__DEV__) {
             context.reload = () => {
-              render(cloneVNode(vnode), rootContainer, isSVG)
+              // casting to ElementNamespace because TS doesn't guarantee type narrowing
+              // over function boundaries
+              render(
+                cloneVNode(vnode),
+                rootContainer,
+                namespace as ElementNamespace,
+              )
             }
           }
 
           if (isHydrate && hydrate) {
             hydrate(vnode as VNode<Node, Element>, rootContainer as any)
           } else {
-            render(vnode, rootContainer, isSVG)
+            render(vnode, rootContainer, namespace)
           }
           isMounted = true
           app._container = rootContainer
@@ -358,19 +406,34 @@ export function createAppAPI<HostElement>(
             devtoolsInitApp(app, version)
           }
 
-          return getExposeProxy(vnode.component!) || vnode.component!.proxy
+          return getComponentPublicInstance(vnode.component!)
         } else if (__DEV__) {
           warn(
             `App has already been mounted.\n` +
               `If you want to remount the same app, move your app creation logic ` +
               `into a factory function and create fresh app instances for each ` +
-              `mount - e.g. \`const createMyApp = () => createApp(App)\``
+              `mount - e.g. \`const createMyApp = () => createApp(App)\``,
           )
         }
       },
 
+      onUnmount(cleanupFn: () => void) {
+        if (__DEV__ && typeof cleanupFn !== 'function') {
+          warn(
+            `Expected function as first argument to app.onUnmount(), ` +
+              `but got ${typeof cleanupFn}`,
+          )
+        }
+        pluginCleanupFns.push(cleanupFn)
+      },
+
       unmount() {
         if (isMounted) {
+          callWithAsyncErrorHandling(
+            pluginCleanupFns,
+            app._instance,
+            ErrorCodes.APP_UNMOUNT_CLEANUP,
+          )
           render(null, app._container)
           if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
             app._instance = null
@@ -386,7 +449,7 @@ export function createAppAPI<HostElement>(
         if (__DEV__ && (key as string | symbol) in context.provides) {
           warn(
             `App already provides property with key "${String(key)}". ` +
-              `It will be overwritten with the new value.`
+              `It will be overwritten with the new value.`,
           )
         }
 
@@ -396,13 +459,14 @@ export function createAppAPI<HostElement>(
       },
 
       runWithContext(fn) {
+        const lastApp = currentApp
         currentApp = app
         try {
           return fn()
         } finally {
-          currentApp = null
+          currentApp = lastApp
         }
-      }
+      },
     })
 
     if (__COMPAT__) {
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index 092f679e9..9ae6b41a4 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -1,34 +1,41 @@
-import {
+import type {
+  ComponentInjectOptions,
+  ComponentOptions,
+  ComponentOptionsBase,
+  ComponentOptionsMixin,
+  ComponentProvideOptions,
   ComputedOptions,
   MethodOptions,
-  ComponentOptionsWithoutProps,
-  ComponentOptionsWithArrayProps,
-  ComponentOptionsWithObjectProps,
-  ComponentOptionsMixin,
   RenderFunction,
-  ComponentOptionsBase,
-  ComponentInjectOptions,
-  ComponentOptions
 } from './componentOptions'
-import {
-  SetupContext,
+import type {
   AllowedComponentProps,
-  ComponentCustomProps
+  Component,
+  ComponentCustomProps,
+  GlobalComponents,
+  GlobalDirectives,
+  SetupContext,
 } from './component'
-import {
-  ExtractPropTypes,
+import type {
+  ComponentObjectPropsOptions,
   ComponentPropsOptions,
   ExtractDefaultPropTypes,
-  ComponentObjectPropsOptions
+  ExtractPropTypes,
 } from './componentProps'
-import { EmitsOptions, EmitsToProps } from './componentEmits'
-import { extend, isFunction } from '@vue/shared'
-import { VNodeProps } from './vnode'
-import {
-  CreateComponentPublicInstance,
-  ComponentPublicInstanceConstructor
+import type {
+  EmitsOptions,
+  EmitsToProps,
+  TypeEmitsToOptions,
+} from './componentEmits'
+import { type IsKeyValues, extend, isFunction } from '@vue/shared'
+import type { VNodeProps } from './vnode'
+import type {
+  ComponentPublicInstanceConstructor,
+  CreateComponentPublicInstanceWithMixins,
 } from './componentPublicInstance'
-import { SlotsType } from './componentSlots'
+import type { SlotsType } from './componentSlots'
+import type { Directive } from './directives'
+import type { ComponentTypeEmits } from './apiSetupHelpers'
 
 export type PublicProps = VNodeProps &
   AllowedComponentProps &
@@ -54,9 +61,16 @@ export type DefineComponent<
   PP = PublicProps,
   Props = ResolveProps<PropsOrPropOptions, E>,
   Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
+  LC extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
+  MakeDefaultsOptional extends boolean = true,
+  TypeRefs extends Record<string, unknown> = {},
+  TypeEl extends Element = any,
 > = ComponentPublicInstanceConstructor<
-  CreateComponentPublicInstance<
+  CreateComponentPublicInstanceWithMixins<
     Props,
     RawBindings,
     D,
@@ -65,11 +79,16 @@ export type DefineComponent<
     Mixin,
     Extends,
     E,
-    PP & Props,
+    PP,
     Defaults,
-    true,
+    MakeDefaultsOptional,
     {},
-    S
+    S,
+    LC & GlobalComponents,
+    Directives & GlobalDirectives,
+    Exposed,
+    TypeRefs,
+    TypeEl
   >
 > &
   ComponentOptionsBase<
@@ -85,10 +104,41 @@ export type DefineComponent<
     Defaults,
     {},
     string,
-    S
+    S,
+    LC & GlobalComponents,
+    Directives & GlobalDirectives,
+    Exposed,
+    Provide
   > &
   PP
 
+export type DefineSetupFnComponent<
+  P extends Record<string, any>,
+  E extends EmitsOptions = {},
+  S extends SlotsType = SlotsType,
+  Props = P & EmitsToProps<E>,
+  PP = PublicProps,
+> = new (
+  props: Props & PP,
+) => CreateComponentPublicInstanceWithMixins<
+  Props,
+  {},
+  {},
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  E,
+  PP,
+  {},
+  false,
+  {},
+  S
+>
+
+type ToResolvedProps<Props, Emits extends EmitsOptions> = Readonly<Props> &
+  Readonly<EmitsToProps<Emits>>
+
 // defineComponent is a utility that is primarily used for type inference
 // when declaring components. Type inference is provided in the component
 // options (provided as the argument). The returned value has artificial types
@@ -100,188 +150,166 @@ export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},
   EE extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 >(
   setup: (
     props: Props,
-    ctx: SetupContext<E, S>
+    ctx: SetupContext<E, S>,
   ) => RenderFunction | Promise<RenderFunction>,
   options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
     props?: (keyof Props)[]
     emits?: E | EE[]
     slots?: S
-  }
-): (props: Props & EmitsToProps<E>) => any
+  },
+): DefineSetupFnComponent<Props, E, S>
 export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},
   EE extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 >(
   setup: (
     props: Props,
-    ctx: SetupContext<E, S>
+    ctx: SetupContext<E, S>,
   ) => RenderFunction | Promise<RenderFunction>,
   options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
     props?: ComponentObjectPropsOptions<Props>
     emits?: E | EE[]
     slots?: S
-  }
-): (props: Props & EmitsToProps<E>) => any
+  },
+): DefineSetupFnComponent<Props, E, S>
 
-// overload 2: object format with no props
-// (uses user defined props interface)
-// return type is for Vetur and TSX support
+// overload 2: defineComponent with options object, infer props from options
 export function defineComponent<
-  Props = {},
-  RawBindings = {},
-  D = {},
-  C extends ComputedOptions = {},
-  M extends MethodOptions = {},
+  // props
+  TypeProps,
+  RuntimePropsOptions extends
+    ComponentObjectPropsOptions = ComponentObjectPropsOptions,
+  RuntimePropsKeys extends string = string,
+  // emits
+  TypeEmits extends ComponentTypeEmits = {},
+  RuntimeEmitsOptions extends EmitsOptions = {},
+  RuntimeEmitsKeys extends string = string,
+  // other options
+  Data = {},
+  SetupBindings = {},
+  Computed extends ComputedOptions = {},
+  Methods extends MethodOptions = {},
   Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = {},
-  EE extends string = string,
-  S extends SlotsType = {},
-  I extends ComponentInjectOptions = {},
-  II extends string = string
+  InjectOptions extends ComponentInjectOptions = {},
+  InjectKeys extends string = string,
+  Slots extends SlotsType = {},
+  LocalComponents extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
+  // resolved types
+  ResolvedEmits extends EmitsOptions = {} extends RuntimeEmitsOptions
+    ? TypeEmitsToOptions<TypeEmits>
+    : RuntimeEmitsOptions,
+  InferredProps = IsKeyValues<TypeProps> extends true
+    ? TypeProps
+    : string extends RuntimePropsKeys
+      ? ComponentObjectPropsOptions extends RuntimePropsOptions
+        ? {}
+        : ExtractPropTypes<RuntimePropsOptions>
+      : { [key in RuntimePropsKeys]?: any },
+  TypeRefs extends Record<string, unknown> = {},
+  TypeEl extends Element = any,
 >(
-  options: ComponentOptionsWithoutProps<
-    Props,
-    RawBindings,
-    D,
-    C,
-    M,
+  options: {
+    props?: (RuntimePropsOptions & ThisType<void>) | RuntimePropsKeys[]
+    /**
+     * @private for language-tools use only
+     */
+    __typeProps?: TypeProps
+    /**
+     * @private for language-tools use only
+     */
+    __typeEmits?: TypeEmits
+    /**
+     * @private for language-tools use only
+     */
+    __typeRefs?: TypeRefs
+    /**
+     * @private for language-tools use only
+     */
+    __typeEl?: TypeEl
+  } & ComponentOptionsBase<
+    ToResolvedProps<InferredProps, ResolvedEmits>,
+    SetupBindings,
+    Data,
+    Computed,
+    Methods,
     Mixin,
     Extends,
-    E,
-    EE,
-    I,
-    II,
-    S
-  >
+    RuntimeEmitsOptions,
+    RuntimeEmitsKeys,
+    {}, // Defaults
+    InjectOptions,
+    InjectKeys,
+    Slots,
+    LocalComponents,
+    Directives,
+    Exposed,
+    Provide
+  > &
+    ThisType<
+      CreateComponentPublicInstanceWithMixins<
+        ToResolvedProps<InferredProps, ResolvedEmits>,
+        SetupBindings,
+        Data,
+        Computed,
+        Methods,
+        Mixin,
+        Extends,
+        ResolvedEmits,
+        RuntimeEmitsKeys,
+        {},
+        false,
+        InjectOptions,
+        Slots,
+        LocalComponents,
+        Directives,
+        Exposed
+      >
+    >,
 ): DefineComponent<
-  Props,
-  RawBindings,
-  D,
-  C,
-  M,
+  InferredProps,
+  SetupBindings,
+  Data,
+  Computed,
+  Methods,
   Mixin,
   Extends,
-  E,
-  EE,
+  ResolvedEmits,
+  RuntimeEmitsKeys,
   PublicProps,
-  ResolveProps<Props, E>,
-  ExtractDefaultPropTypes<Props>,
-  S
->
-
-// overload 3: object format with array props declaration
-// props inferred as { [key in PropNames]?: any }
-// return type is for Vetur and TSX support
-export function defineComponent<
-  PropNames extends string,
-  RawBindings,
-  D,
-  C extends ComputedOptions = {},
-  M extends MethodOptions = {},
-  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
-  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = {},
-  EE extends string = string,
-  S extends SlotsType = {},
-  I extends ComponentInjectOptions = {},
-  II extends string = string,
-  Props = Readonly<{ [key in PropNames]?: any }>
->(
-  options: ComponentOptionsWithArrayProps<
-    PropNames,
-    RawBindings,
-    D,
-    C,
-    M,
-    Mixin,
-    Extends,
-    E,
-    EE,
-    I,
-    II,
-    S
-  >
-): DefineComponent<
-  Props,
-  RawBindings,
-  D,
-  C,
-  M,
-  Mixin,
-  Extends,
-  E,
-  EE,
-  PublicProps,
-  ResolveProps<Props, E>,
-  ExtractDefaultPropTypes<Props>,
-  S
->
-
-// overload 4: object format with object props declaration
-// see `ExtractPropTypes` in ./componentProps.ts
-export function defineComponent<
-  // the Readonly constraint allows TS to treat the type of { required: true }
-  // as constant instead of boolean.
-  PropsOptions extends Readonly<ComponentPropsOptions>,
-  RawBindings,
-  D,
-  C extends ComputedOptions = {},
-  M extends MethodOptions = {},
-  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
-  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = {},
-  EE extends string = string,
-  S extends SlotsType = {},
-  I extends ComponentInjectOptions = {},
-  II extends string = string
->(
-  options: ComponentOptionsWithObjectProps<
-    PropsOptions,
-    RawBindings,
-    D,
-    C,
-    M,
-    Mixin,
-    Extends,
-    E,
-    EE,
-    I,
-    II,
-    S
-  >
-): DefineComponent<
-  PropsOptions,
-  RawBindings,
-  D,
-  C,
-  M,
-  Mixin,
-  Extends,
-  E,
-  EE,
-  PublicProps,
-  ResolveProps<PropsOptions, E>,
-  ExtractDefaultPropTypes<PropsOptions>,
-  S
+  ToResolvedProps<InferredProps, ResolvedEmits>,
+  ExtractDefaultPropTypes<RuntimePropsOptions>,
+  Slots,
+  LocalComponents,
+  Directives,
+  Exposed,
+  Provide,
+  // MakeDefaultsOptional - if TypeProps is provided, set to false to use
+  // user props types verbatim
+  unknown extends TypeProps ? true : false,
+  TypeRefs,
+  TypeEl
 >
 
 // implementation, close to no-op
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineComponent(
   options: unknown,
-  extraOptions?: ComponentOptions
+  extraOptions?: ComponentOptions,
 ) {
   return isFunction(options)
-    ? // #8326: extend call and options.name access are considered side-effects
+    ? // #8236: extend call and options.name access are considered side-effects
       // by Rollup, so we have to wrap it in a pure-annotated IIFE.
-      /*#__PURE__*/ (() =>
+      /*@__PURE__*/ (() =>
         extend({ name: options.name }, extraOptions, { setup: options }))()
     : options
 }
diff --git a/packages/runtime-core/src/apiInject.ts b/packages/runtime-core/src/apiInject.ts
index bbf925102..f05d7333d 100644
--- a/packages/runtime-core/src/apiInject.ts
+++ b/packages/runtime-core/src/apiInject.ts
@@ -4,12 +4,14 @@ import { currentRenderingInstance } from './componentRenderContext'
 import { currentApp } from './apiCreateApp'
 import { warn } from './warning'
 
-export interface InjectionKey<T> extends Symbol {}
+interface InjectionConstraint<T> {}
+
+export type InjectionKey<T> = symbol & InjectionConstraint<T>
 
 export function provide<T, K = InjectionKey<T> | string | number>(
   key: K,
-  value: K extends InjectionKey<infer V> ? V : T
-) {
+  value: K extends InjectionKey<infer V> ? V : T,
+): void {
   if (!currentInstance) {
     if (__DEV__) {
       warn(`provide() can only be used inside setup().`)
@@ -35,17 +37,17 @@ export function inject<T>(key: InjectionKey<T> | string): T | undefined
 export function inject<T>(
   key: InjectionKey<T> | string,
   defaultValue: T,
-  treatDefaultAsFactory?: false
+  treatDefaultAsFactory?: false,
 ): T
 export function inject<T>(
   key: InjectionKey<T> | string,
   defaultValue: T | (() => T),
-  treatDefaultAsFactory: true
+  treatDefaultAsFactory: true,
 ): T
 export function inject(
   key: InjectionKey<any> | string,
   defaultValue?: unknown,
-  treatDefaultAsFactory = false
+  treatDefaultAsFactory = false,
 ) {
   // fallback to `currentRenderingInstance` so that this can be called in
   // a functional component
@@ -56,11 +58,14 @@ export function inject(
     // #2400
     // to support `app.use` plugins,
     // fallback to appContext's `provides` if the instance is at root
-    const provides = instance
-      ? instance.parent == null
-        ? instance.vnode.appContext && instance.vnode.appContext.provides
-        : instance.parent.provides
-      : currentApp!._context.provides
+    // #11488, in a nested createApp, prioritize using the provides from currentApp
+    const provides = currentApp
+      ? currentApp._context.provides
+      : instance
+        ? instance.parent == null
+          ? instance.vnode.appContext && instance.vnode.appContext.provides
+          : instance.parent.provides
+        : undefined
 
     if (provides && (key as string | symbol) in provides) {
       // TS doesn't allow symbol as index type
diff --git a/packages/runtime-core/src/apiLifecycle.ts b/packages/runtime-core/src/apiLifecycle.ts
index 0cd888463..b79a6d38a 100644
--- a/packages/runtime-core/src/apiLifecycle.ts
+++ b/packages/runtime-core/src/apiLifecycle.ts
@@ -1,15 +1,18 @@
 import {
-  ComponentInternalInstance,
+  type ComponentInternalInstance,
   currentInstance,
   isInSSRComponentSetup,
   setCurrentInstance,
-  unsetCurrentInstance
 } from './component'
-import { ComponentPublicInstance } from './componentPublicInstance'
-import { callWithAsyncErrorHandling, ErrorTypeStrings } from './errorHandling'
+import type { ComponentPublicInstance } from './componentPublicInstance'
+import { ErrorTypeStrings, callWithAsyncErrorHandling } from './errorHandling'
 import { warn } from './warning'
 import { toHandlerKey } from '@vue/shared'
-import { DebuggerEvent, pauseTracking, resetTracking } from '@vue/reactivity'
+import {
+  type DebuggerEvent,
+  pauseTracking,
+  resetTracking,
+} from '@vue/reactivity'
 import { LifecycleHooks } from './enums'
 
 export { onActivated, onDeactivated } from './components/KeepAlive'
@@ -18,7 +21,7 @@ export function injectHook(
   type: LifecycleHooks,
   hook: Function & { __weh?: Function },
   target: ComponentInternalInstance | null = currentInstance,
-  prepend: boolean = false
+  prepend: boolean = false,
 ): Function | undefined {
   if (target) {
     const hooks = target[type] || (target[type] = [])
@@ -28,18 +31,15 @@ export function injectHook(
     const wrappedHook =
       hook.__weh ||
       (hook.__weh = (...args: unknown[]) => {
-        if (target.isUnmounted) {
-          return
-        }
         // disable tracking inside all lifecycle hooks
         // since they can potentially be called inside effects.
         pauseTracking()
         // Set currentInstance during hook invocation.
         // This assumes the hook does not synchronously trigger other hooks, which
         // can only be false when the user does something really funky.
-        setCurrentInstance(target)
+        const reset = setCurrentInstance(target)
         const res = callWithAsyncErrorHandling(hook, target, type, args)
-        unsetCurrentInstance()
+        reset()
         resetTracking()
         return res
       })
@@ -58,43 +58,59 @@ export function injectHook(
         (__FEATURE_SUSPENSE__
           ? ` If you are using async setup(), make sure to register lifecycle ` +
             `hooks before the first await statement.`
-          : ``)
+          : ``),
     )
   }
 }
 
-export const createHook =
+const createHook =
   <T extends Function = () => any>(lifecycle: LifecycleHooks) =>
-  (hook: T, target: ComponentInternalInstance | null = currentInstance) =>
+  (
+    hook: T,
+    target: ComponentInternalInstance | null = currentInstance,
+  ): void => {
     // post-create lifecycle registrations are noops during SSR (except for serverPrefetch)
-    (!isInSSRComponentSetup || lifecycle === LifecycleHooks.SERVER_PREFETCH) &&
-    injectHook(lifecycle, (...args: unknown[]) => hook(...args), target)
+    if (
+      !isInSSRComponentSetup ||
+      lifecycle === LifecycleHooks.SERVER_PREFETCH
+    ) {
+      injectHook(lifecycle, (...args: unknown[]) => hook(...args), target)
+    }
+  }
+type CreateHook<T = any> = (
+  hook: T,
+  target?: ComponentInternalInstance | null,
+) => void
 
-export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT)
-export const onMounted = createHook(LifecycleHooks.MOUNTED)
-export const onBeforeUpdate = createHook(LifecycleHooks.BEFORE_UPDATE)
-export const onUpdated = createHook(LifecycleHooks.UPDATED)
-export const onBeforeUnmount = createHook(LifecycleHooks.BEFORE_UNMOUNT)
-export const onUnmounted = createHook(LifecycleHooks.UNMOUNTED)
-export const onServerPrefetch = createHook(LifecycleHooks.SERVER_PREFETCH)
+export const onBeforeMount: CreateHook = createHook(LifecycleHooks.BEFORE_MOUNT)
+export const onMounted: CreateHook = createHook(LifecycleHooks.MOUNTED)
+export const onBeforeUpdate: CreateHook = createHook(
+  LifecycleHooks.BEFORE_UPDATE,
+)
+export const onUpdated: CreateHook = createHook(LifecycleHooks.UPDATED)
+export const onBeforeUnmount: CreateHook = createHook(
+  LifecycleHooks.BEFORE_UNMOUNT,
+)
+export const onUnmounted: CreateHook = createHook(LifecycleHooks.UNMOUNTED)
+export const onServerPrefetch: CreateHook = createHook(
+  LifecycleHooks.SERVER_PREFETCH,
+)
 
 export type DebuggerHook = (e: DebuggerEvent) => void
-export const onRenderTriggered = createHook<DebuggerHook>(
-  LifecycleHooks.RENDER_TRIGGERED
-)
-export const onRenderTracked = createHook<DebuggerHook>(
-  LifecycleHooks.RENDER_TRACKED
-)
+export const onRenderTriggered: CreateHook<DebuggerHook> =
+  createHook<DebuggerHook>(LifecycleHooks.RENDER_TRIGGERED)
+export const onRenderTracked: CreateHook<DebuggerHook> =
+  createHook<DebuggerHook>(LifecycleHooks.RENDER_TRACKED)
 
 export type ErrorCapturedHook<TError = unknown> = (
   err: TError,
   instance: ComponentPublicInstance | null,
-  info: string
+  info: string,
 ) => boolean | void
 
 export function onErrorCaptured<TError = Error>(
   hook: ErrorCapturedHook<TError>,
-  target: ComponentInternalInstance | null = currentInstance
-) {
+  target: ComponentInternalInstance | null = currentInstance,
+): void {
   injectHook(LifecycleHooks.ERROR_CAPTURED, hook, target)
 }
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 509c280d6..33817818a 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -1,44 +1,43 @@
 import {
-  isArray,
-  isPromise,
-  isFunction,
-  Prettify,
-  UnionToIntersection,
+  type IfAny,
+  type LooseRequired,
+  type Prettify,
+  type UnionToIntersection,
   extend,
-  LooseRequired
+  isArray,
+  isFunction,
+  isPromise,
 } from '@vue/shared'
 import {
+  type SetupContext,
+  createSetupContext,
   getCurrentInstance,
   setCurrentInstance,
-  SetupContext,
-  createSetupContext,
-  unsetCurrentInstance
+  unsetCurrentInstance,
 } from './component'
-import { EmitFn, EmitsOptions, ObjectEmitsOptions } from './componentEmits'
-import {
+import type { EmitFn, EmitsOptions, ObjectEmitsOptions } from './componentEmits'
+import type {
+  ComponentOptionsBase,
   ComponentOptionsMixin,
-  ComponentOptionsWithoutProps,
   ComputedOptions,
-  MethodOptions
+  MethodOptions,
 } from './componentOptions'
-import {
-  ComponentPropsOptions,
+import type {
   ComponentObjectPropsOptions,
+  ComponentPropsOptions,
   ExtractPropTypes,
-  NormalizedProps,
-  PropOptions
+  PropOptions,
 } from './componentProps'
 import { warn } from './warning'
-import { SlotsType, StrictUnwrapSlotsType } from './componentSlots'
-import { Ref, ref } from '@vue/reactivity'
-import { watch } from './apiWatch'
+import type { SlotsType, StrictUnwrapSlotsType } from './componentSlots'
+import type { Ref } from '@vue/reactivity'
 
 // dev only
 const warnRuntimeUsage = (method: string) =>
   warn(
     `${method}() is a compiler-hint helper that is only usable inside ` +
       `<script setup> of a single file component. Its arguments should be ` +
-      `compiled away and passing it at runtime has no effect.`
+      `compiled away and passing it at runtime has no effect.`,
   )
 
 /**
@@ -66,20 +65,20 @@ const warnRuntimeUsage = (method: string) =>
  *   foo?: string
  *   bar: number
  * }>()
+ * ```
  *
  * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits}
- * ```
  *
  * This is only usable inside `<script setup>`, is compiled away in the
  * output and should **not** be actually called at runtime.
  */
 // overload 1: runtime props w/ array
 export function defineProps<PropNames extends string = string>(
-  props: PropNames[]
+  props: PropNames[],
 ): Prettify<Readonly<{ [key in PropNames]?: any }>>
 // overload 2: runtime props w/ object
 export function defineProps<
-  PP extends ComponentObjectPropsOptions = ComponentObjectPropsOptions
+  PP extends ComponentObjectPropsOptions = ComponentObjectPropsOptions,
 >(props: PP): Prettify<Readonly<ExtractPropTypes<PP>>>
 // overload 3: typed-based declaration
 export function defineProps<TypeProps>(): DefineProps<
@@ -94,7 +93,7 @@ export function defineProps() {
   return null as any
 }
 
-type DefineProps<T, BKeys extends keyof T> = Readonly<T> & {
+export type DefineProps<T, BKeys extends keyof T> = Readonly<T> & {
   readonly [K in BKeys]-?: boolean
 }
 
@@ -116,8 +115,9 @@ type BooleanKey<T, K extends keyof T = keyof T> = K extends any
  * Example type-based declaration:
  * ```ts
  * const emit = defineEmits<{
- *   (event: 'change'): void
- *   (event: 'update', id: number): void
+ *   // <eventName>: <expected arguments>
+ *   change: []
+ *   update: [value: number] // named tuple syntax
  * }>()
  *
  * emit('change')
@@ -131,14 +131,16 @@ type BooleanKey<T, K extends keyof T = keyof T> = K extends any
  */
 // overload 1: runtime emits w/ array
 export function defineEmits<EE extends string = string>(
-  emitOptions: EE[]
+  emitOptions: EE[],
 ): EmitFn<EE[]>
 export function defineEmits<E extends EmitsOptions = EmitsOptions>(
-  emitOptions: E
+  emitOptions: E,
 ): EmitFn<E>
-export function defineEmits<
-  T extends ((...args: any[]) => any) | Record<string, any[]>
->(): T extends (...args: any[]) => any ? T : ShortEmits<T>
+export function defineEmits<T extends ComponentTypeEmits>(): T extends (
+  ...args: any[]
+) => any
+  ? T
+  : ShortEmits<T>
 // implementation
 export function defineEmits() {
   if (__DEV__) {
@@ -147,6 +149,10 @@ export function defineEmits() {
   return null as any
 }
 
+export type ComponentTypeEmits =
+  | ((...args: any[]) => any)
+  | Record<string, any[]>
+
 type RecordToUnion<T extends Record<string, any>> = T[keyof T]
 
 type ShortEmits<T extends Record<string, any>> = UnionToIntersection<
@@ -170,8 +176,8 @@ type ShortEmits<T extends Record<string, any>> = UnionToIntersection<
  * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineexpose}
  */
 export function defineExpose<
-  Exposed extends Record<string, any> = Record<string, any>
->(exposed?: Exposed) {
+  Exposed extends Record<string, any> = Record<string, any>,
+>(exposed?: Exposed): void {
   if (__DEV__) {
     warnRuntimeUsage(`defineExpose`)
   }
@@ -190,17 +196,35 @@ export function defineOptions<
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
   Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
-  Extends extends ComponentOptionsMixin = ComponentOptionsMixin
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
 >(
-  options?: ComponentOptionsWithoutProps<
+  options?: ComponentOptionsBase<
     {},
     RawBindings,
     D,
     C,
     M,
     Mixin,
-    Extends
-  > & { emits?: undefined; expose?: undefined; slots?: undefined }
+    Extends,
+    {}
+  > & {
+    /**
+     * props should be defined via defineProps().
+     */
+    props?: never
+    /**
+     * emits should be defined via defineEmits().
+     */
+    emits?: never
+    /**
+     * expose should be defined via defineExpose().
+     */
+    expose?: never
+    /**
+     * slots should be defined via defineSlots().
+     */
+    slots?: never
+  },
 ): void {
   if (__DEV__) {
     warnRuntimeUsage(`defineOptions`)
@@ -208,7 +232,7 @@ export function defineOptions<
 }
 
 export function defineSlots<
-  S extends Record<string, any> = Record<string, any>
+  S extends Record<string, any> = Record<string, any>,
 >(): StrictUnwrapSlotsType<SlotsType<S>> {
   if (__DEV__) {
     warnRuntimeUsage(`defineSlots`)
@@ -216,8 +240,19 @@ export function defineSlots<
   return null as any
 }
 
+export type ModelRef<T, M extends PropertyKey = string, G = T, S = T> = Ref<
+  G,
+  S
+> &
+  [ModelRef<T, M, G, S>, Record<M, true | undefined>]
+
+export type DefineModelOptions<T = any, G = T, S = T> = {
+  get?: (v: T) => G
+  set?: (v: S) => any
+}
+
 /**
- * (**Experimental**) Vue `<script setup>` compiler macro for declaring a
+ * Vue `<script setup>` compiler macro for declaring a
  * two-way binding prop that can be consumed via `v-model` from the parent
  * component. This will declare a prop with the same name and a corresponding
  * `update:propName` event.
@@ -226,9 +261,11 @@ export function defineSlots<
  * Otherwise the prop name will default to "modelValue". In both cases, you
  * can also pass an additional object which will be used as the prop's options.
  *
- * The options object can also specify an additional option, `local`. When set
- * to `true`, the ref can be locally mutated even if the parent did not pass
- * the matching `v-model`.
+ * The returned ref behaves differently depending on whether the parent
+ * provided the corresponding v-model props or not:
+ * - If yes, the returned ref's value will always be in sync with the parent
+ *   prop.
+ * - If not, the returned ref will behave like a normal local ref.
  *
  * @example
  * ```ts
@@ -245,44 +282,40 @@ export function defineSlots<
  *
  * // with specified name and default value
  * const count = defineModel<number>('count', { default: 0 })
- *
- * // local mutable model, can be mutated locally
- * // even if the parent did not pass the matching `v-model`.
- * const count = defineModel<number>('count', { local: true, default: 0 })
  * ```
  */
-export function defineModel<T>(
-  options: { required: true } & PropOptions<T> & DefineModelOptions
-): Ref<T>
-export function defineModel<T>(
-  options: { default: any } & PropOptions<T> & DefineModelOptions
-): Ref<T>
-export function defineModel<T>(
-  options?: PropOptions<T> & DefineModelOptions
-): Ref<T | undefined>
-export function defineModel<T>(
+export function defineModel<T, M extends PropertyKey = string, G = T, S = T>(
+  options: ({ default: any } | { required: true }) &
+    PropOptions<T> &
+    DefineModelOptions<T, G, S>,
+): ModelRef<T, M, G, S>
+
+export function defineModel<T, M extends PropertyKey = string, G = T, S = T>(
+  options?: PropOptions<T> & DefineModelOptions<T, G, S>,
+): ModelRef<T | undefined, M, G | undefined, S | undefined>
+
+export function defineModel<T, M extends PropertyKey = string, G = T, S = T>(
   name: string,
-  options: { required: true } & PropOptions<T> & DefineModelOptions
-): Ref<T>
-export function defineModel<T>(
+  options: ({ default: any } | { required: true }) &
+    PropOptions<T> &
+    DefineModelOptions<T, G, S>,
+): ModelRef<T, M, G, S>
+
+export function defineModel<T, M extends PropertyKey = string, G = T, S = T>(
   name: string,
-  options: { default: any } & PropOptions<T> & DefineModelOptions
-): Ref<T>
-export function defineModel<T>(
-  name: string,
-  options?: PropOptions<T> & DefineModelOptions
-): Ref<T | undefined>
+  options?: PropOptions<T> & DefineModelOptions<T, G, S>,
+): ModelRef<T | undefined, M, G | undefined, S | undefined>
+
 export function defineModel(): any {
   if (__DEV__) {
     warnRuntimeUsage('defineModel')
   }
 }
 
-interface DefineModelOptions {
-  local?: boolean
-}
-
 type NotUndefined<T> = T extends undefined ? never : T
+type MappedOmit<T, K extends keyof any> = {
+  [P in keyof T as P extends K ? never : P]: T[P]
+}
 
 type InferDefaults<T> = {
   [K in keyof T]?: InferDefault<T, T[K]>
@@ -297,11 +330,13 @@ type InferDefault<P, T> =
 type PropsWithDefaults<
   T,
   Defaults extends InferDefaults<T>,
-  BKeys extends keyof T
-> = Readonly<Omit<T, keyof Defaults>> & {
-  readonly [K in keyof Defaults]-?: K extends keyof T
+  BKeys extends keyof T,
+> = Readonly<MappedOmit<T, keyof Defaults>> & {
+  readonly [K in keyof Defaults as K extends keyof T
+    ? K
+    : never]-?: K extends keyof T
     ? Defaults[K] extends undefined
-      ? T[K]
+      ? IfAny<Defaults[K], NotUndefined<T[K]>, T[K]>
       : NotUndefined<T[K]>
     : never
 } & {
@@ -335,10 +370,10 @@ type PropsWithDefaults<
 export function withDefaults<
   T,
   BKeys extends keyof T,
-  Defaults extends InferDefaults<T>
+  Defaults extends InferDefaults<T>,
 >(
   props: DefineProps<T, BKeys>,
-  defaults: Defaults
+  defaults: Defaults,
 ): PropsWithDefaults<T, Defaults, BKeys> {
   if (__DEV__) {
     warnRuntimeUsage(`withDefaults`)
@@ -354,55 +389,6 @@ export function useAttrs(): SetupContext['attrs'] {
   return getContext().attrs
 }
 
-export function useModel<T extends Record<string, any>, K extends keyof T>(
-  props: T,
-  name: K,
-  options?: { local?: boolean }
-): Ref<T[K]>
-export function useModel(
-  props: Record<string, any>,
-  name: string,
-  options?: { local?: boolean }
-): Ref {
-  const i = getCurrentInstance()!
-  if (__DEV__ && !i) {
-    warn(`useModel() called without active instance.`)
-    return ref() as any
-  }
-
-  if (__DEV__ && !(i.propsOptions[0] as NormalizedProps)[name]) {
-    warn(`useModel() called with prop "${name}" which is not declared.`)
-    return ref() as any
-  }
-
-  if (options && options.local) {
-    const proxy = ref<any>(props[name])
-
-    watch(
-      () => props[name],
-      v => (proxy.value = v)
-    )
-
-    watch(proxy, value => {
-      if (value !== props[name]) {
-        i.emit(`update:${name}`, value)
-      }
-    })
-
-    return proxy
-  } else {
-    return {
-      __v_isRef: true,
-      get value() {
-        return props[name]
-      },
-      set value(value) {
-        i.emit(`update:${name}`, value)
-      }
-    } as any
-  }
-}
-
 function getContext(): SetupContext {
   const i = getCurrentInstance()!
   if (__DEV__ && !i) {
@@ -415,12 +401,12 @@ function getContext(): SetupContext {
  * @internal
  */
 export function normalizePropsOrEmits(
-  props: ComponentPropsOptions | EmitsOptions
-) {
+  props: ComponentPropsOptions | EmitsOptions,
+): ComponentObjectPropsOptions | ObjectEmitsOptions {
   return isArray(props)
     ? props.reduce(
         (normalized, p) => ((normalized[p] = null), normalized),
-        {} as ComponentObjectPropsOptions | ObjectEmitsOptions
+        {} as ComponentObjectPropsOptions | ObjectEmitsOptions,
       )
     : props
 }
@@ -432,7 +418,7 @@ export function normalizePropsOrEmits(
  */
 export function mergeDefaults(
   raw: ComponentPropsOptions,
-  defaults: Record<string, any>
+  defaults: Record<string, any>,
 ): ComponentObjectPropsOptions {
   const props = normalizePropsOrEmits(raw)
   for (const key in defaults) {
@@ -463,8 +449,8 @@ export function mergeDefaults(
  */
 export function mergeModels(
   a: ComponentPropsOptions | EmitsOptions,
-  b: ComponentPropsOptions | EmitsOptions
-) {
+  b: ComponentPropsOptions | EmitsOptions,
+): ComponentPropsOptions | EmitsOptions {
   if (!a || !b) return a || b
   if (isArray(a) && isArray(b)) return a.concat(b)
   return extend({}, normalizePropsOrEmits(a), normalizePropsOrEmits(b))
@@ -477,14 +463,14 @@ export function mergeModels(
  */
 export function createPropsRestProxy(
   props: any,
-  excludedKeys: string[]
+  excludedKeys: string[],
 ): Record<string, any> {
   const ret: Record<string, any> = {}
   for (const key in props) {
     if (!excludedKeys.includes(key)) {
       Object.defineProperty(ret, key, {
         enumerable: true,
-        get: () => props[key]
+        get: () => props[key],
       })
     }
   }
@@ -509,12 +495,12 @@ export function createPropsRestProxy(
  * ```
  * @internal
  */
-export function withAsyncContext(getAwaitable: () => any) {
+export function withAsyncContext(getAwaitable: () => any): [any, () => void] {
   const ctx = getCurrentInstance()!
   if (__DEV__ && !ctx) {
     warn(
       `withAsyncContext called without active current instance. ` +
-        `This is likely a bug.`
+        `This is likely a bug.`,
     )
   }
   let awaitable = getAwaitable()
diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts
index 6d9927d5c..8f6168cdf 100644
--- a/packages/runtime-core/src/apiWatch.ts
+++ b/packages/runtime-core/src/apiWatch.ts
@@ -1,169 +1,138 @@
 import {
-  isRef,
-  isShallow,
-  Ref,
-  ComputedRef,
-  ReactiveEffect,
-  isReactive,
-  ReactiveFlags,
-  EffectScheduler,
-  DebuggerOptions,
-  getCurrentScope
+  type WatchOptions as BaseWatchOptions,
+  type DebuggerOptions,
+  type ReactiveMarker,
+  type WatchCallback,
+  type WatchEffect,
+  type WatchHandle,
+  type WatchSource,
+  watch as baseWatch,
 } from '@vue/reactivity'
-import { SchedulerJob, queueJob } from './scheduler'
-import {
-  EMPTY_OBJ,
-  isObject,
-  isArray,
-  isFunction,
-  isString,
-  hasChanged,
-  NOOP,
-  remove,
-  isMap,
-  isSet,
-  isPlainObject,
-  extend
-} from '@vue/shared'
+import { type SchedulerJob, SchedulerJobFlags, queueJob } from './scheduler'
+import { EMPTY_OBJ, NOOP, extend, isFunction, isString } from '@vue/shared'
 import {
+  type ComponentInternalInstance,
   currentInstance,
-  ComponentInternalInstance,
   isInSSRComponentSetup,
   setCurrentInstance,
-  unsetCurrentInstance
 } from './component'
-import {
-  ErrorCodes,
-  callWithErrorHandling,
-  callWithAsyncErrorHandling
-} from './errorHandling'
+import { callWithAsyncErrorHandling } from './errorHandling'
 import { queuePostRenderEffect } from './renderer'
 import { warn } from './warning'
-import { DeprecationTypes } from './compat/compatConfig'
-import { checkCompatEnabled, isCompatEnabled } from './compat/compatConfig'
-import { ObjectWatchOptionItem } from './componentOptions'
-import { useSSRContext } from '@vue/runtime-core'
+import type { ObjectWatchOptionItem } from './componentOptions'
+import { useSSRContext } from './helpers/useSsrContext'
 
-export type WatchEffect = (onCleanup: OnCleanup) => void
+export type {
+  WatchHandle,
+  WatchStopHandle,
+  WatchEffect,
+  WatchSource,
+  WatchCallback,
+  OnCleanup,
+} from '@vue/reactivity'
 
-export type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T)
-
-export type WatchCallback<V = any, OV = any> = (
-  value: V,
-  oldValue: OV,
-  onCleanup: OnCleanup
-) => any
+type MaybeUndefined<T, I> = I extends true ? T | undefined : T
 
 type MapSources<T, Immediate> = {
   [K in keyof T]: T[K] extends WatchSource<infer V>
-    ? Immediate extends true
-      ? V | undefined
-      : V
+    ? MaybeUndefined<V, Immediate>
     : T[K] extends object
-      ? Immediate extends true
-        ? T[K] | undefined
-        : T[K]
+      ? MaybeUndefined<T[K], Immediate>
       : never
 }
 
-type OnCleanup = (cleanupFn: () => void) => void
-
-export interface WatchOptionsBase extends DebuggerOptions {
+export interface WatchEffectOptions extends DebuggerOptions {
   flush?: 'pre' | 'post' | 'sync'
 }
 
-export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
+export interface WatchOptions<Immediate = boolean> extends WatchEffectOptions {
   immediate?: Immediate
-  deep?: boolean
+  deep?: boolean | number
+  once?: boolean
 }
 
-export type WatchStopHandle = () => void
-
 // Simple effect.
 export function watchEffect(
   effect: WatchEffect,
-  options?: WatchOptionsBase
-): WatchStopHandle {
+  options?: WatchEffectOptions,
+): WatchHandle {
   return doWatch(effect, null, options)
 }
 
 export function watchPostEffect(
   effect: WatchEffect,
-  options?: DebuggerOptions
-) {
+  options?: DebuggerOptions,
+): WatchHandle {
   return doWatch(
     effect,
     null,
-    __DEV__ ? extend({}, options as any, { flush: 'post' }) : { flush: 'post' }
+    __DEV__ ? extend({}, options as any, { flush: 'post' }) : { flush: 'post' },
   )
 }
 
 export function watchSyncEffect(
   effect: WatchEffect,
-  options?: DebuggerOptions
-) {
+  options?: DebuggerOptions,
+): WatchHandle {
   return doWatch(
     effect,
     null,
-    __DEV__ ? extend({}, options as any, { flush: 'sync' }) : { flush: 'sync' }
+    __DEV__ ? extend({}, options as any, { flush: 'sync' }) : { flush: 'sync' },
   )
 }
 
-// initial value for watchers to trigger on undefined initial values
-const INITIAL_WATCHER_VALUE = {}
-
-type MultiWatchSources = (WatchSource<unknown> | object)[]
-
-// overload: array of multiple sources + cb
-export function watch<
-  T extends MultiWatchSources,
-  Immediate extends Readonly<boolean> = false
->(
-  sources: [...T],
-  cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
-  options?: WatchOptions<Immediate>
-): WatchStopHandle
-
-// overload: multiple sources w/ `as const`
-// watch([foo, bar] as const, () => {})
-// somehow [...T] breaks when the type is readonly
-export function watch<
-  T extends Readonly<MultiWatchSources>,
-  Immediate extends Readonly<boolean> = false
->(
-  source: T,
-  cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
-  options?: WatchOptions<Immediate>
-): WatchStopHandle
+export type MultiWatchSources = (WatchSource<unknown> | object)[]
 
 // overload: single source + cb
 export function watch<T, Immediate extends Readonly<boolean> = false>(
   source: WatchSource<T>,
-  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
-  options?: WatchOptions<Immediate>
-): WatchStopHandle
+  cb: WatchCallback<T, MaybeUndefined<T, Immediate>>,
+  options?: WatchOptions<Immediate>,
+): WatchHandle
+
+// overload: reactive array or tuple of multiple sources + cb
+export function watch<
+  T extends Readonly<MultiWatchSources>,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: readonly [...T] | T,
+  cb: [T] extends [ReactiveMarker]
+    ? WatchCallback<T, MaybeUndefined<T, Immediate>>
+    : WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
+  options?: WatchOptions<Immediate>,
+): WatchHandle
+
+// overload: array of multiple sources + cb
+export function watch<
+  T extends MultiWatchSources,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
+  options?: WatchOptions<Immediate>,
+): WatchHandle
 
 // overload: watching reactive object w/ cb
 export function watch<
   T extends object,
-  Immediate extends Readonly<boolean> = false
+  Immediate extends Readonly<boolean> = false,
 >(
   source: T,
-  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
-  options?: WatchOptions<Immediate>
-): WatchStopHandle
+  cb: WatchCallback<T, MaybeUndefined<T, Immediate>>,
+  options?: WatchOptions<Immediate>,
+): WatchHandle
 
 // implementation
 export function watch<T = any, Immediate extends Readonly<boolean> = false>(
   source: T | WatchSource<T>,
   cb: any,
-  options?: WatchOptions<Immediate>
-): WatchStopHandle {
+  options?: WatchOptions<Immediate>,
+): WatchHandle {
   if (__DEV__ && !isFunction(cb)) {
     warn(
       `\`watch(fn, options?)\` signature has been moved to a separate API. ` +
         `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +
-        `supports \`watch(source, cb, options?) signature.`
+        `supports \`watch(source, cb, options?) signature.`,
     )
   }
   return doWatch(source as any, cb, options)
@@ -172,228 +141,99 @@ export function watch<T = any, Immediate extends Readonly<boolean> = false>(
 function doWatch(
   source: WatchSource | WatchSource[] | WatchEffect | object,
   cb: WatchCallback | null,
-  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
-): WatchStopHandle {
+  options: WatchOptions = EMPTY_OBJ,
+): WatchHandle {
+  const { immediate, deep, flush, once } = options
+
   if (__DEV__ && !cb) {
     if (immediate !== undefined) {
       warn(
         `watch() "immediate" option is only respected when using the ` +
-          `watch(source, callback, options?) signature.`
+          `watch(source, callback, options?) signature.`,
       )
     }
     if (deep !== undefined) {
       warn(
         `watch() "deep" option is only respected when using the ` +
-          `watch(source, callback, options?) signature.`
+          `watch(source, callback, options?) signature.`,
+      )
+    }
+    if (once !== undefined) {
+      warn(
+        `watch() "once" option is only respected when using the ` +
+          `watch(source, callback, options?) signature.`,
       )
     }
   }
 
-  const warnInvalidSource = (s: unknown) => {
-    warn(
-      `Invalid watch source: `,
-      s,
-      `A watch source can only be a getter/effect function, a ref, ` +
-        `a reactive object, or an array of these types.`
-    )
-  }
+  const baseWatchOptions: BaseWatchOptions = extend({}, options)
 
-  const instance =
-    getCurrentScope() === currentInstance?.scope ? currentInstance : null
-  // const instance = currentInstance
-  let getter: () => any
-  let forceTrigger = false
-  let isMultiSource = false
+  if (__DEV__) baseWatchOptions.onWarn = warn
 
-  if (isRef(source)) {
-    getter = () => source.value
-    forceTrigger = isShallow(source)
-  } else if (isReactive(source)) {
-    getter = () => source
-    deep = true
-  } else if (isArray(source)) {
-    isMultiSource = true
-    forceTrigger = source.some(s => isReactive(s) || isShallow(s))
-    getter = () =>
-      source.map(s => {
-        if (isRef(s)) {
-          return s.value
-        } else if (isReactive(s)) {
-          return traverse(s)
-        } else if (isFunction(s)) {
-          return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
-        } else {
-          __DEV__ && warnInvalidSource(s)
-        }
-      })
-  } else if (isFunction(source)) {
-    if (cb) {
-      // getter with cb
-      getter = () =>
-        callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
-    } else {
-      // no cb -> simple effect
-      getter = () => {
-        if (instance && instance.isUnmounted) {
-          return
-        }
-        if (cleanup) {
-          cleanup()
-        }
-        return callWithAsyncErrorHandling(
-          source,
-          instance,
-          ErrorCodes.WATCH_CALLBACK,
-          [onCleanup]
-        )
-      }
-    }
-  } else {
-    getter = NOOP
-    __DEV__ && warnInvalidSource(source)
-  }
-
-  // 2.x array mutation watch compat
-  if (__COMPAT__ && cb && !deep) {
-    const baseGetter = getter
-    getter = () => {
-      const val = baseGetter()
-      if (
-        isArray(val) &&
-        checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
-      ) {
-        traverse(val)
-      }
-      return val
-    }
-  }
-
-  if (cb && deep) {
-    const baseGetter = getter
-    getter = () => traverse(baseGetter())
-  }
-
-  let cleanup: (() => void) | undefined
-  let onCleanup: OnCleanup = (fn: () => void) => {
-    cleanup = effect.onStop = () => {
-      callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)
-      cleanup = effect.onStop = undefined
-    }
-  }
-
-  // in SSR there is no need to setup an actual effect, and it should be noop
-  // unless it's eager or sync flush
+  // immediate watcher or watchEffect
+  const runsImmediately = (cb && immediate) || (!cb && flush !== 'post')
   let ssrCleanup: (() => void)[] | undefined
   if (__SSR__ && isInSSRComponentSetup) {
-    // we will also not call the invalidate callback (+ runner is not set up)
-    onCleanup = NOOP
-    if (!cb) {
-      getter()
-    } else if (immediate) {
-      callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
-        getter(),
-        isMultiSource ? [] : undefined,
-        onCleanup
-      ])
-    }
     if (flush === 'sync') {
       const ctx = useSSRContext()!
       ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = [])
-    } else {
-      return NOOP
+    } else if (!runsImmediately) {
+      const watchStopHandle = () => {}
+      watchStopHandle.stop = NOOP
+      watchStopHandle.resume = NOOP
+      watchStopHandle.pause = NOOP
+      return watchStopHandle
     }
   }
 
-  let oldValue: any = isMultiSource
-    ? new Array((source as []).length).fill(INITIAL_WATCHER_VALUE)
-    : INITIAL_WATCHER_VALUE
-  const job: SchedulerJob = () => {
-    if (!effect.active) {
-      return
-    }
-    if (cb) {
-      // watch(source, cb)
-      const newValue = effect.run()
-      if (
-        deep ||
-        forceTrigger ||
-        (isMultiSource
-          ? (newValue as any[]).some((v, i) => hasChanged(v, oldValue[i]))
-          : hasChanged(newValue, oldValue)) ||
-        (__COMPAT__ &&
-          isArray(newValue) &&
-          isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance))
-      ) {
-        // cleanup before running cb again
-        if (cleanup) {
-          cleanup()
-        }
-        callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
-          newValue,
-          // pass undefined as the old value when it's changed for the first time
-          oldValue === INITIAL_WATCHER_VALUE
-            ? undefined
-            : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE
-              ? []
-              : oldValue,
-          onCleanup
-        ])
-        oldValue = newValue
-      }
-    } else {
-      // watchEffect
-      effect.run()
-    }
-  }
+  const instance = currentInstance
+  baseWatchOptions.call = (fn, type, args) =>
+    callWithAsyncErrorHandling(fn, instance, type, args)
 
-  // important: mark the job as a watcher callback so that scheduler knows
-  // it is allowed to self-trigger (#1727)
-  job.allowRecurse = !!cb
-
-  let scheduler: EffectScheduler
-  if (flush === 'sync') {
-    scheduler = job as any // the scheduler function gets called directly
-  } else if (flush === 'post') {
-    scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)
-  } else {
+  // scheduler
+  let isPre = false
+  if (flush === 'post') {
+    baseWatchOptions.scheduler = job => {
+      queuePostRenderEffect(job, instance && instance.suspense)
+    }
+  } else if (flush !== 'sync') {
     // default: 'pre'
-    job.pre = true
-    if (instance) job.id = instance.uid
-    scheduler = () => queueJob(job)
-  }
-
-  const effect = new ReactiveEffect(getter, scheduler)
-
-  if (__DEV__) {
-    effect.onTrack = onTrack
-    effect.onTrigger = onTrigger
-  }
-
-  // initial run
-  if (cb) {
-    if (immediate) {
-      job()
-    } else {
-      oldValue = effect.run()
-    }
-  } else if (flush === 'post') {
-    queuePostRenderEffect(
-      effect.run.bind(effect),
-      instance && instance.suspense
-    )
-  } else {
-    effect.run()
-  }
-
-  const unwatch = () => {
-    effect.stop()
-    if (instance && instance.scope) {
-      remove(instance.scope.effects!, effect)
+    isPre = true
+    baseWatchOptions.scheduler = (job, isFirstRun) => {
+      if (isFirstRun) {
+        job()
+      } else {
+        queueJob(job)
+      }
     }
   }
 
-  if (__SSR__ && ssrCleanup) ssrCleanup.push(unwatch)
-  return unwatch
+  baseWatchOptions.augmentJob = (job: SchedulerJob) => {
+    // important: mark the job as a watcher callback so that scheduler knows
+    // it is allowed to self-trigger (#1727)
+    if (cb) {
+      job.flags! |= SchedulerJobFlags.ALLOW_RECURSE
+    }
+    if (isPre) {
+      job.flags! |= SchedulerJobFlags.PRE
+      if (instance) {
+        job.id = instance.uid
+        ;(job as SchedulerJob).i = instance
+      }
+    }
+  }
+
+  const watchHandle = baseWatch(source, cb, baseWatchOptions)
+
+  if (__SSR__ && isInSSRComponentSetup) {
+    if (ssrCleanup) {
+      ssrCleanup.push(watchHandle)
+    } else if (runsImmediately) {
+      watchHandle()
+    }
+  }
+
+  return watchHandle
 }
 
 // this.$watch
@@ -401,8 +241,8 @@ export function instanceWatch(
   this: ComponentInternalInstance,
   source: string | Function,
   value: WatchCallback | ObjectWatchOptionItem,
-  options?: WatchOptions
-): WatchStopHandle {
+  options?: WatchOptions,
+): WatchHandle {
   const publicThis = this.proxy as any
   const getter = isString(source)
     ? source.includes('.')
@@ -416,20 +256,15 @@ export function instanceWatch(
     cb = value.handler as Function
     options = value
   }
-  const cur = currentInstance
-  setCurrentInstance(this)
+  const reset = setCurrentInstance(this)
   const res = doWatch(getter, cb.bind(publicThis), options)
-  if (cur) {
-    setCurrentInstance(cur)
-  } else {
-    unsetCurrentInstance()
-  }
+  reset()
   return res
 }
 
 export function createPathGetter(ctx: any, path: string) {
   const segments = path.split('.')
-  return () => {
+  return (): any => {
     let cur = ctx
     for (let i = 0; i < segments.length && cur; i++) {
       cur = cur[segments[i]]
@@ -437,30 +272,3 @@ export function createPathGetter(ctx: any, path: string) {
     return cur
   }
 }
-
-export function traverse(value: unknown, seen?: Set<unknown>) {
-  if (!isObject(value) || (value as any)[ReactiveFlags.SKIP]) {
-    return value
-  }
-  seen = seen || new Set()
-  if (seen.has(value)) {
-    return value
-  }
-  seen.add(value)
-  if (isRef(value)) {
-    traverse(value.value, seen)
-  } else if (isArray(value)) {
-    for (let i = 0; i < value.length; i++) {
-      traverse(value[i], seen)
-    }
-  } else if (isSet(value) || isMap(value)) {
-    value.forEach((v: any) => {
-      traverse(v, seen)
-    })
-  } else if (isPlainObject(value)) {
-    for (const key in value) {
-      traverse(value[key], seen)
-    }
-  }
-  return value
-}
diff --git a/packages/runtime-core/src/compat/attrsFallthrough.ts b/packages/runtime-core/src/compat/attrsFallthrough.ts
index e2fc730e8..6c374dc3c 100644
--- a/packages/runtime-core/src/compat/attrsFallthrough.ts
+++ b/packages/runtime-core/src/compat/attrsFallthrough.ts
@@ -1,10 +1,10 @@
 import { isOn } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
+import type { ComponentInternalInstance } from '../component'
 import { DeprecationTypes, isCompatEnabled } from './compatConfig'
 
 export function shouldSkipAttr(
   key: string,
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): boolean {
   if (key === 'is') {
     return true
diff --git a/packages/runtime-core/src/compat/compatConfig.ts b/packages/runtime-core/src/compat/compatConfig.ts
index 88b58fdfa..de62873ff 100644
--- a/packages/runtime-core/src/compat/compatConfig.ts
+++ b/packages/runtime-core/src/compat/compatConfig.ts
@@ -1,16 +1,16 @@
 import { extend, hasOwn, isArray, isFunction } from '@vue/shared'
 import {
-  Component,
-  ComponentInternalInstance,
-  ComponentOptions,
+  type Component,
+  type ComponentInternalInstance,
+  type ComponentOptions,
   formatComponentName,
   getComponentName,
   getCurrentInstance,
-  isRuntimeOnly
+  isRuntimeOnly,
 } from '../component'
 import { warn } from '../warning'
 
-export const enum DeprecationTypes {
+export enum DeprecationTypes {
   GLOBAL_MOUNT = 'GLOBAL_MOUNT',
   GLOBAL_MOUNT_CONTAINER = 'GLOBAL_MOUNT_CONTAINER',
   GLOBAL_EXTEND = 'GLOBAL_EXTEND',
@@ -63,7 +63,7 @@ export const enum DeprecationTypes {
 
   FILTERS = 'FILTERS',
 
-  PRIVATE_APIS = 'PRIVATE_APIS'
+  PRIVATE_APIS = 'PRIVATE_APIS',
 }
 
 type DeprecationData = {
@@ -76,7 +76,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
     message:
       `The global app bootstrapping API has changed: vm.$mount() and the "el" ` +
       `option have been removed. Use createApp(RootComponent).mount() instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#mounting-app-instance`
+    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#mounting-app-instance`,
   },
 
   [DeprecationTypes.GLOBAL_MOUNT_CONTAINER]: {
@@ -84,72 +84,72 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `Vue detected directives on the mount container. ` +
       `In Vue 3, the container is no longer considered part of the template ` +
       `and will not be processed/replaced.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/mount-changes.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/mount-changes.html`,
   },
 
   [DeprecationTypes.GLOBAL_EXTEND]: {
     message:
       `Vue.extend() has been removed in Vue 3. ` +
       `Use defineComponent() instead.`,
-    link: `https://vuejs.org/api/general.html#definecomponent`
+    link: `https://vuejs.org/api/general.html#definecomponent`,
   },
 
   [DeprecationTypes.GLOBAL_PROTOTYPE]: {
     message:
       `Vue.prototype is no longer available in Vue 3. ` +
       `Use app.config.globalProperties instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#vue-prototype-replaced-by-config-globalproperties`
+    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#vue-prototype-replaced-by-config-globalproperties`,
   },
 
   [DeprecationTypes.GLOBAL_SET]: {
     message:
       `Vue.set() has been removed as it is no longer needed in Vue 3. ` +
-      `Simply use native JavaScript mutations.`
+      `Simply use native JavaScript mutations.`,
   },
 
   [DeprecationTypes.GLOBAL_DELETE]: {
     message:
       `Vue.delete() has been removed as it is no longer needed in Vue 3. ` +
-      `Simply use native JavaScript mutations.`
+      `Simply use native JavaScript mutations.`,
   },
 
   [DeprecationTypes.GLOBAL_OBSERVABLE]: {
     message:
       `Vue.observable() has been removed. ` +
       `Use \`import { reactive } from "vue"\` from Composition API instead.`,
-    link: `https://vuejs.org/api/reactivity-core.html#reactive`
+    link: `https://vuejs.org/api/reactivity-core.html#reactive`,
   },
 
   [DeprecationTypes.GLOBAL_PRIVATE_UTIL]: {
     message:
       `Vue.util has been removed. Please refactor to avoid its usage ` +
-      `since it was an internal API even in Vue 2.`
+      `since it was an internal API even in Vue 2.`,
   },
 
   [DeprecationTypes.CONFIG_SILENT]: {
     message:
       `config.silent has been removed because it is not good practice to ` +
       `intentionally suppress warnings. You can use your browser console's ` +
-      `filter features to focus on relevant messages.`
+      `filter features to focus on relevant messages.`,
   },
 
   [DeprecationTypes.CONFIG_DEVTOOLS]: {
     message:
       `config.devtools has been removed. To enable devtools for ` +
       `production, configure the __VUE_PROD_DEVTOOLS__ compile-time flag.`,
-    link: `https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags`
+    link: `https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags`,
   },
 
   [DeprecationTypes.CONFIG_KEY_CODES]: {
     message:
       `config.keyCodes has been removed. ` +
       `In Vue 3, you can directly use the kebab-case key names as v-on modifiers.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html`,
   },
 
   [DeprecationTypes.CONFIG_PRODUCTION_TIP]: {
     message: `config.productionTip has been removed.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#config-productiontip-removed`
+    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#config-productiontip-removed`,
   },
 
   [DeprecationTypes.CONFIG_IGNORED_ELEMENTS]: {
@@ -162,7 +162,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       }
       return msg
     },
-    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#config-ignoredelements-is-now-config-iscustomelement`
+    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#config-ignoredelements-is-now-config-iscustomelement`,
   },
 
   [DeprecationTypes.CONFIG_WHITESPACE]: {
@@ -171,37 +171,37 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
     message:
       `Vue 3 compiler's whitespace option will default to "condense" instead of ` +
       `"preserve". To suppress this warning, provide an explicit value for ` +
-      `\`config.compilerOptions.whitespace\`.`
+      `\`config.compilerOptions.whitespace\`.`,
   },
 
   [DeprecationTypes.CONFIG_OPTION_MERGE_STRATS]: {
     message:
       `config.optionMergeStrategies no longer exposes internal strategies. ` +
-      `Use custom merge functions instead.`
+      `Use custom merge functions instead.`,
   },
 
   [DeprecationTypes.INSTANCE_SET]: {
     message:
       `vm.$set() has been removed as it is no longer needed in Vue 3. ` +
-      `Simply use native JavaScript mutations.`
+      `Simply use native JavaScript mutations.`,
   },
 
   [DeprecationTypes.INSTANCE_DELETE]: {
     message:
       `vm.$delete() has been removed as it is no longer needed in Vue 3. ` +
-      `Simply use native JavaScript mutations.`
+      `Simply use native JavaScript mutations.`,
   },
 
   [DeprecationTypes.INSTANCE_DESTROY]: {
     message: `vm.$destroy() has been removed. Use app.unmount() instead.`,
-    link: `https://vuejs.org/api/application.html#app-unmount`
+    link: `https://vuejs.org/api/application.html#app-unmount`,
   },
 
   [DeprecationTypes.INSTANCE_EVENT_EMITTER]: {
     message:
       `vm.$on/$once/$off() have been removed. ` +
       `Use an external event emitter library instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/events-api.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/events-api.html`,
   },
 
   [DeprecationTypes.INSTANCE_EVENT_HOOKS]: {
@@ -211,14 +211,14 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `should be changed to @vue:${event.slice(5)}. ` +
       `From JavaScript, use Composition API to dynamically register lifecycle ` +
       `hooks.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html`,
   },
 
   [DeprecationTypes.INSTANCE_CHILDREN]: {
     message:
       `vm.$children has been removed. Consider refactoring your logic ` +
       `to avoid relying on direct access to child components.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/children.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/children.html`,
   },
 
   [DeprecationTypes.INSTANCE_LISTENERS]: {
@@ -227,12 +227,12 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `included in vm.$attrs and it is no longer necessary to separately use ` +
       `v-on="$listeners" if you are already using v-bind="$attrs". ` +
       `(Note: the Vue 3 behavior only applies if this compat config is disabled)`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html`,
   },
 
   [DeprecationTypes.INSTANCE_SCOPED_SLOTS]: {
     message: `vm.$scopedSlots has been removed. Use vm.$slots instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/slots-unification.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/slots-unification.html`,
   },
 
   [DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE]: {
@@ -247,29 +247,29 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `If you are binding $attrs to a non-root element and expecting ` +
       `class/style to fallthrough on root, you will need to now manually bind ` +
       `them on root via :class="$attrs.class".`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style.html`,
   },
 
   [DeprecationTypes.OPTIONS_DATA_FN]: {
     message:
       `The "data" option can no longer be a plain object. ` +
       `Always use a function.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/data-option.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/data-option.html`,
   },
 
   [DeprecationTypes.OPTIONS_DATA_MERGE]: {
     message: (key: string) =>
       `Detected conflicting key "${key}" when merging data option values. ` +
       `In Vue 3, data keys are merged shallowly and will override one another.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/data-option.html#mixin-merge-behavior-change`
+    link: `https://v3-migration.vuejs.org/breaking-changes/data-option.html#mixin-merge-behavior-change`,
   },
 
   [DeprecationTypes.OPTIONS_BEFORE_DESTROY]: {
-    message: `\`beforeDestroy\` has been renamed to \`beforeUnmount\`.`
+    message: `\`beforeDestroy\` has been renamed to \`beforeUnmount\`.`,
   },
 
   [DeprecationTypes.OPTIONS_DESTROYED]: {
-    message: `\`destroyed\` has been renamed to \`unmounted\`.`
+    message: `\`destroyed\` has been renamed to \`unmounted\`.`,
   },
 
   [DeprecationTypes.WATCH_ARRAY]: {
@@ -279,7 +279,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `If current usage is intended, you can disable the compat behavior and ` +
       `suppress this warning with:` +
       `\n\n  configureCompat({ ${DeprecationTypes.WATCH_ARRAY}: false })\n`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/watch.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/watch.html`,
   },
 
   [DeprecationTypes.PROPS_DEFAULT_THIS]: {
@@ -287,21 +287,21 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `props default value function no longer has access to "this". The compat ` +
       `build only offers access to this.$options.` +
       `(found in prop "${key}")`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/props-default-this.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/props-default-this.html`,
   },
 
   [DeprecationTypes.CUSTOM_DIR]: {
     message: (legacyHook: string, newHook: string) =>
       `Custom directive hook "${legacyHook}" has been removed. ` +
       `Use "${newHook}" instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/custom-directives.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/custom-directives.html`,
   },
 
   [DeprecationTypes.V_ON_KEYCODE_MODIFIER]: {
     message:
       `Using keyCode as v-on modifier is no longer supported. ` +
       `Use kebab-case key name modifiers instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html`,
   },
 
   [DeprecationTypes.ATTR_FALSE_VALUE]: {
@@ -311,7 +311,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `use \`null\` or \`undefined\` instead. If the usage is intended, ` +
       `you can disable the compat behavior and suppress this warning with:` +
       `\n\n  configureCompat({ ${DeprecationTypes.ATTR_FALSE_VALUE}: false })\n`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html`,
   },
 
   [DeprecationTypes.ATTR_ENUMERATED_COERCION]: {
@@ -324,11 +324,11 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `If the usage is intended, ` +
       `you can disable the compat behavior and suppress this warning with:` +
       `\n\n  configureCompat({ ${DeprecationTypes.ATTR_ENUMERATED_COERCION}: false })\n`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html`,
   },
 
   [DeprecationTypes.TRANSITION_CLASSES]: {
-    message: `` // this feature cannot be runtime-detected
+    message: ``, // this feature cannot be runtime-detected
   },
 
   [DeprecationTypes.TRANSITION_GROUP_ROOT]: {
@@ -338,7 +338,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `for styling, you can disable the compat behavior and suppress this ` +
       `warning with:` +
       `\n\n  configureCompat({ ${DeprecationTypes.TRANSITION_GROUP_ROOT}: false })\n`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/transition-group.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/transition-group.html`,
   },
 
   [DeprecationTypes.COMPONENT_ASYNC]: {
@@ -356,7 +356,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
         `\n\n  configureCompat({ ${DeprecationTypes.COMPONENT_ASYNC}: false })\n`
       )
     },
-    link: `https://v3-migration.vuejs.org/breaking-changes/async-components.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/async-components.html`,
   },
 
   [DeprecationTypes.COMPONENT_FUNCTIONAL]: {
@@ -372,7 +372,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
         `been disabled.`
       )
     },
-    link: `https://v3-migration.vuejs.org/breaking-changes/functional-components.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/functional-components.html`,
   },
 
   [DeprecationTypes.COMPONENT_V_MODEL]: {
@@ -397,7 +397,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
         `"update:modelValue" event. You can update the usage and then ${configMsg}`
       )
     },
-    link: `https://v3-migration.vuejs.org/breaking-changes/v-model.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-model.html`,
   },
 
   [DeprecationTypes.RENDER_FUNCTION]: {
@@ -406,7 +406,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `You can opt-in to the new API with:` +
       `\n\n  configureCompat({ ${DeprecationTypes.RENDER_FUNCTION}: false })\n` +
       `\n  (This can also be done per-component via the "compatConfig" option.)`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/render-function-api.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/render-function-api.html`,
   },
 
   [DeprecationTypes.FILTERS]: {
@@ -414,15 +414,15 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `filters have been removed in Vue 3. ` +
       `The "|" symbol will be treated as native JavaScript bitwise OR operator. ` +
       `Use method calls or computed properties instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/filters.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/filters.html`,
   },
 
   [DeprecationTypes.PRIVATE_APIS]: {
     message: name =>
       `"${name}" is a Vue 2 private API that no longer exists in Vue 3. ` +
       `If you are seeing this warning only due to a dependency, you can ` +
-      `suppress this warning via { PRIVATE_APIS: 'suppress-warning' }.`
-  }
+      `suppress this warning via { PRIVATE_APIS: 'suppress-warning' }.`,
+  },
 }
 
 const instanceWarned: Record<string, true> = Object.create(null)
@@ -431,7 +431,7 @@ const warnCount: Record<string, number> = Object.create(null)
 // test only
 let warningEnabled = true
 
-export function toggleDeprecationWarning(flag: boolean) {
+export function toggleDeprecationWarning(flag: boolean): void {
   warningEnabled = flag
 }
 
@@ -439,7 +439,7 @@ export function warnDeprecation(
   key: DeprecationTypes,
   instance: ComponentInternalInstance | null,
   ...args: any[]
-) {
+): void {
   if (!__DEV__) {
     return
   }
@@ -482,12 +482,12 @@ export function warnDeprecation(
   warn(
     `(deprecation ${key}) ${
       typeof message === 'function' ? message(...args) : message
-    }${link ? `\n  Details: ${link}` : ``}`
+    }${link ? `\n  Details: ${link}` : ``}`,
   )
   if (!isCompatEnabled(key, instance, true)) {
     console.error(
       `^ The above deprecation's compat behavior is disabled and will likely ` +
-        `lead to runtime errors.`
+        `lead to runtime errors.`,
     )
   }
 }
@@ -499,24 +499,24 @@ export type CompatConfig = Partial<
 }
 
 export const globalCompatConfig: CompatConfig = {
-  MODE: 2
+  MODE: 2,
 }
 
-export function configureCompat(config: CompatConfig) {
+export function configureCompat(config: CompatConfig): void {
   if (__DEV__) {
     validateCompatConfig(config)
   }
   extend(globalCompatConfig, config)
 }
 
-const seenConfigObjects = /*#__PURE__*/ new WeakSet<CompatConfig>()
+const seenConfigObjects = /*@__PURE__*/ new WeakSet<CompatConfig>()
 const warnedInvalidKeys: Record<string, boolean> = {}
 
 // dev only
 export function validateCompatConfig(
   config: CompatConfig,
-  instance?: ComponentInternalInstance
-) {
+  instance?: ComponentInternalInstance,
+): void {
   if (seenConfigObjects.has(config)) {
     return
   }
@@ -534,7 +534,7 @@ export function validateCompatConfig(
             `Deprecation config "${key}" is compiler-specific and you are ` +
               `running a runtime-only build of Vue. This deprecation should be ` +
               `configured via compiler options in your build setup instead.\n` +
-              `Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
+              `Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`,
           )
         }
       } else {
@@ -546,15 +546,15 @@ export function validateCompatConfig(
 
   if (instance && config[DeprecationTypes.OPTIONS_DATA_MERGE] != null) {
     warn(
-      `Deprecation config "${DeprecationTypes.OPTIONS_DATA_MERGE}" can only be configured globally.`
+      `Deprecation config "${DeprecationTypes.OPTIONS_DATA_MERGE}" can only be configured globally.`,
     )
   }
 }
 
 export function getCompatConfigForKey(
   key: DeprecationTypes | 'MODE',
-  instance: ComponentInternalInstance | null
-) {
+  instance: ComponentInternalInstance | null,
+): CompatConfig[DeprecationTypes | 'MODE'] {
   const instanceConfig =
     instance && (instance.type as ComponentOptions).compatConfig
   if (instanceConfig && key in instanceConfig) {
@@ -566,7 +566,7 @@ export function getCompatConfigForKey(
 export function isCompatEnabled(
   key: DeprecationTypes,
   instance: ComponentInternalInstance | null,
-  enableForBuiltIn = false
+  enableForBuiltIn = false,
 ): boolean {
   // skip compat for built-in components
   if (!enableForBuiltIn && instance && instance.type.__isBuiltIn) {
@@ -594,7 +594,7 @@ export function assertCompatEnabled(
   key: DeprecationTypes,
   instance: ComponentInternalInstance | null,
   ...args: any[]
-) {
+): void {
   if (!isCompatEnabled(key, instance)) {
     throw new Error(`${key} compat has been disabled.`)
   } else if (__DEV__) {
@@ -610,7 +610,7 @@ export function softAssertCompatEnabled(
   key: DeprecationTypes,
   instance: ComponentInternalInstance | null,
   ...args: any[]
-) {
+): boolean {
   if (__DEV__) {
     warnDeprecation(key, instance, ...args)
   }
@@ -626,7 +626,7 @@ export function checkCompatEnabled(
   key: DeprecationTypes,
   instance: ComponentInternalInstance | null,
   ...args: any[]
-) {
+): boolean {
   const enabled = isCompatEnabled(key, instance)
   if (__DEV__ && enabled) {
     warnDeprecation(key, instance, ...args)
@@ -637,6 +637,6 @@ export function checkCompatEnabled(
 // run tests in v3 mode by default
 if (__TEST__) {
   configureCompat({
-    MODE: 3
+    MODE: 3,
   })
 }
diff --git a/packages/runtime-core/src/compat/component.ts b/packages/runtime-core/src/compat/component.ts
index b09d579a5..da12e60c5 100644
--- a/packages/runtime-core/src/compat/component.ts
+++ b/packages/runtime-core/src/compat/component.ts
@@ -1,16 +1,16 @@
 import { isFunction, isObject } from '@vue/shared'
-import { Component, ComponentInternalInstance } from '../component'
+import type { Component, ComponentInternalInstance } from '../component'
 import {
-  checkCompatEnabled,
   DeprecationTypes,
-  softAssertCompatEnabled
+  checkCompatEnabled,
+  softAssertCompatEnabled,
 } from './compatConfig'
 import { convertLegacyAsyncComponent } from './componentAsync'
 import { convertLegacyFunctionalComponent } from './componentFunctional'
 
 export function convertLegacyComponent(
   comp: any,
-  instance: ComponentInternalInstance | null
+  instance: ComponentInternalInstance | null,
 ): Component {
   if (comp.__isBuiltIn) {
     return comp
@@ -18,6 +18,15 @@ export function convertLegacyComponent(
 
   // 2.x constructor
   if (isFunction(comp) && comp.cid) {
+    // #7766
+    if (comp.render) {
+      // only necessary when compiled from SFC
+      comp.options.render = comp.render
+    }
+    // copy over internal properties set by the SFC compiler
+    comp.options.__file = comp.__file
+    comp.options.__hmrId = comp.__hmrId
+    comp.options.__scopeId = comp.__scopeId
     comp = comp.options
   }
 
@@ -38,7 +47,7 @@ export function convertLegacyComponent(
     softAssertCompatEnabled(
       DeprecationTypes.COMPONENT_FUNCTIONAL,
       instance,
-      comp
+      comp,
     )
   ) {
     return convertLegacyFunctionalComponent(comp)
diff --git a/packages/runtime-core/src/compat/componentAsync.ts b/packages/runtime-core/src/compat/componentAsync.ts
index 5b2ac22c2..b6bd6dd4b 100644
--- a/packages/runtime-core/src/compat/componentAsync.ts
+++ b/packages/runtime-core/src/compat/componentAsync.ts
@@ -1,6 +1,6 @@
 import { isArray, isObject, isPromise } from '@vue/shared'
 import { defineAsyncComponent } from '../apiAsyncComponent'
-import { Component } from '../component'
+import type { Component } from '../component'
 import { isVNode } from '../vnode'
 
 interface LegacyAsyncOptions {
@@ -15,7 +15,7 @@ type LegacyAsyncReturnValue = Promise<Component> | LegacyAsyncOptions
 
 type LegacyAsyncComponent = (
   resolve?: (res: LegacyAsyncReturnValue) => void,
-  reject?: (reason?: any) => void
+  reject?: (reason?: any) => void,
 ) => LegacyAsyncReturnValue | undefined
 
 const normalizedAsyncComponentMap = new WeakMap<
@@ -23,7 +23,9 @@ const normalizedAsyncComponentMap = new WeakMap<
   Component
 >()
 
-export function convertLegacyAsyncComponent(comp: LegacyAsyncComponent) {
+export function convertLegacyAsyncComponent(
+  comp: LegacyAsyncComponent,
+): Component {
   if (normalizedAsyncComponentMap.has(comp)) {
     return normalizedAsyncComponentMap.get(comp)!
   }
@@ -47,7 +49,7 @@ export function convertLegacyAsyncComponent(comp: LegacyAsyncComponent) {
       loadingComponent: res.loading,
       errorComponent: res.error,
       delay: res.delay,
-      timeout: res.timeout
+      timeout: res.timeout,
     })
   } else if (res == null) {
     converted = defineAsyncComponent(() => fallbackPromise)
diff --git a/packages/runtime-core/src/compat/componentFunctional.ts b/packages/runtime-core/src/compat/componentFunctional.ts
index 90d24e1ba..764b932ba 100644
--- a/packages/runtime-core/src/compat/componentFunctional.ts
+++ b/packages/runtime-core/src/compat/componentFunctional.ts
@@ -1,10 +1,10 @@
 import {
-  ComponentOptions,
-  FunctionalComponent,
-  getCurrentInstance
+  type ComponentOptions,
+  type FunctionalComponent,
+  getCurrentInstance,
 } from '../component'
 import { resolveInjections } from '../componentOptions'
-import { InternalSlots } from '../componentSlots'
+import type { InternalSlots } from '../componentSlots'
 import { getCompatListeners } from './instanceListeners'
 import { compatH } from './renderFn'
 
@@ -16,10 +16,12 @@ export const legacySlotProxyHandlers: ProxyHandler<InternalSlots> = {
   get(target, key: string) {
     const slot = target[key]
     return slot && slot()
-  }
+  },
 }
 
-export function convertLegacyFunctionalComponent(comp: ComponentOptions) {
+export function convertLegacyFunctionalComponent(
+  comp: ComponentOptions,
+): FunctionalComponent {
   if (normalizedFunctionalComponentMap.has(comp)) {
     return normalizedFunctionalComponentMap.get(comp)!
   }
@@ -48,7 +50,7 @@ export function convertLegacyFunctionalComponent(comp: ComponentOptions) {
           return injections
         }
         return {}
-      }
+      },
     }
     return legacyFn(compatH, legacyCtx)
   }
diff --git a/packages/runtime-core/src/compat/componentVModel.ts b/packages/runtime-core/src/compat/componentVModel.ts
index b446fb427..7a9fea9bf 100644
--- a/packages/runtime-core/src/compat/componentVModel.ts
+++ b/packages/runtime-core/src/compat/componentVModel.ts
@@ -1,19 +1,19 @@
-import { extend, ShapeFlags } from '@vue/shared'
-import { ComponentInternalInstance, ComponentOptions } from '../component'
-import { callWithErrorHandling, ErrorCodes } from '../errorHandling'
-import { VNode } from '../vnode'
+import { ShapeFlags, extend } from '@vue/shared'
+import type { ComponentInternalInstance, ComponentOptions } from '../component'
+import { ErrorCodes, callWithErrorHandling } from '../errorHandling'
+import type { VNode } from '../vnode'
 import { popWarningContext, pushWarningContext } from '../warning'
 import {
   DeprecationTypes,
+  isCompatEnabled,
   warnDeprecation,
-  isCompatEnabled
 } from './compatConfig'
 
 export const compatModelEventPrefix = `onModelCompat:`
 
 const warnedTypes = new WeakSet()
 
-export function convertLegacyVModelProps(vnode: VNode) {
+export function convertLegacyVModelProps(vnode: VNode): void {
   const { type, shapeFlag, props, dynamicProps } = vnode
   const comp = type as ComponentOptions
   if (shapeFlag & ShapeFlags.COMPONENT && props && 'modelValue' in props) {
@@ -23,7 +23,7 @@ export function convertLegacyVModelProps(vnode: VNode) {
         // this is a special case where we want to use the vnode component's
         // compat config instead of the current rendering instance (which is the
         // parent of the component that exposes v-model)
-        { type } as any
+        { type } as any,
       )
     ) {
       return
@@ -67,8 +67,8 @@ function applyModelFromMixins(model: any, mixins?: ComponentOptions[]) {
 export function compatModelEmit(
   instance: ComponentInternalInstance,
   event: string,
-  args: any[]
-) {
+  args: any[],
+): void {
   if (!isCompatEnabled(DeprecationTypes.COMPONENT_V_MODEL, instance)) {
     return
   }
@@ -79,7 +79,7 @@ export function compatModelEmit(
       modelHandler,
       instance,
       ErrorCodes.COMPONENT_EVENT_HANDLER,
-      args
+      args,
     )
   }
 }
diff --git a/packages/runtime-core/src/compat/customDirective.ts b/packages/runtime-core/src/compat/customDirective.ts
index da351eb08..d5ce1d78e 100644
--- a/packages/runtime-core/src/compat/customDirective.ts
+++ b/packages/runtime-core/src/compat/customDirective.ts
@@ -1,7 +1,7 @@
 import { isArray } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
-import { ObjectDirective, DirectiveHook } from '../directives'
-import { softAssertCompatEnabled, DeprecationTypes } from './compatConfig'
+import type { ComponentInternalInstance } from '../component'
+import type { DirectiveHook, ObjectDirective } from '../directives'
+import { DeprecationTypes, softAssertCompatEnabled } from './compatConfig'
 
 export interface LegacyDirective {
   bind?: DirectiveHook
@@ -20,13 +20,13 @@ const legacyDirectiveHookMap: Partial<
   beforeMount: 'bind',
   mounted: 'inserted',
   updated: ['update', 'componentUpdated'],
-  unmounted: 'unbind'
+  unmounted: 'unbind',
 }
 
 export function mapCompatDirectiveHook(
   name: keyof ObjectDirective,
   dir: ObjectDirective & LegacyDirective,
-  instance: ComponentInternalInstance | null
+  instance: ComponentInternalInstance | null,
 ): DirectiveHook | DirectiveHook[] | undefined {
   const mappedName = legacyDirectiveHookMap[name]
   if (mappedName) {
@@ -39,7 +39,7 @@ export function mapCompatDirectiveHook(
             DeprecationTypes.CUSTOM_DIR,
             instance,
             mapped,
-            name
+            name,
           )
           hook.push(mappedHook)
         }
@@ -51,7 +51,7 @@ export function mapCompatDirectiveHook(
           DeprecationTypes.CUSTOM_DIR,
           instance,
           mappedName,
-          name
+          name,
         )
       }
       return dir[mappedName]
diff --git a/packages/runtime-core/src/compat/data.ts b/packages/runtime-core/src/compat/data.ts
index 72c7314ee..3c0ae6891 100644
--- a/packages/runtime-core/src/compat/data.ts
+++ b/packages/runtime-core/src/compat/data.ts
@@ -1,7 +1,7 @@
 import { isPlainObject } from '@vue/shared'
 import { DeprecationTypes, warnDeprecation } from './compatConfig'
 
-export function deepMergeData(to: any, from: any) {
+export function deepMergeData(to: any, from: any): any {
   for (const key in from) {
     const toVal = to[key]
     const fromVal = from[key]
diff --git a/packages/runtime-core/src/compat/global.ts b/packages/runtime-core/src/compat/global.ts
index 2efceb87f..edc57436a 100644
--- a/packages/runtime-core/src/compat/global.ts
+++ b/packages/runtime-core/src/compat/global.ts
@@ -1,63 +1,63 @@
 import {
+  TrackOpTypes,
+  TriggerOpTypes,
   isReactive,
   reactive,
   track,
-  TrackOpTypes,
   trigger,
-  TriggerOpTypes
 } from '@vue/reactivity'
 import {
-  isFunction,
-  extend,
   NOOP,
+  extend,
+  invokeArrayFns,
   isArray,
+  isFunction,
   isObject,
   isString,
-  invokeArrayFns
 } from '@vue/shared'
 import { warn } from '../warning'
 import { cloneVNode, createVNode } from '../vnode'
-import { RootRenderFunction } from '../renderer'
-import {
+import type { ElementNamespace, RootRenderFunction } from '../renderer'
+import type {
   App,
   AppConfig,
   AppContext,
   CreateAppFunction,
-  Plugin
+  Plugin,
 } from '../apiCreateApp'
 import {
-  Component,
-  ComponentOptions,
+  type Component,
+  type ComponentOptions,
   createComponentInstance,
   finishComponentSetup,
   isRuntimeOnly,
-  setupComponent
+  setupComponent,
 } from '../component'
 import {
-  RenderFunction,
+  type RenderFunction,
+  internalOptionMergeStrats,
   mergeOptions,
-  internalOptionMergeStrats
 } from '../componentOptions'
-import { ComponentPublicInstance } from '../componentPublicInstance'
+import type { ComponentPublicInstance } from '../componentPublicInstance'
 import { devtoolsInitApp, devtoolsUnmountApp } from '../devtools'
-import { Directive } from '../directives'
+import type { Directive } from '../directives'
 import { nextTick } from '../scheduler'
 import { version } from '..'
 import {
+  type LegacyConfig,
   installLegacyConfigWarnings,
   installLegacyOptionMergeStrats,
-  LegacyConfig
 } from './globalConfig'
-import { LegacyDirective } from './customDirective'
+import type { LegacyDirective } from './customDirective'
 import {
-  warnDeprecation,
   DeprecationTypes,
   assertCompatEnabled,
   configureCompat,
   isCompatEnabled,
-  softAssertCompatEnabled
+  softAssertCompatEnabled,
+  warnDeprecation,
 } from './compatConfig'
-import { LegacyPublicInstance } from './instance'
+import type { LegacyPublicInstance } from './instance'
 
 /**
  * @deprecated the default `Vue` export has been removed in Vue 3. The type for
@@ -77,13 +77,21 @@ export type CompatVue = Pick<App, 'version' | 'component' | 'directive'> & {
 
   nextTick: typeof nextTick
 
-  use(plugin: Plugin, ...options: any[]): CompatVue
+  use<Options extends unknown[]>(
+    plugin: Plugin<Options>,
+    ...options: Options
+  ): CompatVue
+  use<Options>(plugin: Plugin<Options>, options: Options): CompatVue
+
   mixin(mixin: ComponentOptions): CompatVue
 
   component(name: string): Component | undefined
   component(name: string, component: Component): CompatVue
-  directive(name: string): Directive | undefined
-  directive(name: string, directive: Directive): CompatVue
+  directive<T = any, V = any>(name: string): Directive<T, V> | undefined
+  directive<T = any, V = any>(
+    name: string,
+    directive: Directive<T, V>,
+  ): CompatVue
 
   compile(template: string): RenderFunction
 
@@ -94,11 +102,11 @@ export type CompatVue = Pick<App, 'version' | 'component' | 'directive'> & {
   /**
    * @deprecated Vue 3 no longer needs set() for adding new properties.
    */
-  set(target: any, key: string | number | symbol, value: any): void
+  set(target: any, key: PropertyKey, value: any): void
   /**
    * @deprecated Vue 3 no longer needs delete() for property deletions.
    */
-  delete(target: any, key: string | number | symbol): void
+  delete(target: any, key: PropertyKey): void
   /**
    * @deprecated use `reactive` instead.
    */
@@ -134,12 +142,12 @@ let singletonCtor: CompatVue
 // Legacy global Vue constructor
 export function createCompatVue(
   createApp: CreateAppFunction<Element>,
-  createSingletonApp: CreateAppFunction<Element>
+  createSingletonApp: CreateAppFunction<Element>,
 ): CompatVue {
   singletonApp = createSingletonApp({})
 
   const Vue: CompatVue = (singletonCtor = function Vue(
-    options: ComponentOptions = {}
+    options: ComponentOptions = {},
   ) {
     return createCompatApp(options, Vue)
   } as any)
@@ -173,11 +181,11 @@ export function createCompatVue(
   Vue.version = `2.6.14-compat:${__VERSION__}`
   Vue.config = singletonApp.config
 
-  Vue.use = (p, ...options) => {
-    if (p && isFunction(p.install)) {
-      p.install(Vue as any, ...options)
-    } else if (isFunction(p)) {
-      p(Vue as any, ...options)
+  Vue.use = (plugin: Plugin, ...options: any[]) => {
+    if (plugin && isFunction(plugin.install)) {
+      plugin.install(Vue as any, ...options)
+    } else if (isFunction(plugin)) {
+      plugin(Vue as any, ...options)
     }
     return Vue
   }
@@ -233,9 +241,9 @@ export function createCompatVue(
           mergeOptions(
             extend({}, SubVue.options),
             inlineOptions,
-            internalOptionMergeStrats as any
+            internalOptionMergeStrats as any,
           ),
-          SubVue
+          SubVue,
         )
       }
     }
@@ -258,7 +266,7 @@ export function createCompatVue(
     SubVue.options = mergeOptions(
       mergeBase,
       extendOptions,
-      internalOptionMergeStrats as any
+      internalOptionMergeStrats as any,
     )
 
     SubVue.options._base = SubVue
@@ -305,15 +313,15 @@ export function createCompatVue(
       mergeOptions(
         parent,
         child,
-        vm ? undefined : (internalOptionMergeStrats as any)
+        vm ? undefined : (internalOptionMergeStrats as any),
       ),
-    defineReactive
+    defineReactive,
   }
   Object.defineProperty(Vue, 'util', {
     get() {
       assertCompatEnabled(DeprecationTypes.GLOBAL_PRIVATE_UTIL, null)
       return util
-    }
+    },
   })
 
   Vue.configureCompat = configureCompat
@@ -324,8 +332,8 @@ export function createCompatVue(
 export function installAppCompatProperties(
   app: App,
   context: AppContext,
-  render: RootRenderFunction<any>
-) {
+  render: RootRenderFunction<any>,
+): void {
   installFilterMethod(app, context)
   installLegacyOptionMergeStrats(app.config)
 
@@ -364,7 +372,7 @@ function installLegacyAPIs(app: App) {
       get() {
         __DEV__ && warnDeprecation(DeprecationTypes.GLOBAL_PROTOTYPE, null)
         return app.config.globalProperties
-      }
+      },
     },
     nextTick: { value: nextTick },
     extend: { value: singletonCtor.extend },
@@ -374,8 +382,8 @@ function installLegacyAPIs(app: App) {
     util: {
       get() {
         return singletonCtor.util
-      }
-    }
+      },
+    },
   })
 }
 
@@ -383,7 +391,7 @@ function applySingletonAppMutations(app: App) {
   // copy over asset registries and deopt flag
   app._context.mixins = [...singletonApp._context.mixins]
   ;['components', 'directives', 'filters'].forEach(key => {
-    // @ts-ignore
+    // @ts-expect-error
     app._context[key] = Object.create(singletonApp._context[key])
   })
 
@@ -398,7 +406,7 @@ function applySingletonAppMutations(app: App) {
       continue
     }
     const val = singletonApp.config[key as keyof AppConfig]
-    // @ts-ignore
+    // @ts-expect-error
     app.config[key] = isObject(val) ? Object.create(val) : val
 
     // compat for runtime ignoredElements -> isCustomElement
@@ -424,15 +432,14 @@ function applySingletonPrototype(app: App, Ctor: Function) {
     app.config.globalProperties = Object.create(Ctor.prototype)
   }
   let hasPrototypeAugmentations = false
-  const descriptors = Object.getOwnPropertyDescriptors(Ctor.prototype)
-  for (const key in descriptors) {
+  for (const key of Object.getOwnPropertyNames(Ctor.prototype)) {
     if (key !== 'constructor') {
       hasPrototypeAugmentations = true
       if (enabled) {
         Object.defineProperty(
           app.config.globalProperties,
           key,
-          descriptors[key]
+          Object.getOwnPropertyDescriptor(Ctor.prototype, key)!,
         )
       }
     }
@@ -445,7 +452,7 @@ function applySingletonPrototype(app: App, Ctor: Function) {
 function installCompatMount(
   app: App,
   context: AppContext,
-  render: RootRenderFunction
+  render: RootRenderFunction,
 ) {
   let isMounted = false
 
@@ -493,7 +500,7 @@ function installCompatMount(
         if (!result) {
           __DEV__ &&
             warn(
-              `Failed to mount root instance: selector "${selectorOrEl}" returned null.`
+              `Failed to mount root instance: selector "${selectorOrEl}" returned null.`,
             )
           return
         }
@@ -503,7 +510,13 @@ function installCompatMount(
         container = selectorOrEl || document.createElement('div')
       }
 
-      const isSVG = container instanceof SVGElement
+      let namespace: ElementNamespace
+      if (container instanceof SVGElement) namespace = 'svg'
+      else if (
+        typeof MathMLElement === 'function' &&
+        container instanceof MathMLElement
+      )
+        namespace = 'mathml'
 
       // HMR root reload
       if (__DEV__) {
@@ -511,7 +524,7 @@ function installCompatMount(
           const cloned = cloneVNode(vnode)
           // compat mode will use instance if not reset to null
           cloned.component = null
-          render(cloned, container, isSVG)
+          render(cloned, container, namespace)
         }
       }
 
@@ -535,10 +548,10 @@ function installCompatMount(
       }
 
       // clear content before mounting
-      container.innerHTML = ''
+      container.textContent = ''
 
       // TODO hydration
-      render(vnode, container, isSVG)
+      render(vnode, container, namespace)
 
       if (container instanceof Element) {
         container.removeAttribute('v-cloak')
@@ -597,7 +610,7 @@ const methodsToPatch = [
   'unshift',
   'splice',
   'sort',
-  'reverse'
+  'reverse',
 ]
 
 const patched = new WeakSet<object>()
@@ -609,11 +622,9 @@ function defineReactive(obj: any, key: string, val: any) {
   if (isObject(val) && !isReactive(val) && !patched.has(val)) {
     const reactiveVal = reactive(val)
     if (isArray(val)) {
-      methodsToPatch.forEach(m => {
-        // @ts-ignore
+      methodsToPatch.forEach((m: any) => {
         val[m] = (...args: any[]) => {
-          // @ts-ignore
-          Array.prototype[m].call(reactiveVal, ...args)
+          Array.prototype[m].apply(reactiveVal, args)
         }
       })
     } else {
@@ -649,6 +660,6 @@ function defineReactiveSimple(obj: any, key: string, val: any) {
     set(newVal) {
       val = isObject(newVal) ? reactive(newVal) : newVal
       trigger(obj, TriggerOpTypes.SET, key, newVal)
-    }
+    },
   })
 }
diff --git a/packages/runtime-core/src/compat/globalConfig.ts b/packages/runtime-core/src/compat/globalConfig.ts
index 03a4699aa..65b5822b4 100644
--- a/packages/runtime-core/src/compat/globalConfig.ts
+++ b/packages/runtime-core/src/compat/globalConfig.ts
@@ -1,8 +1,8 @@
-import { AppConfig } from '../apiCreateApp'
+import type { AppConfig } from '../apiCreateApp'
 import {
   DeprecationTypes,
   softAssertCompatEnabled,
-  warnDeprecation
+  warnDeprecation,
 } from './compatConfig'
 import { isCopyingConfig } from './global'
 import { internalOptionMergeStrats } from '../componentOptions'
@@ -36,13 +36,13 @@ export type LegacyConfig = {
 }
 
 // dev only
-export function installLegacyConfigWarnings(config: AppConfig) {
+export function installLegacyConfigWarnings(config: AppConfig): void {
   const legacyConfigOptions: Record<string, DeprecationTypes> = {
     silent: DeprecationTypes.CONFIG_SILENT,
     devtools: DeprecationTypes.CONFIG_DEVTOOLS,
     ignoredElements: DeprecationTypes.CONFIG_IGNORED_ELEMENTS,
     keyCodes: DeprecationTypes.CONFIG_KEY_CODES,
-    productionTip: DeprecationTypes.CONFIG_PRODUCTION_TIP
+    productionTip: DeprecationTypes.CONFIG_PRODUCTION_TIP,
   }
 
   Object.keys(legacyConfigOptions).forEach(key => {
@@ -57,12 +57,12 @@ export function installLegacyConfigWarnings(config: AppConfig) {
           warnDeprecation(legacyConfigOptions[key], null)
         }
         val = newVal
-      }
+      },
     })
   })
 }
 
-export function installLegacyOptionMergeStrats(config: AppConfig) {
+export function installLegacyOptionMergeStrats(config: AppConfig): void {
   config.optionMergeStrategies = new Proxy({} as any, {
     get(target, key) {
       if (key in target) {
@@ -72,13 +72,13 @@ export function installLegacyOptionMergeStrats(config: AppConfig) {
         key in internalOptionMergeStrats &&
         softAssertCompatEnabled(
           DeprecationTypes.CONFIG_OPTION_MERGE_STRATS,
-          null
+          null,
         )
       ) {
         return internalOptionMergeStrats[
           key as keyof typeof internalOptionMergeStrats
         ]
       }
-    }
+    },
   })
 }
diff --git a/packages/runtime-core/src/compat/instance.ts b/packages/runtime-core/src/compat/instance.ts
index e6baeda6a..c650113f8 100644
--- a/packages/runtime-core/src/compat/instance.ts
+++ b/packages/runtime-core/src/compat/instance.ts
@@ -1,20 +1,21 @@
 import {
+  NOOP,
   extend,
   looseEqual,
   looseIndexOf,
   looseToNumber,
-  NOOP,
-  toDisplayString
+  toDisplayString,
 } from '@vue/shared'
-import {
+import type {
   ComponentPublicInstance,
-  PublicPropertiesMap
+  PublicPropertiesMap,
 } from '../componentPublicInstance'
 import { getCompatChildren } from './instanceChildren'
 import {
   DeprecationTypes,
   assertCompatEnabled,
-  isCompatEnabled
+  isCompatEnabled,
+  warnDeprecation,
 } from './compatConfig'
 import { off, on, once } from './instanceEventEmitter'
 import { getCompatListeners } from './instanceListeners'
@@ -32,19 +33,25 @@ import {
   legacyPrependModifier,
   legacyRenderSlot,
   legacyRenderStatic,
-  legacyresolveScopedSlots
+  legacyresolveScopedSlots,
 } from './renderHelpers'
 import { resolveFilter } from '../helpers/resolveAssets'
-import { InternalSlots, Slots } from '../componentSlots'
-import { ContextualRenderFn } from '../componentRenderContext'
+import type { Slots } from '../componentSlots'
 import { resolveMergedOptions } from '../componentOptions'
 
 export type LegacyPublicInstance = ComponentPublicInstance &
   LegacyPublicProperties
 
 export interface LegacyPublicProperties {
-  $set(target: object, key: string, value: any): void
-  $delete(target: object, key: string): void
+  $set<T extends Record<keyof any, any>, K extends keyof T>(
+    target: T,
+    key: K,
+    value: T[K],
+  ): void
+  $delete<T extends Record<keyof any, any>, K extends keyof T>(
+    target: T,
+    key: K,
+  ): void
   $mount(el?: string | Element): this
   $destroy(): void
   $scopedSlots: Slots
@@ -55,7 +62,9 @@ export interface LegacyPublicProperties {
   $listeners: Record<string, Function | Function[]>
 }
 
-export function installCompatInstanceProperties(map: PublicPropertiesMap) {
+export function installCompatInstanceProperties(
+  map: PublicPropertiesMap,
+): void {
   const set = (target: any, key: any, val: any) => {
     target[key] = val
     return target[key]
@@ -79,7 +88,7 @@ export function installCompatInstanceProperties(map: PublicPropertiesMap) {
     $mount: i => {
       assertCompatEnabled(
         DeprecationTypes.GLOBAL_MOUNT,
-        null /* this warning is global */
+        null /* this warning is global */,
       )
       // root mount override from ./global.ts in installCompatMount
       return i.ctx._compat_mount || NOOP
@@ -105,14 +114,7 @@ export function installCompatInstanceProperties(map: PublicPropertiesMap) {
 
     $scopedSlots: i => {
       assertCompatEnabled(DeprecationTypes.INSTANCE_SCOPED_SLOTS, i)
-      const res: InternalSlots = {}
-      for (const key in i.slots) {
-        const fn = i.slots[key]!
-        if (!(fn as ContextualRenderFn)._ns /* non-scoped slot */) {
-          res[key] = fn
-        }
-      }
-      return res
+      return __DEV__ ? shallowReadonly(i.slots) : i.slots
     },
 
     $on: i => on.bind(null, i),
@@ -120,51 +122,78 @@ export function installCompatInstanceProperties(map: PublicPropertiesMap) {
     $off: i => off.bind(null, i),
 
     $children: getCompatChildren,
-    $listeners: getCompatListeners
+    $listeners: getCompatListeners,
+
+    // inject additional properties into $options for compat
+    // e.g. vuex needs this.$options.parent
+    $options: i => {
+      if (!isCompatEnabled(DeprecationTypes.PRIVATE_APIS, i)) {
+        return resolveMergedOptions(i)
+      }
+      if (i.resolvedOptions) {
+        return i.resolvedOptions
+      }
+      const res = (i.resolvedOptions = extend({}, resolveMergedOptions(i)))
+      Object.defineProperties(res, {
+        parent: {
+          get() {
+            warnDeprecation(DeprecationTypes.PRIVATE_APIS, i, '$options.parent')
+            return i.proxy!.$parent
+          },
+        },
+        propsData: {
+          get() {
+            warnDeprecation(
+              DeprecationTypes.PRIVATE_APIS,
+              i,
+              '$options.propsData',
+            )
+            return i.vnode.props
+          },
+        },
+      })
+      return res
+    },
   } as PublicPropertiesMap)
 
-  /* istanbul ignore if */
-  if (isCompatEnabled(DeprecationTypes.PRIVATE_APIS, null)) {
-    extend(map, {
-      // needed by many libs / render fns
-      $vnode: i => i.vnode,
+  const privateAPIs = {
+    // needed by many libs / render fns
+    $vnode: i => i.vnode,
 
-      // inject additional properties into $options for compat
-      // e.g. vuex needs this.$options.parent
-      $options: i => {
-        const res = extend({}, resolveMergedOptions(i))
-        res.parent = i.proxy!.$parent
-        res.propsData = i.vnode.props
-        return res
-      },
+    // some private properties that are likely accessed...
+    _self: i => i.proxy,
+    _uid: i => i.uid,
+    _data: i => i.data,
+    _isMounted: i => i.isMounted,
+    _isDestroyed: i => i.isUnmounted,
 
-      // some private properties that are likely accessed...
-      _self: i => i.proxy,
-      _uid: i => i.uid,
-      _data: i => i.data,
-      _isMounted: i => i.isMounted,
-      _isDestroyed: i => i.isUnmounted,
+    // v2 render helpers
+    $createElement: () => compatH,
+    _c: () => compatH,
+    _o: () => legacyMarkOnce,
+    _n: () => looseToNumber,
+    _s: () => toDisplayString,
+    _l: () => renderList,
+    _t: i => legacyRenderSlot.bind(null, i),
+    _q: () => looseEqual,
+    _i: () => looseIndexOf,
+    _m: i => legacyRenderStatic.bind(null, i),
+    _f: () => resolveFilter,
+    _k: i => legacyCheckKeyCodes.bind(null, i),
+    _b: () => legacyBindObjectProps,
+    _v: () => createTextVNode,
+    _e: () => createCommentVNode,
+    _u: () => legacyresolveScopedSlots,
+    _g: () => legacyBindObjectListeners,
+    _d: () => legacyBindDynamicKeys,
+    _p: () => legacyPrependModifier,
+  } as PublicPropertiesMap
 
-      // v2 render helpers
-      $createElement: () => compatH,
-      _c: () => compatH,
-      _o: () => legacyMarkOnce,
-      _n: () => looseToNumber,
-      _s: () => toDisplayString,
-      _l: () => renderList,
-      _t: i => legacyRenderSlot.bind(null, i),
-      _q: () => looseEqual,
-      _i: () => looseIndexOf,
-      _m: i => legacyRenderStatic.bind(null, i),
-      _f: () => resolveFilter,
-      _k: i => legacyCheckKeyCodes.bind(null, i),
-      _b: () => legacyBindObjectProps,
-      _v: () => createTextVNode,
-      _e: () => createCommentVNode,
-      _u: () => legacyresolveScopedSlots,
-      _g: () => legacyBindObjectListeners,
-      _d: () => legacyBindDynamicKeys,
-      _p: () => legacyPrependModifier
-    } as PublicPropertiesMap)
+  for (const key in privateAPIs) {
+    map[key] = i => {
+      if (isCompatEnabled(DeprecationTypes.PRIVATE_APIS, i)) {
+        return privateAPIs[key](i)
+      }
+    }
   }
 }
diff --git a/packages/runtime-core/src/compat/instanceChildren.ts b/packages/runtime-core/src/compat/instanceChildren.ts
index 7524e53b7..415275342 100644
--- a/packages/runtime-core/src/compat/instanceChildren.ts
+++ b/packages/runtime-core/src/compat/instanceChildren.ts
@@ -1,11 +1,11 @@
 import { ShapeFlags } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
-import { ComponentPublicInstance } from '../componentPublicInstance'
-import { VNode } from '../vnode'
-import { assertCompatEnabled, DeprecationTypes } from './compatConfig'
+import type { ComponentInternalInstance } from '../component'
+import type { ComponentPublicInstance } from '../componentPublicInstance'
+import type { VNode } from '../vnode'
+import { DeprecationTypes, assertCompatEnabled } from './compatConfig'
 
 export function getCompatChildren(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): ComponentPublicInstance[] {
   assertCompatEnabled(DeprecationTypes.INSTANCE_CHILDREN, instance)
   const root = instance.subTree
diff --git a/packages/runtime-core/src/compat/instanceEventEmitter.ts b/packages/runtime-core/src/compat/instanceEventEmitter.ts
index b314f686c..2c99e6c53 100644
--- a/packages/runtime-core/src/compat/instanceEventEmitter.ts
+++ b/packages/runtime-core/src/compat/instanceEventEmitter.ts
@@ -1,19 +1,20 @@
 import { isArray } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
-import { callWithAsyncErrorHandling, ErrorCodes } from '../errorHandling'
-import { assertCompatEnabled, DeprecationTypes } from './compatConfig'
+import type { ComponentInternalInstance } from '../component'
+import { ErrorCodes, callWithAsyncErrorHandling } from '../errorHandling'
+import { DeprecationTypes, assertCompatEnabled } from './compatConfig'
+import type { ComponentPublicInstance } from '../componentPublicInstance'
 
 interface EventRegistry {
   [event: string]: Function[] | undefined
 }
 
-const eventRegistryMap = /*#__PURE__*/ new WeakMap<
+const eventRegistryMap = /*@__PURE__*/ new WeakMap<
   ComponentInternalInstance,
   EventRegistry
 >()
 
 export function getRegistry(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): EventRegistry {
   let events = eventRegistryMap.get(instance)
   if (!events) {
@@ -25,8 +26,8 @@ export function getRegistry(
 export function on(
   instance: ComponentInternalInstance,
   event: string | string[],
-  fn: Function
-) {
+  fn: Function,
+): ComponentPublicInstance | null {
   if (isArray(event)) {
     event.forEach(e => on(instance, e, fn))
   } else {
@@ -34,7 +35,7 @@ export function on(
       assertCompatEnabled(
         DeprecationTypes.INSTANCE_EVENT_HOOKS,
         instance,
-        event
+        event,
       )
     } else {
       assertCompatEnabled(DeprecationTypes.INSTANCE_EVENT_EMITTER, instance)
@@ -48,11 +49,11 @@ export function on(
 export function once(
   instance: ComponentInternalInstance,
   event: string,
-  fn: Function
-) {
+  fn: Function,
+): ComponentPublicInstance | null {
   const wrapped = (...args: any[]) => {
     off(instance, event, wrapped)
-    fn.call(instance.proxy, ...args)
+    fn.apply(instance.proxy, args)
   }
   wrapped.fn = fn
   on(instance, event, wrapped)
@@ -62,8 +63,8 @@ export function once(
 export function off(
   instance: ComponentInternalInstance,
   event?: string | string[],
-  fn?: Function
-) {
+  fn?: Function,
+): ComponentPublicInstance | null {
   assertCompatEnabled(DeprecationTypes.INSTANCE_EVENT_EMITTER, instance)
   const vm = instance.proxy
   // all
@@ -93,15 +94,15 @@ export function off(
 export function emit(
   instance: ComponentInternalInstance,
   event: string,
-  args: any[]
-) {
+  args: any[],
+): ComponentPublicInstance | null {
   const cbs = getRegistry(instance)[event]
   if (cbs) {
     callWithAsyncErrorHandling(
       cbs.map(cb => cb.bind(instance.proxy)),
       instance,
       ErrorCodes.COMPONENT_EVENT_HANDLER,
-      args
+      args,
     )
   }
   return instance.proxy
diff --git a/packages/runtime-core/src/compat/instanceListeners.ts b/packages/runtime-core/src/compat/instanceListeners.ts
index 973d440b1..faf061812 100644
--- a/packages/runtime-core/src/compat/instanceListeners.ts
+++ b/packages/runtime-core/src/compat/instanceListeners.ts
@@ -1,8 +1,10 @@
 import { isOn } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
-import { assertCompatEnabled, DeprecationTypes } from './compatConfig'
+import type { ComponentInternalInstance } from '../component'
+import { DeprecationTypes, assertCompatEnabled } from './compatConfig'
 
-export function getCompatListeners(instance: ComponentInternalInstance) {
+export function getCompatListeners(
+  instance: ComponentInternalInstance,
+): Record<string, Function | Function[]> {
   assertCompatEnabled(DeprecationTypes.INSTANCE_LISTENERS, instance)
 
   const listeners: Record<string, Function | Function[]> = {}
diff --git a/packages/runtime-core/src/compat/props.ts b/packages/runtime-core/src/compat/props.ts
index e2fccb667..3d79be697 100644
--- a/packages/runtime-core/src/compat/props.ts
+++ b/packages/runtime-core/src/compat/props.ts
@@ -1,14 +1,17 @@
 import { isArray } from '@vue/shared'
 import { inject } from '../apiInject'
-import { ComponentInternalInstance, Data } from '../component'
-import { ComponentOptions, resolveMergedOptions } from '../componentOptions'
+import type { ComponentInternalInstance, Data } from '../component'
+import {
+  type ComponentOptions,
+  resolveMergedOptions,
+} from '../componentOptions'
 import { DeprecationTypes, warnDeprecation } from './compatConfig'
 
 export function createPropsDefaultThis(
   instance: ComponentInternalInstance,
   rawProps: Data,
-  propKey: string
-) {
+  propKey: string,
+): object {
   return new Proxy(
     {},
     {
@@ -34,7 +37,7 @@ export function createPropsDefaultThis(
             return inject(key)
           }
         }
-      }
-    }
+      },
+    },
   )
 }
diff --git a/packages/runtime-core/src/compat/renderFn.ts b/packages/runtime-core/src/compat/renderFn.ts
index 4cf2fc226..49646eda4 100644
--- a/packages/runtime-core/src/compat/renderFn.ts
+++ b/packages/runtime-core/src/compat/renderFn.ts
@@ -1,4 +1,5 @@
 import {
+  ShapeFlags,
   extend,
   hyphenate,
   isArray,
@@ -7,39 +8,40 @@ import {
   makeMap,
   normalizeClass,
   normalizeStyle,
-  ShapeFlags,
-  toHandlerKey
+  toHandlerKey,
 } from '@vue/shared'
-import {
+import type {
   Component,
   ComponentInternalInstance,
   ComponentOptions,
   Data,
-  InternalRenderFunction
+  InternalRenderFunction,
 } from '../component'
 import { currentRenderingInstance } from '../componentRenderContext'
-import { DirectiveArguments, withDirectives } from '../directives'
+import { type DirectiveArguments, withDirectives } from '../directives'
 import {
   resolveDirective,
-  resolveDynamicComponent
+  resolveDynamicComponent,
 } from '../helpers/resolveAssets'
 import {
   Comment,
+  type VNode,
+  type VNodeArrayChildren,
+  type VNodeProps,
   createVNode,
   isVNode,
   normalizeChildren,
-  VNode,
-  VNodeArrayChildren,
-  VNodeProps
 } from '../vnode'
 import {
-  checkCompatEnabled,
   DeprecationTypes,
-  isCompatEnabled
+  checkCompatEnabled,
+  isCompatEnabled,
 } from './compatConfig'
 import { compatModelEventPrefix } from './componentVModel'
 
-export function convertLegacyRenderFn(instance: ComponentInternalInstance) {
+export function convertLegacyRenderFn(
+  instance: ComponentInternalInstance,
+): void {
   const Component = instance.type as ComponentOptions
   const render = Component.render as InternalRenderFunction | undefined
 
@@ -59,10 +61,10 @@ export function convertLegacyRenderFn(instance: ComponentInternalInstance) {
   // v2 render function, try to provide compat
   if (checkCompatEnabled(DeprecationTypes.RENDER_FUNCTION, instance)) {
     const wrapped = (Component.render = function compatRender() {
-      // @ts-ignore
+      // @ts-expect-error
       return render.call(this, compatH)
     })
-    // @ts-ignore
+    // @ts-expect-error
     wrapped._compatWrapped = true
   }
 }
@@ -109,18 +111,18 @@ type LegacyVNodeChildren =
 
 export function compatH(
   type: string | Component,
-  children?: LegacyVNodeChildren
+  children?: LegacyVNodeChildren,
 ): VNode
 export function compatH(
   type: string | Component,
   props?: Data & LegacyVNodeProps,
-  children?: LegacyVNodeChildren
+  children?: LegacyVNodeChildren,
 ): VNode
 
 export function compatH(
   type: any,
   propsOrChildren?: any,
-  children?: any
+  children?: any,
 ): VNode {
   if (!type) {
     type = Comment
@@ -150,8 +152,8 @@ export function compatH(
       return convertLegacySlots(
         convertLegacyDirectives(
           createVNode(type, convertLegacyProps(propsOrChildren, type)),
-          propsOrChildren
-        )
+          propsOrChildren,
+        ),
       )
     } else {
       // omit props
@@ -164,19 +166,19 @@ export function compatH(
     return convertLegacySlots(
       convertLegacyDirectives(
         createVNode(type, convertLegacyProps(propsOrChildren, type), children),
-        propsOrChildren
-      )
+        propsOrChildren,
+      ),
     )
   }
 }
 
-const skipLegacyRootLevelProps = /*#__PURE__*/ makeMap(
-  'staticStyle,staticClass,directives,model,hook'
+const skipLegacyRootLevelProps = /*@__PURE__*/ makeMap(
+  'staticStyle,staticClass,directives,model,hook',
 )
 
 function convertLegacyProps(
   legacyProps: LegacyVNodeProps | undefined,
-  type: any
+  type: any,
 ): (Data & VNodeProps) | null {
   if (!legacyProps) {
     return null
@@ -240,7 +242,7 @@ function convertLegacyEventKey(event: string): string {
 
 function convertLegacyDirectives(
   vnode: VNode,
-  props?: LegacyVNodeProps
+  props?: LegacyVNodeProps,
 ): VNode {
   if (props && props.directives) {
     return withDirectives(
@@ -250,9 +252,9 @@ function convertLegacyDirectives(
           resolveDirective(name)!,
           value,
           arg,
-          modifiers
+          modifiers,
         ] as DirectiveArguments[number]
-      })
+      }),
     )
   }
   return vnode
@@ -303,18 +305,18 @@ function convertLegacySlots(vnode: VNode): VNode {
   return vnode
 }
 
-export function defineLegacyVNodeProperties(vnode: VNode) {
-  /* istanbul ignore if */
+export function defineLegacyVNodeProperties(vnode: VNode): void {
+  /* v8 ignore start */
   if (
     isCompatEnabled(
       DeprecationTypes.RENDER_FUNCTION,
       currentRenderingInstance,
-      true /* enable for built-ins */
+      true /* enable for built-ins */,
     ) &&
     isCompatEnabled(
       DeprecationTypes.PRIVATE_APIS,
       currentRenderingInstance,
-      true /* enable for built-ins */
+      true /* enable for built-ins */,
     )
   ) {
     const context = currentRenderingInstance
@@ -337,11 +339,12 @@ export function defineLegacyVNodeProperties(vnode: VNode) {
             return (componentOptions = {
               Ctor: vnode.type,
               propsData: vnode.props,
-              children: vnode.children
+              children: vnode.children,
             })
           }
-        }
-      }
+        },
+      },
     })
   }
+  /* v8 ignore stop */
 }
diff --git a/packages/runtime-core/src/compat/renderHelpers.ts b/packages/runtime-core/src/compat/renderHelpers.ts
index aa156c11a..ac8100877 100644
--- a/packages/runtime-core/src/compat/renderHelpers.ts
+++ b/packages/runtime-core/src/compat/renderHelpers.ts
@@ -5,14 +5,14 @@ import {
   isArray,
   isObject,
   isReservedProp,
-  normalizeClass
+  normalizeClass,
 } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
-import { Slot } from '../componentSlots'
+import type { ComponentInternalInstance, Data } from '../component'
+import type { Slot } from '../componentSlots'
 import { createSlots } from '../helpers/createSlots'
 import { renderSlot } from '../helpers/renderSlot'
 import { toHandlers } from '../helpers/toHandlers'
-import { mergeProps, VNode } from '../vnode'
+import { type VNode, mergeProps } from '../vnode'
 
 function toObject(arr: Array<any>): Object {
   const res = {}
@@ -29,8 +29,8 @@ export function legacyBindObjectProps(
   _tag: string,
   value: any,
   _asProp: boolean,
-  isSync?: boolean
-) {
+  isSync?: boolean,
+): any {
   if (value && isObject(value)) {
     if (isArray(value)) {
       value = toObject(value)
@@ -62,7 +62,7 @@ export function legacyBindObjectProps(
   return data
 }
 
-export function legacyBindObjectListeners(props: any, listeners: any) {
+export function legacyBindObjectListeners(props: any, listeners: any): Data {
   return mergeProps(props, toHandlers(listeners))
 }
 
@@ -71,8 +71,8 @@ export function legacyRenderSlot(
   name: string,
   fallback?: VNode[],
   props?: any,
-  bindObject?: any
-) {
+  bindObject?: any,
+): VNode {
   if (bindObject) {
     props = mergeProps(props, bindObject)
   }
@@ -91,12 +91,12 @@ export function legacyresolveScopedSlots(
   fns: LegacyScopedSlotsData,
   raw?: Record<string, Slot>,
   // the following are added in 2.6
-  hasDynamicKeys?: boolean
-) {
+  hasDynamicKeys?: boolean,
+): ReturnType<typeof createSlots> {
   // v2 default slot doesn't have name
   return createSlots(
     raw || ({ $stable: !hasDynamicKeys } as any),
-    mapKeyToName(fns)
+    mapKeyToName(fns),
   )
 }
 
@@ -114,15 +114,15 @@ function mapKeyToName(slots: LegacyScopedSlotsData) {
   return slots as any
 }
 
-const staticCacheMap = /*#__PURE__*/ new WeakMap<
+const staticCacheMap = /*@__PURE__*/ new WeakMap<
   ComponentInternalInstance,
   any[]
 >()
 
 export function legacyRenderStatic(
   instance: ComponentInternalInstance,
-  index: number
-) {
+  index: number,
+): any {
   let cache = staticCacheMap.get(instance)
   if (!cache) {
     staticCacheMap.set(instance, (cache = []))
@@ -141,8 +141,8 @@ export function legacyCheckKeyCodes(
   key: string,
   builtInKeyCode?: number | number[],
   eventKeyName?: string,
-  builtInKeyName?: string | string[]
-) {
+  builtInKeyName?: string | string[],
+): boolean | undefined {
   const config = instance.appContext.config as any
   const configKeyCodes = config.keyCodes || {}
   const mappedKeyCode = configKeyCodes[key] || builtInKeyCode
@@ -163,11 +163,11 @@ function isKeyNotMatch<T>(expect: T | T[], actual: T): boolean {
   }
 }
 
-export function legacyMarkOnce(tree: VNode) {
+export function legacyMarkOnce(tree: VNode): VNode {
   return tree
 }
 
-export function legacyBindDynamicKeys(props: any, values: any[]) {
+export function legacyBindDynamicKeys(props: any, values: any[]): any {
   for (let i = 0; i < values.length; i += 2) {
     const key = values[i]
     if (typeof key === 'string' && key) {
@@ -177,6 +177,6 @@ export function legacyBindDynamicKeys(props: any, values: any[]) {
   return props
 }
 
-export function legacyPrependModifier(value: any, symbol: string) {
+export function legacyPrependModifier(value: any, symbol: string): any {
   return typeof value === 'string' ? symbol + value : value
 }
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 348228081..a1ce1de4e 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -1,93 +1,180 @@
-import { VNode, VNodeChild, isVNode } from './vnode'
+import { type VNode, type VNodeChild, isVNode } from './vnode'
 import {
+  EffectScope,
+  type ReactiveEffect,
+  TrackOpTypes,
   isRef,
+  markRaw,
   pauseTracking,
+  proxyRefs,
   resetTracking,
   shallowReadonly,
-  proxyRefs,
-  EffectScope,
-  markRaw,
   track,
-  TrackOpTypes,
-  ReactiveEffect
 } from '@vue/reactivity'
 import {
-  ComponentPublicInstance,
+  type ComponentPublicInstance,
+  type ComponentPublicInstanceConstructor,
   PublicInstanceProxyHandlers,
+  RuntimeCompiledPublicInstanceProxyHandlers,
   createDevRenderContext,
   exposePropsOnRenderContext,
   exposeSetupStateOnRenderContext,
-  ComponentPublicInstanceConstructor,
   publicPropertiesMap,
-  RuntimeCompiledPublicInstanceProxyHandlers
 } from './componentPublicInstance'
 import {
-  ComponentPropsOptions,
-  NormalizedPropsOptions,
+  type ComponentPropsOptions,
+  type NormalizedPropsOptions,
   initProps,
-  normalizePropsOptions
+  normalizePropsOptions,
 } from './componentProps'
 import {
+  type InternalSlots,
+  type Slots,
+  type SlotsType,
+  type UnwrapSlotsType,
   initSlots,
-  InternalSlots,
-  Slots,
-  SlotsType,
-  UnwrapSlotsType
 } from './componentSlots'
 import { warn } from './warning'
 import { ErrorCodes, callWithErrorHandling, handleError } from './errorHandling'
-import { AppContext, createAppContext, AppConfig } from './apiCreateApp'
-import { Directive, validateDirectiveName } from './directives'
 import {
+  type AppConfig,
+  type AppContext,
+  createAppContext,
+} from './apiCreateApp'
+import { type Directive, validateDirectiveName } from './directives'
+import {
+  type ComponentOptions,
+  type ComputedOptions,
+  type MergedComponentOptions,
+  type MethodOptions,
   applyOptions,
-  ComponentOptions,
-  ComputedOptions,
-  MethodOptions,
-  resolveMergedOptions
+  resolveMergedOptions,
 } from './componentOptions'
 import {
-  EmitsOptions,
-  ObjectEmitsOptions,
-  EmitFn,
+  type EmitFn,
+  type EmitsOptions,
+  type EmitsToProps,
+  type ObjectEmitsOptions,
+  type ShortEmitsToObject,
   emit,
   normalizeEmitsOptions,
-  EmitsToProps
 } from './componentEmits'
 import {
   EMPTY_OBJ,
-  isArray,
-  isFunction,
+  type IfAny,
   NOOP,
-  isObject,
-  NO,
-  makeMap,
-  isPromise,
   ShapeFlags,
   extend,
   getGlobalThis,
-  IfAny
+  isArray,
+  isFunction,
+  isObject,
+  isPromise,
+  makeMap,
 } from '@vue/shared'
-import { SuspenseBoundary } from './components/Suspense'
-import { CompilerOptions } from '@vue/compiler-core'
+import type { SuspenseBoundary } from './components/Suspense'
+import type { CompilerOptions } from '@vue/compiler-core'
 import { markAttrsAccessed } from './componentRenderUtils'
 import { currentRenderingInstance } from './componentRenderContext'
-import { startMeasure, endMeasure } from './profiling'
+import { endMeasure, startMeasure } from './profiling'
 import { convertLegacyRenderFn } from './compat/renderFn'
 import {
-  CompatConfig,
+  type CompatConfig,
   globalCompatConfig,
-  validateCompatConfig
+  validateCompatConfig,
 } from './compat/compatConfig'
-import { SchedulerJob } from './scheduler'
-import { LifecycleHooks } from './enums'
+import type { SchedulerJob } from './scheduler'
+import type { LifecycleHooks } from './enums'
+
+// Augment GlobalComponents
+import type { TeleportProps } from './components/Teleport'
+import type { SuspenseProps } from './components/Suspense'
+import type { KeepAliveProps } from './components/KeepAlive'
+import type { BaseTransitionProps } from './components/BaseTransition'
+import type { DefineComponent } from './apiDefineComponent'
+import { markAsyncBoundary } from './helpers/useId'
+import { isAsyncWrapper } from './apiAsyncComponent'
+import type { RendererElement } from './renderer'
 
 export type Data = Record<string, unknown>
 
+/**
+ * Public utility type for extracting the instance type of a component.
+ * Works with all valid component definition types. This is intended to replace
+ * the usage of `InstanceType<typeof Comp>` which only works for
+ * constructor-based component definition types.
+ *
+ * @example
+ * ```ts
+ * const MyComp = { ... }
+ * declare const instance: ComponentInstance<typeof MyComp>
+ * ```
+ */
+export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance }
+  ? InstanceType<T>
+  : T extends FunctionalComponent<infer Props, infer Emits>
+    ? ComponentPublicInstance<Props, {}, {}, {}, {}, ShortEmitsToObject<Emits>>
+    : T extends Component<
+          infer Props,
+          infer RawBindings,
+          infer D,
+          infer C,
+          infer M
+        >
+      ? // NOTE we override Props/RawBindings/D to make sure is not `unknown`
+        ComponentPublicInstance<
+          unknown extends Props ? {} : Props,
+          unknown extends RawBindings ? {} : RawBindings,
+          unknown extends D ? {} : D,
+          C,
+          M
+        >
+      : never // not a vue Component
+
 /**
  * For extending allowed non-declared props on components in TSX
  */
 export interface ComponentCustomProps {}
 
+/**
+ * For globally defined Directives
+ * Here is an example of adding a directive `VTooltip` as global directive:
+ *
+ * @example
+ * ```ts
+ * import VTooltip from 'v-tooltip'
+ *
+ * declare module '@vue/runtime-core' {
+ *   interface GlobalDirectives {
+ *     VTooltip
+ *   }
+ * }
+ * ```
+ */
+export interface GlobalDirectives {}
+
+/**
+ * For globally defined Components
+ * Here is an example of adding a component `RouterView` as global component:
+ *
+ * @example
+ * ```ts
+ * import { RouterView } from 'vue-router'
+ *
+ * declare module '@vue/runtime-core' {
+ *   interface GlobalComponents {
+ *     RouterView
+ *   }
+ * }
+ * ```
+ */
+export interface GlobalComponents {
+  Teleport: DefineComponent<TeleportProps>
+  Suspense: DefineComponent<SuspenseProps>
+  KeepAlive: DefineComponent<KeepAliveProps>
+  BaseTransition: DefineComponent<BaseTransitionProps>
+}
+
 /**
  * Default allowed non-declared props on component in TSX
  */
@@ -127,16 +214,17 @@ export interface ComponentInternalOptions {
 
 export interface FunctionalComponent<
   P = {},
-  E extends EmitsOptions = {},
-  S extends Record<string, any> = any
+  E extends EmitsOptions | Record<string, any[]> = {},
+  S extends Record<string, any> = any,
+  EE extends EmitsOptions = ShortEmitsToObject<E>,
 > extends ComponentInternalOptions {
   // use of any here is intentional so it can be a valid JSX Element constructor
   (
-    props: P & EmitsToProps<E>,
-    ctx: Omit<SetupContext<E, IfAny<S, {}, SlotsType<S>>>, 'expose'>
+    props: P & EmitsToProps<EE>,
+    ctx: Omit<SetupContext<EE, IfAny<S, {}, SlotsType<S>>>, 'expose'>,
   ): any
   props?: ComponentPropsOptions<P>
-  emits?: E | (keyof E)[]
+  emits?: EE | (keyof EE)[]
   slots?: IfAny<S, Slots, SlotsType<S>>
   inheritAttrs?: boolean
   displayName?: string
@@ -159,10 +247,12 @@ export type ConcreteComponent<
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions
+  M extends MethodOptions = MethodOptions,
+  E extends EmitsOptions | Record<string, any[]> = {},
+  S extends Record<string, any> = any,
 > =
   | ComponentOptions<Props, RawBindings, D, C, M>
-  | FunctionalComponent<Props, any>
+  | FunctionalComponent<Props, E, S>
 
 /**
  * A type used in public APIs where a component type is expected.
@@ -173,25 +263,29 @@ export type Component<
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions
+  M extends MethodOptions = MethodOptions,
+  E extends EmitsOptions | Record<string, any[]> = {},
+  S extends Record<string, any> = any,
 > =
-  | ConcreteComponent<Props, RawBindings, D, C, M>
+  | ConcreteComponent<Props, RawBindings, D, C, M, E, S>
   | ComponentPublicInstanceConstructor<Props>
 
 export type { ComponentOptions }
 
-type LifecycleHook<TFn = Function> = TFn[] | null
+export type LifecycleHook<TFn = Function> = (TFn & SchedulerJob)[] | null
 
 // use `E extends any` to force evaluating type to fix #2362
 export type SetupContext<
   E = EmitsOptions,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 > = E extends any
   ? {
       attrs: Data
       slots: UnwrapSlotsType<S>
       emit: EmitFn<E>
-      expose: (exposed?: Record<string, any>) => void
+      expose: <Exposed extends Record<string, any> = Record<string, any>>(
+        exposed?: Exposed,
+      ) => void
     }
   : never
 
@@ -206,7 +300,7 @@ export type InternalRenderFunction = {
     $props: ComponentInternalInstance['props'],
     $setup: ComponentInternalInstance['setupState'],
     $data: ComponentInternalInstance['data'],
-    $options: ComponentInternalInstance['ctx']
+    $options: ComponentInternalInstance['ctx'],
   ): VNodeChild
   _rc?: boolean // isRuntimeCompiled
 
@@ -243,9 +337,13 @@ export interface ComponentInternalInstance {
    */
   effect: ReactiveEffect
   /**
-   * Bound effect runner to be passed to schedulers
+   * Force update render effect
    */
-  update: SchedulerJob
+  update: () => void
+  /**
+   * Render effect job to be passed to scheduler (checks if dirty)
+   */
+  job: SchedulerJob
   /**
    * The render function that returns vdom tree.
    * @internal
@@ -261,6 +359,13 @@ export interface ComponentInternalInstance {
    * @internal
    */
   provides: Data
+  /**
+   * for tracking useId()
+   * first element is the current boundary prefix
+   * second number is the index of the useId call within that boundary
+   * @internal
+   */
+  ids: [string, number, number]
   /**
    * Tracking reactive effects (e.g. watchers) associated with this component
    * so that they can be automatically stopped on component unmount
@@ -277,7 +382,7 @@ export interface ComponentInternalInstance {
    * after initialized (e.g. inline handlers)
    * @internal
    */
-  renderCache: (Function | VNode)[]
+  renderCache: (Function | VNode | undefined)[]
 
   /**
    * Resolved component registry, only for components with mixins or extends
@@ -310,7 +415,12 @@ export interface ComponentInternalInstance {
    */
   inheritAttrs?: boolean
   /**
-   * is custom element?
+   * Custom Element instance (if component is created by defineCustomElement)
+   * @internal
+   */
+  ce?: ComponentCustomElementInterface
+  /**
+   * is custom element? (kept only for compatibility)
    * @internal
    */
   isCE?: boolean
@@ -351,9 +461,6 @@ export interface ComponentInternalInstance {
   refs: Data
   emit: EmitFn
 
-  attrsProxy: Data | null
-  slotsProxy: Slots | null
-
   /**
    * used for keeping track of .once event handlers on components
    * @internal
@@ -476,6 +583,18 @@ export interface ComponentInternalInstance {
    * @internal
    */
   ut?: (vars?: Record<string, string>) => void
+
+  /**
+   * dev only. For style v-bind hydration mismatch checks
+   * @internal
+   */
+  getCssVars?: () => Record<string, string>
+
+  /**
+   * v2 compat only, for caching mutated $options
+   * @internal
+   */
+  resolvedOptions?: MergedComponentOptions
 }
 
 const emptyAppContext = createAppContext()
@@ -485,8 +604,8 @@ let uid = 0
 export function createComponentInstance(
   vnode: VNode,
   parent: ComponentInternalInstance | null,
-  suspense: SuspenseBoundary | null
-) {
+  suspense: SuspenseBoundary | null,
+): ComponentInternalInstance {
   const type = vnode.type as ConcreteComponent
   // inherit parent app context - or - if root, adopt from root vnode
   const appContext =
@@ -503,13 +622,16 @@ export function createComponentInstance(
     subTree: null!, // will be set synchronously right after creation
     effect: null!,
     update: null!, // will be set synchronously right after creation
+    job: null!,
     scope: new EffectScope(true /* detached */),
     render: null,
     proxy: null,
     exposed: null,
     exposeProxy: null,
     withProxy: null,
+
     provides: parent ? parent.provides : Object.create(appContext.provides),
+    ids: parent ? parent.ids : ['', 0, 0],
     accessCache: null!,
     renderCache: [],
 
@@ -541,9 +663,6 @@ export function createComponentInstance(
     setupState: EMPTY_OBJ,
     setupContext: null,
 
-    attrsProxy: null,
-    slotsProxy: null,
-
     // suspense related
     suspense,
     suspenseId: suspense ? suspense.pendingId : 0,
@@ -568,7 +687,7 @@ export function createComponentInstance(
     rtg: null,
     rtc: null,
     ec: null,
-    sp: null
+    sp: null,
   }
   if (__DEV__) {
     instance.ctx = createDevRenderContext(instance)
@@ -591,13 +710,10 @@ export let currentInstance: ComponentInternalInstance | null = null
 export const getCurrentInstance: () => ComponentInternalInstance | null = () =>
   currentInstance || currentRenderingInstance
 
-type GlobalInstanceSetter = ((
-  instance: ComponentInternalInstance | null
-) => void) & { version?: string }
-
-let internalSetCurrentInstance: GlobalInstanceSetter
-let globalCurrentInstanceSetters: GlobalInstanceSetter[]
-let settersKey = '__VUE_INSTANCE_SETTERS__'
+let internalSetCurrentInstance: (
+  instance: ComponentInternalInstance | null,
+) => void
+let setInSSRSetupState: (state: boolean) => void
 
 /**
  * The following makes getCurrentInstance() usage across multiple copies of Vue
@@ -612,45 +728,69 @@ let settersKey = '__VUE_INSTANCE_SETTERS__'
  * found during browser execution.
  */
 if (__SSR__) {
-  if (!(globalCurrentInstanceSetters = getGlobalThis()[settersKey])) {
-    globalCurrentInstanceSetters = getGlobalThis()[settersKey] = []
-  }
-  globalCurrentInstanceSetters.push(i => (currentInstance = i))
-  internalSetCurrentInstance = instance => {
-    if (globalCurrentInstanceSetters.length > 1) {
-      globalCurrentInstanceSetters.forEach(s => s(instance))
-    } else {
-      globalCurrentInstanceSetters[0](instance)
+  type Setter = (v: any) => void
+  const g = getGlobalThis()
+  const registerGlobalSetter = (key: string, setter: Setter) => {
+    let setters: Setter[]
+    if (!(setters = g[key])) setters = g[key] = []
+    setters.push(setter)
+    return (v: any) => {
+      if (setters.length > 1) setters.forEach(set => set(v))
+      else setters[0](v)
     }
   }
+  internalSetCurrentInstance = registerGlobalSetter(
+    `__VUE_INSTANCE_SETTERS__`,
+    v => (currentInstance = v),
+  )
+  // also make `isInSSRComponentSetup` sharable across copies of Vue.
+  // this is needed in the SFC playground when SSRing async components, since
+  // we have to load both the runtime and the server-renderer from CDNs, they
+  // contain duplicated copies of Vue runtime code.
+  setInSSRSetupState = registerGlobalSetter(
+    `__VUE_SSR_SETTERS__`,
+    v => (isInSSRComponentSetup = v),
+  )
 } else {
   internalSetCurrentInstance = i => {
     currentInstance = i
   }
+  setInSSRSetupState = v => {
+    isInSSRComponentSetup = v
+  }
 }
 
 export const setCurrentInstance = (instance: ComponentInternalInstance) => {
+  const prev = currentInstance
   internalSetCurrentInstance(instance)
   instance.scope.on()
+  return (): void => {
+    instance.scope.off()
+    internalSetCurrentInstance(prev)
+  }
 }
 
-export const unsetCurrentInstance = () => {
+export const unsetCurrentInstance = (): void => {
   currentInstance && currentInstance.scope.off()
   internalSetCurrentInstance(null)
 }
 
-const isBuiltInTag = /*#__PURE__*/ makeMap('slot,component')
+const isBuiltInTag = /*@__PURE__*/ makeMap('slot,component')
 
-export function validateComponentName(name: string, config: AppConfig) {
-  const appIsNativeTag = config.isNativeTag || NO
-  if (isBuiltInTag(name) || appIsNativeTag(name)) {
+export function validateComponentName(
+  name: string,
+  { isNativeTag }: AppConfig,
+): void {
+  if (isBuiltInTag(name) || isNativeTag(name)) {
     warn(
-      'Do not use built-in or reserved HTML elements as component id: ' + name
+      'Do not use built-in or reserved HTML elements as component id: ' + name,
     )
   }
 }
 
-export function isStatefulComponent(instance: ComponentInternalInstance) {
+export function isStatefulComponent(
+  instance: ComponentInternalInstance,
+): number {
   return instance.vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
 }
 
@@ -658,25 +798,27 @@ export let isInSSRComponentSetup = false
 
 export function setupComponent(
   instance: ComponentInternalInstance,
-  isSSR = false
-) {
-  isInSSRComponentSetup = isSSR
+  isSSR = false,
+  optimized = false,
+): Promise<void> | undefined {
+  isSSR && setInSSRSetupState(isSSR)
 
   const { props, children } = instance.vnode
   const isStateful = isStatefulComponent(instance)
   initProps(instance, props, isStateful, isSSR)
-  initSlots(instance, children)
+  initSlots(instance, children, optimized)
 
   const setupResult = isStateful
     ? setupStatefulComponent(instance, isSSR)
     : undefined
-  isInSSRComponentSetup = false
+
+  isSSR && setInSSRSetupState(false)
   return setupResult
 }
 
 function setupStatefulComponent(
   instance: ComponentInternalInstance,
-  isSSR: boolean
+  isSSR: boolean,
 ) {
   const Component = instance.type as ComponentOptions
 
@@ -700,15 +842,14 @@ function setupStatefulComponent(
       warn(
         `"compilerOptions" is only supported when using a build of Vue that ` +
           `includes the runtime compiler. Since you are using a runtime-only ` +
-          `build, the options should be passed via your build tool config instead.`
+          `build, the options should be passed via your build tool config instead.`,
       )
     }
   }
   // 0. create render proxy property access cache
   instance.accessCache = Object.create(null)
   // 1. create public instance / render proxy
-  // also mark it raw so it's never observed
-  instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers))
+  instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers)
   if (__DEV__) {
     exposePropsOnRenderContext(instance)
   }
@@ -718,18 +859,23 @@ function setupStatefulComponent(
     const setupContext = (instance.setupContext =
       setup.length > 1 ? createSetupContext(instance) : null)
 
-    setCurrentInstance(instance)
+    const reset = setCurrentInstance(instance)
     pauseTracking()
     const setupResult = callWithErrorHandling(
       setup,
       instance,
       ErrorCodes.SETUP_FUNCTION,
-      [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
+      [
+        __DEV__ ? shallowReadonly(instance.props) : instance.props,
+        setupContext,
+      ],
     )
     resetTracking()
-    unsetCurrentInstance()
+    reset()
 
     if (isPromise(setupResult)) {
+      // async setup, mark as async boundary for useId()
+      if (!isAsyncWrapper(instance)) markAsyncBoundary(instance)
       setupResult.then(unsetCurrentInstance, unsetCurrentInstance)
       if (isSSR) {
         // return the promise so server-renderer can wait on it
@@ -750,13 +896,13 @@ function setupStatefulComponent(
             `Component <${name}>: setup function returned a promise, but no ` +
               `<Suspense> boundary was found in the parent component tree. ` +
               `A component with async setup() must be nested in a <Suspense> ` +
-              `in order to be rendered.`
+              `in order to be rendered.`,
           )
         }
       } else if (__DEV__) {
         warn(
           `setup() returned a Promise, but the version of Vue you are using ` +
-            `does not support it yet.`
+            `does not support it yet.`,
         )
       }
     } else {
@@ -770,8 +916,8 @@ function setupStatefulComponent(
 export function handleSetupResult(
   instance: ComponentInternalInstance,
   setupResult: unknown,
-  isSSR: boolean
-) {
+  isSSR: boolean,
+): void {
   if (isFunction(setupResult)) {
     // setup returned an inline render function
     if (__SSR__ && (instance.type as ComponentOptions).__ssrInlineRender) {
@@ -785,7 +931,7 @@ export function handleSetupResult(
     if (__DEV__ && isVNode(setupResult)) {
       warn(
         `setup() should not return VNodes directly - ` +
-          `return a render function instead.`
+          `return a render function instead.`,
       )
     }
     // setup returned bindings.
@@ -801,7 +947,7 @@ export function handleSetupResult(
     warn(
       `setup() should return an object. Received: ${
         setupResult === null ? 'null' : typeof setupResult
-      }`
+      }`,
     )
   }
   finishComponentSetup(instance, isSSR)
@@ -809,7 +955,7 @@ export function handleSetupResult(
 
 type CompileFunction = (
   template: string | object,
-  options?: CompilerOptions
+  options?: CompilerOptions,
 ) => InternalRenderFunction
 
 let compile: CompileFunction | undefined
@@ -819,7 +965,7 @@ let installWithProxy: (i: ComponentInternalInstance) => void
  * For runtime-dom to register the compiler.
  * Note the exported method uses any to avoid d.ts relying on the compiler types.
  */
-export function registerRuntimeCompiler(_compile: any) {
+export function registerRuntimeCompiler(_compile: any): void {
   compile = _compile
   installWithProxy = i => {
     if (i.render!._rc) {
@@ -829,13 +975,13 @@ export function registerRuntimeCompiler(_compile: any) {
 }
 
 // dev only
-export const isRuntimeOnly = () => !compile
+export const isRuntimeOnly = (): boolean => !compile
 
 export function finishComponentSetup(
   instance: ComponentInternalInstance,
   isSSR: boolean,
-  skipOptions?: boolean
-) {
+  skipOptions?: boolean,
+): void {
   const Component = instance.type as ComponentOptions
 
   if (__COMPAT__) {
@@ -869,11 +1015,11 @@ export function finishComponentSetup(
           extend(
             {
               isCustomElement,
-              delimiters
+              delimiters,
             },
-            compilerOptions
+            compilerOptions,
           ),
-          componentCompilerOptions
+          componentCompilerOptions,
         )
         if (__COMPAT__) {
           // pass runtime compat config into the compiler
@@ -902,21 +1048,21 @@ export function finishComponentSetup(
 
   // support for 2.x options
   if (__FEATURE_OPTIONS_API__ && !(__COMPAT__ && skipOptions)) {
-    setCurrentInstance(instance)
+    const reset = setCurrentInstance(instance)
     pauseTracking()
     try {
       applyOptions(instance)
     } finally {
       resetTracking()
-      unsetCurrentInstance()
+      reset()
     }
   }
 
   // warn missing template/render
   // the runtime compilation of template in SSR is done by server-render
   if (__DEV__ && !Component.render && instance.render === NOOP && !isSSR) {
-    /* istanbul ignore if */
     if (!compile && Component.template) {
+      /* v8 ignore start */
       warn(
         `Component provided template option but ` +
           `runtime compilation is not supported in this build of Vue.` +
@@ -926,62 +1072,52 @@ export function finishComponentSetup(
               ? ` Use "vue.esm-browser.js" instead.`
               : __GLOBAL__
                 ? ` Use "vue.global.js" instead.`
-                : ``) /* should not happen */
+                : ``) /* should not happen */,
       )
+      /* v8 ignore stop */
     } else {
-      warn(`Component is missing template or render function.`)
+      warn(`Component is missing template or render function: `, Component)
     }
   }
 }
 
-function getAttrsProxy(instance: ComponentInternalInstance): Data {
-  return (
-    instance.attrsProxy ||
-    (instance.attrsProxy = new Proxy(
-      instance.attrs,
-      __DEV__
-        ? {
-            get(target, key: string) {
-              markAttrsAccessed()
-              track(instance, TrackOpTypes.GET, '$attrs')
-              return target[key]
-            },
-            set() {
-              warn(`setupContext.attrs is readonly.`)
-              return false
-            },
-            deleteProperty() {
-              warn(`setupContext.attrs is readonly.`)
-              return false
-            }
-          }
-        : {
-            get(target, key: string) {
-              track(instance, TrackOpTypes.GET, '$attrs')
-              return target[key]
-            }
-          }
-    ))
-  )
-}
+const attrsProxyHandlers = __DEV__
+  ? {
+      get(target: Data, key: string) {
+        markAttrsAccessed()
+        track(target, TrackOpTypes.GET, '')
+        return target[key]
+      },
+      set() {
+        warn(`setupContext.attrs is readonly.`)
+        return false
+      },
+      deleteProperty() {
+        warn(`setupContext.attrs is readonly.`)
+        return false
+      },
+    }
+  : {
+      get(target: Data, key: string) {
+        track(target, TrackOpTypes.GET, '')
+        return target[key]
+      },
+    }
 
 /**
  * Dev-only
  */
 function getSlotsProxy(instance: ComponentInternalInstance): Slots {
-  return (
-    instance.slotsProxy ||
-    (instance.slotsProxy = new Proxy(instance.slots, {
-      get(target, key: string) {
-        track(instance, TrackOpTypes.GET, '$slots')
-        return target[key]
-      }
-    }))
-  )
+  return new Proxy(instance.slots, {
+    get(target, key: string) {
+      track(instance, TrackOpTypes.GET, '$slots')
+      return target[key]
+    },
+  })
 }
 
 export function createSetupContext(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): SetupContext {
   const expose: SetupContext['expose'] = exposed => {
     if (__DEV__) {
@@ -999,7 +1135,7 @@ export function createSetupContext(
         }
         if (exposedType !== 'object') {
           warn(
-            `expose() should be passed a plain object, received ${exposedType}.`
+            `expose() should be passed a plain object, received ${exposedType}.`,
           )
         }
       }
@@ -1010,31 +1146,36 @@ export function createSetupContext(
   if (__DEV__) {
     // We use getters in dev in case libs like test-utils overwrite instance
     // properties (overwrites should not be done in prod)
+    let attrsProxy: Data
+    let slotsProxy: Slots
     return Object.freeze({
       get attrs() {
-        return getAttrsProxy(instance)
+        return (
+          attrsProxy ||
+          (attrsProxy = new Proxy(instance.attrs, attrsProxyHandlers))
+        )
       },
       get slots() {
-        return getSlotsProxy(instance)
+        return slotsProxy || (slotsProxy = getSlotsProxy(instance))
       },
       get emit() {
         return (event: string, ...args: any[]) => instance.emit(event, ...args)
       },
-      expose
+      expose,
     })
   } else {
     return {
-      get attrs() {
-        return getAttrsProxy(instance)
-      },
+      attrs: new Proxy(instance.attrs, attrsProxyHandlers),
       slots: instance.slots,
       emit: instance.emit,
-      expose
+      expose,
     }
   }
 }
 
-export function getExposeProxy(instance: ComponentInternalInstance) {
+export function getComponentPublicInstance(
+  instance: ComponentInternalInstance,
+): ComponentPublicInstance | ComponentInternalInstance['exposed'] | null {
   if (instance.exposed) {
     return (
       instance.exposeProxy ||
@@ -1048,9 +1189,11 @@ export function getExposeProxy(instance: ComponentInternalInstance) {
         },
         has(target, key: string) {
           return key in target || key in publicPropertiesMap
-        }
+        },
       }))
     )
+  } else {
+    return instance.proxy
   }
 }
 
@@ -1060,18 +1203,17 @@ const classify = (str: string): string =>
 
 export function getComponentName(
   Component: ConcreteComponent,
-  includeInferred = true
+  includeInferred = true,
 ): string | false | undefined {
   return isFunction(Component)
     ? Component.displayName || Component.name
     : Component.name || (includeInferred && Component.__name)
 }
 
-/* istanbul ignore next */
 export function formatComponentName(
   instance: ComponentInternalInstance | null,
   Component: ConcreteComponent,
-  isRoot = false
+  isRoot = false,
 ): string {
   let name = getComponentName(Component)
   if (!name && Component.__file) {
@@ -1093,7 +1235,7 @@ export function formatComponentName(
     name =
       inferFromRegistry(
         instance.components ||
-          (instance.parent.type as ComponentOptions).components
+          (instance.parent.type as ComponentOptions).components,
       ) || inferFromRegistry(instance.appContext.components)
   }
 
@@ -1103,3 +1245,27 @@ export function formatComponentName(
 export function isClassComponent(value: unknown): value is ClassComponent {
   return isFunction(value) && '__vccOpts' in value
 }
+
+export interface ComponentCustomElementInterface {
+  /**
+   * @internal
+   */
+  _injectChildStyle(type: ConcreteComponent): void
+  /**
+   * @internal
+   */
+  _removeChildStyle(type: ConcreteComponent): void
+  /**
+   * @internal
+   */
+  _setProp(
+    key: string,
+    val: any,
+    shouldReflect?: boolean,
+    shouldUpdate?: boolean,
+  ): void
+  /**
+   * @internal attached by the nested Teleport when shadowRoot is false.
+   */
+  _teleportTarget?: RendererElement
+}
diff --git a/packages/runtime-core/src/componentEmits.ts b/packages/runtime-core/src/componentEmits.ts
index f3a30f7c9..db52bc88c 100644
--- a/packages/runtime-core/src/componentEmits.ts
+++ b/packages/runtime-core/src/componentEmits.ts
@@ -1,33 +1,37 @@
 import {
-  camelize,
   EMPTY_OBJ,
-  toHandlerKey,
+  type OverloadParameters,
+  type UnionToIntersection,
+  camelize,
   extend,
   hasOwn,
   hyphenate,
   isArray,
   isFunction,
   isObject,
-  isString,
   isOn,
-  UnionToIntersection,
-  looseToNumber
+  isString,
+  looseToNumber,
+  toHandlerKey,
 } from '@vue/shared'
 import {
-  ComponentInternalInstance,
-  ComponentOptions,
-  ConcreteComponent,
-  formatComponentName
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ConcreteComponent,
+  formatComponentName,
 } from './component'
-import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
+import { ErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
 import { warn } from './warning'
 import { devtoolsComponentEmit } from './devtools'
-import { AppContext } from './apiCreateApp'
+import type { AppContext } from './apiCreateApp'
 import { emit as compatInstanceEmit } from './compat/instanceEventEmitter'
 import {
+  compatModelEmit,
   compatModelEventPrefix,
-  compatModelEmit
 } from './compat/componentVModel'
+import type { ComponentTypeEmits } from './apiSetupHelpers'
+import { getModelModifiers } from './helpers/useModel'
+import type { ComponentPublicInstance } from './componentPublicInstance'
 
 export type ObjectEmitsOptions = Record<
   string,
@@ -36,52 +40,86 @@ export type ObjectEmitsOptions = Record<
 
 export type EmitsOptions = ObjectEmitsOptions | string[]
 
-export type EmitsToProps<T extends EmitsOptions> = T extends string[]
-  ? {
-      [K in string & `on${Capitalize<T[number]>}`]?: (...args: any[]) => any
-    }
-  : T extends ObjectEmitsOptions
+export type EmitsToProps<T extends EmitsOptions | ComponentTypeEmits> =
+  T extends string[]
     ? {
-        [K in string &
-          `on${Capitalize<string & keyof T>}`]?: K extends `on${infer C}`
-          ? T[Uncapitalize<C>] extends null
-            ? (...args: any[]) => any
-            : (
-                ...args: T[Uncapitalize<C>] extends (...args: infer P) => any
-                  ? P
-                  : never
-              ) => any
-          : never
+        [K in `on${Capitalize<T[number]>}`]?: (...args: any[]) => any
       }
-    : {}
+    : T extends ObjectEmitsOptions
+      ? {
+          [K in string & keyof T as `on${Capitalize<K>}`]?: (
+            ...args: T[K] extends (...args: infer P) => any
+              ? P
+              : T[K] extends null
+                ? any[]
+                : never
+          ) => any
+        }
+      : {}
+
+export type TypeEmitsToOptions<T extends ComponentTypeEmits> = {
+  [K in keyof T & string]: T[K] extends [...args: infer Args]
+    ? (...args: Args) => any
+    : () => any
+} & (T extends (...args: any[]) => any
+  ? ParametersToFns<OverloadParameters<T>>
+  : {})
+
+type ParametersToFns<T extends any[]> = {
+  [K in T[0]]: IsStringLiteral<K> extends true
+    ? (
+        ...args: T extends [e: infer E, ...args: infer P]
+          ? K extends E
+            ? P
+            : never
+          : never
+      ) => any
+    : never
+}
+
+type IsStringLiteral<T> = T extends string
+  ? string extends T
+    ? false
+    : true
+  : false
+
+export type ShortEmitsToObject<E> =
+  E extends Record<string, any[]>
+    ? {
+        [K in keyof E]: (...args: E[K]) => any
+      }
+    : E
 
 export type EmitFn<
   Options = ObjectEmitsOptions,
-  Event extends keyof Options = keyof Options
-> = Options extends Array<infer V>
-  ? (event: V, ...args: any[]) => void
-  : {} extends Options // if the emit is empty object (usually the default value for emit) should be converted to function
-    ? (event: string, ...args: any[]) => void
-    : UnionToIntersection<
-        {
-          [key in Event]: Options[key] extends (...args: infer Args) => any
-            ? (event: key, ...args: Args) => void
-            : (event: key, ...args: any[]) => void
-        }[Event]
-      >
+  Event extends keyof Options = keyof Options,
+> =
+  Options extends Array<infer V>
+    ? (event: V, ...args: any[]) => void
+    : {} extends Options // if the emit is empty object (usually the default value for emit) should be converted to function
+      ? (event: string, ...args: any[]) => void
+      : UnionToIntersection<
+          {
+            [key in Event]: Options[key] extends (...args: infer Args) => any
+              ? (event: key, ...args: Args) => void
+              : Options[key] extends any[]
+                ? (event: key, ...args: Options[key]) => void
+                : (event: key, ...args: any[]) => void
+          }[Event]
+        >
 
 export function emit(
   instance: ComponentInternalInstance,
   event: string,
   ...rawArgs: any[]
-) {
+): ComponentPublicInstance | null | undefined {
   if (instance.isUnmounted) return
   const props = instance.vnode.props || EMPTY_OBJ
 
   if (__DEV__) {
     const {
       emitsOptions,
-      propsOptions: [propsOptions]
+      propsOptions: [propsOptions],
     } = instance
     if (emitsOptions) {
       if (
@@ -92,10 +130,10 @@ export function emit(
             event.startsWith(compatModelEventPrefix))
         )
       ) {
-        if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
+        if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
           warn(
             `Component emitted event "${event}" but it is neither declared in ` +
-              `the emits option nor as an "${toHandlerKey(event)}" prop.`
+              `the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`,
           )
         }
       } else {
@@ -104,7 +142,7 @@ export function emit(
           const isValid = validator(...rawArgs)
           if (!isValid) {
             warn(
-              `Invalid event arguments: event validation failed for event "${event}".`
+              `Invalid event arguments: event validation failed for event "${event}".`,
             )
           }
         }
@@ -116,16 +154,12 @@ export function emit(
   const isModelListener = event.startsWith('update:')
 
   // for v-model update:xxx events, apply modifiers on args
-  const modelArg = isModelListener && event.slice(7)
-  if (modelArg && modelArg in props) {
-    const modifiersKey = `${
-      modelArg === 'modelValue' ? 'model' : modelArg
-    }Modifiers`
-    const { number, trim } = props[modifiersKey] || EMPTY_OBJ
-    if (trim) {
+  const modifiers = isModelListener && getModelModifiers(props, event.slice(7))
+  if (modifiers) {
+    if (modifiers.trim) {
       args = rawArgs.map(a => (isString(a) ? a.trim() : a))
     }
-    if (number) {
+    if (modifiers.number) {
       args = rawArgs.map(looseToNumber)
     }
   }
@@ -141,11 +175,13 @@ export function emit(
         `Event "${lowerCaseEvent}" is emitted in component ` +
           `${formatComponentName(
             instance,
-            instance.type
+            instance.type,
           )} but the handler is registered for "${event}". ` +
           `Note that HTML attributes are case-insensitive and you cannot use ` +
           `v-on to listen to camelCase events when using in-DOM templates. ` +
-          `You should probably use "${hyphenate(event)}" instead of "${event}".`
+          `You should probably use "${hyphenate(
+            event,
+          )}" instead of "${event}".`,
       )
     }
   }
@@ -166,7 +202,7 @@ export function emit(
       handler,
       instance,
       ErrorCodes.COMPONENT_EVENT_HANDLER,
-      args
+      args,
     )
   }
 
@@ -182,7 +218,7 @@ export function emit(
       onceHandler,
       instance,
       ErrorCodes.COMPONENT_EVENT_HANDLER,
-      args
+      args,
     )
   }
 
@@ -195,7 +231,7 @@ export function emit(
 export function normalizeEmitsOptions(
   comp: ConcreteComponent,
   appContext: AppContext,
-  asMixin = false
+  asMixin = false,
 ): ObjectEmitsOptions | null {
   const cache = appContext.emitsCache
   const cached = cache.get(comp)
@@ -251,7 +287,7 @@ export function normalizeEmitsOptions(
 // both considered matched listeners.
 export function isEmitListener(
   options: ObjectEmitsOptions | null,
-  key: string
+  key: string,
 ): boolean {
   if (!options || !isOn(key)) {
     return false
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index c7128ecfa..f864f39e4 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -1,89 +1,98 @@
 import {
-  ComponentInternalInstance,
-  Data,
-  SetupContext,
-  ComponentInternalOptions,
-  Component,
-  ConcreteComponent,
-  InternalRenderFunction
+  type Component,
+  type ComponentInternalInstance,
+  type ComponentInternalOptions,
+  type ConcreteComponent,
+  type Data,
+  type InternalRenderFunction,
+  type SetupContext,
+  currentInstance,
 } from './component'
 import {
-  isFunction,
-  extend,
-  isString,
-  isObject,
-  isArray,
+  type LooseRequired,
   NOOP,
+  type Prettify,
+  extend,
+  isArray,
+  isFunction,
+  isObject,
   isPromise,
-  LooseRequired,
-  Prettify
+  isString,
 } from '@vue/shared'
-import { isRef, Ref } from '@vue/reactivity'
+import { type Ref, getCurrentScope, isRef, traverse } from '@vue/reactivity'
 import { computed } from './apiComputed'
 import {
+  type WatchCallback,
+  type WatchOptions,
+  createPathGetter,
   watch,
-  WatchOptions,
-  WatchCallback,
-  createPathGetter
 } from './apiWatch'
-import { provide, inject } from './apiInject'
+import { inject, provide } from './apiInject'
 import {
-  onBeforeMount,
-  onMounted,
-  onBeforeUpdate,
-  onUpdated,
-  onErrorCaptured,
-  onRenderTracked,
-  onBeforeUnmount,
-  onUnmounted,
+  type DebuggerHook,
+  type ErrorCapturedHook,
   onActivated,
+  onBeforeMount,
+  onBeforeUnmount,
+  onBeforeUpdate,
   onDeactivated,
+  onErrorCaptured,
+  onMounted,
+  onRenderTracked,
   onRenderTriggered,
-  DebuggerHook,
-  ErrorCapturedHook,
-  onServerPrefetch
+  onServerPrefetch,
+  onUnmounted,
+  onUpdated,
 } from './apiLifecycle'
 import {
+  type ComputedGetter,
+  type WritableComputedOptions,
   reactive,
-  ComputedGetter,
-  WritableComputedOptions
 } from '@vue/reactivity'
-import {
+import type {
   ComponentObjectPropsOptions,
-  ExtractPropTypes,
+  ComponentPropsOptions,
   ExtractDefaultPropTypes,
-  ComponentPropsOptions
+  ExtractPropTypes,
 } from './componentProps'
-import { EmitsOptions, EmitsToProps } from './componentEmits'
-import { Directive } from './directives'
+import type {
+  EmitsOptions,
+  EmitsToProps,
+  TypeEmitsToOptions,
+} from './componentEmits'
+import type { Directive } from './directives'
 import {
-  CreateComponentPublicInstance,
-  ComponentPublicInstance,
+  type ComponentPublicInstance,
+  type CreateComponentPublicInstanceWithMixins,
+  type IntersectionMixin,
+  type UnwrapMixinsType,
   isReservedPrefix,
-  IntersectionMixin,
-  UnwrapMixinsType
 } from './componentPublicInstance'
 import { warn } from './warning'
-import { VNodeChild } from './vnode'
+import type { VNodeChild } from './vnode'
 import { callWithAsyncErrorHandling } from './errorHandling'
 import { deepMergeData } from './compat/data'
-import { DeprecationTypes } from './compat/compatConfig'
+import { DeprecationTypes, checkCompatEnabled } from './compat/compatConfig'
 import {
-  CompatConfig,
+  type CompatConfig,
   isCompatEnabled,
-  softAssertCompatEnabled
+  softAssertCompatEnabled,
 } from './compat/compatConfig'
-import { OptionMergeFunction } from './apiCreateApp'
+import type { OptionMergeFunction } from './apiCreateApp'
 import { LifecycleHooks } from './enums'
-import { SlotsType } from './componentSlots'
-import { normalizePropsOrEmits } from './apiSetupHelpers'
+import type { SlotsType } from './componentSlots'
+import {
+  type ComponentTypeEmits,
+  normalizePropsOrEmits,
+} from './apiSetupHelpers'
+import { markAsyncBoundary } from './helpers/useId'
 
 /**
  * Interface for declaring custom options.
  *
  * @example
  * ```ts
- * declare module '@vue/runtime-core' {
+ * declare module 'vue' {
  *   interface ComponentCustomOptions {
  *     beforeRouteUpdate?(
  *       to: Route,
@@ -111,8 +120,12 @@ export interface ComponentOptionsBase<
   Defaults = {},
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  S extends SlotsType = {}
-> extends LegacyOptions<Props, D, C, M, Mixin, Extends, I, II>,
+  S extends SlotsType = {},
+  LC extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
+> extends LegacyOptions<Props, D, C, M, Mixin, Extends, I, II, Provide>,
     ComponentInternalOptions,
     ComponentCustomOptions {
   setup?: (
@@ -126,7 +139,7 @@ export interface ComponentOptionsBase<
           >
         >
     >,
-    ctx: SetupContext<E, S>
+    ctx: SetupContext<E, S>,
   ) => Promise<RawBindings> | RawBindings | RenderFunction | void
   name?: string
   template?: string | object // can be a direct DOM node
@@ -136,13 +149,16 @@ export interface ComponentOptionsBase<
   // Luckily `render()` doesn't need any arguments nor does it care about return
   // type.
   render?: Function
-  components?: Record<string, Component>
-  directives?: Record<string, Directive>
+  // NOTE: extending both LC and Record<string, Component> allows objects to be forced
+  // to be of type Component, while still inferring LC generic
+  components?: LC & Record<string, Component>
+  // NOTE: extending both Directives and Record<string, Directive> allows objects to be forced
+  // to be of type Directive, while still inferring Directives generic
+  directives?: Directives & Record<string, Directive>
   inheritAttrs?: boolean
   emits?: (E | EE[]) & ThisType<void>
   slots?: S
-  // TODO infer public instance type based on exposed keys
-  expose?: string[]
+  expose?: Exposed[]
   serverPrefetch?(): void | Promise<any>
 
   // Runtime compiler only -----------------------------------------------------
@@ -164,7 +180,7 @@ export interface ComponentOptionsBase<
     $props: ComponentInternalInstance['props'],
     $setup: ComponentInternalInstance['setupState'],
     $data: ComponentInternalInstance['data'],
-    $options: ComponentInternalInstance['ctx']
+    $options: ComponentInternalInstance['ctx'],
   ) => void
 
   /**
@@ -184,6 +200,15 @@ export interface ComponentOptionsBase<
    * @internal
    */
   __asyncResolved?: ConcreteComponent
+  /**
+   * Exposed for lazy hydration
+   * @internal
+   */
+  __asyncHydrate?: (
+    el: Element,
+    instance: ComponentInternalInstance,
+    hydrate: () => void,
+  ) => void
 
   // Type differentiators ------------------------------------------------------
 
@@ -211,117 +236,24 @@ export interface RuntimeCompilerOptions {
   delimiters?: [string, string]
 }
 
-export type ComponentOptionsWithoutProps<
+export type ComponentOptions<
   Props = {},
-  RawBindings = {},
-  D = {},
-  C extends ComputedOptions = {},
-  M extends MethodOptions = {},
-  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
-  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = EmitsOptions,
+  RawBindings = any,
+  D = any,
+  C extends ComputedOptions = any,
+  M extends MethodOptions = any,
+  Mixin extends ComponentOptionsMixin = any,
+  Extends extends ComponentOptionsMixin = any,
+  E extends EmitsOptions = any,
   EE extends string = string,
+  Defaults = {},
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  PE = Props & EmitsToProps<E>
-> = ComponentOptionsBase<
-  PE,
-  RawBindings,
-  D,
-  C,
-  M,
-  Mixin,
-  Extends,
-  E,
-  EE,
-  {},
-  I,
-  II,
-  S
-> & {
-  props?: undefined
-} & ThisType<
-    CreateComponentPublicInstance<
-      PE,
-      RawBindings,
-      D,
-      C,
-      M,
-      Mixin,
-      Extends,
-      E,
-      PE,
-      {},
-      false,
-      I,
-      S
-    >
-  >
-
-export type ComponentOptionsWithArrayProps<
-  PropNames extends string = string,
-  RawBindings = {},
-  D = {},
-  C extends ComputedOptions = {},
-  M extends MethodOptions = {},
-  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
-  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = EmitsOptions,
-  EE extends string = string,
-  I extends ComponentInjectOptions = {},
-  II extends string = string,
-  S extends SlotsType = {},
-  Props = Prettify<Readonly<{ [key in PropNames]?: any } & EmitsToProps<E>>>
-> = ComponentOptionsBase<
-  Props,
-  RawBindings,
-  D,
-  C,
-  M,
-  Mixin,
-  Extends,
-  E,
-  EE,
-  {},
-  I,
-  II,
-  S
-> & {
-  props: PropNames[]
-} & ThisType<
-    CreateComponentPublicInstance<
-      Props,
-      RawBindings,
-      D,
-      C,
-      M,
-      Mixin,
-      Extends,
-      E,
-      Props,
-      {},
-      false,
-      I,
-      S
-    >
-  >
-
-export type ComponentOptionsWithObjectProps<
-  PropsOptions = ComponentObjectPropsOptions,
-  RawBindings = {},
-  D = {},
-  C extends ComputedOptions = {},
-  M extends MethodOptions = {},
-  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
-  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = EmitsOptions,
-  EE extends string = string,
-  I extends ComponentInjectOptions = {},
-  II extends string = string,
-  S extends SlotsType = {},
-  Props = Prettify<Readonly<ExtractPropTypes<PropsOptions> & EmitsToProps<E>>>,
-  Defaults = ExtractDefaultPropTypes<PropsOptions>
+  LC extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
 > = ComponentOptionsBase<
   Props,
   RawBindings,
@@ -335,51 +267,14 @@ export type ComponentOptionsWithObjectProps<
   Defaults,
   I,
   II,
-  S
-> & {
-  props: PropsOptions & ThisType<void>
-} & ThisType<
-    CreateComponentPublicInstance<
-      Props,
-      RawBindings,
-      D,
-      C,
-      M,
-      Mixin,
-      Extends,
-      E,
-      Props,
-      Defaults,
-      false,
-      I,
-      S
-    >
-  >
-
-export type ComponentOptions<
-  Props = {},
-  RawBindings = any,
-  D = any,
-  C extends ComputedOptions = any,
-  M extends MethodOptions = any,
-  Mixin extends ComponentOptionsMixin = any,
-  Extends extends ComponentOptionsMixin = any,
-  E extends EmitsOptions = any,
-  S extends SlotsType = any
-> = ComponentOptionsBase<
-  Props,
-  RawBindings,
-  D,
-  C,
-  M,
-  Mixin,
-  Extends,
-  E,
-  string,
-  S
+  S,
+  LC,
+  Directives,
+  Exposed,
+  Provide
 > &
   ThisType<
-    CreateComponentPublicInstance<
+    CreateComponentPublicInstanceWithMixins<
       {},
       RawBindings,
       D,
@@ -388,7 +283,13 @@ export type ComponentOptions<
       Mixin,
       Extends,
       E,
-      Readonly<Props>
+      Readonly<Props>,
+      Defaults,
+      false,
+      I,
+      S,
+      LC,
+      Directives
     >
   >
 
@@ -403,6 +304,12 @@ export type ComponentOptionsMixin = ComponentOptionsBase<
   any,
   any,
   any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
   any
 >
 
@@ -463,7 +370,8 @@ interface LegacyOptions<
   Mixin extends ComponentOptionsMixin,
   Extends extends ComponentOptionsMixin,
   I extends ComponentInjectOptions,
-  II extends string
+  II extends string,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
 > {
   compatConfig?: CompatConfig
 
@@ -475,7 +383,7 @@ interface LegacyOptions<
   // since that leads to some sort of circular inference and breaks ThisType
   // for the entire component.
   data?: (
-    this: CreateComponentPublicInstance<
+    this: CreateComponentPublicInstanceWithMixins<
       Props,
       {},
       {},
@@ -484,7 +392,7 @@ interface LegacyOptions<
       Mixin,
       Extends
     >,
-    vm: CreateComponentPublicInstance<
+    vm: CreateComponentPublicInstanceWithMixins<
       Props,
       {},
       {},
@@ -492,12 +400,12 @@ interface LegacyOptions<
       MethodOptions,
       Mixin,
       Extends
-    >
+    >,
   ) => D
   computed?: C
   methods?: M
   watch?: ComponentWatchOptions
-  provide?: ComponentProvideOptions
+  provide?: Provide
   inject?: I | II[]
 
   // assets
@@ -576,7 +484,7 @@ export type OptionTypesType<
   D = {},
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
-  Defaults = {}
+  Defaults = {},
 > = {
   P: P
   B: B
@@ -586,12 +494,12 @@ export type OptionTypesType<
   Defaults: Defaults
 }
 
-const enum OptionTypes {
+enum OptionTypes {
   PROPS = 'Props',
   DATA = 'Data',
   COMPUTED = 'Computed',
   METHODS = 'Methods',
-  INJECT = 'Inject'
+  INJECT = 'Inject',
 }
 
 function createDuplicateChecker() {
@@ -607,7 +515,7 @@ function createDuplicateChecker() {
 
 export let shouldCacheAccess = true
 
-export function applyOptions(instance: ComponentInternalInstance) {
+export function applyOptions(instance: ComponentInternalInstance): void {
   const options = resolveMergedOptions(instance)
   const publicThis = instance.proxy! as any
   const ctx = instance.ctx
@@ -652,7 +560,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
     // assets
     components,
     directives,
-    filters
+    filters,
   } = options
 
   const checkDuplicateProperties = __DEV__ ? createDuplicateChecker() : null
@@ -690,7 +598,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
             value: methodHandler.bind(publicThis),
             configurable: true,
             enumerable: true,
-            writable: true
+            writable: true,
           })
         } else {
           ctx[key] = methodHandler.bind(publicThis)
@@ -701,7 +609,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
       } else if (__DEV__) {
         warn(
           `Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +
-            `Did you reference the function correctly?`
+            `Did you reference the function correctly?`,
         )
       }
     }
@@ -711,7 +619,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
     if (__DEV__ && !isFunction(dataOptions)) {
       warn(
         `The data option must be a function. ` +
-          `Plain object usage is no longer supported.`
+          `Plain object usage is no longer supported.`,
       )
     }
     const data = dataOptions.call(publicThis, publicThis)
@@ -719,7 +627,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
       warn(
         `data() returned a Promise - note data() cannot be async; If you ` +
           `intend to perform data fetching before component renders, use ` +
-          `async setup() + <Suspense>.`
+          `async setup() + <Suspense>.`,
       )
     }
     if (!isObject(data)) {
@@ -735,7 +643,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
               configurable: true,
               enumerable: true,
               get: () => data[key],
-              set: NOOP
+              set: NOOP,
             })
           }
         }
@@ -763,19 +671,19 @@ export function applyOptions(instance: ComponentInternalInstance) {
           : __DEV__
             ? () => {
                 warn(
-                  `Write operation failed: computed property "${key}" is readonly.`
+                  `Write operation failed: computed property "${key}" is readonly.`,
                 )
               }
             : NOOP
       const c = computed({
         get,
-        set
+        set,
       })
       Object.defineProperty(ctx, key, {
         enumerable: true,
         configurable: true,
         get: () => c.value,
-        set: v => (c.value = v)
+        set: v => (c.value = v),
       })
       if (__DEV__) {
         checkDuplicateProperties!(OptionTypes.COMPUTED, key)
@@ -804,7 +712,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
 
   function registerLifecycleHook(
     register: Function,
-    hook?: Function | Function[]
+    hook?: Function | Function[],
   ) {
     if (isArray(hook)) {
       hook.forEach(_hook => register(_hook.bind(publicThis)))
@@ -847,7 +755,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
       expose.forEach(key => {
         Object.defineProperty(exposed, key, {
           get: () => publicThis[key],
-          set: val => (publicThis[key] = val)
+          set: val => (publicThis[key] = val),
         })
       })
     } else if (!instance.exposed) {
@@ -874,13 +782,17 @@ export function applyOptions(instance: ComponentInternalInstance) {
   ) {
     instance.filters = filters
   }
+
+  if (__SSR__ && serverPrefetch) {
+    markAsyncBoundary(instance)
+  }
 }
 
 export function resolveInjections(
   injectOptions: ComponentInjectOptions,
   ctx: any,
-  checkDuplicateProperties = NOOP as any
-) {
+  checkDuplicateProperties = NOOP as any,
+): void {
   if (isArray(injectOptions)) {
     injectOptions = normalizeInject(injectOptions)!
   }
@@ -892,7 +804,7 @@ export function resolveInjections(
         injected = inject(
           opt.from || key,
           opt.default,
-          true /* treat default function as factory */
+          true /* treat default function as factory */,
         )
       } else {
         injected = inject(opt.from || key)
@@ -906,7 +818,7 @@ export function resolveInjections(
         enumerable: true,
         configurable: true,
         get: () => (injected as Ref).value,
-        set: v => ((injected as Ref).value = v)
+        set: v => ((injected as Ref).value = v),
       })
     } else {
       ctx[key] = injected
@@ -920,14 +832,14 @@ export function resolveInjections(
 function callHook(
   hook: Function,
   instance: ComponentInternalInstance,
-  type: LifecycleHooks
+  type: LifecycleHooks,
 ) {
   callWithAsyncErrorHandling(
     isArray(hook)
       ? hook.map(h => h.bind(instance.proxy!))
       : hook.bind(instance.proxy!),
     instance,
-    type
+    type,
   )
 }
 
@@ -935,20 +847,57 @@ export function createWatcher(
   raw: ComponentWatchOptionItem,
   ctx: Data,
   publicThis: ComponentPublicInstance,
-  key: string
-) {
-  const getter = key.includes('.')
+  key: string,
+): void {
+  let getter = key.includes('.')
     ? createPathGetter(publicThis, key)
     : () => (publicThis as any)[key]
+
+  const options: WatchOptions = {}
+  if (__COMPAT__) {
+    const instance =
+      currentInstance && getCurrentScope() === currentInstance.scope
+        ? currentInstance
+        : null
+
+    const newValue = getter()
+    if (
+      isArray(newValue) &&
+      isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
+    ) {
+      options.deep = true
+    }
+
+    const baseGetter = getter
+    getter = () => {
+      const val = baseGetter()
+      if (
+        isArray(val) &&
+        checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
+      ) {
+        traverse(val)
+      }
+      return val
+    }
+  }
+
   if (isString(raw)) {
     const handler = ctx[raw]
     if (isFunction(handler)) {
-      watch(getter, handler as WatchCallback)
+      if (__COMPAT__) {
+        watch(getter, handler as WatchCallback, options)
+      } else {
+        watch(getter, handler as WatchCallback)
+      }
     } else if (__DEV__) {
       warn(`Invalid watch handler specified by key "${raw}"`, handler)
     }
   } else if (isFunction(raw)) {
-    watch(getter, raw.bind(publicThis))
+    if (__COMPAT__) {
+      watch(getter, raw.bind(publicThis), options)
+    } else {
+      watch(getter, raw.bind(publicThis))
+    }
   } else if (isObject(raw)) {
     if (isArray(raw)) {
       raw.forEach(r => createWatcher(r, ctx, publicThis, key))
@@ -957,7 +906,7 @@ export function createWatcher(
         ? raw.handler.bind(publicThis)
         : (ctx[raw.handler] as WatchCallback)
       if (isFunction(handler)) {
-        watch(getter, handler, raw)
+        watch(getter, handler, __COMPAT__ ? extend(raw, options) : raw)
       } else if (__DEV__) {
         warn(`Invalid watch handler specified by key "${raw.handler}"`, handler)
       }
@@ -973,14 +922,14 @@ export function createWatcher(
  * instances.
  */
 export function resolveMergedOptions(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): MergedComponentOptions {
   const base = instance.type as ComponentOptions
   const { mixins, extends: extendsOptions } = base
   const {
     mixins: globalMixins,
     optionsCache: cache,
-    config: { optionMergeStrategies }
+    config: { optionMergeStrategies },
   } = instance.appContext
   const cached = cache.get(base)
 
@@ -1003,7 +952,7 @@ export function resolveMergedOptions(
     resolved = {}
     if (globalMixins.length) {
       globalMixins.forEach(m =>
-        mergeOptions(resolved, m, optionMergeStrategies, true)
+        mergeOptions(resolved, m, optionMergeStrategies, true),
       )
     }
     mergeOptions(resolved, base, optionMergeStrategies)
@@ -1018,8 +967,8 @@ export function mergeOptions(
   to: any,
   from: any,
   strats: Record<string, OptionMergeFunction>,
-  asMixin = false
-) {
+  asMixin = false,
+): any {
   if (__COMPAT__ && isFunction(from)) {
     from = from.options
   }
@@ -1031,7 +980,7 @@ export function mergeOptions(
   }
   if (mixins) {
     mixins.forEach((m: ComponentOptionsMixin) =>
-      mergeOptions(to, m, strats, true)
+      mergeOptions(to, m, strats, true),
     )
   }
 
@@ -1040,7 +989,7 @@ export function mergeOptions(
       __DEV__ &&
         warn(
           `"expose" option is ignored when declared in mixins or extends. ` +
-            `It should only be declared in the base component itself.`
+            `It should only be declared in the base component itself.`,
         )
     } else {
       const strat = internalOptionMergeStrats[key] || (strats && strats[key])
@@ -1079,7 +1028,7 @@ export const internalOptionMergeStrats: Record<string, Function> = {
   watch: mergeWatchOptions,
   // provide / inject
   provide: mergeDataFn,
-  inject: mergeInject
+  inject: mergeInject,
 }
 
 if (__COMPAT__) {
@@ -1100,20 +1049,20 @@ function mergeDataFn(to: any, from: any) {
         : extend
     )(
       isFunction(to) ? to.call(this, this) : to,
-      isFunction(from) ? from.call(this, this) : from
+      isFunction(from) ? from.call(this, this) : from,
     )
   }
 }
 
 function mergeInject(
   to: ComponentInjectOptions | undefined,
-  from: ComponentInjectOptions
+  from: ComponentInjectOptions,
 ) {
   return mergeObjectOptions(normalizeInject(to), normalizeInject(from))
 }
 
 function normalizeInject(
-  raw: ComponentInjectOptions | undefined
+  raw: ComponentInjectOptions | undefined,
 ): ObjectInjectOptions | undefined {
   if (isArray(raw)) {
     const res: ObjectInjectOptions = {}
@@ -1135,15 +1084,15 @@ function mergeObjectOptions(to: Object | undefined, from: Object | undefined) {
 
 function mergeEmitsOrPropsOptions(
   to: EmitsOptions | undefined,
-  from: EmitsOptions | undefined
+  from: EmitsOptions | undefined,
 ): EmitsOptions | undefined
 function mergeEmitsOrPropsOptions(
   to: ComponentPropsOptions | undefined,
-  from: ComponentPropsOptions | undefined
+  from: ComponentPropsOptions | undefined,
 ): ComponentPropsOptions | undefined
 function mergeEmitsOrPropsOptions(
   to: ComponentPropsOptions | EmitsOptions | undefined,
-  from: ComponentPropsOptions | EmitsOptions | undefined
+  from: ComponentPropsOptions | EmitsOptions | undefined,
 ) {
   if (to) {
     if (isArray(to) && isArray(from)) {
@@ -1152,7 +1101,7 @@ function mergeEmitsOrPropsOptions(
     return extend(
       Object.create(null),
       normalizePropsOrEmits(to),
-      normalizePropsOrEmits(from ?? {})
+      normalizePropsOrEmits(from ?? {}),
     )
   } else {
     return from
@@ -1161,7 +1110,7 @@ function mergeEmitsOrPropsOptions(
 
 function mergeWatchOptions(
   to: ComponentWatchOptions | undefined,
-  from: ComponentWatchOptions | undefined
+  from: ComponentWatchOptions | undefined,
 ) {
   if (!to) return from
   if (!from) return to
@@ -1171,3 +1120,205 @@ function mergeWatchOptions(
   }
   return merged
 }
+
+// Deprecated legacy types, kept because they were previously exported ---------
+
+/**
+ * @deprecated
+ */
+export type ComponentOptionsWithoutProps<
+  Props = {},
+  RawBindings = {},
+  D = {},
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+  E extends EmitsOptions = {},
+  EE extends string = string,
+  I extends ComponentInjectOptions = {},
+  II extends string = string,
+  S extends SlotsType = {},
+  LC extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
+  TE extends ComponentTypeEmits = {},
+  ResolvedEmits extends EmitsOptions = {} extends E
+    ? TypeEmitsToOptions<TE>
+    : E,
+  PE = Props & EmitsToProps<ResolvedEmits>,
+> = ComponentOptionsBase<
+  PE,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE,
+  {},
+  I,
+  II,
+  S,
+  LC,
+  Directives,
+  Exposed,
+  Provide
+> & {
+  props?: never
+  /**
+   * @private for language-tools use only
+   */
+  __typeProps?: Props
+  /**
+   * @private for language-tools use only
+   */
+  __typeEmits?: TE
+} & ThisType<
+    CreateComponentPublicInstanceWithMixins<
+      PE,
+      RawBindings,
+      D,
+      C,
+      M,
+      Mixin,
+      Extends,
+      ResolvedEmits,
+      EE,
+      {},
+      false,
+      I,
+      S,
+      LC,
+      Directives,
+      Exposed
+    >
+  >
+
+/**
+ * @deprecated
+ */
+export type ComponentOptionsWithArrayProps<
+  PropNames extends string = string,
+  RawBindings = {},
+  D = {},
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+  E extends EmitsOptions = EmitsOptions,
+  EE extends string = string,
+  I extends ComponentInjectOptions = {},
+  II extends string = string,
+  S extends SlotsType = {},
+  LC extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
+  Props = Prettify<Readonly<{ [key in PropNames]?: any } & EmitsToProps<E>>>,
+> = ComponentOptionsBase<
+  Props,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE,
+  {},
+  I,
+  II,
+  S,
+  LC,
+  Directives,
+  Exposed,
+  Provide
+> & {
+  props: PropNames[]
+} & ThisType<
+    CreateComponentPublicInstanceWithMixins<
+      Props,
+      RawBindings,
+      D,
+      C,
+      M,
+      Mixin,
+      Extends,
+      E,
+      Props,
+      {},
+      false,
+      I,
+      S,
+      LC,
+      Directives,
+      Exposed
+    >
+  >
+
+/**
+ * @deprecated
+ */
+export type ComponentOptionsWithObjectProps<
+  PropsOptions = ComponentObjectPropsOptions,
+  RawBindings = {},
+  D = {},
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+  E extends EmitsOptions = EmitsOptions,
+  EE extends string = string,
+  I extends ComponentInjectOptions = {},
+  II extends string = string,
+  S extends SlotsType = {},
+  LC extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
+  Props = Prettify<
+    Readonly<ExtractPropTypes<PropsOptions>> & Readonly<EmitsToProps<E>>
+  >,
+  Defaults = ExtractDefaultPropTypes<PropsOptions>,
+> = ComponentOptionsBase<
+  Props,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE,
+  Defaults,
+  I,
+  II,
+  S,
+  LC,
+  Directives,
+  Exposed,
+  Provide
+> & {
+  props: PropsOptions & ThisType<void>
+} & ThisType<
+    CreateComponentPublicInstanceWithMixins<
+      Props,
+      RawBindings,
+      D,
+      C,
+      M,
+      Mixin,
+      Extends,
+      E,
+      Props,
+      Defaults,
+      false,
+      I,
+      S,
+      LC,
+      Directives
+    >
+  >
diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts
index b8e9bf66d..e07fb4767 100644
--- a/packages/runtime-core/src/componentProps.ts
+++ b/packages/runtime-core/src/componentProps.ts
@@ -1,45 +1,44 @@
 import {
-  toRaw,
+  TriggerOpTypes,
   shallowReactive,
+  shallowReadonly,
+  toRaw,
   trigger,
-  TriggerOpTypes
 } from '@vue/reactivity'
 import {
-  EMPTY_OBJ,
-  camelize,
-  hyphenate,
-  capitalize,
-  isString,
-  isFunction,
-  isArray,
-  isObject,
-  hasOwn,
-  toRawType,
-  PatchFlags,
-  makeMap,
-  isReservedProp,
   EMPTY_ARR,
-  def,
+  EMPTY_OBJ,
+  type IfAny,
+  PatchFlags,
+  camelize,
+  capitalize,
   extend,
+  hasOwn,
+  hyphenate,
+  isArray,
+  isFunction,
+  isObject,
   isOn,
-  IfAny
+  isReservedProp,
+  isString,
+  makeMap,
+  toRawType,
 } from '@vue/shared'
 import { warn } from './warning'
 import {
-  Data,
-  ComponentInternalInstance,
-  ComponentOptions,
-  ConcreteComponent,
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ConcreteComponent,
+  type Data,
   setCurrentInstance,
-  unsetCurrentInstance
 } from './component'
 import { isEmitListener } from './componentEmits'
-import { InternalObjectKey } from './vnode'
-import { AppContext } from './apiCreateApp'
+import type { AppContext } from './apiCreateApp'
 import { createPropsDefaultThis } from './compat/props'
 import { isCompatEnabled, softAssertCompatEnabled } from './compat/compatConfig'
 import { DeprecationTypes } from './compat/compatConfig'
 import { shouldSkipAttr } from './compat/attrsFallthrough'
+import { createInternalObject } from './internalObject'
 
 export type ComponentPropsOptions<P = Data> =
   | ComponentObjectPropsOptions<P>
@@ -57,7 +56,7 @@ export interface PropOptions<T = any, D = T> {
   type?: PropType<T> | true | null
   required?: boolean
   default?: D | DefaultFactory<D> | null | undefined | object
-  validator?(value: unknown): boolean
+  validator?(value: unknown, props: Data): boolean
   /**
    * @internal
    */
@@ -68,7 +67,7 @@ export interface PropOptions<T = any, D = T> {
   skipFactory?: boolean
 }
 
-export type PropType<T> = PropConstructor<T> | PropConstructor<T>[]
+export type PropType<T> = PropConstructor<T> | (PropConstructor<T> | null)[]
 
 type PropConstructor<T = any> =
   | { new (...args: any[]): T & {} }
@@ -76,7 +75,7 @@ type PropConstructor<T = any> =
   | PropMethod<T>
 
 type PropMethod<T, TConstructor = any> = [T] extends [
-  ((...args: any) => any) | undefined
+  ((...args: any) => any) | undefined,
 ] // if is function with args, allowing non-required functions
   ? { new (): TConstructor; (): T; readonly prototype: TConstructor } // Create Function like constructor
   : never
@@ -108,8 +107,10 @@ type DefaultKeys<T> = {
     : never
 }[keyof T]
 
-type InferPropType<T> = [T] extends [null]
-  ? any // null & true would fail to infer
+type InferPropType<T, NullAsAny = true> = [T] extends [null]
+  ? NullAsAny extends true
+    ? any
+    : null
   : [T] extends [{ type: null | true }]
     ? any // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean`
     : [T] extends [ObjectConstructor | { type: ObjectConstructor }]
@@ -120,11 +121,13 @@ type InferPropType<T> = [T] extends [null]
           ? Date
           : [T] extends [(infer U)[] | { type: (infer U)[] }]
             ? U extends DateConstructor
-              ? Date | InferPropType<U>
-              : InferPropType<U>
+              ? Date | InferPropType<U, false>
+              : InferPropType<U, false>
             : [T] extends [Prop<infer V, infer D>]
               ? unknown extends V
-                ? IfAny<V, V, D>
+                ? keyof V extends never
+                  ? IfAny<V, V, D>
+                  : V
                 : V
               : T
 
@@ -164,9 +167,9 @@ export type ExtractPublicPropTypes<O> = {
   [K in keyof Pick<O, PublicOptionalKeys<O>>]?: InferPropType<O[K]>
 }
 
-const enum BooleanFlags {
+enum BooleanFlags {
   shouldCast,
-  shouldCastTrue
+  shouldCastTrue,
 }
 
 // extract props which defined with default from prop options
@@ -175,12 +178,10 @@ export type ExtractDefaultPropTypes<O> = O extends object
     { [K in keyof Pick<O, DefaultKeys<O>>]: InferPropType<O[K]> }
   : {}
 
-type NormalizedProp =
-  | null
-  | (PropOptions & {
-      [BooleanFlags.shouldCast]?: boolean
-      [BooleanFlags.shouldCastTrue]?: boolean
-    })
+type NormalizedProp = PropOptions & {
+  [BooleanFlags.shouldCast]?: boolean
+  [BooleanFlags.shouldCastTrue]?: boolean
+}
 
 // normalized value is a tuple of the actual normalized options
 // and an array of prop keys that need value casting (booleans and defaults)
@@ -191,11 +192,10 @@ export function initProps(
   instance: ComponentInternalInstance,
   rawProps: Data | null,
   isStateful: number, // result of bitwise flag comparison
-  isSSR = false
-) {
+  isSSR = false,
+): void {
   const props: Data = {}
-  const attrs: Data = {}
-  def(attrs, InternalObjectKey, 1)
+  const attrs: Data = createInternalObject()
 
   instance.propsDefaults = Object.create(null)
 
@@ -239,12 +239,12 @@ export function updateProps(
   instance: ComponentInternalInstance,
   rawProps: Data | null,
   rawPrevProps: Data | null,
-  optimized: boolean
-) {
+  optimized: boolean,
+): void {
   const {
     props,
     attrs,
-    vnode: { patchFlag }
+    vnode: { patchFlag },
   } = instance
   const rawCurrentProps = toRaw(props)
   const [options] = instance.propsOptions
@@ -286,7 +286,7 @@ export function updateProps(
               camelizedKey,
               value,
               instance,
-              false /* isAbsent */
+              false /* isAbsent */,
             )
           }
         } else {
@@ -335,7 +335,7 @@ export function updateProps(
               key,
               undefined,
               instance,
-              true /* isAbsent */
+              true /* isAbsent */,
             )
           }
         } else {
@@ -361,7 +361,7 @@ export function updateProps(
 
   // trigger updates for $attrs in case it's used in component slots
   if (hasAttrsChanged) {
-    trigger(instance, TriggerOpTypes.SET, '$attrs')
+    trigger(instance.attrs, TriggerOpTypes.SET, '')
   }
 
   if (__DEV__) {
@@ -373,7 +373,7 @@ function setFullProps(
   instance: ComponentInternalInstance,
   rawProps: Data | null,
   props: Data,
-  attrs: Data
+  attrs: Data,
 ) {
   const [options, needCastKeys] = instance.propsOptions
   let hasAttrsChanged = false
@@ -390,7 +390,7 @@ function setFullProps(
           softAssertCompatEnabled(
             DeprecationTypes.INSTANCE_EVENT_HOOKS,
             instance,
-            key.slice(2).toLowerCase()
+            key.slice(2).toLowerCase(),
           )
         }
         if (key === 'inline-template') {
@@ -438,7 +438,7 @@ function setFullProps(
         key,
         castValues[key],
         instance,
-        !hasOwn(castValues, key)
+        !hasOwn(castValues, key),
       )
     }
   }
@@ -452,7 +452,7 @@ function resolvePropValue(
   key: string,
   value: unknown,
   instance: ComponentInternalInstance,
-  isAbsent: boolean
+  isAbsent: boolean,
 ) {
   const opt = options[key]
   if (opt != null) {
@@ -469,19 +469,23 @@ function resolvePropValue(
         if (key in propsDefaults) {
           value = propsDefaults[key]
         } else {
-          setCurrentInstance(instance)
+          const reset = setCurrentInstance(instance)
           value = propsDefaults[key] = defaultValue.call(
             __COMPAT__ &&
               isCompatEnabled(DeprecationTypes.PROPS_DEFAULT_THIS, instance)
               ? createPropsDefaultThis(instance, props, key)
               : null,
-            props
+            props,
           )
-          unsetCurrentInstance()
+          reset()
         }
       } else {
         value = defaultValue
       }
+      // #9006 reflect default value on custom element
+      if (instance.ce) {
+        instance.ce._setProp(key, value)
+      }
     }
     // boolean casting
     if (opt[BooleanFlags.shouldCast]) {
@@ -498,12 +502,15 @@ function resolvePropValue(
   return value
 }
 
+const mixinPropsCache = new WeakMap<ConcreteComponent, NormalizedPropsOptions>()
+
 export function normalizePropsOptions(
   comp: ConcreteComponent,
   appContext: AppContext,
-  asMixin = false
+  asMixin = false,
 ): NormalizedPropsOptions {
-  const cache = appContext.propsCache
+  const cache =
+    __FEATURE_OPTIONS_API__ && asMixin ? mixinPropsCache : appContext.propsCache
   const cached = cache.get(comp)
   if (cached) {
     return cached
@@ -563,16 +570,36 @@ export function normalizePropsOptions(
         const opt = raw[key]
         const prop: NormalizedProp = (normalized[normalizedKey] =
           isArray(opt) || isFunction(opt) ? { type: opt } : extend({}, opt))
-        if (prop) {
-          const booleanIndex = getTypeIndex(Boolean, prop.type)
-          const stringIndex = getTypeIndex(String, prop.type)
-          prop[BooleanFlags.shouldCast] = booleanIndex > -1
-          prop[BooleanFlags.shouldCastTrue] =
-            stringIndex < 0 || booleanIndex < stringIndex
-          // if the prop needs boolean casting or default value
-          if (booleanIndex > -1 || hasOwn(prop, 'default')) {
-            needCastKeys.push(normalizedKey)
+        const propType = prop.type
+        let shouldCast = false
+        let shouldCastTrue = true
+
+        if (isArray(propType)) {
+          for (let index = 0; index < propType.length; ++index) {
+            const type = propType[index]
+            const typeName = isFunction(type) && type.name
+
+            if (typeName === 'Boolean') {
+              shouldCast = true
+              break
+            } else if (typeName === 'String') {
+              // If we find `String` before `Boolean`, e.g. `[String, Boolean]`,
+              // we need to handle the casting slightly differently. Props
+              // passed as `<Comp checked="">` or `<Comp checked="checked">`
+              // will either be treated as strings or converted to a boolean
+              // `true`, depending on the order of the types.
+              shouldCastTrue = false
+            }
           }
+        } else {
+          shouldCast = isFunction(propType) && propType.name === 'Boolean'
+        }
+
+        prop[BooleanFlags.shouldCast] = shouldCast
+        prop[BooleanFlags.shouldCastTrue] = shouldCastTrue
+        // if the prop needs boolean casting or default value
+        if (shouldCast || hasOwn(prop, 'default')) {
+          needCastKeys.push(normalizedKey)
         }
       }
     }
@@ -586,7 +613,7 @@ export function normalizePropsOptions(
 }
 
 function validatePropName(key: string) {
-  if (key[0] !== '$') {
+  if (key[0] !== '$' && !isReservedProp(key)) {
     return true
   } else if (__DEV__) {
     warn(`Invalid prop name: "${key}" is a reserved property.`)
@@ -594,27 +621,27 @@ function validatePropName(key: string) {
   return false
 }
 
+// dev only
 // use function string name to check type constructors
 // so that it works across vms / iframes.
-function getType(ctor: Prop<any>): string {
-  const match = ctor && ctor.toString().match(/^\s*(function|class) (\w+)/)
-  return match ? match[2] : ctor === null ? 'null' : ''
-}
-
-function isSameType(a: Prop<any>, b: Prop<any>): boolean {
-  return getType(a) === getType(b)
-}
-
-function getTypeIndex(
-  type: Prop<any>,
-  expectedTypes: PropType<any> | void | null | true
-): number {
-  if (isArray(expectedTypes)) {
-    return expectedTypes.findIndex(t => isSameType(t, type))
-  } else if (isFunction(expectedTypes)) {
-    return isSameType(expectedTypes, type) ? 0 : -1
+function getType(ctor: Prop<any> | null): string {
+  // Early return for null to avoid unnecessary computations
+  if (ctor === null) {
+    return 'null'
   }
-  return -1
+
+  // Avoid using regex for common cases by checking the type directly
+  if (typeof ctor === 'function') {
+    // Using name property to avoid converting function to string
+    return ctor.name || ''
+  } else if (typeof ctor === 'object') {
+    // Attempting to directly access constructor name if possible
+    const name = ctor.constructor && ctor.constructor.name
+    return name || ''
+  }
+
+  // Fallback for other types (though they're less likely to have meaningful names here)
+  return ''
 }
 
 /**
@@ -623,7 +650,7 @@ function getTypeIndex(
 function validateProps(
   rawProps: Data,
   props: Data,
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ) {
   const resolvedValues = toRaw(props)
   const options = instance.propsOptions[0]
@@ -634,7 +661,8 @@ function validateProps(
       key,
       resolvedValues[key],
       opt,
-      !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key))
+      __DEV__ ? shallowReadonly(resolvedValues) : resolvedValues,
+      !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key)),
     )
   }
 }
@@ -646,7 +674,8 @@ function validateProp(
   name: string,
   value: unknown,
   prop: PropOptions,
-  isAbsent: boolean
+  props: Data,
+  isAbsent: boolean,
 ) {
   const { type, required, validator, skipCheck } = prop
   // required!
@@ -675,13 +704,13 @@ function validateProp(
     }
   }
   // custom validator
-  if (validator && !validator(value)) {
+  if (validator && !validator(value, props)) {
     warn('Invalid prop: custom validator check failed for prop "' + name + '".')
   }
 }
 
-const isSimpleType = /*#__PURE__*/ makeMap(
-  'String,Number,Boolean,Function,Symbol,BigInt'
+const isSimpleType = /*@__PURE__*/ makeMap(
+  'String,Number,Boolean,Function,Symbol,BigInt',
 )
 
 type AssertionResult = {
@@ -692,28 +721,31 @@ type AssertionResult = {
 /**
  * dev only
  */
-function assertType(value: unknown, type: PropConstructor): AssertionResult {
+function assertType(
+  value: unknown,
+  type: PropConstructor | null,
+): AssertionResult {
   let valid
   const expectedType = getType(type)
-  if (isSimpleType(expectedType)) {
+  if (expectedType === 'null') {
+    valid = value === null
+  } else if (isSimpleType(expectedType)) {
     const t = typeof value
     valid = t === expectedType.toLowerCase()
     // for primitive wrapper objects
     if (!valid && t === 'object') {
-      valid = value instanceof type
+      valid = value instanceof (type as PropConstructor)
     }
   } else if (expectedType === 'Object') {
     valid = isObject(value)
   } else if (expectedType === 'Array') {
     valid = isArray(value)
-  } else if (expectedType === 'null') {
-    valid = value === null
   } else {
-    valid = value instanceof type
+    valid = value instanceof (type as PropConstructor)
   }
   return {
     valid,
-    expectedType
+    expectedType,
   }
 }
 
@@ -723,7 +755,7 @@ function assertType(value: unknown, type: PropConstructor): AssertionResult {
 function getInvalidTypeMessage(
   name: string,
   value: unknown,
-  expectedTypes: string[]
+  expectedTypes: string[],
 ): string {
   if (expectedTypes.length === 0) {
     return (
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index 6ef0c1b9f..e9e7770eb 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -1,51 +1,60 @@
 import {
-  ComponentInternalInstance,
-  Data,
-  getExposeProxy,
-  isStatefulComponent
+  type Component,
+  type ComponentInternalInstance,
+  type Data,
+  getComponentPublicInstance,
+  isStatefulComponent,
 } from './component'
 import { nextTick, queueJob } from './scheduler'
-import { instanceWatch, WatchOptions, WatchStopHandle } from './apiWatch'
+import {
+  type OnCleanup,
+  type WatchOptions,
+  type WatchStopHandle,
+  instanceWatch,
+} from './apiWatch'
 import {
   EMPTY_OBJ,
-  hasOwn,
-  isGloballyAllowed,
+  type IfAny,
   NOOP,
+  type Prettify,
+  type UnionToIntersection,
   extend,
-  isString,
+  hasOwn,
   isFunction,
-  UnionToIntersection,
-  Prettify,
-  IfAny
+  isGloballyAllowed,
+  isString,
 } from '@vue/shared'
 import {
-  toRaw,
-  shallowReadonly,
-  track,
+  ReactiveFlags,
+  type ShallowUnwrapRef,
   TrackOpTypes,
-  ShallowUnwrapRef,
-  UnwrapNestedRefs
+  type UnwrapNestedRefs,
+  shallowReadonly,
+  toRaw,
+  track,
 } from '@vue/reactivity'
 import {
-  ExtractComputedReturns,
-  ComponentOptionsBase,
-  ComputedOptions,
-  MethodOptions,
-  ComponentOptionsMixin,
-  OptionTypesType,
-  OptionTypesKeys,
+  type ComponentInjectOptions,
+  type ComponentOptionsBase,
+  type ComponentOptionsMixin,
+  type ComponentProvideOptions,
+  type ComputedOptions,
+  type ExtractComputedReturns,
+  type InjectToObject,
+  type MergedComponentOptionsOverride,
+  type MethodOptions,
+  type OptionTypesKeys,
+  type OptionTypesType,
   resolveMergedOptions,
   shouldCacheAccess,
-  MergedComponentOptionsOverride,
-  InjectToObject,
-  ComponentInjectOptions
 } from './componentOptions'
-import { EmitsOptions, EmitFn } from './componentEmits'
-import { SlotsType, UnwrapSlotsType } from './componentSlots'
+import type { EmitFn, EmitsOptions } from './componentEmits'
+import type { SlotsType, UnwrapSlotsType } from './componentSlots'
 import { markAttrsAccessed } from './componentRenderUtils'
 import { currentRenderingInstance } from './componentRenderContext'
 import { warn } from './warning'
 import { installCompatInstanceProperties } from './compat/instance'
+import type { Directive } from './directives'
 
 /**
  * Custom properties added to component instances in any way and can be accessed through `this`
@@ -56,7 +65,7 @@ import { installCompatInstanceProperties } from './compat/instance'
  * import { createApp } from 'vue'
  * import { Router, createRouter } from 'vue-router'
  *
- * declare module '@vue/runtime-core' {
+ * declare module 'vue' {
  *   interface ComponentCustomProperties {
  *     $router: Router
  *   }
@@ -80,38 +89,44 @@ type IsDefaultMixinComponent<T> = T extends ComponentOptionsMixin
     : false
   : false
 
-type MixinToOptionTypes<T> = T extends ComponentOptionsBase<
-  infer P,
-  infer B,
-  infer D,
-  infer C,
-  infer M,
-  infer Mixin,
-  infer Extends,
-  any,
-  any,
-  infer Defaults,
-  any,
-  any,
-  any
->
-  ? OptionTypesType<P & {}, B & {}, D & {}, C & {}, M & {}, Defaults & {}> &
-      IntersectionMixin<Mixin> &
-      IntersectionMixin<Extends>
-  : never
+type MixinToOptionTypes<T> =
+  T extends ComponentOptionsBase<
+    infer P,
+    infer B,
+    infer D,
+    infer C,
+    infer M,
+    infer Mixin,
+    infer Extends,
+    any,
+    any,
+    infer Defaults,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any
+  >
+    ? OptionTypesType<P & {}, B & {}, D & {}, C & {}, M & {}, Defaults & {}> &
+        IntersectionMixin<Mixin> &
+        IntersectionMixin<Extends>
+    : never
 
 // ExtractMixin(map type) is used to resolve circularly references
 type ExtractMixin<T> = {
   Mixin: MixinToOptionTypes<T>
 }[T extends ComponentOptionsMixin ? 'Mixin' : never]
 
-export type IntersectionMixin<T> = IsDefaultMixinComponent<T> extends true
-  ? OptionTypesType
-  : UnionToIntersection<ExtractMixin<T>>
+export type IntersectionMixin<T> =
+  IsDefaultMixinComponent<T> extends true
+    ? OptionTypesType
+    : UnionToIntersection<ExtractMixin<T>>
 
 export type UnwrapMixinsType<
   T,
-  Type extends OptionTypesKeys
+  Type extends OptionTypesKeys,
 > = T extends OptionTypesType ? T[Type] : never
 
 type EnsureNonVoid<T> = T extends void ? {} : T
@@ -128,7 +143,7 @@ export type ComponentPublicInstanceConstructor<
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions
+  M extends MethodOptions = MethodOptions,
 > = {
   __isFragment?: never
   __isTeleport?: never
@@ -136,6 +151,10 @@ export type ComponentPublicInstanceConstructor<
   new (...args: any[]): T
 }
 
+/**
+ * @deprecated This is no longer used internally, but exported and relied on by
+ * existing library types generated by vue-tsc.
+ */
 export type CreateComponentPublicInstance<
   P = {},
   B = {},
@@ -159,7 +178,7 @@ export type CreateComponentPublicInstance<
   PublicM extends MethodOptions = UnwrapMixinsType<PublicMixin, 'M'> &
     EnsureNonVoid<M>,
   PublicDefaults = UnwrapMixinsType<PublicMixin, 'Defaults'> &
-    EnsureNonVoid<Defaults>
+    EnsureNonVoid<Defaults>,
 > = ComponentPublicInstance<
   PublicP,
   PublicB,
@@ -188,6 +207,86 @@ export type CreateComponentPublicInstance<
   I,
   S
 >
+
+/**
+ * This is the same as `CreateComponentPublicInstance` but adds local components,
+ * global directives, exposed, and provide inference.
+ * It changes the arguments order so that we don't need to repeat mixin
+ * inference everywhere internally, but it has to be a new type to avoid
+ * breaking types that relies on previous arguments order (#10842)
+ */
+export type CreateComponentPublicInstanceWithMixins<
+  P = {},
+  B = {},
+  D = {},
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+  E extends EmitsOptions = {},
+  PublicProps = P,
+  Defaults = {},
+  MakeDefaultsOptional extends boolean = false,
+  I extends ComponentInjectOptions = {},
+  S extends SlotsType = {},
+  LC extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string,
+  TypeRefs extends Data = {},
+  TypeEl extends Element = any,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
+  // mixin inference
+  PublicMixin = IntersectionMixin<Mixin> & IntersectionMixin<Extends>,
+  PublicP = UnwrapMixinsType<PublicMixin, 'P'> & EnsureNonVoid<P>,
+  PublicB = UnwrapMixinsType<PublicMixin, 'B'> & EnsureNonVoid<B>,
+  PublicD = UnwrapMixinsType<PublicMixin, 'D'> & EnsureNonVoid<D>,
+  PublicC extends ComputedOptions = UnwrapMixinsType<PublicMixin, 'C'> &
+    EnsureNonVoid<C>,
+  PublicM extends MethodOptions = UnwrapMixinsType<PublicMixin, 'M'> &
+    EnsureNonVoid<M>,
+  PublicDefaults = UnwrapMixinsType<PublicMixin, 'Defaults'> &
+    EnsureNonVoid<Defaults>,
+> = ComponentPublicInstance<
+  PublicP,
+  PublicB,
+  PublicD,
+  PublicC,
+  PublicM,
+  E,
+  PublicProps,
+  PublicDefaults,
+  MakeDefaultsOptional,
+  ComponentOptionsBase<
+    P,
+    B,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    E,
+    string,
+    Defaults,
+    {},
+    string,
+    S,
+    LC,
+    Directives,
+    Exposed,
+    Provide
+  >,
+  I,
+  S,
+  Exposed,
+  TypeRefs,
+  TypeEl
+>
+
+export type ExposedKeys<
+  T,
+  Exposed extends string & keyof T,
+> = '' extends Exposed ? T : Pick<T, Exposed>
+
 // public properties exposed on the proxy, which is used as the render context
 // in templates (as `this` in the render option)
 export type ComponentPublicInstance<
@@ -197,12 +296,15 @@ export type ComponentPublicInstance<
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
   E extends EmitsOptions = {},
-  PublicProps = P,
+  PublicProps = {},
   Defaults = {},
   MakeDefaultsOptional extends boolean = false,
   Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>,
   I extends ComponentInjectOptions = {},
-  S extends SlotsType = {}
+  S extends SlotsType = {},
+  Exposed extends string = '',
+  TypeRefs extends Data = {},
+  TypeEl extends Element = any,
 > = {
   $: ComponentInternalInstance
   $data: D
@@ -210,29 +312,37 @@ export type ComponentPublicInstance<
     ? Partial<Defaults> & Omit<Prettify<P> & PublicProps, keyof Defaults>
     : Prettify<P> & PublicProps
   $attrs: Data
-  $refs: Data
+  $refs: Data & TypeRefs
   $slots: UnwrapSlotsType<S>
   $root: ComponentPublicInstance | null
   $parent: ComponentPublicInstance | null
+  $host: Element | null
   $emit: EmitFn<E>
-  $el: any
+  $el: TypeEl
   $options: Options & MergedComponentOptionsOverride
   $forceUpdate: () => void
   $nextTick: typeof nextTick
   $watch<T extends string | ((...args: any) => any)>(
     source: T,
     cb: T extends (...args: any) => infer R
-      ? (...args: [R, R]) => any
-      : (...args: any) => any,
-    options?: WatchOptions
+      ? (...args: [R, R, OnCleanup]) => any
+      : (...args: [any, any, OnCleanup]) => any,
+    options?: WatchOptions,
   ): WatchStopHandle
-} & IfAny<P, P, Omit<P, keyof ShallowUnwrapRef<B>>> &
-  ShallowUnwrapRef<B> &
-  UnwrapNestedRefs<D> &
-  ExtractComputedReturns<C> &
-  M &
-  ComponentCustomProperties &
-  InjectToObject<I>
+} & ExposedKeys<
+  IfAny<
+    P,
+    P,
+    Readonly<Defaults> & Omit<P, keyof ShallowUnwrapRef<B> | keyof Defaults>
+  > &
+    ShallowUnwrapRef<B> &
+    UnwrapNestedRefs<D> &
+    ExtractComputedReturns<C> &
+    M &
+    ComponentCustomProperties &
+    InjectToObject<I>,
+  Exposed
+>
 
 export type PublicPropertiesMap = Record<
   string,
@@ -245,17 +355,17 @@ export type PublicPropertiesMap = Record<
  * public $parent chains, skip functional ones and go to the parent instead.
  */
 const getPublicInstance = (
-  i: ComponentInternalInstance | null
+  i: ComponentInternalInstance | null,
 ): ComponentPublicInstance | ComponentInternalInstance['exposed'] | null => {
   if (!i) return null
-  if (isStatefulComponent(i)) return getExposeProxy(i) || i.proxy
+  if (isStatefulComponent(i)) return getComponentPublicInstance(i)
   return getPublicInstance(i.parent)
 }
 
 export const publicPropertiesMap: PublicPropertiesMap =
   // Move PURE marker to new line to workaround compiler discarding it
   // due to type annotation
-  /*#__PURE__*/ extend(Object.create(null), {
+  /*@__PURE__*/ extend(Object.create(null), {
     $: i => i,
     $el: i => i.vnode.el,
     $data: i => i.data,
@@ -265,23 +375,28 @@ export const publicPropertiesMap: PublicPropertiesMap =
     $refs: i => (__DEV__ ? shallowReadonly(i.refs) : i.refs),
     $parent: i => getPublicInstance(i.parent),
     $root: i => getPublicInstance(i.root),
+    $host: i => i.ce,
     $emit: i => i.emit,
     $options: i => (__FEATURE_OPTIONS_API__ ? resolveMergedOptions(i) : i.type),
-    $forceUpdate: i => i.f || (i.f = () => queueJob(i.update)),
+    $forceUpdate: i =>
+      i.f ||
+      (i.f = () => {
+        queueJob(i.update)
+      }),
     $nextTick: i => i.n || (i.n = nextTick.bind(i.proxy!)),
-    $watch: i => (__FEATURE_OPTIONS_API__ ? instanceWatch.bind(i) : NOOP)
+    $watch: i => (__FEATURE_OPTIONS_API__ ? instanceWatch.bind(i) : NOOP),
   } as PublicPropertiesMap)
 
 if (__COMPAT__) {
   installCompatInstanceProperties(publicPropertiesMap)
 }
 
-const enum AccessTypes {
+enum AccessTypes {
   OTHER,
   SETUP,
   DATA,
   PROPS,
-  CONTEXT
+  CONTEXT,
 }
 
 export interface ComponentRenderContext {
@@ -289,13 +404,18 @@ export interface ComponentRenderContext {
   _: ComponentInternalInstance
 }
 
-export const isReservedPrefix = (key: string) => key === '_' || key === '$'
+export const isReservedPrefix = (key: string): key is '_' | '$' =>
+  key === '_' || key === '$'
 
 const hasSetupBinding = (state: Data, key: string) =>
   state !== EMPTY_OBJ && !state.__isScriptSetup && hasOwn(state, key)
 
 export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
   get({ _: instance }: ComponentRenderContext, key: string) {
+    if (key === ReactiveFlags.SKIP) {
+      return true
+    }
+
     const { ctx, setupState, data, props, accessCache, type, appContext } =
       instance
 
@@ -352,9 +472,10 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
     // public $xxx properties
     if (publicGetter) {
       if (key === '$attrs') {
-        track(instance, TrackOpTypes.GET, key)
+        track(instance.attrs, TrackOpTypes.GET, '')
         __DEV__ && markAttrsAccessed()
       } else if (__DEV__ && key === '$slots') {
+        // for HMR only
         track(instance, TrackOpTypes.GET, key)
       }
       return publicGetter(instance)
@@ -379,9 +500,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
           return desc.get.call(instance.proxy)
         } else {
           const val = globalProperties[key]
-          return isFunction(val)
-            ? Object.assign(val.bind(instance.proxy), val)
-            : val
+          return isFunction(val) ? extend(val.bind(instance.proxy), val) : val
         }
       } else {
         return globalProperties[key]
@@ -397,14 +516,14 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       if (data !== EMPTY_OBJ && isReservedPrefix(key[0]) && hasOwn(data, key)) {
         warn(
           `Property ${JSON.stringify(
-            key
+            key,
           )} must be accessed via $data because it starts with a reserved ` +
-            `character ("$" or "_") and is not proxied on the render context.`
+            `character ("$" or "_") and is not proxied on the render context.`,
         )
       } else if (instance === currentRenderingInstance) {
         warn(
           `Property ${JSON.stringify(key)} was accessed during render ` +
-            `but is not defined on instance.`
+            `but is not defined on instance.`,
         )
       }
     }
@@ -413,7 +532,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
   set(
     { _: instance }: ComponentRenderContext,
     key: string,
-    value: any
+    value: any,
   ): boolean {
     const { data, setupState, ctx } = instance
     if (hasSetupBinding(setupState, key)) {
@@ -437,7 +556,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       __DEV__ &&
         warn(
           `Attempting to mutate public property "${key}". ` +
-            `Properties starting with $ are reserved and readonly.`
+            `Properties starting with $ are reserved and readonly.`,
         )
       return false
     } else {
@@ -445,7 +564,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
         Object.defineProperty(ctx, key, {
           enumerable: true,
           configurable: true,
-          value
+          value,
         })
       } else {
         ctx[key] = value
@@ -456,9 +575,9 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
 
   has(
     {
-      _: { data, setupState, accessCache, ctx, appContext, propsOptions }
+      _: { data, setupState, accessCache, ctx, appContext, propsOptions },
     }: ComponentRenderContext,
-    key: string
+    key: string,
   ) {
     let normalizedProps
     return (
@@ -475,7 +594,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
   defineProperty(
     target: ComponentRenderContext,
     key: string,
-    descriptor: PropertyDescriptor
+    descriptor: PropertyDescriptor,
   ) {
     if (descriptor.get != null) {
       // invalidate key cache of a getter based property #5417
@@ -484,23 +603,21 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       this.set!(target, key, descriptor.value, null)
     }
     return Reflect.defineProperty(target, key, descriptor)
-  }
+  },
 }
 
 if (__DEV__ && !__TEST__) {
   PublicInstanceProxyHandlers.ownKeys = (target: ComponentRenderContext) => {
     warn(
       `Avoid app logic that relies on enumerating keys on a component instance. ` +
-        `The keys will be empty in production mode to avoid performance overhead.`
+        `The keys will be empty in production mode to avoid performance overhead.`,
     )
     return Reflect.ownKeys(target)
   }
 }
 
-export const RuntimeCompiledPublicInstanceProxyHandlers = /*#__PURE__*/ extend(
-  {},
-  PublicInstanceProxyHandlers,
-  {
+export const RuntimeCompiledPublicInstanceProxyHandlers: ProxyHandler<any> =
+  /*@__PURE__*/ extend({}, PublicInstanceProxyHandlers, {
     get(target: ComponentRenderContext, key: string) {
       // fast path for unscopables when using `with` block
       if ((key as any) === Symbol.unscopables) {
@@ -513,14 +630,13 @@ export const RuntimeCompiledPublicInstanceProxyHandlers = /*#__PURE__*/ extend(
       if (__DEV__ && !has && PublicInstanceProxyHandlers.has!(_, key)) {
         warn(
           `Property ${JSON.stringify(
-            key
-          )} should not start with _ which is a reserved prefix for Vue internals.`
+            key,
+          )} should not start with _ which is a reserved prefix for Vue internals.`,
         )
       }
       return has
-    }
-  }
-)
+    },
+  })
 
 // dev only
 // In dev mode, the proxy target exposes the same properties as seen on `this`
@@ -533,7 +649,7 @@ export function createDevRenderContext(instance: ComponentInternalInstance) {
   Object.defineProperty(target, `_`, {
     configurable: true,
     enumerable: false,
-    get: () => instance
+    get: () => instance,
   })
 
   // expose public properties
@@ -544,7 +660,7 @@ export function createDevRenderContext(instance: ComponentInternalInstance) {
       get: () => publicPropertiesMap[key](instance),
       // intercepted by the proxy so no need for implementation,
       // but needed to prevent set errors
-      set: NOOP
+      set: NOOP,
     })
   })
 
@@ -553,11 +669,11 @@ export function createDevRenderContext(instance: ComponentInternalInstance) {
 
 // dev only
 export function exposePropsOnRenderContext(
-  instance: ComponentInternalInstance
-) {
+  instance: ComponentInternalInstance,
+): void {
   const {
     ctx,
-    propsOptions: [propsOptions]
+    propsOptions: [propsOptions],
   } = instance
   if (propsOptions) {
     Object.keys(propsOptions).forEach(key => {
@@ -565,7 +681,7 @@ export function exposePropsOnRenderContext(
         enumerable: true,
         configurable: true,
         get: () => instance.props[key],
-        set: NOOP
+        set: NOOP,
       })
     })
   }
@@ -573,17 +689,17 @@ export function exposePropsOnRenderContext(
 
 // dev only
 export function exposeSetupStateOnRenderContext(
-  instance: ComponentInternalInstance
-) {
+  instance: ComponentInternalInstance,
+): void {
   const { ctx, setupState } = instance
   Object.keys(toRaw(setupState)).forEach(key => {
     if (!setupState.__isScriptSetup) {
       if (isReservedPrefix(key[0])) {
         warn(
           `setup() return property ${JSON.stringify(
-            key
+            key,
           )} should not start with "$" or "_" ` +
-            `which are reserved prefixes for Vue internals.`
+            `which are reserved prefixes for Vue internals.`,
         )
         return
       }
@@ -591,7 +707,7 @@ export function exposeSetupStateOnRenderContext(
         enumerable: true,
         configurable: true,
         get: () => setupState[key],
-        set: NOOP
+        set: NOOP,
       })
     }
   })
diff --git a/packages/runtime-core/src/componentRenderContext.ts b/packages/runtime-core/src/componentRenderContext.ts
index 8097dc5fe..b1fc70c03 100644
--- a/packages/runtime-core/src/componentRenderContext.ts
+++ b/packages/runtime-core/src/componentRenderContext.ts
@@ -1,4 +1,4 @@
-import { ComponentInternalInstance } from './component'
+import type { ComponentInternalInstance } from './component'
 import { devtoolsComponentUpdated } from './devtools'
 import { setBlockTracking } from './vnode'
 
@@ -20,7 +20,7 @@ export let currentScopeId: string | null = null
  * ```
  */
 export function setCurrentRenderingInstance(
-  instance: ComponentInternalInstance | null
+  instance: ComponentInternalInstance | null,
 ): ComponentInternalInstance | null {
   const prev = currentRenderingInstance
   currentRenderingInstance = instance
@@ -36,7 +36,7 @@ export function setCurrentRenderingInstance(
  * Set scope id when creating hoisted vnodes.
  * @private compiler helper
  */
-export function pushScopeId(id: string | null) {
+export function pushScopeId(id: string | null): void {
   currentScopeId = id
 }
 
@@ -45,7 +45,7 @@ export function pushScopeId(id: string | null) {
  * API for backwards compat w/ code generated by compilers.
  * @private
  */
-export function popScopeId() {
+export function popScopeId(): void {
   currentScopeId = null
 }
 
@@ -53,7 +53,7 @@ export function popScopeId() {
  * Only for backwards compat
  * @private
  */
-export const withScopeId = (_id: string) => withCtx
+export const withScopeId = (_id: string): typeof withCtx => withCtx
 
 export type ContextualRenderFn = {
   (...args: any[]): any
@@ -70,8 +70,8 @@ export type ContextualRenderFn = {
 export function withCtx(
   fn: Function,
   ctx: ComponentInternalInstance | null = currentRenderingInstance,
-  isNonScopedSlot?: boolean // __COMPAT__ only
-) {
+  isNonScopedSlot?: boolean, // __COMPAT__ only
+): Function {
   if (!ctx) return fn
 
   // already normalized
diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts
index 2ed64f7b5..a15d18d56 100644
--- a/packages/runtime-core/src/componentRenderUtils.ts
+++ b/packages/runtime-core/src/componentRenderUtils.ts
@@ -1,31 +1,33 @@
 import {
-  ComponentInternalInstance,
-  FunctionalComponent,
-  Data,
-  getComponentName
+  type ComponentInternalInstance,
+  type Data,
+  type FunctionalComponent,
+  getComponentName,
 } from './component'
 import {
-  VNode,
-  normalizeVNode,
-  createVNode,
   Comment,
+  type VNode,
+  type VNodeArrayChildren,
+  blockStack,
   cloneVNode,
-  VNodeArrayChildren,
+  createVNode,
   isVNode,
-  blockStack
+  normalizeVNode,
 } from './vnode'
-import { handleError, ErrorCodes } from './errorHandling'
-import { PatchFlags, ShapeFlags, isOn, isModelListener } from '@vue/shared'
+import { ErrorCodes, handleError } from './errorHandling'
+import { PatchFlags, ShapeFlags, isModelListener, isOn } from '@vue/shared'
 import { warn } from './warning'
 import { isHmrUpdating } from './hmr'
-import { NormalizedProps } from './componentProps'
+import type { NormalizedProps } from './componentProps'
 import { isEmitListener } from './componentEmits'
 import { setCurrentRenderingInstance } from './componentRenderContext'
 import {
   DeprecationTypes,
   isCompatEnabled,
-  warnDeprecation
+  warnDeprecation,
 } from './compat/compatConfig'
+import { shallowReadonly } from '@vue/reactivity'
+import { setTransitionHooks } from './components/BaseTransition'
 
 /**
  * dev only flag to track whether $attrs was used during render.
@@ -34,36 +36,36 @@ import {
  */
 let accessedAttrs: boolean = false
 
-export function markAttrsAccessed() {
+export function markAttrsAccessed(): void {
   accessedAttrs = true
 }
 
 type SetRootFn = ((root: VNode) => void) | undefined
 
 export function renderComponentRoot(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): VNode {
   const {
     type: Component,
     vnode,
     proxy,
     withProxy,
-    props,
     propsOptions: [propsOptions],
     slots,
     attrs,
     emit,
     render,
     renderCache,
+    props,
     data,
     setupState,
     ctx,
-    inheritAttrs
+    inheritAttrs,
   } = instance
+  const prev = setCurrentRenderingInstance(instance)
 
   let result
   let fallthroughAttrs
-  const prev = setCurrentRenderingInstance(instance)
   if (__DEV__) {
     accessedAttrs = false
   }
@@ -81,11 +83,11 @@ export function renderComponentRoot(
               get(target, key, receiver) {
                 warn(
                   `Property '${String(
-                    key
-                  )}' was accessed via 'this'. Avoid using 'this' in templates.`
+                    key,
+                  )}' was accessed via 'this'. Avoid using 'this' in templates.`,
                 )
                 return Reflect.get(target, key, receiver)
-              }
+              },
             })
           : proxyToUse
       result = normalizeVNode(
@@ -93,11 +95,11 @@ export function renderComponentRoot(
           thisProxy,
           proxyToUse!,
           renderCache,
-          props,
+          __DEV__ ? shallowReadonly(props) : props,
           setupState,
           data,
-          ctx
-        )
+          ctx,
+        ),
       )
       fallthroughAttrs = attrs
     } else {
@@ -110,19 +112,22 @@ export function renderComponentRoot(
       result = normalizeVNode(
         render.length > 1
           ? render(
-              props,
+              __DEV__ ? shallowReadonly(props) : props,
               __DEV__
                 ? {
                     get attrs() {
                       markAttrsAccessed()
-                      return attrs
+                      return shallowReadonly(attrs)
                     },
                     slots,
-                    emit
+                    emit,
                   }
-                : { attrs, slots, emit }
+                : { attrs, slots, emit },
             )
-          : render(props, null as any /* we know it doesn't need it */)
+          : render(
+              __DEV__ ? shallowReadonly(props) : props,
+              null as any /* we know it doesn't need it */,
+            ),
       )
       fallthroughAttrs = Component.props
         ? attrs
@@ -159,10 +164,10 @@ export function renderComponentRoot(
           // related: #1543, #1643, #1989
           fallthroughAttrs = filterModelListeners(
             fallthroughAttrs,
-            propsOptions
+            propsOptions,
           )
         }
-        root = cloneVNode(root, fallthroughAttrs)
+        root = cloneVNode(root, fallthroughAttrs, false, true)
       } else if (__DEV__ && !accessedAttrs && root.type !== Comment) {
         const allAttrs = Object.keys(attrs)
         const eventAttrs: string[] = []
@@ -185,7 +190,7 @@ export function renderComponentRoot(
             `Extraneous non-props attributes (` +
               `${extraAttrs.join(', ')}) ` +
               `were passed to component but could not be automatically inherited ` +
-              `because component renders fragment or text root nodes.`
+              `because component renders fragment or text root nodes.`,
           )
         }
         if (eventAttrs.length) {
@@ -195,7 +200,7 @@ export function renderComponentRoot(
               `were passed to component but could not be automatically inherited ` +
               `because component renders fragment or text root nodes. ` +
               `If the listener is intended to be a component custom event listener only, ` +
-              `declare it using the "emits" option.`
+              `declare it using the "emits" option.`,
           )
         }
       }
@@ -214,13 +219,18 @@ export function renderComponentRoot(
         warnDeprecation(
           DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE,
           instance,
-          getComponentName(instance.type)
+          getComponentName(instance.type),
         )
       }
-      root = cloneVNode(root, {
-        class: cls,
-        style: style
-      })
+      root = cloneVNode(
+        root,
+        {
+          class: cls,
+          style: style,
+        },
+        false,
+        true,
+      )
     }
   }
 
@@ -229,11 +239,11 @@ export function renderComponentRoot(
     if (__DEV__ && !isElementRoot(root)) {
       warn(
         `Runtime directive used on component with non-element root node. ` +
-          `The directives will not function as intended.`
+          `The directives will not function as intended.`,
       )
     }
     // clone before mutating since the root may be a hoisted vnode
-    root = cloneVNode(root)
+    root = cloneVNode(root, null, false, true)
     root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs
   }
   // inherit transition data
@@ -241,10 +251,10 @@ export function renderComponentRoot(
     if (__DEV__ && !isElementRoot(root)) {
       warn(
         `Component inside <Transition> renders non-element root node ` +
-          `that cannot be animated.`
+          `that cannot be animated.`,
       )
     }
-    root.transition = vnode.transition
+    setTransitionHooks(root, vnode.transition)
   }
 
   if (__DEV__ && setRoot) {
@@ -266,10 +276,17 @@ export function renderComponentRoot(
 const getChildRoot = (vnode: VNode): [VNode, SetRootFn] => {
   const rawChildren = vnode.children as VNodeArrayChildren
   const dynamicChildren = vnode.dynamicChildren
-  const childRoot = filterSingleRoot(rawChildren)
+  const childRoot = filterSingleRoot(rawChildren, false)
   if (!childRoot) {
     return [vnode, undefined]
+  } else if (
+    __DEV__ &&
+    childRoot.patchFlag > 0 &&
+    childRoot.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT
+  ) {
+    return getChildRoot(childRoot)
   }
+
   const index = rawChildren.indexOf(childRoot)
   const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1
   const setRoot: SetRootFn = (updatedRoot: VNode) => {
@@ -286,7 +303,8 @@ const getChildRoot = (vnode: VNode): [VNode, SetRootFn] => {
 }
 
 export function filterSingleRoot(
-  children: VNodeArrayChildren
+  children: VNodeArrayChildren,
+  recurse = true,
 ): VNode | undefined {
   let singleRoot
   for (let i = 0; i < children.length; i++) {
@@ -299,6 +317,14 @@ export function filterSingleRoot(
           return
         } else {
           singleRoot = child
+          if (
+            __DEV__ &&
+            recurse &&
+            singleRoot.patchFlag > 0 &&
+            singleRoot.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT
+          ) {
+            return filterSingleRoot(singleRoot.children as VNodeArrayChildren)
+          }
         }
       }
     } else {
@@ -338,7 +364,7 @@ const isElementRoot = (vnode: VNode) => {
 export function shouldUpdateComponent(
   prevVNode: VNode,
   nextVNode: VNode,
-  optimized?: boolean
+  optimized?: boolean,
 ): boolean {
   const { props: prevProps, children: prevChildren, component } = prevVNode
   const { props: nextProps, children: nextChildren, patchFlag } = nextVNode
@@ -406,7 +432,7 @@ export function shouldUpdateComponent(
 function hasPropsChanged(
   prevProps: Data,
   nextProps: Data,
-  emitsOptions: ComponentInternalInstance['emitsOptions']
+  emitsOptions: ComponentInternalInstance['emitsOptions'],
 ): boolean {
   const nextKeys = Object.keys(nextProps)
   if (nextKeys.length !== Object.keys(prevProps).length) {
@@ -426,10 +452,18 @@ function hasPropsChanged(
 
 export function updateHOCHostEl(
   { vnode, parent }: ComponentInternalInstance,
-  el: typeof vnode.el // HostNode
-) {
-  while (parent && parent.subTree === vnode) {
-    ;(vnode = parent.vnode).el = el
-    parent = parent.parent
+  el: typeof vnode.el, // HostNode
+): void {
+  while (parent) {
+    const root = parent.subTree
+    if (root.suspense && root.suspense.activeBranch === vnode) {
+      root.el = vnode.el
+    }
+    if (root === vnode) {
+      ;(vnode = parent.vnode).el = el
+      parent = parent.parent
+    } else {
+      break
+    }
   }
 }
diff --git a/packages/runtime-core/src/componentSlots.ts b/packages/runtime-core/src/componentSlots.ts
index 980ee7991..8f8392f1c 100644
--- a/packages/runtime-core/src/componentSlots.ts
+++ b/packages/runtime-core/src/componentSlots.ts
@@ -1,30 +1,27 @@
-import { ComponentInternalInstance, currentInstance } from './component'
+import { type ComponentInternalInstance, currentInstance } from './component'
 import {
-  VNode,
-  VNodeNormalizedChildren,
+  type VNode,
+  type VNodeChild,
+  type VNodeNormalizedChildren,
   normalizeVNode,
-  VNodeChild,
-  InternalObjectKey
 } from './vnode'
 import {
+  EMPTY_OBJ,
+  type IfAny,
+  type Prettify,
+  ShapeFlags,
+  SlotFlags,
+  def,
   isArray,
   isFunction,
-  EMPTY_OBJ,
-  ShapeFlags,
-  extend,
-  def,
-  SlotFlags,
-  Prettify,
-  IfAny
 } from '@vue/shared'
 import { warn } from './warning'
 import { isKeepAlive } from './components/KeepAlive'
-import { ContextualRenderFn, withCtx } from './componentRenderContext'
+import { type ContextualRenderFn, withCtx } from './componentRenderContext'
 import { isHmrUpdating } from './hmr'
 import { DeprecationTypes, isCompatEnabled } from './compat/compatConfig'
-import { toRaw } from '@vue/reactivity'
-import { trigger } from '@vue/reactivity'
-import { TriggerOpTypes } from '@vue/reactivity'
+import { TriggerOpTypes, trigger } from '@vue/reactivity'
+import { createInternalObject } from './internalObject'
 
 export type Slot<T extends any = any> = (
   ...args: IfAny<T, any[], [T] | (T extends undefined ? [] : never)>
@@ -43,12 +40,12 @@ export type SlotsType<T extends Record<string, any> = Record<string, any>> = {
 
 export type StrictUnwrapSlotsType<
   S extends SlotsType,
-  T = NonNullable<S[typeof SlotSymbol]>
-> = [keyof S] extends [never] ? Slots : Readonly<T>
+  T = NonNullable<S[typeof SlotSymbol]>,
+> = [keyof S] extends [never] ? Slots : Readonly<T> & T
 
 export type UnwrapSlotsType<
   S extends SlotsType,
-  T = NonNullable<S[typeof SlotSymbol]>
+  T = NonNullable<S[typeof SlotSymbol]>,
 > = [keyof S] extends [never]
   ? Slots
   : Readonly<
@@ -90,18 +87,22 @@ const normalizeSlotValue = (value: unknown): VNode[] =>
 const normalizeSlot = (
   key: string,
   rawSlot: Function,
-  ctx: ComponentInternalInstance | null | undefined
+  ctx: ComponentInternalInstance | null | undefined,
 ): Slot => {
   if ((rawSlot as any)._n) {
     // already normalized - #5353
     return rawSlot as Slot
   }
   const normalized = withCtx((...args: any[]) => {
-    if (__DEV__ && currentInstance) {
+    if (
+      __DEV__ &&
+      currentInstance &&
+      (!ctx || ctx.root === currentInstance.root)
+    ) {
       warn(
         `Slot "${key}" invoked outside of the render function: ` +
           `this will not track dependencies used in the slot. ` +
-          `Invoke the slot function inside the render function instead.`
+          `Invoke the slot function inside the render function instead.`,
       )
     }
     return normalizeSlotValue(rawSlot(...args))
@@ -114,7 +115,7 @@ const normalizeSlot = (
 const normalizeObjectSlots = (
   rawSlots: RawSlots,
   slots: InternalSlots,
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ) => {
   const ctx = rawSlots._ctx
   for (const key in rawSlots) {
@@ -132,7 +133,7 @@ const normalizeObjectSlots = (
       ) {
         warn(
           `Non-function value encountered for slot "${key}". ` +
-            `Prefer function slots for better performance.`
+            `Prefer function slots for better performance.`,
         )
       }
       const normalized = normalizeSlotValue(value)
@@ -143,7 +144,7 @@ const normalizeObjectSlots = (
 
 const normalizeVNodeSlots = (
   instance: ComponentInternalInstance,
-  children: VNodeNormalizedChildren
+  children: VNodeNormalizedChildren,
 ) => {
   if (
     __DEV__ &&
@@ -152,46 +153,56 @@ const normalizeVNodeSlots = (
   ) {
     warn(
       `Non-function value encountered for default slot. ` +
-        `Prefer function slots for better performance.`
+        `Prefer function slots for better performance.`,
     )
   }
   const normalized = normalizeSlotValue(children)
   instance.slots.default = () => normalized
 }
 
+const assignSlots = (
+  slots: InternalSlots,
+  children: Slots,
+  optimized: boolean,
+) => {
+  for (const key in children) {
+    // #2893
+    // when rendering the optimized slots by manually written render function,
+    // do not copy the `slots._` compiler flag so that `renderSlot` creates
+    // slot Fragment with BAIL patchFlag to force full updates
+    if (optimized || key !== '_') {
+      slots[key] = children[key]
+    }
+  }
+}
+
 export const initSlots = (
   instance: ComponentInternalInstance,
-  children: VNodeNormalizedChildren
-) => {
+  children: VNodeNormalizedChildren,
+  optimized: boolean,
+): void => {
+  const slots = (instance.slots = createInternalObject())
   if (instance.vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
     const type = (children as RawSlots)._
     if (type) {
-      // users can get the shallow readonly version of the slots object through `this.$slots`,
-      // we should avoid the proxy object polluting the slots of the internal instance
-      instance.slots = toRaw(children as InternalSlots)
+      assignSlots(slots, children as Slots, optimized)
       // make compiler marker non-enumerable
-      def(children as InternalSlots, '_', type)
+      if (optimized) {
+        def(slots, '_', type, true)
+      }
     } else {
-      normalizeObjectSlots(
-        children as RawSlots,
-        (instance.slots = {}),
-        instance
-      )
-    }
-  } else {
-    instance.slots = {}
-    if (children) {
-      normalizeVNodeSlots(instance, children)
+      normalizeObjectSlots(children as RawSlots, slots, instance)
     }
+  } else if (children) {
+    normalizeVNodeSlots(instance, children)
   }
-  def(instance.slots, InternalObjectKey, 1)
 }
 
 export const updateSlots = (
   instance: ComponentInternalInstance,
   children: VNodeNormalizedChildren,
-  optimized: boolean
-) => {
+  optimized: boolean,
+): void => {
   const { vnode, slots } = instance
   let needDeletionCheck = true
   let deletionComparisonTarget = EMPTY_OBJ
@@ -202,7 +213,7 @@ export const updateSlots = (
       if (__DEV__ && isHmrUpdating) {
         // Parent was HMR updated so slot content may have changed.
         // force update slots and mark instance for hmr as well
-        extend(slots, children as Slots)
+        assignSlots(slots, children as Slots, optimized)
         trigger(instance, TriggerOpTypes.SET, '$slots')
       } else if (optimized && type === SlotFlags.STABLE) {
         // compiled AND stable.
@@ -211,14 +222,7 @@ export const updateSlots = (
       } else {
         // compiled but dynamic (v-if/v-for on slots) - update slots, but skip
         // normalization.
-        extend(slots, children as Slots)
-        // #2893
-        // when rendering the optimized slots by manually written render function,
-        // we need to delete the `slots._` flag if necessary to make subsequent updates reliable,
-        // i.e. let the `renderSlot` create the bailed Fragment
-        if (!optimized && type === SlotFlags.STABLE) {
-          delete slots._
-        }
+        assignSlots(slots, children as Slots, optimized)
       }
     } else {
       needDeletionCheck = !(children as RawSlots).$stable
diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index f39d2e9bd..6ce06d282 100644
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/packages/runtime-core/src/components/BaseTransition.ts
@@ -1,29 +1,31 @@
 import {
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type SetupContext,
   getCurrentInstance,
-  SetupContext,
-  ComponentInternalInstance,
-  ComponentOptions
 } from '../component'
 import {
-  cloneVNode,
   Comment,
+  Fragment,
+  type VNode,
+  type VNodeArrayChildren,
+  cloneVNode,
   isSameVNodeType,
-  VNode,
-  VNodeArrayChildren,
-  Fragment
 } from '../vnode'
 import { warn } from '../warning'
 import { isKeepAlive } from './KeepAlive'
 import { toRaw } from '@vue/reactivity'
-import { callWithAsyncErrorHandling, ErrorCodes } from '../errorHandling'
-import { ShapeFlags, PatchFlags, isArray } from '@vue/shared'
+import { ErrorCodes, callWithAsyncErrorHandling } from '../errorHandling'
+import { PatchFlags, ShapeFlags, isArray, isFunction } from '@vue/shared'
 import { onBeforeUnmount, onMounted } from '../apiLifecycle'
-import { RendererElement } from '../renderer'
+import { isTeleport } from './Teleport'
+import type { RendererElement } from '../renderer'
+import { SchedulerJobFlags } from '../scheduler'
 
 type Hook<T = () => void> = T | T[]
 
-const leaveCbKey = Symbol('_leaveCb')
-const enterCbKey = Symbol('_enterCb')
+const leaveCbKey: unique symbol = Symbol('_leaveCb')
+const enterCbKey: unique symbol = Symbol('_enterCb')
 
 export interface BaseTransitionProps<HostElement = RendererElement> {
   mode?: 'in-out' | 'out-in' | 'default'
@@ -67,14 +69,14 @@ export interface TransitionHooks<HostElement = RendererElement> {
   delayLeave?(
     el: HostElement,
     earlyRemove: () => void,
-    delayedLeave: () => void
+    delayedLeave: () => void,
   ): void
   delayedLeave?(): void
 }
 
 export type TransitionHookCaller = <T extends any[] = [el: any]>(
   hook: Hook<(...args: T) => void> | undefined,
-  args?: T
+  args?: T,
 ) => void
 
 export type PendingCallback = (cancelled?: boolean) => void
@@ -101,7 +103,7 @@ export function useTransitionState(): TransitionState {
     isMounted: false,
     isLeaving: false,
     isUnmounting: false,
-    leavingVNodes: new Map()
+    leavingVNodes: new Map(),
   }
   onMounted(() => {
     state.isMounted = true
@@ -114,7 +116,7 @@ export function useTransitionState(): TransitionState {
 
 const TransitionHookValidator = [Function, Array]
 
-export const BaseTransitionPropsValidators = {
+export const BaseTransitionPropsValidators: Record<string, any> = {
   mode: String,
   appear: Boolean,
   persisted: Boolean,
@@ -132,7 +134,12 @@ export const BaseTransitionPropsValidators = {
   onBeforeAppear: TransitionHookValidator,
   onAppear: TransitionHookValidator,
   onAfterAppear: TransitionHookValidator,
-  onAppearCancelled: TransitionHookValidator
+  onAppearCancelled: TransitionHookValidator,
+}
+
+const recursiveGetSubtree = (instance: ComponentInternalInstance): VNode => {
+  const subTree = instance.subTree
+  return subTree.component ? recursiveGetSubtree(subTree.component) : subTree
 }
 
 const BaseTransitionImpl: ComponentOptions = {
@@ -144,8 +151,6 @@ const BaseTransitionImpl: ComponentOptions = {
     const instance = getCurrentInstance()!
     const state = useTransitionState()
 
-    let prevTransitionKey: any
-
     return () => {
       const children =
         slots.default && getTransitionRawChildren(slots.default(), true)
@@ -153,27 +158,7 @@ const BaseTransitionImpl: ComponentOptions = {
         return
       }
 
-      let child: VNode = children[0]
-      if (children.length > 1) {
-        let hasFound = false
-        // locate first non-comment child
-        for (const c of children) {
-          if (c.type !== Comment) {
-            if (__DEV__ && hasFound) {
-              // warn more than one non-comment child
-              warn(
-                '<transition> can only be used on a single element or component. ' +
-                  'Use <transition-group> for lists.'
-              )
-              break
-            }
-            child = c
-            hasFound = true
-            if (!__DEV__) break
-          }
-        }
-      }
-
+      const child: VNode = findNonCommentChild(children)
       // there's no need to track reactivity for these props so use the raw
       // props for a bit better perf
       const rawProps = toRaw(props)
@@ -195,70 +180,65 @@ const BaseTransitionImpl: ComponentOptions = {
 
       // in the case of <transition><keep-alive/></transition>, we need to
       // compare the type of the kept-alive children.
-      const innerChild = getKeepAliveChild(child)
+      const innerChild = getInnerChild(child)
       if (!innerChild) {
         return emptyPlaceholder(child)
       }
 
-      const enterHooks = resolveTransitionHooks(
+      let enterHooks = resolveTransitionHooks(
         innerChild,
         rawProps,
         state,
-        instance
+        instance,
+        // #11061, ensure enterHooks is fresh after clone
+        hooks => (enterHooks = hooks),
       )
-      setTransitionHooks(innerChild, enterHooks)
+
+      if (innerChild.type !== Comment) {
+        setTransitionHooks(innerChild, enterHooks)
+      }
 
       const oldChild = instance.subTree
-      const oldInnerChild = oldChild && getKeepAliveChild(oldChild)
-
-      let transitionKeyChanged = false
-      const { getTransitionKey } = innerChild.type as any
-      if (getTransitionKey) {
-        const key = getTransitionKey()
-        if (prevTransitionKey === undefined) {
-          prevTransitionKey = key
-        } else if (key !== prevTransitionKey) {
-          prevTransitionKey = key
-          transitionKeyChanged = true
-        }
-      }
+      const oldInnerChild = oldChild && getInnerChild(oldChild)
 
       // handle mode
       if (
         oldInnerChild &&
         oldInnerChild.type !== Comment &&
-        (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)
+        !isSameVNodeType(innerChild, oldInnerChild) &&
+        recursiveGetSubtree(instance).type !== Comment
       ) {
         const leavingHooks = resolveTransitionHooks(
           oldInnerChild,
           rawProps,
           state,
-          instance
+          instance,
         )
         // update old tree's hooks in case of dynamic transition
         setTransitionHooks(oldInnerChild, leavingHooks)
         // switching between different views
-        if (mode === 'out-in') {
+        if (mode === 'out-in' && innerChild.type !== Comment) {
           state.isLeaving = true
           // return placeholder node and queue update when leave finishes
           leavingHooks.afterLeave = () => {
             state.isLeaving = false
             // #6835
             // it also needs to be updated when active is undefined
-            if (instance.update.active !== false) {
+            if (!(instance.job.flags! & SchedulerJobFlags.DISPOSED)) {
               instance.update()
             }
+            delete leavingHooks.afterLeave
           }
           return emptyPlaceholder(child)
         } else if (mode === 'in-out' && innerChild.type !== Comment) {
           leavingHooks.delayLeave = (
             el: TransitionElement,
             earlyRemove,
-            delayedLeave
+            delayedLeave,
           ) => {
             const leavingVNodesCache = getLeavingNodesForType(
               state,
-              oldInnerChild
+              oldInnerChild,
             )
             leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild
             // early removal callback
@@ -274,13 +254,37 @@ const BaseTransitionImpl: ComponentOptions = {
 
       return child
     }
-  }
+  },
 }
 
 if (__COMPAT__) {
   BaseTransitionImpl.__isBuiltIn = true
 }
 
+function findNonCommentChild(children: VNode[]): VNode {
+  let child: VNode = children[0]
+  if (children.length > 1) {
+    let hasFound = false
+    // locate first non-comment child
+    for (const c of children) {
+      if (c.type !== Comment) {
+        if (__DEV__ && hasFound) {
+          // warn more than one non-comment child
+          warn(
+            '<transition> can only be used on a single element or component. ' +
+              'Use <transition-group> for lists.',
+          )
+          break
+        }
+        child = c
+        hasFound = true
+        if (!__DEV__) break
+      }
+    }
+  }
+  return child
+}
+
 // export the public type for h/tsx inference
 // also to avoid inline import() in generated d.ts files
 export const BaseTransition = BaseTransitionImpl as unknown as {
@@ -294,7 +298,7 @@ export const BaseTransition = BaseTransitionImpl as unknown as {
 
 function getLeavingNodesForType(
   state: TransitionState,
-  vnode: VNode
+  vnode: VNode,
 ): Record<string, VNode> {
   const { leavingVNodes } = state
   let leavingVNodesCache = leavingVNodes.get(vnode.type)!
@@ -311,7 +315,8 @@ export function resolveTransitionHooks(
   vnode: VNode,
   props: BaseTransitionProps<any>,
   state: TransitionState,
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
+  postClone?: (hooks: TransitionHooks) => void,
 ): TransitionHooks {
   const {
     appear,
@@ -328,7 +333,7 @@ export function resolveTransitionHooks(
     onBeforeAppear,
     onAppear,
     onAfterAppear,
-    onAppearCancelled
+    onAppearCancelled,
   } = props
   const key = String(vnode.key)
   const leavingVNodesCache = getLeavingNodesForType(state, vnode)
@@ -339,13 +344,13 @@ export function resolveTransitionHooks(
         hook,
         instance,
         ErrorCodes.TRANSITION_HOOK,
-        args
+        args,
       )
   }
 
   const callAsyncHook = (
     hook: Hook<(el: any, done: () => void) => void>,
-    args: [TransitionElement, () => void]
+    args: [TransitionElement, () => void],
   ) => {
     const done = args[1]
     callHook(hook, args)
@@ -452,8 +457,16 @@ export function resolveTransitionHooks(
     },
 
     clone(vnode) {
-      return resolveTransitionHooks(vnode, props, state, instance)
-    }
+      const hooks = resolveTransitionHooks(
+        vnode,
+        props,
+        state,
+        instance,
+        postClone,
+      )
+      if (postClone) postClone(hooks)
+      return hooks
+    },
   }
 
   return hooks
@@ -471,20 +484,39 @@ function emptyPlaceholder(vnode: VNode): VNode | undefined {
   }
 }
 
-function getKeepAliveChild(vnode: VNode): VNode | undefined {
-  return isKeepAlive(vnode)
-    ? // #7121 ensure get the child component subtree in case
-      // it's been replaced during HMR
-      __DEV__ && vnode.component
-      ? vnode.component.subTree
-      : vnode.children
-        ? ((vnode.children as VNodeArrayChildren)[0] as VNode)
-        : undefined
-    : vnode
+function getInnerChild(vnode: VNode): VNode | undefined {
+  if (!isKeepAlive(vnode)) {
+    if (isTeleport(vnode.type) && vnode.children) {
+      return findNonCommentChild(vnode.children as VNode[])
+    }
+
+    return vnode
+  }
+  // #7121 ensure get the child component subtree in case
+  // it's been replaced during HMR
+  if (__DEV__ && vnode.component) {
+    return vnode.component.subTree
+  }
+
+  const { shapeFlag, children } = vnode
+
+  if (children) {
+    if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+      return (children as VNodeArrayChildren)[0] as VNode
+    }
+
+    if (
+      shapeFlag & ShapeFlags.SLOTS_CHILDREN &&
+      isFunction((children as any).default)
+    ) {
+      return (children as any).default()
+    }
+  }
 }
 
-export function setTransitionHooks(vnode: VNode, hooks: TransitionHooks) {
+export function setTransitionHooks(vnode: VNode, hooks: TransitionHooks): void {
   if (vnode.shapeFlag & ShapeFlags.COMPONENT && vnode.component) {
+    vnode.transition = hooks
     setTransitionHooks(vnode.component.subTree, hooks)
   } else if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
     vnode.ssContent!.transition = hooks.clone(vnode.ssContent!)
@@ -497,7 +529,7 @@ export function setTransitionHooks(vnode: VNode, hooks: TransitionHooks) {
 export function getTransitionRawChildren(
   children: VNode[],
   keepComment: boolean = false,
-  parentKey?: VNode['key']
+  parentKey?: VNode['key'],
 ): VNode[] {
   let ret: VNode[] = []
   let keyedFragmentCount = 0
@@ -512,7 +544,7 @@ export function getTransitionRawChildren(
     if (child.type === Fragment) {
       if (child.patchFlag & PatchFlags.KEYED_FRAGMENT) keyedFragmentCount++
       ret = ret.concat(
-        getTransitionRawChildren(child.children as VNode[], keepComment, key)
+        getTransitionRawChildren(child.children as VNode[], keepComment, key),
       )
     }
     // comment placeholders should be skipped, e.g. v-if
diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
index 8c1b63188..5976f3a4b 100644
--- a/packages/runtime-core/src/components/KeepAlive.ts
+++ b/packages/runtime-core/src/components/KeepAlive.ts
@@ -1,46 +1,49 @@
 import {
-  ConcreteComponent,
-  getCurrentInstance,
-  SetupContext,
-  ComponentInternalInstance,
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ConcreteComponent,
+  type SetupContext,
   currentInstance,
   getComponentName,
-  ComponentOptions
+  getCurrentInstance,
 } from '../component'
 import {
-  VNode,
+  Comment,
+  type VNode,
+  type VNodeProps,
   cloneVNode,
-  isVNode,
-  VNodeProps,
   invokeVNodeHook,
-  isSameVNodeType
+  isSameVNodeType,
+  isVNode,
 } from '../vnode'
 import { warn } from '../warning'
 import {
-  onBeforeUnmount,
   injectHook,
-  onUnmounted,
+  onBeforeUnmount,
   onMounted,
-  onUpdated
+  onUnmounted,
+  onUpdated,
 } from '../apiLifecycle'
 import {
-  isString,
+  ShapeFlags,
+  invokeArrayFns,
   isArray,
   isRegExp,
-  ShapeFlags,
+  isString,
   remove,
-  invokeArrayFns
 } from '@vue/shared'
 import { watch } from '../apiWatch'
 import {
-  RendererInternals,
-  queuePostRenderEffect,
+  type ElementNamespace,
   MoveType,
-  RendererElement,
-  RendererNode
+  type RendererElement,
+  type RendererInternals,
+  type RendererNode,
+  invalidateMount,
+  queuePostRenderEffect,
 } from '../renderer'
 import { setTransitionHooks } from './BaseTransition'
-import { ComponentRenderContext } from '../componentPublicInstance'
+import type { ComponentRenderContext } from '../componentPublicInstance'
 import { devtoolsComponentAdded } from '../devtools'
 import { isAsyncWrapper } from '../apiAsyncComponent'
 import { isSuspense } from './Suspense'
@@ -54,7 +57,7 @@ export interface KeepAliveProps {
   max?: number | string
 }
 
-type CacheKey = string | number | symbol | ConcreteComponent
+type CacheKey = PropertyKey | ConcreteComponent
 type Cache = Map<CacheKey, VNode>
 type Keys = Set<CacheKey>
 
@@ -64,8 +67,8 @@ export interface KeepAliveContext extends ComponentRenderContext {
     vnode: VNode,
     container: RendererElement,
     anchor: RendererNode | null,
-    isSVG: boolean,
-    optimized: boolean
+    namespace: ElementNamespace,
+    optimized: boolean,
   ) => void
   deactivate: (vnode: VNode) => void
 }
@@ -84,7 +87,7 @@ const KeepAliveImpl: ComponentOptions = {
   props: {
     include: [String, RegExp, Array],
     exclude: [String, RegExp, Array],
-    max: [String, Number]
+    max: [String, Number],
   },
 
   setup(props: KeepAliveProps, { slots }: SetupContext) {
@@ -120,12 +123,18 @@ const KeepAliveImpl: ComponentOptions = {
         p: patch,
         m: move,
         um: _unmount,
-        o: { createElement }
-      }
+        o: { createElement },
+      },
     } = sharedContext
     const storageContainer = createElement('div')
 
-    sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
+    sharedContext.activate = (
+      vnode,
+      container,
+      anchor,
+      namespace,
+      optimized,
+    ) => {
       const instance = vnode.component!
       move(vnode, container, anchor, MoveType.ENTER, parentSuspense)
       // in case props have changed
@@ -136,9 +145,9 @@ const KeepAliveImpl: ComponentOptions = {
         anchor,
         instance,
         parentSuspense,
-        isSVG,
+        namespace,
         vnode.slotScopeIds,
-        optimized
+        optimized,
       )
       queuePostRenderEffect(() => {
         instance.isDeactivated = false
@@ -159,6 +168,9 @@ const KeepAliveImpl: ComponentOptions = {
 
     sharedContext.deactivate = (vnode: VNode) => {
       const instance = vnode.component!
+      invalidateMount(instance.m)
+      invalidateMount(instance.a)
+
       move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense)
       queuePostRenderEffect(() => {
         if (instance.da) {
@@ -183,10 +195,10 @@ const KeepAliveImpl: ComponentOptions = {
       _unmount(vnode, instance, parentSuspense, true)
     }
 
-    function pruneCache(filter?: (name: string) => boolean) {
+    function pruneCache(filter: (name: string) => boolean) {
       cache.forEach((vnode, key) => {
         const name = getComponentName(vnode.type as ConcreteComponent)
-        if (name && (!filter || !filter(name))) {
+        if (name && !filter(name)) {
           pruneCacheEntry(key)
         }
       })
@@ -194,7 +206,7 @@ const KeepAliveImpl: ComponentOptions = {
 
     function pruneCacheEntry(key: CacheKey) {
       const cached = cache.get(key) as VNode
-      if (!current || !isSameVNodeType(cached, current)) {
+      if (cached && (!current || !isSameVNodeType(cached, current))) {
         unmount(cached)
       } else if (current) {
         // current active instance should no longer be kept-alive.
@@ -213,7 +225,7 @@ const KeepAliveImpl: ComponentOptions = {
         exclude && pruneCache(name => !matches(exclude, name))
       },
       // prune post-render after `current` has been updated
-      { flush: 'post', deep: true }
+      { flush: 'post', deep: true },
     )
 
     // cache sub tree after render
@@ -221,7 +233,15 @@ const KeepAliveImpl: ComponentOptions = {
     const cacheSubtree = () => {
       // fix #1621, the pendingCacheKey could be 0
       if (pendingCacheKey != null) {
-        cache.set(pendingCacheKey, getInnerChild(instance.subTree))
+        // if KeepAlive child is a Suspense, it needs to be cached after Suspense resolves
+        // avoid caching vnode that not been mounted
+        if (isSuspense(instance.subTree.type)) {
+          queuePostRenderEffect(() => {
+            cache.set(pendingCacheKey!, getInnerChild(instance.subTree))
+          }, instance.subTree.suspense)
+        } else {
+          cache.set(pendingCacheKey, getInnerChild(instance.subTree))
+        }
       }
     }
     onMounted(cacheSubtree)
@@ -247,7 +267,7 @@ const KeepAliveImpl: ComponentOptions = {
       pendingCacheKey = null
 
       if (!slots.default) {
-        return null
+        return (current = null)
       }
 
       const children = slots.default()
@@ -268,6 +288,12 @@ const KeepAliveImpl: ComponentOptions = {
       }
 
       let vnode = getInnerChild(rawVNode)
+      // #6028 Suspense ssContent maybe a comment VNode, should avoid caching it
+      if (vnode.type === Comment) {
+        current = null
+        return vnode
+      }
+
       const comp = vnode.type as ConcreteComponent
 
       // for async components, name check should be based in its loaded
@@ -275,7 +301,7 @@ const KeepAliveImpl: ComponentOptions = {
       const name = getComponentName(
         isAsyncWrapper(vnode)
           ? (vnode.type as ComponentOptions).__asyncResolved || {}
-          : comp
+          : comp,
       )
 
       const { include, exclude, max } = props
@@ -284,6 +310,8 @@ const KeepAliveImpl: ComponentOptions = {
         (include && (!name || !matches(include, name))) ||
         (exclude && name && matches(exclude, name))
       ) {
+        // #11717
+        vnode.shapeFlag &= ~ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
         current = vnode
         return rawVNode
       }
@@ -298,11 +326,11 @@ const KeepAliveImpl: ComponentOptions = {
           rawVNode.ssContent = vnode
         }
       }
-      // #1513 it's possible for the returned vnode to be cloned due to attr
+      // #1511 it's possible for the returned vnode to be cloned due to attr
       // fallthrough or scopeId, so the vnode here may not be the final vnode
       // that is mounted. Instead of caching it directly, we store the pending
       // key and cache `instance.subTree` (the normalized vnode) in
-      // beforeMount/beforeUpdate hooks.
+      // mounted/updated hooks.
       pendingCacheKey = key
 
       if (cachedVNode) {
@@ -322,7 +350,7 @@ const KeepAliveImpl: ComponentOptions = {
         keys.add(key)
         // prune oldest entry
         if (max && keys.size > parseInt(max as string, 10)) {
-          pruneCacheEntry(keys.values().next().value)
+          pruneCacheEntry(keys.values().next().value!)
         }
       }
       // avoid vnode being unmounted
@@ -331,16 +359,19 @@ const KeepAliveImpl: ComponentOptions = {
       current = vnode
       return isSuspense(rawVNode.type) ? rawVNode : vnode
     }
-  }
+  },
 }
 
-if (__COMPAT__) {
-  KeepAliveImpl.__isBuildIn = true
+const decorate = (t: typeof KeepAliveImpl) => {
+  t.__isBuiltIn = true
+  return t
 }
 
 // export the public type for h/tsx inference
 // also to avoid inline import() in generated d.ts files
-export const KeepAlive = KeepAliveImpl as any as {
+export const KeepAlive = (__COMPAT__
+  ? /*@__PURE__*/ decorate(KeepAliveImpl)
+  : KeepAliveImpl) as any as {
   __isKeepAlive: true
   new (): {
     $props: VNodeProps & KeepAliveProps
@@ -356,30 +387,31 @@ function matches(pattern: MatchPattern, name: string): boolean {
   } else if (isString(pattern)) {
     return pattern.split(',').includes(name)
   } else if (isRegExp(pattern)) {
+    pattern.lastIndex = 0
     return pattern.test(name)
   }
-  /* istanbul ignore next */
+  /* v8 ignore next */
   return false
 }
 
 export function onActivated(
   hook: Function,
-  target?: ComponentInternalInstance | null
-) {
+  target?: ComponentInternalInstance | null,
+): void {
   registerKeepAliveHook(hook, LifecycleHooks.ACTIVATED, target)
 }
 
 export function onDeactivated(
   hook: Function,
-  target?: ComponentInternalInstance | null
-) {
+  target?: ComponentInternalInstance | null,
+): void {
   registerKeepAliveHook(hook, LifecycleHooks.DEACTIVATED, target)
 }
 
 function registerKeepAliveHook(
   hook: Function & { __wdc?: Function },
   type: LifecycleHooks,
-  target: ComponentInternalInstance | null = currentInstance
+  target: ComponentInternalInstance | null = currentInstance,
 ) {
   // cache the deactivate branch check wrapper for injected hooks so the same
   // hook can be properly deduped by the scheduler. "__wdc" stands for "with
@@ -418,7 +450,7 @@ function injectToKeepAliveRoot(
   hook: Function & { __weh?: Function },
   type: LifecycleHooks,
   target: ComponentInternalInstance,
-  keepAliveRoot: ComponentInternalInstance
+  keepAliveRoot: ComponentInternalInstance,
 ) {
   // injectHook wraps the original for error handling, so make sure to remove
   // the wrapped version.
diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index ddf21dd2e..85001f500 100644
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/packages/runtime-core/src/components/Suspense.ts
@@ -1,34 +1,35 @@
 import {
-  VNode,
-  normalizeVNode,
-  VNodeProps,
-  isSameVNodeType,
-  openBlock,
-  closeBlock,
-  currentBlock,
   Comment,
+  type VNode,
+  type VNodeProps,
+  closeBlock,
   createVNode,
-  isBlockTreeEnabled
+  currentBlock,
+  isBlockTreeEnabled,
+  isSameVNodeType,
+  normalizeVNode,
+  openBlock,
 } from '../vnode'
-import { isFunction, isArray, ShapeFlags, toNumber } from '@vue/shared'
-import { ComponentInternalInstance, handleSetupResult } from '../component'
-import { Slots } from '../componentSlots'
+import { ShapeFlags, isArray, isFunction, toNumber } from '@vue/shared'
+import { type ComponentInternalInstance, handleSetupResult } from '../component'
+import type { Slots } from '../componentSlots'
 import {
-  RendererInternals,
+  type ElementNamespace,
   MoveType,
-  SetupRenderEffectFn,
-  RendererNode,
-  RendererElement
+  type RendererElement,
+  type RendererInternals,
+  type RendererNode,
+  type SetupRenderEffectFn,
 } from '../renderer'
 import { queuePostFlushCb } from '../scheduler'
 import { filterSingleRoot, updateHOCHostEl } from '../componentRenderUtils'
 import {
-  pushWarningContext,
+  assertNumber,
   popWarningContext,
+  pushWarningContext,
   warn,
-  assertNumber
 } from '../warning'
-import { handleError, ErrorCodes } from '../errorHandling'
+import { ErrorCodes, handleError } from '../errorHandling'
 import { NULL_DYNAMIC_COMPONENT } from '../helpers/resolveAssets'
 
 export interface SuspenseProps {
@@ -46,6 +47,14 @@ export interface SuspenseProps {
 
 export const isSuspense = (type: any): boolean => type.__isSuspense
 
+// incrementing unique id for every pending branch
+let suspenseId = 0
+
+/**
+ * For testing only
+ */
+export const resetSuspenseId = (): number => (suspenseId = 0)
+
 // Suspense exposes a component-like API, and is treated like a component
 // in the compiler, but internally it's a special built-in type that hooks
 // directly into the renderer.
@@ -63,12 +72,12 @@ export const SuspenseImpl = {
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean,
     // platform-specific impl passed from renderer
-    rendererInternals: RendererInternals
-  ) {
+    rendererInternals: RendererInternals,
+  ): void {
     if (n1 == null) {
       mountSuspense(
         n2,
@@ -76,28 +85,45 @@ export const SuspenseImpl = {
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized,
-        rendererInternals
+        rendererInternals,
       )
     } else {
+      // #8678 if the current suspense needs to be patched and parentSuspense has
+      // not been resolved. this means that both the current suspense and parentSuspense
+      // need to be patched. because parentSuspense's pendingBranch includes the
+      // current suspense, it will be processed twice:
+      //  1. current patch
+      //  2. mounting along with the pendingBranch of parentSuspense
+      // it is necessary to skip the current patch to avoid multiple mounts
+      // of inner components.
+      if (
+        parentSuspense &&
+        parentSuspense.deps > 0 &&
+        !n1.suspense!.isInFallback
+      ) {
+        n2.suspense = n1.suspense!
+        n2.suspense.vnode = n2
+        n2.el = n1.el
+        return
+      }
       patchSuspense(
         n1,
         n2,
         container,
         anchor,
         parentComponent,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized,
-        rendererInternals
+        rendererInternals,
       )
     }
   },
-  hydrate: hydrateSuspense,
-  create: createSuspenseBoundary,
-  normalize: normalizeSuspenseChildren
+  hydrate: hydrateSuspense as typeof hydrateSuspense,
+  normalize: normalizeSuspenseChildren as typeof normalizeSuspenseChildren,
 }
 
 // Force-casted public typing for h and TSX props inference
@@ -116,7 +142,7 @@ export const Suspense = (__FEATURE_SUSPENSE__
 
 function triggerEvent(
   vnode: VNode,
-  name: 'onResolve' | 'onPending' | 'onFallback'
+  name: 'onResolve' | 'onPending' | 'onFallback',
 ) {
   const eventListener = vnode.props && vnode.props[name]
   if (isFunction(eventListener)) {
@@ -130,14 +156,14 @@ function mountSuspense(
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
-  rendererInternals: RendererInternals
+  rendererInternals: RendererInternals,
 ) {
   const {
     p: patch,
-    o: { createElement }
+    o: { createElement },
   } = rendererInternals
   const hiddenContainer = createElement('div')
   const suspense = (vnode.suspense = createSuspenseBoundary(
@@ -147,10 +173,10 @@ function mountSuspense(
     container,
     hiddenContainer,
     anchor,
-    isSVG,
+    namespace,
     slotScopeIds,
     optimized,
-    rendererInternals
+    rendererInternals,
   ))
 
   // start mounting the content subtree in an off-dom container
@@ -161,8 +187,8 @@ function mountSuspense(
     null,
     parentComponent,
     suspense,
-    isSVG,
-    slotScopeIds
+    namespace,
+    slotScopeIds,
   )
   // now check if we have encountered any async deps
   if (suspense.deps > 0) {
@@ -179,8 +205,8 @@ function mountSuspense(
       anchor,
       parentComponent,
       null, // fallback tree will not have suspense context
-      isSVG,
-      slotScopeIds
+      namespace,
+      slotScopeIds,
     )
     setActiveBranch(suspense, vnode.ssFallback!)
   } else {
@@ -195,10 +221,10 @@ function patchSuspense(
   container: RendererElement,
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
-  { p: patch, um: unmount, o: { createElement } }: RendererInternals
+  { p: patch, um: unmount, o: { createElement } }: RendererInternals,
 ) {
   const suspense = (n2.suspense = n1.suspense)!
   suspense.vnode = n2
@@ -218,29 +244,38 @@ function patchSuspense(
         null,
         parentComponent,
         suspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
       if (suspense.deps <= 0) {
         suspense.resolve()
       } else if (isInFallback) {
-        patch(
-          activeBranch,
-          newFallback,
-          container,
-          anchor,
-          parentComponent,
-          null, // fallback tree will not have suspense context
-          isSVG,
-          slotScopeIds,
-          optimized
-        )
-        setActiveBranch(suspense, newFallback)
+        // It's possible that the app is in hydrating state when patching the
+        // suspense instance. If someone updates the dependency during component
+        // setup in children of suspense boundary, that would be problemtic
+        // because we aren't actually showing a fallback content when
+        // patchSuspense is called. In such case, patch of fallback content
+        // should be no op
+        if (!isHydrating) {
+          patch(
+            activeBranch,
+            newFallback,
+            container,
+            anchor,
+            parentComponent,
+            null, // fallback tree will not have suspense context
+            namespace,
+            slotScopeIds,
+            optimized,
+          )
+          setActiveBranch(suspense, newFallback)
+        }
       }
     } else {
       // toggled before pending tree is resolved
-      suspense.pendingId++
+      // increment pending ID. this is used to invalidate async callbacks
+      suspense.pendingId = suspenseId++
       if (isHydrating) {
         // if toggled before hydration is finished, the current DOM tree is
         // no longer valid. set it as the active branch so it will be unmounted
@@ -250,7 +285,6 @@ function patchSuspense(
       } else {
         unmount(pendingBranch, parentComponent, suspense)
       }
-      // increment pending ID. this is used to invalidate async callbacks
       // reset suspense state
       suspense.deps = 0
       // discard effects from pending branch
@@ -267,9 +301,9 @@ function patchSuspense(
           null,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         if (suspense.deps <= 0) {
           suspense.resolve()
@@ -281,9 +315,9 @@ function patchSuspense(
             anchor,
             parentComponent,
             null, // fallback tree will not have suspense context
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
           setActiveBranch(suspense, newFallback)
         }
@@ -296,9 +330,9 @@ function patchSuspense(
           anchor,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         // force resolve
         suspense.resolve(true)
@@ -311,9 +345,9 @@ function patchSuspense(
           null,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         if (suspense.deps <= 0) {
           suspense.resolve()
@@ -330,9 +364,9 @@ function patchSuspense(
         anchor,
         parentComponent,
         suspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
       setActiveBranch(suspense, newBranch)
     } else {
@@ -341,7 +375,11 @@ function patchSuspense(
       triggerEvent(n2, 'onPending')
       // mount pending branch in off-dom container
       suspense.pendingBranch = newBranch
-      suspense.pendingId++
+      if (newBranch.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
+        suspense.pendingId = newBranch.component!.suspenseId!
+      } else {
+        suspense.pendingId = suspenseId++
+      }
       patch(
         null,
         newBranch,
@@ -349,9 +387,9 @@ function patchSuspense(
         null,
         parentComponent,
         suspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
       if (suspense.deps <= 0) {
         // incoming branch has no async deps, resolve now.
@@ -376,10 +414,9 @@ export interface SuspenseBoundary {
   vnode: VNode<RendererNode, RendererElement, SuspenseProps>
   parent: SuspenseBoundary | null
   parentComponent: ComponentInternalInstance | null
-  isSVG: boolean
+  namespace: ElementNamespace
   container: RendererElement
   hiddenContainer: RendererElement
-  anchor: RendererNode | null
   activeBranch: VNode | null
   pendingBranch: VNode | null
   deps: number
@@ -394,12 +431,13 @@ export interface SuspenseBoundary {
   move(
     container: RendererElement,
     anchor: RendererNode | null,
-    type: MoveType
+    type: MoveType,
   ): void
   next(): RendererNode | null
   registerDep(
     instance: ComponentInternalInstance,
-    setupRenderEffect: SetupRenderEffectFn
+    setupRenderEffect: SetupRenderEffectFn,
+    optimized: boolean,
   ): void
   unmount(parentSuspense: SuspenseBoundary | null, doRemove?: boolean): void
 }
@@ -413,34 +451,36 @@ function createSuspenseBoundary(
   container: RendererElement,
   hiddenContainer: RendererElement,
   anchor: RendererNode | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
   rendererInternals: RendererInternals,
-  isHydrating = false
+  isHydrating = false,
 ): SuspenseBoundary {
-  /* istanbul ignore if */
+  /* v8 ignore start */
   if (__DEV__ && !__TEST__ && !hasWarned) {
     hasWarned = true
-    // @ts-ignore `console.info` cannot be null error
+    // @ts-expect-error `console.info` cannot be null error
+    // eslint-disable-next-line no-console
     console[console.info ? 'info' : 'log'](
-      `<Suspense> is an experimental feature and its API will likely change.`
+      `<Suspense> is an experimental feature and its API will likely change.`,
     )
   }
+  /* v8 ignore stop */
 
   const {
     p: patch,
     m: move,
     um: unmount,
     n: next,
-    o: { parentNode, remove }
+    o: { parentNode, remove },
   } = rendererInternals
 
   // if set `suspensible: true`, set the current suspense as a dep of parent suspense
   let parentSuspenseId: number | undefined
   const isSuspensible = isVNodeSuspensible(vnode)
   if (isSuspensible) {
-    if (parentSuspense?.pendingBranch) {
+    if (parentSuspense && parentSuspense.pendingBranch) {
       parentSuspenseId = parentSuspense.pendingId
       parentSuspense.deps++
     }
@@ -451,20 +491,20 @@ function createSuspenseBoundary(
     assertNumber(timeout, `Suspense timeout`)
   }
 
+  const initialAnchor = anchor
   const suspense: SuspenseBoundary = {
     vnode,
     parent: parentSuspense,
     parentComponent,
-    isSVG,
+    namespace,
     container,
     hiddenContainer,
-    anchor,
     deps: 0,
-    pendingId: 0,
+    pendingId: suspenseId++,
     timeout: typeof timeout === 'number' ? timeout : -1,
     activeBranch: null,
     pendingBranch: null,
-    isInFallback: true,
+    isInFallback: !isHydrating,
     isHydrating,
     isUnmounted: false,
     effects: [],
@@ -473,12 +513,12 @@ function createSuspenseBoundary(
       if (__DEV__) {
         if (!resume && !suspense.pendingBranch) {
           throw new Error(
-            `suspense.resolve() is called without a pending branch.`
+            `suspense.resolve() is called without a pending branch.`,
           )
         }
         if (suspense.isUnmounted) {
           throw new Error(
-            `suspense.resolve() is called on an already unmounted suspense boundary.`
+            `suspense.resolve() is called on an already unmounted suspense boundary.`,
           )
         }
       }
@@ -489,7 +529,7 @@ function createSuspenseBoundary(
         pendingId,
         effects,
         parentComponent,
-        container
+        container,
       } = suspense
 
       // if there's a transition happening we need to wait it to finish.
@@ -504,18 +544,31 @@ function createSuspenseBoundary(
         if (delayEnter) {
           activeBranch!.transition!.afterLeave = () => {
             if (pendingId === suspense.pendingId) {
-              move(pendingBranch!, container, anchor, MoveType.ENTER)
+              move(
+                pendingBranch!,
+                container,
+                anchor === initialAnchor ? next(activeBranch!) : anchor,
+                MoveType.ENTER,
+              )
               queuePostFlushCb(effects)
             }
           }
         }
-        // this is initial anchor on mount
-        let { anchor } = suspense
         // unmount current active tree
         if (activeBranch) {
           // if the fallback tree was mounted, it may have been moved
           // as part of a parent suspense. get the latest anchor for insertion
-          anchor = next(activeBranch)
+          // #8105 if `delayEnter` is true, it means that the mounting of
+          // `activeBranch` will be delayed. if the branch switches before
+          // transition completes, both `activeBranch` and `pendingBranch` may
+          // coexist in the `hiddenContainer`. This could result in
+          // `next(activeBranch!)` obtaining an incorrect anchor
+          // (got `pendingBranch.el`).
+          // Therefore, after the mounting of activeBranch is completed,
+          // it is necessary to get the latest anchor.
+          if (parentNode(activeBranch.el!) === container) {
+            anchor = next(activeBranch)
+          }
           unmount(activeBranch, parentComponent, suspense, true)
         }
         if (!delayEnter) {
@@ -571,7 +624,7 @@ function createSuspenseBoundary(
         return
       }
 
-      const { vnode, activeBranch, parentComponent, container, isSVG } =
+      const { vnode, activeBranch, parentComponent, container, namespace } =
         suspense
 
       // invoke @fallback event
@@ -590,9 +643,9 @@ function createSuspenseBoundary(
           anchor,
           parentComponent,
           null, // fallback tree will not have suspense context
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         setActiveBranch(suspense, fallbackVNode)
       }
@@ -609,7 +662,7 @@ function createSuspenseBoundary(
         activeBranch!,
         parentComponent,
         null, // no suspense so unmount hooks fire now
-        true // shouldRemove
+        true, // shouldRemove
       )
 
       if (!delayEnter) {
@@ -627,7 +680,7 @@ function createSuspenseBoundary(
       return suspense.activeBranch && next(suspense.activeBranch)
     },
 
-    registerDep(instance, setupRenderEffect) {
+    registerDep(instance, setupRenderEffect, optimized) {
       const isInPendingSuspense = !!suspense.pendingBranch
       if (isInPendingSuspense) {
         suspense.deps++
@@ -671,8 +724,8 @@ function createSuspenseBoundary(
             // consider the comment placeholder case.
             hydratedEl ? null : next(instance.subTree),
             suspense,
-            isSVG,
-            optimized
+            namespace,
+            optimized,
           )
           if (placeholder) {
             remove(placeholder)
@@ -695,7 +748,7 @@ function createSuspenseBoundary(
           suspense.activeBranch,
           parentComponent,
           parentSuspense,
-          doRemove
+          doRemove,
         )
       }
       if (suspense.pendingBranch) {
@@ -703,10 +756,10 @@ function createSuspenseBoundary(
           suspense.pendingBranch,
           parentComponent,
           parentSuspense,
-          doRemove
+          doRemove,
         )
       }
-    }
+    },
   }
 
   return suspense
@@ -717,7 +770,7 @@ function hydrateSuspense(
   vnode: VNode,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
   rendererInternals: RendererInternals,
@@ -727,22 +780,22 @@ function hydrateSuspense(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized: boolean
-  ) => Node | null
+    optimized: boolean,
+  ) => Node | null,
 ): Node | null {
-  /* eslint-disable no-restricted-globals */
   const suspense = (vnode.suspense = createSuspenseBoundary(
     vnode,
     parentSuspense,
     parentComponent,
     node.parentNode!,
+    // eslint-disable-next-line no-restricted-globals
     document.createElement('div'),
     null,
-    isSVG,
+    namespace,
     slotScopeIds,
     optimized,
     rendererInternals,
-    true /* hydrating */
+    true /* hydrating */,
   ))
   // there are two possible scenarios for server-rendered suspense:
   // - success: ssr content should be fully resolved
@@ -756,20 +809,19 @@ function hydrateSuspense(
     parentComponent,
     suspense,
     slotScopeIds,
-    optimized
+    optimized,
   )
   if (suspense.deps === 0) {
     suspense.resolve(false, true)
   }
   return result
-  /* eslint-enable no-restricted-globals */
 }
 
-function normalizeSuspenseChildren(vnode: VNode) {
+function normalizeSuspenseChildren(vnode: VNode): void {
   const { shapeFlag, children } = vnode
   const isSlotChildren = shapeFlag & ShapeFlags.SLOTS_CHILDREN
   vnode.ssContent = normalizeSuspenseSlot(
-    isSlotChildren ? (children as Slots).default : children
+    isSlotChildren ? (children as Slots).default : children,
   )
   vnode.ssFallback = isSlotChildren
     ? normalizeSuspenseSlot((children as Slots).fallback)
@@ -814,7 +866,7 @@ function normalizeSuspenseSlot(s: any) {
 
 export function queueEffectWithSuspense(
   fn: Function | Function[],
-  suspense: SuspenseBoundary | null
+  suspense: SuspenseBoundary | null,
 ): void {
   if (suspense && suspense.pendingBranch) {
     if (isArray(fn)) {
@@ -830,7 +882,14 @@ export function queueEffectWithSuspense(
 function setActiveBranch(suspense: SuspenseBoundary, branch: VNode) {
   suspense.activeBranch = branch
   const { vnode, parentComponent } = suspense
-  const el = (vnode.el = branch.el)
+  let el = branch.el
+  // if branch has no el after patch, it's a HOC wrapping async components
+  // drill and locate the placeholder comment node
+  while (!el && branch.component) {
+    branch = branch.component.subTree
+    el = branch.el
+  }
+  vnode.el = el
   // in case suspense is the root node of a component,
   // recursively update the HOC el
   if (parentComponent && parentComponent.subTree === vnode) {
@@ -840,5 +899,6 @@ function setActiveBranch(suspense: SuspenseBoundary, branch: VNode) {
 }
 
 function isVNodeSuspensible(vnode: VNode) {
-  return vnode.props?.suspensible != null && vnode.props.suspensible !== false
+  const suspensible = vnode.props && vnode.props.suspensible
+  return suspensible != null && suspensible !== false
 }
diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index b9413598e..d268322cb 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -1,15 +1,17 @@
-import { ComponentInternalInstance } from '../component'
-import { SuspenseBoundary } from './Suspense'
+import type { ComponentInternalInstance } from '../component'
+import type { SuspenseBoundary } from './Suspense'
 import {
-  RendererInternals,
+  type ElementNamespace,
   MoveType,
-  RendererElement,
-  RendererNode,
-  RendererOptions,
-  traverseStaticChildren
+  type RendererElement,
+  type RendererInternals,
+  type RendererNode,
+  type RendererOptions,
+  queuePostRenderEffect,
+  traverseStaticChildren,
 } from '../renderer'
-import { VNode, VNodeArrayChildren, VNodeProps } from '../vnode'
-import { isString, ShapeFlags } from '@vue/shared'
+import type { VNode, VNodeArrayChildren, VNodeProps } from '../vnode'
+import { ShapeFlags, isString } from '@vue/shared'
 import { warn } from '../warning'
 import { isHmrUpdating } from '../hmr'
 
@@ -18,19 +20,28 @@ export type TeleportVNode = VNode<RendererNode, RendererElement, TeleportProps>
 export interface TeleportProps {
   to: string | RendererElement | null | undefined
   disabled?: boolean
+  defer?: boolean
 }
 
+export const TeleportEndKey: unique symbol = Symbol('_vte')
+
 export const isTeleport = (type: any): boolean => type.__isTeleport
 
 const isTeleportDisabled = (props: VNode['props']): boolean =>
   props && (props.disabled || props.disabled === '')
 
+const isTeleportDeferred = (props: VNode['props']): boolean =>
+  props && (props.defer || props.defer === '')
+
 const isTargetSVG = (target: RendererElement): boolean =>
   typeof SVGElement !== 'undefined' && target instanceof SVGElement
 
+const isTargetMathML = (target: RendererElement): boolean =>
+  typeof MathMLElement === 'function' && target instanceof MathMLElement
+
 const resolveTarget = <T = RendererElement>(
   props: TeleportProps | null,
-  select: RendererOptions['querySelector']
+  select: RendererOptions['querySelector'],
 ): T | null => {
   const targetSelector = props && props.to
   if (isString(targetSelector)) {
@@ -38,19 +49,18 @@ const resolveTarget = <T = RendererElement>(
       __DEV__ &&
         warn(
           `Current renderer does not support string target for Teleports. ` +
-            `(missing querySelector renderer option)`
+            `(missing querySelector renderer option)`,
         )
       return null
     } else {
       const target = select(targetSelector)
-      if (!target) {
-        __DEV__ &&
-          warn(
-            `Failed to locate Teleport target with selector "${targetSelector}". ` +
-              `Note the target element must exist before the component is mounted - ` +
-              `i.e. the target cannot be rendered by the component itself, and ` +
-              `ideally should be outside of the entire Vue component tree.`
-          )
+      if (__DEV__ && !target && !isTeleportDisabled(props)) {
+        warn(
+          `Failed to locate Teleport target with selector "${targetSelector}". ` +
+            `Note the target element must exist before the component is mounted - ` +
+            `i.e. the target cannot be rendered by the component itself, and ` +
+            `ideally should be outside of the entire Vue component tree.`,
+        )
       }
       return target as T
     }
@@ -72,16 +82,16 @@ export const TeleportImpl = {
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean,
-    internals: RendererInternals
-  ) {
+    internals: RendererInternals,
+  ): void {
     const {
       mc: mountChildren,
       pc: patchChildren,
       pbc: patchBlockChildren,
-      o: { insert, querySelector, createText, createComment }
+      o: { insert, querySelector, createText, createComment },
     } = internals
 
     const disabled = isTeleportDisabled(n2.props)
@@ -104,48 +114,76 @@ export const TeleportImpl = {
         : createText(''))
       insert(placeholder, container, anchor)
       insert(mainAnchor, container, anchor)
-      const target = (n2.target = resolveTarget(n2.props, querySelector))
-      const targetAnchor = (n2.targetAnchor = createText(''))
-      if (target) {
-        insert(targetAnchor, target)
-        // #2652 we could be teleporting from a non-SVG tree into an SVG tree
-        isSVG = isSVG || isTargetSVG(target)
-      } else if (__DEV__ && !disabled) {
-        warn('Invalid Teleport target on mount:', target, `(${typeof target})`)
-      }
 
       const mount = (container: RendererElement, anchor: RendererNode) => {
         // Teleport *always* has Array children. This is enforced in both the
         // compiler and vnode children normalization.
         if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+          if (parentComponent && parentComponent.isCE) {
+            parentComponent.ce!._teleportTarget = container
+          }
           mountChildren(
             children as VNodeArrayChildren,
             container,
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
+          )
+        }
+      }
+
+      const mountToTarget = () => {
+        const target = (n2.target = resolveTarget(n2.props, querySelector))
+        const targetAnchor = prepareAnchor(target, n2, createText, insert)
+        if (target) {
+          // #2652 we could be teleporting from a non-SVG tree into an SVG tree
+          if (namespace !== 'svg' && isTargetSVG(target)) {
+            namespace = 'svg'
+          } else if (namespace !== 'mathml' && isTargetMathML(target)) {
+            namespace = 'mathml'
+          }
+          if (!disabled) {
+            mount(target, targetAnchor)
+            updateCssVars(n2)
+          }
+        } else if (__DEV__ && !disabled) {
+          warn(
+            'Invalid Teleport target on mount:',
+            target,
+            `(${typeof target})`,
           )
         }
       }
 
       if (disabled) {
         mount(container, mainAnchor)
-      } else if (target) {
-        mount(target, targetAnchor)
+        updateCssVars(n2)
+      }
+
+      if (isTeleportDeferred(n2.props)) {
+        queuePostRenderEffect(mountToTarget, parentSuspense)
+      } else {
+        mountToTarget()
       }
     } else {
       // update content
       n2.el = n1.el
+      n2.targetStart = n1.targetStart
       const mainAnchor = (n2.anchor = n1.anchor)!
       const target = (n2.target = n1.target)!
       const targetAnchor = (n2.targetAnchor = n1.targetAnchor)!
       const wasDisabled = isTeleportDisabled(n1.props)
       const currentContainer = wasDisabled ? container : target
       const currentAnchor = wasDisabled ? mainAnchor : targetAnchor
-      isSVG = isSVG || isTargetSVG(target)
+
+      if (namespace === 'svg' || isTargetSVG(target)) {
+        namespace = 'svg'
+      } else if (namespace === 'mathml' || isTargetMathML(target)) {
+        namespace = 'mathml'
+      }
 
       if (dynamicChildren) {
         // fast path when the teleport happens to be a block root
@@ -155,8 +193,8 @@ export const TeleportImpl = {
           currentContainer,
           parentComponent,
           parentSuspense,
-          isSVG,
-          slotScopeIds
+          namespace,
+          slotScopeIds,
         )
         // even in block tree mode we need to make sure all root-level nodes
         // in the teleport inherit previous DOM references so that they can
@@ -170,9 +208,9 @@ export const TeleportImpl = {
           currentAnchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          false
+          false,
         )
       }
 
@@ -185,7 +223,7 @@ export const TeleportImpl = {
             container,
             mainAnchor,
             internals,
-            TeleportMoveTypes.TOGGLE
+            TeleportMoveTypes.TOGGLE,
           )
         } else {
           // #7835
@@ -200,7 +238,7 @@ export const TeleportImpl = {
         if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {
           const nextTarget = (n2.target = resolveTarget(
             n2.props,
-            querySelector
+            querySelector,
           ))
           if (nextTarget) {
             moveTeleport(
@@ -208,13 +246,13 @@ export const TeleportImpl = {
               nextTarget,
               null,
               internals,
-              TeleportMoveTypes.TARGET_CHANGE
+              TeleportMoveTypes.TARGET_CHANGE,
             )
           } else if (__DEV__) {
             warn(
               'Invalid Teleport target on update:',
               target,
-              `(${typeof target})`
+              `(${typeof target})`,
             )
           }
         } else if (wasDisabled) {
@@ -225,26 +263,33 @@ export const TeleportImpl = {
             target,
             targetAnchor,
             internals,
-            TeleportMoveTypes.TOGGLE
+            TeleportMoveTypes.TOGGLE,
           )
         }
       }
+      updateCssVars(n2)
     }
-
-    updateCssVars(n2)
   },
 
   remove(
     vnode: VNode,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    optimized: boolean,
     { um: unmount, o: { remove: hostRemove } }: RendererInternals,
-    doRemove: boolean
-  ) {
-    const { shapeFlag, children, anchor, targetAnchor, target, props } = vnode
+    doRemove: boolean,
+  ): void {
+    const {
+      shapeFlag,
+      children,
+      anchor,
+      targetStart,
+      targetAnchor,
+      target,
+      props,
+    } = vnode
 
     if (target) {
+      hostRemove(targetStart!)
       hostRemove(targetAnchor!)
     }
 
@@ -259,20 +304,20 @@ export const TeleportImpl = {
           parentComponent,
           parentSuspense,
           shouldRemove,
-          !!child.dynamicChildren
+          !!child.dynamicChildren,
         )
       }
     }
   },
 
-  move: moveTeleport,
-  hydrate: hydrateTeleport
+  move: moveTeleport as typeof moveTeleport,
+  hydrate: hydrateTeleport as typeof hydrateTeleport,
 }
 
-export const enum TeleportMoveTypes {
+export enum TeleportMoveTypes {
   TARGET_CHANGE,
   TOGGLE, // enable / disable
-  REORDER // moved in the main view
+  REORDER, // moved in the main view
 }
 
 function moveTeleport(
@@ -280,8 +325,8 @@ function moveTeleport(
   container: RendererElement,
   parentAnchor: RendererNode | null,
   { o: { insert }, m: move }: RendererInternals,
-  moveType: TeleportMoveTypes = TeleportMoveTypes.REORDER
-) {
+  moveType: TeleportMoveTypes = TeleportMoveTypes.REORDER,
+): void {
   // move target anchor if this is a target change.
   if (moveType === TeleportMoveTypes.TARGET_CHANGE) {
     insert(vnode.targetAnchor!, container, parentAnchor)
@@ -303,7 +348,7 @@ function moveTeleport(
           (children as VNode[])[i],
           container,
           parentAnchor,
-          MoveType.REORDER
+          MoveType.REORDER,
         )
       }
     }
@@ -327,7 +372,7 @@ function hydrateTeleport(
   slotScopeIds: string[] | null,
   optimized: boolean,
   {
-    o: { nextSibling, parentNode, querySelector }
+    o: { nextSibling, parentNode, querySelector, insert, createText },
   }: RendererInternals<Node, Element>,
   hydrateChildren: (
     node: Node | null,
@@ -336,12 +381,12 @@ function hydrateTeleport(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized: boolean
-  ) => Node | null
+    optimized: boolean,
+  ) => Node | null,
 ): Node | null {
   const target = (vnode.target = resolveTarget<Element>(
     vnode.props,
-    querySelector
+    querySelector,
   ))
   if (target) {
     // if multiple teleports rendered to the same target element, we need to
@@ -357,9 +402,10 @@ function hydrateTeleport(
           parentComponent,
           parentSuspense,
           slotScopeIds,
-          optimized
+          optimized,
         )
-        vnode.targetAnchor = targetNode
+        vnode.targetStart = targetNode
+        vnode.targetAnchor = targetNode && nextSibling(targetNode)
       } else {
         vnode.anchor = nextSibling(node)
 
@@ -368,27 +414,35 @@ function hydrateTeleport(
         // could be nested teleports
         let targetAnchor = targetNode
         while (targetAnchor) {
-          targetAnchor = nextSibling(targetAnchor)
-          if (
-            targetAnchor &&
-            targetAnchor.nodeType === 8 &&
-            (targetAnchor as Comment).data === 'teleport anchor'
-          ) {
-            vnode.targetAnchor = targetAnchor
-            ;(target as TeleportTargetElement)._lpa =
-              vnode.targetAnchor && nextSibling(vnode.targetAnchor as Node)
-            break
+          if (targetAnchor && targetAnchor.nodeType === 8) {
+            if ((targetAnchor as Comment).data === 'teleport start anchor') {
+              vnode.targetStart = targetAnchor
+            } else if ((targetAnchor as Comment).data === 'teleport anchor') {
+              vnode.targetAnchor = targetAnchor
+              ;(target as TeleportTargetElement)._lpa =
+                vnode.targetAnchor && nextSibling(vnode.targetAnchor as Node)
+              break
+            }
           }
+          targetAnchor = nextSibling(targetAnchor)
+        }
+
+        // #11400 if the HTML corresponding to Teleport is not embedded in the
+        // correct position on the final page during SSR. the targetAnchor will
+        // always be null, we need to manually add targetAnchor to ensure
+        // Teleport it can properly unmount or move
+        if (!vnode.targetAnchor) {
+          prepareAnchor(target, vnode, createText, insert)
         }
 
         hydrateChildren(
-          targetNode,
+          targetNode && nextSibling(targetNode),
           vnode,
           target,
           parentComponent,
           parentSuspense,
           slotScopeIds,
-          optimized
+          optimized,
         )
       }
     }
@@ -413,7 +467,7 @@ function updateCssVars(vnode: VNode) {
   // code path here can assume browser environment.
   const ctx = vnode.ctx
   if (ctx && ctx.ut) {
-    let node = (vnode.children as VNode[])[0].el!
+    let node = vnode.targetStart
     while (node && node !== vnode.targetAnchor) {
       if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid)
       node = node.nextSibling
@@ -421,3 +475,24 @@ function updateCssVars(vnode: VNode) {
     ctx.ut()
   }
 }
+
+function prepareAnchor(
+  target: RendererElement | null,
+  vnode: TeleportVNode,
+  createText: RendererOptions['createText'],
+  insert: RendererOptions['insert'],
+) {
+  const targetStart = (vnode.targetStart = createText(''))
+  const targetAnchor = (vnode.targetAnchor = createText(''))
+
+  // attach a special property, so we can skip teleported content in
+  // renderer's nextSibling search
+  targetStart[TeleportEndKey] = targetAnchor
+
+  if (target) {
+    insert(targetStart, target)
+    insert(targetAnchor, target)
+  }
+
+  return targetAnchor
+}
diff --git a/packages/runtime-core/src/customFormatter.ts b/packages/runtime-core/src/customFormatter.ts
index b30a876d9..1dd03be7d 100644
--- a/packages/runtime-core/src/customFormatter.ts
+++ b/packages/runtime-core/src/customFormatter.ts
@@ -1,10 +1,16 @@
-import { isReactive, isReadonly, isRef, Ref, toRaw } from '@vue/reactivity'
+import {
+  type Ref,
+  isReactive,
+  isReadonly,
+  isRef,
+  isShallow,
+  toRaw,
+} from '@vue/reactivity'
 import { EMPTY_OBJ, extend, isArray, isFunction, isObject } from '@vue/shared'
-import { isShallow } from '../../reactivity/src/reactive'
-import { ComponentInternalInstance, ComponentOptions } from './component'
-import { ComponentPublicInstance } from './componentPublicInstance'
+import type { ComponentInternalInstance, ComponentOptions } from './component'
+import type { ComponentPublicInstance } from './componentPublicInstance'
 
-export function initCustomFormatter() {
+export function initCustomFormatter(): void {
   /* eslint-disable no-restricted-globals */
   if (!__DEV__ || typeof window === 'undefined') {
     return
@@ -18,6 +24,7 @@ export function initCustomFormatter() {
   // custom formatter for Chrome
   // https://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html
   const formatter = {
+    __vue_custom_formatter: true,
     header(obj: unknown) {
       // TODO also format ComponentPublicInstance & ctx.slots/attrs in setup
       if (!isObject(obj)) {
@@ -32,8 +39,9 @@ export function initCustomFormatter() {
           {},
           ['span', vueStyle, genRefFlag(obj)],
           '<',
-          formatValue(obj.value),
-          `>`
+          // avoid debugger accessing value affecting behavior
+          formatValue('_value' in obj ? obj._value : obj),
+          `>`,
         ]
       } else if (isReactive(obj)) {
         return [
@@ -42,7 +50,7 @@ export function initCustomFormatter() {
           ['span', vueStyle, isShallow(obj) ? 'ShallowReactive' : 'Reactive'],
           '<',
           formatValue(obj),
-          `>${isReadonly(obj) ? ` (readonly)` : ``}`
+          `>${isReadonly(obj) ? ` (readonly)` : ``}`,
         ]
       } else if (isReadonly(obj)) {
         return [
@@ -51,7 +59,7 @@ export function initCustomFormatter() {
           ['span', vueStyle, isShallow(obj) ? 'ShallowReadonly' : 'Readonly'],
           '<',
           formatValue(obj),
-          '>'
+          '>',
         ]
       }
       return null
@@ -64,10 +72,10 @@ export function initCustomFormatter() {
         return [
           'div',
           {},
-          ...formatInstance((obj as ComponentPublicInstance).$)
+          ...formatInstance((obj as ComponentPublicInstance).$),
         ]
       }
-    }
+    },
   }
 
   function formatInstance(instance: ComponentInternalInstance) {
@@ -96,11 +104,11 @@ export function initCustomFormatter() {
       [
         'span',
         {
-          style: keywordStyle.style + ';opacity:0.66'
+          style: keywordStyle.style + ';opacity:0.66',
         },
-        '$ (internal): '
+        '$ (internal): ',
       ],
-      ['object', { object: instance }]
+      ['object', { object: instance }],
     ])
     return blocks
   }
@@ -116,24 +124,24 @@ export function initCustomFormatter() {
       [
         'div',
         {
-          style: 'color:#476582'
+          style: 'color:#476582',
         },
-        type
+        type,
       ],
       [
         'div',
         {
-          style: 'padding-left:1.25em'
+          style: 'padding-left:1.25em',
         },
         ...Object.keys(target).map(key => {
           return [
             'div',
             {},
             ['span', keywordStyle, key + ': '],
-            formatValue(target[key], false)
+            formatValue(target[key], false),
           ]
-        })
-      ]
+        }),
+      ],
     ]
   }
 
diff --git a/packages/runtime-core/src/devtools.ts b/packages/runtime-core/src/devtools.ts
index bf67093f5..9ac4c433a 100644
--- a/packages/runtime-core/src/devtools.ts
+++ b/packages/runtime-core/src/devtools.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-globals */
-import { App } from './apiCreateApp'
-import { Fragment, Text, Comment, Static } from './vnode'
-import { ComponentInternalInstance } from './component'
+import type { App } from './apiCreateApp'
+import { Comment, Fragment, Static, Text } from './vnode'
+import type { ComponentInternalInstance } from './component'
 
 interface AppRecord {
   id: number
@@ -10,7 +10,7 @@ interface AppRecord {
   types: Record<string, string | Symbol>
 }
 
-const enum DevtoolsHooks {
+enum DevtoolsHooks {
   APP_INIT = 'app:init',
   APP_UNMOUNT = 'app:unmount',
   COMPONENT_UPDATED = 'component:updated',
@@ -18,10 +18,10 @@ const enum DevtoolsHooks {
   COMPONENT_REMOVED = 'component:removed',
   COMPONENT_EMIT = 'component:emit',
   PERFORMANCE_START = 'perf:start',
-  PERFORMANCE_END = 'perf:end'
+  PERFORMANCE_END = 'perf:end',
 }
 
-interface DevtoolsHook {
+export interface DevtoolsHook {
   enabled?: boolean
   emit: (event: string, ...payload: any[]) => void
   on: (event: string, handler: Function) => void
@@ -49,7 +49,7 @@ function emit(event: string, ...args: any[]) {
   }
 }
 
-export function setDevtoolsHook(hook: DevtoolsHook, target: any) {
+export function setDevtoolsHook(hook: DevtoolsHook, target: any): void {
   devtools = hook
   if (devtools) {
     devtools.enabled = true
@@ -63,6 +63,7 @@ export function setDevtoolsHook(hook: DevtoolsHook, target: any) {
     // some envs mock window but not fully
     window.HTMLElement &&
     // also exclude jsdom
+    // eslint-disable-next-line no-restricted-syntax
     !window.navigator?.userAgent?.includes('jsdom')
   ) {
     const replay = (target.__VUE_DEVTOOLS_HOOK_REPLAY__ =
@@ -86,33 +87,32 @@ export function setDevtoolsHook(hook: DevtoolsHook, target: any) {
   }
 }
 
-export function devtoolsInitApp(app: App, version: string) {
+export function devtoolsInitApp(app: App, version: string): void {
   emit(DevtoolsHooks.APP_INIT, app, version, {
     Fragment,
     Text,
     Comment,
-    Static
+    Static,
   })
 }
 
-export function devtoolsUnmountApp(app: App) {
+export function devtoolsUnmountApp(app: App): void {
   emit(DevtoolsHooks.APP_UNMOUNT, app)
 }
 
-export const devtoolsComponentAdded = /*#__PURE__*/ createDevtoolsComponentHook(
-  DevtoolsHooks.COMPONENT_ADDED
-)
+export const devtoolsComponentAdded: DevtoolsComponentHook =
+  /*@__PURE__*/ createDevtoolsComponentHook(DevtoolsHooks.COMPONENT_ADDED)
 
-export const devtoolsComponentUpdated =
-  /*#__PURE__*/ createDevtoolsComponentHook(DevtoolsHooks.COMPONENT_UPDATED)
+export const devtoolsComponentUpdated: DevtoolsComponentHook =
+  /*@__PURE__*/ createDevtoolsComponentHook(DevtoolsHooks.COMPONENT_UPDATED)
 
-const _devtoolsComponentRemoved = /*#__PURE__*/ createDevtoolsComponentHook(
-  DevtoolsHooks.COMPONENT_REMOVED
+const _devtoolsComponentRemoved = /*@__PURE__*/ createDevtoolsComponentHook(
+  DevtoolsHooks.COMPONENT_REMOVED,
 )
 
 export const devtoolsComponentRemoved = (
-  component: ComponentInternalInstance
-) => {
+  component: ComponentInternalInstance,
+): void => {
   if (
     devtools &&
     typeof devtools.cleanupBuffer === 'function' &&
@@ -123,27 +123,37 @@ export const devtoolsComponentRemoved = (
   }
 }
 
-function createDevtoolsComponentHook(hook: DevtoolsHooks) {
+type DevtoolsComponentHook = (component: ComponentInternalInstance) => void
+
+/*! #__NO_SIDE_EFFECTS__ */
+function createDevtoolsComponentHook(
+  hook: DevtoolsHooks,
+): DevtoolsComponentHook {
   return (component: ComponentInternalInstance) => {
     emit(
       hook,
       component.appContext.app,
       component.uid,
       component.parent ? component.parent.uid : undefined,
-      component
+      component,
     )
   }
 }
 
-export const devtoolsPerfStart = /*#__PURE__*/ createDevtoolsPerformanceHook(
-  DevtoolsHooks.PERFORMANCE_START
-)
+export const devtoolsPerfStart: DevtoolsPerformanceHook =
+  /*@__PURE__*/ createDevtoolsPerformanceHook(DevtoolsHooks.PERFORMANCE_START)
 
-export const devtoolsPerfEnd = /*#__PURE__*/ createDevtoolsPerformanceHook(
-  DevtoolsHooks.PERFORMANCE_END
-)
+export const devtoolsPerfEnd: DevtoolsPerformanceHook =
+  /*@__PURE__*/ createDevtoolsPerformanceHook(DevtoolsHooks.PERFORMANCE_END)
 
-function createDevtoolsPerformanceHook(hook: DevtoolsHooks) {
+type DevtoolsPerformanceHook = (
+  component: ComponentInternalInstance,
+  type: string,
+  time: number,
+) => void
+function createDevtoolsPerformanceHook(
+  hook: DevtoolsHooks,
+): DevtoolsPerformanceHook {
   return (component: ComponentInternalInstance, type: string, time: number) => {
     emit(hook, component.appContext.app, component.uid, component, type, time)
   }
@@ -152,13 +162,13 @@ function createDevtoolsPerformanceHook(hook: DevtoolsHooks) {
 export function devtoolsComponentEmit(
   component: ComponentInternalInstance,
   event: string,
-  params: any[]
-) {
+  params: any[],
+): void {
   emit(
     DevtoolsHooks.COMPONENT_EMIT,
     component.appContext.app,
     component,
     event,
-    params
+    params,
   )
 }
diff --git a/packages/runtime-core/src/directives.ts b/packages/runtime-core/src/directives.ts
index 18c3352b0..f6a33f5a2 100644
--- a/packages/runtime-core/src/directives.ts
+++ b/packages/runtime-core/src/directives.ts
@@ -11,59 +11,109 @@ return withDirectives(h(comp), [
 ])
 */
 
-import { VNode } from './vnode'
-import { isFunction, EMPTY_OBJ, isBuiltInDirective } from '@vue/shared'
+import type { VNode } from './vnode'
+import { EMPTY_OBJ, isBuiltInDirective, isFunction } from '@vue/shared'
 import { warn } from './warning'
-import { ComponentInternalInstance, Data, getExposeProxy } from './component'
+import {
+  type ComponentInternalInstance,
+  type Data,
+  getComponentPublicInstance,
+} from './component'
 import { currentRenderingInstance } from './componentRenderContext'
-import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
-import { ComponentPublicInstance } from './componentPublicInstance'
+import { ErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
+import type { ComponentPublicInstance } from './componentPublicInstance'
 import { mapCompatDirectiveHook } from './compat/customDirective'
-import { pauseTracking, resetTracking } from '@vue/reactivity'
-import { traverse } from './apiWatch'
+import { pauseTracking, resetTracking, traverse } from '@vue/reactivity'
 
-export interface DirectiveBinding<V = any> {
-  instance: ComponentPublicInstance | null
-  value: V
-  oldValue: V | null
-  arg?: string
-  modifiers: DirectiveModifiers
-  dir: ObjectDirective<any, V>
+export interface DirectiveBinding<
+  Value = any,
+  Modifiers extends string = string,
+  Arg extends string = string,
+> {
+  instance: ComponentPublicInstance | Record<string, any> | null
+  value: Value
+  oldValue: Value | null
+  arg?: Arg
+  modifiers: DirectiveModifiers<Modifiers>
+  dir: ObjectDirective<any, Value>
 }
 
-export type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = (
-  el: T,
-  binding: DirectiveBinding<V>,
-  vnode: VNode<any, T>,
-  prevVNode: Prev
+export type DirectiveHook<
+  HostElement = any,
+  Prev = VNode<any, HostElement> | null,
+  Value = any,
+  Modifiers extends string = string,
+  Arg extends string = string,
+> = (
+  el: HostElement,
+  binding: DirectiveBinding<Value, Modifiers, Arg>,
+  vnode: VNode<any, HostElement>,
+  prevVNode: Prev,
 ) => void
 
-export type SSRDirectiveHook = (
-  binding: DirectiveBinding,
-  vnode: VNode
+export type SSRDirectiveHook<
+  Value = any,
+  Modifiers extends string = string,
+  Arg extends string = string,
+> = (
+  binding: DirectiveBinding<Value, Modifiers, Arg>,
+  vnode: VNode,
 ) => Data | undefined
 
-export interface ObjectDirective<T = any, V = any> {
-  created?: DirectiveHook<T, null, V>
-  beforeMount?: DirectiveHook<T, null, V>
-  mounted?: DirectiveHook<T, null, V>
-  beforeUpdate?: DirectiveHook<T, VNode<any, T>, V>
-  updated?: DirectiveHook<T, VNode<any, T>, V>
-  beforeUnmount?: DirectiveHook<T, null, V>
-  unmounted?: DirectiveHook<T, null, V>
-  getSSRProps?: SSRDirectiveHook
+export interface ObjectDirective<
+  HostElement = any,
+  Value = any,
+  Modifiers extends string = string,
+  Arg extends string = string,
+> {
+  /**
+   * @internal without this, ts-expect-error in directives.test-d.ts somehow
+   * fails when running tsc, but passes in IDE and when testing against built
+   * dts. Could be a TS bug.
+   */
+  __mod?: Modifiers
+  created?: DirectiveHook<HostElement, null, Value, Modifiers, Arg>
+  beforeMount?: DirectiveHook<HostElement, null, Value, Modifiers, Arg>
+  mounted?: DirectiveHook<HostElement, null, Value, Modifiers, Arg>
+  beforeUpdate?: DirectiveHook<
+    HostElement,
+    VNode<any, HostElement>,
+    Value,
+    Modifiers,
+    Arg
+  >
+  updated?: DirectiveHook<
+    HostElement,
+    VNode<any, HostElement>,
+    Value,
+    Modifiers,
+    Arg
+  >
+  beforeUnmount?: DirectiveHook<HostElement, null, Value, Modifiers, Arg>
+  unmounted?: DirectiveHook<HostElement, null, Value, Modifiers, Arg>
+  getSSRProps?: SSRDirectiveHook<Value, Modifiers, Arg>
   deep?: boolean
 }
 
-export type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V>
+export type FunctionDirective<
+  HostElement = any,
+  V = any,
+  Modifiers extends string = string,
+  Arg extends string = string,
+> = DirectiveHook<HostElement, any, V, Modifiers, Arg>
 
-export type Directive<T = any, V = any> =
-  | ObjectDirective<T, V>
-  | FunctionDirective<T, V>
+export type Directive<
+  HostElement = any,
+  Value = any,
+  Modifiers extends string = string,
+  Arg extends string = string,
+> =
+  | ObjectDirective<HostElement, Value, Modifiers, Arg>
+  | FunctionDirective<HostElement, Value, Modifiers, Arg>
 
-export type DirectiveModifiers = Record<string, boolean>
+export type DirectiveModifiers<K extends string = string> = Record<K, boolean>
 
-export function validateDirectiveName(name: string) {
+export function validateDirectiveName(name: string): void {
   if (isBuiltInDirective(name)) {
     warn('Do not use built-in directive ids as custom directive id: ' + name)
   }
@@ -74,7 +124,7 @@ export type DirectiveArguments = Array<
   | [Directive | undefined]
   | [Directive | undefined, any]
   | [Directive | undefined, any, string]
-  | [Directive | undefined, any, string, DirectiveModifiers]
+  | [Directive | undefined, any, string | undefined, DirectiveModifiers]
 >
 
 /**
@@ -82,16 +132,13 @@ export type DirectiveArguments = Array<
  */
 export function withDirectives<T extends VNode>(
   vnode: T,
-  directives: DirectiveArguments
+  directives: DirectiveArguments,
 ): T {
-  const internalInstance = currentRenderingInstance
-  if (internalInstance === null) {
+  if (currentRenderingInstance === null) {
     __DEV__ && warn(`withDirectives can only be used inside render functions.`)
     return vnode
   }
-  const instance =
-    (getExposeProxy(internalInstance) as ComponentPublicInstance) ||
-    internalInstance.proxy
+  const instance = getComponentPublicInstance(currentRenderingInstance)
   const bindings: DirectiveBinding[] = vnode.dirs || (vnode.dirs = [])
   for (let i = 0; i < directives.length; i++) {
     let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i]
@@ -99,7 +146,7 @@ export function withDirectives<T extends VNode>(
       if (isFunction(dir)) {
         dir = {
           mounted: dir,
-          updated: dir
+          updated: dir,
         } as ObjectDirective
       }
       if (dir.deep) {
@@ -111,7 +158,7 @@ export function withDirectives<T extends VNode>(
         value,
         oldValue: void 0,
         arg,
-        modifiers
+        modifiers,
       })
     }
   }
@@ -122,8 +169,8 @@ export function invokeDirectiveHook(
   vnode: VNode,
   prevVNode: VNode | null,
   instance: ComponentInternalInstance | null,
-  name: keyof ObjectDirective
-) {
+  name: keyof ObjectDirective,
+): void {
   const bindings = vnode.dirs!
   const oldBindings = prevVNode && prevVNode.dirs!
   for (let i = 0; i < bindings.length; i++) {
@@ -143,7 +190,7 @@ export function invokeDirectiveHook(
         vnode.el,
         binding,
         vnode,
-        prevVNode
+        prevVNode,
       ])
       resetTracking()
     }
diff --git a/packages/runtime-core/src/enums.ts b/packages/runtime-core/src/enums.ts
index 63d829d7a..aeb41adfc 100644
--- a/packages/runtime-core/src/enums.ts
+++ b/packages/runtime-core/src/enums.ts
@@ -1,4 +1,4 @@
-export const enum LifecycleHooks {
+export enum LifecycleHooks {
   BEFORE_CREATE = 'bc',
   CREATED = 'c',
   BEFORE_MOUNT = 'bm',
@@ -12,5 +12,5 @@ export const enum LifecycleHooks {
   RENDER_TRIGGERED = 'rtg',
   RENDER_TRACKED = 'rtc',
   ERROR_CAPTURED = 'ec',
-  SERVER_PREFETCH = 'sp'
+  SERVER_PREFETCH = 'sp',
 }
diff --git a/packages/runtime-core/src/errorHandling.ts b/packages/runtime-core/src/errorHandling.ts
index afbd226c4..c4bdf0bac 100644
--- a/packages/runtime-core/src/errorHandling.ts
+++ b/packages/runtime-core/src/errorHandling.ts
@@ -1,18 +1,23 @@
-import { VNode } from './vnode'
-import { ComponentInternalInstance } from './component'
-import { warn, pushWarningContext, popWarningContext } from './warning'
-import { isPromise, isFunction } from '@vue/shared'
+import { pauseTracking, resetTracking } from '@vue/reactivity'
+import type { VNode } from './vnode'
+import type { ComponentInternalInstance } from './component'
+import { popWarningContext, pushWarningContext, warn } from './warning'
+import { EMPTY_OBJ, isArray, isFunction, isPromise } from '@vue/shared'
 import { LifecycleHooks } from './enums'
+import { WatchErrorCodes } from '@vue/reactivity'
 
 // contexts where user provided function may be executed, in addition to
 // lifecycle hooks.
-export const enum ErrorCodes {
+export enum ErrorCodes {
   SETUP_FUNCTION,
   RENDER_FUNCTION,
-  WATCH_GETTER,
-  WATCH_CALLBACK,
-  WATCH_CLEANUP,
-  NATIVE_EVENT_HANDLER,
+  // The error codes for the watch have been transferred to the reactivity
+  // package along with baseWatch to maintain code compatibility. Hence,
+  // it is essential to keep these values unchanged.
+  // WATCH_GETTER,
+  // WATCH_CALLBACK,
+  // WATCH_CLEANUP,
+  NATIVE_EVENT_HANDLER = 5,
   COMPONENT_EVENT_HANDLER,
   VNODE_HOOK,
   DIRECTIVE_HOOK,
@@ -21,10 +26,12 @@ export const enum ErrorCodes {
   APP_WARN_HANDLER,
   FUNCTION_REF,
   ASYNC_COMPONENT_LOADER,
-  SCHEDULER
+  SCHEDULER,
+  COMPONENT_UPDATE,
+  APP_UNMOUNT_CLEANUP,
 }
 
-export const ErrorTypeStrings: Record<LifecycleHooks | ErrorCodes, string> = {
+export const ErrorTypeStrings: Record<ErrorTypes, string> = {
   [LifecycleHooks.SERVER_PREFETCH]: 'serverPrefetch hook',
   [LifecycleHooks.BEFORE_CREATE]: 'beforeCreate hook',
   [LifecycleHooks.CREATED]: 'created hook',
@@ -41,9 +48,9 @@ export const ErrorTypeStrings: Record<LifecycleHooks | ErrorCodes, string> = {
   [LifecycleHooks.RENDER_TRIGGERED]: 'renderTriggered hook',
   [ErrorCodes.SETUP_FUNCTION]: 'setup function',
   [ErrorCodes.RENDER_FUNCTION]: 'render function',
-  [ErrorCodes.WATCH_GETTER]: 'watcher getter',
-  [ErrorCodes.WATCH_CALLBACK]: 'watcher callback',
-  [ErrorCodes.WATCH_CLEANUP]: 'watcher cleanup function',
+  [WatchErrorCodes.WATCH_GETTER]: 'watcher getter',
+  [WatchErrorCodes.WATCH_CALLBACK]: 'watcher callback',
+  [WatchErrorCodes.WATCH_CLEANUP]: 'watcher cleanup function',
   [ErrorCodes.NATIVE_EVENT_HANDLER]: 'native event handler',
   [ErrorCodes.COMPONENT_EVENT_HANDLER]: 'component event handler',
   [ErrorCodes.VNODE_HOOK]: 'vnode hook',
@@ -53,34 +60,32 @@ export const ErrorTypeStrings: Record<LifecycleHooks | ErrorCodes, string> = {
   [ErrorCodes.APP_WARN_HANDLER]: 'app warnHandler',
   [ErrorCodes.FUNCTION_REF]: 'ref function',
   [ErrorCodes.ASYNC_COMPONENT_LOADER]: 'async component loader',
-  [ErrorCodes.SCHEDULER]:
-    'scheduler flush. This is likely a Vue internals bug. ' +
-    'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core'
+  [ErrorCodes.SCHEDULER]: 'scheduler flush',
+  [ErrorCodes.COMPONENT_UPDATE]: 'component update',
+  [ErrorCodes.APP_UNMOUNT_CLEANUP]: 'app unmount cleanup function',
 }
 
-export type ErrorTypes = LifecycleHooks | ErrorCodes
+export type ErrorTypes = LifecycleHooks | ErrorCodes | WatchErrorCodes
 
 export function callWithErrorHandling(
   fn: Function,
-  instance: ComponentInternalInstance | null,
+  instance: ComponentInternalInstance | null | undefined,
   type: ErrorTypes,
-  args?: unknown[]
-) {
-  let res
+  args?: unknown[],
+): any {
   try {
-    res = args ? fn(...args) : fn()
+    return args ? fn(...args) : fn()
   } catch (err) {
     handleError(err, instance, type)
   }
-  return res
 }
 
 export function callWithAsyncErrorHandling(
   fn: Function | Function[],
   instance: ComponentInternalInstance | null,
   type: ErrorTypes,
-  args?: unknown[]
-): any[] {
+  args?: unknown[],
+): any {
   if (isFunction(fn)) {
     const res = callWithErrorHandling(fn, instance, type, args)
     if (res && isPromise(res)) {
@@ -91,26 +96,36 @@ export function callWithAsyncErrorHandling(
     return res
   }
 
-  const values = []
-  for (let i = 0; i < fn.length; i++) {
-    values.push(callWithAsyncErrorHandling(fn[i], instance, type, args))
+  if (isArray(fn)) {
+    const values = []
+    for (let i = 0; i < fn.length; i++) {
+      values.push(callWithAsyncErrorHandling(fn[i], instance, type, args))
+    }
+    return values
+  } else if (__DEV__) {
+    warn(
+      `Invalid value type passed to callWithAsyncErrorHandling(): ${typeof fn}`,
+    )
   }
-  return values
 }
 
 export function handleError(
   err: unknown,
-  instance: ComponentInternalInstance | null,
+  instance: ComponentInternalInstance | null | undefined,
   type: ErrorTypes,
-  throwInDev = true
-) {
+  throwInDev = true,
+): void {
   const contextVNode = instance ? instance.vnode : null
+  const { errorHandler, throwUnhandledErrorInProduction } =
+    (instance && instance.appContext.config) || EMPTY_OBJ
   if (instance) {
     let cur = instance.parent
     // the exposed instance is the render proxy to keep it consistent with 2.x
     const exposedInstance = instance.proxy
     // in production the hook receives only the error code
-    const errorInfo = __DEV__ ? ErrorTypeStrings[type] : type
+    const errorInfo = __DEV__
+      ? ErrorTypeStrings[type]
+      : `https://vuejs.org/error-reference/#runtime-${type}`
     while (cur) {
       const errorCapturedHooks = cur.ec
       if (errorCapturedHooks) {
@@ -125,25 +140,26 @@ export function handleError(
       cur = cur.parent
     }
     // app-level handling
-    const appErrorHandler = instance.appContext.config.errorHandler
-    if (appErrorHandler) {
-      callWithErrorHandling(
-        appErrorHandler,
-        null,
-        ErrorCodes.APP_ERROR_HANDLER,
-        [err, exposedInstance, errorInfo]
-      )
+    if (errorHandler) {
+      pauseTracking()
+      callWithErrorHandling(errorHandler, null, ErrorCodes.APP_ERROR_HANDLER, [
+        err,
+        exposedInstance,
+        errorInfo,
+      ])
+      resetTracking()
       return
     }
   }
-  logError(err, type, contextVNode, throwInDev)
+  logError(err, type, contextVNode, throwInDev, throwUnhandledErrorInProduction)
 }
 
 function logError(
   err: unknown,
   type: ErrorTypes,
   contextVNode: VNode | null,
-  throwInDev = true
+  throwInDev = true,
+  throwInProd = false,
 ) {
   if (__DEV__) {
     const info = ErrorTypeStrings[type]
@@ -160,6 +176,8 @@ function logError(
     } else if (!__TEST__) {
       console.error(err)
     }
+  } else if (throwInProd) {
+    throw err
   } else {
     // recover in prod to reduce the impact on end-user
     console.error(err)
diff --git a/packages/runtime-core/src/featureFlags.ts b/packages/runtime-core/src/featureFlags.ts
index e878407bc..8092e8d35 100644
--- a/packages/runtime-core/src/featureFlags.ts
+++ b/packages/runtime-core/src/featureFlags.ts
@@ -4,10 +4,8 @@ import { getGlobalThis } from '@vue/shared'
  * This is only called in esm-bundler builds.
  * It is called when a renderer is created, in `baseCreateRenderer` so that
  * importing runtime-core is side-effects free.
- *
- * istanbul-ignore-next
  */
-export function initFeatureFlags() {
+export function initFeatureFlags(): void {
   const needWarn = []
 
   if (typeof __FEATURE_OPTIONS_API__ !== 'boolean') {
@@ -20,6 +18,11 @@ export function initFeatureFlags() {
     getGlobalThis().__VUE_PROD_DEVTOOLS__ = false
   }
 
+  if (typeof __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__ !== 'boolean') {
+    __DEV__ && needWarn.push(`__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`)
+    getGlobalThis().__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false
+  }
+
   if (__DEV__ && needWarn.length) {
     const multi = needWarn.length > 1
     console.warn(
@@ -29,7 +32,7 @@ export function initFeatureFlags() {
         `which expects these compile-time feature flags to be globally injected ` +
         `via the bundler config in order to get better tree-shaking in the ` +
         `production bundle.\n\n` +
-        `For more details, see https://link.vuejs.org/feature-flags.`
+        `For more details, see https://link.vuejs.org/feature-flags.`,
     )
   }
 }
diff --git a/packages/runtime-core/src/h.ts b/packages/runtime-core/src/h.ts
index 4ca90262f..93e7fd9bc 100644
--- a/packages/runtime-core/src/h.ts
+++ b/packages/runtime-core/src/h.ts
@@ -1,25 +1,25 @@
 import {
-  VNode,
-  VNodeProps,
+  type Comment,
+  type Fragment,
+  type Text,
+  type VNode,
+  type VNodeArrayChildren,
+  type VNodeProps,
   createVNode,
-  VNodeArrayChildren,
-  Fragment,
-  Text,
-  Comment,
-  isVNode
+  isVNode,
 } from './vnode'
-import { Teleport, TeleportProps } from './components/Teleport'
-import { Suspense, SuspenseProps } from './components/Suspense'
-import { isObject, isArray } from '@vue/shared'
-import { RawSlots } from './componentSlots'
-import {
-  FunctionalComponent,
+import type { Teleport, TeleportProps } from './components/Teleport'
+import type { Suspense, SuspenseProps } from './components/Suspense'
+import { type IfAny, isArray, isObject } from '@vue/shared'
+import type { RawSlots } from './componentSlots'
+import type {
   Component,
   ComponentOptions,
-  ConcreteComponent
+  ConcreteComponent,
+  FunctionalComponent,
 } from './component'
-import { EmitsOptions } from './componentEmits'
-import { DefineComponent } from './apiDefineComponent'
+import type { EmitsOptions } from './componentEmits'
+import type { DefineComponent } from './apiDefineComponent'
 
 // `h` is a more user-friendly version of `createVNode` that allows omitting the
 // props when possible. It is intended for manually written render functions.
@@ -75,40 +75,57 @@ interface Constructor<P = any> {
   new (...args: any[]): { $props: P }
 }
 
+type HTMLElementEventHandler = {
+  [K in keyof HTMLElementEventMap as `on${Capitalize<K>}`]?: (
+    ev: HTMLElementEventMap[K],
+  ) => any
+}
+
 // The following is a series of overloads for providing props validation of
 // manually written render functions.
 
 // element
+export function h<K extends keyof HTMLElementTagNameMap>(
+  type: K,
+  children?: RawChildren,
+): VNode
+export function h<K extends keyof HTMLElementTagNameMap>(
+  type: K,
+  props?: (RawProps & HTMLElementEventHandler) | null,
+  children?: RawChildren | RawSlots,
+): VNode
+
+// custom element
 export function h(type: string, children?: RawChildren): VNode
 export function h(
   type: string,
   props?: RawProps | null,
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // text/comment
 export function h(
   type: typeof Text | typeof Comment,
-  children?: string | number | boolean
+  children?: string | number | boolean,
 ): VNode
 export function h(
   type: typeof Text | typeof Comment,
   props?: null,
-  children?: string | number | boolean
+  children?: string | number | boolean,
 ): VNode
 // fragment
 export function h(type: typeof Fragment, children?: VNodeArrayChildren): VNode
 export function h(
   type: typeof Fragment,
   props?: RawProps | null,
-  children?: VNodeArrayChildren
+  children?: VNodeArrayChildren,
 ): VNode
 
 // teleport (target prop is required)
 export function h(
   type: typeof Teleport,
   props: RawProps & TeleportProps,
-  children: RawChildren | RawSlots
+  children: RawChildren | RawSlots,
 ): VNode
 
 // suspense
@@ -116,18 +133,18 @@ export function h(type: typeof Suspense, children?: RawChildren): VNode
 export function h(
   type: typeof Suspense,
   props?: (RawProps & SuspenseProps) | null,
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // functional component
 export function h<
   P,
   E extends EmitsOptions = {},
-  S extends Record<string, any> = {}
+  S extends Record<string, any> = any,
 >(
-  type: FunctionalComponent<P, E, S>,
+  type: FunctionalComponent<P, any, S, any>,
   props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
+  children?: RawChildren | IfAny<S, RawSlots, S>,
 ): VNode
 
 // catch-all for generic component types
@@ -136,26 +153,26 @@ export function h(type: Component, children?: RawChildren): VNode
 // concrete component
 export function h<P>(
   type: ConcreteComponent | string,
-  children?: RawChildren
+  children?: RawChildren,
 ): VNode
 export function h<P>(
   type: ConcreteComponent<P> | string,
   props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren
+  children?: RawChildren,
 ): VNode
 
 // component without props
 export function h<P>(
   type: Component<P>,
   props?: (RawProps & P) | null,
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // exclude `defineComponent` constructors
 export function h<P>(
   type: ComponentOptions<P>,
   props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // fake constructor type returned by `defineComponent` or class component
@@ -163,7 +180,7 @@ export function h(type: Constructor, children?: RawChildren): VNode
 export function h<P>(
   type: Constructor<P>,
   props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // fake constructor type returned by `defineComponent`
@@ -171,7 +188,7 @@ export function h(type: DefineComponent, children?: RawChildren): VNode
 export function h<P>(
   type: DefineComponent<P>,
   props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // catch all types
@@ -179,7 +196,7 @@ export function h(type: string | Component, children?: RawChildren): VNode
 export function h<P>(
   type: string | Component<P>,
   props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // Actual implementation
diff --git a/packages/runtime-core/src/helpers/createSlots.ts b/packages/runtime-core/src/helpers/createSlots.ts
index f370f5ca8..f7d6e9d07 100644
--- a/packages/runtime-core/src/helpers/createSlots.ts
+++ b/packages/runtime-core/src/helpers/createSlots.ts
@@ -1,5 +1,5 @@
 import { isArray } from '@vue/shared'
-import { VNode } from '../vnode'
+import type { VNode } from '../vnode'
 
 // #6651 res can be undefined in SSR in string push mode
 type SSRSlot = (...args: any[]) => VNode[] | undefined
@@ -20,7 +20,7 @@ export function createSlots(
     | CompiledSlotDescriptor
     | CompiledSlotDescriptor[]
     | undefined
-  )[]
+  )[],
 ): Record<string, SSRSlot> {
   for (let i = 0; i < dynamicSlots.length; i++) {
     const slot = dynamicSlots[i]
diff --git a/packages/runtime-core/src/helpers/renderList.ts b/packages/runtime-core/src/helpers/renderList.ts
index 1655d555f..bbcbcc130 100644
--- a/packages/runtime-core/src/helpers/renderList.ts
+++ b/packages/runtime-core/src/helpers/renderList.ts
@@ -1,5 +1,11 @@
-import { VNode, VNodeChild } from '../vnode'
-import { isArray, isString, isObject } from '@vue/shared'
+import type { VNode, VNodeChild } from '../vnode'
+import {
+  isReactive,
+  isShallow,
+  shallowReadArray,
+  toReactive,
+} from '@vue/reactivity'
+import { isArray, isObject, isString } from '@vue/shared'
 import { warn } from '../warning'
 
 /**
@@ -8,7 +14,7 @@ import { warn } from '../warning'
  */
 export function renderList(
   source: string,
-  renderItem: (value: string, index: number) => VNodeChild
+  renderItem: (value: string, index: number) => VNodeChild,
 ): VNodeChild[]
 
 /**
@@ -16,7 +22,7 @@ export function renderList(
  */
 export function renderList(
   source: number,
-  renderItem: (value: number, index: number) => VNodeChild
+  renderItem: (value: number, index: number) => VNodeChild,
 ): VNodeChild[]
 
 /**
@@ -24,7 +30,7 @@ export function renderList(
  */
 export function renderList<T>(
   source: T[],
-  renderItem: (value: T, index: number) => VNodeChild
+  renderItem: (value: T, index: number) => VNodeChild,
 ): VNodeChild[]
 
 /**
@@ -32,7 +38,7 @@ export function renderList<T>(
  */
 export function renderList<T>(
   source: Iterable<T>,
-  renderItem: (value: T, index: number) => VNodeChild
+  renderItem: (value: T, index: number) => VNodeChild,
 ): VNodeChild[]
 
 /**
@@ -42,9 +48,9 @@ export function renderList<T>(
   source: T,
   renderItem: <K extends keyof T>(
     value: T[K],
-    key: K,
-    index: number
-  ) => VNodeChild
+    key: string,
+    index: number,
+  ) => VNodeChild,
 ): VNodeChild[]
 
 /**
@@ -54,15 +60,27 @@ export function renderList(
   source: any,
   renderItem: (...args: any[]) => VNodeChild,
   cache?: any[],
-  index?: number
+  index?: number,
 ): VNodeChild[] {
   let ret: VNodeChild[]
   const cached = (cache && cache[index!]) as VNode[] | undefined
+  const sourceIsArray = isArray(source)
 
-  if (isArray(source) || isString(source)) {
+  if (sourceIsArray || isString(source)) {
+    const sourceIsReactiveArray = sourceIsArray && isReactive(source)
+    let needsWrap = false
+    if (sourceIsReactiveArray) {
+      needsWrap = !isShallow(source)
+      source = shallowReadArray(source)
+    }
     ret = new Array(source.length)
     for (let i = 0, l = source.length; i < l; i++) {
-      ret[i] = renderItem(source[i], i, undefined, cached && cached[i])
+      ret[i] = renderItem(
+        needsWrap ? toReactive(source[i]) : source[i],
+        i,
+        undefined,
+        cached && cached[i],
+      )
     }
   } else if (typeof source === 'number') {
     if (__DEV__ && !Number.isInteger(source)) {
@@ -75,7 +93,7 @@ export function renderList(
   } else if (isObject(source)) {
     if (source[Symbol.iterator as any]) {
       ret = Array.from(source as Iterable<any>, (item, i) =>
-        renderItem(item, i, undefined, cached && cached[i])
+        renderItem(item, i, undefined, cached && cached[i]),
       )
     } else {
       const keys = Object.keys(source)
diff --git a/packages/runtime-core/src/helpers/renderSlot.ts b/packages/runtime-core/src/helpers/renderSlot.ts
index 452fc8272..2cb266ef1 100644
--- a/packages/runtime-core/src/helpers/renderSlot.ts
+++ b/packages/runtime-core/src/helpers/renderSlot.ts
@@ -1,21 +1,21 @@
-import { Data } from '../component'
-import { Slots, RawSlots } from '../componentSlots'
+import type { Data } from '../component'
+import type { RawSlots, Slots } from '../componentSlots'
 import {
-  ContextualRenderFn,
-  currentRenderingInstance
+  type ContextualRenderFn,
+  currentRenderingInstance,
 } from '../componentRenderContext'
 import {
   Comment,
-  isVNode,
-  VNodeArrayChildren,
-  openBlock,
-  createBlock,
   Fragment,
-  VNode
+  type VNode,
+  type VNodeArrayChildren,
+  createBlock,
+  createVNode,
+  isVNode,
+  openBlock,
 } from '../vnode'
 import { PatchFlags, SlotFlags } from '@vue/shared'
 import { warn } from '../warning'
-import { createVNode } from '@vue/runtime-core'
 import { isAsyncWrapper } from '../apiAsyncComponent'
 
 /**
@@ -29,16 +29,27 @@ export function renderSlot(
   // this is not a user-facing function, so the fallback is always generated by
   // the compiler and guaranteed to be a function returning an array
   fallback?: () => VNodeArrayChildren,
-  noSlotted?: boolean
+  noSlotted?: boolean,
 ): VNode {
   if (
-    currentRenderingInstance!.isCE ||
+    currentRenderingInstance!.ce ||
     (currentRenderingInstance!.parent &&
       isAsyncWrapper(currentRenderingInstance!.parent) &&
-      currentRenderingInstance!.parent.isCE)
+      currentRenderingInstance!.parent.ce)
   ) {
+    // in custom element mode, render <slot/> as actual slot outlets
+    // wrap it with a fragment because in shadowRoot: false mode the slot
+    // element gets replaced by injected content
     if (name !== 'default') props.name = name
-    return createVNode('slot', props, fallback && fallback())
+    return (
+      openBlock(),
+      createBlock(
+        Fragment,
+        null,
+        [createVNode('slot', props, fallback && fallback())],
+        PatchFlags.STABLE_FRAGMENT,
+      )
+    )
   }
 
   let slot = slots[name]
@@ -47,7 +58,7 @@ export function renderSlot(
     warn(
       `SSR-optimized slot function detected in a non-SSR-optimized render ` +
         `function. You need to mark this component with $dynamic-slots in the ` +
-        `parent template.`
+        `parent template.`,
     )
     slot = () => []
   }
@@ -65,16 +76,18 @@ export function renderSlot(
     Fragment,
     {
       key:
-        props.key ||
-        // slot content array of a dynamic conditional slot may have a branch
-        // key attached in the `createSlots` helper, respect that
-        (validSlotContent && (validSlotContent as any).key) ||
-        `_${name}`
+        (props.key ||
+          // slot content array of a dynamic conditional slot may have a branch
+          // key attached in the `createSlots` helper, respect that
+          (validSlotContent && (validSlotContent as any).key) ||
+          `_${name}`) +
+        // #7256 force differentiate fallback content from actual content
+        (!validSlotContent && fallback ? '_fb' : ''),
     },
     validSlotContent || (fallback ? fallback() : []),
     validSlotContent && (slots as RawSlots)._ === SlotFlags.STABLE
       ? PatchFlags.STABLE_FRAGMENT
-      : PatchFlags.BAIL
+      : PatchFlags.BAIL,
   )
   if (!noSlotted && rendered.scopeId) {
     rendered.slotScopeIds = [rendered.scopeId + '-s']
@@ -85,7 +98,9 @@ export function renderSlot(
   return rendered
 }
 
-function ensureValidVNode(vnodes: VNodeArrayChildren) {
+export function ensureValidVNode(
+  vnodes: VNodeArrayChildren,
+): VNodeArrayChildren | null {
   return vnodes.some(child => {
     if (!isVNode(child)) return true
     if (child.type === Comment) return false
diff --git a/packages/runtime-core/src/helpers/resolveAssets.ts b/packages/runtime-core/src/helpers/resolveAssets.ts
index 3aedcee47..aa6532c28 100644
--- a/packages/runtime-core/src/helpers/resolveAssets.ts
+++ b/packages/runtime-core/src/helpers/resolveAssets.ts
@@ -1,14 +1,14 @@
 import {
+  type ComponentOptions,
+  type ConcreteComponent,
   currentInstance,
-  ConcreteComponent,
-  ComponentOptions,
-  getComponentName
+  getComponentName,
 } from '../component'
 import { currentRenderingInstance } from '../componentRenderContext'
-import { Directive } from '../directives'
+import type { Directive } from '../directives'
 import { camelize, capitalize, isString } from '@vue/shared'
 import { warn } from '../warning'
-import { VNodeTypes } from '../vnode'
+import type { VNodeTypes } from '../vnode'
 
 export const COMPONENTS = 'components'
 export const DIRECTIVES = 'directives'
@@ -21,12 +21,12 @@ export type AssetTypes = typeof COMPONENTS | typeof DIRECTIVES | typeof FILTERS
  */
 export function resolveComponent(
   name: string,
-  maybeSelfReference?: boolean
+  maybeSelfReference?: boolean,
 ): ConcreteComponent | string {
   return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name
 }
 
-export const NULL_DYNAMIC_COMPONENT = Symbol.for('v-ndc')
+export const NULL_DYNAMIC_COMPONENT: unique symbol = Symbol.for('v-ndc')
 
 /**
  * @private
@@ -63,12 +63,12 @@ function resolveAsset(
   type: typeof COMPONENTS,
   name: string,
   warnMissing?: boolean,
-  maybeSelfReference?: boolean
+  maybeSelfReference?: boolean,
 ): ConcreteComponent | undefined
 // overload 2: directives
 function resolveAsset(
   type: typeof DIRECTIVES,
-  name: string
+  name: string,
 ): Directive | undefined
 // implementation
 // overload 3: filters (compat only)
@@ -78,7 +78,7 @@ function resolveAsset(
   type: AssetTypes,
   name: string,
   warnMissing = true,
-  maybeSelfReference = false
+  maybeSelfReference = false,
 ) {
   const instance = currentRenderingInstance || currentInstance
   if (instance) {
@@ -88,7 +88,7 @@ function resolveAsset(
     if (type === COMPONENTS) {
       const selfName = getComponentName(
         Component,
-        false /* do not include inferred name to avoid breaking existing code */
+        false /* do not include inferred name to avoid breaking existing code */,
       )
       if (
         selfName &&
@@ -125,7 +125,7 @@ function resolveAsset(
   } else if (__DEV__) {
     warn(
       `resolve${capitalize(type.slice(0, -1))} ` +
-        `can only be used in render() or setup().`
+        `can only be used in render() or setup().`,
     )
   }
 }
diff --git a/packages/runtime-core/src/helpers/toHandlers.ts b/packages/runtime-core/src/helpers/toHandlers.ts
index 78ad164d7..3e7dcb327 100644
--- a/packages/runtime-core/src/helpers/toHandlers.ts
+++ b/packages/runtime-core/src/helpers/toHandlers.ts
@@ -1,4 +1,4 @@
-import { toHandlerKey, isObject } from '@vue/shared'
+import { isObject, toHandlerKey } from '@vue/shared'
 import { warn } from '../warning'
 
 /**
@@ -7,7 +7,7 @@ import { warn } from '../warning'
  */
 export function toHandlers(
   obj: Record<string, any>,
-  preserveCaseIfNecessary?: boolean
+  preserveCaseIfNecessary?: boolean,
 ): Record<string, any> {
   const ret: Record<string, any> = {}
   if (__DEV__ && !isObject(obj)) {
diff --git a/packages/runtime-core/src/helpers/useId.ts b/packages/runtime-core/src/helpers/useId.ts
new file mode 100644
index 000000000..4b51e0dda
--- /dev/null
+++ b/packages/runtime-core/src/helpers/useId.ts
@@ -0,0 +1,28 @@
+import {
+  type ComponentInternalInstance,
+  getCurrentInstance,
+} from '../component'
+import { warn } from '../warning'
+
+export function useId(): string {
+  const i = getCurrentInstance()
+  if (i) {
+    return (i.appContext.config.idPrefix || 'v') + '-' + i.ids[0] + i.ids[1]++
+  } else if (__DEV__) {
+    warn(
+      `useId() is called when there is no active component ` +
+        `instance to be associated with.`,
+    )
+  }
+  return ''
+}
+
+/**
+ * There are 3 types of async boundaries:
+ * - async components
+ * - components with async setup()
+ * - components with serverPrefetch
+ */
+export function markAsyncBoundary(instance: ComponentInternalInstance): void {
+  instance.ids = [instance.ids[0] + instance.ids[2]++ + '-', 0, 0]
+}
diff --git a/packages/runtime-core/src/helpers/useModel.ts b/packages/runtime-core/src/helpers/useModel.ts
new file mode 100644
index 000000000..37fd1d719
--- /dev/null
+++ b/packages/runtime-core/src/helpers/useModel.ts
@@ -0,0 +1,129 @@
+import { type Ref, customRef, ref } from '@vue/reactivity'
+import { EMPTY_OBJ, camelize, hasChanged, hyphenate } from '@vue/shared'
+import type { DefineModelOptions, ModelRef } from '../apiSetupHelpers'
+import { getCurrentInstance } from '../component'
+import { warn } from '../warning'
+import type { NormalizedProps } from '../componentProps'
+import { watchSyncEffect } from '../apiWatch'
+
+export function useModel<
+  M extends PropertyKey,
+  T extends Record<string, any>,
+  K extends keyof T,
+  G = T[K],
+  S = T[K],
+>(
+  props: T,
+  name: K,
+  options?: DefineModelOptions<T[K], G, S>,
+): ModelRef<T[K], M, G, S>
+export function useModel(
+  props: Record<string, any>,
+  name: string,
+  options: DefineModelOptions = EMPTY_OBJ,
+): Ref {
+  const i = getCurrentInstance()!
+  if (__DEV__ && !i) {
+    warn(`useModel() called without active instance.`)
+    return ref() as any
+  }
+
+  if (__DEV__ && !(i.propsOptions[0] as NormalizedProps)[name]) {
+    warn(`useModel() called with prop "${name}" which is not declared.`)
+    return ref() as any
+  }
+
+  const camelizedName = camelize(name)
+  const hyphenatedName = hyphenate(name)
+  const modifiers = getModelModifiers(props, name)
+
+  const res = customRef((track, trigger) => {
+    let localValue: any
+    let prevSetValue: any = EMPTY_OBJ
+    let prevEmittedValue: any
+
+    watchSyncEffect(() => {
+      const propValue = props[name]
+      if (hasChanged(localValue, propValue)) {
+        localValue = propValue
+        trigger()
+      }
+    })
+
+    return {
+      get() {
+        track()
+        return options.get ? options.get(localValue) : localValue
+      },
+
+      set(value) {
+        const emittedValue = options.set ? options.set(value) : value
+        if (
+          !hasChanged(emittedValue, localValue) &&
+          !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))
+        ) {
+          return
+        }
+        const rawProps = i.vnode!.props
+        if (
+          !(
+            rawProps &&
+            // check if parent has passed v-model
+            (name in rawProps ||
+              camelizedName in rawProps ||
+              hyphenatedName in rawProps) &&
+            (`onUpdate:${name}` in rawProps ||
+              `onUpdate:${camelizedName}` in rawProps ||
+              `onUpdate:${hyphenatedName}` in rawProps)
+          )
+        ) {
+          // no v-model, local update
+          localValue = value
+          trigger()
+        }
+
+        i.emit(`update:${name}`, emittedValue)
+        // #10279: if the local value is converted via a setter but the value
+        // emitted to parent was the same, the parent will not trigger any
+        // updates and there will be no prop sync. However the local input state
+        // may be out of sync, so we need to force an update here.
+        if (
+          hasChanged(value, emittedValue) &&
+          hasChanged(value, prevSetValue) &&
+          !hasChanged(emittedValue, prevEmittedValue)
+        ) {
+          trigger()
+        }
+        prevSetValue = value
+        prevEmittedValue = emittedValue
+      },
+    }
+  })
+
+  // @ts-expect-error
+  res[Symbol.iterator] = () => {
+    let i = 0
+    return {
+      next() {
+        if (i < 2) {
+          return { value: i++ ? modifiers || EMPTY_OBJ : res, done: false }
+        } else {
+          return { done: true }
+        }
+      },
+    }
+  }
+
+  return res
+}
+
+export const getModelModifiers = (
+  props: Record<string, any>,
+  modelName: string,
+): Record<string, boolean> | undefined => {
+  return modelName === 'modelValue' || modelName === 'model-value'
+    ? props.modelModifiers
+    : props[`${modelName}Modifiers`] ||
+        props[`${camelize(modelName)}Modifiers`] ||
+        props[`${hyphenate(modelName)}Modifiers`]
+}
diff --git a/packages/runtime-core/src/helpers/useSsrContext.ts b/packages/runtime-core/src/helpers/useSsrContext.ts
index 501a18e3b..d2497efce 100644
--- a/packages/runtime-core/src/helpers/useSsrContext.ts
+++ b/packages/runtime-core/src/helpers/useSsrContext.ts
@@ -1,16 +1,16 @@
 import { inject } from '../apiInject'
 import { warn } from '../warning'
 
-export const ssrContextKey = Symbol.for('v-scx')
+export const ssrContextKey: unique symbol = Symbol.for('v-scx')
 
-export const useSSRContext = <T = Record<string, any>>() => {
+export const useSSRContext = <T = Record<string, any>>(): T | undefined => {
   if (!__GLOBAL__) {
     const ctx = inject<T>(ssrContextKey)
     if (!ctx) {
       __DEV__ &&
         warn(
           `Server rendering context not provided. Make sure to only call ` +
-            `useSSRContext() conditionally in the server build.`
+            `useSSRContext() conditionally in the server build.`,
         )
     }
     return ctx
diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts
new file mode 100644
index 000000000..4cb10ea81
--- /dev/null
+++ b/packages/runtime-core/src/helpers/useTemplateRef.ts
@@ -0,0 +1,40 @@
+import { type ShallowRef, readonly, shallowRef } from '@vue/reactivity'
+import { getCurrentInstance } from '../component'
+import { warn } from '../warning'
+import { EMPTY_OBJ } from '@vue/shared'
+
+export const knownTemplateRefs: WeakSet<ShallowRef> = new WeakSet()
+
+export function useTemplateRef<T = unknown, Keys extends string = string>(
+  key: Keys,
+): Readonly<ShallowRef<T | null>> {
+  const i = getCurrentInstance()
+  const r = shallowRef(null)
+  if (i) {
+    const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs
+    let desc: PropertyDescriptor | undefined
+    if (
+      __DEV__ &&
+      (desc = Object.getOwnPropertyDescriptor(refs, key)) &&
+      !desc.configurable
+    ) {
+      warn(`useTemplateRef('${key}') already exists.`)
+    } else {
+      Object.defineProperty(refs, key, {
+        enumerable: true,
+        get: () => r.value,
+        set: val => (r.value = val),
+      })
+    }
+  } else if (__DEV__) {
+    warn(
+      `useTemplateRef() is called when there is no active component ` +
+        `instance to be associated with.`,
+    )
+  }
+  const ret = __DEV__ ? readonly(r) : r
+  if (__DEV__) {
+    knownTemplateRefs.add(ret)
+  }
+  return ret
+}
diff --git a/packages/runtime-core/src/helpers/withMemo.ts b/packages/runtime-core/src/helpers/withMemo.ts
index 76b0f055f..c82b9614b 100644
--- a/packages/runtime-core/src/helpers/withMemo.ts
+++ b/packages/runtime-core/src/helpers/withMemo.ts
@@ -1,12 +1,12 @@
 import { hasChanged } from '@vue/shared'
-import { currentBlock, isBlockTreeEnabled, VNode } from '../vnode'
+import { type VNode, currentBlock, isBlockTreeEnabled } from '../vnode'
 
 export function withMemo(
   memo: any[],
   render: () => VNode<any, any>,
   cache: any[],
-  index: number
-) {
+  index: number,
+): VNode<any, any> {
   const cached = cache[index] as VNode | undefined
   if (cached && isMemoSame(cached, memo)) {
     return cached
@@ -15,10 +15,12 @@ export function withMemo(
 
   // shallow clone
   ret.memo = memo.slice()
+  ret.cacheIndex = index
+
   return (cache[index] = ret)
 }
 
-export function isMemoSame(cached: VNode, memo: any[]) {
+export function isMemoSame(cached: VNode, memo: any[]): boolean {
   const prev: any[] = cached.memo!
   if (prev.length != memo.length) {
     return false
diff --git a/packages/runtime-core/src/hmr.ts b/packages/runtime-core/src/hmr.ts
index 1ce66a3da..7aedf52dd 100644
--- a/packages/runtime-core/src/hmr.ts
+++ b/packages/runtime-core/src/hmr.ts
@@ -1,11 +1,11 @@
 /* eslint-disable no-restricted-globals */
 import {
-  ConcreteComponent,
-  ComponentInternalInstance,
-  ComponentOptions,
-  InternalRenderFunction,
-  ClassComponent,
-  isClassComponent
+  type ClassComponent,
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ConcreteComponent,
+  type InternalRenderFunction,
+  isClassComponent,
 } from './component'
 import { queueJob, queuePostFlushCb } from './scheduler'
 import { extend, getGlobalThis } from '@vue/shared'
@@ -14,7 +14,10 @@ type HMRComponent = ComponentOptions | ClassComponent
 
 export let isHmrUpdating = false
 
-export const hmrDirtyComponents = new Set<ConcreteComponent>()
+export const hmrDirtyComponents: Map<
+  ConcreteComponent,
+  Set<ComponentInternalInstance>
+> = new Map<ConcreteComponent, Set<ComponentInternalInstance>>()
 
 export interface HMRRuntime {
   createRecord: typeof createRecord
@@ -31,7 +34,7 @@ if (__DEV__) {
   getGlobalThis().__VUE_HMR_RUNTIME__ = {
     createRecord: tryWrap(createRecord),
     rerender: tryWrap(rerender),
-    reload: tryWrap(reload)
+    reload: tryWrap(reload),
   } as HMRRuntime
 }
 
@@ -46,7 +49,7 @@ const map: Map<
   }
 > = new Map()
 
-export function registerHMR(instance: ComponentInternalInstance) {
+export function registerHMR(instance: ComponentInternalInstance): void {
   const id = instance.type.__hmrId!
   let record = map.get(id)
   if (!record) {
@@ -56,7 +59,7 @@ export function registerHMR(instance: ComponentInternalInstance) {
   record.instances.add(instance)
 }
 
-export function unregisterHMR(instance: ComponentInternalInstance) {
+export function unregisterHMR(instance: ComponentInternalInstance): void {
   map.get(instance.type.__hmrId!)!.instances.delete(instance)
 }
 
@@ -66,7 +69,7 @@ function createRecord(id: string, initialDef: HMRComponent): boolean {
   }
   map.set(id, {
     initialDef: normalizeClassComponent(initialDef),
-    instances: new Set()
+    instances: new Set(),
   })
   return true
 }
@@ -75,7 +78,7 @@ function normalizeClassComponent(component: HMRComponent): ComponentOptions {
   return isClassComponent(component) ? component.__vccOpts : component
 }
 
-function rerender(id: string, newRender?: Function) {
+function rerender(id: string, newRender?: Function): void {
   const record = map.get(id)
   if (!record) {
     return
@@ -98,7 +101,7 @@ function rerender(id: string, newRender?: Function) {
   })
 }
 
-function reload(id: string, newComp: HMRComponent) {
+function reload(id: string, newComp: HMRComponent): void {
   const record = map.get(id)
   if (!record) return
 
@@ -109,18 +112,21 @@ function reload(id: string, newComp: HMRComponent) {
   // create a snapshot which avoids the set being mutated during updates
   const instances = [...record.instances]
 
-  for (const instance of instances) {
+  for (let i = 0; i < instances.length; i++) {
+    const instance = instances[i]
     const oldComp = normalizeClassComponent(instance.type as HMRComponent)
 
-    if (!hmrDirtyComponents.has(oldComp)) {
+    let dirtyInstances = hmrDirtyComponents.get(oldComp)
+    if (!dirtyInstances) {
       // 1. Update existing comp definition to match new one
       if (oldComp !== record.initialDef) {
         updateComponentDef(oldComp, newComp)
       }
       // 2. mark definition dirty. This forces the renderer to replace the
       // component on patch.
-      hmrDirtyComponents.add(oldComp)
+      hmrDirtyComponents.set(oldComp, (dirtyInstances = new Set()))
     }
+    dirtyInstances.add(instance)
 
     // 3. invalidate options resolution cache
     instance.appContext.propsCache.delete(instance.type as any)
@@ -130,14 +136,20 @@ function reload(id: string, newComp: HMRComponent) {
     // 4. actually update
     if (instance.ceReload) {
       // custom element
-      hmrDirtyComponents.add(oldComp)
+      dirtyInstances.add(instance)
       instance.ceReload((newComp as any).styles)
-      hmrDirtyComponents.delete(oldComp)
+      dirtyInstances.delete(instance)
     } else if (instance.parent) {
       // 4. Force the parent instance to re-render. This will cause all updated
       // components to be unmounted and re-mounted. Queue the update so that we
       // don't end up forcing the same parent to re-render multiple times.
-      queueJob(instance.parent.update)
+      queueJob(() => {
+        isHmrUpdating = true
+        instance.parent!.update()
+        isHmrUpdating = false
+        // #6930, #11248 avoid infinite recursion
+        dirtyInstances.delete(instance)
+      })
     } else if (instance.appContext.reload) {
       // root instance mounted via createApp() has a reload method
       instance.appContext.reload()
@@ -146,24 +158,25 @@ function reload(id: string, newComp: HMRComponent) {
       window.location.reload()
     } else {
       console.warn(
-        '[HMR] Root or manually mounted instance modified. Full reload required.'
+        '[HMR] Root or manually mounted instance modified. Full reload required.',
       )
     }
+
+    // update custom element child style
+    if (instance.root.ce && instance !== instance.root) {
+      instance.root.ce._removeChildStyle(oldComp)
+    }
   }
 
   // 5. make sure to cleanup dirty hmr components after update
   queuePostFlushCb(() => {
-    for (const instance of instances) {
-      hmrDirtyComponents.delete(
-        normalizeClassComponent(instance.type as HMRComponent)
-      )
-    }
+    hmrDirtyComponents.clear()
   })
 }
 
 function updateComponentDef(
   oldComp: ComponentOptions,
-  newComp: ComponentOptions
+  newComp: ComponentOptions,
 ) {
   extend(oldComp, newComp)
   for (const key in oldComp) {
@@ -181,7 +194,7 @@ function tryWrap(fn: (id: string, arg: any) => any): Function {
       console.error(e)
       console.warn(
         `[HMR] Something went wrong during Vue component hot-reload. ` +
-          `Full reload required.`
+          `Full reload required.`,
       )
     }
   }
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 94d6e8f62..82972e171 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -1,47 +1,85 @@
 import {
-  VNode,
-  normalizeVNode,
-  Text,
-  Comment,
-  Static,
   Fragment,
-  VNodeHook,
-  createVNode,
+  Static,
+  Text,
+  Comment as VComment,
+  type VNode,
+  type VNodeHook,
   createTextVNode,
-  invokeVNodeHook
+  createVNode,
+  invokeVNodeHook,
+  normalizeVNode,
 } from './vnode'
 import { flushPostFlushCbs } from './scheduler'
-import { ComponentInternalInstance } from './component'
+import type { ComponentInternalInstance } from './component'
 import { invokeDirectiveHook } from './directives'
 import { warn } from './warning'
-import { PatchFlags, ShapeFlags, isReservedProp, isOn } from '@vue/shared'
-import { needTransition, RendererInternals } from './renderer'
+import {
+  PatchFlags,
+  ShapeFlags,
+  def,
+  getEscapedCssVarName,
+  includeBooleanAttr,
+  isBooleanAttr,
+  isKnownHtmlAttr,
+  isKnownSvgAttr,
+  isOn,
+  isRenderableAttrValue,
+  isReservedProp,
+  isString,
+  normalizeClass,
+  normalizeStyle,
+  stringifyStyle,
+} from '@vue/shared'
+import { type RendererInternals, needTransition } from './renderer'
 import { setRef } from './rendererTemplateRef'
 import {
-  SuspenseImpl,
-  SuspenseBoundary,
-  queueEffectWithSuspense
+  type SuspenseBoundary,
+  type SuspenseImpl,
+  queueEffectWithSuspense,
 } from './components/Suspense'
-import { TeleportImpl, TeleportVNode } from './components/Teleport'
+import type { TeleportImpl, TeleportVNode } from './components/Teleport'
 import { isAsyncWrapper } from './apiAsyncComponent'
+import { isReactive } from '@vue/reactivity'
 
 export type RootHydrateFunction = (
   vnode: VNode<Node, Element>,
-  container: (Element | ShadowRoot) & { _vnode?: VNode }
+  container: (Element | ShadowRoot) & { _vnode?: VNode },
 ) => void
 
-const enum DOMNodeTypes {
+export enum DOMNodeTypes {
   ELEMENT = 1,
   TEXT = 3,
-  COMMENT = 8
+  COMMENT = 8,
 }
 
-let hasMismatch = false
+let hasLoggedMismatchError = false
+const logMismatchError = () => {
+  if (__TEST__ || hasLoggedMismatchError) {
+    return
+  }
+  // this error should show up in production
+  console.error('Hydration completed but contains mismatches.')
+  hasLoggedMismatchError = true
+}
 
 const isSVGContainer = (container: Element) =>
-  /svg/.test(container.namespaceURI!) && container.tagName !== 'foreignObject'
+  container.namespaceURI!.includes('svg') &&
+  container.tagName !== 'foreignObject'
 
-const isComment = (node: Node): node is Comment =>
+const isMathMLContainer = (container: Element) =>
+  container.namespaceURI!.includes('MathML')
+
+const getContainerType = (
+  container: Element | ShadowRoot,
+): 'svg' | 'mathml' | undefined => {
+  if (container.nodeType !== DOMNodeTypes.ELEMENT) return undefined
+  if (isSVGContainer(container as Element)) return 'svg'
+  if (isMathMLContainer(container as Element)) return 'mathml'
+  return undefined
+}
+
+export const isComment = (node: Node): node is Comment =>
   node.nodeType === DOMNodeTypes.COMMENT
 
 // Note: hydration is DOM-specific
@@ -50,8 +88,18 @@ const isComment = (node: Node): node is Comment =>
 // Hydration also depends on some renderer internal logic which needs to be
 // passed in via arguments.
 export function createHydrationFunctions(
-  rendererInternals: RendererInternals<Node, Element>
-) {
+  rendererInternals: RendererInternals<Node, Element>,
+): [
+  RootHydrateFunction,
+  (
+    node: Node,
+    vnode: VNode,
+    parentComponent: ComponentInternalInstance | null,
+    parentSuspense: SuspenseBoundary | null,
+    slotScopeIds: string[] | null,
+    optimized?: boolean,
+  ) => Node | null,
+] {
   const {
     mt: mountComponent,
     p: patch,
@@ -62,30 +110,26 @@ export function createHydrationFunctions(
       parentNode,
       remove,
       insert,
-      createComment
-    }
+      createComment,
+    },
   } = rendererInternals
 
   const hydrate: RootHydrateFunction = (vnode, container) => {
     if (!container.hasChildNodes()) {
-      __DEV__ &&
+      ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
         warn(
           `Attempting to hydrate existing markup but container is empty. ` +
-            `Performing full mount instead.`
+            `Performing full mount instead.`,
         )
       patch(null, vnode, container)
       flushPostFlushCbs()
       container._vnode = vnode
       return
     }
-    hasMismatch = false
+
     hydrateNode(container.firstChild!, vnode, null, null, null)
     flushPostFlushCbs()
     container._vnode = vnode
-    if (hasMismatch && !__TEST__) {
-      // this error should show up in production
-      console.error(`Hydration completed but contains mismatches.`)
-    }
   }
 
   const hydrateNode = (
@@ -94,8 +138,9 @@ export function createHydrationFunctions(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized = false
+    optimized = false,
   ): Node | null => {
+    optimized = optimized || !!vnode.dynamicChildren
     const isFragmentStart = isComment(node) && node.data === '['
     const onMismatch = () =>
       handleMismatch(
@@ -104,7 +149,7 @@ export function createHydrationFunctions(
         parentComponent,
         parentSuspense,
         slotScopeIds,
-        isFragmentStart
+        isFragmentStart,
       )
 
     const { type, ref, shapeFlag, patchFlag } = vnode
@@ -112,18 +157,8 @@ export function createHydrationFunctions(
     vnode.el = node
 
     if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
-      if (!('__vnode' in node)) {
-        Object.defineProperty(node, '__vnode', {
-          value: vnode,
-          enumerable: false
-        })
-      }
-      if (!('__vueParentComponent' in node)) {
-        Object.defineProperty(node, '__vueParentComponent', {
-          value: parentComponent,
-          enumerable: false
-        })
-      }
+      def(node, '__vnode', vnode, true)
+      def(node, '__vueParentComponent', parentComponent, true)
     }
 
     if (patchFlag === PatchFlags.BAIL) {
@@ -145,21 +180,22 @@ export function createHydrationFunctions(
           }
         } else {
           if ((node as Text).data !== vnode.children) {
-            hasMismatch = true
-            __DEV__ &&
+            ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
               warn(
-                `Hydration text mismatch:` +
-                  `\n- Server rendered: ${JSON.stringify(
-                    (node as Text).data
-                  )}` +
-                  `\n- Client rendered: ${JSON.stringify(vnode.children)}`
+                `Hydration text mismatch in`,
+                node.parentNode,
+                `\n  - rendered on server: ${JSON.stringify(
+                  (node as Text).data,
+                )}` +
+                  `\n  - expected on client: ${JSON.stringify(vnode.children)}`,
               )
+            logMismatchError()
             ;(node as Text).data = vnode.children as string
           }
           nextNode = nextSibling(node)
         }
         break
-      case Comment:
+      case VComment:
         if (isTemplateNode(node)) {
           nextNode = nextSibling(node)
           // wrapped <transition appear>
@@ -167,7 +203,7 @@ export function createHydrationFunctions(
           replaceNode(
             (vnode.el = node.content.firstChild!),
             node,
-            parentComponent
+            parentComponent,
           )
         } else if (domType !== DOMNodeTypes.COMMENT || isFragmentStart) {
           nextNode = onMismatch()
@@ -213,7 +249,7 @@ export function createHydrationFunctions(
             parentComponent,
             parentSuspense,
             slotScopeIds,
-            optimized
+            optimized,
           )
         }
         break
@@ -233,7 +269,7 @@ export function createHydrationFunctions(
               parentComponent,
               parentSuspense,
               slotScopeIds,
-              optimized
+              optimized,
             )
           }
         } else if (shapeFlag & ShapeFlags.COMPONENT) {
@@ -263,8 +299,8 @@ export function createHydrationFunctions(
             null,
             parentComponent,
             parentSuspense,
-            isSVGContainer(container),
-            optimized
+            getContainerType(container),
+            optimized,
           )
 
           // #3787
@@ -297,7 +333,7 @@ export function createHydrationFunctions(
               slotScopeIds,
               optimized,
               rendererInternals,
-              hydrateChildren
+              hydrateChildren,
             )
           }
         } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
@@ -306,13 +342,13 @@ export function createHydrationFunctions(
             vnode,
             parentComponent,
             parentSuspense,
-            isSVGContainer(parentNode(node)!),
+            getContainerType(parentNode(node)!),
             slotScopeIds,
             optimized,
             rendererInternals,
-            hydrateNode
+            hydrateNode,
           )
-        } else if (__DEV__) {
+        } else if (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) {
           warn('Invalid HostVNode type:', type, `(${typeof type})`)
         }
     }
@@ -330,7 +366,7 @@ export function createHydrationFunctions(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     optimized = optimized || !!vnode.dynamicChildren
     const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode
@@ -340,55 +376,10 @@ export function createHydrationFunctions(
     const forcePatch = type === 'input' || type === 'option'
     // skip props & children if this is hoisted static nodes
     // #5405 in dev, always hydrate children for HMR
-    if (__DEV__ || forcePatch || patchFlag !== PatchFlags.HOISTED) {
+    if (__DEV__ || forcePatch || patchFlag !== PatchFlags.CACHED) {
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, 'created')
       }
-      // props
-      if (props) {
-        if (
-          forcePatch ||
-          !optimized ||
-          patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.NEED_HYDRATION)
-        ) {
-          for (const key in props) {
-            if (
-              (forcePatch &&
-                (key.endsWith('value') || key === 'indeterminate')) ||
-              (isOn(key) && !isReservedProp(key)) ||
-              // force hydrate v-bind with .prop modifiers
-              key[0] === '.'
-            ) {
-              patchProp(
-                el,
-                key,
-                null,
-                props[key],
-                false,
-                undefined,
-                parentComponent
-              )
-            }
-          }
-        } else if (props.onClick) {
-          // Fast path for click listeners (which is most often) to avoid
-          // iterating through props.
-          patchProp(
-            el,
-            'onClick',
-            null,
-            props.onClick,
-            false,
-            undefined,
-            parentComponent
-          )
-        }
-      }
-      // vnode / directive hooks
-      let vnodeHooks: VNodeHook | null | undefined
-      if ((vnodeHooks = props && props.onVnodeBeforeMount)) {
-        invokeVNodeHook(vnodeHooks, parentComponent, vnode)
-      }
 
       // handle appear transition
       let needCallTransitionHooks = false
@@ -411,21 +402,6 @@ export function createHydrationFunctions(
         vnode.el = el = content
       }
 
-      if (dirs) {
-        invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
-      }
-
-      if (
-        (vnodeHooks = props && props.onVnodeMounted) ||
-        dirs ||
-        needCallTransitionHooks
-      ) {
-        queueEffectWithSuspense(() => {
-          vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode)
-          needCallTransitionHooks && transition!.enter(el)
-          dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')
-        }, parentSuspense)
-      }
       // children
       if (
         shapeFlag & ShapeFlags.ARRAY_CHILDREN &&
@@ -439,38 +415,129 @@ export function createHydrationFunctions(
           parentComponent,
           parentSuspense,
           slotScopeIds,
-          optimized
+          optimized,
         )
         let hasWarned = false
         while (next) {
-          hasMismatch = true
-          if (__DEV__ && !hasWarned) {
-            warn(
-              `Hydration children mismatch in <${vnode.type as string}>: ` +
-                `server rendered element contains more child nodes than client vdom.`
-            )
-            hasWarned = true
+          if (!isMismatchAllowed(el, MismatchTypes.CHILDREN)) {
+            if (
+              (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+              !hasWarned
+            ) {
+              warn(
+                `Hydration children mismatch on`,
+                el,
+                `\nServer rendered element contains more child nodes than client vdom.`,
+              )
+              hasWarned = true
+            }
+            logMismatchError()
           }
+
           // The SSRed DOM contains more nodes than it should. Remove them.
           const cur = next
           next = next.nextSibling
           remove(cur)
         }
       } else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
-        if (el.textContent !== vnode.children) {
-          hasMismatch = true
-          __DEV__ &&
-            warn(
-              `Hydration text content mismatch in <${
-                vnode.type as string
-              }>:\n` +
-                `- Server rendered: ${el.textContent}\n` +
-                `- Client rendered: ${vnode.children as string}`
-            )
+        // #11873 the HTML parser will "eat" the first newline when parsing
+        // <pre> and <textarea>, so if the client value starts with a newline,
+        // we need to remove it before comparing
+        let clientText = vnode.children as string
+        if (
+          clientText[0] === '\n' &&
+          (el.tagName === 'PRE' || el.tagName === 'TEXTAREA')
+        ) {
+          clientText = clientText.slice(1)
+        }
+        if (el.textContent !== clientText) {
+          if (!isMismatchAllowed(el, MismatchTypes.TEXT)) {
+            ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+              warn(
+                `Hydration text content mismatch on`,
+                el,
+                `\n  - rendered on server: ${el.textContent}` +
+                  `\n  - expected on client: ${vnode.children as string}`,
+              )
+            logMismatchError()
+          }
+
           el.textContent = vnode.children as string
         }
       }
+
+      // props
+      if (props) {
+        if (
+          __DEV__ ||
+          __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__ ||
+          forcePatch ||
+          !optimized ||
+          patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.NEED_HYDRATION)
+        ) {
+          const isCustomElement = el.tagName.includes('-')
+          for (const key in props) {
+            // check hydration mismatch
+            if (
+              (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+              // #11189 skip if this node has directives that have created hooks
+              // as it could have mutated the DOM in any possible way
+              !(dirs && dirs.some(d => d.dir.created)) &&
+              propHasMismatch(el, key, props[key], vnode, parentComponent)
+            ) {
+              logMismatchError()
+            }
+            if (
+              (forcePatch &&
+                (key.endsWith('value') || key === 'indeterminate')) ||
+              (isOn(key) && !isReservedProp(key)) ||
+              // force hydrate v-bind with .prop modifiers
+              key[0] === '.' ||
+              isCustomElement
+            ) {
+              patchProp(el, key, null, props[key], undefined, parentComponent)
+            }
+          }
+        } else if (props.onClick) {
+          // Fast path for click listeners (which is most often) to avoid
+          // iterating through props.
+          patchProp(
+            el,
+            'onClick',
+            null,
+            props.onClick,
+            undefined,
+            parentComponent,
+          )
+        } else if (patchFlag & PatchFlags.STYLE && isReactive(props.style)) {
+          // #11372: object style values are iterated during patch instead of
+          // render/normalization phase, but style patch is skipped during
+          // hydration, so we need to force iterate the object to track deps
+          for (const key in props.style) props.style[key]
+        }
+      }
+
+      // vnode / directive hooks
+      let vnodeHooks: VNodeHook | null | undefined
+      if ((vnodeHooks = props && props.onVnodeBeforeMount)) {
+        invokeVNodeHook(vnodeHooks, parentComponent, vnode)
+      }
+      if (dirs) {
+        invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
+      }
+      if (
+        (vnodeHooks = props && props.onVnodeMounted) ||
+        dirs ||
+        needCallTransitionHooks
+      ) {
+        queueEffectWithSuspense(() => {
+          vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode)
+          needCallTransitionHooks && transition!.enter(el)
+          dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')
+        }, parentSuspense)
+      }
     }
+
     return el.nextSibling
   }
 
@@ -481,7 +548,7 @@ export function createHydrationFunctions(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ): Node | null => {
     optimized = optimized || !!parentVNode.dynamicChildren
     const children = parentVNode.children as VNode[]
@@ -491,26 +558,54 @@ export function createHydrationFunctions(
       const vnode = optimized
         ? children[i]
         : (children[i] = normalizeVNode(children[i]))
+      const isText = vnode.type === Text
       if (node) {
+        if (isText && !optimized) {
+          // #7285 possible consecutive text vnodes from manual render fns or
+          // JSX-compiled fns, but on the client the browser parses only 1 text
+          // node.
+          // look ahead for next possible text vnode
+          if (i + 1 < l && normalizeVNode(children[i + 1]).type === Text) {
+            // create an extra TextNode on the client for the next vnode to
+            // adopt
+            insert(
+              createText(
+                (node as Text).data.slice((vnode.children as string).length),
+              ),
+              container,
+              nextSibling(node),
+            )
+            ;(node as Text).data = vnode.children as string
+          }
+        }
         node = hydrateNode(
           node,
           vnode,
           parentComponent,
           parentSuspense,
           slotScopeIds,
-          optimized
+          optimized,
         )
-      } else if (vnode.type === Text && !vnode.children) {
-        continue
+      } else if (isText && !vnode.children) {
+        // #7215 create a TextNode for empty text node
+        // because server rendered HTML won't contain a text node
+        insert((vnode.el = createText('')), container)
       } else {
-        hasMismatch = true
-        if (__DEV__ && !hasWarned) {
-          warn(
-            `Hydration children mismatch in <${container.tagName.toLowerCase()}>: ` +
-              `server rendered element contains fewer child nodes than client vdom.`
-          )
-          hasWarned = true
+        if (!isMismatchAllowed(container, MismatchTypes.CHILDREN)) {
+          if (
+            (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+            !hasWarned
+          ) {
+            warn(
+              `Hydration children mismatch on`,
+              container,
+              `\nServer rendered element contains fewer child nodes than client vdom.`,
+            )
+            hasWarned = true
+          }
+          logMismatchError()
         }
+
         // the SSRed DOM didn't contain enough nodes. Mount the missing ones.
         patch(
           null,
@@ -519,8 +614,8 @@ export function createHydrationFunctions(
           null,
           parentComponent,
           parentSuspense,
-          isSVGContainer(container),
-          slotScopeIds
+          getContainerType(container),
+          slotScopeIds,
         )
       }
     }
@@ -533,7 +628,7 @@ export function createHydrationFunctions(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     const { slotScopeIds: fragmentSlotScopeIds } = vnode
     if (fragmentSlotScopeIds) {
@@ -550,14 +645,15 @@ export function createHydrationFunctions(
       parentComponent,
       parentSuspense,
       slotScopeIds,
-      optimized
+      optimized,
     )
     if (next && isComment(next) && next.data === ']') {
       return nextSibling((vnode.anchor = next))
     } else {
       // fragment didn't hydrate successfully, since we didn't get a end anchor
       // back. This should have led to node/children mismatch warnings.
-      hasMismatch = true
+      logMismatchError()
+
       // since the anchor is missing, we need to create one and insert it
       insert((vnode.anchor = createComment(`]`)), container, next)
       return next
@@ -570,21 +666,24 @@ export function createHydrationFunctions(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    isFragment: boolean
+    isFragment: boolean,
   ): Node | null => {
-    hasMismatch = true
-    __DEV__ &&
-      warn(
-        `Hydration node mismatch:\n- Client vnode:`,
-        vnode.type,
-        `\n- Server rendered DOM:`,
-        node,
-        node.nodeType === DOMNodeTypes.TEXT
-          ? `(text)`
-          : isComment(node) && node.data === '['
-            ? `(start of fragment)`
-            : ``
-      )
+    if (!isMismatchAllowed(node.parentElement!, MismatchTypes.CHILDREN)) {
+      ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+        warn(
+          `Hydration node mismatch:\n- rendered on server:`,
+          node,
+          node.nodeType === DOMNodeTypes.TEXT
+            ? `(text)`
+            : isComment(node) && node.data === '['
+              ? `(start of fragment)`
+              : ``,
+          `\n- expected on client:`,
+          vnode.type,
+        )
+      logMismatchError()
+    }
+
     vnode.el = null
 
     if (isFragment) {
@@ -611,8 +710,8 @@ export function createHydrationFunctions(
       next,
       parentComponent,
       parentSuspense,
-      isSVGContainer(container),
-      slotScopeIds
+      getContainerType(container),
+      slotScopeIds,
     )
     return next
   }
@@ -621,7 +720,7 @@ export function createHydrationFunctions(
   const locateClosingAnchor = (
     node: Node | null,
     open = '[',
-    close = ']'
+    close = ']',
   ): Node | null => {
     let match = 0
     while (node) {
@@ -643,7 +742,7 @@ export function createHydrationFunctions(
   const replaceNode = (
     newNode: Node,
     oldNode: Node,
-    parentComponent: ComponentInternalInstance | null
+    parentComponent: ComponentInternalInstance | null,
   ): void => {
     // replace node
     const parentNode = oldNode.parentNode
@@ -664,9 +763,221 @@ export function createHydrationFunctions(
   const isTemplateNode = (node: Node): node is HTMLTemplateElement => {
     return (
       node.nodeType === DOMNodeTypes.ELEMENT &&
-      (node as Element).tagName.toLowerCase() === 'template'
+      (node as Element).tagName === 'TEMPLATE'
     )
   }
 
-  return [hydrate, hydrateNode] as const
+  return [hydrate, hydrateNode]
+}
+
+/**
+ * Dev only
+ */
+function propHasMismatch(
+  el: Element,
+  key: string,
+  clientValue: any,
+  vnode: VNode,
+  instance: ComponentInternalInstance | null,
+): boolean {
+  let mismatchType: MismatchTypes | undefined
+  let mismatchKey: string | undefined
+  let actual: string | boolean | null | undefined
+  let expected: string | boolean | null | undefined
+  if (key === 'class') {
+    // classes might be in different order, but that doesn't affect cascade
+    // so we just need to check if the class lists contain the same classes.
+    actual = el.getAttribute('class')
+    expected = normalizeClass(clientValue)
+    if (!isSetEqual(toClassSet(actual || ''), toClassSet(expected))) {
+      mismatchType = MismatchTypes.CLASS
+      mismatchKey = `class`
+    }
+  } else if (key === 'style') {
+    // style might be in different order, but that doesn't affect cascade
+    actual = el.getAttribute('style') || ''
+    expected = isString(clientValue)
+      ? clientValue
+      : stringifyStyle(normalizeStyle(clientValue))
+    const actualMap = toStyleMap(actual)
+    const expectedMap = toStyleMap(expected)
+    // If `v-show=false`, `display: 'none'` should be added to expected
+    if (vnode.dirs) {
+      for (const { dir, value } of vnode.dirs) {
+        // @ts-expect-error only vShow has this internal name
+        if (dir.name === 'show' && !value) {
+          expectedMap.set('display', 'none')
+        }
+      }
+    }
+
+    if (instance) {
+      resolveCssVars(instance, vnode, expectedMap)
+    }
+
+    if (!isMapEqual(actualMap, expectedMap)) {
+      mismatchType = MismatchTypes.STYLE
+      mismatchKey = 'style'
+    }
+  } else if (
+    (el instanceof SVGElement && isKnownSvgAttr(key)) ||
+    (el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
+  ) {
+    if (isBooleanAttr(key)) {
+      actual = el.hasAttribute(key)
+      expected = includeBooleanAttr(clientValue)
+    } else if (clientValue == null) {
+      actual = el.hasAttribute(key)
+      expected = false
+    } else {
+      if (el.hasAttribute(key)) {
+        actual = el.getAttribute(key)
+      } else if (key === 'value' && el.tagName === 'TEXTAREA') {
+        // #10000 textarea.value can't be retrieved by `hasAttribute`
+        actual = (el as HTMLTextAreaElement).value
+      } else {
+        actual = false
+      }
+      expected = isRenderableAttrValue(clientValue)
+        ? String(clientValue)
+        : false
+    }
+    if (actual !== expected) {
+      mismatchType = MismatchTypes.ATTRIBUTE
+      mismatchKey = key
+    }
+  }
+
+  if (mismatchType != null && !isMismatchAllowed(el, mismatchType)) {
+    const format = (v: any) =>
+      v === false ? `(not rendered)` : `${mismatchKey}="${v}"`
+    const preSegment = `Hydration ${MismatchTypeString[mismatchType]} mismatch on`
+    const postSegment =
+      `\n  - rendered on server: ${format(actual)}` +
+      `\n  - expected on client: ${format(expected)}` +
+      `\n  Note: this mismatch is check-only. The DOM will not be rectified ` +
+      `in production due to performance overhead.` +
+      `\n  You should fix the source of the mismatch.`
+    if (__TEST__) {
+      // during tests, log the full message in one single string for easier
+      // debugging.
+      warn(`${preSegment} ${el.tagName}${postSegment}`)
+    } else {
+      warn(preSegment, el, postSegment)
+    }
+    return true
+  }
+  return false
+}
+
+function toClassSet(str: string): Set<string> {
+  return new Set(str.trim().split(/\s+/))
+}
+
+function isSetEqual(a: Set<string>, b: Set<string>): boolean {
+  if (a.size !== b.size) {
+    return false
+  }
+  for (const s of a) {
+    if (!b.has(s)) {
+      return false
+    }
+  }
+  return true
+}
+
+function toStyleMap(str: string): Map<string, string> {
+  const styleMap: Map<string, string> = new Map()
+  for (const item of str.split(';')) {
+    let [key, value] = item.split(':')
+    key = key.trim()
+    value = value && value.trim()
+    if (key && value) {
+      styleMap.set(key, value)
+    }
+  }
+  return styleMap
+}
+
+function isMapEqual(a: Map<string, string>, b: Map<string, string>): boolean {
+  if (a.size !== b.size) {
+    return false
+  }
+  for (const [key, value] of a) {
+    if (value !== b.get(key)) {
+      return false
+    }
+  }
+  return true
+}
+
+function resolveCssVars(
+  instance: ComponentInternalInstance,
+  vnode: VNode,
+  expectedMap: Map<string, string>,
+) {
+  const root = instance.subTree
+  if (
+    instance.getCssVars &&
+    (vnode === root ||
+      (root &&
+        root.type === Fragment &&
+        (root.children as VNode[]).includes(vnode)))
+  ) {
+    const cssVars = instance.getCssVars()
+    for (const key in cssVars) {
+      expectedMap.set(
+        `--${getEscapedCssVarName(key, false)}`,
+        String(cssVars[key]),
+      )
+    }
+  }
+  if (vnode === root && instance.parent) {
+    resolveCssVars(instance.parent, instance.vnode, expectedMap)
+  }
+}
+
+const allowMismatchAttr = 'data-allow-mismatch'
+
+enum MismatchTypes {
+  TEXT = 0,
+  CHILDREN = 1,
+  CLASS = 2,
+  STYLE = 3,
+  ATTRIBUTE = 4,
+}
+
+const MismatchTypeString: Record<MismatchTypes, string> = {
+  [MismatchTypes.TEXT]: 'text',
+  [MismatchTypes.CHILDREN]: 'children',
+  [MismatchTypes.CLASS]: 'class',
+  [MismatchTypes.STYLE]: 'style',
+  [MismatchTypes.ATTRIBUTE]: 'attribute',
+} as const
+
+function isMismatchAllowed(
+  el: Element | null,
+  allowedType: MismatchTypes,
+): boolean {
+  if (
+    allowedType === MismatchTypes.TEXT ||
+    allowedType === MismatchTypes.CHILDREN
+  ) {
+    while (el && !el.hasAttribute(allowMismatchAttr)) {
+      el = el.parentElement
+    }
+  }
+  const allowedAttr = el && el.getAttribute(allowMismatchAttr)
+  if (allowedAttr == null) {
+    return false
+  } else if (allowedAttr === '') {
+    return true
+  } else {
+    const list = allowedAttr.split(',')
+    // text is a subset of children
+    if (allowedType === MismatchTypes.TEXT && list.includes('children')) {
+      return true
+    }
+    return allowedAttr.split(',').includes(MismatchTypeString[allowedType])
+  }
 }
diff --git a/packages/runtime-core/src/hydrationStrategies.ts b/packages/runtime-core/src/hydrationStrategies.ts
new file mode 100644
index 000000000..bb98ea93c
--- /dev/null
+++ b/packages/runtime-core/src/hydrationStrategies.ts
@@ -0,0 +1,132 @@
+import { isString } from '@vue/shared'
+import { DOMNodeTypes, isComment } from './hydration'
+
+/**
+ * A lazy hydration strategy for async components.
+ * @param hydrate - call this to perform the actual hydration.
+ * @param forEachElement - iterate through the root elements of the component's
+ *                         non-hydrated DOM, accounting for possible fragments.
+ * @returns a teardown function to be called if the async component is unmounted
+ *          before it is hydrated. This can be used to e.g. remove DOM event
+ *          listeners.
+ */
+export type HydrationStrategy = (
+  hydrate: () => void,
+  forEachElement: (cb: (el: Element) => any) => void,
+) => (() => void) | void
+
+export type HydrationStrategyFactory<Options> = (
+  options?: Options,
+) => HydrationStrategy
+
+export const hydrateOnIdle: HydrationStrategyFactory<number> =
+  (timeout = 10000) =>
+  hydrate => {
+    const id = requestIdleCallback(hydrate, { timeout })
+    return () => cancelIdleCallback(id)
+  }
+
+function elementIsVisibleInViewport(el: Element) {
+  const { top, left, bottom, right } = el.getBoundingClientRect()
+  // eslint-disable-next-line no-restricted-globals
+  const { innerHeight, innerWidth } = window
+  return (
+    ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
+    ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
+  )
+}
+
+export const hydrateOnVisible: HydrationStrategyFactory<
+  IntersectionObserverInit
+> = opts => (hydrate, forEach) => {
+  const ob = new IntersectionObserver(entries => {
+    for (const e of entries) {
+      if (!e.isIntersecting) continue
+      ob.disconnect()
+      hydrate()
+      break
+    }
+  }, opts)
+  forEach(el => {
+    if (!(el instanceof Element)) return
+    if (elementIsVisibleInViewport(el)) {
+      hydrate()
+      ob.disconnect()
+      return false
+    }
+    ob.observe(el)
+  })
+  return () => ob.disconnect()
+}
+
+export const hydrateOnMediaQuery: HydrationStrategyFactory<string> =
+  query => hydrate => {
+    if (query) {
+      const mql = matchMedia(query)
+      if (mql.matches) {
+        hydrate()
+      } else {
+        mql.addEventListener('change', hydrate, { once: true })
+        return () => mql.removeEventListener('change', hydrate)
+      }
+    }
+  }
+
+export const hydrateOnInteraction: HydrationStrategyFactory<
+  keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap>
+> =
+  (interactions = []) =>
+  (hydrate, forEach) => {
+    if (isString(interactions)) interactions = [interactions]
+    let hasHydrated = false
+    const doHydrate = (e: Event) => {
+      if (!hasHydrated) {
+        hasHydrated = true
+        teardown()
+        hydrate()
+        // replay event
+        e.target!.dispatchEvent(new (e.constructor as any)(e.type, e))
+      }
+    }
+    const teardown = () => {
+      forEach(el => {
+        for (const i of interactions) {
+          el.removeEventListener(i, doHydrate)
+        }
+      })
+    }
+    forEach(el => {
+      for (const i of interactions) {
+        el.addEventListener(i, doHydrate, { once: true })
+      }
+    })
+    return teardown
+  }
+
+export function forEachElement(
+  node: Node,
+  cb: (el: Element) => void | false,
+): void {
+  // fragment
+  if (isComment(node) && node.data === '[') {
+    let depth = 1
+    let next = node.nextSibling
+    while (next) {
+      if (next.nodeType === DOMNodeTypes.ELEMENT) {
+        const result = cb(next as Element)
+        if (result === false) {
+          break
+        }
+      } else if (isComment(next)) {
+        if (next.data === ']') {
+          if (--depth === 0) break
+        } else if (next.data === '[') {
+          depth++
+        }
+      }
+      next = next.nextSibling
+    }
+  } else {
+    cb(node as Element)
+  }
+}
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 98aee757d..3871167b3 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -1,6 +1,6 @@
 // Core API ------------------------------------------------------------------
 
-export const version = __VERSION__
+export const version: string = __VERSION__
 export {
   // core
   reactive,
@@ -28,19 +28,21 @@ export {
   // effect
   effect,
   stop,
+  getCurrentWatcher,
+  onWatcherCleanup,
   ReactiveEffect,
   // effect scope
   effectScope,
   EffectScope,
   getCurrentScope,
-  onScopeDispose
+  onScopeDispose,
 } from '@vue/reactivity'
 export { computed } from './apiComputed'
 export {
   watch,
   watchEffect,
   watchPostEffect,
-  watchSyncEffect
+  watchSyncEffect,
 } from './apiWatch'
 export {
   onBeforeMount,
@@ -54,13 +56,22 @@ export {
   onRenderTracked,
   onRenderTriggered,
   onErrorCaptured,
-  onServerPrefetch
+  onServerPrefetch,
 } from './apiLifecycle'
 export { provide, inject, hasInjectionContext } from './apiInject'
 export { nextTick } from './scheduler'
 export { defineComponent } from './apiDefineComponent'
 export { defineAsyncComponent } from './apiAsyncComponent'
 export { useAttrs, useSlots } from './apiSetupHelpers'
+export { useModel } from './helpers/useModel'
+export { useTemplateRef } from './helpers/useTemplateRef'
+export { useId } from './helpers/useId'
+export {
+  hydrateOnIdle,
+  hydrateOnVisible,
+  hydrateOnMediaQuery,
+  hydrateOnInteraction,
+} from './hydrationStrategies'
 
 // <script setup> API ----------------------------------------------------------
 
@@ -73,7 +84,9 @@ export {
   defineSlots,
   defineModel,
   withDefaults,
-  useModel
+  type DefineProps,
+  type ModelRef,
+  type ComponentTypeEmits,
 } from './apiSetupHelpers'
 
 /**
@@ -83,7 +96,7 @@ export {
   mergeDefaults,
   mergeModels,
   createPropsRestProxy,
-  withAsyncContext
+  withAsyncContext,
 } from './apiSetupHelpers'
 
 // Advanced API ----------------------------------------------------------------
@@ -105,7 +118,7 @@ export { KeepAlive, type KeepAliveProps } from './components/KeepAlive'
 export {
   BaseTransition,
   BaseTransitionPropsValidators,
-  type BaseTransitionProps
+  type BaseTransitionProps,
 } from './components/BaseTransition'
 // For using custom directives
 export { withDirectives } from './directives'
@@ -116,19 +129,21 @@ export { useSSRContext, ssrContextKey } from './helpers/useSsrContext'
 
 export { createRenderer, createHydrationRenderer } from './renderer'
 export { queuePostFlushCb } from './scheduler'
-export { warn } from './warning'
+import { warn as _warn } from './warning'
+export const warn = (__DEV__ ? _warn : NOOP) as typeof _warn
+
 /** @internal */
 export { assertNumber } from './warning'
 export {
   handleError,
   callWithErrorHandling,
   callWithAsyncErrorHandling,
-  ErrorCodes
+  ErrorCodes,
 } from './errorHandling'
 export {
   resolveComponent,
   resolveDirective,
-  resolveDynamicComponent
+  resolveDynamicComponent,
 } from './helpers/resolveAssets'
 // For integration with runtime compiler
 export { registerRuntimeCompiler, isRuntimeOnly } from './component'
@@ -136,17 +151,37 @@ export {
   useTransitionState,
   resolveTransitionHooks,
   setTransitionHooks,
-  getTransitionRawChildren
+  getTransitionRawChildren,
 } from './components/BaseTransition'
 export { initCustomFormatter } from './customFormatter'
 
+import { ErrorTypeStrings as _ErrorTypeStrings } from './errorHandling'
+/**
+ * Runtime error messages. Only exposed in dev or esm builds.
+ * @internal
+ */
+export const ErrorTypeStrings = (
+  __ESM_BUNDLER__ || __CJS__ || __DEV__ ? _ErrorTypeStrings : null
+) as typeof _ErrorTypeStrings
+
 // For devtools
-export { devtools, setDevtoolsHook } from './devtools'
+import {
+  type DevtoolsHook,
+  devtools as _devtools,
+  setDevtoolsHook as _setDevtoolsHook,
+} from './devtools'
 
-// Types -------------------------------------------------------------------------
+export const devtools = (
+  __DEV__ || __ESM_BUNDLER__ ? _devtools : undefined
+) as DevtoolsHook
+export const setDevtoolsHook = (
+  __DEV__ || __ESM_BUNDLER__ ? _setDevtoolsHook : NOOP
+) as typeof _setDevtoolsHook
 
-import { VNode } from './vnode'
-import { ComponentInternalInstance } from './component'
+// Types -----------------------------------------------------------------------
+
+import type { VNode } from './vnode'
+import type { ComponentInternalInstance } from './component'
 
 // Augment Ref unwrap bail types.
 declare module '@vue/reactivity' {
@@ -187,15 +222,18 @@ export type {
   DebuggerOptions,
   DebuggerEvent,
   DebuggerEventExtraInfo,
-  Raw
+  Raw,
+  Reactive,
 } from '@vue/reactivity'
 export type {
+  MultiWatchSources,
   WatchEffect,
   WatchOptions,
-  WatchOptionsBase,
+  WatchEffectOptions as WatchOptionsBase,
   WatchCallback,
   WatchSource,
-  WatchStopHandle
+  WatchHandle,
+  WatchStopHandle,
 } from './apiWatch'
 export type { InjectionKey } from './apiInject'
 export type {
@@ -203,8 +241,10 @@ export type {
   AppConfig,
   AppContext,
   Plugin,
+  ObjectPlugin,
+  FunctionPlugin,
   CreateAppFunction,
-  OptionMergeFunction
+  OptionMergeFunction,
 } from './apiCreateApp'
 export type {
   VNode,
@@ -212,7 +252,7 @@ export type {
   VNodeTypes,
   VNodeProps,
   VNodeArrayChildren,
-  VNodeNormalizedChildren
+  VNodeNormalizedChildren,
 } from './vnode'
 export type {
   Component,
@@ -221,15 +261,20 @@ export type {
   ComponentInternalInstance,
   SetupContext,
   ComponentCustomProps,
-  AllowedComponentProps
+  AllowedComponentProps,
+  GlobalComponents,
+  GlobalDirectives,
+  ComponentInstance,
+  ComponentCustomElementInterface,
 } from './component'
-export type { DefineComponent } from './apiDefineComponent'
+export type {
+  DefineComponent,
+  DefineSetupFnComponent,
+  PublicProps,
+} from './apiDefineComponent'
 export type {
   ComponentOptions,
   ComponentOptionsMixin,
-  ComponentOptionsWithoutProps,
-  ComponentOptionsWithObjectProps,
-  ComponentOptionsWithArrayProps,
   ComponentCustomOptions,
   ComponentOptionsBase,
   ComponentProvideOptions,
@@ -237,13 +282,24 @@ export type {
   MethodOptions,
   ComputedOptions,
   RuntimeCompilerOptions,
-  ComponentInjectOptions
+  ComponentInjectOptions,
+  // deprecated
+  ComponentOptionsWithoutProps,
+  ComponentOptionsWithArrayProps,
+  ComponentOptionsWithObjectProps,
 } from './componentOptions'
-export type { EmitsOptions, ObjectEmitsOptions } from './componentEmits'
+export type {
+  EmitsOptions,
+  ObjectEmitsOptions,
+  EmitsToProps,
+  ShortEmitsToObject,
+  EmitFn,
+} from './componentEmits'
 export type {
   ComponentPublicInstance,
   ComponentCustomProperties,
-  CreateComponentPublicInstance
+  CreateComponentPublicInstance,
+  CreateComponentPublicInstanceWithMixins,
 } from './componentPublicInstance'
 export type {
   Renderer,
@@ -251,7 +307,8 @@ export type {
   RendererElement,
   HydrationRenderer,
   RendererOptions,
-  RootRenderFunction
+  RootRenderFunction,
+  ElementNamespace,
 } from './renderer'
 export type { RootHydrateFunction } from './hydration'
 export type { Slot, Slots, SlotsType } from './componentSlots'
@@ -262,7 +319,7 @@ export type {
   ComponentObjectPropsOptions,
   ExtractPropTypes,
   ExtractPublicPropTypes,
-  ExtractDefaultPropTypes
+  ExtractDefaultPropTypes,
 } from './componentProps'
 export type {
   Directive,
@@ -270,17 +327,21 @@ export type {
   DirectiveHook,
   ObjectDirective,
   FunctionDirective,
-  DirectiveArguments
+  DirectiveArguments,
 } from './directives'
 export type { SuspenseBoundary } from './components/Suspense'
 export type {
   TransitionState,
-  TransitionHooks
+  TransitionHooks,
 } from './components/BaseTransition'
 export type {
   AsyncComponentOptions,
-  AsyncComponentLoader
+  AsyncComponentLoader,
 } from './apiAsyncComponent'
+export type {
+  HydrationStrategy,
+  HydrationStrategyFactory,
+} from './hydrationStrategies'
 export type { HMRRuntime } from './hmr'
 
 // Internal API ----------------------------------------------------------------
@@ -294,7 +355,7 @@ export {
   withCtx,
   pushScopeId,
   popScopeId,
-  withScopeId
+  withScopeId,
 } from './componentRenderContext'
 export { renderList } from './helpers/renderList'
 export { toHandlers } from './helpers/toHandlers'
@@ -310,7 +371,7 @@ export {
   createStaticVNode,
   createElementVNode,
   createElementBlock,
-  guardReactiveProps
+  guardReactiveProps,
 } from './vnode'
 export {
   toDisplayString,
@@ -319,7 +380,7 @@ export {
   toHandlerKey,
   normalizeProps,
   normalizeClass,
-  normalizeStyle
+  normalizeStyle,
 } from '@vue/shared'
 
 // For test-utils
@@ -330,18 +391,39 @@ export { transformVNodeArgs } from './vnode'
 // **IMPORTANT** These APIs are exposed solely for @vue/server-renderer and may
 // change without notice between versions. User code should never rely on them.
 
-import { createComponentInstance, setupComponent } from './component'
+import {
+  createComponentInstance,
+  getComponentPublicInstance,
+  setupComponent,
+} from './component'
 import { renderComponentRoot } from './componentRenderUtils'
 import { setCurrentRenderingInstance } from './componentRenderContext'
 import { isVNode, normalizeVNode } from './vnode'
+import { ensureValidVNode } from './helpers/renderSlot'
+import { popWarningContext, pushWarningContext } from './warning'
 
-const _ssrUtils = {
+const _ssrUtils: {
+  createComponentInstance: typeof createComponentInstance
+  setupComponent: typeof setupComponent
+  renderComponentRoot: typeof renderComponentRoot
+  setCurrentRenderingInstance: typeof setCurrentRenderingInstance
+  isVNode: typeof isVNode
+  normalizeVNode: typeof normalizeVNode
+  getComponentPublicInstance: typeof getComponentPublicInstance
+  ensureValidVNode: typeof ensureValidVNode
+  pushWarningContext: typeof pushWarningContext
+  popWarningContext: typeof popWarningContext
+} = {
   createComponentInstance,
   setupComponent,
   renderComponentRoot,
   setCurrentRenderingInstance,
   isVNode,
-  normalizeVNode
+  normalizeVNode,
+  getComponentPublicInstance,
+  ensureValidVNode,
+  pushWarningContext,
+  popWarningContext,
 }
 
 /**
@@ -352,30 +434,39 @@ export const ssrUtils = (__SSR__ ? _ssrUtils : null) as typeof _ssrUtils
 
 // 2.x COMPAT ------------------------------------------------------------------
 
-export { DeprecationTypes } from './compat/compatConfig'
+import { DeprecationTypes as _DeprecationTypes } from './compat/compatConfig'
 export type { CompatVue } from './compat/global'
 export type { LegacyConfig } from './compat/globalConfig'
 
 import { warnDeprecation } from './compat/compatConfig'
 import { createCompatVue } from './compat/global'
 import {
-  isCompatEnabled,
   checkCompatEnabled,
-  softAssertCompatEnabled
+  isCompatEnabled,
+  softAssertCompatEnabled,
 } from './compat/compatConfig'
 import { resolveFilter as _resolveFilter } from './helpers/resolveAssets'
+import { NOOP } from '@vue/shared'
 
 /**
  * @internal only exposed in compat builds
  */
-export const resolveFilter = __COMPAT__ ? _resolveFilter : null
+export const resolveFilter: typeof _resolveFilter | null = __COMPAT__
+  ? _resolveFilter
+  : null
 
-const _compatUtils = {
+const _compatUtils: {
+  warnDeprecation: typeof warnDeprecation
+  createCompatVue: typeof createCompatVue
+  isCompatEnabled: typeof isCompatEnabled
+  checkCompatEnabled: typeof checkCompatEnabled
+  softAssertCompatEnabled: typeof softAssertCompatEnabled
+} = {
   warnDeprecation,
   createCompatVue,
   isCompatEnabled,
   checkCompatEnabled,
-  softAssertCompatEnabled
+  softAssertCompatEnabled,
 }
 
 /**
@@ -384,3 +475,7 @@ const _compatUtils = {
 export const compatUtils = (
   __COMPAT__ ? _compatUtils : null
 ) as typeof _compatUtils
+
+export const DeprecationTypes = (
+  __COMPAT__ ? _DeprecationTypes : null
+) as typeof _DeprecationTypes
diff --git a/packages/runtime-core/src/internalObject.ts b/packages/runtime-core/src/internalObject.ts
new file mode 100644
index 000000000..2b2fc4a1f
--- /dev/null
+++ b/packages/runtime-core/src/internalObject.ts
@@ -0,0 +1,13 @@
+/**
+ * Used during vnode props/slots normalization to check if the vnode props/slots
+ * are the internal attrs / slots object of a component via
+ * `Object.getPrototypeOf`. This is more performant than defining a
+ * non-enumerable property. (one of the optimizations done for ssr-benchmark)
+ */
+const internalObjectProto = {}
+
+export const createInternalObject = (): any =>
+  Object.create(internalObjectProto)
+
+export const isInternalObject = (obj: object): boolean =>
+  Object.getPrototypeOf(obj) === internalObjectProto
diff --git a/packages/runtime-core/src/profiling.ts b/packages/runtime-core/src/profiling.ts
index 9b0f98526..1984f5a21 100644
--- a/packages/runtime-core/src/profiling.ts
+++ b/packages/runtime-core/src/profiling.ts
@@ -1,5 +1,8 @@
 /* eslint-disable no-restricted-globals */
-import { ComponentInternalInstance, formatComponentName } from './component'
+import {
+  type ComponentInternalInstance,
+  formatComponentName,
+} from './component'
 import { devtoolsPerfEnd, devtoolsPerfStart } from './devtools'
 
 let supported: boolean
@@ -7,8 +10,8 @@ let perf: Performance
 
 export function startMeasure(
   instance: ComponentInternalInstance,
-  type: string
-) {
+  type: string,
+): void {
   if (instance.appContext.config.performance && isSupported()) {
     perf.mark(`vue-${type}-${instance.uid}`)
   }
@@ -18,7 +21,10 @@ export function startMeasure(
   }
 }
 
-export function endMeasure(instance: ComponentInternalInstance, type: string) {
+export function endMeasure(
+  instance: ComponentInternalInstance,
+  type: string,
+): void {
   if (instance.appContext.config.performance && isSupported()) {
     const startTag = `vue-${type}-${instance.uid}`
     const endTag = startTag + `:end`
@@ -26,7 +32,7 @@ export function endMeasure(instance: ComponentInternalInstance, type: string) {
     perf.measure(
       `<${formatComponentName(instance, instance.type)}> ${type}`,
       startTag,
-      endTag
+      endTag,
     )
     perf.clearMarks(startTag)
     perf.clearMarks(endTag)
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 8a3b4ffa3..90cc22f54 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -1,78 +1,91 @@
 import {
-  Text,
-  Fragment,
   Comment,
-  cloneIfMounted,
-  normalizeVNode,
-  VNode,
-  VNodeArrayChildren,
-  createVNode,
-  isSameVNodeType,
+  Fragment,
   Static,
-  VNodeHook,
-  VNodeProps,
-  invokeVNodeHook
+  Text,
+  type VNode,
+  type VNodeArrayChildren,
+  type VNodeHook,
+  type VNodeProps,
+  cloneIfMounted,
+  createVNode,
+  invokeVNodeHook,
+  isSameVNodeType,
+  normalizeVNode,
 } from './vnode'
 import {
-  ComponentInternalInstance,
-  ComponentOptions,
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type Data,
+  type LifecycleHook,
   createComponentInstance,
-  Data,
-  setupComponent
+  setupComponent,
 } from './component'
 import {
   filterSingleRoot,
   renderComponentRoot,
   shouldUpdateComponent,
-  updateHOCHostEl
+  updateHOCHostEl,
 } from './componentRenderUtils'
 import {
-  EMPTY_OBJ,
   EMPTY_ARR,
-  isReservedProp,
+  EMPTY_OBJ,
+  NOOP,
   PatchFlags,
   ShapeFlags,
-  NOOP,
+  def,
+  getGlobalThis,
   invokeArrayFns,
   isArray,
-  getGlobalThis
+  isReservedProp,
 } from '@vue/shared'
 import {
+  type SchedulerJob,
+  SchedulerJobFlags,
+  type SchedulerJobs,
+  flushPostFlushCbs,
+  flushPreFlushCbs,
   queueJob,
   queuePostFlushCb,
-  flushPostFlushCbs,
-  invalidateJob,
-  flushPreFlushCbs,
-  SchedulerJob
 } from './scheduler'
-import { pauseTracking, resetTracking, ReactiveEffect } from '@vue/reactivity'
+import {
+  EffectFlags,
+  ReactiveEffect,
+  pauseTracking,
+  resetTracking,
+} from '@vue/reactivity'
 import { updateProps } from './componentProps'
 import { updateSlots } from './componentSlots'
-import { pushWarningContext, popWarningContext, warn } from './warning'
-import { createAppAPI, CreateAppFunction } from './apiCreateApp'
+import { popWarningContext, pushWarningContext, warn } from './warning'
+import { type CreateAppFunction, createAppAPI } from './apiCreateApp'
 import { setRef } from './rendererTemplateRef'
 import {
-  SuspenseBoundary,
+  type SuspenseBoundary,
+  type SuspenseImpl,
+  isSuspense,
   queueEffectWithSuspense,
-  SuspenseImpl
 } from './components/Suspense'
-import { TeleportImpl, TeleportVNode } from './components/Teleport'
-import { isKeepAlive, KeepAliveContext } from './components/KeepAlive'
-import { registerHMR, unregisterHMR, isHmrUpdating } from './hmr'
-import { createHydrationFunctions, RootHydrateFunction } from './hydration'
+import {
+  TeleportEndKey,
+  type TeleportImpl,
+  type TeleportVNode,
+} from './components/Teleport'
+import { type KeepAliveContext, isKeepAlive } from './components/KeepAlive'
+import { isHmrUpdating, registerHMR, unregisterHMR } from './hmr'
+import { type RootHydrateFunction, createHydrationFunctions } from './hydration'
 import { invokeDirectiveHook } from './directives'
-import { startMeasure, endMeasure } from './profiling'
+import { endMeasure, startMeasure } from './profiling'
 import {
   devtoolsComponentAdded,
   devtoolsComponentRemoved,
   devtoolsComponentUpdated,
-  setDevtoolsHook
+  setDevtoolsHook,
 } from './devtools'
 import { initFeatureFlags } from './featureFlags'
 import { isAsyncWrapper } from './apiAsyncComponent'
 import { isCompatEnabled } from './compat/compatConfig'
 import { DeprecationTypes } from './compat/compatConfig'
-import { TransitionHooks } from './components/BaseTransition'
+import type { TransitionHooks } from './components/BaseTransition'
 
 export interface Renderer<HostElement = RendererElement> {
   render: RootRenderFunction<HostElement>
@@ -83,34 +96,33 @@ export interface HydrationRenderer extends Renderer<Element | ShadowRoot> {
   hydrate: RootHydrateFunction
 }
 
+export type ElementNamespace = 'svg' | 'mathml' | undefined
+
 export type RootRenderFunction<HostElement = RendererElement> = (
   vnode: VNode | null,
   container: HostElement,
-  isSVG?: boolean
+  namespace?: ElementNamespace,
 ) => void
 
 export interface RendererOptions<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement = RendererElement,
 > {
   patchProp(
     el: HostElement,
     key: string,
     prevValue: any,
     nextValue: any,
-    isSVG?: boolean,
-    prevChildren?: VNode<HostNode, HostElement>[],
+    namespace?: ElementNamespace,
     parentComponent?: ComponentInternalInstance | null,
-    parentSuspense?: SuspenseBoundary | null,
-    unmountChildren?: UnmountChildrenFn
   ): void
   insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void
   remove(el: HostNode): void
   createElement(
     type: string,
-    isSVG?: boolean,
+    namespace?: ElementNamespace,
     isCustomizedBuiltIn?: string,
-    vnodeProps?: (VNodeProps & { [key: string]: any }) | null
+    vnodeProps?: (VNodeProps & { [key: string]: any }) | null,
   ): HostElement
   createText(text: string): HostNode
   createComment(text: string): HostNode
@@ -125,9 +137,9 @@ export interface RendererOptions<
     content: string,
     parent: HostElement,
     anchor: HostNode | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     start?: HostNode | null,
-    end?: HostNode | null
+    end?: HostNode | null,
   ): [HostNode, HostNode]
 }
 
@@ -136,7 +148,7 @@ export interface RendererOptions<
 // functions provided via options, so the internal constraint is really just
 // a generic object.
 export interface RendererNode {
-  [key: string]: any
+  [key: string | symbol]: any
 }
 
 export interface RendererElement extends RendererNode {}
@@ -146,7 +158,7 @@ export interface RendererElement extends RendererNode {}
 // to optimize bundle size.
 export interface RendererInternals<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement = RendererElement,
 > {
   p: PatchFn
   um: UnmountFn
@@ -170,9 +182,9 @@ type PatchFn = (
   anchor?: RendererNode | null,
   parentComponent?: ComponentInternalInstance | null,
   parentSuspense?: SuspenseBoundary | null,
-  isSVG?: boolean,
+  namespace?: ElementNamespace,
   slotScopeIds?: string[] | null,
-  optimized?: boolean
+  optimized?: boolean,
 ) => void
 
 type MountChildrenFn = (
@@ -181,10 +193,10 @@ type MountChildrenFn = (
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
-  start?: number
+  start?: number,
 ) => void
 
 type PatchChildrenFn = (
@@ -194,9 +206,9 @@ type PatchChildrenFn = (
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
-  optimized: boolean
+  optimized: boolean,
 ) => void
 
 type PatchBlockChildrenFn = (
@@ -205,8 +217,8 @@ type PatchBlockChildrenFn = (
   fallbackContainer: RendererElement,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
-  slotScopeIds: string[] | null
+  namespace: ElementNamespace,
+  slotScopeIds: string[] | null,
 ) => void
 
 type MoveFn = (
@@ -214,7 +226,7 @@ type MoveFn = (
   container: RendererElement,
   anchor: RendererNode | null,
   type: MoveType,
-  parentSuspense?: SuspenseBoundary | null
+  parentSuspense?: SuspenseBoundary | null,
 ) => void
 
 type NextFn = (vnode: VNode) => RendererNode | null
@@ -224,7 +236,7 @@ type UnmountFn = (
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
   doRemove?: boolean,
-  optimized?: boolean
+  optimized?: boolean,
 ) => void
 
 type RemoveFn = (vnode: VNode) => void
@@ -235,7 +247,7 @@ type UnmountChildrenFn = (
   parentSuspense: SuspenseBoundary | null,
   doRemove?: boolean,
   optimized?: boolean,
-  start?: number
+  start?: number,
 ) => void
 
 export type MountComponentFn = (
@@ -244,15 +256,15 @@ export type MountComponentFn = (
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
-  optimized: boolean
+  namespace: ElementNamespace,
+  optimized: boolean,
 ) => void
 
 type ProcessTextOrCommentFn = (
   n1: VNode | null,
   n2: VNode,
   container: RendererElement,
-  anchor: RendererNode | null
+  anchor: RendererNode | null,
 ) => void
 
 export type SetupRenderEffectFn = (
@@ -261,17 +273,20 @@ export type SetupRenderEffectFn = (
   container: RendererElement,
   anchor: RendererNode | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
-  optimized: boolean
+  namespace: ElementNamespace,
+  optimized: boolean,
 ) => void
 
-export const enum MoveType {
+export enum MoveType {
   ENTER,
   LEAVE,
-  REORDER
+  REORDER,
 }
 
-export const queuePostRenderEffect = __FEATURE_SUSPENSE__
+export const queuePostRenderEffect: (
+  fn: SchedulerJobs,
+  suspense: SuspenseBoundary | null,
+) => void = __FEATURE_SUSPENSE__
   ? __TEST__
     ? // vitest can't seem to handle eager circular dependency
       (fn: Function | Function[], suspense: SuspenseBoundary | null) =>
@@ -296,8 +311,8 @@ export const queuePostRenderEffect = __FEATURE_SUSPENSE__
  */
 export function createRenderer<
   HostNode = RendererNode,
-  HostElement = RendererElement
->(options: RendererOptions<HostNode, HostElement>) {
+  HostElement = RendererElement,
+>(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement> {
   return baseCreateRenderer<HostNode, HostElement>(options)
 }
 
@@ -305,27 +320,27 @@ export function createRenderer<
 // Hydration logic is only used when calling this function, making it
 // tree-shakable.
 export function createHydrationRenderer(
-  options: RendererOptions<Node, Element>
-) {
+  options: RendererOptions<Node, Element>,
+): HydrationRenderer {
   return baseCreateRenderer(options, createHydrationFunctions)
 }
 
 // overload 1: no hydration
 function baseCreateRenderer<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement = RendererElement,
 >(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement>
 
 // overload 2: with hydration
 function baseCreateRenderer(
   options: RendererOptions<Node, Element>,
-  createHydrationFns: typeof createHydrationFunctions
+  createHydrationFns: typeof createHydrationFunctions,
 ): HydrationRenderer
 
 // implementation
 function baseCreateRenderer(
   options: RendererOptions,
-  createHydrationFns?: typeof createHydrationFunctions
+  createHydrationFns?: typeof createHydrationFunctions,
 ): any {
   // compile-time feature flags check
   if (__ESM_BUNDLER__ && !__TEST__) {
@@ -350,7 +365,7 @@ function baseCreateRenderer(
     parentNode: hostParentNode,
     nextSibling: hostNextSibling,
     setScopeId: hostSetScopeId = NOOP,
-    insertStaticContent: hostInsertStaticContent
+    insertStaticContent: hostInsertStaticContent,
   } = options
 
   // Note: functions inside this closure should use `const xxx = () => {}`
@@ -362,9 +377,9 @@ function baseCreateRenderer(
     anchor = null,
     parentComponent = null,
     parentSuspense = null,
-    isSVG = false,
+    namespace = undefined,
     slotScopeIds = null,
-    optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
+    optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren,
   ) => {
     if (n1 === n2) {
       return
@@ -392,9 +407,9 @@ function baseCreateRenderer(
         break
       case Static:
         if (n1 == null) {
-          mountStaticNode(n2, container, anchor, isSVG)
+          mountStaticNode(n2, container, anchor, namespace)
         } else if (__DEV__) {
-          patchStaticNode(n1, n2, container, isSVG)
+          patchStaticNode(n1, n2, container, namespace)
         }
         break
       case Fragment:
@@ -405,9 +420,9 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         break
       default:
@@ -419,9 +434,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
         } else if (shapeFlag & ShapeFlags.COMPONENT) {
           processComponent(
@@ -431,9 +446,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
         } else if (shapeFlag & ShapeFlags.TELEPORT) {
           ;(type as typeof TeleportImpl).process(
@@ -443,10 +458,10 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized,
-            internals
+            internals,
           )
         } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
           ;(type as typeof SuspenseImpl).process(
@@ -456,10 +471,10 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized,
-            internals
+            internals,
           )
         } else if (__DEV__) {
           warn('Invalid VNode type:', type, `(${typeof type})`)
@@ -477,7 +492,7 @@ function baseCreateRenderer(
       hostInsert(
         (n2.el = hostCreateText(n2.children as string)),
         container,
-        anchor
+        anchor,
       )
     } else {
       const el = (n2.el = n1.el!)
@@ -491,13 +506,13 @@ function baseCreateRenderer(
     n1,
     n2,
     container,
-    anchor
+    anchor,
   ) => {
     if (n1 == null) {
       hostInsert(
         (n2.el = hostCreateComment((n2.children as string) || '')),
         container,
-        anchor
+        anchor,
       )
     } else {
       // there's no support for dynamic comments
@@ -509,7 +524,7 @@ function baseCreateRenderer(
     n2: VNode,
     container: RendererElement,
     anchor: RendererNode | null,
-    isSVG: boolean
+    namespace: ElementNamespace,
   ) => {
     // static nodes are only present when used with compiler-dom/runtime-dom
     // which guarantees presence of hostInsertStaticContent.
@@ -517,9 +532,9 @@ function baseCreateRenderer(
       n2.children as string,
       container,
       anchor,
-      isSVG,
+      namespace,
       n2.el,
-      n2.anchor
+      n2.anchor,
     )
   }
 
@@ -530,7 +545,7 @@ function baseCreateRenderer(
     n1: VNode,
     n2: VNode,
     container: RendererElement,
-    isSVG: boolean
+    namespace: ElementNamespace,
   ) => {
     // static nodes are only patched during dev for HMR
     if (n2.children !== n1.children) {
@@ -542,7 +557,7 @@ function baseCreateRenderer(
         n2.children as string,
         container,
         anchor,
-        isSVG
+        namespace,
       )
     } else {
       n2.el = n1.el
@@ -553,7 +568,7 @@ function baseCreateRenderer(
   const moveStaticNode = (
     { el, anchor }: VNode,
     container: RendererElement,
-    nextSibling: RendererNode | null
+    nextSibling: RendererNode | null,
   ) => {
     let next
     while (el && el !== anchor) {
@@ -581,11 +596,16 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
-    isSVG = isSVG || n2.type === 'svg'
+    if (n2.type === 'svg') {
+      namespace = 'svg'
+    } else if (n2.type === 'math') {
+      namespace = 'mathml'
+    }
+
     if (n1 == null) {
       mountElement(
         n2,
@@ -593,9 +613,9 @@ function baseCreateRenderer(
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
     } else {
       patchElement(
@@ -603,9 +623,9 @@ function baseCreateRenderer(
         n2,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
     }
   }
@@ -616,19 +636,19 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     let el: RendererElement
     let vnodeHook: VNodeHook | undefined | null
-    const { type, props, shapeFlag, transition, dirs } = vnode
+    const { props, shapeFlag, transition, dirs } = vnode
 
     el = vnode.el = hostCreateElement(
       vnode.type as string,
-      isSVG,
+      namespace,
       props && props.is,
-      props
+      props,
     )
 
     // mount children first, since some props may rely on child content
@@ -642,9 +662,9 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        isSVG && type !== 'foreignObject',
+        resolveChildrenNamespace(vnode, namespace),
         slotScopeIds,
-        optimized
+        optimized,
       )
     }
 
@@ -657,17 +677,7 @@ function baseCreateRenderer(
     if (props) {
       for (const key in props) {
         if (key !== 'value' && !isReservedProp(key)) {
-          hostPatchProp(
-            el,
-            key,
-            null,
-            props[key],
-            isSVG,
-            vnode.children as VNode[],
-            parentComponent,
-            parentSuspense,
-            unmountChildren
-          )
+          hostPatchProp(el, key, null, props[key], namespace, parentComponent)
         }
       }
       /**
@@ -680,7 +690,7 @@ function baseCreateRenderer(
        * affect non-DOM renderers)
        */
       if ('value' in props) {
-        hostPatchProp(el, 'value', null, props.value)
+        hostPatchProp(el, 'value', null, props.value, namespace)
       }
       if ((vnodeHook = props.onVnodeBeforeMount)) {
         invokeVNodeHook(vnodeHook, parentComponent, vnode)
@@ -688,15 +698,10 @@ function baseCreateRenderer(
     }
 
     if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
-      Object.defineProperty(el, '__vnode', {
-        value: vnode,
-        enumerable: false
-      })
-      Object.defineProperty(el, '__vueParentComponent', {
-        value: parentComponent,
-        enumerable: false
-      })
+      def(el, '__vnode', vnode, true)
+      def(el, '__vueParentComponent', parentComponent, true)
     }
+
     if (dirs) {
       invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
     }
@@ -725,7 +730,7 @@ function baseCreateRenderer(
     vnode: VNode,
     scopeId: string | null,
     slotScopeIds: string[] | null,
-    parentComponent: ComponentInternalInstance | null
+    parentComponent: ComponentInternalInstance | null,
   ) => {
     if (scopeId) {
       hostSetScopeId(el, scopeId)
@@ -745,14 +750,18 @@ function baseCreateRenderer(
         subTree =
           filterSingleRoot(subTree.children as VNodeArrayChildren) || subTree
       }
-      if (vnode === subTree) {
+      if (
+        vnode === subTree ||
+        (isSuspense(subTree.type) &&
+          (subTree.ssContent === vnode || subTree.ssFallback === vnode))
+      ) {
         const parentVNode = parentComponent.vnode
         setScopeId(
           el,
           parentVNode,
           parentVNode.scopeId,
           parentVNode.slotScopeIds,
-          parentComponent.parent
+          parentComponent.parent,
         )
       }
     }
@@ -764,10 +773,10 @@ function baseCreateRenderer(
     anchor,
     parentComponent,
     parentSuspense,
-    isSVG,
+    namespace: ElementNamespace,
     slotScopeIds,
     optimized,
-    start = 0
+    start = 0,
   ) => {
     for (let i = start; i < children.length; i++) {
       const child = (children[i] = optimized
@@ -780,9 +789,9 @@ function baseCreateRenderer(
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
     }
   }
@@ -792,11 +801,14 @@ function baseCreateRenderer(
     n2: VNode,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     const el = (n2.el = n1.el!)
+    if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+      el.__vnode = n2
+    }
     let { patchFlag, dynamicChildren, dirs } = n2
     // #1426 take the old vnode's patch flag into account since user may clone a
     // compiler-generated vnode, which de-opts to FULL_PROPS
@@ -822,7 +834,15 @@ function baseCreateRenderer(
       dynamicChildren = null
     }
 
-    const areChildrenSVG = isSVG && n2.type !== 'foreignObject'
+    // #9135 innerHTML / textContent unset needs to happen before possible
+    // new children mount
+    if (
+      (oldProps.innerHTML && newProps.innerHTML == null) ||
+      (oldProps.textContent && newProps.textContent == null)
+    ) {
+      hostSetElementText(el, '')
+    }
+
     if (dynamicChildren) {
       patchBlockChildren(
         n1.dynamicChildren!,
@@ -830,8 +850,8 @@ function baseCreateRenderer(
         el,
         parentComponent,
         parentSuspense,
-        areChildrenSVG,
-        slotScopeIds
+        resolveChildrenNamespace(n2, namespace),
+        slotScopeIds,
       )
       if (__DEV__) {
         // necessary for HMR
@@ -846,9 +866,9 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        areChildrenSVG,
+        resolveChildrenNamespace(n2, namespace),
         slotScopeIds,
-        false
+        false,
       )
     }
 
@@ -859,28 +879,20 @@ function baseCreateRenderer(
       // (i.e. at the exact same position in the source template)
       if (patchFlag & PatchFlags.FULL_PROPS) {
         // element props contain dynamic keys, full diff needed
-        patchProps(
-          el,
-          n2,
-          oldProps,
-          newProps,
-          parentComponent,
-          parentSuspense,
-          isSVG
-        )
+        patchProps(el, oldProps, newProps, parentComponent, namespace)
       } else {
         // class
         // this flag is matched when the element has dynamic class bindings.
         if (patchFlag & PatchFlags.CLASS) {
           if (oldProps.class !== newProps.class) {
-            hostPatchProp(el, 'class', null, newProps.class, isSVG)
+            hostPatchProp(el, 'class', null, newProps.class, namespace)
           }
         }
 
         // style
         // this flag is matched when the element has dynamic style bindings
         if (patchFlag & PatchFlags.STYLE) {
-          hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG)
+          hostPatchProp(el, 'style', oldProps.style, newProps.style, namespace)
         }
 
         // props
@@ -898,17 +910,7 @@ function baseCreateRenderer(
             const next = newProps[key]
             // #1471 force patch value
             if (next !== prev || key === 'value') {
-              hostPatchProp(
-                el,
-                key,
-                prev,
-                next,
-                isSVG,
-                n1.children as VNode[],
-                parentComponent,
-                parentSuspense,
-                unmountChildren
-              )
+              hostPatchProp(el, key, prev, next, namespace, parentComponent)
             }
           }
         }
@@ -923,15 +925,7 @@ function baseCreateRenderer(
       }
     } else if (!optimized && dynamicChildren == null) {
       // unoptimized, full diff
-      patchProps(
-        el,
-        n2,
-        oldProps,
-        newProps,
-        parentComponent,
-        parentSuspense,
-        isSVG
-      )
+      patchProps(el, oldProps, newProps, parentComponent, namespace)
     }
 
     if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {
@@ -949,8 +943,8 @@ function baseCreateRenderer(
     fallbackContainer,
     parentComponent,
     parentSuspense,
-    isSVG,
-    slotScopeIds
+    namespace: ElementNamespace,
+    slotScopeIds,
   ) => {
     for (let i = 0; i < newChildren.length; i++) {
       const oldVNode = oldChildren[i]
@@ -979,21 +973,19 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        true
+        true,
       )
     }
   }
 
   const patchProps = (
     el: RendererElement,
-    vnode: VNode,
     oldProps: Data,
     newProps: Data,
     parentComponent: ComponentInternalInstance | null,
-    parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean
+    namespace: ElementNamespace,
   ) => {
     if (oldProps !== newProps) {
       if (oldProps !== EMPTY_OBJ) {
@@ -1004,11 +996,8 @@ function baseCreateRenderer(
               key,
               oldProps[key],
               null,
-              isSVG,
-              vnode.children as VNode[],
+              namespace,
               parentComponent,
-              parentSuspense,
-              unmountChildren
             )
           }
         }
@@ -1020,21 +1009,11 @@ function baseCreateRenderer(
         const prev = oldProps[key]
         // defer patching value
         if (next !== prev && key !== 'value') {
-          hostPatchProp(
-            el,
-            key,
-            prev,
-            next,
-            isSVG,
-            vnode.children as VNode[],
-            parentComponent,
-            parentSuspense,
-            unmountChildren
-          )
+          hostPatchProp(el, key, prev, next, namespace, parentComponent)
         }
       }
       if ('value' in newProps) {
-        hostPatchProp(el, 'value', oldProps.value, newProps.value)
+        hostPatchProp(el, 'value', oldProps.value, newProps.value, namespace)
       }
     }
   }
@@ -1046,9 +1025,9 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''))!
     const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''))!
@@ -1080,14 +1059,18 @@ function baseCreateRenderer(
       // since they are either generated by the compiler, or implicitly created
       // from arrays.
       mountChildren(
-        n2.children as VNodeArrayChildren,
+        // #10007
+        // such fragment like `<></>` will be compiled into
+        // a fragment which doesn't have a children.
+        // In this case fallback to an empty array
+        (n2.children || []) as VNodeArrayChildren,
         container,
         fragmentEndAnchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
     } else {
       if (
@@ -1106,8 +1089,8 @@ function baseCreateRenderer(
           container,
           parentComponent,
           parentSuspense,
-          isSVG,
-          slotScopeIds
+          namespace,
+          slotScopeIds,
         )
         if (__DEV__) {
           // necessary for HMR
@@ -1134,9 +1117,9 @@ function baseCreateRenderer(
           fragmentEndAnchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
       }
     }
@@ -1149,9 +1132,9 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     n2.slotScopeIds = slotScopeIds
     if (n1 == null) {
@@ -1160,8 +1143,8 @@ function baseCreateRenderer(
           n2,
           container,
           anchor,
-          isSVG,
-          optimized
+          namespace,
+          optimized,
         )
       } else {
         mountComponent(
@@ -1170,8 +1153,8 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
-          optimized
+          namespace,
+          optimized,
         )
       }
     } else {
@@ -1185,8 +1168,8 @@ function baseCreateRenderer(
     anchor,
     parentComponent,
     parentSuspense,
-    isSVG,
-    optimized
+    namespace: ElementNamespace,
+    optimized,
   ) => {
     // 2.x compat may pre-create the component instance before actually
     // mounting
@@ -1197,7 +1180,7 @@ function baseCreateRenderer(
       (initialVNode.component = createComponentInstance(
         initialVNode,
         parentComponent,
-        parentSuspense
+        parentSuspense,
       ))
 
     if (__DEV__ && instance.type.__hmrId) {
@@ -1219,7 +1202,7 @@ function baseCreateRenderer(
       if (__DEV__) {
         startMeasure(instance, `init`)
       }
-      setupComponent(instance)
+      setupComponent(instance, false, optimized)
       if (__DEV__) {
         endMeasure(instance, `init`)
       }
@@ -1228,7 +1211,11 @@ function baseCreateRenderer(
     // setup() is async. This component relies on async logic to be resolved
     // before proceeding
     if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
-      parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect)
+      // avoid hydration for hmr updating
+      if (__DEV__ && isHmrUpdating) initialVNode.el = null
+
+      parentSuspense &&
+        parentSuspense.registerDep(instance, setupRenderEffect, optimized)
 
       // Give it a placeholder if this is not hydration
       // TODO handle self-defined fallback
@@ -1236,19 +1223,18 @@ function baseCreateRenderer(
         const placeholder = (instance.subTree = createVNode(Comment))
         processCommentNode(null, placeholder, container!, anchor)
       }
-      return
+    } else {
+      setupRenderEffect(
+        instance,
+        initialVNode,
+        container,
+        anchor,
+        parentSuspense,
+        namespace,
+        optimized,
+      )
     }
 
-    setupRenderEffect(
-      instance,
-      initialVNode,
-      container,
-      anchor,
-      parentSuspense,
-      isSVG,
-      optimized
-    )
-
     if (__DEV__) {
       popWarningContext()
       endMeasure(instance, `mount`)
@@ -1276,9 +1262,6 @@ function baseCreateRenderer(
       } else {
         // normal update
         instance.next = n2
-        // in case the child component is also queued, remove it to avoid
-        // double updating the same child component in the same flush.
-        invalidateJob(instance.update)
         // instance.update is the reactive effect.
         instance.update()
       }
@@ -1295,14 +1278,14 @@ function baseCreateRenderer(
     container,
     anchor,
     parentSuspense,
-    isSVG,
-    optimized
+    namespace: ElementNamespace,
+    optimized,
   ) => {
     const componentUpdateFn = () => {
       if (!instance.isMounted) {
         let vnodeHook: VNodeHook | null | undefined
         const { el, props } = initialVNode
-        const { bm, m, parent } = instance
+        const { bm, m, parent, root, type } = instance
         const isAsyncWrapperVNode = isAsyncWrapper(initialVNode)
 
         toggleRecurse(instance, false)
@@ -1343,25 +1326,31 @@ function baseCreateRenderer(
               instance.subTree,
               instance,
               parentSuspense,
-              null
+              null,
             )
             if (__DEV__) {
               endMeasure(instance, `hydrate`)
             }
           }
 
-          if (isAsyncWrapperVNode) {
-            ;(initialVNode.type as ComponentOptions).__asyncLoader!().then(
-              // note: we are moving the render call into an async callback,
-              // which means it won't track dependencies - but it's ok because
-              // a server-rendered async wrapper is already in resolved state
-              // and it will never need to change.
-              () => !instance.isUnmounted && hydrateSubTree()
+          if (
+            isAsyncWrapperVNode &&
+            (type as ComponentOptions).__asyncHydrate
+          ) {
+            ;(type as ComponentOptions).__asyncHydrate!(
+              el as Element,
+              instance,
+              hydrateSubTree,
             )
           } else {
             hydrateSubTree()
           }
         } else {
+          // custom element style injection
+          if (root.ce) {
+            root.ce._injectChildStyle(type)
+          }
+
           if (__DEV__) {
             startMeasure(instance, `render`)
           }
@@ -1379,7 +1368,7 @@ function baseCreateRenderer(
             anchor,
             instance,
             parentSuspense,
-            isSVG
+            namespace,
           )
           if (__DEV__) {
             endMeasure(instance, `patch`)
@@ -1398,7 +1387,7 @@ function baseCreateRenderer(
           const scopedInitialVNode = initialVNode
           queuePostRenderEffect(
             () => invokeVNodeHook(vnodeHook!, parent, scopedInitialVNode),
-            parentSuspense
+            parentSuspense,
           )
         }
         if (
@@ -1407,7 +1396,7 @@ function baseCreateRenderer(
         ) {
           queuePostRenderEffect(
             () => instance.emit('hook:mounted'),
-            parentSuspense
+            parentSuspense,
           )
         }
 
@@ -1427,7 +1416,7 @@ function baseCreateRenderer(
           ) {
             queuePostRenderEffect(
               () => instance.emit('hook:activated'),
-              parentSuspense
+              parentSuspense,
             )
           }
         }
@@ -1440,10 +1429,32 @@ function baseCreateRenderer(
         // #2458: deference mount-only object parameters to prevent memleaks
         initialVNode = container = anchor = null as any
       } else {
+        let { next, bu, u, parent, vnode } = instance
+
+        if (__FEATURE_SUSPENSE__) {
+          const nonHydratedAsyncRoot = locateNonHydratedAsyncRoot(instance)
+          // we are trying to update some async comp before hydration
+          // this will cause crash because we don't know the root node yet
+          if (nonHydratedAsyncRoot) {
+            // only sync the properties and abort the rest of operations
+            if (next) {
+              next.el = vnode.el
+              updateComponentPreRender(instance, next, optimized)
+            }
+            // and continue the rest of operations once the deps are resolved
+            nonHydratedAsyncRoot.asyncDep!.then(() => {
+              // the instance may be destroyed during the time period
+              if (!instance.isUnmounted) {
+                componentUpdateFn()
+              }
+            })
+            return
+          }
+        }
+
         // updateComponent
         // This is triggered by mutation of component's own state (next: null)
         // OR parent calling processComponent (next: VNode)
-        let { next, bu, u, parent, vnode } = instance
         let originNext = next
         let vnodeHook: VNodeHook | null | undefined
         if (__DEV__) {
@@ -1498,7 +1509,7 @@ function baseCreateRenderer(
           getNextHostNode(prevTree),
           instance,
           parentSuspense,
-          isSVG
+          namespace,
         )
         if (__DEV__) {
           endMeasure(instance, `patch`)
@@ -1518,7 +1529,7 @@ function baseCreateRenderer(
         if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {
           queuePostRenderEffect(
             () => invokeVNodeHook(vnodeHook!, parent, next!, vnode),
-            parentSuspense
+            parentSuspense,
           )
         }
         if (
@@ -1527,7 +1538,7 @@ function baseCreateRenderer(
         ) {
           queuePostRenderEffect(
             () => instance.emit('hook:updated'),
-            parentSuspense
+            parentSuspense,
           )
         }
 
@@ -1542,14 +1553,16 @@ function baseCreateRenderer(
     }
 
     // create reactive effect for rendering
-    const effect = (instance.effect = new ReactiveEffect(
-      componentUpdateFn,
-      () => queueJob(update),
-      instance.scope // track it in component's effect scope
-    ))
+    instance.scope.on()
+    const effect = (instance.effect = new ReactiveEffect(componentUpdateFn))
+    instance.scope.off()
+
+    const update = (instance.update = effect.run.bind(effect))
+    const job: SchedulerJob = (instance.job = effect.runIfDirty.bind(effect))
+    job.i = instance
+    job.id = instance.uid
+    effect.scheduler = () => queueJob(job)
 
-    const update: SchedulerJob = (instance.update = () => effect.run())
-    update.id = instance.uid
     // allowRecurse
     // #1801, #2043 component render effects should allow recursive updates
     toggleRecurse(instance, true)
@@ -1561,7 +1574,6 @@ function baseCreateRenderer(
       effect.onTrigger = instance.rtg
         ? e => invokeArrayFns(instance.rtg!, e)
         : void 0
-      update.ownerInstance = instance
     }
 
     update()
@@ -1570,7 +1582,7 @@ function baseCreateRenderer(
   const updateComponentPreRender = (
     instance: ComponentInternalInstance,
     nextVNode: VNode,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     nextVNode.component = instance
     const prevProps = instance.vnode.props
@@ -1582,7 +1594,7 @@ function baseCreateRenderer(
     pauseTracking()
     // props update may have triggered pre-flush watchers.
     // flush them before the render update.
-    flushPreFlushCbs()
+    flushPreFlushCbs(instance)
     resetTracking()
   }
 
@@ -1593,9 +1605,9 @@ function baseCreateRenderer(
     anchor,
     parentComponent,
     parentSuspense,
-    isSVG,
+    namespace: ElementNamespace,
     slotScopeIds,
-    optimized = false
+    optimized = false,
   ) => {
     const c1 = n1 && n1.children
     const prevShapeFlag = n1 ? n1.shapeFlag : 0
@@ -1614,9 +1626,9 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         return
       } else if (patchFlag & PatchFlags.UNKEYED_FRAGMENT) {
@@ -1628,9 +1640,9 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         return
       }
@@ -1657,9 +1669,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
         } else {
           // no new children, just unmount old
@@ -1679,9 +1691,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
         }
       }
@@ -1695,9 +1707,9 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     c1 = c1 || EMPTY_ARR
     c2 = c2 || EMPTY_ARR
@@ -1716,9 +1728,9 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
     }
     if (oldLength > newLength) {
@@ -1729,7 +1741,7 @@ function baseCreateRenderer(
         parentSuspense,
         true,
         false,
-        commonLength
+        commonLength,
       )
     } else {
       // mount new
@@ -1739,10 +1751,10 @@ function baseCreateRenderer(
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized,
-        commonLength
+        commonLength,
       )
     }
   }
@@ -1755,9 +1767,9 @@ function baseCreateRenderer(
     parentAnchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     let i = 0
     const l2 = c2.length
@@ -1780,9 +1792,9 @@ function baseCreateRenderer(
           null,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
       } else {
         break
@@ -1806,9 +1818,9 @@ function baseCreateRenderer(
           null,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
       } else {
         break
@@ -1838,9 +1850,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
           i++
         }
@@ -1870,7 +1882,7 @@ function baseCreateRenderer(
       const s2 = i // next starting index
 
       // 5.1 build key:index map for newChildren
-      const keyToNewIndexMap: Map<string | number | symbol, number> = new Map()
+      const keyToNewIndexMap: Map<PropertyKey, number> = new Map()
       for (i = s2; i <= e2; i++) {
         const nextChild = (c2[i] = optimized
           ? cloneIfMounted(c2[i] as VNode)
@@ -1880,7 +1892,7 @@ function baseCreateRenderer(
             warn(
               `Duplicate keys found during update:`,
               JSON.stringify(nextChild.key),
-              `Make sure keys are unique.`
+              `Make sure keys are unique.`,
             )
           }
           keyToNewIndexMap.set(nextChild.key, i)
@@ -1941,9 +1953,9 @@ function baseCreateRenderer(
             null,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
           patched++
         }
@@ -1970,9 +1982,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
         } else if (moved) {
           // move if:
@@ -1993,7 +2005,7 @@ function baseCreateRenderer(
     container,
     anchor,
     moveType,
-    parentSuspense = null
+    parentSuspense = null,
   ) => {
     const { el, type, transition, children, shapeFlag } = vnode
     if (shapeFlag & ShapeFlags.COMPONENT) {
@@ -2060,7 +2072,7 @@ function baseCreateRenderer(
     parentComponent,
     parentSuspense,
     doRemove = false,
-    optimized = false
+    optimized = false,
   ) => {
     const {
       type,
@@ -2070,13 +2082,24 @@ function baseCreateRenderer(
       dynamicChildren,
       shapeFlag,
       patchFlag,
-      dirs
+      dirs,
+      cacheIndex,
     } = vnode
+
+    if (patchFlag === PatchFlags.BAIL) {
+      optimized = false
+    }
+
     // unset ref
     if (ref != null) {
       setRef(ref, null, parentSuspense, vnode, true)
     }
 
+    // #6593 should clean memo cache when unmount
+    if (cacheIndex != null) {
+      parentComponent!.renderCache[cacheIndex] = undefined
+    }
+
     if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
       ;(parentComponent!.ctx as KeepAliveContext).deactivate(vnode)
       return
@@ -2110,12 +2133,17 @@ function baseCreateRenderer(
           vnode,
           parentComponent,
           parentSuspense,
-          optimized,
           internals,
-          doRemove
+          doRemove,
         )
       } else if (
         dynamicChildren &&
+        // #5154
+        // when v-once is used inside a block, setBlockTracking(-1) marks the
+        // parent block with hasOnce: true
+        // so that it doesn't take the fast path during unmount - otherwise
+        // components nested in v-once are never unmounted.
+        !dynamicChildren.hasOnce &&
         // #1153: fast path should not be taken for non-stable (v-for) fragments
         (type !== Fragment ||
           (patchFlag > 0 && patchFlag & PatchFlags.STABLE_FRAGMENT))
@@ -2126,7 +2154,7 @@ function baseCreateRenderer(
           parentComponent,
           parentSuspense,
           false,
-          true
+          true,
         )
       } else if (
         (type === Fragment &&
@@ -2222,13 +2250,15 @@ function baseCreateRenderer(
   const unmountComponent = (
     instance: ComponentInternalInstance,
     parentSuspense: SuspenseBoundary | null,
-    doRemove?: boolean
+    doRemove?: boolean,
   ) => {
     if (__DEV__ && instance.type.__hmrId) {
       unregisterHMR(instance)
     }
 
-    const { bum, scope, update, subTree, um } = instance
+    const { bum, scope, job, subTree, um, m, a } = instance
+    invalidateMount(m)
+    invalidateMount(a)
 
     // beforeUnmount hook
     if (bum) {
@@ -2245,11 +2275,11 @@ function baseCreateRenderer(
     // stop effects in component scope
     scope.stop()
 
-    // update may be null if a component is unmounted before its async
+    // job may be null if a component is unmounted before its async
     // setup has resolved.
-    if (update) {
+    if (job) {
       // so that scheduler will no longer invoke it
-      update.active = false
+      job.flags! |= SchedulerJobFlags.DISPOSED
       unmount(subTree, instance, parentSuspense, doRemove)
     }
     // unmounted hook
@@ -2262,7 +2292,7 @@ function baseCreateRenderer(
     ) {
       queuePostRenderEffect(
         () => instance.emit('hook:destroyed'),
-        parentSuspense
+        parentSuspense,
       )
     }
     queuePostRenderEffect(() => {
@@ -2298,7 +2328,7 @@ function baseCreateRenderer(
     parentSuspense,
     doRemove = false,
     optimized = false,
-    start = 0
+    start = 0,
   ) => {
     for (let i = start; i < children.length; i++) {
       unmount(children[i], parentComponent, parentSuspense, doRemove, optimized)
@@ -2312,20 +2342,38 @@ function baseCreateRenderer(
     if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
       return vnode.suspense!.next()
     }
-    return hostNextSibling((vnode.anchor || vnode.el)!)
+    const el = hostNextSibling((vnode.anchor || vnode.el)!)
+    // #9071, #9313
+    // teleported content can mess up nextSibling searches during patch so
+    // we need to skip them during nextSibling search
+    const teleportEnd = el && el[TeleportEndKey]
+    return teleportEnd ? hostNextSibling(teleportEnd) : el
   }
 
-  const render: RootRenderFunction = (vnode, container, isSVG) => {
+  let isFlushing = false
+  const render: RootRenderFunction = (vnode, container, namespace) => {
     if (vnode == null) {
       if (container._vnode) {
         unmount(container._vnode, null, null, true)
       }
     } else {
-      patch(container._vnode || null, vnode, container, null, null, null, isSVG)
+      patch(
+        container._vnode || null,
+        vnode,
+        container,
+        null,
+        null,
+        null,
+        namespace,
+      )
     }
-    flushPreFlushCbs()
-    flushPostFlushCbs()
     container._vnode = vnode
+    if (!isFlushing) {
+      isFlushing = true
+      flushPreFlushCbs()
+      flushPostFlushCbs()
+      isFlushing = false
+    }
   }
 
   const internals: RendererInternals = {
@@ -2338,35 +2386,55 @@ function baseCreateRenderer(
     pc: patchChildren,
     pbc: patchBlockChildren,
     n: getNextHostNode,
-    o: options
+    o: options,
   }
 
   let hydrate: ReturnType<typeof createHydrationFunctions>[0] | undefined
   let hydrateNode: ReturnType<typeof createHydrationFunctions>[1] | undefined
   if (createHydrationFns) {
     ;[hydrate, hydrateNode] = createHydrationFns(
-      internals as RendererInternals<Node, Element>
+      internals as RendererInternals<Node, Element>,
     )
   }
 
   return {
     render,
     hydrate,
-    createApp: createAppAPI(render, hydrate)
+    createApp: createAppAPI(render, hydrate),
   }
 }
 
+function resolveChildrenNamespace(
+  { type, props }: VNode,
+  currentNamespace: ElementNamespace,
+): ElementNamespace {
+  return (currentNamespace === 'svg' && type === 'foreignObject') ||
+    (currentNamespace === 'mathml' &&
+      type === 'annotation-xml' &&
+      props &&
+      props.encoding &&
+      props.encoding.includes('html'))
+    ? undefined
+    : currentNamespace
+}
+
 function toggleRecurse(
-  { effect, update }: ComponentInternalInstance,
-  allowed: boolean
+  { effect, job }: ComponentInternalInstance,
+  allowed: boolean,
 ) {
-  effect.allowRecurse = update.allowRecurse = allowed
+  if (allowed) {
+    effect.flags |= EffectFlags.ALLOW_RECURSE
+    job.flags! |= SchedulerJobFlags.ALLOW_RECURSE
+  } else {
+    effect.flags &= ~EffectFlags.ALLOW_RECURSE
+    job.flags! &= ~SchedulerJobFlags.ALLOW_RECURSE
+  }
 }
 
 export function needTransition(
   parentSuspense: SuspenseBoundary | null,
-  transition: TransitionHooks | null
-) {
+  transition: TransitionHooks | null,
+): boolean | null {
   return (
     (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) &&
     transition &&
@@ -2385,7 +2453,11 @@ export function needTransition(
  * the children will always be moved. Therefore, in order to ensure correct move
  * position, el should be inherited from previous nodes.
  */
-export function traverseStaticChildren(n1: VNode, n2: VNode, shallow = false) {
+export function traverseStaticChildren(
+  n1: VNode,
+  n2: VNode,
+  shallow = false,
+): void {
   const ch1 = n1.children
   const ch2 = n2.children
   if (isArray(ch1) && isArray(ch2)) {
@@ -2399,7 +2471,8 @@ export function traverseStaticChildren(n1: VNode, n2: VNode, shallow = false) {
           c2 = ch2[i] = cloneIfMounted(ch2[i] as VNode)
           c2.el = c1.el
         }
-        if (!shallow) traverseStaticChildren(c1, c2)
+        if (!shallow && c2.patchFlag !== PatchFlags.BAIL)
+          traverseStaticChildren(c1, c2)
       }
       // #6852 also inherit for text nodes
       if (c2.type === Text) {
@@ -2455,3 +2528,23 @@ function getSequence(arr: number[]): number[] {
   }
   return result
 }
+
+function locateNonHydratedAsyncRoot(
+  instance: ComponentInternalInstance,
+): ComponentInternalInstance | undefined {
+  const subComponent = instance.subTree.component
+  if (subComponent) {
+    if (subComponent.asyncDep && !subComponent.asyncResolved) {
+      return subComponent
+    } else {
+      return locateNonHydratedAsyncRoot(subComponent)
+    }
+  }
+}
+
+export function invalidateMount(hooks: LifecycleHook): void {
+  if (hooks) {
+    for (let i = 0; i < hooks.length; i++)
+      hooks[i].flags! |= SchedulerJobFlags.DISPOSED
+  }
+}
diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts
index 30f96228d..1ffe30357 100644
--- a/packages/runtime-core/src/rendererTemplateRef.ts
+++ b/packages/runtime-core/src/rendererTemplateRef.ts
@@ -1,21 +1,22 @@
-import { SuspenseBoundary } from './components/Suspense'
-import { VNode, VNodeNormalizedRef, VNodeNormalizedRefAtom } from './vnode'
+import type { SuspenseBoundary } from './components/Suspense'
+import type { VNode, VNodeNormalizedRef, VNodeNormalizedRefAtom } from './vnode'
 import {
   EMPTY_OBJ,
+  ShapeFlags,
   hasOwn,
   isArray,
   isFunction,
   isString,
   remove,
-  ShapeFlags
 } from '@vue/shared'
 import { isAsyncWrapper } from './apiAsyncComponent'
-import { getExposeProxy } from './component'
 import { warn } from './warning'
-import { isRef } from '@vue/reactivity'
-import { callWithErrorHandling, ErrorCodes } from './errorHandling'
-import { SchedulerJob } from './scheduler'
+import { isRef, toRaw } from '@vue/reactivity'
+import { ErrorCodes, callWithErrorHandling } from './errorHandling'
+import type { SchedulerJob } from './scheduler'
 import { queuePostRenderEffect } from './renderer'
+import { getComponentPublicInstance } from './component'
+import { knownTemplateRefs } from './helpers/useTemplateRef'
 
 /**
  * Function for handling a template ref
@@ -25,8 +26,8 @@ export function setRef(
   oldRawRef: VNodeNormalizedRef | null,
   parentSuspense: SuspenseBoundary | null,
   vnode: VNode,
-  isUnmount = false
-) {
+  isUnmount = false,
+): void {
   if (isArray(rawRef)) {
     rawRef.forEach((r, i) =>
       setRef(
@@ -34,8 +35,8 @@ export function setRef(
         oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef),
         parentSuspense,
         vnode,
-        isUnmount
-      )
+        isUnmount,
+      ),
     )
     return
   }
@@ -48,7 +49,7 @@ export function setRef(
 
   const refValue =
     vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
-      ? getExposeProxy(vnode.component!) || vnode.component!.proxy
+      ? getComponentPublicInstance(vnode.component!)
       : vnode.el
   const value = isUnmount ? null : refValue
 
@@ -56,19 +57,29 @@ export function setRef(
   if (__DEV__ && !owner) {
     warn(
       `Missing ref owner context. ref cannot be used on hoisted vnodes. ` +
-        `A vnode with ref must be created inside the render function.`
+        `A vnode with ref must be created inside the render function.`,
     )
     return
   }
   const oldRef = oldRawRef && (oldRawRef as VNodeNormalizedRefAtom).r
   const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs
   const setupState = owner.setupState
+  const rawSetupState = toRaw(setupState)
+  const canSetSetupRef =
+    setupState === EMPTY_OBJ
+      ? () => false
+      : (key: string) => {
+          if (__DEV__ && knownTemplateRefs.has(rawSetupState[key] as any)) {
+            return false
+          }
+          return hasOwn(rawSetupState, key)
+        }
 
   // dynamic ref changed. unset old ref
   if (oldRef != null && oldRef !== ref) {
     if (isString(oldRef)) {
       refs[oldRef] = null
-      if (hasOwn(setupState, oldRef)) {
+      if (canSetSetupRef(oldRef)) {
         setupState[oldRef] = null
       }
     } else if (isRef(oldRef)) {
@@ -81,11 +92,12 @@ export function setRef(
   } else {
     const _isString = isString(ref)
     const _isRef = isRef(ref)
+
     if (_isString || _isRef) {
       const doSet = () => {
         if (rawRef.f) {
           const existing = _isString
-            ? hasOwn(setupState, ref)
+            ? canSetSetupRef(ref)
               ? setupState[ref]
               : refs[ref]
             : ref.value
@@ -95,7 +107,7 @@ export function setRef(
             if (!isArray(existing)) {
               if (_isString) {
                 refs[ref] = [refValue]
-                if (hasOwn(setupState, ref)) {
+                if (canSetSetupRef(ref)) {
                   setupState[ref] = refs[ref]
                 }
               } else {
@@ -108,7 +120,7 @@ export function setRef(
           }
         } else if (_isString) {
           refs[ref] = value
-          if (hasOwn(setupState, ref)) {
+          if (canSetSetupRef(ref)) {
             setupState[ref] = value
           }
         } else if (_isRef) {
diff --git a/packages/runtime-core/src/scheduler.ts b/packages/runtime-core/src/scheduler.ts
index e4c7fbc0f..b40c31d39 100644
--- a/packages/runtime-core/src/scheduler.ts
+++ b/packages/runtime-core/src/scheduler.ts
@@ -1,13 +1,10 @@
-import { ErrorCodes, callWithErrorHandling } from './errorHandling'
-import { Awaited, isArray, NOOP } from '@vue/shared'
-import { ComponentInternalInstance, getComponentName } from './component'
-import { warn } from './warning'
+import { ErrorCodes, callWithErrorHandling, handleError } from './errorHandling'
+import { NOOP, isArray } from '@vue/shared'
+import { type ComponentInternalInstance, getComponentName } from './component'
 
-export interface SchedulerJob extends Function {
-  id?: number
-  pre?: boolean
-  active?: boolean
-  computed?: boolean
+export enum SchedulerJobFlags {
+  QUEUED = 1 << 0,
+  PRE = 1 << 1,
   /**
    * Indicates whether the effect is allowed to recursively trigger itself
    * when managed by the scheduler.
@@ -23,28 +20,34 @@ export interface SchedulerJob extends Function {
    * responsibility to perform recursive state mutation that eventually
    * stabilizes (#1727).
    */
-  allowRecurse?: boolean
+  ALLOW_RECURSE = 1 << 2,
+  DISPOSED = 1 << 3,
+}
+
+export interface SchedulerJob extends Function {
+  id?: number
+  /**
+   * flags can technically be undefined, but it can still be used in bitwise
+   * operations just like 0.
+   */
+  flags?: SchedulerJobFlags
   /**
    * Attached by renderer.ts when setting up a component's render effect
    * Used to obtain component information when reporting max recursive updates.
-   * dev only.
    */
-  ownerInstance?: ComponentInternalInstance
+  i?: ComponentInternalInstance
 }
 
 export type SchedulerJobs = SchedulerJob | SchedulerJob[]
 
-let isFlushing = false
-let isFlushPending = false
-
 const queue: SchedulerJob[] = []
-let flushIndex = 0
+let flushIndex = -1
 
 const pendingPostFlushCbs: SchedulerJob[] = []
 let activePostFlushCbs: SchedulerJob[] | null = null
 let postFlushIndex = 0
 
-const resolvedPromise = /*#__PURE__*/ Promise.resolve() as Promise<any>
+const resolvedPromise = /*@__PURE__*/ Promise.resolve() as Promise<any>
 let currentFlushPromise: Promise<void> | null = null
 
 const RECURSION_LIMIT = 100
@@ -52,18 +55,22 @@ type CountMap = Map<SchedulerJob, number>
 
 export function nextTick<T = void, R = void>(
   this: T,
-  fn?: (this: T) => R
+  fn?: (this: T) => R,
 ): Promise<Awaited<R>> {
   const p = currentFlushPromise || resolvedPromise
   return fn ? p.then(this ? fn.bind(this) : fn) : p
 }
 
-// #2768
-// Use binary-search to find a suitable position in the queue,
-// so that the queue maintains the increasing order of job's id,
-// which can prevent the job from being skipped and also can avoid repeated patching.
+// Use binary-search to find a suitable position in the queue. The queue needs
+// to be sorted in increasing order of the job ids. This ensures that:
+// 1. Components are updated from parent to child. As the parent is always
+//    created before the child it will always have a smaller id.
+// 2. If a component is unmounted during a parent component's update, its update
+//    can be skipped.
+// A pre watcher will have the same id as its component's update job. The
+// watcher should be inserted immediately before the update job. This allows
+// watchers to be skipped if the component is unmounted by the parent update.
 function findInsertionIndex(id: number) {
-  // the start index should be `flushIndex + 1`
   let start = flushIndex + 1
   let end = queue.length
 
@@ -71,7 +78,10 @@ function findInsertionIndex(id: number) {
     const middle = (start + end) >>> 1
     const middleJob = queue[middle]
     const middleJobId = getId(middleJob)
-    if (middleJobId < id || (middleJobId === id && middleJob.pre)) {
+    if (
+      middleJobId < id ||
+      (middleJobId === id && middleJob.flags! & SchedulerJobFlags.PRE)
+    ) {
       start = middle + 1
     } else {
       end = middle
@@ -81,53 +91,39 @@ function findInsertionIndex(id: number) {
   return start
 }
 
-export function queueJob(job: SchedulerJob) {
-  // the dedupe search uses the startIndex argument of Array.includes()
-  // by default the search index includes the current job that is being run
-  // so it cannot recursively trigger itself again.
-  // if the job is a watch() callback, the search will start with a +1 index to
-  // allow it recursively trigger itself - it is the user's responsibility to
-  // ensure it doesn't end up in an infinite loop.
-  if (
-    !queue.length ||
-    !queue.includes(
-      job,
-      isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
-    )
-  ) {
-    if (job.id == null) {
+export function queueJob(job: SchedulerJob): void {
+  if (!(job.flags! & SchedulerJobFlags.QUEUED)) {
+    const jobId = getId(job)
+    const lastJob = queue[queue.length - 1]
+    if (
+      !lastJob ||
+      // fast path when the job id is larger than the tail
+      (!(job.flags! & SchedulerJobFlags.PRE) && jobId >= getId(lastJob))
+    ) {
       queue.push(job)
     } else {
-      queue.splice(findInsertionIndex(job.id), 0, job)
+      queue.splice(findInsertionIndex(jobId), 0, job)
     }
+
+    job.flags! |= SchedulerJobFlags.QUEUED
+
     queueFlush()
   }
 }
 
 function queueFlush() {
-  if (!isFlushing && !isFlushPending) {
-    isFlushPending = true
+  if (!currentFlushPromise) {
     currentFlushPromise = resolvedPromise.then(flushJobs)
   }
 }
 
-export function invalidateJob(job: SchedulerJob) {
-  const i = queue.indexOf(job)
-  if (i > flushIndex) {
-    queue.splice(i, 1)
-  }
-}
-
-export function queuePostFlushCb(cb: SchedulerJobs) {
+export function queuePostFlushCb(cb: SchedulerJobs): void {
   if (!isArray(cb)) {
-    if (
-      !activePostFlushCbs ||
-      !activePostFlushCbs.includes(
-        cb,
-        cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex
-      )
-    ) {
+    if (activePostFlushCbs && cb.id === -1) {
+      activePostFlushCbs.splice(postFlushIndex + 1, 0, cb)
+    } else if (!(cb.flags! & SchedulerJobFlags.QUEUED)) {
       pendingPostFlushCbs.push(cb)
+      cb.flags! |= SchedulerJobFlags.QUEUED
     }
   } else {
     // if cb is an array, it is a component lifecycle hook which can only be
@@ -139,29 +135,41 @@ export function queuePostFlushCb(cb: SchedulerJobs) {
 }
 
 export function flushPreFlushCbs(
+  instance?: ComponentInternalInstance,
   seen?: CountMap,
-  // if currently flushing, skip the current job itself
-  i = isFlushing ? flushIndex + 1 : 0
-) {
+  // skip the current job
+  i: number = flushIndex + 1,
+): void {
   if (__DEV__) {
     seen = seen || new Map()
   }
   for (; i < queue.length; i++) {
     const cb = queue[i]
-    if (cb && cb.pre) {
+    if (cb && cb.flags! & SchedulerJobFlags.PRE) {
+      if (instance && cb.id !== instance.uid) {
+        continue
+      }
       if (__DEV__ && checkRecursiveUpdates(seen!, cb)) {
         continue
       }
       queue.splice(i, 1)
       i--
+      if (cb.flags! & SchedulerJobFlags.ALLOW_RECURSE) {
+        cb.flags! &= ~SchedulerJobFlags.QUEUED
+      }
       cb()
+      if (!(cb.flags! & SchedulerJobFlags.ALLOW_RECURSE)) {
+        cb.flags! &= ~SchedulerJobFlags.QUEUED
+      }
     }
   }
 }
 
-export function flushPostFlushCbs(seen?: CountMap) {
+export function flushPostFlushCbs(seen?: CountMap): void {
   if (pendingPostFlushCbs.length) {
-    const deduped = [...new Set(pendingPostFlushCbs)]
+    const deduped = [...new Set(pendingPostFlushCbs)].sort(
+      (a, b) => getId(a) - getId(b),
+    )
     pendingPostFlushCbs.length = 0
 
     // #1947 already has active queue, nested flushPostFlushCbs call
@@ -175,20 +183,20 @@ export function flushPostFlushCbs(seen?: CountMap) {
       seen = seen || new Map()
     }
 
-    activePostFlushCbs.sort((a, b) => getId(a) - getId(b))
-
     for (
       postFlushIndex = 0;
       postFlushIndex < activePostFlushCbs.length;
       postFlushIndex++
     ) {
-      if (
-        __DEV__ &&
-        checkRecursiveUpdates(seen!, activePostFlushCbs[postFlushIndex])
-      ) {
+      const cb = activePostFlushCbs[postFlushIndex]
+      if (__DEV__ && checkRecursiveUpdates(seen!, cb)) {
         continue
       }
-      activePostFlushCbs[postFlushIndex]()
+      if (cb.flags! & SchedulerJobFlags.ALLOW_RECURSE) {
+        cb.flags! &= ~SchedulerJobFlags.QUEUED
+      }
+      if (!(cb.flags! & SchedulerJobFlags.DISPOSED)) cb()
+      cb.flags! &= ~SchedulerJobFlags.QUEUED
     }
     activePostFlushCbs = null
     postFlushIndex = 0
@@ -196,33 +204,13 @@ export function flushPostFlushCbs(seen?: CountMap) {
 }
 
 const getId = (job: SchedulerJob): number =>
-  job.id == null ? Infinity : job.id
-
-const comparator = (a: SchedulerJob, b: SchedulerJob): number => {
-  const diff = getId(a) - getId(b)
-  if (diff === 0) {
-    if (a.pre && !b.pre) return -1
-    if (b.pre && !a.pre) return 1
-  }
-  return diff
-}
+  job.id == null ? (job.flags! & SchedulerJobFlags.PRE ? -1 : Infinity) : job.id
 
 function flushJobs(seen?: CountMap) {
-  isFlushPending = false
-  isFlushing = true
   if (__DEV__) {
     seen = seen || new Map()
   }
 
-  // Sort queue before flush.
-  // This ensures that:
-  // 1. Components are updated from parent to child. (because parent is always
-  //    created before the child so its render effect will have smaller
-  //    priority number)
-  // 2. If a component is unmounted during a parent component's update,
-  //    its update can be skipped.
-  queue.sort(comparator)
-
   // conditional usage of checkRecursiveUpdate must be determined out of
   // try ... catch block since Rollup by default de-optimizes treeshaking
   // inside try-catch. This can leave all warning code unshaked. Although
@@ -235,24 +223,39 @@ function flushJobs(seen?: CountMap) {
   try {
     for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
       const job = queue[flushIndex]
-      if (job && job.active !== false) {
+      if (job && !(job.flags! & SchedulerJobFlags.DISPOSED)) {
         if (__DEV__ && check(job)) {
           continue
         }
-        // console.log(`running:`, job.id)
-        callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
+        if (job.flags! & SchedulerJobFlags.ALLOW_RECURSE) {
+          job.flags! &= ~SchedulerJobFlags.QUEUED
+        }
+        callWithErrorHandling(
+          job,
+          job.i,
+          job.i ? ErrorCodes.COMPONENT_UPDATE : ErrorCodes.SCHEDULER,
+        )
+        if (!(job.flags! & SchedulerJobFlags.ALLOW_RECURSE)) {
+          job.flags! &= ~SchedulerJobFlags.QUEUED
+        }
       }
     }
   } finally {
-    flushIndex = 0
+    // If there was an error we still need to clear the QUEUED flags
+    for (; flushIndex < queue.length; flushIndex++) {
+      const job = queue[flushIndex]
+      if (job) {
+        job.flags! &= ~SchedulerJobFlags.QUEUED
+      }
+    }
+
+    flushIndex = -1
     queue.length = 0
 
     flushPostFlushCbs(seen)
 
-    isFlushing = false
     currentFlushPromise = null
-    // some postFlushCb queued jobs!
-    // keep flushing until it drains.
+    // If new jobs have been added to either queue, keep flushing
     if (queue.length || pendingPostFlushCbs.length) {
       flushJobs(seen)
     }
@@ -260,25 +263,23 @@ function flushJobs(seen?: CountMap) {
 }
 
 function checkRecursiveUpdates(seen: CountMap, fn: SchedulerJob) {
-  if (!seen.has(fn)) {
-    seen.set(fn, 1)
-  } else {
-    const count = seen.get(fn)!
-    if (count > RECURSION_LIMIT) {
-      const instance = fn.ownerInstance
-      const componentName = instance && getComponentName(instance.type)
-      warn(
-        `Maximum recursive updates exceeded${
-          componentName ? ` in component <${componentName}>` : ``
-        }. ` +
-          `This means you have a reactive effect that is mutating its own ` +
-          `dependencies and thus recursively triggering itself. Possible sources ` +
-          `include component template, render function, updated hook or ` +
-          `watcher source function.`
-      )
-      return true
-    } else {
-      seen.set(fn, count + 1)
-    }
+  const count = seen.get(fn) || 0
+  if (count > RECURSION_LIMIT) {
+    const instance = fn.i
+    const componentName = instance && getComponentName(instance.type)
+    handleError(
+      `Maximum recursive updates exceeded${
+        componentName ? ` in component <${componentName}>` : ``
+      }. ` +
+        `This means you have a reactive effect that is mutating its own ` +
+        `dependencies and thus recursively triggering itself. Possible sources ` +
+        `include component template, render function, updated hook or ` +
+        `watcher source function.`,
+      null,
+      ErrorCodes.APP_ERROR_HANDLER,
+    )
+    return true
   }
+  seen.set(fn, count + 1)
+  return false
 }
diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index 7a271f540..30200789b 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -1,50 +1,64 @@
 import {
-  isArray,
-  isFunction,
-  isString,
-  isObject,
   EMPTY_ARR,
-  extend,
-  normalizeClass,
-  normalizeStyle,
   PatchFlags,
   ShapeFlags,
   SlotFlags,
-  isOn
+  extend,
+  isArray,
+  isFunction,
+  isObject,
+  isOn,
+  isString,
+  normalizeClass,
+  normalizeStyle,
 } from '@vue/shared'
 import {
-  ComponentInternalInstance,
-  Data,
-  ConcreteComponent,
-  ClassComponent,
-  Component,
-  isClassComponent
+  type ClassComponent,
+  type Component,
+  type ComponentInternalInstance,
+  type ConcreteComponent,
+  type Data,
+  isClassComponent,
 } from './component'
-import { RawSlots } from './componentSlots'
-import { isProxy, Ref, toRaw, ReactiveFlags, isRef } from '@vue/reactivity'
-import { AppContext } from './apiCreateApp'
+import type { RawSlots } from './componentSlots'
 import {
-  Suspense,
-  SuspenseImpl,
+  type ReactiveFlags,
+  type Ref,
+  isProxy,
+  isRef,
+  toRaw,
+} from '@vue/reactivity'
+import type { AppContext } from './apiCreateApp'
+import {
+  type Suspense,
+  type SuspenseBoundary,
+  type SuspenseImpl,
   isSuspense,
-  SuspenseBoundary
 } from './components/Suspense'
-import { DirectiveBinding } from './directives'
-import { TransitionHooks } from './components/BaseTransition'
+import type { DirectiveBinding } from './directives'
+import {
+  type TransitionHooks,
+  setTransitionHooks,
+} from './components/BaseTransition'
 import { warn } from './warning'
-import { Teleport, TeleportImpl, isTeleport } from './components/Teleport'
+import {
+  type Teleport,
+  type TeleportImpl,
+  isTeleport,
+} from './components/Teleport'
 import {
   currentRenderingInstance,
-  currentScopeId
+  currentScopeId,
 } from './componentRenderContext'
-import { RendererNode, RendererElement } from './renderer'
+import type { RendererElement, RendererNode } from './renderer'
 import { NULL_DYNAMIC_COMPONENT } from './helpers/resolveAssets'
 import { hmrDirtyComponents } from './hmr'
 import { convertLegacyComponent } from './compat/component'
 import { convertLegacyVModelProps } from './compat/componentVModel'
 import { defineLegacyVNodeProperties } from './compat/renderFn'
-import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
-import { ComponentPublicInstance } from './componentPublicInstance'
+import { ErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
+import type { ComponentPublicInstance } from './componentPublicInstance'
+import { isInternalObject } from './internalObject'
 
 export const Fragment = Symbol.for('v-fgt') as any as {
   __isFragment: true
@@ -52,9 +66,9 @@ export const Fragment = Symbol.for('v-fgt') as any as {
     $props: VNodeProps
   }
 }
-export const Text = Symbol.for('v-txt')
-export const Comment = Symbol.for('v-cmt')
-export const Static = Symbol.for('v-stc')
+export const Text: unique symbol = Symbol.for('v-txt')
+export const Comment: unique symbol = Symbol.for('v-cmt')
+export const Static: unique symbol = Symbol.for('v-stc')
 
 export type VNodeTypes =
   | string
@@ -74,14 +88,26 @@ export type VNodeRef =
   | Ref
   | ((
       ref: Element | ComponentPublicInstance | null,
-      refs: Record<string, any>
+      refs: Record<string, any>,
     ) => void)
 
 export type VNodeNormalizedRefAtom = {
+  /**
+   * component instance
+   */
   i: ComponentInternalInstance
+  /**
+   * Actual ref
+   */
   r: VNodeRef
-  k?: string // setup ref key
-  f?: boolean // refInFor marker
+  /**
+   * setup ref key
+   */
+  k?: string
+  /**
+   * refInFor marker
+   */
+  f?: boolean
 }
 
 export type VNodeNormalizedRef =
@@ -98,7 +124,7 @@ export type VNodeHook =
 
 // https://github.com/microsoft/TypeScript/issues/33099
 export type VNodeProps = {
-  key?: string | number | symbol
+  key?: PropertyKey
   ref?: VNodeRef
   ref_for?: boolean
   ref_key?: string
@@ -134,7 +160,7 @@ export type VNodeNormalizedChildren =
 export interface VNode<
   HostNode = RendererNode,
   HostElement = RendererElement,
-  ExtraProps = { [key: string]: any }
+  ExtraProps = { [key: string]: any },
 > {
   /**
    * @internal
@@ -148,7 +174,7 @@ export interface VNode<
 
   type: VNodeTypes
   props: (VNodeProps & ExtraProps) | null
-  key: string | number | symbol | null
+  key: PropertyKey | null
   ref: VNodeNormalizedRef | null
   /**
    * SFC only. This is assigned on vnode creation using currentScopeId
@@ -172,6 +198,7 @@ export interface VNode<
   el: HostNode | null
   anchor: HostNode | null // fragment anchor
   target: HostElement | null // teleport target
+  targetStart: HostNode | null // teleport target start anchor
   targetAnchor: HostNode | null // teleport target anchor
   /**
    * number of elements contained in a static vnode
@@ -200,7 +227,7 @@ export interface VNode<
   /**
    * @internal
    */
-  dynamicChildren: VNode[] | null
+  dynamicChildren: (VNode[] & { hasOnce?: boolean }) | null
 
   // application root node only
   appContext: AppContext | null
@@ -214,6 +241,10 @@ export interface VNode<
    * @internal attached by v-memo
    */
   memo?: any[]
+  /**
+   * @internal index for cleaning v-memo cache
+   */
+  cacheIndex?: number
   /**
    * @internal __COMPAT__ only
    */
@@ -229,8 +260,8 @@ export interface VNode<
 // can divide a template into nested blocks, and within each block the node
 // structure would be stable. This allows us to skip most children diffing
 // and only worry about the dynamic nodes (indicated by patch flags).
-export const blockStack: (VNode[] | null)[] = []
-export let currentBlock: VNode[] | null = null
+export const blockStack: VNode['dynamicChildren'][] = []
+export let currentBlock: VNode['dynamicChildren'] = null
 
 /**
  * Open a block.
@@ -248,11 +279,11 @@ export let currentBlock: VNode[] | null = null
  *
  * @private
  */
-export function openBlock(disableTracking = false) {
+export function openBlock(disableTracking = false): void {
   blockStack.push((currentBlock = disableTracking ? null : []))
 }
 
-export function closeBlock() {
+export function closeBlock(): void {
   blockStack.pop()
   currentBlock = blockStack[blockStack.length - 1] || null
 }
@@ -279,8 +310,13 @@ export let isBlockTreeEnabled = 1
  *
  * @private
  */
-export function setBlockTracking(value: number) {
+export function setBlockTracking(value: number): void {
   isBlockTreeEnabled += value
+  if (value < 0 && currentBlock) {
+    // mark current block so it doesn't take fast path and skip possible
+    // nested components duriung unmount
+    currentBlock.hasOnce = true
+  }
 }
 
 function setupBlock(vnode: VNode) {
@@ -306,8 +342,8 @@ export function createElementBlock(
   children?: any,
   patchFlag?: number,
   dynamicProps?: string[],
-  shapeFlag?: number
-) {
+  shapeFlag?: number,
+): VNode {
   return setupBlock(
     createBaseVNode(
       type,
@@ -316,8 +352,8 @@ export function createElementBlock(
       patchFlag,
       dynamicProps,
       shapeFlag,
-      true /* isBlock */
-    )
+      true /* isBlock */,
+    ),
   )
 }
 
@@ -333,7 +369,7 @@ export function createBlock(
   props?: Record<string, any> | null,
   children?: any,
   patchFlag?: number,
-  dynamicProps?: string[]
+  dynamicProps?: string[],
 ): VNode {
   return setupBlock(
     createVNode(
@@ -342,8 +378,8 @@ export function createBlock(
       children,
       patchFlag,
       dynamicProps,
-      true /* isBlock: prevent a block from tracking itself */
-    )
+      true /* isBlock: prevent a block from tracking itself */,
+    ),
   )
 }
 
@@ -352,17 +388,16 @@ export function isVNode(value: any): value is VNode {
 }
 
 export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
-  if (
-    __DEV__ &&
-    n2.shapeFlag & ShapeFlags.COMPONENT &&
-    hmrDirtyComponents.has(n2.type as ConcreteComponent)
-  ) {
-    // #7042, ensure the vnode being unmounted during HMR
-    // bitwise operations to remove keep alive flags
-    n1.shapeFlag &= ~ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
-    n2.shapeFlag &= ~ShapeFlags.COMPONENT_KEPT_ALIVE
-    // HMR only: if the component has been hot-updated, force a reload.
-    return false
+  if (__DEV__ && n2.shapeFlag & ShapeFlags.COMPONENT && n1.component) {
+    const dirtyInstances = hmrDirtyComponents.get(n2.type as ConcreteComponent)
+    if (dirtyInstances && dirtyInstances.has(n1.component)) {
+      // #7042, ensure the vnode being unmounted during HMR
+      // bitwise operations to remove keep alive flags
+      n1.shapeFlag &= ~ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
+      n2.shapeFlag &= ~ShapeFlags.COMPONENT_KEPT_ALIVE
+      // HMR only: if the component has been hot-updated, force a reload.
+      return false
+    }
   }
   return n1.type === n2.type && n1.key === n2.key
 }
@@ -370,7 +405,7 @@ export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
 let vnodeArgsTransformer:
   | ((
       args: Parameters<typeof _createVNode>,
-      instance: ComponentInternalInstance | null
+      instance: ComponentInternalInstance | null,
     ) => Parameters<typeof _createVNode>)
   | undefined
 
@@ -380,7 +415,9 @@ let vnodeArgsTransformer:
  * It is *internal* but needs to be exposed for test-utils to pick up proper
  * typings
  */
-export function transformVNodeArgs(transformer?: typeof vnodeArgsTransformer) {
+export function transformVNodeArgs(
+  transformer?: typeof vnodeArgsTransformer,
+): void {
   vnodeArgsTransformer = transformer
 }
 
@@ -390,19 +427,17 @@ const createVNodeWithArgsTransform = (
   return _createVNode(
     ...(vnodeArgsTransformer
       ? vnodeArgsTransformer(args, currentRenderingInstance)
-      : args)
+      : args),
   )
 }
 
-export const InternalObjectKey = `__vInternal`
-
 const normalizeKey = ({ key }: VNodeProps): VNode['key'] =>
   key != null ? key : null
 
 const normalizeRef = ({
   ref,
   ref_key,
-  ref_for
+  ref_for,
 }: VNodeProps): VNodeNormalizedRefAtom | null => {
   if (typeof ref === 'number') {
     ref = '' + ref
@@ -422,10 +457,10 @@ function createBaseVNode(
   children: unknown = null,
   patchFlag = 0,
   dynamicProps: string[] | null = null,
-  shapeFlag = type === Fragment ? 0 : ShapeFlags.ELEMENT,
+  shapeFlag: number = type === Fragment ? 0 : ShapeFlags.ELEMENT,
   isBlockNode = false,
-  needFullChildrenNormalization = false
-) {
+  needFullChildrenNormalization = false,
+): VNode {
   const vnode = {
     __v_isVNode: true,
     __v_skip: true,
@@ -445,6 +480,7 @@ function createBaseVNode(
     el: null,
     anchor: null,
     target: null,
+    targetStart: null,
     targetAnchor: null,
     staticCount: 0,
     shapeFlag,
@@ -452,7 +488,7 @@ function createBaseVNode(
     dynamicProps,
     dynamicChildren: null,
     appContext: null,
-    ctx: currentRenderingInstance
+    ctx: currentRenderingInstance,
   } as VNode
 
   if (needFullChildrenNormalization) {
@@ -513,7 +549,7 @@ function _createVNode(
   children: unknown = null,
   patchFlag: number = 0,
   dynamicProps: string[] | null = null,
-  isBlockNode = false
+  isBlockNode = false,
 ): VNode {
   if (!type || type === NULL_DYNAMIC_COMPONENT) {
     if (__DEV__ && !type) {
@@ -537,7 +573,7 @@ function _createVNode(
         currentBlock.push(cloned)
       }
     }
-    cloned.patchFlag |= PatchFlags.BAIL
+    cloned.patchFlag = PatchFlags.BAIL
     return cloned
   }
 
@@ -590,7 +626,7 @@ function _createVNode(
         `marking the component with \`markRaw\` or using \`shallowRef\` ` +
         `instead of \`ref\`.`,
       `\nComponent that was made reactive: `,
-      type
+      type,
     )
   }
 
@@ -602,25 +638,26 @@ function _createVNode(
     dynamicProps,
     shapeFlag,
     isBlockNode,
-    true
+    true,
   )
 }
 
-export function guardReactiveProps(props: (Data & VNodeProps) | null) {
+export function guardReactiveProps(
+  props: (Data & VNodeProps) | null,
+): (Data & VNodeProps) | null {
   if (!props) return null
-  return isProxy(props) || InternalObjectKey in props
-    ? extend({}, props)
-    : props
+  return isProxy(props) || isInternalObject(props) ? extend({}, props) : props
 }
 
 export function cloneVNode<T, U>(
   vnode: VNode<T, U>,
   extraProps?: (Data & VNodeProps) | null,
-  mergeRef = false
+  mergeRef = false,
+  cloneTransition = false,
 ): VNode<T, U> {
   // This is intentionally NOT using spread or extend to avoid the runtime
   // key enumeration cost.
-  const { props, ref, patchFlag, children } = vnode
+  const { props, ref, patchFlag, children, transition } = vnode
   const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props
   const cloned: VNode<T, U> = {
     __v_isVNode: true,
@@ -642,10 +679,11 @@ export function cloneVNode<T, U>(
     scopeId: vnode.scopeId,
     slotScopeIds: vnode.slotScopeIds,
     children:
-      __DEV__ && patchFlag === PatchFlags.HOISTED && isArray(children)
+      __DEV__ && patchFlag === PatchFlags.CACHED && isArray(children)
         ? (children as VNode[]).map(deepCloneVNode)
         : children,
     target: vnode.target,
+    targetStart: vnode.targetStart,
     targetAnchor: vnode.targetAnchor,
     staticCount: vnode.staticCount,
     shapeFlag: vnode.shapeFlag,
@@ -655,7 +693,7 @@ export function cloneVNode<T, U>(
     // fast paths only.
     patchFlag:
       extraProps && vnode.type !== Fragment
-        ? patchFlag === -1 // hoisted node
+        ? patchFlag === PatchFlags.CACHED // hoisted node
           ? PatchFlags.FULL_PROPS
           : patchFlag | PatchFlags.FULL_PROPS
         : patchFlag,
@@ -663,7 +701,7 @@ export function cloneVNode<T, U>(
     dynamicChildren: vnode.dynamicChildren,
     appContext: vnode.appContext,
     dirs: vnode.dirs,
-    transition: vnode.transition,
+    transition,
 
     // These should technically only be non-null on mounted VNodes. However,
     // they *should* be copied for kept-alive vnodes. So we just always copy
@@ -676,11 +714,23 @@ export function cloneVNode<T, U>(
     el: vnode.el,
     anchor: vnode.anchor,
     ctx: vnode.ctx,
-    ce: vnode.ce
+    ce: vnode.ce,
   }
+
+  // if the vnode will be replaced by the cloned one, it is necessary
+  // to clone the transition to ensure that the vnode referenced within
+  // the transition hooks is fresh.
+  if (transition && cloneTransition) {
+    setTransitionHooks(
+      cloned as VNode,
+      transition.clone(cloned as VNode) as TransitionHooks,
+    )
+  }
+
   if (__COMPAT__) {
     defineLegacyVNodeProperties(cloned as VNode)
   }
+
   return cloned
 }
 
@@ -708,7 +758,7 @@ export function createTextVNode(text: string = ' ', flag: number = 0): VNode {
  */
 export function createStaticVNode(
   content: string,
-  numberOfNodes: number
+  numberOfNodes: number,
 ): VNode {
   // A static vnode can contain multiple stringified elements, and the number
   // of elements is necessary for hydration.
@@ -724,7 +774,7 @@ export function createCommentVNode(
   text: string = '',
   // when used as the v-else branch, the comment node must be created as a
   // block to ensure correct updates.
-  asBlock: boolean = false
+  asBlock: boolean = false,
 ): VNode {
   return asBlock
     ? (openBlock(), createBlock(Comment, null, text))
@@ -741,9 +791,9 @@ export function normalizeVNode(child: VNodeChild): VNode {
       Fragment,
       null,
       // #3666, avoid reference pollution when reusing vnode
-      child.slice()
+      child.slice(),
     )
-  } else if (typeof child === 'object') {
+  } else if (isVNode(child)) {
     // already vnode, this should be the most common since compiled templates
     // always produce all-vnode children arrays
     return cloneIfMounted(child)
@@ -755,13 +805,13 @@ export function normalizeVNode(child: VNodeChild): VNode {
 
 // optimized normalization for template-compiled render fns
 export function cloneIfMounted(child: VNode): VNode {
-  return (child.el === null && child.patchFlag !== PatchFlags.HOISTED) ||
+  return (child.el === null && child.patchFlag !== PatchFlags.CACHED) ||
     child.memo
     ? child
     : cloneVNode(child)
 }
 
-export function normalizeChildren(vnode: VNode, children: unknown) {
+export function normalizeChildren(vnode: VNode, children: unknown): void {
   let type = 0
   const { shapeFlag } = vnode
   if (children == null) {
@@ -782,7 +832,7 @@ export function normalizeChildren(vnode: VNode, children: unknown) {
     } else {
       type = ShapeFlags.SLOTS_CHILDREN
       const slotFlag = (children as RawSlots)._
-      if (!slotFlag && !(InternalObjectKey in children!)) {
+      if (!slotFlag && !isInternalObject(children)) {
         // if slots are not normalized, attach context instance
         // (compiled / normalized slots already have context)
         ;(children as RawSlots)._ctx = currentRenderingInstance
@@ -816,7 +866,7 @@ export function normalizeChildren(vnode: VNode, children: unknown) {
   vnode.shapeFlag |= type
 }
 
-export function mergeProps(...args: (Data & VNodeProps)[]) {
+export function mergeProps(...args: (Data & VNodeProps)[]): Data {
   const ret: Data = {}
   for (let i = 0; i < args.length; i++) {
     const toMerge = args[i]
@@ -851,10 +901,10 @@ export function invokeVNodeHook(
   hook: VNodeHook,
   instance: ComponentInternalInstance | null,
   vnode: VNode,
-  prevVNode: VNode | null = null
-) {
+  prevVNode: VNode | null = null,
+): void {
   callWithAsyncErrorHandling(hook, instance, ErrorCodes.VNODE_HOOK, [
     vnode,
-    prevVNode
+    prevVNode,
   ])
 }
diff --git a/packages/runtime-core/src/warning.ts b/packages/runtime-core/src/warning.ts
index 8e93d9efe..788e93721 100644
--- a/packages/runtime-core/src/warning.ts
+++ b/packages/runtime-core/src/warning.ts
@@ -1,13 +1,13 @@
-import { VNode } from './vnode'
+import type { VNode } from './vnode'
 import {
-  Data,
-  ComponentInternalInstance,
-  ConcreteComponent,
-  formatComponentName
+  type ComponentInternalInstance,
+  type ConcreteComponent,
+  type Data,
+  formatComponentName,
 } from './component'
-import { isString, isFunction } from '@vue/shared'
-import { toRaw, isRef, pauseTracking, resetTracking } from '@vue/reactivity'
-import { callWithErrorHandling, ErrorCodes } from './errorHandling'
+import { isFunction, isString } from '@vue/shared'
+import { isRef, pauseTracking, resetTracking, toRaw } from '@vue/reactivity'
+import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 
 type ComponentVNode = VNode & {
   type: ConcreteComponent
@@ -22,16 +22,19 @@ type TraceEntry = {
 
 type ComponentTraceStack = TraceEntry[]
 
-export function pushWarningContext(vnode: VNode) {
+export function pushWarningContext(vnode: VNode): void {
   stack.push(vnode)
 }
 
-export function popWarningContext() {
+export function popWarningContext(): void {
   stack.pop()
 }
 
-export function warn(msg: string, ...args: any[]) {
-  if (!__DEV__) return
+let isWarning = false
+
+export function warn(msg: string, ...args: any[]): void {
+  if (isWarning) return
+  isWarning = true
 
   // avoid props formatting or warn handler tracking deps that might be mutated
   // during patch, leading to infinite recursion.
@@ -47,30 +50,32 @@ export function warn(msg: string, ...args: any[]) {
       instance,
       ErrorCodes.APP_WARN_HANDLER,
       [
-        msg + args.join(''),
+        // eslint-disable-next-line no-restricted-syntax
+        msg + args.map(a => a.toString?.() ?? JSON.stringify(a)).join(''),
         instance && instance.proxy,
         trace
           .map(
-            ({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`
+            ({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`,
           )
           .join('\n'),
-        trace
-      ]
+        trace,
+      ],
     )
   } else {
     const warnArgs = [`[Vue warn]: ${msg}`, ...args]
-    /* istanbul ignore if */
     if (
       trace.length &&
       // avoid spamming console during tests
       !__TEST__
     ) {
+      /* v8 ignore next 2 */
       warnArgs.push(`\n`, ...formatTrace(trace))
     }
     console.warn(...warnArgs)
   }
 
   resetTracking()
+  isWarning = false
 }
 
 export function getComponentTrace(): ComponentTraceStack {
@@ -91,7 +96,7 @@ export function getComponentTrace(): ComponentTraceStack {
     } else {
       normalizedStack.push({
         vnode: currentVNode as ComponentVNode,
-        recurseCount: 0
+        recurseCount: 0,
       })
     }
     const parentInstance: ComponentInternalInstance | null =
@@ -102,7 +107,7 @@ export function getComponentTrace(): ComponentTraceStack {
   return normalizedStack
 }
 
-/* istanbul ignore next */
+/* v8 ignore start */
 function formatTrace(trace: ComponentTraceStack): any[] {
   const logs: any[] = []
   trace.forEach((entry, i) => {
@@ -118,7 +123,7 @@ function formatTraceEntry({ vnode, recurseCount }: TraceEntry): any[] {
   const open = ` at <${formatComponentName(
     vnode.component,
     vnode.type,
-    isRoot
+    isRoot,
   )}`
   const close = `>` + postfix
   return vnode.props
@@ -126,7 +131,6 @@ function formatTraceEntry({ vnode, recurseCount }: TraceEntry): any[] {
     : [open + close]
 }
 
-/* istanbul ignore next */
 function formatProps(props: Data): any[] {
   const res: any[] = []
   const keys = Object.keys(props)
@@ -141,7 +145,6 @@ function formatProps(props: Data): any[] {
 
 function formatProp(key: string, value: unknown): any[]
 function formatProp(key: string, value: unknown, raw: true): any
-/* istanbul ignore next */
 function formatProp(key: string, value: unknown, raw?: boolean): any {
   if (isString(value)) {
     value = JSON.stringify(value)
@@ -166,7 +169,7 @@ function formatProp(key: string, value: unknown, raw?: boolean): any {
 /**
  * @internal
  */
-export function assertNumber(val: unknown, type: string) {
+export function assertNumber(val: unknown, type: string): void {
   if (!__DEV__) return
   if (val === undefined) {
     return
@@ -176,3 +179,4 @@ export function assertNumber(val: unknown, type: string) {
     warn(`${type} is NaN - ` + 'the duration expression might be incorrect.')
   }
 }
+/* v8 ignore stop */
diff --git a/packages/runtime-core/types/globalComponents.d.ts b/packages/runtime-core/types/globalComponents.d.ts
new file mode 100644
index 000000000..a4abd6d1f
--- /dev/null
+++ b/packages/runtime-core/types/globalComponents.d.ts
@@ -0,0 +1,11 @@
+// Note: this file is auto concatenated to the end of the bundled d.ts during
+// build.
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    Teleport: DefineComponent<TeleportProps>
+    Suspense: DefineComponent<SuspenseProps>
+    KeepAlive: DefineComponent<KeepAliveProps>
+    BaseTransition: DefineComponent<BaseTransitionProps>
+  }
+}
diff --git a/packages/runtime-dom/README.md b/packages/runtime-dom/README.md
index 2ac2c4de8..11c373fe9 100644
--- a/packages/runtime-dom/README.md
+++ b/packages/runtime-dom/README.md
@@ -1,12 +1,12 @@
 # @vue/runtime-dom
 
-``` js
+```js
 import { h, createApp } from '@vue/runtime-dom'
 
 const RootComponent = {
   render() {
     return h('div', 'hello world')
-  }
+  },
 }
 
 createApp(RootComponent).mount('#app')
diff --git a/packages/runtime-dom/__tests__/createApp.spec.ts b/packages/runtime-dom/__tests__/createApp.spec.ts
index 0857d7ab2..9a8d05df2 100644
--- a/packages/runtime-dom/__tests__/createApp.spec.ts
+++ b/packages/runtime-dom/__tests__/createApp.spec.ts
@@ -7,7 +7,7 @@ describe('createApp for dom', () => {
     createApp({
       render() {
         return h('g')
-      }
+      },
     }).mount(root)
     expect(root.children.length).toBe(1)
     expect(root.children[0]).toBeInstanceOf(SVGElement)
@@ -18,9 +18,9 @@ describe('createApp for dom', () => {
     const originalObj = {
       data() {
         return {
-          counter: 0
+          counter: 0,
         }
-      }
+      },
     }
 
     const handler = vi.fn(msg => {
diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 6ccf02c4f..ef5051f42 100644
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -1,16 +1,27 @@
+import type { MockedFunction } from 'vitest'
 import {
+  type HMRRuntime,
+  type Ref,
+  Teleport,
+  type VueElement,
+  createApp,
   defineAsyncComponent,
   defineComponent,
   defineCustomElement,
   h,
   inject,
   nextTick,
-  Ref,
+  onMounted,
+  provide,
   ref,
+  render,
   renderSlot,
-  VueElement
+  useHost,
+  useShadowRoot,
 } from '../src'
 
+declare var __VUE_HMR_RUNTIME__: HMRRuntime
+
 describe('defineCustomElement', () => {
   const container = document.createElement('div')
   document.body.appendChild(container)
@@ -24,12 +35,12 @@ describe('defineCustomElement', () => {
       props: {
         msg: {
           type: String,
-          default: 'hello'
-        }
+          default: 'hello',
+        },
       },
       render() {
         return h('div', this.msg)
-      }
+      },
     })
     customElements.define('my-element', E)
 
@@ -60,6 +71,56 @@ describe('defineCustomElement', () => {
       expect(e.shadowRoot!.innerHTML).toBe('')
     })
 
+    // #10610
+    test('When elements move, avoid prematurely disconnecting MutationObserver', async () => {
+      const CustomInput = defineCustomElement({
+        props: ['value'],
+        emits: ['update'],
+        setup(props, { emit }) {
+          return () =>
+            h('input', {
+              type: 'number',
+              value: props.value,
+              onInput: (e: InputEvent) => {
+                const num = (e.target! as HTMLInputElement).valueAsNumber
+                emit('update', Number.isNaN(num) ? null : num)
+              },
+            })
+        },
+      })
+      customElements.define('my-el-input', CustomInput)
+      const num = ref('12')
+      const containerComp = defineComponent({
+        setup() {
+          return () => {
+            return h('div', [
+              h('my-el-input', {
+                value: num.value,
+                onUpdate: ($event: CustomEvent) => {
+                  num.value = $event.detail[0]
+                },
+              }),
+              h('div', { id: 'move' }),
+            ])
+          }
+        },
+      })
+      const app = createApp(containerComp)
+      const container = document.createElement('div')
+      document.body.appendChild(container)
+      app.mount(container)
+      const myInputEl = container.querySelector('my-el-input')!
+      const inputEl = myInputEl.shadowRoot!.querySelector('input')!
+      await nextTick()
+      expect(inputEl.value).toBe('12')
+      const moveEl = container.querySelector('#move')!
+      moveEl.append(myInputEl)
+      await nextTick()
+      myInputEl.removeAttribute('value')
+      await nextTick()
+      expect(inputEl.value).toBe('')
+    })
+
     test('should not unmount on move', async () => {
       container.innerHTML = `<div><my-element></my-element></div>`
       const e = container.childNodes[0].childNodes[0] as VueElement
@@ -88,16 +149,27 @@ describe('defineCustomElement', () => {
 
   describe('props', () => {
     const E = defineCustomElement({
-      props: ['foo', 'bar', 'bazQux'],
+      props: {
+        foo: [String, null],
+        bar: Object,
+        bazQux: null,
+        value: null,
+      },
       render() {
         return [
-          h('div', null, this.foo),
-          h('div', null, this.bazQux || (this.bar && this.bar.x))
+          h('div', null, this.foo || ''),
+          h('div', null, this.bazQux || (this.bar && this.bar.x)),
         ]
-      }
+      },
     })
     customElements.define('my-el-props', E)
 
+    test('renders custom element w/ correct object prop value', () => {
+      render(h('my-el-props', { value: { x: 1 } }), container)
+      const el = container.children[0]
+      expect((el as any).value).toEqual({ x: 1 })
+    })
+
     test('props via attribute', async () => {
       // bazQux should map to `baz-qux` attribute
       container.innerHTML = `<my-el-props foo="hello" baz-qux="bye"></my-el-props>`
@@ -112,7 +184,7 @@ describe('defineCustomElement', () => {
       e.setAttribute('baz-qux', 'changed')
       await nextTick()
       expect(e.shadowRoot!.innerHTML).toBe(
-        '<div>changed</div><div>changed</div>'
+        '<div>changed</div><div>changed</div>',
       )
     })
 
@@ -139,18 +211,39 @@ describe('defineCustomElement', () => {
       expect(e.shadowRoot!.innerHTML).toBe('<div></div><div>two</div>')
       expect(e.hasAttribute('foo')).toBe(false)
 
+      e.foo = undefined
+      await nextTick()
+      expect(e.shadowRoot!.innerHTML).toBe('<div></div><div>two</div>')
+      expect(e.hasAttribute('foo')).toBe(false)
+      expect(e.foo).toBe(undefined)
+
       e.bazQux = 'four'
       await nextTick()
       expect(e.shadowRoot!.innerHTML).toBe('<div></div><div>four</div>')
       expect(e.getAttribute('baz-qux')).toBe('four')
     })
 
+    test('props via hyphen property', async () => {
+      const Comp = defineCustomElement({
+        props: {
+          fooBar: Boolean,
+        },
+        render() {
+          return 'Comp'
+        },
+      })
+      customElements.define('my-el-comp', Comp)
+      render(h('my-el-comp', { 'foo-bar': true }), container)
+      const el = container.children[0]
+      expect((el as any).outerHTML).toBe('<my-el-comp foo-bar=""></my-el-comp>')
+    })
+
     test('attribute -> prop type casting', async () => {
       const E = defineCustomElement({
         props: {
           fooBar: Number, // test casting of camelCase prop names
           bar: Boolean,
-          baz: String
+          baz: String,
         },
         render() {
           return [
@@ -159,15 +252,15 @@ describe('defineCustomElement', () => {
             this.bar,
             typeof this.bar,
             this.baz,
-            typeof this.baz
+            typeof this.baz,
           ].join(' ')
-        }
+        },
       })
       customElements.define('my-el-props-cast', E)
       container.innerHTML = `<my-el-props-cast foo-bar="1" baz="12345"></my-el-props-cast>`
       const e = container.childNodes[0] as VueElement
       expect(e.shadowRoot!.innerHTML).toBe(
-        `1 number false boolean 12345 string`
+        `1 number false boolean 12345 string`,
       )
 
       e.setAttribute('bar', '')
@@ -177,7 +270,7 @@ describe('defineCustomElement', () => {
       e.setAttribute('foo-bar', '2e1')
       await nextTick()
       expect(e.shadowRoot!.innerHTML).toBe(
-        `20 number true boolean 12345 string`
+        `20 number true boolean 12345 string`,
       )
 
       e.setAttribute('baz', '2e1')
@@ -189,11 +282,11 @@ describe('defineCustomElement', () => {
     test('attr casting w/ programmatic creation', () => {
       const E = defineCustomElement({
         props: {
-          foo: Number
+          foo: Number,
         },
         render() {
           return `foo type: ${typeof this.foo}`
-        }
+        },
       })
       customElements.define('my-element-programmatic', E)
       const el = document.createElement('my-element-programmatic') as any
@@ -206,7 +299,7 @@ describe('defineCustomElement', () => {
       const E = defineCustomElement({
         props: {
           foo: String,
-          dataAge: Number
+          dataAge: Number,
         },
         setup(props) {
           expect(props.foo).toBe('hello')
@@ -214,7 +307,7 @@ describe('defineCustomElement', () => {
         },
         render() {
           return h('div', `foo: ${this.foo}`)
-        }
+        },
       })
       const el = document.createElement('my-el-upgrade') as any
       el.foo = 'hello'
@@ -232,7 +325,7 @@ describe('defineCustomElement', () => {
       const E = defineCustomElement({
         props: {
           foo: String,
-          post: Object
+          post: Object,
         },
         setup(props) {
           expect(props.foo).toBe('hello')
@@ -240,7 +333,7 @@ describe('defineCustomElement', () => {
         },
         render() {
           return JSON.stringify(this.post)
-        }
+        },
       })
       customElements.define('my-el-preconnect', E)
       const el = document.createElement('my-el-preconnect') as any
@@ -256,7 +349,7 @@ describe('defineCustomElement', () => {
       const E = defineCustomElement({
         render() {
           return h('div', 'foo')
-        }
+        },
       })
       customElements.define('my-element-noprops', E)
       const el = document.createElement('my-element-noprops')
@@ -265,16 +358,16 @@ describe('defineCustomElement', () => {
       expect(el.shadowRoot!.innerHTML).toMatchInlineSnapshot('"<div>foo</div>"')
     })
 
-    // # 5793
+    // #5793
     test('set number value in dom property', () => {
       const E = defineCustomElement({
         props: {
-          'max-age': Number
+          'max-age': Number,
         },
         render() {
-          // @ts-ignore
+          // @ts-expect-error
           return `max age: ${this.maxAge}/type: ${typeof this.maxAge}`
-        }
+        },
       })
       customElements.define('my-element-number-property', E)
       const el = document.createElement('my-element-number-property') as any
@@ -283,13 +376,49 @@ describe('defineCustomElement', () => {
       expect(el.maxAge).toBe(50)
       expect(el.shadowRoot.innerHTML).toBe('max age: 50/type: number')
     })
+
+    // #9006
+    test('should reflect default value', () => {
+      const E = defineCustomElement({
+        props: {
+          value: {
+            type: String,
+            default: 'hi',
+          },
+        },
+        render() {
+          return this.value
+        },
+      })
+      customElements.define('my-el-default-val', E)
+      container.innerHTML = `<my-el-default-val></my-el-default-val>`
+      const e = container.childNodes[0] as any
+      expect(e.value).toBe('hi')
+    })
+
+    test('support direct setup function syntax with extra options', () => {
+      const E = defineCustomElement(
+        props => {
+          return () => props.text
+        },
+        {
+          props: {
+            text: String,
+          },
+        },
+      )
+      customElements.define('my-el-setup-with-props', E)
+      container.innerHTML = `<my-el-setup-with-props text="hello"></my-el-setup-with-props>`
+      const e = container.childNodes[0] as VueElement
+      expect(e.shadowRoot!.innerHTML).toBe('hello')
+    })
   })
 
   describe('attrs', () => {
     const E = defineCustomElement({
       render() {
         return [h('div', null, this.$attrs.foo as string)]
-      }
+      },
     })
     customElements.define('my-el-attrs', E)
 
@@ -305,7 +434,7 @@ describe('defineCustomElement', () => {
 
     test('non-declared properties should not show up in $attrs', () => {
       const e = new E()
-      // @ts-ignore
+      // @ts-expect-error
       e.foo = '123'
       container.appendChild(e)
       expect(e.shadowRoot!.innerHTML).toBe('<div></div>')
@@ -323,9 +452,12 @@ describe('defineCustomElement', () => {
             },
             onMousedown: () => {
               emit('myEvent', 1) // validate hyphenation
-            }
+            },
+            onWheel: () => {
+              emit('my-wheel', { bubbles: true }, 1)
+            },
           })
-      }
+      },
     })
     const E = defineCustomElement(CompDef)
     customElements.define('my-el-emits', E)
@@ -346,7 +478,7 @@ describe('defineCustomElement', () => {
       e.shadowRoot!.childNodes[0].dispatchEvent(new CustomEvent('click'))
       expect(spy).toHaveBeenCalledTimes(1)
       expect(spy.mock.calls[0][0]).toMatchObject({
-        detail: [1]
+        detail: [1],
       })
     })
 
@@ -380,15 +512,16 @@ describe('defineCustomElement', () => {
       e.shadowRoot!.childNodes[0].dispatchEvent(new CustomEvent('click'))
       expect(spy).toHaveBeenCalled()
       expect(spy.mock.calls[0][0]).toMatchObject({
-        detail: [1]
+        detail: [1],
       })
     })
+
     // #7293
     test('emit in an async component wrapper with properties bound', async () => {
       const E = defineCustomElement(
         defineAsyncComponent(
-          () => new Promise<typeof CompDef>(res => res(CompDef as any))
-        )
+          () => new Promise<typeof CompDef>(res => res(CompDef as any)),
+        ),
       )
       customElements.define('my-async-el-props-emits', E)
       container.innerHTML = `<my-async-el-props-emits id="my_async_el_props_emits"></my-async-el-props-emits>`
@@ -401,7 +534,20 @@ describe('defineCustomElement', () => {
       e.shadowRoot!.childNodes[0].dispatchEvent(new CustomEvent('click'))
       expect(spy).toHaveBeenCalled()
       expect(spy.mock.calls[0][0]).toMatchObject({
-        detail: [1]
+        detail: [1],
+      })
+    })
+
+    test('emit with options', async () => {
+      container.innerHTML = `<my-el-emits></my-el-emits>`
+      const e = container.childNodes[0] as VueElement
+      const spy = vi.fn()
+      e.addEventListener('my-wheel', spy)
+      e.shadowRoot!.childNodes[0].dispatchEvent(new CustomEvent('wheel'))
+      expect(spy).toHaveBeenCalledTimes(1)
+      expect(spy.mock.calls[0][0]).toMatchObject({
+        bubbles: true,
+        detail: [{ bubbles: true }, 1],
       })
     })
   })
@@ -412,22 +558,22 @@ describe('defineCustomElement', () => {
         return [
           h('div', null, [
             renderSlot(this.$slots, 'default', undefined, () => [
-              h('div', 'fallback')
-            ])
+              h('div', 'fallback'),
+            ]),
           ]),
-          h('div', null, renderSlot(this.$slots, 'named'))
+          h('div', null, renderSlot(this.$slots, 'named')),
         ]
-      }
+      },
     })
     customElements.define('my-el-slots', E)
 
-    test('default slot', () => {
+    test('render slots correctly', () => {
       container.innerHTML = `<my-el-slots><span>hi</span></my-el-slots>`
       const e = container.childNodes[0] as VueElement
       // native slots allocation does not affect innerHTML, so we just
       // verify that we've rendered the correct native slots here...
       expect(e.shadowRoot!.innerHTML).toBe(
-        `<div><slot><div>fallback</div></slot></div><div><slot name="named"></slot></div>`
+        `<div><slot><div>fallback</div></slot></div><div><slot name="named"></slot></div>`,
       )
     })
   })
@@ -437,7 +583,7 @@ describe('defineCustomElement', () => {
       setup() {
         const foo = inject<Ref>('foo')!
         return () => h('div', foo.value)
-      }
+      },
     })
     customElements.define('my-consumer', Consumer)
 
@@ -445,11 +591,11 @@ describe('defineCustomElement', () => {
       const foo = ref('injected!')
       const Provider = defineCustomElement({
         provide: {
-          foo
+          foo,
         },
         render() {
           return h('my-consumer')
-        }
+        },
       })
       customElements.define('my-provider', Provider)
       container.innerHTML = `<my-provider><my-provider>`
@@ -467,11 +613,11 @@ describe('defineCustomElement', () => {
       const foo = ref('injected!')
       const Provider = defineCustomElement({
         provide: {
-          foo
+          foo,
         },
         render() {
           return renderSlot(this.$slots, 'default')
-        }
+        },
       })
       customElements.define('my-provider-2', Provider)
 
@@ -490,19 +636,19 @@ describe('defineCustomElement', () => {
       const fooB = ref('FooB!')
       const ProviderA = defineCustomElement({
         provide: {
-          fooA
+          fooA,
         },
         render() {
           return h('provider-b')
-        }
+        },
       })
       const ProviderB = defineCustomElement({
         provide: {
-          fooB
+          fooB,
         },
         render() {
           return h('my-multi-consumer')
-        }
+        },
       })
 
       const Consumer = defineCustomElement({
@@ -510,7 +656,7 @@ describe('defineCustomElement', () => {
           const fooA = inject<Ref>('fooA')!
           const fooB = inject<Ref>('fooB')!
           return () => h('div', `${fooA.value} ${fooB.value}`)
-        }
+        },
       })
 
       customElements.define('provider-a', ProviderA)
@@ -527,24 +673,107 @@ describe('defineCustomElement', () => {
       fooB.value = 'changedB!'
       await nextTick()
       expect(consumer.shadowRoot!.innerHTML).toBe(
-        `<div>changedA! changedB!</div>`
+        `<div>changedA! changedB!</div>`,
       )
     })
   })
 
   describe('styles', () => {
-    test('should attach styles to shadow dom', () => {
-      const Foo = defineCustomElement({
+    function assertStyles(el: VueElement, css: string[]) {
+      const styles = el.shadowRoot?.querySelectorAll('style')!
+      expect(styles.length).toBe(css.length) // should not duplicate multiple copies from Bar
+      for (let i = 0; i < css.length; i++) {
+        expect(styles[i].textContent).toBe(css[i])
+      }
+    }
+
+    test('should attach styles to shadow dom', async () => {
+      const def = defineComponent({
+        __hmrId: 'foo',
         styles: [`div { color: red; }`],
         render() {
           return h('div', 'hello')
-        }
+        },
       })
+      const Foo = defineCustomElement(def)
       customElements.define('my-el-with-styles', Foo)
       container.innerHTML = `<my-el-with-styles></my-el-with-styles>`
       const el = container.childNodes[0] as VueElement
       const style = el.shadowRoot?.querySelector('style')!
       expect(style.textContent).toBe(`div { color: red; }`)
+
+      // hmr
+      __VUE_HMR_RUNTIME__.reload('foo', {
+        ...def,
+        styles: [`div { color: blue; }`, `div { color: yellow; }`],
+      } as any)
+
+      await nextTick()
+      assertStyles(el, [`div { color: blue; }`, `div { color: yellow; }`])
+    })
+
+    test("child components should inject styles to root element's shadow root", async () => {
+      const Baz = () => h(Bar)
+      const Bar = defineComponent({
+        __hmrId: 'bar',
+        styles: [`div { color: green; }`, `div { color: blue; }`],
+        render() {
+          return 'bar'
+        },
+      })
+      const Foo = defineCustomElement({
+        styles: [`div { color: red; }`],
+        render() {
+          return [h(Baz), h(Baz)]
+        },
+      })
+      customElements.define('my-el-with-child-styles', Foo)
+      container.innerHTML = `<my-el-with-child-styles></my-el-with-child-styles>`
+      const el = container.childNodes[0] as VueElement
+
+      // inject order should be child -> parent
+      assertStyles(el, [
+        `div { color: green; }`,
+        `div { color: blue; }`,
+        `div { color: red; }`,
+      ])
+
+      // hmr
+      __VUE_HMR_RUNTIME__.reload(Bar.__hmrId!, {
+        ...Bar,
+        styles: [`div { color: red; }`, `div { color: yellow; }`],
+      } as any)
+
+      await nextTick()
+      assertStyles(el, [
+        `div { color: red; }`,
+        `div { color: yellow; }`,
+        `div { color: red; }`,
+      ])
+
+      __VUE_HMR_RUNTIME__.reload(Bar.__hmrId!, {
+        ...Bar,
+        styles: [`div { color: blue; }`],
+      } as any)
+      await nextTick()
+      assertStyles(el, [`div { color: blue; }`, `div { color: red; }`])
+    })
+
+    test('with nonce', () => {
+      const Foo = defineCustomElement(
+        {
+          styles: [`div { color: red; }`],
+          render() {
+            return h('div', 'hello')
+          },
+        },
+        { nonce: 'xxx' },
+      )
+      customElements.define('my-el-with-nonce', Foo)
+      container.innerHTML = `<my-el-with-nonce></my-el-with-nonce>`
+      const el = container.childNodes[0] as VueElement
+      const style = el.shadowRoot?.querySelector('style')!
+      expect(style.getAttribute('nonce')).toBe('xxx')
     })
   })
 
@@ -559,9 +788,9 @@ describe('defineCustomElement', () => {
             styles: [`div { color: red }`],
             render(this: any) {
               return h('div', null, this.msg)
-            }
+            },
           })
-        })
+        }),
       )
       customElements.define('my-el-async', E)
       container.innerHTML =
@@ -578,10 +807,10 @@ describe('defineCustomElement', () => {
 
       // should inject styles
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>hello</div>`
+        `<style>div { color: red }</style><div>hello</div>`,
       )
       expect(e2.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>world</div>`
+        `<style>div { color: red }</style><div>world</div>`,
       )
 
       // attr
@@ -589,7 +818,7 @@ describe('defineCustomElement', () => {
       await nextTick()
       expect((e1 as any).msg).toBe('attr')
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>attr</div>`
+        `<style>div { color: red }</style><div>attr</div>`,
       )
 
       // props
@@ -597,7 +826,7 @@ describe('defineCustomElement', () => {
       ;(e1 as any).msg = 'prop'
       expect(e1.getAttribute('msg')).toBe('prop')
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>prop</div>`
+        `<style>div { color: red }</style><div>prop</div>`,
       )
     })
 
@@ -611,9 +840,9 @@ describe('defineCustomElement', () => {
             },
             render(this: any) {
               return h('div', this.msg)
-            }
+            },
           })
-        })
+        }),
       )
       customElements.define('my-el-async-2', E)
 
@@ -652,9 +881,9 @@ describe('defineCustomElement', () => {
             },
             render(this: any) {
               return h('div', this.n + ',' + typeof this.n)
-            }
+            },
           })
-        })
+        }),
       )
       customElements.define('my-el-async-3', E)
       container.innerHTML = `<my-el-async-3 n="2e1"></my-el-async-3>`
@@ -673,14 +902,14 @@ describe('defineCustomElement', () => {
               return [
                 h('div', null, [
                   renderSlot(this.$slots, 'default', undefined, () => [
-                    h('div', 'fallback')
-                  ])
+                    h('div', 'fallback'),
+                  ]),
                 ]),
-                h('div', null, renderSlot(this.$slots, 'named'))
+                h('div', null, renderSlot(this.$slots, 'named')),
               ]
-            }
+            },
           })
-        })
+        }),
       )
       customElements.define('my-el-async-slots', E)
       container.innerHTML = `<my-el-async-slots><span>hi</span></my-el-async-slots>`
@@ -689,8 +918,472 @@ describe('defineCustomElement', () => {
 
       const e = container.childNodes[0] as VueElement
       expect(e.shadowRoot!.innerHTML).toBe(
-        `<div><slot><div>fallback</div></slot></div><div><slot name="named"></slot></div>`
+        `<div><slot><div>fallback</div></slot></div><div><slot name="named"></slot></div>`,
       )
     })
   })
+
+  describe('shadowRoot: false', () => {
+    const E = defineCustomElement({
+      shadowRoot: false,
+      props: {
+        msg: {
+          type: String,
+          default: 'hello',
+        },
+      },
+      render() {
+        return h('div', this.msg)
+      },
+    })
+    customElements.define('my-el-shadowroot-false', E)
+
+    test('should work', async () => {
+      function raf() {
+        return new Promise(resolve => {
+          requestAnimationFrame(resolve)
+        })
+      }
+
+      container.innerHTML = `<my-el-shadowroot-false></my-el-shadowroot-false>`
+      const e = container.childNodes[0] as VueElement
+      await raf()
+      expect(e).toBeInstanceOf(E)
+      expect(e._instance).toBeTruthy()
+      expect(e.innerHTML).toBe(`<div>hello</div>`)
+      expect(e.shadowRoot).toBe(null)
+    })
+
+    const toggle = ref(true)
+    const ES = defineCustomElement(
+      {
+        render() {
+          return [
+            renderSlot(this.$slots, 'default'),
+            toggle.value ? renderSlot(this.$slots, 'named') : null,
+            renderSlot(this.$slots, 'omitted', {}, () => [
+              h('div', 'fallback'),
+            ]),
+          ]
+        },
+      },
+      { shadowRoot: false },
+    )
+    customElements.define('my-el-shadowroot-false-slots', ES)
+
+    test('should render slots', async () => {
+      container.innerHTML =
+        `<my-el-shadowroot-false-slots>` +
+        `<span>default</span>text` +
+        `<div slot="named">named</div>` +
+        `</my-el-shadowroot-false-slots>`
+      const e = container.childNodes[0] as VueElement
+      // native slots allocation does not affect innerHTML, so we just
+      // verify that we've rendered the correct native slots here...
+      expect(e.innerHTML).toBe(
+        `<span>default</span>text` +
+          `<div slot="named">named</div>` +
+          `<div>fallback</div>`,
+      )
+
+      toggle.value = false
+      await nextTick()
+      expect(e.innerHTML).toBe(
+        `<span>default</span>text` + `<!---->` + `<div>fallback</div>`,
+      )
+    })
+
+    test('render nested customElement w/ shadowRoot false', async () => {
+      const calls: string[] = []
+
+      const Child = defineCustomElement(
+        {
+          setup() {
+            calls.push('child rendering')
+            onMounted(() => {
+              calls.push('child mounted')
+            })
+          },
+          render() {
+            return renderSlot(this.$slots, 'default')
+          },
+        },
+        { shadowRoot: false },
+      )
+      customElements.define('my-child', Child)
+
+      const Parent = defineCustomElement(
+        {
+          setup() {
+            calls.push('parent rendering')
+            onMounted(() => {
+              calls.push('parent mounted')
+            })
+          },
+          render() {
+            return renderSlot(this.$slots, 'default')
+          },
+        },
+        { shadowRoot: false },
+      )
+      customElements.define('my-parent', Parent)
+
+      const App = {
+        render() {
+          return h('my-parent', null, {
+            default: () => [
+              h('my-child', null, {
+                default: () => [h('span', null, 'default')],
+              }),
+            ],
+          })
+        },
+      }
+      const app = createApp(App)
+      app.mount(container)
+      await nextTick()
+      const e = container.childNodes[0] as VueElement
+      expect(e.innerHTML).toBe(
+        `<my-child data-v-app=""><span>default</span></my-child>`,
+      )
+      expect(calls).toEqual([
+        'parent rendering',
+        'parent mounted',
+        'child rendering',
+        'child mounted',
+      ])
+      app.unmount()
+    })
+
+    test('render nested Teleport w/ shadowRoot false', async () => {
+      const target = document.createElement('div')
+      const Child = defineCustomElement(
+        {
+          render() {
+            return h(
+              Teleport,
+              { to: target },
+              {
+                default: () => [renderSlot(this.$slots, 'default')],
+              },
+            )
+          },
+        },
+        { shadowRoot: false },
+      )
+      customElements.define('my-el-teleport-child', Child)
+      const Parent = defineCustomElement(
+        {
+          render() {
+            return renderSlot(this.$slots, 'default')
+          },
+        },
+        { shadowRoot: false },
+      )
+      customElements.define('my-el-teleport-parent', Parent)
+
+      const App = {
+        render() {
+          return h('my-el-teleport-parent', null, {
+            default: () => [
+              h('my-el-teleport-child', null, {
+                default: () => [h('span', null, 'default')],
+              }),
+            ],
+          })
+        },
+      }
+      const app = createApp(App)
+      app.mount(container)
+      await nextTick()
+      expect(target.innerHTML).toBe(`<span>default</span>`)
+      app.unmount()
+    })
+  })
+
+  describe('helpers', () => {
+    test('useHost', () => {
+      const Foo = defineCustomElement({
+        setup() {
+          const host = useHost()!
+          host.setAttribute('id', 'host')
+          return () => h('div', 'hello')
+        },
+      })
+      customElements.define('my-el-use-host', Foo)
+      container.innerHTML = `<my-el-use-host>`
+      const el = container.childNodes[0] as VueElement
+      expect(el.id).toBe('host')
+    })
+
+    test('useShadowRoot for style injection', () => {
+      const Foo = defineCustomElement({
+        setup() {
+          const root = useShadowRoot()!
+          const style = document.createElement('style')
+          style.innerHTML = `div { color: red; }`
+          root.appendChild(style)
+          return () => h('div', 'hello')
+        },
+      })
+      customElements.define('my-el-use-shadow-root', Foo)
+      container.innerHTML = `<my-el-use-shadow-root>`
+      const el = container.childNodes[0] as VueElement
+      const style = el.shadowRoot?.querySelector('style')!
+      expect(style.textContent).toBe(`div { color: red; }`)
+    })
+  })
+
+  describe('expose', () => {
+    test('expose attributes and callback', async () => {
+      type SetValue = (value: string) => void
+      let fn: MockedFunction<SetValue>
+
+      const E = defineCustomElement({
+        setup(_, { expose }) {
+          const value = ref('hello')
+
+          const setValue = (fn = vi.fn((_value: string) => {
+            value.value = _value
+          }))
+
+          expose({
+            setValue,
+            value,
+          })
+
+          return () => h('div', null, [value.value])
+        },
+      })
+      customElements.define('my-el-expose', E)
+
+      container.innerHTML = `<my-el-expose></my-el-expose>`
+      const e = container.childNodes[0] as VueElement & {
+        value: string
+        setValue: MockedFunction<SetValue>
+      }
+      expect(e.shadowRoot!.innerHTML).toBe(`<div>hello</div>`)
+      expect(e.value).toBe('hello')
+      expect(e.setValue).toBe(fn!)
+      e.setValue('world')
+      expect(e.value).toBe('world')
+      await nextTick()
+      expect(e.shadowRoot!.innerHTML).toBe(`<div>world</div>`)
+    })
+
+    test('warning when exposing an existing property', () => {
+      const E = defineCustomElement({
+        props: {
+          value: String,
+        },
+        setup(props, { expose }) {
+          expose({
+            value: 'hello',
+          })
+
+          return () => h('div', null, [props.value])
+        },
+      })
+      customElements.define('my-el-expose-two', E)
+
+      container.innerHTML = `<my-el-expose-two value="world"></my-el-expose-two>`
+
+      expect(
+        `[Vue warn]: Exposed property "value" already exists on custom element.`,
+      ).toHaveBeenWarned()
+    })
+  })
+
+  test('async & nested custom elements', async () => {
+    let fooVal: string | undefined = ''
+    const E = defineCustomElement(
+      defineAsyncComponent(() => {
+        return Promise.resolve({
+          setup(props) {
+            provide('foo', 'foo')
+          },
+          render(this: any) {
+            return h('div', null, [renderSlot(this.$slots, 'default')])
+          },
+        })
+      }),
+    )
+
+    const EChild = defineCustomElement({
+      setup(props) {
+        fooVal = inject('foo')
+      },
+      render(this: any) {
+        return h('div', null, 'child')
+      },
+    })
+    customElements.define('my-el-async-nested-ce', E)
+    customElements.define('slotted-child', EChild)
+    container.innerHTML = `<my-el-async-nested-ce><div><slotted-child></slotted-child></div></my-el-async-nested-ce>`
+
+    await new Promise(r => setTimeout(r))
+    const e = container.childNodes[0] as VueElement
+    expect(e.shadowRoot!.innerHTML).toBe(`<div><slot></slot></div>`)
+    expect(fooVal).toBe('foo')
+  })
+
+  test('async & multiple levels of nested custom elements', async () => {
+    let fooVal: string | undefined = ''
+    let barVal: string | undefined = ''
+    const E = defineCustomElement(
+      defineAsyncComponent(() => {
+        return Promise.resolve({
+          setup(props) {
+            provide('foo', 'foo')
+          },
+          render(this: any) {
+            return h('div', null, [renderSlot(this.$slots, 'default')])
+          },
+        })
+      }),
+    )
+
+    const EChild = defineCustomElement({
+      setup(props) {
+        provide('bar', 'bar')
+      },
+      render(this: any) {
+        return h('div', null, [renderSlot(this.$slots, 'default')])
+      },
+    })
+
+    const EChild2 = defineCustomElement({
+      setup(props) {
+        fooVal = inject('foo')
+        barVal = inject('bar')
+      },
+      render(this: any) {
+        return h('div', null, 'child')
+      },
+    })
+    customElements.define('my-el-async-nested-m-ce', E)
+    customElements.define('slotted-child-m', EChild)
+    customElements.define('slotted-child2-m', EChild2)
+    container.innerHTML =
+      `<my-el-async-nested-m-ce>` +
+      `<div><slotted-child-m>` +
+      `<slotted-child2-m></slotted-child2-m>` +
+      `</slotted-child-m></div>` +
+      `</my-el-async-nested-m-ce>`
+
+    await new Promise(r => setTimeout(r))
+    const e = container.childNodes[0] as VueElement
+    expect(e.shadowRoot!.innerHTML).toBe(`<div><slot></slot></div>`)
+    expect(fooVal).toBe('foo')
+    expect(barVal).toBe('bar')
+  })
+
+  describe('configureApp', () => {
+    test('should work', () => {
+      const E = defineCustomElement(
+        () => {
+          const msg = inject('msg')
+          return () => h('div', msg!)
+        },
+        {
+          configureApp(app) {
+            app.provide('msg', 'app-injected')
+          },
+        },
+      )
+      customElements.define('my-element-with-app', E)
+
+      container.innerHTML = `<my-element-with-app></my-element-with-app>`
+      const e = container.childNodes[0] as VueElement
+
+      expect(e.shadowRoot?.innerHTML).toBe('<div>app-injected</div>')
+    })
+  })
+
+  // #9885
+  test('avoid double mount when prop is set immediately after mount', () => {
+    customElements.define(
+      'my-input-dupe',
+      defineCustomElement({
+        props: {
+          value: String,
+        },
+        render() {
+          return 'hello'
+        },
+      }),
+    )
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    createApp({
+      render() {
+        return h('div', [
+          h('my-input-dupe', {
+            onVnodeMounted(vnode) {
+              vnode.el!.value = 'fesfes'
+            },
+          }),
+        ])
+      },
+    }).mount(container)
+    expect(container.children[0].children[0].shadowRoot?.innerHTML).toBe(
+      'hello',
+    )
+  })
+
+  // #11081
+  test('Props can be casted when mounting custom elements in component rendering functions', async () => {
+    const E = defineCustomElement(
+      defineAsyncComponent(() =>
+        Promise.resolve({
+          props: ['fooValue'],
+          setup(props) {
+            expect(props.fooValue).toBe('fooValue')
+            return () => h('div', props.fooValue)
+          },
+        }),
+      ),
+    )
+    customElements.define('my-el-async-4', E)
+    const R = defineComponent({
+      setup() {
+        const fooValue = ref('fooValue')
+        return () => {
+          return h('div', null, [
+            h('my-el-async-4', {
+              fooValue: fooValue.value,
+            }),
+          ])
+        }
+      },
+    })
+
+    const app = createApp(R)
+    app.mount(container)
+    await new Promise(r => setTimeout(r))
+    const e = container.querySelector('my-el-async-4') as VueElement
+    expect(e.shadowRoot!.innerHTML).toBe(`<div>fooValue</div>`)
+    app.unmount()
+  })
+
+  // #11276
+  test('delete prop on attr removal', async () => {
+    const E = defineCustomElement({
+      props: {
+        boo: {
+          type: Boolean,
+        },
+      },
+      render() {
+        return this.boo + ',' + typeof this.boo
+      },
+    })
+    customElements.define('el-attr-removal', E)
+    container.innerHTML = '<el-attr-removal boo>'
+    const e = container.childNodes[0] as VueElement
+    expect(e.shadowRoot!.innerHTML).toBe(`true,boolean`)
+    e.removeAttribute('boo')
+    await nextTick()
+    expect(e.shadowRoot!.innerHTML).toBe(`false,boolean`)
+  })
 })
diff --git a/packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts b/packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts
index 89ccf02bc..a02cf0f78 100644
--- a/packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts
+++ b/packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts
@@ -1,8 +1,8 @@
-import { type SpyInstance } from 'vitest'
-import { render, h } from '@vue/runtime-dom'
+import type { MockInstance } from 'vitest'
+import { h, render } from '@vue/runtime-dom'
 
 describe('customized built-in elements support', () => {
-  let createElement: SpyInstance
+  let createElement: MockInstance
   afterEach(() => {
     createElement.mockRestore()
   })
@@ -13,7 +13,7 @@ describe('customized built-in elements support', () => {
     render(h('button', { is: 'plastic-button' }), root)
     expect(createElement.mock.calls[0]).toMatchObject([
       'button',
-      { is: 'plastic-button' }
+      { is: 'plastic-button' },
     ])
     // should also render the attribute
     expect(root.innerHTML).toBe(`<button is="plastic-button"></button>`)
diff --git a/packages/runtime-dom/__tests__/directives/vCloak.spec.ts b/packages/runtime-dom/__tests__/directives/vCloak.spec.ts
index 813147cc3..845bb540a 100644
--- a/packages/runtime-dom/__tests__/directives/vCloak.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vCloak.spec.ts
@@ -5,7 +5,7 @@ describe('vCloak', () => {
     const root = document.createElement('div')
     root.setAttribute('v-cloak', '')
     createApp({
-      render() {}
+      render() {},
     }).mount(root)
     expect(root.hasAttribute('v-cloak')).toBe(false)
   })
diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
index acf1b40b6..534e5dfe9 100644
--- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
@@ -1,12 +1,12 @@
 import {
-  h,
-  render,
-  nextTick,
+  type VNode,
   defineComponent,
+  h,
+  nextTick,
+  ref,
+  render,
   vModelDynamic,
   withDirectives,
-  VNode,
-  ref
 } from '@vue/runtime-dom'
 
 const triggerEvent = (type: string, el: Element) => {
@@ -41,12 +41,12 @@ describe('vModel', () => {
               'onUpdate:modelValue': setValue.bind(this),
               onInput: () => {
                 manualListener(data.value)
-              }
+              },
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -80,12 +80,12 @@ describe('vModel', () => {
           withVModel(
             h('input', {
               type: 'number',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -119,20 +119,20 @@ describe('vModel', () => {
             h('input', {
               id: 'input_num1',
               type: 'number',
-              'onUpdate:modelValue': setValue1.bind(this)
+              'onUpdate:modelValue': setValue1.bind(this),
             }),
-            this.value1
+            this.value1,
           ),
           withVModel(
             h('input', {
               id: 'input_num2',
               type: 'number',
-              'onUpdate:modelValue': setValue2.bind(this)
+              'onUpdate:modelValue': setValue2.bind(this),
             }),
-            this.value2
-          )
+            this.value2,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
     const data = root._vnode.component.data
@@ -166,12 +166,12 @@ describe('vModel', () => {
         return [
           withVModel(
             h('input', {
-              'onUpdate:modelValue': [setValue.bind(this), spy]
+              'onUpdate:modelValue': [setValue.bind(this), spy],
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -195,12 +195,12 @@ describe('vModel', () => {
         return [
           withVModel(
             h('input', {
-              'onUpdate:modelValue': toggle.value ? spy1 : spy2
+              'onUpdate:modelValue': toggle.value ? spy1 : spy2,
             }),
-            'foo'
-          )
+            'foo',
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -231,12 +231,12 @@ describe('vModel', () => {
         return [
           withVModel(
             h('textarea', {
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -256,7 +256,13 @@ describe('vModel', () => {
   it('should support modifiers', async () => {
     const component = defineComponent({
       data() {
-        return { number: null, trim: null, lazy: null, trimNumber: null }
+        return {
+          number: null,
+          trim: null,
+          lazy: null,
+          trimNumber: null,
+          trimLazy: null,
+        }
       },
       render() {
         return [
@@ -265,58 +271,72 @@ describe('vModel', () => {
               class: 'number',
               'onUpdate:modelValue': (val: any) => {
                 this.number = val
-              }
+              },
             }),
             this.number,
             {
-              number: true
-            }
+              number: true,
+            },
           ),
           withVModel(
             h('input', {
               class: 'trim',
               'onUpdate:modelValue': (val: any) => {
                 this.trim = val
-              }
+              },
             }),
             this.trim,
             {
-              trim: true
-            }
+              trim: true,
+            },
+          ),
+          withVModel(
+            h('input', {
+              class: 'trim-lazy',
+              'onUpdate:modelValue': (val: any) => {
+                this.trimLazy = val
+              },
+            }),
+            this.trim,
+            {
+              trim: true,
+              lazy: true,
+            },
           ),
           withVModel(
             h('input', {
               class: 'trim-number',
               'onUpdate:modelValue': (val: any) => {
                 this.trimNumber = val
-              }
+              },
             }),
             this.trimNumber,
             {
               trim: true,
-              number: true
-            }
+              number: true,
+            },
           ),
           withVModel(
             h('input', {
               class: 'lazy',
               'onUpdate:modelValue': (val: any) => {
                 this.lazy = val
-              }
+              },
             }),
             this.lazy,
             {
-              lazy: true
-            }
-          )
+              lazy: true,
+            },
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
     const number = root.querySelector('.number')
     const trim = root.querySelector('.trim')
     const trimNumber = root.querySelector('.trim-number')
+    const trimLazy = root.querySelector('.trim-lazy')
     const lazy = root.querySelector('.lazy')
     const data = root._vnode.component.data
 
@@ -340,6 +360,11 @@ describe('vModel', () => {
     await nextTick()
     expect(data.trimNumber).toEqual(1.2)
 
+    trimLazy.value = '   ddd    '
+    triggerEvent('change', trimLazy)
+    await nextTick()
+    expect(data.trimLazy).toEqual('ddd')
+
     lazy.value = 'foo'
     triggerEvent('change', lazy)
     await nextTick()
@@ -359,12 +384,12 @@ describe('vModel', () => {
               min: 1,
               max: 100,
               class: 'foo',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
             this.value,
             {
-              number: true
-            }
+              number: true,
+            },
           ),
           withVModel(
             h('input', {
@@ -372,15 +397,15 @@ describe('vModel', () => {
               min: 1,
               max: 100,
               class: 'bar',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
             this.value,
             {
-              lazy: true
-            }
-          )
+              lazy: true,
+            },
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -444,12 +469,12 @@ describe('vModel', () => {
           withVModel(
             h('input', {
               type: 'checkbox',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -487,12 +512,12 @@ describe('vModel', () => {
               type: 'checkbox',
               'true-value': 'yes',
               'false-value': 'no',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -533,12 +558,12 @@ describe('vModel', () => {
               type: 'checkbox',
               'true-value': { yes: 'yes' },
               'false-value': { no: 'no' },
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -576,21 +601,21 @@ describe('vModel', () => {
               type: 'checkbox',
               class: 'foo',
               value: 'foo',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
+            this.value,
           ),
           withVModel(
             h('input', {
               type: 'checkbox',
               class: 'bar',
               value: 'bar',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -646,21 +671,21 @@ describe('vModel', () => {
               type: 'checkbox',
               class: 'foo',
               value: 'foo',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
+            this.value,
           ),
           withVModel(
             h('input', {
               type: 'checkbox',
               class: 'bar',
               value: 'bar',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -704,6 +729,120 @@ describe('vModel', () => {
     expect(bar.checked).toEqual(false)
   })
 
+  it('should not update DOM unnecessarily', async () => {
+    const component = defineComponent({
+      data() {
+        return { value: true }
+      },
+      render() {
+        return [
+          withVModel(
+            h('input', {
+              type: 'checkbox',
+              'onUpdate:modelValue': setValue.bind(this),
+            }),
+            this.value,
+          ),
+        ]
+      },
+    })
+    render(h(component), root)
+
+    const input = root.querySelector('input')
+    const data = root._vnode.component.data
+
+    const setCheckedSpy = vi.spyOn(input, 'checked', 'set')
+
+    // Trigger a change event without actually changing the value
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toEqual(true)
+    expect(setCheckedSpy).not.toHaveBeenCalled()
+
+    // Change the value and trigger a change event
+    input.checked = false
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toEqual(false)
+    expect(setCheckedSpy).toHaveBeenCalledTimes(1)
+
+    setCheckedSpy.mockClear()
+
+    data.value = false
+    await nextTick()
+    expect(input.checked).toEqual(false)
+    expect(setCheckedSpy).not.toHaveBeenCalled()
+
+    data.value = true
+    await nextTick()
+    expect(input.checked).toEqual(true)
+    expect(setCheckedSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should handle array values correctly without unnecessary updates', async () => {
+    const component = defineComponent({
+      data() {
+        return { value: ['foo'] }
+      },
+      render() {
+        return [
+          withVModel(
+            h('input', {
+              type: 'checkbox',
+              value: 'foo',
+              'onUpdate:modelValue': setValue.bind(this),
+            }),
+            this.value,
+          ),
+          withVModel(
+            h('input', {
+              type: 'checkbox',
+              value: 'bar',
+              'onUpdate:modelValue': setValue.bind(this),
+            }),
+            this.value,
+          ),
+        ]
+      },
+    })
+    render(h(component), root)
+
+    const [foo, bar] = root.querySelectorAll('input')
+    const data = root._vnode.component.data
+
+    const setCheckedSpyFoo = vi.spyOn(foo, 'checked', 'set')
+    const setCheckedSpyBar = vi.spyOn(bar, 'checked', 'set')
+
+    expect(foo.checked).toEqual(true)
+    expect(bar.checked).toEqual(false)
+
+    triggerEvent('change', foo)
+    await nextTick()
+    expect(data.value).toEqual(['foo'])
+    expect(setCheckedSpyFoo).not.toHaveBeenCalled()
+
+    bar.checked = true
+    triggerEvent('change', bar)
+    await nextTick()
+    expect(data.value).toEqual(['foo', 'bar'])
+    expect(setCheckedSpyBar).toHaveBeenCalledTimes(1)
+
+    setCheckedSpyFoo.mockClear()
+    setCheckedSpyBar.mockClear()
+
+    data.value = ['foo', 'bar']
+    await nextTick()
+    expect(setCheckedSpyFoo).not.toHaveBeenCalled()
+    expect(setCheckedSpyBar).not.toHaveBeenCalled()
+
+    data.value = ['bar']
+    await nextTick()
+    expect(setCheckedSpyFoo).toHaveBeenCalledTimes(1)
+    expect(setCheckedSpyBar).not.toHaveBeenCalled()
+    expect(foo.checked).toEqual(false)
+    expect(bar.checked).toEqual(true)
+  })
+
   it('should work with radio', async () => {
     const component = defineComponent({
       data() {
@@ -716,21 +855,21 @@ describe('vModel', () => {
               type: 'radio',
               class: 'foo',
               value: 'foo',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
+            this.value,
           ),
           withVModel(
             h('input', {
               type: 'radio',
               class: 'bar',
               value: 'bar',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -776,14 +915,14 @@ describe('vModel', () => {
               'select',
               {
                 value: null,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
-              [h('option', { value: 'foo' }), h('option', { value: 'bar' })]
+              [h('option', { value: 'foo' }), h('option', { value: 'bar' })],
             ),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -833,14 +972,14 @@ describe('vModel', () => {
               {
                 value: null,
                 multiple: true,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
-              [h('option', { value: 'foo' }), h('option', { value: 'bar' })]
+              [h('option', { value: 'foo' }), h('option', { value: 'bar' })],
             ),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -894,17 +1033,17 @@ describe('vModel', () => {
               'select',
               {
                 value: null,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
-              [h('option', { value: '1' }), h('option', { value: '2' })]
+              [h('option', { value: '1' }), h('option', { value: '2' })],
             ),
             this.value,
             {
-              number: true
-            }
-          )
+              number: true,
+            },
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -932,17 +1071,17 @@ describe('vModel', () => {
               {
                 value: null,
                 multiple: true,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
-              [h('option', { value: '1' }), h('option', { value: '2' })]
+              [h('option', { value: '1' }), h('option', { value: '2' })],
             ),
             this.value,
             {
-              number: true
-            }
-          )
+              number: true,
+            },
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -1000,17 +1139,17 @@ describe('vModel', () => {
               {
                 value: null,
                 multiple: true,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
               [
                 h('option', { value: fooValue }),
-                h('option', { value: barValue })
-              ]
+                h('option', { value: barValue }),
+              ],
             ),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -1037,15 +1176,25 @@ describe('vModel', () => {
     await nextTick()
     expect(data.value).toMatchObject([fooValue, barValue])
 
+    // reset
     foo.selected = false
     bar.selected = false
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toMatchObject([])
+
     data.value = [fooValue, barValue]
     await nextTick()
     expect(foo.selected).toEqual(true)
     expect(bar.selected).toEqual(true)
 
+    // reset
     foo.selected = false
     bar.selected = false
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toMatchObject([])
+
     data.value = [{ foo: 1 }, { bar: 1 }]
     await nextTick()
     // looseEqual
@@ -1066,14 +1215,14 @@ describe('vModel', () => {
               {
                 value: null,
                 multiple: true,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
-              [h('option', { value: 'foo' }), h('option', { value: 'bar' })]
+              [h('option', { value: 'foo' }), h('option', { value: 'bar' })],
             ),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -1134,17 +1283,17 @@ describe('vModel', () => {
               {
                 value: null,
                 multiple: true,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
               [
                 h('option', { value: fooValue }),
-                h('option', { value: barValue })
-              ]
+                h('option', { value: barValue }),
+              ],
             ),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -1196,12 +1345,12 @@ describe('vModel', () => {
         return [
           withVModel(
             h('input', {
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -1227,4 +1376,73 @@ describe('vModel', () => {
     await nextTick()
     expect(data.value).toEqual('使用拼音输入')
   })
+
+  it('multiple select (model is number, option value is string)', async () => {
+    const component = defineComponent({
+      data() {
+        return {
+          value: [1, 2],
+        }
+      },
+      render() {
+        return [
+          withVModel(
+            h(
+              'select',
+              {
+                multiple: true,
+                'onUpdate:modelValue': setValue.bind(this),
+              },
+              [h('option', { value: '1' }), h('option', { value: '2' })],
+            ),
+            this.value,
+          ),
+        ]
+      },
+    })
+    render(h(component), root)
+
+    await nextTick()
+    const [foo, bar] = root.querySelectorAll('option')
+
+    expect(foo.selected).toEqual(true)
+    expect(bar.selected).toEqual(true)
+  })
+
+  // #10503
+  test('equal value with a leading 0 should trigger update.', async () => {
+    const setNum = function (this: any, value: any) {
+      this.num = value
+    }
+    const component = defineComponent({
+      data() {
+        return { num: 0 }
+      },
+      render() {
+        return [
+          withVModel(
+            h('input', {
+              id: 'input_num1',
+              type: 'number',
+              'onUpdate:modelValue': setNum.bind(this),
+            }),
+            this.num,
+          ),
+        ]
+      },
+    })
+
+    render(h(component), root)
+    const data = root._vnode.component.data
+
+    const inputNum1 = root.querySelector('#input_num1')!
+    expect(inputNum1.value).toBe('0')
+
+    inputNum1.value = '01'
+    triggerEvent('input', inputNum1)
+    await nextTick()
+    expect(data.num).toBe(1)
+
+    expect(inputNum1.value).toBe('1')
+  })
 })
diff --git a/packages/runtime-dom/__tests__/directives/vOn.spec.ts b/packages/runtime-dom/__tests__/directives/vOn.spec.ts
index 2a4b02478..ef7ee346b 100644
--- a/packages/runtime-dom/__tests__/directives/vOn.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vOn.spec.ts
@@ -1,14 +1,14 @@
 import { patchEvent } from '../../src/modules/events'
-import { withModifiers, withKeys } from '@vue/runtime-dom'
+import { withKeys, withModifiers } from '@vue/runtime-dom'
 
 function triggerEvent(
   target: Element,
   event: string,
-  process?: (e: any) => any
+  process?: (e: any) => any,
 ) {
   const e = new Event(event, {
     bubbles: true,
-    cancelable: true
+    cancelable: true,
   })
   if (event === 'click') {
     ;(e as any).button = 0
@@ -43,7 +43,7 @@ describe('runtime-dom: v-on directive', () => {
   })
 
   test('it should support key modifiers and system modifiers', () => {
-    const keyNames = ['ctrl', 'shift', 'meta', 'alt']
+    const keyNames = ['ctrl', 'shift', 'meta', 'alt'] as const
 
     keyNames.forEach(keyName => {
       const el = document.createElement('div')
@@ -51,7 +51,7 @@ describe('runtime-dom: v-on directive', () => {
       // <div @keyup[keyName].esc="test"/>
       const nextValue = withKeys(withModifiers(fn, [keyName]), [
         'esc',
-        'arrow-left'
+        'arrow-left',
       ])
       patchEvent(el, 'onKeyup', null, nextValue, null)
 
@@ -135,4 +135,32 @@ describe('runtime-dom: v-on directive', () => {
     handler(event, 'value', true)
     expect(fn).toBeCalledWith(event, 'value', true)
   })
+
+  it('withKeys cache wrapped listener separately for different modifiers', () => {
+    const el1 = document.createElement('button')
+    const el2 = document.createElement('button')
+    const fn = vi.fn()
+    const handler1 = withKeys(fn, ['a'])
+    const handler2 = withKeys(fn, ['b'])
+    expect(handler1 === handler2).toBe(false)
+    patchEvent(el1, 'onKeyup', null, handler1, null)
+    patchEvent(el2, 'onKeyup', null, handler2, null)
+    triggerEvent(el1, 'keyup', e => (e.key = 'a'))
+    triggerEvent(el2, 'keyup', e => (e.key = 'b'))
+    expect(fn).toBeCalledTimes(2)
+  })
+
+  it('withModifiers cache wrapped listener separately for different modifiers', () => {
+    const el1 = document.createElement('button')
+    const el2 = document.createElement('button')
+    const fn = vi.fn()
+    const handler1 = withModifiers(fn, ['ctrl'])
+    const handler2 = withModifiers(fn, ['shift'])
+    expect(handler1 === handler2).toBe(false)
+    patchEvent(el1, 'onClick', null, handler1, null)
+    patchEvent(el2, 'onClick', null, handler2, null)
+    triggerEvent(el1, 'click', e => (e.ctrlKey = true))
+    triggerEvent(el2, 'click', e => (e.shiftKey = true))
+    expect(fn).toBeCalledTimes(2)
+  })
 })
diff --git a/packages/runtime-dom/__tests__/directives/vShow.spec.ts b/packages/runtime-dom/__tests__/directives/vShow.spec.ts
index 545e22b9c..fddafaaf8 100644
--- a/packages/runtime-dom/__tests__/directives/vShow.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vShow.spec.ts
@@ -1,13 +1,13 @@
 import {
-  withDirectives,
+  type VNode,
   defineComponent,
   h,
   nextTick,
-  VNode,
   ref,
-  watch
+  watch,
+  withDirectives,
 } from '@vue/runtime-core'
-import { render, Transition, vShow } from '@vue/runtime-dom'
+import { Transition, render, vShow } from '@vue/runtime-dom'
 
 const withVShow = (node: VNode, exp: any) =>
   withDirectives(node, [[vShow, exp]])
@@ -26,11 +26,11 @@ describe('runtime-dom: v-show directive', () => {
       },
       render() {
         return [withVShow(h('div'), this.value)]
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('')
   })
@@ -42,11 +42,11 @@ describe('runtime-dom: v-show directive', () => {
       },
       render() {
         return [withVShow(h('div'), this.value)]
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('none')
   })
@@ -58,11 +58,11 @@ describe('runtime-dom: v-show directive', () => {
       },
       render() {
         return [withVShow(h('div'), this.value)]
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
     const data = root._vnode.component.data
 
     expect($div.style.display).toEqual('')
@@ -107,13 +107,13 @@ describe('runtime-dom: v-show directive', () => {
       },
       render() {
         return [
-          withVShow(h('div', { style: { display: 'block' } }), this.value)
+          withVShow(h('div', { style: { display: 'block' } }), this.value),
         ]
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
     const data = root._vnode.component.data
 
     expect($div.style.display).toEqual('block')
@@ -134,11 +134,11 @@ describe('runtime-dom: v-show directive', () => {
     const component = defineComponent({
       render() {
         return withVShow(h('div', { style: style.value }), display.value)
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('none')
 
@@ -151,6 +151,32 @@ describe('runtime-dom: v-show directive', () => {
     expect($div.style.display).toEqual('')
   })
 
+  test('the value of `display` set by v-show should not be overwritten by the style attribute when updated (object value)', async () => {
+    const style = ref({
+      display: 'block',
+      width: '100px',
+    })
+    const display = ref(false)
+    const component = defineComponent({
+      render() {
+        return withVShow(h('div', { style: style.value }), display.value)
+      },
+    })
+    render(h(component), root)
+
+    const $div = root.children[0]
+
+    expect($div.style.display).toEqual('none')
+
+    style.value.width = '50px'
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    display.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('block')
+  })
+
   // #2583, #2757
   test('the value of `display` set by v-show should not be overwritten by the style attribute when updated (with Transition)', async () => {
     const style = ref('width: 100px')
@@ -165,15 +191,15 @@ describe('runtime-dom: v-show directive', () => {
           return h(Transition, () =>
             withVShow(
               h('div', { style: style.value }, innerValue.value),
-              display.value
-            )
+              display.value,
+            ),
           )
         }
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('none')
 
@@ -185,4 +211,102 @@ describe('runtime-dom: v-show directive', () => {
     await nextTick()
     expect($div.style.display).toEqual('')
   })
+
+  // #10151
+  test('should respect the display value when v-show value is true', async () => {
+    const isVisible = ref(false)
+    const useDisplayStyle = ref(true)
+    const compStyle = ref({
+      display: 'none',
+    })
+    const withoutDisplayStyle = {
+      margin: '10px',
+    }
+
+    const Component = {
+      setup() {
+        return () => {
+          return withVShow(
+            h('div', {
+              style: useDisplayStyle.value
+                ? compStyle.value
+                : withoutDisplayStyle,
+            }),
+            isVisible.value,
+          )
+        }
+      },
+    }
+    render(h(Component), root)
+
+    const $div = root.children[0]
+
+    expect($div.style.display).toEqual('none')
+
+    isVisible.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    compStyle.value.display = 'block'
+    await nextTick()
+    expect($div.style.display).toEqual('block')
+
+    compStyle.value.display = 'inline-block'
+    await nextTick()
+    expect($div.style.display).toEqual('inline-block')
+
+    isVisible.value = false
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    isVisible.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('inline-block')
+
+    useDisplayStyle.value = false
+    await nextTick()
+    expect($div.style.display).toEqual('')
+    expect(getComputedStyle($div).display).toEqual('block')
+
+    isVisible.value = false
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    isVisible.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('')
+  })
+
+  // #10294
+  test('should record display by vShowOldKey only when display exists in style', async () => {
+    const isVisible = ref(false)
+    const style = ref({
+      margin: '10px',
+    })
+
+    const Component = {
+      setup() {
+        return () => {
+          return withVShow(
+            h('div', {
+              style: style.value,
+            }),
+            isVisible.value,
+          )
+        }
+      },
+    }
+    render(h(Component), root)
+    const $div = root.children[0]
+
+    expect($div.style.display).toEqual('none')
+
+    style.value.margin = '20px'
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    isVisible.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('')
+  })
 })
diff --git a/packages/runtime-dom/__tests__/helpers/useCssModule.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssModule.spec.ts
index bb65082ad..53868e74d 100644
--- a/packages/runtime-dom/__tests__/helpers/useCssModule.spec.ts
+++ b/packages/runtime-dom/__tests__/helpers/useCssModule.spec.ts
@@ -1,4 +1,4 @@
-import { render, h, nodeOps } from '@vue/runtime-test'
+import { h, nodeOps, render } from '@vue/runtime-test'
 import { useCssModule } from '../../src/helpers/useCssModule'
 
 describe('useCssModule', () => {
@@ -10,9 +10,9 @@ describe('useCssModule', () => {
         __cssModules: modules,
         setup() {
           res = useCssModule(name)
-        }
+        },
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
     return res
   }
@@ -20,8 +20,8 @@ describe('useCssModule', () => {
   test('basic usage', () => {
     const modules = {
       $style: {
-        red: 'red'
-      }
+        red: 'red',
+      },
     }
     expect(mountWithModule(modules)).toMatchObject(modules.$style)
   })
@@ -29,8 +29,8 @@ describe('useCssModule', () => {
   test('basic usage', () => {
     const modules = {
       foo: {
-        red: 'red'
-      }
+        red: 'red',
+      },
     }
     expect(mountWithModule(modules, 'foo')).toMatchObject(modules.foo)
   })
diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
index 5792a0107..06b3e7141 100644
--- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
+++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
@@ -1,15 +1,16 @@
 import {
+  type ComponentOptions,
+  type FunctionalComponent,
+  Suspense,
+  Teleport,
+  createStaticVNode,
+  defineCustomElement,
+  h,
+  nextTick,
+  reactive,
   ref,
   render,
   useCssVars,
-  createStaticVNode,
-  h,
-  reactive,
-  nextTick,
-  ComponentOptions,
-  Suspense,
-  Teleport,
-  FunctionalComponent
 } from '@vue/runtime-dom'
 
 describe('useCssVars', () => {
@@ -36,13 +37,13 @@ describe('useCssVars', () => {
       setup() {
         // test receiving render context
         useCssVars((ctx: any) => ({
-          color: ctx.color
+          color: ctx.color,
         }))
         return state
       },
       render() {
         return h('div')
-      }
+      },
     }))
   })
 
@@ -51,7 +52,7 @@ describe('useCssVars', () => {
       setup() {
         useCssVars(() => state)
         return () => [h('div'), h('div')]
-      }
+      },
     }))
   })
 
@@ -62,7 +63,7 @@ describe('useCssVars', () => {
       setup() {
         useCssVars(() => state)
         return () => h(Child)
-      }
+      },
     }))
   })
 
@@ -81,7 +82,7 @@ describe('useCssVars', () => {
           }
         })
         return asyncPromise
-      }
+      },
     }
 
     const App = {
@@ -90,9 +91,9 @@ describe('useCssVars', () => {
         return () =>
           h(Suspense, null, {
             default: h(AsyncComp),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     render(h(App), root)
@@ -118,6 +119,63 @@ describe('useCssVars', () => {
     }
   })
 
+  test('with v-if & async component & suspense', async () => {
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+    const show = ref(false)
+    let resolveAsync: any
+    let asyncPromise: any
+
+    const AsyncComp = {
+      setup() {
+        useCssVars(() => state)
+        asyncPromise = new Promise(r => {
+          resolveAsync = () => {
+            r(() => h('p', 'default'))
+          }
+        })
+        return asyncPromise
+      },
+    }
+
+    const App = {
+      setup() {
+        return () =>
+          h(Suspense, null, {
+            default: h('div', {}, show.value ? h(AsyncComp) : h('p')),
+          })
+      },
+    }
+
+    render(h(App), root)
+    await nextTick()
+    // AsyncComp resolve
+    show.value = true
+    await nextTick()
+    resolveAsync()
+    await asyncPromise.then(() => {})
+    // Suspense effects flush
+    await nextTick()
+    // css vars use with default tree
+    for (const c of [].slice.call(root.children as any)) {
+      expect(
+        ((c as any).children[0] as HTMLElement).style.getPropertyValue(
+          `--color`,
+        ),
+      ).toBe(`red`)
+    }
+
+    state.color = 'green'
+    await nextTick()
+    for (const c of [].slice.call(root.children as any)) {
+      expect(
+        ((c as any).children[0] as HTMLElement).style.getPropertyValue(
+          `--color`,
+        ),
+      ).toBe('green')
+    }
+  })
+
   test('with subTree changed', async () => {
     const state = reactive({ color: 'red' })
     const value = ref(true)
@@ -127,7 +185,7 @@ describe('useCssVars', () => {
       setup() {
         useCssVars(() => state)
         return () => (value.value ? [h('div')] : [h('div'), h('div')])
-      }
+      },
     }
 
     render(h(App), root)
@@ -157,9 +215,9 @@ describe('useCssVars', () => {
         useCssVars(() => state)
         return () =>
           h(Child, null, () =>
-            value.value ? [h('div')] : [h('div'), h('div')]
+            value.value ? [h('div')] : [h('div'), h('div')],
           )
-      }
+      },
     }
 
     render(h(App), root)
@@ -186,9 +244,9 @@ describe('useCssVars', () => {
         return () => [
           h('div'),
           createStaticVNode('<div>1</div><div><span>2</span></div>', 2),
-          h('div')
+          h('div'),
         ]
-      }
+      },
     }
 
     render(h(App), root)
@@ -208,7 +266,7 @@ describe('useCssVars', () => {
       setup() {
         useCssVars(() => state)
         return () => [h(Teleport, { to: target }, [h('div')])]
-      }
+      },
     }
 
     render(h(App), root)
@@ -232,7 +290,7 @@ describe('useCssVars', () => {
       setup() {
         useCssVars(() => state)
         return () => h(Child, () => [h(Teleport, { to: target }, [h('div')])])
-      }
+      },
     }
 
     render(h(App), root)
@@ -255,10 +313,10 @@ describe('useCssVars', () => {
         return () => [
           h(Teleport, { to: target }, [
             h('div'),
-            toggle.value ? h('div') : null
-          ])
+            toggle.value ? h('div') : null,
+          ]),
         ]
-      }
+      },
     }
 
     render(h(App), root)
@@ -286,11 +344,64 @@ describe('useCssVars', () => {
       setup() {
         useCssVars(() => state)
         return () => [h(Teleport, { to: target, disabled: true }, [h('div')])]
-      }
+      },
     }
 
     expect(() => render(h(App), root)).not.toThrow(TypeError)
     await nextTick()
     expect(target.children.length).toBe(0)
   })
+
+  test('with string style', async () => {
+    document.body.innerHTML = ''
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+    const disabled = ref(false)
+
+    const App = {
+      setup() {
+        useCssVars(() => state)
+        return () => [
+          h(
+            'div',
+            { style: disabled.value ? 'pointer-events: none' : undefined },
+            'foo',
+          ),
+        ]
+      },
+    }
+    render(h(App), root)
+    await nextTick()
+    for (const c of [].slice.call(root.children as any)) {
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
+    }
+    disabled.value = true
+    await nextTick()
+
+    for (const c of [].slice.call(root.children as any)) {
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
+    }
+  })
+
+  // #8826
+  test('with custom element', async () => {
+    const state = reactive({ color: 'red' })
+    const container = document.createElement('div')
+    const App = defineCustomElement({
+      styles: [`div { color: red; }`],
+      setup() {
+        useCssVars(() => state)
+        return () => {
+          return h('div', 'hello')
+        }
+      },
+    })
+    customElements.define('css-vars-ce', App)
+    container.innerHTML = `<css-vars-ce></css-vars-ce>`
+    document.body.appendChild(container)
+    await nextTick()
+    expect(container.innerHTML).toBe(
+      `<css-vars-ce style="--color: red;"></css-vars-ce>`,
+    )
+  })
 })
diff --git a/packages/runtime-dom/__tests__/nodeOps.spec.ts b/packages/runtime-dom/__tests__/nodeOps.spec.ts
index 2573974c9..db56ff25d 100644
--- a/packages/runtime-dom/__tests__/nodeOps.spec.ts
+++ b/packages/runtime-dom/__tests__/nodeOps.spec.ts
@@ -1,9 +1,10 @@
-import { nodeOps, svgNS } from '../src/nodeOps'
-
+import { defineComponent, h, nextTick, ref } from 'vue'
+import { mathmlNS, nodeOps, svgNS } from '../src/nodeOps'
+import { render } from '@vue/runtime-dom'
 describe('runtime-dom: node-ops', () => {
   test("the <select>'s multiple attr should be set in createElement", () => {
-    const el = nodeOps.createElement('select', false, undefined, {
-      multiple: ''
+    const el = nodeOps.createElement('select', undefined, undefined, {
+      multiple: '',
     }) as HTMLSelectElement
     const option1 = nodeOps.createElement('option') as HTMLOptionElement
     const option2 = nodeOps.createElement('option') as HTMLOptionElement
@@ -17,11 +18,30 @@ describe('runtime-dom: node-ops', () => {
     expect(option2.selected).toBe(true)
   })
 
+  test('create custom elements', () => {
+    const spyCreateElement = vi.spyOn(document, 'createElement')
+
+    nodeOps.createElement('custom-element')
+    expect(spyCreateElement).toHaveBeenLastCalledWith('custom-element')
+
+    nodeOps.createElement('custom-element', undefined, 'li')
+    expect(spyCreateElement).toHaveBeenLastCalledWith('custom-element', {
+      is: 'li',
+    })
+
+    spyCreateElement.mockClear()
+  })
+
   describe('insertStaticContent', () => {
     test('fresh insertion', () => {
       const content = `<div>one</div><div>two</div>three`
       const parent = document.createElement('div')
-      const nodes = nodeOps.insertStaticContent!(content, parent, null, false)
+      const nodes = nodeOps.insertStaticContent!(
+        content,
+        parent,
+        null,
+        undefined,
+      )
       expect(parent.innerHTML).toBe(content)
       expect(nodes[0]).toBe(parent.firstChild)
       expect(nodes[1]).toBe(parent.lastChild)
@@ -33,7 +53,12 @@ describe('runtime-dom: node-ops', () => {
       const parent = document.createElement('div')
       parent.innerHTML = existing
       const anchor = parent.firstChild
-      const nodes = nodeOps.insertStaticContent!(content, parent, anchor, false)
+      const nodes = nodeOps.insertStaticContent!(
+        content,
+        parent,
+        anchor,
+        undefined,
+      )
       expect(parent.innerHTML).toBe(content + existing)
       expect(nodes[0]).toBe(parent.firstChild)
       expect(nodes[1]).toBe(parent.childNodes[parent.childNodes.length - 2])
@@ -46,7 +71,7 @@ describe('runtime-dom: node-ops', () => {
         content,
         parent,
         null,
-        true
+        'svg',
       )
       expect(parent.innerHTML).toBe(content)
       expect(first).toBe(parent.firstChild)
@@ -65,7 +90,7 @@ describe('runtime-dom: node-ops', () => {
         content,
         parent,
         anchor,
-        true
+        'svg',
       )
       expect(parent.innerHTML).toBe(content + existing)
       expect(first).toBe(parent.firstChild)
@@ -88,13 +113,46 @@ describe('runtime-dom: node-ops', () => {
         content,
         parent,
         anchor,
-        false,
+        undefined,
         cached.firstChild,
-        cached.lastChild
+        cached.lastChild,
       )
       expect(parent.innerHTML).toBe(content + existing)
       expect(nodes[0]).toBe(parent.firstChild)
       expect(nodes[1]).toBe(parent.childNodes[parent.childNodes.length - 2])
     })
+
+    test('The math elements should keep their MathML namespace', async () => {
+      let root = document.createElement('div') as any
+
+      let countRef: any
+      const component = defineComponent({
+        data() {
+          return { value: 0 }
+        },
+        setup() {
+          const count = ref(0)
+          countRef = count
+          return {
+            count,
+          }
+        },
+        template: `
+          <div>
+            <math>
+              <mrow class="bar" v-if="count % 2">Bar</mrow>
+              <msup class="foo" v-else>Foo</msup>
+            </math>
+          </div>
+        `,
+      })
+      render(h(component), root)
+      const foo = root.querySelector('.foo')
+      expect(foo.namespaceURI).toBe(mathmlNS)
+      countRef.value++
+      await nextTick()
+      const bar = root.querySelector('.bar')
+      expect(bar.namespaceURI).toBe(mathmlNS)
+    })
   })
 })
diff --git a/packages/runtime-dom/__tests__/patchAttrs.spec.ts b/packages/runtime-dom/__tests__/patchAttrs.spec.ts
index b78dd44c6..393b685b0 100644
--- a/packages/runtime-dom/__tests__/patchAttrs.spec.ts
+++ b/packages/runtime-dom/__tests__/patchAttrs.spec.ts
@@ -4,15 +4,15 @@ import { xlinkNS } from '../src/modules/attrs'
 describe('runtime-dom: attrs patching', () => {
   test('xlink attributes', () => {
     const el = document.createElementNS('http://www.w3.org/2000/svg', 'use')
-    patchProp(el, 'xlink:href', null, 'a', true)
+    patchProp(el, 'xlink:href', null, 'a', 'svg')
     expect(el.getAttributeNS(xlinkNS, 'href')).toBe('a')
-    patchProp(el, 'xlink:href', 'a', null, true)
+    patchProp(el, 'xlink:href', 'a', null, 'svg')
     expect(el.getAttributeNS(xlinkNS, 'href')).toBe(null)
   })
 
   test('textContent attributes /w svg', () => {
     const el = document.createElementNS('http://www.w3.org/2000/svg', 'use')
-    patchProp(el, 'textContent', null, 'foo', true)
+    patchProp(el, 'textContent', null, 'foo', 'svg')
     expect(el.attributes.length).toBe(0)
     expect(el.innerHTML).toBe('foo')
   })
@@ -53,4 +53,39 @@ describe('runtime-dom: attrs patching', () => {
     patchProp(el, 'onwards', 'a', null)
     expect(el.getAttribute('onwards')).toBe(null)
   })
+
+  // #10597
+  test('should allow setting attribute to symbol', () => {
+    const el = document.createElement('div')
+    const symbol = Symbol('foo')
+    patchProp(el, 'foo', null, symbol)
+    expect(el.getAttribute('foo')).toBe(symbol.toString())
+  })
+
+  // #10598
+  test('should allow setting value to symbol', () => {
+    const el = document.createElement('input')
+    const symbol = Symbol('foo')
+    patchProp(el, 'value', null, symbol)
+    expect(el.value).toBe(symbol.toString())
+  })
+
+  // #11177
+  test('should allow setting value to object, leaving stringification to the element/browser', () => {
+    // normal behavior
+    const el = document.createElement('div')
+    const obj = { toString: () => 'foo' }
+    patchProp(el, 'data-test', null, obj)
+    expect(el.dataset.test).toBe('foo')
+
+    const el2 = document.createElement('div')
+    let testvalue: null | typeof obj = null
+    // simulating a web component that implements its own setAttribute handler
+    el2.setAttribute = (name, value) => {
+      testvalue = value
+    }
+    patchProp(el2, 'data-test', null, obj)
+    expect(el2.dataset.test).toBe(undefined)
+    expect(testvalue).toBe(obj)
+  })
 })
diff --git a/packages/runtime-dom/__tests__/patchClass.spec.ts b/packages/runtime-dom/__tests__/patchClass.spec.ts
index c8da74167..8651d12eb 100644
--- a/packages/runtime-dom/__tests__/patchClass.spec.ts
+++ b/packages/runtime-dom/__tests__/patchClass.spec.ts
@@ -1,5 +1,8 @@
 import { patchProp } from '../src/patchProp'
-import { ElementWithTransition, vtcKey } from '../src/components/Transition'
+import {
+  type ElementWithTransition,
+  vtcKey,
+} from '../src/components/Transition'
 import { svgNS } from '../src/nodeOps'
 
 describe('runtime-dom: class patching', () => {
@@ -25,7 +28,7 @@ describe('runtime-dom: class patching', () => {
 
   test('svg', () => {
     const el = document.createElementNS(svgNS, 'svg')
-    patchProp(el, 'class', null, 'foo', true)
+    patchProp(el, 'class', null, 'foo', 'svg')
     expect(el.getAttribute('class')).toBe('foo')
   })
 })
diff --git a/packages/runtime-dom/__tests__/patchEvents.spec.ts b/packages/runtime-dom/__tests__/patchEvents.spec.ts
index d332977df..f70bf327a 100644
--- a/packages/runtime-dom/__tests__/patchEvents.spec.ts
+++ b/packages/runtime-dom/__tests__/patchEvents.spec.ts
@@ -176,7 +176,7 @@ describe(`runtime-dom: events patching`, () => {
     }
     window.customElements.define('test-element', TestElement)
     const testElement = document.createElement('test-element', {
-      is: 'test-element'
+      is: 'test-element',
     })
     const fn1 = vi.fn()
     const fn2 = vi.fn()
@@ -192,4 +192,14 @@ describe(`runtime-dom: events patching`, () => {
     testElement.dispatchEvent(new CustomEvent('foobar'))
     expect(fn2).toHaveBeenCalledTimes(1)
   })
+
+  it('handles an unknown type', () => {
+    const el = document.createElement('div')
+    patchProp(el, 'onClick', null, 'test')
+    el.dispatchEvent(new Event('click'))
+    expect(
+      `Wrong type passed as event handler to onClick - did you forget @ or : ` +
+        `in front of your prop?\nExpected function or array of functions, received type string.`,
+    ).toHaveBeenWarned()
+  })
 })
diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
index 19554b028..304d9f9c1 100644
--- a/packages/runtime-dom/__tests__/patchProps.spec.ts
+++ b/packages/runtime-dom/__tests__/patchProps.spec.ts
@@ -1,5 +1,12 @@
 import { patchProp } from '../src/patchProp'
-import { render, h } from '../src'
+import {
+  h,
+  nextTick,
+  ref,
+  render,
+  vModelCheckbox,
+  withDirectives,
+} from '../src'
 
 describe('runtime-dom: props patching', () => {
   test('basic', () => {
@@ -106,7 +113,7 @@ describe('runtime-dom: props patching', () => {
     const fn = vi.fn()
     const comp = {
       render: () => 'foo',
-      unmounted: fn
+      unmounted: fn,
     }
     const root = document.createElement('div')
     render(h('div', null, [h(comp)]), root)
@@ -122,7 +129,7 @@ describe('runtime-dom: props patching', () => {
     const fn = vi.fn()
     const comp = {
       render: () => 'foo',
-      unmounted: fn
+      unmounted: fn,
     }
     const root = document.createElement('div')
     render(h('div', null, [h(comp)]), root)
@@ -133,11 +140,36 @@ describe('runtime-dom: props patching', () => {
     expect(fn).toHaveBeenCalled()
   })
 
+  test('patch innerHTML porp', async () => {
+    const root = document.createElement('div')
+    const state = ref(false)
+    const Comp = {
+      render: () => {
+        if (state.value) {
+          return h('div', [h('del', null, 'baz')])
+        } else {
+          return h('div', { innerHTML: 'baz' })
+        }
+      },
+    }
+    render(h(Comp), root)
+    expect(root.innerHTML).toBe(`<div>baz</div>`)
+    state.value = true
+    await nextTick()
+    expect(root.innerHTML).toBe(`<div><del>baz</del></div>`)
+  })
+
+  test('patch innerHTML porp w/ undefined value', async () => {
+    const root = document.createElement('div')
+    render(h('div', { innerHTML: undefined }), root)
+    expect(root.innerHTML).toBe(`<div></div>`)
+  })
+
   test('textContent unmount prev children', () => {
     const fn = vi.fn()
     const comp = {
       render: () => 'foo',
-      unmounted: fn
+      unmounted: fn,
     }
     const root = document.createElement('div')
     render(h('div', null, [h(comp)]), root)
@@ -156,10 +188,11 @@ describe('runtime-dom: props patching', () => {
     // anyway, here we just want to make sure Vue doesn't set non-string props
     // to an empty string on nullish values - it should reset to its default
     // value.
+    el.srcObject = null
     const initialValue = el.srcObject
     const fakeObject = {}
     patchProp(el, 'srcObject', null, fakeObject)
-    expect(el.srcObject).not.toBe(fakeObject)
+    expect(el.srcObject).toBe(fakeObject)
     patchProp(el, 'srcObject', null, null)
     expect(el.srcObject).toBe(initialValue)
   })
@@ -169,7 +202,7 @@ describe('runtime-dom: props patching', () => {
     Object.defineProperty(el, 'someProp', {
       set() {
         throw new TypeError('Invalid type')
-      }
+      },
     })
     patchProp(el, 'someProp', null, 'foo')
 
@@ -265,7 +298,7 @@ describe('runtime-dom: props patching', () => {
     patchProp(el, 'willValidate', true, null)
     expect(el.willValidate).toBe(true)
     expect(
-      'Failed setting prop "willValidate" on <select>'
+      'Failed setting prop "willValidate" on <select>',
     ).toHaveBeenWarnedLast()
   })
 
@@ -274,9 +307,9 @@ describe('runtime-dom: props patching', () => {
     render(
       h('select', { value: 'foo' }, [
         h('option', { value: 'foo' }, 'foo'),
-        h('option', { value: 'bar' }, 'bar')
+        h('option', { value: 'bar' }, 'bar'),
       ]),
-      root
+      root,
     )
     const el = root.children[0] as HTMLSelectElement
     expect(el.value).toBe('foo')
@@ -284,13 +317,25 @@ describe('runtime-dom: props patching', () => {
     render(
       h('select', { value: 'baz' }, [
         h('option', { value: 'foo' }, 'foo'),
-        h('option', { value: 'baz' }, 'baz')
+        h('option', { value: 'baz' }, 'baz'),
       ]),
-      root
+      root,
     )
     expect(el.value).toBe('baz')
   })
 
+  test('init empty value for option', () => {
+    const root = document.createElement('div')
+    render(
+      h('select', { value: 'foo' }, [h('option', { value: '' }, 'foo')]),
+      root,
+    )
+    const select = root.children[0] as HTMLSelectElement
+    const option = select.children[0] as HTMLOptionElement
+    expect(select.value).toBe('')
+    expect(option.value).toBe('')
+  })
+
   // #8780
   test('embedded tag with width and height', () => {
     // Width and height of some embedded element such as img、video、source、canvas
@@ -300,10 +345,53 @@ describe('runtime-dom: props patching', () => {
     expect(el.getAttribute('width')).toBe('24px')
   })
 
+  // # 9762 should fallthrough to `key in el` logic for non embedded tags
+  test('width and height on custom elements', () => {
+    const el = document.createElement('foobar')
+    patchProp(el, 'width', null, '24px')
+    expect(el.getAttribute('width')).toBe('24px')
+  })
+
   test('translate attribute', () => {
     const el = document.createElement('div')
     patchProp(el, 'translate', null, 'no')
     expect(el.translate).toBeFalsy()
     expect(el.getAttribute('translate')).toBe('no')
   })
+
+  // #11647
+  test('should not trigger input mutation when `value` is `undefined`', async () => {
+    const fn = vi.fn()
+    const comp = {
+      setup() {
+        const checked = ref()
+        return () =>
+          withDirectives(
+            h('input', {
+              type: 'checkbox',
+              value: undefined,
+              'onUpdate:modelValue': (value: any) => {
+                checked.value = value
+              },
+            }),
+            [[vModelCheckbox, checked.value]],
+          )
+      },
+    }
+
+    const root = document.createElement('div')
+    render(h(comp), root)
+    document.body.append(root)
+
+    const el = root.children[0] as HTMLInputElement
+    const observer = new MutationObserver(fn)
+    observer.observe(el, {
+      attributes: true,
+    })
+
+    el.click()
+    await nextTick()
+
+    expect(fn).toBeCalledTimes(0)
+  })
 })
diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
index eeb60fb7e..8b2765e21 100644
--- a/packages/runtime-dom/__tests__/patchStyle.spec.ts
+++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -16,7 +16,7 @@ describe(`runtime-dom: style patching`, () => {
       get(): any {
         return value
       },
-      set: fn
+      set: fn,
     })
     patchProp(el, 'style', value, value)
     expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
@@ -39,7 +39,7 @@ describe(`runtime-dom: style patching`, () => {
     const el = document.createElement('div')
     patchProp(el, 'style', null, {
       color: undefined,
-      borderRadius: null
+      borderRadius: null,
     })
     expect(el.style.cssText.replace(/\s/g, '')).toBe('')
 
@@ -47,7 +47,7 @@ describe(`runtime-dom: style patching`, () => {
       el,
       'style',
       { color: 'red' },
-      { color: null, borderRadius: undefined }
+      { color: null, borderRadius: undefined },
     )
     expect(el.style.cssText.replace(/\s/g, '')).toBe('')
   })
@@ -62,7 +62,7 @@ describe(`runtime-dom: style patching`, () => {
     const el = document.createElement('div')
     patchProp(el, 'style', {}, { marginRight: '10px !important' })
     expect(el.style.cssText.replace(/\s/g, '')).toBe(
-      'margin-right:10px!important;'
+      'margin-right:10px!important;',
     )
   })
 
@@ -91,12 +91,12 @@ describe(`runtime-dom: style patching`, () => {
     const el = document.createElement('div')
     patchProp(el, 'style', null, { color: 'red;' })
     expect(
-      `Unexpected semicolon at the end of 'color' style value: 'red;'`
+      `Unexpected semicolon at the end of 'color' style value: 'red;'`,
     ).toHaveBeenWarned()
 
     patchProp(el, 'style', null, { '--custom': '100; ' })
     expect(
-      `Unexpected semicolon at the end of '--custom' style value: '100; '`
+      `Unexpected semicolon at the end of '--custom' style value: '100; '`,
     ).toHaveBeenWarned()
   })
 
@@ -112,7 +112,7 @@ describe(`runtime-dom: style patching`, () => {
       el as any,
       'style',
       { borderBottom: '1px solid red' },
-      { border: '1px solid green' }
+      { border: '1px solid green' },
     )
     expect(el.style.border).toBe('1px solid green')
     expect(el.style.borderBottom).toBe('1px solid green')
@@ -131,8 +131,8 @@ describe(`runtime-dom: style patching`, () => {
         },
         getPropertyValue(key: string) {
           return store[key]
-        }
-      }
+        },
+      },
     }
   }
 
@@ -154,8 +154,17 @@ describe(`runtime-dom: style patching`, () => {
       el as any,
       'style',
       {},
-      { display: ['-webkit-box', '-ms-flexbox', 'flex'] }
+      { display: ['-webkit-box', '-ms-flexbox', 'flex'] },
     )
     expect(el.style.display).toBe('flex')
   })
+
+  it('should clear previous css string value', () => {
+    const el = document.createElement('div')
+    patchProp(el, 'style', {}, 'color:red')
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
+
+    patchProp(el, 'style', 'color:red', { fontSize: '12px' })
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('font-size:12px;')
+  })
 })
diff --git a/packages/runtime-dom/package.json b/packages/runtime-dom/package.json
index d22784115..f8c094d33 100644
--- a/packages/runtime-dom/package.json
+++ b/packages/runtime-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-dom",
-  "version": "3.3.9",
+  "version": "3.5.11",
   "description": "@vue/runtime-dom",
   "main": "index.js",
   "module": "dist/runtime-dom.esm-bundler.js",
@@ -10,6 +10,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/runtime-dom.d.ts",
+      "node": {
+        "production": "./dist/runtime-dom.cjs.prod.js",
+        "development": "./dist/runtime-dom.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/runtime-dom.esm-bundler.js",
+      "import": "./dist/runtime-dom.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "sideEffects": false,
   "buildOptions": {
     "name": "VueRuntimeDOM",
@@ -37,6 +51,10 @@
   "dependencies": {
     "@vue/shared": "workspace:*",
     "@vue/runtime-core": "workspace:*",
-    "csstype": "^3.1.2"
+    "@vue/reactivity": "workspace:*",
+    "csstype": "^3.1.3"
+  },
+  "devDependencies": {
+    "@types/trusted-types": "^2.0.7"
   }
 }
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index de37605d6..6ddaf8971 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -1,155 +1,183 @@
 import {
-  ComponentOptionsMixin,
-  ComponentOptionsWithArrayProps,
-  ComponentOptionsWithObjectProps,
-  ComponentOptionsWithoutProps,
-  ComponentPropsOptions,
-  ComputedOptions,
-  EmitsOptions,
-  MethodOptions,
-  RenderFunction,
-  SetupContext,
-  ComponentInternalInstance,
-  VNode,
-  RootHydrateFunction,
-  ExtractPropTypes,
+  type App,
+  type Component,
+  type ComponentCustomElementInterface,
+  type ComponentInjectOptions,
+  type ComponentInternalInstance,
+  type ComponentObjectPropsOptions,
+  type ComponentOptions,
+  type ComponentOptionsBase,
+  type ComponentOptionsMixin,
+  type ComponentProvideOptions,
+  type ComponentPublicInstance,
+  type ComputedOptions,
+  type ConcreteComponent,
+  type CreateAppFunction,
+  type CreateComponentPublicInstanceWithMixins,
+  type DefineComponent,
+  type Directive,
+  type EmitsOptions,
+  type EmitsToProps,
+  type ExtractPropTypes,
+  type MethodOptions,
+  type RenderFunction,
+  type SetupContext,
+  type SlotsType,
+  type VNode,
+  type VNodeProps,
   createVNode,
   defineComponent,
+  getCurrentInstance,
   nextTick,
+  unref,
   warn,
-  ConcreteComponent,
-  ComponentOptions,
-  ComponentInjectOptions,
-  SlotsType,
-  DefineComponent
 } from '@vue/runtime-core'
-import { camelize, extend, hyphenate, isArray, toNumber } from '@vue/shared'
-import { hydrate, render } from '.'
+import {
+  camelize,
+  extend,
+  hasOwn,
+  hyphenate,
+  isArray,
+  isPlainObject,
+  toNumber,
+} from '@vue/shared'
+import { createApp, createSSRApp, render } from '.'
+
+// marker for attr removal
+const REMOVAL = {}
 
 export type VueElementConstructor<P = {}> = {
   new (initialProps?: Record<string, any>): VueElement & P
 }
 
+export interface CustomElementOptions {
+  styles?: string[]
+  shadowRoot?: boolean
+  nonce?: string
+  configureApp?: (app: App) => void
+}
+
 // defineCustomElement provides the same type inference as defineComponent
 // so most of the following overloads should be kept in sync w/ defineComponent.
 
 // overload 1: direct setup function
 export function defineCustomElement<Props, RawBindings = object>(
-  setup: (
-    props: Readonly<Props>,
-    ctx: SetupContext
-  ) => RawBindings | RenderFunction
+  setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction,
+  options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> &
+    CustomElementOptions & {
+      props?: (keyof Props)[]
+    },
+): VueElementConstructor<Props>
+export function defineCustomElement<Props, RawBindings = object>(
+  setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction,
+  options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> &
+    CustomElementOptions & {
+      props?: ComponentObjectPropsOptions<Props>
+    },
 ): VueElementConstructor<Props>
 
-// overload 2: object format with no props
+// overload 2: defineCustomElement with options object, infer props from options
 export function defineCustomElement<
-  Props = {},
-  RawBindings = {},
-  D = {},
-  C extends ComputedOptions = {},
-  M extends MethodOptions = {},
+  // props
+  RuntimePropsOptions extends
+    ComponentObjectPropsOptions = ComponentObjectPropsOptions,
+  PropsKeys extends string = string,
+  // emits
+  RuntimeEmitsOptions extends EmitsOptions = {},
+  EmitsKeys extends string = string,
+  // other options
+  Data = {},
+  SetupBindings = {},
+  Computed extends ComputedOptions = {},
+  Methods extends MethodOptions = {},
   Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = EmitsOptions,
-  EE extends string = string,
-  I extends ComponentInjectOptions = {},
-  II extends string = string,
-  S extends SlotsType = {}
+  InjectOptions extends ComponentInjectOptions = {},
+  InjectKeys extends string = string,
+  Slots extends SlotsType = {},
+  LocalComponents extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
+  // resolved types
+  InferredProps = string extends PropsKeys
+    ? ComponentObjectPropsOptions extends RuntimePropsOptions
+      ? {}
+      : ExtractPropTypes<RuntimePropsOptions>
+    : { [key in PropsKeys]?: any },
+  ResolvedProps = InferredProps & EmitsToProps<RuntimeEmitsOptions>,
 >(
-  options: ComponentOptionsWithoutProps<
-    Props,
-    RawBindings,
-    D,
-    C,
-    M,
-    Mixin,
-    Extends,
-    E,
-    EE,
-    I,
-    II,
-    S
-  > & { styles?: string[] }
-): VueElementConstructor<Props>
+  options: CustomElementOptions & {
+    props?: (RuntimePropsOptions & ThisType<void>) | PropsKeys[]
+  } & ComponentOptionsBase<
+      ResolvedProps,
+      SetupBindings,
+      Data,
+      Computed,
+      Methods,
+      Mixin,
+      Extends,
+      RuntimeEmitsOptions,
+      EmitsKeys,
+      {}, // Defaults
+      InjectOptions,
+      InjectKeys,
+      Slots,
+      LocalComponents,
+      Directives,
+      Exposed,
+      Provide
+    > &
+    ThisType<
+      CreateComponentPublicInstanceWithMixins<
+        Readonly<ResolvedProps>,
+        SetupBindings,
+        Data,
+        Computed,
+        Methods,
+        Mixin,
+        Extends,
+        RuntimeEmitsOptions,
+        EmitsKeys,
+        {},
+        false,
+        InjectOptions,
+        Slots,
+        LocalComponents,
+        Directives,
+        Exposed
+      >
+    >,
+  extraOptions?: CustomElementOptions,
+): VueElementConstructor<ResolvedProps>
 
-// overload 3: object format with array props declaration
-export function defineCustomElement<
-  PropNames extends string,
-  RawBindings,
-  D,
-  C extends ComputedOptions = {},
-  M extends MethodOptions = {},
-  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
-  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = Record<string, any>,
-  EE extends string = string,
-  I extends ComponentInjectOptions = {},
-  II extends string = string,
-  S extends SlotsType = {}
->(
-  options: ComponentOptionsWithArrayProps<
-    PropNames,
-    RawBindings,
-    D,
-    C,
-    M,
-    Mixin,
-    Extends,
-    E,
-    EE,
-    I,
-    II,
-    S
-  > & { styles?: string[] }
-): VueElementConstructor<{ [K in PropNames]: any }>
-
-// overload 4: object format with object props declaration
-export function defineCustomElement<
-  PropsOptions extends Readonly<ComponentPropsOptions>,
-  RawBindings,
-  D,
-  C extends ComputedOptions = {},
-  M extends MethodOptions = {},
-  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
-  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = Record<string, any>,
-  EE extends string = string,
-  I extends ComponentInjectOptions = {},
-  II extends string = string,
-  S extends SlotsType = {}
->(
-  options: ComponentOptionsWithObjectProps<
-    PropsOptions,
-    RawBindings,
-    D,
-    C,
-    M,
-    Mixin,
-    Extends,
-    E,
-    EE,
-    I,
-    II,
-    S
-  > & { styles?: string[] }
-): VueElementConstructor<ExtractPropTypes<PropsOptions>>
-
-// overload 5: defining a custom element from the returned value of
+// overload 3: defining a custom element from the returned value of
 // `defineComponent`
-export function defineCustomElement<P>(
-  options: DefineComponent<P, any, any, any>
-): VueElementConstructor<ExtractPropTypes<P>>
+export function defineCustomElement<
+  // this should be `ComponentPublicInstanceConstructor` but that type is not exported
+  T extends { new (...args: any[]): ComponentPublicInstance<any> },
+>(
+  options: T,
+  extraOptions?: CustomElementOptions,
+): VueElementConstructor<
+  T extends DefineComponent<infer P, any, any, any> ? P : unknown
+>
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineCustomElement(
   options: any,
-  hydrate?: RootHydrateFunction
+  extraOptions?: ComponentOptions,
+  /**
+   * @internal
+   */
+  _createApp?: CreateAppFunction<Element>,
 ): VueElementConstructor {
-  const Comp = defineComponent(options) as any
+  const Comp = defineComponent(options, extraOptions) as any
+  if (isPlainObject(Comp)) extend(Comp, extraOptions)
   class VueCustomElement extends VueElement {
     static def = Comp
     constructor(initialProps?: Record<string, any>) {
-      super(Comp, initialProps, hydrate)
+      super(Comp, initialProps, _createApp)
     }
   }
 
@@ -157,72 +185,153 @@ export function defineCustomElement(
 }
 
 /*! #__NO_SIDE_EFFECTS__ */
-export const defineSSRCustomElement = ((options: any) => {
-  // @ts-ignore
-  return defineCustomElement(options, hydrate)
+export const defineSSRCustomElement = ((
+  options: any,
+  extraOptions?: ComponentOptions,
+) => {
+  // @ts-expect-error
+  return defineCustomElement(options, extraOptions, createSSRApp)
 }) as typeof defineCustomElement
 
 const BaseClass = (
   typeof HTMLElement !== 'undefined' ? HTMLElement : class {}
 ) as typeof HTMLElement
 
-type InnerComponentDef = ConcreteComponent & { styles?: string[] }
+type InnerComponentDef = ConcreteComponent & CustomElementOptions
 
-export class VueElement extends BaseClass {
+export class VueElement
+  extends BaseClass
+  implements ComponentCustomElementInterface
+{
+  _isVueCE = true
   /**
    * @internal
    */
   _instance: ComponentInternalInstance | null = null
+  /**
+   * @internal
+   */
+  _app: App | null = null
+  /**
+   * @internal
+   */
+  _root: Element | ShadowRoot
+  /**
+   * @internal
+   */
+  _nonce: string | undefined = this._def.nonce
+
+  /**
+   * @internal
+   */
+  _teleportTarget?: HTMLElement
 
   private _connected = false
   private _resolved = false
   private _numberProps: Record<string, true> | null = null
+  private _styleChildren = new WeakSet()
+  private _pendingResolve: Promise<void> | undefined
+  private _parent: VueElement | undefined
+  /**
+   * dev only
+   */
   private _styles?: HTMLStyleElement[]
+  /**
+   * dev only
+   */
+  private _childStyles?: Map<string, HTMLStyleElement[]>
   private _ob?: MutationObserver | null = null
+  private _slots?: Record<string, Node[]>
+
   constructor(
+    /**
+     * Component def - note this may be an AsyncWrapper, and this._def will
+     * be overwritten by the inner component when resolved.
+     */
     private _def: InnerComponentDef,
     private _props: Record<string, any> = {},
-    hydrate?: RootHydrateFunction
+    private _createApp: CreateAppFunction<Element> = createApp,
   ) {
     super()
-    if (this.shadowRoot && hydrate) {
-      hydrate(this._createVNode(), this.shadowRoot)
+    if (this.shadowRoot && _createApp !== createApp) {
+      this._root = this.shadowRoot
     } else {
       if (__DEV__ && this.shadowRoot) {
         warn(
           `Custom element has pre-rendered declarative shadow root but is not ` +
-            `defined as hydratable. Use \`defineSSRCustomElement\`.`
+            `defined as hydratable. Use \`defineSSRCustomElement\`.`,
         )
       }
-      this.attachShadow({ mode: 'open' })
-      if (!(this._def as ComponentOptions).__asyncLoader) {
-        // for sync component defs we can immediately resolve props
-        this._resolveProps(this._def)
+      if (_def.shadowRoot !== false) {
+        this.attachShadow({ mode: 'open' })
+        this._root = this.shadowRoot!
+      } else {
+        this._root = this
       }
     }
+
+    if (!(this._def as ComponentOptions).__asyncLoader) {
+      // for sync component defs we can immediately resolve props
+      this._resolveProps(this._def)
+    }
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
+    // avoid resolving component if it's not connected
+    if (!this.isConnected) return
+
+    if (!this.shadowRoot) {
+      this._parseSlots()
+    }
     this._connected = true
+
+    // locate nearest Vue custom element parent for provide/inject
+    let parent: Node | null = this
+    while (
+      (parent = parent && (parent.parentNode || (parent as ShadowRoot).host))
+    ) {
+      if (parent instanceof VueElement) {
+        this._parent = parent
+        break
+      }
+    }
+
     if (!this._instance) {
       if (this._resolved) {
+        this._setParent()
         this._update()
       } else {
-        this._resolveDef()
+        if (parent && parent._pendingResolve) {
+          this._pendingResolve = parent._pendingResolve.then(() => {
+            this._pendingResolve = undefined
+            this._resolveDef()
+          })
+        } else {
+          this._resolveDef()
+        }
       }
     }
   }
 
-  disconnectedCallback() {
-    this._connected = false
-    if (this._ob) {
-      this._ob.disconnect()
-      this._ob = null
+  private _setParent(parent = this._parent) {
+    if (parent) {
+      this._instance!.parent = parent._instance
+      this._instance!.provides = parent._instance!.provides
     }
+  }
+
+  disconnectedCallback(): void {
+    this._connected = false
     nextTick(() => {
       if (!this._connected) {
-        render(null, this.shadowRoot!)
-        this._instance = null
+        if (this._ob) {
+          this._ob.disconnect()
+          this._ob = null
+        }
+        // unmount
+        this._app && this._app.unmount()
+        if (this._instance) this._instance.ce = undefined
+        this._app = this._instance = null
       }
     })
   }
@@ -231,7 +340,9 @@ export class VueElement extends BaseClass {
    * resolve inner component definition (handle possible async component)
    */
   private _resolveDef() {
-    this._resolved = true
+    if (this._pendingResolve) {
+      return
+    }
 
     // set initial attrs
     for (let i = 0; i < this.attributes.length; i++) {
@@ -248,6 +359,9 @@ export class VueElement extends BaseClass {
     this._ob.observe(this, { attributes: true })
 
     const resolve = (def: InnerComponentDef, isAsync = false) => {
+      this._resolved = true
+      this._pendingResolve = undefined
+
       const { props, styles } = def
 
       // cast Number-type props set before resolve
@@ -274,20 +388,57 @@ export class VueElement extends BaseClass {
       }
 
       // apply CSS
-      this._applyStyles(styles)
+      if (this.shadowRoot) {
+        this._applyStyles(styles)
+      } else if (__DEV__ && styles) {
+        warn(
+          'Custom element style injection is not supported when using ' +
+            'shadowRoot: false',
+        )
+      }
 
-      // initial render
-      this._update()
+      // initial mount
+      this._mount(def)
     }
 
     const asyncDef = (this._def as ComponentOptions).__asyncLoader
     if (asyncDef) {
-      asyncDef().then(def => resolve(def, true))
+      this._pendingResolve = asyncDef().then(def =>
+        resolve((this._def = def), true),
+      )
     } else {
       resolve(this._def)
     }
   }
 
+  private _mount(def: InnerComponentDef) {
+    if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && !def.name) {
+      // @ts-expect-error
+      def.name = 'VueElement'
+    }
+    this._app = this._createApp(def)
+    if (def.configureApp) {
+      def.configureApp(this._app)
+    }
+    this._app._ceVNode = this._createVNode()
+    this._app.mount(this._root)
+
+    // apply expose after mount
+    const exposed = this._instance && this._instance.exposed
+    if (!exposed) return
+    for (const key in exposed) {
+      if (!hasOwn(this, key)) {
+        // exposed properties are readonly
+        Object.defineProperty(this, key, {
+          // unwrap ref to be consistent with public instance behavior
+          get: () => unref(exposed[key]),
+        })
+      } else if (__DEV__) {
+        warn(`Exposed property "${key}" already exists on custom element.`)
+      }
+    }
+  }
+
   private _resolveProps(def: InnerComponentDef) {
     const { props } = def
     const declaredPropKeys = isArray(props) ? props : Object.keys(props || {})
@@ -295,7 +446,7 @@ export class VueElement extends BaseClass {
     // check if there are props set pre-upgrade or connect
     for (const key of Object.keys(this)) {
       if (key[0] !== '_' && declaredPropKeys.includes(key)) {
-        this._setProp(key, this[key as keyof this], true, false)
+        this._setProp(key, this[key as keyof this])
       }
     }
 
@@ -306,39 +457,49 @@ export class VueElement extends BaseClass {
           return this._getProp(key)
         },
         set(val) {
-          this._setProp(key, val)
-        }
+          this._setProp(key, val, true, true)
+        },
       })
     }
   }
 
-  protected _setAttr(key: string) {
-    let value = this.getAttribute(key)
+  protected _setAttr(key: string): void {
+    if (key.startsWith('data-v-')) return
+    const has = this.hasAttribute(key)
+    let value = has ? this.getAttribute(key) : REMOVAL
     const camelKey = camelize(key)
-    if (this._numberProps && this._numberProps[camelKey]) {
+    if (has && this._numberProps && this._numberProps[camelKey]) {
       value = toNumber(value)
     }
-    this._setProp(camelKey, value, false)
+    this._setProp(camelKey, value, false, true)
   }
 
   /**
    * @internal
    */
-  protected _getProp(key: string) {
+  protected _getProp(key: string): any {
     return this._props[key]
   }
 
   /**
    * @internal
    */
-  protected _setProp(
+  _setProp(
     key: string,
     val: any,
     shouldReflect = true,
-    shouldUpdate = true
-  ) {
+    shouldUpdate = false,
+  ): void {
     if (val !== this._props[key]) {
-      this._props[key] = val
+      if (val === REMOVAL) {
+        delete this._props[key]
+      } else {
+        this._props[key] = val
+        // support set key on ceVNode
+        if (key === 'key' && this._app) {
+          this._app._ceVNode!.key = val
+        }
+      }
       if (shouldUpdate && this._instance) {
         this._update()
       }
@@ -356,21 +517,27 @@ export class VueElement extends BaseClass {
   }
 
   private _update() {
-    render(this._createVNode(), this.shadowRoot!)
+    render(this._createVNode(), this._root)
   }
 
   private _createVNode(): VNode<any, any> {
-    const vnode = createVNode(this._def, extend({}, this._props))
+    const baseProps: VNodeProps = {}
+    if (!this.shadowRoot) {
+      baseProps.onVnodeMounted = baseProps.onVnodeUpdated =
+        this._renderSlots.bind(this)
+    }
+    const vnode = createVNode(this._def, extend(baseProps, this._props))
     if (!this._instance) {
       vnode.ce = instance => {
         this._instance = instance
-        instance.isCE = true
+        instance.ce = this
+        instance.isCE = true // for vue-i18n backwards compat
         // HMR
         if (__DEV__) {
           instance.ceReload = newStyles => {
             // always reset styles
             if (this._styles) {
-              this._styles.forEach(s => this.shadowRoot!.removeChild(s))
+              this._styles.forEach(s => this._root.removeChild(s))
               this._styles.length = 0
             }
             this._applyStyles(newStyles)
@@ -381,9 +548,12 @@ export class VueElement extends BaseClass {
 
         const dispatch = (event: string, args: any[]) => {
           this.dispatchEvent(
-            new CustomEvent(event, {
-              detail: args
-            })
+            new CustomEvent(
+              event,
+              isPlainObject(args[0])
+                ? extend({ detail: args }, args[0])
+                : { detail: args },
+            ),
           )
         }
 
@@ -397,34 +567,143 @@ export class VueElement extends BaseClass {
           }
         }
 
-        // locate nearest Vue custom element parent for provide/inject
-        let parent: Node | null = this
-        while (
-          (parent =
-            parent && (parent.parentNode || (parent as ShadowRoot).host))
-        ) {
-          if (parent instanceof VueElement) {
-            instance.parent = parent._instance
-            instance.provides = parent._instance!.provides
-            break
-          }
-        }
+        this._setParent()
       }
     }
     return vnode
   }
 
-  private _applyStyles(styles: string[] | undefined) {
-    if (styles) {
-      styles.forEach(css => {
-        const s = document.createElement('style')
-        s.textContent = css
-        this.shadowRoot!.appendChild(s)
-        // record for HMR
-        if (__DEV__) {
+  private _applyStyles(
+    styles: string[] | undefined,
+    owner?: ConcreteComponent,
+  ) {
+    if (!styles) return
+    if (owner) {
+      if (owner === this._def || this._styleChildren.has(owner)) {
+        return
+      }
+      this._styleChildren.add(owner)
+    }
+    const nonce = this._nonce
+    for (let i = styles.length - 1; i >= 0; i--) {
+      const s = document.createElement('style')
+      if (nonce) s.setAttribute('nonce', nonce)
+      s.textContent = styles[i]
+      this.shadowRoot!.prepend(s)
+      // record for HMR
+      if (__DEV__) {
+        if (owner) {
+          if (owner.__hmrId) {
+            if (!this._childStyles) this._childStyles = new Map()
+            let entry = this._childStyles.get(owner.__hmrId)
+            if (!entry) {
+              this._childStyles.set(owner.__hmrId, (entry = []))
+            }
+            entry.push(s)
+          }
+        } else {
           ;(this._styles || (this._styles = [])).push(s)
         }
-      })
+      }
+    }
+  }
+
+  /**
+   * Only called when shadowRoot is false
+   */
+  private _parseSlots() {
+    const slots: VueElement['_slots'] = (this._slots = {})
+    let n
+    while ((n = this.firstChild)) {
+      const slotName =
+        (n.nodeType === 1 && (n as Element).getAttribute('slot')) || 'default'
+      ;(slots[slotName] || (slots[slotName] = [])).push(n)
+      this.removeChild(n)
+    }
+  }
+
+  /**
+   * Only called when shadowRoot is false
+   */
+  private _renderSlots() {
+    const outlets = (this._teleportTarget || this).querySelectorAll('slot')
+    const scopeId = this._instance!.type.__scopeId
+    for (let i = 0; i < outlets.length; i++) {
+      const o = outlets[i] as HTMLSlotElement
+      const slotName = o.getAttribute('name') || 'default'
+      const content = this._slots![slotName]
+      const parent = o.parentNode!
+      if (content) {
+        for (const n of content) {
+          // for :slotted css
+          if (scopeId && n.nodeType === 1) {
+            const id = scopeId + '-s'
+            const walker = document.createTreeWalker(n, 1)
+            ;(n as Element).setAttribute(id, '')
+            let child
+            while ((child = walker.nextNode())) {
+              ;(child as Element).setAttribute(id, '')
+            }
+          }
+          parent.insertBefore(n, o)
+        }
+      } else {
+        while (o.firstChild) parent.insertBefore(o.firstChild, o)
+      }
+      parent.removeChild(o)
+    }
+  }
+
+  /**
+   * @internal
+   */
+  _injectChildStyle(comp: ConcreteComponent & CustomElementOptions): void {
+    this._applyStyles(comp.styles, comp)
+  }
+
+  /**
+   * @internal
+   */
+  _removeChildStyle(comp: ConcreteComponent): void {
+    if (__DEV__) {
+      this._styleChildren.delete(comp)
+      if (this._childStyles && comp.__hmrId) {
+        // clear old styles
+        const oldStyles = this._childStyles.get(comp.__hmrId)
+        if (oldStyles) {
+          oldStyles.forEach(s => this._root.removeChild(s))
+          oldStyles.length = 0
+        }
+      }
     }
   }
 }
+
+export function useHost(caller?: string): VueElement | null {
+  const instance = getCurrentInstance()
+  const el = instance && (instance.ce as VueElement)
+  if (el) {
+    return el
+  } else if (__DEV__) {
+    if (!instance) {
+      warn(
+        `${caller || 'useHost'} called without an active component instance.`,
+      )
+    } else {
+      warn(
+        `${caller || 'useHost'} can only be used in components defined via ` +
+          `defineCustomElement.`,
+      )
+    }
+  }
+  return null
+}
+
+/**
+ * Retrieve the shadowRoot of the current custom element. Only usable in setup()
+ * of a `defineCustomElement` component.
+ */
+export function useShadowRoot(): ShadowRoot | null {
+  const el = __DEV__ ? useHost('useShadowRoot') : useHost()
+  return el && el.shadowRoot
+}
diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts
index b06752132..3a1a661d9 100644
--- a/packages/runtime-dom/src/components/Transition.ts
+++ b/packages/runtime-dom/src/components/Transition.ts
@@ -1,14 +1,14 @@
 import {
   BaseTransition,
-  BaseTransitionProps,
+  type BaseTransitionProps,
   BaseTransitionPropsValidators,
-  h,
+  DeprecationTypes,
+  type FunctionalComponent,
   assertNumber,
-  FunctionalComponent,
   compatUtils,
-  DeprecationTypes
+  h,
 } from '@vue/runtime-core'
-import { isObject, toNumber, extend, isArray } from '@vue/shared'
+import { extend, isArray, isObject, toNumber } from '@vue/shared'
 
 const TRANSITION = 'transition'
 const ANIMATION = 'animation'
@@ -32,7 +32,7 @@ export interface TransitionProps extends BaseTransitionProps<Element> {
   leaveToClass?: string
 }
 
-export const vtcKey = Symbol('_vtc')
+export const vtcKey: unique symbol = Symbol('_vtc')
 
 export interface ElementWithTransition extends HTMLElement {
   // _vtc = Vue Transition Classes.
@@ -42,25 +42,12 @@ export interface ElementWithTransition extends HTMLElement {
   [vtcKey]?: Set<string>
 }
 
-// DOM Transition is a higher-order-component based on the platform-agnostic
-// base Transition component, with DOM-specific logic.
-export const Transition: FunctionalComponent<TransitionProps> = (
-  props,
-  { slots }
-) => h(BaseTransition, resolveTransitionProps(props), slots)
-
-Transition.displayName = 'Transition'
-
-if (__COMPAT__) {
-  Transition.__isBuiltIn = true
-}
-
 const DOMTransitionPropsValidators = {
   name: String,
   type: String,
   css: {
     type: Boolean,
-    default: true
+    default: true,
   },
   duration: [String, Number, Object],
   enterFromClass: String,
@@ -71,15 +58,36 @@ const DOMTransitionPropsValidators = {
   appearToClass: String,
   leaveFromClass: String,
   leaveActiveClass: String,
-  leaveToClass: String
+  leaveToClass: String,
 }
 
-export const TransitionPropsValidators = (Transition.props =
-  /*#__PURE__*/ extend(
-    {},
-    BaseTransitionPropsValidators as any,
-    DOMTransitionPropsValidators
-  ))
+export const TransitionPropsValidators: any = /*@__PURE__*/ extend(
+  {},
+  BaseTransitionPropsValidators as any,
+  DOMTransitionPropsValidators,
+)
+
+/**
+ * Wrap logic that attaches extra properties to Transition in a function
+ * so that it can be annotated as pure
+ */
+const decorate = (t: typeof Transition) => {
+  t.displayName = 'Transition'
+  t.props = TransitionPropsValidators
+  if (__COMPAT__) {
+    t.__isBuiltIn = true
+  }
+  return t
+}
+
+/**
+ * DOM Transition is a higher-order-component based on the platform-agnostic
+ * base Transition component, with DOM-specific logic.
+ */
+export const Transition: FunctionalComponent<TransitionProps> =
+  /*@__PURE__*/ decorate((props, { slots }) =>
+    h(BaseTransition, resolveTransitionProps(props), slots),
+  )
 
 /**
  * #3227 Incoming hooks may be merged into arrays when wrapping Transition
@@ -87,7 +95,7 @@ export const TransitionPropsValidators = (Transition.props =
  */
 const callHook = (
   hook: Function | Function[] | undefined,
-  args: any[] = []
+  args: any[] = [],
 ) => {
   if (isArray(hook)) {
     hook.forEach(h => h(...args))
@@ -101,7 +109,7 @@ const callHook = (
  * intends to explicitly control the end of the transition.
  */
 const hasExplicitCallback = (
-  hook: Function | Function[] | undefined
+  hook: Function | Function[] | undefined,
 ): boolean => {
   return hook
     ? isArray(hook)
@@ -111,7 +119,7 @@ const hasExplicitCallback = (
 }
 
 export function resolveTransitionProps(
-  rawProps: TransitionProps
+  rawProps: TransitionProps,
 ): BaseTransitionProps<Element> {
   const baseProps: BaseTransitionProps<Element> = {}
   for (const key in rawProps) {
@@ -136,7 +144,7 @@ export function resolveTransitionProps(
     appearToClass = enterToClass,
     leaveFromClass = `${name}-leave-from`,
     leaveActiveClass = `${name}-leave-active`,
-    leaveToClass = `${name}-leave-to`
+    leaveToClass = `${name}-leave-to`,
   } = rawProps
 
   // legacy transition class compat
@@ -170,7 +178,7 @@ export function resolveTransitionProps(
     onLeaveCancelled,
     onBeforeAppear = onBeforeEnter,
     onAppear = onEnter,
-    onAppearCancelled = onEnterCancelled
+    onAppearCancelled = onEnterCancelled,
   } = baseProps
 
   const finishEnter = (el: Element, isAppear: boolean, done?: () => void) => {
@@ -181,7 +189,7 @@ export function resolveTransitionProps(
 
   const finishLeave = (
     el: Element & { _isLeaving?: boolean },
-    done?: () => void
+    done?: () => void,
   ) => {
     el._isLeaving = false
     removeTransitionClass(el, leaveFromClass)
@@ -239,9 +247,11 @@ export function resolveTransitionProps(
       if (__COMPAT__ && legacyClassEnabled && legacyLeaveFromClass) {
         addTransitionClass(el, legacyLeaveFromClass)
       }
+      // add *-leave-active class before reflow so in the case of a cancelled enter transition
+      // the css will not get the final state (#10677)
+      addTransitionClass(el, leaveActiveClass)
       // force reflow so *-leave-from classes immediately take effect (#2593)
       forceReflow()
-      addTransitionClass(el, leaveActiveClass)
       nextFrame(() => {
         if (!el._isLeaving) {
           // cancelled
@@ -269,12 +279,12 @@ export function resolveTransitionProps(
     onLeaveCancelled(el) {
       finishLeave(el)
       callHook(onLeaveCancelled, [el])
-    }
+    },
   } as BaseTransitionProps<Element>)
 }
 
 function normalizeDuration(
-  duration: TransitionProps['duration']
+  duration: TransitionProps['duration'],
 ): [number, number] | null {
   if (duration == null) {
     return null
@@ -294,7 +304,7 @@ function NumberOf(val: unknown): number {
   return res
 }
 
-export function addTransitionClass(el: Element, cls: string) {
+export function addTransitionClass(el: Element, cls: string): void {
   cls.split(/\s+/).forEach(c => c && el.classList.add(c))
   ;(
     (el as ElementWithTransition)[vtcKey] ||
@@ -302,7 +312,7 @@ export function addTransitionClass(el: Element, cls: string) {
   ).add(cls)
 }
 
-export function removeTransitionClass(el: Element, cls: string) {
+export function removeTransitionClass(el: Element, cls: string): void {
   cls.split(/\s+/).forEach(c => c && el.classList.remove(c))
   const _vtc = (el as ElementWithTransition)[vtcKey]
   if (_vtc) {
@@ -325,7 +335,7 @@ function whenTransitionEnds(
   el: Element & { _endId?: number },
   expectedType: TransitionProps['type'] | undefined,
   explicitTimeout: number | null,
-  resolve: () => void
+  resolve: () => void,
 ) {
   const id = (el._endId = ++endId)
   const resolveIfNotStale = () => {
@@ -334,7 +344,7 @@ function whenTransitionEnds(
     }
   }
 
-  if (explicitTimeout) {
+  if (explicitTimeout != null) {
     return setTimeout(resolveIfNotStale, explicitTimeout)
   }
 
@@ -376,7 +386,7 @@ type StylePropertiesKey =
 
 export function getTransitionInfo(
   el: Element,
-  expectedType?: TransitionProps['type']
+  expectedType?: TransitionProps['type'],
 ): CSSTransitionInfo {
   const styles = window.getComputedStyle(el) as Pick<
     CSSStyleDeclaration,
@@ -395,7 +405,6 @@ export function getTransitionInfo(
   let type: CSSTransitionInfo['type'] = null
   let timeout = 0
   let propCount = 0
-  /* istanbul ignore if */
   if (expectedType === TRANSITION) {
     if (transitionTimeout > 0) {
       type = TRANSITION
@@ -425,13 +434,13 @@ export function getTransitionInfo(
   const hasTransform =
     type === TRANSITION &&
     /\b(transform|all)(,|$)/.test(
-      getStyleProperties(`${TRANSITION}Property`).toString()
+      getStyleProperties(`${TRANSITION}Property`).toString(),
     )
   return {
     type,
     timeout,
     propCount,
-    hasTransform
+    hasTransform,
   }
 }
 
@@ -453,6 +462,6 @@ function toMs(s: string): number {
 }
 
 // synchronously force layout to put elements into a certain state
-export function forceReflow() {
+export function forceReflow(): number {
   return document.body.offsetHeight
 }
diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts
index fc5d260b9..928e5d955 100644
--- a/packages/runtime-dom/src/components/TransitionGroup.ts
+++ b/packages/runtime-dom/src/components/TransitionGroup.ts
@@ -1,30 +1,31 @@
 import {
-  TransitionProps,
-  addTransitionClass,
-  removeTransitionClass,
-  ElementWithTransition,
-  getTransitionInfo,
-  resolveTransitionProps,
+  type ElementWithTransition,
+  type TransitionProps,
   TransitionPropsValidators,
+  addTransitionClass,
   forceReflow,
-  vtcKey
+  getTransitionInfo,
+  removeTransitionClass,
+  resolveTransitionProps,
+  vtcKey,
 } from './Transition'
 import {
-  Fragment,
-  VNode,
-  warn,
-  resolveTransitionHooks,
-  useTransitionState,
-  getTransitionRawChildren,
-  getCurrentInstance,
-  setTransitionHooks,
-  createVNode,
-  onUpdated,
-  SetupContext,
-  toRaw,
-  compatUtils,
+  type ComponentOptions,
   DeprecationTypes,
-  ComponentOptions
+  Fragment,
+  type SetupContext,
+  Text,
+  type VNode,
+  compatUtils,
+  createVNode,
+  getCurrentInstance,
+  getTransitionRawChildren,
+  onUpdated,
+  resolveTransitionHooks,
+  setTransitionHooks,
+  toRaw,
+  useTransitionState,
+  warn,
 } from '@vue/runtime-core'
 import { extend } from '@vue/shared'
 
@@ -32,17 +33,32 @@ const positionMap = new WeakMap<VNode, DOMRect>()
 const newPositionMap = new WeakMap<VNode, DOMRect>()
 const moveCbKey = Symbol('_moveCb')
 const enterCbKey = Symbol('_enterCb')
+
 export type TransitionGroupProps = Omit<TransitionProps, 'mode'> & {
   tag?: string
   moveClass?: string
 }
 
-const TransitionGroupImpl: ComponentOptions = {
+/**
+ * Wrap logic that modifies TransitionGroup properties in a function
+ * so that it can be annotated as pure
+ */
+const decorate = (t: typeof TransitionGroupImpl) => {
+  // TransitionGroup does not support "mode" so we need to remove it from the
+  // props declarations, but direct delete operation is considered a side effect
+  delete t.props.mode
+  if (__COMPAT__) {
+    t.__isBuiltIn = true
+  }
+  return t
+}
+
+const TransitionGroupImpl: ComponentOptions = /*@__PURE__*/ decorate({
   name: 'TransitionGroup',
 
-  props: /*#__PURE__*/ extend({}, TransitionPropsValidators, {
+  props: /*@__PURE__*/ extend({}, TransitionPropsValidators, {
     tag: String,
-    moveClass: String
+    moveClass: String,
   }),
 
   setup(props: TransitionGroupProps, { slots }: SetupContext) {
@@ -62,7 +78,7 @@ const TransitionGroupImpl: ComponentOptions = {
         !hasCSSTransform(
           prevChildren[0].el as ElementWithTransition,
           instance.vnode.el as Node,
-          moveClass
+          moveClass,
         )
       ) {
         return
@@ -106,13 +122,35 @@ const TransitionGroupImpl: ComponentOptions = {
         !rawProps.tag &&
         compatUtils.checkCompatEnabled(
           DeprecationTypes.TRANSITION_GROUP_ROOT,
-          instance.parent
+          instance.parent,
         )
       ) {
         tag = 'span'
       }
 
-      prevChildren = children
+      prevChildren = []
+      if (children) {
+        for (let i = 0; i < children.length; i++) {
+          const child = children[i]
+          if (child.el && child.el instanceof Element) {
+            prevChildren.push(child)
+            setTransitionHooks(
+              child,
+              resolveTransitionHooks(
+                child,
+                cssTransitionProps,
+                state,
+                instance,
+              ),
+            )
+            positionMap.set(
+              child,
+              (child.el as Element).getBoundingClientRect(),
+            )
+          }
+        }
+      }
+
       children = slots.default ? getTransitionRawChildren(slots.default()) : []
 
       for (let i = 0; i < children.length; i++) {
@@ -120,41 +158,17 @@ const TransitionGroupImpl: ComponentOptions = {
         if (child.key != null) {
           setTransitionHooks(
             child,
-            resolveTransitionHooks(child, cssTransitionProps, state, instance)
+            resolveTransitionHooks(child, cssTransitionProps, state, instance),
           )
-        } else if (__DEV__) {
+        } else if (__DEV__ && child.type !== Text) {
           warn(`<TransitionGroup> children must be keyed.`)
         }
       }
 
-      if (prevChildren) {
-        for (let i = 0; i < prevChildren.length; i++) {
-          const child = prevChildren[i]
-          setTransitionHooks(
-            child,
-            resolveTransitionHooks(child, cssTransitionProps, state, instance)
-          )
-          positionMap.set(child, (child.el as Element).getBoundingClientRect())
-        }
-      }
-
       return createVNode(tag, null, children)
     }
-  }
-}
-
-if (__COMPAT__) {
-  TransitionGroupImpl.__isBuiltIn = true
-}
-
-/**
- * TransitionGroup does not support "mode" so we need to remove it from the
- * props declarations, but direct delete operation is considered a side effect
- * and will make the entire transition feature non-tree-shakeable, so we do it
- * in a function and mark the function's invocation as pure.
- */
-const removeMode = (props: any) => delete props.mode
-/*#__PURE__*/ removeMode(TransitionGroupImpl.props)
+  },
+})
 
 export const TransitionGroup = TransitionGroupImpl as unknown as {
   new (): {
@@ -192,7 +206,7 @@ function applyTranslation(c: VNode): VNode | undefined {
 function hasCSSTransform(
   el: ElementWithTransition,
   root: Node,
-  moveClass: string
+  moveClass: string,
 ): boolean {
   // Detect whether an element with the move class applied has
   // CSS transitions. Since the element may be inside an entering
diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts
index 1bc4e76df..5a27b245a 100644
--- a/packages/runtime-dom/src/directives/vModel.ts
+++ b/packages/runtime-dom/src/directives/vModel.ts
@@ -1,18 +1,19 @@
 import {
-  ObjectDirective,
-  VNode,
-  DirectiveHook,
-  DirectiveBinding,
-  warn
+  type DirectiveBinding,
+  type DirectiveHook,
+  type ObjectDirective,
+  type VNode,
+  nextTick,
+  warn,
 } from '@vue/runtime-core'
 import { addEventListener } from '../modules/events'
 import {
+  invokeArrayFns,
   isArray,
+  isSet,
   looseEqual,
   looseIndexOf,
-  invokeArrayFns,
   looseToNumber,
-  isSet
 } from '@vue/shared'
 
 type AssignerFn = (value: any) => void
@@ -36,14 +37,19 @@ function onCompositionEnd(e: Event) {
   }
 }
 
-const assignKey = Symbol('_assign')
+const assignKey: unique symbol = Symbol('_assign')
 
-type ModelDirective<T> = ObjectDirective<T & { [assignKey]: AssignerFn }>
+type ModelDirective<T, Modifiers extends string = string> = ObjectDirective<
+  T & { [assignKey]: AssignerFn; _assigning?: boolean },
+  any,
+  Modifiers
+>
 
 // We are exporting the v-model runtime directly as vnode hooks so that it can
 // be tree-shaken in case v-model is never used.
 export const vModelText: ModelDirective<
-  HTMLInputElement | HTMLTextAreaElement
+  HTMLInputElement | HTMLTextAreaElement,
+  'trim' | 'number' | 'lazy'
 > = {
   created(el, { modifiers: { lazy, trim, number } }, vnode) {
     el[assignKey] = getModelAssigner(vnode)
@@ -79,13 +85,18 @@ export const vModelText: ModelDirective<
   mounted(el, { value }) {
     el.value = value == null ? '' : value
   },
-  beforeUpdate(el, { value, modifiers: { lazy, trim, number } }, vnode) {
+  beforeUpdate(
+    el,
+    { value, oldValue, modifiers: { lazy, trim, number } },
+    vnode,
+  ) {
     el[assignKey] = getModelAssigner(vnode)
     // avoid clearing unresolved text. #2302
     if ((el as any).composing) return
-
     const elValue =
-      number || el.type === 'number' ? looseToNumber(el.value) : el.value
+      (number || el.type === 'number') && !/^0\d/.test(el.value)
+        ? looseToNumber(el.value)
+        : el.value
     const newValue = value == null ? '' : value
 
     if (elValue === newValue) {
@@ -93,7 +104,8 @@ export const vModelText: ModelDirective<
     }
 
     if (document.activeElement === el && el.type !== 'range') {
-      if (lazy) {
+      // #8546
+      if (lazy && value === oldValue) {
         return
       }
       if (trim && el.value.trim() === newValue) {
@@ -102,7 +114,7 @@ export const vModelText: ModelDirective<
     }
 
     el.value = newValue
-  }
+  },
 }
 
 export const vModelCheckbox: ModelDirective<HTMLInputElement> = {
@@ -143,23 +155,30 @@ export const vModelCheckbox: ModelDirective<HTMLInputElement> = {
   beforeUpdate(el, binding, vnode) {
     el[assignKey] = getModelAssigner(vnode)
     setChecked(el, binding, vnode)
-  }
+  },
 }
 
 function setChecked(
   el: HTMLInputElement,
-  { value, oldValue }: DirectiveBinding,
-  vnode: VNode
+  { value }: DirectiveBinding,
+  vnode: VNode,
 ) {
   // store the v-model value on the element so it can be accessed by the
   // change listener.
   ;(el as any)._modelValue = value
+  let checked: boolean
+
   if (isArray(value)) {
-    el.checked = looseIndexOf(value, vnode.props!.value) > -1
+    checked = looseIndexOf(value, vnode.props!.value) > -1
   } else if (isSet(value)) {
-    el.checked = value.has(vnode.props!.value)
-  } else if (value !== oldValue) {
-    el.checked = looseEqual(value, getCheckboxValue(el, true))
+    checked = value.has(vnode.props!.value)
+  } else {
+    checked = looseEqual(value, getCheckboxValue(el, true))
+  }
+
+  // Only update if the checked state has changed
+  if (el.checked !== checked) {
+    el.checked = checked
   }
 }
 
@@ -176,10 +195,10 @@ export const vModelRadio: ModelDirective<HTMLInputElement> = {
     if (value !== oldValue) {
       el.checked = looseEqual(value, vnode.props!.value)
     }
-  }
+  },
 }
 
-export const vModelSelect: ModelDirective<HTMLSelectElement> = {
+export const vModelSelect: ModelDirective<HTMLSelectElement, 'number'> = {
   // <select multiple> value need to be deep traversed
   deep: true,
   created(el, { value, modifiers: { number } }, vnode) {
@@ -188,15 +207,19 @@ export const vModelSelect: ModelDirective<HTMLSelectElement> = {
       const selectedVal = Array.prototype.filter
         .call(el.options, (o: HTMLOptionElement) => o.selected)
         .map((o: HTMLOptionElement) =>
-          number ? looseToNumber(getValue(o)) : getValue(o)
+          number ? looseToNumber(getValue(o)) : getValue(o),
         )
       el[assignKey](
         el.multiple
           ? isSetModel
             ? new Set(selectedVal)
             : selectedVal
-          : selectedVal[0]
+          : selectedVal[0],
       )
+      el._assigning = true
+      nextTick(() => {
+        el._assigning = false
+      })
     })
     el[assignKey] = getModelAssigner(vnode)
   },
@@ -209,34 +232,42 @@ export const vModelSelect: ModelDirective<HTMLSelectElement> = {
     el[assignKey] = getModelAssigner(vnode)
   },
   updated(el, { value }) {
-    setSelected(el, value)
-  }
+    if (!el._assigning) {
+      setSelected(el, value)
+    }
+  },
 }
 
 function setSelected(el: HTMLSelectElement, value: any) {
   const isMultiple = el.multiple
-  if (isMultiple && !isArray(value) && !isSet(value)) {
+  const isArrayValue = isArray(value)
+  if (isMultiple && !isArrayValue && !isSet(value)) {
     __DEV__ &&
       warn(
         `<select multiple v-model> expects an Array or Set value for its binding, ` +
-          `but got ${Object.prototype.toString.call(value).slice(8, -1)}.`
+          `but got ${Object.prototype.toString.call(value).slice(8, -1)}.`,
       )
     return
   }
+
   for (let i = 0, l = el.options.length; i < l; i++) {
     const option = el.options[i]
     const optionValue = getValue(option)
     if (isMultiple) {
-      if (isArray(value)) {
-        option.selected = looseIndexOf(value, optionValue) > -1
+      if (isArrayValue) {
+        const optionType = typeof optionValue
+        // fast path for string / number values
+        if (optionType === 'string' || optionType === 'number') {
+          option.selected = value.some(v => String(v) === String(optionValue))
+        } else {
+          option.selected = looseIndexOf(value, optionValue) > -1
+        }
       } else {
         option.selected = value.has(optionValue)
       }
-    } else {
-      if (looseEqual(getValue(option), value)) {
-        if (el.selectedIndex !== i) el.selectedIndex = i
-        return
-      }
+    } else if (looseEqual(getValue(option), value)) {
+      if (el.selectedIndex !== i) el.selectedIndex = i
+      return
     }
   }
   if (!isMultiple && el.selectedIndex !== -1) {
@@ -252,7 +283,7 @@ function getValue(el: HTMLOptionElement | HTMLInputElement) {
 // retrieve raw value for true-value and false-value set via :true-value or :false-value bindings
 function getCheckboxValue(
   el: HTMLInputElement & { _trueValue?: any; _falseValue?: any },
-  checked: boolean
+  checked: boolean,
 ) {
   const key = checked ? '_trueValue' : '_falseValue'
   return key in el ? el[key] : checked
@@ -272,7 +303,7 @@ export const vModelDynamic: ObjectDirective<
   },
   updated(el, binding, vnode, prevVNode) {
     callModelHook(el, binding, vnode, prevVNode, 'updated')
-  }
+  },
 }
 
 function resolveDynamicModel(tagName: string, type: string | undefined) {
@@ -298,11 +329,11 @@ function callModelHook(
   binding: DirectiveBinding,
   vnode: VNode,
   prevVNode: VNode | null,
-  hook: keyof ObjectDirective
+  hook: keyof ObjectDirective,
 ) {
   const modelToUse = resolveDynamicModel(
     el.tagName,
-    vnode.props && vnode.props.type
+    vnode.props && vnode.props.type,
   )
   const fn = modelToUse[hook] as DirectiveHook
   fn && fn(el, binding, vnode, prevVNode)
@@ -310,7 +341,7 @@ function callModelHook(
 
 // SSR vnode transforms, only used when user includes client-oriented render
 // function in SSR
-export function initVModelForSSR() {
+export function initVModelForSSR(): void {
   vModelText.getSSRProps = ({ value }) => ({ value })
 
   vModelRadio.getSSRProps = ({ value }, vnode) => {
@@ -340,10 +371,17 @@ export function initVModelForSSR() {
     const modelToUse = resolveDynamicModel(
       // resolveDynamicModel expects an uppercase tag name, but vnode.type is lowercase
       vnode.type.toUpperCase(),
-      vnode.props && vnode.props.type
+      vnode.props && vnode.props.type,
     )
     if (modelToUse.getSSRProps) {
       return modelToUse.getSSRProps(binding, vnode)
     }
   }
 }
+
+export type VModelDirective =
+  | typeof vModelText
+  | typeof vModelCheckbox
+  | typeof vModelSelect
+  | typeof vModelRadio
+  | typeof vModelDynamic
diff --git a/packages/runtime-dom/src/directives/vOn.ts b/packages/runtime-dom/src/directives/vOn.ts
index 8054efb9e..c1a2e182f 100644
--- a/packages/runtime-dom/src/directives/vOn.ts
+++ b/packages/runtime-dom/src/directives/vOn.ts
@@ -1,48 +1,67 @@
 import {
-  getCurrentInstance,
+  type ComponentInternalInstance,
   DeprecationTypes,
-  LegacyConfig,
+  type Directive,
+  type LegacyConfig,
   compatUtils,
-  ComponentInternalInstance
+  getCurrentInstance,
 } from '@vue/runtime-core'
 import { hyphenate, isArray } from '@vue/shared'
 
-const systemModifiers = ['ctrl', 'shift', 'alt', 'meta']
+const systemModifiers = ['ctrl', 'shift', 'alt', 'meta'] as const
+type SystemModifiers = (typeof systemModifiers)[number]
+type CompatModifiers = keyof typeof keyNames
 
+export type VOnModifiers = SystemModifiers | ModifierGuards | CompatModifiers
 type KeyedEvent = KeyboardEvent | MouseEvent | TouchEvent
 
+type ModifierGuards =
+  | 'shift'
+  | 'ctrl'
+  | 'alt'
+  | 'meta'
+  | 'left'
+  | 'right'
+  | 'stop'
+  | 'prevent'
+  | 'self'
+  | 'middle'
+  | 'exact'
 const modifierGuards: Record<
-  string,
-  (e: Event, modifiers: string[]) => void | boolean
+  ModifierGuards,
+  | ((e: Event) => void | boolean)
+  | ((e: Event, modifiers: string[]) => void | boolean)
 > = {
-  stop: e => e.stopPropagation(),
-  prevent: e => e.preventDefault(),
-  self: e => e.target !== e.currentTarget,
-  ctrl: e => !(e as KeyedEvent).ctrlKey,
-  shift: e => !(e as KeyedEvent).shiftKey,
-  alt: e => !(e as KeyedEvent).altKey,
-  meta: e => !(e as KeyedEvent).metaKey,
-  left: e => 'button' in e && (e as MouseEvent).button !== 0,
-  middle: e => 'button' in e && (e as MouseEvent).button !== 1,
-  right: e => 'button' in e && (e as MouseEvent).button !== 2,
+  stop: (e: Event) => e.stopPropagation(),
+  prevent: (e: Event) => e.preventDefault(),
+  self: (e: Event) => e.target !== e.currentTarget,
+  ctrl: (e: Event) => !(e as KeyedEvent).ctrlKey,
+  shift: (e: Event) => !(e as KeyedEvent).shiftKey,
+  alt: (e: Event) => !(e as KeyedEvent).altKey,
+  meta: (e: Event) => !(e as KeyedEvent).metaKey,
+  left: (e: Event) => 'button' in e && (e as MouseEvent).button !== 0,
+  middle: (e: Event) => 'button' in e && (e as MouseEvent).button !== 1,
+  right: (e: Event) => 'button' in e && (e as MouseEvent).button !== 2,
   exact: (e, modifiers) =>
-    systemModifiers.some(m => (e as any)[`${m}Key`] && !modifiers.includes(m))
+    systemModifiers.some(m => (e as any)[`${m}Key`] && !modifiers.includes(m)),
 }
 
 /**
  * @private
  */
 export const withModifiers = <
-  T extends (event: Event, ...args: unknown[]) => any
+  T extends (event: Event, ...args: unknown[]) => any,
 >(
-  fn: T & { _withMods?: T },
-  modifiers: string[]
-) => {
+  fn: T & { _withMods?: { [key: string]: T } },
+  modifiers: VOnModifiers[],
+): T => {
+  const cache = fn._withMods || (fn._withMods = {})
+  const cacheKey = modifiers.join('.')
   return (
-    fn._withMods ||
-    (fn._withMods = ((event, ...args) => {
+    cache[cacheKey] ||
+    (cache[cacheKey] = ((event, ...args) => {
       for (let i = 0; i < modifiers.length; i++) {
-        const guard = modifierGuards[modifiers[i]]
+        const guard = modifierGuards[modifiers[i] as ModifierGuards]
         if (guard && guard(event, modifiers)) return
       }
       return fn(event, ...args)
@@ -52,23 +71,26 @@ export const withModifiers = <
 
 // Kept for 2.x compat.
 // Note: IE11 compat for `spacebar` and `del` is removed for now.
-const keyNames: Record<string, string | string[]> = {
+const keyNames: Record<
+  'esc' | 'space' | 'up' | 'left' | 'right' | 'down' | 'delete',
+  string
+> = {
   esc: 'escape',
   space: ' ',
   up: 'arrow-up',
   left: 'arrow-left',
   right: 'arrow-right',
   down: 'arrow-down',
-  delete: 'backspace'
+  delete: 'backspace',
 }
 
 /**
  * @private
  */
 export const withKeys = <T extends (event: KeyboardEvent) => any>(
-  fn: T & { _withKeys?: T },
-  modifiers: string[]
-) => {
+  fn: T & { _withKeys?: { [k: string]: T } },
+  modifiers: string[],
+): T => {
   let globalKeyCodes: LegacyConfig['keyCodes']
   let instance: ComponentInternalInstance | null = null
   if (__COMPAT__) {
@@ -83,20 +105,29 @@ export const withKeys = <T extends (event: KeyboardEvent) => any>(
     if (__DEV__ && modifiers.some(m => /^\d+$/.test(m))) {
       compatUtils.warnDeprecation(
         DeprecationTypes.V_ON_KEYCODE_MODIFIER,
-        instance
+        instance,
       )
     }
   }
 
+  const cache: { [k: string]: T } = fn._withKeys || (fn._withKeys = {})
+  const cacheKey = modifiers.join('.')
+
   return (
-    fn._withKeys ||
-    (fn._withKeys = (event => {
+    cache[cacheKey] ||
+    (cache[cacheKey] = (event => {
       if (!('key' in event)) {
         return
       }
 
       const eventKey = hyphenate(event.key)
-      if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
+      if (
+        modifiers.some(
+          k =>
+            k === eventKey ||
+            keyNames[k as unknown as CompatModifiers] === eventKey,
+        )
+      ) {
         return fn(event)
       }
 
@@ -105,7 +136,7 @@ export const withKeys = <T extends (event: KeyboardEvent) => any>(
         if (
           compatUtils.isCompatEnabled(
             DeprecationTypes.V_ON_KEYCODE_MODIFIER,
-            instance
+            instance,
           ) &&
           modifiers.some(mod => mod == keyCode)
         ) {
@@ -128,3 +159,5 @@ export const withKeys = <T extends (event: KeyboardEvent) => any>(
     }) as T)
   )
 }
+
+export type VOnDirective = Directive<any, any, VOnModifiers>
diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts
index b848ec998..f8f41bb04 100644
--- a/packages/runtime-dom/src/directives/vShow.ts
+++ b/packages/runtime-dom/src/directives/vShow.ts
@@ -1,15 +1,18 @@
-import { ObjectDirective } from '@vue/runtime-core'
+import type { ObjectDirective } from '@vue/runtime-core'
 
-export const vShowOldKey = Symbol('_vod')
+export const vShowOriginalDisplay: unique symbol = Symbol('_vod')
+export const vShowHidden: unique symbol = Symbol('_vsh')
 
-interface VShowElement extends HTMLElement {
+export interface VShowElement extends HTMLElement {
   // _vod = vue original display
-  [vShowOldKey]: string
+  [vShowOriginalDisplay]: string
+  [vShowHidden]: boolean
 }
 
-export const vShow: ObjectDirective<VShowElement> = {
+export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
   beforeMount(el, { value }, { transition }) {
-    el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display
+    el[vShowOriginalDisplay] =
+      el.style.display === 'none' ? '' : el.style.display
     if (transition && value) {
       transition.beforeEnter(el)
     } else {
@@ -39,16 +42,21 @@ export const vShow: ObjectDirective<VShowElement> = {
   },
   beforeUnmount(el, { value }) {
     setDisplay(el, value)
-  }
+  },
+}
+
+if (__DEV__) {
+  vShow.name = 'show'
 }
 
 function setDisplay(el: VShowElement, value: unknown): void {
-  el.style.display = value ? el[vShowOldKey] : 'none'
+  el.style.display = value ? el[vShowOriginalDisplay] : 'none'
+  el[vShowHidden] = !value
 }
 
 // SSR vnode transforms, only used when user includes client-oriented render
 // function in SSR
-export function initVShowForSSR() {
+export function initVShowForSSR(): void {
   vShow.getSSRProps = ({ value }) => {
     if (!value) {
       return { style: { display: 'none' } }
diff --git a/packages/runtime-dom/src/helpers/useCssModule.ts b/packages/runtime-dom/src/helpers/useCssModule.ts
index d96dc69c3..0fb738975 100644
--- a/packages/runtime-dom/src/helpers/useCssModule.ts
+++ b/packages/runtime-dom/src/helpers/useCssModule.ts
@@ -1,8 +1,7 @@
-import { warn, getCurrentInstance } from '@vue/runtime-core'
+import { getCurrentInstance, warn } from '@vue/runtime-core'
 import { EMPTY_OBJ } from '@vue/shared'
 
 export function useCssModule(name = '$style'): Record<string, string> {
-  /* istanbul ignore else */
   if (!__GLOBAL__) {
     const instance = getCurrentInstance()!
     if (!instance) {
@@ -22,9 +21,11 @@ export function useCssModule(name = '$style'): Record<string, string> {
     }
     return mod as Record<string, string>
   } else {
+    /* v8 ignore start */
     if (__DEV__) {
       warn(`useCssModule() is not supported in the global build.`)
     }
     return EMPTY_OBJ
+    /* v8 ignore stop */
   }
 }
diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
index e0a95c9ca..e57705304 100644
--- a/packages/runtime-dom/src/helpers/useCssVars.ts
+++ b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -1,43 +1,56 @@
 import {
-  getCurrentInstance,
-  warn,
-  VNode,
   Fragment,
   Static,
-  watchPostEffect,
+  type VNode,
+  getCurrentInstance,
+  onBeforeMount,
   onMounted,
-  onUnmounted
+  onUnmounted,
+  warn,
+  watchPostEffect,
 } from '@vue/runtime-core'
 import { ShapeFlags } from '@vue/shared'
 
+export const CSS_VAR_TEXT: unique symbol = Symbol(__DEV__ ? 'CSS_VAR_TEXT' : '')
 /**
  * Runtime helper for SFC's CSS variable injection feature.
  * @private
  */
-export function useCssVars(getter: (ctx: any) => Record<string, string>) {
+export function useCssVars(getter: (ctx: any) => Record<string, string>): void {
   if (!__BROWSER__ && !__TEST__) return
 
   const instance = getCurrentInstance()
-  /* istanbul ignore next */
+  /* v8 ignore start */
   if (!instance) {
     __DEV__ &&
       warn(`useCssVars is called without current active component instance.`)
     return
   }
+  /* v8 ignore stop */
 
   const updateTeleports = (instance.ut = (vars = getter(instance.proxy)) => {
     Array.from(
-      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
+      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`),
     ).forEach(node => setVarsOnNode(node, vars))
   })
 
+  if (__DEV__) {
+    instance.getCssVars = () => getter(instance.proxy)
+  }
+
   const setVars = () => {
     const vars = getter(instance.proxy)
-    setVarsOnVNode(instance.subTree, vars)
+    if (instance.ce) {
+      setVarsOnNode(instance.ce as any, vars)
+    } else {
+      setVarsOnVNode(instance.subTree, vars)
+    }
     updateTeleports(vars)
   }
 
-  watchPostEffect(setVars)
+  onBeforeMount(() => {
+    watchPostEffect(setVars)
+  })
 
   onMounted(() => {
     const ob = new MutationObserver(setVars)
@@ -79,8 +92,11 @@ function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
 function setVarsOnNode(el: Node, vars: Record<string, string>) {
   if (el.nodeType === 1) {
     const style = (el as HTMLElement).style
+    let cssText = ''
     for (const key in vars) {
       style.setProperty(`--${key}`, vars[key])
+      cssText += `--${key}: ${vars[key]};`
     }
+    ;(style as any)[CSS_VAR_TEXT] = cssText
   }
 }
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index ad818a34b..ca9a307dd 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -1,36 +1,69 @@
 import {
-  createRenderer,
-  createHydrationRenderer,
-  warn,
-  RootRenderFunction,
-  CreateAppFunction,
-  Renderer,
-  HydrationRenderer,
-  App,
-  RootHydrateFunction,
-  isRuntimeOnly,
+  type App,
+  type CreateAppFunction,
+  type DefineComponent,
   DeprecationTypes,
-  compatUtils
+  type Directive,
+  type ElementNamespace,
+  type HydrationRenderer,
+  type Renderer,
+  type RootHydrateFunction,
+  type RootRenderFunction,
+  compatUtils,
+  createHydrationRenderer,
+  createRenderer,
+  isRuntimeOnly,
+  warn,
 } from '@vue/runtime-core'
 import { nodeOps } from './nodeOps'
 import { patchProp } from './patchProp'
 // Importing from the compiler, will be tree-shaken in prod
 import {
-  isFunction,
-  isString,
-  isHTMLTag,
-  isSVGTag,
+  NOOP,
   extend,
-  NOOP
+  isFunction,
+  isHTMLTag,
+  isMathMLTag,
+  isSVGTag,
+  isString,
 } from '@vue/shared'
+import type { TransitionProps } from './components/Transition'
+import type { TransitionGroupProps } from './components/TransitionGroup'
+import type { vShow } from './directives/vShow'
+import type { VOnDirective } from './directives/vOn'
+import type { VModelDirective } from './directives/vModel'
+
+/**
+ * This is a stub implementation to prevent the need to use dom types.
+ *
+ * To enable proper types, add `"dom"` to `"lib"` in your `tsconfig.json`.
+ */
+type DomStub = {}
+type DomType<T> = typeof globalThis extends { window: unknown } ? T : DomStub
 
 declare module '@vue/reactivity' {
   export interface RefUnwrapBailTypes {
-    runtimeDOMBailTypes: Node | Window
+    runtimeDOMBailTypes: DomType<Node | Window>
   }
 }
 
-const rendererOptions = /*#__PURE__*/ extend({ patchProp }, nodeOps)
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Transition: DefineComponent<TransitionProps>
+    TransitionGroup: DefineComponent<TransitionGroupProps>
+  }
+
+  interface GlobalDirectives {
+    vShow: typeof vShow
+    vOn: VOnDirective
+    vBind: VModelDirective
+    vIf: Directive<any, boolean>
+    VOnce: Directive
+    VSlot: Directive
+  }
+}
+
+const rendererOptions = /*@__PURE__*/ extend({ patchProp }, nodeOps)
 
 // lazy create the renderer - this makes core renderer logic tree-shakable
 // in case the user only imports reactivity utilities from Vue.
@@ -83,13 +116,13 @@ export const createApp = ((...args) => {
       // rendered by the server, the template should not contain any user data.
       component.template = container.innerHTML
       // 2.x compat check
-      if (__COMPAT__ && __DEV__) {
-        for (let i = 0; i < container.attributes.length; i++) {
-          const attr = container.attributes[i]
+      if (__COMPAT__ && __DEV__ && container.nodeType === 1) {
+        for (let i = 0; i < (container as Element).attributes.length; i++) {
+          const attr = (container as Element).attributes[i]
           if (attr.name !== 'v-cloak' && /^(v-|:|@)/.test(attr.name)) {
             compatUtils.warnDeprecation(
               DeprecationTypes.GLOBAL_MOUNT_CONTAINER,
-              null
+              null,
             )
             break
           }
@@ -98,8 +131,10 @@ export const createApp = ((...args) => {
     }
 
     // clear content before mounting
-    container.innerHTML = ''
-    const proxy = mount(container, false, container instanceof SVGElement)
+    if (container.nodeType === 1) {
+      container.textContent = ''
+    }
+    const proxy = mount(container, false, resolveRootNamespace(container))
     if (container instanceof Element) {
       container.removeAttribute('v-cloak')
       container.setAttribute('data-v-app', '')
@@ -122,19 +157,33 @@ export const createSSRApp = ((...args) => {
   app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
     const container = normalizeContainer(containerOrSelector)
     if (container) {
-      return mount(container, true, container instanceof SVGElement)
+      return mount(container, true, resolveRootNamespace(container))
     }
   }
 
   return app
 }) as CreateAppFunction<Element>
 
+function resolveRootNamespace(
+  container: Element | ShadowRoot,
+): ElementNamespace {
+  if (container instanceof SVGElement) {
+    return 'svg'
+  }
+  if (
+    typeof MathMLElement === 'function' &&
+    container instanceof MathMLElement
+  ) {
+    return 'mathml'
+  }
+}
+
 function injectNativeTagCheck(app: App) {
   // Inject `isNativeTag`
   // this is used for component name validation (dev only)
   Object.defineProperty(app.config, 'isNativeTag', {
-    value: (tag: string) => isHTMLTag(tag) || isSVGTag(tag),
-    writable: false
+    value: (tag: string) => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
+    writable: false,
   })
 }
 
@@ -149,9 +198,9 @@ function injectCompilerOptionsCheck(app: App) {
       set() {
         warn(
           `The \`isCustomElement\` config option is deprecated. Use ` +
-            `\`compilerOptions.isCustomElement\` instead.`
+            `\`compilerOptions.isCustomElement\` instead.`,
         )
-      }
+      },
     })
 
     const compilerOptions = app.config.compilerOptions
@@ -171,19 +220,19 @@ function injectCompilerOptionsCheck(app: App) {
       },
       set() {
         warn(msg)
-      }
+      },
     })
   }
 }
 
 function normalizeContainer(
-  container: Element | ShadowRoot | string
-): Element | null {
+  container: Element | ShadowRoot | string,
+): Element | ShadowRoot | null {
   if (isString(container)) {
     const res = document.querySelector(container)
     if (__DEV__ && !res) {
       warn(
-        `Failed to mount app: mount target selector "${container}" returned null.`
+        `Failed to mount app: mount target selector "${container}" returned null.`,
       )
     }
     return res
@@ -195,7 +244,7 @@ function normalizeContainer(
     container.mode === 'closed'
   ) {
     warn(
-      `mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`
+      `mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`,
     )
   }
   return container as any
@@ -205,8 +254,11 @@ function normalizeContainer(
 export {
   defineCustomElement,
   defineSSRCustomElement,
+  useShadowRoot,
+  useHost,
   VueElement,
-  type VueElementConstructor
+  type VueElementConstructor,
+  type CustomElementOptions,
 } from './apiCustomElement'
 
 // SFC CSS utilities
@@ -217,7 +269,7 @@ export { useCssVars } from './helpers/useCssVars'
 export { Transition, type TransitionProps } from './components/Transition'
 export {
   TransitionGroup,
-  type TransitionGroupProps
+  type TransitionGroupProps,
 } from './components/TransitionGroup'
 
 // **Internal** DOM-only runtime directive helpers
@@ -226,7 +278,7 @@ export {
   vModelCheckbox,
   vModelRadio,
   vModelSelect,
-  vModelDynamic
+  vModelDynamic,
 } from './directives/vModel'
 export { withModifiers, withKeys } from './directives/vOn'
 export { vShow } from './directives/vShow'
@@ -239,7 +291,7 @@ let ssrDirectiveInitialized = false
 /**
  * @internal
  */
-export const initDirectivesForSSR = __SSR__
+export const initDirectivesForSSR: () => void = __SSR__
   ? () => {
       if (!ssrDirectiveInitialized) {
         ssrDirectiveInitialized = true
diff --git a/packages/runtime-dom/src/jsx.ts b/packages/runtime-dom/src/jsx.ts
index dfa4fc561..5292441cd 100644
--- a/packages/runtime-dom/src/jsx.ts
+++ b/packages/runtime-dom/src/jsx.ts
@@ -26,7 +26,7 @@
 //                 Kanitkorn Sujautra <https://github.com/lukyth>
 //                 Sebastian Silbermann <https://github.com/eps1lon>
 
-import * as CSS from 'csstype'
+import type * as CSS from 'csstype'
 
 export interface CSSProperties
   extends CSS.Properties<string | number>,
@@ -46,7 +46,7 @@ type Booleanish = boolean | 'true' | 'false'
 type Numberish = number | string
 
 // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
-interface AriaAttributes {
+export interface AriaAttributes {
   /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
   'aria-activedescendant'?: string
   /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
@@ -405,8 +405,9 @@ export interface DataHTMLAttributes extends HTMLAttributes {
 }
 
 export interface DetailsHTMLAttributes extends HTMLAttributes {
+  name?: string
   open?: Booleanish
-  onToggle?: Event
+  onToggle?: (payload: ToggleEvent) => void
 }
 
 export interface DelHTMLAttributes extends HTMLAttributes {
@@ -416,6 +417,7 @@ export interface DelHTMLAttributes extends HTMLAttributes {
 
 export interface DialogHTMLAttributes extends HTMLAttributes {
   open?: Booleanish
+  onClose?: (payload: Event) => void
 }
 
 export interface EmbedHTMLAttributes extends HTMLAttributes {
@@ -453,6 +455,7 @@ export interface IframeHTMLAttributes extends HTMLAttributes {
   /** @deprecated */
   frameborder?: Numberish
   height?: Numberish
+  loading?: 'eager' | 'lazy'
   /** @deprecated */
   marginheight?: Numberish
   /** @deprecated */
@@ -739,7 +742,7 @@ export interface TextareaHTMLAttributes extends HTMLAttributes {
   readonly?: Booleanish
   required?: Booleanish
   rows?: Numberish
-  value?: string | ReadonlyArray<string> | number
+  value?: string | ReadonlyArray<string> | number | null
   wrap?: string
 }
 
@@ -1077,6 +1080,7 @@ export interface SVGAttributes extends AriaAttributes, EventHandlers<Events> {
   xlinkTitle?: string
   xlinkType?: string
   xmlns?: string
+  xmlnsXlink?: string
   y1?: Numberish
   y2?: Numberish
   y?: Numberish
@@ -1347,8 +1351,9 @@ export interface Events {
   // selection events
   onSelect: Event
 
-  // UI events
-  onScroll: UIEvent
+  // scroll events
+  onScroll: Event
+  onScrollend: Event
 
   // touch events
   onTouchcancel: TouchEvent
@@ -1385,10 +1390,10 @@ type EventHandlers<E> = {
     : (payload: E[K]) => void
 }
 
-import { VNodeRef } from '@vue/runtime-core'
+import type { VNodeRef } from '@vue/runtime-core'
 
 export type ReservedProps = {
-  key?: string | number | symbol
+  key?: PropertyKey
   ref?: VNodeRef
   ref_for?: boolean
   ref_key?: string
diff --git a/packages/runtime-dom/src/modules/attrs.ts b/packages/runtime-dom/src/modules/attrs.ts
index dc701a959..95e0a1485 100644
--- a/packages/runtime-dom/src/modules/attrs.ts
+++ b/packages/runtime-dom/src/modules/attrs.ts
@@ -1,13 +1,14 @@
 import {
+  NOOP,
   includeBooleanAttr,
   isSpecialBooleanAttr,
+  isSymbol,
   makeMap,
-  NOOP
 } from '@vue/shared'
 import {
+  type ComponentInternalInstance,
+  DeprecationTypes,
   compatUtils,
-  ComponentInternalInstance,
-  DeprecationTypes
 } from '@vue/runtime-core'
 
 export const xlinkNS = 'http://www.w3.org/1999/xlink'
@@ -17,8 +18,9 @@ export function patchAttr(
   key: string,
   value: any,
   isSVG: boolean,
-  instance?: ComponentInternalInstance | null
-) {
+  instance?: ComponentInternalInstance | null,
+  isBoolean: boolean = isSpecialBooleanAttr(key),
+): void {
   if (isSVG && key.startsWith('xlink:')) {
     if (value == null) {
       el.removeAttributeNS(xlinkNS, key.slice(6, key.length))
@@ -32,25 +34,28 @@ export function patchAttr(
 
     // note we are only checking boolean attributes that don't have a
     // corresponding dom prop of the same name here.
-    const isBoolean = isSpecialBooleanAttr(key)
     if (value == null || (isBoolean && !includeBooleanAttr(value))) {
       el.removeAttribute(key)
     } else {
-      el.setAttribute(key, isBoolean ? '' : value)
+      // attribute value is a string https://html.spec.whatwg.org/multipage/dom.html#attributes
+      el.setAttribute(
+        key,
+        isBoolean ? '' : isSymbol(value) ? String(value) : value,
+      )
     }
   }
 }
 
 // 2.x compat
 const isEnumeratedAttr = __COMPAT__
-  ? /*#__PURE__*/ makeMap('contenteditable,draggable,spellcheck')
+  ? /*@__PURE__*/ makeMap('contenteditable,draggable,spellcheck')
   : NOOP
 
 export function compatCoerceAttr(
   el: Element,
   key: string,
   value: unknown,
-  instance: ComponentInternalInstance | null = null
+  instance: ComponentInternalInstance | null = null,
 ): boolean {
   if (isEnumeratedAttr(key)) {
     const v2CoercedValue =
@@ -66,7 +71,7 @@ export function compatCoerceAttr(
         instance,
         key,
         value,
-        v2CoercedValue
+        v2CoercedValue,
       )
     ) {
       el.setAttribute(key, v2CoercedValue)
@@ -75,12 +80,13 @@ export function compatCoerceAttr(
   } else if (
     value === false &&
     !isSpecialBooleanAttr(key) &&
-    compatUtils.softAssertCompatEnabled(
+    compatUtils.isCompatEnabled(DeprecationTypes.ATTR_FALSE_VALUE, instance)
+  ) {
+    compatUtils.warnDeprecation(
       DeprecationTypes.ATTR_FALSE_VALUE,
       instance,
-      key
+      key,
     )
-  ) {
     el.removeAttribute(key)
     return true
   }
diff --git a/packages/runtime-dom/src/modules/class.ts b/packages/runtime-dom/src/modules/class.ts
index bf2c6280c..b01f4e8d0 100644
--- a/packages/runtime-dom/src/modules/class.ts
+++ b/packages/runtime-dom/src/modules/class.ts
@@ -1,8 +1,12 @@
-import { ElementWithTransition, vtcKey } from '../components/Transition'
+import { type ElementWithTransition, vtcKey } from '../components/Transition'
 
 // compiler should normalize class + :class bindings on the same element
 // into a single binding ['staticClass', dynamic]
-export function patchClass(el: Element, value: string | null, isSVG: boolean) {
+export function patchClass(
+  el: Element,
+  value: string | null,
+  isSVG: boolean,
+): void {
   // directly setting className should be faster than setAttribute in theory
   // if this is an element during a transition, take the temporary transition
   // classes into account.
diff --git a/packages/runtime-dom/src/modules/events.ts b/packages/runtime-dom/src/modules/events.ts
index 884c55c92..600b0840c 100644
--- a/packages/runtime-dom/src/modules/events.ts
+++ b/packages/runtime-dom/src/modules/events.ts
@@ -1,8 +1,9 @@
-import { hyphenate, isArray } from '@vue/shared'
+import { NOOP, hyphenate, isArray, isFunction } from '@vue/shared'
 import {
+  type ComponentInternalInstance,
   ErrorCodes,
-  ComponentInternalInstance,
-  callWithAsyncErrorHandling
+  callWithAsyncErrorHandling,
+  warn,
 } from '@vue/runtime-core'
 
 interface Invoker extends EventListener {
@@ -16,8 +17,8 @@ export function addEventListener(
   el: Element,
   event: string,
   handler: EventListener,
-  options?: EventListenerOptions
-) {
+  options?: EventListenerOptions,
+): void {
   el.addEventListener(event, handler, options)
 }
 
@@ -25,31 +26,38 @@ export function removeEventListener(
   el: Element,
   event: string,
   handler: EventListener,
-  options?: EventListenerOptions
-) {
+  options?: EventListenerOptions,
+): void {
   el.removeEventListener(event, handler, options)
 }
 
-const veiKey = Symbol('_vei')
+const veiKey: unique symbol = Symbol('_vei')
 
 export function patchEvent(
   el: Element & { [veiKey]?: Record<string, Invoker | undefined> },
   rawName: string,
   prevValue: EventValue | null,
-  nextValue: EventValue | null,
-  instance: ComponentInternalInstance | null = null
-) {
+  nextValue: EventValue | unknown,
+  instance: ComponentInternalInstance | null = null,
+): void {
   // vei = vue event invokers
   const invokers = el[veiKey] || (el[veiKey] = {})
   const existingInvoker = invokers[rawName]
   if (nextValue && existingInvoker) {
     // patch
-    existingInvoker.value = nextValue
+    existingInvoker.value = __DEV__
+      ? sanitizeEventValue(nextValue, rawName)
+      : (nextValue as EventValue)
   } else {
     const [name, options] = parseName(rawName)
     if (nextValue) {
       // add
-      const invoker = (invokers[rawName] = createInvoker(nextValue, instance))
+      const invoker = (invokers[rawName] = createInvoker(
+        __DEV__
+          ? sanitizeEventValue(nextValue, rawName)
+          : (nextValue as EventValue),
+        instance,
+      ))
       addEventListener(el, name, invoker, options)
     } else if (existingInvoker) {
       // remove
@@ -78,13 +86,13 @@ function parseName(name: string): [string, EventListenerOptions | undefined] {
 // To avoid the overhead of repeatedly calling Date.now(), we cache
 // and use the same timestamp for all event listeners attached in the same tick.
 let cachedNow: number = 0
-const p = /*#__PURE__*/ Promise.resolve()
+const p = /*@__PURE__*/ Promise.resolve()
 const getNow = () =>
   cachedNow || (p.then(() => (cachedNow = 0)), (cachedNow = Date.now()))
 
 function createInvoker(
   initialValue: EventValue,
-  instance: ComponentInternalInstance | null
+  instance: ComponentInternalInstance | null,
 ) {
   const invoker: Invoker = (e: Event & { _vts?: number }) => {
     // async edge case vuejs/vue#6566
@@ -108,7 +116,7 @@ function createInvoker(
       patchStopImmediatePropagation(e, invoker.value),
       instance,
       ErrorCodes.NATIVE_EVENT_HANDLER,
-      [e]
+      [e],
     )
   }
   invoker.value = initialValue
@@ -116,9 +124,20 @@ function createInvoker(
   return invoker
 }
 
+function sanitizeEventValue(value: unknown, propName: string): EventValue {
+  if (isFunction(value) || isArray(value)) {
+    return value as EventValue
+  }
+  warn(
+    `Wrong type passed as event handler to ${propName} - did you forget @ or : ` +
+      `in front of your prop?\nExpected function or array of functions, received type ${typeof value}.`,
+  )
+  return NOOP
+}
+
 function patchStopImmediatePropagation(
   e: Event,
-  value: EventValue
+  value: EventValue,
 ): EventValue {
   if (isArray(value)) {
     const originalStop = e.stopImmediatePropagation
@@ -126,7 +145,9 @@ function patchStopImmediatePropagation(
       originalStop.call(e)
       ;(e as any)._stopped = true
     }
-    return value.map(fn => (e: Event) => !(e as any)._stopped && fn && fn(e))
+    return (value as Function[]).map(
+      fn => (e: Event) => !(e as any)._stopped && fn && fn(e),
+    )
   } else {
     return value
   }
diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts
index cdf9d84cf..93d45c9e1 100644
--- a/packages/runtime-dom/src/modules/props.ts
+++ b/packages/runtime-dom/src/modules/props.ts
@@ -1,28 +1,23 @@
-// __UNSAFE__
-// Reason: potentially setting innerHTML.
-// This can come from explicit usage of v-html or innerHTML as a prop in render
-
-import { warn, DeprecationTypes, compatUtils } from '@vue/runtime-core'
+import { DeprecationTypes, compatUtils, warn } from '@vue/runtime-core'
 import { includeBooleanAttr } from '@vue/shared'
+import { unsafeToTrustedHTML } from '../nodeOps'
 
 // functions. The user is responsible for using them with only trusted content.
 export function patchDOMProp(
   el: any,
   key: string,
   value: any,
-  // the following args are passed only due to potential innerHTML/textContent
-  // overriding existing VNodes, in which case the old tree must be properly
-  // unmounted.
-  prevChildren: any,
   parentComponent: any,
-  parentSuspense: any,
-  unmountChildren: any
-) {
+): void {
+  // __UNSAFE__
+  // Reason: potentially setting innerHTML.
+  // This can come from explicit usage of v-html or innerHTML as a prop in render
   if (key === 'innerHTML' || key === 'textContent') {
-    if (prevChildren) {
-      unmountChildren(prevChildren, parentComponent, parentSuspense)
+    // null value case is handled in renderer patchElement before patching
+    // children
+    if (value != null) {
+      el[key] = key === 'innerHTML' ? unsafeToTrustedHTML(value) : value
     }
-    el[key] = value == null ? '' : value
     return
   }
 
@@ -34,19 +29,27 @@ export function patchDOMProp(
     // custom elements may use _value internally
     !tag.includes('-')
   ) {
-    // store value as _value as well since
-    // non-string values will be stringified.
-    el._value = value
     // #4956: <option> value will fallback to its text content so we need to
     // compare against its attribute value instead.
-    const oldValue = tag === 'OPTION' ? el.getAttribute('value') : el.value
-    const newValue = value == null ? '' : value
-    if (oldValue !== newValue) {
+    const oldValue =
+      tag === 'OPTION' ? el.getAttribute('value') || '' : el.value
+    const newValue =
+      value == null
+        ? // #11647: value should be set as empty string for null and undefined,
+          // but <input type="checkbox"> should be set as 'on'.
+          el.type === 'checkbox'
+          ? 'on'
+          : ''
+        : String(value)
+    if (oldValue !== newValue || !('_value' in el)) {
       el.value = newValue
     }
     if (value == null) {
       el.removeAttribute(key)
     }
+    // store value as _value as well since
+    // non-string values will be stringified.
+    el._value = value
     return
   }
 
@@ -71,7 +74,7 @@ export function patchDOMProp(
       value === false &&
       compatUtils.isCompatEnabled(
         DeprecationTypes.ATTR_FALSE_VALUE,
-        parentComponent
+        parentComponent,
       )
     ) {
       const type = typeof el[key]
@@ -80,7 +83,7 @@ export function patchDOMProp(
           compatUtils.warnDeprecation(
             DeprecationTypes.ATTR_FALSE_VALUE,
             parentComponent,
-            key
+            key,
           )
         value = type === 'number' ? 0 : ''
         needRemove = true
@@ -99,7 +102,7 @@ export function patchDOMProp(
       warn(
         `Failed setting prop "${key}" on <${tag.toLowerCase()}>: ` +
           `value ${value} is invalid.`,
-        e
+        e,
       )
     }
   }
diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
index c18fd8aa9..383628a6a 100644
--- a/packages/runtime-dom/src/modules/style.ts
+++ b/packages/runtime-dom/src/modules/style.ts
@@ -1,37 +1,65 @@
-import { isString, hyphenate, capitalize, isArray } from '@vue/shared'
+import { capitalize, hyphenate, isArray, isString } from '@vue/shared'
 import { camelize, warn } from '@vue/runtime-core'
-import { vShowOldKey } from '../directives/vShow'
+import {
+  type VShowElement,
+  vShowHidden,
+  vShowOriginalDisplay,
+} from '../directives/vShow'
+import { CSS_VAR_TEXT } from '../helpers/useCssVars'
 
 type Style = string | Record<string, string | string[]> | null
 
-export function patchStyle(el: Element, prev: Style, next: Style) {
+const displayRE = /(^|;)\s*display\s*:/
+
+export function patchStyle(el: Element, prev: Style, next: Style): void {
   const style = (el as HTMLElement).style
   const isCssString = isString(next)
+  let hasControlledDisplay = false
   if (next && !isCssString) {
-    if (prev && !isString(prev)) {
-      for (const key in prev) {
-        if (next[key] == null) {
-          setStyle(style, key, '')
+    if (prev) {
+      if (!isString(prev)) {
+        for (const key in prev) {
+          if (next[key] == null) {
+            setStyle(style, key, '')
+          }
+        }
+      } else {
+        for (const prevStyle of prev.split(';')) {
+          const key = prevStyle.slice(0, prevStyle.indexOf(':')).trim()
+          if (next[key] == null) {
+            setStyle(style, key, '')
+          }
         }
       }
     }
     for (const key in next) {
+      if (key === 'display') {
+        hasControlledDisplay = true
+      }
       setStyle(style, key, next[key])
     }
   } else {
-    const currentDisplay = style.display
     if (isCssString) {
       if (prev !== next) {
+        // #9821
+        const cssVarText = (style as any)[CSS_VAR_TEXT]
+        if (cssVarText) {
+          ;(next as string) += ';' + cssVarText
+        }
         style.cssText = next as string
+        hasControlledDisplay = displayRE.test(next)
       }
     } else if (prev) {
       el.removeAttribute('style')
     }
-    // indicates that the `display` of the element is controlled by `v-show`,
-    // so we always keep the current `display` value regardless of the `style`
-    // value, thus handing over control to `v-show`.
-    if (vShowOldKey in el) {
-      style.display = currentDisplay
+  }
+  // indicates the element also has `v-show`.
+  if (vShowOriginalDisplay in el) {
+    // make v-show respect the current v-bind style display when shown
+    el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : ''
+    // if v-show is in hidden state, v-show has higher priority
+    if ((el as VShowElement)[vShowHidden]) {
+      style.display = 'none'
     }
   }
 }
@@ -42,7 +70,7 @@ const importantRE = /\s*!important$/
 function setStyle(
   style: CSSStyleDeclaration,
   name: string,
-  val: string | string[]
+  val: string | string[],
 ) {
   if (isArray(val)) {
     val.forEach(v => setStyle(style, name, v))
@@ -51,7 +79,7 @@ function setStyle(
     if (__DEV__) {
       if (semicolonRE.test(val)) {
         warn(
-          `Unexpected semicolon at the end of '${name}' style value: '${val}'`
+          `Unexpected semicolon at the end of '${name}' style value: '${val}'`,
         )
       }
     }
@@ -65,7 +93,7 @@ function setStyle(
         style.setProperty(
           hyphenate(prefixed),
           val.replace(importantRE, ''),
-          'important'
+          'important',
         )
       } else {
         style[prefixed as any] = val
diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index daf56fc6f..70c610787 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -1,10 +1,45 @@
-import { RendererOptions } from '@vue/runtime-core'
+import { warn } from '@vue/runtime-core'
+import type { RendererOptions } from '@vue/runtime-core'
+import type {
+  TrustedHTML,
+  TrustedTypePolicy,
+  TrustedTypesWindow,
+} from 'trusted-types/lib'
+
+let policy: Pick<TrustedTypePolicy, 'name' | 'createHTML'> | undefined =
+  undefined
+
+const tt =
+  typeof window !== 'undefined' &&
+  (window as unknown as TrustedTypesWindow).trustedTypes
+
+if (tt) {
+  try {
+    policy = /*@__PURE__*/ tt.createPolicy('vue', {
+      createHTML: val => val,
+    })
+  } catch (e: unknown) {
+    // `createPolicy` throws a TypeError if the name is a duplicate
+    // and the CSP trusted-types directive is not using `allow-duplicates`.
+    // So we have to catch that error.
+    __DEV__ && warn(`Error creating trusted types policy: ${e}`)
+  }
+}
+
+// __UNSAFE__
+// Reason: potentially setting innerHTML.
+// This function merely perform a type-level trusted type conversion
+// for use in `innerHTML` assignment, etc.
+// Be careful of whatever value passed to this function.
+export const unsafeToTrustedHTML: (value: string) => TrustedHTML | string =
+  policy ? val => policy.createHTML(val) : val => val
 
 export const svgNS = 'http://www.w3.org/2000/svg'
+export const mathmlNS = 'http://www.w3.org/1998/Math/MathML'
 
 const doc = (typeof document !== 'undefined' ? document : null) as Document
 
-const templateContainer = doc && /*#__PURE__*/ doc.createElement('template')
+const templateContainer = doc && /*@__PURE__*/ doc.createElement('template')
 
 export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
   insert: (child, parent, anchor) => {
@@ -18,10 +53,15 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
     }
   },
 
-  createElement: (tag, isSVG, is, props): Element => {
-    const el = isSVG
-      ? doc.createElementNS(svgNS, tag)
-      : doc.createElement(tag, is ? { is } : undefined)
+  createElement: (tag, namespace, is, props): Element => {
+    const el =
+      namespace === 'svg'
+        ? doc.createElementNS(svgNS, tag)
+        : namespace === 'mathml'
+          ? doc.createElementNS(mathmlNS, tag)
+          : is
+            ? doc.createElement(tag, { is })
+            : doc.createElement(tag)
 
     if (tag === 'select' && props && props.multiple != null) {
       ;(el as HTMLSelectElement).setAttribute('multiple', props.multiple)
@@ -56,7 +96,7 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
   // Reason: innerHTML.
   // Static content here can only come from compiled templates.
   // As long as the user only uses trusted templates, this is safe.
-  insertStaticContent(content, parent, anchor, isSVG, start, end) {
+  insertStaticContent(content, parent, anchor, namespace, start, end) {
     // <parent> before | first ... last | anchor </parent>
     const before = anchor ? anchor.previousSibling : parent.lastChild
     // #5308 can only take cached path if:
@@ -70,10 +110,17 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
       }
     } else {
       // fresh insert
-      templateContainer.innerHTML = isSVG ? `<svg>${content}</svg>` : content
+      templateContainer.innerHTML = unsafeToTrustedHTML(
+        namespace === 'svg'
+          ? `<svg>${content}</svg>`
+          : namespace === 'mathml'
+            ? `<math>${content}</math>`
+            : content,
+      ) as string
+
       const template = templateContainer.content
-      if (isSVG) {
-        // remove outer svg wrapper
+      if (namespace === 'svg' || namespace === 'mathml') {
+        // remove outer svg/math wrapper
         const wrapper = template.firstChild!
         while (wrapper.firstChild) {
           template.appendChild(wrapper.firstChild)
@@ -86,7 +133,7 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
       // first
       before ? before.nextSibling! : parent.firstChild!,
       // last
-      anchor ? anchor.previousSibling! : parent.lastChild!
+      anchor ? anchor.previousSibling! : parent.lastChild!,
     ]
-  }
+  },
 }
diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index e5883d18f..5814e77c4 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -3,8 +3,15 @@ import { patchStyle } from './modules/style'
 import { patchAttr } from './modules/attrs'
 import { patchDOMProp } from './modules/props'
 import { patchEvent } from './modules/events'
-import { isOn, isString, isFunction, isModelListener } from '@vue/shared'
-import { RendererOptions } from '@vue/runtime-core'
+import {
+  camelize,
+  isFunction,
+  isModelListener,
+  isOn,
+  isString,
+} from '@vue/shared'
+import type { RendererOptions } from '@vue/runtime-core'
+import type { VueElement } from './apiCustomElement'
 
 const isNativeOn = (key: string) =>
   key.charCodeAt(0) === 111 /* o */ &&
@@ -20,12 +27,10 @@ export const patchProp: DOMRendererOptions['patchProp'] = (
   key,
   prevValue,
   nextValue,
-  isSVG = false,
-  prevChildren,
+  namespace,
   parentComponent,
-  parentSuspense,
-  unmountChildren
 ) => {
+  const isSVG = namespace === 'svg'
   if (key === 'class') {
     patchClass(el, nextValue, isSVG)
   } else if (key === 'style') {
@@ -42,15 +47,22 @@ export const patchProp: DOMRendererOptions['patchProp'] = (
         ? ((key = key.slice(1)), false)
         : shouldSetAsProp(el, key, nextValue, isSVG)
   ) {
-    patchDOMProp(
-      el,
-      key,
-      nextValue,
-      prevChildren,
-      parentComponent,
-      parentSuspense,
-      unmountChildren
-    )
+    patchDOMProp(el, key, nextValue, parentComponent)
+    // #6007 also set form state as attributes so they work with
+    // <input type="reset"> or libs / extensions that expect attributes
+    // #11163 custom elements may use value as an prop and set it as object
+    if (
+      !el.tagName.includes('-') &&
+      (key === 'value' || key === 'checked' || key === 'selected')
+    ) {
+      patchAttr(el, key, nextValue, isSVG, parentComponent, key !== 'value')
+    }
+  } else if (
+    // #11081 force set props for possible async custom element
+    (el as VueElement)._isVueCE &&
+    (/[A-Z]/.test(key) || !isString(nextValue))
+  ) {
+    patchDOMProp(el, camelize(key), nextValue, parentComponent)
   } else {
     // special case for <input v-model type="checkbox"> with
     // :true-value & :false-value
@@ -69,7 +81,7 @@ function shouldSetAsProp(
   el: Element,
   key: string,
   value: unknown,
-  isSVG: boolean
+  isSVG: boolean,
 ) {
   if (isSVG) {
     // most keys must be set as attribute on svg elements to work
@@ -110,15 +122,17 @@ function shouldSetAsProp(
     return false
   }
 
-  // #8780 the width or heigth of embedded tags must be set as attribute
+  // #8780 the width or height of embedded tags must be set as attribute
   if (key === 'width' || key === 'height') {
     const tag = el.tagName
-    return !(
+    if (
       tag === 'IMG' ||
       tag === 'VIDEO' ||
       tag === 'CANVAS' ||
       tag === 'SOURCE'
-    )
+    ) {
+      return false
+    }
   }
 
   // native onclick with string value, must be set as attribute
diff --git a/packages/runtime-test/README.md b/packages/runtime-test/README.md
index 6d6ba8298..6db8b810e 100644
--- a/packages/runtime-test/README.md
+++ b/packages/runtime-test/README.md
@@ -4,7 +4,7 @@ This is for Vue's own internal tests only - it ensures logic tested using this p
 
 It can also be used as a reference for implementing a custom renderer.
 
-``` js
+```js
 import { h, render, nodeOps, dumpOps } from '@vue/runtime-test'
 
 const App = {
diff --git a/packages/runtime-test/__tests__/testRuntime.spec.ts b/packages/runtime-test/__tests__/testRuntime.spec.ts
index b148e72a4..df8c77af0 100644
--- a/packages/runtime-test/__tests__/testRuntime.spec.ts
+++ b/packages/runtime-test/__tests__/testRuntime.spec.ts
@@ -1,18 +1,18 @@
 import {
-  h,
-  render,
-  nodeOps,
-  TestNodeTypes,
-  TestElement,
-  TestText,
-  ref,
-  reactive,
-  dumpOps,
-  resetOps,
   NodeOpTypes,
+  type TestElement,
+  TestNodeTypes,
+  type TestText,
+  dumpOps,
+  h,
   nextTick,
+  nodeOps,
+  reactive,
+  ref,
+  render,
+  resetOps,
   serialize,
-  triggerEvent
+  triggerEvent,
 } from '../src'
 
 describe('test renderer', () => {
@@ -22,11 +22,11 @@ describe('test renderer', () => {
       h(
         'div',
         {
-          id: 'test'
+          id: 'test',
         },
-        'hello'
+        'hello',
       ),
-      root
+      root,
     )
 
     expect(root.children.length).toBe(1)
@@ -44,7 +44,7 @@ describe('test renderer', () => {
   it('should record ops', async () => {
     const state = reactive({
       id: 'test',
-      text: 'hello'
+      text: 'hello',
     })
 
     const App = {
@@ -52,11 +52,11 @@ describe('test renderer', () => {
         return h(
           'div',
           {
-            id: state.id
+            id: state.id,
           },
-          state.text
+          state.text,
         )
-      }
+      },
     }
     const root = nodeOps.createElement('div')
 
@@ -70,13 +70,13 @@ describe('test renderer', () => {
       type: NodeOpTypes.CREATE,
       nodeType: TestNodeTypes.ELEMENT,
       tag: 'div',
-      targetNode: root.children[0]
+      targetNode: root.children[0],
     })
 
     expect(ops[1]).toEqual({
       type: NodeOpTypes.SET_ELEMENT_TEXT,
       text: 'hello',
-      targetNode: root.children[0]
+      targetNode: root.children[0],
     })
 
     expect(ops[2]).toEqual({
@@ -84,14 +84,14 @@ describe('test renderer', () => {
       targetNode: root.children[0],
       propKey: 'id',
       propPrevValue: null,
-      propNextValue: 'test'
+      propNextValue: 'test',
     })
 
     expect(ops[3]).toEqual({
       type: NodeOpTypes.INSERT,
       targetNode: root.children[0],
       parentNode: root,
-      refNode: null
+      refNode: null,
     })
 
     // test update ops
@@ -105,7 +105,7 @@ describe('test renderer', () => {
     expect(updateOps[0]).toEqual({
       type: NodeOpTypes.SET_ELEMENT_TEXT,
       targetNode: root.children[0],
-      text: 'bar'
+      text: 'bar',
     })
 
     expect(updateOps[1]).toEqual({
@@ -113,7 +113,7 @@ describe('test renderer', () => {
       targetNode: root.children[0],
       propKey: 'id',
       propPrevValue: 'test',
-      propNextValue: 'foo'
+      propNextValue: 'foo',
     })
   })
 
@@ -124,16 +124,16 @@ describe('test renderer', () => {
           'div',
           {
             id: 'test',
-            boolean: ''
+            boolean: '',
           },
-          [h('span', 'foo'), 'hello']
+          [h('span', 'foo'), 'hello'],
         )
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
     expect(serialize(root)).toEqual(
-      `<div><div id="test" boolean><span>foo</span>hello</div></div>`
+      `<div><div id="test" boolean><span>foo</span>hello</div></div>`,
     )
     // indented output
     expect(serialize(root, 2)).toEqual(
@@ -144,7 +144,7 @@ describe('test renderer', () => {
     </span>
     hello
   </div>
-</div>`
+</div>`,
     )
   })
 
@@ -157,9 +157,9 @@ describe('test renderer', () => {
         {
           onClick: () => {
             count.value++
-          }
+          },
         },
-        count.value
+        count.value,
       )
     }
 
@@ -185,10 +185,10 @@ describe('test renderer', () => {
             },
             () => {
               count2.value++
-            }
-          ]
+            },
+          ],
         },
-        `${count.value}, ${count2.value}`
+        `${count.value}, ${count2.value}`,
       )
     }
 
@@ -200,17 +200,4 @@ describe('test renderer', () => {
     await nextTick()
     expect(serialize(root)).toBe(`<div><span>1, 2</span></div>`)
   })
-
-  it('should mock warn', () => {
-    console.warn('warn!!!')
-    expect('warn!!!').toHaveBeenWarned()
-    expect('warn!!!').toHaveBeenWarnedTimes(1)
-
-    console.warn('warn!!!')
-    expect('warn!!!').toHaveBeenWarnedTimes(2)
-
-    console.warn('warning')
-    expect('warn!!!').toHaveBeenWarnedTimes(2)
-    expect('warning').toHaveBeenWarnedLast()
-  })
 })
diff --git a/packages/runtime-test/src/index.ts b/packages/runtime-test/src/index.ts
index e90d61192..b754509cb 100644
--- a/packages/runtime-test/src/index.ts
+++ b/packages/runtime-test/src/index.ts
@@ -1,23 +1,23 @@
 import {
+  type CreateAppFunction,
+  type RootRenderFunction,
+  type VNode,
   createRenderer,
-  VNode,
-  RootRenderFunction,
-  CreateAppFunction
 } from '@vue/runtime-core'
-import { nodeOps, TestElement } from './nodeOps'
+import { type TestElement, nodeOps } from './nodeOps'
 import { patchProp } from './patchProp'
 import { serializeInner } from './serialize'
 import { extend } from '@vue/shared'
 
 const { render: baseRender, createApp: baseCreateApp } = createRenderer(
-  extend({ patchProp }, nodeOps)
+  extend({ patchProp }, nodeOps),
 )
 
 export const render = baseRender as RootRenderFunction<TestElement>
 export const createApp = baseCreateApp as CreateAppFunction<TestElement>
 
 // convenience for one-off render validations
-export function renderToString(vnode: VNode) {
+export function renderToString(vnode: VNode): string {
   const root = nodeOps.createElement('div')
   render(vnode, root)
   return serializeInner(root)
diff --git a/packages/runtime-test/src/nodeOps.ts b/packages/runtime-test/src/nodeOps.ts
index a3a8012f2..933a0f73e 100644
--- a/packages/runtime-test/src/nodeOps.ts
+++ b/packages/runtime-test/src/nodeOps.ts
@@ -1,18 +1,18 @@
 import { markRaw } from '@vue/reactivity'
 
-export const enum TestNodeTypes {
+export enum TestNodeTypes {
   TEXT = 'text',
   ELEMENT = 'element',
-  COMMENT = 'comment'
+  COMMENT = 'comment',
 }
 
-export const enum NodeOpTypes {
+export enum NodeOpTypes {
   CREATE = 'create',
   INSERT = 'insert',
   REMOVE = 'remove',
   SET_TEXT = 'setText',
   SET_ELEMENT_TEXT = 'setElementText',
-  PATCH = 'patch'
+  PATCH = 'patch',
 }
 
 export interface TestElement {
@@ -57,11 +57,11 @@ export interface NodeOp {
 let nodeId: number = 0
 let recordedNodeOps: NodeOp[] = []
 
-export function logNodeOp(op: NodeOp) {
+export function logNodeOp(op: NodeOp): void {
   recordedNodeOps.push(op)
 }
 
-export function resetOps() {
+export function resetOps(): void {
   recordedNodeOps = []
 }
 
@@ -79,13 +79,13 @@ function createElement(tag: string): TestElement {
     children: [],
     props: {},
     parentNode: null,
-    eventListeners: null
+    eventListeners: null,
   }
   logNodeOp({
     type: NodeOpTypes.CREATE,
     nodeType: TestNodeTypes.ELEMENT,
     targetNode: node,
-    tag
+    tag,
   })
   // avoid test nodes from being observed
   markRaw(node)
@@ -97,13 +97,13 @@ function createText(text: string): TestText {
     id: nodeId++,
     type: TestNodeTypes.TEXT,
     text,
-    parentNode: null
+    parentNode: null,
   }
   logNodeOp({
     type: NodeOpTypes.CREATE,
     nodeType: TestNodeTypes.TEXT,
     targetNode: node,
-    text
+    text,
   })
   // avoid test nodes from being observed
   markRaw(node)
@@ -115,29 +115,33 @@ function createComment(text: string): TestComment {
     id: nodeId++,
     type: TestNodeTypes.COMMENT,
     text,
-    parentNode: null
+    parentNode: null,
   }
   logNodeOp({
     type: NodeOpTypes.CREATE,
     nodeType: TestNodeTypes.COMMENT,
     targetNode: node,
-    text
+    text,
   })
   // avoid test nodes from being observed
   markRaw(node)
   return node
 }
 
-function setText(node: TestText, text: string) {
+function setText(node: TestText, text: string): void {
   logNodeOp({
     type: NodeOpTypes.SET_TEXT,
     targetNode: node,
-    text
+    text,
   })
   node.text = text
 }
 
-function insert(child: TestNode, parent: TestElement, ref?: TestNode | null) {
+function insert(
+  child: TestNode,
+  parent: TestElement,
+  ref?: TestNode | null,
+): void {
   let refIndex
   if (ref) {
     refIndex = parent.children.indexOf(ref)
@@ -151,7 +155,7 @@ function insert(child: TestNode, parent: TestElement, ref?: TestNode | null) {
     type: NodeOpTypes.INSERT,
     targetNode: child,
     parentNode: parent,
-    refNode: ref
+    refNode: ref,
   })
   // remove the node first, but don't log it as a REMOVE op
   remove(child, false)
@@ -166,14 +170,14 @@ function insert(child: TestNode, parent: TestElement, ref?: TestNode | null) {
   }
 }
 
-function remove(child: TestNode, logOp = true) {
+function remove(child: TestNode, logOp = true): void {
   const parent = child.parentNode
   if (parent) {
     if (logOp) {
       logNodeOp({
         type: NodeOpTypes.REMOVE,
         targetNode: child,
-        parentNode: parent
+        parentNode: parent,
       })
     }
     const i = parent.children.indexOf(child)
@@ -188,11 +192,11 @@ function remove(child: TestNode, logOp = true) {
   }
 }
 
-function setElementText(el: TestElement, text: string) {
+function setElementText(el: TestElement, text: string): void {
   logNodeOp({
     type: NodeOpTypes.SET_ELEMENT_TEXT,
     targetNode: el,
-    text
+    text,
   })
   el.children.forEach(c => {
     c.parentNode = null
@@ -205,8 +209,8 @@ function setElementText(el: TestElement, text: string) {
         id: nodeId++,
         type: TestNodeTypes.TEXT,
         text,
-        parentNode: el
-      }
+        parentNode: el,
+      },
     ]
   }
 }
@@ -228,11 +232,23 @@ function querySelector(): never {
   throw new Error('querySelector not supported in test renderer.')
 }
 
-function setScopeId(el: TestElement, id: string) {
+function setScopeId(el: TestElement, id: string): void {
   el.props[id] = ''
 }
 
-export const nodeOps = {
+export const nodeOps: {
+  insert: typeof insert
+  remove: typeof remove
+  createElement: typeof createElement
+  createText: typeof createText
+  createComment: typeof createComment
+  setText: typeof setText
+  setElementText: typeof setElementText
+  parentNode: typeof parentNode
+  nextSibling: typeof nextSibling
+  querySelector: typeof querySelector
+  setScopeId: typeof setScopeId
+} = {
   insert,
   remove,
   createElement,
@@ -243,5 +259,5 @@ export const nodeOps = {
   parentNode,
   nextSibling,
   querySelector,
-  setScopeId
+  setScopeId,
 }
diff --git a/packages/runtime-test/src/patchProp.ts b/packages/runtime-test/src/patchProp.ts
index 3ebc64d1b..8b4479b8d 100644
--- a/packages/runtime-test/src/patchProp.ts
+++ b/packages/runtime-test/src/patchProp.ts
@@ -1,18 +1,18 @@
-import { TestElement, logNodeOp, NodeOpTypes } from './nodeOps'
+import { NodeOpTypes, type TestElement, logNodeOp } from './nodeOps'
 import { isOn } from '@vue/shared'
 
 export function patchProp(
   el: TestElement,
   key: string,
   prevValue: any,
-  nextValue: any
-) {
+  nextValue: any,
+): void {
   logNodeOp({
     type: NodeOpTypes.PATCH,
     targetNode: el,
     propKey: key,
     propPrevValue: prevValue,
-    propNextValue: nextValue
+    propNextValue: nextValue,
   })
   el.props[key] = nextValue
   if (isOn(key)) {
diff --git a/packages/runtime-test/src/serialize.ts b/packages/runtime-test/src/serialize.ts
index 8b16c9993..87efa6cd9 100644
--- a/packages/runtime-test/src/serialize.ts
+++ b/packages/runtime-test/src/serialize.ts
@@ -1,16 +1,16 @@
 import {
-  TestElement,
-  TestNode,
+  type TestComment,
+  type TestElement,
+  type TestNode,
   TestNodeTypes,
-  TestText,
-  TestComment
+  type TestText,
 } from './nodeOps'
 import { isOn } from '@vue/shared'
 
 export function serialize(
   node: TestNode,
   indent: number = 0,
-  depth: number = 0
+  depth: number = 0,
 ): string {
   if (node.type === TestNodeTypes.ELEMENT) {
     return serializeElement(node, indent, depth)
@@ -22,8 +22,8 @@ export function serialize(
 export function serializeInner(
   node: TestElement,
   indent: number = 0,
-  depth: number = 0
-) {
+  depth: number = 0,
+): string {
   const newLine = indent ? `\n` : ``
   return node.children.length
     ? newLine +
@@ -35,7 +35,7 @@ export function serializeInner(
 function serializeElement(
   node: TestElement,
   indent: number,
-  depth: number
+  depth: number,
 ): string {
   const props = Object.keys(node.props)
     .map(key => {
@@ -59,7 +59,7 @@ function serializeElement(
 function serializeText(
   node: TestText | TestComment,
   indent: number,
-  depth: number
+  depth: number,
 ): string {
   const padding = indent ? ` `.repeat(indent).repeat(depth) : ``
   return (
diff --git a/packages/runtime-test/src/triggerEvent.ts b/packages/runtime-test/src/triggerEvent.ts
index 89ee71f20..4b037d62a 100644
--- a/packages/runtime-test/src/triggerEvent.ts
+++ b/packages/runtime-test/src/triggerEvent.ts
@@ -1,11 +1,11 @@
 import { isArray } from '@vue/shared'
-import { TestElement } from './nodeOps'
+import type { TestElement } from './nodeOps'
 
 export function triggerEvent(
   el: TestElement,
   event: string,
-  payload: any[] = []
-) {
+  payload: any[] = [],
+): void {
   const { eventListeners } = el
   if (eventListeners) {
     const listener = eventListeners[event]
diff --git a/packages/server-renderer/README.md b/packages/server-renderer/README.md
index 4188fc93f..55323e429 100644
--- a/packages/server-renderer/README.md
+++ b/packages/server-renderer/README.md
@@ -11,7 +11,7 @@
 ```ts
 function renderToString(
   input: App | VNode,
-  context?: SSRContext
+  context?: SSRContext,
 ): Promise<string>
 ```
 
@@ -23,7 +23,7 @@ const { renderToString } = require('@vue/server-renderer')
 
 const app = createSSRApp({
   data: () => ({ msg: 'hello' }),
-  template: `<div>{{ msg }}</div>`
+  template: `<div>{{ msg }}</div>`,
 })
 
 ;(async () => {
@@ -74,7 +74,7 @@ Render and pipe to an existing [Node.js Writable stream](https://nodejs.org/api/
 function pipeToNodeWritable(
   input: App | VNode,
   context: SSRContext = {},
-  writable: Writable
+  writable: Writable,
 ): void
 ```
 
@@ -94,7 +94,7 @@ Renders input as a [Web ReadableStream](https://developer.mozilla.org/en-US/docs
 ```ts
 function renderToWebStream(
   input: App | VNode,
-  context?: SSRContext
+  context?: SSRContext,
 ): ReadableStream
 ```
 
@@ -117,7 +117,7 @@ Render and pipe to an existing [Web WritableStream](https://developer.mozilla.or
 function pipeToWebWritable(
   input: App | VNode,
   context: SSRContext = {},
-  writable: WritableStream
+  writable: WritableStream,
 ): void
 ```
 
@@ -144,7 +144,7 @@ Renders input in streaming mode using a simple readable interface.
 function renderToSimpleStream(
   input: App | VNode,
   context: SSRContext,
-  options: SimpleReadable
+  options: SimpleReadable,
 ): SimpleReadable
 
 interface SimpleReadable {
@@ -172,7 +172,7 @@ renderToSimpleStream(
     },
     destroy(err) {
       // error encountered
-    }
-  }
+    },
+  },
 )
 ```
diff --git a/packages/server-renderer/__tests__/createBuffer.bench.ts b/packages/server-renderer/__tests__/createBuffer.bench.ts
new file mode 100644
index 000000000..fff20f927
--- /dev/null
+++ b/packages/server-renderer/__tests__/createBuffer.bench.ts
@@ -0,0 +1,65 @@
+import { bench, describe } from 'vitest'
+
+import { createBuffer } from '../src/render'
+
+describe('createBuffer', () => {
+  let stringBuffer = createBuffer()
+
+  bench(
+    'string only',
+    () => {
+      for (let i = 0; i < 10; i += 1) {
+        stringBuffer.push('hello')
+      }
+    },
+    {
+      setup() {
+        stringBuffer = createBuffer()
+      },
+    },
+  )
+
+  let stringNestedBuffer = createBuffer()
+
+  bench(
+    'string with nested',
+    () => {
+      for (let i = 0; i < 10; i += 1) {
+        if (i % 3 === 0) {
+          stringNestedBuffer.push('hello')
+        } else {
+          const buffer = createBuffer()
+          buffer.push('hello')
+          stringNestedBuffer.push(buffer.getBuffer())
+        }
+      }
+    },
+    {
+      setup() {
+        stringNestedBuffer = createBuffer()
+      },
+    },
+  )
+
+  bench(
+    'string with nested async',
+    () => {
+      for (let i = 0; i < 10; i += 1) {
+        if (i % 3 === 0) {
+          const buffer = createBuffer()
+          buffer.push('hello')
+          stringNestedBuffer.push(Promise.resolve(buffer.getBuffer()))
+        } else {
+          const buffer = createBuffer()
+          buffer.push('hello')
+          stringNestedBuffer.push(buffer.getBuffer())
+        }
+      }
+    },
+    {
+      setup() {
+        stringNestedBuffer = createBuffer()
+      },
+    },
+  )
+})
diff --git a/packages/server-renderer/__tests__/render.spec.ts b/packages/server-renderer/__tests__/render.spec.ts
index 1899c7670..d0a5223b2 100644
--- a/packages/server-renderer/__tests__/render.spec.ts
+++ b/packages/server-renderer/__tests__/render.spec.ts
@@ -1,33 +1,33 @@
 import {
-  createApp,
-  h,
-  createCommentVNode,
-  resolveComponent,
-  ComponentOptions,
-  ref,
-  defineComponent,
-  createTextVNode,
-  createStaticVNode,
-  withCtx,
+  type ComponentOptions,
   KeepAlive,
   Transition,
-  watchEffect,
+  computed,
+  createApp,
+  createCommentVNode,
+  createSSRApp,
+  createStaticVNode,
+  createTextVNode,
   createVNode,
-  resolveDynamicComponent,
-  renderSlot,
+  defineComponent,
+  getCurrentInstance,
+  h,
   onErrorCaptured,
   onServerPrefetch,
-  getCurrentInstance,
   reactive,
-  computed,
-  createSSRApp
+  ref,
+  renderSlot,
+  resolveComponent,
+  resolveDynamicComponent,
+  watchEffect,
+  withCtx,
 } from 'vue'
 import { escapeHtml } from '@vue/shared'
 import { renderToString } from '../src/renderToString'
-import { renderToNodeStream, pipeToNodeWritable } from '../src/renderToStream'
-import { ssrRenderSlot, SSRSlot } from '../src/helpers/ssrRenderSlot'
+import { pipeToNodeWritable, renderToNodeStream } from '../src/renderToStream'
+import { type SSRSlot, ssrRenderSlot } from '../src/helpers/ssrRenderSlot'
 import { ssrRenderComponent } from '../src/helpers/ssrRenderComponent'
-import { Readable, Transform } from 'stream'
+import { type Readable, Transform } from 'node:stream'
 import { ssrRenderVNode } from '../src'
 
 const promisifyStream = (stream: Readable) => {
@@ -54,7 +54,7 @@ const pipeToWritable = (app: any, context?: any) => {
     transform(data, _encoding, cb) {
       this.push(data)
       cb()
-    }
+    },
   })
   pipeToNodeWritable(app, context, stream)
   return promisifyStream(stream)
@@ -72,15 +72,27 @@ function testRender(type: string, render: typeof renderToString) {
         render() {
           const Foo = resolveComponent('foo') as ComponentOptions
           return h(Foo)
-        }
+        },
       })
       app.component('foo', {
-        render: () => h('div', 'foo')
+        render: () => h('div', 'foo'),
       })
       const html = await render(app)
       expect(html).toBe(`<div>foo</div>`)
     })
 
+    test('warnings should be suppressed by app.config.warnHandler', async () => {
+      const app = createApp({
+        render() {
+          return h('div', this.foo)
+        },
+      })
+      app.config.warnHandler = vi.fn()
+      await render(app)
+      expect('not defined on instance').not.toHaveBeenWarned()
+      expect(app.config.warnHandler).toHaveBeenCalledTimes(1)
+    })
+
     describe('components', () => {
       test('vnode components', async () => {
         expect(
@@ -91,9 +103,9 @@ function testRender(type: string, render: typeof renderToString) {
               },
               render(this: any) {
                 return h('div', this.msg)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -104,9 +116,9 @@ function testRender(type: string, render: typeof renderToString) {
               setup() {
                 const msg = ref('hello')
                 return () => h('div', msg.value)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -117,9 +129,9 @@ function testRender(type: string, render: typeof renderToString) {
               defineComponent(() => {
                 const msg = ref('hello')
                 return () => h('div', msg.value)
-              })
-            )
-          )
+              }),
+            ),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -134,11 +146,11 @@ function testRender(type: string, render: typeof renderToString) {
                   },
                   render() {
                     return h('div', this.msg)
-                  }
-                })
-              })
-            )
-          )
+                  },
+                }),
+              }),
+            ),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -154,12 +166,12 @@ function testRender(type: string, render: typeof renderToString) {
                     },
                     render() {
                       return h('div', this.msg)
-                    }
-                  })
-                ]
-              })
-            )
-          )
+                    },
+                  }),
+                ],
+              }),
+            ),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -172,9 +184,9 @@ function testRender(type: string, render: typeof renderToString) {
               },
               ssrRender(ctx, push) {
                 push(`<div>${ctx.msg}</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -183,7 +195,7 @@ function testRender(type: string, render: typeof renderToString) {
           props: ['msg'],
           render(this: any) {
             return h('div', this.msg)
-          }
+          },
         }
 
         expect(
@@ -191,9 +203,9 @@ function testRender(type: string, render: typeof renderToString) {
             createApp({
               render() {
                 return h('div', ['parent', h(Child, { msg: 'hello' })])
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>parent<div>hello</div></div>`)
       })
 
@@ -202,7 +214,7 @@ function testRender(type: string, render: typeof renderToString) {
           props: ['msg'],
           ssrRender(ctx: any, push: any) {
             push(`<div>${ctx.msg}</div>`)
-          }
+          },
         }
 
         expect(
@@ -212,19 +224,19 @@ function testRender(type: string, render: typeof renderToString) {
                 push(`<div>parent`)
                 push(ssrRenderComponent(Child, { msg: 'hello' }, null, parent))
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>parent<div>hello</div></div>`)
       })
 
       test('nested template components', async () => {
         const Child = {
           props: ['msg'],
-          template: `<div>{{ msg }}</div>`
+          template: `<div>{{ msg }}</div>`,
         }
         const app = createApp({
-          template: `<div>parent<Child msg="hello" /></div>`
+          template: `<div>parent<Child msg="hello" /></div>`,
         })
         app.component('Child', Child)
 
@@ -233,19 +245,19 @@ function testRender(type: string, render: typeof renderToString) {
 
       test('template components with dynamic class attribute after static', async () => {
         const app = createApp({
-          template: `<div><div class="child" :class="'dynamic'"></div></div>`
+          template: `<div><div class="child" :class="'dynamic'"></div></div>`,
         })
         expect(await render(app)).toBe(
-          `<div><div class="dynamic child"></div></div>`
+          `<div><div class="dynamic child"></div></div>`,
         )
       })
 
       test('template components with dynamic class attribute before static', async () => {
         const app = createApp({
-          template: `<div><div :class="'dynamic'" class="child"></div></div>`
+          template: `<div><div :class="'dynamic'" class="child"></div></div>`,
         })
         expect(await render(app)).toBe(
-          `<div><div class="dynamic child"></div></div>`
+          `<div><div class="dynamic child"></div></div>`,
         )
       })
 
@@ -254,19 +266,19 @@ function testRender(type: string, render: typeof renderToString) {
           props: ['msg'],
           ssrRender(ctx: any, push: any) {
             push(`<div>${ctx.msg}</div>`)
-          }
+          },
         }
 
         const VNodeChild = {
           props: ['msg'],
           render(this: any) {
             return h('div', this.msg)
-          }
+          },
         }
 
         const TemplateChild = {
           props: ['msg'],
-          template: `<div>{{ msg }}</div>`
+          template: `<div>{{ msg }}</div>`,
         }
 
         expect(
@@ -279,26 +291,31 @@ function testRender(type: string, render: typeof renderToString) {
                     OptimizedChild,
                     { msg: 'opt' },
                     null,
-                    parent
-                  )
+                    parent,
+                  ),
                 )
                 push(
-                  ssrRenderComponent(VNodeChild, { msg: 'vnode' }, null, parent)
+                  ssrRenderComponent(
+                    VNodeChild,
+                    { msg: 'vnode' },
+                    null,
+                    parent,
+                  ),
                 )
                 push(
                   ssrRenderComponent(
                     TemplateChild,
                     { msg: 'template' },
                     null,
-                    parent
-                  )
+                    parent,
+                  ),
                 )
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(
-          `<div>parent<div>opt</div><div>vnode</div><div>template</div></div>`
+          `<div>parent<div>opt</div><div>vnode</div><div>template</div></div>`,
         )
       })
 
@@ -307,12 +324,12 @@ function testRender(type: string, render: typeof renderToString) {
           // should wait for resolved render context from setup()
           async setup() {
             return {
-              msg: 'hello'
+              msg: 'hello',
             }
           },
           ssrRender(ctx: any, push: any) {
             push(`<div>${ctx.msg}</div>`)
-          }
+          },
         }
 
         expect(
@@ -322,9 +339,9 @@ function testRender(type: string, render: typeof renderToString) {
                 push(`<div>parent`)
                 push(ssrRenderComponent(Child, null, null, parent))
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>parent<div>hello</div></div>`)
       })
 
@@ -333,24 +350,24 @@ function testRender(type: string, render: typeof renderToString) {
           props: ['msg'],
           async setup(props: any) {
             return {
-              localMsg: props.msg + '!'
+              localMsg: props.msg + '!',
             }
           },
           ssrRender(ctx: any, push: any) {
             push(`<div>${ctx.localMsg}</div>`)
-          }
+          },
         }
 
         const VNodeChild = {
           props: ['msg'],
           async setup(props: any) {
             return {
-              localMsg: props.msg + '!'
+              localMsg: props.msg + '!',
             }
           },
           render(this: any) {
             return h('div', this.localMsg)
-          }
+          },
         }
 
         expect(
@@ -363,16 +380,21 @@ function testRender(type: string, render: typeof renderToString) {
                     OptimizedChild,
                     { msg: 'opt' },
                     null,
-                    parent
-                  )
+                    parent,
+                  ),
                 )
                 push(
-                  ssrRenderComponent(VNodeChild, { msg: 'vnode' }, null, parent)
+                  ssrRenderComponent(
+                    VNodeChild,
+                    { msg: 'vnode' },
+                    null,
+                    parent,
+                  ),
                 )
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>parent<div>opt!</div><div>vnode!</div></div>`)
       })
     })
@@ -391,10 +413,10 @@ function testRender(type: string, render: typeof renderToString) {
                 push(`fallback`)
               },
               push,
-              parent
+              parent,
             )
             push(`</div>`)
-          }
+          },
         }
 
         expect(
@@ -412,19 +434,19 @@ function testRender(type: string, render: typeof renderToString) {
                         push(`<span>${msg}</span>`)
                       }) as SSRSlot,
                       // important to avoid slots being normalized
-                      _: 1 as any
+                      _: 1 as any,
                     },
-                    parent
-                  )
+                    parent,
+                  ),
                 )
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(
           `<div>parent<div class="child">` +
             `<!--[--><span>from slot</span><!--]-->` +
-            `</div></div>`
+            `</div></div>`,
         )
 
         // test fallback
@@ -435,11 +457,11 @@ function testRender(type: string, render: typeof renderToString) {
                 push(`<div>parent`)
                 push(ssrRenderComponent(Child, { msg: 'hello' }, null, parent))
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(
-          `<div>parent<div class="child"><!--[-->fallback<!--]--></div></div>`
+          `<div>parent<div class="child"><!--[-->fallback<!--]--></div></div>`,
         )
       })
 
@@ -454,10 +476,10 @@ function testRender(type: string, render: typeof renderToString) {
               { msg: 'from slot' },
               null,
               push,
-              parent
+              parent,
             )
             push(`</div>`)
-          }
+          },
         }
 
         expect(
@@ -473,37 +495,37 @@ function testRender(type: string, render: typeof renderToString) {
                       // bailed slots returning raw vnodes
                       default: ({ msg }: any) => {
                         return h('span', msg)
-                      }
+                      },
                     },
-                    parent
-                  )
+                    parent,
+                  ),
                 )
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(
           `<div>parent<div class="child">` +
             `<!--[--><span>from slot</span><!--]-->` +
-            `</div></div>`
+            `</div></div>`,
         )
       })
 
       test('nested components with template slots', async () => {
         const Child = {
           props: ['msg'],
-          template: `<div class="child"><slot msg="from slot"></slot></div>`
+          template: `<div class="child"><slot msg="from slot"></slot></div>`,
         }
 
         const app = createApp({
           components: { Child },
-          template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`
+          template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`,
         })
 
         expect(await render(app)).toBe(
           `<div>parent<div class="child">` +
             `<!--[--><span>from slot</span><!--]-->` +
-            `</div></div>`
+            `</div></div>`,
         )
       })
 
@@ -514,15 +536,15 @@ function testRender(type: string, render: typeof renderToString) {
             return h(
               'div',
               {
-                class: 'child'
+                class: 'child',
               },
-              this.$slots.default({ msg: 'from slot' })
+              this.$slots.default({ msg: 'from slot' }),
             )
-          }
+          },
         }
 
         const app = createApp({
-          template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`
+          template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`,
         })
         app.component('Child', Child)
 
@@ -530,69 +552,69 @@ function testRender(type: string, render: typeof renderToString) {
           `<div>parent<div class="child">` +
             // no comment anchors because slot is used directly as element children
             `<span>from slot</span>` +
-            `</div></div>`
+            `</div></div>`,
         )
       })
 
       test('template slots forwarding', async () => {
         const Child = {
-          template: `<div><slot/></div>`
+          template: `<div><slot/></div>`,
         }
 
         const Parent = {
           components: { Child },
-          template: `<Child><slot/></Child>`
+          template: `<Child><slot/></Child>`,
         }
 
         const app = createApp({
           components: { Parent },
-          template: `<Parent>hello</Parent>`
+          template: `<Parent>hello</Parent>`,
         })
 
         expect(await render(app)).toBe(
-          `<div><!--[--><!--[-->hello<!--]--><!--]--></div>`
+          `<div><!--[--><!--[-->hello<!--]--><!--]--></div>`,
         )
       })
 
       test('template slots forwarding, empty slot', async () => {
         const Child = {
-          template: `<div><slot/></div>`
+          template: `<div><slot/></div>`,
         }
 
         const Parent = {
           components: { Child },
-          template: `<Child><slot/></Child>`
+          template: `<Child><slot/></Child>`,
         }
 
         const app = createApp({
           components: { Parent },
-          template: `<Parent></Parent>`
+          template: `<Parent></Parent>`,
         })
 
         expect(await render(app)).toBe(
           // should only have a single fragment
-          `<div><!--[--><!--]--></div>`
+          `<div><!--[--><!--]--></div>`,
         )
       })
 
       test('template slots forwarding, empty slot w/ fallback', async () => {
         const Child = {
-          template: `<div><slot>fallback</slot></div>`
+          template: `<div><slot>fallback</slot></div>`,
         }
 
         const Parent = {
           components: { Child },
-          template: `<Child><slot/></Child>`
+          template: `<Child><slot/></Child>`,
         }
 
         const app = createApp({
           components: { Parent },
-          template: `<Parent></Parent>`
+          template: `<Parent></Parent>`,
         })
 
         expect(await render(app)).toBe(
           // should only have a single fragment
-          `<div><!--[-->fallback<!--]--></div>`
+          `<div><!--[-->fallback<!--]--></div>`,
         )
       })
     })
@@ -600,7 +622,9 @@ function testRender(type: string, render: typeof renderToString) {
     describe('vnode element', () => {
       test('props', async () => {
         expect(
-          await render(h('div', { id: 'foo&', class: ['bar', 'baz'] }, 'hello'))
+          await render(
+            h('div', { id: 'foo&', class: ['bar', 'baz'] }, 'hello'),
+          ),
         ).toBe(`<div id="foo&amp;" class="bar baz">hello</div>`)
       })
 
@@ -615,11 +639,11 @@ function testRender(type: string, render: typeof renderToString) {
               'foo',
               h('span', 'bar'),
               [h('span', 'baz')],
-              createCommentVNode('qux')
-            ])
-          )
+              createCommentVNode('qux'),
+            ]),
+          ),
         ).toBe(
-          `<div>foo<span>bar</span><!--[--><span>baz</span><!--]--><!--qux--></div>`
+          `<div>foo<span>bar</span><!--[--><span>baz</span><!--]--><!--qux--></div>`,
         )
       })
 
@@ -633,11 +657,11 @@ function testRender(type: string, render: typeof renderToString) {
             h(
               'div',
               {
-                innerHTML: `<span>hello</span>`
+                innerHTML: `<span>hello</span>`,
               },
-              'ignored'
-            )
-          )
+              'ignored',
+            ),
+          ),
         ).toBe(`<div><span>hello</span></div>`)
       })
 
@@ -647,11 +671,11 @@ function testRender(type: string, render: typeof renderToString) {
             h(
               'div',
               {
-                textContent: `<span>hello</span>`
+                textContent: `<span>hello</span>`,
               },
-              'ignored'
-            )
-          )
+              'ignored',
+            ),
+          ),
         ).toBe(`<div>${escapeHtml(`<span>hello</span>`)}</div>`)
       })
 
@@ -661,11 +685,11 @@ function testRender(type: string, render: typeof renderToString) {
             h(
               'textarea',
               {
-                value: `<span>hello</span>`
+                value: `<span>hello</span>`,
               },
-              'ignored'
-            )
-          )
+              'ignored',
+            ),
+          ),
         ).toBe(`<textarea>${escapeHtml(`<span>hello</span>`)}</textarea>`)
       })
     })
@@ -673,17 +697,17 @@ function testRender(type: string, render: typeof renderToString) {
     describe('vnode component', () => {
       test('KeepAlive', async () => {
         const MyComp = {
-          render: () => h('p', 'hello')
+          render: () => h('p', 'hello'),
         }
         expect(await render(h(KeepAlive, () => h(MyComp)))).toBe(`<p>hello</p>`)
       })
 
       test('Transition', async () => {
         const MyComp = {
-          render: () => h('p', 'hello')
+          render: () => h('p', 'hello'),
         }
         expect(await render(h(Transition, () => h(MyComp)))).toBe(
-          `<p>hello</p>`
+          `<p>hello</p>`,
         )
       })
     })
@@ -691,7 +715,7 @@ function testRender(type: string, render: typeof renderToString) {
     describe('raw vnode types', () => {
       test('Text', async () => {
         expect(await render(createTextVNode('hello <div>'))).toBe(
-          `hello &lt;div&gt;`
+          `hello &lt;div&gt;`,
         )
       })
 
@@ -703,9 +727,9 @@ function testRender(type: string, render: typeof renderToString) {
               createCommentVNode('>foo'),
               createCommentVNode('->foo'),
               createCommentVNode('<!--foo-->'),
-              createCommentVNode('--!>foo<!-')
-            ])
-          )
+              createCommentVNode('--!>foo<!-'),
+            ]),
+          ),
         ).toBe(`<div><!--foo--><!--foo--><!--foo--><!--foo--></div>`)
       })
 
@@ -724,7 +748,7 @@ function testRender(type: string, render: typeof renderToString) {
           __scopeId: 'data-v-test',
           render() {
             return h('div')
-          }
+          },
         }
         expect(await render(h(Foo))).toBe(`<div data-v-test></div>`)
       })
@@ -734,22 +758,22 @@ function testRender(type: string, render: typeof renderToString) {
           __scopeId: 'data-v-child',
           render: function (this: any) {
             return h('div', null, [renderSlot(this.$slots, 'default')])
-          }
+          },
         }
 
         const Parent = {
           __scopeId: 'data-v-test',
           render: () => {
             return h(Child, null, {
-              default: withCtx(() => [h('span', 'slot')])
+              default: withCtx(() => [h('span', 'slot')]),
             })
-          }
+          },
         }
 
         expect(await render(h(Parent))).toBe(
           `<div data-v-child data-v-test>` +
             `<!--[--><span data-v-test data-v-child-s>slot</span><!--]-->` +
-            `</div>`
+            `</div>`,
         )
       })
     })
@@ -762,20 +786,20 @@ function testRender(type: string, render: typeof renderToString) {
               data() {
                 return { msg: 'hello' }
               },
-              template: `<div>{{ msg }}</div>`
-            })
-          )
+              template: `<div>{{ msg }}</div>`,
+            }),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
       test('handle compiler errors', async () => {
         await render(
           // render different content since compilation is cached
-          createApp({ template: `<div>${type}</` })
+          createApp({ template: `<div>${type}</` }),
         )
 
         expect(
-          `Template compilation error: Unexpected EOF in tag.`
+          `Template compilation error: Unexpected EOF in tag.`,
         ).toHaveBeenWarned()
         expect(`Element is missing end tag`).toHaveBeenWarned()
       })
@@ -790,8 +814,8 @@ function testRender(type: string, render: typeof renderToString) {
               data() {
                 return { msg: null }
               },
-              template: `<div>{{ msg.text }}</div>`
-            })
+              template: `<div>{{ msg.text }}</div>`,
+            }),
           )
         } catch {}
         expect(getCurrentInstance()).toBe(prev)
@@ -807,8 +831,8 @@ function testRender(type: string, render: typeof renderToString) {
               data() {
                 throw new Error()
               },
-              template: `<div>hello</div>`
-            })
+              template: `<div>hello</div>`,
+            }),
           )
         } catch {}
         expect(getCurrentInstance()).toBe(null)
@@ -824,7 +848,7 @@ function testRender(type: string, render: typeof renderToString) {
       const Child = {
         created() {
           throw new Error()
-        }
+        },
       }
       try {
         await render(
@@ -832,12 +856,12 @@ function testRender(type: string, render: typeof renderToString) {
             errorCaptured() {
               throw new Error()
             },
-            render: () => h(Child)
-          })
+            render: () => h(Child),
+          }),
         )
       } catch {}
       expect(
-        'Unhandled error during execution of errorCaptured hook'
+        'Unhandled error during execution of errorCaptured hook',
       ).toHaveBeenWarned()
       expect(getCurrentInstance()).toBe(null)
     })
@@ -847,7 +871,7 @@ function testRender(type: string, render: typeof renderToString) {
       const app = createApp({
         data() {
           return {
-            msg: ''
+            msg: '',
           }
         },
         async serverPrefetch() {
@@ -855,7 +879,27 @@ function testRender(type: string, render: typeof renderToString) {
         },
         render() {
           return h('div', this.msg)
-        }
+        },
+      })
+      const html = await render(app)
+      expect(html).toBe(`<div>hello</div>`)
+    })
+
+    test('serverPrefetch w/ async setup', async () => {
+      const msg = Promise.resolve('hello')
+      const app = createApp({
+        data() {
+          return {
+            msg: '',
+          }
+        },
+        async serverPrefetch() {
+          this.msg = await msg
+        },
+        render() {
+          return h('div', this.msg)
+        },
+        async setup() {},
       })
       const html = await render(app)
       expect(html).toBe(`<div>hello</div>`)
@@ -870,17 +914,17 @@ function testRender(type: string, render: typeof renderToString) {
         async setup() {
           return Promise.reject('async child error')
         },
-        template: `<div>asyncChildren</div>`
+        template: `<div>asyncChildren</div>`,
       })
       const app = createApp({
         name: 'App',
         components: {
-          asyncChildren
+          asyncChildren,
         },
         template: `<div class="app"><async-children /></div>`,
         errorCaptured(error) {
           fn(error)
-        }
+        },
       })
 
       app.config.errorHandler = error => {
@@ -904,7 +948,7 @@ function testRender(type: string, render: typeof renderToString) {
         setup: () => {
           watchEffect(onInvalidate => onInvalidate(noop))
         },
-        render: noop
+        render: noop,
       })
       expect(await render(app)).toBe('<!---->')
     })
@@ -918,11 +962,11 @@ function testRender(type: string, render: typeof renderToString) {
               A: {
                 ssrRender(_ctx, _push) {
                   _push(`<div>A</div>`)
-                }
+                },
               },
               B: {
-                render: () => h('div', 'B')
-              }
+                render: () => h('div', 'B'),
+              },
             },
             ssrRender(_ctx, _push, _parent) {
               const A: any = resolveComponent('A')
@@ -930,11 +974,11 @@ function testRender(type: string, render: typeof renderToString) {
               ssrRenderVNode(
                 _push,
                 createVNode(resolveDynamicComponent('B'), null, null),
-                _parent
+                _parent,
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<div>A</div><div>B</div>`)
     })
 
@@ -947,12 +991,12 @@ function testRender(type: string, render: typeof renderToString) {
             message.value = await msg
           })
           return {
-            message
+            message,
           }
         },
         render() {
           return h('div', this.message)
-        }
+        },
       })
       const html = await render(app)
       expect(html).toBe(`<div>hello</div>`)
@@ -979,12 +1023,12 @@ function testRender(type: string, render: typeof renderToString) {
           return {
             message,
             message2,
-            message3
+            message3,
           }
         },
         render() {
           return h('div', `${this.message} ${this.message2} ${this.message3}`)
-        }
+        },
       })
       const html = await render(app)
       expect(html).toBe(`<div>hello hi bonjour</div>`)
@@ -1010,7 +1054,7 @@ function testRender(type: string, render: typeof renderToString) {
         },
         render() {
           return h('div', '')
-        }
+        },
       })
       await render(app)
       expect(first).toHaveBeenCalled()
@@ -1025,7 +1069,7 @@ function testRender(type: string, render: typeof renderToString) {
       const app = createApp({
         data() {
           return {
-            message: ''
+            message: '',
           }
         },
 
@@ -1039,12 +1083,12 @@ function testRender(type: string, render: typeof renderToString) {
             message2.value = await msg2
           })
           return {
-            message2
+            message2,
           }
         },
         render() {
           return h('div', `${this.message} ${this.message2}`)
-        }
+        },
       })
       const html = await render(app)
       expect(html).toBe(`<div>hello hi</div>`)
@@ -1055,19 +1099,19 @@ function testRender(type: string, render: typeof renderToString) {
       const app = createApp({
         data() {
           return {
-            msg: ''
+            msg: '',
           }
         },
         mixins: [
           {
             async serverPrefetch() {
               this.msg = await msg
-            }
-          }
+            },
+          },
         ],
         render() {
           return h('div', this.msg)
-        }
+        },
       })
       const html = await render(app)
       expect(html).toBe(`<div>hello</div>`)
@@ -1082,27 +1126,27 @@ function testRender(type: string, render: typeof renderToString) {
           return {
             foo: '',
             bar: '',
-            baz: ''
+            baz: '',
           }
         },
         mixins: [
           {
             async serverPrefetch() {
               this.foo = await foo
-            }
+            },
           },
           {
             async serverPrefetch() {
               this.bar = await bar
-            }
-          }
+            },
+          },
         ],
         async serverPrefetch() {
           this.baz = await baz
         },
         render() {
           return h('div', `${this.foo}${this.bar}${this.baz}`)
-        }
+        },
       })
       const html = await render(app)
       expect(html).toBe(`<div>foobarbaz</div>`)
@@ -1120,7 +1164,7 @@ function testRender(type: string, render: typeof renderToString) {
         },
         render() {
           return h('span')
-        }
+        },
       }
 
       const app = createApp({
@@ -1132,7 +1176,7 @@ function testRender(type: string, render: typeof renderToString) {
         },
         render() {
           return h('div', h(Child))
-        }
+        },
       })
 
       try {
@@ -1152,7 +1196,7 @@ function testRender(type: string, render: typeof renderToString) {
         // pretend to fetch some data from an api
         async fetchData() {
           this.state.items = ['hello', 'world']
-        }
+        },
       }
 
       const getterSpy = vi.fn()
diff --git a/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts b/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
index fb974f979..e8cfa75e7 100644
--- a/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
+++ b/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
@@ -4,11 +4,11 @@ import { renderToString } from '../src/renderToString'
 describe('ssr: attr fallthrough', () => {
   test('basic', async () => {
     const Child = {
-      template: `<div class="foo" />`
+      template: `<div class="foo" />`,
     }
     const Parent = {
       components: { Child },
-      template: `<child class="bar"/>`
+      template: `<child class="bar"/>`,
     }
     const app = createApp(Parent)
     expect(await renderToString(app)).toBe(`<div class="foo bar"></div>`)
@@ -17,62 +17,62 @@ describe('ssr: attr fallthrough', () => {
   test('with v-if', async () => {
     const Child = {
       props: ['ok'],
-      template: `<div v-if="ok" class="foo" /><span v-else />`
+      template: `<div v-if="ok" class="foo" /><span v-else />`,
     }
     const Parent = {
       props: ['ok'],
       components: { Child },
-      template: `<child :ok="ok" class="bar"/>`
+      template: `<child :ok="ok" class="bar"/>`,
     }
     expect(await renderToString(createApp(Parent, { ok: true }))).toBe(
-      `<div class="foo bar"></div>`
+      `<div class="foo bar"></div>`,
     )
     expect(await renderToString(createApp(Parent, { ok: false }))).toBe(
-      `<span class="bar"></span>`
+      `<span class="bar"></span>`,
     )
   })
 
   test('with v-model', async () => {
     const Child = {
       props: ['text'],
-      template: `<input v-model="text">`
+      template: `<input v-model="text">`,
     }
     const Parent = {
       components: { Child },
-      template: `<child text="hello" class="bar"/>`
+      template: `<child text="hello" class="bar"/>`,
     }
     expect(await renderToString(createApp(Parent))).toBe(
-      `<input class="bar" value="hello">`
+      `<input class="bar" value="hello">`,
     )
   })
 
   test('with v-bind', async () => {
     const Child = {
       props: ['obj'],
-      template: `<div v-bind="obj" />`
+      template: `<div v-bind="obj" />`,
     }
     const Parent = {
       components: { Child },
-      template: `<child :obj="{ class: 'foo' }" class="bar"/>`
+      template: `<child :obj="{ class: 'foo' }" class="bar"/>`,
     }
     expect(await renderToString(createApp(Parent))).toBe(
-      `<div class="foo bar"></div>`
+      `<div class="foo bar"></div>`,
     )
   })
 
   test('nested fallthrough', async () => {
     const Child = {
       props: ['id'],
-      template: `<div :id="id"></div>`
+      template: `<div :id="id"></div>`,
     }
     const Parent = {
       components: { Child },
-      template: `<child id="foo" class="bar"/>`
+      template: `<child id="foo" class="bar"/>`,
     }
     // pass to parent, fallthrough to child and merge
     const app = createApp(Parent, { class: 'baz' })
     expect(await renderToString(app)).toBe(
-      `<div id="foo" class="bar baz"></div>`
+      `<div id="foo" class="bar baz"></div>`,
     )
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrCompilerOptions.spec.ts b/packages/server-renderer/__tests__/ssrCompilerOptions.spec.ts
index 34fcd4ef4..ce5f6233e 100644
--- a/packages/server-renderer/__tests__/ssrCompilerOptions.spec.ts
+++ b/packages/server-renderer/__tests__/ssrCompilerOptions.spec.ts
@@ -4,7 +4,7 @@ import { renderToString } from '../src/renderToString'
 describe('ssr: compiler options', () => {
   test('config.isCustomElement (deprecated)', async () => {
     const app = createApp({
-      template: `<div><x-button/></div>`
+      template: `<div><x-button/></div>`,
     })
     app.config.isCustomElement = tag => tag.startsWith('x-')
     expect(await renderToString(app)).toBe(`<div><x-button></x-button></div>`)
@@ -12,7 +12,7 @@ describe('ssr: compiler options', () => {
 
   test('config.compilerOptions.isCustomElement', async () => {
     const app = createApp({
-      template: `<div><x-panel/></div>`
+      template: `<div><x-panel/></div>`,
     })
     app.config.compilerOptions.isCustomElement = tag => tag.startsWith('x-')
     expect(await renderToString(app)).toBe(`<div><x-panel></x-panel></div>`)
@@ -22,31 +22,31 @@ describe('ssr: compiler options', () => {
     const app = createApp({
       template: `<div><x-card/><y-child/></div>`,
       compilerOptions: {
-        isCustomElement: (tag: string) => tag.startsWith('x-')
+        isCustomElement: (tag: string) => tag.startsWith('x-'),
       },
       components: {
         YChild: {
-          template: `<div><y-button/></div>`
-        }
-      }
+          template: `<div><y-button/></div>`,
+        },
+      },
     })
     app.config.compilerOptions.isCustomElement = tag => tag.startsWith('y-')
     expect(await renderToString(app)).toBe(
-      `<div><x-card></x-card><div><y-button></y-button></div></div>`
+      `<div><x-card></x-card><div><y-button></y-button></div></div>`,
     )
   })
 
   test('component.delimiters (deprecated)', async () => {
     const app = createApp({
       template: `<div>[[ 1 + 1 ]]</div>`,
-      delimiters: ['[[', ']]']
+      delimiters: ['[[', ']]'],
     })
     expect(await renderToString(app)).toBe(`<div>2</div>`)
   })
 
   test('config.compilerOptions.delimiters', async () => {
     const app = createApp({
-      template: `<div>[( 1 + 1 )]</div>`
+      template: `<div>[( 1 + 1 )]</div>`,
     })
     app.config.compilerOptions.delimiters = ['[(', ')]']
     expect(await renderToString(app)).toBe(`<div>2</div>`)
@@ -56,13 +56,13 @@ describe('ssr: compiler options', () => {
     const app = createApp({
       template: `<div>[[ 1 + 1 ]]<ChildComponent/></div>`,
       compilerOptions: {
-        delimiters: ['[[', ']]']
+        delimiters: ['[[', ']]'],
       },
       components: {
         ChildComponent: {
-          template: `<div>(( 2 + 2 ))</div>`
-        }
-      }
+          template: `<div>(( 2 + 2 ))</div>`,
+        },
+      },
     })
     app.config.compilerOptions.delimiters = ['((', '))']
     expect(await renderToString(app)).toBe(`<div>2<div>4</div></div>`)
@@ -72,17 +72,17 @@ describe('ssr: compiler options', () => {
     const app = createApp({
       template: `<div><span>Hello   world</span><ChildComponent/></div>`,
       compilerOptions: {
-        whitespace: 'condense'
+        whitespace: 'condense',
       },
       components: {
         ChildComponent: {
-          template: `<span>Hello   world</span>`
-        }
-      }
+          template: `<span>Hello   world</span>`,
+        },
+      },
     })
     app.config.compilerOptions.whitespace = 'preserve'
     expect(await renderToString(app)).toBe(
-      `<div><span>Hello world</span><span>Hello   world</span></div>`
+      `<div><span>Hello world</span><span>Hello   world</span></div>`,
     )
   })
 
@@ -93,24 +93,24 @@ describe('ssr: compiler options', () => {
       template: `<div><ChildOne/><ChildTwo/><ChildThree/></div>`,
       components: {
         ChildOne: {
-          template
+          template,
         },
         ChildTwo: {
           template,
           compilerOptions: {
-            whitespace: 'preserve'
-          }
+            whitespace: 'preserve',
+          },
         },
         ChildThree: {
           template,
           compilerOptions: {
-            delimiters: ['[[', ']]']
-          }
-        }
-      }
+            delimiters: ['[[', ']]'],
+          },
+        },
+      },
     })
     expect(await renderToString(app)).toBe(
-      `<div><div>2 [[1 + 1]]</div><div>2   [[1 + 1]]</div><div>{{1 + 1}} 2</div></div>`
+      `<div><div>2 [[1 + 1]]</div><div>2   [[1 + 1]]</div><div>{{1 + 1}} 2</div></div>`,
     )
   })
 
@@ -124,21 +124,21 @@ describe('ssr: compiler options', () => {
         MyChild: {
           template,
           compilerOptions: {
-            isCustomElement: tag => tag.startsWith('x-')
+            isCustomElement: tag => tag.startsWith('x-'),
           },
           components: {
             MyChild: {
               template,
               compilerOptions: {
-                isCustomElement: tag => tag.startsWith('My')
-              }
-            }
-          }
-        }
-      }
+                isCustomElement: tag => tag.startsWith('My'),
+              },
+            },
+          },
+        },
+      },
     })
     expect(await renderToString(app)).toBe(
-      `<div><div><div><MyChild></MyChild></div></div></div>`
+      `<div><div><div><MyChild></MyChild></div></div></div>`,
     )
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrComputed.spec.ts b/packages/server-renderer/__tests__/ssrComputed.spec.ts
index 52b45a636..bf0800ff2 100644
--- a/packages/server-renderer/__tests__/ssrComputed.spec.ts
+++ b/packages/server-renderer/__tests__/ssrComputed.spec.ts
@@ -1,4 +1,4 @@
-import { createSSRApp, defineComponent, h, computed, reactive } from 'vue'
+import { computed, createSSRApp, defineComponent, h, reactive, ref } from 'vue'
 import { renderToString } from '../src/renderToString'
 
 // #5208 reported memory leak of keeping computed alive during SSR
@@ -17,7 +17,7 @@ test('computed reactivity during SSR', async () => {
     // pretend to fetch some data from an api
     async fetchData() {
       this.state.items = ['hello', 'world']
-    }
+    },
   }
 
   const getterSpy = vi.fn()
@@ -45,3 +45,23 @@ test('computed reactivity during SSR', async () => {
   // during the render phase
   expect(getterSpy).toHaveBeenCalledTimes(2)
 })
+
+// although we technically shouldn't allow state mutation during render,
+// it does sometimes happen
+test('computed mutation during render', async () => {
+  const App = defineComponent(async () => {
+    const n = ref(0)
+    const m = computed(() => n.value + 1)
+
+    m.value // force non-dirty
+
+    return () => {
+      n.value++
+      return h('div', null, `value: ${m.value}`)
+    }
+  })
+
+  const app = createSSRApp(App)
+  const html = await renderToString(app)
+  expect(html).toMatch('value: 2')
+})
diff --git a/packages/server-renderer/__tests__/ssrDirectives.spec.ts b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
index e52ef2db6..dfdebe971 100644
--- a/packages/server-renderer/__tests__/ssrDirectives.spec.ts
+++ b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
@@ -2,13 +2,16 @@ import { renderToString } from '../src/renderToString'
 import {
   createApp,
   h,
-  withDirectives,
-  vShow,
-  vModelText,
-  vModelRadio,
+  mergeProps,
+  ref,
+  resolveDirective,
+  unref,
   vModelCheckbox,
   vModelDynamic,
-  resolveDirective
+  vModelRadio,
+  vModelText,
+  vShow,
+  withDirectives,
 } from 'vue'
 import { ssrGetDirectiveProps, ssrRenderAttrs } from '../src'
 
@@ -18,17 +21,17 @@ describe('ssr: directives', () => {
       expect(
         await renderToString(
           createApp({
-            template: `<div v-show="true"/>`
-          })
-        )
+            template: `<div v-show="true"/>`,
+          }),
+        ),
       ).toBe(`<div style=""></div>`)
 
       expect(
         await renderToString(
           createApp({
-            template: `<div v-show="false"/>`
-          })
-        )
+            template: `<div v-show="false"/>`,
+          }),
+        ),
       ).toBe(`<div style="display:none;"></div>`)
     })
 
@@ -36,9 +39,9 @@ describe('ssr: directives', () => {
       expect(
         await renderToString(
           createApp({
-            template: `<div style="color:red" v-show="false"/>`
-          })
-        )
+            template: `<div style="color:red" v-show="false"/>`,
+          }),
+        ),
       ).toBe(`<div style="color:red;display:none;"></div>`)
     })
 
@@ -47,9 +50,9 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ style: { color: 'red' } }),
-            template: `<div :style="style" v-show="false"/>`
-          })
-        )
+            template: `<div :style="style" v-show="false"/>`,
+          }),
+        ),
       ).toBe(`<div style="color:red;display:none;"></div>`)
     })
 
@@ -58,9 +61,9 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ style: { color: 'red' } }),
-            template: `<div :style="style" style="font-size:12;" v-show="false"/>`
-          })
-        )
+            template: `<div :style="style" style="font-size:12;" v-show="false"/>`,
+          }),
+        ),
       ).toBe(`<div style="color:red;font-size:12;display:none;"></div>`)
     })
   })
@@ -71,9 +74,9 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ text: 'hello' }),
-            template: `<input v-model="text">`
-          })
-        )
+            template: `<input v-model="text">`,
+          }),
+        ),
       ).toBe(`<input value="hello">`)
     })
 
@@ -82,18 +85,18 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ selected: 'foo' }),
-            template: `<input type="radio" value="foo" v-model="selected">`
-          })
-        )
+            template: `<input type="radio" value="foo" v-model="selected">`,
+          }),
+        ),
       ).toBe(`<input type="radio" value="foo" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ selected: 'foo' }),
-            template: `<input type="radio" value="bar" v-model="selected">`
-          })
-        )
+            template: `<input type="radio" value="bar" v-model="selected">`,
+          }),
+        ),
       ).toBe(`<input type="radio" value="bar">`)
 
       // non-string values
@@ -101,9 +104,9 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ selected: 'foo' }),
-            template: `<input type="radio" :value="{}" v-model="selected">`
-          })
-        )
+            template: `<input type="radio" :value="{}" v-model="selected">`,
+          }),
+        ),
       ).toBe(`<input type="radio">`)
     })
 
@@ -112,22 +115,22 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ model: 1 }),
-            template: `<select v-model="model"><option value="0"></option><option value="1"></option></select>`
-          })
-        )
+            template: `<select v-model="model"><option value="0"></option><option value="1"></option></select>`,
+          }),
+        ),
       ).toBe(
-        `<select><option value="0"></option><option value="1" selected></option></select>`
+        `<select><option value="0"></option><option value="1" selected></option></select>`,
       )
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ model: [0, 1] }),
-            template: `<select multiple v-model="model"><option value="0"></option><option value="1"></option></select>`
-          })
-        )
+            template: `<select multiple v-model="model"><option value="0"></option><option value="1"></option></select>`,
+          }),
+        ),
       ).toBe(
-        `<select multiple><option value="0" selected></option><option value="1" selected></option></select>`
+        `<select multiple><option value="0" selected></option><option value="1" selected></option></select>`,
       )
     })
 
@@ -136,36 +139,36 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ checked: true }),
-            template: `<input type="checkbox" v-model="checked">`
-          })
-        )
+            template: `<input type="checkbox" v-model="checked">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ checked: false }),
-            template: `<input type="checkbox" v-model="checked">`
-          })
-        )
+            template: `<input type="checkbox" v-model="checked">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox">`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ checked: ['foo'] }),
-            template: `<input type="checkbox" value="foo" v-model="checked">`
-          })
-        )
+            template: `<input type="checkbox" value="foo" v-model="checked">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ checked: [] }),
-            template: `<input type="checkbox" value="foo" v-model="checked">`
-          })
-        )
+            template: `<input type="checkbox" value="foo" v-model="checked">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo">`)
     })
 
@@ -174,9 +177,9 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ foo: 'hello' }),
-            template: `<textarea v-model="foo"/>`
-          })
-        )
+            template: `<textarea v-model="foo"/>`,
+          }),
+        ),
       ).toBe(`<textarea>hello</textarea>`)
     })
 
@@ -185,63 +188,63 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ type: 'text', model: 'hello' }),
-            template: `<input :type="type" v-model="model">`
-          })
-        )
+            template: `<input :type="type" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="text" value="hello">`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'checkbox', model: true }),
-            template: `<input :type="type" v-model="model">`
-          })
-        )
+            template: `<input :type="type" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'checkbox', model: false }),
-            template: `<input :type="type" v-model="model">`
-          })
-        )
+            template: `<input :type="type" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox">`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'checkbox', model: ['hello'] }),
-            template: `<input :type="type" value="hello" v-model="model">`
-          })
-        )
+            template: `<input :type="type" value="hello" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="hello" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'checkbox', model: [] }),
-            template: `<input :type="type" value="hello" v-model="model">`
-          })
-        )
+            template: `<input :type="type" value="hello" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="hello">`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'radio', model: 'hello' }),
-            template: `<input :type="type" value="hello" v-model="model">`
-          })
-        )
+            template: `<input :type="type" value="hello" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'radio', model: 'hello' }),
-            template: `<input :type="type" value="bar" v-model="model">`
-          })
-        )
+            template: `<input :type="type" value="bar" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="radio" value="bar">`)
     })
 
@@ -251,11 +254,11 @@ describe('ssr: directives', () => {
           createApp({
             data: () => ({
               obj: { type: 'radio', value: 'hello' },
-              model: 'hello'
+              model: 'hello',
             }),
-            template: `<input v-bind="obj" v-model="model">`
-          })
-        )
+            template: `<input v-bind="obj" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello" checked>`)
     })
   })
@@ -267,9 +270,9 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('div'), [[vShow, true]])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<div></div>`)
 
       expect(
@@ -277,9 +280,9 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('div'), [[vShow, false]])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<div style="display:none;"></div>`)
     })
 
@@ -291,14 +294,14 @@ describe('ssr: directives', () => {
               return withDirectives(
                 h('div', {
                   style: {
-                    color: 'red'
-                  }
+                    color: 'red',
+                  },
                 }),
-                [[vShow, false]]
+                [[vShow, false]],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<div style="color:red;display:none;"></div>`)
     })
   })
@@ -310,9 +313,9 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input'), [[vModelText, 'hello']])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input value="hello">`)
     })
 
@@ -323,11 +326,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'radio', value: 'hello' }),
-                [[vModelRadio, 'hello']]
+                [[vModelRadio, 'hello']],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello" checked>`)
 
       expect(
@@ -336,11 +339,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'radio', value: 'hello' }),
-                [[vModelRadio, 'foo']]
+                [[vModelRadio, 'foo']],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello">`)
     })
 
@@ -350,11 +353,11 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input', { type: 'checkbox' }), [
-                [vModelCheckbox, true]
+                [vModelCheckbox, true],
               ])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" checked>`)
 
       expect(
@@ -362,11 +365,11 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input', { type: 'checkbox' }), [
-                [vModelCheckbox, false]
+                [vModelCheckbox, false],
               ])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox">`)
 
       expect(
@@ -375,11 +378,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'checkbox', value: 'foo' }),
-                [[vModelCheckbox, ['foo']]]
+                [[vModelCheckbox, ['foo']]],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo" checked>`)
 
       expect(
@@ -388,11 +391,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'checkbox', value: 'foo' }),
-                [[vModelCheckbox, []]]
+                [[vModelCheckbox, []]],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo">`)
     })
   })
@@ -404,9 +407,9 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input'), [[vModelDynamic, 'hello']])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input value="hello">`)
     })
 
@@ -417,11 +420,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'radio', value: 'hello' }),
-                [[vModelDynamic, 'hello']]
+                [[vModelDynamic, 'hello']],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello" checked>`)
 
       expect(
@@ -430,11 +433,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'radio', value: 'hello' }),
-                [[vModelDynamic, 'foo']]
+                [[vModelDynamic, 'foo']],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello">`)
     })
 
@@ -444,11 +447,11 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input', { type: 'checkbox' }), [
-                [vModelDynamic, true]
+                [vModelDynamic, true],
               ])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" checked>`)
 
       expect(
@@ -456,11 +459,11 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input', { type: 'checkbox' }), [
-                [vModelDynamic, false]
+                [vModelDynamic, false],
               ])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox">`)
 
       expect(
@@ -469,11 +472,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'checkbox', value: 'foo' }),
-                [[vModelDynamic, ['foo']]]
+                [[vModelDynamic, ['foo']]],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo" checked>`)
 
       expect(
@@ -482,11 +485,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'checkbox', value: 'foo' }),
-                [[vModelDynamic, []]]
+                [[vModelDynamic, []]],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo">`)
     })
   })
@@ -501,14 +504,14 @@ describe('ssr: directives', () => {
                 {
                   getSSRProps({ value }) {
                     return { id: value }
-                  }
+                  },
                 },
-                'foo'
-              ]
+                'foo',
+              ],
             ])
-          }
-        })
-      )
+          },
+        }),
+      ),
     ).toBe(`<div id="foo"></div>`)
   })
 
@@ -518,28 +521,68 @@ describe('ssr: directives', () => {
         createApp({
           data() {
             return {
-              x: 'foo'
+              x: 'foo',
             }
           },
           directives: {
             xxx: {
               getSSRProps({ value, arg, modifiers }) {
                 return { id: [value, arg, modifiers.ok].join('-') }
-              }
-            }
+              },
+            },
           },
           ssrRender(_ctx, _push, _parent, _attrs) {
             const _directive_xxx = resolveDirective('xxx')!
             _push(
               `<div${ssrRenderAttrs(
                 ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.x, 'arg', {
-                  ok: true
-                })
-              )}></div>`
+                  ok: true,
+                }),
+              )}></div>`,
             )
-          }
-        })
-      )
+          },
+        }),
+      ),
     ).toBe(`<div id="foo-arg-true"></div>`)
   })
+
+  // #7499
+  test('custom directive w/ getSSRProps (expose)', async () => {
+    let exposeVars: null | string | undefined = null
+    const useTestDirective = () => ({
+      vTest: {
+        getSSRProps({ instance }: any) {
+          if (instance) {
+            exposeVars = instance.x
+          }
+          return { id: exposeVars }
+        },
+      },
+    })
+    const { vTest } = useTestDirective()
+
+    const renderString = await renderToString(
+      createApp({
+        setup(props, { expose }) {
+          const x = ref('foo')
+          expose({ x })
+          const __returned__ = { useTestDirective, vTest, ref, x }
+          Object.defineProperty(__returned__, '__isScriptSetup', {
+            enumerable: false,
+            value: true,
+          })
+          return __returned__
+        },
+        ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(
+            `<div${ssrRenderAttrs(
+              mergeProps(_attrs!, ssrGetDirectiveProps(_ctx, unref(vTest))),
+            )}></div>`,
+          )
+        },
+      }),
+    )
+    expect(renderString).toBe(`<div id="foo"></div>`)
+    expect(exposeVars).toBe('foo')
+  })
 })
diff --git a/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts b/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
index dff16c781..0679c8216 100644
--- a/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
+++ b/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
@@ -1,5 +1,5 @@
 import { createApp, createVNode } from 'vue'
-import { renderToString } from '../src/renderToString'
+import { renderToString } from '../src'
 
 describe('ssr: dynamic component', () => {
   test('resolved to component', async () => {
@@ -8,41 +8,58 @@ describe('ssr: dynamic component', () => {
         createApp({
           components: {
             one: {
-              template: `<div><slot/></div>`
-            }
+              template: `<div><slot/></div>`,
+            },
           },
-          template: `<component :is="'one'"><span>slot</span></component>`
-        })
-      )
+          template: `<component :is="'one'"><span>slot</span></component>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><span>slot</span><!--]--></div>`)
   })
 
+  test('resolved to component with v-show', async () => {
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            one: {
+              template: `<component is="div"><slot/></component>`,
+            },
+          },
+          template: `<one><one v-show="false">hi</one></one>`,
+        }),
+      ),
+    ).toBe(
+      `<div><!--[--><div style=\"display:none;\"><!--[-->hi<!--]--></div><!--]--></div>`,
+    )
+  })
+
   test('resolve to element', async () => {
     expect(
       await renderToString(
         createApp({
-          template: `<component :is="'p'"><span>slot</span></component>`
-        })
-      )
+          template: `<component :is="'p'"><span>slot</span></component>`,
+        }),
+      ),
     ).toBe(`<p><span>slot</span></p>`)
   })
 
   test('resolve to component vnode', async () => {
     const Child = {
       props: ['id'],
-      template: `<div>{{ id }}<slot/></div>`
+      template: `<div>{{ id }}<slot/></div>`,
     }
     expect(
       await renderToString(
         createApp({
           setup() {
             return {
-              vnode: createVNode(Child, { id: 'test' })
+              vnode: createVNode(Child, { id: 'test' }),
             }
           },
-          template: `<component :is="vnode"><span>slot</span></component>`
-        })
-      )
+          template: `<component :is="vnode"><span>slot</span></component>`,
+        }),
+      ),
     ).toBe(`<div>test<!--[--><span>slot</span><!--]--></div>`)
   })
 
@@ -52,12 +69,12 @@ describe('ssr: dynamic component', () => {
         createApp({
           setup() {
             return {
-              vnode: createVNode('div', { id: 'test' })
+              vnode: createVNode('div', { id: 'test' }),
             }
           },
-          template: `<component :is="vnode"><span>slot</span></component>`
-        })
-      )
+          template: `<component :is="vnode"><span>slot</span></component>`,
+        }),
+      ),
     ).toBe(`<div id="test"><span>slot</span></div>`)
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrInterpolate.spec.ts b/packages/server-renderer/__tests__/ssrInterpolate.spec.ts
index fc9a4a3b4..11177c84a 100644
--- a/packages/server-renderer/__tests__/ssrInterpolate.spec.ts
+++ b/packages/server-renderer/__tests__/ssrInterpolate.spec.ts
@@ -7,23 +7,23 @@ test('ssr: interpolate', () => {
   expect(ssrInterpolate(`<div>`)).toBe(`&lt;div&gt;`)
   // should escape interpolated values
   expect(ssrInterpolate([1, 2, 3])).toBe(
-    escapeHtml(JSON.stringify([1, 2, 3], null, 2))
+    escapeHtml(JSON.stringify([1, 2, 3], null, 2)),
   )
   expect(
     ssrInterpolate({
       foo: 1,
-      bar: `<div>`
-    })
+      bar: `<div>`,
+    }),
   ).toBe(
     escapeHtml(
       JSON.stringify(
         {
           foo: 1,
-          bar: `<div>`
+          bar: `<div>`,
         },
         null,
-        2
-      )
-    )
+        2,
+      ),
+    ),
   )
 })
diff --git a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
index 2439c3514..9f33866e5 100644
--- a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
+++ b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
@@ -1,8 +1,8 @@
 import {
+  ssrRenderAttr,
   ssrRenderAttrs,
   ssrRenderClass,
   ssrRenderStyle,
-  ssrRenderAttr
 } from '../src/helpers/ssrRenderAttrs'
 import { escapeHtml } from '@vue/shared'
 
@@ -14,8 +14,8 @@ describe('ssr: renderAttrs', () => {
         ref_key: 'foo',
         ref_for: 'bar',
         ref: () => {},
-        onClick: () => {}
-      })
+        onClick: () => {},
+      }),
     ).toBe('')
   })
 
@@ -23,24 +23,24 @@ describe('ssr: renderAttrs', () => {
     expect(
       ssrRenderAttrs({
         id: 'foo',
-        title: 'bar'
-      })
+        title: 'bar',
+      }),
     ).toBe(` id="foo" title="bar"`)
   })
 
   test('empty value attrs', () => {
     expect(
       ssrRenderAttrs({
-        'data-v-abc': ''
-      })
+        'data-v-abc': '',
+      }),
     ).toBe(` data-v-abc`)
   })
 
   test('escape attrs', () => {
     expect(
       ssrRenderAttrs({
-        id: '"><script'
-      })
+        id: '"><script',
+      }),
     ).toBe(` id="&quot;&gt;&lt;script"`)
   })
 
@@ -50,8 +50,8 @@ describe('ssr: renderAttrs', () => {
         checked: true,
         multiple: false,
         readonly: 0,
-        disabled: ''
-      })
+        disabled: '',
+      }),
     ).toBe(` checked disabled`) // boolean attr w/ false should be ignored
   })
 
@@ -60,8 +60,8 @@ describe('ssr: renderAttrs', () => {
       ssrRenderAttrs({
         foo: false,
         title: null,
-        baz: undefined
-      })
+        baz: undefined,
+      }),
     ).toBe(` foo="false"`) // non boolean should render `false` as is
   })
 
@@ -70,8 +70,8 @@ describe('ssr: renderAttrs', () => {
       ssrRenderAttrs({
         foo: {},
         bar: [],
-        baz: () => {}
-      })
+        baz: () => {},
+      }),
     ).toBe(``)
   })
 
@@ -79,8 +79,8 @@ describe('ssr: renderAttrs', () => {
     expect(
       ssrRenderAttrs({
         readOnly: true, // simple lower case conversion
-        htmlFor: 'foobar' // special cases
-      })
+        htmlFor: 'foobar', // special cases
+      }),
     ).toBe(` readonly for="foobar"`)
   })
 
@@ -88,10 +88,10 @@ describe('ssr: renderAttrs', () => {
     expect(
       ssrRenderAttrs(
         {
-          fooBar: 'ok'
+          fooBar: 'ok',
         },
-        'my-el'
-      )
+        'my-el',
+      ),
     ).toBe(` fooBar="ok"`)
   })
 
@@ -99,10 +99,10 @@ describe('ssr: renderAttrs', () => {
     expect(
       ssrRenderAttrs(
         {
-          viewBox: 'foo'
+          viewBox: 'foo',
         },
-        'svg'
-      )
+        'svg',
+      ),
     ).toBe(` viewBox="foo"`)
   })
 })
@@ -119,7 +119,7 @@ describe('ssr: renderAttr', () => {
 
   test('escape', () => {
     expect(ssrRenderAttr('foo', '<script>')).toBe(
-      ` foo="${escapeHtml(`<script>`)}"`
+      ` foo="${escapeHtml(`<script>`)}"`,
     )
   })
 })
@@ -128,8 +128,8 @@ describe('ssr: renderClass', () => {
   test('via renderProps', () => {
     expect(
       ssrRenderAttrs({
-        class: ['foo', 'bar']
-      })
+        class: ['foo', 'bar'],
+      }),
     ).toBe(` class="foo bar"`)
   })
 
@@ -143,6 +143,19 @@ describe('ssr: renderClass', () => {
   test('escape class values', () => {
     expect(ssrRenderClass(`"><script`)).toBe(`&quot;&gt;&lt;script`)
   })
+
+  test('className', () => {
+    expect(
+      ssrRenderAttrs({
+        className: 'foo',
+      }),
+    ).toBe(` class="foo"`)
+    expect(
+      ssrRenderAttrs({
+        className: ['foo', 'bar'],
+      }),
+    ).toBe(` class="foo,bar"`)
+  })
 })
 
 describe('ssr: renderStyle', () => {
@@ -152,9 +165,9 @@ describe('ssr: renderStyle', () => {
         style: {
           color: 'red',
           '--a': 2,
-          '-webkit-line-clamp': 1
-        }
-      })
+          '-webkit-line-clamp': 1,
+        },
+      }),
     ).toBe(` style="color:red;--a:2;-webkit-line-clamp:1;"`)
   })
 
@@ -162,14 +175,14 @@ describe('ssr: renderStyle', () => {
     expect(ssrRenderStyle(`color:red`)).toBe(`color:red`)
     expect(
       ssrRenderStyle({
-        color: `red`
-      })
+        color: `red`,
+      }),
     ).toBe(`color:red;`)
     expect(
       ssrRenderStyle([
         { color: `red` },
-        { fontSize: `15px` } // case conversion
-      ])
+        { fontSize: `15px` }, // case conversion
+      ]),
     ).toBe(`color:red;font-size:15px;`)
   })
 
@@ -177,8 +190,8 @@ describe('ssr: renderStyle', () => {
     expect(
       ssrRenderStyle({
         fontSize: null, // invalid value should be ignored
-        opacity: 0.5
-      })
+        opacity: 0.5,
+      }),
     ).toBe(`opacity:0.5;`)
   })
 
@@ -186,8 +199,8 @@ describe('ssr: renderStyle', () => {
     expect(ssrRenderStyle(`"><script`)).toBe(`&quot;&gt;&lt;script`)
     expect(
       ssrRenderStyle({
-        color: `"><script`
-      })
+        color: `"><script`,
+      }),
     ).toBe(`color:&quot;&gt;&lt;script;`)
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrRenderList.spec.ts b/packages/server-renderer/__tests__/ssrRenderList.spec.ts
index 56c9b7c35..f8dcb2930 100644
--- a/packages/server-renderer/__tests__/ssrRenderList.spec.ts
+++ b/packages/server-renderer/__tests__/ssrRenderList.spec.ts
@@ -9,7 +9,7 @@ describe('ssr: renderList', () => {
 
   it('should render items in an array', () => {
     ssrRenderList(['1', '2', '3'], (item, index) =>
-      stack.push(`node ${index}: ${item}`)
+      stack.push(`node ${index}: ${item}`),
     )
     expect(stack).toEqual(['node 0: 1', 'node 1: 2', 'node 2: 3'])
   })
@@ -27,13 +27,13 @@ describe('ssr: renderList', () => {
   it('should warn when given a non-integer N', () => {
     ssrRenderList(3.1, () => {})
     expect(
-      `The v-for range expect an integer value but got 3.1.`
+      `The v-for range expect an integer value but got 3.1.`,
     ).toHaveBeenWarned()
   })
 
   it('should render properties in an object', () => {
     ssrRenderList({ a: 1, b: 2, c: 3 }, (item, key, index) =>
-      stack.push(`node ${index}/${key}: ${item}`)
+      stack.push(`node ${index}/${key}: ${item}`),
     )
     expect(stack).toEqual(['node 0/a: 1', 'node 1/b: 2', 'node 2/c: 3'])
   })
@@ -46,14 +46,14 @@ describe('ssr: renderList', () => {
     }
 
     ssrRenderList(iterable(), (item, index) =>
-      stack.push(`node ${index}: ${item}`)
+      stack.push(`node ${index}: ${item}`),
     )
     expect(stack).toEqual(['node 0: 1', 'node 1: 2', 'node 2: 3'])
   })
 
   it('should not render items when source is undefined', () => {
     ssrRenderList(undefined, (item, index) =>
-      stack.push(`node ${index}: ${item}`)
+      stack.push(`node ${index}: ${item}`),
     )
     expect(stack).toEqual([])
   })
diff --git a/packages/server-renderer/__tests__/ssrScopeId.spec.ts b/packages/server-renderer/__tests__/ssrScopeId.spec.ts
index 2637fd784..4ceb865fb 100644
--- a/packages/server-renderer/__tests__/ssrScopeId.spec.ts
+++ b/packages/server-renderer/__tests__/ssrScopeId.spec.ts
@@ -1,20 +1,20 @@
 import { createApp, h, mergeProps, withCtx } from 'vue'
 import { renderToString } from '../src/renderToString'
-import { ssrRenderComponent, ssrRenderAttrs, ssrRenderSlot } from '../src'
+import { ssrRenderAttrs, ssrRenderComponent, ssrRenderSlot } from '../src'
 
 describe('ssr: scopedId runtime behavior', () => {
   test('id on component root', async () => {
     const Child = {
       ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
         push(`<div${ssrRenderAttrs(attrs)}></div>`)
-      }
+      },
     }
 
     const Comp = {
       __scopeId: 'parent',
       ssrRender: (ctx: any, push: any, parent: any) => {
         push(ssrRenderComponent(Child), null, null, parent)
-      }
+      },
     }
 
     const result = await renderToString(createApp(Comp))
@@ -26,7 +26,7 @@ describe('ssr: scopedId runtime behavior', () => {
       // <div></div>
       ssrRender: (_: any, push: any, _parent: any, attrs: any) => {
         push(`<div${ssrRenderAttrs(attrs)} child></div>`)
-      }
+      },
     }
 
     const Wrapper = {
@@ -40,9 +40,9 @@ describe('ssr: scopedId runtime behavior', () => {
           null,
           push,
           parent,
-          'wrapper-s'
+          'wrapper-s',
         )
-      }
+      },
     }
 
     const Comp = {
@@ -57,14 +57,14 @@ describe('ssr: scopedId runtime behavior', () => {
               default: withCtx(
                 (_: any, push: any, parent: any, scopeId: string) => {
                   push(ssrRenderComponent(Child, null, null, parent, scopeId))
-                }
+                },
               ),
-              _: 1
+              _: 1,
             } as any,
-            parent
-          )
+            parent,
+          ),
         )
-      }
+      },
     }
 
     const result = await renderToString(createApp(Comp))
@@ -79,8 +79,8 @@ describe('ssr: scopedId runtime behavior', () => {
         // <div class="wrapper"><slot/></div>
         push(
           `<div${ssrRenderAttrs(
-            mergeProps({ class: 'wrapper' }, attrs)
-          )} wrapper>`
+            mergeProps({ class: 'wrapper' }, attrs),
+          )} wrapper>`,
         )
         ssrRenderSlot(
           ctx.$slots,
@@ -89,10 +89,10 @@ describe('ssr: scopedId runtime behavior', () => {
           null,
           push,
           parent,
-          'wrapper-s'
+          'wrapper-s',
         )
         push(`</div>`)
-      }
+      },
     }
 
     const Slotted = {
@@ -113,16 +113,16 @@ describe('ssr: scopedId runtime behavior', () => {
                     null,
                     push,
                     parent,
-                    'slotted-s' + scopeId
+                    'slotted-s' + scopeId,
                   )
-                }
+                },
               ),
-              _: 1
+              _: 1,
             } as any,
-            parent
-          )
+            parent,
+          ),
         )
-      }
+      },
     }
 
     const Root = {
@@ -137,21 +137,21 @@ describe('ssr: scopedId runtime behavior', () => {
               default: withCtx(
                 (_: any, push: any, parent: any, scopeId: string) => {
                   push(`<div root${scopeId}></div>`)
-                }
+                },
               ),
-              _: 1
+              _: 1,
             } as any,
-            parent
-          )
+            parent,
+          ),
         )
-      }
+      },
     }
 
     const result = await renderToString(createApp(Root))
     expect(result).toBe(
       `<div class="wrapper" root slotted wrapper>` +
         `<!--[--><!--[--><div root slotted-s wrapper-s></div><!--]--><!--]-->` +
-        `</div>`
+        `</div>`,
     )
   })
 
@@ -160,23 +160,113 @@ describe('ssr: scopedId runtime behavior', () => {
     const Child = {
       ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
         push(`<div${ssrRenderAttrs(attrs)}></div>`)
-      }
+      },
     }
 
     const Middle = {
       render() {
         return h(Child)
-      }
+      },
     }
 
     const Comp = {
       __scopeId: 'parent',
       ssrRender: (ctx: any, push: any, parent: any) => {
         push(ssrRenderComponent(Middle, null, null, parent))
-      }
+      },
     }
 
     const result = await renderToString(createApp(Comp)) // output: `<div></div>`
     expect(result).toBe(`<div parent></div>`)
   })
+
+  // #6093
+  test(':slotted on forwarded slots on component', async () => {
+    const Wrapper = {
+      __scopeId: 'wrapper',
+      ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
+        // <div class="wrapper"><slot/></div>
+        push(
+          `<div${ssrRenderAttrs(
+            mergeProps({ class: 'wrapper' }, attrs),
+          )} wrapper>`,
+        )
+        ssrRenderSlot(
+          ctx.$slots,
+          'default',
+          {},
+          null,
+          push,
+          parent,
+          'wrapper-s',
+        )
+        push(`</div>`)
+      },
+    }
+
+    const Slotted = {
+      __scopeId: 'slotted',
+      ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
+        // <Wrapper><slot/></Wrapper>
+        push(
+          ssrRenderComponent(
+            Wrapper,
+            attrs,
+            {
+              default: withCtx(
+                (_: any, push: any, parent: any, scopeId: string) => {
+                  ssrRenderSlot(
+                    ctx.$slots,
+                    'default',
+                    {},
+                    null,
+                    push,
+                    parent,
+                    'slotted-s' + scopeId,
+                  )
+                },
+              ),
+              _: 1,
+            } as any,
+            parent,
+          ),
+        )
+      },
+    }
+
+    const Child = {
+      ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
+        push(`<div${ssrRenderAttrs(attrs)}></div>`)
+      },
+    }
+
+    const Root = {
+      __scopeId: 'root',
+      // <Slotted><Child></Child></Slotted>
+      ssrRender: (_: any, push: any, parent: any, attrs: any) => {
+        push(
+          ssrRenderComponent(
+            Slotted,
+            attrs,
+            {
+              default: withCtx(
+                (_: any, push: any, parent: any, scopeId: string) => {
+                  push(ssrRenderComponent(Child, null, null, parent, scopeId))
+                },
+              ),
+              _: 1,
+            } as any,
+            parent,
+          ),
+        )
+      },
+    }
+
+    const result = await renderToString(createApp(Root))
+    expect(result).toBe(
+      `<div class="wrapper" root slotted wrapper>` +
+        `<!--[--><!--[--><div root slotted-s wrapper-s></div><!--]--><!--]-->` +
+        `</div>`,
+    )
+  })
 })
diff --git a/packages/server-renderer/__tests__/ssrSlot.spec.ts b/packages/server-renderer/__tests__/ssrSlot.spec.ts
index 9b3a2cdcc..02872274a 100644
--- a/packages/server-renderer/__tests__/ssrSlot.spec.ts
+++ b/packages/server-renderer/__tests__/ssrSlot.spec.ts
@@ -3,8 +3,8 @@ import { renderToString } from '../src/renderToString'
 
 const components = {
   one: {
-    template: `<div><slot/></div>`
-  }
+    template: `<div><slot/></div>`,
+  },
 }
 
 describe('ssr: slot', () => {
@@ -13,9 +13,9 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components,
-          template: `<one>hello</one>`
-        })
-      )
+          template: `<one>hello</one>`,
+        }),
+      ),
     ).toBe(`<div><!--[-->hello<!--]--></div>`)
   })
 
@@ -24,9 +24,9 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components,
-          template: `<one><div>hi</div></one>`
-        })
-      )
+          template: `<one><div>hi</div></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><div>hi</div><!--]--></div>`)
   })
 
@@ -36,12 +36,12 @@ describe('ssr: slot', () => {
         createApp({
           components: {
             one: {
-              template: `<div><slot/></div>`
-            }
+              template: `<div><slot/></div>`,
+            },
           },
-          template: `<one><template v-if="false"/></one>`
-        })
-      )
+          template: `<one><template v-if="false"/></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><!--]--></div>`)
   })
 
@@ -51,12 +51,12 @@ describe('ssr: slot', () => {
         createApp({
           components: {
             one: {
-              template: `<div><slot/></div>`
-            }
+              template: `<div><slot/></div>`,
+            },
           },
-          template: `<one><!--hello--></one>`
-        })
-      )
+          template: `<one><!--hello--></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><!--]--></div>`)
   })
 
@@ -66,12 +66,12 @@ describe('ssr: slot', () => {
         createApp({
           components: {
             one: {
-              template: `<div><slot/></div>`
-            }
+              template: `<div><slot/></div>`,
+            },
           },
-          template: `<one><!--he\nllo--></one>`
-        })
-      )
+          template: `<one><!--he\nllo--></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><!--]--></div>`)
   })
 
@@ -80,9 +80,9 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components,
-          template: `<one><div>one</div><div>two</div></one>`
-        })
-      )
+          template: `<one><div>one</div><div>two</div></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><div>one</div><div>two</div><!--]--></div>`)
   })
 
@@ -91,9 +91,9 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components,
-          template: `<one><template v-if="true">hello</template></one>`
-        })
-      )
+          template: `<one><template v-if="true">hello</template></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><!--[-->hello<!--]--><!--]--></div>`)
   })
 
@@ -102,11 +102,11 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components,
-          template: `<one><template v-if="true"><div>one</div><div>two</div></template></one>`
-        })
-      )
+          template: `<one><template v-if="true"><div>one</div><div>two</div></template></one>`,
+        }),
+      ),
     ).toBe(
-      `<div><!--[--><!--[--><div>one</div><div>two</div><!--]--><!--]--></div>`
+      `<div><!--[--><!--[--><div>one</div><div>two</div><!--]--><!--]--></div>`,
     )
   })
 
@@ -116,12 +116,12 @@ describe('ssr: slot', () => {
         createApp({
           components: {
             one: {
-              template: `<transition><slot/></transition>`
-            }
+              template: `<transition><slot/></transition>`,
+            },
           },
-          template: `<one><div v-if="false">foo</div></one>`
-        })
-      )
+          template: `<one><div v-if="false">foo</div></one>`,
+        }),
+      ),
     ).toBe(`<!---->`)
 
     expect(
@@ -129,12 +129,78 @@ describe('ssr: slot', () => {
         createApp({
           components: {
             one: {
-              template: `<transition><slot/></transition>`
-            }
+              template: `<transition><slot/></transition>`,
+            },
           },
-          template: `<one><div v-if="true">foo</div></one>`
-        })
-      )
+          template: `<one><div v-if="true">foo</div></one>`,
+        }),
+      ),
     ).toBe(`<div>foo</div>`)
   })
+
+  // #9933
+  test('transition-group slot', async () => {
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            one: {
+              template: `<TransitionGroup tag="div"><slot/></TransitionGroup>`,
+            },
+          },
+          template: `<one><p v-for="i in 2">{{i}}</p></one>`,
+        }),
+      ),
+    ).toBe(`<div><p>1</p><p>2</p></div>`)
+  })
+
+  // #11326
+  test('dynamic component slot', async () => {
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            ButtonComp: {
+              template: `<component is="button"><slot/></component>`,
+            },
+            Wrap: {
+              template: `<div><slot/></div>`,
+            },
+          },
+          template: `<ButtonComp><Wrap><div v-if="false">hello</div></Wrap></ButtonComp>`,
+        }),
+      ),
+    ).toBe(`<button><!--[--><div><!--[--><!--]--></div><!--]--></button>`)
+
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            ButtonComp: {
+              template: `<component is="button"><slot/></component>`,
+            },
+            Wrap: {
+              template: `<div><slot/></div>`,
+            },
+          },
+          template: `<ButtonComp><Wrap><div v-if="true">hello</div></Wrap></ButtonComp>`,
+        }),
+      ),
+    ).toBe(
+      `<button><!--[--><div><!--[--><div>hello</div><!--]--></div><!--]--></button>`,
+    )
+
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            ButtonComp: {
+              template: `<component is="button"><slot/></component>`,
+            },
+          },
+          template: `<ButtonComp><template v-if="false">hello</template></ButtonComp>`,
+        }),
+      ),
+    ).toBe(`<button><!--[--><!--]--></button>`)
+  })
 })
diff --git a/packages/server-renderer/__tests__/ssrSuspense.spec.ts b/packages/server-renderer/__tests__/ssrSuspense.spec.ts
index 97984f61d..eef642d00 100644
--- a/packages/server-renderer/__tests__/ssrSuspense.spec.ts
+++ b/packages/server-renderer/__tests__/ssrSuspense.spec.ts
@@ -1,17 +1,17 @@
-import { createApp, h, Suspense } from 'vue'
+import { Suspense, createApp, h } from 'vue'
 import { renderToString } from '../src/renderToString'
 
 describe('SSR Suspense', () => {
   const ResolvingAsync = {
     async setup() {
       return () => h('div', 'async')
-    }
+    },
   }
 
   const RejectingAsync = {
     setup() {
       return new Promise((_, reject) => reject('foo'))
-    }
+    },
   }
 
   test('content', async () => {
@@ -19,9 +19,9 @@ describe('SSR Suspense', () => {
       render() {
         return h(Suspense, null, {
           default: h(ResolvingAsync),
-          fallback: h('div', 'fallback')
+          fallback: h('div', 'fallback'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
@@ -33,9 +33,9 @@ describe('SSR Suspense', () => {
       render() {
         return h(Suspense, null, {
           default: h(RejectingAsync),
-          fallback: h('div', 'fallback')
+          fallback: h('div', 'fallback'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(`<!---->`)
@@ -49,13 +49,13 @@ describe('SSR Suspense', () => {
       render() {
         return h(Suspense, null, {
           default: h('div', [h(ResolvingAsync), h(ResolvingAsync)]),
-          fallback: h('div', 'fallback')
+          fallback: h('div', 'fallback'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(
-      `<div><div>async</div><div>async</div></div>`
+      `<div><div>async</div><div>async</div></div>`,
     )
   })
 
@@ -65,13 +65,13 @@ describe('SSR Suspense', () => {
       render() {
         return h(Suspense, null, {
           default: h('div', [h(ResolvingAsync), h(RejectingAsync)]),
-          fallback: h('div', 'fallback')
+          fallback: h('div', 'fallback'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(
-      `<div><div>async</div><!----></div>`
+      `<div><div>async</div><!----></div>`,
     )
 
     expect(Comp.errorCaptured).toHaveBeenCalledTimes(1)
@@ -87,16 +87,16 @@ describe('SSR Suspense', () => {
             h(ResolvingAsync),
             h(Suspense, null, {
               default: h('div', [h(RejectingAsync)]),
-              fallback: h('div', 'fallback 2')
-            })
+              fallback: h('div', 'fallback 2'),
+            }),
           ]),
-          fallback: h('div', 'fallback 1')
+          fallback: h('div', 'fallback 1'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(
-      `<div><div>async</div><div><!----></div></div>`
+      `<div><div>async</div><div><!----></div></div>`,
     )
 
     expect(Comp.errorCaptured).toHaveBeenCalledTimes(1)
@@ -112,16 +112,16 @@ describe('SSR Suspense', () => {
             h(RejectingAsync),
             h(Suspense, null, {
               default: h('div', [h(ResolvingAsync)]),
-              fallback: h('div', 'fallback 2')
-            })
+              fallback: h('div', 'fallback 2'),
+            }),
           ]),
-          fallback: h('div', 'fallback 1')
+          fallback: h('div', 'fallback 1'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(
-      `<div><!----><div><div>async</div></div></div>`
+      `<div><!----><div><div>async</div></div></div>`,
     )
     expect(Comp.errorCaptured).toHaveBeenCalledTimes(1)
     expect('missing template').toHaveBeenWarned()
diff --git a/packages/server-renderer/__tests__/ssrTeleport.spec.ts b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
index 4de6b44bb..78c569426 100644
--- a/packages/server-renderer/__tests__/ssrTeleport.spec.ts
+++ b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
@@ -1,7 +1,7 @@
-import { createApp, h, Teleport } from 'vue'
+import { Teleport, createApp, h } from 'vue'
 import { renderToString } from '../src/renderToString'
 import { renderToSimpleStream } from '../src/renderToStream'
-import { SSRContext } from '../src/render'
+import type { SSRContext } from '../src/render'
 import { ssrRenderTeleport } from '../src/helpers/ssrRenderTeleport'
 
 describe('ssrRenderTeleport', () => {
@@ -20,15 +20,15 @@ describe('ssrRenderTeleport', () => {
             },
             '#target',
             false,
-            _parent
+            _parent,
           )
-        }
+        },
       }),
-      ctx
+      ctx,
     )
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
     expect(ctx.teleports!['#target']).toBe(
-      `<div>content</div><!--teleport anchor-->`
+      `<!--teleport start anchor--><div>content</div><!--teleport anchor-->`,
     )
   })
 
@@ -47,16 +47,18 @@ describe('ssrRenderTeleport', () => {
             },
             '#target',
             true,
-            _parent
+            _parent,
           )
-        }
+        },
       }),
-      ctx
+      ctx,
     )
     expect(html).toBe(
-      '<!--teleport start--><div>content</div><!--teleport end-->'
+      '<!--teleport start--><div>content</div><!--teleport end-->',
+    )
+    expect(ctx.teleports!['#target']).toBe(
+      `<!--teleport start anchor--><!--teleport anchor-->`,
     )
-    expect(ctx.teleports!['#target']).toBe(`<!--teleport anchor-->`)
   })
 
   test('teleport rendering (vnode)', async () => {
@@ -65,15 +67,15 @@ describe('ssrRenderTeleport', () => {
       h(
         Teleport,
         {
-          to: `#target`
+          to: `#target`,
         },
-        h('span', 'hello')
+        h('span', 'hello'),
       ),
-      ctx
+      ctx,
     )
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
     expect(ctx.teleports!['#target']).toBe(
-      '<span>hello</span><!--teleport anchor-->'
+      '<!--teleport start anchor--><span>hello</span><!--teleport anchor-->',
     )
   })
 
@@ -84,16 +86,18 @@ describe('ssrRenderTeleport', () => {
         Teleport,
         {
           to: `#target`,
-          disabled: true
+          disabled: true,
         },
-        h('span', 'hello')
+        h('span', 'hello'),
       ),
-      ctx
+      ctx,
     )
     expect(html).toBe(
-      '<!--teleport start--><span>hello</span><!--teleport end-->'
+      '<!--teleport start--><span>hello</span><!--teleport end-->',
+    )
+    expect(ctx.teleports!['#target']).toBe(
+      `<!--teleport start anchor--><!--teleport anchor-->`,
     )
-    expect(ctx.teleports!['#target']).toBe(`<!--teleport anchor-->`)
   })
 
   test('multiple teleports with same target', async () => {
@@ -103,19 +107,20 @@ describe('ssrRenderTeleport', () => {
         h(
           Teleport,
           {
-            to: `#target`
+            to: `#target`,
           },
-          h('span', 'hello')
+          h('span', 'hello'),
         ),
-        h(Teleport, { to: `#target` }, 'world')
+        h(Teleport, { to: `#target` }, 'world'),
       ]),
-      ctx
+      ctx,
     )
     expect(html).toBe(
-      '<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>'
+      '<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>',
     )
     expect(ctx.teleports!['#target']).toBe(
-      '<span>hello</span><!--teleport anchor-->world<!--teleport anchor-->'
+      '<!--teleport start anchor--><span>hello</span><!--teleport anchor-->' +
+        '<!--teleport start anchor-->world<!--teleport anchor-->',
     )
   })
 
@@ -123,18 +128,18 @@ describe('ssrRenderTeleport', () => {
     const ctx: SSRContext = {}
     const asyncComponent = {
       template: '<teleport to="#target"><div>content</div></teleport>',
-      async setup() {}
+      async setup() {},
     }
     const html = await renderToString(
       h({
         template: '<async-component />',
-        components: { asyncComponent }
+        components: { asyncComponent },
       }),
-      ctx
+      ctx,
     )
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
     expect(ctx.teleports!['#target']).toBe(
-      `<div>content</div><!--teleport anchor-->`
+      `<!--teleport start anchor--><div>content</div><!--teleport anchor-->`,
     )
   })
 
@@ -142,7 +147,7 @@ describe('ssrRenderTeleport', () => {
     const ctx: SSRContext = {}
     const asyncComponent = {
       template: '<teleport to="#target"><div>content</div></teleport>',
-      async setup() {}
+      async setup() {},
     }
     let html = ''
     let resolve: any
@@ -150,7 +155,7 @@ describe('ssrRenderTeleport', () => {
     renderToSimpleStream(
       h({
         template: '<async-component />',
-        components: { asyncComponent }
+        components: { asyncComponent },
       }),
       ctx,
       {
@@ -163,13 +168,13 @@ describe('ssrRenderTeleport', () => {
         },
         destroy(err) {
           throw err
-        }
-      }
+        },
+      },
     )
     await p
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
     expect(ctx.teleports!['#target']).toBe(
-      `<div>content</div><!--teleport anchor-->`
+      `<!--teleport start anchor--><div>content</div><!--teleport anchor-->`,
     )
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts b/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts
index d003c5406..7d00b9cb7 100644
--- a/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts
+++ b/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts
@@ -1,6 +1,6 @@
 import {
+  ssrGetDynamicModelProps,
   ssrRenderDynamicModel,
-  ssrGetDynamicModelProps
   // ssrGetDynamicModelProps
 } from '../src/helpers/ssrVModelHelpers'
 
@@ -26,90 +26,90 @@ describe('ssr: v-model helpers', () => {
     expect(
       ssrGetDynamicModelProps(
         {
-          type: 'text'
+          type: 'text',
         },
-        'foo'
-      )
+        'foo',
+      ),
     ).toMatchObject({ value: 'foo' })
     expect(
       ssrGetDynamicModelProps(
         {
-          type: 'email'
+          type: 'email',
         },
-        'foo'
-      )
+        'foo',
+      ),
     ).toMatchObject({ value: 'foo' })
 
     expect(
       ssrGetDynamicModelProps(
         {
-          type: 'checkbox'
+          type: 'checkbox',
         },
-        true
-      )
+        true,
+      ),
     ).toMatchObject({ checked: true })
     expect(
       ssrGetDynamicModelProps(
         {
-          type: 'checkbox'
+          type: 'checkbox',
         },
-        false
-      )
+        false,
+      ),
     ).toBe(null)
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'checkbox',
-          value: '1'
+          value: '1',
         },
-        [1]
-      )
+        [1],
+      ),
     ).toMatchObject({ checked: true })
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'checkbox',
-          value: 1
+          value: 1,
         },
-        [1]
-      )
+        [1],
+      ),
     ).toMatchObject({ checked: true })
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'checkbox',
-          value: 0
+          value: 0,
         },
-        [1]
-      )
+        [1],
+      ),
     ).toBe(null)
 
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'radio',
-          value: 'foo'
+          value: 'foo',
         },
-        'foo'
-      )
+        'foo',
+      ),
     ).toMatchObject({ checked: true })
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'radio',
-          value: '1'
+          value: '1',
         },
-        1
-      )
+        1,
+      ),
     ).toMatchObject({ checked: true })
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'radio',
-          value: 0
+          value: 0,
         },
-        1
-      )
+        1,
+      ),
     ).toBe(null)
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrWatch.spec.ts b/packages/server-renderer/__tests__/ssrWatch.spec.ts
index df085332d..40c49740d 100644
--- a/packages/server-renderer/__tests__/ssrWatch.spec.ts
+++ b/packages/server-renderer/__tests__/ssrWatch.spec.ts
@@ -1,5 +1,13 @@
-import { createSSRApp, defineComponent, h, watch, ref } from 'vue'
-import { SSRContext, renderToString } from '../src'
+import {
+  createSSRApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  watch,
+  watchEffect,
+} from 'vue'
+import { type SSRContext, renderToString } from '../src'
 
 describe('ssr: watch', () => {
   // #6013
@@ -12,7 +20,7 @@ describe('ssr: watch', () => {
         () => {
           msg = 'hello world'
         },
-        { flush: 'sync' }
+        { flush: 'sync' },
       )
       count.value = 1
       expect(msg).toBe('hello world')
@@ -27,4 +35,168 @@ describe('ssr: watch', () => {
 
     expect(html).toMatch('hello world')
   })
+
+  test('should work with flush: sync and immediate: true', async () => {
+    const text = ref('start')
+    let msg = 'unchanged'
+
+    const App = defineComponent(() => {
+      watch(
+        text,
+        () => {
+          msg = text.value
+        },
+        { flush: 'sync', immediate: true },
+      )
+      expect(msg).toBe('start')
+      text.value = 'changed'
+      expect(msg).toBe('changed')
+      text.value = 'changed again'
+      expect(msg).toBe('changed again')
+      return () => h('div', null, msg)
+    })
+
+    const app = createSSRApp(App)
+    const ctx: SSRContext = {}
+    const html = await renderToString(app, ctx)
+
+    expect(ctx.__watcherHandles!.length).toBe(1)
+    expect(html).toMatch('changed again')
+    await nextTick()
+    expect(msg).toBe('changed again')
+  })
+
+  test('should run once with immediate: true', async () => {
+    const text = ref('start')
+    let msg = 'unchanged'
+
+    const App = defineComponent(() => {
+      watch(
+        text,
+        () => {
+          msg = String(text.value)
+        },
+        { immediate: true },
+      )
+      text.value = 'changed'
+      expect(msg).toBe('start')
+      return () => h('div', null, msg)
+    })
+
+    const app = createSSRApp(App)
+    const ctx: SSRContext = {}
+    const html = await renderToString(app, ctx)
+
+    expect(ctx.__watcherHandles).toBeUndefined()
+    expect(html).toMatch('start')
+    await nextTick()
+    expect(msg).toBe('start')
+  })
+
+  test('should run once with immediate: true and flush: post', async () => {
+    const text = ref('start')
+    let msg = 'unchanged'
+
+    const App = defineComponent(() => {
+      watch(
+        text,
+        () => {
+          msg = String(text.value)
+        },
+        { immediate: true, flush: 'post' },
+      )
+      text.value = 'changed'
+      expect(msg).toBe('start')
+      return () => h('div', null, msg)
+    })
+
+    const app = createSSRApp(App)
+    const ctx: SSRContext = {}
+    const html = await renderToString(app, ctx)
+
+    expect(ctx.__watcherHandles).toBeUndefined()
+    expect(html).toMatch('start')
+    await nextTick()
+    expect(msg).toBe('start')
+  })
+})
+
+describe('ssr: watchEffect', () => {
+  test('should run with flush: sync', async () => {
+    const text = ref('start')
+    let msg = 'unchanged'
+
+    const App = defineComponent(() => {
+      watchEffect(
+        () => {
+          msg = text.value
+        },
+        { flush: 'sync' },
+      )
+      expect(msg).toBe('start')
+      text.value = 'changed'
+      expect(msg).toBe('changed')
+      text.value = 'changed again'
+      expect(msg).toBe('changed again')
+      return () => h('div', null, msg)
+    })
+
+    const app = createSSRApp(App)
+    const ctx: SSRContext = {}
+    const html = await renderToString(app, ctx)
+
+    expect(ctx.__watcherHandles!.length).toBe(1)
+    expect(html).toMatch('changed again')
+    await nextTick()
+    expect(msg).toBe('changed again')
+  })
+
+  test('should run once with default flush (pre)', async () => {
+    const text = ref('start')
+    let msg = 'unchanged'
+
+    const App = defineComponent(() => {
+      watchEffect(() => {
+        msg = text.value
+      })
+      text.value = 'changed'
+      expect(msg).toBe('start')
+      return () => h('div', null, msg)
+    })
+
+    const app = createSSRApp(App)
+    const ctx: SSRContext = {}
+    const html = await renderToString(app, ctx)
+
+    expect(ctx.__watcherHandles).toBeUndefined()
+    expect(html).toMatch('start')
+    await nextTick()
+    expect(msg).toBe('start')
+  })
+
+  test('should not run for flush: post', async () => {
+    const text = ref('start')
+    let msg = 'unchanged'
+
+    const App = defineComponent(() => {
+      watchEffect(
+        () => {
+          msg = text.value
+        },
+        { flush: 'post' },
+      )
+      text.value = 'changed'
+      expect(msg).toBe('unchanged')
+      return () => h('div', null, msg)
+    })
+
+    const app = createSSRApp(App)
+    const ctx: SSRContext = {}
+    const html = await renderToString(app, ctx)
+
+    expect(ctx.__watcherHandles).toBeUndefined()
+    expect(html).toMatch('unchanged')
+    await nextTick()
+    expect(msg).toBe('unchanged')
+  })
 })
diff --git a/packages/server-renderer/__tests__/unrollBuffer.bench.ts b/packages/server-renderer/__tests__/unrollBuffer.bench.ts
new file mode 100644
index 000000000..b5e03cea6
--- /dev/null
+++ b/packages/server-renderer/__tests__/unrollBuffer.bench.ts
@@ -0,0 +1,74 @@
+import { bench, describe } from 'vitest'
+
+import { type SSRBuffer, createBuffer } from '../src/render'
+import { unrollBuffer } from '../src/renderToString'
+
+function createSyncBuffer(levels: number, itemsPerLevel: number): SSRBuffer {
+  const buffer = createBuffer()
+
+  function addItems(buf: ReturnType<typeof createBuffer>, level: number) {
+    for (let i = 1; i <= levels * itemsPerLevel; i++) {
+      buf.push(`sync${level}.${i}`)
+    }
+    if (level < levels) {
+      const subBuffer = createBuffer()
+      addItems(subBuffer, level + 1)
+      buf.push(subBuffer.getBuffer())
+    }
+  }
+
+  addItems(buffer, 1)
+  return buffer.getBuffer()
+}
+
+function createMixedBuffer(levels: number, itemsPerLevel: number): SSRBuffer {
+  const buffer = createBuffer()
+
+  function addItems(buf: ReturnType<typeof createBuffer>, level: number) {
+    for (let i = 1; i <= levels * itemsPerLevel; i++) {
+      if (i % 3 === 0) {
+        // @ts-expect-error testing...
+        buf.push(Promise.resolve(`async${level}.${i}`))
+      } else {
+        buf.push(`sync${level}.${i}`)
+      }
+    }
+    if (level < levels) {
+      const subBuffer = createBuffer()
+      addItems(subBuffer, level + 1)
+      buf.push(subBuffer.getBuffer())
+    }
+  }
+
+  addItems(buffer, 1)
+  return buffer.getBuffer()
+}
+
+describe('unrollBuffer', () => {
+  let syncBuffer = createBuffer().getBuffer()
+  let mixedBuffer = createBuffer().getBuffer()
+
+  bench(
+    'sync',
+    () => {
+      return unrollBuffer(syncBuffer) as any
+    },
+    {
+      setup() {
+        syncBuffer = createSyncBuffer(5, 3)
+      },
+    },
+  )
+
+  bench(
+    'mixed',
+    () => {
+      return unrollBuffer(mixedBuffer) as any
+    },
+    {
+      setup() {
+        mixedBuffer = createMixedBuffer(5, 3)
+      },
+    },
+  )
+})
diff --git a/packages/server-renderer/__tests__/webStream.spec.ts b/packages/server-renderer/__tests__/webStream.spec.ts
index 1b5c054c5..700a9a0ae 100644
--- a/packages/server-renderer/__tests__/webStream.spec.ts
+++ b/packages/server-renderer/__tests__/webStream.spec.ts
@@ -1,25 +1,25 @@
-import { createApp, h, defineAsyncComponent } from 'vue'
-import { ReadableStream, TransformStream } from 'stream/web'
+import { createApp, defineAsyncComponent, h } from 'vue'
+import { ReadableStream, TransformStream } from 'node:stream/web'
 import { pipeToWebWritable, renderToWebStream } from '../src'
 
 beforeEach(() => {
-  // @ts-ignore
+  // @ts-expect-error
   global.ReadableStream = ReadableStream
 })
 
 afterEach(() => {
-  // @ts-ignore
+  // @ts-expect-error
   delete global.ReadableStream
 })
 
 test('renderToWebStream', async () => {
   const Async = defineAsyncComponent(() =>
     Promise.resolve({
-      render: () => h('div', 'async')
-    })
+      render: () => h('div', 'async'),
+    }),
   )
   const App = {
-    render: () => [h('div', 'parent'), h(Async)]
+    render: () => [h('div', 'parent'), h(Async)],
   }
 
   const stream = renderToWebStream(createApp(App))
@@ -41,11 +41,11 @@ test('renderToWebStream', async () => {
 test('pipeToWebWritable', async () => {
   const Async = defineAsyncComponent(() =>
     Promise.resolve({
-      render: () => h('div', 'async')
-    })
+      render: () => h('div', 'async'),
+    }),
   )
   const App = {
-    render: () => [h('div', 'parent'), h(Async)]
+    render: () => [h('div', 'parent'), h(Async)],
   }
 
   const { readable, writable } = new TransformStream()
diff --git a/packages/server-renderer/package.json b/packages/server-renderer/package.json
index f9f4aec92..c45d7c8f2 100644
--- a/packages/server-renderer/package.json
+++ b/packages/server-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/server-renderer",
-  "version": "3.3.9",
+  "version": "3.5.11",
   "description": "@vue/server-renderer",
   "main": "index.js",
   "module": "dist/server-renderer.esm-bundler.js",
@@ -9,6 +9,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/server-renderer.d.ts",
+      "node": {
+        "production": "./dist/server-renderer.cjs.prod.js",
+        "development": "./dist/server-renderer.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/server-renderer.esm-bundler.js",
+      "import": "./dist/server-renderer.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "buildOptions": {
     "name": "VueServerRenderer",
     "formats": [
diff --git a/packages/server-renderer/src/helpers/ssrCompile.ts b/packages/server-renderer/src/helpers/ssrCompile.ts
index 722997c1a..8412a65e8 100644
--- a/packages/server-renderer/src/helpers/ssrCompile.ts
+++ b/packages/server-renderer/src/helpers/ssrCompile.ts
@@ -1,8 +1,12 @@
-import { ComponentInternalInstance, ComponentOptions, warn } from 'vue'
+import {
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  warn,
+} from 'vue'
 import { compile } from '@vue/compiler-ssr'
-import { extend, generateCodeFrame, isFunction, NO } from '@vue/shared'
-import { CompilerError, CompilerOptions } from '@vue/compiler-core'
-import { PushFn } from '../render'
+import { NO, extend, generateCodeFrame, isFunction } from '@vue/shared'
+import type { CompilerError, CompilerOptions } from '@vue/compiler-core'
+import type { PushFn } from '../render'
 
 import * as Vue from 'vue'
 import * as helpers from '../internal'
@@ -10,21 +14,21 @@ import * as helpers from '../internal'
 type SSRRenderFunction = (
   context: any,
   push: PushFn,
-  parentInstance: ComponentInternalInstance
+  parentInstance: ComponentInternalInstance,
 ) => void
 
 const compileCache: Record<string, SSRRenderFunction> = Object.create(null)
 
 export function ssrCompile(
   template: string,
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): SSRRenderFunction {
   // TODO: this branch should now work in ESM builds, enable it in a minor
-  if (!__NODE_JS__) {
+  if (!__CJS__) {
     throw new Error(
       `On-the-fly template compilation is not supported in the ESM build of ` +
         `@vue/server-renderer. All templates must be pre-compiled into ` +
-        `render functions.`
+        `render functions.`,
     )
   }
 
@@ -37,11 +41,11 @@ export function ssrCompile(
     extend(
       {
         isCustomElement,
-        delimiters
+        delimiters,
       },
-      compilerOptions
+      compilerOptions,
     ),
-    componentCompilerOptions
+    componentCompilerOptions,
   )
 
   finalCompilerOptions.isCustomElement =
@@ -51,11 +55,11 @@ export function ssrCompile(
   const cacheKey = JSON.stringify(
     {
       template,
-      compilerOptions: finalCompilerOptions
+      compilerOptions: finalCompilerOptions,
     },
     (key, value) => {
       return isFunction(value) ? value.toString() : value
-    }
+    },
   )
 
   const cached = compileCache[cacheKey]
@@ -71,7 +75,7 @@ export function ssrCompile(
         generateCodeFrame(
           template as string,
           err.loc.start.offset,
-          err.loc.end.offset
+          err.loc.end.offset,
         )
       warn(codeFrame ? `${message}\n${codeFrame}` : message)
     } else {
@@ -82,7 +86,7 @@ export function ssrCompile(
   const { code } = compile(template, finalCompilerOptions)
   const requireMap = {
     vue: Vue,
-    'vue/server-renderer': helpers
+    'vue/server-renderer': helpers,
   }
   const fakeRequire = (id: 'vue' | 'vue/server-renderer') => requireMap[id]
   return (compileCache[cacheKey] = Function('require', code)(fakeRequire))
diff --git a/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts b/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts
index 9a1eb3109..c3cb428ab 100644
--- a/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts
+++ b/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts
@@ -1,24 +1,24 @@
-import { ComponentPublicInstance, Directive } from '@vue/runtime-core'
+import { type ComponentPublicInstance, type Directive, ssrUtils } from 'vue'
 
 export function ssrGetDirectiveProps(
   instance: ComponentPublicInstance,
   dir: Directive,
   value?: any,
   arg?: string,
-  modifiers: Record<string, boolean> = {}
+  modifiers: Record<string, boolean> = {},
 ): Record<string, any> {
   if (typeof dir !== 'function' && dir.getSSRProps) {
     return (
       dir.getSSRProps(
         {
           dir,
-          instance,
+          instance: ssrUtils.getComponentPublicInstance(instance.$),
           value,
           oldValue: undefined,
           arg,
-          modifiers
+          modifiers,
         },
-        null as any
+        null as any,
       ) || {}
     )
   }
diff --git a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
index 6bbf83a1e..9689b4185 100644
--- a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
@@ -1,24 +1,29 @@
-import { escapeHtml, isSVGTag, stringifyStyle } from '@vue/shared'
 import {
+  escapeHtml,
+  isRenderableAttrValue,
+  isSVGTag,
+  stringifyStyle,
+} from '@vue/shared'
+import {
+  includeBooleanAttr,
+  isBooleanAttr,
+  isOn,
+  isSSRSafeAttrName,
+  isString,
+  makeMap,
   normalizeClass,
   normalizeStyle,
   propsToAttrMap,
-  isString,
-  isOn,
-  isSSRSafeAttrName,
-  isBooleanAttr,
-  includeBooleanAttr,
-  makeMap
 } from '@vue/shared'
 
 // leading comma for empty string ""
-const shouldIgnoreProp = makeMap(
-  `,key,ref,innerHTML,textContent,ref_key,ref_for`
+const shouldIgnoreProp = /*@__PURE__*/ makeMap(
+  `,key,ref,innerHTML,textContent,ref_key,ref_for`,
 )
 
 export function ssrRenderAttrs(
   props: Record<string, unknown>,
-  tag?: string
+  tag?: string,
 ): string {
   let ret = ''
   for (const key in props) {
@@ -34,6 +39,8 @@ export function ssrRenderAttrs(
       ret += ` class="${ssrRenderClass(value)}"`
     } else if (key === 'style') {
       ret += ` style="${ssrRenderStyle(value)}"`
+    } else if (key === 'className') {
+      ret += ` class="${String(value)}"`
     } else {
       ret += ssrRenderDynamicAttr(key, value, tag)
     }
@@ -45,9 +52,9 @@ export function ssrRenderAttrs(
 export function ssrRenderDynamicAttr(
   key: string,
   value: unknown,
-  tag?: string
+  tag?: string,
 ): string {
-  if (!isRenderableValue(value)) {
+  if (!isRenderableAttrValue(value)) {
     return ``
   }
   const attrKey =
@@ -60,7 +67,7 @@ export function ssrRenderDynamicAttr(
     return value === '' ? ` ${attrKey}` : ` ${attrKey}="${escapeHtml(value)}"`
   } else {
     console.warn(
-      `[@vue/server-renderer] Skipped rendering unsafe attribute name: ${attrKey}`
+      `[@vue/server-renderer] Skipped rendering unsafe attribute name: ${attrKey}`,
     )
     return ``
   }
@@ -69,20 +76,12 @@ export function ssrRenderDynamicAttr(
 // Render a v-bind attr with static key. The key is pre-processed at compile
 // time and we only need to check and escape value.
 export function ssrRenderAttr(key: string, value: unknown): string {
-  if (!isRenderableValue(value)) {
+  if (!isRenderableAttrValue(value)) {
     return ``
   }
   return ` ${key}="${escapeHtml(value)}"`
 }
 
-function isRenderableValue(value: unknown): boolean {
-  if (value == null) {
-    return false
-  }
-  const type = typeof value
-  return type === 'string' || type === 'number' || type === 'boolean'
-}
-
 export function ssrRenderClass(raw: unknown): string {
   return escapeHtml(normalizeClass(raw))
 }
diff --git a/packages/server-renderer/src/helpers/ssrRenderComponent.ts b/packages/server-renderer/src/helpers/ssrRenderComponent.ts
index 4709f23a6..4277bb174 100644
--- a/packages/server-renderer/src/helpers/ssrRenderComponent.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderComponent.ts
@@ -1,17 +1,22 @@
-import { Component, ComponentInternalInstance, createVNode, Slots } from 'vue'
-import { Props, renderComponentVNode, SSRBuffer } from '../render'
-import { SSRSlots } from './ssrRenderSlot'
+import {
+  type Component,
+  type ComponentInternalInstance,
+  type Slots,
+  createVNode,
+} from 'vue'
+import { type Props, type SSRBuffer, renderComponentVNode } from '../render'
+import type { SSRSlots } from './ssrRenderSlot'
 
 export function ssrRenderComponent(
   comp: Component,
   props: Props | null = null,
   children: Slots | SSRSlots | null = null,
   parentComponent: ComponentInternalInstance | null = null,
-  slotScopeId?: string
+  slotScopeId?: string,
 ): SSRBuffer | Promise<SSRBuffer> {
   return renderComponentVNode(
     createVNode(comp, props, children),
     parentComponent,
-    slotScopeId
+    slotScopeId,
   )
 }
diff --git a/packages/server-renderer/src/helpers/ssrRenderList.ts b/packages/server-renderer/src/helpers/ssrRenderList.ts
index bde28f257..7553c8bfe 100644
--- a/packages/server-renderer/src/helpers/ssrRenderList.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderList.ts
@@ -1,10 +1,10 @@
-import { isArray, isString, isObject } from '@vue/shared'
+import { isArray, isObject, isString } from '@vue/shared'
 import { warn } from '@vue/runtime-core'
 
 export function ssrRenderList(
   source: unknown,
-  renderItem: (value: unknown, key: string | number, index?: number) => void
-) {
+  renderItem: (value: unknown, key: string | number, index?: number) => void,
+): void {
   if (isArray(source) || isString(source)) {
     for (let i = 0, l = source.length; i < l; i++) {
       renderItem(source[i], i)
diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
index ea1e7e941..19aa4ce63 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
@@ -1,13 +1,20 @@
-import { ComponentInternalInstance, Slots } from 'vue'
-import { Props, PushFn, renderVNodeChildren, SSRBufferItem } from '../render'
+import { type ComponentInternalInstance, type Slots, ssrUtils } from 'vue'
+import {
+  type Props,
+  type PushFn,
+  type SSRBufferItem,
+  renderVNodeChildren,
+} from '../render'
 import { isArray } from '@vue/shared'
 
+const { ensureValidVNode } = ssrUtils
+
 export type SSRSlots = Record<string, SSRSlot>
 export type SSRSlot = (
   props: Props,
   push: PushFn,
   parentComponent: ComponentInternalInstance | null,
-  scopeId: string | null
+  scopeId: string | null,
 ) => void
 
 export function ssrRenderSlot(
@@ -17,8 +24,8 @@ export function ssrRenderSlot(
   fallbackRenderFn: (() => void) | null,
   push: PushFn,
   parentComponent: ComponentInternalInstance,
-  slotScopeId?: string
-) {
+  slotScopeId?: string,
+): void {
   // template-compiled slots are always rendered as fragments
   push(`<!--[-->`)
   ssrRenderSlotInner(
@@ -28,7 +35,7 @@ export function ssrRenderSlot(
     fallbackRenderFn,
     push,
     parentComponent,
-    slotScopeId
+    slotScopeId,
   )
   push(`<!--]-->`)
 }
@@ -41,8 +48,8 @@ export function ssrRenderSlotInner(
   push: PushFn,
   parentComponent: ComponentInternalInstance,
   slotScopeId?: string,
-  transition?: boolean
-) {
+  transition?: boolean,
+): void {
   const slotFn = slots[slotName]
   if (slotFn) {
     const slotBuffer: SSRBufferItem[] = []
@@ -53,11 +60,21 @@ export function ssrRenderSlotInner(
       slotProps,
       bufferedPush,
       parentComponent,
-      slotScopeId ? ' ' + slotScopeId : ''
+      slotScopeId ? ' ' + slotScopeId : '',
     )
     if (isArray(ret)) {
-      // normal slot
-      renderVNodeChildren(push, ret, parentComponent, slotScopeId)
+      const validSlotContent = ensureValidVNode(ret)
+      if (validSlotContent) {
+        // normal slot
+        renderVNodeChildren(
+          push,
+          validSlotContent,
+          parentComponent,
+          slotScopeId,
+        )
+      } else if (fallbackRenderFn) {
+        fallbackRenderFn()
+      }
     } else {
       // ssr slot.
       // check if the slot renders all comments, in which case use the fallback
@@ -77,7 +94,23 @@ export function ssrRenderSlotInner(
           fallbackRenderFn()
         }
       } else {
-        for (let i = 0; i < slotBuffer.length; i++) {
+        // #9933
+        // Although we handle Transition/TransitionGroup in the transform stage
+        // without rendering it as a fragment, the content passed into the slot
+        // may still be a fragment.
+        // Therefore, here we need to avoid rendering it as a fragment again.
+        let start = 0
+        let end = slotBuffer.length
+        if (
+          transition &&
+          slotBuffer[0] === '<!--[-->' &&
+          slotBuffer[end - 1] === '<!--]-->'
+        ) {
+          start++
+          end--
+        }
+
+        for (let i = start; i < end; i++) {
           push(slotBuffer[i])
         }
       }
@@ -87,7 +120,7 @@ export function ssrRenderSlotInner(
   }
 }
 
-const commentTestRE = /^<!--.*-->$/s
+const commentTestRE = /^<!--[\s\S]*-->$/
 const commentRE = /<!--[^]*?-->/gm
 function isComment(item: SSRBufferItem) {
   if (typeof item !== 'string' || !commentTestRE.test(item)) return false
diff --git a/packages/server-renderer/src/helpers/ssrRenderSuspense.ts b/packages/server-renderer/src/helpers/ssrRenderSuspense.ts
index f02b85d17..1c6823afa 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSuspense.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSuspense.ts
@@ -1,9 +1,9 @@
-import { PushFn } from '../render'
+import type { PushFn } from '../render'
 
 export async function ssrRenderSuspense(
   push: PushFn,
-  { default: renderContent }: Record<string, (() => void) | undefined>
-) {
+  { default: renderContent }: Record<string, (() => void) | undefined>,
+): Promise<void> {
   if (renderContent) {
     renderContent()
   } else {
diff --git a/packages/server-renderer/src/helpers/ssrRenderTeleport.ts b/packages/server-renderer/src/helpers/ssrRenderTeleport.ts
index 8338ec06c..0dea2826f 100644
--- a/packages/server-renderer/src/helpers/ssrRenderTeleport.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderTeleport.ts
@@ -1,13 +1,18 @@
-import { ComponentInternalInstance, ssrContextKey } from 'vue'
-import { createBuffer, PushFn, SSRBufferItem, SSRContext } from '../render'
+import { type ComponentInternalInstance, ssrContextKey } from 'vue'
+import {
+  type PushFn,
+  type SSRBufferItem,
+  type SSRContext,
+  createBuffer,
+} from '../render'
 
 export function ssrRenderTeleport(
   parentPush: PushFn,
   contentRenderFn: (push: PushFn) => void,
   target: string,
   disabled: boolean,
-  parentComponent: ComponentInternalInstance
-) {
+  parentComponent: ComponentInternalInstance,
+): void {
   parentPush('<!--teleport start-->')
 
   const context = parentComponent.appContext.provides[
@@ -24,9 +29,10 @@ export function ssrRenderTeleport(
 
   if (disabled) {
     contentRenderFn(parentPush)
-    teleportContent = `<!--teleport anchor-->`
+    teleportContent = `<!--teleport start anchor--><!--teleport anchor-->`
   } else {
     const { getBuffer, push } = createBuffer()
+    push(`<!--teleport start anchor-->`)
     contentRenderFn(push)
     push(`<!--teleport anchor-->`)
     teleportContent = getBuffer()
diff --git a/packages/server-renderer/src/helpers/ssrVModelHelpers.ts b/packages/server-renderer/src/helpers/ssrVModelHelpers.ts
index 76b3d4f60..d7489105f 100644
--- a/packages/server-renderer/src/helpers/ssrVModelHelpers.ts
+++ b/packages/server-renderer/src/helpers/ssrVModelHelpers.ts
@@ -1,4 +1,4 @@
-import { looseEqual, looseIndexOf, isArray } from '@vue/shared'
+import { isArray, looseEqual, looseIndexOf } from '@vue/shared'
 import { ssrRenderAttr } from './ssrRenderAttrs'
 
 export const ssrLooseEqual = looseEqual as (a: unknown, b: unknown) => boolean
@@ -11,8 +11,8 @@ export function ssrLooseContain(arr: unknown[], value: unknown): boolean {
 export function ssrRenderDynamicModel(
   type: unknown,
   model: unknown,
-  value: unknown
-) {
+  value: unknown,
+): string {
   switch (type) {
     case 'radio':
       return looseEqual(model, value) ? ' checked' : ''
@@ -29,8 +29,8 @@ export function ssrRenderDynamicModel(
 // for <input v-bind="obj" v-model="model">
 export function ssrGetDynamicModelProps(
   existingProps: any = {},
-  model: unknown
-) {
+  model: unknown,
+): { checked: true } | { value: any } | null {
   const { type, value } = existingProps
   switch (type) {
     case 'radio':
diff --git a/packages/server-renderer/src/index.ts b/packages/server-renderer/src/index.ts
index 1e453c913..e339fe9f5 100644
--- a/packages/server-renderer/src/index.ts
+++ b/packages/server-renderer/src/index.ts
@@ -12,7 +12,7 @@ export {
   pipeToWebWritable,
   type SimpleReadable,
   // deprecated
-  renderToStream
+  renderToStream,
 } from './renderToStream'
 
 // internal runtime helpers
diff --git a/packages/server-renderer/src/internal.ts b/packages/server-renderer/src/internal.ts
index 93919fcb0..3a2054066 100644
--- a/packages/server-renderer/src/internal.ts
+++ b/packages/server-renderer/src/internal.ts
@@ -8,7 +8,7 @@ export {
   ssrRenderStyle,
   ssrRenderAttrs,
   ssrRenderAttr,
-  ssrRenderDynamicAttr
+  ssrRenderDynamicAttr,
 } from './helpers/ssrRenderAttrs'
 export { ssrInterpolate } from './helpers/ssrInterpolate'
 export { ssrRenderList } from './helpers/ssrRenderList'
@@ -21,5 +21,5 @@ export {
   ssrLooseEqual,
   ssrLooseContain,
   ssrRenderDynamicModel,
-  ssrGetDynamicModelProps
+  ssrGetDynamicModelProps,
 } from './helpers/ssrVModelHelpers'
diff --git a/packages/server-renderer/src/render.ts b/packages/server-renderer/src/render.ts
index 011d08403..f04080b9c 100644
--- a/packages/server-renderer/src/render.ts
+++ b/packages/server-renderer/src/render.ts
@@ -1,29 +1,29 @@
 import {
   Comment,
-  Component,
-  ComponentInternalInstance,
-  DirectiveBinding,
+  type Component,
+  type ComponentInternalInstance,
+  type DirectiveBinding,
   Fragment,
-  FunctionalComponent,
-  mergeProps,
-  ssrUtils,
+  type FunctionalComponent,
   Static,
   Text,
-  VNode,
-  VNodeArrayChildren,
-  VNodeProps,
-  warn
+  type VNode,
+  type VNodeArrayChildren,
+  type VNodeProps,
+  mergeProps,
+  ssrUtils,
+  warn,
 } from 'vue'
 import {
+  NOOP,
+  ShapeFlags,
   escapeHtml,
   escapeHtmlComment,
+  isArray,
   isFunction,
   isPromise,
   isString,
   isVoidTag,
-  ShapeFlags,
-  isArray,
-  NOOP
 } from '@vue/shared'
 import { ssrRenderAttrs } from './helpers/ssrRenderAttrs'
 import { ssrCompile } from './helpers/ssrCompile'
@@ -34,7 +34,9 @@ const {
   setCurrentRenderingInstance,
   setupComponent,
   renderComponentRoot,
-  normalizeVNode
+  normalizeVNode,
+  pushWarningContext,
+  popWarningContext,
 } = ssrUtils
 
 export type SSRBuffer = SSRBufferItem[] & { hasAsync?: boolean }
@@ -69,44 +71,51 @@ export function createBuffer() {
       // Return static buffer and await on items during unroll stage
       return buffer
     },
-    push(item: SSRBufferItem) {
+    push(item: SSRBufferItem): void {
       const isStringItem = isString(item)
       if (appendable && isStringItem) {
         buffer[buffer.length - 1] += item as string
-      } else {
-        buffer.push(item)
+        return
       }
+      buffer.push(item)
       appendable = isStringItem
       if (isPromise(item) || (isArray(item) && item.hasAsync)) {
         // promise, or child buffer with async, mark as async.
         // this allows skipping unnecessary await ticks during unroll stage
         buffer.hasAsync = true
       }
-    }
+    },
   }
 }
 
 export function renderComponentVNode(
   vnode: VNode,
   parentComponent: ComponentInternalInstance | null = null,
-  slotScopeId?: string
+  slotScopeId?: string,
 ): SSRBuffer | Promise<SSRBuffer> {
-  const instance = createComponentInstance(vnode, parentComponent, null)
+  const instance = (vnode.component = createComponentInstance(
+    vnode,
+    parentComponent,
+    null,
+  ))
+  if (__DEV__) pushWarningContext(vnode)
   const res = setupComponent(instance, true /* isSSR */)
+  if (__DEV__) popWarningContext()
   const hasAsyncSetup = isPromise(res)
-  const prefetches = instance.sp /* LifecycleHooks.SERVER_PREFETCH */
+  let prefetches = instance.sp /* LifecycleHooks.SERVER_PREFETCH */
   if (hasAsyncSetup || prefetches) {
-    let p: Promise<unknown> = hasAsyncSetup
-      ? (res as Promise<void>)
-      : Promise.resolve()
-    if (prefetches) {
-      p = p
-        .then(() =>
-          Promise.all(prefetches.map(prefetch => prefetch.call(instance.proxy)))
-        )
-        // Note: error display is already done by the wrapped lifecycle hook function.
-        .catch(() => {})
-    }
+    const p: Promise<unknown> = Promise.resolve(res as Promise<void>)
+      .then(() => {
+        // instance.sp may be null until an async setup resolves, so evaluate it here
+        if (hasAsyncSetup) prefetches = instance.sp
+        if (prefetches) {
+          return Promise.all(
+            prefetches.map(prefetch => prefetch.call(instance.proxy)),
+          )
+        }
+      })
+      // Note: error display is already done by the wrapped lifecycle hook function.
+      .catch(NOOP)
     return p.then(() => renderComponentSubTree(instance, slotScopeId))
   } else {
     return renderComponentSubTree(instance, slotScopeId)
@@ -115,8 +124,9 @@ export function renderComponentVNode(
 
 function renderComponentSubTree(
   instance: ComponentInternalInstance,
-  slotScopeId?: string
+  slotScopeId?: string,
 ): SSRBuffer | Promise<SSRBuffer> {
+  if (__DEV__) pushWarningContext(instance.vnode)
   const comp = instance.type as Component
   const { getBuffer, push } = createBuffer()
   if (isFunction(comp)) {
@@ -141,15 +151,6 @@ function renderComponentSubTree(
       comp.ssrRender = ssrCompile(comp.template, instance)
     }
 
-    // perf: enable caching of computed getters during render
-    // since there cannot be state mutations during render.
-    for (const e of instance.scope.effects) {
-      if (e.computed) {
-        e.computed._dirty = true
-        e.computed._cacheable = true
-      }
-    }
-
     const ssrRender = instance.ssrRender || comp.ssrRender
     if (ssrRender) {
       // optimized
@@ -179,7 +180,10 @@ function renderComponentSubTree(
 
       if (slotScopeId) {
         if (!hasCloned) attrs = { ...attrs }
-        attrs![slotScopeId.trim()] = ''
+        const slotScopeIdList = slotScopeId.trim().split(' ')
+        for (let i = 0; i < slotScopeIdList.length; i++) {
+          attrs![slotScopeIdList[i]] = ''
+        }
       }
 
       // set current rendering instance for asset resolution
@@ -194,7 +198,7 @@ function renderComponentSubTree(
           instance.props,
           instance.setupState,
           instance.data,
-          instance.ctx
+          instance.ctx,
         )
       } finally {
         setCurrentRenderingInstance(prev)
@@ -204,7 +208,7 @@ function renderComponentSubTree(
         push,
         (instance.subTree = renderComponentRoot(instance)),
         instance,
-        slotScopeId
+        slotScopeId,
       )
     } else {
       const componentName = comp.name || comp.__file || `<Anonymous>`
@@ -212,6 +216,7 @@ function renderComponentSubTree(
       push(`<!---->`)
     }
   }
+  if (__DEV__) popWarningContext()
   return getBuffer()
 }
 
@@ -219,16 +224,22 @@ export function renderVNode(
   push: PushFn,
   vnode: VNode,
   parentComponent: ComponentInternalInstance,
-  slotScopeId?: string
-) {
-  const { type, shapeFlag, children } = vnode
+  slotScopeId?: string,
+): void {
+  const { type, shapeFlag, children, dirs, props } = vnode
+  if (dirs) {
+    vnode.props = applySSRDirectives(vnode, props, dirs)
+  }
+
   switch (type) {
     case Text:
       push(escapeHtml(children as string))
       break
     case Comment:
       push(
-        children ? `<!--${escapeHtmlComment(children as string)}-->` : `<!---->`
+        children
+          ? `<!--${escapeHtmlComment(children as string)}-->`
+          : `<!---->`,
       )
       break
     case Static:
@@ -244,7 +255,7 @@ export function renderVNode(
         push,
         children as VNodeArrayChildren,
         parentComponent,
-        slotScopeId
+        slotScopeId,
       )
       push(`<!--]-->`) // close
       break
@@ -261,7 +272,7 @@ export function renderVNode(
         warn(
           '[@vue/server-renderer] Invalid VNode type:',
           type,
-          `(${typeof type})`
+          `(${typeof type})`,
         )
       }
   }
@@ -271,8 +282,8 @@ export function renderVNodeChildren(
   push: PushFn,
   children: VNodeArrayChildren,
   parentComponent: ComponentInternalInstance,
-  slotScopeId: string | undefined
-) {
+  slotScopeId?: string,
+): void {
   for (let i = 0; i < children.length; i++) {
     renderVNode(push, normalizeVNode(children[i]), parentComponent, slotScopeId)
   }
@@ -282,16 +293,12 @@ function renderElementVNode(
   push: PushFn,
   vnode: VNode,
   parentComponent: ComponentInternalInstance,
-  slotScopeId: string | undefined
+  slotScopeId?: string,
 ) {
   const tag = vnode.type as string
-  let { props, children, shapeFlag, scopeId, dirs } = vnode
+  let { props, children, shapeFlag, scopeId } = vnode
   let openTag = `<${tag}`
 
-  if (dirs) {
-    props = applySSRDirectives(vnode, props, dirs)
-  }
-
   if (props) {
     openTag += ssrRenderAttrs(props, tag)
   }
@@ -336,7 +343,7 @@ function renderElementVNode(
           push,
           children as VNodeArrayChildren,
           parentComponent,
-          slotScopeId
+          slotScopeId,
         )
       }
     }
@@ -347,13 +354,13 @@ function renderElementVNode(
 function applySSRDirectives(
   vnode: VNode,
   rawProps: VNodeProps | null,
-  dirs: DirectiveBinding[]
+  dirs: DirectiveBinding[],
 ): VNodeProps {
   const toMerge: VNodeProps[] = []
   for (let i = 0; i < dirs.length; i++) {
     const binding = dirs[i]
     const {
-      dir: { getSSRProps }
+      dir: { getSSRProps },
     } = binding
     if (getSSRProps) {
       const props = getSSRProps(binding, vnode)
@@ -367,7 +374,7 @@ function renderTeleportVNode(
   push: PushFn,
   vnode: VNode,
   parentComponent: ComponentInternalInstance,
-  slotScopeId: string | undefined
+  slotScopeId?: string,
 ) {
   const target = vnode.props && vnode.props.to
   const disabled = vnode.props && vnode.props.disabled
@@ -379,7 +386,7 @@ function renderTeleportVNode(
   }
   if (!isString(target)) {
     warn(
-      `[@vue/server-renderer] Teleport target must be a query selector string.`
+      `[@vue/server-renderer] Teleport target must be a query selector string.`,
     )
     return []
   }
@@ -390,11 +397,11 @@ function renderTeleportVNode(
         push,
         vnode.children as VNodeArrayChildren,
         parentComponent,
-        slotScopeId
+        slotScopeId,
       )
     },
     target,
     disabled || disabled === '',
-    parentComponent
+    parentComponent,
   )
 }
diff --git a/packages/server-renderer/src/renderToStream.ts b/packages/server-renderer/src/renderToStream.ts
index bdcdb0a02..e6b02d1cf 100644
--- a/packages/server-renderer/src/renderToStream.ts
+++ b/packages/server-renderer/src/renderToStream.ts
@@ -1,14 +1,14 @@
 import {
-  App,
-  VNode,
-  createVNode,
-  ssrUtils,
+  type App,
+  type VNode,
   createApp,
-  ssrContextKey
+  createVNode,
+  ssrContextKey,
+  ssrUtils,
 } from 'vue'
-import { isString, isPromise } from '@vue/shared'
-import { renderComponentVNode, SSRBuffer, SSRContext } from './render'
-import { Readable, Writable } from 'stream'
+import { isPromise, isString } from '@vue/shared'
+import { type SSRBuffer, type SSRContext, renderComponentVNode } from './render'
+import type { Readable, Writable } from 'node:stream'
 import { resolveTeleports } from './renderToString'
 
 const { isVNode } = ssrUtils
@@ -20,7 +20,7 @@ export interface SimpleReadable {
 
 async function unrollBuffer(
   buffer: SSRBuffer,
-  stream: SimpleReadable
+  stream: SimpleReadable,
 ): Promise<void> {
   if (buffer.hasAsync) {
     for (let i = 0; i < buffer.length; i++) {
@@ -56,14 +56,14 @@ function unrollBufferSync(buffer: SSRBuffer, stream: SimpleReadable) {
 export function renderToSimpleStream<T extends SimpleReadable>(
   input: App | VNode,
   context: SSRContext,
-  stream: T
+  stream: T,
 ): T {
   if (isVNode(input)) {
     // raw vnode, wrap with app (for context)
     return renderToSimpleStream(
       createApp({ render: () => input }),
       context,
-      stream
+      stream,
     )
   }
 
@@ -96,27 +96,27 @@ export function renderToSimpleStream<T extends SimpleReadable>(
  */
 export function renderToStream(
   input: App | VNode,
-  context: SSRContext = {}
+  context: SSRContext = {},
 ): Readable {
   console.warn(
-    `[@vue/server-renderer] renderToStream is deprecated - use renderToNodeStream instead.`
+    `[@vue/server-renderer] renderToStream is deprecated - use renderToNodeStream instead.`,
   )
   return renderToNodeStream(input, context)
 }
 
 export function renderToNodeStream(
   input: App | VNode,
-  context: SSRContext = {}
+  context: SSRContext = {},
 ): Readable {
-  const stream: Readable = __NODE_JS__
-    ? new (require('stream').Readable)({ read() {} })
+  const stream: Readable = __CJS__
+    ? new (require('node:stream').Readable)({ read() {} })
     : null
 
   if (!stream) {
     throw new Error(
       `ESM build of renderToStream() does not support renderToNodeStream(). ` +
         `Use pipeToNodeWritable() with an existing Node.js Writable stream ` +
-        `instance instead.`
+        `instance instead.`,
     )
   }
 
@@ -125,9 +125,9 @@ export function renderToNodeStream(
 
 export function pipeToNodeWritable(
   input: App | VNode,
-  context: SSRContext = {},
-  writable: Writable
-) {
+  context: SSRContext | undefined = {},
+  writable: Writable,
+): void {
   renderToSimpleStream(input, context, {
     push(content) {
       if (content != null) {
@@ -138,19 +138,19 @@ export function pipeToNodeWritable(
     },
     destroy(err) {
       writable.destroy(err)
-    }
+    },
   })
 }
 
 export function renderToWebStream(
   input: App | VNode,
-  context: SSRContext = {}
+  context: SSRContext = {},
 ): ReadableStream {
   if (typeof ReadableStream !== 'function') {
     throw new Error(
       `ReadableStream constructor is not available in the global scope. ` +
         `If the target environment does support web streams, consider using ` +
-        `pipeToWebWritable() with an existing WritableStream instance instead.`
+        `pipeToWebWritable() with an existing WritableStream instance instead.`,
     )
   }
 
@@ -170,19 +170,19 @@ export function renderToWebStream(
         },
         destroy(err) {
           controller.error(err)
-        }
+        },
       })
     },
     cancel() {
       cancelled = true
-    }
+    },
   })
 }
 
 export function pipeToWebWritable(
   input: App | VNode,
-  context: SSRContext = {},
-  writable: WritableStream
+  context: SSRContext | undefined = {},
+  writable: WritableStream,
 ): void {
   const writer = writable.getWriter()
   const encoder = new TextEncoder()
@@ -206,8 +206,9 @@ export function pipeToWebWritable(
     },
     destroy(err) {
       // TODO better error handling?
+      // eslint-disable-next-line no-console
       console.log(err)
       writer.close()
-    }
+    },
   })
 }
diff --git a/packages/server-renderer/src/renderToString.ts b/packages/server-renderer/src/renderToString.ts
index 2fdc39f68..9f7f9a1d7 100644
--- a/packages/server-renderer/src/renderToString.ts
+++ b/packages/server-renderer/src/renderToString.ts
@@ -1,36 +1,56 @@
 import {
-  App,
+  type App,
+  type VNode,
   createApp,
   createVNode,
   ssrContextKey,
   ssrUtils,
-  VNode
 } from 'vue'
 import { isPromise, isString } from '@vue/shared'
-import { SSRContext, renderComponentVNode, SSRBuffer } from './render'
+import { type SSRBuffer, type SSRContext, renderComponentVNode } from './render'
 
 const { isVNode } = ssrUtils
 
-async function unrollBuffer(buffer: SSRBuffer): Promise<string> {
-  if (buffer.hasAsync) {
-    let ret = ''
-    for (let i = 0; i < buffer.length; i++) {
-      let item = buffer[i]
-      if (isPromise(item)) {
-        item = await item
-      }
-      if (isString(item)) {
-        ret += item
-      } else {
-        ret += await unrollBuffer(item)
-      }
-    }
-    return ret
-  } else {
-    // sync buffer can be more efficiently unrolled without unnecessary await
-    // ticks
-    return unrollBufferSync(buffer)
+function nestedUnrollBuffer(
+  buffer: SSRBuffer,
+  parentRet: string,
+  startIndex: number,
+): Promise<string> | string {
+  if (!buffer.hasAsync) {
+    return parentRet + unrollBufferSync(buffer)
   }
+
+  let ret = parentRet
+  for (let i = startIndex; i < buffer.length; i += 1) {
+    const item = buffer[i]
+    if (isString(item)) {
+      ret += item
+      continue
+    }
+
+    if (isPromise(item)) {
+      return item.then(nestedItem => {
+        buffer[i] = nestedItem
+        return nestedUnrollBuffer(buffer, ret, i)
+      })
+    }
+
+    const result = nestedUnrollBuffer(item, ret, 0)
+    if (isPromise(result)) {
+      return result.then(nestedItem => {
+        buffer[i] = nestedItem
+        return nestedUnrollBuffer(buffer, '', i)
+      })
+    }
+
+    ret = result
+  }
+
+  return ret
+}
+
+export function unrollBuffer(buffer: SSRBuffer): Promise<string> | string {
+  return nestedUnrollBuffer(buffer, '', 0)
 }
 
 function unrollBufferSync(buffer: SSRBuffer): string {
@@ -49,7 +69,7 @@ function unrollBufferSync(buffer: SSRBuffer): string {
 
 export async function renderToString(
   input: App | VNode,
-  context: SSRContext = {}
+  context: SSRContext = {},
 ): Promise<string> {
   if (isVNode(input)) {
     // raw vnode, wrap with app (for context)
@@ -76,14 +96,14 @@ export async function renderToString(
   return result
 }
 
-export async function resolveTeleports(context: SSRContext) {
+export async function resolveTeleports(context: SSRContext): Promise<void> {
   if (context.__teleportBuffers) {
     context.teleports = context.teleports || {}
     for (const key in context.__teleportBuffers) {
       // note: it's OK to await sequentially here because the Promises were
       // created eagerly in parallel.
       context.teleports[key] = await unrollBuffer(
-        await Promise.all([context.__teleportBuffers[key]])
+        await Promise.all([context.__teleportBuffers[key]]),
       )
     }
   }
diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
deleted file mode 100644
index 0b97faba0..000000000
--- a/packages/sfc-playground/src/App.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<script setup lang="ts">
-import Header from './Header.vue'
-import { Repl, ReplStore, SFCOptions } from '@vue/repl'
-import type Monaco from '@vue/repl/monaco-editor'
-import type CodeMirror from '@vue/repl/codemirror-editor'
-import { ref, watchEffect, onMounted } from 'vue'
-import { shallowRef } from 'vue'
-
-const EditorComponent = shallowRef<typeof Monaco | typeof CodeMirror>()
-
-if (import.meta.env.DEV) {
-  import('@vue/repl/codemirror-editor').then(
-    mod => (EditorComponent.value = mod.default)
-  )
-} else {
-  import('@vue/repl/monaco-editor').then(
-    mod => (EditorComponent.value = mod.default)
-  )
-}
-
-const setVH = () => {
-  document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
-}
-window.addEventListener('resize', setVH)
-setVH()
-
-const useDevMode = ref(false)
-const useSSRMode = ref(false)
-
-let hash = location.hash.slice(1)
-if (hash.startsWith('__DEV__')) {
-  hash = hash.slice(7)
-  useDevMode.value = true
-}
-if (hash.startsWith('__SSR__')) {
-  hash = hash.slice(7)
-  useSSRMode.value = true
-}
-
-const store = new ReplStore({
-  serializedState: hash,
-  productionMode: !useDevMode.value,
-  defaultVueRuntimeURL: import.meta.env.PROD
-    ? `${location.origin}/vue.runtime.esm-browser.js`
-    : `${location.origin}/src/vue-dev-proxy`,
-  defaultVueRuntimeProdURL: import.meta.env.PROD
-    ? `${location.origin}/vue.runtime.esm-browser.prod.js`
-    : `${location.origin}/src/vue-dev-proxy-prod`,
-  defaultVueServerRendererURL: import.meta.env.PROD
-    ? `${location.origin}/server-renderer.esm-browser.js`
-    : `${location.origin}/src/vue-server-renderer-dev-proxy`
-})
-
-// enable experimental features
-const sfcOptions: SFCOptions = {
-  script: {
-    inlineTemplate: !useDevMode.value,
-    isProd: !useDevMode.value,
-    reactivityTransform: true,
-    defineModel: true
-  },
-  style: {
-    isProd: !useDevMode.value
-  },
-  template: {
-    isProd: !useDevMode.value
-  }
-}
-
-// persist state
-watchEffect(() => {
-  const newHash = store
-    .serialize()
-    .replace(/^#/, useSSRMode.value ? `#__SSR__` : `#`)
-    .replace(/^#/, useDevMode.value ? `#__DEV__` : `#`)
-  history.replaceState({}, '', newHash)
-})
-
-function toggleDevMode() {
-  const dev = (useDevMode.value = !useDevMode.value)
-  sfcOptions.script!.inlineTemplate =
-    sfcOptions.script!.isProd =
-    sfcOptions.template!.isProd =
-    sfcOptions.style!.isProd =
-      !dev
-  store.toggleProduction()
-}
-
-function toggleSSR() {
-  useSSRMode.value = !useSSRMode.value
-  store.setFiles(store.getFiles())
-}
-
-const theme = ref<'dark' | 'light'>('dark')
-function toggleTheme(isDark: boolean) {
-  theme.value = isDark ? 'dark' : 'light'
-}
-onMounted(() => {
-  const cls = document.documentElement.classList
-  toggleTheme(cls.contains('dark'))
-})
-</script>
-
-<template>
-  <Header
-    :store="store"
-    :dev="useDevMode"
-    :ssr="useSSRMode"
-    @toggle-theme="toggleTheme"
-    @toggle-dev="toggleDevMode"
-    @toggle-ssr="toggleSSR"
-  />
-  <Repl
-    v-if="EditorComponent"
-    :theme="theme"
-    :editor="EditorComponent"
-    @keydown.ctrl.s.prevent
-    @keydown.meta.s.prevent
-    :ssr="useSSRMode"
-    :store="store"
-    :showCompileOutput="true"
-    :autoResize="true"
-    :sfcOptions="sfcOptions"
-    :clearConsole="false"
-  />
-</template>
-
-<style>
-.dark {
-  color-scheme: dark;
-}
-
-body {
-  font-size: 13px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  margin: 0;
-  --base: #444;
-  --nav-height: 50px;
-}
-
-.vue-repl {
-  height: calc(var(--vh) - var(--nav-height)) !important;
-}
-
-button {
-  border: none;
-  outline: none;
-  cursor: pointer;
-  margin: 0;
-  background-color: transparent;
-}
-</style>
diff --git a/packages/sfc-playground/src/icons/GitHub.vue b/packages/sfc-playground/src/icons/GitHub.vue
deleted file mode 100644
index cc2506a78..000000000
--- a/packages/sfc-playground/src/icons/GitHub.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <svg width="1.7em" height="1.7em" viewBox="0 0 24 24" fill="currentColor">
-    <path
-        d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/>
-  </svg>
-</template>
diff --git a/packages/sfc-playground/src/icons/Moon.vue b/packages/sfc-playground/src/icons/Moon.vue
deleted file mode 100644
index 30c6eb515..000000000
--- a/packages/sfc-playground/src/icons/Moon.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
-  </svg>
-</template>
diff --git a/packages/sfc-playground/src/icons/Sun.vue b/packages/sfc-playground/src/icons/Sun.vue
deleted file mode 100644
index 4e4b1f409..000000000
--- a/packages/sfc-playground/src/icons/Sun.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
-    <path fill="currentColor" d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
-    <path fill="currentColor" d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
-    <path fill="currentColor" d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
-    <path fill="currentColor" d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
-    <path fill="currentColor" d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
-    <path fill="currentColor" d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
-    <path fill="currentColor" d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
-    <path fill="currentColor" d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
-  </svg>
-</template>
diff --git a/packages/sfc-playground/vite.config.ts b/packages/sfc-playground/vite.config.ts
deleted file mode 100644
index d4546da99..000000000
--- a/packages/sfc-playground/vite.config.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import { defineConfig, Plugin } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { execaSync } from 'execa'
-
-const commit = execaSync('git', ['rev-parse', '--short=7', 'HEAD']).stdout
-
-export default defineConfig({
-  plugins: [
-    vue({
-      script: {
-        defineModel: true,
-        fs: {
-          fileExists: fs.existsSync,
-          readFile: file => fs.readFileSync(file, 'utf-8')
-        }
-      }
-    }),
-    copyVuePlugin()
-  ],
-  define: {
-    __COMMIT__: JSON.stringify(commit),
-    __VUE_PROD_DEVTOOLS__: JSON.stringify(true)
-  },
-  optimizeDeps: {
-    exclude: ['@vue/repl']
-  }
-})
-
-function copyVuePlugin(): Plugin {
-  return {
-    name: 'copy-vue',
-    generateBundle() {
-      const copyFile = (file: string) => {
-        const filePath = path.resolve(__dirname, file)
-        const basename = path.basename(file)
-        if (!fs.existsSync(filePath)) {
-          throw new Error(
-            `${basename} not built. ` +
-              `Run "nr build vue -f esm-browser" first.`
-          )
-        }
-        this.emitFile({
-          type: 'asset',
-          fileName: basename,
-          source: fs.readFileSync(filePath, 'utf-8')
-        })
-      }
-
-      copyFile(`../vue/dist/vue.runtime.esm-browser.js`)
-      copyFile(`../vue/dist/vue.runtime.esm-browser.prod.js`)
-      copyFile(`../server-renderer/dist/server-renderer.esm-browser.js`)
-    }
-  }
-}
diff --git a/packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap b/packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap
index 762e32694..28486d717 100644
--- a/packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap
+++ b/packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap
@@ -1,62 +1,88 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler: codeframe > line in middle 1`] = `
-"2  |    <template key=\\"one\\"></template>
+exports[`compiler: codeframe > invalid start and end 1`] = `
+"1  |  <div>
+   |  ^
+2  |    <template key="one"></template>
+3  |    <ul>"
+`;
+
+exports[`compiler: codeframe > invalid start and end 2`] = `
+"1  |  <div>
+   |  ^^^^^
+2  |    <template key="one"></template>
+   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 3  |    <ul>
-4  |      <li v-for=\\"foobar\\">hi</li>
+   |  ^^^^^^
+4  |      <li v-for="foobar">hi</li>
+   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+5  |    </ul>
+   |  ^^^^^^^
+6  |    <template key="two"></template>
+   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+7  |  </div>
+   |  ^^^^^^"
+`;
+
+exports[`compiler: codeframe > invalid start and end 3`] = `""`;
+
+exports[`compiler: codeframe > line in middle 1`] = `
+"2  |    <template key="one"></template>
+3  |    <ul>
+4  |      <li v-for="foobar">hi</li>
    |          ^^^^^^^^^^^^^^
 5  |    </ul>
-6  |    <template key=\\"two\\"></template>"
+6  |    <template key="two"></template>"
 `;
 
 exports[`compiler: codeframe > line near bottom 1`] = `
-"4  |      <li v-for=\\"foobar\\">hi</li>
+"4  |      <li v-for="foobar">hi</li>
 5  |    </ul>
-6  |    <template key=\\"two\\"></template>
+6  |    <template key="two"></template>
    |              ^^^^^^^^^
 7  |  </div>"
 `;
 
 exports[`compiler: codeframe > line near top 1`] = `
 "1  |  <div>
-2  |    <template key=\\"one\\"></template>
+2  |    <template key="one"></template>
    |              ^^^^^^^^^
 3  |    <ul>
-4  |      <li v-for=\\"foobar\\">hi</li>"
+4  |      <li v-for="foobar">hi</li>"
 `;
 
 exports[`compiler: codeframe > multi-line highlights 1`] = `
-"1  |  <div attr=\\"some
+"1  |  <div attr="some
    |       ^^^^^^^^^^
 2  |    multiline
    |  ^^^^^^^^^^^
 3  |  attr
    |  ^^^^
-4  |  \\">
+4  |  ">
    |  ^"
 `;
 
 exports[`compiler: codeframe > newline sequences - unix 1`] = `
-"8  |          <input name=\\"email\\" type=\\"text\\"/>
+"8  |          <input name="email" type="text"/>
 9  |        </div>
-10 |        <div id=\\"hook\\">
+10 |        <div id="hook">
    |        ^^^^^^^^^^^^^^^
-11 |          <label for=\\"password\\">Password</label>
+11 |          <label for="password">Password</label>
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-12 |          <input name=\\"password\\" type=\\"password\\"/>
+12 |          <input name="password" type="password"/>
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 13 |        </div>
    |  ^^^^^^^^^^^^"
 `;
 
 exports[`compiler: codeframe > newline sequences - windows 1`] = `
-"8  |          <input name=\\"email\\" type=\\"text\\"/>
+"8  |          <input name="email" type="text"/>
 9  |        </div>
-10 |        <div id=\\"hook\\">
+10 |        <div id="hook">
    |        ^^^^^^^^^^^^^^^
-11 |          <label for=\\"password\\">Password</label>
+11 |          <label for="password">Password</label>
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-12 |          <input name=\\"password\\" type=\\"password\\"/>
+12 |          <input name="password" type="password"/>
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 13 |        </div>
    |  ^^^^^^^^^^^^"
diff --git a/packages/shared/__tests__/codeframe.spec.ts b/packages/shared/__tests__/codeframe.spec.ts
index 508310048..41ad08b2a 100644
--- a/packages/shared/__tests__/codeframe.spec.ts
+++ b/packages/shared/__tests__/codeframe.spec.ts
@@ -44,6 +44,12 @@ attr
     expect(generateCodeFrame(source, attrStart, attrEnd)).toMatchSnapshot()
   })
 
+  test('invalid start and end', () => {
+    expect(generateCodeFrame(source, -Infinity, 0)).toMatchSnapshot()
+    expect(generateCodeFrame(source, 0, Infinity)).toMatchSnapshot()
+    expect(generateCodeFrame(source, Infinity, 0)).toMatchSnapshot()
+  })
+
   {
     const source = `
 <template>
@@ -75,7 +81,7 @@ attr
       const keyEnd =
         windowsNewLineSource.indexOf(endToken, keyStart) + endToken.length
       expect(
-        generateCodeFrame(windowsNewLineSource, keyStart, keyEnd)
+        generateCodeFrame(windowsNewLineSource, keyStart, keyEnd),
       ).toMatchSnapshot()
     })
 
@@ -84,7 +90,7 @@ attr
       const keyEnd =
         unixNewlineSource.indexOf(endToken, keyStart) + endToken.length
       expect(
-        generateCodeFrame(unixNewlineSource, keyStart, keyEnd)
+        generateCodeFrame(unixNewlineSource, keyStart, keyEnd),
       ).toMatchSnapshot()
     })
   }
diff --git a/packages/shared/__tests__/looseEqual.spec.ts b/packages/shared/__tests__/looseEqual.spec.ts
index 67b69dd76..2dea58ce5 100644
--- a/packages/shared/__tests__/looseEqual.spec.ts
+++ b/packages/shared/__tests__/looseEqual.spec.ts
@@ -69,27 +69,27 @@ describe('utils/looseEqual', () => {
     const date2 = new Date(2019, 1, 2, 3, 4, 5, 7)
     const file1 = new File([''], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
     const file2 = new File([''], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
     const file3 = new File([''], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date2.getTime()
+      lastModified: date2.getTime(),
     })
     const file4 = new File([''], 'filename.csv', {
       type: 'text/csv',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
     const file5 = new File(['abcdef'], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
     const file6 = new File(['12345'], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
 
     // Identical file object references
@@ -178,7 +178,7 @@ describe('utils/looseEqual', () => {
     const date1 = new Date(2019, 1, 2, 3, 4, 5, 6)
     const file1 = new File([''], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
 
     expect(looseEqual(123, '123')).toBe(true)
diff --git a/packages/shared/__tests__/normalizeProp.spec.ts b/packages/shared/__tests__/normalizeProp.spec.ts
index bf9cf7e33..4e5736af4 100644
--- a/packages/shared/__tests__/normalizeProp.spec.ts
+++ b/packages/shared/__tests__/normalizeProp.spec.ts
@@ -11,7 +11,7 @@ describe('normalizeClass', () => {
 
   test('handles array correctly', () => {
     expect(normalizeClass(['foo', undefined, true, false, 'bar'])).toEqual(
-      'foo bar'
+      'foo bar',
     )
   })
 
@@ -25,7 +25,7 @@ describe('normalizeClass', () => {
 
   test('handles object correctly', () => {
     expect(normalizeClass({ foo: true, bar: false, baz: true })).toEqual(
-      'foo baz'
+      'foo baz',
     )
   })
 
@@ -35,7 +35,7 @@ describe('normalizeClass', () => {
 
   test('handles arrays and objects correctly', () => {
     expect(
-      normalizeClass(['foo', ['bar'], { baz: true }, [{ qux: true }]])
+      normalizeClass(['foo', ['bar'], { baz: true }, [{ qux: true }]]),
     ).toEqual('foo bar baz qux')
   })
 
@@ -48,8 +48,8 @@ describe('normalizeClass', () => {
         { qux: '' },
         { quux: null },
         { corge: undefined },
-        { grault: NaN }
-      ])
+        { grault: NaN },
+      ]),
     ).toEqual('')
   })
 
@@ -60,8 +60,8 @@ describe('normalizeClass', () => {
         { bar: 'not-empty' },
         { baz: 1 },
         { qux: {} },
-        { quux: [] }
-      ])
+        { quux: [] },
+      ]),
     ).toEqual('foo bar baz qux quux')
   })
 
@@ -76,7 +76,7 @@ describe('normalizeClass', () => {
         #ccc 0.5em,
         white 0,
         white 0.75em
-      );`)
+      );`),
     ).toMatchInlineSnapshot(`
       {
         "background": "linear-gradient(white, white) padding-box,
diff --git a/packages/shared/__tests__/toDisplayString.spec.ts b/packages/shared/__tests__/toDisplayString.spec.ts
index 5255c0e40..cd8db0b47 100644
--- a/packages/shared/__tests__/toDisplayString.spec.ts
+++ b/packages/shared/__tests__/toDisplayString.spec.ts
@@ -11,12 +11,28 @@ describe('toDisplayString', () => {
   })
 
   test('primitive values', () => {
+    expect(toDisplayString(0)).toBe('0')
     expect(toDisplayString(1)).toBe('1')
+    expect(toDisplayString(NaN)).toBe('NaN')
     expect(toDisplayString(true)).toBe('true')
     expect(toDisplayString(false)).toBe('false')
     expect(toDisplayString('hello')).toBe('hello')
   })
 
+  test('primitive values in refs', () => {
+    expect(toDisplayString(ref(0))).toBe('0')
+    expect(toDisplayString(ref(1))).toBe('1')
+    expect(toDisplayString(ref(NaN))).toBe('NaN')
+    expect(toDisplayString(ref(true))).toBe('true')
+    expect(toDisplayString(ref(false))).toBe('false')
+    expect(toDisplayString(ref('hello'))).toBe('hello')
+  })
+
+  test('symbol values', () => {
+    expect(toDisplayString(Symbol('hello'))).toBe('Symbol(hello)')
+    expect(toDisplayString(ref(Symbol('hello')))).toBe('Symbol(hello)')
+  })
+
   test('Object and Arrays', () => {
     const obj = { foo: 123 }
     expect(toDisplayString(obj)).toBe(JSON.stringify(obj, null, 2))
@@ -27,19 +43,19 @@ describe('toDisplayString', () => {
       foo: 555,
       toString() {
         return 'override'
-      }
+      },
     }
     expect(toDisplayString(objWithToStringOverride)).toBe('override')
 
     const objWithNonInvokableToString = {
       foo: 555,
-      toString: null
+      toString: null,
     }
     expect(toDisplayString(objWithNonInvokableToString)).toBe(
       `{
   "foo": 555,
   "toString": null
-}`
+}`,
     )
 
     // object created from null does not have .toString in its prototype
@@ -48,7 +64,7 @@ describe('toDisplayString', () => {
     expect(toDisplayString(nullObjectWithoutToString)).toBe(
       `{
   "bar": 1
-}`
+}`,
     )
 
     // array toString override is ignored
@@ -60,7 +76,7 @@ describe('toDisplayString', () => {
   1,
   2,
   3
-]`
+]`,
     )
   })
 
@@ -70,8 +86,8 @@ describe('toDisplayString', () => {
     expect(
       toDisplayString({
         n,
-        np
-      })
+        np,
+      }),
     ).toBe(JSON.stringify({ n: 1, np: 2 }, null, 2))
   })
 
@@ -92,7 +108,7 @@ describe('toDisplayString', () => {
     expect(toDisplayString(div)).toMatch('[object HTMLDivElement]')
     expect(toDisplayString({ div })).toMatchInlineSnapshot(`
       "{
-        \\"div\\": \\"[object HTMLDivElement]\\"
+        "div": "[object HTMLDivElement]"
       }"
     `)
   })
@@ -100,34 +116,34 @@ describe('toDisplayString', () => {
   test('Map and Set', () => {
     const m = new Map<any, any>([
       [1, 'foo'],
-      [{ baz: 1 }, { foo: 'bar', qux: 2 }]
+      [{ baz: 1 }, { foo: 'bar', qux: 2 }],
     ])
     const s = new Set<any>([1, { foo: 'bar' }, m])
 
     expect(toDisplayString(m)).toMatchInlineSnapshot(`
       "{
-        \\"Map(2)\\": {
-          \\"1 =>\\": \\"foo\\",
-          \\"[object Object] =>\\": {
-            \\"foo\\": \\"bar\\",
-            \\"qux\\": 2
+        "Map(2)": {
+          "1 =>": "foo",
+          "[object Object] =>": {
+            "foo": "bar",
+            "qux": 2
           }
         }
       }"
     `)
     expect(toDisplayString(s)).toMatchInlineSnapshot(`
       "{
-        \\"Set(3)\\": [
+        "Set(3)": [
           1,
           {
-            \\"foo\\": \\"bar\\"
+            "foo": "bar"
           },
           {
-            \\"Map(2)\\": {
-              \\"1 =>\\": \\"foo\\",
-              \\"[object Object] =>\\": {
-                \\"foo\\": \\"bar\\",
-                \\"qux\\": 2
+            "Map(2)": {
+              "1 =>": "foo",
+              "[object Object] =>": {
+                "foo": "bar",
+                "qux": 2
               }
             }
           }
@@ -138,31 +154,31 @@ describe('toDisplayString', () => {
     expect(
       toDisplayString({
         m,
-        s
-      })
+        s,
+      }),
     ).toMatchInlineSnapshot(`
       "{
-        \\"m\\": {
-          \\"Map(2)\\": {
-            \\"1 =>\\": \\"foo\\",
-            \\"[object Object] =>\\": {
-              \\"foo\\": \\"bar\\",
-              \\"qux\\": 2
+        "m": {
+          "Map(2)": {
+            "1 =>": "foo",
+            "[object Object] =>": {
+              "foo": "bar",
+              "qux": 2
             }
           }
         },
-        \\"s\\": {
-          \\"Set(3)\\": [
+        "s": {
+          "Set(3)": [
             1,
             {
-              \\"foo\\": \\"bar\\"
+              "foo": "bar"
             },
             {
-              \\"Map(2)\\": {
-                \\"1 =>\\": \\"foo\\",
-                \\"[object Object] =>\\": {
-                  \\"foo\\": \\"bar\\",
-                  \\"qux\\": 2
+              "Map(2)": {
+                "1 =>": "foo",
+                "[object Object] =>": {
+                  "foo": "bar",
+                  "qux": 2
                 }
               }
             }
@@ -171,4 +187,49 @@ describe('toDisplayString', () => {
       }"
     `)
   })
+
+  //#9727
+  test('Map with Symbol keys', () => {
+    const m = new Map<any, any>([
+      [Symbol(), 'foo'],
+      [Symbol(), 'bar'],
+      [Symbol('baz'), 'baz'],
+    ])
+    expect(toDisplayString(m)).toMatchInlineSnapshot(`
+      "{
+        "Map(3)": {
+          "Symbol(0) =>": "foo",
+          "Symbol(1) =>": "bar",
+          "Symbol(baz) =>": "baz"
+        }
+      }"
+    `)
+    // confirming the symbol renders Symbol(foo)
+    expect(toDisplayString(new Map([[Symbol('foo'), 'foo']]))).toContain(
+      String(Symbol('foo')),
+    )
+  })
+
+  test('Set with Symbol values', () => {
+    const s = new Set([Symbol('foo'), Symbol('bar'), Symbol()])
+    expect(toDisplayString(s)).toMatchInlineSnapshot(`
+      "{
+        "Set(3)": [
+          "Symbol(foo)",
+          "Symbol(bar)",
+          "Symbol()"
+        ]
+      }"
+    `)
+  })
+
+  test('Object with Symbol values', () => {
+    expect(toDisplayString({ foo: Symbol('x'), bar: Symbol() }))
+      .toMatchInlineSnapshot(`
+      "{
+        "foo": "Symbol(x)",
+        "bar": "Symbol()"
+      }"
+    `)
+  })
 })
diff --git a/packages/shared/package.json b/packages/shared/package.json
index ce4c40d65..dbd2a8f2c 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/shared",
-  "version": "3.3.9",
+  "version": "3.5.11",
   "description": "internal utils shared across @vue packages",
   "main": "index.js",
   "module": "dist/shared.esm-bundler.js",
@@ -9,6 +9,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/shared.d.ts",
+      "node": {
+        "production": "./dist/shared.cjs.prod.js",
+        "development": "./dist/shared.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/shared.esm-bundler.js",
+      "import": "./dist/shared.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "sideEffects": false,
   "buildOptions": {
     "formats": [
diff --git a/packages/shared/src/codeframe.ts b/packages/shared/src/codeframe.ts
index 82b38bfb3..1fdb606ae 100644
--- a/packages/shared/src/codeframe.ts
+++ b/packages/shared/src/codeframe.ts
@@ -3,8 +3,14 @@ const range: number = 2
 export function generateCodeFrame(
   source: string,
   start = 0,
-  end = source.length
+  end: number = source.length,
 ): string {
+  // Ensure start and end are within the source length
+  start = Math.max(0, Math.min(start, source.length))
+  end = Math.max(0, Math.min(end, source.length))
+
+  if (start > end) return ''
+
   // Split the content into individual lines but capture the newline sequence
   // that separated each line. This is important because the actual sequence is
   // needed to properly take into account the full line length for offset
@@ -28,7 +34,7 @@ export function generateCodeFrame(
         res.push(
           `${line}${' '.repeat(Math.max(3 - String(line).length, 0))}|  ${
             lines[j]
-          }`
+          }`,
         )
         const lineLength = lines[j].length
         const newLineSeqLength =
@@ -39,7 +45,7 @@ export function generateCodeFrame(
           const pad = start - (count - (lineLength + newLineSeqLength))
           const length = Math.max(
             1,
-            end > count ? lineLength - pad : end - start
+            end > count ? lineLength - pad : end - start,
           )
           res.push(`   |  ` + ' '.repeat(pad) + '^'.repeat(length))
         } else if (j > i) {
diff --git a/packages/shared/src/domAttrConfig.ts b/packages/shared/src/domAttrConfig.ts
index 5f7f851b0..b5f016632 100644
--- a/packages/shared/src/domAttrConfig.ts
+++ b/packages/shared/src/domAttrConfig.ts
@@ -12,16 +12,17 @@ import { makeMap } from './makeMap'
  * - readonly -> readOnly
  */
 const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`
-export const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs)
+export const isSpecialBooleanAttr: (key: string) => boolean =
+  /*@__PURE__*/ makeMap(specialBooleanAttrs)
 
 /**
  * The full list is needed during SSR to produce the correct initial markup.
  */
-export const isBooleanAttr = /*#__PURE__*/ makeMap(
+export const isBooleanAttr: (key: string) => boolean = /*@__PURE__*/ makeMap(
   specialBooleanAttrs +
     `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,` +
     `inert,loop,open,required,reversed,scoped,seamless,` +
-    `checked,muted,multiple,selected`
+    `checked,muted,multiple,selected`,
 )
 
 /**
@@ -50,7 +51,7 @@ export const propsToAttrMap: Record<string, string | undefined> = {
   acceptCharset: 'accept-charset',
   className: 'class',
   htmlFor: 'for',
-  httpEquiv: 'http-equiv'
+  httpEquiv: 'http-equiv',
 }
 
 /**
@@ -59,7 +60,7 @@ export const propsToAttrMap: Record<string, string | undefined> = {
  * Don't also forget to allow `data-*` and `aria-*`!
  * Generated from https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
  */
-export const isKnownHtmlAttr = /*#__PURE__*/ makeMap(
+export const isKnownHtmlAttr: (key: string) => boolean = /*@__PURE__*/ makeMap(
   `accept,accept-charset,accesskey,action,align,allow,alt,async,` +
     `autocapitalize,autocomplete,autofocus,autoplay,background,bgcolor,` +
     `border,buffered,capture,challenge,charset,checked,cite,class,code,` +
@@ -74,13 +75,13 @@ export const isKnownHtmlAttr = /*#__PURE__*/ makeMap(
     `referrerpolicy,rel,required,reversed,rows,rowspan,sandbox,scope,scoped,` +
     `selected,shape,size,sizes,slot,span,spellcheck,src,srcdoc,srclang,srcset,` +
     `start,step,style,summary,tabindex,target,title,translate,type,usemap,` +
-    `value,width,wrap`
+    `value,width,wrap`,
 )
 
 /**
  * Generated from https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
  */
-export const isKnownSvgAttr = /*#__PURE__*/ makeMap(
+export const isKnownSvgAttr: (key: string) => boolean = /*@__PURE__*/ makeMap(
   `xmlns,accent-height,accumulate,additive,alignment-baseline,alphabetic,amplitude,` +
     `arabic-form,ascent,attributeName,attributeType,azimuth,baseFrequency,` +
     `baseline-shift,baseProfile,bbox,begin,bias,by,calcMode,cap-height,class,` +
@@ -118,6 +119,36 @@ export const isKnownSvgAttr = /*#__PURE__*/ makeMap(
     `v-mathematical,values,vector-effect,version,vert-adv-y,vert-origin-x,` +
     `vert-origin-y,viewBox,viewTarget,visibility,width,widths,word-spacing,` +
     `writing-mode,x,x-height,x1,x2,xChannelSelector,xlink:actuate,xlink:arcrole,` +
-    `xlink:href,xlink:role,xlink:show,xlink:title,xlink:type,xml:base,xml:lang,` +
-    `xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan`
+    `xlink:href,xlink:role,xlink:show,xlink:title,xlink:type,xmlns:xlink,xml:base,xml:lang,` +
+    `xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan`,
 )
+
+/**
+ * Generated from https://developer.mozilla.org/en-US/docs/Web/MathML/Attribute
+ */
+export const isKnownMathMLAttr: (key: string) => boolean =
+  /*@__PURE__*/ makeMap(
+    `accent,accentunder,actiontype,align,alignmentscope,altimg,altimg-height,` +
+      `altimg-valign,altimg-width,alttext,bevelled,close,columnsalign,columnlines,` +
+      `columnspan,denomalign,depth,dir,display,displaystyle,encoding,` +
+      `equalcolumns,equalrows,fence,fontstyle,fontweight,form,frame,framespacing,` +
+      `groupalign,height,href,id,indentalign,indentalignfirst,indentalignlast,` +
+      `indentshift,indentshiftfirst,indentshiftlast,indextype,justify,` +
+      `largetop,largeop,lquote,lspace,mathbackground,mathcolor,mathsize,` +
+      `mathvariant,maxsize,minlabelspacing,mode,other,overflow,position,` +
+      `rowalign,rowlines,rowspan,rquote,rspace,scriptlevel,scriptminsize,` +
+      `scriptsizemultiplier,selection,separator,separators,shift,side,` +
+      `src,stackalign,stretchy,subscriptshift,superscriptshift,symmetric,` +
+      `voffset,width,widths,xlink:href,xlink:show,xlink:type,xmlns`,
+  )
+
+/**
+ * Shared between server-renderer and runtime-core hydration logic
+ */
+export function isRenderableAttrValue(value: unknown): boolean {
+  if (value == null) {
+    return false
+  }
+  const type = typeof value
+  return type === 'string' || type === 'number' || type === 'boolean'
+}
diff --git a/packages/shared/src/domTagConfig.ts b/packages/shared/src/domTagConfig.ts
index 535aa6be7..7f9d198e5 100644
--- a/packages/shared/src/domTagConfig.ts
+++ b/packages/shared/src/domTagConfig.ts
@@ -27,6 +27,14 @@ const SVG_TAGS =
   'polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,' +
   'text,textPath,title,tspan,unknown,use,view'
 
+// https://www.w3.org/TR/mathml4/ (content elements excluded)
+const MATH_TAGS =
+  'annotation,annotation-xml,maction,maligngroup,malignmark,math,menclose,' +
+  'merror,mfenced,mfrac,mfraction,mglyph,mi,mlabeledtr,mlongdiv,' +
+  'mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,' +
+  'mscarries,mscarry,msgroup,msline,mspace,msqrt,msrow,mstack,mstyle,msub,' +
+  'msubsup,msup,mtable,mtd,mtext,mtr,munder,munderover,none,semantics'
+
 const VOID_TAGS =
   'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr'
 
@@ -34,14 +42,23 @@ const VOID_TAGS =
  * Compiler only.
  * Do NOT use in runtime code paths unless behind `__DEV__` flag.
  */
-export const isHTMLTag = /*#__PURE__*/ makeMap(HTML_TAGS)
+export const isHTMLTag: (key: string) => boolean =
+  /*@__PURE__*/ makeMap(HTML_TAGS)
 /**
  * Compiler only.
  * Do NOT use in runtime code paths unless behind `__DEV__` flag.
  */
-export const isSVGTag = /*#__PURE__*/ makeMap(SVG_TAGS)
+export const isSVGTag: (key: string) => boolean =
+  /*@__PURE__*/ makeMap(SVG_TAGS)
 /**
  * Compiler only.
  * Do NOT use in runtime code paths unless behind `__DEV__` flag.
  */
-export const isVoidTag = /*#__PURE__*/ makeMap(VOID_TAGS)
+export const isMathMLTag: (key: string) => boolean =
+  /*@__PURE__*/ makeMap(MATH_TAGS)
+/**
+ * Compiler only.
+ * Do NOT use in runtime code paths unless behind `__DEV__` flag.
+ */
+export const isVoidTag: (key: string) => boolean =
+  /*@__PURE__*/ makeMap(VOID_TAGS)
diff --git a/packages/shared/src/escapeHtml.ts b/packages/shared/src/escapeHtml.ts
index bacd182ad..e3af6c0c1 100644
--- a/packages/shared/src/escapeHtml.ts
+++ b/packages/shared/src/escapeHtml.ts
@@ -1,6 +1,6 @@
 const escapeRE = /["'&<>]/
 
-export function escapeHtml(string: unknown) {
+export function escapeHtml(string: unknown): string {
   const str = '' + string
   const match = escapeRE.exec(str)
 
@@ -50,3 +50,15 @@ const commentStripRE = /^-?>|<!--|-->|--!>|<!-$/g
 export function escapeHtmlComment(src: string): string {
   return src.replace(commentStripRE, '')
 }
+
+export const cssVarNameEscapeSymbolsRE: RegExp =
+  /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
+
+export function getEscapedCssVarName(
+  key: string,
+  doubleEscape: boolean,
+): string {
+  return key.replace(cssVarNameEscapeSymbolsRE, s =>
+    doubleEscape ? (s === '"' ? '\\\\\\"' : `\\\\${s}`) : `\\${s}`,
+  )
+}
diff --git a/packages/shared/src/general.ts b/packages/shared/src/general.ts
index dcde4c8c6..9c6a23132 100644
--- a/packages/shared/src/general.ts
+++ b/packages/shared/src/general.ts
@@ -3,26 +3,27 @@ import { makeMap } from './makeMap'
 export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
   ? Object.freeze({})
   : {}
-export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []
+export const EMPTY_ARR: readonly never[] = __DEV__ ? Object.freeze([]) : []
 
-export const NOOP = () => {}
+export const NOOP = (): void => {}
 
 /**
  * Always return false.
  */
 export const NO = () => false
 
-export const isOn = (key: string) =>
+export const isOn = (key: string): boolean =>
   key.charCodeAt(0) === 111 /* o */ &&
   key.charCodeAt(1) === 110 /* n */ &&
   // uppercase letter
   (key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97)
 
-export const isModelListener = (key: string) => key.startsWith('onUpdate:')
+export const isModelListener = (key: string): key is `onUpdate:${string}` =>
+  key.startsWith('onUpdate:')
 
-export const extend = Object.assign
+export const extend: typeof Object.assign = Object.assign
 
-export const remove = <T>(arr: T[], el: T) => {
+export const remove = <T>(arr: T[], el: T): void => {
   const i = arr.indexOf(el)
   if (i > -1) {
     arr.splice(i, 1)
@@ -32,10 +33,10 @@ export const remove = <T>(arr: T[], el: T) => {
 const hasOwnProperty = Object.prototype.hasOwnProperty
 export const hasOwn = (
   val: object,
-  key: string | symbol
+  key: string | symbol,
 ): key is keyof typeof val => hasOwnProperty.call(val, key)
 
-export const isArray = Array.isArray
+export const isArray: typeof Array.isArray = Array.isArray
 export const isMap = (val: unknown): val is Map<any, any> =>
   toTypeString(val) === '[object Map]'
 export const isSet = (val: unknown): val is Set<any> =>
@@ -60,7 +61,8 @@ export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
   )
 }
 
-export const objectToString = Object.prototype.toString
+export const objectToString: typeof Object.prototype.toString =
+  Object.prototype.toString
 export const toTypeString = (value: unknown): string =>
   objectToString.call(value)
 
@@ -72,23 +74,24 @@ export const toRawType = (value: unknown): string => {
 export const isPlainObject = (val: unknown): val is object =>
   toTypeString(val) === '[object Object]'
 
-export const isIntegerKey = (key: unknown) =>
+export const isIntegerKey = (key: unknown): boolean =>
   isString(key) &&
   key !== 'NaN' &&
   key[0] !== '-' &&
   '' + parseInt(key, 10) === key
 
-export const isReservedProp = /*#__PURE__*/ makeMap(
+export const isReservedProp: (key: string) => boolean = /*@__PURE__*/ makeMap(
   // the leading comma is intentional so empty string "" is also included
   ',key,ref,ref_for,ref_key,' +
     'onVnodeBeforeMount,onVnodeMounted,' +
     'onVnodeBeforeUpdate,onVnodeUpdated,' +
-    'onVnodeBeforeUnmount,onVnodeUnmounted'
+    'onVnodeBeforeUnmount,onVnodeUnmounted',
 )
 
-export const isBuiltInDirective = /*#__PURE__*/ makeMap(
-  'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo'
-)
+export const isBuiltInDirective: (key: string) => boolean =
+  /*@__PURE__*/ makeMap(
+    'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo',
+  )
 
 const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {
   const cache: Record<string, string> = Object.create(null)
@@ -102,48 +105,61 @@ const camelizeRE = /-(\w)/g
 /**
  * @private
  */
-export const camelize = cacheStringFunction((str: string): string => {
-  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))
-})
+export const camelize: (str: string) => string = cacheStringFunction(
+  (str: string): string => {
+    return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))
+  },
+)
 
 const hyphenateRE = /\B([A-Z])/g
 /**
  * @private
  */
-export const hyphenate = cacheStringFunction((str: string) =>
-  str.replace(hyphenateRE, '-$1').toLowerCase()
+export const hyphenate: (str: string) => string = cacheStringFunction(
+  (str: string) => str.replace(hyphenateRE, '-$1').toLowerCase(),
 )
 
 /**
  * @private
  */
-export const capitalize = cacheStringFunction(<T extends string>(str: T) => {
-  return (str.charAt(0).toUpperCase() + str.slice(1)) as Capitalize<T>
-})
+export const capitalize: <T extends string>(str: T) => Capitalize<T> =
+  cacheStringFunction(<T extends string>(str: T) => {
+    return (str.charAt(0).toUpperCase() + str.slice(1)) as Capitalize<T>
+  })
 
 /**
  * @private
  */
-export const toHandlerKey = cacheStringFunction(<T extends string>(str: T) => {
-  const s = str ? `on${capitalize(str)}` : ``
-  return s as T extends '' ? '' : `on${Capitalize<T>}`
-})
+export const toHandlerKey: <T extends string>(
+  str: T,
+) => T extends '' ? '' : `on${Capitalize<T>}` = cacheStringFunction(
+  <T extends string>(str: T) => {
+    const s = str ? `on${capitalize(str)}` : ``
+    return s as T extends '' ? '' : `on${Capitalize<T>}`
+  },
+)
 
 // compare whether a value has changed, accounting for NaN.
 export const hasChanged = (value: any, oldValue: any): boolean =>
   !Object.is(value, oldValue)
 
-export const invokeArrayFns = (fns: Function[], arg?: any) => {
+export const invokeArrayFns = (fns: Function[], ...arg: any[]): void => {
   for (let i = 0; i < fns.length; i++) {
-    fns[i](arg)
+    fns[i](...arg)
   }
 }
 
-export const def = (obj: object, key: string | symbol, value: any) => {
+export const def = (
+  obj: object,
+  key: string | symbol,
+  value: any,
+  writable = false,
+): void => {
   Object.defineProperty(obj, key, {
     configurable: true,
     enumerable: false,
-    value
+    writable,
+    value,
   })
 }
 
@@ -165,6 +181,9 @@ export const toNumber = (val: any): any => {
   return isNaN(n) ? val : n
 }
 
+// for typeof global checks without @types/node
+declare var global: {}
+
 let _globalThis: any
 export const getGlobalThis = (): any => {
   return (
@@ -184,8 +203,17 @@ export const getGlobalThis = (): any => {
 
 const identRE = /^[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*$/
 
-export function genPropsAccessExp(name: string) {
+export function genPropsAccessExp(name: string): string {
   return identRE.test(name)
     ? `__props.${name}`
     : `__props[${JSON.stringify(name)}]`
 }
+
+export function genCacheKey(source: string, options: any): string {
+  return (
+    source +
+    JSON.stringify(options, (_, val) =>
+      typeof val === 'function' ? val.toString() : val,
+    )
+  )
+}
diff --git a/packages/shared/src/globalsAllowList.ts b/packages/shared/src/globalsAllowList.ts
index 4af518c22..3b584cc1a 100644
--- a/packages/shared/src/globalsAllowList.ts
+++ b/packages/shared/src/globalsAllowList.ts
@@ -3,9 +3,10 @@ import { makeMap } from './makeMap'
 const GLOBALS_ALLOWED =
   'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
   'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
-  'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console'
+  'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error,Symbol'
 
-export const isGloballyAllowed = /*#__PURE__*/ makeMap(GLOBALS_ALLOWED)
+export const isGloballyAllowed: (key: string) => boolean =
+  /*@__PURE__*/ makeMap(GLOBALS_ALLOWED)
 
 /** @deprecated use `isGloballyAllowed` instead */
-export const isGloballyWhitelisted = isGloballyAllowed
+export const isGloballyWhitelisted: (key: string) => boolean = isGloballyAllowed
diff --git a/packages/shared/src/looseEqual.ts b/packages/shared/src/looseEqual.ts
index db869922f..9e7176721 100644
--- a/packages/shared/src/looseEqual.ts
+++ b/packages/shared/src/looseEqual.ts
@@ -29,7 +29,6 @@ export function looseEqual(a: any, b: any): boolean {
   aValidType = isObject(a)
   bValidType = isObject(b)
   if (aValidType || bValidType) {
-    /* istanbul ignore if: this if will probably never be called */
     if (!aValidType || !bValidType) {
       return false
     }
diff --git a/packages/shared/src/makeMap.ts b/packages/shared/src/makeMap.ts
index b598704c6..e85efe21e 100644
--- a/packages/shared/src/makeMap.ts
+++ b/packages/shared/src/makeMap.ts
@@ -5,14 +5,10 @@
  * \/\*#\_\_PURE\_\_\*\/
  * So that rollup can tree-shake them if necessary.
  */
-export function makeMap(
-  str: string,
-  expectsLowerCase?: boolean
-): (key: string) => boolean {
-  const map: Record<string, boolean> = Object.create(null)
-  const list: Array<string> = str.split(',')
-  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
-  }
-  return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val]
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function makeMap(str: string): (key: string) => boolean {
+  const map = Object.create(null)
+  for (const key of str.split(',')) map[key] = 1
+  return val => val in map
 }
diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts
index 10d54c6b5..f21e66425 100644
--- a/packages/shared/src/normalizeProp.ts
+++ b/packages/shared/src/normalizeProp.ts
@@ -1,9 +1,9 @@
-import { isArray, isString, isObject, hyphenate } from './general'
+import { hyphenate, isArray, isObject, isString } from './general'
 
 export type NormalizedStyle = Record<string, string | number>
 
 export function normalizeStyle(
-  value: unknown
+  value: unknown,
 ): NormalizedStyle | string | undefined {
   if (isArray(value)) {
     const res: NormalizedStyle = {}
@@ -43,7 +43,7 @@ export function parseStringStyle(cssText: string): NormalizedStyle {
 }
 
 export function stringifyStyle(
-  styles: NormalizedStyle | string | undefined
+  styles: NormalizedStyle | string | undefined,
 ): string {
   let ret = ''
   if (!styles || isString(styles)) {
@@ -51,8 +51,8 @@ export function stringifyStyle(
   }
   for (const key in styles) {
     const value = styles[key]
-    const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key)
     if (isString(value) || typeof value === 'number') {
+      const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key)
       // only render valid values
       ret += `${normalizedKey}:${value};`
     }
@@ -81,7 +81,9 @@ export function normalizeClass(value: unknown): string {
   return res.trim()
 }
 
-export function normalizeProps(props: Record<string, any> | null) {
+export function normalizeProps(
+  props: Record<string, any> | null,
+): Record<string, any> | null {
   if (!props) return null
   let { class: klass, style } = props
   if (klass && !isString(klass)) {
diff --git a/packages/shared/src/patchFlags.ts b/packages/shared/src/patchFlags.ts
index af5ee7b49..fc22f10de 100644
--- a/packages/shared/src/patchFlags.ts
+++ b/packages/shared/src/patchFlags.ts
@@ -16,7 +16,7 @@
  * Check the `patchElement` function in '../../runtime-core/src/renderer.ts' to see how the
  * flags are handled during diff.
  */
-export const enum PatchFlags {
+export enum PatchFlags {
   /**
    * Indicates an element with dynamic textContent (children fast path)
    */
@@ -109,10 +109,10 @@ export const enum PatchFlags {
    */
 
   /**
-   * Indicates a hoisted static vnode. This is a hint for hydration to skip
+   * Indicates a cached static vnode. This is also a hint for hydration to skip
    * the entire sub tree since static content never needs to be updated.
    */
-  HOISTED = -1,
+  CACHED = -1,
   /**
    * A special flag that indicates that the diffing algorithm should bail out
    * of optimized mode. For example, on block fragments created by renderSlot()
@@ -120,7 +120,7 @@ export const enum PatchFlags {
    * render functions, which should always be fully diffed)
    * OR manually cloneVNodes
    */
-  BAIL = -2
+  BAIL = -2,
 }
 
 /**
@@ -139,6 +139,6 @@ export const PatchFlagNames: Record<PatchFlags, string> = {
   [PatchFlags.NEED_PATCH]: `NEED_PATCH`,
   [PatchFlags.DYNAMIC_SLOTS]: `DYNAMIC_SLOTS`,
   [PatchFlags.DEV_ROOT_FRAGMENT]: `DEV_ROOT_FRAGMENT`,
-  [PatchFlags.HOISTED]: `HOISTED`,
-  [PatchFlags.BAIL]: `BAIL`
+  [PatchFlags.CACHED]: `HOISTED`,
+  [PatchFlags.BAIL]: `BAIL`,
 }
diff --git a/packages/shared/src/shapeFlags.ts b/packages/shared/src/shapeFlags.ts
index 8defb8a3b..855d159ea 100644
--- a/packages/shared/src/shapeFlags.ts
+++ b/packages/shared/src/shapeFlags.ts
@@ -1,4 +1,4 @@
-export const enum ShapeFlags {
+export enum ShapeFlags {
   ELEMENT = 1,
   FUNCTIONAL_COMPONENT = 1 << 1,
   STATEFUL_COMPONENT = 1 << 2,
@@ -9,5 +9,5 @@ export const enum ShapeFlags {
   SUSPENSE = 1 << 7,
   COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
   COMPONENT_KEPT_ALIVE = 1 << 9,
-  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
+  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
 }
diff --git a/packages/shared/src/slotFlags.ts b/packages/shared/src/slotFlags.ts
index 53860ff4d..15fb9fa79 100644
--- a/packages/shared/src/slotFlags.ts
+++ b/packages/shared/src/slotFlags.ts
@@ -1,4 +1,4 @@
-export const enum SlotFlags {
+export enum SlotFlags {
   /**
    * Stable slots that only reference slot props or context state. The slot
    * can fully capture its own dependencies so when passed down the parent won't
@@ -17,14 +17,14 @@ export const enum SlotFlags {
    * received. This has to be refined at runtime, when the child's vnode
    * is being created (in `normalizeChildren`)
    */
-  FORWARDED = 3
+  FORWARDED = 3,
 }
 
 /**
  * Dev only
  */
-export const slotFlagsText = {
+export const slotFlagsText: Record<SlotFlags, string> = {
   [SlotFlags.STABLE]: 'STABLE',
   [SlotFlags.DYNAMIC]: 'DYNAMIC',
-  [SlotFlags.FORWARDED]: 'FORWARDED'
+  [SlotFlags.FORWARDED]: 'FORWARDED',
 }
diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts
index d7a96c06c..b23cf766a 100644
--- a/packages/shared/src/toDisplayString.ts
+++ b/packages/shared/src/toDisplayString.ts
@@ -1,14 +1,22 @@
+// enums are compiled away via custom transform so no real dependency here
+import { ReactiveFlags } from '@vue/reactivity'
 import {
   isArray,
+  isFunction,
   isMap,
   isObject,
-  isFunction,
   isPlainObject,
   isSet,
+  isString,
+  isSymbol,
   objectToString,
-  isString
 } from './general'
 
+// can't use isRef here since @vue/shared has no deps
+const isRef = (val: any): val is { value: unknown } => {
+  return !!(val && val[ReactiveFlags.IS_REF] === true)
+}
+
 /**
  * For converting {{ interpolation }} values to displayed strings.
  * @private
@@ -21,27 +29,39 @@ export const toDisplayString = (val: unknown): string => {
       : isArray(val) ||
           (isObject(val) &&
             (val.toString === objectToString || !isFunction(val.toString)))
-        ? JSON.stringify(val, replacer, 2)
+        ? isRef(val)
+          ? toDisplayString(val.value)
+          : JSON.stringify(val, replacer, 2)
         : String(val)
 }
 
-const replacer = (_key: string, val: any): any => {
-  // can't use isRef here since @vue/shared has no deps
-  if (val && val.__v_isRef) {
+const replacer = (_key: string, val: unknown): any => {
+  if (isRef(val)) {
     return replacer(_key, val.value)
   } else if (isMap(val)) {
     return {
-      [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val]) => {
-        ;(entries as any)[`${key} =>`] = val
-        return entries
-      }, {})
+      [`Map(${val.size})`]: [...val.entries()].reduce(
+        (entries, [key, val], i) => {
+          entries[stringifySymbol(key, i) + ' =>'] = val
+          return entries
+        },
+        {} as Record<string, any>,
+      ),
     }
   } else if (isSet(val)) {
     return {
-      [`Set(${val.size})`]: [...val.values()]
+      [`Set(${val.size})`]: [...val.values()].map(v => stringifySymbol(v)),
     }
+  } else if (isSymbol(val)) {
+    return stringifySymbol(val)
   } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
+    // native elements
     return String(val)
   }
   return val
 }
+
+const stringifySymbol = (v: unknown, i: number | string = ''): any =>
+  // Symbol.description in es2019+ so we need to cast here to pass
+  // the lib: es2016 check
+  isSymbol(v) ? `Symbol(${(v as any).description ?? i})` : v
diff --git a/packages/shared/src/typeUtils.ts b/packages/shared/src/typeUtils.ts
index 63372d829..f5b9e6ec3 100644
--- a/packages/shared/src/typeUtils.ts
+++ b/packages/shared/src/typeUtils.ts
@@ -13,11 +13,39 @@ export type LooseRequired<T> = { [P in keyof (T & Required<T>)]: T[P] }
 // https://stackoverflow.com/questions/49927523/disallow-call-with-any/49928360#49928360
 export type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N
 
-// To prevent users with TypeScript versions lower than 4.5 from encountering unsupported Awaited<T> type, a copy has been made here.
-export type Awaited<T> = T extends null | undefined
-  ? T // special case for `null | undefined` when not in `--strictNullChecks` mode
-  : T extends object & { then(onfulfilled: infer F, ...args: infer _): any } // `await` only unwraps object types with a callable `then`. Non-object types are not unwrapped
-    ? F extends (value: infer V, ...args: infer _) => any // if the argument to `then` is callable, extracts the first argument
-      ? Awaited<V> // recursively unwrap the value
-      : never // the argument to `then` was not callable
-    : T // non-object or non-thenable
+export type IsKeyValues<T, K = string> = IfAny<
+  T,
+  false,
+  T extends object ? (keyof T extends K ? true : false) : false
+>
+
+/**
+ * Utility for extracting the parameters from a function overload (for typed emits)
+ * https://github.com/microsoft/TypeScript/issues/32164#issuecomment-1146737709
+ */
+export type OverloadParameters<T extends (...args: any[]) => any> = Parameters<
+  OverloadUnion<T>
+>
+
+type OverloadProps<TOverload> = Pick<TOverload, keyof TOverload>
+
+type OverloadUnionRecursive<
+  TOverload,
+  TPartialOverload = unknown,
+> = TOverload extends (...args: infer TArgs) => infer TReturn
+  ? TPartialOverload extends TOverload
+    ? never
+    :
+        | OverloadUnionRecursive<
+            TPartialOverload & TOverload,
+            TPartialOverload &
+              ((...args: TArgs) => TReturn) &
+              OverloadProps<TOverload>
+          >
+        | ((...args: TArgs) => TReturn)
+  : never
+
+type OverloadUnion<TOverload extends (...args: any[]) => any> = Exclude<
+  OverloadUnionRecursive<(() => never) & TOverload>,
+  TOverload extends () => never ? never : () => never
+>
diff --git a/packages/template-explorer/index.html b/packages/template-explorer/index.html
deleted file mode 100644
index 81dc39146..000000000
--- a/packages/template-explorer/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<title>Vue Template Explorer</title>
-<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://unpkg.com/monaco-editor@0.20.0/min/vs/editor/editor.main.css">
-<link rel="stylesheet" href="./style.css">
-
-<div id="header"></div>
-<div id="source" class="editor"></div>
-<div id="output" class="editor"></div>
-
-<script src="https://unpkg.com/monaco-editor@0.20.0/min/vs/loader.js"></script>
-<script>
-require.config({
-  paths: {
-    'vs': 'https://unpkg.com/monaco-editor@0.20.0/min/vs'
-  }
-})
-</script>
-<script src="./dist/template-explorer.global.js"></script>
-<script>
-require(['vs/editor/editor.main'], init /* injected by build */)
-</script>
diff --git a/packages/template-explorer/local.html b/packages/template-explorer/local.html
deleted file mode 100644
index 6ec0ba20a..000000000
--- a/packages/template-explorer/local.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<title>Vue Template Explorer</title>
-<link rel="stylesheet" data-name="vs/editor/editor.main" href="./node_modules/monaco-editor/min/vs/editor/editor.main.css">
-<link rel="stylesheet" href="./style.css">
-
-<div id="header"></div>
-<div id="source" class="editor"></div>
-<div id="output" class="editor"></div>
-
-<script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
-<script>
-require.config({
-  paths: {
-    'vs': './node_modules/monaco-editor/min/vs'
-  }
-})
-</script>
-<script src="./dist/template-explorer.global.js"></script>
-<script>
-require(['vs/editor/editor.main'], init /* injected by build */)
-</script>
diff --git a/packages/vue-compat/README.md b/packages/vue-compat/README.md
index 23e4ce9eb..9428d6f6c 100644
--- a/packages/vue-compat/README.md
+++ b/packages/vue-compat/README.md
@@ -84,12 +84,12 @@ The following workflow walks through the steps of migrating an actual Vue 2 app
              ...options,
              compilerOptions: {
                compatConfig: {
-                 MODE: 2
-               }
-             }
+                 MODE: 2,
+               },
+             },
            }
          })
-     }
+     },
    }
    ```
 
@@ -103,8 +103,8 @@ The following workflow walks through the steps of migrating an actual Vue 2 app
    module.exports = {
      resolve: {
        alias: {
-         vue: '@vue/compat'
-       }
+         vue: '@vue/compat',
+       },
      },
      module: {
        rules: [
@@ -114,13 +114,13 @@ The following workflow walks through the steps of migrating an actual Vue 2 app
            options: {
              compilerOptions: {
                compatConfig: {
-                 MODE: 2
-               }
-             }
-           }
-         }
-       ]
-     }
+                 MODE: 2,
+               },
+             },
+           },
+         },
+       ],
+     },
    }
    ```
 
@@ -134,20 +134,20 @@ The following workflow walks through the steps of migrating an actual Vue 2 app
    export default {
      resolve: {
        alias: {
-         vue: '@vue/compat'
-       }
+         vue: '@vue/compat',
+       },
      },
      plugins: [
        vue({
          template: {
            compilerOptions: {
              compatConfig: {
-               MODE: 2
-             }
-           }
-         }
-       })
-     ]
+               MODE: 2,
+             },
+           },
+         },
+       }),
+     ],
    }
    ```
 
@@ -207,7 +207,7 @@ import { configureCompat } from 'vue'
 // disable compat for certain features
 configureCompat({
   FEATURE_ID_A: false,
-  FEATURE_ID_B: false
+  FEATURE_ID_B: false,
 })
 ```
 
@@ -221,7 +221,7 @@ import { configureCompat } from 'vue'
 configureCompat({
   MODE: 3,
   FEATURE_ID_A: true,
-  FEATURE_ID_B: true
+  FEATURE_ID_B: true,
 })
 ```
 
@@ -233,8 +233,8 @@ A component can use the `compatConfig` option, which expects the same options as
 export default {
   compatConfig: {
     MODE: 3, // opt-in to Vue 3 behavior for this component only
-    FEATURE_ID_A: true // features can also be toggled at component level
-  }
+    FEATURE_ID_A: true, // features can also be toggled at component level
+  },
   // ...
 }
 ```
@@ -256,73 +256,73 @@ Features that start with `COMPILER_` are compiler-specific: if you are using the
 
 > Should be fixed upfront or will likely lead to errors
 
-| ID                                    | Type | Description                                                             | Docs                                                                                           |
-| ------------------------------------- | ---- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| GLOBAL_MOUNT_CONTAINER                | ⨂    | Mounted application does not replace the element it's mounted to        | [link](https://v3-migration.vuejs.org/breaking-changes/mount-changes.html)                                                    |
-| CONFIG_DEVTOOLS                       | ⨂    | production devtools is now a build-time flag                            | [link](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags) |
-| COMPILER_V_IF_V_FOR_PRECEDENCE        | ⨂    | `v-if` and `v-for` precedence when used on the same element has changed | [link](https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html)                                                       |
-| COMPILER_V_IF_SAME_KEY                | ⨂    | `v-if` branches can no longer have the same key                         | [link](https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#on-conditional-branches)                            |
-| COMPILER_V_FOR_TEMPLATE_KEY_PLACEMENT | ⨂    | `<template v-for>` key should now be placed on `<template>`             | [link](https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#with-template-v-for)                                |
-| COMPILER_SFC_FUNCTIONAL               | ⨂    | `<template functional>` is no longer supported in SFCs                  | [link](https://v3-migration.vuejs.org/breaking-changes/functional-components.html#single-file-components-sfcs)                |  |  |
+| ID                                    | Type | Description                                                             | Docs                                                                                                           |
+| ------------------------------------- | ---- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| GLOBAL_MOUNT_CONTAINER                | ⨂    | Mounted application does not replace the element it's mounted to        | [link](https://v3-migration.vuejs.org/breaking-changes/mount-changes.html)                                     |
+| CONFIG_DEVTOOLS                       | ⨂    | production devtools is now a build-time flag                            | [link](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags)                       |
+| COMPILER_V_IF_V_FOR_PRECEDENCE        | ⨂    | `v-if` and `v-for` precedence when used on the same element has changed | [link](https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html)                                        |
+| COMPILER_V_IF_SAME_KEY                | ⨂    | `v-if` branches can no longer have the same key                         | [link](https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#on-conditional-branches)             |
+| COMPILER_V_FOR_TEMPLATE_KEY_PLACEMENT | ⨂    | `<template v-for>` key should now be placed on `<template>`             | [link](https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#with-template-v-for)                 |
+| COMPILER_SFC_FUNCTIONAL               | ⨂    | `<template functional>` is no longer supported in SFCs                  | [link](https://v3-migration.vuejs.org/breaking-changes/functional-components.html#single-file-components-sfcs) |
 
 ### Partially Compatible with Caveats
 
-| ID                       | Type | Description                                                                                                                                                                                | Docs                                                                                          |
-| ------------------------ | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+| ID                       | Type | Description                                                                                                                                                                                | Docs                                                                                                                         |
+| ------------------------ | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
 | CONFIG_IGNORED_ELEMENTS  | ◐    | `config.ignoredElements` is now `config.compilerOptions.isCustomElement` (only in browser compiler build). If using build setup, `isCustomElement` must be passed via build configuration. | [link](https://v3-migration.vuejs.org/breaking-changes/global-api.html#config-ignoredelements-is-now-config-iscustomelement) |
 | COMPILER_INLINE_TEMPLATE | ◐    | `inline-template` removed (compat only supported in browser compiler build)                                                                                                                | [link](https://v3-migration.vuejs.org/breaking-changes/inline-template-attribute.html)                                       |
 | PROPS_DEFAULT_THIS       | ◐    | props default factory no longer have access to `this` (in compat mode, `this` is not a real instance - it only exposes props, `$options` and injections)                                   | [link](https://v3-migration.vuejs.org/breaking-changes/props-default-this.html)                                              |
-| INSTANCE_DESTROY         | ◐    | `$destroy` instance method removed (in compat mode, only supported on root instance)                                                                                                       |                                                                                               |
-| GLOBAL_PRIVATE_UTIL      | ◐    | `Vue.util` is private and no longer available                                                                                                                                              |                                                                                               |
+| INSTANCE_DESTROY         | ◐    | `$destroy` instance method removed (in compat mode, only supported on root instance)                                                                                                       |                                                                                                                              |
+| GLOBAL_PRIVATE_UTIL      | ◐    | `Vue.util` is private and no longer available                                                                                                                                              |                                                                                                                              |
 | CONFIG_PRODUCTION_TIP    | ◐    | `config.productionTip` no longer necessary                                                                                                                                                 | [link](https://v3-migration.vuejs.org/breaking-changes/global-api.html#config-productiontip-removed)                         |
 | CONFIG_SILENT            | ◐    | `config.silent` removed                                                                                                                                                                    |
 
 ### Compat only (no warning)
 
-| ID                 | Type | Description                           | Docs                                     |
-| ------------------ | ---- | ------------------------------------- | ---------------------------------------- |
+| ID                 | Type | Description                            | Docs                                                                    |
+| ------------------ | ---- | -------------------------------------- | ----------------------------------------------------------------------- |
 | TRANSITION_CLASSES | ⭘    | Transition enter/leave classes changed | [link](https://v3-migration.vuejs.org/breaking-changes/transition.html) |
 
 ### Fully Compatible
 
-| ID                           | Type | Description                                                           | Docs                                                                                       |
-| ---------------------------- | ---- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
-| GLOBAL_MOUNT                 | ✔    | new Vue() -> createApp                                                | [link](https://v3-migration.vuejs.org/breaking-changes/global-api.html#mounting-app-instance)                             |
-| GLOBAL_EXTEND                | ✔    | Vue.extend removed (use `defineComponent` or `extends` option)        | [link](https://v3-migration.vuejs.org/breaking-changes/global-api.html#vue-extend-replaced-by-definecomponent)            |
-| GLOBAL_PROTOTYPE             | ✔    | `Vue.prototype` -> `app.config.globalProperties`                      | [link](https://v3-migration.vuejs.org/breaking-changes/global-api.html#vue-prototype-replaced-by-config-globalproperties) |
-| GLOBAL_SET                   | ✔    | `Vue.set` removed (no longer needed)                                  |                                                                                            |
-| GLOBAL_DELETE                | ✔    | `Vue.delete` removed (no longer needed)                               |                                                                                            |
-| GLOBAL_OBSERVABLE            | ✔    | `Vue.observable` removed (use `reactive`)                             | [link](https://vuejs.org/api/reactivity-core.html#reactive)                                                         |
-| CONFIG_KEY_CODES             | ✔    | config.keyCodes removed                                               | [link](https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html)                                            |
-| CONFIG_WHITESPACE            | ✔    | In Vue 3 whitespace defaults to `"condense"`                          |                                                                                            |
-| INSTANCE_SET                 | ✔    | `vm.$set` removed (no longer needed)                                  |                                                                                            |
-| INSTANCE_DELETE              | ✔    | `vm.$delete` removed (no longer needed)                               |                                                                                            |
-| INSTANCE_EVENT_EMITTER       | ✔    | `vm.$on`, `vm.$off`, `vm.$once` removed                               | [link](https://v3-migration.vuejs.org/breaking-changes/events-api.html)                                                   |
-| INSTANCE_EVENT_HOOKS         | ✔    | Instance no longer emits `hook:x` events                              | [link](https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html)                                       |
-| INSTANCE_CHILDREN            | ✔    | `vm.$children` removed                                                | [link](https://v3-migration.vuejs.org/breaking-changes/children.html)                                                     |
-| INSTANCE_LISTENERS           | ✔    | `vm.$listeners` removed                                               | [link](https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html)                                            |
-| INSTANCE_SCOPED_SLOTS        | ✔    | `vm.$scopedSlots` removed; `vm.$slots` now exposes functions          | [link](https://v3-migration.vuejs.org/breaking-changes/slots-unification.html)                                            |
-| INSTANCE_ATTRS_CLASS_STYLE   | ✔    | `$attrs` now includes `class` and `style`                             | [link](https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style.html)                                   |
-| OPTIONS_DATA_FN              | ✔    | `data` must be a function in all cases                                | [link](https://v3-migration.vuejs.org/breaking-changes/data-option.html)                                                  |
-| OPTIONS_DATA_MERGE           | ✔    | `data` from mixin or extension is now shallow merged                  | [link](https://v3-migration.vuejs.org/breaking-changes/data-option.html)                                                  |
-| OPTIONS_BEFORE_DESTROY       | ✔    | `beforeDestroy` -> `beforeUnmount`                                    |                                                                                            |
-| OPTIONS_DESTROYED            | ✔    | `destroyed` -> `unmounted`                                            |                                                                                            |
-| WATCH_ARRAY                  | ✔    | watching an array no longer triggers on mutation unless deep          | [link](https://v3-migration.vuejs.org/breaking-changes/watch.html)                                                        |
-| V_ON_KEYCODE_MODIFIER        | ✔    | `v-on` no longer supports keyCode modifiers                           | [link](https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html)                                            |
-| CUSTOM_DIR                   | ✔    | Custom directive hook names changed                                   | [link](https://v3-migration.vuejs.org/breaking-changes/custom-directives.html)                                            |
-| ATTR_FALSE_VALUE             | ✔    | No longer removes attribute if binding value is boolean `false`       | [link](https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html)                                           |
-| ATTR_ENUMERATED_COERCION     | ✔    | No longer special case enumerated attributes                          | [link](https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html)                                           |
-| TRANSITION_GROUP_ROOT        | ✔    | `<transition-group>` no longer renders a root element by default      | [link](https://v3-migration.vuejs.org/breaking-changes/transition-group.html)                                             |
-| COMPONENT_ASYNC              | ✔    | Async component API changed (now requires `defineAsyncComponent`)     | [link](https://v3-migration.vuejs.org/breaking-changes/async-components.html)                                             |
-| COMPONENT_FUNCTIONAL         | ✔    | Functional component API changed (now must be plain functions)        | [link](https://v3-migration.vuejs.org/breaking-changes/functional-components.html)                                        |
-| COMPONENT_V_MODEL            | ✔    | Component v-model reworked                                            | [link](https://v3-migration.vuejs.org/breaking-changes/v-model.html)                                                      |
-| RENDER_FUNCTION              | ✔    | Render function API changed                                           | [link](https://v3-migration.vuejs.org/breaking-changes/render-function-api.html)                                          |
-| FILTERS                      | ✔    | Filters removed (this option affects only runtime filter APIs)        | [link](https://v3-migration.vuejs.org/breaking-changes/filters.html)                                                      |
-| COMPILER_IS_ON_ELEMENT       | ✔    | `is` usage is now restricted to `<component>` only                    | [link](https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html)                                      |
-| COMPILER_V_BIND_SYNC         | ✔    | `v-bind.sync` replaced by `v-model` with arguments                    | [link](https://v3-migration.vuejs.org/breaking-changes/v-model.html)                                                      |
-| COMPILER_V_BIND_PROP         | ✔    | `v-bind.prop` modifier removed                                        |                                                                                            |
-| COMPILER_V_BIND_OBJECT_ORDER | ✔    | `v-bind="object"` is now order sensitive                              | [link](https://v3-migration.vuejs.org/breaking-changes/v-bind.html)                                                       |
-| COMPILER_V_ON_NATIVE         | ✔    | `v-on.native` modifier removed                                        | [link](https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html)                                 |
-| COMPILER_V_FOR_REF           | ✔    | `ref` in `v-for` (compiler support)                                   |                                                                                            |
-| COMPILER_NATIVE_TEMPLATE     | ✔    | `<template>` with no special directives now renders as native element |                                                                                            |
-| COMPILER_FILTERS             | ✔    | filters (compiler support)                                            |                                                                                            |
+| ID                           | Type | Description                                                           | Docs                                                                                                                      |
+| ---------------------------- | ---- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| GLOBAL_MOUNT                 | ✔   | new Vue() -> createApp                                                | [link](https://v3-migration.vuejs.org/breaking-changes/global-api.html#mounting-app-instance)                             |
+| GLOBAL_EXTEND                | ✔   | Vue.extend removed (use `defineComponent` or `extends` option)        | [link](https://v3-migration.vuejs.org/breaking-changes/global-api.html#vue-extend-replaced-by-definecomponent)            |
+| GLOBAL_PROTOTYPE             | ✔   | `Vue.prototype` -> `app.config.globalProperties`                      | [link](https://v3-migration.vuejs.org/breaking-changes/global-api.html#vue-prototype-replaced-by-config-globalproperties) |
+| GLOBAL_SET                   | ✔   | `Vue.set` removed (no longer needed)                                  |                                                                                                                           |
+| GLOBAL_DELETE                | ✔   | `Vue.delete` removed (no longer needed)                               |                                                                                                                           |
+| GLOBAL_OBSERVABLE            | ✔   | `Vue.observable` removed (use `reactive`)                             | [link](https://vuejs.org/api/reactivity-core.html#reactive)                                                               |
+| CONFIG_KEY_CODES             | ✔   | config.keyCodes removed                                               | [link](https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html)                                            |
+| CONFIG_WHITESPACE            | ✔   | In Vue 3 whitespace defaults to `"condense"`                          |                                                                                                                           |
+| INSTANCE_SET                 | ✔   | `vm.$set` removed (no longer needed)                                  |                                                                                                                           |
+| INSTANCE_DELETE              | ✔   | `vm.$delete` removed (no longer needed)                               |                                                                                                                           |
+| INSTANCE_EVENT_EMITTER       | ✔   | `vm.$on`, `vm.$off`, `vm.$once` removed                               | [link](https://v3-migration.vuejs.org/breaking-changes/events-api.html)                                                   |
+| INSTANCE_EVENT_HOOKS         | ✔   | Instance no longer emits `hook:x` events                              | [link](https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html)                                       |
+| INSTANCE_CHILDREN            | ✔   | `vm.$children` removed                                                | [link](https://v3-migration.vuejs.org/breaking-changes/children.html)                                                     |
+| INSTANCE_LISTENERS           | ✔   | `vm.$listeners` removed                                               | [link](https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html)                                            |
+| INSTANCE_SCOPED_SLOTS        | ✔   | `vm.$scopedSlots` removed; `vm.$slots` now exposes functions          | [link](https://v3-migration.vuejs.org/breaking-changes/slots-unification.html)                                            |
+| INSTANCE_ATTRS_CLASS_STYLE   | ✔   | `$attrs` now includes `class` and `style`                             | [link](https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style.html)                                   |
+| OPTIONS_DATA_FN              | ✔   | `data` must be a function in all cases                                | [link](https://v3-migration.vuejs.org/breaking-changes/data-option.html)                                                  |
+| OPTIONS_DATA_MERGE           | ✔   | `data` from mixin or extension is now shallow merged                  | [link](https://v3-migration.vuejs.org/breaking-changes/data-option.html)                                                  |
+| OPTIONS_BEFORE_DESTROY       | ✔   | `beforeDestroy` -> `beforeUnmount`                                    |                                                                                                                           |
+| OPTIONS_DESTROYED            | ✔   | `destroyed` -> `unmounted`                                            |                                                                                                                           |
+| WATCH_ARRAY                  | ✔   | watching an array no longer triggers on mutation unless deep          | [link](https://v3-migration.vuejs.org/breaking-changes/watch.html)                                                        |
+| V_ON_KEYCODE_MODIFIER        | ✔   | `v-on` no longer supports keyCode modifiers                           | [link](https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html)                                            |
+| CUSTOM_DIR                   | ✔   | Custom directive hook names changed                                   | [link](https://v3-migration.vuejs.org/breaking-changes/custom-directives.html)                                            |
+| ATTR_FALSE_VALUE             | ✔   | No longer removes attribute if binding value is boolean `false`       | [link](https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html)                                           |
+| ATTR_ENUMERATED_COERCION     | ✔   | No longer special case enumerated attributes                          | [link](https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html)                                           |
+| TRANSITION_GROUP_ROOT        | ✔   | `<transition-group>` no longer renders a root element by default      | [link](https://v3-migration.vuejs.org/breaking-changes/transition-group.html)                                             |
+| COMPONENT_ASYNC              | ✔   | Async component API changed (now requires `defineAsyncComponent`)     | [link](https://v3-migration.vuejs.org/breaking-changes/async-components.html)                                             |
+| COMPONENT_FUNCTIONAL         | ✔   | Functional component API changed (now must be plain functions)        | [link](https://v3-migration.vuejs.org/breaking-changes/functional-components.html)                                        |
+| COMPONENT_V_MODEL            | ✔   | Component v-model reworked                                            | [link](https://v3-migration.vuejs.org/breaking-changes/v-model.html)                                                      |
+| RENDER_FUNCTION              | ✔   | Render function API changed                                           | [link](https://v3-migration.vuejs.org/breaking-changes/render-function-api.html)                                          |
+| FILTERS                      | ✔   | Filters removed (this option affects only runtime filter APIs)        | [link](https://v3-migration.vuejs.org/breaking-changes/filters.html)                                                      |
+| COMPILER_IS_ON_ELEMENT       | ✔   | `is` usage is now restricted to `<component>` only                    | [link](https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html)                                      |
+| COMPILER_V_BIND_SYNC         | ✔   | `v-bind.sync` replaced by `v-model` with arguments                    | [link](https://v3-migration.vuejs.org/breaking-changes/v-model.html)                                                      |
+| COMPILER_V_BIND_PROP         | ✔   | `v-bind.prop` modifier removed                                        |                                                                                                                           |
+| COMPILER_V_BIND_OBJECT_ORDER | ✔   | `v-bind="object"` is now order sensitive                              | [link](https://v3-migration.vuejs.org/breaking-changes/v-bind.html)                                                       |
+| COMPILER_V_ON_NATIVE         | ✔   | `v-on.native` modifier removed                                        | [link](https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html)                                 |
+| COMPILER_V_FOR_REF           | ✔   | `ref` in `v-for` (compiler support)                                   |                                                                                                                           |
+| COMPILER_NATIVE_TEMPLATE     | ✔   | `<template>` with no special directives now renders as native element |                                                                                                                           |
+| COMPILER_FILTERS             | ✔   | filters (compiler support)                                            |                                                                                                                           |
diff --git a/packages/vue-compat/__tests__/compiler.spec.ts b/packages/vue-compat/__tests__/compiler.spec.ts
index c20af972d..2ae2f211a 100644
--- a/packages/vue-compat/__tests__/compiler.spec.ts
+++ b/packages/vue-compat/__tests__/compiler.spec.ts
@@ -1,13 +1,13 @@
 import Vue from '@vue/compat'
 import { nextTick } from '@vue/runtime-core'
-import { CompilerDeprecationTypes } from '../../compiler-core/src'
+import { CompilerDeprecationTypes } from '@vue/compiler-core'
 import { toggleDeprecationWarning } from '../../runtime-core/src/compat/compatConfig'
 import { triggerEvent } from './utils'
 
 beforeEach(() => {
   toggleDeprecationWarning(false)
   Vue.configureCompat({
-    MODE: 2
+    MODE: 2,
   })
 })
 
@@ -21,14 +21,14 @@ afterEach(() => {
 
 test('COMPILER_IS_ON_ELEMENT', () => {
   const MyButton = {
-    template: `<div><slot/></div>`
+    template: `<div><slot/></div>`,
   }
 
   const vm = new Vue({
     template: `<button is="my-button">text</button>`,
     components: {
-      MyButton
-    }
+      MyButton,
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -38,14 +38,14 @@ test('COMPILER_IS_ON_ELEMENT', () => {
 
 test('COMPILER_IS_ON_ELEMENT (dynamic)', () => {
   const MyButton = {
-    template: `<div><slot/></div>`
+    template: `<div><slot/></div>`,
   }
 
   const vm = new Vue({
     template: `<button :is="'MyButton'">text</button>`,
     components: {
-      MyButton
-    }
+      MyButton,
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -56,19 +56,19 @@ test('COMPILER_IS_ON_ELEMENT (dynamic)', () => {
 test('COMPILER_V_BIND_SYNC', async () => {
   const MyButton = {
     props: ['foo'],
-    template: `<button @click="$emit('update:foo', 1)">{{ foo }}</button>`
+    template: `<button @click="$emit('update:foo', 1)">{{ foo }}</button>`,
   }
 
   const vm = new Vue({
     data() {
       return {
-        foo: 0
+        foo: 0,
       }
     },
     template: `<my-button :foo.sync="foo" />`,
     components: {
-      MyButton
-    }
+      MyButton,
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLButtonElement)
@@ -81,25 +81,15 @@ test('COMPILER_V_BIND_SYNC', async () => {
   expect(CompilerDeprecationTypes.COMPILER_V_BIND_SYNC).toHaveBeenWarned()
 })
 
-test('COMPILER_V_BIND_PROP', () => {
-  const vm = new Vue({
-    template: `<div :id.prop="'foo'"/>`
-  }).$mount()
-
-  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
-  expect(vm.$el.id).toBe('foo')
-  expect(CompilerDeprecationTypes.COMPILER_V_BIND_PROP).toHaveBeenWarned()
-})
-
 test('COMPILER_V_BIND_OBJECT_ORDER', () => {
   const vm = new Vue({
-    template: `<div id="foo" v-bind="{ id: 'bar', class: 'baz' }" />`
+    template: `<div id="foo" v-bind="{ id: 'bar', class: 'baz' }" />`,
   }).$mount()
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.id).toBe('foo')
   expect(vm.$el.className).toBe('baz')
   expect(
-    CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER
+    CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER,
   ).toHaveBeenWarned()
 })
 
@@ -109,12 +99,12 @@ test('COMPILER_V_ON_NATIVE', () => {
     template: `<child @click="spy" @click.native="spy" />`,
     components: {
       child: {
-        template: `<button />`
-      }
+        template: `<button />`,
+      },
     },
     methods: {
-      spy
-    }
+      spy,
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLButtonElement)
@@ -126,13 +116,13 @@ test('COMPILER_V_ON_NATIVE', () => {
 test('COMPILER_V_IF_V_FOR_PRECEDENCE', () => {
   new Vue({ template: `<div v-if="true" v-for="i in 1"/>` }).$mount()
   expect(
-    CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE
+    CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
   ).toHaveBeenWarned()
 })
 
 test('COMPILER_NATIVE_TEMPLATE', () => {
   const vm = new Vue({
-    template: `<div><template><div/></template></div>`
+    template: `<div><template><div/></template></div>`,
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -147,9 +137,9 @@ test('COMPILER_INLINE_TEMPLATE', () => {
       foo: {
         data() {
           return { n: 123 }
-        }
-      }
-    }
+        },
+      },
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
diff --git a/packages/vue-compat/__tests__/componentAsync.spec.ts b/packages/vue-compat/__tests__/componentAsync.spec.ts
index 8fda196a0..7b85d8b1e 100644
--- a/packages/vue-compat/__tests__/componentAsync.spec.ts
+++ b/packages/vue-compat/__tests__/componentAsync.spec.ts
@@ -2,14 +2,14 @@ import Vue from '@vue/compat'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 
 beforeEach(() => {
   toggleDeprecationWarning(true)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
   })
 })
 
@@ -28,7 +28,7 @@ describe('COMPONENT_ASYNC', () => {
     }
     const vm = new Vue({
       template: `<div><comp/></div>`,
-      components: { comp }
+      components: { comp },
     }).$mount()
 
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -40,8 +40,8 @@ describe('COMPONENT_ASYNC', () => {
 
     expect(
       (deprecationData[DeprecationTypes.COMPONENT_ASYNC].message as Function)(
-        comp
-      )
+        comp,
+      ),
     ).toHaveBeenWarned()
   })
 
@@ -49,7 +49,7 @@ describe('COMPONENT_ASYNC', () => {
     const comp = () => Promise.resolve({ template: 'foo' })
     const vm = new Vue({
       template: `<div><comp/></div>`,
-      components: { comp }
+      components: { comp },
     }).$mount()
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.innerHTML).toBe(`<!---->`)
@@ -58,19 +58,19 @@ describe('COMPONENT_ASYNC', () => {
 
     expect(
       (deprecationData[DeprecationTypes.COMPONENT_ASYNC].message as Function)(
-        comp
-      )
+        comp,
+      ),
     ).toHaveBeenWarned()
   })
 
   test('object syntax', async () => {
     const comp = () => ({
-      component: Promise.resolve({ template: 'foo' })
+      component: Promise.resolve({ template: 'foo' }),
     })
 
     const vm = new Vue({
       template: `<div><comp/></div>`,
-      components: { comp }
+      components: { comp },
     }).$mount()
 
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -80,8 +80,8 @@ describe('COMPONENT_ASYNC', () => {
 
     expect(
       (deprecationData[DeprecationTypes.COMPONENT_ASYNC].message as Function)(
-        comp
-      )
+        comp,
+      ),
     ).toHaveBeenWarned()
   })
 })
diff --git a/packages/vue-compat/__tests__/componentFunctional.spec.ts b/packages/vue-compat/__tests__/componentFunctional.spec.ts
index 8ee0b3cd9..d3d11daeb 100644
--- a/packages/vue-compat/__tests__/componentFunctional.spec.ts
+++ b/packages/vue-compat/__tests__/componentFunctional.spec.ts
@@ -2,14 +2,14 @@ import Vue from '@vue/compat'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 
 beforeEach(() => {
   toggleDeprecationWarning(true)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
   })
 })
 
@@ -24,27 +24,27 @@ describe('COMPONENT_FUNCTIONAL', () => {
       name: 'Func',
       functional: true,
       props: {
-        x: String
+        x: String,
       },
       inject: ['foo'],
       render: (h: any, { data, props, injections, slots }: any) => {
         return h('div', { id: props.x, class: data.class }, [
           h('div', { class: 'inject' }, injections.foo),
-          h('div', { class: 'slot' }, slots().default)
+          h('div', { class: 'slot' }, slots().default),
         ])
-      }
+      },
     }
 
     const vm = new Vue({
       provide() {
         return {
-          foo: 123
+          foo: 123,
         }
       },
       components: {
-        func
+        func,
       },
-      template: `<func class="foo" x="foo">hello</func>`
+      template: `<func class="foo" x="foo">hello</func>`,
     }).$mount()
 
     expect(vm.$el.id).toBe('foo')
@@ -52,14 +52,14 @@ describe('COMPONENT_FUNCTIONAL', () => {
     expect(vm.$el.querySelector('.inject').textContent).toBe('123')
     expect(vm.$el.querySelector('.slot').textContent).toBe('hello')
     expect(vm.$el.outerHTML).toMatchInlineSnapshot(
-      '"<div id=\\"foo\\" class=\\"foo\\"><div class=\\"inject\\">123</div><div class=\\"slot\\">hello</div></div>"'
+      `"<div id="foo" class="foo"><div class="inject">123</div><div class="slot">hello</div></div>"`,
     )
 
     expect(
       (
         deprecationData[DeprecationTypes.COMPONENT_FUNCTIONAL]
           .message as Function
-      )(func)
+      )(func),
     ).toHaveBeenWarned()
   })
 
@@ -68,17 +68,17 @@ describe('COMPONENT_FUNCTIONAL', () => {
       name: 'Func',
       functional: true,
       compatConfig: {
-        ATTR_FALSE_VALUE: 'suppress-warning' as const
+        ATTR_FALSE_VALUE: 'suppress-warning' as const,
       },
       render: (h: any) => {
         // should not render required: false due to compatConfig
         return h('div', { 'data-some-attr': false })
-      }
+      },
     }
 
     const vm = new Vue({
       components: { func },
-      template: `<func class="foo" x="foo">hello</func>`
+      template: `<func class="foo" x="foo">hello</func>`,
     }).$mount()
 
     expect(vm.$el.outerHTML).toMatchInlineSnapshot(`"<div></div>"`)
@@ -86,12 +86,12 @@ describe('COMPONENT_FUNCTIONAL', () => {
       (
         deprecationData[DeprecationTypes.COMPONENT_FUNCTIONAL]
           .message as Function
-      )(func)
+      )(func),
     ).toHaveBeenWarned()
     expect(
       (deprecationData[DeprecationTypes.ATTR_FALSE_VALUE].message as Function)(
-        func
-      )
+        func,
+      ),
     ).not.toHaveBeenWarned()
   })
 })
diff --git a/packages/vue-compat/__tests__/componentVModel.spec.ts b/packages/vue-compat/__tests__/componentVModel.spec.ts
index 05043b018..7e4988287 100644
--- a/packages/vue-compat/__tests__/componentVModel.spec.ts
+++ b/packages/vue-compat/__tests__/componentVModel.spec.ts
@@ -1,10 +1,10 @@
 import Vue from '@vue/compat'
-import { ComponentOptions } from '../../runtime-core/src/component'
+import type { ComponentOptions } from '../../runtime-core/src/component'
 import { nextTick } from '../../runtime-core/src/scheduler'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 import { triggerEvent } from './utils'
 
@@ -12,7 +12,7 @@ beforeEach(() => {
   toggleDeprecationWarning(true)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
   })
 })
 
@@ -26,7 +26,7 @@ describe('COMPONENT_V_MODEL', () => {
     const vm = new Vue({
       data() {
         return {
-          text: 'foo'
+          text: 'foo',
         }
       },
       components: { CustomInput },
@@ -35,7 +35,7 @@ describe('COMPONENT_V_MODEL', () => {
         <span>{{ text }}</span>
         <custom-input v-model="text"></custom-input>
       </div>
-      `
+      `,
     }).$mount() as any
 
     const input = vm.$el.querySelector('input')
@@ -46,8 +46,8 @@ describe('COMPONENT_V_MODEL', () => {
 
     expect(
       (deprecationData[DeprecationTypes.COMPONENT_V_MODEL].message as Function)(
-        CustomInput
-      )
+        CustomInput,
+      ),
     ).toHaveBeenWarned()
 
     input.value = 'bar'
@@ -67,7 +67,7 @@ describe('COMPONENT_V_MODEL', () => {
     await runTest({
       name: 'CustomInput',
       props: ['value'],
-      template: `<input :value="value" @input="$emit('input', $event.target.value)">`
+      template: `<input :value="value" @input="$emit('input', $event.target.value)">`,
     })
   })
 
@@ -77,9 +77,9 @@ describe('COMPONENT_V_MODEL', () => {
       props: ['input'],
       model: {
         prop: 'input',
-        event: 'update'
+        event: 'update',
       },
-      template: `<input :value="input" @input="$emit('update', $event.target.value)">`
+      template: `<input :value="input" @input="$emit('update', $event.target.value)">`,
     })
   })
 })
diff --git a/packages/vue-compat/__tests__/filters.spec.ts b/packages/vue-compat/__tests__/filters.spec.ts
index c1acbd899..994267355 100644
--- a/packages/vue-compat/__tests__/filters.spec.ts
+++ b/packages/vue-compat/__tests__/filters.spec.ts
@@ -1,9 +1,9 @@
 import Vue from '@vue/compat'
 import { CompilerDeprecationTypes } from '../../compiler-core/src'
 import {
-  deprecationData,
   DeprecationTypes,
-  toggleDeprecationWarning
+  deprecationData,
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 
 beforeEach(() => {
@@ -40,8 +40,8 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: '<div>{{ msg | globalUpper }}</div>',
       data: () => ({
-        msg: 'hi'
-      })
+        msg: 'hi',
+      }),
     }).$mount()
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.textContent).toBe('HI')
@@ -54,11 +54,11 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: '<div>{{ msg | upper }}</div>',
       data: () => ({
-        msg: 'hi'
+        msg: 'hi',
       }),
       filters: {
-        upper
-      }
+        upper,
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('HI')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -68,12 +68,12 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: '<div>{{ msg | upper | reverse }}</div>',
       data: () => ({
-        msg: 'hi'
+        msg: 'hi',
       }),
       filters: {
         upper,
-        reverse
-      }
+        reverse,
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('IH')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -91,13 +91,13 @@ describe('FILTERS', () => {
       filters: {
         upper,
         reverse,
-        lower
+        lower,
       },
       data: () => ({
         id: 'abc',
         cls: 'foo',
-        ref: 'BAR'
-      })
+        ref: 'BAR',
+      }),
     }).$mount()
     expect(vm.$el.id).toBe('CBA')
     expect(vm.$el.className).toBe('oof')
@@ -112,9 +112,9 @@ describe('FILTERS', () => {
       components: {
         test: {
           props: ['pattern'],
-          template: '<div></div>'
-        }
-      }
+          template: '<div></div>',
+        },
+      },
     }).$mount() as any
     expect(vm.$refs.test.pattern).toBeInstanceOf(RegExp)
     expect(vm.$refs.test.pattern.toString()).toBe('/a|b\\//')
@@ -125,7 +125,7 @@ describe('FILTERS', () => {
     const vm = new Vue({
       data: () => ({ a: 2 }),
       template: `<div>{{ 1/a / 4 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(1 / 4))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -135,7 +135,7 @@ describe('FILTERS', () => {
     const vm = new Vue({
       data: () => ({ a: 20 }),
       template: `<div>{{ (a*2) / 5 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(16))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -144,7 +144,7 @@ describe('FILTERS', () => {
   it('handle division with dot', () => {
     const vm = new Vue({
       template: `<div>{{ 20. / 5 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(8))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -154,7 +154,7 @@ describe('FILTERS', () => {
     const vm = new Vue({
       data: () => ({ a: [20] }),
       template: `<div>{{ a[0] / 5 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(8))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -164,7 +164,7 @@ describe('FILTERS', () => {
     const vm = new Vue({
       data: () => ({ a: { n: 20 } }),
       template: `<div>{{ a['n'] / 5 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(8))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -174,7 +174,7 @@ describe('FILTERS', () => {
     const vm = new Vue({
       data: () => ({ a_: 8 }),
       template: `<div>{{ a_ / 2 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(8))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -185,11 +185,11 @@ describe('FILTERS', () => {
       template: `<div>{{ msg | add(a, 3) }}</div>`,
       data: () => ({
         msg: 1,
-        a: 2
+        a: 2,
       }),
       filters: {
-        add: (v: number, arg1: number, arg2: number) => v + arg1 + arg2
-      }
+        add: (v: number, arg1: number, arg2: number) => v + arg1 + arg2,
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('6')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -199,11 +199,11 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: `<div>{{ msg + "b | c" + 'd' | upper }}</div>`,
       data: () => ({
-        msg: 'a'
+        msg: 'a',
       }),
       filters: {
-        upper
-      }
+        upper,
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('AB | CD')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -214,11 +214,11 @@ describe('FILTERS', () => {
       template: `<div>{{ b || msg | upper }}</div>`,
       data: () => ({
         b: false,
-        msg: 'a'
+        msg: 'a',
       }),
       filters: {
-        upper
-      }
+        upper,
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('A')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -228,8 +228,8 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: `<div>{{ { a: 123 } | pick('a') }}</div>`,
       filters: {
-        pick: (v: any, key: string) => v[key]
-      }
+        pick: (v: any, key: string) => v[key],
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('123')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -239,8 +239,8 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: `<div>{{ [1, 2, 3] | reverse }}</div>`,
       filters: {
-        reverse: (arr: any[]) => arr.reverse().join(',')
-      }
+        reverse: (arr: any[]) => arr.reverse().join(','),
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('3,2,1')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -248,7 +248,7 @@ describe('FILTERS', () => {
 
   it('bigint support', () => {
     const vm = new Vue({
-      template: `<div>{{ BigInt(BigInt(10000000)) + BigInt(2000000000n) * 3000000n }}</div>`
+      template: `<div>{{ BigInt(BigInt(10000000)) + BigInt(2000000000n) * 3000000n }}</div>`,
     }).$mount()
     expect(vm.$el.textContent).toBe('6000000010000000')
   })
diff --git a/packages/vue-compat/__tests__/global.spec.ts b/packages/vue-compat/__tests__/global.spec.ts
index ffbea39a3..fcbdefa2f 100644
--- a/packages/vue-compat/__tests__/global.spec.ts
+++ b/packages/vue-compat/__tests__/global.spec.ts
@@ -4,7 +4,7 @@ import { h, nextTick } from '@vue/runtime-core'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 import { singletonApp } from '../../runtime-core/src/compat/global'
 import { createApp } from '../src/esm-index'
@@ -30,12 +30,12 @@ describe('GLOBAL_MOUNT', () => {
       compatConfig: { GLOBAL_MOUNT: true },
       data() {
         return {
-          msg: 'hello'
+          msg: 'hello',
         }
-      }
+      },
     })
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message,
     ).toHaveBeenWarned()
     expect(el.innerHTML).toBe('hello')
   })
@@ -46,9 +46,9 @@ describe('GLOBAL_MOUNT', () => {
     new Vue({
       data() {
         return {
-          msg: 'hello'
+          msg: 'hello',
         }
-      }
+      },
     }).$mount(el)
     expect(el.innerHTML).toBe('hello')
   })
@@ -64,10 +64,10 @@ describe('GLOBAL_MOUNT_CONTAINER', () => {
     new Vue().$mount(el)
     // warning only
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message,
     ).toHaveBeenWarned()
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_MOUNT_CONTAINER].message
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT_CONTAINER].message,
     ).toHaveBeenWarned()
   })
 })
@@ -80,46 +80,46 @@ describe('GLOBAL_EXTEND', () => {
     const Test = Vue.extend({
       name: 'test',
       a: 1,
-      b: 2
+      b: 2,
     })
     expect(Test.options.a).toBe(1)
     expect(Test.options.b).toBe(2)
     expect(Test.super).toBe(Vue)
     const t = new Test({
-      a: 2
+      a: 2,
     })
     expect(t.$options.a).toBe(2)
     expect(t.$options.b).toBe(2)
     // inheritance
     const Test2 = Test.extend({
-      a: 2
+      a: 2,
     })
     expect(Test2.options.a).toBe(2)
     expect(Test2.options.b).toBe(2)
     const t2 = new Test2({
-      a: 3
+      a: 3,
     })
     expect(t2.$options.a).toBe(3)
     expect(t2.$options.b).toBe(2)
 
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message,
     ).toHaveBeenWarned()
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_EXTEND].message
+      deprecationData[DeprecationTypes.GLOBAL_EXTEND].message,
     ).toHaveBeenWarned()
   })
 
   it('should work when used as components', () => {
     const foo = Vue.extend({
-      template: '<span>foo</span>'
+      template: '<span>foo</span>',
     })
     const bar = Vue.extend({
-      template: '<span>bar</span>'
+      template: '<span>bar</span>',
     })
     const vm = new Vue({
       template: '<div><foo></foo><bar></bar></div>',
-      components: { foo, bar }
+      components: { foo, bar },
     }).$mount()
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>')
@@ -130,17 +130,17 @@ describe('GLOBAL_EXTEND', () => {
     const A = Vue.extend({
       created() {
         calls.push(1)
-      }
+      },
     })
     const B = A.extend({
       created() {
         calls.push(2)
-      }
+      },
     })
     new B({
       created() {
         calls.push(3)
-      }
+      },
     })
     expect(calls).toEqual([1, 2, 3])
   })
@@ -151,22 +151,22 @@ describe('GLOBAL_EXTEND', () => {
     const c = vi.fn()
     const d = vi.fn()
     const A = Vue.extend({
-      created: a
+      created: a,
     })
     const B = Vue.extend({
       mixins: [A],
-      created: b
+      created: b,
     })
     const C = Vue.extend({
       extends: B,
-      created: c
+      created: c,
     })
     const D = Vue.extend({
       mixins: [C],
       created: d,
       render() {
         return null
-      }
+      },
     })
     new D().$mount()
     expect(a.mock.calls.length).toStrictEqual(1)
@@ -180,23 +180,23 @@ describe('GLOBAL_EXTEND', () => {
       methods: {
         a() {
           return this.n
-        }
-      }
+        },
+      },
     })
     const B = A.extend({
       methods: {
         b() {
           return this.n + 1
-        }
-      }
+        },
+      },
     })
     const b = new B({
       data: () => ({ n: 0 }),
       methods: {
         c() {
           return this.n + 2
-        }
-      }
+        },
+      },
     }) as any
     expect(b.a()).toBe(0)
     expect(b.b()).toBe(1)
@@ -207,19 +207,19 @@ describe('GLOBAL_EXTEND', () => {
     const A = Vue.extend({
       components: {
         aa: {
-          template: '<div>A</div>'
-        }
-      }
+          template: '<div>A</div>',
+        },
+      },
     })
     const B = A.extend({
       components: {
         bb: {
-          template: '<div>B</div>'
-        }
-      }
+          template: '<div>B</div>',
+        },
+      },
     })
     const b = new B({
-      template: '<div><aa></aa><bb></bb></div>'
+      template: '<div><aa></aa><bb></bb></div>',
     }).$mount()
     expect(b.$el).toBeInstanceOf(HTMLDivElement)
     expect(b.$el.innerHTML).toBe('<div>A</div><div>B</div>')
@@ -227,7 +227,7 @@ describe('GLOBAL_EXTEND', () => {
 
   it('caching', () => {
     const options = {
-      template: '<div></div>'
+      template: '<div></div>',
     }
     const A = Vue.extend(options)
     const B = Vue.extend(options)
@@ -251,10 +251,10 @@ describe('GLOBAL_PROTOTYPE', () => {
     expect(vm.$test).toBe(1)
     delete Vue.prototype.$test
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message,
     ).toHaveBeenWarned()
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_PROTOTYPE].message
+      deprecationData[DeprecationTypes.GLOBAL_PROTOTYPE].message,
     ).toHaveBeenWarned()
   })
 
@@ -265,7 +265,7 @@ describe('GLOBAL_PROTOTYPE', () => {
     const vm = new Vue({
       data() {
         return { msg: 'method' }
-      }
+      },
     }) as any
     expect(vm.$test()).toBe('method')
     delete Vue.prototype.$test
@@ -276,12 +276,12 @@ describe('GLOBAL_PROTOTYPE', () => {
       configurable: true,
       get() {
         return this.msg
-      }
+      },
     })
     const vm = new Vue({
       data() {
         return { msg: 'getter' }
-      }
+      },
     }) as any
     expect(vm.$test).toBe('getter')
     delete Vue.prototype.$test
@@ -299,9 +299,9 @@ describe('GLOBAL_PROTOTYPE', () => {
     const vm = new Vue({
       data() {
         return {
-          msg: 'test'
+          msg: 'test',
         }
-      }
+      },
     }) as any
     expect(typeof vm.$test).toBe('function')
     expect(typeof vm.$test.additionalFn).toBe('function')
@@ -321,7 +321,7 @@ describe('GLOBAL_PROTOTYPE', () => {
   test('should affect apps created via createApp()', () => {
     Vue.prototype.$test = 1
     const vm = createApp({
-      template: 'foo'
+      template: 'foo',
     }).mount(document.createElement('div')) as any
     expect(vm.$test).toBe(1)
     delete Vue.prototype.$test
@@ -335,7 +335,7 @@ describe('GLOBAL_SET/DELETE', () => {
     Vue.set(obj, 'foo', 1)
     expect(obj.foo).toBe(1)
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_SET].message
+      deprecationData[DeprecationTypes.GLOBAL_SET].message,
     ).toHaveBeenWarned()
   })
 
@@ -345,7 +345,7 @@ describe('GLOBAL_SET/DELETE', () => {
     Vue.delete(obj, 'foo')
     expect('foo' in obj).toBe(false)
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_DELETE].message
+      deprecationData[DeprecationTypes.GLOBAL_DELETE].message,
     ).toHaveBeenWarned()
   })
 })
@@ -356,7 +356,7 @@ describe('GLOBAL_OBSERVABLE', () => {
     const obj = Vue.observable({})
     expect(isReactive(obj)).toBe(true)
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_OBSERVABLE].message
+      deprecationData[DeprecationTypes.GLOBAL_OBSERVABLE].message,
     ).toHaveBeenWarned()
   })
 })
@@ -365,7 +365,6 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
   test('defineReactive', () => {
     toggleDeprecationWarning(true)
     const obj: any = {}
-    // @ts-ignore
     Vue.util.defineReactive(obj, 'test', 1)
 
     let n
@@ -377,17 +376,16 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
     expect(n).toBe(2)
 
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_PRIVATE_UTIL].message
+      deprecationData[DeprecationTypes.GLOBAL_PRIVATE_UTIL].message,
     ).toHaveBeenWarned()
   })
 
   test('defineReactive on instance', async () => {
     const vm = new Vue({
       beforeCreate() {
-        // @ts-ignore
         Vue.util.defineReactive(this, 'foo', 1)
       },
-      template: `<div>{{ foo }}</div>`
+      template: `<div>{{ foo }}</div>`,
     }).$mount() as any
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.textContent).toBe('1')
@@ -399,10 +397,9 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
   test('defineReactive on instance with key that starts with $', async () => {
     const vm = new Vue({
       beforeCreate() {
-        // @ts-ignore
         Vue.util.defineReactive(this, '$foo', 1)
       },
-      template: `<div>{{ $foo }}</div>`
+      template: `<div>{{ $foo }}</div>`,
     }).$mount() as any
     expect(vm.$el.textContent).toBe('1')
     vm.$foo = 2
@@ -413,7 +410,6 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
   test('defineReactive with object value', () => {
     const obj: any = {}
     const val = { a: 1 }
-    // @ts-ignore
     Vue.util.defineReactive(obj, 'foo', val)
 
     let n
@@ -429,7 +425,6 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
   test('defineReactive with array value', () => {
     const obj: any = {}
     const val = [1]
-    // @ts-ignore
     Vue.util.defineReactive(obj, 'foo', val)
 
     let n
@@ -446,7 +441,7 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
 test('global asset registration should affect apps created via createApp', () => {
   Vue.component('foo', { template: 'foo' })
   const vm = createApp({
-    template: '<foo/>'
+    template: '<foo/>',
   }).mount(document.createElement('div')) as any
   expect(vm.$el.textContent).toBe('foo')
   delete singletonApp._context.components.foo
@@ -454,7 +449,7 @@ test('global asset registration should affect apps created via createApp', () =>
 
 test('post-facto global asset registration should affect apps created via createApp', () => {
   const app = createApp({
-    template: '<foo/>'
+    template: '<foo/>',
   })
   Vue.component('foo', { template: 'foo' })
   const vm = app.mount(document.createElement('div'))
@@ -470,7 +465,7 @@ test('local asset registration should not affect other local apps', () => {
   app2.component('foo', {})
 
   expect(
-    `Component "foo" has already been registered in target app`
+    `Component "foo" has already been registered in target app`,
   ).not.toHaveBeenWarned()
 })
 
@@ -495,9 +490,9 @@ test('local app config should not affect other local apps in v3 mode', () => {
     render: () => h('div'),
     provide() {
       return {
-        test: 123
+        test: 123,
       }
-    }
+    },
   })
   app1.config.globalProperties.test = () => {}
   app1.mount(document.createElement('div'))
diff --git a/packages/vue-compat/__tests__/globalConfig.spec.ts b/packages/vue-compat/__tests__/globalConfig.spec.ts
index be7b87ea4..44cf66515 100644
--- a/packages/vue-compat/__tests__/globalConfig.spec.ts
+++ b/packages/vue-compat/__tests__/globalConfig.spec.ts
@@ -1,7 +1,7 @@
 import Vue from '@vue/compat'
 import {
   DeprecationTypes,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 import { createApp } from '../src/esm-index'
 import { triggerEvent } from './utils'
@@ -21,7 +21,7 @@ afterEach(() => {
 test('GLOBAL_KEY_CODES', () => {
   Vue.config.keyCodes = {
     foo: 86,
-    bar: [38, 87]
+    bar: [38, 87],
   }
 
   const onFoo = vi.fn()
@@ -33,8 +33,8 @@ test('GLOBAL_KEY_CODES', () => {
     template: `<input type="text" @keyup.foo="onFoo" @keyup.bar="onBar">`,
     methods: {
       onFoo,
-      onBar
-    }
+      onBar,
+    },
   })
 
   triggerEvent(el.children[0], 'keyup', e => {
@@ -64,7 +64,7 @@ test('GLOBAL_IGNORED_ELEMENTS', () => {
   const el = document.createElement('div')
   new Vue({
     el,
-    template: `<v-foo/><foo/>`
+    template: `<v-foo/><foo/>`,
   })
   expect(el.innerHTML).toBe(`<v-foo></v-foo><foo></foo>`)
 })
@@ -73,7 +73,7 @@ test('singleton config should affect apps created with createApp()', () => {
   Vue.config.ignoredElements = [/^v-/, 'foo']
   const el = document.createElement('div')
   createApp({
-    template: `<v-foo/><foo/>`
+    template: `<v-foo/><foo/>`,
   }).mount(el)
   expect(el.innerHTML).toBe(`<v-foo></v-foo><foo></foo>`)
 })
diff --git a/packages/vue-compat/__tests__/instance.spec.ts b/packages/vue-compat/__tests__/instance.spec.ts
index 009dc7aa6..aa5e95a7e 100644
--- a/packages/vue-compat/__tests__/instance.spec.ts
+++ b/packages/vue-compat/__tests__/instance.spec.ts
@@ -1,19 +1,20 @@
-import { type Mock } from 'vitest'
+import type { Mock } from 'vitest'
 import Vue from '@vue/compat'
-import { Slots } from '../../runtime-core/src/componentSlots'
+import type { Slots } from '../../runtime-core/src/componentSlots'
 import { Text } from '../../runtime-core/src/vnode'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
-import { LegacyPublicInstance } from '../../runtime-core/src/compat/instance'
+import type { LegacyPublicInstance } from '../../runtime-core/src/compat/instance'
 
 beforeEach(() => {
   toggleDeprecationWarning(true)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
+    PRIVATE_APIS: 'suppress-warning',
   })
 })
 
@@ -27,7 +28,7 @@ test('INSTANCE_SET', () => {
   new Vue().$set(obj, 'foo', 1)
   expect(obj.foo).toBe(1)
   expect(
-    deprecationData[DeprecationTypes.INSTANCE_SET].message
+    deprecationData[DeprecationTypes.INSTANCE_SET].message,
   ).toHaveBeenWarned()
 })
 
@@ -36,14 +37,14 @@ test('INSTANCE_DELETE', () => {
   new Vue().$delete(obj, 'foo')
   expect('foo' in obj).toBe(false)
   expect(
-    deprecationData[DeprecationTypes.INSTANCE_DELETE].message
+    deprecationData[DeprecationTypes.INSTANCE_DELETE].message,
   ).toHaveBeenWarned()
 })
 
 test('INSTANCE_DESTROY', () => {
   new Vue({ template: 'foo' }).$mount().$destroy()
   expect(
-    deprecationData[DeprecationTypes.INSTANCE_DESTROY].message
+    deprecationData[DeprecationTypes.INSTANCE_DESTROY].message,
   ).toHaveBeenWarned()
 })
 
@@ -67,7 +68,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     expect(spy).toHaveBeenCalledTimes(1)
     expect(spy).toHaveBeenCalledWith(1, 2, 3, 4)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -83,7 +84,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     expect(spy).toHaveBeenCalledTimes(2)
     expect(spy).toHaveBeenCalledWith(5, 6, 7, 8)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -96,7 +97,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     vm.$emit('test3', 1, 2, 3, 4)
     expect(spy).toHaveBeenCalledTimes(1)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -106,7 +107,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     vm.$emit('test1')
     expect(spy).not.toHaveBeenCalled()
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -117,7 +118,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     expect(spy).toHaveBeenCalledTimes(1)
     expect(spy).toHaveBeenCalledWith(1, 2, 3)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -127,7 +128,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     vm.$emit('test', 1, 2, 3)
     expect(spy).not.toHaveBeenCalled()
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -139,7 +140,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     vm.$emit('test2')
     expect(spy).not.toHaveBeenCalled()
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -153,7 +154,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     expect(spy).toHaveBeenCalledTimes(1)
     expect(spy).toHaveBeenCalledWith(2)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -167,7 +168,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     expect(spy2).toHaveBeenCalledTimes(1)
     expect(spy2).toHaveBeenCalledWith(1, 2, 3)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 })
@@ -183,7 +184,7 @@ describe('INSTANCE_EVENT_HOOKS', () => {
       (
         deprecationData[DeprecationTypes.INSTANCE_EVENT_HOOKS]
           .message as Function
-      )('hook:mounted')
+      )('hook:mounted'),
     ).toHaveBeenWarned()
   })
 
@@ -194,16 +195,16 @@ describe('INSTANCE_EVENT_HOOKS', () => {
       methods: { spy },
       components: {
         child: {
-          template: 'foo'
-        }
-      }
+          template: 'foo',
+        },
+      },
     }).$mount()
     expect(spy).toHaveBeenCalled()
     expect(
       (
         deprecationData[DeprecationTypes.INSTANCE_EVENT_HOOKS]
           .message as Function
-      )('hook:mounted')
+      )('hook:mounted'),
     ).toHaveBeenWarned()
   })
 })
@@ -216,16 +217,16 @@ test('INSTANCE_EVENT_CHILDREN', () => {
         template: 'foo',
         data() {
           return { n: 1 }
-        }
-      }
-    }
+        },
+      },
+    },
   }).$mount()
   expect(vm.$children.length).toBe(4)
   vm.$children.forEach((c: any) => {
     expect(c.n).toBe(1)
   })
   expect(
-    deprecationData[DeprecationTypes.INSTANCE_CHILDREN].message
+    deprecationData[DeprecationTypes.INSTANCE_CHILDREN].message,
   ).toHaveBeenWarned()
 })
 
@@ -242,9 +243,9 @@ test('INSTANCE_LISTENERS', () => {
         template: `<div/>`,
         mounted() {
           listeners = this.$listeners
-        }
-      }
-    }
+        },
+      },
+    },
   }).$mount()
 
   expect(Object.keys(listeners!)).toMatchObject(['click', 'custom'])
@@ -252,7 +253,7 @@ test('INSTANCE_LISTENERS', () => {
   expect(listeners!.custom()).toBe('bar')
 
   expect(
-    deprecationData[DeprecationTypes.INSTANCE_LISTENERS].message
+    deprecationData[DeprecationTypes.INSTANCE_LISTENERS].message,
   ).toHaveBeenWarned()
 })
 
@@ -266,24 +267,24 @@ describe('INSTANCE_SCOPED_SLOTS', () => {
           compatConfig: { RENDER_FUNCTION: false },
           render() {
             slots = this.$scopedSlots
-          }
-        }
-      }
+          },
+        },
+      },
     }).$mount()
 
     expect(slots!.default!({ msg: 'hi' })).toMatchObject([
       {
         type: Text,
-        children: 'hi'
-      }
+        children: 'hi',
+      },
     ])
 
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_SCOPED_SLOTS].message
+      deprecationData[DeprecationTypes.INSTANCE_SCOPED_SLOTS].message,
     ).toHaveBeenWarned()
   })
 
-  test('should not include legacy slot usage in $scopedSlots', () => {
+  test('should include legacy slot usage in $scopedSlots', () => {
     let normalSlots: Slots
     let scopedSlots: Slots
     new Vue({
@@ -291,19 +292,19 @@ describe('INSTANCE_SCOPED_SLOTS', () => {
       components: {
         child: {
           compatConfig: { RENDER_FUNCTION: false },
-          render() {
+          render(this: LegacyPublicInstance) {
             normalSlots = this.$slots
             scopedSlots = this.$scopedSlots
-          }
-        }
-      }
+          },
+        },
+      },
     }).$mount()
 
     expect('default' in normalSlots!).toBe(true)
-    expect('default' in scopedSlots!).toBe(false)
+    expect('default' in scopedSlots!).toBe(true)
 
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_SCOPED_SLOTS].message
+      deprecationData[DeprecationTypes.INSTANCE_SCOPED_SLOTS].message,
     ).toHaveBeenWarned()
   })
 })
@@ -314,20 +315,60 @@ test('INSTANCE_ATTR_CLASS_STYLE', () => {
     components: {
       child: {
         inheritAttrs: false,
-        template: `<div><div v-bind="$attrs" /></div>`
-      }
-    }
+        template: `<div><div v-bind="$attrs" /></div>`,
+      },
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.outerHTML).toBe(
-    `<div class="foo" style="color: red;"><div id="ok"></div></div>`
+    `<div class="foo" style="color: red;"><div id="ok"></div></div>`,
   )
 
   expect(
     (
       deprecationData[DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE]
         .message as Function
-    )('Anonymous')
+    )('Anonymous'),
   ).toHaveBeenWarned()
 })
+
+test('$options mutation', () => {
+  const Comp = {
+    props: ['id'],
+    template: '<div/>',
+    data() {
+      return {
+        foo: '',
+      }
+    },
+    created(this: any) {
+      expect(this.$options.parent).toBeDefined()
+      expect(this.$options.test).toBeUndefined()
+      this.$options.test = this.id
+      expect(this.$options.test).toBe(this.id)
+    },
+  }
+
+  new Vue({
+    template: `<div><Comp id="1"/><Comp id="2"/></div>`,
+    components: { Comp },
+  }).$mount()
+})
+
+test('other private APIs', () => {
+  new Vue({
+    created() {
+      expect(this.$createElement).toBeTruthy()
+    },
+  })
+
+  new Vue({
+    compatConfig: {
+      PRIVATE_APIS: false,
+    },
+    created() {
+      expect(this.$createElement).toBeUndefined()
+    },
+  })
+})
diff --git a/packages/vue-compat/__tests__/misc.spec.ts b/packages/vue-compat/__tests__/misc.spec.ts
index 7c248e9dd..1a873633b 100644
--- a/packages/vue-compat/__tests__/misc.spec.ts
+++ b/packages/vue-compat/__tests__/misc.spec.ts
@@ -3,7 +3,7 @@ import { nextTick } from '../../runtime-core/src/scheduler'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 import { triggerEvent } from './utils'
 import { h } from '@vue/runtime-core'
@@ -12,7 +12,7 @@ beforeEach(() => {
   toggleDeprecationWarning(true)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
   })
 })
 
@@ -24,23 +24,23 @@ afterEach(() => {
 test('mode as function', () => {
   const Foo = {
     name: 'Foo',
-    render: (h: any) => h('div', 'foo')
+    render: (h: any) => h('div', 'foo'),
   }
 
   const Bar = {
     name: 'Bar',
     data: () => ({ msg: 'bar' }),
-    render: (ctx: any) => h('div', ctx.msg)
+    render: (ctx: any) => h('div', ctx.msg),
   }
 
   toggleDeprecationWarning(false)
   Vue.configureCompat({
-    MODE: comp => (comp && comp.name === 'Bar' ? 3 : 2)
+    MODE: comp => (comp && comp.name === 'Bar' ? 3 : 2),
   })
 
   const vm = new Vue({
     components: { Foo, Bar },
-    template: `<div><foo/><bar/></div>`
+    template: `<div><foo/><bar/></div>`,
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -52,15 +52,15 @@ test('WATCH_ARRAY', async () => {
   const vm = new Vue({
     data() {
       return {
-        foo: []
+        foo: [],
       }
     },
     watch: {
-      foo: spy
-    }
+      foo: spy,
+    },
   }) as any
   expect(
-    deprecationData[DeprecationTypes.WATCH_ARRAY].message
+    deprecationData[DeprecationTypes.WATCH_ARRAY].message,
   ).toHaveBeenWarned()
 
   expect(spy).not.toHaveBeenCalled()
@@ -82,21 +82,21 @@ test('PROPS_DEFAULT_THIS', () => {
           thisCtx = {
             foo: this.foo,
             $options: this.$options,
-            provided: this.provided
+            provided: this.provided,
           }
           return this.foo + 1
-        }
-      }
+        },
+      },
     },
-    template: `{{ bar }}`
+    template: `{{ bar }}`,
   }
 
   const vm = new Vue({
     components: { Child },
     provide: {
-      provided: 2
+      provided: 2,
     },
-    template: `<child :foo="0" />`
+    template: `<child :foo="0" />`,
   }).$mount()
 
   expect(vm.$el.textContent).toBe('1')
@@ -109,8 +109,8 @@ test('PROPS_DEFAULT_THIS', () => {
 
   expect(
     (deprecationData[DeprecationTypes.PROPS_DEFAULT_THIS].message as Function)(
-      'bar'
-    )
+      'bar',
+    ),
   ).toHaveBeenWarned()
 })
 
@@ -118,7 +118,7 @@ test('V_ON_KEYCODE_MODIFIER', () => {
   const spy = vi.fn()
   const vm = new Vue({
     template: `<input @keyup.1="spy">`,
-    methods: { spy }
+    methods: { spy },
   }).$mount()
   expect(vm.$el).toBeInstanceOf(HTMLInputElement)
   triggerEvent(vm.$el, 'keyup', e => {
@@ -127,7 +127,7 @@ test('V_ON_KEYCODE_MODIFIER', () => {
   })
   expect(spy).toHaveBeenCalled()
   expect(
-    deprecationData[DeprecationTypes.V_ON_KEYCODE_MODIFIER].message
+    deprecationData[DeprecationTypes.V_ON_KEYCODE_MODIFIER].message,
   ).toHaveBeenWarned()
 })
 
@@ -137,7 +137,7 @@ test('CUSTOM_DIR', async () => {
     inserted: vi.fn(),
     update: vi.fn(),
     componentUpdated: vi.fn(),
-    unbind: vi.fn()
+    unbind: vi.fn(),
   } as any
 
   const getCalls = () =>
@@ -147,13 +147,13 @@ test('CUSTOM_DIR', async () => {
     data() {
       return {
         ok: true,
-        foo: 1
+        foo: 1,
       }
     },
     template: `<div v-if="ok" v-my-dir="foo"/>`,
     directives: {
-      myDir
-    }
+      myDir,
+    },
   }).$mount() as any
 
   expect(getCalls()).toMatchObject([1, 1, 0, 0, 0])
@@ -161,14 +161,14 @@ test('CUSTOM_DIR', async () => {
   expect(
     (deprecationData[DeprecationTypes.CUSTOM_DIR].message as Function)(
       'bind',
-      'beforeMount'
-    )
+      'beforeMount',
+    ),
   ).toHaveBeenWarned()
   expect(
     (deprecationData[DeprecationTypes.CUSTOM_DIR].message as Function)(
       'inserted',
-      'mounted'
-    )
+      'mounted',
+    ),
   ).toHaveBeenWarned()
 
   vm.foo++
@@ -178,39 +178,64 @@ test('CUSTOM_DIR', async () => {
   expect(
     (deprecationData[DeprecationTypes.CUSTOM_DIR].message as Function)(
       'update',
-      'updated'
-    )
+      'updated',
+    ),
   ).toHaveBeenWarned()
   expect(
     (deprecationData[DeprecationTypes.CUSTOM_DIR].message as Function)(
       'componentUpdated',
-      'updated'
-    )
+      'updated',
+    ),
   ).toHaveBeenWarned()
 })
 
 test('ATTR_FALSE_VALUE', () => {
   const vm = new Vue({
-    template: `<div :id="false" :foo="false"/>`
+    template: `<div :id="false" :foo="false"/>`,
   }).$mount()
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.hasAttribute('id')).toBe(false)
   expect(vm.$el.hasAttribute('foo')).toBe(false)
   expect(
     (deprecationData[DeprecationTypes.ATTR_FALSE_VALUE].message as Function)(
-      'id'
-    )
+      'id',
+    ),
   ).toHaveBeenWarned()
   expect(
     (deprecationData[DeprecationTypes.ATTR_FALSE_VALUE].message as Function)(
-      'foo'
-    )
+      'foo',
+    ),
   ).toHaveBeenWarned()
 })
 
+test("ATTR_FALSE_VALUE with false value shouldn't throw warning", () => {
+  const vm = new Vue({
+    template: `<div :id="false" :foo="false"/>`,
+    compatConfig: {
+      ATTR_FALSE_VALUE: false,
+    },
+  }).$mount()
+
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
+  expect(vm.$el.hasAttribute('id')).toBe(true)
+  expect(vm.$el.getAttribute('id')).toBe('false')
+  expect(vm.$el.hasAttribute('foo')).toBe(true)
+  expect(vm.$el.getAttribute('foo')).toBe('false')
+  expect(
+    (deprecationData[DeprecationTypes.ATTR_FALSE_VALUE].message as Function)(
+      'id',
+    ),
+  ).not.toHaveBeenWarned()
+  expect(
+    (deprecationData[DeprecationTypes.ATTR_FALSE_VALUE].message as Function)(
+      'foo',
+    ),
+  ).not.toHaveBeenWarned()
+})
+
 test('ATTR_ENUMERATED_COERCION', () => {
   const vm = new Vue({
-    template: `<div :draggable="null" :spellcheck="0" contenteditable="foo" />`
+    template: `<div :draggable="null" :spellcheck="0" contenteditable="foo" />`,
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -221,18 +246,18 @@ test('ATTR_ENUMERATED_COERCION', () => {
     (
       deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
         .message as Function
-    )('draggable', null, 'false')
+    )('draggable', null, 'false'),
   ).toHaveBeenWarned()
   expect(
     (
       deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
         .message as Function
-    )('spellcheck', 0, 'true')
+    )('spellcheck', 0, 'true'),
   ).toHaveBeenWarned()
   expect(
     (
       deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
         .message as Function
-    )('contenteditable', 'foo', 'true')
+    )('contenteditable', 'foo', 'true'),
   ).toHaveBeenWarned()
 })
diff --git a/packages/vue-compat/__tests__/options.spec.ts b/packages/vue-compat/__tests__/options.spec.ts
index 238f2e2d5..a459d4fdf 100644
--- a/packages/vue-compat/__tests__/options.spec.ts
+++ b/packages/vue-compat/__tests__/options.spec.ts
@@ -3,7 +3,7 @@ import { nextTick } from '../../runtime-core/src/scheduler'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 
 beforeEach(() => {
@@ -11,7 +11,7 @@ beforeEach(() => {
   Vue.configureCompat({
     MODE: 2,
     GLOBAL_MOUNT: 'suppress-warning',
-    GLOBAL_EXTEND: 'suppress-warning'
+    GLOBAL_EXTEND: 'suppress-warning',
   })
 })
 
@@ -23,11 +23,11 @@ afterEach(() => {
 test('root data plain object', () => {
   const vm = new Vue({
     data: { foo: 1 } as any,
-    template: `{{ foo }}`
+    template: `{{ foo }}`,
   }).$mount()
   expect(vm.$el.textContent).toBe('1')
   expect(
-    deprecationData[DeprecationTypes.OPTIONS_DATA_FN].message
+    deprecationData[DeprecationTypes.OPTIONS_DATA_FN].message,
   ).toHaveBeenWarned()
 })
 
@@ -36,30 +36,30 @@ test('data deep merge', () => {
     data() {
       return {
         foo: {
-          baz: 2
-        }
+          baz: 2,
+        },
       }
-    }
+    },
   }
 
   const vm = new Vue({
     mixins: [mixin],
     data: () => ({
       foo: {
-        bar: 1
+        bar: 1,
       },
-      selfData: 3
+      selfData: 3,
     }),
-    template: `{{ { selfData, foo } }}`
+    template: `{{ { selfData, foo } }}`,
   }).$mount()
 
   expect(vm.$el.textContent).toBe(
-    JSON.stringify({ selfData: 3, foo: { baz: 2, bar: 1 } }, null, 2)
+    JSON.stringify({ selfData: 3, foo: { baz: 2, bar: 1 } }, null, 2),
   )
   expect(
     (deprecationData[DeprecationTypes.OPTIONS_DATA_MERGE].message as Function)(
-      'foo'
-    )
+      'foo',
+    ),
   ).toHaveBeenWarned()
 })
 
@@ -68,18 +68,18 @@ test('data deep merge w/ extended constructor', () => {
   const App = Vue.extend({
     template: `<pre>{{ { mixinData, selfData } }}</pre>`,
     mixins: [{ data: () => ({ mixinData: 'mixinData' }) }],
-    data: () => ({ selfData: 'selfData' })
+    data: () => ({ selfData: 'selfData' }),
   })
   const vm = new App().$mount()
   expect(vm.$el.textContent).toBe(
     JSON.stringify(
       {
         mixinData: 'mixinData',
-        selfData: 'selfData'
+        selfData: 'selfData',
       },
       null,
-      2
-    )
+      2,
+    ),
   )
 })
 
@@ -90,7 +90,7 @@ test('beforeDestroy/destroyed', async () => {
   const child = {
     template: `foo`,
     beforeDestroy,
-    destroyed
+    destroyed,
   }
 
   const vm = new Vue({
@@ -98,7 +98,7 @@ test('beforeDestroy/destroyed', async () => {
     data() {
       return { ok: true }
     },
-    components: { child }
+    components: { child },
   }).$mount() as any
 
   vm.ok = false
@@ -107,11 +107,11 @@ test('beforeDestroy/destroyed', async () => {
   expect(destroyed).toHaveBeenCalled()
 
   expect(
-    deprecationData[DeprecationTypes.OPTIONS_BEFORE_DESTROY].message
+    deprecationData[DeprecationTypes.OPTIONS_BEFORE_DESTROY].message,
   ).toHaveBeenWarned()
 
   expect(
-    deprecationData[DeprecationTypes.OPTIONS_DESTROYED].message
+    deprecationData[DeprecationTypes.OPTIONS_DESTROYED].message,
   ).toHaveBeenWarned()
 })
 
@@ -122,7 +122,7 @@ test('beforeDestroy/destroyed in Vue.extend components', async () => {
   const child = Vue.extend({
     template: `foo`,
     beforeDestroy,
-    destroyed
+    destroyed,
   })
 
   const vm = new Vue({
@@ -130,7 +130,7 @@ test('beforeDestroy/destroyed in Vue.extend components', async () => {
     data() {
       return { ok: true }
     },
-    components: { child }
+    components: { child },
   }).$mount() as any
 
   vm.ok = false
@@ -139,10 +139,10 @@ test('beforeDestroy/destroyed in Vue.extend components', async () => {
   expect(destroyed).toHaveBeenCalled()
 
   expect(
-    deprecationData[DeprecationTypes.OPTIONS_BEFORE_DESTROY].message
+    deprecationData[DeprecationTypes.OPTIONS_BEFORE_DESTROY].message,
   ).toHaveBeenWarned()
 
   expect(
-    deprecationData[DeprecationTypes.OPTIONS_DESTROYED].message
+    deprecationData[DeprecationTypes.OPTIONS_DESTROYED].message,
   ).toHaveBeenWarned()
 })
diff --git a/packages/vue-compat/__tests__/renderFn.spec.ts b/packages/vue-compat/__tests__/renderFn.spec.ts
index 9b3d14665..04d8aaac1 100644
--- a/packages/vue-compat/__tests__/renderFn.spec.ts
+++ b/packages/vue-compat/__tests__/renderFn.spec.ts
@@ -2,12 +2,12 @@ import { ShapeFlags } from '@vue/shared'
 import Vue from '@vue/compat'
 import { createComponentInstance } from '../../runtime-core/src/component'
 import { setCurrentRenderingInstance } from '../../runtime-core/src/componentRenderContext'
-import { DirectiveBinding } from '../../runtime-core/src/directives'
+import type { DirectiveBinding } from '../../runtime-core/src/directives'
 import { createVNode } from '../../runtime-core/src/vnode'
 import {
-  deprecationData,
   DeprecationTypes,
-  toggleDeprecationWarning
+  deprecationData,
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 import { compatH as h } from '../../runtime-core/src/compat/renderFn'
 
@@ -15,7 +15,7 @@ beforeEach(() => {
   toggleDeprecationWarning(false)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
   })
 })
 
@@ -29,16 +29,16 @@ describe('compat: render function', () => {
   const mockChildComp = {}
   const mockComponent = {
     directives: {
-      mockDir
+      mockDir,
     },
     components: {
-      foo: mockChildComp
-    }
+      foo: mockChildComp,
+    },
   }
   const mockInstance = createComponentInstance(
     createVNode(mockComponent),
     null,
-    null
+    null,
   )
   beforeEach(() => {
     setCurrentRenderingInstance(mockInstance)
@@ -49,7 +49,7 @@ describe('compat: render function', () => {
 
   test('string component lookup', () => {
     expect(h('foo')).toMatchObject({
-      type: mockChildComp
+      type: mockChildComp,
     })
   })
 
@@ -59,23 +59,23 @@ describe('compat: render function', () => {
         class: 'foo',
         style: { color: 'red' },
         attrs: {
-          id: 'foo'
+          id: 'foo',
         },
         domProps: {
-          innerHTML: 'hi'
+          innerHTML: 'hi',
         },
         props: {
-          myProp: 'foo'
-        }
-      })
+          myProp: 'foo',
+        },
+      }),
     ).toMatchObject({
       props: {
         class: 'foo',
         style: { color: 'red' },
         id: 'foo',
         innerHTML: 'hi',
-        myProp: 'foo'
-      }
+        myProp: 'foo',
+      },
     })
   })
 
@@ -83,12 +83,12 @@ describe('compat: render function', () => {
     expect(
       h('div', {
         class: { foo: true },
-        staticClass: 'bar'
-      })
+        staticClass: 'bar',
+      }),
     ).toMatchObject({
       props: {
-        class: 'bar foo'
-      }
+        class: 'bar foo',
+      },
     })
   })
 
@@ -96,15 +96,15 @@ describe('compat: render function', () => {
     expect(
       h('div', {
         style: { color: 'red' },
-        staticStyle: { fontSize: '14px' }
-      })
+        staticStyle: { fontSize: '14px' },
+      }),
     ).toMatchObject({
       props: {
         style: {
           color: 'red',
-          fontSize: '14px'
-        }
-      }
+          fontSize: '14px',
+        },
+      },
     })
   })
 
@@ -114,20 +114,20 @@ describe('compat: render function', () => {
       h('div', {
         on: {
           click: fn,
-          fooBar: fn
+          fooBar: fn,
         },
         nativeOn: {
           click: fn,
-          'bar-baz': fn
-        }
-      })
+          'bar-baz': fn,
+        },
+      }),
     ).toMatchObject({
       props: {
         onClick: fn,
         onClickNative: fn,
         onFooBar: fn,
-        'onBar-bazNative': fn
-      }
+        'onBar-bazNative': fn,
+      },
     })
   })
 
@@ -138,15 +138,15 @@ describe('compat: render function', () => {
         on: {
           '&click': fn,
           '~keyup': fn,
-          '!touchend': fn
-        }
-      })
+          '!touchend': fn,
+        },
+      }),
     ).toMatchObject({
       props: {
         onClickPassive: fn,
         onKeyupOnce: fn,
-        onTouchendCapture: fn
-      }
+        onTouchendCapture: fn,
+      },
     })
   })
 
@@ -160,11 +160,11 @@ describe('compat: render function', () => {
             // expression: '1 + 1',
             arg: 'foo',
             modifiers: {
-              bar: true
-            }
-          }
-        ]
-      })
+              bar: true,
+            },
+          },
+        ],
+      }),
     ).toMatchObject({
       dirs: [
         {
@@ -174,22 +174,22 @@ describe('compat: render function', () => {
           oldValue: void 0,
           arg: 'foo',
           modifiers: {
-            bar: true
-          }
-        }
-      ] as DirectiveBinding[]
+            bar: true,
+          },
+        },
+      ] as DirectiveBinding[],
     })
   })
 
   test('scopedSlots', () => {
     const scopedSlots = {
-      default() {}
+      default() {},
     }
     const vnode = h(mockComponent, {
-      scopedSlots
+      scopedSlots,
     })
     expect(vnode).toMatchObject({
-      children: scopedSlots
+      children: scopedSlots,
     })
     expect('scopedSlots' in vnode.props!).toBe(false)
     expect(vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN).toBeTruthy()
@@ -201,7 +201,7 @@ describe('compat: render function', () => {
       h('div', { slot: 'foo' }, 'one'),
       h('div', { slot: 'bar' }, 'two'),
       h('div', { slot: 'foo' }, 'three'),
-      h('div', 'four')
+      h('div', 'four'),
     ])
     expect(vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN).toBeTruthy()
     const slots = vnode.children as any
@@ -210,7 +210,7 @@ describe('compat: render function', () => {
     expect(slots.default()).toMatchObject(['text', { children: 'four' }])
     expect(slots.foo()).toMatchObject([
       { children: 'one' },
-      { children: 'three' }
+      { children: 'three' },
     ])
     expect(slots.bar()).toMatchObject([{ children: 'two' }])
   })
@@ -224,16 +224,16 @@ describe('compat: render function', () => {
           'div',
           {
             class: 'foo',
-            attrs: { id: 'bar' }
+            attrs: { id: 'bar' },
           },
-          'hello'
+          'hello',
         )
-      }
+      },
     }).$mount()
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.outerHTML).toBe(`<div class="foo" id="bar">hello</div>`)
     expect(
-      deprecationData[DeprecationTypes.RENDER_FUNCTION].message
+      deprecationData[DeprecationTypes.RENDER_FUNCTION].message,
     ).toHaveBeenWarned()
   })
 
@@ -241,13 +241,13 @@ describe('compat: render function', () => {
     const vm = new Vue({
       data() {
         return {
-          a: 'hello'
+          a: 'hello',
         }
       },
       // check is arg length based
       render(c: any, _c: any) {
         return createVNode('div', null, c.a)
-      }
+      },
     }).$mount()
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.outerHTML).toBe(`<div>hello</div>`)
diff --git a/packages/vue-compat/__tests__/utils.ts b/packages/vue-compat/__tests__/utils.ts
index a7242122b..1d8624227 100644
--- a/packages/vue-compat/__tests__/utils.ts
+++ b/packages/vue-compat/__tests__/utils.ts
@@ -1,11 +1,11 @@
 export function triggerEvent(
   target: Element,
   event: string,
-  process?: (e: any) => any
-) {
+  process?: (e: any) => any,
+): Event {
   const e = new Event(event, {
     bubbles: true,
-    cancelable: true
+    cancelable: true,
   })
   if (process) process(e)
   target.dispatchEvent(e)
diff --git a/packages/vue-compat/package.json b/packages/vue-compat/package.json
index 5ed6a5b57..e8c292c94 100644
--- a/packages/vue-compat/package.json
+++ b/packages/vue-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compat",
-  "version": "3.3.9",
+  "version": "3.5.11",
   "description": "Vue 3 compatibility build for Vue 2",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",
@@ -10,6 +10,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/vue.d.ts",
+      "node": {
+        "production": "./dist/vue.cjs.prod.js",
+        "development": "./dist/vue.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/vue.esm-bundler.js",
+      "import": "./dist/vue.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "buildOptions": {
     "name": "Vue",
     "filename": "vue",
@@ -38,9 +52,9 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/vue-compat#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.4",
-    "estree-walker": "^2.0.2",
-    "source-map-js": "^1.0.2"
+    "@babel/parser": "catalog:",
+    "estree-walker": "catalog:",
+    "source-map-js": "catalog:"
   },
   "peerDependencies": {
     "vue": "workspace:*"
diff --git a/packages/vue-compat/src/createCompatVue.ts b/packages/vue-compat/src/createCompatVue.ts
index 5815fc21d..1302e0005 100644
--- a/packages/vue-compat/src/createCompatVue.ts
+++ b/packages/vue-compat/src/createCompatVue.ts
@@ -2,14 +2,15 @@
 // `dist/vue.esm-bundler.js` which is used by default for bundlers.
 import { initDev } from './dev'
 import {
-  compatUtils,
-  createApp,
+  type CompatVue,
+  DeprecationTypes,
+  KeepAlive,
   Transition,
   TransitionGroup,
-  KeepAlive,
-  DeprecationTypes,
+  compatUtils,
+  createApp,
+  vModelDynamic,
   vShow,
-  vModelDynamic
 } from '@vue/runtime-dom'
 import { extend } from '@vue/shared'
 
@@ -20,7 +21,7 @@ if (__DEV__) {
 import * as runtimeDom from '@vue/runtime-dom'
 
 function wrappedCreateApp(...args: any[]) {
-  // @ts-ignore
+  // @ts-expect-error
   const app = createApp(...args)
   if (compatUtils.isCompatEnabled(DeprecationTypes.RENDER_FUNCTION, null)) {
     // register built-in components so that they can be resolved via strings
@@ -37,7 +38,7 @@ function wrappedCreateApp(...args: any[]) {
   return app
 }
 
-export function createCompatVue() {
+export function createCompatVue(): CompatVue {
   const Vue = compatUtils.createCompatVue(createApp, wrappedCreateApp)
   extend(Vue, runtimeDom)
   return Vue
diff --git a/packages/vue-compat/src/dev.ts b/packages/vue-compat/src/dev.ts
index 99ba49a20..a9ad81e3b 100644
--- a/packages/vue-compat/src/dev.ts
+++ b/packages/vue-compat/src/dev.ts
@@ -1,11 +1,11 @@
 import { initCustomFormatter } from '@vue/runtime-dom'
 
-export function initDev() {
+export function initDev(): void {
   if (__BROWSER__) {
     if (!__ESM_BUNDLER__) {
       console.info(
         `You are running a development build of Vue.\n` +
-          `Make sure to use the production build (*.prod.js) when deploying for production.`
+          `Make sure to use the production build (*.prod.js) when deploying for production.`,
       )
     }
 
diff --git a/packages/vue-compat/src/esm-index.ts b/packages/vue-compat/src/esm-index.ts
index f2ad1c376..aa1e5ce08 100644
--- a/packages/vue-compat/src/esm-index.ts
+++ b/packages/vue-compat/src/esm-index.ts
@@ -3,5 +3,5 @@ import Vue from './index'
 export default Vue
 export * from '@vue/runtime-dom'
 
-const { configureCompat } = Vue
+const configureCompat: typeof Vue.configureCompat = Vue.configureCompat
 export { configureCompat }
diff --git a/packages/vue-compat/src/esm-runtime.ts b/packages/vue-compat/src/esm-runtime.ts
index c5bb5d213..778f99253 100644
--- a/packages/vue-compat/src/esm-runtime.ts
+++ b/packages/vue-compat/src/esm-runtime.ts
@@ -3,5 +3,5 @@ import Vue from './runtime'
 export default Vue
 export * from '@vue/runtime-dom'
 
-const { configureCompat } = Vue
+const configureCompat: typeof Vue.configureCompat = Vue.configureCompat
 export { configureCompat }
diff --git a/packages/vue-compat/src/index.ts b/packages/vue-compat/src/index.ts
index 642ecd20d..d7e9695d8 100644
--- a/packages/vue-compat/src/index.ts
+++ b/packages/vue-compat/src/index.ts
@@ -1,21 +1,36 @@
 // This entry is the "full-build" that includes both the runtime
 // and the compiler, and supports on-the-fly compilation of the template option.
 import { createCompatVue } from './createCompatVue'
-import { compile, CompilerError, CompilerOptions } from '@vue/compiler-dom'
-import { registerRuntimeCompiler, RenderFunction, warn } from '@vue/runtime-dom'
-import { isString, NOOP, generateCodeFrame, extend } from '@vue/shared'
-import { InternalRenderFunction } from 'packages/runtime-core/src/component'
+import {
+  type CompilerError,
+  type CompilerOptions,
+  compile,
+} from '@vue/compiler-dom'
+import {
+  type CompatVue,
+  type RenderFunction,
+  registerRuntimeCompiler,
+  warn,
+} from '@vue/runtime-dom'
+import {
+  NOOP,
+  extend,
+  genCacheKey,
+  generateCodeFrame,
+  isString,
+} from '@vue/shared'
+import type { InternalRenderFunction } from 'packages/runtime-core/src/component'
 import * as runtimeDom from '@vue/runtime-dom'
 import {
   DeprecationTypes,
-  warnDeprecation
+  warnDeprecation,
 } from '../../runtime-core/src/compat/compatConfig'
 
 const compileCache: Record<string, RenderFunction> = Object.create(null)
 
 function compileToFunction(
   template: string | HTMLElement,
-  options?: CompilerOptions
+  options?: CompilerOptions,
 ): RenderFunction {
   if (!isString(template)) {
     if (template.nodeType) {
@@ -26,7 +41,7 @@ function compileToFunction(
     }
   }
 
-  const key = template
+  const key = genCacheKey(template, options)
   const cached = compileCache[key]
   if (cached) {
     return cached
@@ -55,10 +70,10 @@ function compileToFunction(
         hoistStatic: true,
         whitespace: 'preserve',
         onError: __DEV__ ? onError : undefined,
-        onWarn: __DEV__ ? e => onError(e, true) : NOOP
+        onWarn: __DEV__ ? e => onError(e, true) : NOOP,
       } as CompilerOptions,
-      options
-    )
+      options,
+    ),
   )
 
   function onError(err: CompilerError, asWarning = false) {
@@ -70,7 +85,7 @@ function compileToFunction(
       generateCodeFrame(
         template as string,
         err.loc.start.offset,
-        err.loc.end.offset
+        err.loc.end.offset,
       )
     warn(codeFrame ? `${message}\n${codeFrame}` : message)
   }
@@ -91,7 +106,7 @@ function compileToFunction(
 
 registerRuntimeCompiler(compileToFunction)
 
-const Vue = createCompatVue()
+const Vue: CompatVue = createCompatVue()
 Vue.compile = compileToFunction
 
 export default Vue
diff --git a/packages/vue-compat/src/runtime.ts b/packages/vue-compat/src/runtime.ts
index 76370b847..5689a5b75 100644
--- a/packages/vue-compat/src/runtime.ts
+++ b/packages/vue-compat/src/runtime.ts
@@ -1,9 +1,9 @@
 // This entry exports the runtime only, and is built as
 // `dist/vue.esm-bundler.js` which is used by default for bundlers.
 import { createCompatVue } from './createCompatVue'
-import { warn } from '@vue/runtime-core'
+import { type CompatVue, warn } from '@vue/runtime-core'
 
-const Vue = createCompatVue()
+const Vue: CompatVue = createCompatVue()
 
 Vue.compile = (() => {
   if (__DEV__) {
@@ -15,7 +15,7 @@ Vue.compile = (() => {
             ? ` Use "vue.esm-browser.js" instead.`
             : __GLOBAL__
               ? ` Use "vue.global.js" instead.`
-              : ``) /* should not happen */
+              : ``) /* should not happen */,
     )
   }
 }) as any
diff --git a/packages/vue/README.md b/packages/vue/README.md
index a98bd9974..69dbf6942 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -5,8 +5,9 @@
 ### From CDN or without a Bundler
 
 - **`vue(.runtime).global(.prod).js`**:
+
   - For direct use via `<script src="...">` in the browser. Exposes the `Vue` global.
-  - Note that global builds are not [UMD](https://github.com/umdjs/umd) builds.  They are built as [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and is only meant for direct use via `<script src="...">`.
+  - Note that global builds are not [UMD](https://github.com/umdjs/umd) builds. They are built as [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and is only meant for direct use via `<script src="...">`.
   - In-browser template compilation:
     - **`vue.global.js`** is the "full" build that includes both the compiler and the runtime so it supports compiling templates on the fly.
     - **`vue.runtime.global.js`** contains only the runtime and requires templates to be pre-compiled during a build step.
@@ -14,7 +15,7 @@
   - Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the `*.prod.js` files for production.
 
 - **`vue(.runtime).esm-browser(.prod).js`**:
-  - For usage via native ES modules imports (in browser via `<script type="module">`.
+  - For usage via native ES modules imports (in browser via `<script type="module">`).
   - Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build.
 
 ### With a Bundler
@@ -33,18 +34,25 @@
 
 #### Bundler Build Feature Flags
 
-Starting with 3.0.0-rc.3, `esm-bundler` builds now exposes global feature flags that can be overwritten at compile time:
+[Detailed Reference on vuejs.org](https://vuejs.org/api/compile-time-flags.html)
 
-- `__VUE_OPTIONS_API__` (enable/disable Options API support, default: `true`)
-- `__VUE_PROD_DEVTOOLS__` (enable/disable devtools support in production, default: `false`)
+`esm-bundler` builds of Vue expose global feature flags that can be overwritten at compile time:
 
-The build will work without configuring these flags, however it is **strongly recommended** to properly configure them in order to get proper tree-shaking in the final bundle. To configure these flags:
+- `__VUE_OPTIONS_API__`
 
-- webpack: use [DefinePlugin](https://webpack.js.org/plugins/define-plugin/)
-- Rollup: use [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace)
-- Vite: configured by default, but can be overwritten using the [`define` option](https://github.com/vitejs/vite/blob/a4133c073e640b17276b2de6e91a6857bdf382e1/src/node/config.ts#L72-L76)
+  - Default: `true`
+  - Enable / disable Options API support
 
-Note: the replacement value **must be boolean literals** and cannot be strings, otherwise the bundler/minifier will not be able to properly evaluate the conditions.
+- `__VUE_PROD_DEVTOOLS__`
+
+  - Default: `false`
+  - Enable / disable devtools support in production
+
+- `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`
+  - Default: `false`
+  - Enable / disable detailed warnings for hydration mismatches in production
+
+The build will work without configuring these flags, however it is **strongly recommended** to properly configure them in order to get proper tree-shaking in the final bundle.
 
 ### For Server-Side Rendering
 
diff --git a/packages/vue/__tests__/customElementCasing.spec.ts b/packages/vue/__tests__/customElementCasing.spec.ts
index cf3efd094..7712099bf 100644
--- a/packages/vue/__tests__/customElementCasing.spec.ts
+++ b/packages/vue/__tests__/customElementCasing.spec.ts
@@ -12,7 +12,7 @@ test('custom element event casing', () => {
         this.dispatchEvent(new Event('CAPScase'))
         this.dispatchEvent(new Event('PascalCase'))
       }
-    }
+    },
   )
 
   const container = document.createElement('div')
@@ -33,8 +33,8 @@ test('custom element event casing', () => {
       }" />`,
     methods: {
       handler,
-      handler2
-    }
+      handler2,
+    },
   }).mount(container)
 
   expect(handler).toHaveBeenCalledTimes(3)
diff --git a/packages/vue/__tests__/e2e/Transition.spec.ts b/packages/vue/__tests__/e2e/Transition.spec.ts
index 38fdf53cf..c0863a759 100644
--- a/packages/vue/__tests__/e2e/Transition.spec.ts
+++ b/packages/vue/__tests__/e2e/Transition.spec.ts
@@ -1,6 +1,6 @@
 import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
-import path from 'path'
-import { h, createApp, Transition, ref, nextTick } from 'vue'
+import path from 'node:path'
+import { Transition, createApp, h, nextTick, ref } from 'vue'
 
 describe('e2e: Transition', () => {
   const { page, html, classList, isVisible, timeout, nextFrame, click } =
@@ -8,7 +8,7 @@ describe('e2e: Transition', () => {
   const baseUrl = `file://${path.resolve(__dirname, './transition.html')}`
 
   const duration = process.env.CI ? 200 : 50
-  const buffer = process.env.CI ? 20 : 5
+  const buffer = process.env.CI ? 50 : 20
 
   const transitionFinish = (time = duration) => timeout(time + buffer)
 
@@ -29,8 +29,6 @@ describe('e2e: Transition', () => {
     test(
       'basic transition',
       async () => {
-        await page().goto(baseUrl)
-        await page().waitForSelector('#app')
         await page().evaluate(() => {
           const { createApp, ref } = (window as any).Vue
           createApp({
@@ -46,7 +44,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -55,13 +53,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'v-leave-from',
-          'v-leave-active'
+          'v-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-leave-active',
-          'v-leave-to'
+          'v-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -70,18 +68,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'v-enter-from',
-          'v-enter-active'
+          'v-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-enter-active',
-          'v-enter-to'
+          'v-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -102,7 +100,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -111,13 +109,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -126,18 +124,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -163,7 +161,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -172,13 +170,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'bye-from',
-          'bye-active'
+          'bye-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'bye-active',
-          'bye-to'
+          'bye-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -187,18 +185,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'hello-from',
-          'hello-active'
+          'hello-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'hello-active',
-          'hello-to'
+          'hello-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -222,7 +220,7 @@ describe('e2e: Transition', () => {
               const click = () => (toggle.value = !toggle.value)
               const changeName = () => (name.value = 'changed')
               return { toggle, click, name, changeName }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -231,13 +229,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -249,18 +247,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'changed-enter-from',
-          'changed-enter-active'
+          'changed-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'changed-enter-active',
-          'changed-enter-to'
+          'changed-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -287,7 +285,7 @@ describe('e2e: Transition', () => {
             afterEnterSpy,
             beforeLeaveSpy,
             onLeaveSpy,
-            afterLeaveSpy
+            afterLeaveSpy,
           } = window as any
           const { createApp, ref } = (window as any).Vue
           createApp({
@@ -317,9 +315,9 @@ describe('e2e: Transition', () => {
                 afterEnterSpy,
                 beforeLeaveSpy,
                 onLeaveSpy,
-                afterLeaveSpy
+                afterLeaveSpy,
               }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -328,7 +326,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         expect(beforeLeaveSpy).toBeCalled()
         expect(onLeaveSpy).toBeCalled()
@@ -337,7 +335,7 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         expect(afterLeaveSpy).not.toBeCalled()
         await transitionFinish()
@@ -348,7 +346,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         expect(beforeEnterSpy).toBeCalled()
         expect(onEnterSpy).toBeCalled()
@@ -357,14 +355,14 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         expect(afterEnterSpy).not.toBeCalled()
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
         expect(afterEnterSpy).toBeCalled()
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -391,7 +389,7 @@ describe('e2e: Transition', () => {
             afterEnterSpy,
             beforeLeaveSpy,
             onLeaveSpy,
-            afterLeaveSpy
+            afterLeaveSpy,
           } = window as any
           const { createApp, ref } = (window as any).Vue
           createApp({
@@ -441,9 +439,9 @@ describe('e2e: Transition', () => {
                 },
                 afterLeaveSpy: (el: Element) => {
                   afterLeaveSpy()
-                }
+                },
               }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -456,7 +454,7 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'before-leave',
-          'leave'
+          'leave',
         ])
 
         await timeout(200 + buffer)
@@ -471,16 +469,16 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'before-enter',
-          'enter'
+          'enter',
         ])
 
         await timeout(200 + buffer)
         expect(afterEnterSpy).toBeCalled()
         expect(await html('#container')).toBe(
-          '<div class="test before-enter enter after-enter">content</div>'
+          '<div class="test before-enter enter after-enter">content</div>',
         )
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test('onEnterCancelled', async () => {
@@ -508,9 +506,9 @@ describe('e2e: Transition', () => {
             return {
               toggle,
               click,
-              enterCancelledSpy
+              enterCancelledSpy,
             }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe('<!--v-if-->')
@@ -519,27 +517,27 @@ describe('e2e: Transition', () => {
       expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
         'test-enter-from',
-        'test-enter-active'
+        'test-enter-active',
       ])
       await nextFrame()
       expect(await classList('.test')).toStrictEqual([
         'test',
         'test-enter-active',
-        'test-enter-to'
+        'test-enter-to',
       ])
 
       // cancel (leave)
       expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
         'test-leave-from',
-        'test-leave-active'
+        'test-leave-active',
       ])
       expect(enterCancelledSpy).toBeCalled()
       await nextFrame()
       expect(await classList('.test')).toStrictEqual([
         'test',
         'test-leave-active',
-        'test-leave-to'
+        'test-leave-to',
       ])
       await transitionFinish()
       expect(await html('#container')).toBe('<!--v-if-->')
@@ -567,7 +565,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
           return Promise.resolve().then(() => {
             return document.querySelector('.test')!.className.split(/\s+/g)
@@ -577,13 +575,13 @@ describe('e2e: Transition', () => {
         expect(appearClass).toStrictEqual([
           'test',
           'test-appear-from',
-          'test-appear-active'
+          'test-appear-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-appear-active',
-          'test-appear-to'
+          'test-appear-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -592,13 +590,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -607,18 +605,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -654,7 +652,7 @@ describe('e2e: Transition', () => {
             afterEnterSpy,
             beforeLeaveSpy,
             onLeaveSpy,
-            afterLeaveSpy
+            afterLeaveSpy,
           } = window as any
           const { createApp, ref } = (window as any).Vue
           createApp({
@@ -694,9 +692,9 @@ describe('e2e: Transition', () => {
                 afterEnterSpy,
                 beforeLeaveSpy,
                 onLeaveSpy,
-                afterLeaveSpy
+                afterLeaveSpy,
               }
-            }
+            },
           }).mount('#app')
           return Promise.resolve().then(() => {
             return document.querySelector('.test')!.className.split(/\s+/g)
@@ -706,7 +704,7 @@ describe('e2e: Transition', () => {
         expect(appearClass).toStrictEqual([
           'test',
           'test-appear-from',
-          'test-appear-active'
+          'test-appear-active',
         ])
         expect(beforeAppearSpy).toBeCalled()
         expect(onAppearSpy).toBeCalled()
@@ -715,7 +713,7 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-appear-active',
-          'test-appear-to'
+          'test-appear-to',
         ])
         expect(afterAppearSpy).not.toBeCalled()
         await transitionFinish()
@@ -730,7 +728,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         expect(beforeLeaveSpy).toBeCalled()
         expect(onLeaveSpy).toBeCalled()
@@ -739,7 +737,7 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         expect(afterLeaveSpy).not.toBeCalled()
         await transitionFinish()
@@ -750,7 +748,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         expect(beforeEnterSpy).toBeCalled()
         expect(onEnterSpy).toBeCalled()
@@ -759,14 +757,14 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         expect(afterEnterSpy).not.toBeCalled()
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
         expect(afterEnterSpy).toBeCalled()
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -793,7 +791,7 @@ describe('e2e: Transition', () => {
             onAfterEnterSpy,
             onBeforeLeaveSpy,
             onLeaveSpy,
-            onAfterLeaveSpy
+            onAfterLeaveSpy,
           } = window as any
           const { createApp, ref } = (window as any).Vue
           createApp({
@@ -824,9 +822,9 @@ describe('e2e: Transition', () => {
                 onAfterEnterSpy,
                 onBeforeLeaveSpy,
                 onLeaveSpy,
-                onAfterLeaveSpy
+                onAfterLeaveSpy,
               }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -844,7 +842,7 @@ describe('e2e: Transition', () => {
         expect(onAfterEnterSpy).toBeCalled()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -865,7 +863,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div>content</div>')
@@ -873,7 +871,7 @@ describe('e2e: Transition', () => {
         // leave
         expect(await classWhenTransitionStart()).toStrictEqual([
           'noop-leave-from',
-          'noop-leave-active'
+          'noop-leave-active',
         ])
         await nextFrame()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -881,12 +879,12 @@ describe('e2e: Transition', () => {
         // enter
         expect(await classWhenTransitionStart()).toStrictEqual([
           'noop-enter-from',
-          'noop-enter-active'
+          'noop-enter-active',
         ])
         await nextFrame()
         expect(await html('#container')).toBe('<div class="">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -907,7 +905,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div>content</div>')
@@ -915,12 +913,12 @@ describe('e2e: Transition', () => {
         // leave
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test-anim-leave-from',
-          'test-anim-leave-active'
+          'test-anim-leave-active',
         ])
         await nextFrame()
         expect(await classList('#container div')).toStrictEqual([
           'test-anim-leave-active',
-          'test-anim-leave-to'
+          'test-anim-leave-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -928,17 +926,17 @@ describe('e2e: Transition', () => {
         // enter
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test-anim-enter-from',
-          'test-anim-enter-active'
+          'test-anim-enter-active',
         ])
         await nextFrame()
         expect(await classList('#container div')).toStrictEqual([
           'test-anim-enter-active',
-          'test-anim-enter-to'
+          'test-anim-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -955,7 +953,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div>content</div>')
@@ -963,12 +961,12 @@ describe('e2e: Transition', () => {
         // leave
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test-anim-long-leave-from',
-          'test-anim-long-leave-active'
+          'test-anim-long-leave-active',
         ])
         await nextFrame()
         expect(await classList('#container div')).toStrictEqual([
           'test-anim-long-leave-active',
-          'test-anim-long-leave-to'
+          'test-anim-long-leave-to',
         ])
 
         if (!process.env.CI) {
@@ -977,7 +975,7 @@ describe('e2e: Transition', () => {
           })
           expect(await classList('#container div')).toStrictEqual([
             'test-anim-long-leave-active',
-            'test-anim-long-leave-to'
+            'test-anim-long-leave-to',
           ])
         }
 
@@ -987,12 +985,12 @@ describe('e2e: Transition', () => {
         // enter
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test-anim-long-enter-from',
-          'test-anim-long-enter-active'
+          'test-anim-long-enter-active',
         ])
         await nextFrame()
         expect(await classList('#container div')).toStrictEqual([
           'test-anim-long-enter-active',
-          'test-anim-long-enter-to'
+          'test-anim-long-enter-to',
         ])
 
         if (!process.env.CI) {
@@ -1001,14 +999,14 @@ describe('e2e: Transition', () => {
           })
           expect(await classList('#container div')).toStrictEqual([
             'test-anim-long-enter-active',
-            'test-anim-long-enter-to'
+            'test-anim-long-enter-to',
           ])
         }
 
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1029,11 +1027,11 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe(
-          '<circle cx="0" cy="0" r="10" class="test"></circle>'
+          '<circle cx="0" cy="0" r="10" class="test"></circle>',
         )
 
         const svgTransitionStart = () =>
@@ -1051,13 +1049,13 @@ describe('e2e: Transition', () => {
         expect(await svgTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -1066,20 +1064,20 @@ describe('e2e: Transition', () => {
         expect(await svgTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<circle cx="0" cy="0" r="10" class="test"></circle>'
+          '<circle cx="0" cy="0" r="10" class="test"></circle>',
         )
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1095,13 +1093,13 @@ describe('e2e: Transition', () => {
             components: {
               'my-transition': (props: any, { slots }: any) => {
                 return h(Transition, { name: 'test' }, slots)
-              }
+              },
             },
             setup: () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1110,13 +1108,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -1125,18 +1123,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1156,11 +1154,11 @@ describe('e2e: Transition', () => {
             `,
             components: {
               one: {
-                template: '<div v-if="false">one</div>'
+                template: '<div v-if="false">one</div>',
               },
               two: {
-                template: '<div>two</div>'
-              }
+                template: '<div>two</div>',
+              },
             },
             setup: () => {
               const toggle = ref(true)
@@ -1169,7 +1167,7 @@ describe('e2e: Transition', () => {
               const change = () =>
                 (view.value = view.value === 'one' ? 'two' : 'one')
               return { toggle, click, change, view }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -1182,13 +1180,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">two</div>')
@@ -1201,18 +1199,459 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
+    )
+
+    // issue https://github.com/vuejs/core/issues/7649
+    test(
+      'transition with v-if at component root-level',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container">
+                <transition name="test" mode="out-in">
+                  <component class="test" :is="view"></component>
+                </transition>
+              </div>
+              <button id="toggleBtn" @click="click">button</button>
+              <button id="changeViewBtn" @click="change">button</button>
+            `,
+            components: {
+              one: {
+                template: '<div v-if="false">one</div>',
+              },
+              two: {
+                template: '<div>two</div>',
+              },
+            },
+            setup: () => {
+              const toggle = ref(true)
+              const view = ref('one')
+              const click = () => (toggle.value = !toggle.value)
+              const change = () =>
+                (view.value = view.value === 'one' ? 'two' : 'one')
+              return { toggle, click, change, view }
+            },
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // change view -> 'two'
+        await page().evaluate(() => {
+          ;(document.querySelector('#changeViewBtn') as any)!.click()
+        })
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-from',
+          'test-enter-active',
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to',
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">two</div>')
+
+        // change view -> 'one'
+        await page().evaluate(() => {
+          ;(document.querySelector('#changeViewBtn') as any)!.click()
+        })
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-from',
+          'test-leave-active',
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to',
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+      },
+      E2E_TIMEOUT,
+    )
+
+    // #3716
+    test(
+      'wrapping transition + fallthrough attrs',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            components: {
+              'my-transition': {
+                template: `
+                  <transition foo="1" name="test">
+                    <slot></slot>
+                  </transition>
+                `,
+              },
+            },
+            template: `
+            <div id="container">
+              <my-transition>
+                <div v-if="toggle">content</div>
+              </my-transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            },
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div foo="1">content</div>')
+
+        await click('#toggleBtn')
+        // toggle again before leave finishes
+        await nextTick()
+        await click('#toggleBtn')
+
+        await transitionFinish()
+        expect(await html('#container')).toBe(
+          '<div foo="1" class="">content</div>',
+        )
+      },
+      E2E_TIMEOUT,
+    )
+
+    // #11061
+    test(
+      'transition + fallthrough attrs (in-out mode)',
+      async () => {
+        const beforeLeaveSpy = vi.fn()
+        const onLeaveSpy = vi.fn()
+        const afterLeaveSpy = vi.fn()
+        const beforeEnterSpy = vi.fn()
+        const onEnterSpy = vi.fn()
+        const afterEnterSpy = vi.fn()
+
+        await page().exposeFunction('onLeaveSpy', onLeaveSpy)
+        await page().exposeFunction('onEnterSpy', onEnterSpy)
+        await page().exposeFunction('beforeLeaveSpy', beforeLeaveSpy)
+        await page().exposeFunction('beforeEnterSpy', beforeEnterSpy)
+        await page().exposeFunction('afterLeaveSpy', afterLeaveSpy)
+        await page().exposeFunction('afterEnterSpy', afterEnterSpy)
+
+        await page().evaluate(() => {
+          const { onEnterSpy, onLeaveSpy } = window as any
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            components: {
+              one: {
+                template: '<div>one</div>',
+              },
+              two: {
+                template: '<div>two</div>',
+              },
+            },
+            template: `
+            <div id="container">
+              <transition foo="1" name="test" mode="in-out" 
+                @before-enter="beforeEnterSpy()"
+                @enter="onEnterSpy()"
+                @after-enter="afterEnterSpy()"
+                @before-leave="beforeLeaveSpy()"
+                @leave="onLeaveSpy()"
+                @after-leave="afterLeaveSpy()">
+                <component :is="view"></component>
+              </transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            setup: () => {
+              const view = ref('one')
+              const click = () =>
+                (view.value = view.value === 'one' ? 'two' : 'one')
+              return {
+                view,
+                click,
+                beforeEnterSpy,
+                onEnterSpy,
+                afterEnterSpy,
+                beforeLeaveSpy,
+                onLeaveSpy,
+                afterLeaveSpy,
+              }
+            },
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div foo="1">one</div>')
+
+        // toggle
+        await click('#toggleBtn')
+        await nextTick()
+        await transitionFinish()
+        expect(beforeEnterSpy).toBeCalledTimes(1)
+        expect(onEnterSpy).toBeCalledTimes(1)
+        expect(afterEnterSpy).toBeCalledTimes(1)
+        expect(beforeLeaveSpy).toBeCalledTimes(1)
+        expect(onLeaveSpy).toBeCalledTimes(1)
+        expect(afterLeaveSpy).toBeCalledTimes(1)
+
+        expect(await html('#container')).toBe('<div foo="1" class="">two</div>')
+
+        // toggle back
+        await click('#toggleBtn')
+        await nextTick()
+        await transitionFinish()
+        expect(beforeEnterSpy).toBeCalledTimes(2)
+        expect(onEnterSpy).toBeCalledTimes(2)
+        expect(afterEnterSpy).toBeCalledTimes(2)
+        expect(beforeLeaveSpy).toBeCalledTimes(2)
+        expect(onLeaveSpy).toBeCalledTimes(2)
+        expect(afterLeaveSpy).toBeCalledTimes(2)
+
+        expect(await html('#container')).toBe('<div foo="1" class="">one</div>')
+      },
+      E2E_TIMEOUT,
+    )
+  })
+
+  describe('transition with KeepAlive', () => {
+    test(
+      'unmount innerChild (out-in mode)',
+      async () => {
+        const unmountSpy = vi.fn()
+        await page().exposeFunction('unmountSpy', unmountSpy)
+        await page().evaluate(() => {
+          const { unmountSpy } = window as any
+          const { createApp, ref, h, onUnmounted } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition mode="out-in">
+                <KeepAlive :include="includeRef">
+                  <TrueBranch v-if="toggle"></TrueBranch>
+                </KeepAlive>
+              </transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            components: {
+              TrueBranch: {
+                name: 'TrueBranch',
+                setup() {
+                  onUnmounted(unmountSpy)
+                  const count = ref(0)
+                  return () => h('div', count.value)
+                },
+              },
+            },
+            setup: () => {
+              const includeRef = ref(['TrueBranch'])
+              const toggle = ref(true)
+              const click = () => {
+                toggle.value = !toggle.value
+                if (toggle.value) {
+                  includeRef.value = ['TrueBranch']
+                } else {
+                  includeRef.value = []
+                }
+              }
+              return { toggle, click, unmountSpy, includeRef }
+            },
+          }).mount('#app')
+        })
+
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div>0</div>')
+
+        await click('#toggleBtn')
+
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+        expect(unmountSpy).toBeCalledTimes(1)
+      },
+      E2E_TIMEOUT,
+    )
+
+    // #11775
+    test(
+      'switch child then update include (out-in mode)',
+      async () => {
+        const onUpdatedSpyA = vi.fn()
+        const onUnmountedSpyC = vi.fn()
+
+        await page().exposeFunction('onUpdatedSpyA', onUpdatedSpyA)
+        await page().exposeFunction('onUnmountedSpyC', onUnmountedSpyC)
+
+        await page().evaluate(() => {
+          const { onUpdatedSpyA, onUnmountedSpyC } = window as any
+          const { createApp, ref, shallowRef, h, onUpdated, onUnmounted } = (
+            window as any
+          ).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition mode="out-in">
+                <KeepAlive :include="includeRef">
+                  <component :is="current" />
+                </KeepAlive>
+              </transition>
+            </div>
+            <button id="switchToB" @click="switchToB">switchToB</button>
+            <button id="switchToC" @click="switchToC">switchToC</button>
+            <button id="switchToA" @click="switchToA">switchToA</button>
+          `,
+            components: {
+              CompA: {
+                name: 'CompA',
+                setup() {
+                  onUpdated(onUpdatedSpyA)
+                  return () => h('div', 'CompA')
+                },
+              },
+              CompB: {
+                name: 'CompB',
+                setup() {
+                  return () => h('div', 'CompB')
+                },
+              },
+              CompC: {
+                name: 'CompC',
+                setup() {
+                  onUnmounted(onUnmountedSpyC)
+                  return () => h('div', 'CompC')
+                },
+              },
+            },
+            setup: () => {
+              const includeRef = ref(['CompA', 'CompB', 'CompC'])
+              const current = shallowRef('CompA')
+              const switchToB = () => (current.value = 'CompB')
+              const switchToC = () => (current.value = 'CompC')
+              const switchToA = () => {
+                current.value = 'CompA'
+                includeRef.value = ['CompA']
+              }
+              return { current, switchToB, switchToC, switchToA, includeRef }
+            },
+          }).mount('#app')
+        })
+
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div>CompA</div>')
+
+        await click('#switchToB')
+        await nextTick()
+        await click('#switchToC')
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="">CompC</div>')
+
+        await click('#switchToA')
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="">CompA</div>')
+
+        // expect CompA only update once
+        expect(onUpdatedSpyA).toBeCalledTimes(1)
+        expect(onUnmountedSpyC).toBeCalledTimes(1)
+      },
+      E2E_TIMEOUT,
+    )
+
+    // #10827
+    test(
+      'switch and update child then update include (out-in mode)',
+      async () => {
+        const onUnmountedSpyB = vi.fn()
+        await page().exposeFunction('onUnmountedSpyB', onUnmountedSpyB)
+
+        await page().evaluate(() => {
+          const { onUnmountedSpyB } = window as any
+          const {
+            createApp,
+            ref,
+            shallowRef,
+            h,
+            provide,
+            inject,
+            onUnmounted,
+          } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition name="test-anim" mode="out-in">
+                <KeepAlive :include="includeRef">
+                  <component :is="current" />
+                </KeepAlive>
+              </transition>
+            </div>
+            <button id="switchToA" @click="switchToA">switchToA</button>
+            <button id="switchToB" @click="switchToB">switchToB</button>
+          `,
+            components: {
+              CompA: {
+                name: 'CompA',
+                setup() {
+                  const current = inject('current')
+                  return () => h('div', current.value)
+                },
+              },
+              CompB: {
+                name: 'CompB',
+                setup() {
+                  const current = inject('current')
+                  onUnmounted(onUnmountedSpyB)
+                  return () => h('div', current.value)
+                },
+              },
+            },
+            setup: () => {
+              const includeRef = ref(['CompA'])
+              const current = shallowRef('CompA')
+              provide('current', current)
+
+              const switchToB = () => {
+                current.value = 'CompB'
+                includeRef.value = ['CompA', 'CompB']
+              }
+              const switchToA = () => {
+                current.value = 'CompA'
+                includeRef.value = ['CompA']
+              }
+              return { current, switchToB, switchToA, includeRef }
+            },
+          }).mount('#app')
+        })
+
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div>CompA</div>')
+
+        await click('#switchToB')
+        await transitionFinish()
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="">CompB</div>')
+
+        await click('#switchToA')
+        await transitionFinish()
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="">CompA</div>')
+
+        expect(onUnmountedSpyB).toBeCalledTimes(1)
+      },
+      E2E_TIMEOUT,
     )
   })
 
@@ -1245,21 +1684,21 @@ describe('e2e: Transition', () => {
               Comp: {
                 async setup() {
                   return () => h('div', { class: 'test' }, 'content')
-                }
-              }
+                },
+              },
             },
             setup: () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click, onEnterSpy, onLeaveSpy }
-            }
+            },
           }).mount('#app')
         })
 
         expect(onEnterSpy).toBeCalledTimes(1)
         await nextFrame()
         expect(await html('#container')).toBe(
-          '<div class="test v-enter-active v-enter-to">content</div>'
+          '<div class="test v-enter-active v-enter-to">content</div>',
         )
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1268,14 +1707,14 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'v-leave-from',
-          'v-leave-active'
+          'v-leave-active',
         ])
         expect(onLeaveSpy).toBeCalledTimes(1)
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-leave-active',
-          'v-leave-to'
+          'v-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -1296,19 +1735,19 @@ describe('e2e: Transition', () => {
         expect(enterClass).toStrictEqual([
           'test',
           'v-enter-from',
-          'v-enter-active'
+          'v-enter-active',
         ])
         expect(onEnterSpy).toBeCalledTimes(2)
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-enter-active',
-          'v-enter-to'
+          'v-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     // #1689
@@ -1332,7 +1771,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1341,13 +1780,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'v-leave-from',
-          'v-leave-active'
+          'v-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-leave-active',
-          'v-leave-to'
+          'v-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -1356,18 +1795,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'v-enter-from',
-          'v-enter-active'
+          'v-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-enter-active',
-          'v-enter-to'
+          'v-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1384,12 +1823,12 @@ describe('e2e: Transition', () => {
           const One = {
             async setup() {
               return () => h('div', { class: 'test' }, 'one')
-            }
+            },
           }
           const Two = {
             async setup() {
               return () => h('div', { class: 'test' }, 'two')
-            }
+            },
           }
           createApp({
             template: `
@@ -1408,13 +1847,13 @@ describe('e2e: Transition', () => {
                 view.value = view.value === One ? Two : One
               }
               return { view, click }
-            }
+            },
           }).mount('#app')
         })
 
         await nextFrame()
         expect(await html('#container')).toBe(
-          '<div class="test v-enter-active v-enter-to">one</div>'
+          '<div class="test v-enter-active v-enter-to">one</div>',
         )
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">one</div>')
@@ -1423,7 +1862,7 @@ describe('e2e: Transition', () => {
         await classWhenTransitionStart()
         await nextFrame()
         expect(await html('#container')).toBe(
-          '<div class="test v-leave-active v-leave-to">one</div>'
+          '<div class="test v-leave-active v-leave-to">one</div>',
         )
         await transitionFinish()
         await nextFrame()
@@ -1433,7 +1872,7 @@ describe('e2e: Transition', () => {
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">two</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     // #3963
@@ -1447,13 +1886,13 @@ describe('e2e: Transition', () => {
             template: `<div>{{ msg }}</div>`,
             setup() {
               return new Promise(_resolve => {
-                // @ts-ignore
+                // @ts-expect-error
                 window.resolve = () =>
                   _resolve({
-                    msg: 'success'
+                    msg: 'success',
                   })
               })
-            }
+            },
           }
 
           createApp({
@@ -1478,7 +1917,7 @@ describe('e2e: Transition', () => {
                 view.value = view.value ? null : h(One)
               }
               return { view, click }
-            }
+            },
           }).mount('#app')
         })
 
@@ -1489,14 +1928,14 @@ describe('e2e: Transition', () => {
         expect(await html('#container')).toBe('<div class="">Loading...</div>')
 
         await page().evaluate(() => {
-          // @ts-ignore
+          // @ts-expect-error
           window.resolve()
         })
 
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="">success</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     // #5844
@@ -1530,12 +1969,12 @@ describe('e2e: Transition', () => {
                   fooMountSpy(
                     !!el.value,
                     !!document.getElementById('foo'),
-                    !!document.getElementById('bar')
+                    !!document.getElementById('bar'),
                   )
                 })
 
                 return () => h('div', { ref: el, id: 'foo' }, 'Foo')
-              }
+              },
             },
             Bar: {
               setup() {
@@ -1544,19 +1983,19 @@ describe('e2e: Transition', () => {
                   barMountSpy(
                     !!el.value,
                     !!document.getElementById('foo'),
-                    !!document.getElementById('bar')
+                    !!document.getElementById('bar'),
                   )
                 })
 
                 return () => h('div', { ref: el, id: 'bar' }, 'Bar')
-              }
-            }
+              },
+            },
           },
           setup: () => {
             const toggle = ref(true)
             const click = () => (toggle.value = !toggle.value)
             return { toggle, click }
-          }
+          },
         }).mount('#app')
       })
 
@@ -1586,6 +2025,292 @@ describe('e2e: Transition', () => {
       expect(barMountSpy).toBeCalledTimes(1)
       expect(barMountSpy).toHaveBeenNthCalledWith(1, true, false, true)
     })
+
+    // #8105
+    test(
+      'trigger again when transition is not finished',
+      async () => {
+        await page().evaluate(duration => {
+          const { createApp, shallowRef, h } = (window as any).Vue
+          const One = {
+            async setup() {
+              return () => h('div', { class: 'test' }, 'one')
+            },
+          }
+          const Two = {
+            async setup() {
+              return () => h('div', { class: 'test' }, 'two')
+            },
+          }
+          createApp({
+            template: `
+            <div id="container">
+              <transition name="test" mode="out-in" duration="${duration}">
+                <Suspense>
+                  <component :is="view"/>
+                </Suspense>
+              </transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            setup: () => {
+              const view = shallowRef(One)
+              const click = () => {
+                view.value = view.value === One ? Two : One
+              }
+              return { view, click }
+            },
+          }).mount('#app')
+        }, duration)
+
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div class="test test-enter-active test-enter-to">one</div>',
+        )
+
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">one</div>')
+
+        // trigger twice
+        classWhenTransitionStart()
+        classWhenTransitionStart()
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div class="test test-leave-active test-leave-to">one</div>',
+        )
+
+        await transitionFinish()
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div class="test test-enter-active test-enter-to">one</div>',
+        )
+
+        await transitionFinish()
+        await nextFrame()
+        expect(await html('#container')).toBe('<div class="test">one</div>')
+      },
+      E2E_TIMEOUT,
+    )
+
+    // #9996
+    test(
+      'trigger again when transition is not finished & correctly anchor',
+      async () => {
+        await page().evaluate(duration => {
+          const { createApp, shallowRef, h } = (window as any).Vue
+          const One = {
+            async setup() {
+              return () => h('div', { class: 'test' }, 'one')
+            },
+          }
+          const Two = {
+            async setup() {
+              return () => h('div', { class: 'test' }, 'two')
+            },
+          }
+          createApp({
+            template: `
+            <div id="container">
+              <div>Top</div>
+              <transition name="test" mode="out-in" :duration="${duration}">
+                <Suspense>
+                  <component :is="view"/>
+                </Suspense>
+              </transition>
+              <div>Bottom</div>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            setup: () => {
+              const view = shallowRef(One)
+              const click = () => {
+                view.value = view.value === One ? Two : One
+              }
+              return { view, click }
+            },
+          }).mount('#app')
+        }, duration)
+
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div>Top</div><div class="test test-enter-active test-enter-to">one</div><div>Bottom</div>',
+        )
+
+        await transitionFinish()
+        expect(await html('#container')).toBe(
+          '<div>Top</div><div class="test">one</div><div>Bottom</div>',
+        )
+
+        // trigger twice
+        classWhenTransitionStart()
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div>Top</div><div class="test test-leave-active test-leave-to">one</div><div>Bottom</div>',
+        )
+
+        await transitionFinish()
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div>Top</div><div class="test test-enter-active test-enter-to">two</div><div>Bottom</div>',
+        )
+
+        await transitionFinish()
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div>Top</div><div class="test">two</div><div>Bottom</div>',
+        )
+      },
+      E2E_TIMEOUT,
+    )
+
+    // #11806
+    test(
+      'switch between Async and Sync child when transition is not finished',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, shallowRef, h, nextTick } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <Transition mode="out-in">
+                <Suspense>
+                  <component :is="view"/>
+                </Suspense>
+              </Transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            setup: () => {
+              const view = shallowRef('SyncB')
+              const click = async () => {
+                view.value = 'SyncA'
+                await nextTick()
+                view.value = 'AsyncB'
+                await nextTick()
+                view.value = 'SyncB'
+              }
+              return { view, click }
+            },
+            components: {
+              SyncA: {
+                setup() {
+                  return () => h('div', 'SyncA')
+                },
+              },
+              AsyncB: {
+                async setup() {
+                  await nextTick()
+                  return () => h('div', 'AsyncB')
+                },
+              },
+              SyncB: {
+                setup() {
+                  return () => h('div', 'SyncB')
+                },
+              },
+            },
+          }).mount('#app')
+        })
+
+        expect(await html('#container')).toBe('<div>SyncB</div>')
+
+        await click('#toggleBtn')
+        await nextFrame()
+        await transitionFinish()
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="">SyncB</div>')
+      },
+      E2E_TIMEOUT,
+    )
+  })
+
+  describe('transition with Teleport', () => {
+    test(
+      'apply transition to teleport child',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref, h } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="target"></div>
+            <div id="container">
+              <transition>
+                <Teleport to="#target">
+                  <!-- comment -->
+                  <Comp v-if="toggle" class="test">content</Comp>
+                </Teleport>
+              </transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            components: {
+              Comp: {
+                setup() {
+                  return () => h('div', { class: 'test' }, 'content')
+                },
+              },
+            },
+            setup: () => {
+              const toggle = ref(false)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            },
+          }).mount('#app')
+        })
+
+        expect(await html('#target')).toBe('<!-- comment --><!--v-if-->')
+        expect(await html('#container')).toBe(
+          '<!--teleport start--><!--teleport end-->',
+        )
+
+        const classWhenTransitionStart = () =>
+          page().evaluate(() => {
+            ;(document.querySelector('#toggleBtn') as any)!.click()
+            return Promise.resolve().then(() => {
+              // find the class of teleported node
+              return document
+                .querySelector('#target div')!
+                .className.split(/\s+/g)
+            })
+          })
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'v-enter-from',
+          'v-enter-active',
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'v-enter-active',
+          'v-enter-to',
+        ])
+        await transitionFinish()
+        expect(await html('#target')).toBe(
+          '<!-- comment --><div class="test">content</div>',
+        )
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'v-leave-from',
+          'v-leave-active',
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'v-leave-active',
+          'v-leave-to',
+        ])
+        await transitionFinish()
+        expect(await html('#target')).toBe('<!-- comment --><!--v-if-->')
+        expect(await html('#container')).toBe(
+          '<!--teleport start--><!--teleport end-->',
+        )
+      },
+      E2E_TIMEOUT,
+    )
   })
 
   describe('transition with v-show', () => {
@@ -1607,7 +2332,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1617,13 +2342,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await isVisible('.test')).toBe(false)
@@ -1632,20 +2357,20 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<div class="test" style="">content</div>'
+          '<div class="test" style="">content</div>',
         )
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1672,7 +2397,7 @@ describe('e2e: Transition', () => {
             afterEnterSpy,
             beforeLeaveSpy,
             onLeaveSpy,
-            afterLeaveSpy
+            afterLeaveSpy,
           } = window as any
           const { createApp, ref } = (window as any).Vue
           createApp({
@@ -1702,9 +2427,9 @@ describe('e2e: Transition', () => {
                 afterEnterSpy,
                 beforeLeaveSpy,
                 onLeaveSpy,
-                afterLeaveSpy
+                afterLeaveSpy,
               }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1713,7 +2438,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         expect(beforeLeaveSpy).toBeCalled()
         expect(onLeaveSpy).toBeCalled()
@@ -1722,7 +2447,7 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         expect(afterLeaveSpy).not.toBeCalled()
         await transitionFinish()
@@ -1733,7 +2458,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         expect(beforeEnterSpy).toBeCalled()
         expect(onEnterSpy).toBeCalled()
@@ -1742,16 +2467,16 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         expect(afterEnterSpy).not.toBeCalled()
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<div class="test" style="">content</div>'
+          '<div class="test" style="">content</div>',
         )
         expect(afterEnterSpy).toBeCalled()
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1776,7 +2501,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click, onLeaveCancelledSpy }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1786,34 +2511,34 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
 
         // cancel (enter)
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         expect(onLeaveCancelledSpy).toBeCalled()
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<div class="test" style="">content</div>'
+          '<div class="test" style="">content</div>',
         )
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1854,9 +2579,9 @@ describe('e2e: Transition', () => {
                 click,
                 beforeEnterSpy,
                 onEnterSpy,
-                afterEnterSpy
+                afterEnterSpy,
               }
-            }
+            },
           }).mount('#app')
           return Promise.resolve().then(() => {
             return document.querySelector('.test')!.className.split(/\s+/g)
@@ -1871,13 +2596,13 @@ describe('e2e: Transition', () => {
         expect(appearClass).toStrictEqual([
           'test',
           'test-appear-from',
-          'test-appear-active'
+          'test-appear-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-appear-active',
-          'test-appear-to'
+          'test-appear-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1890,13 +2615,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await isVisible('.test')).toBe(false)
@@ -1905,20 +2630,20 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<div class="test" style="">content</div>'
+          '<div class="test" style="">content</div>',
         )
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     // #4845
@@ -1958,9 +2683,9 @@ describe('e2e: Transition', () => {
                 click,
                 beforeEnterSpy,
                 onEnterSpy,
-                afterEnterSpy
+                afterEnterSpy,
               }
-            }
+            },
           }).mount('#app')
         })
         await nextTick()
@@ -1973,7 +2698,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         expect(beforeEnterSpy).toBeCalledTimes(1)
         expect(onEnterSpy).toBeCalledTimes(1)
@@ -1982,16 +2707,16 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         expect(afterEnterSpy).not.toBeCalled()
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<div class="test" style="">content</div>'
+          '<div class="test" style="">content</div>',
         )
         expect(afterEnterSpy).toBeCalled()
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
   })
 
@@ -2014,7 +2739,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -2023,13 +2748,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -2038,18 +2763,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -2070,7 +2795,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -2079,13 +2804,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -2094,18 +2819,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -2126,7 +2851,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -2135,13 +2860,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -2150,18 +2875,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -2185,7 +2910,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -2194,13 +2919,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -2209,18 +2934,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish(duration * 4)
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -2233,11 +2958,11 @@ describe('e2e: Transition', () => {
                 <div class="test">content</div>
               </transition>
             </div>
-          `
+          `,
         }).mount(document.createElement('div'))
         expect(
           `[Vue warn]: <transition> explicit duration is NaN - ` +
-            'the duration expression might be incorrect.'
+            'the duration expression might be incorrect.',
         ).toHaveBeenWarned()
 
         createApp({
@@ -2250,14 +2975,14 @@ describe('e2e: Transition', () => {
                 <div class="test">content</div>
               </transition>
             </div>
-          `
+          `,
         }).mount(document.createElement('div'))
         expect(
           `[Vue warn]: <transition> explicit duration is not a valid number - ` +
-            `got ${JSON.stringify({})}`
+            `got ${JSON.stringify({})}`,
         ).toHaveBeenWarned()
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
   })
 
@@ -2265,12 +2990,12 @@ describe('e2e: Transition', () => {
     createApp({
       render() {
         return h(Transition, null, {
-          default: () => [h('div'), h('div')]
+          default: () => [h('div'), h('div')],
         })
-      }
+      },
     }).mount(document.createElement('div'))
     expect(
-      '<transition> can only be used on a single element or component'
+      '<transition> can only be used on a single element or component',
     ).toHaveBeenWarned()
   })
 
@@ -2282,7 +3007,7 @@ describe('e2e: Transition', () => {
             <div class="test">content</div>
           </transition>
         </div>
-      `
+      `,
     }).mount(document.createElement('div'))
     expect(`invalid <transition> mode: none`).toHaveBeenWarned()
   })
@@ -2300,11 +3025,11 @@ describe('e2e: Transition', () => {
             onLeave(el, end) {
               innerSpy()
               end()
-            }
+            },
           },
-          this.$slots.default
+          this.$slots.default,
         )
-      }
+      },
     }
 
     const toggle = ref(true)
@@ -2313,9 +3038,9 @@ describe('e2e: Transition', () => {
     createApp({
       render() {
         return h(MyTransition, { onLeave: () => outerSpy() }, () =>
-          toggle.value ? h('div') : null
+          toggle.value ? h('div') : null,
         )
-      }
+      },
     }).mount(root)
 
     expect(root.innerHTML).toBe(`<div></div>`)
@@ -2338,8 +3063,8 @@ describe('e2e: Transition', () => {
               template: `
                   <!-- Broken! -->
                   <div><slot /></div>
-                `
-            }
+                `,
+            },
           },
           template: `
             <div id="container">
@@ -2355,24 +3080,24 @@ describe('e2e: Transition', () => {
             const toggle = ref(true)
             const click = () => (toggle.value = !toggle.value)
             return { toggle, click }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
-        '<!-- Broken! --><div class="test"><div>content</div></div>'
+        '<!-- Broken! --><div class="test"><div>content</div></div>',
       )
 
       // leave
       expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
         'v-leave-from',
-        'v-leave-active'
+        'v-leave-active',
       ])
       await nextFrame()
       expect(await classList('.test')).toStrictEqual([
         'test',
         'v-leave-active',
-        'v-leave-to'
+        'v-leave-to',
       ])
       await transitionFinish()
       expect(await html('#container')).toBe('<!--v-if-->')
@@ -2381,19 +3106,19 @@ describe('e2e: Transition', () => {
       expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
         'v-enter-from',
-        'v-enter-active'
+        'v-enter-active',
       ])
       await nextFrame()
       expect(await classList('.test')).toStrictEqual([
         'test',
         'v-enter-active',
-        'v-enter-to'
+        'v-enter-to',
       ])
       await transitionFinish()
       expect(await html('#container')).toBe(
-        '<!-- Broken! --><div class="test"><div>content</div></div>'
+        '<!-- Broken! --><div class="test"><div>content</div></div>',
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
index 1a61c23a4..22f225409 100644
--- a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
+++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
@@ -1,5 +1,5 @@
 import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
-import path from 'path'
+import path from 'node:path'
 import { createApp, ref } from 'vue'
 
 describe('e2e: TransitionGroup', () => {
@@ -42,13 +42,13 @@ describe('e2e: TransitionGroup', () => {
             const items = ref(['a', 'b', 'c'])
             const click = () => items.value.push('d', 'e')
             return { click, items }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
@@ -56,7 +56,7 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-from test-enter-active">d</div>` +
-          `<div class="test test-enter-from test-enter-active">e</div>`
+          `<div class="test test-enter-from test-enter-active">e</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
@@ -64,7 +64,7 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-active test-enter-to">d</div>` +
-          `<div class="test test-enter-active test-enter-to">e</div>`
+          `<div class="test test-enter-active test-enter-to">e</div>`,
       )
       await transitionFinish()
       expect(await html('#container')).toBe(
@@ -72,10 +72,10 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test">d</div>` +
-          `<div class="test">e</div>`
+          `<div class="test">e</div>`,
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -96,30 +96,30 @@ describe('e2e: TransitionGroup', () => {
             const items = ref(['a', 'b', 'c'])
             const click = () => (items.value = ['b'])
             return { click, items }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
         `<div class="test test-leave-from test-leave-active">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test test-leave-from test-leave-active">c</div>`
+          `<div class="test test-leave-from test-leave-active">c</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
         `<div class="test test-leave-active test-leave-to">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test test-leave-active test-leave-to">c</div>`
+          `<div class="test test-leave-active test-leave-to">c</div>`,
       )
       await transitionFinish()
       expect(await html('#container')).toBe(`<div class="test">b</div>`)
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -140,36 +140,36 @@ describe('e2e: TransitionGroup', () => {
             const items = ref(['a', 'b', 'c'])
             const click = () => (items.value = ['b', 'c', 'd'])
             return { click, items }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
         `<div class="test test-leave-from test-leave-active">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test test-enter-from test-enter-active">d</div>`
+          `<div class="test test-enter-from test-enter-active">d</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
         `<div class="test test-leave-active test-leave-to">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test test-enter-active test-enter-to">d</div>`
+          `<div class="test test-enter-active test-enter-to">d</div>`,
       )
       await transitionFinish()
       expect(await html('#container')).toBe(
         `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test">d</div>`
+          `<div class="test">d</div>`,
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -194,7 +194,7 @@ describe('e2e: TransitionGroup', () => {
             const items = ref(['a', 'b', 'c'])
             const click = () => items.value.push('d', 'e')
             return { click, items }
-          }
+          },
         }).mount('#app')
         return Promise.resolve().then(() => {
           return document.querySelector('#container')!.innerHTML
@@ -204,19 +204,19 @@ describe('e2e: TransitionGroup', () => {
       expect(appearHtml).toBe(
         `<div class="test test-appear-from test-appear-active">a</div>` +
           `<div class="test test-appear-from test-appear-active">b</div>` +
-          `<div class="test test-appear-from test-appear-active">c</div>`
+          `<div class="test test-appear-from test-appear-active">c</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
         `<div class="test test-appear-active test-appear-to">a</div>` +
           `<div class="test test-appear-active test-appear-to">b</div>` +
-          `<div class="test test-appear-active test-appear-to">c</div>`
+          `<div class="test test-appear-active test-appear-to">c</div>`,
       )
       await transitionFinish()
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       // enter
@@ -225,7 +225,7 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-from test-enter-active">d</div>` +
-          `<div class="test test-enter-from test-enter-active">e</div>`
+          `<div class="test test-enter-from test-enter-active">e</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
@@ -233,7 +233,7 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-active test-enter-to">d</div>` +
-          `<div class="test test-enter-active test-enter-to">e</div>`
+          `<div class="test test-enter-active test-enter-to">e</div>`,
       )
       await transitionFinish()
       expect(await html('#container')).toBe(
@@ -241,10 +241,10 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test">d</div>` +
-          `<div class="test">e</div>`
+          `<div class="test">e</div>`,
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -265,36 +265,36 @@ describe('e2e: TransitionGroup', () => {
             const items = ref(['a', 'b', 'c'])
             const click = () => (items.value = ['d', 'b', 'a'])
             return { click, items }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
         `<div class="test group-enter-from group-enter-active">d</div>` +
           `<div class="test">b</div>` +
           `<div class="test group-move" style="">a</div>` +
-          `<div class="test group-leave-from group-leave-active group-move" style="">c</div>`
+          `<div class="test group-leave-from group-leave-active group-move" style="">c</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
         `<div class="test group-enter-active group-enter-to">d</div>` +
           `<div class="test">b</div>` +
           `<div class="test group-move" style="">a</div>` +
-          `<div class="test group-leave-active group-move group-leave-to" style="">c</div>`
+          `<div class="test group-leave-active group-move group-leave-to" style="">c</div>`,
       )
       await transitionFinish(duration * 2)
       expect(await html('#container')).toBe(
         `<div class="test">d</div>` +
           `<div class="test">b</div>` +
-          `<div class="test" style="">a</div>`
+          `<div class="test" style="">a</div>`,
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -321,16 +321,16 @@ describe('e2e: TransitionGroup', () => {
               items.value = ['a', 'b', 'c']
             }
             return { click, items, name, changeName }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
-        `<div>a</div>` + `<div>b</div>` + `<div>c</div>`
+        `<div>a</div>` + `<div>b</div>` + `<div>c</div>`,
       )
 
       // invalid name
       expect(await htmlWhenTransitionStart()).toBe(
-        `<div>b</div>` + `<div>c</div>` + `<div>a</div>`
+        `<div>b</div>` + `<div>c</div>` + `<div>a</div>`,
       )
       // change name
       const moveHtml = await page().evaluate(() => {
@@ -342,7 +342,7 @@ describe('e2e: TransitionGroup', () => {
       expect(moveHtml).toBe(
         `<div class="group-move" style="">a</div>` +
           `<div class="group-move" style="">b</div>` +
-          `<div class="group-move" style="">c</div>`
+          `<div class="group-move" style="">c</div>`,
       )
       // not sure why but we just have to wait really long for this to
       // pass consistently :/
@@ -350,10 +350,10 @@ describe('e2e: TransitionGroup', () => {
       expect(await html('#container')).toBe(
         `<div class="" style="">a</div>` +
           `<div class="" style="">b</div>` +
-          `<div class="" style="">c</div>`
+          `<div class="" style="">c</div>`,
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -389,7 +389,7 @@ describe('e2e: TransitionGroup', () => {
           afterEnterSpy,
           beforeLeaveSpy,
           onLeaveSpy,
-          afterLeaveSpy
+          afterLeaveSpy,
         } = window as any
         const { createApp, ref } = (window as any).Vue
         createApp({
@@ -428,9 +428,9 @@ describe('e2e: TransitionGroup', () => {
               afterEnterSpy,
               beforeLeaveSpy,
               onLeaveSpy,
-              afterLeaveSpy
+              afterLeaveSpy,
             }
-          }
+          },
         }).mount('#app')
         return Promise.resolve().then(() => {
           return document.querySelector('#container')!.innerHTML
@@ -442,21 +442,21 @@ describe('e2e: TransitionGroup', () => {
       expect(appearHtml).toBe(
         `<div class="test test-appear-from test-appear-active">a</div>` +
           `<div class="test test-appear-from test-appear-active">b</div>` +
-          `<div class="test test-appear-from test-appear-active">c</div>`
+          `<div class="test test-appear-from test-appear-active">c</div>`,
       )
       await nextFrame()
       expect(afterAppearSpy).not.toBeCalled()
       expect(await html('#container')).toBe(
         `<div class="test test-appear-active test-appear-to">a</div>` +
           `<div class="test test-appear-active test-appear-to">b</div>` +
-          `<div class="test test-appear-active test-appear-to">c</div>`
+          `<div class="test test-appear-active test-appear-to">c</div>`,
       )
       await transitionFinish()
       expect(afterAppearSpy).toBeCalled()
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       // enter + leave
@@ -464,7 +464,7 @@ describe('e2e: TransitionGroup', () => {
         `<div class="test test-leave-from test-leave-active">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test test-enter-from test-enter-active">d</div>`
+          `<div class="test test-enter-from test-enter-active">d</div>`,
       )
       expect(beforeLeaveSpy).toBeCalled()
       expect(onLeaveSpy).toBeCalled()
@@ -477,7 +477,7 @@ describe('e2e: TransitionGroup', () => {
         `<div class="test test-leave-active test-leave-to">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test test-enter-active test-enter-to">d</div>`
+          `<div class="test test-enter-active test-enter-to">d</div>`,
       )
       expect(afterLeaveSpy).not.toBeCalled()
       expect(afterEnterSpy).not.toBeCalled()
@@ -485,12 +485,12 @@ describe('e2e: TransitionGroup', () => {
       expect(await html('#container')).toBe(
         `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test">d</div>`
+          `<div class="test">d</div>`,
       )
       expect(afterLeaveSpy).toBeCalled()
       expect(afterEnterSpy).toBeCalled()
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test('warn unkeyed children', () => {
@@ -503,9 +503,146 @@ describe('e2e: TransitionGroup', () => {
       setup: () => {
         const items = ref(['a', 'b', 'c'])
         return { items }
-      }
+      },
     }).mount(document.createElement('div'))
 
     expect(`<TransitionGroup> children must be keyed`).toHaveBeenWarned()
   })
+
+  test('not warn unkeyed text children w/ whitespace preserve', () => {
+    const app = createApp({
+      template: `
+        <transition-group name="test">
+          <p key="1">1</p>
+          <p key="2" v-if="false">2</p>
+        </transition-group>
+        `,
+    })
+
+    app.config.compilerOptions.whitespace = 'preserve'
+    app.mount(document.createElement('div'))
+    expect(`<TransitionGroup> children must be keyed`).not.toHaveBeenWarned()
+  })
+
+  // #5168, #7898, #9067
+  test(
+    'avoid set transition hooks for comment node',
+    async () => {
+      await page().evaluate(duration => {
+        const { createApp, ref, h, createCommentVNode } = (window as any).Vue
+
+        const show = ref(false)
+        createApp({
+          template: `
+            <div id="container">
+              <transition-group name="test">
+                <div v-for="item in items" :key="item" class="test">{{item}}</div>
+                <Child key="child"/>
+              </transition-group>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+          components: {
+            Child: {
+              setup() {
+                return () =>
+                  show.value
+                    ? h('div', { class: 'test' }, 'child')
+                    : createCommentVNode('v-if', true)
+              },
+            },
+          },
+          setup: () => {
+            const items = ref([])
+            const click = () => {
+              items.value = ['a', 'b', 'c']
+              setTimeout(() => {
+                show.value = true
+              }, duration)
+            }
+            return { click, items }
+          },
+        }).mount('#app')
+      }, duration)
+
+      expect(await html('#container')).toBe(`<!--v-if-->`)
+
+      expect(await htmlWhenTransitionStart()).toBe(
+        `<div class="test test-enter-from test-enter-active">a</div>` +
+          `<div class="test test-enter-from test-enter-active">b</div>` +
+          `<div class="test test-enter-from test-enter-active">c</div>` +
+          `<!--v-if-->`,
+      )
+
+      await transitionFinish(duration)
+      await nextFrame()
+      expect(await html('#container')).toBe(
+        `<div class="test">a</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test">c</div>` +
+          `<div class="test test-enter-active test-enter-to">child</div>`,
+      )
+
+      await transitionFinish(duration)
+      expect(await html('#container')).toBe(
+        `<div class="test">a</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test">c</div>` +
+          `<div class="test">child</div>`,
+      )
+    },
+    E2E_TIMEOUT,
+  )
+
+  // #4621, #4622, #5153
+  test(
+    'avoid set transition hooks for text node',
+    async () => {
+      await page().evaluate(() => {
+        const { createApp, ref } = (window as any).Vue
+        const app = createApp({
+          template: `
+            <div id="container">
+              <transition-group name="test">
+                <div class="test">foo</div>
+                <div class="test" v-if="show">bar</div>
+              </transition-group>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+          setup: () => {
+            const show = ref(false)
+            const click = () => {
+              show.value = true
+            }
+            return { show, click }
+          },
+        })
+
+        app.config.compilerOptions.whitespace = 'preserve'
+        app.mount('#app')
+      })
+
+      expect(await html('#container')).toBe(`<div class="test">foo</div>` + ` `)
+
+      expect(await htmlWhenTransitionStart()).toBe(
+        `<div class="test">foo</div>` +
+          ` ` +
+          `<div class="test test-enter-from test-enter-active">bar</div>`,
+      )
+
+      await nextFrame()
+      expect(await html('#container')).toBe(
+        `<div class="test">foo</div>` +
+          ` ` +
+          `<div class="test test-enter-active test-enter-to">bar</div>`,
+      )
+
+      await transitionFinish(duration)
+      expect(await html('#container')).toBe(
+        `<div class="test">foo</div>` + ` ` + `<div class="test">bar</div>`,
+      )
+    },
+    E2E_TIMEOUT,
+  )
 })
diff --git a/packages/vue/__tests__/e2e/commits.mock.ts b/packages/vue/__tests__/e2e/commits.mock.ts
index 8bcb8d8f9..8e3f15344 100644
--- a/packages/vue/__tests__/e2e/commits.mock.ts
+++ b/packages/vue/__tests__/e2e/commits.mock.ts
@@ -8,17 +8,17 @@ export default {
         author: {
           name: 'Haoqun Jiang',
           email: 'haoqunjiang@gmail.com',
-          date: '2019-12-09T19:52:20Z'
+          date: '2019-12-09T19:52:20Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2019-12-09T19:52:20Z'
+          date: '2019-12-09T19:52:20Z',
         },
         message: 'test: add test for runtime-dom/modules/class (#75)',
         tree: {
           sha: 'f53f761827af281db86c31d113086c068c1d0789',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/f53f761827af281db86c31d113086c068c1d0789'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/f53f761827af281db86c31d113086c068c1d0789',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/d1527fbee422c7170e56845e55b49c4fd6de72a7',
         comment_count: 0,
@@ -26,8 +26,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/d1527fbee422c7170e56845e55b49c4fd6de72a7',
       html_url:
@@ -55,7 +55,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/sodatea/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -79,16 +79,16 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: '2383b45e322272ddc102d6914c149b284a25d04f',
           url: 'https://api.github.com/repos/vuejs/core/commits/2383b45e322272ddc102d6914c149b284a25d04f',
           html_url:
-            'https://github.com/vuejs/core/commit/2383b45e322272ddc102d6914c149b284a25d04f'
-        }
-      ]
+            'https://github.com/vuejs/core/commit/2383b45e322272ddc102d6914c149b284a25d04f',
+        },
+      ],
     },
     {
       sha: '2383b45e322272ddc102d6914c149b284a25d04f',
@@ -98,17 +98,17 @@ export default {
         author: {
           name: 'GCA',
           email: 'gcaaa31928@gmail.com',
-          date: '2019-12-09T19:23:57Z'
+          date: '2019-12-09T19:23:57Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2019-12-09T19:23:57Z'
+          date: '2019-12-09T19:23:57Z',
         },
         message: 'chore: fix typo (#530) [ci skip]',
         tree: {
           sha: '2a5872ff8dc8ccb8121abd7e890ac3c0c9f1209f',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/2a5872ff8dc8ccb8121abd7e890ac3c0c9f1209f'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/2a5872ff8dc8ccb8121abd7e890ac3c0c9f1209f',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/2383b45e322272ddc102d6914c149b284a25d04f',
         comment_count: 0,
@@ -116,8 +116,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/2383b45e322272ddc102d6914c149b284a25d04f',
       html_url:
@@ -146,7 +146,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/gcaaa31928/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -170,16 +170,16 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: 'e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
           url: 'https://api.github.com/repos/vuejs/core/commits/e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
           html_url:
-            'https://github.com/vuejs/core/commit/e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad'
-        }
-      ]
+            'https://github.com/vuejs/core/commit/e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
+        },
+      ],
     },
     {
       sha: 'e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
@@ -189,17 +189,17 @@ export default {
         author: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2019-12-09T19:23:01Z'
+          date: '2019-12-09T19:23:01Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2019-12-09T19:23:01Z'
+          date: '2019-12-09T19:23:01Z',
         },
         message: 'test: fix warning',
         tree: {
           sha: 'd942b17681e2e2fbbcd2ee04092390c7f2cf534d',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/d942b17681e2e2fbbcd2ee04092390c7f2cf534d'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/d942b17681e2e2fbbcd2ee04092390c7f2cf534d',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
         comment_count: 0,
@@ -207,8 +207,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
       html_url:
@@ -237,7 +237,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -261,17 +261,17 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: '12ec62e6881f83dfa6c7f8a3c3650ec2567e6b1e',
           url: 'https://api.github.com/repos/vuejs/core/commits/12ec62e6881f83dfa6c7f8a3c3650ec2567e6b1e',
           html_url:
-            'https://github.com/vuejs/core/commit/12ec62e6881f83dfa6c7f8a3c3650ec2567e6b1e'
-        }
-      ]
-    }
+            'https://github.com/vuejs/core/commit/12ec62e6881f83dfa6c7f8a3c3650ec2567e6b1e',
+        },
+      ],
+    },
   ],
   'v2-compat': [
     {
@@ -282,17 +282,17 @@ export default {
         author: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-13T03:42:34Z'
+          date: '2018-11-13T03:42:34Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-13T03:54:01Z'
+          date: '2018-11-13T03:54:01Z',
         },
         message: 'chore: fix tests',
         tree: {
           sha: '6ac7bd078a6eb0ad32b5102e0c5d2c29f2b20a48',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/6ac7bd078a6eb0ad32b5102e0c5d2c29f2b20a48'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/6ac7bd078a6eb0ad32b5102e0c5d2c29f2b20a48',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/ecf4da822eea97f5db5fa769d39f994755384a4b',
         comment_count: 0,
@@ -300,8 +300,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/ecf4da822eea97f5db5fa769d39f994755384a4b',
       html_url:
@@ -330,7 +330,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -354,16 +354,16 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: 'ca296812d54aff123472d7147b83fddfb634d9bc',
           url: 'https://api.github.com/repos/vuejs/core/commits/ca296812d54aff123472d7147b83fddfb634d9bc',
           html_url:
-            'https://github.com/vuejs/core/commit/ca296812d54aff123472d7147b83fddfb634d9bc'
-        }
-      ]
+            'https://github.com/vuejs/core/commit/ca296812d54aff123472d7147b83fddfb634d9bc',
+        },
+      ],
     },
     {
       sha: 'ca296812d54aff123472d7147b83fddfb634d9bc',
@@ -373,17 +373,17 @@ export default {
         author: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-13T03:21:56Z'
+          date: '2018-11-13T03:21:56Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-13T03:46:06Z'
+          date: '2018-11-13T03:46:06Z',
         },
         message: 'refactor: bring back clone for reused nodes',
         tree: {
           sha: '2cec32c97686e0ee9af1b87f0abdbbbdc18b6de6',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/2cec32c97686e0ee9af1b87f0abdbbbdc18b6de6'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/2cec32c97686e0ee9af1b87f0abdbbbdc18b6de6',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/ca296812d54aff123472d7147b83fddfb634d9bc',
         comment_count: 0,
@@ -391,8 +391,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/ca296812d54aff123472d7147b83fddfb634d9bc',
       html_url:
@@ -421,7 +421,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -445,16 +445,16 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: 'e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
           url: 'https://api.github.com/repos/vuejs/core/commits/e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
           html_url:
-            'https://github.com/vuejs/core/commit/e6be55a4989edb6f8750dbaa14eb693ec1f0d67b'
-        }
-      ]
+            'https://github.com/vuejs/core/commit/e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
+        },
+      ],
     },
     {
       sha: 'e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
@@ -464,17 +464,17 @@ export default {
         author: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-02T20:59:45Z'
+          date: '2018-11-02T20:59:45Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-02T20:59:45Z'
+          date: '2018-11-02T20:59:45Z',
         },
         message: 'chore: relax render type for tsx',
         tree: {
           sha: '7e2b3bb92ab91f755b2251e4a7903e6dd2042602',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/7e2b3bb92ab91f755b2251e4a7903e6dd2042602'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/7e2b3bb92ab91f755b2251e4a7903e6dd2042602',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
         comment_count: 0,
@@ -482,8 +482,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
       html_url:
@@ -512,7 +512,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -536,16 +536,16 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: 'ccc835caff0344baad3c92ce786ad4f804bf667b',
           url: 'https://api.github.com/repos/vuejs/core/commits/ccc835caff0344baad3c92ce786ad4f804bf667b',
           html_url:
-            'https://github.com/vuejs/core/commit/ccc835caff0344baad3c92ce786ad4f804bf667b'
-        }
-      ]
-    }
-  ]
-}
+            'https://github.com/vuejs/core/commit/ccc835caff0344baad3c92ce786ad4f804bf667b',
+        },
+      ],
+    },
+  ],
+} as any
diff --git a/packages/vue/__tests__/e2e/commits.spec.ts b/packages/vue/__tests__/e2e/commits.spec.ts
index 1fe26bac2..178c918c2 100644
--- a/packages/vue/__tests__/e2e/commits.spec.ts
+++ b/packages/vue/__tests__/e2e/commits.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 import mocks from './commits.mock'
 
 describe('e2e: commits', () => {
@@ -8,7 +8,7 @@ describe('e2e: commits', () => {
   async function testCommits(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/commits.html`
+      `../../examples/${apiType}/commits.html`,
     )}`
 
     // intercept and mock the response to avoid hitting the actual API
@@ -22,7 +22,7 @@ describe('e2e: commits', () => {
           status: 200,
           contentType: 'application/json',
           headers: { 'Access-Control-Allow-Origin': '*' },
-          body: JSON.stringify(mocks[match[1] as 'main' | 'v2-compat'])
+          body: JSON.stringify(mocks[match[1] as 'main' | 'v2-compat']),
         })
       }
     })
@@ -51,7 +51,7 @@ describe('e2e: commits', () => {
     async () => {
       await testCommits('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -59,6 +59,6 @@ describe('e2e: commits', () => {
     async () => {
       await testCommits('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/e2eUtils.ts b/packages/vue/__tests__/e2e/e2eUtils.ts
index 4d840a690..8512dcaae 100644
--- a/packages/vue/__tests__/e2e/e2eUtils.ts
+++ b/packages/vue/__tests__/e2e/e2eUtils.ts
@@ -1,24 +1,25 @@
 import puppeteer, {
-  Browser,
-  Page,
-  ClickOptions,
-  PuppeteerLaunchOptions
+  type Browser,
+  type ClickOptions,
+  type Page,
+  type PuppeteerLaunchOptions,
 } from 'puppeteer'
 
-export const E2E_TIMEOUT = 30 * 1000
+export const E2E_TIMEOUT: number = 30 * 1000
 
 const puppeteerOptions: PuppeteerLaunchOptions = {
   args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : [],
-  headless: 'new'
+  headless: true,
 }
 
 const maxTries = 30
-export const timeout = (n: number) => new Promise(r => setTimeout(r, n))
+export const timeout = (n: number): Promise<any> =>
+  new Promise(r => setTimeout(r, n))
 
 export async function expectByPolling(
   poll: () => Promise<any>,
-  expected: string
-) {
+  expected: string,
+): Promise<void> {
   for (let tries = 0; tries < maxTries; tries++) {
     const actual = (await poll()) || ''
     if (actual.indexOf(expected) > -1 || tries === maxTries - 1) {
@@ -30,12 +31,39 @@ export async function expectByPolling(
   }
 }
 
-export function setupPuppeteer() {
+interface PuppeteerUtils {
+  page: () => Page
+  click(selector: string, options?: ClickOptions): Promise<void>
+  count(selector: string): Promise<number>
+  text(selector: string): Promise<string | null>
+  value(selector: string): Promise<string>
+  html(selector: string): Promise<string>
+  classList(selector: string): Promise<string[]>
+  children(selector: string): Promise<any[]>
+  isVisible(selector: string): Promise<boolean>
+  isChecked(selector: string): Promise<boolean>
+  isFocused(selector: string): Promise<boolean>
+  setValue(selector: string, value: string): Promise<any>
+  typeValue(selector: string, value: string): Promise<any>
+  enterValue(selector: string, value: string): Promise<any>
+  clearValue(selector: string): Promise<any>
+  timeout(time: number): Promise<any>
+  nextFrame(): Promise<any>
+}
+
+export function setupPuppeteer(args?: string[]): PuppeteerUtils {
   let browser: Browser
   let page: Page
 
+  const resolvedOptions = args
+    ? {
+        ...puppeteerOptions,
+        args: [...puppeteerOptions.args!, ...args],
+      }
+    : puppeteerOptions
+
   beforeAll(async () => {
-    browser = await puppeteer.launch(puppeteerOptions)
+    browser = await puppeteer.launch(resolvedOptions)
   }, 20000)
 
   beforeEach(async () => {
@@ -48,10 +76,7 @@ export function setupPuppeteer() {
     page.on('console', e => {
       if (e.type() === 'error') {
         const err = e.args()[0]
-        console.error(
-          `Error from Puppeteer-loaded page:\n`,
-          err.remoteObject().description
-        )
+        console.error(`Error from Puppeteer-loaded page:\n`, err.remoteObject())
       }
     })
   })
@@ -64,35 +89,38 @@ export function setupPuppeteer() {
     await browser.close()
   })
 
-  async function click(selector: string, options?: ClickOptions) {
+  async function click(
+    selector: string,
+    options?: ClickOptions,
+  ): Promise<void> {
     await page.click(selector, options)
   }
 
-  async function count(selector: string) {
+  async function count(selector: string): Promise<number> {
     return (await page.$$(selector)).length
   }
 
-  async function text(selector: string) {
-    return await page.$eval(selector, node => node.textContent)
+  async function text(selector: string): Promise<string | null> {
+    return page.$eval(selector, node => node.textContent)
   }
 
-  async function value(selector: string) {
-    return await page.$eval(selector, node => (node as HTMLInputElement).value)
+  async function value(selector: string): Promise<string> {
+    return page.$eval(selector, node => (node as HTMLInputElement).value)
   }
 
-  async function html(selector: string) {
-    return await page.$eval(selector, node => node.innerHTML)
+  async function html(selector: string): Promise<string> {
+    return page.$eval(selector, node => node.innerHTML)
   }
 
-  async function classList(selector: string) {
-    return await page.$eval(selector, (node: any) => [...node.classList])
+  async function classList(selector: string): Promise<string[]> {
+    return page.$eval(selector, (node: any) => [...node.classList])
   }
 
-  async function children(selector: string) {
-    return await page.$eval(selector, (node: any) => [...node.children])
+  async function children(selector: string): Promise<any[]> {
+    return page.$eval(selector, (node: any) => [...node.children])
   }
 
-  async function isVisible(selector: string) {
+  async function isVisible(selector: string): Promise<boolean> {
     const display = await page.$eval(selector, node => {
       return window.getComputedStyle(node).display
     })
@@ -102,7 +130,7 @@ export function setupPuppeteer() {
   async function isChecked(selector: string) {
     return await page.$eval(
       selector,
-      node => (node as HTMLInputElement).checked
+      node => (node as HTMLInputElement).checked,
     )
   }
 
@@ -117,7 +145,7 @@ export function setupPuppeteer() {
         ;(node as HTMLInputElement).value = value as string
         node.dispatchEvent(new Event('input'))
       },
-      value
+      value,
     )
   }
 
@@ -137,7 +165,7 @@ export function setupPuppeteer() {
   async function clearValue(selector: string) {
     return await page.$eval(
       selector,
-      node => ((node as HTMLInputElement).value = '')
+      node => ((node as HTMLInputElement).value = ''),
     )
   }
 
@@ -176,6 +204,6 @@ export function setupPuppeteer() {
     enterValue,
     clearValue,
     timeout,
-    nextFrame
+    nextFrame,
   }
 }
diff --git a/packages/vue/__tests__/e2e/grid.spec.ts b/packages/vue/__tests__/e2e/grid.spec.ts
index 728804e0b..23b781307 100644
--- a/packages/vue/__tests__/e2e/grid.spec.ts
+++ b/packages/vue/__tests__/e2e/grid.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 
 interface TableData {
   name: string
@@ -15,7 +15,7 @@ describe('e2e: grid', () => {
     for (let i = 0; i < data.length; i++) {
       for (let j = 0; j < columns.length; j++) {
         expect(
-          await text(`tr:nth-child(${i + 1}) td:nth-child(${j + 1})`)
+          await text(`tr:nth-child(${i + 1}) td:nth-child(${j + 1})`),
         ).toContain(`${data[i][columns[j]]}`)
       }
     }
@@ -24,7 +24,7 @@ describe('e2e: grid', () => {
   async function testGrid(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/grid.html`
+      `../../examples/${apiType}/grid.html`,
     )}`
 
     await page().goto(baseUrl)
@@ -37,7 +37,7 @@ describe('e2e: grid', () => {
       { name: 'Chuck Norris', power: Infinity },
       { name: 'Bruce Lee', power: 9000 },
       { name: 'Jackie Chan', power: 7000 },
-      { name: 'Jet Li', power: 8000 }
+      { name: 'Jet Li', power: 8000 },
     ])
 
     await click('th:nth-child(1)')
@@ -49,7 +49,7 @@ describe('e2e: grid', () => {
       { name: 'Jet Li', power: 8000 },
       { name: 'Jackie Chan', power: 7000 },
       { name: 'Chuck Norris', power: Infinity },
-      { name: 'Bruce Lee', power: 9000 }
+      { name: 'Bruce Lee', power: 9000 },
     ])
 
     await click('th:nth-child(2)')
@@ -61,7 +61,7 @@ describe('e2e: grid', () => {
       { name: 'Chuck Norris', power: Infinity },
       { name: 'Bruce Lee', power: 9000 },
       { name: 'Jet Li', power: 8000 },
-      { name: 'Jackie Chan', power: 7000 }
+      { name: 'Jackie Chan', power: 7000 },
     ])
 
     await click('th:nth-child(2)')
@@ -73,7 +73,7 @@ describe('e2e: grid', () => {
       { name: 'Jackie Chan', power: 7000 },
       { name: 'Jet Li', power: 8000 },
       { name: 'Bruce Lee', power: 9000 },
-      { name: 'Chuck Norris', power: Infinity }
+      { name: 'Chuck Norris', power: Infinity },
     ])
 
     await click('th:nth-child(1)')
@@ -85,13 +85,13 @@ describe('e2e: grid', () => {
       { name: 'Bruce Lee', power: 9000 },
       { name: 'Chuck Norris', power: Infinity },
       { name: 'Jackie Chan', power: 7000 },
-      { name: 'Jet Li', power: 8000 }
+      { name: 'Jet Li', power: 8000 },
     ])
 
     await typeValue('input[name="query"]', 'j')
     await assertTable([
       { name: 'Jackie Chan', power: 7000 },
-      { name: 'Jet Li', power: 8000 }
+      { name: 'Jet Li', power: 8000 },
     ])
 
     await typeValue('input[name="query"]', 'infinity')
@@ -108,7 +108,7 @@ describe('e2e: grid', () => {
     async () => {
       await testGrid('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -116,6 +116,6 @@ describe('e2e: grid', () => {
     async () => {
       await testGrid('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/hydration-strat-custom.html b/packages/vue/__tests__/e2e/hydration-strat-custom.html
new file mode 100644
index 000000000..a479a84bd
--- /dev/null
+++ b/packages/vue/__tests__/e2e/hydration-strat-custom.html
@@ -0,0 +1,44 @@
+<script src="../../dist/vue.global.js"></script>
+
+<div><span id="custom-trigger">click here to hydrate</span></div>
+<div id="app"><button>0</button></div>
+
+<script>
+  window.isHydrated = false
+  const { createSSRApp, defineAsyncComponent, h, ref, onMounted } = Vue
+
+  const Comp = {
+    setup() {
+      const count = ref(0)
+      onMounted(() => {
+        console.log('hydrated')
+        window.isHydrated = true
+      })
+      return () => {
+        return h('button', { onClick: () => count.value++ }, count.value)
+      }
+    },
+  }
+
+  const AsyncComp = defineAsyncComponent({
+    loader: () => Promise.resolve(Comp),
+    hydrate: (hydrate, el) => {
+      const triggerEl = document.getElementById('custom-trigger')
+      triggerEl.addEventListener('click', hydrate, { once: true })
+      return () => {
+        window.teardownCalled = true
+        triggerEl.removeEventListener('click', hydrate)
+      }
+    },
+  })
+
+  const show = (window.show = ref(true))
+  createSSRApp({
+    setup() {
+      onMounted(() => {
+        window.isRootMounted = true
+      })
+      return () => (show.value ? h(AsyncComp) : 'off')
+    },
+  }).mount('#app')
+</script>
diff --git a/packages/vue/__tests__/e2e/hydration-strat-idle.html b/packages/vue/__tests__/e2e/hydration-strat-idle.html
new file mode 100644
index 000000000..23e3aa32a
--- /dev/null
+++ b/packages/vue/__tests__/e2e/hydration-strat-idle.html
@@ -0,0 +1,44 @@
+<script src="../../dist/vue.global.js"></script>
+
+<div id="app"><button>0</button></div>
+
+<script>
+  window.isHydrated = false
+  const {
+    createSSRApp,
+    defineAsyncComponent,
+    h,
+    ref,
+    onMounted,
+    hydrateOnIdle,
+  } = Vue
+
+  const Comp = {
+    setup() {
+      const count = ref(0)
+      onMounted(() => {
+        console.log('hydrated')
+        window.isHydrated = true
+      })
+      return () => h('button', { onClick: () => count.value++ }, count.value)
+    },
+  }
+
+  const AsyncComp = defineAsyncComponent({
+    loader: () =>
+      new Promise(resolve => {
+        setTimeout(() => {
+          console.log('resolve')
+          resolve(Comp)
+          requestIdleCallback(() => {
+            console.log('busy')
+          })
+        }, 10)
+      }),
+    hydrate: hydrateOnIdle(),
+  })
+
+  createSSRApp({
+    render: () => h(AsyncComp),
+  }).mount('#app')
+</script>
diff --git a/packages/vue/__tests__/e2e/hydration-strat-interaction.html b/packages/vue/__tests__/e2e/hydration-strat-interaction.html
new file mode 100644
index 000000000..443fcbfa1
--- /dev/null
+++ b/packages/vue/__tests__/e2e/hydration-strat-interaction.html
@@ -0,0 +1,63 @@
+<script src="../../dist/vue.global.js"></script>
+
+<div>click to hydrate</div>
+<div id="app"><button>0</button></div>
+<style>
+  body {
+    margin: 0;
+  }
+</style>
+
+<script>
+  const isFragment = location.search.includes('?fragment')
+  if (isFragment) {
+    document.getElementById('app').innerHTML =
+      `<!--[--><!--[--><span>one</span><!--]--><button>0</button><span>two</span><!--]-->`
+  }
+
+  window.isHydrated = false
+  const {
+    createSSRApp,
+    defineAsyncComponent,
+    h,
+    ref,
+    onMounted,
+    hydrateOnInteraction,
+  } = Vue
+
+  const Comp = {
+    setup() {
+      const count = ref(0)
+      onMounted(() => {
+        console.log('hydrated')
+        window.isHydrated = true
+      })
+      return () => {
+        const button = h(
+          'button',
+          { onClick: () => count.value++ },
+          count.value,
+        )
+        if (isFragment) {
+          return [[h('span', 'one')], button, h('span', 'two')]
+        } else {
+          return button
+        }
+      }
+    },
+  }
+
+  const AsyncComp = defineAsyncComponent({
+    loader: () => Promise.resolve(Comp),
+    hydrate: hydrateOnInteraction(['click', 'wheel']),
+  })
+
+  createSSRApp({
+    setup() {
+      onMounted(() => {
+        window.isRootMounted = true
+      })
+      return () => h(AsyncComp)
+    },
+  }).mount('#app')
+</script>
diff --git a/packages/vue/__tests__/e2e/hydration-strat-media.html b/packages/vue/__tests__/e2e/hydration-strat-media.html
new file mode 100644
index 000000000..c04cdb2a7
--- /dev/null
+++ b/packages/vue/__tests__/e2e/hydration-strat-media.html
@@ -0,0 +1,43 @@
+<script src="../../dist/vue.global.js"></script>
+
+<div>resize the window width to < 500px to hydrate</div>
+<div id="app"><button>0</button></div>
+
+<script>
+  window.isHydrated = false
+  const {
+    createSSRApp,
+    defineAsyncComponent,
+    h,
+    ref,
+    onMounted,
+    hydrateOnMediaQuery,
+  } = Vue
+
+  const Comp = {
+    setup() {
+      const count = ref(0)
+      onMounted(() => {
+        console.log('hydrated')
+        window.isHydrated = true
+      })
+      return () => {
+        return h('button', { onClick: () => count.value++ }, count.value)
+      }
+    },
+  }
+
+  const AsyncComp = defineAsyncComponent({
+    loader: () => Promise.resolve(Comp),
+    hydrate: hydrateOnMediaQuery('(max-width:500px)'),
+  })
+
+  createSSRApp({
+    setup() {
+      onMounted(() => {
+        window.isRootMounted = true
+      })
+      return () => h(AsyncComp)
+    },
+  }).mount('#app')
+</script>
diff --git a/packages/vue/__tests__/e2e/hydration-strat-visible.html b/packages/vue/__tests__/e2e/hydration-strat-visible.html
new file mode 100644
index 000000000..489222f86
--- /dev/null
+++ b/packages/vue/__tests__/e2e/hydration-strat-visible.html
@@ -0,0 +1,70 @@
+<script src="../../dist/vue.global.js"></script>
+
+<div style="height: 1000px">scroll to the bottom to hydrate</div>
+<div id="app"><button>0</button></div>
+<style>
+  body {
+    margin: 0;
+  }
+</style>
+
+<script>
+  const rootMargin = location.search.match(/rootMargin=(\d+)/)?.[1] ?? 0
+  const isFragment = location.search.includes('?fragment')
+  const isVIf = location.search.includes('?v-if')
+  if (isFragment) {
+    document.getElementById('app').innerHTML =
+      `<!--[--><!--[--><span>one</span><!--]--><button>0</button><span>two</span><!--]-->`
+  } else if (isVIf) {
+    document.getElementById('app').innerHTML = `<!---->`
+  }
+
+  window.isHydrated = false
+  const {
+    createSSRApp,
+    defineAsyncComponent,
+    h,
+    ref,
+    onMounted,
+    hydrateOnVisible,
+    createCommentVNode,
+  } = Vue
+
+  const Comp = {
+    setup() {
+      const count = ref(0)
+      onMounted(() => {
+        console.log('hydrated')
+        window.isHydrated = true
+      })
+      return () => {
+        const button = h(
+          'button',
+          { onClick: () => count.value++ },
+          count.value,
+        )
+        if (isVIf) {
+          return createCommentVNode('v-if', true)
+        } else if (isFragment) {
+          return [[h('span', 'one')], button, h('span', 'two')]
+        } else {
+          return button
+        }
+      }
+    },
+  }
+
+  const AsyncComp = defineAsyncComponent({
+    loader: () => Promise.resolve(Comp),
+    hydrate: hydrateOnVisible({ rootMargin: rootMargin + 'px' }),
+  })
+
+  createSSRApp({
+    setup() {
+      onMounted(() => {
+        window.isRootMounted = true
+      })
+      return () => h(AsyncComp)
+    },
+  }).mount('#app')
+</script>
diff --git a/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts b/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts
new file mode 100644
index 000000000..69934d959
--- /dev/null
+++ b/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts
@@ -0,0 +1,129 @@
+import path from 'node:path'
+import { setupPuppeteer } from './e2eUtils'
+import type { Ref } from '../../src/runtime'
+
+declare const window: Window & {
+  isHydrated: boolean
+  isRootMounted: boolean
+  teardownCalled?: boolean
+  show: Ref<boolean>
+}
+
+describe('async component hydration strategies', () => {
+  const { page, click, text, count } = setupPuppeteer(['--window-size=800,600'])
+
+  async function goToCase(name: string, query = '') {
+    const file = `file://${path.resolve(__dirname, `./hydration-strat-${name}.html${query}`)}`
+    await page().goto(file)
+  }
+
+  async function assertHydrationSuccess(n = '1') {
+    await click('button')
+    expect(await text('button')).toBe(n)
+  }
+
+  test('idle', async () => {
+    const messages: string[] = []
+    page().on('console', e => messages.push(e.text()))
+
+    await goToCase('idle')
+    // not hydrated yet
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+    // wait for hydration
+    await page().waitForFunction(() => window.isHydrated)
+    // assert message order: hyration should happen after already queued main thread work
+    expect(messages.slice(1)).toMatchObject(['resolve', 'busy', 'hydrated'])
+    await assertHydrationSuccess()
+  })
+
+  test('visible', async () => {
+    await goToCase('visible')
+    await page().waitForFunction(() => window.isRootMounted)
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+    // scroll down
+    await page().evaluate(() => window.scrollTo({ top: 1000 }))
+    await page().waitForFunction(() => window.isHydrated)
+    await assertHydrationSuccess()
+  })
+
+  test('visible (with rootMargin)', async () => {
+    await goToCase('visible', '?rootMargin=1000')
+    await page().waitForFunction(() => window.isRootMounted)
+    // should hydrate without needing to scroll
+    await page().waitForFunction(() => window.isHydrated)
+    await assertHydrationSuccess()
+  })
+
+  test('visible (fragment)', async () => {
+    await goToCase('visible', '?fragment')
+    await page().waitForFunction(() => window.isRootMounted)
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+    expect(await count('span')).toBe(2)
+    // scroll down
+    await page().evaluate(() => window.scrollTo({ top: 1000 }))
+    await page().waitForFunction(() => window.isHydrated)
+    await assertHydrationSuccess()
+  })
+
+  test('visible (root v-if) should not throw error', async () => {
+    const spy = vi.fn()
+    const currentPage = page()
+    currentPage.on('pageerror', spy)
+    await goToCase('visible', '?v-if')
+    await page().waitForFunction(() => window.isRootMounted)
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+    expect(spy).toBeCalledTimes(0)
+    currentPage.off('pageerror', spy)
+  })
+
+  test('media query', async () => {
+    await goToCase('media')
+    await page().waitForFunction(() => window.isRootMounted)
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+    // resize
+    await page().setViewport({ width: 400, height: 600 })
+    await page().waitForFunction(() => window.isHydrated)
+    await assertHydrationSuccess()
+  })
+
+  test('interaction', async () => {
+    await goToCase('interaction')
+    await page().waitForFunction(() => window.isRootMounted)
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+    await click('button')
+    await page().waitForFunction(() => window.isHydrated)
+    // should replay event
+    expect(await text('button')).toBe('1')
+    await assertHydrationSuccess('2')
+  })
+
+  test('interaction (fragment)', async () => {
+    await goToCase('interaction', '?fragment')
+    await page().waitForFunction(() => window.isRootMounted)
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+    await click('button')
+    await page().waitForFunction(() => window.isHydrated)
+    // should replay event
+    expect(await text('button')).toBe('1')
+    await assertHydrationSuccess('2')
+  })
+
+  test('custom', async () => {
+    await goToCase('custom')
+    await page().waitForFunction(() => window.isRootMounted)
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+    await click('#custom-trigger')
+    await page().waitForFunction(() => window.isHydrated)
+    await assertHydrationSuccess()
+  })
+
+  test('custom teardown', async () => {
+    await goToCase('custom')
+    await page().waitForFunction(() => window.isRootMounted)
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+    await page().evaluate(() => (window.show.value = false))
+    expect(await text('#app')).toBe('off')
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+    expect(await page().evaluate(() => window.teardownCalled)).toBe(true)
+  })
+})
diff --git a/packages/vue/__tests__/e2e/markdown.spec.ts b/packages/vue/__tests__/e2e/markdown.spec.ts
index dc863c907..8764e6626 100644
--- a/packages/vue/__tests__/e2e/markdown.spec.ts
+++ b/packages/vue/__tests__/e2e/markdown.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, expectByPolling, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, expectByPolling, setupPuppeteer } from './e2eUtils'
 
 describe('e2e: markdown', () => {
   const { page, isVisible, value, html } = setupPuppeteer()
@@ -7,7 +7,7 @@ describe('e2e: markdown', () => {
   async function testMarkdown(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/markdown.html#test`
+      `../../examples/${apiType}/markdown.html#test`,
     )}`
 
     await page().goto(baseUrl)
@@ -25,7 +25,7 @@ describe('e2e: markdown', () => {
       () => html('#editor div'),
       '<h1>hello</h1>\n' +
         '<h2>foo</h2>\n' +
-        '<ul>\n<li>bar</li>\n<li>baz</li>\n</ul>\n'
+        '<ul>\n<li>bar</li>\n<li>baz</li>\n</ul>\n',
     )
   }
 
@@ -34,7 +34,7 @@ describe('e2e: markdown', () => {
     async () => {
       await testMarkdown('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -42,6 +42,6 @@ describe('e2e: markdown', () => {
     async () => {
       await testMarkdown('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/ssr-custom-element.spec.ts b/packages/vue/__tests__/e2e/ssr-custom-element.spec.ts
new file mode 100644
index 000000000..c875f1bee
--- /dev/null
+++ b/packages/vue/__tests__/e2e/ssr-custom-element.spec.ts
@@ -0,0 +1,174 @@
+import path from 'node:path'
+import { setupPuppeteer } from './e2eUtils'
+
+const { page, click, text } = setupPuppeteer()
+
+beforeEach(async () => {
+  await page().addScriptTag({
+    path: path.resolve(__dirname, '../../dist/vue.global.js'),
+  })
+})
+
+async function setContent(html: string) {
+  await page().setContent(`<div id="app">${html}</div>`)
+}
+
+// this must be tested in actual Chrome because jsdom does not support
+// declarative shadow DOM
+test('ssr custom element hydration', async () => {
+  await setContent(
+    `<my-element><template shadowrootmode="open"><button>1</button></template></my-element><my-element-async><template shadowrootmode="open"><button>1</button></template></my-element-async>`,
+  )
+
+  await page().evaluate(() => {
+    const {
+      h,
+      ref,
+      defineSSRCustomElement,
+      defineAsyncComponent,
+      onMounted,
+      useHost,
+    } = (window as any).Vue
+
+    const def = {
+      setup() {
+        const count = ref(1)
+        const el = useHost()
+        onMounted(() => (el.style.border = '1px solid red'))
+
+        return () => h('button', { onClick: () => count.value++ }, count.value)
+      },
+    }
+
+    customElements.define('my-element', defineSSRCustomElement(def))
+    customElements.define(
+      'my-element-async',
+      defineSSRCustomElement(
+        defineAsyncComponent(
+          () =>
+            new Promise(r => {
+              ;(window as any).resolve = () => r(def)
+            }),
+        ),
+      ),
+    )
+  })
+
+  function getColor() {
+    return page().evaluate(() => {
+      return [
+        (document.querySelector('my-element') as any).style.border,
+        (document.querySelector('my-element-async') as any).style.border,
+      ]
+    })
+  }
+
+  expect(await getColor()).toMatchObject(['1px solid red', ''])
+  await page().evaluate(() => (window as any).resolve()) // exposed by test
+  expect(await getColor()).toMatchObject(['1px solid red', '1px solid red'])
+
+  async function assertInteraction(el: string) {
+    const selector = `${el} >>> button`
+    expect(await text(selector)).toBe('1')
+    await click(selector)
+    expect(await text(selector)).toBe('2')
+  }
+
+  await assertInteraction('my-element')
+  await assertInteraction('my-element-async')
+})
+
+test('work with Teleport (shadowRoot: false)', async () => {
+  await setContent(
+    `<div id='test'></div><my-p><my-y><span>default</span></my-y></my-p>`,
+  )
+
+  await page().evaluate(() => {
+    const { h, defineSSRCustomElement, Teleport, renderSlot } = (window as any)
+      .Vue
+    const Y = defineSSRCustomElement(
+      {
+        render() {
+          return h(
+            Teleport,
+            { to: '#test' },
+            {
+              default: () => [renderSlot(this.$slots, 'default')],
+            },
+          )
+        },
+      },
+      { shadowRoot: false },
+    )
+    customElements.define('my-y', Y)
+    const P = defineSSRCustomElement(
+      {
+        render() {
+          return renderSlot(this.$slots, 'default')
+        },
+      },
+      { shadowRoot: false },
+    )
+    customElements.define('my-p', P)
+  })
+
+  function getInnerHTML() {
+    return page().evaluate(() => {
+      return (document.querySelector('#test') as any).innerHTML
+    })
+  }
+
+  expect(await getInnerHTML()).toBe('<span>default</span>')
+})
+
+// #11641
+test('pass key to custom element', async () => {
+  const messages: string[] = []
+  page().on('console', e => messages.push(e.text()))
+
+  await setContent(
+    `<!--[--><my-element str="1"><template shadowrootmode="open"><div>1</div></template></my-element><!--]-->`,
+  )
+  await page().evaluate(() => {
+    const {
+      h,
+      ref,
+      defineSSRCustomElement,
+      onBeforeUnmount,
+      onMounted,
+      createSSRApp,
+      renderList,
+    } = (window as any).Vue
+
+    const MyElement = defineSSRCustomElement({
+      props: {
+        str: String,
+      },
+      setup(props: any) {
+        onMounted(() => {
+          console.log('child mounted')
+        })
+        onBeforeUnmount(() => {
+          console.log('child unmount')
+        })
+        return () => h('div', props.str)
+      },
+    })
+    customElements.define('my-element', MyElement)
+
+    createSSRApp({
+      setup() {
+        const arr = ref(['1'])
+        // pass key to custom element
+        return () =>
+          renderList(arr.value, (i: string) =>
+            h('my-element', { key: i, str: i }, null),
+          )
+      },
+    }).mount('#app')
+  })
+
+  expect(messages.includes('child mounted')).toBe(true)
+  expect(messages.includes('child unmount')).toBe(false)
+  expect(await text('my-element >>> div')).toBe('1')
+})
diff --git a/packages/vue/__tests__/e2e/svg.spec.ts b/packages/vue/__tests__/e2e/svg.spec.ts
index 09b5be81a..37081e4c0 100644
--- a/packages/vue/__tests__/e2e/svg.spec.ts
+++ b/packages/vue/__tests__/e2e/svg.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 
 declare const globalStats: {
   label: string
@@ -9,7 +9,7 @@ declare const globalStats: {
 declare function valueToPoint(
   value: number,
   index: number,
-  total: number
+  total: number,
 ): {
   x: number
   y: number
@@ -33,8 +33,8 @@ describe('e2e: svg', () => {
             document.querySelector('polygon')!.attributes[0].value === points
           )
         },
-        [total]
-      )
+        [total],
+      ),
     ).toBe(true)
   }
 
@@ -47,12 +47,12 @@ describe('e2e: svg', () => {
           return [point.x, point.y]
         })
       },
-      [total]
+      [total],
     )
     for (let i = 0; i < total; i++) {
       const textPosition = await page().$eval(
         `text:nth-child(${i + 3})`,
-        node => [+node.attributes[0].value, +node.attributes[1].value]
+        node => [+node.attributes[0].value, +node.attributes[1].value],
       )
       expect(textPosition).toEqual(positions[i])
     }
@@ -73,7 +73,7 @@ describe('e2e: svg', () => {
   async function testSvg(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/svg.html`
+      `../../examples/${apiType}/svg.html`,
     )}`
 
     await page().goto(baseUrl)
@@ -144,7 +144,7 @@ describe('e2e: svg', () => {
     async () => {
       await testSvg('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -152,6 +152,6 @@ describe('e2e: svg', () => {
     async () => {
       await testSvg('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/todomvc.spec.ts b/packages/vue/__tests__/e2e/todomvc.spec.ts
index 668f9d333..bd3836282 100644
--- a/packages/vue/__tests__/e2e/todomvc.spec.ts
+++ b/packages/vue/__tests__/e2e/todomvc.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 
 describe('e2e: todomvc', () => {
   const {
@@ -13,7 +13,7 @@ describe('e2e: todomvc', () => {
     isFocused,
     classList,
     enterValue,
-    clearValue
+    clearValue,
   } = setupPuppeteer()
 
   async function removeItemAt(n: number) {
@@ -26,7 +26,7 @@ describe('e2e: todomvc', () => {
   async function testTodomvc(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/todomvc.html`
+      `../../examples/${apiType}/todomvc.html`,
     )}`
 
     await page().goto(baseUrl)
@@ -174,7 +174,7 @@ describe('e2e: todomvc', () => {
     async () => {
       await testTodomvc('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -182,6 +182,6 @@ describe('e2e: todomvc', () => {
     async () => {
       await testTodomvc('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/transition.html b/packages/vue/__tests__/e2e/transition.html
index 2a7942341..c44da2f78 100644
--- a/packages/vue/__tests__/e2e/transition.html
+++ b/packages/vue/__tests__/e2e/transition.html
@@ -10,9 +10,14 @@
     -webkit-transition: -webkit-transform 50ms ease;
     transition: transform 50ms ease;
   }
-  .v-appear, .v-enter, .v-leave-active,
-  .test-appear, .test-enter, .test-leave-active,
-  .hello, .bye.active,
+  .v-appear,
+  .v-enter,
+  .v-leave-active,
+  .test-appear,
+  .test-enter,
+  .test-leave-active,
+  .hello,
+  .bye.active,
   .changed-enter {
     opacity: 0;
   }
@@ -33,19 +38,35 @@
     -webkit-animation: test-leave 100ms;
   }
   @keyframes test-enter {
-    from { opacity: 0 }
-    to { opacity: 1 }
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
   @-webkit-keyframes test-enter {
-    from { opacity: 0 }
-    to { opacity: 1 }
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
   @keyframes test-leave {
-    from { opacity: 1 }
-    to { opacity: 0 }
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
   }
   @-webkit-keyframes test-leave {
-    from { opacity: 1 }
-    to { opacity: 0 }
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
   }
 </style>
diff --git a/packages/vue/__tests__/e2e/tree.spec.ts b/packages/vue/__tests__/e2e/tree.spec.ts
index 74a3df7b0..8c12537ae 100644
--- a/packages/vue/__tests__/e2e/tree.spec.ts
+++ b/packages/vue/__tests__/e2e/tree.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 
 describe('e2e: tree', () => {
   const { page, click, count, text, children, isVisible } = setupPuppeteer()
@@ -7,7 +7,7 @@ describe('e2e: tree', () => {
   async function testTree(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/tree.html`
+      `../../examples/${apiType}/tree.html`,
     )}`
 
     await page().goto(baseUrl)
@@ -23,57 +23,57 @@ describe('e2e: tree', () => {
     expect((await children('#demo li ul')).length).toBe(4)
     expect(await text('#demo li div span')).toContain('[-]')
     expect(await text('#demo > .item > ul > .item:nth-child(1)')).toContain(
-      'hello'
+      'hello',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(2)')).toContain(
-      'wat'
+      'wat',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      'child folder'
+      'child folder',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      '[+]'
+      '[+]',
     )
 
     // add items to root
     await click('#demo > .item > ul > .add')
     expect((await children('#demo li ul')).length).toBe(5)
     expect(await text('#demo > .item > ul > .item:nth-child(1)')).toContain(
-      'hello'
+      'hello',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(2)')).toContain(
-      'wat'
+      'wat',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      'child folder'
+      'child folder',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      '[+]'
+      '[+]',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(4)')).toContain(
-      'new stuff'
+      'new stuff',
     )
 
     // add another item
     await click('#demo > .item > ul > .add')
     expect((await children('#demo li ul')).length).toBe(6)
     expect(await text('#demo > .item > ul > .item:nth-child(1)')).toContain(
-      'hello'
+      'hello',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(2)')).toContain(
-      'wat'
+      'wat',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      'child folder'
+      'child folder',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      '[+]'
+      '[+]',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(4)')).toContain(
-      'new stuff'
+      'new stuff',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(5)')).toContain(
-      'new stuff'
+      'new stuff',
     )
 
     await click('#demo ul .bold')
@@ -93,7 +93,7 @@ describe('e2e: tree', () => {
     expect(await count('.item > ul')).toBe(5)
     expect(await text('#demo ul > .item:nth-child(1)')).toContain('[-]')
     expect((await children('#demo ul > .item:nth-child(1) > ul')).length).toBe(
-      2
+      2,
     )
   }
 
@@ -102,7 +102,7 @@ describe('e2e: tree', () => {
     async () => {
       await testTree('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -110,6 +110,6 @@ describe('e2e: tree', () => {
     async () => {
       await testTree('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/trusted-types.html b/packages/vue/__tests__/e2e/trusted-types.html
new file mode 100644
index 000000000..181dd0465
--- /dev/null
+++ b/packages/vue/__tests__/e2e/trusted-types.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+    <meta
+      http-equiv="content-security-policy"
+      content="require-trusted-types-for 'script'"
+    />
+    <title>Vue App</title>
+    <script src="../../dist/vue.global.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/packages/vue/__tests__/e2e/trusted-types.spec.ts b/packages/vue/__tests__/e2e/trusted-types.spec.ts
new file mode 100644
index 000000000..927f59492
--- /dev/null
+++ b/packages/vue/__tests__/e2e/trusted-types.spec.ts
@@ -0,0 +1,103 @@
+import { once } from 'node:events'
+import { createServer } from 'node:http'
+import path from 'node:path'
+import { beforeAll } from 'vitest'
+import serveHandler from 'serve-handler'
+
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
+
+// use the `vue` package root as the public directory
+// because we need to serve the Vue runtime for the tests
+const serverRoot = path.resolve(import.meta.dirname, '../../')
+const testPort = 9090
+const basePath = path.relative(
+  serverRoot,
+  path.resolve(import.meta.dirname, './trusted-types.html'),
+)
+const baseUrl = `http://localhost:${testPort}/${basePath}`
+
+const { page, html } = setupPuppeteer()
+
+let server: ReturnType<typeof createServer>
+beforeAll(async () => {
+  // sets up the static server
+  server = createServer((req, res) => {
+    return serveHandler(req, res, {
+      public: serverRoot,
+      cleanUrls: false,
+    })
+  })
+
+  server.listen(testPort)
+  await once(server, 'listening')
+})
+
+afterAll(async () => {
+  server.close()
+  await once(server, 'close')
+})
+
+describe('e2e: trusted types', () => {
+  beforeEach(async () => {
+    await page().goto(baseUrl)
+    await page().waitForSelector('#app')
+  })
+
+  test(
+    'should render the hello world app',
+    async () => {
+      await page().evaluate(() => {
+        const { createApp, ref, h } = (window as any).Vue
+        createApp({
+          setup() {
+            const msg = ref('✅success: hello world')
+            return function render() {
+              return h('div', msg.value)
+            }
+          },
+        }).mount('#app')
+      })
+      expect(await html('#app')).toContain('<div>✅success: hello world</div>')
+    },
+    E2E_TIMEOUT,
+  )
+
+  test(
+    'should render static vnode without error',
+    async () => {
+      await page().evaluate(() => {
+        const { createApp, createStaticVNode } = (window as any).Vue
+        createApp({
+          render() {
+            return createStaticVNode('<div>✅success: static vnode</div>')
+          },
+        }).mount('#app')
+      })
+      expect(await html('#app')).toContain('<div>✅success: static vnode</div>')
+    },
+    E2E_TIMEOUT,
+  )
+
+  test(
+    'should accept v-html with custom policy',
+    async () => {
+      await page().evaluate(() => {
+        const testPolicy = (window as any).trustedTypes.createPolicy('test', {
+          createHTML: (input: string): string => input,
+        })
+
+        const { createApp, ref, h } = (window as any).Vue
+        createApp({
+          setup() {
+            const msg = ref('✅success: v-html')
+            return function render() {
+              return h('div', { innerHTML: testPolicy.createHTML(msg.value) })
+            }
+          },
+        }).mount('#app')
+      })
+      expect(await html('#app')).toContain('<div>✅success: v-html</div>')
+    },
+    E2E_TIMEOUT,
+  )
+})
diff --git a/packages/vue/__tests__/index.spec.ts b/packages/vue/__tests__/index.spec.ts
index d547627de..0c969f159 100644
--- a/packages/vue/__tests__/index.spec.ts
+++ b/packages/vue/__tests__/index.spec.ts
@@ -1,5 +1,5 @@
 import { EMPTY_ARR } from '@vue/shared'
-import { createApp, ref, nextTick, reactive } from '../src'
+import { createApp, nextTick, reactive, ref } from '../src'
 
 describe('compiler + runtime integration', () => {
   it('should support runtime template compilation', () => {
@@ -8,9 +8,9 @@ describe('compiler + runtime integration', () => {
       template: `{{ count }}`,
       data() {
         return {
-          count: 0
+          count: 0,
         }
-      }
+      },
     }
     createApp(App).mount(container)
     expect(container.innerHTML).toBe(`0`)
@@ -25,7 +25,7 @@ describe('compiler + runtime integration', () => {
       mounted: vi.fn(),
       activated: vi.fn(),
       deactivated: vi.fn(),
-      unmounted: vi.fn()
+      unmounted: vi.fn(),
     }
 
     const toggle = ref(true)
@@ -38,12 +38,12 @@ describe('compiler + runtime integration', () => {
       `,
       data() {
         return {
-          toggle
+          toggle,
         }
       },
       components: {
-        One: one
-      }
+        One: one,
+      },
     }
     createApp(App).mount(container)
     expect(container.innerHTML).toBe(`one`)
@@ -83,9 +83,9 @@ describe('compiler + runtime integration', () => {
       template: `#template`,
       data() {
         return {
-          count: 0
+          count: 0,
         }
-      }
+      },
     }
     createApp(App).mount(container)
     expect(container.innerHTML).toBe(`0`)
@@ -101,9 +101,9 @@ describe('compiler + runtime integration', () => {
       template,
       data() {
         return {
-          count: 0
+          count: 0,
         }
-      }
+      },
     }
     createApp(App).mount(container)
     expect(container.innerHTML).toBe(`0`)
@@ -112,28 +112,28 @@ describe('compiler + runtime integration', () => {
   it('should warn template compilation errors with codeframe', () => {
     const container = document.createElement('div')
     const App = {
-      template: `<div v-if>`
+      template: `<div v-if>`,
     }
     createApp(App).mount(container)
     expect(
-      `Template compilation error: Element is missing end tag`
+      `Template compilation error: Element is missing end tag`,
     ).toHaveBeenWarned()
     expect(
       `
 1  |  <div v-if>
-   |  ^`.trim()
+   |  ^`.trim(),
     ).toHaveBeenWarned()
     expect(`v-if/v-else-if is missing expression`).toHaveBeenWarned()
     expect(
       `
 1  |  <div v-if>
-   |       ^^^^`.trim()
+   |       ^^^^`.trim(),
     ).toHaveBeenWarned()
   })
 
   it('should support custom element via config.isCustomElement (deprecated)', () => {
     const app = createApp({
-      template: '<custom></custom>'
+      template: '<custom></custom>',
     })
     const container = document.createElement('div')
     app.config.isCustomElement = tag => tag === 'custom'
@@ -143,7 +143,7 @@ describe('compiler + runtime integration', () => {
 
   it('should support custom element via config.compilerOptions.isCustomElement', () => {
     const app = createApp({
-      template: '<custom></custom>'
+      template: '<custom></custom>',
     })
     const container = document.createElement('div')
     app.config.compilerOptions.isCustomElement = tag => tag === 'custom'
@@ -154,8 +154,8 @@ describe('compiler + runtime integration', () => {
   it('should support using element innerHTML as template', () => {
     const app = createApp({
       data: () => ({
-        msg: 'hello'
-      })
+        msg: 'hello',
+      }),
     })
     const container = document.createElement('div')
     container.innerHTML = '{{msg}}'
@@ -172,9 +172,9 @@ describe('compiler + runtime integration', () => {
       template: `{{ count }}`,
       data() {
         return {
-          count: 0
+          count: 0,
         }
-      }
+      },
     }
     createApp(App).mount('#app')
     expect(container.innerHTML).toBe(`0`)
@@ -183,7 +183,7 @@ describe('compiler + runtime integration', () => {
 
   it('should warn when template is not available', () => {
     const app = createApp({
-      template: {}
+      template: {},
     })
     const container = document.createElement('div')
     app.mount(container)
@@ -192,12 +192,12 @@ describe('compiler + runtime integration', () => {
 
   it('should warn when template is is not found', () => {
     const app = createApp({
-      template: '#not-exist-id'
+      template: '#not-exist-id',
     })
     const container = document.createElement('div')
     app.mount(container)
     expect(
-      '[Vue warn]: Template element not found or is empty: #not-exist-id'
+      '[Vue warn]: Template element not found or is empty: #not-exist-id',
     ).toHaveBeenWarned()
   })
 
@@ -208,14 +208,14 @@ describe('compiler + runtime integration', () => {
       template: `{{ count }}`,
       data() {
         return {
-          count: 0
+          count: 0,
         }
-      }
+      },
     }
     createApp(App).mount('#not-exist-id')
 
     expect(
-      '[Vue warn]: Failed to mount app: mount target selector "#not-exist-id" returned null.'
+      '[Vue warn]: Failed to mount app: mount target selector "#not-exist-id" returned null.',
     ).toHaveBeenWarned()
     document.querySelector = origin
   })
@@ -238,9 +238,9 @@ describe('compiler + runtime integration', () => {
       `,
       data() {
         return {
-          count
+          count,
         }
-      }
+      },
     }
     createApp(App).mount(container)
     expect(container.innerHTML).toBe(`<!--teleport start--><!--teleport end-->`)
@@ -265,7 +265,7 @@ describe('compiler + runtime integration', () => {
       setup() {
         return { ok }
       },
-      template: `<div>{{ ok }}<div v-if="ok" v-once>{{ ok }}</div></div>`
+      template: `<div>{{ ok }}<div v-if="ok" v-once>{{ ok }}</div></div>`,
     }
     const container = document.createElement('div')
     createApp(App).mount(container)
@@ -282,7 +282,7 @@ describe('compiler + runtime integration', () => {
       setup() {
         return { list }
       },
-      template: `<div>{{ list.length }}<div v-for="i in list" v-once>{{ i }}</div></div>`
+      template: `<div>{{ list.length }}<div v-for="i in list" v-once>{{ i }}</div></div>`,
     }
     const container = document.createElement('div')
     createApp(App).mount(container)
@@ -296,7 +296,7 @@ describe('compiler + runtime integration', () => {
   // #2413
   it('EMPTY_ARR should not change', () => {
     const App = {
-      template: `<div v-for="v of ['a']">{{ v }}</div>`
+      template: `<div v-for="v of ['a']">{{ v }}</div>`,
     }
     const container = document.createElement('div')
     createApp(App).mount(container)
@@ -305,7 +305,7 @@ describe('compiler + runtime integration', () => {
 
   test('BigInt support', () => {
     const app = createApp({
-      template: `<div>{{ BigInt(BigInt(100000111)) + BigInt(2000000000n) * 30000000n }}</div>`
+      template: `<div>{{ BigInt(BigInt(100000111)) + BigInt(2000000000n) * 30000000n }}</div>`,
     })
     const root = document.createElement('div')
     app.mount(root)
diff --git a/packages/vue/__tests__/mathmlNamespace.spec.ts b/packages/vue/__tests__/mathmlNamespace.spec.ts
new file mode 100644
index 000000000..c3f8ab7ab
--- /dev/null
+++ b/packages/vue/__tests__/mathmlNamespace.spec.ts
@@ -0,0 +1,80 @@
+// MathML logic is technically dom-specific, but the logic is placed in core
+// because splitting it out of core would lead to unnecessary complexity in both
+// the renderer and compiler implementations.
+// Related files:
+// - runtime-core/src/renderer.ts
+// - compiler-core/src/transforms/transformElement.ts
+
+import { vtcKey } from '../../runtime-dom/src/components/Transition'
+import { h, nextTick, ref, render } from '../src'
+
+describe('MathML support', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('should mount elements with correct html namespace', () => {
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    const App = {
+      template: `
+      <math display="block" id="e0">
+        <semantics id="e1">
+          <mrow id="e2">
+            <msup>
+              <mi>x</mi>
+              <mn>2</mn>
+            </msup>
+            <mo>+</mo>
+            <mi>y</mi>
+          </mrow>
+
+          <annotation-xml encoding="text/html" id="e3">
+            <div id="e4" />
+            <svg id="e5" />
+          </annotation-xml>
+        </semantics>
+      </math>
+      `,
+    }
+    render(h(App), root)
+    const e0 = document.getElementById('e0')!
+    expect(e0.namespaceURI).toMatch('Math')
+    expect(e0.querySelector('#e1')!.namespaceURI).toMatch('Math')
+    expect(e0.querySelector('#e2')!.namespaceURI).toMatch('Math')
+    expect(e0.querySelector('#e3')!.namespaceURI).toMatch('Math')
+    expect(e0.querySelector('#e4')!.namespaceURI).toMatch('xhtml')
+    expect(e0.querySelector('#e5')!.namespaceURI).toMatch('svg')
+  })
+
+  test('should patch elements with correct namespaces', async () => {
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    const cls = ref('foo')
+    const App = {
+      setup: () => ({ cls }),
+      template: `
+        <div>
+          <math id="f1" :class="cls">
+            <annotation encoding="text/html">
+              <div id="f2" :class="cls"/>
+            </annotation>
+          </math>
+        </div>
+      `,
+    }
+    render(h(App), root)
+    const f1 = document.querySelector('#f1')!
+    const f2 = document.querySelector('#f2')!
+    expect(f1.getAttribute('class')).toBe('foo')
+    expect(f2.className).toBe('foo')
+
+    // set a transition class on the <div> - which is only respected on non-svg
+    // patches
+    ;(f2 as any)[vtcKey] = ['baz']
+    cls.value = 'bar'
+    await nextTick()
+    expect(f1.getAttribute('class')).toBe('bar')
+    expect(f2.className).toBe('bar baz')
+  })
+})
diff --git a/packages/vue/__tests__/runtimeCompilerOptions.spec.ts b/packages/vue/__tests__/runtimeCompilerOptions.spec.ts
index 3222462fe..b144be448 100644
--- a/packages/vue/__tests__/runtimeCompilerOptions.spec.ts
+++ b/packages/vue/__tests__/runtimeCompilerOptions.spec.ts
@@ -3,7 +3,7 @@ import { createApp } from 'vue'
 describe('config.compilerOptions', () => {
   test('isCustomElement', () => {
     const app = createApp({
-      template: `<foo/>`
+      template: `<foo/>`,
     })
     app.config.compilerOptions.isCustomElement = (tag: string) => tag === 'foo'
     const root = document.createElement('div')
@@ -13,7 +13,7 @@ describe('config.compilerOptions', () => {
 
   test('comments', () => {
     const app = createApp({
-      template: `<div/><!--test--><div/>`
+      template: `<div/><!--test--><div/>`,
     })
     app.config.compilerOptions.comments = true
     // the comments option is only relevant in production mode
@@ -26,7 +26,7 @@ describe('config.compilerOptions', () => {
 
   test('whitespace', () => {
     const app = createApp({
-      template: `<div><span/>\n  <span/></div>`
+      template: `<div><span/>\n  <span/></div>`,
     })
     app.config.compilerOptions.whitespace = 'preserve'
     const root = document.createElement('div')
@@ -38,7 +38,7 @@ describe('config.compilerOptions', () => {
   test('delimiters', () => {
     const app = createApp({
       data: () => ({ foo: 'hi' }),
-      template: `[[ foo ]]`
+      template: `[[ foo ]]`,
     })
     app.config.compilerOptions.delimiters = [`[[`, `]]`]
     const root = document.createElement('div')
@@ -52,8 +52,8 @@ describe('per-component compilerOptions', () => {
     const app = createApp({
       template: `<foo/>`,
       compilerOptions: {
-        isCustomElement: (tag: string) => tag === 'foo'
-      }
+        isCustomElement: (tag: string) => tag === 'foo',
+      },
     })
     const root = document.createElement('div')
     app.mount(root)
@@ -64,8 +64,8 @@ describe('per-component compilerOptions', () => {
     const app = createApp({
       template: `<div/><!--test--><div/>`,
       compilerOptions: {
-        comments: true
-      }
+        comments: true,
+      },
     })
     app.config.compilerOptions.comments = false
     // the comments option is only relevant in production mode
@@ -80,8 +80,8 @@ describe('per-component compilerOptions', () => {
     const app = createApp({
       template: `<div><span/>\n  <span/></div>`,
       compilerOptions: {
-        whitespace: 'preserve'
-      }
+        whitespace: 'preserve',
+      },
     })
     const root = document.createElement('div')
     app.mount(root)
@@ -94,8 +94,8 @@ describe('per-component compilerOptions', () => {
       data: () => ({ foo: 'hi' }),
       template: `[[ foo ]]`,
       compilerOptions: {
-        delimiters: [`[[`, `]]`]
-      }
+        delimiters: [`[[`, `]]`],
+      },
     })
     const root = document.createElement('div')
     app.mount(root)
diff --git a/packages/vue/__tests__/svgNamespace.spec.ts b/packages/vue/__tests__/svgNamespace.spec.ts
index e944e7d86..978f9bbb1 100644
--- a/packages/vue/__tests__/svgNamespace.spec.ts
+++ b/packages/vue/__tests__/svgNamespace.spec.ts
@@ -6,10 +6,14 @@
 // - compiler-core/src/transforms/transformElement.ts
 
 import { vtcKey } from '../../runtime-dom/src/components/Transition'
-import { render, h, ref, nextTick } from '../src'
+import { h, nextTick, ref, render } from '../src'
 
 describe('SVG support', () => {
-  test('should mount elements with correct namespaces', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('should mount elements with correct html namespace', () => {
     const root = document.createElement('div')
     document.body.appendChild(root)
     const App = {
@@ -18,10 +22,12 @@ describe('SVG support', () => {
           <svg id="e1">
             <foreignObject id="e2">
               <div id="e3"/>
+              <svg id="e4"/>
+              <math id="e5"/>
             </foreignObject>
           </svg>
         </div>
-      `
+      `,
     }
     render(h(App), root)
     const e0 = document.getElementById('e0')!
@@ -29,6 +35,8 @@ describe('SVG support', () => {
     expect(e0.querySelector('#e1')!.namespaceURI).toMatch('svg')
     expect(e0.querySelector('#e2')!.namespaceURI).toMatch('svg')
     expect(e0.querySelector('#e3')!.namespaceURI).toMatch('xhtml')
+    expect(e0.querySelector('#e4')!.namespaceURI).toMatch('svg')
+    expect(e0.querySelector('#e5')!.namespaceURI).toMatch('Math')
   })
 
   test('should patch elements with correct namespaces', async () => {
@@ -45,7 +53,7 @@ describe('SVG support', () => {
             </foreignObject>
           </svg>
         </div>
-      `
+      `,
     }
     render(h(App), root)
     const f1 = document.querySelector('#f1')!
diff --git a/packages/vue/examples/classic/commits.html b/packages/vue/examples/classic/commits.html
index 811f0edc2..601f49544 100644
--- a/packages/vue/examples/classic/commits.html
+++ b/packages/vue/examples/classic/commits.html
@@ -3,59 +3,68 @@
 <div id="demo">
   <h1>Latest Vue.js Commits</h1>
   <template v-for="branch in branches">
-    <input type="radio"
+    <input
+      type="radio"
       :id="branch"
       :value="branch"
       name="branch"
-      v-model="currentBranch">
+      v-model="currentBranch"
+    />
     <label :for="branch">{{ branch }}</label>
   </template>
   <p>vuejs/core@{{ currentBranch }}</p>
   <ul>
     <li v-for="{ html_url, sha, author, commit } in commits">
-      <a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
-      - <span class="message">{{ truncate(commit.message) }}</span><br>
-      by <span class="author"><a :href="author.html_url" target="_blank">{{ commit.author.name }}</a></span>
+      <a :href="html_url" target="_blank" class="commit"
+        >{{ sha.slice(0, 7) }}</a
+      >
+      - <span class="message">{{ truncate(commit.message) }}</span><br />
+      by
+      <span class="author"
+        ><a :href="author.html_url" target="_blank"
+          >{{ commit.author.name }}</a
+        ></span
+      >
       at <span class="date">{{ formatDate(commit.author.date) }}</span>
     </li>
   </ul>
 </div>
 
 <script>
-const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`
+  const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`
 
-Vue.createApp({
-  data: () => ({
-    branches: ['main', 'v2-compat'],
-    currentBranch: 'main',
-    commits: null
-  }),
+  Vue.createApp({
+    data: () => ({
+      branches: ['main', 'v2-compat'],
+      currentBranch: 'main',
+      commits: null,
+    }),
 
-  created() {
-    this.fetchData()
-  },
-
-  watch: {
-    currentBranch: 'fetchData'
-  },
-
-  methods: {
-    fetchData() {
-      fetch(`${API_URL}${this.currentBranch}`)
-        .then(res => res.json())
-        .then(data => {
-          this.commits = data
-        })
+    created() {
+      this.fetchData()
     },
-    truncate(v) {
-      const newline = v.indexOf('\n')
-      return newline > 0 ? v.slice(0, newline) : v
+
+    watch: {
+      currentBranch: 'fetchData',
     },
-    formatDate(v) {
-      return v.replace(/T|Z/g, ' ')
-    }
-  }
-}).mount('#demo')
+
+    methods: {
+      fetchData() {
+        fetch(`${API_URL}${this.currentBranch}`)
+          .then(res => res.json())
+          .then(data => {
+            this.commits = data
+          })
+      },
+      truncate(v) {
+        const newline = v.indexOf('\n')
+        return newline > 0 ? v.slice(0, newline) : v
+      },
+      formatDate(v) {
+        return v.replace(/T|Z/g, ' ')
+      },
+    },
+  }).mount('#demo')
 </script>
 
 <style>
@@ -70,7 +79,8 @@ Vue.createApp({
     line-height: 1.5em;
     margin-bottom: 20px;
   }
-  .author, .date {
+  .author,
+  .date {
     font-weight: bold;
   }
 </style>
diff --git a/packages/vue/examples/classic/grid.html b/packages/vue/examples/classic/grid.html
index 39fbc9208..60272b9ac 100644
--- a/packages/vue/examples/classic/grid.html
+++ b/packages/vue/examples/classic/grid.html
@@ -26,142 +26,141 @@
 </script>
 <!-- DemoGrid component script -->
 <script>
-const DemoGrid = {
-  template: '#grid-template',
-  props: {
-    data: Array,
-    columns: Array,
-    filterKey: String
-  },
-  data() {
-    return {
-      sortKey: '',
-      sortOrders: this.columns.reduce((o, key) => (o[key] = 1, o), {})
-    }
-  },
-  computed: {
-    filteredData() {
-      const sortKey = this.sortKey
-      const filterKey = this.filterKey && this.filterKey.toLowerCase()
-      const order = this.sortOrders[sortKey] || 1
-      let data = this.data
-      if (filterKey) {
-        data = data.filter(row => {
-          return Object.keys(row).some(key => {
-            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
-          })
-        })
-      }
-      if (sortKey) {
-        data = data.slice().sort((a, b) => {
-          a = a[sortKey]
-          b = b[sortKey]
-          return (a === b ? 0 : a > b ? 1 : -1) * order
-        })
-      }
-      return data
-    }
-  },
-  methods: {
-    sortBy(key) {
-      this.sortKey = key
-      this.sortOrders[key] = this.sortOrders[key] * -1
+  const DemoGrid = {
+    template: '#grid-template',
+    props: {
+      data: Array,
+      columns: Array,
+      filterKey: String,
+    },
+    data() {
+      return {
+        sortKey: '',
+        sortOrders: this.columns.reduce((o, key) => ((o[key] = 1), o), {}),
+      }
+    },
+    computed: {
+      filteredData() {
+        const sortKey = this.sortKey
+        const filterKey = this.filterKey && this.filterKey.toLowerCase()
+        const order = this.sortOrders[sortKey] || 1
+        let data = this.data
+        if (filterKey) {
+          data = data.filter(row => {
+            return Object.keys(row).some(key => {
+              return String(row[key]).toLowerCase().indexOf(filterKey) > -1
+            })
+          })
+        }
+        if (sortKey) {
+          data = data.slice().sort((a, b) => {
+            a = a[sortKey]
+            b = b[sortKey]
+            return (a === b ? 0 : a > b ? 1 : -1) * order
+          })
+        }
+        return data
+      },
+    },
+    methods: {
+      sortBy(key) {
+        this.sortKey = key
+        this.sortOrders[key] = this.sortOrders[key] * -1
+      },
+      capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1)
+      },
     },
-    capitalize(str) {
-      return str.charAt(0).toUpperCase() + str.slice(1)
-    }
   }
-}
 </script>
 
 <!-- App template (in DOM) -->
 <div id="demo">
-  <form id="search">
-    Search <input name="query" v-model="searchQuery">
-  </form>
-  <demo-grid
-    :data="gridData"
-    :columns="gridColumns"
-    :filter-key="searchQuery">
+  <form id="search">Search <input name="query" v-model="searchQuery" /></form>
+  <demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
   </demo-grid>
 </div>
 <!-- App script -->
 <script>
-Vue.createApp({
-  components: {
-    DemoGrid
-  },
-  data: () => ({
-    searchQuery: '',
-    gridColumns: ['name', 'power'],
-    gridData: [
-      { name: 'Chuck Norris', power: Infinity },
-      { name: 'Bruce Lee', power: 9000 },
-      { name: 'Jackie Chan', power: 7000 },
-      { name: 'Jet Li', power: 8000 }
-    ]
-  })
-}).mount('#demo')
+  Vue.createApp({
+    components: {
+      DemoGrid,
+    },
+    data: () => ({
+      searchQuery: '',
+      gridColumns: ['name', 'power'],
+      gridData: [
+        { name: 'Chuck Norris', power: Infinity },
+        { name: 'Bruce Lee', power: 9000 },
+        { name: 'Jackie Chan', power: 7000 },
+        { name: 'Jet Li', power: 8000 },
+      ],
+    }),
+  }).mount('#demo')
 </script>
 
 <style>
-body {
-  font-family: Helvetica Neue, Arial, sans-serif;
-  font-size: 14px;
-  color: #444;
-}
+  body {
+    font-family:
+      Helvetica Neue,
+      Arial,
+      sans-serif;
+    font-size: 14px;
+    color: #444;
+  }
 
-table {
-  border: 2px solid #42b983;
-  border-radius: 3px;
-  background-color: #fff;
-}
+  table {
+    border: 2px solid #42b983;
+    border-radius: 3px;
+    background-color: #fff;
+  }
 
-th {
-  background-color: #42b983;
-  color: rgba(255,255,255,0.66);
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
+  th {
+    background-color: #42b983;
+    color: rgba(255, 255, 255, 0.66);
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
 
-td {
-  background-color: #f9f9f9;
-}
+  td {
+    background-color: #f9f9f9;
+  }
 
-th, td {
-  min-width: 120px;
-  padding: 10px 20px;
-}
+  th,
+  td {
+    min-width: 120px;
+    padding: 10px 20px;
+  }
 
-th.active {
-  color: #fff;
-}
+  th.active {
+    color: #fff;
+  }
 
-th.active .arrow {
-  opacity: 1;
-}
+  th.active .arrow {
+    opacity: 1;
+  }
 
-.arrow {
-  display: inline-block;
-  vertical-align: middle;
-  width: 0;
-  height: 0;
-  margin-left: 5px;
-  opacity: 0.66;
-}
+  .arrow {
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    height: 0;
+    margin-left: 5px;
+    opacity: 0.66;
+  }
 
-.arrow.asc {
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-bottom: 4px solid #fff;
-}
+  .arrow.asc {
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-bottom: 4px solid #fff;
+  }
 
-.arrow.dsc {
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid #fff;
-}
+  .arrow.dsc {
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid #fff;
+  }
 </style>
diff --git a/packages/vue/examples/classic/markdown.html b/packages/vue/examples/classic/markdown.html
index f70a75d69..a51f4c6ca 100644
--- a/packages/vue/examples/classic/markdown.html
+++ b/packages/vue/examples/classic/markdown.html
@@ -8,55 +8,58 @@
 </div>
 
 <script>
-Vue.createApp({
-  data: () => ({
-    input: '# hello'
-  }),
-  computed: {
-    compiledMarkdown() {
-      return marked.marked(this.input, { sanitize: true })
-    }
-  },
-  methods: {
-    update: _.debounce(function (e) {
-      this.input = e.target.value
-    }, 50)
-  }
-}).mount('#editor')
+  Vue.createApp({
+    data: () => ({
+      input: '# hello',
+    }),
+    computed: {
+      compiledMarkdown() {
+        return marked.marked(this.input, { sanitize: true })
+      },
+    },
+    methods: {
+      update: _.debounce(function (e) {
+        this.input = e.target.value
+      }, 50),
+    },
+  }).mount('#editor')
 </script>
 
 <style>
-html, body, #editor {
-  margin: 0;
-  height: 100%;
-  font-family: 'Helvetica Neue', Arial, sans-serif;
-  color: #333;
-}
+  html,
+  body,
+  #editor {
+    margin: 0;
+    height: 100%;
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    color: #333;
+  }
 
-textarea, #editor div {
-  display: inline-block;
-  overflow: auto;
-  width: 50%;
-  height: 100%;
-  vertical-align: top;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 0 20px;
-}
+  textarea,
+  #editor div {
+    display: inline-block;
+    overflow: auto;
+    width: 50%;
+    height: 100%;
+    vertical-align: top;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
 
-textarea {
-  border: none;
-  border-right: 1px solid #ccc;
-  resize: none;
-  outline: none;
-  background-color: #f6f6f6;
-  font-size: 14px;
-  font-family: 'Monaco', courier, monospace;
-  padding: 20px;
-}
+  textarea {
+    border: none;
+    border-right: 1px solid #ccc;
+    resize: none;
+    outline: none;
+    background-color: #f6f6f6;
+    font-size: 14px;
+    font-family: 'Monaco', courier, monospace;
+    padding: 20px;
+  }
 
-code {
-  color: #f66;
-}
+  code {
+    color: #f66;
+  }
 </style>
diff --git a/packages/vue/examples/classic/svg.html b/packages/vue/examples/classic/svg.html
index f2a1c19bf..a0e25075e 100644
--- a/packages/vue/examples/classic/svg.html
+++ b/packages/vue/examples/classic/svg.html
@@ -1,37 +1,33 @@
 <script src="../../dist/vue.global.js"></script>
 <script>
-// math helper...
-function valueToPoint (value, index, total) {
-  var x     = 0
-  var y     = -value * 0.8
-  var angle = Math.PI * 2 / total * index
-  var cos   = Math.cos(angle)
-  var sin   = Math.sin(angle)
-  var tx    = x * cos - y * sin + 100
-  var ty    = x * sin + y * cos + 100
-  return {
-    x: tx,
-    y: ty
-  }
-}
-
-const AxisLabel = {
-  template: '<text :x="point.x" :y="point.y">{{stat.label}}</text>',
-  props: {
-    stat: Object,
-    index: Number,
-    total: Number
-  },
-  computed: {
-    point: function () {
-      return valueToPoint(
-        +this.stat.value + 10,
-        this.index,
-        this.total
-      )
+  // math helper...
+  function valueToPoint(value, index, total) {
+    var x = 0
+    var y = -value * 0.8
+    var angle = ((Math.PI * 2) / total) * index
+    var cos = Math.cos(angle)
+    var sin = Math.sin(angle)
+    var tx = x * cos - y * sin + 100
+    var ty = x * sin + y * cos + 100
+    return {
+      x: tx,
+      y: ty,
     }
   }
-}
+
+  const AxisLabel = {
+    template: '<text :x="point.x" :y="point.y">{{stat.label}}</text>',
+    props: {
+      stat: Object,
+      index: Number,
+      total: Number,
+    },
+    computed: {
+      point: function () {
+        return valueToPoint(+this.stat.value + 10, this.index, this.total)
+      },
+    },
+  }
 </script>
 
 <!-- template for the polygraph component. -->
@@ -49,23 +45,25 @@ const AxisLabel = {
 </script>
 
 <script>
-const Polygraph = {
-  props: ['stats'],
-  template: '#polygraph-template',
-  computed: {
-    // a computed property for the polygon's points
-    points() {
-      const total = this.stats.length
-      return this.stats.map((stat, i) => {
-        const point = valueToPoint(stat.value, i, total)
-        return point.x + ',' + point.y
-      }).join(' ')
-    }
-  },
-  components: {
-    AxisLabel
+  const Polygraph = {
+    props: ['stats'],
+    template: '#polygraph-template',
+    computed: {
+      // a computed property for the polygon's points
+      points() {
+        const total = this.stats.length
+        return this.stats
+          .map((stat, i) => {
+            const point = valueToPoint(stat.value, i, total)
+            return point.x + ',' + point.y
+          })
+          .join(' ')
+      },
+    },
+    components: {
+      AxisLabel,
+    },
   }
-}
 </script>
 
 <!-- demo root element -->
@@ -77,86 +75,92 @@ const Polygraph = {
   <!-- controls -->
   <div v-for="stat in stats">
     <label>{{stat.label}}</label>
-    <input type="range" v-model="stat.value" min="0" max="100">
+    <input type="range" v-model="stat.value" min="0" max="100" />
     <span>{{stat.value}}</span>
     <button @click="remove(stat)" class="remove">X</button>
   </div>
   <form id="add">
-    <input name="newlabel" v-model="newLabel">
+    <input name="newlabel" v-model="newLabel" />
     <button @click="add">Add a Stat</button>
   </form>
   <pre id="raw">{{ stats }}</pre>
 </div>
 
 <script>
-const globalStats = [
-  { label: 'A', value: 100 },
-  { label: 'B', value: 100 },
-  { label: 'C', value: 100 },
-  { label: 'D', value: 100 },
-  { label: 'E', value: 100 },
-  { label: 'F', value: 100 }
-]
+  const globalStats = [
+    { label: 'A', value: 100 },
+    { label: 'B', value: 100 },
+    { label: 'C', value: 100 },
+    { label: 'D', value: 100 },
+    { label: 'E', value: 100 },
+    { label: 'F', value: 100 },
+  ]
 
-Vue.createApp({
-  components: {
-    Polygraph
-  },
-  data: () => ({
-    newLabel: '',
-    stats: globalStats
-  }),
-  methods: {
-    add(e) {
-      e.preventDefault()
-      if (!this.newLabel) return
-      this.stats.push({
-        label: this.newLabel,
-        value: 100
-      })
-      this.newLabel = ''
+  Vue.createApp({
+    components: {
+      Polygraph,
     },
-    remove(stat) {
-      if (this.stats.length > 3) {
-        this.stats.splice(this.stats.indexOf(stat), 1)
-      } else {
-        alert('Can\'t delete more!')
-      }
-    }
-  }
-}).mount('#demo')
+    data: () => ({
+      newLabel: '',
+      stats: globalStats,
+    }),
+    methods: {
+      add(e) {
+        e.preventDefault()
+        if (!this.newLabel) return
+        this.stats.push({
+          label: this.newLabel,
+          value: 100,
+        })
+        this.newLabel = ''
+      },
+      remove(stat) {
+        if (this.stats.length > 3) {
+          this.stats.splice(this.stats.indexOf(stat), 1)
+        } else {
+          alert("Can't delete more!")
+        }
+      },
+    },
+  }).mount('#demo')
 </script>
 
 <style>
-body {
-    font-family: Helvetica Neue, Arial, sans-serif;
-}
+  body {
+    font-family:
+      Helvetica Neue,
+      Arial,
+      sans-serif;
+  }
 
-polygon {
+  polygon {
     fill: #42b983;
-    opacity: .75;
-}
+    opacity: 0.75;
+  }
 
-circle {
+  circle {
     fill: transparent;
     stroke: #999;
-}
+  }
 
-text {
-    font-family: Helvetica Neue, Arial, sans-serif;
+  text {
+    font-family:
+      Helvetica Neue,
+      Arial,
+      sans-serif;
     font-size: 10px;
     fill: #666;
-}
+  }
 
-label {
+  label {
     display: inline-block;
     margin-left: 10px;
     width: 20px;
-}
+  }
 
-#raw {
+  #raw {
     position: absolute;
     top: 0;
     left: 300px;
-}
+  }
 </style>
diff --git a/packages/vue/examples/classic/todomvc.html b/packages/vue/examples/classic/todomvc.html
index 7a53a598f..56a4932ec 100644
--- a/packages/vue/examples/classic/todomvc.html
+++ b/packages/vue/examples/classic/todomvc.html
@@ -1,49 +1,81 @@
 <script src="../../dist/vue.global.js"></script>
-<link rel="stylesheet" href="../../../../node_modules/todomvc-app-css/index.css">
+<link
+  rel="stylesheet"
+  href="../../../../node_modules/todomvc-app-css/index.css"
+/>
 
 <div id="app">
   <section class="todoapp">
     <header class="header">
       <h1>todos</h1>
-      <input class="new-todo"
-              autofocus autocomplete="off"
-              placeholder="What needs to be done?"
-              v-model="newTodo"
-              @keyup.enter="addTodo">
+      <input
+        class="new-todo"
+        autofocus
+        autocomplete="off"
+        placeholder="What needs to be done?"
+        v-model="newTodo"
+        @keyup.enter="addTodo"
+      />
     </header>
     <section class="main" v-show="todos.length">
-      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="allDone">
+      <input
+        id="toggle-all"
+        class="toggle-all"
+        type="checkbox"
+        v-model="allDone"
+      />
       <label for="toggle-all">Mark all as complete</label>
       <ul class="todo-list">
-        <li v-for="todo in filteredTodos"
-            class="todo"
-            :key="todo.id"
-            :class="{ completed: todo.completed, editing: todo === editedTodo }">
+        <li
+          v-for="todo in filteredTodos"
+          class="todo"
+          :key="todo.id"
+          :class="{ completed: todo.completed, editing: todo === editedTodo }"
+        >
           <div class="view">
-            <input class="toggle" type="checkbox" v-model="todo.completed">
+            <input class="toggle" type="checkbox" v-model="todo.completed" />
             <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
             <button class="destroy" @click="removeTodo(todo)"></button>
           </div>
-          <input class="edit" type="text"
-                  v-model="todo.title"
-                  v-todo-focus="todo === editedTodo"
-                  @blur="doneEdit(todo)"
-                  @keyup.enter="doneEdit(todo)"
-                  @keyup.escape="cancelEdit(todo)"
-          >
+          <input
+            class="edit"
+            type="text"
+            v-model="todo.title"
+            v-todo-focus="todo === editedTodo"
+            @blur="doneEdit(todo)"
+            @keyup.enter="doneEdit(todo)"
+            @keyup.escape="cancelEdit(todo)"
+          />
         </li>
       </ul>
     </section>
     <footer class="footer" v-show="todos.length">
-        <span class="todo-count">
-          <strong>{{ remaining }}</strong> <span>{{ pluralize(remaining) }} left</span>
-        </span>
+      <span class="todo-count">
+        <strong>{{ remaining }}</strong>
+        <span>{{ pluralize(remaining) }} left</span>
+      </span>
       <ul class="filters">
-        <li><a href="#/all" :class="{ selected: visibility === 'all' }">All</a></li>
-        <li><a href="#/active" :class="{ selected: visibility === 'active' }">Active</a></li>
-        <li><a href="#/completed" :class="{ selected: visibility === 'completed' }">Completed</a></li>
+        <li>
+          <a href="#/all" :class="{ selected: visibility === 'all' }">All</a>
+        </li>
+        <li>
+          <a href="#/active" :class="{ selected: visibility === 'active' }"
+            >Active</a
+          >
+        </li>
+        <li>
+          <a
+            href="#/completed"
+            :class="{ selected: visibility === 'completed' }"
+            >Completed</a
+          >
+        </li>
       </ul>
-      <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
+      <button
+        class="clear-completed"
+        @click="removeCompleted"
+        v-show="todos.length > remaining"
+      >
         Clear completed
       </button>
     </footer>
@@ -51,146 +83,146 @@
 </div>
 
 <script>
-const STORAGE_KEY = 'todos-vuejs-3.x'
-const todoStorage = {
-  fetch() {
-    const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
-    todos.forEach((todo, index) => {
-      todo.id = index
-    })
-    todoStorage.uid = todos.length
-    return todos
-  },
-  save(todos) {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
-  }
-}
-
-const filters = {
-  all(todos) {
-    return todos
-  },
-  active(todos) {
-    return todos.filter((todo) => {
-      return !todo.completed
-    })
-  },
-  completed(todos) {
-    return todos.filter(function (todo) {
-      return todo.completed
-    })
-  }
-}
-
-Vue.createApp({
-  // app initial state
-  data: () => ({
-    todos: todoStorage.fetch(),
-    newTodo: '',
-    editedTodo: null,
-    visibility: 'all'
-  }),
-
-  // watch todos change for localStorage persistence
-  watch: {
-    todos: {
-      handler(todos) {
-        todoStorage.save(todos)
-      },
-      deep: true
-    }
-  },
-
-  mounted() {
-    window.addEventListener('hashchange', this.onHashChange)
-    this.onHashChange()
-  },
-
-  computed: {
-    filteredTodos() {
-      return filters[this.visibility](this.todos)
-    },
-    remaining() {
-      return filters.active(this.todos).length
-    },
-    allDone: {
-      get() {
-        return this.remaining === 0
-      },
-      set(value) {
-        this.todos.forEach(function (todo) {
-          todo.completed = value
-        })
-      }
-    }
-  },
-
-  // methods that implement data logic.
-  // note there's no DOM manipulation here at all.
-  methods: {
-    addTodo() {
-      var value = this.newTodo && this.newTodo.trim()
-      if (!value) {
-        return
-      }
-      this.todos.push({
-        id: todoStorage.uid++,
-        title: value,
-        completed: false
+  const STORAGE_KEY = 'todos-vuejs-3.x'
+  const todoStorage = {
+    fetch() {
+      const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
+      todos.forEach((todo, index) => {
+        todo.id = index
       })
-      this.newTodo = ''
+      todoStorage.uid = todos.length
+      return todos
     },
-
-    removeTodo(todo) {
-      this.todos.splice(this.todos.indexOf(todo), 1)
+    save(todos) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
     },
-
-    editTodo(todo) {
-      this.beforeEditCache = todo.title
-      this.editedTodo = todo
-    },
-
-    doneEdit(todo) {
-      if (!this.editedTodo) {
-        return
-      }
-      this.editedTodo = null
-      todo.title = todo.title.trim()
-      if (!todo.title) {
-        this.removeTodo(todo)
-      }
-    },
-
-    cancelEdit(todo) {
-      this.editedTodo = null
-      todo.title = this.beforeEditCache
-    },
-
-    removeCompleted() {
-      this.todos = filters.active(this.todos)
-    },
-
-    onHashChange() {
-      var visibility = window.location.hash.replace(/#\/?/, '')
-      if (filters[visibility]) {
-        this.visibility = visibility
-      } else {
-        window.location.hash = ''
-        this.visibility = 'all'
-      }
-    },
-
-    pluralize (n) {
-      return n === 1 ? 'item' : 'items'
-    }
-  },
-
-  directives: {
-    'todo-focus'(el, binding) {
-      if (binding.value) {
-        el.focus()
-      }
-    }
   }
-}).mount('#app')
+
+  const filters = {
+    all(todos) {
+      return todos
+    },
+    active(todos) {
+      return todos.filter(todo => {
+        return !todo.completed
+      })
+    },
+    completed(todos) {
+      return todos.filter(function (todo) {
+        return todo.completed
+      })
+    },
+  }
+
+  Vue.createApp({
+    // app initial state
+    data: () => ({
+      todos: todoStorage.fetch(),
+      newTodo: '',
+      editedTodo: null,
+      visibility: 'all',
+    }),
+
+    // watch todos change for localStorage persistence
+    watch: {
+      todos: {
+        handler(todos) {
+          todoStorage.save(todos)
+        },
+        deep: true,
+      },
+    },
+
+    mounted() {
+      window.addEventListener('hashchange', this.onHashChange)
+      this.onHashChange()
+    },
+
+    computed: {
+      filteredTodos() {
+        return filters[this.visibility](this.todos)
+      },
+      remaining() {
+        return filters.active(this.todos).length
+      },
+      allDone: {
+        get() {
+          return this.remaining === 0
+        },
+        set(value) {
+          this.todos.forEach(function (todo) {
+            todo.completed = value
+          })
+        },
+      },
+    },
+
+    // methods that implement data logic.
+    // note there's no DOM manipulation here at all.
+    methods: {
+      addTodo() {
+        var value = this.newTodo && this.newTodo.trim()
+        if (!value) {
+          return
+        }
+        this.todos.push({
+          id: todoStorage.uid++,
+          title: value,
+          completed: false,
+        })
+        this.newTodo = ''
+      },
+
+      removeTodo(todo) {
+        this.todos.splice(this.todos.indexOf(todo), 1)
+      },
+
+      editTodo(todo) {
+        this.beforeEditCache = todo.title
+        this.editedTodo = todo
+      },
+
+      doneEdit(todo) {
+        if (!this.editedTodo) {
+          return
+        }
+        this.editedTodo = null
+        todo.title = todo.title.trim()
+        if (!todo.title) {
+          this.removeTodo(todo)
+        }
+      },
+
+      cancelEdit(todo) {
+        this.editedTodo = null
+        todo.title = this.beforeEditCache
+      },
+
+      removeCompleted() {
+        this.todos = filters.active(this.todos)
+      },
+
+      onHashChange() {
+        var visibility = window.location.hash.replace(/#\/?/, '')
+        if (filters[visibility]) {
+          this.visibility = visibility
+        } else {
+          window.location.hash = ''
+          this.visibility = 'all'
+        }
+      },
+
+      pluralize(n) {
+        return n === 1 ? 'item' : 'items'
+      },
+    },
+
+    directives: {
+      'todo-focus'(el, binding) {
+        if (binding.value) {
+          el.focus()
+        }
+      },
+    },
+  }).mount('#app')
 </script>
diff --git a/packages/vue/examples/classic/tree.html b/packages/vue/examples/classic/tree.html
index c447b76ca..8d7b13d74 100644
--- a/packages/vue/examples/classic/tree.html
+++ b/packages/vue/examples/classic/tree.html
@@ -22,43 +22,42 @@
 </script>
 <!-- item script -->
 <script>
-const TreeItem = {
-  name: 'TreeItem', // necessary for self-reference
-  template: '#item-template',
-  props: {
-    model: Object
-  },
-  data() {
-    return {
-      open: false
-    }
-  },
-  computed: {
-    isFolder() {
-      return this.model.children &&
-        this.model.children.length
-    }
-  },
-  methods: {
-    toggle() {
-      if (this.isFolder) {
-        this.open = !this.open
+  const TreeItem = {
+    name: 'TreeItem', // necessary for self-reference
+    template: '#item-template',
+    props: {
+      model: Object,
+    },
+    data() {
+      return {
+        open: false,
       }
     },
-    changeType() {
-      if (!this.isFolder) {
-        this.model.children = []
-        this.addChild()
-        this.open = true
-      }
+    computed: {
+      isFolder() {
+        return this.model.children && this.model.children.length
+      },
+    },
+    methods: {
+      toggle() {
+        if (this.isFolder) {
+          this.open = !this.open
+        }
+      },
+      changeType() {
+        if (!this.isFolder) {
+          this.model.children = []
+          this.addChild()
+          this.open = true
+        }
+      },
+      addChild() {
+        this.model.children.push({
+          name: 'new stuff',
+        })
+      },
     },
-    addChild() {
-      this.model.children.push({
-        name: 'new stuff'
-      })
-    }
   }
-}
 </script>
 
 <p>(You can double click on an item to turn it into a folder.)</p>
@@ -69,43 +68,37 @@ const TreeItem = {
 </ul>
 
 <script>
-const treeData = {
-  name: 'My Tree',
-  children: [
-    { name: 'hello' },
-    { name: 'wat' },
-    {
-      name: 'child folder',
-      children: [
-        {
-          name: 'child folder',
-          children: [
-            { name: 'hello' },
-            { name: 'wat' }
-          ]
-        },
-        { name: 'hello' },
-        { name: 'wat' },
-        {
-          name: 'child folder',
-          children: [
-            { name: 'hello' },
-            { name: 'wat' }
-          ]
-        }
-      ]
-    }
-  ]
-}
+  const treeData = {
+    name: 'My Tree',
+    children: [
+      { name: 'hello' },
+      { name: 'wat' },
+      {
+        name: 'child folder',
+        children: [
+          {
+            name: 'child folder',
+            children: [{ name: 'hello' }, { name: 'wat' }],
+          },
+          { name: 'hello' },
+          { name: 'wat' },
+          {
+            name: 'child folder',
+            children: [{ name: 'hello' }, { name: 'wat' }],
+          },
+        ],
+      },
+    ],
+  }
 
-Vue.createApp({
-  components: {
-    TreeItem
-  },
-  data: () => ({
-    treeData
-  })
-}).mount('#demo')
+  Vue.createApp({
+    components: {
+      TreeItem,
+    },
+    data: () => ({
+      treeData,
+    }),
+  }).mount('#demo')
 </script>
 
 <style>
diff --git a/packages/vue/examples/composition/commits.html b/packages/vue/examples/composition/commits.html
index b09421417..1aa99920a 100644
--- a/packages/vue/examples/composition/commits.html
+++ b/packages/vue/examples/composition/commits.html
@@ -3,58 +3,67 @@
 <div id="demo">
   <h1>Latest Vue.js Commits</h1>
   <template v-for="branch in branches">
-    <input type="radio"
+    <input
+      type="radio"
       :id="branch"
       :value="branch"
       name="branch"
-      v-model="currentBranch">
+      v-model="currentBranch"
+    />
     <label :for="branch">{{ branch }}</label>
   </template>
   <p>vuejs/core@{{ currentBranch }}</p>
   <ul>
     <li v-for="{ html_url, sha, author, commit } in commits">
-      <a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
-      - <span class="message">{{ truncate(commit.message) }}</span><br>
-      by <span class="author"><a :href="author.html_url" target="_blank">{{ commit.author.name }}</a></span>
+      <a :href="html_url" target="_blank" class="commit"
+        >{{ sha.slice(0, 7) }}</a
+      >
+      - <span class="message">{{ truncate(commit.message) }}</span><br />
+      by
+      <span class="author"
+        ><a :href="author.html_url" target="_blank"
+          >{{ commit.author.name }}</a
+        ></span
+      >
       at <span class="date">{{ formatDate(commit.author.date) }}</span>
     </li>
   </ul>
 </div>
 
 <script>
-const { createApp, ref, watchEffect } = Vue
-const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`
+  const { createApp, ref, watchEffect } = Vue
+  const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`
 
-const truncate = v => {
-  const newline = v.indexOf('\n')
-  return newline > 0 ? v.slice(0, newline) : v
-}
-
-const formatDate = v => v.replace(/T|Z/g, ' ')
-
-createApp({
-  setup() {
-    const currentBranch = ref('main')
-    const commits = ref(null)
-
-    watchEffect(() => {
-      fetch(`${API_URL}${currentBranch.value}`)
-        .then(res => res.json())
-        .then(data => {
-          console.log(data)
-          commits.value = data
-        })
-    })
-
-    return {
-      branches: ['main', 'v2-compat'],
-      currentBranch,
-      commits,
-      truncate,
-      formatDate
-    }
+  const truncate = v => {
+    const newline = v.indexOf('\n')
+    return newline > 0 ? v.slice(0, newline) : v
   }
-}).mount('#demo')
+
+  const formatDate = v => v.replace(/T|Z/g, ' ')
+
+  createApp({
+    setup() {
+      const currentBranch = ref('main')
+      const commits = ref(null)
+
+      watchEffect(() => {
+        fetch(`${API_URL}${currentBranch.value}`)
+          .then(res => res.json())
+          .then(data => {
+            console.log(data)
+            commits.value = data
+          })
+      })
+
+      return {
+        branches: ['main', 'v2-compat'],
+        currentBranch,
+        commits,
+        truncate,
+        formatDate,
+      }
+    },
+  }).mount('#demo')
 </script>
 
 <style>
@@ -69,7 +78,8 @@ createApp({
     line-height: 1.5em;
     margin-bottom: 20px;
   }
-  .author, .date {
+  .author,
+  .date {
     font-weight: bold;
   }
 </style>
diff --git a/packages/vue/examples/composition/grid.html b/packages/vue/examples/composition/grid.html
index b2849fad3..8af8817fd 100644
--- a/packages/vue/examples/composition/grid.html
+++ b/packages/vue/examples/composition/grid.html
@@ -26,148 +26,147 @@
 </script>
 <!-- DemoGrid component script -->
 <script>
-const { reactive, computed } = Vue
+  const { reactive, computed } = Vue
 
-const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
+  const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
 
-const DemoGrid = {
-  template: '#grid-template',
-  props: {
-    data: Array,
-    columns: Array,
-    filterKey: String
-  },
-  setup(props) {
-    const state = reactive({
-      sortKey: '',
-      sortOrders: props.columns.reduce((o, key) => (o[key] = 1, o), {})
-    })
+  const DemoGrid = {
+    template: '#grid-template',
+    props: {
+      data: Array,
+      columns: Array,
+      filterKey: String,
+    },
+    setup(props) {
+      const state = reactive({
+        sortKey: '',
+        sortOrders: props.columns.reduce((o, key) => ((o[key] = 1), o), {}),
+      })
 
-    const filteredData = computed(() => {
-      let { data, filterKey } = props
-      if (filterKey) {
-        filterKey = filterKey.toLowerCase()
-        data = data.filter(row => {
-          return Object.keys(row).some(key => {
-            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
+      const filteredData = computed(() => {
+        let { data, filterKey } = props
+        if (filterKey) {
+          filterKey = filterKey.toLowerCase()
+          data = data.filter(row => {
+            return Object.keys(row).some(key => {
+              return String(row[key]).toLowerCase().indexOf(filterKey) > -1
+            })
           })
-        })
-      }
-      const { sortKey } = state
-      if (sortKey) {
-        const order = state.sortOrders[sortKey]
-        data = data.slice().sort((a, b) => {
-          a = a[sortKey]
-          b = b[sortKey]
-          return (a === b ? 0 : a > b ? 1 : -1) * order
-        })
-      }
-      return data
-    })
+        }
+        const { sortKey } = state
+        if (sortKey) {
+          const order = state.sortOrders[sortKey]
+          data = data.slice().sort((a, b) => {
+            a = a[sortKey]
+            b = b[sortKey]
+            return (a === b ? 0 : a > b ? 1 : -1) * order
+          })
+        }
+        return data
+      })
 
-    function sortBy(key) {
-      state.sortKey = key
-      state.sortOrders[key] *= -1
-    }
+      function sortBy(key) {
+        state.sortKey = key
+        state.sortOrders[key] *= -1
+      }
 
-    return {
-      state,
-      filteredData,
-      sortBy,
-      capitalize
-    }
+      return {
+        state,
+        filteredData,
+        sortBy,
+        capitalize,
+      }
+    },
   }
-}
 </script>
 
 <!-- App template (in DOM) -->
 <div id="demo">
-  <form id="search">
-    Search <input name="query" v-model="searchQuery">
-  </form>
-  <demo-grid
-    :data="gridData"
-    :columns="gridColumns"
-    :filter-key="searchQuery">
+  <form id="search">Search <input name="query" v-model="searchQuery" /></form>
+  <demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
   </demo-grid>
 </div>
 <!-- App script -->
 <script>
-Vue.createApp({
-  components: {
-    DemoGrid
-  },
-  data: () => ({
-    searchQuery: '',
-    gridColumns: ['name', 'power'],
-    gridData: [
-      { name: 'Chuck Norris', power: Infinity },
-      { name: 'Bruce Lee', power: 9000 },
-      { name: 'Jackie Chan', power: 7000 },
-      { name: 'Jet Li', power: 8000 }
-    ]
-  })
-}).mount('#demo')
+  Vue.createApp({
+    components: {
+      DemoGrid,
+    },
+    data: () => ({
+      searchQuery: '',
+      gridColumns: ['name', 'power'],
+      gridData: [
+        { name: 'Chuck Norris', power: Infinity },
+        { name: 'Bruce Lee', power: 9000 },
+        { name: 'Jackie Chan', power: 7000 },
+        { name: 'Jet Li', power: 8000 },
+      ],
+    }),
+  }).mount('#demo')
 </script>
 
 <style>
-body {
-  font-family: Helvetica Neue, Arial, sans-serif;
-  font-size: 14px;
-  color: #444;
-}
+  body {
+    font-family:
+      Helvetica Neue,
+      Arial,
+      sans-serif;
+    font-size: 14px;
+    color: #444;
+  }
 
-table {
-  border: 2px solid #42b983;
-  border-radius: 3px;
-  background-color: #fff;
-}
+  table {
+    border: 2px solid #42b983;
+    border-radius: 3px;
+    background-color: #fff;
+  }
 
-th {
-  background-color: #42b983;
-  color: rgba(255,255,255,0.66);
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
+  th {
+    background-color: #42b983;
+    color: rgba(255, 255, 255, 0.66);
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
 
-td {
-  background-color: #f9f9f9;
-}
+  td {
+    background-color: #f9f9f9;
+  }
 
-th, td {
-  min-width: 120px;
-  padding: 10px 20px;
-}
+  th,
+  td {
+    min-width: 120px;
+    padding: 10px 20px;
+  }
 
-th.active {
-  color: #fff;
-}
+  th.active {
+    color: #fff;
+  }
 
-th.active .arrow {
-  opacity: 1;
-}
+  th.active .arrow {
+    opacity: 1;
+  }
 
-.arrow {
-  display: inline-block;
-  vertical-align: middle;
-  width: 0;
-  height: 0;
-  margin-left: 5px;
-  opacity: 0.66;
-}
+  .arrow {
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    height: 0;
+    margin-left: 5px;
+    opacity: 0.66;
+  }
 
-.arrow.asc {
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-bottom: 4px solid #fff;
-}
+  .arrow.asc {
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-bottom: 4px solid #fff;
+  }
 
-.arrow.dsc {
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid #fff;
-}
+  .arrow.dsc {
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid #fff;
+  }
 </style>
diff --git a/packages/vue/examples/composition/markdown.html b/packages/vue/examples/composition/markdown.html
index 151a8a8c1..e7a8550ca 100644
--- a/packages/vue/examples/composition/markdown.html
+++ b/packages/vue/examples/composition/markdown.html
@@ -8,55 +8,62 @@
 </div>
 
 <script>
-const { ref, computed } = Vue
+  const { ref, computed } = Vue
 
-Vue.createApp({
-  setup() {
-    const input = ref('# hello')
-    const output = computed(() => marked.marked(input.value, { sanitize: true }))
-    const update = _.debounce(e => { input.value = e.target.value }, 50)
+  Vue.createApp({
+    setup() {
+      const input = ref('# hello')
+      const output = computed(() =>
+        marked.marked(input.value, { sanitize: true }),
+      )
+      const update = _.debounce(e => {
+        input.value = e.target.value
+      }, 50)
 
-    return {
-      input,
-      output,
-      update
-    }
-  }
-}).mount('#editor')
+      return {
+        input,
+        output,
+        update,
+      }
+    },
+  }).mount('#editor')
 </script>
 
 <style>
-html, body, #editor {
-  margin: 0;
-  height: 100%;
-  font-family: 'Helvetica Neue', Arial, sans-serif;
-  color: #333;
-}
+  html,
+  body,
+  #editor {
+    margin: 0;
+    height: 100%;
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    color: #333;
+  }
 
-textarea, #editor div {
-  display: inline-block;
-  overflow: auto;
-  width: 50%;
-  height: 100%;
-  vertical-align: top;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 0 20px;
-}
+  textarea,
+  #editor div {
+    display: inline-block;
+    overflow: auto;
+    width: 50%;
+    height: 100%;
+    vertical-align: top;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
 
-textarea {
-  border: none;
-  border-right: 1px solid #ccc;
-  resize: none;
-  outline: none;
-  background-color: #f6f6f6;
-  font-size: 14px;
-  font-family: 'Monaco', courier, monospace;
-  padding: 20px;
-}
+  textarea {
+    border: none;
+    border-right: 1px solid #ccc;
+    resize: none;
+    outline: none;
+    background-color: #f6f6f6;
+    font-size: 14px;
+    font-family: 'Monaco', courier, monospace;
+    padding: 20px;
+  }
 
-code {
-  color: #f66;
-}
+  code {
+    color: #f66;
+  }
 </style>
diff --git a/packages/vue/examples/composition/svg.html b/packages/vue/examples/composition/svg.html
index 4bdca9659..67e29a6b7 100644
--- a/packages/vue/examples/composition/svg.html
+++ b/packages/vue/examples/composition/svg.html
@@ -1,39 +1,37 @@
 <script src="../../dist/vue.global.js"></script>
 <script>
-const { ref, reactive, computed, createApp } = Vue
+  const { ref, reactive, computed, createApp } = Vue
 
-// math helper...
-function valueToPoint (value, index, total) {
-  var x     = 0
-  var y     = -value * 0.8
-  var angle = Math.PI * 2 / total * index
-  var cos   = Math.cos(angle)
-  var sin   = Math.sin(angle)
-  var tx    = x * cos - y * sin + 100
-  var ty    = x * sin + y * cos + 100
-  return {
-    x: tx,
-    y: ty
-  }
-}
-
-const AxisLabel = {
-  template: '<text :x="point.x" :y="point.y">{{stat.label}}</text>',
-  props: {
-    stat: Object,
-    index: Number,
-    total: Number
-  },
-  setup(props) {
+  // math helper...
+  function valueToPoint(value, index, total) {
+    var x = 0
+    var y = -value * 0.8
+    var angle = ((Math.PI * 2) / total) * index
+    var cos = Math.cos(angle)
+    var sin = Math.sin(angle)
+    var tx = x * cos - y * sin + 100
+    var ty = x * sin + y * cos + 100
     return {
-      point: computed(() => valueToPoint(
-        +props.stat.value + 10,
-        props.index,
-        props.total
-      ))
+      x: tx,
+      y: ty,
     }
   }
-}
+
+  const AxisLabel = {
+    template: '<text :x="point.x" :y="point.y">{{stat.label}}</text>',
+    props: {
+      stat: Object,
+      index: Number,
+      total: Number,
+    },
+    setup(props) {
+      return {
+        point: computed(() =>
+          valueToPoint(+props.stat.value + 10, props.index, props.total),
+        ),
+      }
+    },
+  }
 </script>
 
 <!-- template for the polygraph component. -->
@@ -51,24 +49,26 @@ const AxisLabel = {
 </script>
 
 <script>
-const Polygraph = {
-  props: ['stats'],
-  template: '#polygraph-template',
-  setup(props) {
-    return {
-      points: computed(() => {
-        const total = props.stats.length
-        return props.stats.map((stat, i) => {
-          const point = valueToPoint(stat.value, i, total)
-          return point.x + ',' + point.y
-        }).join(' ')
-      })
-    }
-  },
-  components: {
-    AxisLabel
+  const Polygraph = {
+    props: ['stats'],
+    template: '#polygraph-template',
+    setup(props) {
+      return {
+        points: computed(() => {
+          const total = props.stats.length
+          return props.stats
+            .map((stat, i) => {
+              const point = valueToPoint(stat.value, i, total)
+              return point.x + ',' + point.y
+            })
+            .join(' ')
+        }),
+      }
+    },
+    components: {
+      AxisLabel,
+    },
   }
-}
 </script>
 
 <!-- demo root element -->
@@ -80,93 +80,99 @@ const Polygraph = {
   <!-- controls -->
   <div v-for="stat in stats">
     <label>{{stat.label}}</label>
-    <input type="range" v-model="stat.value" min="0" max="100">
+    <input type="range" v-model="stat.value" min="0" max="100" />
     <span>{{stat.value}}</span>
     <button @click="remove(stat)" class="remove">X</button>
   </div>
   <form id="add">
-    <input name="newlabel" v-model="newLabel">
+    <input name="newlabel" v-model="newLabel" />
     <button @click="add">Add a Stat</button>
   </form>
   <pre id="raw">{{ stats }}</pre>
 </div>
 
 <script>
-const globalStats = [
-  { label: 'A', value: 100 },
-  { label: 'B', value: 100 },
-  { label: 'C', value: 100 },
-  { label: 'D', value: 100 },
-  { label: 'E', value: 100 },
-  { label: 'F', value: 100 }
-]
+  const globalStats = [
+    { label: 'A', value: 100 },
+    { label: 'B', value: 100 },
+    { label: 'C', value: 100 },
+    { label: 'D', value: 100 },
+    { label: 'E', value: 100 },
+    { label: 'F', value: 100 },
+  ]
 
-createApp({
-  components: {
-    Polygraph
-  },
-  setup() {
-    const newLabel = ref('')
-    const stats = reactive(globalStats)
+  createApp({
+    components: {
+      Polygraph,
+    },
+    setup() {
+      const newLabel = ref('')
+      const stats = reactive(globalStats)
 
-    function add(e) {
-      e.preventDefault()
-      if (!newLabel.value) return
-      stats.push({
-        label: newLabel.value,
-        value: 100
-      })
-      newLabel.value = ''
-    }
-
-    function remove(stat) {
-      if (stats.length > 3) {
-        stats.splice(stats.indexOf(stat), 1)
-      } else {
-        alert('Can\'t delete more!')
+      function add(e) {
+        e.preventDefault()
+        if (!newLabel.value) return
+        stats.push({
+          label: newLabel.value,
+          value: 100,
+        })
+        newLabel.value = ''
       }
-    }
 
-    return {
-      newLabel,
-      stats,
-      add,
-      remove
-    }
-  }
-}).mount('#demo')
+      function remove(stat) {
+        if (stats.length > 3) {
+          stats.splice(stats.indexOf(stat), 1)
+        } else {
+          alert("Can't delete more!")
+        }
+      }
+
+      return {
+        newLabel,
+        stats,
+        add,
+        remove,
+      }
+    },
+  }).mount('#demo')
 </script>
 
 <style>
-body {
-    font-family: Helvetica Neue, Arial, sans-serif;
-}
+  body {
+    font-family:
+      Helvetica Neue,
+      Arial,
+      sans-serif;
+  }
 
-polygon {
+  polygon {
     fill: #42b983;
-    opacity: .75;
-}
+    opacity: 0.75;
+  }
 
-circle {
+  circle {
     fill: transparent;
     stroke: #999;
-}
+  }
 
-text {
-    font-family: Helvetica Neue, Arial, sans-serif;
+  text {
+    font-family:
+      Helvetica Neue,
+      Arial,
+      sans-serif;
     font-size: 10px;
     fill: #666;
-}
+  }
 
-label {
+  label {
     display: inline-block;
     margin-left: 10px;
     width: 20px;
-}
+  }
 
-#raw {
+  #raw {
     position: absolute;
     top: 0;
     left: 300px;
-}
+  }
 </style>
diff --git a/packages/vue/examples/composition/todomvc.html b/packages/vue/examples/composition/todomvc.html
index 37bfeb86c..510e22b1b 100644
--- a/packages/vue/examples/composition/todomvc.html
+++ b/packages/vue/examples/composition/todomvc.html
@@ -1,51 +1,86 @@
 <script src="../../dist/vue.global.js"></script>
-<link rel="stylesheet" href="../../../../node_modules/todomvc-app-css/index.css">
+<link
+  rel="stylesheet"
+  href="../../../../node_modules/todomvc-app-css/index.css"
+/>
 
 <div id="app">
   <section class="todoapp">
     <header class="header">
       <h1>todos</h1>
-      <input class="new-todo"
-              autofocus autocomplete="off"
-              placeholder="What needs to be done?"
-              v-model="state.newTodo"
-              @keyup.enter="addTodo">
+      <input
+        class="new-todo"
+        autofocus
+        autocomplete="off"
+        placeholder="What needs to be done?"
+        v-model="state.newTodo"
+        @keyup.enter="addTodo"
+      />
     </header>
     <section class="main" v-show="state.todos.length">
-      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="state.allDone">
+      <input
+        id="toggle-all"
+        class="toggle-all"
+        type="checkbox"
+        v-model="state.allDone"
+      />
       <label for="toggle-all">Mark all as complete</label>
       <ul class="todo-list">
-        <li v-for="todo in state.filteredTodos"
-            class="todo"
-            :key="todo.id"
-            :class="{ completed: todo.completed, editing: todo === state.editedTodo }">
+        <li
+          v-for="todo in state.filteredTodos"
+          class="todo"
+          :key="todo.id"
+          :class="{ completed: todo.completed, editing: todo === state.editedTodo }"
+        >
           <div class="view">
-            <input class="toggle" type="checkbox" v-model="todo.completed">
+            <input class="toggle" type="checkbox" v-model="todo.completed" />
             <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
             <button class="destroy" @click="removeTodo(todo)"></button>
           </div>
-          <input class="edit" type="text"
-                  v-model="todo.title"
-                  v-todo-focus="todo === state.editedTodo"
-                  @blur="doneEdit(todo)"
-                  @keyup.enter="doneEdit(todo)"
-                  @keyup.escape="cancelEdit(todo)"
-          >
+          <input
+            class="edit"
+            type="text"
+            v-model="todo.title"
+            v-todo-focus="todo === state.editedTodo"
+            @blur="doneEdit(todo)"
+            @keyup.enter="doneEdit(todo)"
+            @keyup.escape="cancelEdit(todo)"
+          />
         </li>
       </ul>
     </section>
     <footer class="footer" v-show="state.todos.length">
-        <span class="todo-count">
-          <strong>{{ state.remaining }}</strong>
-          <span>{{ state.remainingText }}</span>
-        </span>
+      <span class="todo-count">
+        <strong>{{ state.remaining }}</strong>
+        <span>{{ state.remainingText }}</span>
+      </span>
       <ul class="filters">
-        <li><a href="#/all" :class="{ selected: state.visibility === 'all' }">All</a></li>
-        <li><a href="#/active" :class="{ selected: state.visibility === 'active' }">Active</a></li>
-        <li><a href="#/completed" :class="{ selected: state.visibility === 'completed' }">Completed</a></li>
+        <li>
+          <a href="#/all" :class="{ selected: state.visibility === 'all' }"
+            >All</a
+          >
+        </li>
+        <li>
+          <a
+            href="#/active"
+            :class="{ selected: state.visibility === 'active' }"
+            >Active</a
+          >
+        </li>
+        <li>
+          <a
+            href="#/completed"
+            :class="{ selected: state.visibility === 'completed' }"
+            >Completed</a
+          >
+        </li>
       </ul>
 
-      <button class="clear-completed" @click="removeCompleted" v-show="state.todos.length > state.remaining">
+      <button
+        class="clear-completed"
+        @click="removeCompleted"
+        v-show="state.todos.length > state.remaining"
+      >
         Clear completed
       </button>
     </footer>
@@ -53,154 +88,155 @@
 </div>
 
 <script>
-const { createApp, reactive, computed, watchEffect, onMounted, onUnmounted } = Vue
+  const { createApp, reactive, computed, watchEffect, onMounted, onUnmounted } =
+    Vue
 
-const STORAGE_KEY = 'todos-vuejs-3.x'
-const todoStorage = {
-  fetch () {
-    const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
-    todos.forEach((todo, index) => {
-      todo.id = index
-    })
-    todoStorage.uid = todos.length
-    return todos
-  },
-  save (todos) {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
+  const STORAGE_KEY = 'todos-vuejs-3.x'
+  const todoStorage = {
+    fetch() {
+      const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
+      todos.forEach((todo, index) => {
+        todo.id = index
+      })
+      todoStorage.uid = todos.length
+      return todos
+    },
+    save(todos) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
+    },
   }
-}
 
-const filters = {
-  all (todos) {
-    return todos
-  },
-  active (todos) {
-    return todos.filter((todo) => {
-      return !todo.completed
-    })
-  },
-  completed (todos) {
-    return todos.filter(function (todo) {
-      return todo.completed
-    })
+  const filters = {
+    all(todos) {
+      return todos
+    },
+    active(todos) {
+      return todos.filter(todo => {
+        return !todo.completed
+      })
+    },
+    completed(todos) {
+      return todos.filter(function (todo) {
+        return todo.completed
+      })
+    },
   }
-}
 
-function pluralize (n) {
-  return n === 1 ? 'item' : 'items'
-}
+  function pluralize(n) {
+    return n === 1 ? 'item' : 'items'
+  }
 
-createApp({
-  setup () {
-    const state = reactive({
-      todos: todoStorage.fetch(),
-      editedTodo: null,
-      newTodo: '',
-      beforeEditCache: '',
-      visibility: 'all',
-      remaining: computed(() => {
-        return filters.active(state.todos).length
-      }),
-      remainingText: computed(() => {
-        return ` ${pluralize(state.remaining)} left`
-      }),
-      filteredTodos: computed(() => {
-        return filters[state.visibility](state.todos)
-      }),
-      allDone: computed({
-        get: function () {
-          return state.remaining === 0
-        },
-        set: function (value) {
-          state.todos.forEach((todo) => {
-            todo.completed = value
-          })
+  createApp({
+    setup() {
+      const state = reactive({
+        todos: todoStorage.fetch(),
+        editedTodo: null,
+        newTodo: '',
+        beforeEditCache: '',
+        visibility: 'all',
+        remaining: computed(() => {
+          return filters.active(state.todos).length
+        }),
+        remainingText: computed(() => {
+          return ` ${pluralize(state.remaining)} left`
+        }),
+        filteredTodos: computed(() => {
+          return filters[state.visibility](state.todos)
+        }),
+        allDone: computed({
+          get: function () {
+            return state.remaining === 0
+          },
+          set: function (value) {
+            state.todos.forEach(todo => {
+              todo.completed = value
+            })
+          },
+        }),
+      })
+
+      watchEffect(() => {
+        todoStorage.save(state.todos)
+      })
+
+      onMounted(() => {
+        window.addEventListener('hashchange', onHashChange)
+        onHashChange()
+      })
+
+      onUnmounted(() => {
+        window.removeEventListener('hashchange', onHashChange)
+      })
+
+      function onHashChange() {
+        const visibility = window.location.hash.replace(/#\/?/, '')
+        if (filters[visibility]) {
+          state.visibility = visibility
+        } else {
+          window.location.hash = ''
+          state.visibility = 'all'
         }
-      })
-    })
-
-    watchEffect(() => {
-      todoStorage.save(state.todos)
-    })
-
-    onMounted(() => {
-      window.addEventListener('hashchange', onHashChange)
-      onHashChange()
-    })
-
-    onUnmounted(() => {
-      window.removeEventListener('hashchange', onHashChange)
-    })
-
-    function onHashChange () {
-      const visibility = window.location.hash.replace(/#\/?/, '')
-      if (filters[visibility]) {
-        state.visibility = visibility
-      } else {
-        window.location.hash = ''
-        state.visibility = 'all'
       }
-    }
 
-    function addTodo () {
-      const value = state.newTodo && state.newTodo.trim()
-      if (!value) {
-        return
+      function addTodo() {
+        const value = state.newTodo && state.newTodo.trim()
+        if (!value) {
+          return
+        }
+        state.todos.push({
+          id: todoStorage.uid++,
+          title: value,
+          completed: false,
+        })
+        state.newTodo = ''
       }
-      state.todos.push({
-        id: todoStorage.uid++,
-        title: value,
-        completed: false
-      })
-      state.newTodo = ''
-    }
 
-    function removeTodo (todo) {
-      state.todos.splice(state.todos.indexOf(todo), 1)
-    }
-
-    function editTodo (todo) {
-      state.beforeEditCache = todo.title
-      state.editedTodo = todo
-    }
-
-    function doneEdit (todo) {
-      if (!state.editedTodo) {
-        return
+      function removeTodo(todo) {
+        state.todos.splice(state.todos.indexOf(todo), 1)
       }
-      state.editedTodo = null
-      todo.title = todo.title.trim()
-      if (!todo.title) {
-        removeTodo(todo)
+
+      function editTodo(todo) {
+        state.beforeEditCache = todo.title
+        state.editedTodo = todo
       }
-    }
 
-    function cancelEdit (todo) {
-      state.editedTodo = null
-      todo.title = state.beforeEditCache
-    }
-
-    function removeCompleted () {
-      state.todos = filters.active(state.todos)
-    }
-
-    return {
-      state,
-      addTodo,
-      removeTodo,
-      editTodo,
-      doneEdit,
-      cancelEdit,
-      removeCompleted
-    }
-  },
-
-  directives: {
-    'todo-focus': (el, { value }) => {
-      if (value) {
-        el.focus()
+      function doneEdit(todo) {
+        if (!state.editedTodo) {
+          return
+        }
+        state.editedTodo = null
+        todo.title = todo.title.trim()
+        if (!todo.title) {
+          removeTodo(todo)
+        }
       }
-    }
-  }
-}).mount('#app')
+
+      function cancelEdit(todo) {
+        state.editedTodo = null
+        todo.title = state.beforeEditCache
+      }
+
+      function removeCompleted() {
+        state.todos = filters.active(state.todos)
+      }
+
+      return {
+        state,
+        addTodo,
+        removeTodo,
+        editTodo,
+        doneEdit,
+        cancelEdit,
+        removeCompleted,
+      }
+    },
+
+    directives: {
+      'todo-focus': (el, { value }) => {
+        if (value) {
+          el.focus()
+        }
+      },
+    },
+  }).mount('#app')
 </script>
diff --git a/packages/vue/examples/composition/tree.html b/packages/vue/examples/composition/tree.html
index a80a8ac96..75330bf11 100644
--- a/packages/vue/examples/composition/tree.html
+++ b/packages/vue/examples/composition/tree.html
@@ -22,46 +22,46 @@
 </script>
 <!-- item script -->
 <script>
-const { reactive, computed, toRefs } = Vue
+  const { reactive, computed, toRefs } = Vue
 
-const TreeItem = {
-  name: 'TreeItem', // necessary for self-reference
-  template: '#item-template',
-  props: {
-    model: Object
-  },
-  setup(props) {
-    const state = reactive({
-      open: false,
-      isFolder: computed(() => {
-        return props.model.children && props.model.children.length
+  const TreeItem = {
+    name: 'TreeItem', // necessary for self-reference
+    template: '#item-template',
+    props: {
+      model: Object,
+    },
+    setup(props) {
+      const state = reactive({
+        open: false,
+        isFolder: computed(() => {
+          return props.model.children && props.model.children.length
+        }),
       })
-    })
 
-    function toggle() {
-      state.open = !state.open
-    }
-
-    function changeType() {
-      if (!state.isFolder) {
-        props.model.children = []
-        addChild()
-        state.open = true
+      function toggle() {
+        state.open = !state.open
       }
-    }
 
-    function addChild() {
-      props.model.children.push({ name: 'new stuff' })
-    }
+      function changeType() {
+        if (!state.isFolder) {
+          props.model.children = []
+          addChild()
+          state.open = true
+        }
+      }
 
-    return {
-      ...toRefs(state),
-      toggle,
-      changeType,
-      addChild
-    }
+      function addChild() {
+        props.model.children.push({ name: 'new stuff' })
+      }
+
+      return {
+        ...toRefs(state),
+        toggle,
+        changeType,
+        addChild,
+      }
+    },
   }
-}
 </script>
 
 <p>(You can double click on an item to turn it into a folder.)</p>
@@ -72,43 +72,37 @@ const TreeItem = {
 </ul>
 
 <script>
-const treeData = {
-  name: 'My Tree',
-  children: [
-    { name: 'hello' },
-    { name: 'wat' },
-    {
-      name: 'child folder',
-      children: [
-        {
-          name: 'child folder',
-          children: [
-            { name: 'hello' },
-            { name: 'wat' }
-          ]
-        },
-        { name: 'hello' },
-        { name: 'wat' },
-        {
-          name: 'child folder',
-          children: [
-            { name: 'hello' },
-            { name: 'wat' }
-          ]
-        }
-      ]
-    }
-  ]
-}
+  const treeData = {
+    name: 'My Tree',
+    children: [
+      { name: 'hello' },
+      { name: 'wat' },
+      {
+        name: 'child folder',
+        children: [
+          {
+            name: 'child folder',
+            children: [{ name: 'hello' }, { name: 'wat' }],
+          },
+          { name: 'hello' },
+          { name: 'wat' },
+          {
+            name: 'child folder',
+            children: [{ name: 'hello' }, { name: 'wat' }],
+          },
+        ],
+      },
+    ],
+  }
 
-Vue.createApp({
-  components: {
-    TreeItem
-  },
-  data: () => ({
-    treeData
-  })
-}).mount('#demo')
+  Vue.createApp({
+    components: {
+      TreeItem,
+    },
+    data: () => ({
+      treeData,
+    }),
+  }).mount('#demo')
 </script>
 
 <style>
diff --git a/packages/vue/examples/transition/list.html b/packages/vue/examples/transition/list.html
index 13392e674..986408e6d 100644
--- a/packages/vue/examples/transition/list.html
+++ b/packages/vue/examples/transition/list.html
@@ -6,78 +6,83 @@
   <button @click="reset">reset</button>
   <button @click="shuffle">shuffle</button>
   <transition-group tag="ul" name="fade" class="container">
-    <item v-for="item in items"
+    <item
+      v-for="item in items"
       class="item"
       :msg="item"
       :key="item"
-      @rm="remove(item)">
+      @rm="remove(item)"
+    >
     </item>
   </transition-group>
 </div>
 
 <script>
-const getInitialItems = () => [1, 2, 3, 4, 5]
-let id = getInitialItems().length + 1
+  const getInitialItems = () => [1, 2, 3, 4, 5]
+  let id = getInitialItems().length + 1
 
-const Item = {
-  props: ['msg'],
-  template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
-}
-
-Vue.createApp({
-  components: {
-    Item
-  },
-  data() {
-    return {
-      items: getInitialItems()
-    }
-  },
-  methods: {
-    insert () {
-      const i = Math.round(Math.random() * this.items.length)
-      this.items.splice(i, 0, id++)
-    },
-    reset () {
-      this.items = getInitialItems()
-    },
-    shuffle () {
-      this.items = _.shuffle(this.items)
-    },
-    remove (item) {
-      const i = this.items.indexOf(item)
-      if (i > -1) {
-        this.items.splice(i, 1)
-      }
-    }
+  const Item = {
+    props: ['msg'],
+    template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`,
   }
-}).mount('#app')
+
+  Vue.createApp({
+    components: {
+      Item,
+    },
+    data() {
+      return {
+        items: getInitialItems(),
+      }
+    },
+    methods: {
+      insert() {
+        const i = Math.round(Math.random() * this.items.length)
+        this.items.splice(i, 0, id++)
+      },
+      reset() {
+        this.items = getInitialItems()
+      },
+      shuffle() {
+        this.items = _.shuffle(this.items)
+      },
+      remove(item) {
+        const i = this.items.indexOf(item)
+        if (i > -1) {
+          this.items.splice(i, 1)
+        }
+      },
+    },
+  }).mount('#app')
 </script>
 
 <style>
-.container {
-  position: relative;
-  padding: 0;
-}
-.item {
-  width: 100%;
-  height: 30px;
-  background-color: #f3f3f3;
-  border: 1px solid #666;
-  box-sizing: border-box;
-}
-/* 1. declare transition */
-.fade-move, .fade-enter-active, .fade-leave-active {
-  transition: all .5s cubic-bezier(.55,0,.1,1);
-}
-/* 2. declare enter from and leave to state */
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-  transform: scaleY(0.01) translate(30px, 0);
-}
-/* 3. ensure leaving items are taken out of layout flow so that moving
+  .container {
+    position: relative;
+    padding: 0;
+  }
+  .item {
+    width: 100%;
+    height: 30px;
+    background-color: #f3f3f3;
+    border: 1px solid #666;
+    box-sizing: border-box;
+  }
+  /* 1. declare transition */
+  .fade-move,
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+  }
+  /* 2. declare enter from and leave to state */
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+    transform: scaleY(0.01) translate(30px, 0);
+  }
+  /* 3. ensure leaving items are taken out of layout flow so that moving
       animations can be calculated correctly. */
-.fade-leave-active {
-  position: absolute;
-}
+  .fade-leave-active {
+    position: absolute;
+  }
 </style>
diff --git a/packages/vue/examples/transition/modal.html b/packages/vue/examples/transition/modal.html
index 03180539a..96a16cfda 100644
--- a/packages/vue/examples/transition/modal.html
+++ b/packages/vue/examples/transition/modal.html
@@ -33,10 +33,10 @@
   </transition>
 </script>
 <script>
-const Modal = {
-  template: '#modal-template',
-  props: ['show']
-}
+  const Modal = {
+    template: '#modal-template',
+    props: ['show'],
+  }
 </script>
 
 <!-- modal container that lives outside of app root -->
@@ -56,57 +56,57 @@ const Modal = {
 </div>
 
 <script>
-Vue.createApp({
-  components: { Modal },
-  data: () => ({
-    showModal: false
-  })
-}).mount('#app')
+  Vue.createApp({
+    components: { Modal },
+    data: () => ({
+      showModal: false,
+    }),
+  }).mount('#app')
 </script>
 
 <style>
-.modal-mask {
-  position: fixed;
-  z-index: 9998;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, .5);
-  display: table;
-  transition: opacity .3s ease;
-}
+  .modal-mask {
+    position: fixed;
+    z-index: 9998;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: table;
+    transition: opacity 0.3s ease;
+  }
 
-.modal-wrapper {
-  display: table-cell;
-  vertical-align: middle;
-}
+  .modal-wrapper {
+    display: table-cell;
+    vertical-align: middle;
+  }
 
-.modal-container {
-  width: 300px;
-  margin: 0px auto;
-  padding: 20px 30px;
-  background-color: #fff;
-  border-radius: 2px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
-  transition: all .3s ease;
-  font-family: Helvetica, Arial, sans-serif;
-}
+  .modal-container {
+    width: 300px;
+    margin: 0px auto;
+    padding: 20px 30px;
+    background-color: #fff;
+    border-radius: 2px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+    transition: all 0.3s ease;
+    font-family: Helvetica, Arial, sans-serif;
+  }
 
-.modal-header h3 {
-  margin-top: 0;
-  color: #42b983;
-}
+  .modal-header h3 {
+    margin-top: 0;
+    color: #42b983;
+  }
 
-.modal-body {
-  margin: 20px 0;
-}
+  .modal-body {
+    margin: 20px 0;
+  }
 
-.modal-default-button {
-  float: right;
-}
+  .modal-default-button {
+    float: right;
+  }
 
-/*
+  /*
  * The following styles are auto-applied to elements with
  * transition="modal" when their visibility is toggled
  * by Vue.js.
@@ -115,17 +115,17 @@ Vue.createApp({
  * these styles.
  */
 
-.modal-enter-from {
-  opacity: 0;
-}
+  .modal-enter-from {
+    opacity: 0;
+  }
 
-.modal-leave-to {
-  opacity: 0;
-}
+  .modal-leave-to {
+    opacity: 0;
+  }
 
-.modal-enter-from .modal-container,
-.modal-leave-to .modal-container {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
+  .modal-enter-from .modal-container,
+  .modal-leave-to .modal-container {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
 </style>
diff --git a/packages/vue/index.mjs b/packages/vue/index.mjs
index 8b4361248..fcb9204cb 100644
--- a/packages/vue/index.mjs
+++ b/packages/vue/index.mjs
@@ -1 +1 @@
-export * from './index.js'
\ No newline at end of file
+export * from './index.js'
diff --git a/packages/vue/jsx-runtime/index.d.ts b/packages/vue/jsx-runtime/index.d.ts
index 9d022dd0c..a52ac66a0 100644
--- a/packages/vue/jsx-runtime/index.d.ts
+++ b/packages/vue/jsx-runtime/index.d.ts
@@ -1,4 +1,5 @@
-import type { VNode, ReservedProps, NativeElements } from '@vue/runtime-dom'
+/* eslint-disable @typescript-eslint/prefer-ts-expect-error */
+import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom'
 
 /**
  * JSX namespace for usage with @jsxImportsSource directive
diff --git a/packages/vue/jsx-runtime/index.mjs b/packages/vue/jsx-runtime/index.mjs
index 57dd60af6..e2528cba4 100644
--- a/packages/vue/jsx-runtime/index.mjs
+++ b/packages/vue/jsx-runtime/index.mjs
@@ -9,9 +9,4 @@ function jsx(type, props, key) {
   return h(type, props, children)
 }
 
-export {
-  Fragment,
-  jsx,
-  jsx as jsxs,
-  jsx as jsxDEV
-}
+export { Fragment, jsx, jsx as jsxs, jsx as jsxDEV }
diff --git a/packages/vue/jsx.d.ts b/packages/vue/jsx.d.ts
index cec81c564..1fa1e3266 100644
--- a/packages/vue/jsx.d.ts
+++ b/packages/vue/jsx.d.ts
@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/prefer-ts-expect-error */
 // global JSX namespace registration
 // somehow we have to copy=pase the jsx-runtime types here to make TypeScript happy
-import type { VNode, ReservedProps, NativeElements } from '@vue/runtime-dom'
+import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom'
 
 declare global {
   namespace JSX {
diff --git a/packages/vue/macros-global.d.ts b/packages/vue/macros-global.d.ts
deleted file mode 100644
index 9b6f5a539..000000000
--- a/packages/vue/macros-global.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
-  $ as _$,
-  $$ as _$$,
-  $ref as _$ref,
-  $shallowRef as _$shallowRef,
-  $computed as _$computed,
-  $customRef as _$customRef,
-  $toRef as _$toRef
-} from './macros'
-
-declare global {
-  const $: typeof _$
-  const $$: typeof _$$
-  const $ref: typeof _$ref
-  const $shallowRef: typeof _$shallowRef
-  const $computed: typeof _$computed
-  const $customRef: typeof _$customRef
-  const $toRef: typeof _$toRef
-}
diff --git a/packages/vue/macros.d.ts b/packages/vue/macros.d.ts
deleted file mode 100644
index 54fa154af..000000000
--- a/packages/vue/macros.d.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import {
-  Ref,
-  UnwrapRef,
-  ComputedRef,
-  WritableComputedOptions,
-  DebuggerOptions,
-  WritableComputedRef,
-  CustomRefFactory
-} from '@vue/runtime-dom'
-
-export declare const RefType: unique symbol
-
-export declare const enum RefTypes {
-  Ref = 1,
-  ComputedRef = 2,
-  WritableComputedRef = 3
-}
-
-type RefValue<T> = T extends null | undefined ? T : ReactiveVariable<T>
-
-type ReactiveVariable<T> = T & { [RefType]?: RefTypes.Ref }
-
-type ComputedRefValue<T> = T extends null | undefined ? T : ComputedVariable<T>
-
-type ComputedVariable<T> = T & { [RefType]?: RefTypes.ComputedRef }
-
-type WritableComputedRefValue<T> = T extends null | undefined
-  ? T
-  : WritableComputedVariable<T>
-
-type WritableComputedVariable<T> = T & {
-  [RefType]?: RefTypes.WritableComputedRef
-}
-
-type NormalObject<T extends object> = T & { [RefType]?: never }
-
-/**
- * Vue ref transform macro for binding refs as reactive variables.
- */
-export declare function $<T>(arg: ComputedRef<T>): ComputedRefValue<T>
-export declare function $<T>(
-  arg: WritableComputedRef<T>
-): WritableComputedRefValue<T>
-export declare function $<T>(arg: Ref<T>): RefValue<T>
-export declare function $<T extends object>(arg?: T): DestructureRefs<T>
-
-type DestructureRefs<T extends object> = {
-  [K in keyof T]: T[K] extends ComputedRef<infer V>
-    ? ComputedRefValue<V>
-    : T[K] extends WritableComputedRef<infer V>
-      ? WritableComputedRefValue<V>
-      : T[K] extends Ref<infer V>
-        ? RefValue<V>
-        : T[K]
-}
-
-/**
- * Vue ref transform macro for accessing underlying refs of reactive variables.
- */
-export declare function $$<T extends object>(arg: NormalObject<T>): ToRawRefs<T>
-export declare function $$<T>(value: RefValue<T>): Ref<T>
-export declare function $$<T>(value: ComputedRefValue<T>): ComputedRef<T>
-export declare function $$<T>(
-  value: WritableComputedRefValue<T>
-): WritableComputedRef<T>
-
-type ToRawRefs<T extends object> = {
-  [K in keyof T]: T[K] extends RefValue<infer V>
-    ? Ref<V>
-    : T[K] extends ComputedRefValue<infer V>
-      ? ComputedRef<V>
-      : T[K] extends WritableComputedRefValue<infer V>
-        ? WritableComputedRef<V>
-        : T[K] extends object
-          ? T[K] extends
-              | Function
-              | Map<any, any>
-              | Set<any>
-              | WeakMap<any, any>
-              | WeakSet<any>
-            ? T[K]
-            : ToRawRefs<T[K]>
-          : T[K]
-}
-
-export declare function $ref<T>(): RefValue<T | undefined>
-export declare function $ref<T>(arg: T | Ref<T>): RefValue<UnwrapRef<T>>
-
-export declare function $shallowRef<T>(): RefValue<T | undefined>
-export declare function $shallowRef<T>(arg: T): RefValue<T>
-
-export declare function $toRef<T extends object, K extends keyof T>(
-  object: T,
-  key: K
-): RefValue<T[K]>
-
-export declare function $toRef<T extends object, K extends keyof T>(
-  object: T,
-  key: K,
-  defaultValue: T[K]
-): RefValue<Exclude<T[K], undefined>>
-
-export declare function $customRef<T>(factory: CustomRefFactory<T>): RefValue<T>
-
-export declare function $computed<T>(
-  getter: () => T,
-  debuggerOptions?: DebuggerOptions
-): ComputedRefValue<T>
-export declare function $computed<T>(
-  options: WritableComputedOptions<T>,
-  debuggerOptions?: DebuggerOptions
-): WritableComputedRefValue<T>
diff --git a/packages/vue/package.json b/packages/vue/package.json
index edb21ad6f..1a063eefe 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue",
-  "version": "3.3.9",
+  "version": "3.5.11",
   "description": "The progressive JavaScript framework for building modern web UI.",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",
@@ -14,10 +14,7 @@
     "compiler-sfc",
     "server-renderer",
     "jsx-runtime",
-    "jsx.d.ts",
-    "macros.d.ts",
-    "macros-global.d.ts",
-    "ref-macros.d.ts"
+    "jsx.d.ts"
   ],
   "exports": {
     ".": {
@@ -28,6 +25,11 @@
       },
       "require": {
         "types": "./dist/vue.d.ts",
+        "node": {
+          "production": "./dist/vue.cjs.prod.js",
+          "development": "./dist/vue.cjs.js",
+          "default": "./index.js"
+        },
         "default": "./index.js"
       }
     },
@@ -65,10 +67,7 @@
     },
     "./jsx": "./jsx.d.ts",
     "./dist/*": "./dist/*",
-    "./package.json": "./package.json",
-    "./macros": "./macros.d.ts",
-    "./macros-global": "./macros-global.d.ts",
-    "./ref-macros": "./ref-macros.d.ts"
+    "./package.json": "./package.json"
   },
   "buildOptions": {
     "name": "Vue",
diff --git a/packages/vue/ref-macros.d.ts b/packages/vue/ref-macros.d.ts
deleted file mode 100644
index 206d0308a..000000000
--- a/packages/vue/ref-macros.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// TODO remove in 3.4
-import './macros-global'
diff --git a/packages/vue/server-renderer/index.mjs b/packages/vue/server-renderer/index.mjs
index 3e081c15a..ac614729c 100644
--- a/packages/vue/server-renderer/index.mjs
+++ b/packages/vue/server-renderer/index.mjs
@@ -1 +1 @@
-export * from '@vue/server-renderer'
\ No newline at end of file
+export * from '@vue/server-renderer'
diff --git a/packages/vue/src/dev.ts b/packages/vue/src/dev.ts
index 79f233ed9..a9ad81e3b 100644
--- a/packages/vue/src/dev.ts
+++ b/packages/vue/src/dev.ts
@@ -1,12 +1,11 @@
 import { initCustomFormatter } from '@vue/runtime-dom'
 
-export function initDev() {
+export function initDev(): void {
   if (__BROWSER__) {
-    /* istanbul ignore if */
     if (!__ESM_BUNDLER__) {
       console.info(
         `You are running a development build of Vue.\n` +
-          `Make sure to use the production build (*.prod.js) when deploying for production.`
+          `Make sure to use the production build (*.prod.js) when deploying for production.`,
       )
     }
 
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 8215be747..785f3fd4b 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,11 +1,25 @@
 // This entry is the "full-build" that includes both the runtime
 // and the compiler, and supports on-the-fly compilation of the template option.
 import { initDev } from './dev'
-import { compile, CompilerOptions, CompilerError } from '@vue/compiler-dom'
-import { registerRuntimeCompiler, RenderFunction, warn } from '@vue/runtime-dom'
+import {
+  type CompilerError,
+  type CompilerOptions,
+  compile,
+} from '@vue/compiler-dom'
+import {
+  type RenderFunction,
+  registerRuntimeCompiler,
+  warn,
+} from '@vue/runtime-dom'
 import * as runtimeDom from '@vue/runtime-dom'
-import { isString, NOOP, generateCodeFrame, extend } from '@vue/shared'
-import { InternalRenderFunction } from 'packages/runtime-core/src/component'
+import {
+  NOOP,
+  extend,
+  genCacheKey,
+  generateCodeFrame,
+  isString,
+} from '@vue/shared'
+import type { InternalRenderFunction } from 'packages/runtime-core/src/component'
 
 if (__DEV__) {
   initDev()
@@ -15,7 +29,7 @@ const compileCache: Record<string, RenderFunction> = Object.create(null)
 
 function compileToFunction(
   template: string | HTMLElement,
-  options?: CompilerOptions
+  options?: CompilerOptions,
 ): RenderFunction {
   if (!isString(template)) {
     if (template.nodeType) {
@@ -26,7 +40,7 @@ function compileToFunction(
     }
   }
 
-  const key = template
+  const key = genCacheKey(template, options)
   const cached = compileCache[key]
   if (cached) {
     return cached
@@ -48,9 +62,9 @@ function compileToFunction(
     {
       hoistStatic: true,
       onError: __DEV__ ? onError : undefined,
-      onWarn: __DEV__ ? e => onError(e, true) : NOOP
+      onWarn: __DEV__ ? e => onError(e, true) : NOOP,
     } as CompilerOptions,
-    options
+    options,
   )
 
   if (!opts.isCustomElement && typeof customElements !== 'undefined') {
@@ -68,7 +82,7 @@ function compileToFunction(
       generateCodeFrame(
         template as string,
         err.loc.start.offset,
-        err.loc.end.offset
+        err.loc.end.offset,
       )
     warn(codeFrame ? `${message}\n${codeFrame}` : message)
   }
diff --git a/packages/vue/src/runtime.ts b/packages/vue/src/runtime.ts
index 1452fceb0..76f5fc74e 100644
--- a/packages/vue/src/runtime.ts
+++ b/packages/vue/src/runtime.ts
@@ -9,7 +9,7 @@ if (__DEV__) {
 
 export * from '@vue/runtime-dom'
 
-export const compile = () => {
+export const compile = (): void => {
   if (__DEV__) {
     warn(
       `Runtime compilation is not supported in this build of Vue.` +
@@ -19,7 +19,7 @@ export const compile = () => {
             ? ` Use "vue.esm-browser.js" instead.`
             : __GLOBAL__
               ? ` Use "vue.global.js" instead.`
-              : ``) /* should not happen */
+              : ``) /* should not happen */,
     )
   }
 }
diff --git a/packages/vue/types/jsx-register.d.ts b/packages/vue/types/jsx-register.d.ts
deleted file mode 100644
index a626f798c..000000000
--- a/packages/vue/types/jsx-register.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// this is appended to the end of ../dist/vue.d.ts during build.
-// imports the global JSX namespace registration for compat.
-// TODO: remove in 3.4
-import '../jsx'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c60d3a96b..5ba6522bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,179 +1,270 @@
-lockfileVersion: '6.0'
+lockfileVersion: '9.0'
 
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+catalogs:
+  default:
+    '@babel/parser':
+      specifier: ^7.25.3
+      version: 7.25.3
+    '@babel/types':
+      specifier: ^7.25.2
+      version: 7.25.2
+    '@vitejs/plugin-vue':
+      specifier: ^5.1.2
+      version: 5.1.2
+    estree-walker:
+      specifier: ^2.0.2
+      version: 2.0.2
+    magic-string:
+      specifier: ^0.30.11
+      version: 0.30.11
+    source-map-js:
+      specifier: ^1.2.0
+      version: 1.2.0
+    vite:
+      specifier: ^5.4.0
+      version: 5.4.0
+
 importers:
 
   .:
     devDependencies:
       '@babel/parser':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: 'catalog:'
+        version: 7.25.3
       '@babel/types':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: 'catalog:'
+        version: 7.25.2
       '@rollup/plugin-alias':
-        specifier: ^5.0.1
-        version: 5.0.1(rollup@4.1.4)
+        specifier: ^5.1.1
+        version: 5.1.1(rollup@4.24.0)
       '@rollup/plugin-commonjs':
-        specifier: ^25.0.7
-        version: 25.0.7(rollup@4.1.4)
+        specifier: ^28.0.0
+        version: 28.0.0(rollup@4.24.0)
       '@rollup/plugin-json':
-        specifier: ^6.0.1
-        version: 6.0.1(rollup@4.1.4)
+        specifier: ^6.1.0
+        version: 6.1.0(rollup@4.24.0)
       '@rollup/plugin-node-resolve':
-        specifier: ^15.2.3
-        version: 15.2.3(rollup@4.1.4)
+        specifier: ^15.3.0
+        version: 15.3.0(rollup@4.24.0)
       '@rollup/plugin-replace':
-        specifier: ^5.0.4
-        version: 5.0.4(rollup@4.1.4)
-      '@rollup/plugin-terser':
-        specifier: ^0.4.4
-        version: 0.4.4(rollup@4.1.4)
+        specifier: 5.0.4
+        version: 5.0.4(rollup@4.24.0)
+      '@swc/core':
+        specifier: ^1.7.28
+        version: 1.7.28
       '@types/hash-sum':
         specifier: ^1.0.2
         version: 1.0.2
       '@types/node':
-        specifier: ^20.10.0
-        version: 20.10.0
-      '@typescript-eslint/parser':
-        specifier: ^6.13.0
-        version: 6.13.0(eslint@8.54.0)(typescript@5.2.2)
-      '@vitest/coverage-istanbul':
-        specifier: ^0.34.6
-        version: 0.34.6(vitest@0.34.6)
+        specifier: ^20.16.10
+        version: 20.16.10
+      '@types/semver':
+        specifier: ^7.5.8
+        version: 7.5.8
+      '@types/serve-handler':
+        specifier: ^6.1.4
+        version: 6.1.4
+      '@vitest/coverage-v8':
+        specifier: ^2.1.1
+        version: 2.1.1(vitest@2.1.1(@types/node@20.16.10)(jsdom@25.0.0)(sass@1.79.4))
+      '@vitest/eslint-plugin':
+        specifier: ^1.0.1
+        version: 1.1.6(@typescript-eslint/utils@8.8.0(eslint@9.12.0)(typescript@5.6.2))(eslint@9.12.0)(typescript@5.6.2)(vitest@2.1.1(@types/node@20.16.10)(jsdom@25.0.0)(sass@1.79.4))
       '@vue/consolidate':
-        specifier: 0.17.3
-        version: 0.17.3
+        specifier: 1.0.0
+        version: 1.0.0
       conventional-changelog-cli:
-        specifier: ^4.1.0
-        version: 4.1.0
+        specifier: ^5.0.0
+        version: 5.0.0(conventional-commits-filter@5.0.0)
       enquirer:
         specifier: ^2.4.1
         version: 2.4.1
       esbuild:
-        specifier: ^0.19.5
-        version: 0.19.5
+        specifier: ^0.24.0
+        version: 0.24.0
       esbuild-plugin-polyfill-node:
         specifier: ^0.3.0
-        version: 0.3.0(esbuild@0.19.5)
+        version: 0.3.0(esbuild@0.24.0)
       eslint:
-        specifier: ^8.54.0
-        version: 8.54.0
-      eslint-plugin-jest:
-        specifier: ^27.6.0
-        version: 27.6.0(eslint@8.54.0)(typescript@5.2.2)
+        specifier: ^9.12.0
+        version: 9.12.0
+      eslint-plugin-import-x:
+        specifier: ^4.3.1
+        version: 4.3.1(eslint@9.12.0)(typescript@5.6.2)
       estree-walker:
-        specifier: ^2.0.2
+        specifier: 'catalog:'
         version: 2.0.2
-      execa:
-        specifier: ^8.0.1
-        version: 8.0.1
       jsdom:
-        specifier: ^22.1.0
-        version: 22.1.0
+        specifier: ^25.0.0
+        version: 25.0.0
       lint-staged:
-        specifier: ^15.1.0
-        version: 15.1.0
+        specifier: ^15.2.10
+        version: 15.2.10
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
       magic-string:
-        specifier: ^0.30.5
-        version: 0.30.5
+        specifier: ^0.30.11
+        version: 0.30.11
       markdown-table:
         specifier: ^3.0.3
         version: 3.0.3
       marked:
-        specifier: ^9.1.6
-        version: 9.1.6
-      minimist:
-        specifier: ^1.2.8
-        version: 1.2.8
-      npm-run-all:
-        specifier: ^4.1.5
-        version: 4.1.5
+        specifier: 13.0.3
+        version: 13.0.3
+      npm-run-all2:
+        specifier: ^6.2.3
+        version: 6.2.3
       picocolors:
-        specifier: ^1.0.0
-        version: 1.0.0
+        specifier: ^1.1.0
+        version: 1.1.0
       prettier:
-        specifier: ^3.1.0
-        version: 3.1.0
+        specifier: ^3.3.3
+        version: 3.3.3
       pretty-bytes:
         specifier: ^6.1.1
         version: 6.1.1
       pug:
-        specifier: ^3.0.2
-        version: 3.0.2
+        specifier: ^3.0.3
+        version: 3.0.3
       puppeteer:
-        specifier: ~21.5.2
-        version: 21.5.2(typescript@5.2.2)
+        specifier: ~23.3.0
+        version: 23.3.0(typescript@5.6.2)
       rimraf:
-        specifier: ^5.0.5
-        version: 5.0.5
+        specifier: ^6.0.1
+        version: 6.0.1
       rollup:
-        specifier: ^4.1.4
-        version: 4.1.4
+        specifier: ^4.24.0
+        version: 4.24.0
       rollup-plugin-dts:
-        specifier: ^6.1.0
-        version: 6.1.0(rollup@4.1.4)(typescript@5.2.2)
+        specifier: ^6.1.1
+        version: 6.1.1(rollup@4.24.0)(typescript@5.6.2)
       rollup-plugin-esbuild:
-        specifier: ^6.1.0
-        version: 6.1.0(esbuild@0.19.5)(rollup@4.1.4)
+        specifier: ^6.1.1
+        version: 6.1.1(esbuild@0.24.0)(rollup@4.24.0)
       rollup-plugin-polyfill-node:
-        specifier: ^0.12.0
-        version: 0.12.0(rollup@4.1.4)
+        specifier: ^0.13.0
+        version: 0.13.0(rollup@4.24.0)
       semver:
-        specifier: ^7.5.4
-        version: 7.5.4
+        specifier: ^7.6.3
+        version: 7.6.3
       serve:
-        specifier: ^14.2.1
-        version: 14.2.1
+        specifier: ^14.2.3
+        version: 14.2.3
+      serve-handler:
+        specifier: ^6.1.5
+        version: 6.1.5
       simple-git-hooks:
-        specifier: ^2.9.0
-        version: 2.9.0
-      terser:
-        specifier: ^5.22.0
-        version: 5.22.0
+        specifier: ^2.11.1
+        version: 2.11.1
       todomvc-app-css:
         specifier: ^2.4.3
         version: 2.4.3
       tslib:
-        specifier: ^2.6.2
-        version: 2.6.2
-      tsx:
-        specifier: ^4.5.0
-        version: 4.5.0
+        specifier: ^2.7.0
+        version: 2.7.0
       typescript:
-        specifier: ^5.2.2
-        version: 5.2.2
+        specifier: ~5.6.2
+        version: 5.6.2
+      typescript-eslint:
+        specifier: ^8.8.0
+        version: 8.8.0(eslint@9.12.0)(typescript@5.6.2)
       vite:
-        specifier: ^5.0.0
-        version: 5.0.0(@types/node@20.10.0)(terser@5.22.0)
+        specifier: 'catalog:'
+        version: 5.4.0(@types/node@20.16.10)(sass@1.79.4)
       vitest:
-        specifier: ^0.34.6
-        version: 0.34.6(jsdom@22.1.0)(terser@5.22.0)
+        specifier: ^2.1.1
+        version: 2.1.1(@types/node@20.16.10)(jsdom@25.0.0)(sass@1.79.4)
+
+  packages-private/dts-built-test:
+    dependencies:
+      '@vue/reactivity':
+        specifier: workspace:*
+        version: link:../../packages/reactivity
+      '@vue/shared':
+        specifier: workspace:*
+        version: link:../../packages/shared
+      vue:
+        specifier: workspace:*
+        version: link:../../packages/vue
+
+  packages-private/dts-test:
+    dependencies:
+      dts-built-test:
+        specifier: workspace:*
+        version: link:../dts-built-test
+      vue:
+        specifier: workspace:*
+        version: link:../../packages/vue
+
+  packages-private/sfc-playground:
+    dependencies:
+      '@vue/repl':
+        specifier: ^4.4.2
+        version: 4.4.2
+      file-saver:
+        specifier: ^2.0.5
+        version: 2.0.5
+      jszip:
+        specifier: ^3.10.1
+        version: 3.10.1
+      vue:
+        specifier: workspace:*
+        version: link:../../packages/vue
+    devDependencies:
+      '@vitejs/plugin-vue':
+        specifier: 'catalog:'
+        version: 5.1.2(vite@5.4.0(@types/node@20.16.10)(sass@1.79.4))(vue@packages+vue)
+      vite:
+        specifier: 'catalog:'
+        version: 5.4.0(@types/node@20.16.10)(sass@1.79.4)
+
+  packages-private/template-explorer:
+    dependencies:
+      monaco-editor:
+        specifier: ^0.52.0
+        version: 0.52.0
+      source-map-js:
+        specifier: ^1.2.1
+        version: 1.2.1
+
+  packages-private/vite-debug:
+    devDependencies:
+      '@vitejs/plugin-vue':
+        specifier: 'catalog:'
+        version: 5.1.2(vite@5.4.0(@types/node@20.16.10)(sass@1.79.4))(vue@packages+vue)
+      vite:
+        specifier: 'catalog:'
+        version: 5.4.0(@types/node@20.16.10)(sass@1.79.4)
+      vue:
+        specifier: workspace:*
+        version: link:../../packages/vue
 
   packages/compiler-core:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: 'catalog:'
+        version: 7.25.3
       '@vue/shared':
         specifier: workspace:*
         version: link:../shared
+      entities:
+        specifier: ^4.5.0
+        version: 4.5.0
       estree-walker:
-        specifier: ^2.0.2
+        specifier: 'catalog:'
         version: 2.0.2
       source-map-js:
-        specifier: ^1.0.2
-        version: 1.0.2
+        specifier: 'catalog:'
+        version: 1.2.0
     devDependencies:
       '@babel/types':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: 'catalog:'
+        version: 7.25.2
 
   packages/compiler-dom:
     dependencies:
@@ -187,8 +278,8 @@ importers:
   packages/compiler-sfc:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: 'catalog:'
+        version: 7.25.3
       '@vue/compiler-core':
         specifier: workspace:*
         version: link:../compiler-core
@@ -198,55 +289,52 @@ importers:
       '@vue/compiler-ssr':
         specifier: workspace:*
         version: link:../compiler-ssr
-      '@vue/reactivity-transform':
-        specifier: workspace:*
-        version: link:../reactivity-transform
       '@vue/shared':
         specifier: workspace:*
         version: link:../shared
       estree-walker:
-        specifier: ^2.0.2
+        specifier: 'catalog:'
         version: 2.0.2
       magic-string:
-        specifier: ^0.30.5
-        version: 0.30.5
+        specifier: 'catalog:'
+        version: 0.30.11
       postcss:
-        specifier: ^8.4.31
-        version: 8.4.31
+        specifier: ^8.4.47
+        version: 8.4.47
       source-map-js:
-        specifier: ^1.0.2
-        version: 1.0.2
+        specifier: 'catalog:'
+        version: 1.2.0
     devDependencies:
       '@babel/types':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: 'catalog:'
+        version: 7.25.2
       '@vue/consolidate':
-        specifier: ^0.17.3
-        version: 0.17.3
+        specifier: ^1.0.0
+        version: 1.0.0
       hash-sum:
         specifier: ^2.0.0
         version: 2.0.0
       lru-cache:
-        specifier: ^10.1.0
+        specifier: 10.1.0
         version: 10.1.0
       merge-source-map:
         specifier: ^1.1.0
         version: 1.1.0
       minimatch:
-        specifier: ^9.0.3
-        version: 9.0.3
+        specifier: ~9.0.5
+        version: 9.0.5
       postcss-modules:
-        specifier: ^4.3.1
-        version: 4.3.1(postcss@8.4.31)
+        specifier: ^6.0.0
+        version: 6.0.0(postcss@8.4.47)
       postcss-selector-parser:
-        specifier: ^6.0.13
-        version: 6.0.13
+        specifier: ^6.1.2
+        version: 6.1.2
       pug:
-        specifier: ^3.0.2
-        version: 3.0.2
+        specifier: ^3.0.3
+        version: 3.0.3
       sass:
-        specifier: ^1.69.5
-        version: 1.69.5
+        specifier: ^1.79.4
+        version: 1.79.4
 
   packages/compiler-ssr:
     dependencies:
@@ -257,58 +345,12 @@ importers:
         specifier: workspace:*
         version: link:../shared
 
-  packages/dts-built-test:
-    dependencies:
-      '@vue/reactivity':
-        specifier: workspace:*
-        version: link:../reactivity
-      '@vue/shared':
-        specifier: workspace:*
-        version: link:../shared
-      vue:
-        specifier: workspace:*
-        version: link:../vue
-
-  packages/dts-test:
-    dependencies:
-      '@vue/dts-built-test':
-        specifier: workspace:*
-        version: link:../dts-built-test
-      vue:
-        specifier: workspace:*
-        version: link:../vue
-
   packages/reactivity:
     dependencies:
       '@vue/shared':
         specifier: workspace:*
         version: link:../shared
 
-  packages/reactivity-transform:
-    dependencies:
-      '@babel/parser':
-        specifier: ^7.23.4
-        version: 7.23.4
-      '@vue/compiler-core':
-        specifier: workspace:*
-        version: link:../compiler-core
-      '@vue/shared':
-        specifier: workspace:*
-        version: link:../shared
-      estree-walker:
-        specifier: ^2.0.2
-        version: 2.0.2
-      magic-string:
-        specifier: ^0.30.5
-        version: 0.30.5
-    devDependencies:
-      '@babel/core':
-        specifier: ^7.23.3
-        version: 7.23.3
-      '@babel/types':
-        specifier: ^7.23.4
-        version: 7.23.4
-
   packages/runtime-core:
     dependencies:
       '@vue/reactivity':
@@ -320,6 +362,9 @@ importers:
 
   packages/runtime-dom:
     dependencies:
+      '@vue/reactivity':
+        specifier: workspace:*
+        version: link:../reactivity
       '@vue/runtime-core':
         specifier: workspace:*
         version: link:../runtime-core
@@ -327,8 +372,12 @@ importers:
         specifier: workspace:*
         version: link:../shared
       csstype:
-        specifier: ^3.1.2
-        version: 3.1.2
+        specifier: ^3.1.3
+        version: 3.1.3
+    devDependencies:
+      '@types/trusted-types':
+        specifier: ^2.0.7
+        version: 2.0.7
 
   packages/runtime-test:
     dependencies:
@@ -351,39 +400,8 @@ importers:
         specifier: workspace:*
         version: link:../vue
 
-  packages/sfc-playground:
-    dependencies:
-      '@vue/repl':
-        specifier: ^3.0.0
-        version: 3.0.0
-      file-saver:
-        specifier: ^2.0.5
-        version: 2.0.5
-      jszip:
-        specifier: ^3.10.1
-        version: 3.10.1
-      vue:
-        specifier: workspace:*
-        version: link:../vue
-    devDependencies:
-      '@vitejs/plugin-vue':
-        specifier: ^4.4.0
-        version: 4.4.0(vite@5.0.0)(vue@packages+vue)
-      vite:
-        specifier: ^5.0.0
-        version: 5.0.0(@types/node@20.10.0)(terser@5.22.0)
-
   packages/shared: {}
 
-  packages/template-explorer:
-    dependencies:
-      monaco-editor:
-        specifier: ^0.44.0
-        version: 0.44.0
-      source-map-js:
-        specifier: ^1.0.2
-        version: 1.0.2
-
   packages/vue:
     dependencies:
       '@vue/compiler-dom':
@@ -403,826 +421,474 @@ importers:
         version: link:../shared
       typescript:
         specifier: '*'
-        version: 5.2.2
+        version: 5.5.4
 
   packages/vue-compat:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: 'catalog:'
+        version: 7.25.3
       estree-walker:
-        specifier: ^2.0.2
+        specifier: 'catalog:'
         version: 2.0.2
       source-map-js:
-        specifier: ^1.0.2
-        version: 1.0.2
+        specifier: 'catalog:'
+        version: 1.2.0
       vue:
         specifier: workspace:*
         version: link:../vue
 
 packages:
 
-  /@aashutoshrathi/word-wrap@1.2.6:
-    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /@ampproject/remapping@2.2.1:
-    resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.20
-    dev: true
 
-  /@babel/code-frame@7.22.13:
-    resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
-    engines: {node: '>=6.9.0'}
-    requiresBuild: true
-    dependencies:
-      '@babel/highlight': 7.22.20
-      chalk: 2.4.2
-    dev: true
-
-  /@babel/compat-data@7.23.2:
-    resolution: {integrity: sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
-  /@babel/core@7.23.3:
-    resolution: {integrity: sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@ampproject/remapping': 2.2.1
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.3
-      '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.3)
-      '@babel/helpers': 7.23.2
-      '@babel/parser': 7.23.4
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.3
-      '@babel/types': 7.23.4
-      convert-source-map: 2.0.0
-      debug: 4.3.4
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/generator@7.23.3:
-    resolution: {integrity: sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.4
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.20
-      jsesc: 2.5.2
-    dev: true
-
-  /@babel/helper-compilation-targets@7.22.15:
-    resolution: {integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/compat-data': 7.23.2
-      '@babel/helper-validator-option': 7.22.15
-      browserslist: 4.22.1
-      lru-cache: 5.1.1
-      semver: 6.3.1
-    dev: true
-
-  /@babel/helper-environment-visitor@7.22.20:
-    resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
-  /@babel/helper-function-name@7.23.0:
-    resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.22.15
-      '@babel/types': 7.23.4
-    dev: true
-
-  /@babel/helper-hoist-variables@7.22.5:
-    resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.4
-    dev: true
-
-  /@babel/helper-module-imports@7.22.15:
-    resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.4
-    dev: true
-
-  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.3):
-    resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-module-imports': 7.22.15
-      '@babel/helper-simple-access': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.20
-    dev: true
-
-  /@babel/helper-simple-access@7.22.5:
-    resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.4
-    dev: true
-
-  /@babel/helper-split-export-declaration@7.22.6:
-    resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.4
-    dev: true
-
-  /@babel/helper-string-parser@7.23.4:
-    resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
+  '@babel/code-frame@7.24.7':
+    resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helper-validator-identifier@7.22.20:
-    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
+  '@babel/helper-string-parser@7.24.8':
+    resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
     engines: {node: '>=6.9.0'}
-    requiresBuild: true
 
-  /@babel/helper-validator-option@7.22.15:
-    resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==}
+  '@babel/helper-validator-identifier@7.24.7':
+    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
-  /@babel/helpers@7.23.2:
-    resolution: {integrity: sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==}
+  '@babel/highlight@7.24.7':
+    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
     engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.3
-      '@babel/types': 7.23.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /@babel/highlight@7.22.20:
-    resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
-    engines: {node: '>=6.9.0'}
-    requiresBuild: true
-    dependencies:
-      '@babel/helper-validator-identifier': 7.22.20
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-    dev: true
-
-  /@babel/parser@7.23.4:
-    resolution: {integrity: sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==}
+  '@babel/parser@7.25.3':
+    resolution: {integrity: sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
-    dependencies:
-      '@babel/types': 7.23.4
 
-  /@babel/template@7.22.15:
-    resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
+  '@babel/types@7.25.2':
+    resolution: {integrity: sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==}
     engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.22.13
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
-    dev: true
 
-  /@babel/traverse@7.23.3:
-    resolution: {integrity: sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.3
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
-      debug: 4.3.4
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+  '@bcoe/v8-coverage@0.2.3':
+    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
-  /@babel/types@7.23.4:
-    resolution: {integrity: sha512-7uIFwVYpoplT5jp/kVv6EF93VaJ8H+Yn5IczYiaAi98ajzjfoZfslet/e0sLh+wVBjb2qqIut1b0S26VSafsSQ==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-string-parser': 7.23.4
-      '@babel/helper-validator-identifier': 7.22.20
-      to-fast-properties: 2.0.0
+  '@conventional-changelog/git-client@1.0.1':
+    resolution: {integrity: sha512-PJEqBwAleffCMETaVm/fUgHldzBE35JFk3/9LL6NUA5EXa3qednu+UT6M7E5iBu3zIQZCULYIiZ90fBYHt6xUw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      conventional-commits-filter: ^5.0.0
+      conventional-commits-parser: ^6.0.0
+    peerDependenciesMeta:
+      conventional-commits-filter:
+        optional: true
+      conventional-commits-parser:
+        optional: true
 
-  /@esbuild/android-arm64@0.18.20:
-    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/aix-ppc64@0.24.0':
+    resolution: {integrity: sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.21.5':
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/android-arm64@0.19.5:
-    resolution: {integrity: sha512-5d1OkoJxnYQfmC+Zd8NBFjkhyCNYwM4n9ODrycTFY6Jk1IGiZ+tjVJDDSwDt77nK+tfpGP4T50iMtVi4dEGzhQ==}
-    engines: {node: '>=12'}
+  '@esbuild/android-arm64@0.24.0':
+    resolution: {integrity: sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/android-arm@0.18.20:
-    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
+  '@esbuild/android-arm@0.21.5':
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/android-arm@0.19.5:
-    resolution: {integrity: sha512-bhvbzWFF3CwMs5tbjf3ObfGqbl/17ict2/uwOSfr3wmxDE6VdS2GqY/FuzIPe0q0bdhj65zQsvqfArI9MY6+AA==}
-    engines: {node: '>=12'}
+  '@esbuild/android-arm@0.24.0':
+    resolution: {integrity: sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==}
+    engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/android-x64@0.18.20:
-    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
+  '@esbuild/android-x64@0.21.5':
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/android-x64@0.19.5:
-    resolution: {integrity: sha512-9t+28jHGL7uBdkBjL90QFxe7DVA+KGqWlHCF8ChTKyaKO//VLuoBricQCgwhOjA1/qOczsw843Fy4cbs4H3DVA==}
-    engines: {node: '>=12'}
+  '@esbuild/android-x64@0.24.0':
+    resolution: {integrity: sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/darwin-arm64@0.18.20:
-    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
+  '@esbuild/darwin-arm64@0.21.5':
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/darwin-arm64@0.19.5:
-    resolution: {integrity: sha512-mvXGcKqqIqyKoxq26qEDPHJuBYUA5KizJncKOAf9eJQez+L9O+KfvNFu6nl7SCZ/gFb2QPaRqqmG0doSWlgkqw==}
-    engines: {node: '>=12'}
+  '@esbuild/darwin-arm64@0.24.0':
+    resolution: {integrity: sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/darwin-x64@0.18.20:
-    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
+  '@esbuild/darwin-x64@0.21.5':
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/darwin-x64@0.19.5:
-    resolution: {integrity: sha512-Ly8cn6fGLNet19s0X4unjcniX24I0RqjPv+kurpXabZYSXGM4Pwpmf85WHJN3lAgB8GSth7s5A0r856S+4DyiA==}
-    engines: {node: '>=12'}
+  '@esbuild/darwin-x64@0.24.0':
+    resolution: {integrity: sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/freebsd-arm64@0.18.20:
-    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
+  '@esbuild/freebsd-arm64@0.21.5':
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/freebsd-arm64@0.19.5:
-    resolution: {integrity: sha512-GGDNnPWTmWE+DMchq1W8Sd0mUkL+APvJg3b11klSGUDvRXh70JqLAO56tubmq1s2cgpVCSKYywEiKBfju8JztQ==}
-    engines: {node: '>=12'}
+  '@esbuild/freebsd-arm64@0.24.0':
+    resolution: {integrity: sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/freebsd-x64@0.18.20:
-    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
+  '@esbuild/freebsd-x64@0.21.5':
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/freebsd-x64@0.19.5:
-    resolution: {integrity: sha512-1CCwDHnSSoA0HNwdfoNY0jLfJpd7ygaLAp5EHFos3VWJCRX9DMwWODf96s9TSse39Br7oOTLryRVmBoFwXbuuQ==}
-    engines: {node: '>=12'}
+  '@esbuild/freebsd-x64@0.24.0':
+    resolution: {integrity: sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-arm64@0.18.20:
-    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
+  '@esbuild/linux-arm64@0.21.5':
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-arm64@0.19.5:
-    resolution: {integrity: sha512-o3vYippBmSrjjQUCEEiTZ2l+4yC0pVJD/Dl57WfPwwlvFkrxoSO7rmBZFii6kQB3Wrn/6GwJUPLU5t52eq2meA==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-arm64@0.24.0':
+    resolution: {integrity: sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-arm@0.18.20:
-    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
+  '@esbuild/linux-arm@0.21.5':
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-arm@0.19.5:
-    resolution: {integrity: sha512-lrWXLY/vJBzCPC51QN0HM71uWgIEpGSjSZZADQhq7DKhPcI6NH1IdzjfHkDQws2oNpJKpR13kv7/pFHBbDQDwQ==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-arm@0.24.0':
+    resolution: {integrity: sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==}
+    engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-ia32@0.18.20:
-    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
+  '@esbuild/linux-ia32@0.21.5':
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-ia32@0.19.5:
-    resolution: {integrity: sha512-MkjHXS03AXAkNp1KKkhSKPOCYztRtK+KXDNkBa6P78F8Bw0ynknCSClO/ztGszILZtyO/lVKpa7MolbBZ6oJtQ==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-ia32@0.24.0':
+    resolution: {integrity: sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==}
+    engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-loong64@0.18.20:
-    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
+  '@esbuild/linux-loong64@0.21.5':
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-loong64@0.19.5:
-    resolution: {integrity: sha512-42GwZMm5oYOD/JHqHska3Jg0r+XFb/fdZRX+WjADm3nLWLcIsN27YKtqxzQmGNJgu0AyXg4HtcSK9HuOk3v1Dw==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-loong64@0.24.0':
+    resolution: {integrity: sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==}
+    engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-mips64el@0.18.20:
-    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
+  '@esbuild/linux-mips64el@0.21.5':
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-mips64el@0.19.5:
-    resolution: {integrity: sha512-kcjndCSMitUuPJobWCnwQ9lLjiLZUR3QLQmlgaBfMX23UEa7ZOrtufnRds+6WZtIS9HdTXqND4yH8NLoVVIkcg==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-mips64el@0.24.0':
+    resolution: {integrity: sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==}
+    engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-ppc64@0.18.20:
-    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
+  '@esbuild/linux-ppc64@0.21.5':
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-ppc64@0.19.5:
-    resolution: {integrity: sha512-yJAxJfHVm0ZbsiljbtFFP1BQKLc8kUF6+17tjQ78QjqjAQDnhULWiTA6u0FCDmYT1oOKS9PzZ2z0aBI+Mcyj7Q==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-ppc64@0.24.0':
+    resolution: {integrity: sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==}
+    engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-riscv64@0.18.20:
-    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
+  '@esbuild/linux-riscv64@0.21.5':
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-riscv64@0.19.5:
-    resolution: {integrity: sha512-5u8cIR/t3gaD6ad3wNt1MNRstAZO+aNyBxu2We8X31bA8XUNyamTVQwLDA1SLoPCUehNCymhBhK3Qim1433Zag==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-riscv64@0.24.0':
+    resolution: {integrity: sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==}
+    engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-s390x@0.18.20:
-    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
+  '@esbuild/linux-s390x@0.21.5':
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-s390x@0.19.5:
-    resolution: {integrity: sha512-Z6JrMyEw/EmZBD/OFEFpb+gao9xJ59ATsoTNlj39jVBbXqoZm4Xntu6wVmGPB/OATi1uk/DB+yeDPv2E8PqZGw==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-s390x@0.24.0':
+    resolution: {integrity: sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==}
+    engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-x64@0.18.20:
-    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
+  '@esbuild/linux-x64@0.21.5':
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-x64@0.19.5:
-    resolution: {integrity: sha512-psagl+2RlK1z8zWZOmVdImisMtrUxvwereIdyJTmtmHahJTKb64pAcqoPlx6CewPdvGvUKe2Jw+0Z/0qhSbG1A==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-x64@0.24.0':
+    resolution: {integrity: sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/netbsd-x64@0.18.20:
-    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/netbsd-x64@0.19.5:
-    resolution: {integrity: sha512-kL2l+xScnAy/E/3119OggX8SrWyBEcqAh8aOY1gr4gPvw76la2GlD4Ymf832UCVbmuWeTf2adkZDK+h0Z/fB4g==}
-    engines: {node: '>=12'}
+  '@esbuild/netbsd-x64@0.24.0':
+    resolution: {integrity: sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/openbsd-x64@0.18.20:
-    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
+  '@esbuild/openbsd-arm64@0.24.0':
+    resolution: {integrity: sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/openbsd-x64@0.19.5:
-    resolution: {integrity: sha512-sPOfhtzFufQfTBgRnE1DIJjzsXukKSvZxloZbkJDG383q0awVAq600pc1nfqBcl0ice/WN9p4qLc39WhBShRTA==}
-    engines: {node: '>=12'}
+  '@esbuild/openbsd-x64@0.24.0':
+    resolution: {integrity: sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/sunos-x64@0.18.20:
-    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
+  '@esbuild/sunos-x64@0.21.5':
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/sunos-x64@0.19.5:
-    resolution: {integrity: sha512-dGZkBXaafuKLpDSjKcB0ax0FL36YXCvJNnztjKV+6CO82tTYVDSH2lifitJ29jxRMoUhgkg9a+VA/B03WK5lcg==}
-    engines: {node: '>=12'}
+  '@esbuild/sunos-x64@0.24.0':
+    resolution: {integrity: sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/win32-arm64@0.18.20:
-    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
+  '@esbuild/win32-arm64@0.21.5':
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/win32-arm64@0.19.5:
-    resolution: {integrity: sha512-dWVjD9y03ilhdRQ6Xig1NWNgfLtf2o/STKTS+eZuF90fI2BhbwD6WlaiCGKptlqXlURVB5AUOxUj09LuwKGDTg==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-arm64@0.24.0':
+    resolution: {integrity: sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/win32-ia32@0.18.20:
-    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
+  '@esbuild/win32-ia32@0.21.5':
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/win32-ia32@0.19.5:
-    resolution: {integrity: sha512-4liggWIA4oDgUxqpZwrDhmEfAH4d0iljanDOK7AnVU89T6CzHon/ony8C5LeOdfgx60x5cnQJFZwEydVlYx4iw==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-ia32@0.24.0':
+    resolution: {integrity: sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==}
+    engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/win32-x64@0.18.20:
-    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/win32-x64@0.19.5:
-    resolution: {integrity: sha512-czTrygUsB/jlM8qEW5MD8bgYU2Xg14lo6kBDXW6HdxKjh8M5PzETGiSHaz9MtbXBYDloHNUAUW2tMiKW4KM9Mw==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-x64@0.24.0':
+    resolution: {integrity: sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.54.0):
+  '@eslint-community/eslint-utils@4.4.0':
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-    dependencies:
-      eslint: 8.54.0
-      eslint-visitor-keys: 3.4.3
-    dev: true
 
-  /@eslint-community/regexpp@4.9.1:
-    resolution: {integrity: sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==}
+  '@eslint-community/regexpp@4.11.0':
+    resolution: {integrity: sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-    dev: true
 
-  /@eslint/eslintrc@2.1.3:
-    resolution: {integrity: sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 9.6.1
-      globals: 13.23.0
-      ignore: 5.2.4
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+  '@eslint/config-array@0.18.0':
+    resolution: {integrity: sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /@eslint/js@8.54.0:
-    resolution: {integrity: sha512-ut5V+D+fOoWPgGGNj83GGjnntO39xDy6DWxO0wb7Jp3DcMX0TfIqdzHF85VTQkerdyGmuuMD9AKAo5KiNlf/AQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
+  '@eslint/core@0.6.0':
+    resolution: {integrity: sha512-8I2Q8ykA4J0x0o7cg67FPVnehcqWTBehu/lmY+bolPFHGjh49YzGBMXTvpqVgEbBdvNCSxj6iFgiIyHzf03lzg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /@humanwhocodes/config-array@0.11.13:
-    resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
-    engines: {node: '>=10.10.0'}
-    dependencies:
-      '@humanwhocodes/object-schema': 2.0.1
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+  '@eslint/eslintrc@3.1.0':
+    resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /@humanwhocodes/module-importer@1.0.1:
+  '@eslint/js@9.12.0':
+    resolution: {integrity: sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.4':
+    resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.2.0':
+    resolution: {integrity: sha512-vH9PiIMMwvhCx31Af3HiGzsVNULDbyVkHXwlemn/B0TFj/00ho3y55efXrUZTfQipxoHC5u4xq6zblww1zm1Ig==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@humanfs/core@0.19.0':
+    resolution: {integrity: sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.5':
+    resolution: {integrity: sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
-    dev: true
 
-  /@humanwhocodes/object-schema@2.0.1:
-    resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
-    dev: true
+  '@humanwhocodes/retry@0.3.1':
+    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
+    engines: {node: '>=18.18'}
 
-  /@hutson/parse-repository-url@5.0.0:
+  '@hutson/parse-repository-url@5.0.0':
     resolution: {integrity: sha512-e5+YUKENATs1JgYHMzTr2MW/NDcXGfYFAuOQU8gJgF/kEh4EqKgfGrfLI67bMD4tbhZVlkigz/9YYwWcbOFthg==}
     engines: {node: '>=10.13.0'}
-    dev: true
 
-  /@isaacs/cliui@8.0.2:
+  '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
-    dependencies:
-      string-width: 5.1.2
-      string-width-cjs: /string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: /strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: /wrap-ansi@7.0.0
-    dev: true
 
-  /@istanbuljs/schema@0.1.3:
+  '@istanbuljs/schema@0.1.3':
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
     engines: {node: '>=8'}
-    dev: true
 
-  /@jest/schemas@29.6.3:
-    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@sinclair/typebox': 0.27.8
-    dev: true
-
-  /@jridgewell/gen-mapping@0.3.3:
-    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
+  '@jridgewell/gen-mapping@0.3.5':
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.20
-    dev: true
 
-  /@jridgewell/resolve-uri@3.1.1:
-    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
-  /@jridgewell/set-array@1.1.2:
-    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
-  /@jridgewell/source-map@0.3.5:
-    resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.20
-    dev: true
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
-  /@jridgewell/sourcemap-codec@1.4.15:
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
-  /@jridgewell/trace-mapping@0.3.20:
-    resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
-
-  /@jspm/core@2.0.1:
+  '@jspm/core@2.0.1':
     resolution: {integrity: sha512-Lg3PnLp0QXpxwLIAuuJboLeRaIhrgJjeuh797QADg3xz8wGLugQOS5DpsE8A6i6Adgzf+bacllkKZG3J0tGfDw==}
-    dev: true
 
-  /@nodelib/fs.scandir@2.1.5:
+  '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-    dev: true
 
-  /@nodelib/fs.stat@2.0.5:
+  '@nodelib/fs.stat@2.0.5':
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
-    dev: true
 
-  /@nodelib/fs.walk@1.2.8:
+  '@nodelib/fs.walk@1.2.8':
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.15.0
-    dev: true
 
-  /@pkgjs/parseargs@0.11.0:
+  '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@puppeteer/browsers@1.8.0:
-    resolution: {integrity: sha512-TkRHIV6k2D8OlUe8RtG+5jgOF/H98Myx0M6AOafC8DdNVOFiBSFa5cpRDtpm8LXOa9sVwe0+e6Q3FC56X/DZfg==}
-    engines: {node: '>=16.3.0'}
+  '@puppeteer/browsers@2.4.0':
+    resolution: {integrity: sha512-x8J1csfIygOwf6D6qUAZ0ASk3z63zPb7wkNeHRerCMh82qWKUrOgkuP005AJC8lDL6/evtXETGEJVcwykKT4/g==}
+    engines: {node: '>=18'}
     hasBin: true
-    dependencies:
-      debug: 4.3.4
-      extract-zip: 2.0.1
-      progress: 2.0.3
-      proxy-agent: 6.3.1
-      tar-fs: 3.0.4
-      unbzip2-stream: 1.4.3
-      yargs: 17.7.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /@rollup/plugin-alias@5.0.1(rollup@4.1.4):
-    resolution: {integrity: sha512-JObvbWdOHoMy9W7SU0lvGhDtWq9PllP5mjpAy+TUslZG/WzOId9u80Hsqq1vCUn9pFJ0cxpdcnAv+QzU2zFH3Q==}
+  '@rollup/plugin-alias@5.1.1':
+    resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      rollup: 4.1.4
-      slash: 4.0.0
-    dev: true
 
-  /@rollup/plugin-commonjs@25.0.7(rollup@4.1.4):
-    resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
-    engines: {node: '>=14.0.0'}
+  '@rollup/plugin-commonjs@28.0.0':
+    resolution: {integrity: sha512-BJcu+a+Mpq476DMXG+hevgPSl56bkUoi88dKT8t3RyUp8kGuOh+2bU8Gs7zXDlu+fyZggnJ+iOBGrb/O1SorYg==}
+    engines: {node: '>=16.0.0 || 14 >= 14.17'}
     peerDependencies:
       rollup: ^2.68.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@4.1.4)
-      commondir: 1.0.1
-      estree-walker: 2.0.2
-      glob: 8.1.0
-      is-reference: 1.2.1
-      magic-string: 0.30.5
-      rollup: 4.1.4
-    dev: true
 
-  /@rollup/plugin-inject@5.0.5(rollup@4.1.4):
+  '@rollup/plugin-inject@5.0.5':
     resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -1230,45 +896,26 @@ packages:
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@4.1.4)
-      estree-walker: 2.0.2
-      magic-string: 0.30.5
-      rollup: 4.1.4
-    dev: true
 
-  /@rollup/plugin-json@6.0.1(rollup@4.1.4):
-    resolution: {integrity: sha512-RgVfl5hWMkxN1h/uZj8FVESvPuBJ/uf6ly6GTj0GONnkfoBN5KC0MSz+PN2OLDgYXMhtG0mWpTrkiOjoxAIevw==}
+  '@rollup/plugin-json@6.1.0':
+    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@4.1.4)
-      rollup: 4.1.4
-    dev: true
 
-  /@rollup/plugin-node-resolve@15.2.3(rollup@4.1.4):
-    resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
+  '@rollup/plugin-node-resolve@15.3.0':
+    resolution: {integrity: sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^2.78.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@4.1.4)
-      '@types/resolve': 1.20.2
-      deepmerge: 4.3.1
-      is-builtin-module: 3.2.1
-      is-module: 1.0.0
-      resolve: 1.22.8
-      rollup: 4.1.4
-    dev: true
 
-  /@rollup/plugin-replace@5.0.4(rollup@4.1.4):
+  '@rollup/plugin-replace@5.0.4':
     resolution: {integrity: sha512-E2hmRnlh09K8HGT0rOnnri9OTh+BILGr7NVJGB30S4E3cLRn3J0xjdiyOZ74adPs4NiAMgrjUMGAZNJDBgsdmQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -1276,4720 +923,2385 @@ packages:
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@4.1.4)
-      magic-string: 0.30.5
-      rollup: 4.1.4
-    dev: true
 
-  /@rollup/plugin-terser@0.4.4(rollup@4.1.4):
-    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      rollup: 4.1.4
-      serialize-javascript: 6.0.1
-      smob: 1.4.1
-      terser: 5.22.0
-    dev: true
-
-  /@rollup/pluginutils@5.0.5(rollup@4.1.4):
-    resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==}
+  '@rollup/pluginutils@5.1.0':
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      '@types/estree': 1.0.3
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-      rollup: 4.1.4
-    dev: true
 
-  /@rollup/rollup-android-arm-eabi@4.1.4:
-    resolution: {integrity: sha512-WlzkuFvpKl6CLFdc3V6ESPt7gq5Vrimd2Yv9IzKXdOpgbH4cdDSS1JLiACX8toygihtH5OlxyQzhXOph7Ovlpw==}
+  '@rollup/rollup-android-arm-eabi@4.20.0':
+    resolution: {integrity: sha512-TSpWzflCc4VGAUJZlPpgAJE1+V60MePDQnBd7PPkpuEmOy8i87aL6tinFGKBFKuEDikYpig72QzdT3QPYIi+oA==}
     cpu: [arm]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-android-arm-eabi@4.4.1:
-    resolution: {integrity: sha512-Ss4suS/sd+6xLRu+MLCkED2mUrAyqHmmvZB+zpzZ9Znn9S8wCkTQCJaQ8P8aHofnvG5L16u9MVnJjCqioPErwQ==}
+  '@rollup/rollup-android-arm-eabi@4.24.0':
+    resolution: {integrity: sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==}
     cpu: [arm]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-android-arm64@4.1.4:
-    resolution: {integrity: sha512-D1e+ABe56T9Pq2fD+R3ybe1ylCDzu3tY4Qm2Mj24R9wXNCq35+JbFbOpc2yrroO2/tGhTobmEl2Bm5xfE/n8RA==}
+  '@rollup/rollup-android-arm64@4.20.0':
+    resolution: {integrity: sha512-u00Ro/nok7oGzVuh/FMYfNoGqxU5CPWz1mxV85S2w9LxHR8OoMQBuSk+3BKVIDYgkpeOET5yXkx90OYFc+ytpQ==}
     cpu: [arm64]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-android-arm64@4.4.1:
-    resolution: {integrity: sha512-sRSkGTvGsARwWd7TzC8LKRf8FiPn7257vd/edzmvG4RIr9x68KBN0/Ek48CkuUJ5Pj/Dp9vKWv6PEupjKWjTYA==}
+  '@rollup/rollup-android-arm64@4.24.0':
+    resolution: {integrity: sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==}
     cpu: [arm64]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-darwin-arm64@4.1.4:
-    resolution: {integrity: sha512-7vTYrgEiOrjxnjsgdPB+4i7EMxbVp7XXtS+50GJYj695xYTTEMn3HZVEvgtwjOUkAP/Q4HDejm4fIAjLeAfhtg==}
+  '@rollup/rollup-darwin-arm64@4.20.0':
+    resolution: {integrity: sha512-uFVfvzvsdGtlSLuL0ZlvPJvl6ZmrH4CBwLGEFPe7hUmf7htGAN+aXo43R/V6LATyxlKVC/m6UsLb7jbG+LG39Q==}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-darwin-arm64@4.4.1:
-    resolution: {integrity: sha512-nz0AiGrrXyaWpsmBXUGOBiRDU0wyfSXbFuF98pPvIO8O6auQsPG6riWsfQqmCCC5FNd8zKQ4JhgugRNAkBJ8mQ==}
+  '@rollup/rollup-darwin-arm64@4.24.0':
+    resolution: {integrity: sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-darwin-x64@4.1.4:
-    resolution: {integrity: sha512-eGJVZScKSLZkYjhTAESCtbyTBq9SXeW9+TX36ki5gVhDqJtnQ5k0f9F44jNK5RhAMgIj0Ht9+n6HAgH0gUUyWQ==}
+  '@rollup/rollup-darwin-x64@4.20.0':
+    resolution: {integrity: sha512-xbrMDdlev53vNXexEa6l0LffojxhqDTBeL+VUxuuIXys4x6xyvbKq5XqTXBCEUA8ty8iEJblHvFaWRJTk/icAQ==}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-darwin-x64@4.4.1:
-    resolution: {integrity: sha512-Ogqvf4/Ve/faMaiPRvzsJEqajbqs00LO+8vtrPBVvLgdw4wBg6ZDXdkDAZO+4MLnrc8mhGV6VJAzYScZdPLtJg==}
+  '@rollup/rollup-darwin-x64@4.24.0':
+    resolution: {integrity: sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-arm-gnueabihf@4.1.4:
-    resolution: {integrity: sha512-HnigYSEg2hOdX1meROecbk++z1nVJDpEofw9V2oWKqOWzTJlJf1UXVbDE6Hg30CapJxZu5ga4fdAQc/gODDkKg==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.20.0':
+    resolution: {integrity: sha512-jMYvxZwGmoHFBTbr12Xc6wOdc2xA5tF5F2q6t7Rcfab68TT0n+r7dgawD4qhPEvasDsVpQi+MgDzj2faOLsZjA==}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-arm-gnueabihf@4.4.1:
-    resolution: {integrity: sha512-9zc2tqlr6HfO+hx9+wktUlWTRdje7Ub15iJqKcqg5uJZ+iKqmd2CMxlgPpXi7+bU7bjfDIuvCvnGk7wewFEhCg==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.24.0':
+    resolution: {integrity: sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-arm64-gnu@4.1.4:
-    resolution: {integrity: sha512-TzJ+N2EoTLWkaClV2CUhBlj6ljXofaYzF/R9HXqQ3JCMnCHQZmQnbnZllw7yTDp0OG5whP4gIPozR4QiX+00MQ==}
+  '@rollup/rollup-linux-arm-musleabihf@4.20.0':
+    resolution: {integrity: sha512-1asSTl4HKuIHIB1GcdFHNNZhxAYEdqML/MW4QmPS4G0ivbEcBr1JKlFLKsIRqjSwOBkdItn3/ZDlyvZ/N6KPlw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.24.0':
+    resolution: {integrity: sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.20.0':
+    resolution: {integrity: sha512-COBb8Bkx56KldOYJfMf6wKeYJrtJ9vEgBRAOkfw6Ens0tnmzPqvlpjZiLgkhg6cA3DGzCmLmmd319pmHvKWWlQ==}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-arm64-gnu@4.4.1:
-    resolution: {integrity: sha512-phLb1fN3rq2o1j1v+nKxXUTSJnAhzhU0hLrl7Qzb0fLpwkGMHDem+o6d+ZI8+/BlTXfMU4kVWGvy6g9k/B8L6Q==}
+  '@rollup/rollup-linux-arm64-gnu@4.24.0':
+    resolution: {integrity: sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-arm64-musl@4.1.4:
-    resolution: {integrity: sha512-aVPmNMdp6Dlo2tWkAduAD/5TL/NT5uor290YvjvFvCv0Q3L7tVdlD8MOGDL+oRSw5XKXKAsDzHhUOPUNPRHVTQ==}
+  '@rollup/rollup-linux-arm64-musl@4.20.0':
+    resolution: {integrity: sha512-+it+mBSyMslVQa8wSPvBx53fYuZK/oLTu5RJoXogjk6x7Q7sz1GNRsXWjn6SwyJm8E/oMjNVwPhmNdIjwP135Q==}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-arm64-musl@4.4.1:
-    resolution: {integrity: sha512-M2sDtw4tf57VPSjbTAN/lz1doWUqO2CbQuX3L9K6GWIR5uw9j+ROKCvvUNBY8WUbMxwaoc8mH9HmmBKsLht7+w==}
+  '@rollup/rollup-linux-arm64-musl@4.24.0':
+    resolution: {integrity: sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-x64-gnu@4.1.4:
-    resolution: {integrity: sha512-77Fb79ayiDad0grvVsz4/OB55wJRyw9Ao+GdOBA9XywtHpuq5iRbVyHToGxWquYWlEf6WHFQQnFEttsAzboyKg==}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.20.0':
+    resolution: {integrity: sha512-yAMvqhPfGKsAxHN8I4+jE0CpLWD8cv4z7CK7BMmhjDuz606Q2tFKkWRY8bHR9JQXYcoLfopo5TTqzxgPUjUMfw==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.24.0':
+    resolution: {integrity: sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.20.0':
+    resolution: {integrity: sha512-qmuxFpfmi/2SUkAw95TtNq/w/I7Gpjurx609OOOV7U4vhvUhBcftcmXwl3rqAek+ADBwSjIC4IVNLiszoj3dPA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.24.0':
+    resolution: {integrity: sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.20.0':
+    resolution: {integrity: sha512-I0BtGXddHSHjV1mqTNkgUZLnS3WtsqebAXv11D5BZE/gfw5KoyXSAXVqyJximQXNvNzUo4GKlCK/dIwXlz+jlg==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.24.0':
+    resolution: {integrity: sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.20.0':
+    resolution: {integrity: sha512-y+eoL2I3iphUg9tN9GB6ku1FA8kOfmF4oUEWhztDJ4KXJy1agk/9+pejOuZkNFhRwHAOxMsBPLbXPd6mJiCwew==}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-x64-gnu@4.4.1:
-    resolution: {integrity: sha512-mHIlRLX+hx+30cD6c4BaBOsSqdnCE4ok7/KDvjHYAHoSuveoMMxIisZFvcLhUnyZcPBXDGZTuBoalcuh43UfQQ==}
+  '@rollup/rollup-linux-x64-gnu@4.24.0':
+    resolution: {integrity: sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-x64-musl@4.1.4:
-    resolution: {integrity: sha512-/t6C6niEQTqmQTVTD9TDwUzxG91Mlk69/v0qodIPUnjjB3wR4UA3klg+orR2SU3Ux2Cgf2pWPL9utK80/1ek8g==}
+  '@rollup/rollup-linux-x64-musl@4.20.0':
+    resolution: {integrity: sha512-hM3nhW40kBNYUkZb/r9k2FKK+/MnKglX7UYd4ZUy5DJs8/sMsIbqWK2piZtVGE3kcXVNj3B2IrUYROJMMCikNg==}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-x64-musl@4.4.1:
-    resolution: {integrity: sha512-tB+RZuDi3zxFx7vDrjTNGVLu2KNyzYv+UY8jz7e4TMEoAj7iEt8Qk6xVu6mo3pgjnsHj6jnq3uuRsHp97DLwOA==}
+  '@rollup/rollup-linux-x64-musl@4.24.0':
+    resolution: {integrity: sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-win32-arm64-msvc@4.1.4:
-    resolution: {integrity: sha512-ZY5BHHrOPkMbCuGWFNpJH0t18D2LU6GMYKGaqaWTQ3CQOL57Fem4zE941/Ek5pIsVt70HyDXssVEFQXlITI5Gg==}
+  '@rollup/rollup-win32-arm64-msvc@4.20.0':
+    resolution: {integrity: sha512-psegMvP+Ik/Bg7QRJbv8w8PAytPA7Uo8fpFjXyCRHWm6Nt42L+JtoqH8eDQ5hRP7/XW2UiIriy1Z46jf0Oa1kA==}
     cpu: [arm64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-win32-arm64-msvc@4.4.1:
-    resolution: {integrity: sha512-Hdn39PzOQowK/HZzYpCuZdJC91PE6EaGbTe2VCA9oq2u18evkisQfws0Smh9QQGNNRa/T7MOuGNQoLeXhhE3PQ==}
+  '@rollup/rollup-win32-arm64-msvc@4.24.0':
+    resolution: {integrity: sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==}
     cpu: [arm64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-win32-ia32-msvc@4.1.4:
-    resolution: {integrity: sha512-XG2mcRfFrJvYyYaQmvCIvgfkaGinfXrpkBuIbJrTl9SaIQ8HumheWTIwkNz2mktCKwZfXHQNpO7RgXLIGQ7HXA==}
+  '@rollup/rollup-win32-ia32-msvc@4.20.0':
+    resolution: {integrity: sha512-GabekH3w4lgAJpVxkk7hUzUf2hICSQO0a/BLFA11/RMxQT92MabKAqyubzDZmMOC/hcJNlc+rrypzNzYl4Dx7A==}
     cpu: [ia32]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-win32-ia32-msvc@4.4.1:
-    resolution: {integrity: sha512-tLpKb1Elm9fM8c5w3nl4N1eLTP4bCqTYw9tqUBxX8/hsxqHO3dxc2qPbZ9PNkdK4tg4iLEYn0pOUnVByRd2CbA==}
+  '@rollup/rollup-win32-ia32-msvc@4.24.0':
+    resolution: {integrity: sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==}
     cpu: [ia32]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-win32-x64-msvc@4.1.4:
-    resolution: {integrity: sha512-ANFqWYPwkhIqPmXw8vm0GpBEHiPpqcm99jiiAp71DbCSqLDhrtr019C5vhD0Bw4My+LmMvciZq6IsWHqQpl2ZQ==}
+  '@rollup/rollup-win32-x64-msvc@4.20.0':
+    resolution: {integrity: sha512-aJ1EJSuTdGnM6qbVC4B5DSmozPTqIag9fSzXRNNo+humQLG89XpPgdt16Ia56ORD7s+H8Pmyx44uczDQ0yDzpg==}
     cpu: [x64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-win32-x64-msvc@4.4.1:
-    resolution: {integrity: sha512-eAhItDX9yQtZVM3yvXS/VR3qPqcnXvnLyx1pLXl4JzyNMBNO3KC986t/iAg2zcMzpAp9JSvxB5VZGnBiNoA98w==}
+  '@rollup/rollup-win32-x64-msvc@4.24.0':
+    resolution: {integrity: sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==}
     cpu: [x64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@sinclair/typebox@0.27.8:
-    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
-    dev: true
+  '@swc/core-darwin-arm64@1.7.28':
+    resolution: {integrity: sha512-BNkj6enHo2pdzOpCtQGKZbXT2A/qWIr0CVtbTM4WkJ3MCK/glbFsyO6X59p1r8+gfaZG4bWYnTTu+RuUAcsL5g==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
 
-  /@tootallnate/once@2.0.0:
-    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
-    engines: {node: '>= 10'}
-    dev: true
+  '@swc/core-darwin-x64@1.7.28':
+    resolution: {integrity: sha512-96zQ+X5Fd6P/RNPkOyikTJgEc2M4TzznfYvjRd2hye5h22jhxCLL/csoauDgN7lYfd7mwsZ/sVXwJTMKl+vZSA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
 
-  /@tootallnate/quickjs-emscripten@0.23.0:
+  '@swc/core-linux-arm-gnueabihf@1.7.28':
+    resolution: {integrity: sha512-l2100Wx6LdXMOmOW3+KoHhBhyZrGdz8ylkygcVOC0QHp6YIATfuG+rRHksfyEWCSOdL3anM9MJZJX26KT/s+XQ==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@swc/core-linux-arm64-gnu@1.7.28':
+    resolution: {integrity: sha512-03m6iQ5Bv9u2VPnNRyaBmE8eHi056eE39L0gXcqGoo46GAGuoqYHt9pDz8wS6EgoN4t85iBMUZrkCNqFKkN6ZQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@swc/core-linux-arm64-musl@1.7.28':
+    resolution: {integrity: sha512-vqVOpG/jc8mvTKQjaPBLhr7tnWyzuztOHsPnJqMWmg7zGcMeQC/2c5pU4uzRAfXMTp25iId6s4Y4wWfPS1EeDw==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@swc/core-linux-x64-gnu@1.7.28':
+    resolution: {integrity: sha512-HGwpWuB83Kr+V0E+zT5UwIIY9OxiS8aLd0UVMRVWuO8SrQyKm9HKJ46+zoAb8tfJrpZftfxvbn2ayZWR7gqosA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@swc/core-linux-x64-musl@1.7.28':
+    resolution: {integrity: sha512-q2Y2T8y8EgFtIiRyInnAXNe94aaHX74F0ha1Bl9VdRxE0u1/So+3VLbPvtp4V3Z6pj5pOePfCQJKifnllgAQ9A==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@swc/core-win32-arm64-msvc@1.7.28':
+    resolution: {integrity: sha512-bCqh4uBT/59h3dWK1v91In6qzz8rKoWoFRxCtNQLIK4jP55K0U231ZK9oN7neZD6bzcOUeFvOGgcyMAgDfFWfA==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@swc/core-win32-ia32-msvc@1.7.28':
+    resolution: {integrity: sha512-XTHbHrksnrqK3JSJ2sbuMWvdJ6/G0roRpgyVTmNDfhTYPOwcVaL/mSrPGLwbksYUbq7ckwoKzrobhdxvQzPsDA==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@swc/core-win32-x64-msvc@1.7.28':
+    resolution: {integrity: sha512-jyXeoq6nX8abiCy2EpporsC5ywNENs4ocYuvxo1LSxDktWN1E2MTXq3cdJcEWB2Vydxq0rDcsGyzkRPMzFhkZw==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@swc/core@1.7.28':
+    resolution: {integrity: sha512-XapcMgsOS0cKh01AFEj+qXOk6KM4NZhp7a5vPicdhkRR8RzvjrCa7DTtijMxfotU8bqaEHguxmiIag2HUlT8QQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@swc/helpers': '*'
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
+  '@swc/types@0.1.12':
+    resolution: {integrity: sha512-wBJA+SdtkbFhHjTMYH+dEH1y4VpfGdAc2Kw/LK09i9bXd/K6j6PkDcFCEzb6iVfZMkPRrl/q0e3toqTAJdkIVA==}
+
+  '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
-    dev: true
 
-  /@types/chai-subset@1.3.4:
-    resolution: {integrity: sha512-CCWNXrJYSUIojZ1149ksLl3AN9cmZ5djf+yUoVVV+NuYrtydItQVlL2ZDqyC6M6O9LWRnVf8yYDxbXHO2TfQZg==}
-    dependencies:
-      '@types/chai': 4.3.9
-    dev: true
+  '@types/estree@1.0.5':
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
-  /@types/chai@4.3.9:
-    resolution: {integrity: sha512-69TtiDzu0bcmKQv3yg1Zx409/Kd7r0b5F1PfpYJfSHzLGtB53547V4u+9iqKYsTu/O2ai6KTb0TInNpvuQ3qmg==}
-    dev: true
+  '@types/estree@1.0.6':
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
-  /@types/estree@1.0.3:
-    resolution: {integrity: sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==}
-    dev: true
-
-  /@types/hash-sum@1.0.2:
+  '@types/hash-sum@1.0.2':
     resolution: {integrity: sha512-UP28RddqY8xcU0SCEp9YKutQICXpaAq9N8U2klqF5hegGha7KzTOL8EdhIIV3bOSGBzjEpN9bU/d+nNZBdJYVw==}
-    dev: true
 
-  /@types/json-schema@7.0.14:
-    resolution: {integrity: sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==}
-    dev: true
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  /@types/node@20.10.0:
-    resolution: {integrity: sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ==}
-    dependencies:
-      undici-types: 5.26.5
-    dev: true
+  '@types/node@20.16.10':
+    resolution: {integrity: sha512-vQUKgWTjEIRFCvK6CyriPH3MZYiYlNy0fKiEYHWbcoWLEgs4opurGGKlebrTLqdSMIbXImH6XExNiIyNUv3WpA==}
 
-  /@types/normalize-package-data@2.4.3:
-    resolution: {integrity: sha512-ehPtgRgaULsFG8x0NeYJvmyH1hmlfsNLujHe9dQEia/7MAJYdzMSi19JtchUHjmBA6XC/75dK55mzZH+RyieSg==}
-    dev: true
+  '@types/normalize-package-data@2.4.4':
+    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
-  /@types/resolve@1.20.2:
+  '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
-    dev: true
 
-  /@types/semver@7.5.4:
-    resolution: {integrity: sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==}
-    dev: true
+  '@types/semver@7.5.8':
+    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
-  /@types/yauzl@2.10.2:
-    resolution: {integrity: sha512-Km7XAtUIduROw7QPgvcft0lIupeG8a8rdKL8RiSyKvlE7dYY31fEn41HVuQsRFDuROA8tA4K2UVL+WdfFmErBA==}
-    requiresBuild: true
-    dependencies:
-      '@types/node': 20.10.0
-    dev: true
-    optional: true
+  '@types/serve-handler@6.1.4':
+    resolution: {integrity: sha512-aXy58tNie0NkuSCY291xUxl0X+kGYy986l4kqW6Gi4kEXgr6Tx0fpSH7YwUSa5usPpG3s9DBeIR6hHcDtL2IvQ==}
 
-  /@typescript-eslint/parser@6.13.0(eslint@8.54.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-VpG+M7GNhHLI/aTDctqAV0XbzB16vf+qDX9DXuMZSe/0bahzDA9AKZB15NDbd+D9M4cDsJvfkbGOA7qiZ/bWJw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
+  '@types/yauzl@2.10.3':
+    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
+
+  '@typescript-eslint/eslint-plugin@8.8.0':
+    resolution: {integrity: sha512-wORFWjU30B2WJ/aXBfOm1LX9v9nyt9D3jsSOxC3cCaTQGCW5k4jNpmjFv3U7p/7s4yvdjHzwtv2Sd2dOyhjS0A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
+      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
+      eslint: ^8.57.0 || ^9.0.0
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.13.0
-      '@typescript-eslint/types': 6.13.0
-      '@typescript-eslint/typescript-estree': 6.13.0(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.13.0
-      debug: 4.3.4
-      eslint: 8.54.0
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /@typescript-eslint/scope-manager@5.62.0:
-    resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/visitor-keys': 5.62.0
-    dev: true
+  '@typescript-eslint/parser@8.8.0':
+    resolution: {integrity: sha512-uEFUsgR+tl8GmzmLjRqz+VrDv4eoaMqMXW7ruXfgThaAShO9JTciKpEsB+TvnfFfbg5IpujgMXVV36gOJRLtZg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  /@typescript-eslint/scope-manager@6.13.0:
-    resolution: {integrity: sha512-2x0K2/CujsokIv+LN2T0l5FVDMtsCjkUyYtlcY4xxnxLAW+x41LXr16duoicHpGtLhmtN7kqvuFJ3zbz00Ikhw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.13.0
-      '@typescript-eslint/visitor-keys': 6.13.0
-    dev: true
+  '@typescript-eslint/scope-manager@8.5.0':
+    resolution: {integrity: sha512-06JOQ9Qgj33yvBEx6tpC8ecP9o860rsR22hWMEd12WcTRrfaFgHr2RB/CA/B+7BMhHkXT4chg2MyboGdFGawYg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /@typescript-eslint/types@5.62.0:
-    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
+  '@typescript-eslint/scope-manager@8.8.0':
+    resolution: {integrity: sha512-EL8eaGC6gx3jDd8GwEFEV091210U97J0jeEHrAYvIYosmEGet4wJ+g0SYmLu+oRiAwbSA5AVrt6DxLHfdd+bUg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /@typescript-eslint/types@6.13.0:
-    resolution: {integrity: sha512-oXg7DFxx/GmTrKXKKLSoR2rwiutOC7jCQ5nDH5p5VS6cmHE1TcPTaYQ0VPSSUvj7BnNqCgQ/NXcTBxn59pfPTQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dev: true
-
-  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.2.2):
-    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@typescript-eslint/type-utils@8.8.0':
+    resolution: {integrity: sha512-IKwJSS7bCqyCeG4NVGxnOP6lLT9Okc3Zj8hLO96bpMkJab+10HIfJbMouLrlpyOr3yrQ1cA413YPFiGd1mW9/Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
-    dependencies:
-      '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.5.4
-      tsutils: 3.21.0(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /@typescript-eslint/typescript-estree@6.13.0(typescript@5.2.2):
-    resolution: {integrity: sha512-IT4O/YKJDoiy/mPEDsfOfp+473A9GVqXlBKckfrAOuVbTqM8xbc0LuqyFCcgeFWpqu3WjQexolgqN2CuWBYbog==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/types@8.5.0':
+    resolution: {integrity: sha512-qjkormnQS5wF9pjSi6q60bKUHH44j2APxfh9TQRXK8wbYVeDYYdYJGIROL87LGZZ2gz3Rbmjc736qyL8deVtdw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/types@8.8.0':
+    resolution: {integrity: sha512-QJwc50hRCgBd/k12sTykOJbESe1RrzmX6COk8Y525C9l7oweZ+1lw9JiU56im7Amm8swlz00DRIlxMYLizr2Vw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.5.0':
+    resolution: {integrity: sha512-vEG2Sf9P8BPQ+d0pxdfndw3xIXaoSjliG0/Ejk7UggByZPKXmJmw3GW5jV2gHNQNawBUyfahoSiCFVov0Ruf7Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
-    dependencies:
-      '@typescript-eslint/types': 6.13.0
-      '@typescript-eslint/visitor-keys': 6.13.0
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /@typescript-eslint/utils@5.62.0(eslint@8.54.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@typescript-eslint/typescript-estree@8.8.0':
+    resolution: {integrity: sha512-ZaMJwc/0ckLz5DaAZ+pNLmHv8AMVGtfWxZe/x2JVEkD5LnmhWiQMMcYT7IY7gkdJuzJ9P14fRy28lUrlDSWYdw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.54.0)
-      '@types/json-schema': 7.0.14
-      '@types/semver': 7.5.4
-      '@typescript-eslint/scope-manager': 5.62.0
-      '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2)
-      eslint: 8.54.0
-      eslint-scope: 5.1.1
-      semver: 7.5.4
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-    dev: true
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  /@typescript-eslint/visitor-keys@5.62.0:
-    resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      '@typescript-eslint/types': 5.62.0
-      eslint-visitor-keys: 3.4.3
-    dev: true
-
-  /@typescript-eslint/visitor-keys@6.13.0:
-    resolution: {integrity: sha512-UQklteCEMCRoq/1UhKFZsHv5E4dN1wQSzJoxTfABasWk1HgJRdg1xNUve/Kv/Sdymt4x+iEzpESOqRFlQr/9Aw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.13.0
-      eslint-visitor-keys: 3.4.3
-    dev: true
-
-  /@ungap/structured-clone@1.2.0:
-    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
-    dev: true
-
-  /@vitejs/plugin-vue@4.4.0(vite@5.0.0)(vue@packages+vue):
-    resolution: {integrity: sha512-xdguqb+VUwiRpSg+nsc2HtbAUSGak25DXYvpQQi4RVU1Xq1uworyoH/md9Rfd8zMmPR/pSghr309QNcftUVseg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  '@typescript-eslint/utils@8.5.0':
+    resolution: {integrity: sha512-6yyGYVL0e+VzGYp60wvkBHiqDWOpT63pdMV2CVG4LVDd5uR6q1qQN/7LafBZtAtNIn/mqXjsSeS5ggv/P0iECw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      vite: ^4.0.0
+      eslint: ^8.57.0 || ^9.0.0
+
+  '@typescript-eslint/utils@8.8.0':
+    resolution: {integrity: sha512-QE2MgfOTem00qrlPgyByaCHay9yb1+9BjnMFnSFkUKQfu7adBXDTnCAivURnuPPAG/qiB+kzKkZKmKfaMT0zVg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+
+  '@typescript-eslint/visitor-keys@8.5.0':
+    resolution: {integrity: sha512-yTPqMnbAZJNy2Xq2XU8AdtOW9tJIr+UQb64aXB9f3B1498Zx9JorVgFJcZpEc9UBuCCrdzKID2RGAMkYcDtZOw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/visitor-keys@8.8.0':
+    resolution: {integrity: sha512-8mq51Lx6Hpmd7HnA2fcHQo3YgfX1qbccxQOgZcb4tvasu//zXRaA1j5ZRFeCw/VRAdFi4mRM9DnZw0Nu0Q2d1g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@vitejs/plugin-vue@5.1.2':
+    resolution: {integrity: sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0
       vue: ^3.2.25
-    dependencies:
-      vite: 5.0.0(@types/node@20.10.0)(terser@5.22.0)
-      vue: link:packages/vue
-    dev: true
 
-  /@vitest/coverage-istanbul@0.34.6(vitest@0.34.6):
-    resolution: {integrity: sha512-5KaBNZPDSk2ybavC3rZ1pWGniw7sJ5usuwVGRUYzJwiBfWvnLpuUer7bjw7qUCRGdKJXrBgb/Dsgif9rkwMX/A==}
+  '@vitest/coverage-v8@2.1.1':
+    resolution: {integrity: sha512-md/A7A3c42oTT8JUHSqjP5uKTWJejzUW4jalpvs+rZ27gsURsMU8DEb+8Jf8C6Kj2gwfSHJqobDNBuoqlm0cFw==}
     peerDependencies:
-      vitest: '>=0.32.0 <1'
-    dependencies:
-      istanbul-lib-coverage: 3.2.0
-      istanbul-lib-instrument: 6.0.1
-      istanbul-lib-report: 3.0.1
-      istanbul-lib-source-maps: 4.0.1
-      istanbul-reports: 3.1.6
-      picocolors: 1.0.0
-      test-exclude: 6.0.0
-      vitest: 0.34.6(jsdom@22.1.0)(terser@5.22.0)
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+      '@vitest/browser': 2.1.1
+      vitest: 2.1.1
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
 
-  /@vitest/expect@0.34.6:
-    resolution: {integrity: sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==}
-    dependencies:
-      '@vitest/spy': 0.34.6
-      '@vitest/utils': 0.34.6
-      chai: 4.3.10
-    dev: true
+  '@vitest/eslint-plugin@1.1.6':
+    resolution: {integrity: sha512-sFuAnD9iycnOzLHHhNCULXeb6ejOSo5Lcq/ODhdlUOoUrXkQPcVeYqXurZMA3neOqf+wNCQ6YuU1zyoYH/WEcg==}
+    peerDependencies:
+      '@typescript-eslint/utils': '>= 8.0'
+      eslint: '>= 8.57.0'
+      typescript: '>= 5.0.0'
+      vitest: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  /@vitest/runner@0.34.6:
-    resolution: {integrity: sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==}
-    dependencies:
-      '@vitest/utils': 0.34.6
-      p-limit: 4.0.0
-      pathe: 1.1.1
-    dev: true
+  '@vitest/expect@2.1.1':
+    resolution: {integrity: sha512-YeueunS0HiHiQxk+KEOnq/QMzlUuOzbU1Go+PgAsHvvv3tUkJPm9xWt+6ITNTlzsMXUjmgm5T+U7KBPK2qQV6w==}
 
-  /@vitest/snapshot@0.34.6:
-    resolution: {integrity: sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==}
-    dependencies:
-      magic-string: 0.30.5
-      pathe: 1.1.1
-      pretty-format: 29.7.0
-    dev: true
+  '@vitest/mocker@2.1.1':
+    resolution: {integrity: sha512-LNN5VwOEdJqCmJ/2XJBywB11DLlkbY0ooDJW3uRX5cZyYCrc4PI/ePX0iQhE3BiEGiQmK4GE7Q/PqCkkaiPnrA==}
+    peerDependencies:
+      '@vitest/spy': 2.1.1
+      msw: ^2.3.5
+      vite: ^5.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
 
-  /@vitest/spy@0.34.6:
-    resolution: {integrity: sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==}
-    dependencies:
-      tinyspy: 2.2.0
-    dev: true
+  '@vitest/pretty-format@2.1.1':
+    resolution: {integrity: sha512-SjxPFOtuINDUW8/UkElJYQSFtnWX7tMksSGW0vfjxMneFqxVr8YJ979QpMbDW7g+BIiq88RAGDjf7en6rvLPPQ==}
 
-  /@vitest/utils@0.34.6:
-    resolution: {integrity: sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==}
-    dependencies:
-      diff-sequences: 29.6.3
-      loupe: 2.3.7
-      pretty-format: 29.7.0
-    dev: true
+  '@vitest/runner@2.1.1':
+    resolution: {integrity: sha512-uTPuY6PWOYitIkLPidaY5L3t0JJITdGTSwBtwMjKzo5O6RCOEncz9PUN+0pDidX8kTHYjO0EwUIvhlGpnGpxmA==}
 
-  /@vue/consolidate@0.17.3:
-    resolution: {integrity: sha512-nl0SWcTMzaaTnJ5G6V8VlMDA1CVVrNnaQKF1aBZU3kXtjgU9jtHMsEAsgjoRUx+T0EVJk9TgbmxGhK3pOk22zw==}
+  '@vitest/snapshot@2.1.1':
+    resolution: {integrity: sha512-BnSku1WFy7r4mm96ha2FzN99AZJgpZOWrAhtQfoxjUU5YMRpq1zmHRq7a5K9/NjqonebO7iVDla+VvZS8BOWMw==}
+
+  '@vitest/spy@2.1.1':
+    resolution: {integrity: sha512-ZM39BnZ9t/xZ/nF4UwRH5il0Sw93QnZXd9NAZGRpIgj0yvVwPpLd702s/Cx955rGaMlyBQkZJ2Ir7qyY48VZ+g==}
+
+  '@vitest/utils@2.1.1':
+    resolution: {integrity: sha512-Y6Q9TsI+qJ2CC0ZKj6VBb+T8UPz593N113nnUykqwANqhgf3QkZeHFlusgKLTqrnVHbj/XDKZcDHol+dxVT+rQ==}
+
+  '@vue/consolidate@1.0.0':
+    resolution: {integrity: sha512-oTyUE+QHIzLw2PpV14GD/c7EohDyP64xCniWTcqcEmTd699eFqTIwOmtDYjcO1j3QgdXoJEoWv1/cCdLrRoOfg==}
     engines: {node: '>= 0.12.0'}
-    dev: true
 
-  /@vue/repl@3.0.0:
-    resolution: {integrity: sha512-tGYibiftMo5yEuIKPWVsNuuNDejjJk0JQmvKtTm12KNLFqtGD7fWoGv1qUzcN9EAxwVeDgnT9ljRgqGVgZkyEg==}
-    dev: false
+  '@vue/repl@4.4.2':
+    resolution: {integrity: sha512-MEAsBK/YzMFGINOBzqM40XTeIYAUsg7CqvXvD5zi0rhYEQrPfEUIdexmMjdm7kVKsKmcvIHxrFK2DFC35m9kHw==}
 
-  /@zeit/schemas@2.29.0:
-    resolution: {integrity: sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==}
-    dev: true
+  '@zeit/schemas@2.36.0':
+    resolution: {integrity: sha512-7kjMwcChYEzMKjeex9ZFXkt1AyNov9R5HZtjBKVsmVpw7pa7ZtlCGvCBC2vnnXctaYN+aRI61HjIqeetZW5ROg==}
 
-  /JSONStream@1.3.5:
-    resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
-    hasBin: true
-    dependencies:
-      jsonparse: 1.3.1
-      through: 2.3.8
-    dev: true
-
-  /abab@2.0.6:
-    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
-    dev: true
-
-  /accepts@1.3.8:
+  accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
-    dependencies:
-      mime-types: 2.1.35
-      negotiator: 0.6.3
-    dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.10.0):
+  acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.10.0
-    dev: true
 
-  /acorn-walk@8.2.0:
-    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
-    engines: {node: '>=0.4.0'}
-    dev: true
-
-  /acorn@7.4.1:
+  acorn@7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
-  /acorn@8.10.0:
-    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
+  acorn@8.12.1:
+    resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
-  /add-stream@1.0.0:
+  add-stream@1.0.0:
     resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==}
-    dev: true
 
-  /agent-base@6.0.2:
-    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
-    engines: {node: '>= 6.0.0'}
-    dependencies:
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /agent-base@7.1.0:
-    resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
+  agent-base@7.1.1:
+    resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==}
     engines: {node: '>= 14'}
-    dependencies:
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /ajv@6.12.6:
+  ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-    dev: true
 
-  /ajv@8.11.0:
-    resolution: {integrity: sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==}
-    dependencies:
-      fast-deep-equal: 3.1.3
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-      uri-js: 4.4.1
-    dev: true
+  ajv@8.12.0:
+    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
 
-  /ansi-align@3.0.1:
+  ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
-    dependencies:
-      string-width: 4.2.3
-    dev: true
 
-  /ansi-colors@4.1.3:
+  ansi-colors@4.1.3:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
-    dev: true
 
-  /ansi-escapes@5.0.0:
-    resolution: {integrity: sha512-5GFMVX8HqE/TB+FuBJGuO5XG0WrsA6ptUqoODaT/n9mmUaZFkqnBueB4leqGBCmrUHnCnC4PCZTCd0E7QQ83bA==}
-    engines: {node: '>=12'}
-    dependencies:
-      type-fest: 1.4.0
-    dev: true
+  ansi-escapes@7.0.0:
+    resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
+    engines: {node: '>=18'}
 
-  /ansi-regex@5.0.1:
+  ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
-    dev: true
 
-  /ansi-regex@6.0.1:
+  ansi-regex@6.0.1:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
-    dev: true
 
-  /ansi-styles@3.2.1:
+  ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
-    dependencies:
-      color-convert: 1.9.3
-    dev: true
 
-  /ansi-styles@4.3.0:
+  ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
-    dependencies:
-      color-convert: 2.0.1
-    dev: true
 
-  /ansi-styles@5.2.0:
-    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
-    engines: {node: '>=10'}
-    dev: true
-
-  /ansi-styles@6.2.1:
+  ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
-    dev: true
 
-  /anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-    dev: true
-
-  /arch@2.2.0:
+  arch@2.2.0:
     resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==}
-    dev: true
 
-  /arg@5.0.2:
+  arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: true
 
-  /argparse@2.0.1:
+  argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: true
 
-  /array-buffer-byte-length@1.0.0:
-    resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
-    dependencies:
-      call-bind: 1.0.5
-      is-array-buffer: 3.0.2
-    dev: true
-
-  /array-ify@1.0.0:
+  array-ify@1.0.0:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
-    dev: true
 
-  /array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /arraybuffer.prototype.slice@1.0.2:
-    resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      call-bind: 1.0.5
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      is-array-buffer: 3.0.2
-      is-shared-array-buffer: 1.0.2
-    dev: true
-
-  /asap@2.0.6:
+  asap@2.0.6:
     resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
-    dev: true
 
-  /assert-never@1.2.1:
-    resolution: {integrity: sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==}
-    dev: true
+  assert-never@1.3.0:
+    resolution: {integrity: sha512-9Z3vxQ+berkL/JJo0dK+EY3Lp0s3NtSnP3VCLsh5HDcZPrh0M+KQRK5sWhUeyPPH+/RCxZqOxLMR+YC6vlviEQ==}
 
-  /assertion-error@1.1.0:
-    resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
-    dev: true
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
 
-  /ast-types@0.13.4:
+  ast-types@0.13.4:
     resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
     engines: {node: '>=4'}
-    dependencies:
-      tslib: 2.6.2
-    dev: true
 
-  /asynckit@0.4.0:
+  asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-    dev: true
 
-  /available-typed-arrays@1.0.5:
-    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
-    engines: {node: '>= 0.4'}
-    dev: true
+  b4a@1.6.6:
+    resolution: {integrity: sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==}
 
-  /b4a@1.6.4:
-    resolution: {integrity: sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==}
-    dev: true
-
-  /babel-walk@3.0.0-canary-5:
+  babel-walk@3.0.0-canary-5:
     resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
     engines: {node: '>= 10.0.0'}
-    dependencies:
-      '@babel/types': 7.23.4
-    dev: true
 
-  /balanced-match@1.0.2:
+  balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: true
 
-  /base64-js@1.5.1:
+  bare-events@2.4.2:
+    resolution: {integrity: sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==}
+
+  bare-fs@2.3.1:
+    resolution: {integrity: sha512-W/Hfxc/6VehXlsgFtbB5B4xFcsCl+pAh30cYhoFyXErf6oGrwjh8SwiPAdHgpmWonKuYpZgGywN0SXt7dgsADA==}
+
+  bare-os@2.4.0:
+    resolution: {integrity: sha512-v8DTT08AS/G0F9xrhyLtepoo9EJBJ85FRSMbu1pQUlAf6A8T0tEEQGMVObWeqpjhSPXsE0VGlluFBJu2fdoTNg==}
+
+  bare-path@2.1.3:
+    resolution: {integrity: sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==}
+
+  bare-stream@2.1.3:
+    resolution: {integrity: sha512-tiDAH9H/kP+tvNO5sczyn9ZAA7utrSMobyDchsnyyXBuUe2FSQWbxhtuHB8jwpHYYevVo2UJpcmvvjrbHboUUQ==}
+
+  base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
-    dev: true
 
-  /basic-ftp@5.0.3:
-    resolution: {integrity: sha512-QHX8HLlncOLpy54mh+k/sWIFd0ThmRqwe9ZjELybGZK+tZ8rUb9VO0saKJUROTbE+KhzDUT7xziGpGrW8Kmd+g==}
+  basic-ftp@5.0.5:
+    resolution: {integrity: sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==}
     engines: {node: '>=10.0.0'}
-    dev: true
 
-  /binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /boxen@7.0.0:
+  boxen@7.0.0:
     resolution: {integrity: sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==}
     engines: {node: '>=14.16'}
-    dependencies:
-      ansi-align: 3.0.1
-      camelcase: 7.0.1
-      chalk: 5.3.0
-      cli-boxes: 3.0.0
-      string-width: 5.1.2
-      type-fest: 2.19.0
-      widest-line: 4.0.1
-      wrap-ansi: 8.1.0
-    dev: true
 
-  /brace-expansion@1.1.11:
+  brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-    dev: true
 
-  /brace-expansion@2.0.1:
+  brace-expansion@2.0.1:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
-    dependencies:
-      balanced-match: 1.0.2
-    dev: true
 
-  /braces@3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
-    dependencies:
-      fill-range: 7.0.1
-    dev: true
 
-  /browserslist@4.22.1:
-    resolution: {integrity: sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001551
-      electron-to-chromium: 1.4.561
-      node-releases: 2.0.13
-      update-browserslist-db: 1.0.13(browserslist@4.22.1)
-    dev: true
-
-  /buffer-crc32@0.2.13:
+  buffer-crc32@0.2.13:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
-    dev: true
 
-  /buffer-from@1.1.2:
-    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
-    dev: true
-
-  /buffer@5.7.1:
+  buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
-    dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
-    dev: true
 
-  /builtin-modules@3.3.0:
-    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
-    engines: {node: '>=6'}
-    dev: true
-
-  /bytes@3.0.0:
+  bytes@3.0.0:
     resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
-    dev: true
 
-  /cac@6.7.14:
+  cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
-    dev: true
 
-  /call-bind@1.0.5:
-    resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==}
-    dependencies:
-      function-bind: 1.1.2
-      get-intrinsic: 1.2.1
-      set-function-length: 1.1.1
-    dev: true
+  call-bind@1.0.7:
+    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
+    engines: {node: '>= 0.4'}
 
-  /callsites@3.1.0:
+  callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
-    dev: true
 
-  /camelcase@7.0.1:
+  camelcase@7.0.1:
     resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
     engines: {node: '>=14.16'}
-    dev: true
 
-  /caniuse-lite@1.0.30001551:
-    resolution: {integrity: sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg==}
-    dev: true
+  chai@5.1.1:
+    resolution: {integrity: sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==}
+    engines: {node: '>=12'}
 
-  /chai@4.3.10:
-    resolution: {integrity: sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==}
-    engines: {node: '>=4'}
-    dependencies:
-      assertion-error: 1.1.0
-      check-error: 1.0.3
-      deep-eql: 4.1.3
-      get-func-name: 2.0.2
-      loupe: 2.3.7
-      pathval: 1.1.1
-      type-detect: 4.0.8
-    dev: true
-
-  /chalk-template@0.4.0:
+  chalk-template@0.4.0:
     resolution: {integrity: sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==}
     engines: {node: '>=12'}
-    dependencies:
-      chalk: 4.1.2
-    dev: true
 
-  /chalk@2.4.2:
+  chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-    dev: true
 
-  /chalk@4.1.2:
+  chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-    dev: true
 
-  /chalk@5.0.1:
+  chalk@5.0.1:
     resolution: {integrity: sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
-    dev: true
 
-  /chalk@5.3.0:
+  chalk@5.3.0:
     resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
-    dev: true
 
-  /character-parser@2.2.0:
+  character-parser@2.2.0:
     resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==}
-    dependencies:
-      is-regex: 1.1.4
-    dev: true
 
-  /check-error@1.0.3:
-    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
-    dependencies:
-      get-func-name: 2.0.2
-    dev: true
+  check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
 
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
-    engines: {node: '>= 8.10.0'}
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.2
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
+  chokidar@4.0.1:
+    resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
+    engines: {node: '>= 14.16.0'}
 
-  /chromium-bidi@0.4.33(devtools-protocol@0.0.1203626):
-    resolution: {integrity: sha512-IxoFM5WGQOIAd95qrSXzJUv4eXIrh+RvU3rwwqIiwYuvfE7U/Llj4fejbsJnjJMUYCuGtVQsY2gv7oGl4aTNSQ==}
+  chromium-bidi@0.6.5:
+    resolution: {integrity: sha512-RuLrmzYrxSb0s9SgpB+QN5jJucPduZQ/9SIe76MDxYJuecPW5mxMdacJ1f4EtgiV+R0p3sCkznTMvH0MPGFqjA==}
     peerDependencies:
       devtools-protocol: '*'
-    dependencies:
-      devtools-protocol: 0.0.1203626
-      mitt: 3.0.1
-      urlpattern-polyfill: 9.0.0
-    dev: true
 
-  /cli-boxes@3.0.0:
+  cli-boxes@3.0.0:
     resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
     engines: {node: '>=10'}
-    dev: true
 
-  /cli-cursor@4.0.0:
-    resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      restore-cursor: 4.0.0
-    dev: true
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
 
-  /cli-truncate@3.1.0:
-    resolution: {integrity: sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      slice-ansi: 5.0.0
-      string-width: 5.1.2
-    dev: true
+  cli-truncate@4.0.0:
+    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
+    engines: {node: '>=18'}
 
-  /clipboardy@3.0.0:
+  clipboardy@3.0.0:
     resolution: {integrity: sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      arch: 2.2.0
-      execa: 5.1.1
-      is-wsl: 2.2.0
-    dev: true
 
-  /cliui@8.0.1:
+  cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 7.0.0
-    dev: true
 
-  /color-convert@1.9.3:
+  color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-    dependencies:
-      color-name: 1.1.3
-    dev: true
 
-  /color-convert@2.0.1:
+  color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
-    dependencies:
-      color-name: 1.1.4
-    dev: true
 
-  /color-name@1.1.3:
+  color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-    dev: true
 
-  /color-name@1.1.4:
+  color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
 
-  /colorette@2.0.20:
+  colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
-    dev: true
 
-  /combined-stream@1.0.8:
+  combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
-    dependencies:
-      delayed-stream: 1.0.0
-    dev: true
 
-  /commander@11.1.0:
-    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
-    engines: {node: '>=16'}
-    dev: true
+  commander@12.1.0:
+    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
+    engines: {node: '>=18'}
 
-  /commander@2.20.3:
-    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
-    dev: true
-
-  /commondir@1.0.1:
+  commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
-    dev: true
 
-  /compare-func@2.0.0:
+  compare-func@2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
-    dependencies:
-      array-ify: 1.0.0
-      dot-prop: 5.3.0
-    dev: true
 
-  /compressible@2.0.18:
+  compressible@2.0.18:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
     engines: {node: '>= 0.6'}
-    dependencies:
-      mime-db: 1.52.0
-    dev: true
 
-  /compression@1.7.4:
+  compression@1.7.4:
     resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
     engines: {node: '>= 0.8.0'}
-    dependencies:
-      accepts: 1.3.8
-      bytes: 3.0.0
-      compressible: 2.0.18
-      debug: 2.6.9
-      on-headers: 1.0.2
-      safe-buffer: 5.1.2
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /concat-map@0.0.1:
+  concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: true
 
-  /constantinople@4.0.1:
+  constantinople@4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
-    dependencies:
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
-    dev: true
 
-  /content-disposition@0.5.2:
+  content-disposition@0.5.2:
     resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==}
     engines: {node: '>= 0.6'}
-    dev: true
 
-  /conventional-changelog-angular@7.0.0:
-    resolution: {integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==}
-    engines: {node: '>=16'}
-    dependencies:
-      compare-func: 2.0.0
-    dev: true
+  conventional-changelog-angular@8.0.0:
+    resolution: {integrity: sha512-CLf+zr6St0wIxos4bmaKHRXWAcsCXrJU6F4VdNDrGRK3B8LDLKoX3zuMV5GhtbGkVR/LohZ6MT6im43vZLSjmA==}
+    engines: {node: '>=18'}
 
-  /conventional-changelog-atom@4.0.0:
-    resolution: {integrity: sha512-q2YtiN7rnT1TGwPTwjjBSIPIzDJCRE+XAUahWxnh+buKK99Kks4WLMHoexw38GXx9OUxAsrp44f9qXe5VEMYhw==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-atom@5.0.0:
+    resolution: {integrity: sha512-WfzCaAvSCFPkznnLgLnfacRAzjgqjLUjvf3MftfsJzQdDICqkOOpcMtdJF3wTerxSpv2IAAjX8doM3Vozqle3g==}
+    engines: {node: '>=18'}
 
-  /conventional-changelog-cli@4.1.0:
-    resolution: {integrity: sha512-MscvILWZ6nWOoC+p/3Nn3D2cVLkjeQjyZPUr0bQ+vUORE/SPrkClJh8BOoMNpS4yk+zFJ5LlgXACxH6XGQoRXA==}
-    engines: {node: '>=16'}
+  conventional-changelog-cli@5.0.0:
+    resolution: {integrity: sha512-9Y8fucJe18/6ef6ZlyIlT2YQUbczvoQZZuYmDLaGvcSBP+M6h+LAvf7ON7waRxKJemcCII8Yqu5/8HEfskTxJQ==}
+    engines: {node: '>=18'}
     hasBin: true
-    dependencies:
-      add-stream: 1.0.0
-      conventional-changelog: 5.1.0
-      meow: 12.1.1
-      tempfile: 5.0.0
-    dev: true
 
-  /conventional-changelog-codemirror@4.0.0:
-    resolution: {integrity: sha512-hQSojc/5imn1GJK3A75m9hEZZhc3urojA5gMpnar4JHmgLnuM3CUIARPpEk86glEKr3c54Po3WV/vCaO/U8g3Q==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-codemirror@5.0.0:
+    resolution: {integrity: sha512-8gsBDI5Y3vrKUCxN6Ue8xr6occZ5nsDEc4C7jO/EovFGozx8uttCAyfhRrvoUAWi2WMm3OmYs+0mPJU7kQdYWQ==}
+    engines: {node: '>=18'}
 
-  /conventional-changelog-conventionalcommits@7.0.2:
-    resolution: {integrity: sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==}
-    engines: {node: '>=16'}
-    dependencies:
-      compare-func: 2.0.0
-    dev: true
+  conventional-changelog-conventionalcommits@8.0.0:
+    resolution: {integrity: sha512-eOvlTO6OcySPyyyk8pKz2dP4jjElYunj9hn9/s0OB+gapTO8zwS9UQWrZ1pmF2hFs3vw1xhonOLGcGjy/zgsuA==}
+    engines: {node: '>=18'}
 
-  /conventional-changelog-core@7.0.0:
-    resolution: {integrity: sha512-UYgaB1F/COt7VFjlYKVE/9tTzfU3VUq47r6iWf6lM5T7TlOxr0thI63ojQueRLIpVbrtHK4Ffw+yQGduw2Bhdg==}
-    engines: {node: '>=16'}
-    dependencies:
-      '@hutson/parse-repository-url': 5.0.0
-      add-stream: 1.0.0
-      conventional-changelog-writer: 7.0.1
-      conventional-commits-parser: 5.0.0
-      git-raw-commits: 4.0.0
-      git-semver-tags: 7.0.1
-      hosted-git-info: 7.0.1
-      normalize-package-data: 6.0.0
-      read-pkg: 8.1.0
-      read-pkg-up: 10.1.0
-    dev: true
+  conventional-changelog-core@8.0.0:
+    resolution: {integrity: sha512-EATUx5y9xewpEe10UEGNpbSHRC6cVZgO+hXQjofMqpy+gFIrcGvH3Fl6yk2VFKh7m+ffenup2N7SZJYpyD9evw==}
+    engines: {node: '>=18'}
 
-  /conventional-changelog-ember@4.0.0:
-    resolution: {integrity: sha512-D0IMhwcJUg1Y8FSry6XAplEJcljkHVlvAZddhhsdbL1rbsqRsMfGx/PIkPYq0ru5aDgn+OxhQ5N5yR7P9mfsvA==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-ember@5.0.0:
+    resolution: {integrity: sha512-RPflVfm5s4cSO33GH/Ey26oxhiC67akcxSKL8CLRT3kQX2W3dbE19sSOM56iFqUJYEwv9mD9r6k79weWe1urfg==}
+    engines: {node: '>=18'}
 
-  /conventional-changelog-eslint@5.0.0:
-    resolution: {integrity: sha512-6JtLWqAQIeJLn/OzUlYmzd9fKeNSWmQVim9kql+v4GrZwLx807kAJl3IJVc3jTYfVKWLxhC3BGUxYiuVEcVjgA==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-eslint@6.0.0:
+    resolution: {integrity: sha512-eiUyULWjzq+ybPjXwU6NNRflApDWlPEQEHvI8UAItYW/h22RKkMnOAtfCZxMmrcMO1OKUWtcf2MxKYMWe9zJuw==}
+    engines: {node: '>=18'}
 
-  /conventional-changelog-express@4.0.0:
-    resolution: {integrity: sha512-yWyy5c7raP9v7aTvPAWzqrztACNO9+FEI1FSYh7UP7YT1AkWgv5UspUeB5v3Ibv4/o60zj2o9GF2tqKQ99lIsw==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-express@5.0.0:
+    resolution: {integrity: sha512-D8Q6WctPkQpvr2HNCCmwU5GkX22BVHM0r4EW8vN0230TSyS/d6VQJDAxGb84lbg0dFjpO22MwmsikKL++Oo/oQ==}
+    engines: {node: '>=18'}
 
-  /conventional-changelog-jquery@5.0.0:
-    resolution: {integrity: sha512-slLjlXLRNa/icMI3+uGLQbtrgEny3RgITeCxevJB+p05ExiTgHACP5p3XiMKzjBn80n+Rzr83XMYfRInEtCPPw==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-jquery@6.0.0:
+    resolution: {integrity: sha512-2kxmVakyehgyrho2ZHBi90v4AHswkGzHuTaoH40bmeNqUt20yEkDOSpw8HlPBfvEQBwGtbE+5HpRwzj6ac2UfA==}
+    engines: {node: '>=18'}
 
-  /conventional-changelog-jshint@4.0.0:
-    resolution: {integrity: sha512-LyXq1bbl0yG0Ai1SbLxIk8ZxUOe3AjnlwE6sVRQmMgetBk+4gY9EO3d00zlEt8Y8gwsITytDnPORl8al7InTjg==}
-    engines: {node: '>=16'}
-    dependencies:
-      compare-func: 2.0.0
-    dev: true
+  conventional-changelog-jshint@5.0.0:
+    resolution: {integrity: sha512-gGNphSb/opc76n2eWaO6ma4/Wqu3tpa2w7i9WYqI6Cs2fncDSI2/ihOfMvXveeTTeld0oFvwMVNV+IYQIk3F3g==}
+    engines: {node: '>=18'}
 
-  /conventional-changelog-preset-loader@4.1.0:
-    resolution: {integrity: sha512-HozQjJicZTuRhCRTq4rZbefaiCzRM2pr6u2NL3XhrmQm4RMnDXfESU6JKu/pnKwx5xtdkYfNCsbhN5exhiKGJA==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-preset-loader@5.0.0:
+    resolution: {integrity: sha512-SetDSntXLk8Jh1NOAl1Gu5uLiCNSYenB5tm0YVeZKePRIgDW9lQImromTwLa3c/Gae298tsgOM+/CYT9XAl0NA==}
+    engines: {node: '>=18'}
 
-  /conventional-changelog-writer@7.0.1:
-    resolution: {integrity: sha512-Uo+R9neH3r/foIvQ0MKcsXkX642hdm9odUp7TqgFS7BsalTcjzRlIfWZrZR1gbxOozKucaKt5KAbjW8J8xRSmA==}
-    engines: {node: '>=16'}
+  conventional-changelog-writer@8.0.0:
+    resolution: {integrity: sha512-TQcoYGRatlAnT2qEWDON/XSfnVG38JzA7E0wcGScu7RElQBkg9WWgZd1peCWFcWDh1xfb2CfsrcvOn1bbSzztA==}
+    engines: {node: '>=18'}
     hasBin: true
-    dependencies:
-      conventional-commits-filter: 4.0.0
-      handlebars: 4.7.8
-      json-stringify-safe: 5.0.1
-      meow: 12.1.1
-      semver: 7.5.4
-      split2: 4.2.0
-    dev: true
 
-  /conventional-changelog@5.1.0:
-    resolution: {integrity: sha512-aWyE/P39wGYRPllcCEZDxTVEmhyLzTc9XA6z6rVfkuCD2UBnhV/sgSOKbQrEG5z9mEZJjnopjgQooTKxEg8mAg==}
-    engines: {node: '>=16'}
-    dependencies:
-      conventional-changelog-angular: 7.0.0
-      conventional-changelog-atom: 4.0.0
-      conventional-changelog-codemirror: 4.0.0
-      conventional-changelog-conventionalcommits: 7.0.2
-      conventional-changelog-core: 7.0.0
-      conventional-changelog-ember: 4.0.0
-      conventional-changelog-eslint: 5.0.0
-      conventional-changelog-express: 4.0.0
-      conventional-changelog-jquery: 5.0.0
-      conventional-changelog-jshint: 4.0.0
-      conventional-changelog-preset-loader: 4.1.0
-    dev: true
+  conventional-changelog@6.0.0:
+    resolution: {integrity: sha512-tuUH8H/19VjtD9Ig7l6TQRh+Z0Yt0NZ6w/cCkkyzUbGQTnUEmKfGtkC9gGfVgCfOL1Rzno5NgNF4KY8vR+Jo3w==}
+    engines: {node: '>=18'}
 
-  /conventional-commits-filter@4.0.0:
-    resolution: {integrity: sha512-rnpnibcSOdFcdclpFwWa+pPlZJhXE7l+XK04zxhbWrhgpR96h33QLz8hITTXbcYICxVr3HZFtbtUAQ+4LdBo9A==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-commits-filter@5.0.0:
+    resolution: {integrity: sha512-tQMagCOC59EVgNZcC5zl7XqO30Wki9i9J3acbUvkaosCT6JX3EeFwJD7Qqp4MCikRnzS18WXV3BLIQ66ytu6+Q==}
+    engines: {node: '>=18'}
 
-  /conventional-commits-parser@5.0.0:
-    resolution: {integrity: sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==}
-    engines: {node: '>=16'}
+  conventional-commits-parser@6.0.0:
+    resolution: {integrity: sha512-TbsINLp48XeMXR8EvGjTnKGsZqBemisPoyWESlpRyR8lif0lcwzqz+NMtYSj1ooF/WYjSuu7wX0CtdeeMEQAmA==}
+    engines: {node: '>=18'}
     hasBin: true
-    dependencies:
-      JSONStream: 1.3.5
-      is-text-path: 2.0.0
-      meow: 12.1.1
-      split2: 4.2.0
-    dev: true
 
-  /convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
-    dev: true
-
-  /core-util-is@1.0.3:
+  core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
-    dev: false
 
-  /cosmiconfig@8.3.6(typescript@5.2.2):
-    resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
     engines: {node: '>=14'}
     peerDependencies:
       typescript: '>=4.9.5'
     peerDependenciesMeta:
       typescript:
         optional: true
-    dependencies:
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      parse-json: 5.2.0
-      path-type: 4.0.0
-      typescript: 5.2.2
-    dev: true
 
-  /cross-fetch@4.0.0:
-    resolution: {integrity: sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==}
-    dependencies:
-      node-fetch: 2.7.0
-    transitivePeerDependencies:
-      - encoding
-    dev: true
-
-  /cross-spawn@6.0.5:
-    resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
-    engines: {node: '>=4.8'}
-    dependencies:
-      nice-try: 1.0.5
-      path-key: 2.0.1
-      semver: 5.7.2
-      shebang-command: 1.2.0
-      which: 1.3.1
-    dev: true
-
-  /cross-spawn@7.0.3:
+  cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-    dev: true
 
-  /cssesc@3.0.0:
+  cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
-  /cssstyle@3.0.0:
-    resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
-    engines: {node: '>=14'}
-    dependencies:
-      rrweb-cssom: 0.6.0
-    dev: true
+  cssstyle@4.0.1:
+    resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==}
+    engines: {node: '>=18'}
 
-  /csstype@3.1.2:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: false
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  /dargs@8.1.0:
-    resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
-    engines: {node: '>=12'}
-    dev: true
-
-  /data-uri-to-buffer@6.0.1:
-    resolution: {integrity: sha512-MZd3VlchQkp8rdend6vrx7MmVDJzSNTBvghvKjirLkD+WTChA3KUf0jkE68Q4UyctNqI11zZO9/x2Yx+ub5Cvg==}
+  data-uri-to-buffer@6.0.2:
+    resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
     engines: {node: '>= 14'}
-    dev: true
 
-  /data-urls@4.0.0:
-    resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==}
-    engines: {node: '>=14'}
-    dependencies:
-      abab: 2.0.6
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 12.0.1
-    dev: true
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
 
-  /debug@2.6.9:
+  debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
       supports-color: '*'
     peerDependenciesMeta:
       supports-color:
         optional: true
-    dependencies:
-      ms: 2.0.0
-    dev: true
 
-  /debug@4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.3.6:
+    resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
     peerDependenciesMeta:
       supports-color:
         optional: true
-    dependencies:
-      ms: 2.1.2
-    dev: true
 
-  /decimal.js@10.4.3:
+  decimal.js@10.4.3:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
-    dev: true
 
-  /deep-eql@4.1.3:
-    resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
-    dependencies:
-      type-detect: 4.0.8
-    dev: true
 
-  /deep-extend@0.6.0:
+  deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
-    dev: true
 
-  /deep-is@0.1.4:
+  deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-    dev: true
 
-  /deepmerge@4.3.1:
+  deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
-  /define-data-property@1.1.1:
-    resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==}
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      gopd: 1.0.1
-      has-property-descriptors: 1.0.0
-    dev: true
 
-  /define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.1
-      has-property-descriptors: 1.0.0
-      object-keys: 1.1.1
-    dev: true
-
-  /degenerator@5.0.1:
+  degenerator@5.0.1:
     resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
     engines: {node: '>= 14'}
-    dependencies:
-      ast-types: 0.13.4
-      escodegen: 2.1.0
-      esprima: 4.0.1
-    dev: true
 
-  /delayed-stream@1.0.0:
+  delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
-  /devtools-protocol@0.0.1203626:
-    resolution: {integrity: sha512-nEzHZteIUZfGCZtTiS1fRpC8UZmsfD1SiyPvaUNvS13dvKf666OAm8YTi0+Ca3n1nLEyu49Cy4+dPWpaHFJk9g==}
-    dev: true
+  devtools-protocol@0.0.1330662:
+    resolution: {integrity: sha512-pzh6YQ8zZfz3iKlCvgzVCu22NdpZ8hNmwU6WnQjNVquh0A9iVosPtNLWDwaWVGyrntQlltPFztTMK5Cg6lfCuw==}
 
-  /diff-sequences@29.6.3:
-    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dev: true
-
-  /dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
-    dependencies:
-      path-type: 4.0.0
-    dev: true
-
-  /doctrine@3.0.0:
+  doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: true
 
-  /doctypes@1.1.0:
+  doctypes@1.1.0:
     resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
-    dev: true
 
-  /domexception@4.0.0:
-    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
-    engines: {node: '>=12'}
-    dependencies:
-      webidl-conversions: 7.0.0
-    dev: true
-
-  /dot-prop@5.3.0:
+  dot-prop@5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
     engines: {node: '>=8'}
-    dependencies:
-      is-obj: 2.0.0
-    dev: true
 
-  /eastasianwidth@0.2.0:
+  eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-    dev: true
 
-  /electron-to-chromium@1.4.561:
-    resolution: {integrity: sha512-eS5t4ulWOBfVHdq9SW2dxEaFarj1lPjvJ8PaYMOjY0DecBaj/t4ARziL2IPpDr4atyWwjLFGQ2vo/VCgQFezVQ==}
-    dev: true
+  emoji-regex@10.3.0:
+    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
 
-  /emoji-regex@8.0.0:
+  emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-    dev: true
 
-  /emoji-regex@9.2.2:
+  emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: true
 
-  /end-of-stream@1.4.4:
+  end-of-stream@1.4.4:
     resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
-    dependencies:
-      once: 1.4.0
-    dev: true
 
-  /enquirer@2.4.1:
+  enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
-    dependencies:
-      ansi-colors: 4.1.3
-      strip-ansi: 6.0.1
-    dev: true
 
-  /entities@4.5.0:
+  entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
-    dev: true
 
-  /error-ex@1.3.2:
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
+  error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
-    dependencies:
-      is-arrayish: 0.2.1
-    dev: true
 
-  /es-abstract@1.22.2:
-    resolution: {integrity: sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==}
+  es-define-property@1.0.0:
+    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      arraybuffer.prototype.slice: 1.0.2
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.5
-      es-set-tostringtag: 2.0.1
-      es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.6
-      get-intrinsic: 1.2.1
-      get-symbol-description: 1.0.0
-      globalthis: 1.0.3
-      gopd: 1.0.1
-      has: 1.0.4
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      is-array-buffer: 3.0.2
-      is-callable: 1.2.7
-      is-negative-zero: 2.0.2
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.2
-      is-string: 1.0.7
-      is-typed-array: 1.1.12
-      is-weakref: 1.0.2
-      object-inspect: 1.13.1
-      object-keys: 1.1.1
-      object.assign: 4.1.4
-      regexp.prototype.flags: 1.5.1
-      safe-array-concat: 1.0.1
-      safe-regex-test: 1.0.0
-      string.prototype.trim: 1.2.8
-      string.prototype.trimend: 1.0.7
-      string.prototype.trimstart: 1.0.7
-      typed-array-buffer: 1.0.0
-      typed-array-byte-length: 1.0.0
-      typed-array-byte-offset: 1.0.0
-      typed-array-length: 1.0.4
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.13
-    dev: true
 
-  /es-module-lexer@1.3.1:
-    resolution: {integrity: sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==}
-    dev: true
-
-  /es-set-tostringtag@2.0.1:
-    resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.4
-      has-tostringtag: 1.0.0
-    dev: true
 
-  /es-to-primitive@1.2.1:
-    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
-    dev: true
+  es-module-lexer@1.5.4:
+    resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
 
-  /esbuild-plugin-polyfill-node@0.3.0(esbuild@0.19.5):
+  esbuild-plugin-polyfill-node@0.3.0:
     resolution: {integrity: sha512-SHG6CKUfWfYyYXGpW143NEZtcVVn8S/WHcEOxk62LuDXnY4Zpmc+WmxJKN6GMTgTClXJXhEM5KQlxKY6YjbucQ==}
     peerDependencies:
       esbuild: '*'
-    dependencies:
-      '@jspm/core': 2.0.1
-      esbuild: 0.19.5
-      import-meta-resolve: 3.0.0
-    dev: true
 
-  /esbuild@0.18.20:
-    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
     hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.18.20
-      '@esbuild/android-arm64': 0.18.20
-      '@esbuild/android-x64': 0.18.20
-      '@esbuild/darwin-arm64': 0.18.20
-      '@esbuild/darwin-x64': 0.18.20
-      '@esbuild/freebsd-arm64': 0.18.20
-      '@esbuild/freebsd-x64': 0.18.20
-      '@esbuild/linux-arm': 0.18.20
-      '@esbuild/linux-arm64': 0.18.20
-      '@esbuild/linux-ia32': 0.18.20
-      '@esbuild/linux-loong64': 0.18.20
-      '@esbuild/linux-mips64el': 0.18.20
-      '@esbuild/linux-ppc64': 0.18.20
-      '@esbuild/linux-riscv64': 0.18.20
-      '@esbuild/linux-s390x': 0.18.20
-      '@esbuild/linux-x64': 0.18.20
-      '@esbuild/netbsd-x64': 0.18.20
-      '@esbuild/openbsd-x64': 0.18.20
-      '@esbuild/sunos-x64': 0.18.20
-      '@esbuild/win32-arm64': 0.18.20
-      '@esbuild/win32-ia32': 0.18.20
-      '@esbuild/win32-x64': 0.18.20
-    dev: true
 
-  /esbuild@0.19.5:
-    resolution: {integrity: sha512-bUxalY7b1g8vNhQKdB24QDmHeY4V4tw/s6Ak5z+jJX9laP5MoQseTOMemAr0gxssjNcH0MCViG8ONI2kksvfFQ==}
-    engines: {node: '>=12'}
+  esbuild@0.24.0:
+    resolution: {integrity: sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==}
+    engines: {node: '>=18'}
     hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.19.5
-      '@esbuild/android-arm64': 0.19.5
-      '@esbuild/android-x64': 0.19.5
-      '@esbuild/darwin-arm64': 0.19.5
-      '@esbuild/darwin-x64': 0.19.5
-      '@esbuild/freebsd-arm64': 0.19.5
-      '@esbuild/freebsd-x64': 0.19.5
-      '@esbuild/linux-arm': 0.19.5
-      '@esbuild/linux-arm64': 0.19.5
-      '@esbuild/linux-ia32': 0.19.5
-      '@esbuild/linux-loong64': 0.19.5
-      '@esbuild/linux-mips64el': 0.19.5
-      '@esbuild/linux-ppc64': 0.19.5
-      '@esbuild/linux-riscv64': 0.19.5
-      '@esbuild/linux-s390x': 0.19.5
-      '@esbuild/linux-x64': 0.19.5
-      '@esbuild/netbsd-x64': 0.19.5
-      '@esbuild/openbsd-x64': 0.19.5
-      '@esbuild/sunos-x64': 0.19.5
-      '@esbuild/win32-arm64': 0.19.5
-      '@esbuild/win32-ia32': 0.19.5
-      '@esbuild/win32-x64': 0.19.5
-    dev: true
 
-  /escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+  escalade@3.1.2:
+    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
     engines: {node: '>=6'}
-    dev: true
 
-  /escape-string-regexp@1.0.5:
+  escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
-    dev: true
 
-  /escape-string-regexp@4.0.0:
+  escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
-    dev: true
 
-  /escodegen@2.1.0:
+  escodegen@2.1.0:
     resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
     engines: {node: '>=6.0'}
     hasBin: true
-    dependencies:
-      esprima: 4.0.1
-      estraverse: 5.3.0
-      esutils: 2.0.3
-    optionalDependencies:
-      source-map: 0.6.1
-    dev: true
 
-  /eslint-plugin-jest@27.6.0(eslint@8.54.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-MTlusnnDMChbElsszJvrwD1dN3x6nZl//s4JD23BxB6MgR66TZlL064su24xEIS3VACfAoHV1vgyMgPw8nkdng==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+
+  eslint-plugin-import-x@4.3.1:
+    resolution: {integrity: sha512-5TriWkXulDl486XnYYRgsL+VQoS/7mhN/2ci02iLCuL7gdhbiWxnsuL/NTcaKY9fpMgsMFjWZBtIGW7pb+RX0g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/eslint-plugin': ^5.0.0 || ^6.0.0
-      eslint: ^7.0.0 || ^8.0.0
-      jest: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/eslint-plugin':
-        optional: true
-      jest:
-        optional: true
-    dependencies:
-      '@typescript-eslint/utils': 5.62.0(eslint@8.54.0)(typescript@5.2.2)
-      eslint: 8.54.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-    dev: true
+      eslint: ^8.57.0 || ^9.0.0
 
-  /eslint-scope@5.1.1:
-    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 4.3.0
-    dev: true
+  eslint-scope@8.1.0:
+    resolution: {integrity: sha512-14dSvlhaVhKKsa9Fx1l8A17s7ah7Ef7wCakJ10LYk6+GYmP9yDti2oq2SEwcyndt6knfcZyhyxwY3i9yL78EQw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: true
-
-  /eslint-visitor-keys@3.4.3:
+  eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
 
-  /eslint@8.54.0:
-    resolution: {integrity: sha512-NY0DfAkM8BIZDVl6PgSa1ttZbx3xHgJzSNJKYcQglem6CppHyMhRIQkBVSSMaSRnLhig3jsDbEzOjwCVt4AmmA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  eslint-visitor-keys@4.1.0:
+    resolution: {integrity: sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.12.0:
+    resolution: {integrity: sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.54.0)
-      '@eslint-community/regexpp': 4.9.1
-      '@eslint/eslintrc': 2.1.3
-      '@eslint/js': 8.54.0
-      '@humanwhocodes/config-array': 0.11.13
-      '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.2.0
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      doctrine: 3.0.0
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.5.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      globals: 13.23.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
 
-  /espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.10.0
-      acorn-jsx: 5.3.2(acorn@8.10.0)
-      eslint-visitor-keys: 3.4.3
-    dev: true
+  espree@10.2.0:
+    resolution: {integrity: sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /esprima@4.0.1:
+  esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
-  /esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: true
 
-  /esrecurse@4.3.0:
+  esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: true
 
-  /estraverse@4.3.0:
-    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
-    engines: {node: '>=4.0'}
-    dev: true
-
-  /estraverse@5.3.0:
+  estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
-    dev: true
 
-  /estree-walker@2.0.2:
+  estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
-  /esutils@2.0.3:
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
-  /eventemitter3@5.0.1:
+  eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
-    dev: true
 
-  /execa@5.1.1:
+  execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
-    dependencies:
-      cross-spawn: 7.0.3
-      get-stream: 6.0.1
-      human-signals: 2.1.0
-      is-stream: 2.0.1
-      merge-stream: 2.0.0
-      npm-run-path: 4.0.1
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-      strip-final-newline: 2.0.0
-    dev: true
 
-  /execa@8.0.1:
+  execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
-    dependencies:
-      cross-spawn: 7.0.3
-      get-stream: 8.0.1
-      human-signals: 5.0.0
-      is-stream: 3.0.0
-      merge-stream: 2.0.0
-      npm-run-path: 5.1.0
-      onetime: 6.0.0
-      signal-exit: 4.1.0
-      strip-final-newline: 3.0.0
-    dev: true
 
-  /extract-zip@2.0.1:
+  extract-zip@2.0.1:
     resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
     engines: {node: '>= 10.17.0'}
     hasBin: true
-    dependencies:
-      debug: 4.3.4
-      get-stream: 5.2.0
-      yauzl: 2.10.0
-    optionalDependencies:
-      '@types/yauzl': 2.10.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /fast-deep-equal@3.1.3:
+  fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-    dev: true
 
-  /fast-fifo@1.3.2:
+  fast-fifo@1.3.2:
     resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
-    dev: true
 
-  /fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+  fast-glob@3.3.2:
+    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-    dev: true
 
-  /fast-json-stable-stringify@2.1.0:
+  fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-    dev: true
 
-  /fast-levenshtein@2.0.6:
+  fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-    dev: true
 
-  /fast-url-parser@1.1.3:
+  fast-url-parser@1.1.3:
     resolution: {integrity: sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==}
-    dependencies:
-      punycode: 1.4.1
-    dev: true
 
-  /fastq@1.15.0:
-    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
-    dependencies:
-      reusify: 1.0.4
-    dev: true
+  fastq@1.17.1:
+    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
-  /fd-slicer@1.1.0:
+  fd-slicer@1.1.0:
     resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
-    dependencies:
-      pend: 1.2.0
-    dev: true
 
-  /file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
-    dependencies:
-      flat-cache: 3.1.1
-    dev: true
+  fdir@6.4.0:
+    resolution: {integrity: sha512-3oB133prH1o4j/L5lLW7uOCF1PlD+/It2L0eL/iAqWMB91RBbqTewABqxhj0ibBd90EEmWZq7ntIWzVaWcXTGQ==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
 
-  /file-saver@2.0.5:
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  file-saver@2.0.5:
     resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
-    dev: false
 
-  /fill-range@7.0.1:
-    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
-    dependencies:
-      to-regex-range: 5.0.1
-    dev: true
 
-  /find-up@5.0.0:
+  find-up-simple@1.0.0:
+    resolution: {integrity: sha512-q7Us7kcjj2VMePAa02hDAF6d+MzsdsAWEwYyOpwUtlerRBkOEPBCRZrAV4XfcSN8fHAgaD0hP7miwoay6DCprw==}
+    engines: {node: '>=18'}
+
+  find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-    dev: true
 
-  /find-up@6.3.0:
-    resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      locate-path: 7.2.0
-      path-exists: 5.0.0
-    dev: true
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
 
-  /flat-cache@3.1.1:
-    resolution: {integrity: sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      flatted: 3.2.9
-      keyv: 4.5.4
-      rimraf: 3.0.2
-    dev: true
+  flatted@3.3.1:
+    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
-  /flatted@3.2.9:
-    resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
-    dev: true
-
-  /for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
-    dependencies:
-      is-callable: 1.2.7
-    dev: true
-
-  /foreground-child@3.1.1:
-    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
+  foreground-child@3.3.0:
+    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
     engines: {node: '>=14'}
-    dependencies:
-      cross-spawn: 7.0.3
-      signal-exit: 4.1.0
-    dev: true
 
-  /form-data@4.0.0:
+  form-data@4.0.0:
     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
     engines: {node: '>= 6'}
-    dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      mime-types: 2.1.35
-    dev: true
 
-  /fs-extra@8.1.0:
-    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
-    engines: {node: '>=6 <7 || >=8'}
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 4.0.0
-      universalify: 0.1.2
-    dev: true
+  fs-extra@11.2.0:
+    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
+    engines: {node: '>=14.14'}
 
-  /fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: true
-
-  /fsevents@2.3.3:
+  fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /function-bind@1.1.2:
+  function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
-    dev: true
 
-  /function.prototype.name@1.1.6:
-    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.5
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      functions-have-names: 1.2.3
-    dev: true
-
-  /functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-    dev: true
-
-  /generic-names@4.0.0:
+  generic-names@4.0.0:
     resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==}
-    dependencies:
-      loader-utils: 3.2.1
-    dev: true
 
-  /gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
-  /get-caller-file@2.0.5:
+  get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
-    dev: true
 
-  /get-func-name@2.0.2:
+  get-east-asian-width@1.2.0:
+    resolution: {integrity: sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==}
+    engines: {node: '>=18'}
+
+  get-func-name@2.0.2:
     resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
-    dev: true
 
-  /get-intrinsic@1.2.1:
-    resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
-    dependencies:
-      function-bind: 1.1.2
-      has: 1.0.4
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-    dev: true
+  get-intrinsic@1.2.4:
+    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+    engines: {node: '>= 0.4'}
 
-  /get-stream@5.2.0:
+  get-stream@5.2.0:
     resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
     engines: {node: '>=8'}
-    dependencies:
-      pump: 3.0.0
-    dev: true
 
-  /get-stream@6.0.1:
+  get-stream@6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
-    dev: true
 
-  /get-stream@8.0.1:
+  get-stream@8.0.1:
     resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
     engines: {node: '>=16'}
-    dev: true
 
-  /get-symbol-description@1.0.0:
-    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.1
-    dev: true
+  get-tsconfig@4.7.6:
+    resolution: {integrity: sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==}
 
-  /get-tsconfig@4.7.2:
-    resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==}
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-    dev: true
-
-  /get-uri@6.0.2:
-    resolution: {integrity: sha512-5KLucCJobh8vBY1K07EFV4+cPZH3mrV9YeAruUseCQKHB58SGjjT2l9/eA9LD082IiuMjSlFJEcdJ27TXvbZNw==}
+  get-uri@6.0.3:
+    resolution: {integrity: sha512-BzUrJBS9EcUb4cFol8r4W3v1cPsSyajLSthNkz5BxbpDcHN5tIrM10E2eNvfnvBn3DaT3DUgx0OpsBKkaOpanw==}
     engines: {node: '>= 14'}
-    dependencies:
-      basic-ftp: 5.0.3
-      data-uri-to-buffer: 6.0.1
-      debug: 4.3.4
-      fs-extra: 8.1.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /git-raw-commits@4.0.0:
-    resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
-    engines: {node: '>=16'}
+  git-raw-commits@5.0.0:
+    resolution: {integrity: sha512-I2ZXrXeOc0KrCvC7swqtIFXFN+rbjnC7b2T943tvemIOVNl+XP8YnA9UVwqFhzzLClnSA60KR/qEjLpXzs73Qg==}
+    engines: {node: '>=18'}
     hasBin: true
-    dependencies:
-      dargs: 8.1.0
-      meow: 12.1.1
-      split2: 4.2.0
-    dev: true
 
-  /git-semver-tags@7.0.1:
-    resolution: {integrity: sha512-NY0ZHjJzyyNXHTDZmj+GG7PyuAKtMsyWSwh07CR2hOZFa+/yoTsXci/nF2obzL8UDhakFNkD9gNdt/Ed+cxh2Q==}
-    engines: {node: '>=16'}
+  git-semver-tags@8.0.0:
+    resolution: {integrity: sha512-N7YRIklvPH3wYWAR2vysaqGLPRcpwQ0GKdlqTiVN5w1UmCdaeY3K8s6DMKRCh54DDdzyt/OAB6C8jgVtb7Y2Fg==}
+    engines: {node: '>=18'}
     hasBin: true
-    dependencies:
-      meow: 12.1.1
-      semver: 7.5.4
-    dev: true
 
-  /glob-parent@5.1.2:
+  glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: true
 
-  /glob-parent@6.0.2:
+  glob-parent@6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: true
 
-  /glob@10.3.10:
-    resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
-    dependencies:
-      foreground-child: 3.1.1
-      jackspeak: 2.3.6
-      minimatch: 9.0.3
-      minipass: 7.0.4
-      path-scurry: 1.10.1
-    dev: true
 
-  /glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: true
+  glob@11.0.0:
+    resolution: {integrity: sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==}
+    engines: {node: 20 || >=22}
+    hasBin: true
 
-  /glob@8.1.0:
-    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 5.1.6
-      once: 1.4.0
-    dev: true
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
 
-  /globals@11.12.0:
-    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /globals@13.23.0:
-    resolution: {integrity: sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==}
-    engines: {node: '>=8'}
-    dependencies:
-      type-fest: 0.20.2
-    dev: true
-
-  /globalthis@1.0.3:
-    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-properties: 1.2.1
-    dev: true
-
-  /globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.1
-      ignore: 5.2.4
-      merge2: 1.4.1
-      slash: 3.0.0
-    dev: true
-
-  /gopd@1.0.1:
+  gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: true
 
-  /graceful-fs@4.2.11:
+  graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-    dev: true
 
-  /graphemer@1.4.0:
+  graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-    dev: true
 
-  /handlebars@4.7.8:
+  handlebars@4.7.8:
     resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
     engines: {node: '>=0.4.7'}
     hasBin: true
-    dependencies:
-      minimist: 1.2.8
-      neo-async: 2.6.2
-      source-map: 0.6.1
-      wordwrap: 1.0.0
-    optionalDependencies:
-      uglify-js: 3.17.4
-    dev: true
 
-  /has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
-    dev: true
-
-  /has-flag@3.0.0:
+  has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
-    dev: true
 
-  /has-flag@4.0.0:
+  has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
-    dev: true
 
-  /has-property-descriptors@1.0.0:
-    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: true
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
-  /has-proto@1.0.1:
-    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
+  has-proto@1.0.3:
+    resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
     engines: {node: '>= 0.4'}
-    dev: true
 
-  /has-symbols@1.0.3:
+  has-symbols@1.0.3:
     resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
     engines: {node: '>= 0.4'}
-    dev: true
 
-  /has-tostringtag@1.0.0:
-    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: true
 
-  /has@1.0.4:
-    resolution: {integrity: sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==}
-    engines: {node: '>= 0.4.0'}
-    dev: true
-
-  /hash-sum@2.0.0:
+  hash-sum@2.0.0:
     resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
-    dev: true
 
-  /hosted-git-info@2.8.9:
-    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
-    dev: true
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
 
-  /hosted-git-info@7.0.1:
-    resolution: {integrity: sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==}
+  hosted-git-info@7.0.2:
+    resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
     engines: {node: ^16.14.0 || >=18.0.0}
-    dependencies:
-      lru-cache: 10.1.0
-    dev: true
 
-  /html-encoding-sniffer@3.0.0:
-    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
-    engines: {node: '>=12'}
-    dependencies:
-      whatwg-encoding: 2.0.0
-    dev: true
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
 
-  /html-escaper@2.0.2:
+  html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
-    dev: true
 
-  /http-proxy-agent@5.0.0:
-    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
-    engines: {node: '>= 6'}
-    dependencies:
-      '@tootallnate/once': 2.0.0
-      agent-base: 6.0.2
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /http-proxy-agent@7.0.0:
-    resolution: {integrity: sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==}
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
-    dependencies:
-      agent-base: 7.1.0
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /https-proxy-agent@5.0.1:
-    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
-    engines: {node: '>= 6'}
-    dependencies:
-      agent-base: 6.0.2
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /https-proxy-agent@7.0.2:
-    resolution: {integrity: sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==}
+  https-proxy-agent@7.0.5:
+    resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
     engines: {node: '>= 14'}
-    dependencies:
-      agent-base: 7.1.0
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /human-signals@2.1.0:
+  human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
-    dev: true
 
-  /human-signals@5.0.0:
+  human-signals@5.0.0:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
-    dev: true
 
-  /iconv-lite@0.6.3:
+  iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
-    dependencies:
-      safer-buffer: 2.1.2
-    dev: true
 
-  /icss-replace-symbols@1.1.0:
-    resolution: {integrity: sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==}
-    dev: true
-
-  /icss-utils@5.1.0(postcss@8.4.31):
+  icss-utils@5.1.0:
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
-    dependencies:
-      postcss: 8.4.31
-    dev: true
 
-  /ieee754@1.2.1:
+  ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
-    dev: true
 
-  /ignore@5.2.4:
-    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
+  ignore@5.3.1:
+    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
-    dev: true
 
-  /immediate@3.0.6:
+  immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
-    dev: false
 
-  /immutable@4.3.4:
-    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
-    dev: true
+  immutable@4.3.7:
+    resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
 
-  /import-fresh@3.3.0:
+  import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-    dev: true
 
-  /import-meta-resolve@3.0.0:
-    resolution: {integrity: sha512-4IwhLhNNA8yy445rPjD/lWh++7hMDOml2eHtd58eG7h+qK3EryMuuRbsHGPikCoAgIkkDnckKfWSk2iDla/ejg==}
-    dev: true
+  import-meta-resolve@3.1.1:
+    resolution: {integrity: sha512-qeywsE/KC3w9Fd2ORrRDUw6nS/nLwZpXgfrOc2IILvZYnCaEMd+D56Vfg9k4G29gIeVi3XKql1RQatME8iYsiw==}
 
-  /imurmurhash@0.1.4:
+  imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
-    dev: true
 
-  /inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-    dev: true
+  index-to-position@0.1.2:
+    resolution: {integrity: sha512-MWDKS3AS1bGCHLBA2VLImJz42f7bJh8wQsTGCzI3j519/CASStoDONUBVz2I/VID0MpiX3SGSnbOD2xUalbE5g==}
+    engines: {node: '>=18'}
 
-  /inherits@2.0.4:
+  inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
-  /ini@1.3.8:
+  ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
-    dev: true
 
-  /internal-slot@1.0.5:
-    resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.4
-      side-channel: 1.0.4
-    dev: true
+  ip-address@9.0.5:
+    resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
+    engines: {node: '>= 12'}
 
-  /ip@1.1.8:
-    resolution: {integrity: sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==}
-    dev: true
-
-  /ip@2.0.0:
-    resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==}
-    dev: true
-
-  /is-array-buffer@3.0.2:
-    resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
-    dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: true
-
-  /is-arrayish@0.2.1:
+  is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-    dev: true
 
-  /is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
-    dependencies:
-      has-bigints: 1.0.2
-    dev: true
-
-  /is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-    dependencies:
-      binary-extensions: 2.2.0
-    dev: true
-
-  /is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
+  is-core-module@2.15.0:
+    resolution: {integrity: sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.5
-      has-tostringtag: 1.0.0
-    dev: true
 
-  /is-builtin-module@3.2.1:
-    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
-    engines: {node: '>=6'}
-    dependencies:
-      builtin-modules: 3.3.0
-    dev: true
-
-  /is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /is-core-module@2.13.0:
-    resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
-    dependencies:
-      has: 1.0.4
-    dev: true
-
-  /is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: true
-
-  /is-docker@2.2.1:
+  is-docker@2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
     hasBin: true
-    dev: true
 
-  /is-expression@4.0.0:
+  is-expression@4.0.0:
     resolution: {integrity: sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==}
-    dependencies:
-      acorn: 7.4.1
-      object-assign: 4.1.1
-    dev: true
 
-  /is-extglob@2.1.1:
+  is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
-  /is-fullwidth-code-point@3.0.0:
+  is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
-    dev: true
 
-  /is-fullwidth-code-point@4.0.0:
+  is-fullwidth-code-point@4.0.0:
     resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
     engines: {node: '>=12'}
-    dev: true
 
-  /is-glob@4.0.3:
+  is-fullwidth-code-point@5.0.0:
+    resolution: {integrity: sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==}
+    engines: {node: '>=18'}
+
+  is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
-    dependencies:
-      is-extglob: 2.1.1
-    dev: true
 
-  /is-module@1.0.0:
+  is-module@1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
-    dev: true
 
-  /is-negative-zero@2.0.2:
-    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: true
-
-  /is-number@7.0.0:
+  is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
-    dev: true
 
-  /is-obj@2.0.0:
+  is-obj@2.0.0:
     resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
     engines: {node: '>=8'}
-    dev: true
 
-  /is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /is-port-reachable@4.0.0:
+  is-port-reachable@4.0.0:
     resolution: {integrity: sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dev: true
 
-  /is-potential-custom-element-name@1.0.1:
+  is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
-    dev: true
 
-  /is-promise@2.2.2:
+  is-promise@2.2.2:
     resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
-    dev: true
 
-  /is-reference@1.2.1:
+  is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
-    dependencies:
-      '@types/estree': 1.0.3
-    dev: true
 
-  /is-regex@1.1.4:
+  is-regex@1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.5
-      has-tostringtag: 1.0.0
-    dev: true
 
-  /is-shared-array-buffer@1.0.2:
-    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
-    dependencies:
-      call-bind: 1.0.5
-    dev: true
-
-  /is-stream@2.0.1:
+  is-stream@2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
-    dev: true
 
-  /is-stream@3.0.0:
+  is-stream@3.0.0:
     resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dev: true
 
-  /is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: true
-
-  /is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: true
-
-  /is-text-path@2.0.0:
-    resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
-    engines: {node: '>=8'}
-    dependencies:
-      text-extensions: 2.4.0
-    dev: true
-
-  /is-typed-array@1.1.12:
-    resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      which-typed-array: 1.1.13
-    dev: true
-
-  /is-weakref@1.0.2:
-    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
-    dependencies:
-      call-bind: 1.0.5
-    dev: true
-
-  /is-wsl@2.2.0:
+  is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
-    dependencies:
-      is-docker: 2.2.1
-    dev: true
 
-  /isarray@1.0.0:
+  isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
-    dev: false
 
-  /isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-    dev: true
-
-  /isexe@2.0.0:
+  isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: true
 
-  /istanbul-lib-coverage@3.2.0:
-    resolution: {integrity: sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==}
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
-    dev: true
 
-  /istanbul-lib-instrument@6.0.1:
-    resolution: {integrity: sha512-EAMEJBsYuyyztxMxW3g7ugGPkrZsV57v0Hmv3mm1uQsmB+QnZuepg731CRaIgeUVSdmsTngOkSnauNF8p7FIhA==}
-    engines: {node: '>=10'}
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/parser': 7.23.4
-      '@istanbuljs/schema': 0.1.3
-      istanbul-lib-coverage: 3.2.0
-      semver: 7.5.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /istanbul-lib-report@3.0.1:
+  istanbul-lib-report@3.0.1:
     resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
     engines: {node: '>=10'}
-    dependencies:
-      istanbul-lib-coverage: 3.2.0
-      make-dir: 4.0.0
-      supports-color: 7.2.0
-    dev: true
 
-  /istanbul-lib-source-maps@4.0.1:
-    resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
+  istanbul-lib-source-maps@5.0.6:
+    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
     engines: {node: '>=10'}
-    dependencies:
-      debug: 4.3.4
-      istanbul-lib-coverage: 3.2.0
-      source-map: 0.6.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /istanbul-reports@3.1.6:
-    resolution: {integrity: sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==}
+  istanbul-reports@3.1.7:
+    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
     engines: {node: '>=8'}
-    dependencies:
-      html-escaper: 2.0.2
-      istanbul-lib-report: 3.0.1
-    dev: true
 
-  /jackspeak@2.3.6:
-    resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
-    engines: {node: '>=14'}
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
-    dev: true
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  /js-stringify@1.0.2:
+  jackspeak@4.0.1:
+    resolution: {integrity: sha512-cub8rahkh0Q/bw1+GxP7aeSe29hHHn2V4m29nnDlvCdlgU+3UGxkZp7Z53jLUdpX3jdTO0nJZUDl3xvbWc2Xog==}
+    engines: {node: 20 || >=22}
+
+  js-stringify@1.0.2:
     resolution: {integrity: sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==}
-    dev: true
 
-  /js-tokens@4.0.0:
+  js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    requiresBuild: true
-    dev: true
 
-  /js-yaml@4.1.0:
+  js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
-    dependencies:
-      argparse: 2.0.1
-    dev: true
 
-  /jsdom@22.1.0:
-    resolution: {integrity: sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==}
-    engines: {node: '>=16'}
+  jsbn@1.1.0:
+    resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
+
+  jsdom@25.0.0:
+    resolution: {integrity: sha512-OhoFVT59T7aEq75TVw9xxEfkXgacpqAhQaYgP9y/fDqWQCMB/b1H66RfmPm/MaeaAIU9nDwMOVTlPN51+ao6CQ==}
+    engines: {node: '>=18'}
     peerDependencies:
-      canvas: ^2.5.0
+      canvas: ^2.11.2
     peerDependenciesMeta:
       canvas:
         optional: true
-    dependencies:
-      abab: 2.0.6
-      cssstyle: 3.0.0
-      data-urls: 4.0.0
-      decimal.js: 10.4.3
-      domexception: 4.0.0
-      form-data: 4.0.0
-      html-encoding-sniffer: 3.0.0
-      http-proxy-agent: 5.0.0
-      https-proxy-agent: 5.0.1
-      is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.7
-      parse5: 7.1.2
-      rrweb-cssom: 0.6.0
-      saxes: 6.0.0
-      symbol-tree: 3.2.4
-      tough-cookie: 4.1.3
-      w3c-xmlserializer: 4.0.0
-      webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 12.0.1
-      ws: 8.14.2
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-    dev: true
 
-  /jsesc@2.5.2:
-    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: true
-
-  /json-buffer@3.0.1:
+  json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-    dev: true
 
-  /json-parse-better-errors@1.0.2:
-    resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
-    dev: true
-
-  /json-parse-even-better-errors@2.3.1:
+  json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-    dev: true
 
-  /json-parse-even-better-errors@3.0.0:
-    resolution: {integrity: sha512-iZbGHafX/59r39gPwVPRBGw0QQKnA7tte5pSMrhWOW7swGsVvVTjmfyAV9pNqk8YGT7tRCdxRu8uzcgZwoDooA==}
+  json-parse-even-better-errors@3.0.2:
+    resolution: {integrity: sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dev: true
 
-  /json-schema-traverse@0.4.1:
+  json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-    dev: true
 
-  /json-schema-traverse@1.0.0:
+  json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
-    dev: true
 
-  /json-stable-stringify-without-jsonify@1.0.1:
+  json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-    dev: true
 
-  /json-stringify-safe@5.0.1:
-    resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
-    dev: true
+  jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
-  /json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
-    dev: true
-
-  /jsonc-parser@3.2.0:
-    resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
-    dev: true
-
-  /jsonfile@4.0.0:
-    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
-    optionalDependencies:
-      graceful-fs: 4.2.11
-    dev: true
-
-  /jsonparse@1.3.1:
-    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
-    engines: {'0': node >= 0.2.0}
-    dev: true
-
-  /jstransformer@1.0.0:
+  jstransformer@1.0.0:
     resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==}
-    dependencies:
-      is-promise: 2.2.2
-      promise: 7.3.1
-    dev: true
 
-  /jszip@3.10.1:
+  jszip@3.10.1:
     resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
-    dependencies:
-      lie: 3.3.0
-      pako: 1.0.11
-      readable-stream: 2.3.8
-      setimmediate: 1.0.5
-    dev: false
 
-  /keyv@4.5.4:
+  keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
-    dependencies:
-      json-buffer: 3.0.1
-    dev: true
 
-  /levn@0.4.1:
+  levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: true
 
-  /lie@3.3.0:
+  lie@3.3.0:
     resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
-    dependencies:
-      immediate: 3.0.6
-    dev: false
 
-  /lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
-    dev: true
+  lilconfig@3.1.2:
+    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
+    engines: {node: '>=14'}
 
-  /lines-and-columns@1.2.4:
+  lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true
 
-  /lines-and-columns@2.0.3:
-    resolution: {integrity: sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dev: true
-
-  /lint-staged@15.1.0:
-    resolution: {integrity: sha512-ZPKXWHVlL7uwVpy8OZ7YQjYDAuO5X4kMh0XgZvPNxLcCCngd0PO5jKQyy3+s4TL2EnHoIXIzP1422f/l3nZKMw==}
+  lint-staged@15.2.10:
+    resolution: {integrity: sha512-5dY5t743e1byO19P9I4b3x8HJwalIznL5E1FWYnU6OWw33KxNBSLAc6Cy7F2PsFEO8FKnLwjwm5hx7aMF0jzZg==}
     engines: {node: '>=18.12.0'}
     hasBin: true
-    dependencies:
-      chalk: 5.3.0
-      commander: 11.1.0
-      debug: 4.3.4
-      execa: 8.0.1
-      lilconfig: 2.1.0
-      listr2: 7.0.2
-      micromatch: 4.0.5
-      pidtree: 0.6.0
-      string-argv: 0.3.2
-      yaml: 2.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /listr2@7.0.2:
-    resolution: {integrity: sha512-rJysbR9GKIalhTbVL2tYbF2hVyDnrf7pFUZBwjPaMIdadYHmeT+EVi/Bu3qd7ETQPahTotg2WRCatXwRBW554g==}
-    engines: {node: '>=16.0.0'}
-    dependencies:
-      cli-truncate: 3.1.0
-      colorette: 2.0.20
-      eventemitter3: 5.0.1
-      log-update: 5.0.1
-      rfdc: 1.3.0
-      wrap-ansi: 8.1.0
-    dev: true
+  listr2@8.2.4:
+    resolution: {integrity: sha512-opevsywziHd3zHCVQGAj8zu+Z3yHNkkoYhWIGnq54RrCVwLz0MozotJEDnKsIBLvkfLGN6BLOyAeRrYI0pKA4g==}
+    engines: {node: '>=18.0.0'}
 
-  /load-json-file@4.0.0:
-    resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
-    engines: {node: '>=4'}
-    dependencies:
-      graceful-fs: 4.2.11
-      parse-json: 4.0.0
-      pify: 3.0.0
-      strip-bom: 3.0.0
-    dev: true
-
-  /loader-utils@3.2.1:
-    resolution: {integrity: sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==}
+  loader-utils@3.3.1:
+    resolution: {integrity: sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==}
     engines: {node: '>= 12.13.0'}
-    dev: true
 
-  /local-pkg@0.4.3:
-    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
-    engines: {node: '>=14'}
-    dev: true
-
-  /locate-path@6.0.0:
+  locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
-    dependencies:
-      p-locate: 5.0.0
-    dev: true
 
-  /locate-path@7.2.0:
-    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      p-locate: 6.0.0
-    dev: true
-
-  /lodash.camelcase@4.3.0:
+  lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
-    dev: true
 
-  /lodash.merge@4.6.2:
+  lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: true
 
-  /lodash@4.17.21:
+  lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: true
 
-  /log-update@5.0.1:
-    resolution: {integrity: sha512-5UtUDQ/6edw4ofyljDNcOVJQ4c7OjDro4h3y8e1GQL5iYElYclVHJ3zeWchylvMaKnDbDilC8irOVyexnA/Slw==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      ansi-escapes: 5.0.0
-      cli-cursor: 4.0.0
-      slice-ansi: 5.0.0
-      strip-ansi: 7.1.0
-      wrap-ansi: 8.1.0
-    dev: true
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
 
-  /loupe@2.3.7:
-    resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
-    dependencies:
-      get-func-name: 2.0.2
-    dev: true
+  loupe@3.1.1:
+    resolution: {integrity: sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==}
 
-  /lru-cache@10.1.0:
+  lru-cache@10.1.0:
     resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==}
     engines: {node: 14 || >=16.14}
-    dev: true
 
-  /lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
-    dependencies:
-      yallist: 3.1.1
-    dev: true
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  /lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
-    dependencies:
-      yallist: 4.0.0
-    dev: true
+  lru-cache@11.0.0:
+    resolution: {integrity: sha512-Qv32eSV1RSCfhY3fpPE2GNZ8jgM9X7rdAfemLWqTUxwiyIC4jJ6Sy0fZ8H+oLWevO6i4/bizg7c8d8i6bxrzbA==}
+    engines: {node: 20 || >=22}
 
-  /lru-cache@7.18.3:
+  lru-cache@7.18.3:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
-    dev: true
 
-  /magic-string@0.30.5:
-    resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
+  magic-string@0.30.11:
+    resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
 
-  /make-dir@4.0.0:
+  magicast@0.3.4:
+    resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==}
+
+  make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
-    dependencies:
-      semver: 7.5.4
-    dev: true
 
-  /markdown-table@3.0.3:
+  markdown-table@3.0.3:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
-    dev: true
 
-  /marked@9.1.6:
-    resolution: {integrity: sha512-jcByLnIFkd5gSXZmjNvS1TlmRhCXZjIzHYlaGkPlLIekG55JDR2Z4va9tZwCiP+/RDERiNhMOFu01xd6O5ct1Q==}
-    engines: {node: '>= 16'}
+  marked@13.0.3:
+    resolution: {integrity: sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==}
+    engines: {node: '>= 18'}
     hasBin: true
-    dev: true
 
-  /memorystream@0.3.1:
+  memorystream@0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
-    dev: true
 
-  /meow@12.1.1:
-    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
-    engines: {node: '>=16.10'}
-    dev: true
+  meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
 
-  /merge-source-map@1.1.0:
+  merge-source-map@1.1.0:
     resolution: {integrity: sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==}
-    dependencies:
-      source-map: 0.6.1
-    dev: true
 
-  /merge-stream@2.0.0:
+  merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-    dev: true
 
-  /merge2@1.4.1:
+  merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
-    dev: true
 
-  /micromatch@4.0.5:
-    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
-    dependencies:
-      braces: 3.0.2
-      picomatch: 2.3.1
-    dev: true
 
-  /mime-db@1.33.0:
+  mime-db@1.33.0:
     resolution: {integrity: sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==}
     engines: {node: '>= 0.6'}
-    dev: true
 
-  /mime-db@1.52.0:
+  mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
-    dev: true
 
-  /mime-types@2.1.18:
+  mime-db@1.53.0:
+    resolution: {integrity: sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.18:
     resolution: {integrity: sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==}
     engines: {node: '>= 0.6'}
-    dependencies:
-      mime-db: 1.33.0
-    dev: true
 
-  /mime-types@2.1.35:
+  mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
-    dependencies:
-      mime-db: 1.52.0
-    dev: true
 
-  /mimic-fn@2.1.0:
+  mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
-    dev: true
 
-  /mimic-fn@4.0.0:
+  mimic-fn@4.0.0:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
-    dev: true
 
-  /minimatch@3.1.2:
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  minimatch@10.0.1:
+    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
+    engines: {node: 20 || >=22}
+
+  minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-    dependencies:
-      brace-expansion: 1.1.11
-    dev: true
 
-  /minimatch@5.1.6:
-    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
-    engines: {node: '>=10'}
-    dependencies:
-      brace-expansion: 2.0.1
-    dev: true
-
-  /minimatch@9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
-    dependencies:
-      brace-expansion: 2.0.1
-    dev: true
 
-  /minimist@1.2.8:
+  minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: true
 
-  /minipass@7.0.4:
-    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
-    dev: true
 
-  /mitt@3.0.1:
+  mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
-    dev: true
 
-  /mkdirp-classic@0.5.3:
-    resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
-    dev: true
+  monaco-editor@0.52.0:
+    resolution: {integrity: sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==}
 
-  /mlly@1.4.2:
-    resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==}
-    dependencies:
-      acorn: 8.10.0
-      pathe: 1.1.1
-      pkg-types: 1.0.3
-      ufo: 1.3.1
-    dev: true
-
-  /monaco-editor@0.44.0:
-    resolution: {integrity: sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==}
-    dev: false
-
-  /ms@2.0.0:
+  ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
-    dev: true
 
-  /ms@2.1.2:
+  ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
 
-  /nanoid@3.3.6:
-    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  /natural-compare@1.4.0:
+  natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-    dev: true
 
-  /negotiator@0.6.3:
+  negotiator@0.6.3:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
-    dev: true
 
-  /neo-async@2.6.2:
+  neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
-    dev: true
 
-  /netmask@2.0.2:
+  netmask@2.0.2:
     resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
     engines: {node: '>= 0.4.0'}
-    dev: true
 
-  /nice-try@1.0.5:
-    resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
-    dev: true
-
-  /node-fetch@2.7.0:
-    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
-    engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
-    dependencies:
-      whatwg-url: 5.0.0
-    dev: true
-
-  /node-releases@2.0.13:
-    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
-    dev: true
-
-  /normalize-package-data@2.5.0:
-    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
-    dependencies:
-      hosted-git-info: 2.8.9
-      resolve: 1.22.8
-      semver: 5.7.2
-      validate-npm-package-license: 3.0.4
-    dev: true
-
-  /normalize-package-data@6.0.0:
-    resolution: {integrity: sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==}
+  normalize-package-data@6.0.2:
+    resolution: {integrity: sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==}
     engines: {node: ^16.14.0 || >=18.0.0}
-    dependencies:
-      hosted-git-info: 7.0.1
-      is-core-module: 2.13.0
-      semver: 7.5.4
-      validate-npm-package-license: 3.0.4
-    dev: true
 
-  /normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  npm-normalize-package-bin@3.0.1:
+    resolution: {integrity: sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  /npm-run-all@4.1.5:
-    resolution: {integrity: sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==}
-    engines: {node: '>= 4'}
+  npm-run-all2@6.2.3:
+    resolution: {integrity: sha512-5RsxC7jEc/RjxOYBVdEfrJf5FsJ0pHA7jr2/OxrThXknajETCTYjigOCG3iaGjdYIKEQlDuCG0ir0T1HTva8pg==}
+    engines: {node: ^14.18.0 || ^16.13.0 || >=18.0.0, npm: '>= 8'}
     hasBin: true
-    dependencies:
-      ansi-styles: 3.2.1
-      chalk: 2.4.2
-      cross-spawn: 6.0.5
-      memorystream: 0.3.1
-      minimatch: 3.1.2
-      pidtree: 0.3.1
-      read-pkg: 3.0.0
-      shell-quote: 1.8.1
-      string.prototype.padend: 3.1.5
-    dev: true
 
-  /npm-run-path@4.0.1:
+  npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
-    dependencies:
-      path-key: 3.1.1
-    dev: true
 
-  /npm-run-path@5.1.0:
-    resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      path-key: 4.0.0
-    dev: true
 
-  /nwsapi@2.2.7:
-    resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
-    dev: true
+  nwsapi@2.2.12:
+    resolution: {integrity: sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==}
 
-  /object-assign@4.1.1:
+  object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
-  /object-inspect@1.13.1:
-    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
-    dev: true
-
-  /object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /object.assign@4.1.4:
-    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.5
-      define-properties: 1.2.1
-      has-symbols: 1.0.3
-      object-keys: 1.1.1
-    dev: true
-
-  /on-headers@1.0.2:
+  on-headers@1.0.2:
     resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
     engines: {node: '>= 0.8'}
-    dev: true
 
-  /once@1.4.0:
+  once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-    dependencies:
-      wrappy: 1.0.2
-    dev: true
 
-  /onetime@5.1.2:
+  onetime@5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
-    dependencies:
-      mimic-fn: 2.1.0
-    dev: true
 
-  /onetime@6.0.0:
+  onetime@6.0.0:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
-    dependencies:
-      mimic-fn: 4.0.0
-    dev: true
 
-  /optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
-    dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: true
 
-  /p-limit@3.1.0:
+  p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
-    dependencies:
-      yocto-queue: 0.1.0
-    dev: true
 
-  /p-limit@4.0.0:
-    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      yocto-queue: 1.0.0
-    dev: true
-
-  /p-locate@5.0.0:
+  p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
-    dependencies:
-      p-limit: 3.1.0
-    dev: true
 
-  /p-locate@6.0.0:
-    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      p-limit: 4.0.0
-    dev: true
-
-  /pac-proxy-agent@7.0.1:
-    resolution: {integrity: sha512-ASV8yU4LLKBAjqIPMbrgtaKIvxQri/yh2OpI+S6hVa9JRkUI3Y3NPFbfngDtY7oFtSMD3w31Xns89mDa3Feo5A==}
+  pac-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-BFi3vZnO9X5Qt6NRz7ZOaPja3ic0PhlsmCRYLOpN11+mWBCR6XJDqW5RF3j8jm4WGGQZtBA+bTfxYzeKW73eHg==}
     engines: {node: '>= 14'}
-    dependencies:
-      '@tootallnate/quickjs-emscripten': 0.23.0
-      agent-base: 7.1.0
-      debug: 4.3.4
-      get-uri: 6.0.2
-      http-proxy-agent: 7.0.0
-      https-proxy-agent: 7.0.2
-      pac-resolver: 7.0.0
-      socks-proxy-agent: 8.0.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /pac-resolver@7.0.0:
-    resolution: {integrity: sha512-Fd9lT9vJbHYRACT8OhCbZBbxr6KRSawSovFpy8nDGshaK99S/EBhVIHp9+crhxrsZOuvLpgL1n23iyPg6Rl2hg==}
+  pac-resolver@7.0.1:
+    resolution: {integrity: sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==}
     engines: {node: '>= 14'}
-    dependencies:
-      degenerator: 5.0.1
-      ip: 1.1.8
-      netmask: 2.0.2
-    dev: true
 
-  /pako@1.0.11:
+  package-json-from-dist@1.0.0:
+    resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
+
+  pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
-    dev: false
 
-  /parent-module@1.0.1:
+  parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
-    dependencies:
-      callsites: 3.1.0
-    dev: true
 
-  /parse-json@4.0.0:
-    resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
-    engines: {node: '>=4'}
-    dependencies:
-      error-ex: 1.3.2
-      json-parse-better-errors: 1.0.2
-    dev: true
-
-  /parse-json@5.2.0:
+  parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
-    dependencies:
-      '@babel/code-frame': 7.22.13
-      error-ex: 1.3.2
-      json-parse-even-better-errors: 2.3.1
-      lines-and-columns: 1.2.4
-    dev: true
 
-  /parse-json@7.1.0:
-    resolution: {integrity: sha512-ihtdrgbqdONYD156Ap6qTcaGcGdkdAxodO1wLqQ/j7HP1u2sFYppINiq4jyC8F+Nm+4fVufylCV00QmkTHkSUg==}
-    engines: {node: '>=16'}
-    dependencies:
-      '@babel/code-frame': 7.22.13
-      error-ex: 1.3.2
-      json-parse-even-better-errors: 3.0.0
-      lines-and-columns: 2.0.3
-      type-fest: 3.13.1
-    dev: true
+  parse-json@8.1.0:
+    resolution: {integrity: sha512-rum1bPifK5SSar35Z6EKZuYPJx85pkNaFrxBK3mwdfSJ1/WKbYrjoW/zTPSjRRamfmVX1ACBIdFAO0VRErW/EA==}
+    engines: {node: '>=18'}
 
-  /parse5@7.1.2:
+  parse5@7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
-    dependencies:
-      entities: 4.5.0
-    dev: true
 
-  /path-exists@4.0.0:
+  path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
-    dev: true
 
-  /path-exists@5.0.0:
-    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dev: true
-
-  /path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /path-is-inside@1.0.2:
+  path-is-inside@1.0.2:
     resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==}
-    dev: true
 
-  /path-key@2.0.1:
-    resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /path-key@3.1.1:
+  path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
-    dev: true
 
-  /path-key@4.0.0:
+  path-key@4.0.0:
     resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
     engines: {node: '>=12'}
-    dev: true
 
-  /path-parse@1.0.7:
+  path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
 
-  /path-scurry@1.10.1:
-    resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    dependencies:
-      lru-cache: 10.1.0
-      minipass: 7.0.4
-    dev: true
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
 
-  /path-to-regexp@2.2.1:
+  path-scurry@2.0.0:
+    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
+    engines: {node: 20 || >=22}
+
+  path-to-regexp@2.2.1:
     resolution: {integrity: sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==}
-    dev: true
 
-  /path-type@3.0.0:
-    resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
-    engines: {node: '>=4'}
-    dependencies:
-      pify: 3.0.0
-    dev: true
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
-  /path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-    dev: true
+  pathval@2.0.0:
+    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
+    engines: {node: '>= 14.16'}
 
-  /pathe@1.1.1:
-    resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
-    dev: true
-
-  /pathval@1.1.1:
-    resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
-    dev: true
-
-  /pend@1.2.0:
+  pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
-    dev: true
 
-  /picocolors@1.0.0:
-    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+  picocolors@1.0.1:
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
 
-  /picomatch@2.3.1:
+  picocolors@1.1.0:
+    resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
+
+  picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
-  /pidtree@0.3.1:
-    resolution: {integrity: sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==}
-    engines: {node: '>=0.10'}
-    hasBin: true
-    dev: true
-
-  /pidtree@0.6.0:
+  pidtree@0.6.0:
     resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
     engines: {node: '>=0.10'}
     hasBin: true
-    dev: true
 
-  /pify@3.0.0:
-    resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /pkg-types@1.0.3:
-    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
-    dependencies:
-      jsonc-parser: 3.2.0
-      mlly: 1.4.2
-      pathe: 1.1.1
-    dev: true
-
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.31):
-    resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
+  postcss-modules-extract-imports@3.1.0:
+    resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
-    dependencies:
-      postcss: 8.4.31
-    dev: true
 
-  /postcss-modules-local-by-default@4.0.3(postcss@8.4.31):
-    resolution: {integrity: sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==}
+  postcss-modules-local-by-default@4.0.5:
+    resolution: {integrity: sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
-    dependencies:
-      icss-utils: 5.1.0(postcss@8.4.31)
-      postcss: 8.4.31
-      postcss-selector-parser: 6.0.13
-      postcss-value-parser: 4.2.0
-    dev: true
 
-  /postcss-modules-scope@3.0.0(postcss@8.4.31):
-    resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
+  postcss-modules-scope@3.2.0:
+    resolution: {integrity: sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
-    dependencies:
-      postcss: 8.4.31
-      postcss-selector-parser: 6.0.13
-    dev: true
 
-  /postcss-modules-values@4.0.0(postcss@8.4.31):
+  postcss-modules-values@4.0.0:
     resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
-    dependencies:
-      icss-utils: 5.1.0(postcss@8.4.31)
-      postcss: 8.4.31
-    dev: true
 
-  /postcss-modules@4.3.1(postcss@8.4.31):
-    resolution: {integrity: sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==}
+  postcss-modules@6.0.0:
+    resolution: {integrity: sha512-7DGfnlyi/ju82BRzTIjWS5C4Tafmzl3R79YP/PASiocj+aa6yYphHhhKUOEoXQToId5rgyFgJ88+ccOUydjBXQ==}
     peerDependencies:
       postcss: ^8.0.0
-    dependencies:
-      generic-names: 4.0.0
-      icss-replace-symbols: 1.1.0
-      lodash.camelcase: 4.3.0
-      postcss: 8.4.31
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.31)
-      postcss-modules-local-by-default: 4.0.3(postcss@8.4.31)
-      postcss-modules-scope: 3.0.0(postcss@8.4.31)
-      postcss-modules-values: 4.0.0(postcss@8.4.31)
-      string-hash: 1.1.3
-    dev: true
 
-  /postcss-selector-parser@6.0.13:
-    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-    dev: true
 
-  /postcss-value-parser@4.2.0:
+  postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
-  /postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+  postcss@8.4.41:
+    resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
     engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
 
-  /prelude-ls@1.2.1:
+  postcss@8.4.47:
+    resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
-    dev: true
 
-  /prettier@3.1.0:
-    resolution: {integrity: sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==}
+  prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
     engines: {node: '>=14'}
     hasBin: true
-    dev: true
 
-  /pretty-bytes@6.1.1:
+  pretty-bytes@6.1.1:
     resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
     engines: {node: ^14.13.1 || >=16.0.0}
-    dev: true
 
-  /pretty-format@29.7.0:
-    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jest/schemas': 29.6.3
-      ansi-styles: 5.2.0
-      react-is: 18.2.0
-    dev: true
-
-  /process-nextick-args@2.0.1:
+  process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
-    dev: false
 
-  /progress@2.0.3:
+  progress@2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
-  /promise@7.3.1:
+  promise@7.3.1:
     resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
-    dependencies:
-      asap: 2.0.6
-    dev: true
 
-  /proxy-agent@6.3.1:
-    resolution: {integrity: sha512-Rb5RVBy1iyqOtNl15Cw/llpeLH8bsb37gM1FUfKQ+Wck6xHlbAhWGUFiTRHtkjqGTA5pSHz6+0hrPW/oECihPQ==}
+  proxy-agent@6.4.0:
+    resolution: {integrity: sha512-u0piLU+nCOHMgGjRbimiXmA9kM/L9EHh3zL81xCdp7m+Y2pHIsnmbdDoEDoAz5geaonNR6q6+yOPQs6n4T6sBQ==}
     engines: {node: '>= 14'}
-    dependencies:
-      agent-base: 7.1.0
-      debug: 4.3.4
-      http-proxy-agent: 7.0.0
-      https-proxy-agent: 7.0.2
-      lru-cache: 7.18.3
-      pac-proxy-agent: 7.0.1
-      proxy-from-env: 1.1.0
-      socks-proxy-agent: 8.0.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /proxy-from-env@1.1.0:
+  proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-    dev: true
 
-  /psl@1.9.0:
+  psl@1.9.0:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
-    dev: true
 
-  /pug-attrs@3.0.0:
+  pug-attrs@3.0.0:
     resolution: {integrity: sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==}
-    dependencies:
-      constantinople: 4.0.1
-      js-stringify: 1.0.2
-      pug-runtime: 3.0.1
-    dev: true
 
-  /pug-code-gen@3.0.2:
-    resolution: {integrity: sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==}
-    dependencies:
-      constantinople: 4.0.1
-      doctypes: 1.1.0
-      js-stringify: 1.0.2
-      pug-attrs: 3.0.0
-      pug-error: 2.0.0
-      pug-runtime: 3.0.1
-      void-elements: 3.1.0
-      with: 7.0.2
-    dev: true
+  pug-code-gen@3.0.3:
+    resolution: {integrity: sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==}
 
-  /pug-error@2.0.0:
-    resolution: {integrity: sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==}
-    dev: true
+  pug-error@2.1.0:
+    resolution: {integrity: sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==}
 
-  /pug-filters@4.0.0:
+  pug-filters@4.0.0:
     resolution: {integrity: sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==}
-    dependencies:
-      constantinople: 4.0.1
-      jstransformer: 1.0.0
-      pug-error: 2.0.0
-      pug-walk: 2.0.0
-      resolve: 1.22.8
-    dev: true
 
-  /pug-lexer@5.0.1:
+  pug-lexer@5.0.1:
     resolution: {integrity: sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==}
-    dependencies:
-      character-parser: 2.2.0
-      is-expression: 4.0.0
-      pug-error: 2.0.0
-    dev: true
 
-  /pug-linker@4.0.0:
+  pug-linker@4.0.0:
     resolution: {integrity: sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==}
-    dependencies:
-      pug-error: 2.0.0
-      pug-walk: 2.0.0
-    dev: true
 
-  /pug-load@3.0.0:
+  pug-load@3.0.0:
     resolution: {integrity: sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==}
-    dependencies:
-      object-assign: 4.1.1
-      pug-walk: 2.0.0
-    dev: true
 
-  /pug-parser@6.0.0:
+  pug-parser@6.0.0:
     resolution: {integrity: sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==}
-    dependencies:
-      pug-error: 2.0.0
-      token-stream: 1.0.0
-    dev: true
 
-  /pug-runtime@3.0.1:
+  pug-runtime@3.0.1:
     resolution: {integrity: sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==}
-    dev: true
 
-  /pug-strip-comments@2.0.0:
+  pug-strip-comments@2.0.0:
     resolution: {integrity: sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==}
-    dependencies:
-      pug-error: 2.0.0
-    dev: true
 
-  /pug-walk@2.0.0:
+  pug-walk@2.0.0:
     resolution: {integrity: sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==}
-    dev: true
 
-  /pug@3.0.2:
-    resolution: {integrity: sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==}
-    dependencies:
-      pug-code-gen: 3.0.2
-      pug-filters: 4.0.0
-      pug-lexer: 5.0.1
-      pug-linker: 4.0.0
-      pug-load: 3.0.0
-      pug-parser: 6.0.0
-      pug-runtime: 3.0.1
-      pug-strip-comments: 2.0.0
-    dev: true
+  pug@3.0.3:
+    resolution: {integrity: sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==}
 
-  /pump@3.0.0:
+  pump@3.0.0:
     resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
-    dependencies:
-      end-of-stream: 1.4.4
-      once: 1.4.0
-    dev: true
 
-  /punycode@1.4.1:
+  punycode@1.4.1:
     resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==}
-    dev: true
 
-  /punycode@2.3.0:
-    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
-    dev: true
 
-  /puppeteer-core@21.5.2:
-    resolution: {integrity: sha512-v4T0cWnujSKs+iEfmb8ccd7u4/x8oblEyKqplqKnJ582Kw8PewYAWvkH4qUWhitN3O2q9RF7dzkvjyK5HbzjLA==}
-    engines: {node: '>=16.13.2'}
-    dependencies:
-      '@puppeteer/browsers': 1.8.0
-      chromium-bidi: 0.4.33(devtools-protocol@0.0.1203626)
-      cross-fetch: 4.0.0
-      debug: 4.3.4
-      devtools-protocol: 0.0.1203626
-      ws: 8.14.2
-    transitivePeerDependencies:
-      - bufferutil
-      - encoding
-      - supports-color
-      - utf-8-validate
-    dev: true
+  puppeteer-core@23.3.0:
+    resolution: {integrity: sha512-sB2SsVMFs4gKad5OCdv6w5vocvtEUrRl0zQqSyRPbo/cj1Ktbarmhxy02Zyb9R9HrssBcJDZbkrvBnbaesPyYg==}
+    engines: {node: '>=18'}
 
-  /puppeteer@21.5.2(typescript@5.2.2):
-    resolution: {integrity: sha512-BaAGJOq8Fl6/cck6obmwaNLksuY0Bg/lIahCLhJPGXBFUD2mCffypa4A592MaWnDcye7eaHmSK9yot0pxctY8A==}
-    engines: {node: '>=16.13.2'}
-    requiresBuild: true
-    dependencies:
-      '@puppeteer/browsers': 1.8.0
-      cosmiconfig: 8.3.6(typescript@5.2.2)
-      puppeteer-core: 21.5.2
-    transitivePeerDependencies:
-      - bufferutil
-      - encoding
-      - supports-color
-      - typescript
-      - utf-8-validate
-    dev: true
+  puppeteer@23.3.0:
+    resolution: {integrity: sha512-e2jY8cdWSUGsrLxqGm3hIbJq/UIk1uOY8XY7SM51leXkH7shrIyE91lK90Q9byX6tte+cyL3HKqlWBEd6TjWTA==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  /querystringify@2.2.0:
+  querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
-    dev: true
 
-  /queue-microtask@1.2.3:
+  queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: true
 
-  /queue-tick@1.0.1:
+  queue-tick@1.0.1:
     resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}
-    dev: true
 
-  /randombytes@2.1.0:
-    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
-    dependencies:
-      safe-buffer: 5.2.1
-    dev: true
-
-  /range-parser@1.2.0:
+  range-parser@1.2.0:
     resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
     engines: {node: '>= 0.6'}
-    dev: true
 
-  /rc@1.2.8:
+  rc@1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
-    dependencies:
-      deep-extend: 0.6.0
-      ini: 1.3.8
-      minimist: 1.2.8
-      strip-json-comments: 2.0.1
-    dev: true
 
-  /react-is@18.2.0:
-    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
-    dev: true
+  read-package-json-fast@3.0.2:
+    resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  /read-pkg-up@10.1.0:
-    resolution: {integrity: sha512-aNtBq4jR8NawpKJQldrQcSW9y/d+KWH4v24HWkHljOZ7H0av+YTGANBzRh9A5pw7v/bLVsLVPpOhJ7gHNVy8lA==}
-    engines: {node: '>=16'}
-    dependencies:
-      find-up: 6.3.0
-      read-pkg: 8.1.0
-      type-fest: 4.5.0
-    dev: true
+  read-package-up@11.0.0:
+    resolution: {integrity: sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==}
+    engines: {node: '>=18'}
 
-  /read-pkg@3.0.0:
-    resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
-    engines: {node: '>=4'}
-    dependencies:
-      load-json-file: 4.0.0
-      normalize-package-data: 2.5.0
-      path-type: 3.0.0
-    dev: true
+  read-pkg@9.0.1:
+    resolution: {integrity: sha512-9viLL4/n1BJUCT1NXVTdS1jtm80yDEgR5T4yCelII49Mbj0v1rZdKqj7zCiYdbB0CuCgdrvHcNogAKTFPBocFA==}
+    engines: {node: '>=18'}
 
-  /read-pkg@8.1.0:
-    resolution: {integrity: sha512-PORM8AgzXeskHO/WEv312k9U03B8K9JSiWF/8N9sUuFjBa+9SF2u6K7VClzXwDXab51jCd8Nd36CNM+zR97ScQ==}
-    engines: {node: '>=16'}
-    dependencies:
-      '@types/normalize-package-data': 2.4.3
-      normalize-package-data: 6.0.0
-      parse-json: 7.1.0
-      type-fest: 4.5.0
-    dev: true
-
-  /readable-stream@2.3.8:
+  readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
-    dependencies:
-      core-util-is: 1.0.3
-      inherits: 2.0.4
-      isarray: 1.0.0
-      process-nextick-args: 2.0.1
-      safe-buffer: 5.1.2
-      string_decoder: 1.1.1
-      util-deprecate: 1.0.2
-    dev: false
 
-  /readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-    dependencies:
-      picomatch: 2.3.1
-    dev: true
+  readdirp@4.0.1:
+    resolution: {integrity: sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==}
+    engines: {node: '>= 14.16.0'}
 
-  /regexp.prototype.flags@1.5.1:
-    resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.5
-      define-properties: 1.2.1
-      set-function-name: 2.0.1
-    dev: true
-
-  /registry-auth-token@3.3.2:
+  registry-auth-token@3.3.2:
     resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
-    dependencies:
-      rc: 1.2.8
-      safe-buffer: 5.2.1
-    dev: true
 
-  /registry-url@3.1.0:
+  registry-url@3.1.0:
     resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==}
     engines: {node: '>=0.10.0'}
-    dependencies:
-      rc: 1.2.8
-    dev: true
 
-  /require-directory@2.1.1:
+  require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
-  /require-from-string@2.0.2:
+  require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
-  /requires-port@1.0.0:
+  requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
-    dev: true
 
-  /resolve-from@4.0.0:
+  resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
-    dev: true
 
-  /resolve-pkg-maps@1.0.0:
+  resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-    dev: true
 
-  /resolve@1.22.8:
+  resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
-    dependencies:
-      is-core-module: 2.13.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: true
 
-  /restore-cursor@4.0.0:
-    resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-    dev: true
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
 
-  /reusify@1.0.4:
+  reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: true
 
-  /rfdc@1.3.0:
-    resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
-    dev: true
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
-  /rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+  rimraf@6.0.1:
+    resolution: {integrity: sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==}
+    engines: {node: 20 || >=22}
     hasBin: true
-    dependencies:
-      glob: 7.2.3
-    dev: true
 
-  /rimraf@5.0.5:
-    resolution: {integrity: sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==}
-    engines: {node: '>=14'}
-    hasBin: true
-    dependencies:
-      glob: 10.3.10
-    dev: true
-
-  /rollup-plugin-dts@6.1.0(rollup@4.1.4)(typescript@5.2.2):
-    resolution: {integrity: sha512-ijSCPICkRMDKDLBK9torss07+8dl9UpY9z1N/zTeA1cIqdzMlpkV3MOOC7zukyvQfDyxa1s3Dl2+DeiP/G6DOw==}
+  rollup-plugin-dts@6.1.1:
+    resolution: {integrity: sha512-aSHRcJ6KG2IHIioYlvAOcEq6U99sVtqDDKVhnwt70rW6tsz3tv5OSjEiWcgzfsHdLyGXZ/3b/7b/+Za3Y6r1XA==}
     engines: {node: '>=16'}
     peerDependencies:
       rollup: ^3.29.4 || ^4
       typescript: ^4.5 || ^5.0
-    dependencies:
-      magic-string: 0.30.5
-      rollup: 4.1.4
-      typescript: 5.2.2
-    optionalDependencies:
-      '@babel/code-frame': 7.22.13
-    dev: true
 
-  /rollup-plugin-esbuild@6.1.0(esbuild@0.19.5)(rollup@4.1.4):
-    resolution: {integrity: sha512-HPpXU65V8bSpW8eSYPahtUJaJHmbxJGybuf/M8B3bz/6i11YaYHlNNJIQ38gSEV0FyohQOgVxJ2YMEEZtEmwvA==}
+  rollup-plugin-esbuild@6.1.1:
+    resolution: {integrity: sha512-CehMY9FAqJD5OUaE/Mi1r5z0kNeYxItmRO2zG4Qnv2qWKF09J2lTy5GUzjJR354ZPrLkCj4fiBN41lo8PzBUhw==}
     engines: {node: '>=14.18.0'}
     peerDependencies:
       esbuild: '>=0.18.0'
       rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
-    dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@4.1.4)
-      debug: 4.3.4
-      es-module-lexer: 1.3.1
-      esbuild: 0.19.5
-      get-tsconfig: 4.7.2
-      rollup: 4.1.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /rollup-plugin-polyfill-node@0.12.0(rollup@4.1.4):
-    resolution: {integrity: sha512-PWEVfDxLEKt8JX1nZ0NkUAgXpkZMTb85rO/Ru9AQ69wYW8VUCfDgP4CGRXXWYni5wDF0vIeR1UoF3Jmw/Lt3Ug==}
+  rollup-plugin-polyfill-node@0.13.0:
+    resolution: {integrity: sha512-FYEvpCaD5jGtyBuBFcQImEGmTxDTPbiHjJdrYIp+mFIwgXiXabxvKUK7ZT9P31ozu2Tqm9llYQMRWsfvTMTAOw==}
     peerDependencies:
-      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0
-    dependencies:
-      '@rollup/plugin-inject': 5.0.5(rollup@4.1.4)
-      rollup: 4.1.4
-    dev: true
+      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
 
-  /rollup@4.1.4:
-    resolution: {integrity: sha512-U8Yk1lQRKqCkDBip/pMYT+IKaN7b7UesK3fLSTuHBoBJacCE+oBqo/dfG/gkUdQNNB2OBmRP98cn2C2bkYZkyw==}
+  rollup@4.20.0:
+    resolution: {integrity: sha512-6rbWBChcnSGzIlXeIdNIZTopKYad8ZG8ajhl78lGRLsI2rX8IkaotQhVas2Ma+GPxJav19wrSzvRvuiv0YKzWw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
-    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.1.4
-      '@rollup/rollup-android-arm64': 4.1.4
-      '@rollup/rollup-darwin-arm64': 4.1.4
-      '@rollup/rollup-darwin-x64': 4.1.4
-      '@rollup/rollup-linux-arm-gnueabihf': 4.1.4
-      '@rollup/rollup-linux-arm64-gnu': 4.1.4
-      '@rollup/rollup-linux-arm64-musl': 4.1.4
-      '@rollup/rollup-linux-x64-gnu': 4.1.4
-      '@rollup/rollup-linux-x64-musl': 4.1.4
-      '@rollup/rollup-win32-arm64-msvc': 4.1.4
-      '@rollup/rollup-win32-ia32-msvc': 4.1.4
-      '@rollup/rollup-win32-x64-msvc': 4.1.4
-      fsevents: 2.3.3
-    dev: true
 
-  /rollup@4.4.1:
-    resolution: {integrity: sha512-idZzrUpWSblPJX66i+GzrpjKE3vbYrlWirUHteoAbjKReZwa0cohAErOYA5efoMmNCdvG9yrJS+w9Kl6csaH4w==}
+  rollup@4.24.0:
+    resolution: {integrity: sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
-    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.4.1
-      '@rollup/rollup-android-arm64': 4.4.1
-      '@rollup/rollup-darwin-arm64': 4.4.1
-      '@rollup/rollup-darwin-x64': 4.4.1
-      '@rollup/rollup-linux-arm-gnueabihf': 4.4.1
-      '@rollup/rollup-linux-arm64-gnu': 4.4.1
-      '@rollup/rollup-linux-arm64-musl': 4.4.1
-      '@rollup/rollup-linux-x64-gnu': 4.4.1
-      '@rollup/rollup-linux-x64-musl': 4.4.1
-      '@rollup/rollup-win32-arm64-msvc': 4.4.1
-      '@rollup/rollup-win32-ia32-msvc': 4.4.1
-      '@rollup/rollup-win32-x64-msvc': 4.4.1
-      fsevents: 2.3.3
-    dev: true
 
-  /rrweb-cssom@0.6.0:
+  rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
-    dev: true
 
-  /run-parallel@1.2.0:
+  rrweb-cssom@0.7.1:
+    resolution: {integrity: sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==}
+
+  run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-    dependencies:
-      queue-microtask: 1.2.3
-    dev: true
 
-  /safe-array-concat@1.0.1:
-    resolution: {integrity: sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==}
-    engines: {node: '>=0.4'}
-    dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      isarray: 2.0.5
-    dev: true
-
-  /safe-buffer@5.1.2:
+  safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
 
-  /safe-buffer@5.2.1:
+  safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
-    dev: true
 
-  /safe-regex-test@1.0.0:
-    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
-    dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.1
-      is-regex: 1.1.4
-    dev: true
-
-  /safer-buffer@2.1.2:
+  safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
-    dev: true
 
-  /sass@1.69.5:
-    resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==}
+  sass@1.79.4:
+    resolution: {integrity: sha512-K0QDSNPXgyqO4GZq2HO5Q70TLxTH6cIT59RdoCHMivrC8rqzaTw5ab9prjz9KUN1El4FLXrBXJhik61JR4HcGg==}
     engines: {node: '>=14.0.0'}
     hasBin: true
-    dependencies:
-      chokidar: 3.5.3
-      immutable: 4.3.4
-      source-map-js: 1.0.2
-    dev: true
 
-  /saxes@6.0.0:
+  saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
-    dependencies:
-      xmlchars: 2.2.0
-    dev: true
 
-  /semver@5.7.2:
-    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
-    hasBin: true
-    dev: true
-
-  /semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-    dev: true
-
-  /semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+  semver@7.6.3:
+    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
     engines: {node: '>=10'}
     hasBin: true
-    dependencies:
-      lru-cache: 6.0.0
-    dev: true
 
-  /serialize-javascript@6.0.1:
-    resolution: {integrity: sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==}
-    dependencies:
-      randombytes: 2.1.0
-    dev: true
-
-  /serve-handler@6.1.5:
+  serve-handler@6.1.5:
     resolution: {integrity: sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==}
-    dependencies:
-      bytes: 3.0.0
-      content-disposition: 0.5.2
-      fast-url-parser: 1.1.3
-      mime-types: 2.1.18
-      minimatch: 3.1.2
-      path-is-inside: 1.0.2
-      path-to-regexp: 2.2.1
-      range-parser: 1.2.0
-    dev: true
 
-  /serve@14.2.1:
-    resolution: {integrity: sha512-48er5fzHh7GCShLnNyPBRPEjs2I6QBozeGr02gaacROiyS/8ARADlj595j39iZXAqBbJHH/ivJJyPRWY9sQWZA==}
+  serve@14.2.3:
+    resolution: {integrity: sha512-VqUFMC7K3LDGeGnJM9h56D3XGKb6KGgOw0cVNtA26yYXHCcpxf3xwCTUaQoWlVS7i8Jdh3GjQkOB23qsXyjoyQ==}
     engines: {node: '>= 14'}
     hasBin: true
-    dependencies:
-      '@zeit/schemas': 2.29.0
-      ajv: 8.11.0
-      arg: 5.0.2
-      boxen: 7.0.0
-      chalk: 5.0.1
-      chalk-template: 0.4.0
-      clipboardy: 3.0.0
-      compression: 1.7.4
-      is-port-reachable: 4.0.0
-      serve-handler: 6.1.5
-      update-check: 1.5.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /set-function-length@1.1.1:
-    resolution: {integrity: sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==}
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.1
-      get-intrinsic: 1.2.1
-      gopd: 1.0.1
-      has-property-descriptors: 1.0.0
-    dev: true
 
-  /set-function-name@2.0.1:
-    resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.1
-      functions-have-names: 1.2.3
-      has-property-descriptors: 1.0.0
-    dev: true
-
-  /setimmediate@1.0.5:
+  setimmediate@1.0.5:
     resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
-    dev: false
 
-  /shebang-command@1.2.0:
-    resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      shebang-regex: 1.0.0
-    dev: true
-
-  /shebang-command@2.0.0:
+  shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
-    dependencies:
-      shebang-regex: 3.0.0
-    dev: true
 
-  /shebang-regex@1.0.0:
-    resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /shebang-regex@3.0.0:
+  shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
-    dev: true
 
-  /shell-quote@1.8.1:
+  shell-quote@1.8.1:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
-    dev: true
 
-  /side-channel@1.0.4:
-    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
-    dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.1
-      object-inspect: 1.13.1
-    dev: true
-
-  /siginfo@2.0.0:
+  siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
-    dev: true
 
-  /signal-exit@3.0.7:
+  signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-    dev: true
 
-  /signal-exit@4.1.0:
+  signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
-    dev: true
 
-  /simple-git-hooks@2.9.0:
-    resolution: {integrity: sha512-waSQ5paUQtyGC0ZxlHmcMmD9I1rRXauikBwX31bX58l5vTOhCEcBC5Bi+ZDkPXTjDnZAF8TbCqKBY+9+sVPScw==}
+  simple-git-hooks@2.11.1:
+    resolution: {integrity: sha512-tgqwPUMDcNDhuf1Xf6KTUsyeqGdgKMhzaH4PAZZuzguOgTl5uuyeYe/8mWgAr6IBxB5V06uqEf6Dy37gIWDtDg==}
     hasBin: true
-    requiresBuild: true
-    dev: true
 
-  /slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /slash@4.0.0:
-    resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
-    engines: {node: '>=12'}
-    dev: true
-
-  /slice-ansi@5.0.0:
+  slice-ansi@5.0.0:
     resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
     engines: {node: '>=12'}
-    dependencies:
-      ansi-styles: 6.2.1
-      is-fullwidth-code-point: 4.0.0
-    dev: true
 
-  /smart-buffer@4.2.0:
+  slice-ansi@7.1.0:
+    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
+    engines: {node: '>=18'}
+
+  smart-buffer@4.2.0:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
-    dev: true
 
-  /smob@1.4.1:
-    resolution: {integrity: sha512-9LK+E7Hv5R9u4g4C3p+jjLstaLe11MDsL21UpYaCNmapvMkYhqCV4A/f/3gyH8QjMyh6l68q9xC85vihY9ahMQ==}
-    dev: true
-
-  /socks-proxy-agent@8.0.2:
-    resolution: {integrity: sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==}
+  socks-proxy-agent@8.0.4:
+    resolution: {integrity: sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==}
     engines: {node: '>= 14'}
-    dependencies:
-      agent-base: 7.1.0
-      debug: 4.3.4
-      socks: 2.7.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
 
-  /socks@2.7.1:
-    resolution: {integrity: sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==}
-    engines: {node: '>= 10.13.0', npm: '>= 3.0.0'}
-    dependencies:
-      ip: 2.0.0
-      smart-buffer: 4.2.0
-    dev: true
+  socks@2.8.3:
+    resolution: {integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
-  /source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+  source-map-js@1.2.0:
+    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
 
-  /source-map-support@0.5.21:
-    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
-    dependencies:
-      buffer-from: 1.1.2
-      source-map: 0.6.1
-    dev: true
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
 
-  /source-map@0.6.1:
+  source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
-  /spdx-correct@3.2.0:
+  spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
-    dependencies:
-      spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.16
-    dev: true
 
-  /spdx-exceptions@2.3.0:
-    resolution: {integrity: sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==}
-    dev: true
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
 
-  /spdx-expression-parse@3.0.1:
+  spdx-expression-parse@3.0.1:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
-    dependencies:
-      spdx-exceptions: 2.3.0
-      spdx-license-ids: 3.0.16
-    dev: true
 
-  /spdx-license-ids@3.0.16:
-    resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==}
-    dev: true
+  spdx-license-ids@3.0.18:
+    resolution: {integrity: sha512-xxRs31BqRYHwiMzudOrpSiHtZ8i/GeionCBDSilhYRj+9gIcI8wCZTlXZKu9vZIVqViP3dcp9qE5G6AlIaD+TQ==}
 
-  /split2@4.2.0:
-    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
-    engines: {node: '>= 10.x'}
-    dev: true
+  sprintf-js@1.1.3:
+    resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
 
-  /stackback@0.0.2:
+  stable-hash@0.0.4:
+    resolution: {integrity: sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==}
+
+  stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
-    dev: true
 
-  /std-env@3.4.3:
-    resolution: {integrity: sha512-f9aPhy8fYBuMN+sNfakZV18U39PbalgjXG3lLB9WkaYTxijru61wb57V9wxxNthXM5Sd88ETBWi29qLAsHO52Q==}
-    dev: true
+  std-env@3.7.0:
+    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
 
-  /streamx@2.15.1:
-    resolution: {integrity: sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==}
-    dependencies:
-      fast-fifo: 1.3.2
-      queue-tick: 1.0.1
-    dev: true
+  streamx@2.18.0:
+    resolution: {integrity: sha512-LLUC1TWdjVdn1weXGcSxyTR3T4+acB6tVGXT95y0nGbca4t4o/ng1wKAGTljm9VicuCVLvRlqFYXYy5GwgM7sQ==}
 
-  /string-argv@0.3.2:
+  string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
-    dev: true
 
-  /string-hash@1.1.3:
+  string-hash@1.1.3:
     resolution: {integrity: sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==}
-    dev: true
 
-  /string-width@4.2.3:
+  string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
-    dependencies:
-      emoji-regex: 8.0.0
-      is-fullwidth-code-point: 3.0.0
-      strip-ansi: 6.0.1
-    dev: true
 
-  /string-width@5.1.2:
+  string-width@5.1.2:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
-    dev: true
 
-  /string.prototype.padend@3.1.5:
-    resolution: {integrity: sha512-DOB27b/2UTTD+4myKUFh+/fXWcu/UDyASIXfg+7VzoCNNGOfWvoyU/x5pvVHr++ztyt/oSYI1BcWBBG/hmlNjA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.5
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: true
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
 
-  /string.prototype.trim@1.2.8:
-    resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.5
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: true
-
-  /string.prototype.trimend@1.0.7:
-    resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==}
-    dependencies:
-      call-bind: 1.0.5
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: true
-
-  /string.prototype.trimstart@1.0.7:
-    resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==}
-    dependencies:
-      call-bind: 1.0.5
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: true
-
-  /string_decoder@1.1.1:
+  string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
-    dependencies:
-      safe-buffer: 5.1.2
-    dev: false
 
-  /strip-ansi@6.0.1:
+  strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
-    dependencies:
-      ansi-regex: 5.0.1
-    dev: true
 
-  /strip-ansi@7.1.0:
+  strip-ansi@7.1.0:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
-    dependencies:
-      ansi-regex: 6.0.1
-    dev: true
 
-  /strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /strip-final-newline@2.0.0:
+  strip-final-newline@2.0.0:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
-    dev: true
 
-  /strip-final-newline@3.0.0:
+  strip-final-newline@3.0.0:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
-    dev: true
 
-  /strip-json-comments@2.0.1:
+  strip-json-comments@2.0.1:
     resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
-  /strip-json-comments@3.1.1:
+  strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
-    dev: true
 
-  /strip-literal@1.3.0:
-    resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
-    dependencies:
-      acorn: 8.10.0
-    dev: true
-
-  /supports-color@5.5.0:
+  supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
-    dependencies:
-      has-flag: 3.0.0
-    dev: true
 
-  /supports-color@7.2.0:
+  supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
-    dependencies:
-      has-flag: 4.0.0
-    dev: true
 
-  /supports-preserve-symlinks-flag@1.0.0:
+  supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
-    dev: true
 
-  /symbol-tree@3.2.4:
+  symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
-    dev: true
 
-  /tar-fs@3.0.4:
-    resolution: {integrity: sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==}
-    dependencies:
-      mkdirp-classic: 0.5.3
-      pump: 3.0.0
-      tar-stream: 3.1.6
-    dev: true
+  tar-fs@3.0.6:
+    resolution: {integrity: sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==}
 
-  /tar-stream@3.1.6:
-    resolution: {integrity: sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==}
-    dependencies:
-      b4a: 1.6.4
-      fast-fifo: 1.3.2
-      streamx: 2.15.1
-    dev: true
+  tar-stream@3.1.7:
+    resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
-  /temp-dir@3.0.0:
+  temp-dir@3.0.0:
     resolution: {integrity: sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==}
     engines: {node: '>=14.16'}
-    dev: true
 
-  /tempfile@5.0.0:
+  tempfile@5.0.0:
     resolution: {integrity: sha512-bX655WZI/F7EoTDw9JvQURqAXiPHi8o8+yFxPF2lWYyz1aHnmMRuXWqL6YB6GmeO0o4DIYWHLgGNi/X64T+X4Q==}
     engines: {node: '>=14.18'}
-    dependencies:
-      temp-dir: 3.0.0
-    dev: true
 
-  /terser@5.22.0:
-    resolution: {integrity: sha512-hHZVLgRA2z4NWcN6aS5rQDc+7Dcy58HOf2zbYwmFcQ+ua3h6eEFf5lIDKTzbWwlazPyOZsFQO8V80/IjVNExEw==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      '@jridgewell/source-map': 0.3.5
-      acorn: 8.10.0
-      commander: 2.20.3
-      source-map-support: 0.5.21
-    dev: true
+  test-exclude@7.0.1:
+    resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
+    engines: {node: '>=18'}
 
-  /test-exclude@6.0.0:
-    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
-    engines: {node: '>=8'}
-    dependencies:
-      '@istanbuljs/schema': 0.1.3
-      glob: 7.2.3
-      minimatch: 3.1.2
-    dev: true
+  text-decoder@1.1.1:
+    resolution: {integrity: sha512-8zll7REEv4GDD3x4/0pW+ppIxSNs7H1J10IKFZsuOMscumCdM2a+toDGLPA3T+1+fLBql4zbt5z83GEQGGV5VA==}
 
-  /text-extensions@2.4.0:
-    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /text-table@0.2.0:
+  text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-    dev: true
 
-  /through@2.3.8:
+  through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
-    dev: true
 
-  /tinybench@2.5.1:
-    resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
-    dev: true
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  /tinypool@0.7.0:
-    resolution: {integrity: sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==}
+  tinyexec@0.3.0:
+    resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
+
+  tinypool@1.0.0:
+    resolution: {integrity: sha512-KIKExllK7jp3uvrNtvRBYBWBOAXSX8ZvoaD8T+7KB/QHIuoJW3Pmr60zucywjAlMb5TeXUkcs/MWeWLu0qvuAQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@1.2.0:
+    resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
     engines: {node: '>=14.0.0'}
-    dev: true
 
-  /tinyspy@2.2.0:
-    resolution: {integrity: sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg==}
+  tinyspy@3.0.0:
+    resolution: {integrity: sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==}
     engines: {node: '>=14.0.0'}
-    dev: true
 
-  /to-fast-properties@2.0.0:
+  to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
 
-  /to-regex-range@5.0.1:
+  to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
-    dependencies:
-      is-number: 7.0.0
-    dev: true
 
-  /todomvc-app-css@2.4.3:
+  todomvc-app-css@2.4.3:
     resolution: {integrity: sha512-mSnWZaKBWj9aQcFRsGguY/a8O8NR8GmecD48yU1rzwNemgZa/INLpIsxxMiToFGVth+uEKBrQ7IhWkaXZxwq5Q==}
     engines: {node: '>=4'}
-    dev: true
 
-  /token-stream@1.0.0:
+  token-stream@1.0.0:
     resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
-    dev: true
 
-  /tough-cookie@4.1.3:
-    resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
+  tough-cookie@4.1.4:
+    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
     engines: {node: '>=6'}
-    dependencies:
-      psl: 1.9.0
-      punycode: 2.3.0
-      universalify: 0.2.0
-      url-parse: 1.5.10
-    dev: true
 
-  /tr46@0.0.3:
-    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
-    dev: true
+  tr46@5.0.0:
+    resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==}
+    engines: {node: '>=18'}
 
-  /tr46@4.1.1:
-    resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==}
-    engines: {node: '>=14'}
-    dependencies:
-      punycode: 2.3.0
-    dev: true
-
-  /ts-api-utils@1.0.3(typescript@5.2.2):
-    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
-    engines: {node: '>=16.13.0'}
+  ts-api-utils@1.3.0:
+    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
+    engines: {node: '>=16'}
     peerDependencies:
       typescript: '>=4.2.0'
-    dependencies:
-      typescript: 5.2.2
-    dev: true
 
-  /tslib@1.14.1:
-    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
-    dev: true
+  tslib@2.7.0:
+    resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
 
-  /tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: true
-
-  /tsutils@3.21.0(typescript@5.2.2):
-    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
-    engines: {node: '>= 6'}
-    peerDependencies:
-      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
-    dependencies:
-      tslib: 1.14.1
-      typescript: 5.2.2
-    dev: true
-
-  /tsx@4.5.0:
-    resolution: {integrity: sha512-hgxdziy9KLaHh9KE+a6tIZFP6kb0MLq/1D0sJVifbGP4QVEYhy6+2FNn7MyCm1pMc63p9CW/L1OzdqTNPxs6rg==}
-    engines: {node: '>=18.0.0'}
-    hasBin: true
-    dependencies:
-      esbuild: 0.18.20
-      get-tsconfig: 4.7.2
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
-
-  /type-check@0.4.0:
+  type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-    dev: true
 
-  /type-detect@4.0.8:
-    resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-    dev: true
-
-  /type-fest@1.4.0:
-    resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
-    engines: {node: '>=10'}
-    dev: true
-
-  /type-fest@2.19.0:
+  type-fest@2.19.0:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
-    dev: true
 
-  /type-fest@3.13.1:
-    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
-    engines: {node: '>=14.16'}
-    dev: true
-
-  /type-fest@4.5.0:
-    resolution: {integrity: sha512-diLQivFzddJl4ylL3jxSkEc39Tpw7o1QeEHIPxVwryDK2lpB7Nqhzhuo6v5/Ls08Z0yPSAhsyAWlv1/H0ciNmw==}
+  type-fest@4.24.0:
+    resolution: {integrity: sha512-spAaHzc6qre0TlZQQ2aA/nGMe+2Z/wyGk5Z+Ru2VUfdNwT6kWO6TjevOlpebsATEG1EIQ2sOiDszud3lO5mt/Q==}
     engines: {node: '>=16'}
-    dev: true
 
-  /typed-array-buffer@1.0.0:
-    resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: true
+  typed-query-selector@2.12.0:
+    resolution: {integrity: sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==}
 
-  /typed-array-byte-length@1.0.0:
-    resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.5
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: true
+  typescript-eslint@8.8.0:
+    resolution: {integrity: sha512-BjIT/VwJ8+0rVO01ZQ2ZVnjE1svFBiRczcpr1t1Yxt7sT25VSbPfrJtDsQ8uQTy2pilX5nI9gwxhUyLULNentw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  /typed-array-byte-offset@1.0.0:
-    resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.5
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: true
-
-  /typed-array-length@1.0.4:
-    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
-    dependencies:
-      call-bind: 1.0.5
-      for-each: 0.3.3
-      is-typed-array: 1.1.12
-    dev: true
-
-  /typescript@5.2.2:
-    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
+  typescript@5.5.4:
+    resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  /ufo@1.3.1:
-    resolution: {integrity: sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==}
-    dev: true
+  typescript@5.6.2:
+    resolution: {integrity: sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
 
-  /uglify-js@3.17.4:
-    resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
+  uglify-js@3.19.1:
+    resolution: {integrity: sha512-y/2wiW+ceTYR2TSSptAhfnEtpLaQ4Ups5zrjB2d3kuVxHj16j/QJwPl5PvuGy9uARb39J0+iKxcRPvtpsx4A4A==}
     engines: {node: '>=0.8.0'}
     hasBin: true
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /unbox-primitive@1.0.2:
-    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
-    dependencies:
-      call-bind: 1.0.5
-      has-bigints: 1.0.2
-      has-symbols: 1.0.3
-      which-boxed-primitive: 1.0.2
-    dev: true
-
-  /unbzip2-stream@1.4.3:
+  unbzip2-stream@1.4.3:
     resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==}
-    dependencies:
-      buffer: 5.7.1
-      through: 2.3.8
-    dev: true
 
-  /undici-types@5.26.5:
-    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
-    dev: true
+  undici-types@6.19.6:
+    resolution: {integrity: sha512-e/vggGopEfTKSvj4ihnOLTsqhrKRN3LeO6qSN/GxohhuRv8qH9bNQ4B8W7e/vFL+0XTnmHPB4/kegunZGA4Org==}
 
-  /universalify@0.1.2:
-    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
-    engines: {node: '>= 4.0.0'}
-    dev: true
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
 
-  /universalify@0.2.0:
+  universalify@0.2.0:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
     engines: {node: '>= 4.0.0'}
-    dev: true
 
-  /update-browserslist-db@1.0.13(browserslist@4.22.1):
-    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: 4.22.1
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: true
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
 
-  /update-check@1.5.4:
+  update-check@1.5.4:
     resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
-    dependencies:
-      registry-auth-token: 3.3.2
-      registry-url: 3.1.0
-    dev: true
 
-  /uri-js@4.4.1:
+  uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-    dependencies:
-      punycode: 2.3.0
-    dev: true
 
-  /url-parse@1.5.10:
+  url-parse@1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
-    dependencies:
-      querystringify: 2.2.0
-      requires-port: 1.0.0
-    dev: true
 
-  /urlpattern-polyfill@9.0.0:
-    resolution: {integrity: sha512-WHN8KDQblxd32odxeIgo83rdVDE2bvdkb86it7bMhYZwWKJz0+O0RK/eZiHYnM+zgt/U7hAHOlCQGfjjvSkw2g==}
-    dev: true
+  urlpattern-polyfill@10.0.0:
+    resolution: {integrity: sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==}
 
-  /util-deprecate@1.0.2:
+  util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  /validate-npm-package-license@3.0.4:
+  validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
-    dependencies:
-      spdx-correct: 3.2.0
-      spdx-expression-parse: 3.0.1
-    dev: true
 
-  /vary@1.1.2:
+  vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
-    dev: true
 
-  /vite-node@0.34.6(@types/node@20.10.0)(terser@5.22.0):
-    resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
-    engines: {node: '>=v14.18.0'}
+  vite-node@2.1.1:
+    resolution: {integrity: sha512-N/mGckI1suG/5wQI35XeR9rsMsPqKXzq1CdUndzVstBj/HvyxxGctwnK6WX43NGt5L3Z5tcRf83g4TITKJhPrA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
-    dependencies:
-      cac: 6.7.14
-      debug: 4.3.4
-      mlly: 1.4.2
-      pathe: 1.1.1
-      picocolors: 1.0.0
-      vite: 5.0.0(@types/node@20.10.0)(terser@5.22.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
 
-  /vite@5.0.0(@types/node@20.10.0)(terser@5.22.0):
-    resolution: {integrity: sha512-ESJVM59mdyGpsiNAeHQOR/0fqNoOyWPYesFto8FFZugfmhdHx8Fzd8sF3Q/xkVhZsyOxHfdM7ieiVAorI9RjFw==}
+  vite@5.4.0:
+    resolution: {integrity: sha512-5xokfMX0PIiwCMCMb9ZJcMyh5wbBun0zUzKib+L65vAZ8GY9ePZMXxFrHbr/Kyll2+LSCY7xtERPpxkBDKngwg==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -5997,6 +3309,7 @@ packages:
       less: '*'
       lightningcss: ^1.21.0
       sass: '*'
+      sass-embedded: '*'
       stylus: '*'
       sugarss: '*'
       terser: ^5.4.0
@@ -6009,38 +3322,62 @@ packages:
         optional: true
       sass:
         optional: true
+      sass-embedded:
+        optional: true
       stylus:
         optional: true
       sugarss:
         optional: true
       terser:
         optional: true
-    dependencies:
-      '@types/node': 20.10.0
-      esbuild: 0.19.5
-      postcss: 8.4.31
-      rollup: 4.4.1
-      terser: 5.22.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
 
-  /vitest@0.34.6(jsdom@22.1.0)(terser@5.22.0):
-    resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==}
-    engines: {node: '>=v14.18.0'}
+  vite@5.4.8:
+    resolution: {integrity: sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
+  vitest@2.1.1:
+    resolution: {integrity: sha512-97We7/VC0e9X5zBVkvt7SGQMGrRtn3KtySFQG5fpaMlS+l62eeXRQO633AYhSTC3z7IMebnPPNjGXVGNRFlxBA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
-      '@vitest/browser': '*'
-      '@vitest/ui': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 2.1.1
+      '@vitest/ui': 2.1.1
       happy-dom: '*'
       jsdom: '*'
-      playwright: '*'
-      safaridriver: '*'
-      webdriverio: '*'
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
+      '@types/node':
+        optional: true
       '@vitest/browser':
         optional: true
       '@vitest/ui':
@@ -6049,186 +3386,73 @@ packages:
         optional: true
       jsdom:
         optional: true
-      playwright:
-        optional: true
-      safaridriver:
-        optional: true
-      webdriverio:
-        optional: true
-    dependencies:
-      '@types/chai': 4.3.9
-      '@types/chai-subset': 1.3.4
-      '@types/node': 20.10.0
-      '@vitest/expect': 0.34.6
-      '@vitest/runner': 0.34.6
-      '@vitest/snapshot': 0.34.6
-      '@vitest/spy': 0.34.6
-      '@vitest/utils': 0.34.6
-      acorn: 8.10.0
-      acorn-walk: 8.2.0
-      cac: 6.7.14
-      chai: 4.3.10
-      debug: 4.3.4
-      jsdom: 22.1.0
-      local-pkg: 0.4.3
-      magic-string: 0.30.5
-      pathe: 1.1.1
-      picocolors: 1.0.0
-      std-env: 3.4.3
-      strip-literal: 1.3.0
-      tinybench: 2.5.1
-      tinypool: 0.7.0
-      vite: 5.0.0(@types/node@20.10.0)(terser@5.22.0)
-      vite-node: 0.34.6(@types/node@20.10.0)(terser@5.22.0)
-      why-is-node-running: 2.2.2
-    transitivePeerDependencies:
-      - less
-      - lightningcss
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
 
-  /void-elements@3.1.0:
+  void-elements@3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
-  /w3c-xmlserializer@4.0.0:
-    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
-    engines: {node: '>=14'}
-    dependencies:
-      xml-name-validator: 4.0.0
-    dev: true
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
 
-  /webidl-conversions@3.0.1:
-    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
-    dev: true
-
-  /webidl-conversions@7.0.0:
+  webidl-conversions@7.0.0:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
-    dev: true
 
-  /whatwg-encoding@2.0.0:
-    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
-    engines: {node: '>=12'}
-    dependencies:
-      iconv-lite: 0.6.3
-    dev: true
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
 
-  /whatwg-mimetype@3.0.0:
-    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
-    engines: {node: '>=12'}
-    dev: true
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
 
-  /whatwg-url@12.0.1:
-    resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==}
-    engines: {node: '>=14'}
-    dependencies:
-      tr46: 4.1.1
-      webidl-conversions: 7.0.0
-    dev: true
+  whatwg-url@14.0.0:
+    resolution: {integrity: sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==}
+    engines: {node: '>=18'}
 
-  /whatwg-url@5.0.0:
-    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
-    dependencies:
-      tr46: 0.0.3
-      webidl-conversions: 3.0.1
-    dev: true
-
-  /which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
-    dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
-    dev: true
-
-  /which-typed-array@1.1.13:
-    resolution: {integrity: sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.5
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.0
-    dev: true
-
-  /which@1.3.1:
-    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
-    hasBin: true
-    dependencies:
-      isexe: 2.0.0
-    dev: true
-
-  /which@2.0.2:
+  which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
     hasBin: true
-    dependencies:
-      isexe: 2.0.0
-    dev: true
 
-  /why-is-node-running@2.2.2:
-    resolution: {integrity: sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==}
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
     engines: {node: '>=8'}
     hasBin: true
-    dependencies:
-      siginfo: 2.0.0
-      stackback: 0.0.2
-    dev: true
 
-  /widest-line@4.0.1:
+  widest-line@4.0.1:
     resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
     engines: {node: '>=12'}
-    dependencies:
-      string-width: 5.1.2
-    dev: true
 
-  /with@7.0.2:
+  with@7.0.2:
     resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}
     engines: {node: '>= 10.0.0'}
-    dependencies:
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
-      assert-never: 1.2.1
-      babel-walk: 3.0.0-canary-5
-    dev: true
 
-  /wordwrap@1.0.0:
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wordwrap@1.0.0:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
-    dev: true
 
-  /wrap-ansi@7.0.0:
+  wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-    dev: true
 
-  /wrap-ansi@8.1.0:
+  wrap-ansi@8.1.0:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
-    dependencies:
-      ansi-styles: 6.2.1
-      string-width: 5.1.2
-      strip-ansi: 7.1.0
-    dev: true
 
-  /wrappy@1.0.2:
+  wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
+
+  wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: true
 
-  /ws@8.14.2:
-    resolution: {integrity: sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==}
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -6238,66 +3462,3015 @@ packages:
         optional: true
       utf-8-validate:
         optional: true
-    dev: true
 
-  /xml-name-validator@4.0.0:
-    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
-    engines: {node: '>=12'}
-    dev: true
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
 
-  /xmlchars@2.2.0:
+  xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
-    dev: true
 
-  /y18n@5.0.8:
+  y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
-    dev: true
 
-  /yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-    dev: true
-
-  /yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-    dev: true
-
-  /yaml@2.3.4:
-    resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
+  yaml@2.5.0:
+    resolution: {integrity: sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==}
     engines: {node: '>= 14'}
-    dev: true
+    hasBin: true
 
-  /yargs-parser@21.1.1:
+  yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
-    dev: true
 
-  /yargs@17.7.2:
+  yargs@17.7.2:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
+
+  yauzl@2.10.0:
+    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  zod@3.23.8:
+    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+
+snapshots:
+
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@babel/code-frame@7.24.7':
+    dependencies:
+      '@babel/highlight': 7.24.7
+      picocolors: 1.1.0
+
+  '@babel/helper-string-parser@7.24.8': {}
+
+  '@babel/helper-validator-identifier@7.24.7': {}
+
+  '@babel/highlight@7.24.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.24.7
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+      picocolors: 1.1.0
+
+  '@babel/parser@7.25.3':
+    dependencies:
+      '@babel/types': 7.25.2
+
+  '@babel/types@7.25.2':
+    dependencies:
+      '@babel/helper-string-parser': 7.24.8
+      '@babel/helper-validator-identifier': 7.24.7
+      to-fast-properties: 2.0.0
+
+  '@bcoe/v8-coverage@0.2.3': {}
+
+  '@conventional-changelog/git-client@1.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0)':
+    dependencies:
+      '@types/semver': 7.5.8
+      semver: 7.6.3
+    optionalDependencies:
+      conventional-commits-filter: 5.0.0
+      conventional-commits-parser: 6.0.0
+
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.24.0':
+    optional: true
+
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm64@0.24.0':
+    optional: true
+
+  '@esbuild/android-arm@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm@0.24.0':
+    optional: true
+
+  '@esbuild/android-x64@0.21.5':
+    optional: true
+
+  '@esbuild/android-x64@0.24.0':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.24.0':
+    optional: true
+
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-x64@0.24.0':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.24.0':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.24.0':
+    optional: true
+
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm64@0.24.0':
+    optional: true
+
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm@0.24.0':
+    optional: true
+
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ia32@0.24.0':
+    optional: true
+
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-loong64@0.24.0':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.24.0':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.24.0':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.24.0':
+    optional: true
+
+  '@esbuild/linux-s390x@0.21.5':
+    optional: true
+
+  '@esbuild/linux-s390x@0.24.0':
+    optional: true
+
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-x64@0.24.0':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.24.0':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.24.0':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.24.0':
+    optional: true
+
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
+
+  '@esbuild/sunos-x64@0.24.0':
+    optional: true
+
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-arm64@0.24.0':
+    optional: true
+
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/win32-ia32@0.24.0':
+    optional: true
+
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-x64@0.24.0':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.4.0(eslint@9.12.0)':
+    dependencies:
+      eslint: 9.12.0
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.11.0': {}
+
+  '@eslint/config-array@0.18.0':
+    dependencies:
+      '@eslint/object-schema': 2.1.4
+      debug: 4.3.6
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/core@0.6.0': {}
+
+  '@eslint/eslintrc@3.1.0':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.6
+      espree: 10.2.0
+      globals: 14.0.0
+      ignore: 5.3.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.12.0': {}
+
+  '@eslint/object-schema@2.1.4': {}
+
+  '@eslint/plugin-kit@0.2.0':
+    dependencies:
+      levn: 0.4.1
+
+  '@humanfs/core@0.19.0': {}
+
+  '@humanfs/node@0.16.5':
+    dependencies:
+      '@humanfs/core': 0.19.0
+      '@humanwhocodes/retry': 0.3.1
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@hutson/parse-repository-url@5.0.0': {}
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@istanbuljs/schema@0.1.3': {}
+
+  '@jridgewell/gen-mapping@0.3.5':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@jspm/core@2.0.1': {}
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.17.1
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@puppeteer/browsers@2.4.0':
+    dependencies:
+      debug: 4.3.6
+      extract-zip: 2.0.1
+      progress: 2.0.3
+      proxy-agent: 6.4.0
+      semver: 7.6.3
+      tar-fs: 3.0.6
+      unbzip2-stream: 1.4.3
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@rollup/plugin-alias@5.1.1(rollup@4.24.0)':
+    optionalDependencies:
+      rollup: 4.24.0
+
+  '@rollup/plugin-commonjs@28.0.0(rollup@4.24.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.24.0)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      fdir: 6.4.0(picomatch@2.3.1)
+      is-reference: 1.2.1
+      magic-string: 0.30.11
+      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 4.24.0
+
+  '@rollup/plugin-inject@5.0.5(rollup@4.24.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.24.0)
+      estree-walker: 2.0.2
+      magic-string: 0.30.11
+    optionalDependencies:
+      rollup: 4.24.0
+
+  '@rollup/plugin-json@6.1.0(rollup@4.24.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.24.0)
+    optionalDependencies:
+      rollup: 4.24.0
+
+  '@rollup/plugin-node-resolve@15.3.0(rollup@4.24.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.24.0)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-module: 1.0.0
+      resolve: 1.22.8
+    optionalDependencies:
+      rollup: 4.24.0
+
+  '@rollup/plugin-replace@5.0.4(rollup@4.24.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.24.0)
+      magic-string: 0.30.11
+    optionalDependencies:
+      rollup: 4.24.0
+
+  '@rollup/pluginutils@5.1.0(rollup@4.24.0)':
+    dependencies:
+      '@types/estree': 1.0.6
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 4.24.0
+
+  '@rollup/rollup-android-arm-eabi@4.20.0':
+    optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.24.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.20.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.24.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.20.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.24.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.20.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.24.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.24.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.24.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.24.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.24.0':
+    optional: true
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.24.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.24.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.24.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.24.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.24.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.20.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.24.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.20.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.24.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.20.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.24.0':
+    optional: true
+
+  '@swc/core-darwin-arm64@1.7.28':
+    optional: true
+
+  '@swc/core-darwin-x64@1.7.28':
+    optional: true
+
+  '@swc/core-linux-arm-gnueabihf@1.7.28':
+    optional: true
+
+  '@swc/core-linux-arm64-gnu@1.7.28':
+    optional: true
+
+  '@swc/core-linux-arm64-musl@1.7.28':
+    optional: true
+
+  '@swc/core-linux-x64-gnu@1.7.28':
+    optional: true
+
+  '@swc/core-linux-x64-musl@1.7.28':
+    optional: true
+
+  '@swc/core-win32-arm64-msvc@1.7.28':
+    optional: true
+
+  '@swc/core-win32-ia32-msvc@1.7.28':
+    optional: true
+
+  '@swc/core-win32-x64-msvc@1.7.28':
+    optional: true
+
+  '@swc/core@1.7.28':
+    dependencies:
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.12
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.7.28
+      '@swc/core-darwin-x64': 1.7.28
+      '@swc/core-linux-arm-gnueabihf': 1.7.28
+      '@swc/core-linux-arm64-gnu': 1.7.28
+      '@swc/core-linux-arm64-musl': 1.7.28
+      '@swc/core-linux-x64-gnu': 1.7.28
+      '@swc/core-linux-x64-musl': 1.7.28
+      '@swc/core-win32-arm64-msvc': 1.7.28
+      '@swc/core-win32-ia32-msvc': 1.7.28
+      '@swc/core-win32-x64-msvc': 1.7.28
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/types@0.1.12':
+    dependencies:
+      '@swc/counter': 0.1.3
+
+  '@tootallnate/quickjs-emscripten@0.23.0': {}
+
+  '@types/estree@1.0.5': {}
+
+  '@types/estree@1.0.6': {}
+
+  '@types/hash-sum@1.0.2': {}
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/node@20.16.10':
+    dependencies:
+      undici-types: 6.19.6
+
+  '@types/normalize-package-data@2.4.4': {}
+
+  '@types/resolve@1.20.2': {}
+
+  '@types/semver@7.5.8': {}
+
+  '@types/serve-handler@6.1.4':
+    dependencies:
+      '@types/node': 20.16.10
+
+  '@types/trusted-types@2.0.7': {}
+
+  '@types/yauzl@2.10.3':
+    dependencies:
+      '@types/node': 20.16.10
+    optional: true
+
+  '@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.12.0)(typescript@5.6.2))(eslint@9.12.0)(typescript@5.6.2)':
+    dependencies:
+      '@eslint-community/regexpp': 4.11.0
+      '@typescript-eslint/parser': 8.8.0(eslint@9.12.0)(typescript@5.6.2)
+      '@typescript-eslint/scope-manager': 8.8.0
+      '@typescript-eslint/type-utils': 8.8.0(eslint@9.12.0)(typescript@5.6.2)
+      '@typescript-eslint/utils': 8.8.0(eslint@9.12.0)(typescript@5.6.2)
+      '@typescript-eslint/visitor-keys': 8.8.0
+      eslint: 9.12.0
+      graphemer: 1.4.0
+      ignore: 5.3.1
+      natural-compare: 1.4.0
+      ts-api-utils: 1.3.0(typescript@5.6.2)
+    optionalDependencies:
+      typescript: 5.6.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.8.0(eslint@9.12.0)(typescript@5.6.2)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.8.0
+      '@typescript-eslint/types': 8.8.0
+      '@typescript-eslint/typescript-estree': 8.8.0(typescript@5.6.2)
+      '@typescript-eslint/visitor-keys': 8.8.0
+      debug: 4.3.6
+      eslint: 9.12.0
+    optionalDependencies:
+      typescript: 5.6.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.5.0':
+    dependencies:
+      '@typescript-eslint/types': 8.5.0
+      '@typescript-eslint/visitor-keys': 8.5.0
+
+  '@typescript-eslint/scope-manager@8.8.0':
+    dependencies:
+      '@typescript-eslint/types': 8.8.0
+      '@typescript-eslint/visitor-keys': 8.8.0
+
+  '@typescript-eslint/type-utils@8.8.0(eslint@9.12.0)(typescript@5.6.2)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 8.8.0(typescript@5.6.2)
+      '@typescript-eslint/utils': 8.8.0(eslint@9.12.0)(typescript@5.6.2)
+      debug: 4.3.6
+      ts-api-utils: 1.3.0(typescript@5.6.2)
+    optionalDependencies:
+      typescript: 5.6.2
+    transitivePeerDependencies:
+      - eslint
+      - supports-color
+
+  '@typescript-eslint/types@8.5.0': {}
+
+  '@typescript-eslint/types@8.8.0': {}
+
+  '@typescript-eslint/typescript-estree@8.5.0(typescript@5.6.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.5.0
+      '@typescript-eslint/visitor-keys': 8.5.0
+      debug: 4.3.6
+      fast-glob: 3.3.2
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.6.3
+      ts-api-utils: 1.3.0(typescript@5.6.2)
+    optionalDependencies:
+      typescript: 5.6.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/typescript-estree@8.8.0(typescript@5.6.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.8.0
+      '@typescript-eslint/visitor-keys': 8.8.0
+      debug: 4.3.6
+      fast-glob: 3.3.2
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.6.3
+      ts-api-utils: 1.3.0(typescript@5.6.2)
+    optionalDependencies:
+      typescript: 5.6.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.5.0(eslint@9.12.0)(typescript@5.6.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0)
+      '@typescript-eslint/scope-manager': 8.5.0
+      '@typescript-eslint/types': 8.5.0
+      '@typescript-eslint/typescript-estree': 8.5.0(typescript@5.6.2)
+      eslint: 9.12.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@typescript-eslint/utils@8.8.0(eslint@9.12.0)(typescript@5.6.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0)
+      '@typescript-eslint/scope-manager': 8.8.0
+      '@typescript-eslint/types': 8.8.0
+      '@typescript-eslint/typescript-estree': 8.8.0(typescript@5.6.2)
+      eslint: 9.12.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@typescript-eslint/visitor-keys@8.5.0':
+    dependencies:
+      '@typescript-eslint/types': 8.5.0
+      eslint-visitor-keys: 3.4.3
+
+  '@typescript-eslint/visitor-keys@8.8.0':
+    dependencies:
+      '@typescript-eslint/types': 8.8.0
+      eslint-visitor-keys: 3.4.3
+
+  '@vitejs/plugin-vue@5.1.2(vite@5.4.0(@types/node@20.16.10)(sass@1.79.4))(vue@packages+vue)':
+    dependencies:
+      vite: 5.4.0(@types/node@20.16.10)(sass@1.79.4)
+      vue: link:packages/vue
+
+  '@vitest/coverage-v8@2.1.1(vitest@2.1.1(@types/node@20.16.10)(jsdom@25.0.0)(sass@1.79.4))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 0.2.3
+      debug: 4.3.6
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.1.7
+      magic-string: 0.30.11
+      magicast: 0.3.4
+      std-env: 3.7.0
+      test-exclude: 7.0.1
+      tinyrainbow: 1.2.0
+      vitest: 2.1.1(@types/node@20.16.10)(jsdom@25.0.0)(sass@1.79.4)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/eslint-plugin@1.1.6(@typescript-eslint/utils@8.8.0(eslint@9.12.0)(typescript@5.6.2))(eslint@9.12.0)(typescript@5.6.2)(vitest@2.1.1(@types/node@20.16.10)(jsdom@25.0.0)(sass@1.79.4))':
+    dependencies:
+      '@typescript-eslint/utils': 8.8.0(eslint@9.12.0)(typescript@5.6.2)
+      eslint: 9.12.0
+      vitest: 2.1.1(@types/node@20.16.10)(jsdom@25.0.0)(sass@1.79.4)
+    optionalDependencies:
+      typescript: 5.6.2
+
+  '@vitest/expect@2.1.1':
+    dependencies:
+      '@vitest/spy': 2.1.1
+      '@vitest/utils': 2.1.1
+      chai: 5.1.1
+      tinyrainbow: 1.2.0
+
+  '@vitest/mocker@2.1.1(@vitest/spy@2.1.1)(vite@5.4.8(@types/node@20.16.10)(sass@1.79.4))':
+    dependencies:
+      '@vitest/spy': 2.1.1
+      estree-walker: 3.0.3
+      magic-string: 0.30.11
+    optionalDependencies:
+      vite: 5.4.8(@types/node@20.16.10)(sass@1.79.4)
+
+  '@vitest/pretty-format@2.1.1':
+    dependencies:
+      tinyrainbow: 1.2.0
+
+  '@vitest/runner@2.1.1':
+    dependencies:
+      '@vitest/utils': 2.1.1
+      pathe: 1.1.2
+
+  '@vitest/snapshot@2.1.1':
+    dependencies:
+      '@vitest/pretty-format': 2.1.1
+      magic-string: 0.30.11
+      pathe: 1.1.2
+
+  '@vitest/spy@2.1.1':
+    dependencies:
+      tinyspy: 3.0.0
+
+  '@vitest/utils@2.1.1':
+    dependencies:
+      '@vitest/pretty-format': 2.1.1
+      loupe: 3.1.1
+      tinyrainbow: 1.2.0
+
+  '@vue/consolidate@1.0.0': {}
+
+  '@vue/repl@4.4.2': {}
+
+  '@zeit/schemas@2.36.0': {}
+
+  accepts@1.3.8:
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+
+  acorn-jsx@5.3.2(acorn@8.12.1):
+    dependencies:
+      acorn: 8.12.1
+
+  acorn@7.4.1: {}
+
+  acorn@8.12.1: {}
+
+  add-stream@1.0.0: {}
+
+  agent-base@7.1.1:
+    dependencies:
+      debug: 4.3.6
+    transitivePeerDependencies:
+      - supports-color
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.12.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+
+  ansi-align@3.0.1:
+    dependencies:
+      string-width: 4.2.3
+
+  ansi-colors@4.1.3: {}
+
+  ansi-escapes@7.0.0:
+    dependencies:
+      environment: 1.1.0
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.0.1: {}
+
+  ansi-styles@3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.1: {}
+
+  arch@2.2.0: {}
+
+  arg@5.0.2: {}
+
+  argparse@2.0.1: {}
+
+  array-ify@1.0.0: {}
+
+  asap@2.0.6: {}
+
+  assert-never@1.3.0: {}
+
+  assertion-error@2.0.1: {}
+
+  ast-types@0.13.4:
+    dependencies:
+      tslib: 2.7.0
+
+  asynckit@0.4.0: {}
+
+  b4a@1.6.6: {}
+
+  babel-walk@3.0.0-canary-5:
+    dependencies:
+      '@babel/types': 7.25.2
+
+  balanced-match@1.0.2: {}
+
+  bare-events@2.4.2:
+    optional: true
+
+  bare-fs@2.3.1:
+    dependencies:
+      bare-events: 2.4.2
+      bare-path: 2.1.3
+      bare-stream: 2.1.3
+    optional: true
+
+  bare-os@2.4.0:
+    optional: true
+
+  bare-path@2.1.3:
+    dependencies:
+      bare-os: 2.4.0
+    optional: true
+
+  bare-stream@2.1.3:
+    dependencies:
+      streamx: 2.18.0
+    optional: true
+
+  base64-js@1.5.1: {}
+
+  basic-ftp@5.0.5: {}
+
+  boxen@7.0.0:
+    dependencies:
+      ansi-align: 3.0.1
+      camelcase: 7.0.1
+      chalk: 5.3.0
+      cli-boxes: 3.0.0
+      string-width: 5.1.2
+      type-fest: 2.19.0
+      widest-line: 4.0.1
+      wrap-ansi: 8.1.0
+
+  brace-expansion@1.1.11:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.1:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  buffer-crc32@0.2.13: {}
+
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  bytes@3.0.0: {}
+
+  cac@6.7.14: {}
+
+  call-bind@1.0.7:
+    dependencies:
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      set-function-length: 1.2.2
+
+  callsites@3.1.0: {}
+
+  camelcase@7.0.1: {}
+
+  chai@5.1.1:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.1.1
+      pathval: 2.0.0
+
+  chalk-template@0.4.0:
+    dependencies:
+      chalk: 4.1.2
+
+  chalk@2.4.2:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@5.0.1: {}
+
+  chalk@5.3.0: {}
+
+  character-parser@2.2.0:
+    dependencies:
+      is-regex: 1.1.4
+
+  check-error@2.1.1: {}
+
+  chokidar@4.0.1:
+    dependencies:
+      readdirp: 4.0.1
+
+  chromium-bidi@0.6.5(devtools-protocol@0.0.1330662):
+    dependencies:
+      devtools-protocol: 0.0.1330662
+      mitt: 3.0.1
+      urlpattern-polyfill: 10.0.0
+      zod: 3.23.8
+
+  cli-boxes@3.0.0: {}
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-truncate@4.0.0:
+    dependencies:
+      slice-ansi: 5.0.0
+      string-width: 7.2.0
+
+  clipboardy@3.0.0:
+    dependencies:
+      arch: 2.2.0
+      execa: 5.1.1
+      is-wsl: 2.2.0
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  color-convert@1.9.3:
+    dependencies:
+      color-name: 1.1.3
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.3: {}
+
+  color-name@1.1.4: {}
+
+  colorette@2.0.20: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  commander@12.1.0: {}
+
+  commondir@1.0.1: {}
+
+  compare-func@2.0.0:
+    dependencies:
+      array-ify: 1.0.0
+      dot-prop: 5.3.0
+
+  compressible@2.0.18:
+    dependencies:
+      mime-db: 1.53.0
+
+  compression@1.7.4:
+    dependencies:
+      accepts: 1.3.8
+      bytes: 3.0.0
+      compressible: 2.0.18
+      debug: 2.6.9
+      on-headers: 1.0.2
+      safe-buffer: 5.1.2
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  concat-map@0.0.1: {}
+
+  constantinople@4.0.1:
+    dependencies:
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
+
+  content-disposition@0.5.2: {}
+
+  conventional-changelog-angular@8.0.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-atom@5.0.0: {}
+
+  conventional-changelog-cli@5.0.0(conventional-commits-filter@5.0.0):
+    dependencies:
+      add-stream: 1.0.0
+      conventional-changelog: 6.0.0(conventional-commits-filter@5.0.0)
+      meow: 13.2.0
+      tempfile: 5.0.0
+    transitivePeerDependencies:
+      - conventional-commits-filter
+
+  conventional-changelog-codemirror@5.0.0: {}
+
+  conventional-changelog-conventionalcommits@8.0.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-core@8.0.0(conventional-commits-filter@5.0.0):
+    dependencies:
+      '@hutson/parse-repository-url': 5.0.0
+      add-stream: 1.0.0
+      conventional-changelog-writer: 8.0.0
+      conventional-commits-parser: 6.0.0
+      git-raw-commits: 5.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0)
+      git-semver-tags: 8.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0)
+      hosted-git-info: 7.0.2
+      normalize-package-data: 6.0.2
+      read-package-up: 11.0.0
+      read-pkg: 9.0.1
+    transitivePeerDependencies:
+      - conventional-commits-filter
+
+  conventional-changelog-ember@5.0.0: {}
+
+  conventional-changelog-eslint@6.0.0: {}
+
+  conventional-changelog-express@5.0.0: {}
+
+  conventional-changelog-jquery@6.0.0: {}
+
+  conventional-changelog-jshint@5.0.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-preset-loader@5.0.0: {}
+
+  conventional-changelog-writer@8.0.0:
+    dependencies:
+      '@types/semver': 7.5.8
+      conventional-commits-filter: 5.0.0
+      handlebars: 4.7.8
+      meow: 13.2.0
+      semver: 7.6.3
+
+  conventional-changelog@6.0.0(conventional-commits-filter@5.0.0):
+    dependencies:
+      conventional-changelog-angular: 8.0.0
+      conventional-changelog-atom: 5.0.0
+      conventional-changelog-codemirror: 5.0.0
+      conventional-changelog-conventionalcommits: 8.0.0
+      conventional-changelog-core: 8.0.0(conventional-commits-filter@5.0.0)
+      conventional-changelog-ember: 5.0.0
+      conventional-changelog-eslint: 6.0.0
+      conventional-changelog-express: 5.0.0
+      conventional-changelog-jquery: 6.0.0
+      conventional-changelog-jshint: 5.0.0
+      conventional-changelog-preset-loader: 5.0.0
+    transitivePeerDependencies:
+      - conventional-commits-filter
+
+  conventional-commits-filter@5.0.0: {}
+
+  conventional-commits-parser@6.0.0:
+    dependencies:
+      meow: 13.2.0
+
+  core-util-is@1.0.3: {}
+
+  cosmiconfig@9.0.0(typescript@5.6.2):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.6.2
+
+  cross-spawn@7.0.3:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  cssesc@3.0.0: {}
+
+  cssstyle@4.0.1:
+    dependencies:
+      rrweb-cssom: 0.6.0
+
+  csstype@3.1.3: {}
+
+  data-uri-to-buffer@6.0.2: {}
+
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.0.0
+
+  debug@2.6.9:
+    dependencies:
+      ms: 2.0.0
+
+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+
+  debug@4.3.6:
+    dependencies:
+      ms: 2.1.2
+
+  decimal.js@10.4.3: {}
+
+  deep-eql@5.0.2: {}
+
+  deep-extend@0.6.0: {}
+
+  deep-is@0.1.4: {}
+
+  deepmerge@4.3.1: {}
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      gopd: 1.0.1
+
+  degenerator@5.0.1:
+    dependencies:
+      ast-types: 0.13.4
+      escodegen: 2.1.0
+      esprima: 4.0.1
+
+  delayed-stream@1.0.0: {}
+
+  devtools-protocol@0.0.1330662: {}
+
+  doctrine@3.0.0:
+    dependencies:
+      esutils: 2.0.3
+
+  doctypes@1.1.0: {}
+
+  dot-prop@5.3.0:
+    dependencies:
+      is-obj: 2.0.0
+
+  eastasianwidth@0.2.0: {}
+
+  emoji-regex@10.3.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  end-of-stream@1.4.4:
+    dependencies:
+      once: 1.4.0
+
+  enquirer@2.4.1:
+    dependencies:
+      ansi-colors: 4.1.3
+      strip-ansi: 6.0.1
+
+  entities@4.5.0: {}
+
+  env-paths@2.2.1: {}
+
+  environment@1.1.0: {}
+
+  error-ex@1.3.2:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  es-define-property@1.0.0:
+    dependencies:
+      get-intrinsic: 1.2.4
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@1.5.4: {}
+
+  esbuild-plugin-polyfill-node@0.3.0(esbuild@0.24.0):
+    dependencies:
+      '@jspm/core': 2.0.1
+      esbuild: 0.24.0
+      import-meta-resolve: 3.1.1
+
+  esbuild@0.21.5:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
+
+  esbuild@0.24.0:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.24.0
+      '@esbuild/android-arm': 0.24.0
+      '@esbuild/android-arm64': 0.24.0
+      '@esbuild/android-x64': 0.24.0
+      '@esbuild/darwin-arm64': 0.24.0
+      '@esbuild/darwin-x64': 0.24.0
+      '@esbuild/freebsd-arm64': 0.24.0
+      '@esbuild/freebsd-x64': 0.24.0
+      '@esbuild/linux-arm': 0.24.0
+      '@esbuild/linux-arm64': 0.24.0
+      '@esbuild/linux-ia32': 0.24.0
+      '@esbuild/linux-loong64': 0.24.0
+      '@esbuild/linux-mips64el': 0.24.0
+      '@esbuild/linux-ppc64': 0.24.0
+      '@esbuild/linux-riscv64': 0.24.0
+      '@esbuild/linux-s390x': 0.24.0
+      '@esbuild/linux-x64': 0.24.0
+      '@esbuild/netbsd-x64': 0.24.0
+      '@esbuild/openbsd-arm64': 0.24.0
+      '@esbuild/openbsd-x64': 0.24.0
+      '@esbuild/sunos-x64': 0.24.0
+      '@esbuild/win32-arm64': 0.24.0
+      '@esbuild/win32-ia32': 0.24.0
+      '@esbuild/win32-x64': 0.24.0
+
+  escalade@3.1.2: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
+  eslint-import-resolver-node@0.3.9:
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.15.0
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-import-x@4.3.1(eslint@9.12.0)(typescript@5.6.2):
+    dependencies:
+      '@typescript-eslint/utils': 8.5.0(eslint@9.12.0)(typescript@5.6.2)
+      debug: 4.3.6
+      doctrine: 3.0.0
+      eslint: 9.12.0
+      eslint-import-resolver-node: 0.3.9
+      get-tsconfig: 4.7.6
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.6.3
+      stable-hash: 0.0.4
+      tslib: 2.7.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  eslint-scope@8.1.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.1.0: {}
+
+  eslint@9.12.0:
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0)
+      '@eslint-community/regexpp': 4.11.0
+      '@eslint/config-array': 0.18.0
+      '@eslint/core': 0.6.0
+      '@eslint/eslintrc': 3.1.0
+      '@eslint/js': 9.12.0
+      '@eslint/plugin-kit': 0.2.0
+      '@humanfs/node': 0.16.5
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.3.1
+      '@types/estree': 1.0.6
+      '@types/json-schema': 7.0.15
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.6
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.1.0
+      eslint-visitor-keys: 4.1.0
+      espree: 10.2.0
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.1
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+      text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.2.0:
+    dependencies:
+      acorn: 8.12.1
+      acorn-jsx: 5.3.2(acorn@8.12.1)
+      eslint-visitor-keys: 4.1.0
+
+  esprima@4.0.1: {}
+
+  esquery@1.6.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  estree-walker@2.0.2: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.6
+
+  esutils@2.0.3: {}
+
+  eventemitter3@5.0.1: {}
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  execa@8.0.1:
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
+  extract-zip@2.0.1:
+    dependencies:
+      debug: 4.3.6
+      get-stream: 5.2.0
+      yauzl: 2.10.0
+    optionalDependencies:
+      '@types/yauzl': 2.10.3
+    transitivePeerDependencies:
+      - supports-color
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-fifo@1.3.2: {}
+
+  fast-glob@3.3.2:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-url-parser@1.1.3:
+    dependencies:
+      punycode: 1.4.1
+
+  fastq@1.17.1:
+    dependencies:
+      reusify: 1.0.4
+
+  fd-slicer@1.1.0:
+    dependencies:
+      pend: 1.2.0
+
+  fdir@6.4.0(picomatch@2.3.1):
+    optionalDependencies:
+      picomatch: 2.3.1
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  file-saver@2.0.5: {}
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up-simple@1.0.0: {}
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.1
+      keyv: 4.5.4
+
+  flatted@3.3.1: {}
+
+  foreground-child@3.3.0:
+    dependencies:
+      cross-spawn: 7.0.3
+      signal-exit: 4.1.0
+
+  form-data@4.0.0:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
+  fs-extra@11.2.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  generic-names@4.0.0:
+    dependencies:
+      loader-utils: 3.3.1
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.2.0: {}
+
+  get-func-name@2.0.2: {}
+
+  get-intrinsic@1.2.4:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      has-proto: 1.0.3
+      has-symbols: 1.0.3
+      hasown: 2.0.2
+
+  get-stream@5.2.0:
+    dependencies:
+      pump: 3.0.0
+
+  get-stream@6.0.1: {}
+
+  get-stream@8.0.1: {}
+
+  get-tsconfig@4.7.6:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  get-uri@6.0.3:
+    dependencies:
+      basic-ftp: 5.0.5
+      data-uri-to-buffer: 6.0.2
+      debug: 4.3.6
+      fs-extra: 11.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  git-raw-commits@5.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0):
+    dependencies:
+      '@conventional-changelog/git-client': 1.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0)
+      meow: 13.2.0
+    transitivePeerDependencies:
+      - conventional-commits-filter
+      - conventional-commits-parser
+
+  git-semver-tags@8.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0):
+    dependencies:
+      '@conventional-changelog/git-client': 1.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0)
+      meow: 13.2.0
+    transitivePeerDependencies:
+      - conventional-commits-filter
+      - conventional-commits-parser
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.0
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.0
+      path-scurry: 1.11.1
+
+  glob@11.0.0:
+    dependencies:
+      foreground-child: 3.3.0
+      jackspeak: 4.0.1
+      minimatch: 10.0.1
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.0
+      path-scurry: 2.0.0
+
+  globals@14.0.0: {}
+
+  gopd@1.0.1:
+    dependencies:
+      get-intrinsic: 1.2.4
+
+  graceful-fs@4.2.11: {}
+
+  graphemer@1.4.0: {}
+
+  handlebars@4.7.8:
+    dependencies:
+      minimist: 1.2.8
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.19.1
+
+  has-flag@3.0.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.0
+
+  has-proto@1.0.3: {}
+
+  has-symbols@1.0.3: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.0.3
+
+  hash-sum@2.0.0: {}
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  hosted-git-info@7.0.2:
+    dependencies:
+      lru-cache: 10.1.0
+
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+
+  html-escaper@2.0.2: {}
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.1
+      debug: 4.3.6
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.5:
+    dependencies:
+      agent-base: 7.1.1
+      debug: 4.3.6
+    transitivePeerDependencies:
+      - supports-color
+
+  human-signals@2.1.0: {}
+
+  human-signals@5.0.0: {}
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  icss-utils@5.1.0(postcss@8.4.47):
+    dependencies:
+      postcss: 8.4.47
+
+  ieee754@1.2.1: {}
+
+  ignore@5.3.1: {}
+
+  immediate@3.0.6: {}
+
+  immutable@4.3.7: {}
+
+  import-fresh@3.3.0:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  import-meta-resolve@3.1.1: {}
+
+  imurmurhash@0.1.4: {}
+
+  index-to-position@0.1.2: {}
+
+  inherits@2.0.4: {}
+
+  ini@1.3.8: {}
+
+  ip-address@9.0.5:
+    dependencies:
+      jsbn: 1.1.0
+      sprintf-js: 1.1.3
+
+  is-arrayish@0.2.1: {}
+
+  is-core-module@2.15.0:
+    dependencies:
+      hasown: 2.0.2
+
+  is-docker@2.2.1: {}
+
+  is-expression@4.0.0:
+    dependencies:
+      acorn: 7.4.1
+      object-assign: 4.1.1
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-fullwidth-code-point@4.0.0: {}
+
+  is-fullwidth-code-point@5.0.0:
+    dependencies:
+      get-east-asian-width: 1.2.0
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-module@1.0.0: {}
+
+  is-number@7.0.0: {}
+
+  is-obj@2.0.0: {}
+
+  is-port-reachable@4.0.0: {}
+
+  is-potential-custom-element-name@1.0.1: {}
+
+  is-promise@2.2.2: {}
+
+  is-reference@1.2.1:
+    dependencies:
+      '@types/estree': 1.0.6
+
+  is-regex@1.1.4:
+    dependencies:
+      call-bind: 1.0.7
+      has-tostringtag: 1.0.2
+
+  is-stream@2.0.1: {}
+
+  is-stream@3.0.0: {}
+
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
+  isarray@1.0.0: {}
+
+  isexe@2.0.0: {}
+
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-lib-source-maps@5.0.6:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      debug: 4.3.6
+      istanbul-lib-coverage: 3.2.2
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-reports@3.1.7:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jackspeak@4.0.1:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  js-stringify@1.0.2: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.0:
+    dependencies:
+      argparse: 2.0.1
+
+  jsbn@1.1.0: {}
+
+  jsdom@25.0.0:
+    dependencies:
+      cssstyle: 4.0.1
+      data-urls: 5.0.0
+      decimal.js: 10.4.3
+      form-data: 4.0.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.5
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.12
+      parse5: 7.1.2
+      rrweb-cssom: 0.7.1
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.4
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.0.0
+      ws: 8.18.0
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  json-buffer@3.0.1: {}
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-parse-even-better-errors@3.0.2: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  jsonfile@6.1.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jstransformer@1.0.0:
+    dependencies:
+      is-promise: 2.2.2
+      promise: 7.3.1
+
+  jszip@3.10.1:
+    dependencies:
+      lie: 3.3.0
+      pako: 1.0.11
+      readable-stream: 2.3.8
+      setimmediate: 1.0.5
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lie@3.3.0:
+    dependencies:
+      immediate: 3.0.6
+
+  lilconfig@3.1.2: {}
+
+  lines-and-columns@1.2.4: {}
+
+  lint-staged@15.2.10:
+    dependencies:
+      chalk: 5.3.0
+      commander: 12.1.0
+      debug: 4.3.6
+      execa: 8.0.1
+      lilconfig: 3.1.2
+      listr2: 8.2.4
+      micromatch: 4.0.8
+      pidtree: 0.6.0
+      string-argv: 0.3.2
+      yaml: 2.5.0
+    transitivePeerDependencies:
+      - supports-color
+
+  listr2@8.2.4:
+    dependencies:
+      cli-truncate: 4.0.0
+      colorette: 2.0.20
+      eventemitter3: 5.0.1
+      log-update: 6.1.0
+      rfdc: 1.4.1
+      wrap-ansi: 9.0.0
+
+  loader-utils@3.3.1: {}
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash.camelcase@4.3.0: {}
+
+  lodash.merge@4.6.2: {}
+
+  lodash@4.17.21: {}
+
+  log-update@6.1.0:
+    dependencies:
+      ansi-escapes: 7.0.0
+      cli-cursor: 5.0.0
+      slice-ansi: 7.1.0
+      strip-ansi: 7.1.0
+      wrap-ansi: 9.0.0
+
+  loupe@3.1.1:
+    dependencies:
+      get-func-name: 2.0.2
+
+  lru-cache@10.1.0: {}
+
+  lru-cache@10.4.3: {}
+
+  lru-cache@11.0.0: {}
+
+  lru-cache@7.18.3: {}
+
+  magic-string@0.30.11:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  magicast@0.3.4:
+    dependencies:
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
+      source-map-js: 1.2.1
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.6.3
+
+  markdown-table@3.0.3: {}
+
+  marked@13.0.3: {}
+
+  memorystream@0.3.1: {}
+
+  meow@13.2.0: {}
+
+  merge-source-map@1.1.0:
+    dependencies:
+      source-map: 0.6.1
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mime-db@1.33.0: {}
+
+  mime-db@1.52.0: {}
+
+  mime-db@1.53.0: {}
+
+  mime-types@2.1.18:
+    dependencies:
+      mime-db: 1.33.0
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mimic-fn@2.1.0: {}
+
+  mimic-fn@4.0.0: {}
+
+  mimic-function@5.0.1: {}
+
+  minimatch@10.0.1:
+    dependencies:
+      brace-expansion: 2.0.1
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.11
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.1
+
+  minimist@1.2.8: {}
+
+  minipass@7.1.2: {}
+
+  mitt@3.0.1: {}
+
+  monaco-editor@0.52.0: {}
+
+  ms@2.0.0: {}
+
+  ms@2.1.2: {}
+
+  ms@2.1.3: {}
+
+  nanoid@3.3.7: {}
+
+  natural-compare@1.4.0: {}
+
+  negotiator@0.6.3: {}
+
+  neo-async@2.6.2: {}
+
+  netmask@2.0.2: {}
+
+  normalize-package-data@6.0.2:
+    dependencies:
+      hosted-git-info: 7.0.2
+      semver: 7.6.3
+      validate-npm-package-license: 3.0.4
+
+  npm-normalize-package-bin@3.0.1: {}
+
+  npm-run-all2@6.2.3:
+    dependencies:
+      ansi-styles: 6.2.1
+      cross-spawn: 7.0.3
+      memorystream: 0.3.1
+      minimatch: 9.0.5
+      pidtree: 0.6.0
+      read-package-json-fast: 3.0.2
+      shell-quote: 1.8.1
+
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  npm-run-path@5.3.0:
+    dependencies:
+      path-key: 4.0.0
+
+  nwsapi@2.2.12: {}
+
+  object-assign@4.1.1: {}
+
+  on-headers@1.0.2: {}
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  pac-proxy-agent@7.0.2:
+    dependencies:
+      '@tootallnate/quickjs-emscripten': 0.23.0
+      agent-base: 7.1.1
+      debug: 4.3.6
+      get-uri: 6.0.3
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.5
+      pac-resolver: 7.0.1
+      socks-proxy-agent: 8.0.4
+    transitivePeerDependencies:
+      - supports-color
+
+  pac-resolver@7.0.1:
+    dependencies:
+      degenerator: 5.0.1
+      netmask: 2.0.2
+
+  package-json-from-dist@1.0.0: {}
+
+  pako@1.0.11: {}
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse-json@8.1.0:
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      index-to-position: 0.1.2
+      type-fest: 4.24.0
+
+  parse5@7.1.2:
+    dependencies:
+      entities: 4.5.0
+
+  path-exists@4.0.0: {}
+
+  path-is-inside@1.0.2: {}
+
+  path-key@3.1.1: {}
+
+  path-key@4.0.0: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  path-scurry@2.0.0:
+    dependencies:
+      lru-cache: 11.0.0
+      minipass: 7.1.2
+
+  path-to-regexp@2.2.1: {}
+
+  pathe@1.1.2: {}
+
+  pathval@2.0.0: {}
+
+  pend@1.2.0: {}
+
+  picocolors@1.0.1: {}
+
+  picocolors@1.1.0: {}
+
+  picomatch@2.3.1: {}
+
+  pidtree@0.6.0: {}
+
+  postcss-modules-extract-imports@3.1.0(postcss@8.4.47):
+    dependencies:
+      postcss: 8.4.47
+
+  postcss-modules-local-by-default@4.0.5(postcss@8.4.47):
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.4.47)
+      postcss: 8.4.47
+      postcss-selector-parser: 6.1.2
+      postcss-value-parser: 4.2.0
+
+  postcss-modules-scope@3.2.0(postcss@8.4.47):
+    dependencies:
+      postcss: 8.4.47
+      postcss-selector-parser: 6.1.2
+
+  postcss-modules-values@4.0.0(postcss@8.4.47):
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.4.47)
+      postcss: 8.4.47
+
+  postcss-modules@6.0.0(postcss@8.4.47):
+    dependencies:
+      generic-names: 4.0.0
+      icss-utils: 5.1.0(postcss@8.4.47)
+      lodash.camelcase: 4.3.0
+      postcss: 8.4.47
+      postcss-modules-extract-imports: 3.1.0(postcss@8.4.47)
+      postcss-modules-local-by-default: 4.0.5(postcss@8.4.47)
+      postcss-modules-scope: 3.2.0(postcss@8.4.47)
+      postcss-modules-values: 4.0.0(postcss@8.4.47)
+      string-hash: 1.1.3
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.4.41:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.1
+
+  postcss@8.4.47:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.1.0
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  prettier@3.3.3: {}
+
+  pretty-bytes@6.1.1: {}
+
+  process-nextick-args@2.0.1: {}
+
+  progress@2.0.3: {}
+
+  promise@7.3.1:
+    dependencies:
+      asap: 2.0.6
+
+  proxy-agent@6.4.0:
+    dependencies:
+      agent-base: 7.1.1
+      debug: 4.3.6
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.5
+      lru-cache: 7.18.3
+      pac-proxy-agent: 7.0.2
+      proxy-from-env: 1.1.0
+      socks-proxy-agent: 8.0.4
+    transitivePeerDependencies:
+      - supports-color
+
+  proxy-from-env@1.1.0: {}
+
+  psl@1.9.0: {}
+
+  pug-attrs@3.0.0:
+    dependencies:
+      constantinople: 4.0.1
+      js-stringify: 1.0.2
+      pug-runtime: 3.0.1
+
+  pug-code-gen@3.0.3:
+    dependencies:
+      constantinople: 4.0.1
+      doctypes: 1.1.0
+      js-stringify: 1.0.2
+      pug-attrs: 3.0.0
+      pug-error: 2.1.0
+      pug-runtime: 3.0.1
+      void-elements: 3.1.0
+      with: 7.0.2
+
+  pug-error@2.1.0: {}
+
+  pug-filters@4.0.0:
+    dependencies:
+      constantinople: 4.0.1
+      jstransformer: 1.0.0
+      pug-error: 2.1.0
+      pug-walk: 2.0.0
+      resolve: 1.22.8
+
+  pug-lexer@5.0.1:
+    dependencies:
+      character-parser: 2.2.0
+      is-expression: 4.0.0
+      pug-error: 2.1.0
+
+  pug-linker@4.0.0:
+    dependencies:
+      pug-error: 2.1.0
+      pug-walk: 2.0.0
+
+  pug-load@3.0.0:
+    dependencies:
+      object-assign: 4.1.1
+      pug-walk: 2.0.0
+
+  pug-parser@6.0.0:
+    dependencies:
+      pug-error: 2.1.0
+      token-stream: 1.0.0
+
+  pug-runtime@3.0.1: {}
+
+  pug-strip-comments@2.0.0:
+    dependencies:
+      pug-error: 2.1.0
+
+  pug-walk@2.0.0: {}
+
+  pug@3.0.3:
+    dependencies:
+      pug-code-gen: 3.0.3
+      pug-filters: 4.0.0
+      pug-lexer: 5.0.1
+      pug-linker: 4.0.0
+      pug-load: 3.0.0
+      pug-parser: 6.0.0
+      pug-runtime: 3.0.1
+      pug-strip-comments: 2.0.0
+
+  pump@3.0.0:
+    dependencies:
+      end-of-stream: 1.4.4
+      once: 1.4.0
+
+  punycode@1.4.1: {}
+
+  punycode@2.3.1: {}
+
+  puppeteer-core@23.3.0:
+    dependencies:
+      '@puppeteer/browsers': 2.4.0
+      chromium-bidi: 0.6.5(devtools-protocol@0.0.1330662)
+      debug: 4.3.6
+      devtools-protocol: 0.0.1330662
+      typed-query-selector: 2.12.0
+      ws: 8.18.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  puppeteer@23.3.0(typescript@5.6.2):
+    dependencies:
+      '@puppeteer/browsers': 2.4.0
+      chromium-bidi: 0.6.5(devtools-protocol@0.0.1330662)
+      cosmiconfig: 9.0.0(typescript@5.6.2)
+      devtools-protocol: 0.0.1330662
+      puppeteer-core: 23.3.0
+      typed-query-selector: 2.12.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
+  querystringify@2.2.0: {}
+
+  queue-microtask@1.2.3: {}
+
+  queue-tick@1.0.1: {}
+
+  range-parser@1.2.0: {}
+
+  rc@1.2.8:
+    dependencies:
+      deep-extend: 0.6.0
+      ini: 1.3.8
+      minimist: 1.2.8
+      strip-json-comments: 2.0.1
+
+  read-package-json-fast@3.0.2:
+    dependencies:
+      json-parse-even-better-errors: 3.0.2
+      npm-normalize-package-bin: 3.0.1
+
+  read-package-up@11.0.0:
+    dependencies:
+      find-up-simple: 1.0.0
+      read-pkg: 9.0.1
+      type-fest: 4.24.0
+
+  read-pkg@9.0.1:
+    dependencies:
+      '@types/normalize-package-data': 2.4.4
+      normalize-package-data: 6.0.2
+      parse-json: 8.1.0
+      type-fest: 4.24.0
+      unicorn-magic: 0.1.0
+
+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
+  readdirp@4.0.1: {}
+
+  registry-auth-token@3.3.2:
+    dependencies:
+      rc: 1.2.8
+      safe-buffer: 5.2.1
+
+  registry-url@3.1.0:
+    dependencies:
+      rc: 1.2.8
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  requires-port@1.0.0: {}
+
+  resolve-from@4.0.0: {}
+
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve@1.22.8:
+    dependencies:
+      is-core-module: 2.15.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  reusify@1.0.4: {}
+
+  rfdc@1.4.1: {}
+
+  rimraf@6.0.1:
+    dependencies:
+      glob: 11.0.0
+      package-json-from-dist: 1.0.0
+
+  rollup-plugin-dts@6.1.1(rollup@4.24.0)(typescript@5.6.2):
+    dependencies:
+      magic-string: 0.30.11
+      rollup: 4.24.0
+      typescript: 5.6.2
+    optionalDependencies:
+      '@babel/code-frame': 7.24.7
+
+  rollup-plugin-esbuild@6.1.1(esbuild@0.24.0)(rollup@4.24.0):
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.24.0)
+      debug: 4.3.6
+      es-module-lexer: 1.5.4
+      esbuild: 0.24.0
+      get-tsconfig: 4.7.6
+      rollup: 4.24.0
+    transitivePeerDependencies:
+      - supports-color
+
+  rollup-plugin-polyfill-node@0.13.0(rollup@4.24.0):
+    dependencies:
+      '@rollup/plugin-inject': 5.0.5(rollup@4.24.0)
+      rollup: 4.24.0
+
+  rollup@4.20.0:
+    dependencies:
+      '@types/estree': 1.0.5
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.20.0
+      '@rollup/rollup-android-arm64': 4.20.0
+      '@rollup/rollup-darwin-arm64': 4.20.0
+      '@rollup/rollup-darwin-x64': 4.20.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.20.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.20.0
+      '@rollup/rollup-linux-arm64-gnu': 4.20.0
+      '@rollup/rollup-linux-arm64-musl': 4.20.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.20.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.20.0
+      '@rollup/rollup-linux-s390x-gnu': 4.20.0
+      '@rollup/rollup-linux-x64-gnu': 4.20.0
+      '@rollup/rollup-linux-x64-musl': 4.20.0
+      '@rollup/rollup-win32-arm64-msvc': 4.20.0
+      '@rollup/rollup-win32-ia32-msvc': 4.20.0
+      '@rollup/rollup-win32-x64-msvc': 4.20.0
+      fsevents: 2.3.3
+
+  rollup@4.24.0:
+    dependencies:
+      '@types/estree': 1.0.6
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.24.0
+      '@rollup/rollup-android-arm64': 4.24.0
+      '@rollup/rollup-darwin-arm64': 4.24.0
+      '@rollup/rollup-darwin-x64': 4.24.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.24.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.24.0
+      '@rollup/rollup-linux-arm64-gnu': 4.24.0
+      '@rollup/rollup-linux-arm64-musl': 4.24.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.24.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.24.0
+      '@rollup/rollup-linux-s390x-gnu': 4.24.0
+      '@rollup/rollup-linux-x64-gnu': 4.24.0
+      '@rollup/rollup-linux-x64-musl': 4.24.0
+      '@rollup/rollup-win32-arm64-msvc': 4.24.0
+      '@rollup/rollup-win32-ia32-msvc': 4.24.0
+      '@rollup/rollup-win32-x64-msvc': 4.24.0
+      fsevents: 2.3.3
+
+  rrweb-cssom@0.6.0: {}
+
+  rrweb-cssom@0.7.1: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  safe-buffer@5.1.2: {}
+
+  safe-buffer@5.2.1: {}
+
+  safer-buffer@2.1.2: {}
+
+  sass@1.79.4:
+    dependencies:
+      chokidar: 4.0.1
+      immutable: 4.3.7
+      source-map-js: 1.2.1
+
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
+  semver@7.6.3: {}
+
+  serve-handler@6.1.5:
+    dependencies:
+      bytes: 3.0.0
+      content-disposition: 0.5.2
+      fast-url-parser: 1.1.3
+      mime-types: 2.1.18
+      minimatch: 3.1.2
+      path-is-inside: 1.0.2
+      path-to-regexp: 2.2.1
+      range-parser: 1.2.0
+
+  serve@14.2.3:
+    dependencies:
+      '@zeit/schemas': 2.36.0
+      ajv: 8.12.0
+      arg: 5.0.2
+      boxen: 7.0.0
+      chalk: 5.0.1
+      chalk-template: 0.4.0
+      clipboardy: 3.0.0
+      compression: 1.7.4
+      is-port-reachable: 4.0.0
+      serve-handler: 6.1.5
+      update-check: 1.5.4
+    transitivePeerDependencies:
+      - supports-color
+
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.2
+
+  setimmediate@1.0.5: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  shell-quote@1.8.1: {}
+
+  siginfo@2.0.0: {}
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  simple-git-hooks@2.11.1: {}
+
+  slice-ansi@5.0.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 4.0.0
+
+  slice-ansi@7.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 5.0.0
+
+  smart-buffer@4.2.0: {}
+
+  socks-proxy-agent@8.0.4:
+    dependencies:
+      agent-base: 7.1.1
+      debug: 4.3.6
+      socks: 2.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  socks@2.8.3:
+    dependencies:
+      ip-address: 9.0.5
+      smart-buffer: 4.2.0
+
+  source-map-js@1.2.0: {}
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.6.1: {}
+
+  spdx-correct@3.2.0:
+    dependencies:
+      spdx-expression-parse: 3.0.1
+      spdx-license-ids: 3.0.18
+
+  spdx-exceptions@2.5.0: {}
+
+  spdx-expression-parse@3.0.1:
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.18
+
+  spdx-license-ids@3.0.18: {}
+
+  sprintf-js@1.1.3: {}
+
+  stable-hash@0.0.4: {}
+
+  stackback@0.0.2: {}
+
+  std-env@3.7.0: {}
+
+  streamx@2.18.0:
+    dependencies:
+      fast-fifo: 1.3.2
+      queue-tick: 1.0.1
+      text-decoder: 1.1.1
+    optionalDependencies:
+      bare-events: 2.4.2
+
+  string-argv@0.3.2: {}
+
+  string-hash@1.1.3: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.3.0
+      get-east-asian-width: 1.2.0
+      strip-ansi: 7.1.0
+
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.0:
+    dependencies:
+      ansi-regex: 6.0.1
+
+  strip-final-newline@2.0.0: {}
+
+  strip-final-newline@3.0.0: {}
+
+  strip-json-comments@2.0.1: {}
+
+  strip-json-comments@3.1.1: {}
+
+  supports-color@5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  symbol-tree@3.2.4: {}
+
+  tar-fs@3.0.6:
+    dependencies:
+      pump: 3.0.0
+      tar-stream: 3.1.7
+    optionalDependencies:
+      bare-fs: 2.3.1
+      bare-path: 2.1.3
+
+  tar-stream@3.1.7:
+    dependencies:
+      b4a: 1.6.6
+      fast-fifo: 1.3.2
+      streamx: 2.18.0
+
+  temp-dir@3.0.0: {}
+
+  tempfile@5.0.0:
+    dependencies:
+      temp-dir: 3.0.0
+
+  test-exclude@7.0.1:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 10.4.5
+      minimatch: 9.0.5
+
+  text-decoder@1.1.1:
+    dependencies:
+      b4a: 1.6.6
+
+  text-table@0.2.0: {}
+
+  through@2.3.8: {}
+
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.0: {}
+
+  tinypool@1.0.0: {}
+
+  tinyrainbow@1.2.0: {}
+
+  tinyspy@3.0.0: {}
+
+  to-fast-properties@2.0.0: {}
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  todomvc-app-css@2.4.3: {}
+
+  token-stream@1.0.0: {}
+
+  tough-cookie@4.1.4:
+    dependencies:
+      psl: 1.9.0
+      punycode: 2.3.1
+      universalify: 0.2.0
+      url-parse: 1.5.10
+
+  tr46@5.0.0:
+    dependencies:
+      punycode: 2.3.1
+
+  ts-api-utils@1.3.0(typescript@5.6.2):
+    dependencies:
+      typescript: 5.6.2
+
+  tslib@2.7.0: {}
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@2.19.0: {}
+
+  type-fest@4.24.0: {}
+
+  typed-query-selector@2.12.0: {}
+
+  typescript-eslint@8.8.0(eslint@9.12.0)(typescript@5.6.2):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.12.0)(typescript@5.6.2))(eslint@9.12.0)(typescript@5.6.2)
+      '@typescript-eslint/parser': 8.8.0(eslint@9.12.0)(typescript@5.6.2)
+      '@typescript-eslint/utils': 8.8.0(eslint@9.12.0)(typescript@5.6.2)
+    optionalDependencies:
+      typescript: 5.6.2
+    transitivePeerDependencies:
+      - eslint
+      - supports-color
+
+  typescript@5.5.4: {}
+
+  typescript@5.6.2: {}
+
+  uglify-js@3.19.1:
+    optional: true
+
+  unbzip2-stream@1.4.3:
+    dependencies:
+      buffer: 5.7.1
+      through: 2.3.8
+
+  undici-types@6.19.6: {}
+
+  unicorn-magic@0.1.0: {}
+
+  universalify@0.2.0: {}
+
+  universalify@2.0.1: {}
+
+  update-check@1.5.4:
+    dependencies:
+      registry-auth-token: 3.3.2
+      registry-url: 3.1.0
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  url-parse@1.5.10:
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+
+  urlpattern-polyfill@10.0.0: {}
+
+  util-deprecate@1.0.2: {}
+
+  validate-npm-package-license@3.0.4:
+    dependencies:
+      spdx-correct: 3.2.0
+      spdx-expression-parse: 3.0.1
+
+  vary@1.1.2: {}
+
+  vite-node@2.1.1(@types/node@20.16.10)(sass@1.79.4):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.6
+      pathe: 1.1.2
+      vite: 5.4.8(@types/node@20.16.10)(sass@1.79.4)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
+  vite@5.4.0(@types/node@20.16.10)(sass@1.79.4):
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.4.41
+      rollup: 4.20.0
+    optionalDependencies:
+      '@types/node': 20.16.10
+      fsevents: 2.3.3
+      sass: 1.79.4
+
+  vite@5.4.8(@types/node@20.16.10)(sass@1.79.4):
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.4.47
+      rollup: 4.24.0
+    optionalDependencies:
+      '@types/node': 20.16.10
+      fsevents: 2.3.3
+      sass: 1.79.4
+
+  vitest@2.1.1(@types/node@20.16.10)(jsdom@25.0.0)(sass@1.79.4):
+    dependencies:
+      '@vitest/expect': 2.1.1
+      '@vitest/mocker': 2.1.1(@vitest/spy@2.1.1)(vite@5.4.8(@types/node@20.16.10)(sass@1.79.4))
+      '@vitest/pretty-format': 2.1.1
+      '@vitest/runner': 2.1.1
+      '@vitest/snapshot': 2.1.1
+      '@vitest/spy': 2.1.1
+      '@vitest/utils': 2.1.1
+      chai: 5.1.1
+      debug: 4.3.6
+      magic-string: 0.30.11
+      pathe: 1.1.2
+      std-env: 3.7.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.0
+      tinypool: 1.0.0
+      tinyrainbow: 1.2.0
+      vite: 5.4.8(@types/node@20.16.10)(sass@1.79.4)
+      vite-node: 2.1.1(@types/node@20.16.10)(sass@1.79.4)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 20.16.10
+      jsdom: 25.0.0
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
+  void-elements@3.1.0: {}
+
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  webidl-conversions@7.0.0: {}
+
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@4.0.0: {}
+
+  whatwg-url@14.0.0:
+    dependencies:
+      tr46: 5.0.0
+      webidl-conversions: 7.0.0
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  widest-line@4.0.1:
+    dependencies:
+      string-width: 5.1.2
+
+  with@7.0.2:
+    dependencies:
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
+      assert-never: 1.3.0
+      babel-walk: 3.0.0-canary-5
+
+  word-wrap@1.2.5: {}
+
+  wordwrap@1.0.0: {}
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+
+  wrap-ansi@9.0.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 7.2.0
+      strip-ansi: 7.1.0
+
+  wrappy@1.0.2: {}
+
+  ws@8.18.0: {}
+
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
+  y18n@5.0.8: {}
+
+  yaml@2.5.0: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.1
+      escalade: 3.1.2
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
       y18n: 5.0.8
       yargs-parser: 21.1.1
-    dev: true
 
-  /yauzl@2.10.0:
-    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
+  yauzl@2.10.0:
     dependencies:
       buffer-crc32: 0.2.13
       fd-slicer: 1.1.0
-    dev: true
 
-  /yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
-    dev: true
+  yocto-queue@0.1.0: {}
 
-  /yocto-queue@1.0.0:
-    resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
-    engines: {node: '>=12.20'}
-    dev: true
+  zod@3.23.8: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 18ec407ef..23270954b 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,12 @@
 packages:
   - 'packages/*'
+  - 'packages-private/*'
+
+catalog:
+  '@babel/parser': ^7.25.3
+  '@babel/types': ^7.25.2
+  'estree-walker': ^2.0.2
+  'magic-string': ^0.30.11
+  'source-map-js': ^1.2.0
+  'vite': ^5.4.0
+  '@vitejs/plugin-vue': ^5.1.2
diff --git a/rollup.config.js b/rollup.config.js
index d8dfc98a3..1d6f0da4c 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,6 +1,8 @@
 // @ts-check
+import assert from 'node:assert/strict'
 import { createRequire } from 'node:module'
 import { fileURLToPath } from 'node:url'
+import fs from 'node:fs'
 import path from 'node:path'
 import replace from '@rollup/plugin-replace'
 import json from '@rollup/plugin-json'
@@ -8,11 +10,19 @@ import pico from 'picocolors'
 import commonJS from '@rollup/plugin-commonjs'
 import polyfillNode from 'rollup-plugin-polyfill-node'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
-import terser from '@rollup/plugin-terser'
 import esbuild from 'rollup-plugin-esbuild'
 import alias from '@rollup/plugin-alias'
 import { entries } from './scripts/aliases.js'
-import { constEnum } from './scripts/const-enum.js'
+import { inlineEnums } from './scripts/inline-enums.js'
+import { minify as minifySwc } from '@swc/core'
+
+/**
+ * @template T
+ * @template {keyof T} K
+ * @typedef { Omit<T, K> & Required<Pick<T, K>> } MarkRequired
+ */
+/** @typedef {'cjs' | 'esm-bundler' | 'global' | 'global-runtime' | 'esm-browser' | 'esm-bundler-runtime' | 'esm-browser-runtime'} PackageFormat */
+/** @typedef {MarkRequired<import('rollup').OutputOptions, 'file' | 'format'>} OutputOptions */
 
 if (!process.env.TARGET) {
   throw new Error('TARGET package must be specified via --environment flag.')
@@ -24,50 +34,60 @@ const __dirname = fileURLToPath(new URL('.', import.meta.url))
 const masterVersion = require('./package.json').version
 const consolidatePkg = require('@vue/consolidate/package.json')
 
-const packagesDir = path.resolve(__dirname, 'packages')
+const privatePackages = fs.readdirSync('packages-private')
+const pkgBase = privatePackages.includes(process.env.TARGET)
+  ? `packages-private`
+  : `packages`
+const packagesDir = path.resolve(__dirname, pkgBase)
 const packageDir = path.resolve(packagesDir, process.env.TARGET)
 
-const resolve = p => path.resolve(packageDir, p)
+const resolve = (/** @type {string} */ p) => path.resolve(packageDir, p)
 const pkg = require(resolve(`package.json`))
 const packageOptions = pkg.buildOptions || {}
 const name = packageOptions.filename || path.basename(packageDir)
 
-const [enumPlugin, enumDefines] = constEnum()
+const [enumPlugin, enumDefines] = inlineEnums()
 
+/** @type {Record<PackageFormat, OutputOptions>} */
 const outputConfigs = {
   'esm-bundler': {
     file: resolve(`dist/${name}.esm-bundler.js`),
-    format: `es`
+    format: 'es',
   },
   'esm-browser': {
     file: resolve(`dist/${name}.esm-browser.js`),
-    format: `es`
+    format: 'es',
   },
   cjs: {
     file: resolve(`dist/${name}.cjs.js`),
-    format: `cjs`
+    format: 'cjs',
   },
   global: {
     file: resolve(`dist/${name}.global.js`),
-    format: `iife`
+    format: 'iife',
   },
   // runtime-only builds, for main "vue" package only
   'esm-bundler-runtime': {
     file: resolve(`dist/${name}.runtime.esm-bundler.js`),
-    format: `es`
+    format: 'es',
   },
   'esm-browser-runtime': {
     file: resolve(`dist/${name}.runtime.esm-browser.js`),
-    format: 'es'
+    format: 'es',
   },
   'global-runtime': {
     file: resolve(`dist/${name}.runtime.global.js`),
-    format: 'iife'
-  }
+    format: 'iife',
+  },
 }
 
+/** @type {ReadonlyArray<PackageFormat>} */
 const defaultFormats = ['esm-bundler', 'cjs']
-const inlineFormats = process.env.FORMATS && process.env.FORMATS.split(',')
+/** @type {ReadonlyArray<PackageFormat>} */
+const inlineFormats = /** @type {any} */ (
+  process.env.FORMATS && process.env.FORMATS.split(',')
+)
+/** @type {ReadonlyArray<PackageFormat>} */
 const packageFormats = inlineFormats || packageOptions.formats || defaultFormats
 const packageConfigs = process.env.PROD_ONLY
   ? []
@@ -89,6 +109,13 @@ if (process.env.NODE_ENV === 'production') {
 
 export default packageConfigs
 
+/**
+ *
+ * @param {PackageFormat} format
+ * @param {OutputOptions} output
+ * @param {ReadonlyArray<import('rollup').Plugin>} plugins
+ * @returns {import('rollup').RollupOptions}
+ */
 function createConfig(format, output, plugins = []) {
   if (!output) {
     console.log(pico.yellow(`invalid format: "${format}"`))
@@ -100,7 +127,7 @@ function createConfig(format, output, plugins = []) {
   const isBundlerESMBuild = /esm-bundler/.test(format)
   const isBrowserESMBuild = /esm-browser/.test(format)
   const isServerRenderer = name === 'server-renderer'
-  const isNodeBuild = format === 'cjs'
+  const isCJSBuild = format === 'cjs'
   const isGlobalBuild = /global/.test(format)
   const isCompatPackage =
     pkg.name === '@vue/compat' || pkg.name === '@vue/compat-canary'
@@ -109,12 +136,20 @@ function createConfig(format, output, plugins = []) {
     (isGlobalBuild || isBrowserESMBuild || isBundlerESMBuild) &&
     !packageOptions.enableNonBrowserBranches
 
+  output.banner = `/**
+* ${pkg.name} v${masterVersion}
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/`
+
   output.exports = isCompatPackage ? 'auto' : 'named'
-  if (isNodeBuild) {
+  if (isCJSBuild) {
     output.esModule = true
   }
   output.sourcemap = !!process.env.SOURCE_MAP
   output.externalLiveBindings = false
+  // https://github.com/rollup/rollup/pull/5380
+  output.reexportProtoFromExternal = false
 
   if (isGlobalBuild) {
     output.name = packageOptions.name
@@ -132,6 +167,7 @@ function createConfig(format, output, plugins = []) {
   }
 
   function resolveDefine() {
+    /** @type {Record<string, string>} */
     const replacements = {
       __COMMIT__: `"${process.env.COMMIT}"`,
       __VERSION__: `"${masterVersion}"`,
@@ -143,9 +179,9 @@ function createConfig(format, output, plugins = []) {
       __ESM_BUNDLER__: String(isBundlerESMBuild),
       __ESM_BROWSER__: String(isBrowserESMBuild),
       // is targeting Node (SSR)?
-      __NODE_JS__: String(isNodeBuild),
+      __CJS__: String(isCJSBuild),
       // need SSR-specific branches?
-      __SSR__: String(isNodeBuild || isBundlerESMBuild || isServerRenderer),
+      __SSR__: String(!isGlobalBuild),
 
       // 2.x compat build
       __COMPAT__: String(isCompatBuild),
@@ -157,12 +193,14 @@ function createConfig(format, output, plugins = []) {
         : `true`,
       __FEATURE_PROD_DEVTOOLS__: isBundlerESMBuild
         ? `__VUE_PROD_DEVTOOLS__`
-        : `false`
+        : `false`,
+      __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: isBundlerESMBuild
+        ? `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`
+        : `false`,
     }
 
     if (!isBundlerESMBuild) {
       // hard coded dev/prod builds
-      // @ts-ignore
       replacements.__DEV__ = String(!isProductionBuild)
     }
 
@@ -170,7 +208,9 @@ function createConfig(format, output, plugins = []) {
     //__RUNTIME_COMPILE__=true pnpm build runtime-core
     Object.keys(replacements).forEach(key => {
       if (key in process.env) {
-        replacements[key] = process.env[key]
+        const value = process.env[key]
+        assert(typeof value === 'string')
+        replacements[key] = value
       }
     })
     return replacements
@@ -183,17 +223,17 @@ function createConfig(format, output, plugins = []) {
 
     if (isProductionBuild && isBrowserBuild) {
       Object.assign(replacements, {
-        'context.onError(': `/*#__PURE__*/ context.onError(`,
-        'emitError(': `/*#__PURE__*/ emitError(`,
-        'createCompilerError(': `/*#__PURE__*/ createCompilerError(`,
-        'createDOMCompilerError(': `/*#__PURE__*/ createDOMCompilerError(`
+        'context.onError(': `/*@__PURE__*/ context.onError(`,
+        'emitError(': `/*@__PURE__*/ emitError(`,
+        'createCompilerError(': `/*@__PURE__*/ createCompilerError(`,
+        'createDOMCompilerError(': `/*@__PURE__*/ createDOMCompilerError(`,
       })
     }
 
     if (isBundlerESMBuild) {
       Object.assign(replacements, {
         // preserve to be handled by bundlers
-        __DEV__: `!!(process.env.NODE_ENV !== 'production')`
+        __DEV__: `!!(process.env.NODE_ENV !== 'production')`,
       })
     }
 
@@ -202,12 +242,11 @@ function createConfig(format, output, plugins = []) {
       Object.assign(replacements, {
         'process.env': '({})',
         'process.platform': '""',
-        'process.stdout': 'null'
+        'process.stdout': 'null',
       })
     }
 
     if (Object.keys(replacements).length) {
-      // @ts-ignore
       return [replace({ values: replacements, preventAssignment: true })]
     } else {
       return []
@@ -215,7 +254,12 @@ function createConfig(format, output, plugins = []) {
   }
 
   function resolveExternal() {
-    const treeShakenDeps = ['source-map-js', '@babel/parser', 'estree-walker']
+    const treeShakenDeps = [
+      'source-map-js',
+      '@babel/parser',
+      'estree-walker',
+      'entities/lib/decode.js',
+    ]
 
     if (isGlobalBuild || isBrowserESMBuild || isCompatPackage) {
       if (!packageOptions.enableNonBrowserBranches) {
@@ -232,7 +276,7 @@ function createConfig(format, output, plugins = []) {
         // for @vue/compiler-sfc / server-renderer
         ...['path', 'url', 'stream'],
         // somehow these throw warnings for runtime-* package builds
-        ...treeShakenDeps
+        ...treeShakenDeps,
       ]
     }
   }
@@ -240,6 +284,7 @@ function createConfig(format, output, plugins = []) {
   function resolveNodePlugins() {
     // we are bundling forked consolidate.js in compiler-sfc which dynamically
     // requires a ton of template engines which should be ignored.
+    /** @type {ReadonlyArray<string>} */
     let cjsIgnores = []
     if (
       pkg.name === '@vue/compiler-sfc' ||
@@ -253,7 +298,7 @@ function createConfig(format, output, plugins = []) {
         'teacup/lib/express',
         'arc-templates/dist/es5',
         'then-pug',
-        'then-jade'
+        'then-jade',
       ]
     }
 
@@ -263,10 +308,10 @@ function createConfig(format, output, plugins = []) {
         ? [
             commonJS({
               sourceMap: false,
-              ignore: cjsIgnores
+              ignore: cjsIgnores,
             }),
             ...(format === 'cjs' ? [] : [polyfillNode()]),
-            nodeResolve()
+            nodeResolve(),
           ]
         : []
 
@@ -280,10 +325,10 @@ function createConfig(format, output, plugins = []) {
     external: resolveExternal(),
     plugins: [
       json({
-        namedExports: false
+        namedExports: false,
       }),
       alias({
-        entries
+        entries,
       }),
       enumPlugin,
       ...resolveReplace(),
@@ -291,47 +336,62 @@ function createConfig(format, output, plugins = []) {
         tsconfig: path.resolve(__dirname, 'tsconfig.json'),
         sourceMap: output.sourcemap,
         minify: false,
-        target: isServerRenderer || isNodeBuild ? 'es2019' : 'es2015',
-        define: resolveDefine()
+        target: isServerRenderer || isCJSBuild ? 'es2019' : 'es2016',
+        define: resolveDefine(),
       }),
       ...resolveNodePlugins(),
-      ...plugins
+      ...plugins,
     ],
     output,
     onwarn: (msg, warn) => {
-      if (!/Circular/.test(msg)) {
+      if (msg.code !== 'CIRCULAR_DEPENDENCY') {
         warn(msg)
       }
     },
     treeshake: {
-      moduleSideEffects: false
-    }
+      moduleSideEffects: false,
+    },
   }
 }
 
-function createProductionConfig(format) {
+function createProductionConfig(/** @type {PackageFormat} */ format) {
   return createConfig(format, {
     file: resolve(`dist/${name}.${format}.prod.js`),
-    format: outputConfigs[format].format
+    format: outputConfigs[format].format,
   })
 }
 
-function createMinifiedConfig(format) {
+function createMinifiedConfig(/** @type {PackageFormat} */ format) {
   return createConfig(
     format,
     {
       file: outputConfigs[format].file.replace(/\.js$/, '.prod.js'),
-      format: outputConfigs[format].format
+      format: outputConfigs[format].format,
     },
     [
-      terser({
-        module: /^esm/.test(format),
-        compress: {
-          ecma: 2015,
-          pure_getters: true
+      {
+        name: 'swc-minify',
+
+        async renderChunk(
+          contents,
+          _,
+          { format, sourcemap, sourcemapExcludeSources },
+        ) {
+          const { code, map } = await minifySwc(contents, {
+            module: format === 'es',
+            compress: {
+              ecma: 2016,
+              pure_getters: true,
+            },
+            safari10: true,
+            mangle: true,
+            sourceMap: !!sourcemap,
+            inlineSourcesContent: !sourcemapExcludeSources,
+          })
+
+          return { code, map: map || null }
         },
-        safari10: true
-      })
-    ]
+      },
+    ],
   )
 }
diff --git a/rollup.dts.config.js b/rollup.dts.config.js
index 39d2331e5..d9af98f13 100644
--- a/rollup.dts.config.js
+++ b/rollup.dts.config.js
@@ -1,12 +1,13 @@
 // @ts-check
+import assert from 'node:assert/strict'
 import { parse } from '@babel/parser'
-import { existsSync, readdirSync, readFileSync, writeFileSync } from 'fs'
+import { existsSync, readFileSync, readdirSync, writeFileSync } from 'node:fs'
 import MagicString from 'magic-string'
 import dts from 'rollup-plugin-dts'
 
 if (!existsSync('temp/packages')) {
   console.warn(
-    'no temp dts files found. run `tsc -p tsconfig.build.json` first.'
+    'no temp dts files found. run `tsc -p tsconfig.build-browser.json && tsc -p tsconfig.build-node.json` first.',
   )
   process.exit(1)
 }
@@ -17,26 +18,29 @@ const targetPackages = targets
   ? packages.filter(pkg => targets.includes(pkg))
   : packages
 
-export default targetPackages.map(pkg => {
-  return {
-    input: `./temp/packages/${pkg}/src/index.d.ts`,
-    output: {
-      file: `packages/${pkg}/dist/${pkg}.d.ts`,
-      format: 'es'
-    },
-    plugins: [dts(), patchTypes(pkg), ...(pkg === 'vue' ? [copyMts()] : [])],
-    onwarn(warning, warn) {
-      // during dts rollup, everything is externalized by default
-      if (
-        warning.code === 'UNRESOLVED_IMPORT' &&
-        !warning.exporter.startsWith('.')
-      ) {
-        return
-      }
-      warn(warning)
+export default targetPackages.map(
+  /** @returns {import('rollup').RollupOptions} */
+  pkg => {
+    return {
+      input: `./temp/packages/${pkg}/src/index.d.ts`,
+      output: {
+        file: `packages/${pkg}/dist/${pkg}.d.ts`,
+        format: 'es',
+      },
+      plugins: [dts(), patchTypes(pkg), ...(pkg === 'vue' ? [copyMts()] : [])],
+      onwarn(warning, warn) {
+        // during dts rollup, everything is externalized by default
+        if (
+          warning.code === 'UNRESOLVED_IMPORT' &&
+          !warning.exporter?.startsWith('.')
+        ) {
+          return
+        }
+        warn(warning)
+      },
     }
-  }
-})
+  },
+)
 
 /**
  * Patch the dts generated by rollup-plugin-dts
@@ -45,6 +49,8 @@ export default targetPackages.map(pkg => {
  *    otherwise it gets weird in vitepress `defineComponent` call with
  *    "the inferred type cannot be named without a reference"
  * 2. Append custom augmentations (jsx, macros)
+ *
+ * @param {string} pkg
  * @returns {import('rollup').Plugin}
  */
 function patchTypes(pkg) {
@@ -54,7 +60,7 @@ function patchTypes(pkg) {
       const s = new MagicString(code)
       const ast = parse(code, {
         plugins: ['typescript'],
-        sourceType: 'module'
+        sourceType: 'module',
       })
 
       /**
@@ -65,15 +71,16 @@ function patchTypes(pkg) {
         if (!node.id) {
           return
         }
-        // @ts-ignore
+        assert(node.id.type === 'Identifier')
         const name = node.id.name
         if (name.startsWith('_')) {
           return
         }
         shouldRemoveExport.add(name)
         if (isExported.has(name)) {
-          // @ts-ignore
-          s.prependLeft((parentDecl || node).start, `export `)
+          const start = (parentDecl || node).start
+          assert(typeof start === 'number')
+          s.prependLeft(start, `export `)
         }
       }
 
@@ -97,12 +104,13 @@ function patchTypes(pkg) {
         if (node.type === 'VariableDeclaration') {
           processDeclaration(node.declarations[0], node)
           if (node.declarations.length > 1) {
+            assert(typeof node.start === 'number')
+            assert(typeof node.end === 'number')
             throw new Error(
               `unhandled declare const with more than one declarators:\n${code.slice(
-                // @ts-ignore
                 node.start,
-                node.end
-              )}`
+                node.end,
+              )}`,
             )
           }
         } else if (
@@ -126,7 +134,7 @@ function patchTypes(pkg) {
               spec.type === 'ExportSpecifier' &&
               shouldRemoveExport.has(spec.local.name)
             ) {
-              // @ts-ignore
+              assert(spec.exported.type === 'Identifier')
               const exported = spec.exported.name
               if (exported !== spec.local.name) {
                 // this only happens if we have something like
@@ -136,19 +144,27 @@ function patchTypes(pkg) {
               }
               const next = node.specifiers[i + 1]
               if (next) {
-                // @ts-ignore
+                assert(typeof spec.start === 'number')
+                assert(typeof next.start === 'number')
                 s.remove(spec.start, next.start)
               } else {
                 // last one
                 const prev = node.specifiers[i - 1]
-                // @ts-ignore
-                s.remove(prev ? prev.end : spec.start, spec.end)
+                assert(typeof spec.start === 'number')
+                assert(typeof spec.end === 'number')
+                s.remove(
+                  prev
+                    ? (assert(typeof prev.end === 'number'), prev.end)
+                    : spec.start,
+                  spec.end,
+                )
               }
               removed++
             }
           }
           if (removed === node.specifiers.length) {
-            // @ts-ignore
+            assert(typeof node.start === 'number')
+            assert(typeof node.end === 'number')
             s.remove(node.start, node.end)
           }
         }
@@ -165,7 +181,7 @@ function patchTypes(pkg) {
             .join('\n')
       }
       return code
-    }
+    },
   }
 }
 
@@ -181,11 +197,8 @@ function copyMts() {
   return {
     name: 'copy-vue-mts',
     writeBundle(_, bundle) {
-      writeFileSync(
-        'packages/vue/dist/vue.d.mts',
-        // @ts-ignore
-        bundle['vue.d.ts'].code
-      )
-    }
+      assert('code' in bundle['vue.d.ts'])
+      writeFileSync('packages/vue/dist/vue.d.mts', bundle['vue.d.ts'].code)
+    },
   }
 }
diff --git a/scripts/aliases.js b/scripts/aliases.js
index 34a7c6435..d50498a80 100644
--- a/scripts/aliases.js
+++ b/scripts/aliases.js
@@ -4,19 +4,20 @@ import { readdirSync, statSync } from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-const resolveEntryForPkg = p =>
+const resolveEntryForPkg = (/** @type {string} */ p) =>
   path.resolve(
     fileURLToPath(import.meta.url),
-    `../../packages/${p}/src/index.ts`
+    `../../packages/${p}/src/index.ts`,
   )
 
 const dirs = readdirSync(new URL('../packages', import.meta.url))
 
+/** @type {Record<string, string>} */
 const entries = {
   vue: resolveEntryForPkg('vue'),
   'vue/compiler-sfc': resolveEntryForPkg('compiler-sfc'),
   'vue/server-renderer': resolveEntryForPkg('server-renderer'),
-  '@vue/compat': resolveEntryForPkg('vue-compat')
+  '@vue/compat': resolveEntryForPkg('vue-compat'),
 }
 
 const nonSrcPackages = ['sfc-playground', 'template-explorer', 'dts-test']
diff --git a/scripts/build.js b/scripts/build.js
index 162380900..4a0aef645 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -16,38 +16,75 @@ nr build core --formats cjs
 ```
 */
 
-import fs from 'node:fs/promises'
-import { existsSync } from 'node:fs'
+import fs from 'node:fs'
+import { parseArgs } from 'node:util'
+import { existsSync, readFileSync } from 'node:fs'
 import path from 'node:path'
-import minimist from 'minimist'
-import { gzipSync, brotliCompressSync } from 'node:zlib'
+import { brotliCompressSync, gzipSync } from 'node:zlib'
 import pico from 'picocolors'
-import { execa, execaSync } from 'execa'
 import { cpus } from 'node:os'
-import { createRequire } from 'node:module'
-import { targets as allTargets, fuzzyMatchTarget } from './utils.js'
-import { scanEnums } from './const-enum.js'
+import { targets as allTargets, exec, fuzzyMatchTarget } from './utils.js'
+import { scanEnums } from './inline-enums.js'
 import prettyBytes from 'pretty-bytes'
+import { spawnSync } from 'node:child_process'
 
-const require = createRequire(import.meta.url)
-const args = minimist(process.argv.slice(2))
-const targets = args._
-const formats = args.formats || args.f
-const devOnly = args.devOnly || args.d
-const prodOnly = !devOnly && (args.prodOnly || args.p)
-const buildTypes = args.withTypes || args.t
-const sourceMap = args.sourcemap || args.s
-const isRelease = args.release
-const buildAllMatching = args.all || args.a
-const writeSize = args.size
-const commit = execaSync('git', ['rev-parse', '--short=7', 'HEAD']).stdout
+const commit = spawnSync('git', ['rev-parse', '--short=7', 'HEAD'])
+  .stdout.toString()
+  .trim()
+
+const { values, positionals: targets } = parseArgs({
+  allowPositionals: true,
+  options: {
+    formats: {
+      type: 'string',
+      short: 'f',
+    },
+    devOnly: {
+      type: 'boolean',
+      short: 'd',
+    },
+    prodOnly: {
+      type: 'boolean',
+      short: 'p',
+    },
+    withTypes: {
+      type: 'boolean',
+      short: 't',
+    },
+    sourceMap: {
+      type: 'boolean',
+      short: 's',
+    },
+    release: {
+      type: 'boolean',
+    },
+    all: {
+      type: 'boolean',
+      short: 'a',
+    },
+    size: {
+      type: 'boolean',
+    },
+  },
+})
+
+const {
+  formats,
+  all: buildAllMatching,
+  devOnly,
+  prodOnly,
+  withTypes: buildTypes,
+  sourceMap,
+  release: isRelease,
+  size: writeSize,
+} = values
 
 const sizeDir = path.resolve('temp/size')
 
 run()
 
 async function run() {
-  if (writeSize) await fs.mkdir(sizeDir, { recursive: true })
+  if (writeSize) fs.mkdirSync(sizeDir, { recursive: true })
   const removeCache = scanEnums()
   try {
     const resolvedTargets = targets.length
@@ -56,18 +93,18 @@ async function run() {
     await buildAll(resolvedTargets)
     await checkAllSizes(resolvedTargets)
     if (buildTypes) {
-      await execa(
+      await exec(
         'pnpm',
         [
           'run',
           'build-dts',
           ...(targets.length
             ? ['--environment', `TARGETS:${resolvedTargets.join(',')}`]
-            : [])
+            : []),
         ],
         {
-          stdio: 'inherit'
-        }
+          stdio: 'inherit',
+        },
       )
     }
   } finally {
@@ -102,7 +139,9 @@ async function runParallel(maxConcurrency, source, iteratorFn) {
     ret.push(p)
 
     if (maxConcurrency <= source.length) {
-      const e = p.then(() => executing.splice(executing.indexOf(e), 1))
+      const e = p.then(() => {
+        executing.splice(executing.indexOf(e), 1)
+      })
       executing.push(e)
       if (executing.length >= maxConcurrency) {
         await Promise.race(executing)
@@ -111,14 +150,20 @@ async function runParallel(maxConcurrency, source, iteratorFn) {
   }
   return Promise.all(ret)
 }
+
+const privatePackages = fs.readdirSync('packages-private')
+
 /**
  * Builds the target.
  * @param {string} target - The target to build.
  * @returns {Promise<void>} - A promise representing the build process.
  */
 async function build(target) {
-  const pkgDir = path.resolve(`packages/${target}`)
-  const pkg = require(`${pkgDir}/package.json`)
+  const pkgBase = privatePackages.includes(target)
+    ? `packages-private`
+    : `packages`
+  const pkgDir = path.resolve(`${pkgBase}/${target}`)
+  const pkg = JSON.parse(readFileSync(`${pkgDir}/package.json`, 'utf-8'))
 
   // if this is a full build (no specific targets), ignore private packages
   if ((isRelease || !targets.length) && pkg.private) {
@@ -127,13 +172,14 @@ async function build(target) {
 
   // if building a specific format, do not remove dist.
   if (!formats && existsSync(`${pkgDir}/dist`)) {
-    await fs.rm(`${pkgDir}/dist`, { recursive: true })
+    fs.rmSync(`${pkgDir}/dist`, { recursive: true })
   }
 
   const env =
     (pkg.buildOptions && pkg.buildOptions.env) ||
     (devOnly ? 'development' : 'production')
-  await execa(
+
+  await exec(
     'rollup',
     [
       '-c',
@@ -144,12 +190,12 @@ async function build(target) {
         `TARGET:${target}`,
         formats ? `FORMATS:${formats}` : ``,
         prodOnly ? `PROD_ONLY:true` : ``,
-        sourceMap ? `SOURCE_MAP:true` : ``
+        sourceMap ? `SOURCE_MAP:true` : ``,
       ]
         .filter(Boolean)
-        .join(',')
+        .join(','),
     ],
-    { stdio: 'inherit' }
+    { stdio: 'inherit' },
   )
 }
 
@@ -191,7 +237,7 @@ async function checkFileSize(filePath) {
   if (!existsSync(filePath)) {
     return
   }
-  const file = await fs.readFile(filePath)
+  const file = fs.readFileSync(filePath)
   const fileName = path.basename(filePath)
 
   const gzipped = gzipSync(file)
@@ -199,21 +245,21 @@ async function checkFileSize(filePath) {
 
   console.log(
     `${pico.gray(pico.bold(fileName))} min:${prettyBytes(
-      file.length
+      file.length,
     )} / gzip:${prettyBytes(gzipped.length)} / brotli:${prettyBytes(
-      brotli.length
-    )}`
+      brotli.length,
+    )}`,
   )
 
   if (writeSize)
-    await fs.writeFile(
+    fs.writeFileSync(
       path.resolve(sizeDir, `${fileName}.json`),
       JSON.stringify({
         file: fileName,
         size: file.length,
         gzip: gzipped.length,
-        brotli: brotli.length
+        brotli: brotli.length,
       }),
-      'utf-8'
+      'utf-8',
     )
 }
diff --git a/scripts/const-enum.js b/scripts/const-enum.js
deleted file mode 100644
index e9f25bcef..000000000
--- a/scripts/const-enum.js
+++ /dev/null
@@ -1,255 +0,0 @@
-// @ts-check
-
-/**
- * We use rollup-plugin-esbuild for faster builds, but esbuild in isolation
- * mode compiles const enums into runtime enums, bloating bundle size.
- *
- * Here we pre-process all the const enums in the project and turn them into
- * global replacements, and remove the original declarations and re-exports.
- *
- * This erases the const enums before the esbuild transform so that we can
- * leverage esbuild's speed while retaining the DX and bundle size benefits
- * of const enums.
- *
- * This file is expected to be executed with project root as cwd.
- */
-
-import { execaSync } from 'execa'
-import {
-  existsSync,
-  mkdirSync,
-  readFileSync,
-  rmSync,
-  writeFileSync
-} from 'node:fs'
-import { parse } from '@babel/parser'
-import path from 'node:path'
-import MagicString from 'magic-string'
-
-const ENUM_CACHE_PATH = 'temp/enum.json'
-
-function evaluate(exp) {
-  return new Function(`return ${exp}`)()
-}
-
-// this is called in the build script entry once
-// so the data can be shared across concurrent Rollup processes
-export function scanEnums() {
-  /**
-   * @type {{ ranges: Record<string, [number, number][]>, defines: Record<string, string>, ids: string[] }}
-   */
-  const enumData = {
-    ranges: {},
-    defines: {},
-    ids: []
-  }
-
-  // 1. grep for files with exported const enum
-  const { stdout } = execaSync('git', ['grep', `export const enum`])
-  const files = [...new Set(stdout.split('\n').map(line => line.split(':')[0]))]
-
-  // 2. parse matched files to collect enum info
-  for (const relativeFile of files) {
-    const file = path.resolve(process.cwd(), relativeFile)
-    const content = readFileSync(file, 'utf-8')
-    const ast = parse(content, {
-      plugins: ['typescript'],
-      sourceType: 'module'
-    })
-
-    for (const node of ast.program.body) {
-      if (
-        node.type === 'ExportNamedDeclaration' &&
-        node.declaration &&
-        node.declaration.type === 'TSEnumDeclaration'
-      ) {
-        if (file in enumData.ranges) {
-          // @ts-ignore
-          enumData.ranges[file].push([node.start, node.end])
-        } else {
-          // @ts-ignore
-          enumData.ranges[file] = [[node.start, node.end]]
-        }
-
-        const decl = node.declaration
-        let lastInitialized
-        for (let i = 0; i < decl.members.length; i++) {
-          const e = decl.members[i]
-          const id = decl.id.name
-          if (!enumData.ids.includes(id)) {
-            enumData.ids.push(id)
-          }
-          const key = e.id.type === 'Identifier' ? e.id.name : e.id.value
-          const fullKey = `${id}.${key}`
-          const saveValue = value => {
-            if (fullKey in enumData.defines) {
-              throw new Error(`name conflict for enum ${id} in ${file}`)
-            }
-            enumData.defines[fullKey] = JSON.stringify(value)
-          }
-          const init = e.initializer
-          if (init) {
-            let value
-            if (
-              init.type === 'StringLiteral' ||
-              init.type === 'NumericLiteral'
-            ) {
-              value = init.value
-            }
-
-            // e.g. 1 << 2
-            if (init.type === 'BinaryExpression') {
-              const resolveValue = node => {
-                if (
-                  node.type === 'NumericLiteral' ||
-                  node.type === 'StringLiteral'
-                ) {
-                  return node.value
-                } else if (node.type === 'MemberExpression') {
-                  const exp = content.slice(node.start, node.end)
-                  if (!(exp in enumData.defines)) {
-                    throw new Error(
-                      `unhandled enum initialization expression ${exp} in ${file}`
-                    )
-                  }
-                  return enumData.defines[exp]
-                } else {
-                  throw new Error(
-                    `unhandled BinaryExpression operand type ${node.type} in ${file}`
-                  )
-                }
-              }
-              const exp = `${resolveValue(init.left)}${
-                init.operator
-              }${resolveValue(init.right)}`
-              value = evaluate(exp)
-            }
-
-            if (init.type === 'UnaryExpression') {
-              if (
-                init.argument.type === 'StringLiteral' ||
-                init.argument.type === 'NumericLiteral'
-              ) {
-                const exp = `${init.operator}${init.argument.value}`
-                value = evaluate(exp)
-              } else {
-                throw new Error(
-                  `unhandled UnaryExpression argument type ${init.argument.type} in ${file}`
-                )
-              }
-            }
-
-            if (value === undefined) {
-              throw new Error(
-                `unhandled initializer type ${init.type} for ${fullKey} in ${file}`
-              )
-            }
-            saveValue(value)
-            lastInitialized = value
-          } else {
-            if (lastInitialized === undefined) {
-              // first initialized
-              saveValue((lastInitialized = 0))
-            } else if (typeof lastInitialized === 'number') {
-              saveValue(++lastInitialized)
-            } else {
-              // should not happen
-              throw new Error(`wrong enum initialization sequence in ${file}`)
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // 3. save cache
-  if (!existsSync('temp')) mkdirSync('temp')
-  writeFileSync(ENUM_CACHE_PATH, JSON.stringify(enumData))
-
-  return () => {
-    rmSync(ENUM_CACHE_PATH, { force: true })
-  }
-}
-
-/**
- * @returns {[import('rollup').Plugin, Record<string, string>]}
- */
-export function constEnum() {
-  if (!existsSync(ENUM_CACHE_PATH)) {
-    throw new Error('enum cache needs to be initialized before creating plugin')
-  }
-  /**
-   * @type {{ ranges: Record<string, [number, number][]>, defines: Record<string, string>, ids: string[] }}
-   */
-  const enumData = JSON.parse(readFileSync(ENUM_CACHE_PATH, 'utf-8'))
-
-  // construct a regex for matching re-exports of known const enums
-  const reExportsRE = new RegExp(
-    `export {[^}]*?\\b(${enumData.ids.join('|')})\\b[^]*?}`
-  )
-
-  // 3. during transform:
-  //    3.1 files w/ const enum declaration: remove declaration
-  //    3.2 files using const enum: inject into esbuild define
-  /**
-   * @type {import('rollup').Plugin}
-   */
-  const plugin = {
-    name: 'remove-const-enum',
-    transform(code, id) {
-      let s
-
-      if (id in enumData.ranges) {
-        s = s || new MagicString(code)
-        for (const [start, end] of enumData.ranges[id]) {
-          s.remove(start, end)
-        }
-      }
-
-      // check for const enum re-exports that must be removed
-      if (reExportsRE.test(code)) {
-        s = s || new MagicString(code)
-        const ast = parse(code, {
-          plugins: ['typescript'],
-          sourceType: 'module'
-        })
-        for (const node of ast.program.body) {
-          if (
-            node.type === 'ExportNamedDeclaration' &&
-            node.exportKind !== 'type' &&
-            node.source
-          ) {
-            for (let i = 0; i < node.specifiers.length; i++) {
-              const spec = node.specifiers[i]
-              if (
-                spec.type === 'ExportSpecifier' &&
-                spec.exportKind !== 'type' &&
-                enumData.ids.includes(spec.local.name)
-              ) {
-                const next = node.specifiers[i + 1]
-                if (next) {
-                  // @ts-ignore
-                  s.remove(spec.start, next.start)
-                } else {
-                  // last one
-                  const prev = node.specifiers[i - 1]
-                  // @ts-ignore
-                  s.remove(prev ? prev.end : spec.start, spec.end)
-                }
-              }
-            }
-          }
-        }
-      }
-
-      if (s) {
-        return {
-          code: s.toString(),
-          map: s.generateMap()
-        }
-      }
-    }
-  }
-
-  return [plugin, enumData.defines]
-}
diff --git a/scripts/dev.js b/scripts/dev.js
index c784d96d3..fb4d3873e 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -5,20 +5,42 @@
 // smaller files and provides better tree-shaking.
 
 import esbuild from 'esbuild'
-import { resolve, relative, dirname } from 'node:path'
+import fs from 'node:fs'
+import { dirname, relative, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { createRequire } from 'node:module'
-import minimist from 'minimist'
+import { parseArgs } from 'node:util'
 import { polyfillNode } from 'esbuild-plugin-polyfill-node'
 
 const require = createRequire(import.meta.url)
 const __dirname = dirname(fileURLToPath(import.meta.url))
-const args = minimist(process.argv.slice(2))
-const target = args._[0] || 'vue'
-const format = args.f || 'global'
-const prod = args.p || false
-const inlineDeps = args.i || args.inline
-const pkg = require(`../packages/${target}/package.json`)
+
+const {
+  values: { format: rawFormat, prod, inline: inlineDeps },
+  positionals,
+} = parseArgs({
+  allowPositionals: true,
+  options: {
+    format: {
+      type: 'string',
+      short: 'f',
+      default: 'global',
+    },
+    prod: {
+      type: 'boolean',
+      short: 'p',
+      default: false,
+    },
+    inline: {
+      type: 'boolean',
+      short: 'i',
+      default: false,
+    },
+  },
+})
+
+const format = rawFormat || 'global'
+const targets = positionals.length ? positionals : ['vue']
 
 // resolve output
 const outputFormat = format.startsWith('global')
@@ -31,99 +53,110 @@ const postfix = format.endsWith('-runtime')
   ? `runtime.${format.replace(/-runtime$/, '')}`
   : format
 
-const outfile = resolve(
-  __dirname,
-  `../packages/${target}/dist/${
-    target === 'vue-compat' ? `vue` : target
-  }.${postfix}.${prod ? `prod.` : ``}js`
-)
-const relativeOutfile = relative(process.cwd(), outfile)
+const privatePackages = fs.readdirSync('packages-private')
 
-// resolve externals
-// TODO this logic is largely duplicated from rollup.config.js
-let external = []
-if (!inlineDeps) {
-  // cjs & esm-bundler: external all deps
-  if (format === 'cjs' || format.includes('esm-bundler')) {
-    external = [
-      ...external,
-      ...Object.keys(pkg.dependencies || {}),
-      ...Object.keys(pkg.peerDependencies || {}),
-      // for @vue/compiler-sfc / server-renderer
-      'path',
-      'url',
-      'stream'
-    ]
-  }
+for (const target of targets) {
+  const pkgBase = privatePackages.includes(target)
+    ? `packages-private`
+    : `packages`
+  const pkgBasePath = `../${pkgBase}/${target}`
+  const pkg = require(`${pkgBasePath}/package.json`)
+  const outfile = resolve(
+    __dirname,
+    `${pkgBasePath}/dist/${
+      target === 'vue-compat' ? `vue` : target
+    }.${postfix}.${prod ? `prod.` : ``}js`,
+  )
+  const relativeOutfile = relative(process.cwd(), outfile)
 
-  if (target === 'compiler-sfc') {
-    const consolidatePkgPath = require.resolve(
-      '@vue/consolidate/package.json',
-      {
-        paths: [resolve(__dirname, `../packages/${target}/`)]
-      }
-    )
-    const consolidateDeps = Object.keys(
-      require(consolidatePkgPath).devDependencies
-    )
-    external = [
-      ...external,
-      ...consolidateDeps,
-      'fs',
-      'vm',
-      'crypto',
-      'react-dom/server',
-      'teacup/lib/express',
-      'arc-templates/dist/es5',
-      'then-pug',
-      'then-jade'
-    ]
-  }
-}
+  // resolve externals
+  // TODO this logic is largely duplicated from rollup.config.js
+  /** @type {string[]} */
+  let external = []
+  if (!inlineDeps) {
+    // cjs & esm-bundler: external all deps
+    if (format === 'cjs' || format.includes('esm-bundler')) {
+      external = [
+        ...external,
+        ...Object.keys(pkg.dependencies || {}),
+        ...Object.keys(pkg.peerDependencies || {}),
+        // for @vue/compiler-sfc / server-renderer
+        'path',
+        'url',
+        'stream',
+      ]
+    }
 
-const plugins = [
-  {
-    name: 'log-rebuild',
-    setup(build) {
-      build.onEnd(() => {
-        console.log(`built: ${relativeOutfile}`)
-      })
+    if (target === 'compiler-sfc') {
+      const consolidatePkgPath = require.resolve(
+        '@vue/consolidate/package.json',
+        {
+          paths: [resolve(__dirname, `../packages/${target}/`)],
+        },
+      )
+      const consolidateDeps = Object.keys(
+        require(consolidatePkgPath).devDependencies,
+      )
+      external = [
+        ...external,
+        ...consolidateDeps,
+        'fs',
+        'vm',
+        'crypto',
+        'react-dom/server',
+        'teacup/lib/express',
+        'arc-templates/dist/es5',
+        'then-pug',
+        'then-jade',
+      ]
     }
   }
-]
+  /** @type {Array<import('esbuild').Plugin>} */
+  const plugins = [
+    {
+      name: 'log-rebuild',
+      setup(build) {
+        build.onEnd(() => {
+          console.log(`built: ${relativeOutfile}`)
+        })
+      },
+    },
+  ]
 
-if (format !== 'cjs' && pkg.buildOptions?.enableNonBrowserBranches) {
-  plugins.push(polyfillNode())
+  if (format !== 'cjs' && pkg.buildOptions?.enableNonBrowserBranches) {
+    plugins.push(polyfillNode())
+  }
+
+  esbuild
+    .context({
+      entryPoints: [resolve(__dirname, `${pkgBasePath}/src/index.ts`)],
+      outfile,
+      bundle: true,
+      external,
+      sourcemap: true,
+      format: outputFormat,
+      globalName: pkg.buildOptions?.name,
+      platform: format === 'cjs' ? 'node' : 'browser',
+      plugins,
+      define: {
+        __COMMIT__: `"dev"`,
+        __VERSION__: `"${pkg.version}"`,
+        __DEV__: prod ? `false` : `true`,
+        __TEST__: `false`,
+        __BROWSER__: String(
+          format !== 'cjs' && !pkg.buildOptions?.enableNonBrowserBranches,
+        ),
+        __GLOBAL__: String(format === 'global'),
+        __ESM_BUNDLER__: String(format.includes('esm-bundler')),
+        __ESM_BROWSER__: String(format.includes('esm-browser')),
+        __CJS__: String(format === 'cjs'),
+        __SSR__: String(format !== 'global'),
+        __COMPAT__: String(target === 'vue-compat'),
+        __FEATURE_SUSPENSE__: `true`,
+        __FEATURE_OPTIONS_API__: `true`,
+        __FEATURE_PROD_DEVTOOLS__: `false`,
+        __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: `true`,
+      },
+    })
+    .then(ctx => ctx.watch())
 }
-
-esbuild
-  .context({
-    entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],
-    outfile,
-    bundle: true,
-    external,
-    sourcemap: true,
-    format: outputFormat,
-    globalName: pkg.buildOptions?.name,
-    platform: format === 'cjs' ? 'node' : 'browser',
-    plugins,
-    define: {
-      __COMMIT__: `"dev"`,
-      __VERSION__: `"${pkg.version}"`,
-      __DEV__: prod ? `false` : `true`,
-      __TEST__: `false`,
-      __BROWSER__: String(
-        format !== 'cjs' && !pkg.buildOptions?.enableNonBrowserBranches
-      ),
-      __GLOBAL__: String(format === 'global'),
-      __ESM_BUNDLER__: String(format.includes('esm-bundler')),
-      __ESM_BROWSER__: String(format.includes('esm-browser')),
-      __NODE_JS__: String(format === 'cjs'),
-      __SSR__: String(format === 'cjs' || format.includes('esm-bundler')),
-      __COMPAT__: String(target === 'vue-compat'),
-      __FEATURE_SUSPENSE__: `true`,
-      __FEATURE_OPTIONS_API__: `true`,
-      __FEATURE_PROD_DEVTOOLS__: `false`
-    }
-  })
-  .then(ctx => ctx.watch())
diff --git a/scripts/inline-enums.js b/scripts/inline-enums.js
new file mode 100644
index 000000000..b1baaa6c5
--- /dev/null
+++ b/scripts/inline-enums.js
@@ -0,0 +1,287 @@
+// @ts-check
+
+/**
+ * We used const enums before, but it caused some issues: #1228, so we
+ * switched to regular enums. But we still want to keep the zero-cost benefit
+ * of const enums, and minimize the impact on bundle size as much as possible.
+ *
+ * Here we pre-process all the enums in the project and turn them into
+ * global replacements, and rewrite the original declarations as object literals.
+ *
+ * This file is expected to be executed with project root as cwd.
+ */
+
+import * as assert from 'node:assert'
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from 'node:fs'
+import * as path from 'node:path'
+import { parse } from '@babel/parser'
+import { spawnSync } from 'node:child_process'
+import MagicString from 'magic-string'
+
+/**
+ * @typedef {{ readonly name: string, readonly value: string | number }} EnumMember
+ * @typedef {{ readonly id: string, readonly range: readonly [start: number, end: number], readonly members: ReadonlyArray<EnumMember>}} EnumDeclaration
+ * @typedef {{ readonly declarations: { readonly [file: string] : ReadonlyArray<EnumDeclaration>}, readonly defines: { readonly [ id_key: `${string}.${string}`]: string } }} EnumData
+ */
+
+const ENUM_CACHE_PATH = 'temp/enum.json'
+
+/**
+ * @param {string} exp
+ * @returns {string | number}
+ */
+function evaluate(exp) {
+  return new Function(`return ${exp}`)()
+}
+
+// this is called in the build script entry once
+// so the data can be shared across concurrent Rollup processes
+export function scanEnums() {
+  /** @type {{ [file: string]: EnumDeclaration[] }} */
+  const declarations = Object.create(null)
+  /** @type {{ [id_key: `${string}.${string}`]: string; }} */
+  const defines = Object.create(null)
+
+  // 1. grep for files with exported enum
+  const { stdout } = spawnSync('git', ['grep', `export enum`])
+  const files = [
+    ...new Set(
+      stdout
+        .toString()
+        .trim()
+        .split('\n')
+        .map(line => line.split(':')[0]),
+    ),
+  ]
+
+  // 2. parse matched files to collect enum info
+  for (const relativeFile of files) {
+    const file = path.resolve(process.cwd(), relativeFile)
+    const content = readFileSync(file, 'utf-8')
+    const ast = parse(content, {
+      plugins: ['typescript'],
+      sourceType: 'module',
+    })
+
+    /** @type {Set<string>} */
+    const enumIds = new Set()
+    for (const node of ast.program.body) {
+      if (
+        node.type === 'ExportNamedDeclaration' &&
+        node.declaration &&
+        node.declaration.type === 'TSEnumDeclaration'
+      ) {
+        const decl = node.declaration
+        const id = decl.id.name
+        if (enumIds.has(id)) {
+          throw new Error(
+            `not support declaration merging for enum ${id} in ${file}`,
+          )
+        }
+        enumIds.add(id)
+        /** @type {string | number | undefined} */
+        let lastInitialized
+        /** @type {Array<EnumMember>} */
+        const members = []
+
+        for (let i = 0; i < decl.members.length; i++) {
+          const e = decl.members[i]
+          const key = e.id.type === 'Identifier' ? e.id.name : e.id.value
+          const fullKey = /** @type {const} */ (`${id}.${key}`)
+          const saveValue = (/** @type {string | number} */ value) => {
+            // We need allow same name enum in different file.
+            // For example: enum ErrorCodes exist in both @vue/compiler-core and @vue/runtime-core
+            // But not allow `ErrorCodes.__EXTEND_POINT__` appear in two same name enum
+            if (fullKey in defines) {
+              throw new Error(`name conflict for enum ${id} in ${file}`)
+            }
+            members.push({
+              name: key,
+              value,
+            })
+            defines[fullKey] = JSON.stringify(value)
+          }
+          const init = e.initializer
+          if (init) {
+            /** @type {string | number} */
+            let value
+            if (
+              init.type === 'StringLiteral' ||
+              init.type === 'NumericLiteral'
+            ) {
+              value = init.value
+            }
+            // e.g. 1 << 2
+            else if (init.type === 'BinaryExpression') {
+              const resolveValue = (
+                /** @type {import('@babel/types').Expression | import('@babel/types').PrivateName} */ node,
+              ) => {
+                assert.ok(typeof node.start === 'number')
+                assert.ok(typeof node.end === 'number')
+                if (
+                  node.type === 'NumericLiteral' ||
+                  node.type === 'StringLiteral'
+                ) {
+                  return node.value
+                } else if (node.type === 'MemberExpression') {
+                  const exp = /** @type {`${string}.${string}`} */ (
+                    content.slice(node.start, node.end)
+                  )
+                  if (!(exp in defines)) {
+                    throw new Error(
+                      `unhandled enum initialization expression ${exp} in ${file}`,
+                    )
+                  }
+                  return defines[exp]
+                } else {
+                  throw new Error(
+                    `unhandled BinaryExpression operand type ${node.type} in ${file}`,
+                  )
+                }
+              }
+              const exp = `${resolveValue(init.left)}${
+                init.operator
+              }${resolveValue(init.right)}`
+              value = evaluate(exp)
+            } else if (init.type === 'UnaryExpression') {
+              if (
+                init.argument.type === 'StringLiteral' ||
+                init.argument.type === 'NumericLiteral'
+              ) {
+                const exp = `${init.operator}${init.argument.value}`
+                value = evaluate(exp)
+              } else {
+                throw new Error(
+                  `unhandled UnaryExpression argument type ${init.argument.type} in ${file}`,
+                )
+              }
+            } else {
+              throw new Error(
+                `unhandled initializer type ${init.type} for ${fullKey} in ${file}`,
+              )
+            }
+            lastInitialized = value
+            saveValue(lastInitialized)
+          } else {
+            if (lastInitialized === undefined) {
+              // first initialized
+              lastInitialized = 0
+              saveValue(lastInitialized)
+            } else if (typeof lastInitialized === 'number') {
+              lastInitialized++
+              saveValue(lastInitialized)
+            } else {
+              // should not happen
+              throw new Error(`wrong enum initialization sequence in ${file}`)
+            }
+          }
+        }
+
+        if (!(file in declarations)) {
+          declarations[file] = []
+        }
+        assert.ok(typeof node.start === 'number')
+        assert.ok(typeof node.end === 'number')
+        declarations[file].push({
+          id,
+          range: [node.start, node.end],
+          members,
+        })
+      }
+    }
+  }
+
+  // 3. save cache
+  if (!existsSync('temp')) mkdirSync('temp')
+
+  /** @type {EnumData} */
+  const enumData = {
+    declarations,
+    defines,
+  }
+
+  writeFileSync(ENUM_CACHE_PATH, JSON.stringify(enumData))
+
+  return () => {
+    rmSync(ENUM_CACHE_PATH, { force: true })
+  }
+}
+
+/**
+ * @returns {[import('rollup').Plugin, Record<string, string>]}
+ */
+export function inlineEnums() {
+  if (!existsSync(ENUM_CACHE_PATH)) {
+    throw new Error('enum cache needs to be initialized before creating plugin')
+  }
+  /**
+   * @type {EnumData}
+   */
+  const enumData = JSON.parse(readFileSync(ENUM_CACHE_PATH, 'utf-8'))
+
+  // 3. during transform:
+  //    3.1 files w/ enum declaration: rewrite declaration as object literal
+  //    3.2 files using enum: inject into esbuild define
+  /**
+   * @type {import('rollup').Plugin}
+   */
+  const plugin = {
+    name: 'inline-enum',
+    transform(code, id) {
+      /**
+       * @type {MagicString | undefined}
+       */
+      let s
+
+      if (id in enumData.declarations) {
+        s = s || new MagicString(code)
+        for (const declaration of enumData.declarations[id]) {
+          const {
+            range: [start, end],
+            id,
+            members,
+          } = declaration
+          s.update(
+            start,
+            end,
+            `export const ${id} = {${members
+              .flatMap(({ name, value }) => {
+                const forwardMapping =
+                  JSON.stringify(name) + ': ' + JSON.stringify(value)
+                const reverseMapping =
+                  JSON.stringify(value.toString()) + ': ' + JSON.stringify(name)
+
+                // see https://www.typescriptlang.org/docs/handbook/enums.html#reverse-mappings
+                return typeof value === 'string'
+                  ? [
+                      forwardMapping,
+                      // string enum members do not get a reverse mapping generated at all
+                    ]
+                  : [
+                      forwardMapping,
+                      // other enum members should support enum reverse mapping
+                      reverseMapping,
+                    ]
+              })
+              .join(',\n')}}`,
+          )
+        }
+      }
+
+      if (s) {
+        return {
+          code: s.toString(),
+          map: s.generateMap(),
+        }
+      }
+    },
+  }
+
+  return [plugin, enumData.defines]
+}
diff --git a/scripts/pre-dev-sfc.js b/scripts/pre-dev-sfc.js
index b9b3a5344..b28705f34 100644
--- a/scripts/pre-dev-sfc.js
+++ b/scripts/pre-dev-sfc.js
@@ -6,8 +6,7 @@ const packagesToCheck = [
   'compiler-core',
   'compiler-dom',
   'compiler-ssr',
-  'reactivity-transform',
-  'shared'
+  'shared',
 ]
 
 let allFilesPresent = true
@@ -15,7 +14,7 @@ let allFilesPresent = true
 for (const pkg of packagesToCheck) {
   if (
     !fs.existsSync(
-      new URL(`../packages/${pkg}/dist/${pkg}.cjs.js`, import.meta.url)
+      new URL(`../packages/${pkg}/dist/${pkg}.cjs.js`, import.meta.url),
     )
   ) {
     allFilesPresent = false
diff --git a/scripts/release.js b/scripts/release.js
index 10623eedb..cd287dfc1 100644
--- a/scripts/release.js
+++ b/scripts/release.js
@@ -1,30 +1,72 @@
 // @ts-check
-import minimist from 'minimist'
 import fs from 'node:fs'
 import path from 'node:path'
 import pico from 'picocolors'
 import semver from 'semver'
 import enquirer from 'enquirer'
-import { execa } from 'execa'
 import { createRequire } from 'node:module'
 import { fileURLToPath } from 'node:url'
+import { exec } from './utils.js'
+import { parseArgs } from 'node:util'
+
+/**
+ * @typedef {{
+ *   name: string
+ *   version: string
+ *   dependencies?: { [dependenciesPackageName: string]: string }
+ *   peerDependencies?: { [peerDependenciesPackageName: string]: string }
+ * }} Package
+ */
 
 let versionUpdated = false
 
 const { prompt } = enquirer
 const currentVersion = createRequire(import.meta.url)('../package.json').version
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const args = minimist(process.argv.slice(2), {
-  alias: {
-    skipBuild: 'skip-build',
-    skipTests: 'skip-tests',
-    skipGit: 'skip-git',
-    skipPrompts: 'skip-prompts'
-  }
+
+const { values: args, positionals } = parseArgs({
+  allowPositionals: true,
+  options: {
+    preid: {
+      type: 'string',
+    },
+    dry: {
+      type: 'boolean',
+    },
+    tag: {
+      type: 'string',
+    },
+    canary: {
+      type: 'boolean',
+    },
+    skipBuild: {
+      type: 'boolean',
+    },
+    skipTests: {
+      type: 'boolean',
+    },
+    skipGit: {
+      type: 'boolean',
+    },
+    skipPrompts: {
+      type: 'boolean',
+    },
+    publish: {
+      type: 'boolean',
+      default: false,
+    },
+    publishOnly: {
+      type: 'boolean',
+    },
+    registry: {
+      type: 'string',
+    },
+  },
 })
 
 const preId = args.preid || semver.prerelease(currentVersion)?.[0]
 const isDryRun = args.dry
+/** @type {boolean | undefined} */
 let skipTests = args.skipTests
 const skipBuild = args.skipBuild
 const isCanary = args.canary
@@ -37,13 +79,13 @@ const packages = fs
     const pkgRoot = path.resolve(__dirname, '../packages', p)
     if (fs.statSync(pkgRoot).isDirectory()) {
       const pkg = JSON.parse(
-        fs.readFileSync(path.resolve(pkgRoot, 'package.json'), 'utf-8')
+        fs.readFileSync(path.resolve(pkgRoot, 'package.json'), 'utf-8'),
       )
       return !pkg.private
     }
   })
 
-const isCorePackage = pkgName => {
+const isCorePackage = (/** @type {string} */ pkgName) => {
   if (!pkgName) return
 
   if (pkgName === 'vue' || pkgName === '@vue/compat') {
@@ -56,7 +98,7 @@ const isCorePackage = pkgName => {
   )
 }
 
-const renamePackageToCanary = pkgName => {
+const renamePackageToCanary = (/** @type {string} */ pkgName) => {
   if (pkgName === 'vue') {
     return '@vue/canary'
   }
@@ -68,34 +110,46 @@ const renamePackageToCanary = pkgName => {
   return pkgName
 }
 
-const keepThePackageName = pkgName => pkgName
+const keepThePackageName = (/** @type {string} */ pkgName) => pkgName
 
+/** @type {string[]} */
 const skippedPackages = []
 
+/** @type {ReadonlyArray<import('semver').ReleaseType>} */
 const versionIncrements = [
   'patch',
   'minor',
   'major',
-  ...(preId ? ['prepatch', 'preminor', 'premajor', 'prerelease'] : [])
+  ...(preId
+    ? /** @type {const} */ (['prepatch', 'preminor', 'premajor', 'prerelease'])
+    : []),
 ]
 
-const inc = i => semver.inc(currentVersion, i, preId)
-const run = (bin, args, opts = {}) =>
-  execa(bin, args, { stdio: 'inherit', ...opts })
-const dryRun = (bin, args, opts = {}) =>
-  console.log(pico.blue(`[dryrun] ${bin} ${args.join(' ')}`), opts)
+const inc = (/** @type {import('semver').ReleaseType} */ i) =>
+  semver.inc(currentVersion, i, typeof preId === 'string' ? preId : undefined)
+const run = async (
+  /** @type {string} */ bin,
+  /** @type {ReadonlyArray<string>} */ args,
+  /** @type {import('node:child_process').SpawnOptions} */ opts = {},
+) => exec(bin, args, { stdio: 'inherit', ...opts })
+const dryRun = async (
+  /** @type {string} */ bin,
+  /** @type {ReadonlyArray<string>} */ args,
+  /** @type {import('node:child_process').SpawnOptions} */ opts = {},
+) => console.log(pico.blue(`[dryrun] ${bin} ${args.join(' ')}`), opts)
 const runIfNotDry = isDryRun ? dryRun : run
-const getPkgRoot = pkg => path.resolve(__dirname, '../packages/' + pkg)
-const step = msg => console.log(pico.cyan(msg))
+const getPkgRoot = (/** @type {string} */ pkg) =>
+  path.resolve(__dirname, '../packages/' + pkg)
+const step = (/** @type {string} */ msg) => console.log(pico.cyan(msg))
 
 async function main() {
   if (!(await isInSyncWithRemote())) {
     return
   } else {
-    console.log(`${pico.green(`✓`)} commit is up-to-date with rmeote.\n`)
+    console.log(`${pico.green(`✓`)} commit is up-to-date with remote.\n`)
   }
 
-  let targetVersion = args._[0]
+  let targetVersion = positionals[0]
 
   if (isCanary) {
     // The canary version string format is `3.yyyyMMdd.0` (or `3.yyyyMMdd.0-minor.0` for minor)
@@ -121,9 +175,9 @@ async function main() {
       const { stdout } = await run(
         'pnpm',
         ['view', `${pkgName}@~${canaryVersion}`, 'version', '--json'],
-        { stdio: 'pipe' }
+        { stdio: 'pipe' },
       )
-      let versions = JSON.parse(stdout)
+      let versions = JSON.parse(/** @type {string} */ (stdout))
       versions = Array.isArray(versions) ? versions : [versions]
       const latestSameDayPatch = /** @type {string} */ (
         semver.maxSatisfying(versions, `~${canaryVersion}`)
@@ -137,7 +191,7 @@ async function main() {
           semver.inc(latestSameDayPatch, 'prerelease', args.tag)
         )
       }
-    } catch (e) {
+    } catch (/** @type {any} */ e) {
       if (/E404/.test(e.message)) {
         // the first patch version on that day
       } else {
@@ -150,28 +204,36 @@ async function main() {
 
   if (!targetVersion) {
     // no explicit version, offer suggestions
-    // @ts-ignore
+    /** @type {{ release: string }} */
     const { release } = await prompt({
       type: 'select',
       name: 'release',
       message: 'Select release type',
-      choices: versionIncrements.map(i => `${i} (${inc(i)})`).concat(['custom'])
+      choices: versionIncrements
+        .map(i => `${i} (${inc(i)})`)
+        .concat(['custom']),
     })
 
     if (release === 'custom') {
+      /** @type {{ version: string }} */
       const result = await prompt({
         type: 'input',
         name: 'version',
         message: 'Input custom version',
-        initial: currentVersion
+        initial: currentVersion,
       })
-      // @ts-ignore
       targetVersion = result.version
     } else {
-      targetVersion = release.match(/\((.*)\)/)[1]
+      targetVersion = release.match(/\((.*)\)/)?.[1] ?? ''
     }
   }
 
+  // @ts-expect-error
+  if (versionIncrements.includes(targetVersion)) {
+    // @ts-expect-error
+    targetVersion = inc(targetVersion)
+  }
+
   if (!semver.valid(targetVersion)) {
     throw new Error(`invalid target version: ${targetVersion}`)
   }
@@ -180,14 +242,14 @@ async function main() {
     step(
       isCanary
         ? `Releasing canary version v${targetVersion}...`
-        : `Releasing v${targetVersion}...`
+        : `Releasing v${targetVersion}...`,
     )
   } else {
-    // @ts-ignore
+    /** @type {{ yes: boolean }} */
     const { yes: confirmRelease } = await prompt({
       type: 'confirm',
       name: 'yes',
-      message: `Releasing v${targetVersion}. Confirm?`
+      message: `Releasing v${targetVersion}. Confirm?`,
     })
 
     if (!confirmRelease) {
@@ -195,62 +257,26 @@ async function main() {
     }
   }
 
-  if (!skipTests) {
-    step('Checking CI status for HEAD...')
-    let isCIPassed = await getCIResult()
-    skipTests ||= isCIPassed
-
-    if (isCIPassed && !skipPrompts) {
-      // @ts-ignore
-      const { yes: promptSkipTests } = await prompt({
-        type: 'confirm',
-        name: 'yes',
-        message: `CI for this commit passed. Skip local tests?`
-      })
-
-      skipTests = promptSkipTests
-    }
-  }
-
-  if (!skipTests) {
-    step('\nRunning tests...')
-    if (!isDryRun) {
-      await run('pnpm', ['test', 'run'])
-    } else {
-      console.log(`Skipped (dry run)`)
-    }
-  } else {
-    step('Tests skipped.')
-  }
+  await runTestsIfNeeded()
 
   // update all package versions and inter-dependencies
   step('\nUpdating cross dependencies...')
   updateVersions(
     targetVersion,
-    isCanary ? renamePackageToCanary : keepThePackageName
+    isCanary ? renamePackageToCanary : keepThePackageName,
   )
   versionUpdated = true
 
-  // build all packages with types
-  step('\nBuilding all packages...')
-  if (!skipBuild && !isDryRun) {
-    await run('pnpm', ['run', 'build', '--withTypes'])
-    step('\nTesting built types...')
-    await run('pnpm', ['test-dts-only'])
-  } else {
-    console.log(`(skipped)`)
-  }
-
   // generate changelog
   step('\nGenerating changelog...')
   await run(`pnpm`, ['run', 'changelog'])
 
   if (!skipPrompts) {
-    // @ts-ignore
+    /** @type {{ yes: boolean }} */
     const { yes: changelogOk } = await prompt({
       type: 'confirm',
       name: 'yes',
-      message: `Changelog generated. Does it look good?`
+      message: `Changelog generated. Does it look good?`,
     })
 
     if (!changelogOk) {
@@ -277,9 +303,9 @@ async function main() {
   }
 
   // publish packages
-  step('\nPublishing packages...')
-  for (const pkg of packages) {
-    await publishPackage(pkg, targetVersion)
+  if (args.publish) {
+    await buildPackages()
+    await publishPackages(targetVersion)
   }
 
   // push to GitHub
@@ -290,6 +316,15 @@ async function main() {
     await runIfNotDry('git', ['push'])
   }
 
+  if (!args.publish) {
+    console.log(
+      pico.yellow(
+        '\nRelease will be done via GitHub Actions.\n' +
+          'Check status at https://github.com/vuejs/core/actions/workflows/release.yml',
+      ),
+    )
+  }
+
   if (isDryRun) {
     console.log(`\nDry run finished - run git diff to see package changes.`)
   }
@@ -298,24 +333,65 @@ async function main() {
     console.log(
       pico.yellow(
         `The following packages are skipped and NOT published:\n- ${skippedPackages.join(
-          '\n- '
-        )}`
-      )
+          '\n- ',
+        )}`,
+      ),
     )
   }
   console.log()
 }
 
+async function runTestsIfNeeded() {
+  if (!skipTests) {
+    step('Checking CI status for HEAD...')
+    let isCIPassed = await getCIResult()
+    skipTests ||= isCIPassed
+
+    if (isCIPassed) {
+      if (!skipPrompts) {
+        /** @type {{ yes: boolean }} */
+        const { yes: promptSkipTests } = await prompt({
+          type: 'confirm',
+          name: 'yes',
+          message: `CI for this commit passed. Skip local tests?`,
+        })
+        skipTests = promptSkipTests
+      } else {
+        skipTests = true
+      }
+    } else if (skipPrompts) {
+      throw new Error(
+        'CI for the latest commit has not passed yet. ' +
+          'Only run the release workflow after the CI has passed.',
+      )
+    }
+  }
+
+  if (!skipTests) {
+    step('\nRunning tests...')
+    if (!isDryRun) {
+      await run('pnpm', ['run', 'test', '--run'])
+    } else {
+      console.log(`Skipped (dry run)`)
+    }
+  } else {
+    step('Tests skipped.')
+  }
+}
+
 async function getCIResult() {
   try {
-    const { stdout: sha } = await execa('git', ['rev-parse', 'HEAD'])
+    const sha = await getSha()
     const res = await fetch(
       `https://api.github.com/repos/vuejs/core/actions/runs?head_sha=${sha}` +
-        `&status=success&exclude_pull_requests=true`
+        `&status=success&exclude_pull_requests=true`,
     )
+    /** @type {{ workflow_runs: ({ name: string, conclusion: string })[] }} */
     const data = await res.json()
-    return data.workflow_runs.length > 0
-  } catch (e) {
+    return data.workflow_runs.some(({ name, conclusion }) => {
+      return name === 'ci' && conclusion === 'success'
+    })
+  } catch {
     console.error('Failed to get CI status for current commit.')
     return false
   }
@@ -323,48 +399,61 @@ async function getCIResult() {
 
 async function isInSyncWithRemote() {
   try {
-    const { stdout: sha } = await execa('git', ['rev-parse', 'HEAD'])
-    const { stdout: branch } = await execa('git', [
-      'rev-parse',
-      '--abbrev-ref',
-      'HEAD'
-    ])
+    const branch = await getBranch()
     const res = await fetch(
-      `https://api.github.com/repos/vuejs/core/commits/${branch}?per_page=1`
+      `https://api.github.com/repos/vuejs/core/commits/${branch}?per_page=1`,
     )
     const data = await res.json()
-    if (data.sha === sha) {
+    if (data.sha === (await getSha())) {
       return true
     } else {
-      // @ts-ignore
+      /** @type {{ yes: boolean }} */
       const { yes } = await prompt({
         type: 'confirm',
         name: 'yes',
         message: pico.red(
-          `Local HEAD is not up-to-date with remote. Are you sure you want to continue?`
-        )
+          `Local HEAD is not up-to-date with remote. Are you sure you want to continue?`,
+        ),
       })
       return yes
     }
-  } catch (e) {
+  } catch {
     console.error(
-      pico.red('Failed to check whether local HEAD is up-to-date with remote.')
+      pico.red('Failed to check whether local HEAD is up-to-date with remote.'),
     )
     return false
   }
 }
 
+async function getSha() {
+  return (await exec('git', ['rev-parse', 'HEAD'])).stdout
+}
+
+async function getBranch() {
+  return (await exec('git', ['rev-parse', '--abbrev-ref', 'HEAD'])).stdout
+}
+
+/**
+ * @param {string} version
+ * @param {(pkgName: string) => string} getNewPackageName
+ */
 function updateVersions(version, getNewPackageName = keepThePackageName) {
   // 1. update root package.json
   updatePackage(path.resolve(__dirname, '..'), version, getNewPackageName)
   // 2. update all packages
   packages.forEach(p =>
-    updatePackage(getPkgRoot(p), version, getNewPackageName)
+    updatePackage(getPkgRoot(p), version, getNewPackageName),
   )
 }
 
+/**
+ * @param {string} pkgRoot
+ * @param {string} version
+ * @param {(pkgName: string) => string} getNewPackageName
+ */
 function updatePackage(pkgRoot, version, getNewPackageName) {
   const pkgPath = path.resolve(pkgRoot, 'package.json')
+  /** @type {Package} */
   const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
   pkg.name = getNewPackageName(pkg.name)
   pkg.version = version
@@ -375,6 +464,12 @@ function updatePackage(pkgRoot, version, getNewPackageName) {
   fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
 }
 
+/**
+ * @param {Package} pkg
+ * @param {'dependencies' | 'peerDependencies'} depType
+ * @param {string} version
+ * @param {(pkgName: string) => string} getNewPackageName
+ */
 function updateDeps(pkg, depType, version, getNewPackageName) {
   const deps = pkg[depType]
   if (!deps) return
@@ -383,14 +478,54 @@ function updateDeps(pkg, depType, version, getNewPackageName) {
       const newName = getNewPackageName(dep)
       const newVersion = newName === dep ? version : `npm:${newName}@${version}`
       console.log(
-        pico.yellow(`${pkg.name} -> ${depType} -> ${dep}@${newVersion}`)
+        pico.yellow(`${pkg.name} -> ${depType} -> ${dep}@${newVersion}`),
       )
       deps[dep] = newVersion
     }
   })
 }
 
-async function publishPackage(pkgName, version) {
+async function buildPackages() {
+  step('\nBuilding all packages...')
+  if (!skipBuild) {
+    await run('pnpm', ['run', 'build', '--withTypes'])
+  } else {
+    console.log(`(skipped)`)
+  }
+}
+
+/**
+ * @param {string} version
+ */
+async function publishPackages(version) {
+  // publish packages
+  step('\nPublishing packages...')
+
+  const additionalPublishFlags = []
+  if (isDryRun) {
+    additionalPublishFlags.push('--dry-run')
+  }
+  if (isDryRun || skipGit || process.env.CI) {
+    additionalPublishFlags.push('--no-git-checks')
+  }
+  // add provenance metadata when releasing from CI
+  // canary release commits are not pushed therefore we don't need to add provenance
+  // also skip provenance if not publishing to actual npm
+  if (process.env.CI && !isCanary && !args.registry) {
+    additionalPublishFlags.push('--provenance')
+  }
+
+  for (const pkg of packages) {
+    await publishPackage(pkg, version, additionalPublishFlags)
+  }
+}
+
+/**
+ * @param {string} pkgName
+ * @param {string} version
+ * @param {ReadonlyArray<string>} additionalFlags
+ */
+async function publishPackage(pkgName, version, additionalFlags) {
   if (skippedPackages.includes(pkgName)) {
     return
   }
@@ -417,17 +552,17 @@ async function publishPackage(pkgName, version) {
         ...(releaseTag ? ['--tag', releaseTag] : []),
         '--access',
         'public',
-        ...(isDryRun ? ['--dry-run'] : []),
-        ...(skipGit ? ['--no-git-checks'] : [])
+        ...(args.registry ? ['--registry', args.registry] : []),
+        ...additionalFlags,
       ],
       {
         cwd: getPkgRoot(pkgName),
-        stdio: 'pipe'
-      }
+        stdio: 'pipe',
+      },
     )
     console.log(pico.green(`Successfully published ${pkgName}@${version}`))
-  } catch (e) {
-    if (e.stderr.match(/previously published/)) {
+  } catch (/** @type {any} */ e) {
+    if (e.message?.match(/previously published/)) {
       console.log(pico.red(`Skipping already published: ${pkgName}`))
     } else {
       throw e
@@ -435,7 +570,18 @@ async function publishPackage(pkgName, version) {
   }
 }
 
-main().catch(err => {
+async function publishOnly() {
+  const targetVersion = positionals[0]
+  if (targetVersion) {
+    updateVersions(targetVersion)
+  }
+  await buildPackages()
+  await publishPackages(currentVersion)
+}
+
+const fnToRun = args.publishOnly ? publishOnly : main
+
+fnToRun().catch(err => {
   if (versionUpdated) {
     // revert to current version on failed releases
     updateVersions(currentVersion)
diff --git a/scripts/setupVitest.ts b/scripts/setup-vitest.ts
similarity index 75%
rename from scripts/setupVitest.ts
rename to scripts/setup-vitest.ts
index cd1e672fd..08203572a 100644
--- a/scripts/setupVitest.ts
+++ b/scripts/setup-vitest.ts
@@ -1,13 +1,26 @@
-import { type SpyInstance } from 'vitest'
+import type { MockInstance } from 'vitest'
+
+declare module 'vitest' {
+  interface Assertion<T = any> extends CustomMatchers<T> {}
+  interface AsymmetricMatchersContaining extends CustomMatchers {}
+}
+
+interface CustomMatchers<R = unknown> {
+  toHaveBeenWarned(): R
+  toHaveBeenWarnedLast(): R
+  toHaveBeenWarnedTimes(n: number): R
+}
+
+vi.stubGlobal('MathMLElement', class MathMLElement {})
 
 expect.extend({
   toHaveBeenWarned(received: string) {
-    asserted.add(received)
     const passed = warn.mock.calls.some(args => args[0].includes(received))
     if (passed) {
+      asserted.add(received)
       return {
         pass: true,
-        message: () => `expected "${received}" not to have been warned.`
+        message: () => `expected "${received}" not to have been warned.`,
       }
     } else {
       const msgs = warn.mock.calls.map(args => args[0]).join('\n - ')
@@ -17,32 +30,31 @@ expect.extend({
           `expected "${received}" to have been warned` +
           (msgs.length
             ? `.\n\nActual messages:\n\n - ${msgs}`
-            : ` but no warning was recorded.`)
+            : ` but no warning was recorded.`),
       }
     }
   },
 
   toHaveBeenWarnedLast(received: string) {
-    asserted.add(received)
     const passed =
       warn.mock.calls[warn.mock.calls.length - 1][0].includes(received)
     if (passed) {
+      asserted.add(received)
       return {
         pass: true,
-        message: () => `expected "${received}" not to have been warned last.`
+        message: () => `expected "${received}" not to have been warned last.`,
       }
     } else {
       const msgs = warn.mock.calls.map(args => args[0]).join('\n - ')
       return {
         pass: false,
         message: () =>
-          `expected "${received}" to have been warned last.\n\nActual messages:\n\n - ${msgs}`
+          `expected "${received}" to have been warned last.\n\nActual messages:\n\n - ${msgs}`,
       }
     }
   },
 
   toHaveBeenWarnedTimes(received: string, n: number) {
-    asserted.add(received)
     let found = 0
     warn.mock.calls.forEach(args => {
       if (args[0].includes(received)) {
@@ -51,21 +63,22 @@ expect.extend({
     })
 
     if (found === n) {
+      asserted.add(received)
       return {
         pass: true,
-        message: () => `expected "${received}" to have been warned ${n} times.`
+        message: () => `expected "${received}" to have been warned ${n} times.`,
       }
     } else {
       return {
         pass: false,
         message: () =>
-          `expected "${received}" to have been warned ${n} times but got ${found}.`
+          `expected "${received}" to have been warned ${n} times but got ${found}.`,
       }
     }
-  }
+  },
 })
 
-let warn: SpyInstance
+let warn: MockInstance
 const asserted: Set<string> = new Set()
 
 beforeEach(() => {
@@ -87,8 +100,8 @@ afterEach(() => {
   if (nonAssertedWarnings.length) {
     throw new Error(
       `test case threw unexpected warnings:\n - ${nonAssertedWarnings.join(
-        '\n - '
-      )}`
+        '\n - ',
+      )}`,
     )
   }
 })
diff --git a/scripts/size-report.ts b/scripts/size-report.js
similarity index 56%
rename from scripts/size-report.ts
rename to scripts/size-report.js
index 56e4491a1..f92577d0d 100644
--- a/scripts/size-report.ts
+++ b/scripts/size-report.js
@@ -1,20 +1,24 @@
+// @ts-check
 import path from 'node:path'
 import { markdownTable } from 'markdown-table'
 import prettyBytes from 'pretty-bytes'
 import { readdir } from 'node:fs/promises'
 import { existsSync } from 'node:fs'
 
-interface SizeResult {
-  size: number
-  gzip: number
-  brotli: number
-}
+/**
+ * @typedef {Object} SizeResult
+ * @property {number} size
+ * @property {number} gzip
+ * @property {number} brotli
+ */
 
-interface BundleResult extends SizeResult {
-  file: string
-}
+/**
+ * @typedef {SizeResult & { file: string }} BundleResult
+ */
 
-type UsageResult = Record<string, SizeResult & { name: string }>
+/**
+ * @typedef {Record<string, SizeResult & { name: string }>} UsageResult
+ */
 
 const currDir = path.resolve('temp/size')
 const prevDir = path.resolve('temp/size-prev')
@@ -23,6 +27,9 @@ const sizeHeaders = ['Size', 'Gzip', 'Brotli']
 
 run()
 
+/**
+ * Runs the main process of rendering file and usage data
+ */
 async function run() {
   await renderFiles()
   await renderUsages()
@@ -30,32 +37,36 @@ async function run() {
   process.stdout.write(output)
 }
 
+/**
+ * Renders file sizes and diffs between current and previous versions
+ */
 async function renderFiles() {
-  const filterFiles = (files: string[]) =>
-    files.filter(file => !file.startsWith('_'))
+  const filterFiles = files =>
+    files.filter(file => file[0] !== '_' && !file.endsWith('.txt'))
 
   const curr = filterFiles(await readdir(currDir))
   const prev = existsSync(prevDir) ? filterFiles(await readdir(prevDir)) : []
   const fileList = new Set([...curr, ...prev])
 
-  const rows: string[][] = []
+  const rows = []
   for (const file of fileList) {
     const currPath = path.resolve(currDir, file)
     const prevPath = path.resolve(prevDir, file)
 
-    const curr = await importJSON<BundleResult>(currPath)
-    const prev = await importJSON<BundleResult>(prevPath)
+    const curr = await importJSON(currPath)
+    const prev = await importJSON(prevPath)
     const fileName = curr?.file || prev?.file || ''
 
     if (!curr) {
       rows.push([`~~${fileName}~~`])
-    } else
+    } else {
       rows.push([
         fileName,
         `${prettyBytes(curr.size)}${getDiff(curr.size, prev?.size)}`,
         `${prettyBytes(curr.gzip)}${getDiff(curr.gzip, prev?.gzip)}`,
-        `${prettyBytes(curr.brotli)}${getDiff(curr.brotli, prev?.brotli)}`
+        `${prettyBytes(curr.brotli)}${getDiff(curr.brotli, prev?.brotli)}`,
       ])
+    }
   }
 
   output += '### Bundles\n\n'
@@ -63,13 +74,13 @@ async function renderFiles() {
   output += '\n\n'
 }
 
+/**
+ * Renders usage data comparing current and previous usage results
+ */
 async function renderUsages() {
-  const curr = (await importJSON<UsageResult>(
-    path.resolve(currDir, '_usages.json')
-  ))!
-  const prev = await importJSON<UsageResult>(
-    path.resolve(prevDir, '_usages.json')
-  )
+  const curr = await importJSON(path.resolve(currDir, '_usages.json'))
+  const prev = await importJSON(path.resolve(prevDir, '_usages.json'))
+
   output += '\n### Usages\n\n'
 
   const data = Object.values(curr)
@@ -83,20 +94,34 @@ async function renderUsages() {
         usage.name,
         `${prettyBytes(usage.size)}${diffSize}`,
         `${prettyBytes(usage.gzip)}${diffGzipped}`,
-        `${prettyBytes(usage.brotli)}${diffBrotli}`
+        `${prettyBytes(usage.brotli)}${diffBrotli}`,
       ]
     })
-    .filter((usage): usage is string[] => !!usage)
+    .filter(usage => !!usage)
 
   output += `${markdownTable([['Name', ...sizeHeaders], ...data])}\n\n`
 }
 
-async function importJSON<T>(path: string): Promise<T | undefined> {
-  if (!existsSync(path)) return undefined
-  return (await import(path, { assert: { type: 'json' } })).default
+/**
+ * Imports JSON data from a specified path
+ *
+ * @template T
+ * @param {string} filePath - Path to the JSON file
+ * @returns {Promise<T | undefined>} The JSON content or undefined if the file does not exist
+ */
+async function importJSON(filePath) {
+  if (!existsSync(filePath)) return undefined
+  return (await import(filePath, { assert: { type: 'json' } })).default
 }
 
-function getDiff(curr: number, prev?: number) {
+/**
+ * Calculates the difference between the current and previous sizes
+ *
+ * @param {number} curr - The current size
+ * @param {number} [prev] - The previous size
+ * @returns {string} The difference in pretty format
+ */
+function getDiff(curr, prev) {
   if (prev === undefined) return ''
   const diff = curr - prev
   if (diff === 0) return ''
diff --git a/scripts/usage-size.js b/scripts/usage-size.js
new file mode 100644
index 000000000..c68e3703b
--- /dev/null
+++ b/scripts/usage-size.js
@@ -0,0 +1,146 @@
+// @ts-check
+import { mkdir, writeFile } from 'node:fs/promises'
+import path from 'node:path'
+import { rollup } from 'rollup'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import { minify } from '@swc/core'
+import replace from '@rollup/plugin-replace'
+import { brotliCompressSync, gzipSync } from 'node:zlib'
+import { parseArgs } from 'node:util'
+import pico from 'picocolors'
+import prettyBytes from 'pretty-bytes'
+
+const {
+  values: { write },
+} = parseArgs({
+  options: {
+    write: {
+      type: 'boolean',
+      default: false,
+    },
+  },
+})
+
+const sizeDir = path.resolve('temp/size')
+const entry = path.resolve('./packages/vue/dist/vue.runtime.esm-bundler.js')
+
+/**
+ * @typedef {Object} Preset
+ * @property {string} name - The name of the preset
+ * @property {string[]} imports - The imports that are part of this preset
+ * @property {Record<string, string>} [replace]
+ */
+
+/** @type {Preset[]} */
+const presets = [
+  {
+    name: 'createApp (CAPI only)',
+    imports: ['createApp'],
+    replace: { __VUE_OPTIONS_API__: 'false' },
+  },
+  { name: 'createApp', imports: ['createApp'] },
+  { name: 'createSSRApp', imports: ['createSSRApp'] },
+  { name: 'defineCustomElement', imports: ['defineCustomElement'] },
+  {
+    name: 'overall',
+    imports: [
+      'createApp',
+      'ref',
+      'watch',
+      'Transition',
+      'KeepAlive',
+      'Suspense',
+    ],
+  },
+]
+
+main()
+
+/**
+ * Main function that initiates the bundling process for the presets
+ */
+async function main() {
+  console.log()
+  /** @type {Promise<{name: string, size: number, gzip: number, brotli: number}>[]} */
+  const tasks = []
+  for (const preset of presets) {
+    tasks.push(generateBundle(preset))
+  }
+  const results = await Promise.all(tasks)
+
+  for (const r of results) {
+    console.log(
+      `${pico.green(pico.bold(r.name))} - ` +
+        `min:${prettyBytes(r.size, { minimumFractionDigits: 3 })} / ` +
+        `gzip:${prettyBytes(r.gzip, { minimumFractionDigits: 3 })} / ` +
+        `brotli:${prettyBytes(r.brotli, { minimumFractionDigits: 3 })}`,
+    )
+  }
+
+  await mkdir(sizeDir, { recursive: true })
+  await writeFile(
+    path.resolve(sizeDir, '_usages.json'),
+    JSON.stringify(Object.fromEntries(results.map(r => [r.name, r])), null, 2),
+    'utf-8',
+  )
+}
+
+/**
+ * Generates a bundle for a given preset
+ *
+ * @param {Preset} preset - The preset to generate the bundle for
+ * @returns {Promise<{name: string, size: number, gzip: number, brotli: number}>} - The result of the bundling process
+ */
+async function generateBundle(preset) {
+  const id = 'virtual:entry'
+  const content = `export { ${preset.imports.join(', ')} } from '${entry}'`
+
+  const result = await rollup({
+    input: id,
+    plugins: [
+      {
+        name: 'usage-size-plugin',
+        resolveId(_id) {
+          if (_id === id) return id
+          return null
+        },
+        load(_id) {
+          if (_id === id) return content
+        },
+      },
+      nodeResolve(),
+      replace({
+        'process.env.NODE_ENV': '"production"',
+        __VUE_PROD_DEVTOOLS__: 'false',
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+        __VUE_OPTIONS_API__: 'true',
+        preventAssignment: true,
+        ...preset.replace,
+      }),
+    ],
+  })
+
+  const generated = await result.generate({})
+  const bundled = generated.output[0].code
+  const minified = (
+    await minify(bundled, {
+      module: true,
+      toplevel: true,
+    })
+  ).code
+
+  const size = minified.length
+  const gzip = gzipSync(minified).length
+  const brotli = brotliCompressSync(minified).length
+
+  if (write) {
+    await writeFile(path.resolve(sizeDir, preset.name + '.js'), bundled)
+  }
+
+  return {
+    name: preset.name,
+    size,
+    gzip,
+    brotli,
+  }
+}
diff --git a/scripts/usage-size.ts b/scripts/usage-size.ts
deleted file mode 100644
index 1a1013b78..000000000
--- a/scripts/usage-size.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { mkdir, writeFile } from 'fs/promises'
-import path from 'node:path'
-import { rollup } from 'rollup'
-import nodeResolve from '@rollup/plugin-node-resolve'
-import { minify } from 'terser'
-import replace from '@rollup/plugin-replace'
-import { brotliCompressSync, gzipSync } from 'node:zlib'
-
-const sizeDir = path.resolve('temp/size')
-const entry = path.resolve('./packages/vue/dist/vue.runtime.esm-bundler.js')
-
-interface Preset {
-  name: string
-  imports: string[]
-}
-
-const presets: Preset[] = [
-  { name: 'createApp', imports: ['createApp'] },
-  { name: 'createSSRApp', imports: ['createSSRApp'] },
-  { name: 'defineCustomElement', imports: ['defineCustomElement'] },
-  {
-    name: 'overall',
-    imports: [
-      'createApp',
-      'ref',
-      'watch',
-      'Transition',
-      'KeepAlive',
-      'Suspense'
-    ]
-  }
-]
-
-main()
-
-async function main() {
-  const tasks: ReturnType<typeof generateBundle>[] = []
-  for (const preset of presets) {
-    tasks.push(generateBundle(preset))
-  }
-
-  const results = Object.fromEntries(
-    (await Promise.all(tasks)).map(r => [r.name, r])
-  )
-
-  await mkdir(sizeDir, { recursive: true })
-  await writeFile(
-    path.resolve(sizeDir, '_usages.json'),
-    JSON.stringify(results),
-    'utf-8'
-  )
-}
-
-async function generateBundle(preset: Preset) {
-  const id = 'virtual:entry'
-  const content = `export { ${preset.imports.join(', ')} } from '${entry}'`
-  const result = await rollup({
-    input: id,
-    plugins: [
-      {
-        name: 'usage-size-plugin',
-        resolveId(_id) {
-          if (_id === id) return id
-          return null
-        },
-        load(_id) {
-          if (_id === id) return content
-        }
-      },
-      nodeResolve(),
-      replace({
-        'process.env.NODE_ENV': '"production"',
-        __VUE_PROD_DEVTOOLS__: 'false',
-        __VUE_OPTIONS_API__: 'true',
-        preventAssignment: true
-      })
-    ]
-  })
-
-  const generated = await result.generate({})
-  const bundled = generated.output[0].code
-  const minified = (
-    await minify(bundled, {
-      module: true,
-      toplevel: true
-    })
-  ).code!
-
-  const size = minified.length
-  const gzip = gzipSync(minified).length
-  const brotli = brotliCompressSync(minified).length
-
-  return {
-    name: preset.name,
-    size,
-    gzip,
-    brotli
-  }
-}
diff --git a/scripts/utils.js b/scripts/utils.js
index 9429074d7..3c92bf7ba 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -2,21 +2,34 @@
 import fs from 'node:fs'
 import pico from 'picocolors'
 import { createRequire } from 'node:module'
+import { spawn } from 'node:child_process'
 
 const require = createRequire(import.meta.url)
 
-export const targets = fs.readdirSync('packages').filter(f => {
-  if (!fs.statSync(`packages/${f}`).isDirectory()) {
-    return false
-  }
-  const pkg = require(`../packages/${f}/package.json`)
-  if (pkg.private && !pkg.buildOptions) {
-    return false
-  }
-  return true
-})
+export const targets = fs
+  .readdirSync('packages')
+  .filter(f => {
+    if (
+      !fs.statSync(`packages/${f}`).isDirectory() ||
+      !fs.existsSync(`packages/${f}/package.json`)
+    ) {
+      return false
+    }
+    const pkg = require(`../packages/${f}/package.json`)
+    if (pkg.private && !pkg.buildOptions) {
+      return false
+    }
+    return true
+  })
+  .concat('template-explorer')
 
+/**
+ *
+ * @param {ReadonlyArray<string>} partialTargets
+ * @param {boolean | undefined} includeAllMatching
+ */
 export function fuzzyMatchTarget(partialTargets, includeAllMatching) {
+  /** @type {Array<string>} */
   const matched = []
   partialTargets.forEach(partialTarget => {
     for (const target of targets) {
@@ -34,11 +47,68 @@ export function fuzzyMatchTarget(partialTargets, includeAllMatching) {
     console.log()
     console.error(
       `  ${pico.white(pico.bgRed(' ERROR '))} ${pico.red(
-        `Target ${pico.underline(partialTargets)} not found!`
-      )}`
+        `Target ${pico.underline(partialTargets.toString())} not found!`,
+      )}`,
     )
     console.log()
 
     process.exit(1)
   }
 }
+
+/**
+ * @param {string} command
+ * @param {ReadonlyArray<string>} args
+ * @param {object} [options]
+ */
+export async function exec(command, args, options) {
+  return new Promise((resolve, reject) => {
+    const _process = spawn(command, args, {
+      stdio: [
+        'ignore', // stdin
+        'pipe', // stdout
+        'pipe', // stderr
+      ],
+      ...options,
+      shell: process.platform === 'win32',
+    })
+
+    /**
+     * @type {Buffer[]}
+     */
+    const stderrChunks = []
+    /**
+     * @type {Buffer[]}
+     */
+    const stdoutChunks = []
+
+    _process.stderr?.on('data', chunk => {
+      stderrChunks.push(chunk)
+    })
+
+    _process.stdout?.on('data', chunk => {
+      stdoutChunks.push(chunk)
+    })
+
+    _process.on('error', error => {
+      reject(error)
+    })
+
+    _process.on('exit', code => {
+      const ok = code === 0
+      const stderr = Buffer.concat(stderrChunks).toString().trim()
+      const stdout = Buffer.concat(stdoutChunks).toString().trim()
+
+      if (ok) {
+        const result = { ok, code, stderr, stdout }
+        resolve(result)
+      } else {
+        reject(
+          new Error(
+            `Failed to execute command: ${command} ${args.join(' ')}: ${stderr}`,
+          ),
+        )
+      }
+    })
+  })
+}
diff --git a/scripts/verifyCommit.js b/scripts/verify-commit.js
similarity index 76%
rename from scripts/verifyCommit.js
rename to scripts/verify-commit.js
index 62af7fd1c..d37370df0 100644
--- a/scripts/verifyCommit.js
+++ b/scripts/verify-commit.js
@@ -1,7 +1,7 @@
 // @ts-check
 import pico from 'picocolors'
-import { readFileSync } from 'fs'
-import path from 'path'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
 
 const msgPath = path.resolve('.git/COMMIT_EDITMSG')
 const msg = readFileSync(msgPath, 'utf-8').trim()
@@ -13,16 +13,16 @@ if (!commitRE.test(msg)) {
   console.log()
   console.error(
     `  ${pico.white(pico.bgRed(' ERROR '))} ${pico.red(
-      `invalid commit message format.`
+      `invalid commit message format.`,
     )}\n\n` +
       pico.red(
-        `  Proper commit message format is required for automated changelog generation. Examples:\n\n`
+        `  Proper commit message format is required for automated changelog generation. Examples:\n\n`,
       ) +
       `    ${pico.green(`feat(compiler): add 'comments' option`)}\n` +
       `    ${pico.green(
-        `fix(v-model): handle events on blur (close #28)`
+        `fix(v-model): handle events on blur (close #28)`,
       )}\n\n` +
-      pico.red(`  See .github/commit-convention.md for more details.\n`)
+      pico.red(`  See .github/commit-convention.md for more details.\n`),
   )
   process.exit(1)
 }
diff --git a/scripts/verify-treeshaking.js b/scripts/verify-treeshaking.js
new file mode 100644
index 000000000..7cb76cdac
--- /dev/null
+++ b/scripts/verify-treeshaking.js
@@ -0,0 +1,49 @@
+// @ts-check
+import fs from 'node:fs'
+import { exec } from './utils.js'
+
+exec('pnpm', ['build', 'vue', '-f', 'global-runtime']).then(() => {
+  const errors = []
+
+  const devBuild = fs.readFileSync(
+    'packages/vue/dist/vue.runtime.global.js',
+    'utf-8',
+  )
+
+  if (devBuild.includes('__spreadValues')) {
+    errors.push(
+      'dev build contains unexpected esbuild object spread helper.\n' +
+        'This means { ...obj } syntax is used in runtime code. This should be ' +
+        'refactored to use the `extend` helper to avoid the extra code.',
+    )
+  }
+
+  const prodBuild = fs.readFileSync(
+    'packages/vue/dist/vue.runtime.global.prod.js',
+    'utf-8',
+  )
+
+  if (prodBuild.includes('Vue warn')) {
+    errors.push(
+      'prod build contains unexpected warning-related code.\n' +
+        'This means there are calls of warn() that are not guarded by the __DEV__ condition.',
+    )
+  }
+
+  if (
+    prodBuild.includes('html,body,base') ||
+    prodBuild.includes('svg,animate,animateMotion') ||
+    prodBuild.includes('annotation,annotation-xml,maction')
+  ) {
+    errors.push(
+      'prod build contains unexpected domTagConifg lists.\n' +
+        'This means helpers like isHTMLTag() is used in runtime code paths when it should be compiler-only.',
+    )
+  }
+
+  if (errors.length) {
+    throw new Error(
+      `Found the following treeshaking errors:\n\n- ${errors.join('\n\n- ')}`,
+    )
+  }
+})
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 954103c0f..fc36b251d 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1,15 +1,25 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "types": ["node"],
     "declaration": true,
     "emitDeclarationOnly": true,
-    "stripInternal": true
+    "stripInternal": true,
+    "composite": false
   },
-  "exclude": [
-    "packages/*/__tests__",
-    "packages/runtime-test",
-    "packages/template-explorer",
-    "packages/sfc-playground",
-    "packages/dts-test"
+  "include": [
+    "packages/global.d.ts",
+    "packages/vue/src",
+    "packages/vue-compat/src",
+    "packages/compiler-core/src",
+    "packages/compiler-dom/src",
+    "packages/runtime-core/src",
+    "packages/runtime-dom/src",
+    "packages/reactivity/src",
+    "packages/shared/src",
+    "packages/global.d.ts",
+    "packages/compiler-sfc/src",
+    "packages/compiler-ssr/src",
+    "packages/server-renderer/src"
   ]
 }
diff --git a/tsconfig.json b/tsconfig.json
index 5d7789b08..9896083cf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,22 +18,25 @@
     "esModuleInterop": true,
     "removeComments": false,
     "jsx": "preserve",
-    "lib": ["esnext", "dom"],
+    "lib": ["es2016", "dom"],
     "types": ["vitest/globals", "puppeteer", "node"],
     "rootDir": ".",
     "paths": {
       "@vue/compat": ["packages/vue-compat/src"],
       "@vue/*": ["packages/*/src"],
       "vue": ["packages/vue/src"]
-    }
+    },
+    "isolatedDeclarations": true,
+    "composite": true
   },
   "include": [
     "packages/global.d.ts",
     "packages/*/src",
-    "packages/runtime-dom/types/jsx.d.ts",
     "packages/*/__tests__",
-    "packages/dts-test",
     "packages/vue/jsx-runtime",
-    "scripts/setupVitest.ts"
-  ]
+    "packages/runtime-dom/types/jsx.d.ts",
+    "scripts/*",
+    "rollup.*.js"
+  ],
+  "exclude": ["packages-private/sfc-playground/src/vue-dev-proxy*"]
 }
diff --git a/vitest.config.ts b/vitest.config.ts
index e5d5f5934..67db1d850 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,4 +1,4 @@
-import { configDefaults, defineConfig, UserConfig } from 'vitest/config'
+import { configDefaults, defineConfig } from 'vitest/config'
 import { entries } from './scripts/aliases.js'
 
 export default defineConfig({
@@ -10,37 +10,44 @@ export default defineConfig({
     __GLOBAL__: false,
     __ESM_BUNDLER__: true,
     __ESM_BROWSER__: false,
-    __NODE_JS__: true,
+    __CJS__: true,
     __SSR__: true,
     __FEATURE_OPTIONS_API__: true,
     __FEATURE_SUSPENSE__: true,
     __FEATURE_PROD_DEVTOOLS__: false,
-    __COMPAT__: true
+    __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+    __COMPAT__: true,
   },
   resolve: {
-    alias: entries
+    alias: entries,
   },
   test: {
     globals: true,
-    // disable threads on GH actions to speed it up
-    threads: !process.env.GITHUB_ACTIONS,
-    setupFiles: 'scripts/setupVitest.ts',
+    pool: 'threads',
+    setupFiles: 'scripts/setup-vitest.ts',
     environmentMatchGlobs: [
-      ['packages/{vue,vue-compat,runtime-dom}/**', 'jsdom']
+      ['packages/{vue,vue-compat,runtime-dom}/**', 'jsdom'],
     ],
     sequence: {
-      hooks: 'list'
+      hooks: 'list',
     },
     coverage: {
-      provider: 'istanbul',
+      provider: 'v8',
       reporter: ['text', 'html'],
+      include: ['packages/*/src/**'],
       exclude: [
-        ...configDefaults.coverage.exclude!,
-        // DOM transitions are tested via e2e so no coverage is collected
+        // entries that are not really used during tests
+        'packages/vue-compat/**',
+        'packages/vue/src/dev.ts',
+        'packages/vue/src/runtime.ts',
+        // not testable during unit tests
+        'packages/runtime-core/src/profiling.ts',
+        'packages/runtime-core/src/featureFlags.ts',
+        'packages/runtime-core/src/customFormatter.ts',
+        // tested via e2e so no coverage is collected
+        'packages/runtime-core/src/hydrationStrategies.ts',
         'packages/runtime-dom/src/components/Transition*',
-        // mostly entries
-        'packages/vue-compat/**'
-      ]
-    }
-  }
-}) as UserConfig
+      ],
+    },
+  },
+})
diff --git a/vitest.e2e.config.ts b/vitest.e2e.config.ts
index a75631d58..622bda0bd 100644
--- a/vitest.e2e.config.ts
+++ b/vitest.e2e.config.ts
@@ -3,6 +3,12 @@ import config from './vitest.config'
 
 export default mergeConfig(config, {
   test: {
-    include: ['packages/vue/__tests__/e2e/*.spec.ts']
-  }
+    name: 'e2e',
+    poolOptions: {
+      threads: {
+        singleThread: !!process.env.CI,
+      },
+    },
+    include: ['packages/vue/__tests__/e2e/*.spec.ts'],
+  },
 })
diff --git a/vitest.unit.config.ts b/vitest.unit.config.ts
index 60648540c..0082997e0 100644
--- a/vitest.unit.config.ts
+++ b/vitest.unit.config.ts
@@ -3,6 +3,7 @@ import config from './vitest.config'
 
 export default mergeConfig(config, {
   test: {
-    exclude: [...configDefaults.exclude, '**/e2e/**']
-  }
+    name: 'unit',
+    exclude: [...configDefaults.exclude, '**/e2e/**'],
+  },
 })
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
new file mode 100644
index 000000000..a20586e7c
--- /dev/null
+++ b/vitest.workspace.ts
@@ -0,0 +1,6 @@
+import { defineWorkspace } from 'vitest/config'
+
+export default defineWorkspace([
+  './vitest.unit.config.ts',
+  './vitest.e2e.config.ts',
+])