diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 4d4f41e301f..00000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules
-dist
-temp
-coverage
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index 65653f40da2..00000000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,130 +0,0 @@
-const { builtinModules } = require('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.',
-}
-
-/**
- * @type {import('eslint-define-config').ESLintConfig}
- */
-module.exports = {
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    sourceType: 'module',
-  },
-  plugins: ['jest', 'import', '@typescript-eslint'],
-  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,
-      // 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',
-    ],
-    'sort-imports': ['error', { ignoreDeclarationSort: true }],
-
-    'import/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',
-  },
-  overrides: [
-    // tests, no restrictions (runs in Node / jest with jsdom)
-    {
-      files: ['**/__tests__/**', 'packages/dts-test/**'],
-      rules: {
-        'no-console': 'off',
-        '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/**', '.eslintrc.cjs'],
-      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/template-explorer/**', 'packages/sfc-playground/**'],
-      rules: {
-        'no-restricted-globals': ['error', ...NodeGlobals],
-        'no-restricted-syntax': ['error', banConstEnum],
-        'no-console': '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/*/*.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/no-nodejs-modules': ['error', { allow: builtinModules }],
-      },
-    },
-  ],
-}
diff --git a/.github/commit-convention.md b/.github/commit-convention.md
index a8522fa210a..11a64576a24 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 da1bd5ec453..2554582b887 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,7 +81,7 @@ 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 [@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.
 
@@ -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 8d4317c6b01..b1fb550dd7a 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 a43f4ae30cf..aad4afa132a 100644
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -1,40 +1,49 @@
 {
   $schema: 'https://docs.renovatebot.com/renovate-schema.json',
-  extends: ['config:base', 'schedule:weekly', 'group:allNonMajor'],
+  extends: ['config:recommended', 'schedule:weekly', 'group:allNonMajor'],
   labels: ['dependencies'],
   ignorePaths: ['**/__tests__/**'],
   rangeStrategy: 'bump',
   packageRules: [
     {
-      depTypeList: ['peerDependencies'],
+      matchDepTypes: ['peerDependencies'],
       enabled: false,
     },
     {
       groupName: 'test',
-      matchPackageNames: ['vitest', 'jsdom', 'puppeteer'],
-      matchPackagePrefixes: ['@vitest'],
+      matchPackageNames: ['vitest', 'jsdom', 'puppeteer', '@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'],
+      matchPackageNames: ['magic-string', '@babel{/,}**', 'postcss{/,}**'],
     },
     {
       groupName: 'build',
-      matchPackageNames: ['vite', 'terser'],
-      matchPackagePrefixes: ['rollup', 'esbuild', '@rollup', '@vitejs'],
+      matchPackageNames: [
+        'vite',
+        '@swc/core',
+        'rollup{/,}**',
+        'esbuild{/,}**',
+        '@rollup{/,}**',
+        '@vitejs{/,}**',
+      ],
     },
     {
       groupName: 'lint',
-      matchPackageNames: ['simple-git-hooks', 'lint-staged'],
-      matchPackagePrefixes: ['@typescript-eslint', 'eslint', 'prettier'],
+      matchPackageNames: [
+        'simple-git-hooks',
+        'lint-staged',
+        'typescript-eslint{/,}**',
+        'eslint{/,}**',
+        'prettier{/,}**',
+      ],
     },
   ],
   ignoreDeps: [
@@ -46,5 +55,21 @@
 
     // ESM only
     '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 d7f11b0d220..95bc65f357b 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.1.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@ea32e3a12414e6d3183163c3424a7d7a8631ad84
+      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27
diff --git a/.github/workflows/canary-minor.yml b/.github/workflows/canary-minor.yml
index 27fbd42c90c..0b6401b8ce4 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.1.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 61490232f66..71c794c7078 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.1.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 b80b142a3a2..c8c217f62c4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -3,140 +3,40 @@ on:
   push:
     branches:
       - '**'
+    tags:
+      - '!**'
   pull_request:
     branches:
       - main
-
-permissions:
-  contents: read # to fetch code (actions/checkout)
+      - minor
 
 jobs:
-  unit-test:
-    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 unit tests
-        run: pnpm run test-unit
-
-  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
+  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
 
-      - 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@v4
-        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
-
-      - name: verify treeshaking
-        run: node scripts/verify-treeshaking.js
-
-  lint-and-test-dts:
+  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: Run eslint
-        run: pnpm run lint
-
-      - name: Run prettier
-        run: pnpm run format-check
-
-      - name: Run type declaration tests
-        run: pnpm run test-dts
-
-  # benchmarks:
-  #   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'
+      - name: Install deps
+        run: pnpm install
 
-  #     - run: pnpm install
+      - name: Build
+        run: pnpm build --withTypes
 
-  #     - name: Run benchmarks
-  #       uses: CodSpeedHQ/action@v2
-  #       with:
-  #         run: pnpm vitest bench --run
-  #         token: ${{ secrets.CODSPEED_TOKEN }}
+      - 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 00000000000..8fb48f842d8
--- /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 25adf7c85f4..b3e963ececa 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 16c6c9c5c10..00000000000
--- 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 00000000000..c260a728e71
--- /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 42d4aa52f93..5a370b8b92f 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.1.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@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@v4
-        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 b6f1f4728ba..66b5ad0ef29 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.1.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@v3
+      - name: Download Size Data
+        uses: dawidd6/action-download-artifact@v9
         with:
-          name: pr-number
+          name: size-data
           run_id: ${{ github.event.workflow_run.id }}
+          path: temp/size
 
       - name: Read PR Number
         id: pr-number
         uses: juliangruber/read-file-action@v1
         with:
-          path: ./pr.txt
+          path: temp/size/number.txt
 
-      - name: Download Size Data
-        uses: dawidd6/action-download-artifact@v3
+      - name: Read base branch
+        id: pr-base
+        uses: juliangruber/read-file-action@v1
         with:
-          name: size-data
-          run_id: ${{ github.event.workflow_run.id }}
-          path: temp/size
+          path: temp/size/base.txt
 
       - name: Download Previous Size Data
-        uses: dawidd6/action-download-artifact@v3
+        uses: dawidd6/action-download-artifact@v9
         with:
-          branch: main
+          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 00000000000..1122eb35573
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,111 @@
+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.1.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.1.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.1.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.1.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 tsc
+        run: pnpm run check
+
+      - name: Run type declaration tests
+        run: pnpm run test-dts
diff --git a/.gitignore b/.gitignore
index 810f8852690..9dd21f59bf6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ TODOs.md
 .eslintcache
 dts-build/packages
 *.tsbuildinfo
+*.tgz
diff --git a/.node-version b/.node-version
index 209e3ef4b62..7d41c735d71 100644
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
-20
+22.14.0
diff --git a/.prettierignore b/.prettierignore
index fbd3dca8ca3..ca3c40849fd 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,3 @@
 dist
-*.md
-*.html
 pnpm-lock.yaml
+CHANGELOG*.md
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000000..91ebd56925c
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["vitest.explorer"]
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
index b616400b48e..9fc03aa9bc4 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/.vscode/settings.json b/.vscode/settings.json
index 1dcc2819c28..302428290b9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,5 +13,6 @@
   },
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "editor.formatOnSave": true
 }
diff --git a/.well-known/funding-manifest-urls b/.well-known/funding-manifest-urls
new file mode 100644
index 00000000000..f26079d4138
--- /dev/null
+++ b/.well-known/funding-manifest-urls
@@ -0,0 +1 @@
+https://vuejs.org/funding.json
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2a7d0a861a..2a0b96332b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,658 +1,623 @@
-## [3.4.18](https://github.com/vuejs/core/compare/v3.4.17...v3.4.18) (2024-02-09)
+## [3.5.18](https://github.com/vuejs/core/compare/v3.5.17...v3.5.18) (2025-07-23)
 
 
 ### 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)
+* **compiler-core:** avoid cached text vnodes retaining detached DOM nodes ([#13662](https://github.com/vuejs/core/issues/13662)) ([00695a5](https://github.com/vuejs/core/commit/00695a5b41b2d032deaeada83831ff83aa6bfd4e)), closes [#13661](https://github.com/vuejs/core/issues/13661)
+* **compiler-core:** avoid self updates of `v-pre` ([#12556](https://github.com/vuejs/core/issues/12556)) ([21b685a](https://github.com/vuejs/core/commit/21b685ad9d9d0e6060fc7d07b719bf35f2d9ae1f))
+* **compiler-core:** identifiers in function parameters should not be inferred as references ([#13548](https://github.com/vuejs/core/issues/13548)) ([9b02923](https://github.com/vuejs/core/commit/9b029239edf88558465b941e1e4c085f92b1ebff))
+* **compiler-core:** recognize empty string as non-identifier ([#12553](https://github.com/vuejs/core/issues/12553)) ([ce93339](https://github.com/vuejs/core/commit/ce933390ad1c72bed258f7ad959a78f0e8acdf57))
+* **compiler-core:** transform empty `v-bind` dynamic argument content correctly ([#12554](https://github.com/vuejs/core/issues/12554)) ([d3af67e](https://github.com/vuejs/core/commit/d3af67e878790892f9d34cfea15d13625aabe733))
+* **compiler-sfc:** transform empty srcset w/ includeAbsolute: true ([#13639](https://github.com/vuejs/core/issues/13639)) ([d8e40ef](https://github.com/vuejs/core/commit/d8e40ef7e1c20ee86b294e7cf78e2de60d12830e)), closes [vitejs/vite-plugin-vue#631](https://github.com/vitejs/vite-plugin-vue/issues/631)
+* **css-vars:** nullish v-bind in style should not lead to unexpected inheritance ([#12461](https://github.com/vuejs/core/issues/12461)) ([c85f1b5](https://github.com/vuejs/core/commit/c85f1b5a132eb8ec25f71b250e25e65a5c20964f)), closes [#12434](https://github.com/vuejs/core/issues/12434) [#12439](https://github.com/vuejs/core/issues/12439) [#7474](https://github.com/vuejs/core/issues/7474) [#7475](https://github.com/vuejs/core/issues/7475)
+* **custom-element:** ensure exposed methods are accessible from custom elements by making them enumerable ([#13634](https://github.com/vuejs/core/issues/13634)) ([90573b0](https://github.com/vuejs/core/commit/90573b06bf6fb6c14c6bbff6c4e34e0ab108953a)), closes [#13632](https://github.com/vuejs/core/issues/13632)
+* **hydration:** prevent lazy hydration for updated components ([#13511](https://github.com/vuejs/core/issues/13511)) ([a9269c6](https://github.com/vuejs/core/commit/a9269c642bf944560bc29adb5dae471c11cd9ee8)), closes [#13510](https://github.com/vuejs/core/issues/13510)
+* **runtime-core:** ensure correct anchor el for unresolved async components ([#13560](https://github.com/vuejs/core/issues/13560)) ([7f29943](https://github.com/vuejs/core/commit/7f2994393dcdb82cacbf62e02b5ba5565f32588b)), closes [#13559](https://github.com/vuejs/core/issues/13559)
+* **slots:** refine internal key checking to support slot names starting with an underscore ([#13612](https://github.com/vuejs/core/issues/13612)) ([c5f7db1](https://github.com/vuejs/core/commit/c5f7db11542bb2246363aef78c88a8e6cef0ee93)), closes [#13611](https://github.com/vuejs/core/issues/13611)
+* **ssr:** ensure empty slots render as a comment node in Transition ([#13396](https://github.com/vuejs/core/issues/13396)) ([8cfc10a](https://github.com/vuejs/core/commit/8cfc10a80b9cbf5d801ab149e49b8506d192e7e1)), closes [#13394](https://github.com/vuejs/core/issues/13394)
 
 
 
-## [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)
+## [3.5.17](https://github.com/vuejs/core/compare/v3.5.16...v3.5.17) (2025-06-18)
 
 
 ### 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)
+* **compat:** allow v-model built in modifiers on component ([#12654](https://github.com/vuejs/core/issues/12654)) ([cb14b86](https://github.com/vuejs/core/commit/cb14b860f150c4a83bcd52cd26096b7a5aa3a2bf)), closes [#12652](https://github.com/vuejs/core/issues/12652)
+* **compile-sfc:** handle mapped types work with omit and pick ([#12648](https://github.com/vuejs/core/issues/12648)) ([4eb46e4](https://github.com/vuejs/core/commit/4eb46e443f1878199755cb73d481d318a9714392)), closes [#12647](https://github.com/vuejs/core/issues/12647)
+* **compiler-core:** do not increase newlines in `InEntity` state ([#13362](https://github.com/vuejs/core/issues/13362)) ([f05a8d6](https://github.com/vuejs/core/commit/f05a8d613bd873b811cfdb9979ccac8382dba322))
+* **compiler-core:** ignore whitespace when matching adjacent v-if ([#12321](https://github.com/vuejs/core/issues/12321)) ([10ebcef](https://github.com/vuejs/core/commit/10ebcef8c870dbc042b0ea49b1424b2e8f692145)), closes [#9173](https://github.com/vuejs/core/issues/9173)
+* **compiler-core:** prevent comments from blocking static node hoisting  ([#13345](https://github.com/vuejs/core/issues/13345)) ([55dad62](https://github.com/vuejs/core/commit/55dad625acd9e9ddd5a933d5e323ecfdec1a612f)), closes [#13344](https://github.com/vuejs/core/issues/13344)
+* **compiler-sfc:** improved type resolution for function type aliases ([#13452](https://github.com/vuejs/core/issues/13452)) ([f3479aa](https://github.com/vuejs/core/commit/f3479aac9625f4459e650d1c0a70e73863147903)), closes [#13444](https://github.com/vuejs/core/issues/13444)
+* **custom-element:** ensure configureApp is applied to async component ([#12607](https://github.com/vuejs/core/issues/12607)) ([5ba1afb](https://github.com/vuejs/core/commit/5ba1afba09c3ea56c1c17484f5d8aeae210ce52a)), closes [#12448](https://github.com/vuejs/core/issues/12448)
+* **custom-element:** prevent injecting child styles if shadowRoot is false ([#12769](https://github.com/vuejs/core/issues/12769)) ([73055d8](https://github.com/vuejs/core/commit/73055d8d9578d485e3fe846726b50666e1aa56f5)), closes [#12630](https://github.com/vuejs/core/issues/12630)
+* **reactivity:** add `__v_skip` flag to `Dep` to prevent reactive conversion ([#12804](https://github.com/vuejs/core/issues/12804)) ([e8d8f5f](https://github.com/vuejs/core/commit/e8d8f5f604e821acc46b4200d5b06979c05af1c2)), closes [#12803](https://github.com/vuejs/core/issues/12803)
+* **runtime-core:** unset old ref during patching when new ref is absent ([#12900](https://github.com/vuejs/core/issues/12900)) ([47ddf98](https://github.com/vuejs/core/commit/47ddf986021dff8de68b0da72787e53a6c19de4c)), closes [#12898](https://github.com/vuejs/core/issues/12898)
+* **slots:** make cache indexes marker non-enumerable ([#13469](https://github.com/vuejs/core/issues/13469)) ([919c447](https://github.com/vuejs/core/commit/919c44744bba1f0c661c87d2059c3b429611aa7e)), closes [#13468](https://github.com/vuejs/core/issues/13468)
+* **ssr:** handle initial selected state for select with v-model + v-for/v-if option ([#13487](https://github.com/vuejs/core/issues/13487)) ([1552095](https://github.com/vuejs/core/commit/15520954f9f1c7f834175938a50dba5d4be0e6c4)), closes [#13486](https://github.com/vuejs/core/issues/13486)
+* **types:** typo of `vOnce` and `vSlot` ([#13343](https://github.com/vuejs/core/issues/13343)) ([762fae4](https://github.com/vuejs/core/commit/762fae4b57ad60602e5c84465a3bff562785b314))
 
 
 
-## [3.4.15](https://github.com/vuejs/core/compare/v3.4.14...v3.4.15) (2024-01-18)
+## [3.5.16](https://github.com/vuejs/core/compare/v3.5.15...v3.5.16) (2025-05-29)
 
 
-### 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
+### Reverts
 
-* **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)
+* Revert "fix(compiler-sfc): add scoping tag to trailing universal selector" (#13406) ([19f23b1](https://github.com/vuejs/core/commit/19f23b180bb679e38db95d6a10a420abeedc8e1c)), closes [#13406](https://github.com/vuejs/core/issues/13406)
+* Revert "fix(compiler-sfc): add error handling for defineModel() without variable" (#13390) ([42f879f](https://github.com/vuejs/core/commit/42f879fcab48e0e1011967a771b4ad9e8838d760)), closes [#13390](https://github.com/vuejs/core/issues/13390)
 
 
 
-## [3.4.14](https://github.com/vuejs/core/compare/v3.4.13...v3.4.14) (2024-01-15)
+## [3.5.15](https://github.com/vuejs/core/compare/v3.5.14...v3.5.15) (2025-05-26)
 
 
 ### 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)
+* **compat:** ensure false value on input retains value attribute ([#13216](https://github.com/vuejs/core/issues/13216)) ([1a66474](https://github.com/vuejs/core/commit/1a664749d4d65a345589a6d78106ede7574cb2e1)), closes [#13205](https://github.com/vuejs/core/issues/13205)
+* **compat:** should not warn COMPILER_V_BIND_OBJECT_ORDER when using v-bind together with v-for ([#12993](https://github.com/vuejs/core/issues/12993)) ([93949e6](https://github.com/vuejs/core/commit/93949e6587ee019bccd5b8b9d76f0e1ed6ea16fc)), closes [#12992](https://github.com/vuejs/core/issues/12992)
+* **compile-sfc:** handle inline template source map in prod build ([#12701](https://github.com/vuejs/core/issues/12701)) ([89edc6c](https://github.com/vuejs/core/commit/89edc6cdcbd34ea6394927ecbfaa61dc4f871de7)), closes [#12682](https://github.com/vuejs/core/issues/12682) [vitejs/vite-plugin-vue#500](https://github.com/vitejs/vite-plugin-vue/issues/500)
+* **compiler-core:** ensure mapping is added only if node source is available ([#13285](https://github.com/vuejs/core/issues/13285)) ([d37a2ac](https://github.com/vuejs/core/commit/d37a2ac59d904ac0e3257ba552b6c04920a363f0)), closes [#13261](https://github.com/vuejs/core/issues/13261) [vitejs/vite-plugin-vue#368](https://github.com/vitejs/vite-plugin-vue/issues/368)
+* **compiler-dom:** improve HTML nesting validation to allow any child element within template tag ([#13320](https://github.com/vuejs/core/issues/13320)) ([163b365](https://github.com/vuejs/core/commit/163b3651d174321911648a164052effa9249a2aa)), closes [#13318](https://github.com/vuejs/core/issues/13318)
+* **compiler-sfc:** add error handling for defineModel() without variable assignment ([#13352](https://github.com/vuejs/core/issues/13352)) ([00734af](https://github.com/vuejs/core/commit/00734afef5f7bddbdaee52aa5359a6ef989f32d3)), closes [#13280](https://github.com/vuejs/core/issues/13280)
+* **compiler-sfc:** add scoping tag to trailing universal selector ([#12918](https://github.com/vuejs/core/issues/12918)) ([949df80](https://github.com/vuejs/core/commit/949df808809fd7cccf7718797beab0654aa68302)), closes [#12906](https://github.com/vuejs/core/issues/12906)
+* **compiler-sfc:** improve type inference for TSTypeAliasDeclaration with better runtime type detection ([#13245](https://github.com/vuejs/core/issues/13245)) ([cf5a5e0](https://github.com/vuejs/core/commit/cf5a5e0edf0efcab25c27aa2d13eba91f7372d39)), closes [#13240](https://github.com/vuejs/core/issues/13240)
+* **compiler-sfc:** simulate `allowArbitraryExtensions` on resolving type ([#13301](https://github.com/vuejs/core/issues/13301)) ([f7ce5ae](https://github.com/vuejs/core/commit/f7ce5ae666129339c006b339437c2dff6bceffe0)), closes [#13295](https://github.com/vuejs/core/issues/13295)
+* **custom-element:** allow injecting values ​​from app context in nested elements ([#13219](https://github.com/vuejs/core/issues/13219)) ([b991075](https://github.com/vuejs/core/commit/b9910755a50c7d6c52b28c3aef20cf97810295c9)), closes [#13212](https://github.com/vuejs/core/issues/13212)
+* **custom-element:** ensure proper remount and prevent redundant slot parsing with shadowRoot false ([#13201](https://github.com/vuejs/core/issues/13201)) ([1d41d4d](https://github.com/vuejs/core/commit/1d41d4de7f64a37160c8171d0137fd8d35c346c9)), closes [#13199](https://github.com/vuejs/core/issues/13199)
+* **custom-element:** preserve appContext during update ([#12455](https://github.com/vuejs/core/issues/12455)) ([013749e](https://github.com/vuejs/core/commit/013749e75ef3b51762a86da379ea4ba4501b54ae)), closes [#12453](https://github.com/vuejs/core/issues/12453)
+* **custom-element:** properly resolve props for sync component defs ([#12855](https://github.com/vuejs/core/issues/12855)) ([a683c80](https://github.com/vuejs/core/commit/a683c80cf44ecc482f8ac9c76bf2381443c1b0bb)), closes [#12854](https://github.com/vuejs/core/issues/12854)
+* **hydration:** handle transition appear hydration edge case ([#13339](https://github.com/vuejs/core/issues/13339)) ([35aeae7](https://github.com/vuejs/core/commit/35aeae7fa3168adcf9ed95fd35495d17c8b93eeb)), closes [#13335](https://github.com/vuejs/core/issues/13335)
+* **hydration:** skip lazy hydration for patched components ([#13283](https://github.com/vuejs/core/issues/13283)) ([80055fd](https://github.com/vuejs/core/commit/80055fddfb3ca1e2a44f19c7f0ffaeba00de5140)), closes [#13255](https://github.com/vuejs/core/issues/13255)
+* **suspense:** handle edge case in patching list nodes within Suspense ([#13306](https://github.com/vuejs/core/issues/13306)) ([772b008](https://github.com/vuejs/core/commit/772b0087cb7be151c514a1d30365fb0f61a652ba)), closes [#13305](https://github.com/vuejs/core/issues/13305)
+* **teleport:** handle deferred teleport updates before and after mount ([#13350](https://github.com/vuejs/core/issues/13350)) ([d15dce3](https://github.com/vuejs/core/commit/d15dce3142474f2ef9fffed38383acdadcb26c4c)), closes [#13349](https://github.com/vuejs/core/issues/13349)
+* **types:** avoid merging component instance into `$props` in `ComponentInstance` ([#12870](https://github.com/vuejs/core/issues/12870)) ([f44feed](https://github.com/vuejs/core/commit/f44feed6fa461a9c4c724e9631c19e9e214c0a20)), closes [#12751](https://github.com/vuejs/core/issues/12751)
+* **types:** exclude `undefined` from inferred prop types with default values ([#13007](https://github.com/vuejs/core/issues/13007)) ([5179d32](https://github.com/vuejs/core/commit/5179d328d950015e7fb2a74fe1a8518fd8d2c94e)), closes [#13006](https://github.com/vuejs/core/issues/13006)
+* **watch:** update `oldValue` before running `cb` to prevent stale value ([#12296](https://github.com/vuejs/core/issues/12296)) ([c69c4bb](https://github.com/vuejs/core/commit/c69c4bb59c114f2b5e03733b55ef9ace3087b5c3)), closes [#12294](https://github.com/vuejs/core/issues/12294)
 
 
 
-## [3.4.13](https://github.com/vuejs/core/compare/v3.4.12...v3.4.13) (2024-01-13)
+## [3.5.14](https://github.com/vuejs/core/compare/v3.5.13...v3.5.14) (2025-05-15)
 
 
 ### 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)
-
+* **compat:** correct deprecation message for v-bind.sync usage ([#13137](https://github.com/vuejs/core/issues/13137)) ([466b30f](https://github.com/vuejs/core/commit/466b30f4049ec89fb282624ec17d1a93472ab93f)), closes [#13133](https://github.com/vuejs/core/issues/13133)
+* **compiler-core:** remove slot cache from parent renderCache during unmounting ([#13215](https://github.com/vuejs/core/issues/13215)) ([5d166f3](https://github.com/vuejs/core/commit/5d166f3796a03a497435fc079c6a83a4e9c6cf52))
+* **compiler-sfc:** fix scope handling for props destructure in function parameters and catch clauses ([8e34357](https://github.com/vuejs/core/commit/8e3435779a667de485cf9efd78667d0ca14c5f84)), closes [#12790](https://github.com/vuejs/core/issues/12790)
+* **compiler-sfc:** treat the return value of `useTemplateRef` as a definite ref ([#13197](https://github.com/vuejs/core/issues/13197)) ([8ae1122](https://github.com/vuejs/core/commit/8ae11226e8ee938615e17c7b81dc38ae3f7cefb9))
+* **compiler:** fix spelling error in domTagConfig ([#13043](https://github.com/vuejs/core/issues/13043)) ([388295b](https://github.com/vuejs/core/commit/388295b27f3cc69eba25d325bbe60a36a3df831a))
+* **customFormatter:** properly accessing ref value during debugger ([#12948](https://github.com/vuejs/core/issues/12948)) ([fdbd026](https://github.com/vuejs/core/commit/fdbd02658301dd794fe0c84f0018d080a07fca9f))
+* **hmr/teleport:** adjust static children traversal for HMR in dev mode ([#12819](https://github.com/vuejs/core/issues/12819)) ([5e37dd0](https://github.com/vuejs/core/commit/5e37dd009562bcd8080a200c32abde2d6e4f0305)), closes [#12816](https://github.com/vuejs/core/issues/12816)
+* **hmr:** avoid hydration for hmr root reload ([#12450](https://github.com/vuejs/core/issues/12450)) ([1f98a9c](https://github.com/vuejs/core/commit/1f98a9c493d01c21befa90107f0593bc92a58932)), closes [vitejs/vite-plugin-vue#146](https://github.com/vitejs/vite-plugin-vue/issues/146) [vitejs/vite-plugin-vue#477](https://github.com/vitejs/vite-plugin-vue/issues/477)
+* **hmr:** avoid hydration for hmr updating ([#12262](https://github.com/vuejs/core/issues/12262)) ([9c4dbbc](https://github.com/vuejs/core/commit/9c4dbbc5185125835ad3e49baba303bd54676111)), closes [#7706](https://github.com/vuejs/core/issues/7706) [#8170](https://github.com/vuejs/core/issues/8170)
+* **reactivity:** ensure markRaw objects are not reactive ([#12824](https://github.com/vuejs/core/issues/12824)) ([295b5ec](https://github.com/vuejs/core/commit/295b5ec19b6a52c4a56652cc4d6e93a4ea7c14ed)), closes [#12807](https://github.com/vuejs/core/issues/12807)
+* **reactivity:** ensure multiple effectScope on() and off() calls maintains correct active scope ([22dcbf3](https://github.com/vuejs/core/commit/22dcbf3e20eb84f69c8952f6f70d9990136a4a68)), closes [#12631](https://github.com/vuejs/core/issues/12631) [#12632](https://github.com/vuejs/core/issues/12632) [#12641](https://github.com/vuejs/core/issues/12641)
+* **reactivity:** should not recompute if computed does not track reactive data ([#12341](https://github.com/vuejs/core/issues/12341)) ([0b23fd2](https://github.com/vuejs/core/commit/0b23fd23833cf085e7e112bf4435cfc9b360d072)), closes [#12337](https://github.com/vuejs/core/issues/12337)
+* **runtime-core:**  stop tracking deps in setRef during unmount ([#13210](https://github.com/vuejs/core/issues/13210)) ([016c472](https://github.com/vuejs/core/commit/016c472bd2e7604b21c69dee1da8545ce26e4d2f))
+* **runtime-core:**  update __vnode of static nodes when patching along the optimized path ([#13223](https://github.com/vuejs/core/issues/13223)) ([b3ecee3](https://github.com/vuejs/core/commit/b3ecee3da8ed5c55dea89ce6b4b376b2b722b018))
+* **runtime-core:** inherit comment nodes during block patch in production build  ([#10748](https://github.com/vuejs/core/issues/10748)) ([6264505](https://github.com/vuejs/core/commit/626450590d81f79117b34d2a73073b1dc8f551bd)), closes [#10747](https://github.com/vuejs/core/issues/10747) [#12650](https://github.com/vuejs/core/issues/12650)
+* **runtime-core:** prevent unmounted vnode from being inserted during transition leave ([#12862](https://github.com/vuejs/core/issues/12862)) ([d6a6ec1](https://github.com/vuejs/core/commit/d6a6ec13ce521683bfb2a22932778ef7b51f8600)), closes [#12860](https://github.com/vuejs/core/issues/12860)
+* **runtime-core:** respect immutability for readonly reactive arrays in `v-for` ([#13091](https://github.com/vuejs/core/issues/13091)) ([3f27c58](https://github.com/vuejs/core/commit/3f27c58ffbd4309df369bc89493fdc284dc540bb)), closes [#13087](https://github.com/vuejs/core/issues/13087)
+* **runtime-dom:** always treat autocorrect as attribute ([#13001](https://github.com/vuejs/core/issues/13001)) ([1499135](https://github.com/vuejs/core/commit/1499135c227236e037bb746beeb777941b0b58ff)), closes [#5705](https://github.com/vuejs/core/issues/5705)
+* **slots:** properly warn if slot invoked in setup ([#12195](https://github.com/vuejs/core/issues/12195)) ([9196222](https://github.com/vuejs/core/commit/9196222ae1d63b52b35ac5fbf5e71494587ccf05)), closes [#12194](https://github.com/vuejs/core/issues/12194)
+* **ssr:** properly init slots during ssr rendering ([#12441](https://github.com/vuejs/core/issues/12441)) ([2206cd2](https://github.com/vuejs/core/commit/2206cd235a1627c540e795e378b7564a55b47313)), closes [#12438](https://github.com/vuejs/core/issues/12438)
+* **transition:** fix KeepAlive with transition out-in mode behavior in production ([#12468](https://github.com/vuejs/core/issues/12468)) ([343c891](https://github.com/vuejs/core/commit/343c89122448719bd6ed6bd9de986dfb2721d6bf)), closes [#12465](https://github.com/vuejs/core/issues/12465)
+* **TransitionGroup:** reset prevChildren to prevent memory leak ([#13183](https://github.com/vuejs/core/issues/13183)) ([8b848cb](https://github.com/vuejs/core/commit/8b848cbbd2af337d23e19e202f9ab433f8580855)), closes [#13181](https://github.com/vuejs/core/issues/13181)
+* **types:** allow return any for Options API lifecycle hooks ([#5914](https://github.com/vuejs/core/issues/5914)) ([06310e8](https://github.com/vuejs/core/commit/06310e82f5bed62d1b9733dcb18cd8d6edc988de))
+* **types:** the directive's modifiers should be optional ([#12605](https://github.com/vuejs/core/issues/12605)) ([10e54dc](https://github.com/vuejs/core/commit/10e54dcc86a7967f3196d96200bcbd1d3d42082f))
+* **typos:** fix comments referencing transformElement.ts ([#12551](https://github.com/vuejs/core/issues/12551))[ci-skip] ([11c053a](https://github.com/vuejs/core/commit/11c053a5429ad0d27a0e2c78b6b026ea00ace116))
 
 
-## [3.4.12](https://github.com/vuejs/core/compare/v3.4.11...v3.4.12) (2024-01-13)
-
-
-### Reverts
+### Features
 
-* 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)
+* **types:** add type TemplateRef ([#12645](https://github.com/vuejs/core/issues/12645)) ([636a861](https://github.com/vuejs/core/commit/636a8619f06c71dfd79f7f6412fd130c4f84226f))
 
 
 
-## [3.4.11](https://github.com/vuejs/core/compare/v3.4.10...v3.4.11) (2024-01-12)
+## [3.5.13](https://github.com/vuejs/core/compare/v3.5.12...v3.5.13) (2024-11-15)
 
 
 ### 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)
+* **compiler-core:** handle v-memo + v-for with functional key ([#12014](https://github.com/vuejs/core/issues/12014)) ([99009ee](https://github.com/vuejs/core/commit/99009eee0efc238392daba93792d478525b21afa)), closes [#12013](https://github.com/vuejs/core/issues/12013)
+* **compiler-dom:** properly stringify template string style ([#12392](https://github.com/vuejs/core/issues/12392)) ([2d78539](https://github.com/vuejs/core/commit/2d78539da35322aea5f821b3cf9b02d006abac72)), closes [#12391](https://github.com/vuejs/core/issues/12391)
+* **custom-element:** avoid triggering mutationObserver when relecting props ([352bc88](https://github.com/vuejs/core/commit/352bc88c1bd2fda09c61ab17ea1a5967ffcd7bc0)), closes [#12214](https://github.com/vuejs/core/issues/12214) [#12215](https://github.com/vuejs/core/issues/12215)
+* **deps:** update dependency postcss to ^8.4.48 ([#12356](https://github.com/vuejs/core/issues/12356)) ([b5ff930](https://github.com/vuejs/core/commit/b5ff930089985a58c3553977ef999cec2a6708a4))
+* **hydration:** the component vnode's el should be updated when a mismatch occurs. ([#12255](https://github.com/vuejs/core/issues/12255)) ([a20a4cb](https://github.com/vuejs/core/commit/a20a4cb36a3e717d1f8f259d0d59f133f508ff0a)), closes [#12253](https://github.com/vuejs/core/issues/12253)
+* **reactivity:** avoid unnecessary watcher effect removal from inactive scope ([2193284](https://github.com/vuejs/core/commit/21932840eae72ffcd357a62ec596aaecc7ec224a)), closes [#5783](https://github.com/vuejs/core/issues/5783) [#5806](https://github.com/vuejs/core/issues/5806)
+* **reactivity:** release nested effects/scopes on effect scope stop ([#12373](https://github.com/vuejs/core/issues/12373)) ([bee2f5e](https://github.com/vuejs/core/commit/bee2f5ee62dc0cd04123b737779550726374dd0a)), closes [#12370](https://github.com/vuejs/core/issues/12370)
+* **runtime-dom:** set css vars before user onMounted hooks ([2d5c5e2](https://github.com/vuejs/core/commit/2d5c5e25e9b7a56e883674fb434135ac514429b5)), closes [#11533](https://github.com/vuejs/core/issues/11533)
+* **runtime-dom:** set css vars on update to handle child forcing reflow in onMount ([#11561](https://github.com/vuejs/core/issues/11561)) ([c4312f9](https://github.com/vuejs/core/commit/c4312f9c715c131a09e552ba46e9beb4b36d55e6))
+* **ssr:** avoid updating subtree of async component if it is resolved ([#12363](https://github.com/vuejs/core/issues/12363)) ([da7ad5e](https://github.com/vuejs/core/commit/da7ad5e3d24f3e108401188d909d27a4910da095)), closes [#12362](https://github.com/vuejs/core/issues/12362)
+* **ssr:** ensure v-text updates correctly with custom directives in SSR output ([#12311](https://github.com/vuejs/core/issues/12311)) ([1f75d4e](https://github.com/vuejs/core/commit/1f75d4e6dfe18121ebe443cd3e8105d54f727893)), closes [#12309](https://github.com/vuejs/core/issues/12309)
+* **ssr:** handle initial selected state for select with v-model + v-for option ([#12399](https://github.com/vuejs/core/issues/12399)) ([4f8d807](https://github.com/vuejs/core/commit/4f8d8078221ee52deed266677a227ad2a6d8dd22)), closes [#12395](https://github.com/vuejs/core/issues/12395)
+* **teleport:** handle deferred teleport update before mounted ([#12168](https://github.com/vuejs/core/issues/12168)) ([8bff142](https://github.com/vuejs/core/commit/8bff142f99b646e9dd15897ec75368fbf34f1534)), closes [#12161](https://github.com/vuejs/core/issues/12161)
+* **templateRef:** set ref on cached async component which wrapped in KeepAlive ([#12290](https://github.com/vuejs/core/issues/12290)) ([983eb50](https://github.com/vuejs/core/commit/983eb50a17eac76f1bba4394ad0316c62b72191d)), closes [#4999](https://github.com/vuejs/core/issues/4999) [#5004](https://github.com/vuejs/core/issues/5004)
+* **test:** update snapshot ([#12169](https://github.com/vuejs/core/issues/12169)) ([828d4a4](https://github.com/vuejs/core/commit/828d4a443919fa2aa4e2e92fbd03a5f04b258eea))
+* **Transition:** fix transition memory leak edge case ([#12182](https://github.com/vuejs/core/issues/12182)) ([660132d](https://github.com/vuejs/core/commit/660132df6c6a8c14bf75e593dc47d2fdada30322)), closes [#12181](https://github.com/vuejs/core/issues/12181)
+* **transition:** reflow before leave-active class after leave-from ([#12288](https://github.com/vuejs/core/issues/12288)) ([4b479db](https://github.com/vuejs/core/commit/4b479db61d233b054561402ae94ef08550073ea1)), closes [#2593](https://github.com/vuejs/core/issues/2593)
+* **types:** defineEmits w/ interface declaration ([#12343](https://github.com/vuejs/core/issues/12343)) ([1022eab](https://github.com/vuejs/core/commit/1022eabaa1aaf8436876f5ec5573cb1e4b3959a6)), closes [#8457](https://github.com/vuejs/core/issues/8457)
+* **v-once:** setting hasOnce to current block only when in v-once ([#12374](https://github.com/vuejs/core/issues/12374)) ([37300fc](https://github.com/vuejs/core/commit/37300fc26190a7299efddbf98800ffd96d5cad96)), closes [#12371](https://github.com/vuejs/core/issues/12371)
 
 
+### Performance Improvements
 
-## [3.4.10](https://github.com/vuejs/core/compare/v3.4.9...v3.4.10) (2024-01-11)
+* **reactivity:** do not track inner key `__v_skip`` ([#11690](https://github.com/vuejs/core/issues/11690)) ([d637bd6](https://github.com/vuejs/core/commit/d637bd6c0164c2883e6eabd3c2f1f8c258dedfb1))
+* **runtime-core:** use feature flag for call to resolveMergedOptions ([#12163](https://github.com/vuejs/core/issues/12163)) ([1755ac0](https://github.com/vuejs/core/commit/1755ac0a108ba3486bd8397e56d3bdcd69196594))
 
 
-### Bug Fixes
 
-* **hydration:** should not warn on falsy bindings of non-property keys ([3907c87](https://github.com/vuejs/core/commit/3907c87ce23cc6ef4a739b5a66ddb553e8723114))
+## [3.5.12](https://github.com/vuejs/core/compare/v3.5.11...v3.5.12) (2024-10-11)
 
 
+### Bug Fixes
 
-## [3.4.9](https://github.com/vuejs/core/compare/v3.4.8...v3.4.9) (2024-01-11)
+* **compiler-dom:** avoid stringify option with null value ([#12096](https://github.com/vuejs/core/issues/12096)) ([f6d9926](https://github.com/vuejs/core/commit/f6d99262364b7444ebab8742158599e8cdd79eaa)), closes [#12093](https://github.com/vuejs/core/issues/12093)
+* **compiler-sfc:**  do not skip TSInstantiationExpression when transforming props destructure ([#12064](https://github.com/vuejs/core/issues/12064)) ([d3ecde8](https://github.com/vuejs/core/commit/d3ecde8a696ff62c8d0ab067fd1d7ee0565b63c5))
+* **compiler-sfc:** use sass modern api if available and avoid deprecation warning ([#11992](https://github.com/vuejs/core/issues/11992)) ([4474c11](https://github.com/vuejs/core/commit/4474c113d1fb1c26298dd6794275d5b5c7cc4d93))
+* **compiler:** clone loc to `ifNode` ([#12131](https://github.com/vuejs/core/issues/12131)) ([cde2c06](https://github.com/vuejs/core/commit/cde2c0671b00d4f6111fcbd7aa76e45872f20b0c)), closes [vuejs/language-tools#4911](https://github.com/vuejs/language-tools/issues/4911)
+* **custom-element:** properly remove hyphenated attribute ([#12143](https://github.com/vuejs/core/issues/12143)) ([e16e9a7](https://github.com/vuejs/core/commit/e16e9a7341e7cfb3c443da4e5e5b06e8158712c3)), closes [#12139](https://github.com/vuejs/core/issues/12139)
+* **defineModel:** handle kebab-case model correctly ([#12063](https://github.com/vuejs/core/issues/12063)) ([c0418a3](https://github.com/vuejs/core/commit/c0418a3b8fa96a0b108ab71b7aab5d3388f90557)), closes [#12060](https://github.com/vuejs/core/issues/12060)
+* **deps:** update dependency monaco-editor to ^0.52.0 ([#12119](https://github.com/vuejs/core/issues/12119)) ([f7cbea2](https://github.com/vuejs/core/commit/f7cbea2111c7770a180b640f36f6a5d4d6abc698))
+* **hydration:** provide compat fallback for idle callback hydration strategy ([#11935](https://github.com/vuejs/core/issues/11935)) ([1ae545a](https://github.com/vuejs/core/commit/1ae545a3786abef983be1c969726489685569c92))
+* **reactivity:** trigger reactivity for Map key `undefined` ([#12055](https://github.com/vuejs/core/issues/12055)) ([7ad289e](https://github.com/vuejs/core/commit/7ad289e1e7fea654524008ff91e43a8b8a55ef22)), closes [#12054](https://github.com/vuejs/core/issues/12054)
+* **runtime-core:** allow symbol values for slot prop key ([#12069](https://github.com/vuejs/core/issues/12069)) ([d9d4d4e](https://github.com/vuejs/core/commit/d9d4d4e158cd51a9ddda249f29de8467f60b2792)), closes [#12068](https://github.com/vuejs/core/issues/12068)
+* **runtime-core:** fix required prop check false positive for kebab-case edge cases  ([#12034](https://github.com/vuejs/core/issues/12034)) ([9da1ac1](https://github.com/vuejs/core/commit/9da1ac156552ac449754e1373aac7e349841becb)), closes [#12011](https://github.com/vuejs/core/issues/12011)
+* **runtime-dom:** prevent unnecessary updates in v-model checkbox when value is unchanged ([#12146](https://github.com/vuejs/core/issues/12146)) ([ea943af](https://github.com/vuejs/core/commit/ea943afe404c4ca4b729906c5e8daf7aa2ccde9b)), closes [#12144](https://github.com/vuejs/core/issues/12144)
+* **teleport:** handle disabled teleport with updateCssVars ([#12113](https://github.com/vuejs/core/issues/12113)) ([76a8223](https://github.com/vuejs/core/commit/76a8223199c148b79a5c0ea19e235164809760cd)), closes [#12112](https://github.com/vuejs/core/issues/12112)
+* **transition/ssr:** make transition appear work with Suspense in SSR ([#12047](https://github.com/vuejs/core/issues/12047)) ([f1a4f67](https://github.com/vuejs/core/commit/f1a4f67aedfe83e440c54222213f070774faa421)), closes [#12046](https://github.com/vuejs/core/issues/12046)
+* **types:** ensure `this.$props` type does not include `string` ([#12123](https://github.com/vuejs/core/issues/12123)) ([704173e](https://github.com/vuejs/core/commit/704173e24276706de672cca6c9507e4dd9651197)), closes [#12122](https://github.com/vuejs/core/issues/12122)
+* **types:** retain union type narrowing with defaults applied ([#12108](https://github.com/vuejs/core/issues/12108)) ([05685a9](https://github.com/vuejs/core/commit/05685a9d7c42d4cd37169b867833776b91154fed)), closes [#12106](https://github.com/vuejs/core/issues/12106)
+* **useId:** ensure useId consistency when using serverPrefetch ([#12128](https://github.com/vuejs/core/issues/12128)) ([b4d3534](https://github.com/vuejs/core/commit/b4d35349d8bc39aa15bd3f1094d230e5928b177c)), closes [#12102](https://github.com/vuejs/core/issues/12102)
+* **watch:** watchEffect clean-up with SSR ([#12097](https://github.com/vuejs/core/issues/12097)) ([b094c72](https://github.com/vuejs/core/commit/b094c72b3d40c52c7124f145a9db028509a11202)), closes [#11956](https://github.com/vuejs/core/issues/11956)
 
 
-### Bug Fixes
+### Performance Improvements
 
-* **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)
+* **reactivity:** avoid unnecessary recursion in removeSub ([#12135](https://github.com/vuejs/core/issues/12135)) ([ec917cf](https://github.com/vuejs/core/commit/ec917cfdb9d0169cd0835d3a0e28244242657dc9))
 
 
 
-## [3.4.8](https://github.com/vuejs/core/compare/v3.4.7...v3.4.8) (2024-01-10)
+## [3.5.11](https://github.com/vuejs/core/compare/v3.5.10...v3.5.11) (2024-10-03)
 
 
 ### 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)
+* **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.4.7](https://github.com/vuejs/core/compare/v3.4.6...v3.4.7) (2024-01-09)
+## [3.5.10](https://github.com/vuejs/core/compare/v3.5.9...v3.5.10) (2024-09-27)
 
 
 ### 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))
-
+* **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)
 
-### 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)
+## [3.5.9](https://github.com/vuejs/core/compare/v3.5.8...v3.5.9) (2024-09-26)
 
 
 ### 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)
+* **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.4.5](https://github.com/vuejs/core/compare/v3.4.4...v3.4.5) (2024-01-04)
+## [3.5.8](https://github.com/vuejs/core/compare/v3.5.7...v3.5.8) (2024-09-22)
 
 
 ### 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))
+* **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.4.4](https://github.com/vuejs/core/compare/v3.4.3...v3.4.4) (2024-01-03)
+## [3.5.7](https://github.com/vuejs/core/compare/v3.5.6...v3.5.7) (2024-09-20)
 
 
 ### 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)
+* **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
 
-* **watch:** avoid double traverse for reactive source ([24d77c2](https://github.com/vuejs/core/commit/24d77c25ce5d5356adb5367beef1d23e6e340b35))
+* **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.4.3](https://github.com/vuejs/core/compare/v3.4.2...v3.4.3) (2023-12-30)
+## [3.5.6](https://github.com/vuejs/core/compare/v3.5.5...v3.5.6) (2024-09-16)
 
 
 ### Bug Fixes
 
-* **compiler-sfc:** respect sfc parse options in cache key ([b8d58ec](https://github.com/vuejs/core/commit/b8d58ec4f42cbeb9443bf06138add46158db9af0))
+* **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.4.2](https://github.com/vuejs/core/compare/v3.4.1...v3.4.2) (2023-12-30)
+## [3.5.5](https://github.com/vuejs/core/compare/v3.5.4...v3.5.5) (2024-09-13)
 
 
 ### 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)
+* **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.4.1](https://github.com/vuejs/core/compare/v3.4.0...v3.4.1) (2023-12-30)
+## [3.5.4](https://github.com/vuejs/core/compare/v3.5.3...v3.5.4) (2024-09-10)
 
 
 ### 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))
+* **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:** 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))
-
+* **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))
 
-### 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.
+## [3.5.3](https://github.com/vuejs/core/compare/v3.5.2...v3.5.3) (2024-09-06)
 
-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.
+### Bug Fixes
 
-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).
+* **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)
 
-#### 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)
+## [3.5.2](https://github.com/vuejs/core/compare/v3.5.1...v3.5.2) (2024-09-05)
 
 
 ### Bug Fixes
 
-* also export runtime error strings in all cjs builds ([38706e4](https://github.com/vuejs/core/commit/38706e4a1e5e5380e7df910b2a784d0a9bc9db29))
+* **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
 
-* **defineModel:** support modifiers and transformers ([a772031](https://github.com/vuejs/core/commit/a772031ea8431bd732ffeaeaac09bd76a0daec9b))
+* **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.4.0-rc.2](https://github.com/vuejs/core/compare/v3.4.0-rc.1...v3.4.0-rc.2) (2023-12-26)
+## [3.5.1](https://github.com/vuejs/core/compare/v3.5.0...v3.5.1) (2024-09-04)
 
 
 ### 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))
-
+* **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)
 
-### Features
-
-* **compiler-sfc:** export aggregated error messages for compiler-core and compiler-dom ([25c726e](https://github.com/vuejs/core/commit/25c726eca81fc384b41fafbeba5e8dfcda1f030f))
 
 
+# [3.5.0](https://github.com/vuejs/core/compare/v3.5.0-rc.1...v3.5.0) (2024-09-03)
 
-# [3.4.0-rc.1](https://github.com/vuejs/core/compare/v3.4.0-beta.4...v3.4.0-rc.1) (2023-12-25)
+## Aggregated Features List for 3.5 (alpha to stable)
 
+### Reactivity
 
-### Bug Fixes
+- **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)
 
-* **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))
+### 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
 
-# [3.4.0-beta.4](https://github.com/vuejs/core/compare/v3.3.13...v3.4.0-beta.4) (2023-12-19)
+- **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
 
-### Bug Fixes
+- **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)
 
-* **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))
+### 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))
 
-### Features
+### Internals
 
-* **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)
+- **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))
 
 
 
-## [3.3.13](https://github.com/vuejs/core/compare/v3.3.12...v3.3.13) (2023-12-19)
+## 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)
 
-### 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)
+# [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-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))
-
+* **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.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.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
 
-# [3.4.0-beta.2](https://github.com/vuejs/core/compare/v3.4.0-beta.1...v3.4.0-beta.2) (2023-12-14)
+* **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
 
-* **types:** remove default jsx global registration ([92b8d9c](https://github.com/vuejs/core/commit/92b8d9cef69146540db2bf7f2a5632ab5d38f672))
+* **reactivity:** base `watch`, `getCurrentWatcher`, and `onWatcherCleanup` ([#9927](https://github.com/vuejs/core/issues/9927)) ([205e5b5](https://github.com/vuejs/core/commit/205e5b5e277243c3af2c937d9bd46cf671296b72))
 
 
-### BREAKING CHANGES
+### Performance Improvements
 
-* **types:** Vue no longer registers the global `JSX` namespace by
-default.
+* **runtime-core:** use `apply` to avoid spreading. ([#5985](https://github.com/vuejs/core/issues/5985)) ([bb6babc](https://github.com/vuejs/core/commit/bb6babca8f206615d4e246457cd54d21bb3bc5a4))
 
 
 
-# [3.4.0-beta.1](https://github.com/vuejs/core/compare/v3.3.11...v3.4.0-beta.1) (2023-12-13)
+# [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
 
-* **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))
+* **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
 
-* **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)
+* **deprecated:** remove deprecated parseExpressions option ([#11597](https://github.com/vuejs/core/issues/11597)) ([4e7d5db](https://github.com/vuejs/core/commit/4e7d5db4d276a5d4aaf3af7d43cfd28c171db307))
 
 
 
-## [3.3.11](https://github.com/vuejs/core/compare/v3.3.10...v3.3.11) (2023-12-08)
+# [3.5.0-beta.1](https://github.com/vuejs/core/compare/v3.4.37...v3.5.0-beta.1) (2024-08-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)
+* **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
 
-# [3.4.0-alpha.4](https://github.com/vuejs/core/compare/v3.3.10...v3.4.0-alpha.4) (2023-12-04)
+* **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))
 
 
-### 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))
+# [3.5.0-alpha.5](https://github.com/vuejs/core/compare/v3.4.35...v3.5.0-alpha.5) (2024-07-31)
 
 
 ### 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)
-
+* **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.3.10](https://github.com/vuejs/core/compare/v3.3.9...v3.3.10) (2023-12-04)
 
+# [3.5.0-alpha.4](https://github.com/vuejs/core/compare/v3.4.34...v3.5.0-alpha.4) (2024-07-24)
 
 ### 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
+* **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))
 
-* 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)
+# [3.5.0-alpha.3](https://github.com/vuejs/core/compare/v3.4.33...v3.5.0-alpha.3) (2024-07-19)
 
 
 ### 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))
+* **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
 
-* **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:** 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.4.0-alpha.2](https://github.com/vuejs/core/compare/v3.3.9...v3.4.0-alpha.2) (2023-11-27)
+# [3.5.0-alpha.2](https://github.com/vuejs/core/compare/v3.4.26...v3.5.0-alpha.2) (2024-05-04)
 
 
 ### 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)
+* **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
 
-* **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))
-
+* **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)
 
-### 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)
+# [3.5.0-alpha.1](https://github.com/vuejs/core/compare/v3.4.25...v3.5.0-alpha.1) (2024-04-29)
 
 
 ### 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)
+* **reactivity:** fix call sequence of ontrigger in effect ([#10501](https://github.com/vuejs/core/issues/10501)) ([28841fe](https://github.com/vuejs/core/commit/28841fee43a45c37905c2c1ed9ace23067539045))
 
 
-### Bug Fixes
+### Features
 
-* **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))
+* **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
 
-# [3.4.0-alpha.1](https://github.com/vuejs/core/compare/v3.3.7...v3.4.0-alpha.1) (2023-10-28)
+* **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)
 
 
-### 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))
+## Previous Changelogs
 
+### 3.4.x (2023-10-28 - 2024-08-15)
 
-## Previous Changelogs
+See [3.4 changelog](./changelogs/CHANGELOG-3.4.md)
 
 ### 3.3.x (2023-02-05 - 2023-12-29)
 
diff --git a/FUNDING.json b/FUNDING.json
new file mode 100644
index 00000000000..552dc453c21
--- /dev/null
+++ b/FUNDING.json
@@ -0,0 +1,7 @@
+{
+  "drips": {
+    "ethereum": {
+      "ownedBy": "0x5393BdeA2a020769256d9f337B0fc81a2F64850A"
+    }
+  }
+}
diff --git a/README.md b/README.md
index cbc05311ae7..6b4935abd4b 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
 
@@ -34,7 +34,8 @@ Please make sure to respect issue requirements and use [the new issue helper](ht
 
 ## Stay In Touch
 
-- [Twitter](https://twitter.com/vuejs)
+- [X](https://x.com/vuejs)
+- [Bluesky](https://bsky.app/profile/vuejs.org)
 - [Blog](https://blog.vuejs.org/)
 - [Job Board](https://vuejobs.com/?ref=vuejs)
 
@@ -44,7 +45,9 @@ Please make sure to read the [Contributing Guide](https://github.com/vuejs/core/
 
 Thank you to all the people who already contributed to Vue!
 
-<a href="https://github.com/vuejs/core/graphs/contributors"><img src="https://opencollective.com/vuejs/contributors.svg?width=890" /></a>
+<a href="https://github.com/vuejs/core/graphs/contributors"><img src="https://opencollective.com/vuejs/contributors.svg?width=890&limit=500" /></a>
+
+<sub>_Note: Showing the first 500 contributors only due to GitHub image size limitations_</sub>
 
 ## License
 
diff --git a/SECURITY.md b/SECURITY.md
index dac6018b5bc..192502e38f3 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 50b152dc23a..c19ef26890b 100644
--- a/changelogs/CHANGELOG-3.0.md
+++ b/changelogs/CHANGELOG-3.0.md
@@ -56,13 +56,13 @@
 - **hydration:** handle camel-case tag name when performing match assertion ([#3247](https://github.com/vuejs/core/issues/3247)) ([9036f88](https://github.com/vuejs/core/commit/9036f88d8304a3455265f1ecd86ec8f4a5ea4715)), closes [#3243](https://github.com/vuejs/core/issues/3243)
 - **KeepAlive:** adapt keepalive for ssr ([#3259](https://github.com/vuejs/core/issues/3259)) ([e8e9b00](https://github.com/vuejs/core/commit/e8e9b00f81ed42434afd92f84101e7a14d70a23c)), closes [#3255](https://github.com/vuejs/core/issues/3255)
 - **reactivity:** ensure computed can be wrapped by readonly ([41e02f0](https://github.com/vuejs/core/commit/41e02f0fac069c93c94438741517e713f3c94215)), closes [#3376](https://github.com/vuejs/core/issues/3376)
-- **reactivity:** ensure that shallow and normal proxies are tracked seperately (close [#2843](https://github.com/vuejs/core/issues/2843)) ([#2851](https://github.com/vuejs/core/issues/2851)) ([22cc4a7](https://github.com/vuejs/core/commit/22cc4a76592cfe336e75e2fa0c05232ae1f0f149))
+- **reactivity:** ensure that shallow and normal proxies are tracked separately (close [#2843](https://github.com/vuejs/core/issues/2843)) ([#2851](https://github.com/vuejs/core/issues/2851)) ([22cc4a7](https://github.com/vuejs/core/commit/22cc4a76592cfe336e75e2fa0c05232ae1f0f149))
 - **reactivity:** fix shallow readonly behavior for collections ([#3003](https://github.com/vuejs/core/issues/3003)) ([68de9f4](https://github.com/vuejs/core/commit/68de9f408a2e61a5726a4a0d03b026cba451c5bd)), closes [#3007](https://github.com/vuejs/core/issues/3007)
 - **rumtime-core:** custom dom props should be cloned when cloning a hoisted DOM ([#3080](https://github.com/vuejs/core/issues/3080)) ([5dbe834](https://github.com/vuejs/core/commit/5dbe8348581dacd7a3594a9b0055ce350ce8e5bf)), closes [#3072](https://github.com/vuejs/core/issues/3072)
 - **runtime-core:** cache props default values to avoid unnecessary watcher trigger ([#3474](https://github.com/vuejs/core/issues/3474)) ([44166b4](https://github.com/vuejs/core/commit/44166b43d9be1062f79612880f71284049bcab0b)), closes [#3471](https://github.com/vuejs/core/issues/3471)
 - **runtime-core:** ensure only skip unflushed job ([#3406](https://github.com/vuejs/core/issues/3406)) ([bf34e33](https://github.com/vuejs/core/commit/bf34e33c909da89681b9c5004cdf04ab198ec5a7))
 - **runtime-core:** fix async component ref handling ([#3191](https://github.com/vuejs/core/issues/3191)) ([7562e72](https://github.com/vuejs/core/commit/7562e72c2b58a5646bd4fbd9adea11eb884fe140)), closes [#3188](https://github.com/vuejs/core/issues/3188)
-- **runtime-core:** fix erraneous emits warnings w/ mixins ([60d777d](https://github.com/vuejs/core/commit/60d777d228414515cc32526ad72a53ef070501be)), closes [#2651](https://github.com/vuejs/core/issues/2651)
+- **runtime-core:** fix erroneous emits warnings w/ mixins ([60d777d](https://github.com/vuejs/core/commit/60d777d228414515cc32526ad72a53ef070501be)), closes [#2651](https://github.com/vuejs/core/issues/2651)
 - **runtime-core:** fix warning for absent props ([#3363](https://github.com/vuejs/core/issues/3363)) ([86ceef4](https://github.com/vuejs/core/commit/86ceef43523bfbbb0a24731d3802ca6849cbefd6)), closes [#3362](https://github.com/vuejs/core/issues/3362)
 - **runtime-core:** handle error in async setup ([#2881](https://github.com/vuejs/core/issues/2881)) ([d668d48](https://github.com/vuejs/core/commit/d668d48e9e5211a49ee53361ea5b4d67ba16e0a3))
 - **runtime-core:** handle error in async watchEffect ([#3129](https://github.com/vuejs/core/issues/3129)) ([eb1fae6](https://github.com/vuejs/core/commit/eb1fae63f926435fb0eef890663d24e09d4c79e1))
@@ -202,7 +202,7 @@ may cause build issues in projects still using TS 3.x.
 - **script-setup:** ensure useContext() return valid context ([73cdb9d](https://github.com/vuejs/core/commit/73cdb9d4208f887fe08349657122e39175d7166c))
 - **slots:** dynamically named slots should be keyed by name ([2ab8c41](https://github.com/vuejs/core/commit/2ab8c41a1a43952fb229587a9da48d9a1214ab9e)), closes [#2535](https://github.com/vuejs/core/issues/2535)
 - **slots:** should render fallback content when slot content contains no valid nodes ([#2485](https://github.com/vuejs/core/issues/2485)) ([ce4915d](https://github.com/vuejs/core/commit/ce4915d8bed12f4cdb5fa8ca39bda98d0d3aabb7)), closes [#2347](https://github.com/vuejs/core/issues/2347) [#2461](https://github.com/vuejs/core/issues/2461)
-- **suspense:** fix nested async child toggle inside already resovled suspense ([cf7f1db](https://github.com/vuejs/core/commit/cf7f1dbc9be8d50ad220e3630c38f5a9a217d693)), closes [#2215](https://github.com/vuejs/core/issues/2215)
+- **suspense:** fix nested async child toggle inside already resolved suspense ([cf7f1db](https://github.com/vuejs/core/commit/cf7f1dbc9be8d50ad220e3630c38f5a9a217d693)), closes [#2215](https://github.com/vuejs/core/issues/2215)
 - **teleport:** Teleport into SVG elements ([#2648](https://github.com/vuejs/core/issues/2648)) ([cd92836](https://github.com/vuejs/core/commit/cd928362232747a51d1fd4790bb20adcdd59d187)), closes [#2652](https://github.com/vuejs/core/issues/2652)
 - **transition:** avoid invoking stale transition end callbacks ([eaf8a67](https://github.com/vuejs/core/commit/eaf8a67c7219e1b79d6abca44a1d7f1b341b58b0)), closes [#2482](https://github.com/vuejs/core/issues/2482)
 - **transition:** respect rules in \*-leave-from transition class ([#2597](https://github.com/vuejs/core/issues/2597)) ([e2618a6](https://github.com/vuejs/core/commit/e2618a632d4add2819ffb8b575af0da189dc3204)), closes [#2593](https://github.com/vuejs/core/issues/2593)
@@ -236,7 +236,7 @@ may cause build issues in projects still using TS 3.x.
 
 - **compiler-sfc:** compileScript inline render function mode ([886ed76](https://github.com/vuejs/core/commit/886ed7681dd203c07ff3b504538328f43e14d9b0))
 - **compiler-sfc:** new script setup implementation ([556560f](https://github.com/vuejs/core/commit/556560fae31d9e406cfae656089657b6332686c1))
-- **compiler-sfc:** new SFC css varaible injection implementation ([41bb7fa](https://github.com/vuejs/core/commit/41bb7fa330e78c4a354a2e67742bd13bee2f4293))
+- **compiler-sfc:** new SFC css variable injection implementation ([41bb7fa](https://github.com/vuejs/core/commit/41bb7fa330e78c4a354a2e67742bd13bee2f4293))
 - **compiler-sfc:** support kebab-case components in `<script setup>` sfc template ([3f99e23](https://github.com/vuejs/core/commit/3f99e239e03a8861c462d4ee91feb82066ab3e28))
 - **runtime-core:** explicit expose API ([0e59770](https://github.com/vuejs/core/commit/0e59770b9282992f6a5af4d8fef33dafb948fc8b))
 
@@ -282,7 +282,7 @@ may cause build issues in projects still using TS 3.x.
 - **runtime-core:** fix directive merging on component root ([4d1ebb5](https://github.com/vuejs/core/commit/4d1ebb5deb4c1cb2a02e8482bf8f9cc87197b088)), closes [#2298](https://github.com/vuejs/core/issues/2298)
 - **runtime-core:** fix duplicated unmount traversal in optimized mode ([376883d](https://github.com/vuejs/core/commit/376883d1cfea6ed92807cce1f1209f943a04b625)), closes [#2169](https://github.com/vuejs/core/issues/2169)
 - **runtime-core:** fix provide function data access in extends/mixins ([f06518a](https://github.com/vuejs/core/commit/f06518a8c9201b4fa2a956595aa9d89a192fcd20)), closes [#2300](https://github.com/vuejs/core/issues/2300)
-- **runtime-core:** fix SSR memoery leak due to props normalization cache ([a66e53a](https://github.com/vuejs/core/commit/a66e53a24f445b688eef6812ecb872dc53cf2702)), closes [#2225](https://github.com/vuejs/core/issues/2225)
+- **runtime-core:** fix SSR memory leak due to props normalization cache ([a66e53a](https://github.com/vuejs/core/commit/a66e53a24f445b688eef6812ecb872dc53cf2702)), closes [#2225](https://github.com/vuejs/core/issues/2225)
 - **runtime-core:** make errorCaptured return value handling consistent with Vue 2 ([#2289](https://github.com/vuejs/core/issues/2289)) ([4d20ac8](https://github.com/vuejs/core/commit/4d20ac8173f84c87288255dcc03c62a6ee862a23)), closes [#2267](https://github.com/vuejs/core/issues/2267)
 - **runtime-core:** use consistent camelCase event casing for render functions ([#2278](https://github.com/vuejs/core/issues/2278)) ([62f2617](https://github.com/vuejs/core/commit/62f26173ba715fd8bf2b131e19d94275106e830d)), closes [#2249](https://github.com/vuejs/core/issues/2249)
 - **runtime-core:** vnode.el is null in watcher after rerendering ([#2295](https://github.com/vuejs/core/issues/2295)) ([28d5fd7](https://github.com/vuejs/core/commit/28d5fd7a2871c10df3427dfbbe0e203c2a976cb4)), closes [#2170](https://github.com/vuejs/core/issues/2170)
@@ -450,7 +450,7 @@ may cause build issues in projects still using TS 3.x.
 - **compiler-core:** should attach key to single element child of `<template v-for>` ([#1910](https://github.com/vuejs/core/issues/1910)) ([69cfed6](https://github.com/vuejs/core/commit/69cfed6b313821d1ae7ecb02b63b0aaccb5599c6))
 - **reactivity:** unwrap non-index accessed refs on reactive arrays ([#1859](https://github.com/vuejs/core/issues/1859)) ([3c05f8b](https://github.com/vuejs/core/commit/3c05f8bbd6cd0e01bbc5830730852f9a93d8de8a)), closes [#1846](https://github.com/vuejs/core/issues/1846)
 - **runtime-core:** correctly track dynamic nodes in renderSlot ([#1911](https://github.com/vuejs/core/issues/1911)) ([7ffb79c](https://github.com/vuejs/core/commit/7ffb79c56318861075a47bd2357e34cde8a6dad9))
-- **runtime-core:** disable block tracking when calling compiled slot function in tempalte expressions ([f02e2f9](https://github.com/vuejs/core/commit/f02e2f99d9c2ca95f4fd984d7bd62178eceaa214)), closes [#1745](https://github.com/vuejs/core/issues/1745) [#1918](https://github.com/vuejs/core/issues/1918)
+- **runtime-core:** disable block tracking when calling compiled slot function in template expressions ([f02e2f9](https://github.com/vuejs/core/commit/f02e2f99d9c2ca95f4fd984d7bd62178eceaa214)), closes [#1745](https://github.com/vuejs/core/issues/1745) [#1918](https://github.com/vuejs/core/issues/1918)
 - **teleport:** only inherit el for non-patched nodes ([d4cc7b2](https://github.com/vuejs/core/commit/d4cc7b2496f9ed21ef6cac426697eac058da76bb)), closes [#1903](https://github.com/vuejs/core/issues/1903)
 
 ### Performance Improvements
@@ -631,7 +631,7 @@ may cause build issues in projects still using TS 3.x.
 - **runtime-dom/v-on:** only block event handlers based on attach timestamp ([8b320cc](https://github.com/vuejs/core/commit/8b320cc12f74aafea9ec69f7ce70231d4f0d08fd)), closes [#1565](https://github.com/vuejs/core/issues/1565)
 - **slots:** differentiate dynamic/static compiled slots ([65beba9](https://github.com/vuejs/core/commit/65beba98fe5793133d3218945218b9e3f8d136eb)), closes [#1557](https://github.com/vuejs/core/issues/1557)
 - **v-on:** capitalize dynamic event names ([9152a89](https://github.com/vuejs/core/commit/9152a8901653d7cef864a52a3c618afcc70d827d))
-- **v-on:** refactor DOM event options modifer handling ([380c679](https://github.com/vuejs/core/commit/380c6792d8899f1a43a9e6400c5df483c63290b6)), closes [#1567](https://github.com/vuejs/core/issues/1567)
+- **v-on:** refactor DOM event options modifier handling ([380c679](https://github.com/vuejs/core/commit/380c6792d8899f1a43a9e6400c5df483c63290b6)), closes [#1567](https://github.com/vuejs/core/issues/1567)
 
 ### Features
 
@@ -743,7 +743,7 @@ may cause build issues in projects still using TS 3.x.
 - **compiler-core:** fix parsing for directive with dynamic argument containing dots ([0d26413](https://github.com/vuejs/core/commit/0d26413433d41389f5525a0ef2c2dd7cfbb454d4))
 - **compiler-core:** support static slot names containing dots for 2.x compat ([825ec15](https://github.com/vuejs/core/commit/825ec1500feda8b0c43245e7e92074af7f9dcca2)), closes [#1241](https://github.com/vuejs/core/issues/1241)
 - **hmr:** force full update on nested child components ([#1312](https://github.com/vuejs/core/issues/1312)) ([8f2a748](https://github.com/vuejs/core/commit/8f2a7489b7c74f5cfc1844697c60287c37fc0eb8))
-- **reactivity:** fix toRaw for objects prototype inherting reactive ([10bb34b](https://github.com/vuejs/core/commit/10bb34bb869a47c37d945f8c80abf723fac9fc1a)), closes [#1246](https://github.com/vuejs/core/issues/1246)
+- **reactivity:** fix toRaw for objects prototype inheriting reactive ([10bb34b](https://github.com/vuejs/core/commit/10bb34bb869a47c37d945f8c80abf723fac9fc1a)), closes [#1246](https://github.com/vuejs/core/issues/1246)
 - **runtime-core:** should pass instance to patchProp on mount for event error handling ([#1337](https://github.com/vuejs/core/issues/1337)) ([aac9b03](https://github.com/vuejs/core/commit/aac9b03c11c9be0c67b924004364a42d04d78195)), closes [#1336](https://github.com/vuejs/core/issues/1336)
 - **runtime-core:** track access to $attrs ([6abac87](https://github.com/vuejs/core/commit/6abac87b3d1b7a22df80b7a70a10101a7f3d3732)), closes [#1346](https://github.com/vuejs/core/issues/1346)
 - always treat spellcheck and draggable as attributes ([4492b88](https://github.com/vuejs/core/commit/4492b88938922a7f1bcc36a608375ad99f16b22e)), closes [#1350](https://github.com/vuejs/core/issues/1350)
@@ -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
 
@@ -863,7 +863,7 @@ may cause build issues in projects still using TS 3.x.
 
 ### Bug Fixes
 
-- **compiler:** bail strigification on runtime constant expressions ([f9a3766](https://github.com/vuejs/core/commit/f9a3766fd68dc6996cdbda6475287c4005f55243))
+- **compiler:** bail stringification on runtime constant expressions ([f9a3766](https://github.com/vuejs/core/commit/f9a3766fd68dc6996cdbda6475287c4005f55243))
 - **transitionGroup:** fix transition children resolving condition ([f05aeea](https://github.com/vuejs/core/commit/f05aeea7aec2e6cd859f40edc6236afd0ce2ea7d))
 
 ### Features
diff --git a/changelogs/CHANGELOG-3.1.md b/changelogs/CHANGELOG-3.1.md
index 308b2f6ba55..def81631514 100644
--- a/changelogs/CHANGELOG-3.1.md
+++ b/changelogs/CHANGELOG-3.1.md
@@ -28,7 +28,7 @@
 
 - **build:** avoid using async/await syntax ([438754a](https://github.com/vuejs/core/commit/438754a0d1428d10e27d1a290beb4b81da5fdaeb))
 - **build:** fix generated code containing unprocessed class field syntax ([2788154](https://github.com/vuejs/core/commit/2788154f7707928f1dd3e4d9bd144f758a8c0478)), closes [#4052](https://github.com/vuejs/core/issues/4052) [vuejs/vue-cli#6562](https://github.com/vuejs/vue-cli/issues/6562)
-- **codegen:** ensure valid types in genreated code when using global directives ([a44d528](https://github.com/vuejs/core/commit/a44d528af1227c05dedf610b6ec45504d8e58276)), closes [#4054](https://github.com/vuejs/core/issues/4054)
+- **codegen:** ensure valid types in generated code when using global directives ([a44d528](https://github.com/vuejs/core/commit/a44d528af1227c05dedf610b6ec45504d8e58276)), closes [#4054](https://github.com/vuejs/core/issues/4054)
 - **compiler-sfc:** fix parse-only mode when there is no script setup block ([253ca27](https://github.com/vuejs/core/commit/253ca2729d808fc051215876aa4af986e4caa43c))
 - **runtime-core:** add useAttrs and useSlots export ([#4053](https://github.com/vuejs/core/issues/4053)) ([735ada1](https://github.com/vuejs/core/commit/735ada1507623b8d36e80b30a4f67a8af4a45c99))
 - **runtime-core:** fix instance accessed via $parent chain when using expose() ([#4048](https://github.com/vuejs/core/issues/4048)) ([12cf9f4](https://github.com/vuejs/core/commit/12cf9f4ea148a59fd9002ecf9ea9d365829ce37c))
@@ -114,7 +114,7 @@
 ### Performance Improvements
 
 - only trigger `$attrs` update when it has actually changed ([5566d39](https://github.com/vuejs/core/commit/5566d39d467ebdd4e4234bc97d62600ff01ea28e))
-- **compiler:** skip unncessary checks when parsing end tag ([048ac29](https://github.com/vuejs/core/commit/048ac299f35709b25ae1bc1efa67d2abc53dbc3b))
+- **compiler:** skip unnecessary checks when parsing end tag ([048ac29](https://github.com/vuejs/core/commit/048ac299f35709b25ae1bc1efa67d2abc53dbc3b))
 - avoid deopt for props/emits normalization when global mixins are used ([51d2be2](https://github.com/vuejs/core/commit/51d2be20386d4dc59006d31a1cc96676871027ce))
 
 ### Deprecations
@@ -181,7 +181,7 @@
 * **compat:** avoid accidentally delete the modelValue prop ([#3772](https://github.com/vuejs/core/issues/3772)) ([4f17be7](https://github.com/vuejs/core/commit/4f17be7b1ce4872ded085a36b95c1897d8c1f299))
 * **compat:** enum coercion warning ([#3755](https://github.com/vuejs/core/issues/3755)) ([f01aadf](https://github.com/vuejs/core/commit/f01aadf2a16a7bef422eb039d7b157bef9ad32fc))
 * **compiler-core:** fix whitespace management for slots with whitespace: 'preserve' ([#3767](https://github.com/vuejs/core/issues/3767)) ([47da921](https://github.com/vuejs/core/commit/47da92146c9fb3fa6b1e250e064ca49b74d815e4)), closes [#3766](https://github.com/vuejs/core/issues/3766)
-* **compiler-dom:** comments in the v-if branchs should be ignored when used in Transition ([#3622](https://github.com/vuejs/core/issues/3622)) ([7c74feb](https://github.com/vuejs/core/commit/7c74feb3dc6beae7ff3ad22193be3b5a0f4d8aac)), closes [#3619](https://github.com/vuejs/core/issues/3619)
+* **compiler-dom:** comments in the v-if branches should be ignored when used in Transition ([#3622](https://github.com/vuejs/core/issues/3622)) ([7c74feb](https://github.com/vuejs/core/commit/7c74feb3dc6beae7ff3ad22193be3b5a0f4d8aac)), closes [#3619](https://github.com/vuejs/core/issues/3619)
 * **compiler-sfc:** support tsx in setup script ([#3825](https://github.com/vuejs/core/issues/3825)) ([01e8ba8](https://github.com/vuejs/core/commit/01e8ba8f873afe3857a23fb68b44fdc057e31781)), closes [#3808](https://github.com/vuejs/core/issues/3808)
 * **compiler-ssr:** disable hoisting in compiler-ssr ([3ef1fcc](https://github.com/vuejs/core/commit/3ef1fcc8590da186664197a0a82e7856011c1693)), closes [#3536](https://github.com/vuejs/core/issues/3536)
 * **devtools:** send update to component owning the slot ([1355ee2](https://github.com/vuejs/core/commit/1355ee27a65d466bfe8f3a7ba99aa2213e25bc50))
@@ -265,7 +265,7 @@
 - **compat:** avoid accidentally delete the modelValue prop ([#3772](https://github.com/vuejs/core/issues/3772)) ([4f17be7](https://github.com/vuejs/core/commit/4f17be7b1ce4872ded085a36b95c1897d8c1f299))
 - **compat:** enum coercion warning ([#3755](https://github.com/vuejs/core/issues/3755)) ([f01aadf](https://github.com/vuejs/core/commit/f01aadf2a16a7bef422eb039d7b157bef9ad32fc))
 - **compiler-core:** fix whitespace management for slots with whitespace: 'preserve' ([#3767](https://github.com/vuejs/core/issues/3767)) ([47da921](https://github.com/vuejs/core/commit/47da92146c9fb3fa6b1e250e064ca49b74d815e4)), closes [#3766](https://github.com/vuejs/core/issues/3766)
-- **compiler-dom:** comments in the v-if branchs should be ignored when used in Transition ([#3622](https://github.com/vuejs/core/issues/3622)) ([7c74feb](https://github.com/vuejs/core/commit/7c74feb3dc6beae7ff3ad22193be3b5a0f4d8aac)), closes [#3619](https://github.com/vuejs/core/issues/3619)
+- **compiler-dom:** comments in the v-if branches should be ignored when used in Transition ([#3622](https://github.com/vuejs/core/issues/3622)) ([7c74feb](https://github.com/vuejs/core/commit/7c74feb3dc6beae7ff3ad22193be3b5a0f4d8aac)), closes [#3619](https://github.com/vuejs/core/issues/3619)
 - **compiler-sfc:** support tsx in setup script ([#3825](https://github.com/vuejs/core/issues/3825)) ([01e8ba8](https://github.com/vuejs/core/commit/01e8ba8f873afe3857a23fb68b44fdc057e31781)), closes [#3808](https://github.com/vuejs/core/issues/3808)
 - **compiler-ssr:** disable hoisting in compiler-ssr ([3ef1fcc](https://github.com/vuejs/core/commit/3ef1fcc8590da186664197a0a82e7856011c1693)), closes [#3536](https://github.com/vuejs/core/issues/3536)
 - **devtools:** send update to component owning the slot ([1355ee2](https://github.com/vuejs/core/commit/1355ee27a65d466bfe8f3a7ba99aa2213e25bc50))
@@ -317,4 +317,4 @@
 ### Performance Improvements
 
 - only trigger $attrs update when it has actually changed ([5566d39](https://github.com/vuejs/core/commit/5566d39d467ebdd4e4234bc97d62600ff01ea28e))
-- **compiler:** skip unncessary checks when parsing end tag ([048ac29](https://github.com/vuejs/core/commit/048ac299f35709b25ae1bc1efa67d2abc53dbc3b))
+- **compiler:** skip unnecessary checks when parsing end tag ([048ac29](https://github.com/vuejs/core/commit/048ac299f35709b25ae1bc1efa67d2abc53dbc3b))
diff --git a/changelogs/CHANGELOG-3.2.md b/changelogs/CHANGELOG-3.2.md
index 341b4ecfdf8..cb09044d788 100644
--- a/changelogs/CHANGELOG-3.2.md
+++ b/changelogs/CHANGELOG-3.2.md
@@ -26,7 +26,7 @@
 * **reactivity-transform:** fix $$ escape edge cases ([e06d3b6](https://github.com/vuejs/core/commit/e06d3b614ea518e9cdf83fca9200fc816eb4e5a1)), closes [#6312](https://github.com/vuejs/core/issues/6312) [#6944](https://github.com/vuejs/core/issues/6944)
 * **reactivity-transform:** prohibit const assignment at compile time ([#6993](https://github.com/vuejs/core/issues/6993)) ([3427052](https://github.com/vuejs/core/commit/3427052229db3448252d938292a40e960a0f4b9c)), closes [#6992](https://github.com/vuejs/core/issues/6992)
 * **reactivity:** `triggerRef` working with `toRef` from reactive ([#7507](https://github.com/vuejs/core/issues/7507)) ([e64c9ae](https://github.com/vuejs/core/commit/e64c9ae957aa2606b55e8652bbde30a6ada59fb0))
-* **reactivity:** ensure watch(Effect) can run independent of unmounted instance if created in a detatched effectScope (fix [#7319](https://github.com/vuejs/core/issues/7319)) ([#7330](https://github.com/vuejs/core/issues/7330)) ([cd7c887](https://github.com/vuejs/core/commit/cd7c887b755810aedf83f3d458cb956d5b147f6f))
+* **reactivity:** ensure watch(Effect) can run independent of unmounted instance if created in a detached effectScope (fix [#7319](https://github.com/vuejs/core/issues/7319)) ([#7330](https://github.com/vuejs/core/issues/7330)) ([cd7c887](https://github.com/vuejs/core/commit/cd7c887b755810aedf83f3d458cb956d5b147f6f))
 * **reactivity:** track hasOwnProperty ([588bd44](https://github.com/vuejs/core/commit/588bd44f036b79d7dee5d23661aa7244f70e6beb)), closes [#2619](https://github.com/vuejs/core/issues/2619) [#2621](https://github.com/vuejs/core/issues/2621)
 * **runtime-core:** ensure prop type validation warning shows custom class names  ([#7198](https://github.com/vuejs/core/issues/7198)) ([620327d](https://github.com/vuejs/core/commit/620327d527593c6263a21500baddbae1ebc30db8))
 * **runtime-core:** fix keep-alive cache prune logic on vnodes with same type but different keys ([#7510](https://github.com/vuejs/core/issues/7510)) ([1fde49c](https://github.com/vuejs/core/commit/1fde49c0f57cc50fedf91366a274c9759d1d9a39)), closes [#7355](https://github.com/vuejs/core/issues/7355)
@@ -126,7 +126,7 @@
 * **transition/keep-alive:** fix unmount bug for component with out-in transition ([#6839](https://github.com/vuejs/core/issues/6839)) ([64e6d92](https://github.com/vuejs/core/commit/64e6d9221d353598b5f61c158c978d80e3b4628c)), closes [#6835](https://github.com/vuejs/core/issues/6835)
 * **types/reactivity-transform:** fix type when initial value is not used ([#6821](https://github.com/vuejs/core/issues/6821)) ([fdc5902](https://github.com/vuejs/core/commit/fdc5902cce0d077c722dfd422850ca69fd51be8e)), closes [#6820](https://github.com/vuejs/core/issues/6820)
 * **types:** `$watch` callback parameters type ([#6136](https://github.com/vuejs/core/issues/6136)) ([41d9c47](https://github.com/vuejs/core/commit/41d9c47300888fce9d4ff6a02f69d8a912cded8f)), closes [#6135](https://github.com/vuejs/core/issues/6135)
-* **types:** ensure createBlock() helper accepts Teleport and Supsense types (fix: [#2855](https://github.com/vuejs/core/issues/2855)) ([#5458](https://github.com/vuejs/core/issues/5458)) ([e5fc7dc](https://github.com/vuejs/core/commit/e5fc7dcc02f2dd3fa8172958259049031626375f))
+* **types:** ensure createBlock() helper accepts Teleport and Suspense types (fix: [#2855](https://github.com/vuejs/core/issues/2855)) ([#5458](https://github.com/vuejs/core/issues/5458)) ([e5fc7dc](https://github.com/vuejs/core/commit/e5fc7dcc02f2dd3fa8172958259049031626375f))
 * **types:** export `Raw` type ([#6380](https://github.com/vuejs/core/issues/6380)) ([e9172db](https://github.com/vuejs/core/commit/e9172db68b86fad2e0bb1de9e5d0dddbe3c2a25e)), closes [#7048](https://github.com/vuejs/core/issues/7048)
 * **types:** should unwrap tuple correctly ([#3820](https://github.com/vuejs/core/issues/3820)) ([e816812](https://github.com/vuejs/core/commit/e816812f10b9e3a375eef8dffd617d7f08b23c00)), closes [#3819](https://github.com/vuejs/core/issues/3819)
 * **types:** stricter type condition for `EventHandlers` ([#6855](https://github.com/vuejs/core/issues/6855)) ([bad3f3c](https://github.com/vuejs/core/commit/bad3f3ce46aad1f5fec47d1d02aee26af393bcff)), closes [#6899](https://github.com/vuejs/core/issues/6899)
@@ -714,7 +714,7 @@
 * **compiler-core:** avoid runtime dependency on @babel/types ([1045590](https://github.com/vuejs/core/commit/1045590d4bbaf4a2b05311f11b22a0b3d22cf609)), closes [#4531](https://github.com/vuejs/core/issues/4531)
 * **compiler-core:** pick last char when dynamic directive doesn't close ([#4507](https://github.com/vuejs/core/issues/4507)) ([5d262e0](https://github.com/vuejs/core/commit/5d262e08d5d5fb29f48ba5fa5b97a9a3e34b9d4b))
 * **compiler:** condense whitespaces in static class attributes ([#4432](https://github.com/vuejs/core/issues/4432)) ([b8653d3](https://github.com/vuejs/core/commit/b8653d390a555e1ee3f92a1c49cfd8800c67e46a)), closes [#4251](https://github.com/vuejs/core/issues/4251)
-* **runtime-dom:** style patching shoud always preserve v-show display property ([d534515](https://github.com/vuejs/core/commit/d53451583684c37bda7d30bff912216e1a58126f)), closes [#4424](https://github.com/vuejs/core/issues/4424)
+* **runtime-dom:** style patching should always preserve v-show display property ([d534515](https://github.com/vuejs/core/commit/d53451583684c37bda7d30bff912216e1a58126f)), closes [#4424](https://github.com/vuejs/core/issues/4424)
 * **type:** fix prop type infer ([#4530](https://github.com/vuejs/core/issues/4530)) ([4178d5d](https://github.com/vuejs/core/commit/4178d5d7d9549a0a1d19663bc2f92c8ac6a731b2)), closes [#4525](https://github.com/vuejs/core/issues/4525)
 
 
@@ -741,7 +741,7 @@
 
 * **compiler-sfc:** ensure script setup generates type-valid ts output ([bacb201](https://github.com/vuejs/core/commit/bacb2012acb4045a2db6988ba4545a7655d6ca14)), closes [#4455](https://github.com/vuejs/core/issues/4455)
 * **compiler-sfc:** generate matching prop types when withDefaults is used ([#4466](https://github.com/vuejs/core/issues/4466)) ([8580796](https://github.com/vuejs/core/commit/85807967dc874e6ea6b20f341875beda938e3058)), closes [#4455](https://github.com/vuejs/core/issues/4455)
-* **compiler:** generate function ref for script setup if inline is ture. ([#4492](https://github.com/vuejs/core/issues/4492)) ([4cd282b](https://github.com/vuejs/core/commit/4cd282b0a17589ef9ca2649e7beb0bdee4a73c57))
+* **compiler:** generate function ref for script setup if inline is true. ([#4492](https://github.com/vuejs/core/issues/4492)) ([4cd282b](https://github.com/vuejs/core/commit/4cd282b0a17589ef9ca2649e7beb0bdee4a73c57))
 * **compiler:** report invalid directive name error ([#4494](https://github.com/vuejs/core/issues/4494)) ([#4495](https://github.com/vuejs/core/issues/4495)) ([c00925e](https://github.com/vuejs/core/commit/c00925ed5c409b57a1540b79c595b7f8117e2d4c))
 * **types:** include ref-macros.d.ts in npm dist files ([d7f1b77](https://github.com/vuejs/core/commit/d7f1b771f80ab9014a4701913b50458fd251a117)), closes [#4433](https://github.com/vuejs/core/issues/4433)
 
@@ -798,7 +798,7 @@
 ### Bug Fixes
 
 * **compiler-sfc:** fix import usage check for lowercase imported components ([57f1081](https://github.com/vuejs/core/commit/57f10812cc7f1e9f6c92736c36aba577943996fd)), closes [#4358](https://github.com/vuejs/core/issues/4358)
-* **runtime-core:** ensure consistent arguments for tempalte and render funtion slot usage ([644971e](https://github.com/vuejs/core/commit/644971ec06642817cf7e720ad4980182d2140f53)), closes [#4367](https://github.com/vuejs/core/issues/4367)
+* **runtime-core:** ensure consistent arguments for template and render function slot usage ([644971e](https://github.com/vuejs/core/commit/644971ec06642817cf7e720ad4980182d2140f53)), closes [#4367](https://github.com/vuejs/core/issues/4367)
 * **runtime-core:** fix child component double update on props change ([c1f564e](https://github.com/vuejs/core/commit/c1f564e1dc40eda9af657c30cd787a8d770dde0f)), closes [#4365](https://github.com/vuejs/core/issues/4365)
 
 
diff --git a/changelogs/CHANGELOG-3.3.md b/changelogs/CHANGELOG-3.3.md
index cc55c3bec18..ae3d6b5ccbf 100644
--- a/changelogs/CHANGELOG-3.3.md
+++ b/changelogs/CHANGELOG-3.3.md
@@ -259,7 +259,7 @@
 
 * **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:** support more ergonomic 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))
@@ -483,7 +483,7 @@
 * **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))
+* **sfc:** support more ergonomic 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))
 
 
@@ -544,7 +544,7 @@
 
 ### Bug Fixes
 
-* **runtime-core:** support `getCurrentInstance` across mutiple builds of Vue ([8d2d5bf](https://github.com/vuejs/core/commit/8d2d5bf48a24dab44e5b03cb8fa0c5faa4b696e3))
+* **runtime-core:** support `getCurrentInstance` across multiple 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))
 
 
diff --git a/changelogs/CHANGELOG-3.4.md b/changelogs/CHANGELOG-3.4.md
new file mode 100644
index 00000000000..db4bcdcb654
--- /dev/null
+++ b/changelogs/CHANGELOG-3.4.md
@@ -0,0 +1,901 @@
+## [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 function 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 async 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 incorrect 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.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.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.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.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.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 00000000000..b752b2e19f1
--- /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/netlify.toml b/netlify.toml
index 277cc55a7ce..b7304df1615 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,3 +1,3 @@
 [build.environment]
-  NODE_VERSION = "18"
+  NODE_VERSION = "22"
   NPM_FLAGS = "--version" # prevent Netlify npm install
diff --git a/package.json b/package.json
index 86ab01032b0..03af5bb0971 100644
--- a/package.json
+++ b/package.json
@@ -1,44 +1,47 @@
 {
   "private": true,
-  "version": "3.4.18",
-  "packageManager": "pnpm@8.15.1",
+  "version": "3.5.18",
+  "packageManager": "pnpm@10.13.1",
   "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 .js,.ts,.tsx . --ignore-path .gitignore",
+    "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-bench": "vitest bench",
+    "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",
+    "prebench": "node scripts/build.js -pf esm-browser reactivity",
+    "prebench-compare": "node scripts/build.js -pf esm-browser reactivity",
+    "bench": "vitest bench --project=unit --outputJson=temp/bench.json",
+    "bench-compare": "vitest bench --project=unit --compare=temp/bench.json",
     "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",
+    "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"
   },
@@ -59,60 +62,54 @@
     "node": ">=18.12.0"
   },
   "devDependencies": {
-    "@babel/parser": "^7.23.9",
-    "@babel/types": "^7.23.9",
-    "@codspeed/vitest-plugin": "^2.3.1",
-    "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@babel/parser": "catalog:",
+    "@babel/types": "catalog:",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "5.0.4",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@swc/core": "^1.13.1",
     "@types/hash-sum": "^1.0.2",
-    "@types/minimist": "^1.2.5",
-    "@types/node": "^20.11.16",
-    "@types/semver": "^7.5.6",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
-    "@vitest/coverage-istanbul": "^1.2.2",
-    "@vue/consolidate": "0.17.3",
-    "conventional-changelog-cli": "^4.1.0",
+    "@types/node": "^22.16.5",
+    "@types/semver": "^7.7.0",
+    "@types/serve-handler": "^6.1.4",
+    "@vitest/coverage-v8": "^3.1.4",
+    "@vitest/eslint-plugin": "^1.2.1",
+    "@vue/consolidate": "1.0.0",
+    "conventional-changelog-cli": "^5.0.0",
     "enquirer": "^2.4.1",
-    "esbuild": "^0.20.0",
+    "esbuild": "^0.25.8",
     "esbuild-plugin-polyfill-node": "^0.3.0",
-    "eslint": "^8.56.0",
-    "eslint-define-config": "^1.24.1",
-    "eslint-plugin-import": "npm:eslint-plugin-i@^2.29.1",
-    "eslint-plugin-jest": "^27.6.3",
-    "estree-walker": "^2.0.2",
-    "execa": "^8.0.1",
-    "jsdom": "^23.2.0",
-    "lint-staged": "^15.2.0",
+    "eslint": "^9.27.0",
+    "eslint-plugin-import-x": "^4.13.1",
+    "estree-walker": "catalog:",
+    "jsdom": "^26.1.0",
+    "lint-staged": "^16.0.0",
     "lodash": "^4.17.21",
-    "magic-string": "^0.30.6",
-    "markdown-table": "^3.0.3",
-    "marked": "^11.2.0",
-    "minimist": "^1.2.8",
-    "npm-run-all2": "^5.0.2",
-    "picocolors": "^1.0.0",
-    "prettier": "^3.2.2",
+    "magic-string": "^0.30.17",
+    "markdown-table": "^3.0.4",
+    "marked": "13.0.3",
+    "npm-run-all2": "^7.0.2",
+    "picocolors": "^1.1.1",
+    "prettier": "^3.5.3",
     "pretty-bytes": "^6.1.1",
-    "pug": "^3.0.2",
-    "puppeteer": "~21.11.0",
-    "rimraf": "^5.0.5",
-    "rollup": "4.9.2",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-esbuild": "^6.1.1",
+    "pug": "^3.0.3",
+    "puppeteer": "~24.9.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.45.1",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-esbuild": "^6.2.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
-    "semver": "^7.5.4",
-    "serve": "^14.2.1",
-    "simple-git-hooks": "^2.9.0",
-    "terser": "^5.27.0",
+    "semver": "^7.7.2",
+    "serve": "^14.2.4",
+    "serve-handler": "^6.1.6",
+    "simple-git-hooks": "^2.13.0",
     "todomvc-app-css": "^2.4.3",
-    "tslib": "^2.6.2",
-    "tsx": "^4.7.0",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.12",
-    "vitest": "^1.2.2"
+    "tslib": "^2.8.1",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.32.1",
+    "vite": "catalog:",
+    "vitest": "^3.1.4"
   }
 }
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 8191d66e32e..5c14f2190cc 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 dca0f80fae8..ffcaa4a676a 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 100%
rename from packages/dts-built-test/src/index.ts
rename to packages-private/dts-built-test/src/index.ts
diff --git a/packages-private/dts-built-test/tsconfig.json b/packages-private/dts-built-test/tsconfig.json
new file mode 100644
index 00000000000..99d9024dcbe
--- /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 00000000000..075fc3431cd
--- /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 00000000000..59101c22ec8
--- /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 75%
rename from packages/dts-test/appUse.test-d.ts
rename to packages-private/dts-test/appUse.test-d.ts
index 065f6956865..21d702c9c04 100644
--- a/packages/dts-test/appUse.test-d.ts
+++ b/packages-private/dts-test/appUse.test-d.ts
@@ -12,8 +12,11 @@ app.use(PluginWithoutType, 2)
 app.use(PluginWithoutType, { anything: 'goes' }, true)
 
 type PluginOptions = {
+  /** option1 */
   option1?: string
+  /** option2 */
   option2: number
+  /** option3 */
   option3: boolean
 }
 
@@ -25,6 +28,20 @@ const PluginWithObjectOptions = {
   },
 }
 
+const objectPluginOptional = {
+  install(app: App, options?: PluginOptions) {},
+}
+app.use(objectPluginOptional)
+app.use(
+  objectPluginOptional,
+  // Test JSDoc and `go to definition` for options
+  {
+    option1: 'foo',
+    option2: 1,
+    option3: true,
+  },
+)
+
 for (const Plugin of [
   PluginWithObjectOptions,
   PluginWithObjectOptions.install,
@@ -92,7 +109,27 @@ const PluginTyped: Plugin<PluginOptions> = (app, options) => {}
 
 // @ts-expect-error: needs options
 app.use(PluginTyped)
-app.use(PluginTyped, { option2: 2, option3: true })
+app.use(
+  PluginTyped,
+  // Test autocomplete for options
+  {
+    option1: '',
+    option2: 2,
+    option3: true,
+  },
+)
+
+const functionPluginOptional = (app: App, options?: PluginOptions) => {}
+app.use(functionPluginOptional)
+app.use(functionPluginOptional, { option2: 2, option3: true })
+
+// type optional params
+const functionPluginOptional2: Plugin<[options?: PluginOptions]> = (
+  app,
+  options,
+) => {}
+app.use(functionPluginOptional2)
+app.use(functionPluginOptional2, { option2: 2, option3: true })
 
 // vuetify usage
 const key: string = ''
diff --git a/packages/dts-test/built.test-d.ts b/packages-private/dts-test/built.test-d.ts
similarity index 82%
rename from packages/dts-test/built.test-d.ts
rename to packages-private/dts-test/built.test-d.ts
index ebff2955cfb..c2b4fb6d839 100644
--- a/packages/dts-test/built.test-d.ts
+++ b/packages-private/dts-test/built.test-d.ts
@@ -1,4 +1,4 @@
-import { CustomPropsNotErased } from '@vue/dts-built-test'
+import { CustomPropsNotErased } from 'dts-built-test/src/index'
 import { describe, expectType } from './utils'
 
 declare module 'vue' {
diff --git a/packages/dts-test/compiler.test-d.ts b/packages-private/dts-test/compiler.test-d.ts
similarity index 100%
rename from packages/dts-test/compiler.test-d.ts
rename to packages-private/dts-test/compiler.test-d.ts
diff --git a/packages/dts-test/component.test-d.ts b/packages-private/dts-test/component.test-d.ts
similarity index 100%
rename from packages/dts-test/component.test-d.ts
rename to packages-private/dts-test/component.test-d.ts
diff --git a/packages/dts-test/componentInstance.test-d.tsx b/packages-private/dts-test/componentInstance.test-d.tsx
similarity index 90%
rename from packages/dts-test/componentInstance.test-d.tsx
rename to packages-private/dts-test/componentInstance.test-d.tsx
index a804bb10d5d..c6911d3a8ca 100644
--- a/packages/dts-test/componentInstance.test-d.tsx
+++ b/packages-private/dts-test/componentInstance.test-d.tsx
@@ -137,3 +137,18 @@ describe('Generic component', () => {
   expectType<string | number>(comp.msg)
   expectType<Array<string | number>>(comp.list)
 })
+
+// #12751
+{
+  const Comp = defineComponent({
+    __typeEmits: {} as {
+      'update:visible': [value?: boolean]
+    },
+  })
+  const comp: ComponentInstance<typeof Comp> = {} as any
+
+  expectType<((value?: boolean) => any) | undefined>(comp['onUpdate:visible'])
+  expectType<{ 'onUpdate:visible'?: (value?: boolean) => any }>(comp['$props'])
+  // @ts-expect-error
+  comp['$props']['$props']
+}
diff --git a/packages/dts-test/componentTypeExtensions.test-d.tsx b/packages-private/dts-test/componentTypeExtensions.test-d.tsx
similarity index 80%
rename from packages/dts-test/componentTypeExtensions.test-d.tsx
rename to packages-private/dts-test/componentTypeExtensions.test-d.tsx
index 68364191945..fe58c0a6449 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'
   }
@@ -46,6 +54,8 @@ export const Custom = defineComponent({
   },
 })
 
+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 74%
rename from packages/dts-test/defineComponent.test-d.tsx
rename to packages-private/dts-test/defineComponent.test-d.tsx
index 41646751b8b..1967668dceb 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages-private/dts-test/defineComponent.test-d.tsx
@@ -15,11 +15,14 @@ import {
   withKeys,
   withModifiers,
 } from 'vue'
-import { type IsUnion, describe, expectType } from './utils'
+import { type IsAny, type IsUnion, describe, expectType } from './utils'
 
 describe('with object props', () => {
   interface ExpectedProps {
     a?: number | undefined
+    aa: number
+    aaa: number | null
+    aaaa: number | undefined
     b: string
     e?: Function
     h: boolean
@@ -53,6 +56,19 @@ describe('with object props', () => {
 
   const props = {
     a: Number,
+    aa: {
+      type: Number as PropType<number | undefined>,
+      default: 1,
+    },
+    aaa: {
+      type: Number as PropType<number | null>,
+      default: 1,
+    },
+    aaaa: {
+      type: Number as PropType<number | undefined>,
+      // `as const` prevents widening to `boolean` (keeps literal `true` type)
+      required: true as const,
+    },
     // required should make property non-void
     b: {
       type: String,
@@ -146,6 +162,13 @@ describe('with object props', () => {
     setup(props) {
       // type assertion. See https://github.com/SamVerschueren/tsd
       expectType<ExpectedProps['a']>(props.a)
+      expectType<ExpectedProps['aa']>(props.aa)
+      expectType<ExpectedProps['aaa']>(props.aaa)
+
+      // @ts-expect-error should included `undefined`
+      expectType<number>(props.aaaa)
+      expectType<ExpectedProps['aaaa']>(props.aaaa)
+
       expectType<ExpectedProps['b']>(props.b)
       expectType<ExpectedProps['e']>(props.e)
       expectType<ExpectedProps['h']>(props.h)
@@ -198,6 +221,8 @@ describe('with object props', () => {
     render() {
       const props = this.$props
       expectType<ExpectedProps['a']>(props.a)
+      expectType<ExpectedProps['aa']>(props.aa)
+      expectType<ExpectedProps['aaa']>(props.aaa)
       expectType<ExpectedProps['b']>(props.b)
       expectType<ExpectedProps['e']>(props.e)
       expectType<ExpectedProps['h']>(props.h)
@@ -225,6 +250,8 @@ describe('with object props', () => {
 
       // should also expose declared props on `this`
       expectType<ExpectedProps['a']>(this.a)
+      expectType<ExpectedProps['aa']>(this.aa)
+      expectType<ExpectedProps['aaa']>(this.aaa)
       expectType<ExpectedProps['b']>(this.b)
       expectType<ExpectedProps['e']>(this.e)
       expectType<ExpectedProps['h']>(this.h)
@@ -269,6 +296,7 @@ describe('with object props', () => {
   expectType<JSX.Element>(
     <MyComponent
       a={1}
+      aaaa={1}
       b="b"
       bb="bb"
       e={() => {}}
@@ -295,6 +323,7 @@ describe('with object props', () => {
 
   expectType<Component>(
     <MyComponent
+      aaaa={1}
       b="b"
       dd={{ n: 1 }}
       ddd={['ddd']}
@@ -480,6 +509,26 @@ describe('type inference w/ options API', () => {
   })
 })
 
+// #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'],
@@ -906,12 +955,15 @@ describe('emits', () => {
     emits: {
       click: (n: number) => typeof n === 'number',
       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 +974,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 +992,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,6 +1014,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)
       })
     },
   })
@@ -1006,6 +1070,18 @@ 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 }) {
@@ -1501,18 +1577,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} />
 })
 
+// #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,
+  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 +1699,411 @@ 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)
+
+// #12122
+defineComponent({
+  props: { foo: String },
+  render() {
+    expectType<{ readonly foo?: string }>(this.$props)
+    // @ts-expect-error
+    expectType<string>(this.$props)
+  },
+})
diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages-private/dts-test/defineCustomElement.test-d.ts
similarity index 55%
rename from packages/dts-test/defineCustomElement.test-d.ts
rename to packages-private/dts-test/defineCustomElement.test-d.ts
index 2d48dbc1bc9..f81f8b8fa61 100644
--- a/packages/dts-test/defineCustomElement.test-d.ts
+++ b/packages-private/dts-test/defineCustomElement.test-d.ts
@@ -68,7 +68,7 @@ describe('inject', () => {
 })
 
 describe('defineCustomElement using defineComponent return type', () => {
-  test('with emits', () => {
+  test('with object emits', () => {
     const Comp1Vue = defineComponent({
       props: {
         a: String,
@@ -80,6 +80,56 @@ describe('defineCustomElement using defineComponent return type', () => {
     const Comp = defineCustomElement(Comp1Vue)
     expectType<VueElementConstructor>(Comp)
 
-    expectType<string | undefined>(new Comp().a)
+    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 00000000000..6a478b673d9
--- /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: Partial<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 100%
rename from packages/dts-test/extractProps.test-d.ts
rename to packages-private/dts-test/extractProps.test-d.ts
diff --git a/packages/dts-test/functionalComponent.test-d.tsx b/packages-private/dts-test/functionalComponent.test-d.tsx
similarity index 100%
rename from packages/dts-test/functionalComponent.test-d.tsx
rename to packages-private/dts-test/functionalComponent.test-d.tsx
diff --git a/packages/dts-test/h.test-d.ts b/packages-private/dts-test/h.test-d.ts
similarity index 100%
rename from packages/dts-test/h.test-d.ts
rename to packages-private/dts-test/h.test-d.ts
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 55116f5692e..e545ef623d0 100644
--- a/packages/dts-test/inject.test-d.ts
+++ b/packages-private/dts-test/inject.test-d.ts
@@ -1,4 +1,12 @@
-import { type InjectionKey, type Ref, inject, provide, ref } 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 a6ea96bfa86..72b1b6ea630 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 92%
rename from packages/dts-test/reactivity.test-d.ts
rename to packages-private/dts-test/reactivity.test-d.ts
index ec220f68198..f5b9176729c 100644
--- a/packages/dts-test/reactivity.test-d.ts
+++ b/packages-private/dts-test/reactivity.test-d.ts
@@ -120,3 +120,13 @@ describe('should unwrap extended Set correctly', () => {
   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 84%
rename from packages/dts-test/ref.test-d.ts
rename to packages-private/dts-test/ref.test-d.ts
index 5d4c9d95dab..cf99b7bca7a 100644
--- a/packages/dts-test/ref.test-d.ts
+++ b/packages-private/dts-test/ref.test-d.ts
@@ -4,7 +4,9 @@ import {
   type MaybeRefOrGetter,
   type Ref,
   type ShallowRef,
+  type TemplateRef,
   type ToRefs,
+  type WritableComputedRef,
   computed,
   isRef,
   proxyRefs,
@@ -17,6 +19,7 @@ import {
   toRefs,
   toValue,
   unref,
+  useTemplateRef,
 } from 'vue'
 import { type IsAny, type IsUnion, describe, expectType } from './utils'
 
@@ -172,6 +175,67 @@ describe('ref with generic', <T extends { name: string }>() => {
   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')
@@ -452,3 +516,27 @@ describe('toRef <-> toValue', () => {
     ),
   )
 })
+
+// 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<TemplateRef>(tRef)
+
+const tRef2 = useTemplateRef<HTMLElement>('bar')
+expectType<TemplateRef<HTMLElement>>(tRef2)
diff --git a/packages/dts-test/setupHelpers.test-d.ts b/packages-private/dts-test/setupHelpers.test-d.ts
similarity index 74%
rename from packages/dts-test/setupHelpers.test-d.ts
rename to packages-private/dts-test/setupHelpers.test-d.ts
index c749e80a5c7..656f1da79f2 100644
--- a/packages/dts-test/setupHelpers.test-d.ts
+++ b/packages-private/dts-test/setupHelpers.test-d.ts
@@ -5,6 +5,7 @@ import {
   defineComponent,
   defineEmits,
   defineModel,
+  defineOptions,
   defineProps,
   defineSlots,
   toRefs,
@@ -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,
@@ -64,6 +67,7 @@ describe('defineProps w/ type declaration + withDefaults', () => {
       genStr: () => '',
       y: undefined,
       z: 'string',
+      foo: '' as any,
     },
   )
 
@@ -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)
@@ -102,6 +107,66 @@ describe('defineProps w/ union type declaration + withDefaults', () => {
   )
 })
 
+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
@@ -162,6 +227,36 @@ describe('withDefaults w/ boolean type', () => {
   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('withDefaults w/ defineProp discriminate union type', () => {
+  const props = withDefaults(
+    defineProps<
+      { type: 'button'; buttonType?: 'submit' } | { type: 'link'; href: string }
+    >(),
+    {
+      type: 'button',
+    },
+  )
+  if (props.type === 'button') {
+    expectType<'submit' | undefined>(props.buttonType)
+  }
+  if (props.type === 'link') {
+    expectType<string>(props.href)
+  }
+})
+
 describe('defineProps w/ runtime declaration', () => {
   // runtime declaration
   const props = defineProps({
@@ -211,6 +306,14 @@ describe('defineEmits w/ type declaration', () => {
   emit2('baz')
 })
 
+describe('defineEmits w/ interface declaration', () => {
+  interface Emits {
+    foo: [value: string]
+  }
+  const emit = defineEmits<Emits>()
+  emit('foo', 'hi')
+})
+
 describe('defineEmits w/ alt type declaration', () => {
   const emit = defineEmits<{
     foo: [id: string]
@@ -349,6 +452,51 @@ describe('defineModel', () => {
   defineModel<string>({ default: 123 })
   // @ts-expect-error unknown props option
   defineModel({ foo: 123 })
+
+  // 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', () => {
@@ -466,3 +614,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 98%
rename from packages/dts-test/tsx.test-d.tsx
rename to packages-private/dts-test/tsx.test-d.tsx
index 63945c0629b..0cd380f0447 100644
--- a/packages/dts-test/tsx.test-d.tsx
+++ b/packages-private/dts-test/tsx.test-d.tsx
@@ -121,3 +121,5 @@ expectType<JSX.Element>(
     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/dts-test/watch.test-d.ts b/packages-private/dts-test/watch.test-d.ts
similarity index 62%
rename from packages/dts-test/watch.test-d.ts
rename to packages-private/dts-test/watch.test-d.ts
index 5986d3d30b1..6c8576f0c6b 100644
--- a/packages/dts-test/watch.test-d.ts
+++ b/packages-private/dts-test/watch.test-d.ts
@@ -1,7 +1,11 @@
 import {
+  type ComputedRef,
+  type MaybeRef,
+  type Ref,
   computed,
   defineComponent,
   defineModel,
+  reactive,
   ref,
   shallowRef,
   watch,
@@ -12,10 +16,17 @@ 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) => {
+watch(source, (value, oldValue, onCleanup) => {
   expectType<string>(value)
   expectType<string>(oldValue)
+  expectType<OnCleanup>(onCleanup)
 })
 
 watch([source, source2, source3], (values, oldValues) => {
@@ -29,6 +40,29 @@ watch([source, source2, source3] as const, (values, oldValues) => {
   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,
@@ -62,6 +96,34 @@ watch(
   { 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),
@@ -92,9 +154,10 @@ defineComponent({
   created() {
     this.$watch(
       () => this.a,
-      (v, ov) => {
+      (v, ov, onCleanup) => {
         expectType<number>(v)
         expectType<number>(ov)
+        expectType<OnCleanup>(onCleanup)
       },
     )
   },
@@ -141,3 +204,10 @@ defineComponent({
     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 00000000000..ebc2367f396
--- /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 29e8d6e9729..3a21d956cd6 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 bad87f75b12..d6cd4913c54 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": "^5.0.3",
-    "vite": "^5.0.12"
+    "@vitejs/plugin-vue": "catalog:",
+    "vite": "catalog:"
   },
   "dependencies": {
-    "@vue/repl": "^3.1.1",
+    "@vue/repl": "^4.6.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 00000000000..c0246a7ccf4
--- /dev/null
+++ b/packages-private/sfc-playground/src/App.vue
@@ -0,0 +1,206 @@
+<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, watch } 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: {} }
+})
+
+const isVaporSupported = ref(false)
+watch(
+  () => store.vueVersion,
+  (version, oldVersion) => {
+    const [major, minor] = (version || store.compiler.version)
+      .split('.')
+      .map((v: string) => parseInt(v, 10))
+    isVaporSupported.value = major > 3 || (major === 3 && minor >= 6)
+    if (oldVersion) reloadPage()
+  },
+  { immediate: true, flush: 'pre' },
+)
+
+const previewOptions = computed(() => ({
+  customCode: {
+    importCode: `import { initCustomFormatter${isVaporSupported.value ? ', vaporInteropPlugin' : ''} } from 'vue'`,
+    useCode: `
+      ${isVaporSupported.value ? 'app.use(vaporInteropPlugin)' : ''}
+      if (window.devtoolsFormatters) {
+        const index = window.devtoolsFormatters.findIndex((v) => v.__vue_custom_formatter)
+        window.devtoolsFormatters.splice(index, 1)
+        initCustomFormatter()
+      } else {
+        initCustomFormatter()
+      }`,
+  },
+}))
+</script>
+
+<template>
+  <Header
+    :store="store"
+    :prod="productionMode"
+    :ssr="useSSRMode"
+    :autoSave="autoSave"
+    :theme="theme"
+    @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"
+    :showSsrOutput="useSSRMode"
+    :showOpenSourceMap="true"
+    :autoResize="true"
+    :clearConsole="false"
+    :preview-options="previewOptions"
+  />
+</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 83%
rename from packages/sfc-playground/src/Header.vue
rename to packages-private/sfc-playground/src/Header.vue
index 48585a8e646..bf1c9bad6eb 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages-private/sfc-playground/src/Header.vue
@@ -1,51 +1,52 @@
 <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 Reload from './icons/Reload.vue'
-import type { ReplStore } from '@vue/repl'
 import VersionSelect from './VersionSelect.vue'
 
 const props = defineProps<{
   store: ReplStore
   prod: boolean
   ssr: boolean
+  autoSave: boolean
+  theme: 'dark' | 'light'
 }>()
 const emit = defineEmits([
   'toggle-theme',
   'toggle-ssr',
   'toggle-prod',
+  'toggle-autosave',
   'reload-page',
 ])
 
 const { store } = props
 
 const currentCommit = __COMMIT__
-const vueVersion = ref(`@${currentCommit}`)
 
-const vueURL = store.getImportMap().imports.vue
-if (vueURL && !vueURL.startsWith(location.origin)) {
-  const versionMatch = vueURL.match(/runtime-dom@([^/]+)/)
-  if (versionMatch) vueVersion.value = versionMatch[1]
-}
+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
+  store.vueVersion = v
 }
 
 function resetVueVersion() {
-  store.resetVueVersion()
-  vueVersion.value = `@${currentCommit}`
+  store.vueVersion = null
 }
 
 async function copyLink(e: MouseEvent) {
   if (e.metaKey) {
+    resetVueVersion()
     // hidden logic for going to local debug from play.vuejs.org
     window.location.href = 'http://localhost:5173/' + window.location.hash
     return
@@ -73,7 +74,7 @@ function toggleDark() {
     </h1>
     <div class="links">
       <VersionSelect
-        v-model="store.state.typescriptVersion"
+        v-model="store.typescriptVersion"
         pkg="typescript"
         label="TypeScript Version"
       />
@@ -83,7 +84,7 @@ function toggleDark() {
         pkg="vue"
         label="Vue Version"
       >
-        <li>
+        <li :class="{ active: vueVersion === `@${currentCommit}` }">
           <a @click="resetVueVersion">This Commit ({{ currentCommit }})</a>
         </li>
         <li>
@@ -110,7 +111,19 @@ function toggleDark() {
       >
         <span>{{ ssr ? 'SSR ON' : 'SSR OFF' }}</span>
       </button>
-      <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
+      <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="`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`"
+        class="toggle-dark"
+        @click="toggleDark"
+      >
         <Sun class="light" />
         <Moon class="dark" />
       </button>
@@ -128,7 +141,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"
@@ -202,7 +215,8 @@ h1 img {
 }
 
 .toggle-prod span,
-.toggle-ssr span {
+.toggle-ssr span,
+.toggle-autosave span {
   font-size: 12px;
   border-radius: 4px;
   padding: 4px 6px;
@@ -217,11 +231,13 @@ h1 img {
   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 77%
rename from packages/sfc-playground/src/VersionSelect.vue
rename to packages-private/sfc-playground/src/VersionSelect.vue
index 50c3c59ac24..3a30e497f97 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[]>()
@@ -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="ver of versions" :class="{ active: ver === version }">
+      <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 />
@@ -115,4 +135,17 @@ onMounted(() => {
 .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 84%
rename from packages/sfc-playground/src/download/download.ts
rename to packages-private/sfc-playground/src/download/download.ts
index f981134a701..6b051abae19 100644
--- a/packages/sfc-playground/src/download/download.ts
+++ b/packages-private/sfc-playground/src/download/download.ts
@@ -17,7 +17,10 @@ export async function downloadProject(store: ReplStore) {
 
   // basic structure
   zip.file('index.html', index)
-  zip.file('package.json', pkg)
+  zip.file(
+    'package.json',
+    pkg.replace(`"vue": "latest"`, `"vue": "${store.vueVersion || 'latest'}"`),
+  )
   zip.file('vite.config.js', config)
   zip.file('README.md', readme)
 
@@ -27,7 +30,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 39c47d255ae..91b21489fd5 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 030a6ff51bf..e631329c1b0 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 28c6334c7c0..b9bb278edf3 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.4.0"
+    "vue": "latest"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.3",
-    "vite": "^5.0.12"
+    "@vitejs/plugin-vue": "^5.2.4",
+    "vite": "^6.3.5"
   }
 }
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 100%
rename from packages/sfc-playground/src/download/template/vite.config.js
rename to packages-private/sfc-playground/src/download/template/vite.config.js
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 00000000000..f3851da63cc
--- /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/sfc-playground/src/icons/GitHub.vue b/packages-private/sfc-playground/src/icons/GitHub.vue
similarity index 100%
rename from packages/sfc-playground/src/icons/GitHub.vue
rename to packages-private/sfc-playground/src/icons/GitHub.vue
diff --git a/packages/sfc-playground/src/icons/Moon.vue b/packages-private/sfc-playground/src/icons/Moon.vue
similarity index 100%
rename from packages/sfc-playground/src/icons/Moon.vue
rename to packages-private/sfc-playground/src/icons/Moon.vue
diff --git a/packages/sfc-playground/src/icons/Reload.vue b/packages-private/sfc-playground/src/icons/Reload.vue
similarity index 100%
rename from packages/sfc-playground/src/icons/Reload.vue
rename to packages-private/sfc-playground/src/icons/Reload.vue
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/sfc-playground/src/icons/Sun.vue b/packages-private/sfc-playground/src/icons/Sun.vue
similarity index 100%
rename from packages/sfc-playground/src/icons/Sun.vue
rename to packages-private/sfc-playground/src/icons/Sun.vue
diff --git a/packages/sfc-playground/src/main.ts b/packages-private/sfc-playground/src/main.ts
similarity index 100%
rename from packages/sfc-playground/src/main.ts
rename to packages-private/sfc-playground/src/main.ts
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 83%
rename from packages/sfc-playground/src/vue-dev-proxy-prod.ts
rename to packages-private/sfc-playground/src/vue-dev-proxy-prod.ts
index c20c51579a4..3b2faf19533 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-expect-error
 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/sfc-playground/vite.config.ts b/packages-private/sfc-playground/vite.config.ts
similarity index 68%
rename from packages/sfc-playground/vite.config.ts
rename to packages-private/sfc-playground/vite.config.ts
index e30078f4b79..2e77f1970a7 100644
--- a/packages/sfc-playground/vite.config.ts
+++ b/packages-private/sfc-playground/vite.config.ts
@@ -2,9 +2,11 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { type Plugin, defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { execaSync } from 'execa'
+import { spawnSync } from 'node:child_process'
 
-const commit = execaSync('git', ['rev-parse', '--short=7', 'HEAD']).stdout
+const commit = spawnSync('git', ['rev-parse', '--short=7', 'HEAD'])
+  .stdout.toString()
+  .trim()
 
 export default defineConfig({
   plugins: [
@@ -32,7 +34,7 @@ function copyVuePlugin(): Plugin {
     name: 'copy-vue',
     generateBundle() {
       const copyFile = (file: string) => {
-        const filePath = path.resolve(__dirname, file)
+        const filePath = path.resolve(__dirname, '../../packages', file)
         const basename = path.basename(file)
         if (!fs.existsSync(filePath)) {
           throw new Error(
@@ -47,11 +49,11 @@ function copyVuePlugin(): Plugin {
         })
       }
 
-      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`)
+      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 00000000000..d1db969f01b
--- /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 00000000000..c86cdb6b34c
--- /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 ec3ad73ac4c..08da34b173e 100644
--- a/packages/template-explorer/package.json
+++ b/packages-private/template-explorer/package.json
@@ -11,7 +11,7 @@
     "enableNonBrowserBranches": true
   },
   "dependencies": {
-    "monaco-editor": "^0.45.0",
-    "source-map-js": "^1.0.2"
+    "monaco-editor": "^0.52.2",
+    "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 100%
rename from packages/template-explorer/src/index.ts
rename to packages-private/template-explorer/src/index.ts
diff --git a/packages/template-explorer/src/options.ts b/packages-private/template-explorer/src/options.ts
similarity index 100%
rename from packages/template-explorer/src/options.ts
rename to packages-private/template-explorer/src/options.ts
diff --git a/packages/template-explorer/src/theme.ts b/packages-private/template-explorer/src/theme.ts
similarity index 100%
rename from packages/template-explorer/src/theme.ts
rename to packages-private/template-explorer/src/theme.ts
diff --git a/packages/template-explorer/style.css b/packages-private/template-explorer/style.css
similarity index 89%
rename from packages/template-explorer/style.css
rename to packages-private/template-explorer/style.css
index 93f6f623c68..eed9e18a009 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;
+  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 00000000000..1c287a7500c
--- /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 00000000000..95b3be8eee5
--- /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 00000000000..4f035ae6f8d
--- /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 00000000000..79052a023ba
--- /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 00000000000..52668a0a545
--- /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 00000000000..b0f2bad2b2d
--- /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 00000000000..ceecb1cde14
--- /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 00000000000..c40aa3c361b
--- /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 2bdb4afa4c0..db268af4f9b 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]
   )
@@ -54,7 +54,7 @@ return function render(_ctx, _cache) {
       [foo + bar]: bar
     }, [
       _createElementVNode("p", { "some-key": "foo" })
-    ], 16)
+    ], 16 /* FULL_PROPS */)
   }
 }"
 `;
@@ -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 */))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
index 678548e35b5..942eed4c4dc 100644
--- a/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: parse > Edge Cases > invalid html 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -86,7 +86,7 @@ exports[`compiler: parse > Edge Cases > invalid html 1`] = `
 
 exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [],
@@ -280,7 +280,7 @@ exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
 
 exports[`compiler: parse > Edge Cases > valid html 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -498,7 +498,7 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
 
 exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><![CDATA[cdata]]></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [],
@@ -550,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": [
@@ -643,7 +643,7 @@ 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": [
@@ -813,7 +813,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
 
 exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template>< 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -883,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": [
@@ -953,7 +953,7 @@ 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": [
@@ -1028,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": [
@@ -1121,7 +1121,7 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[cdata
 
 exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!-- 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [],
@@ -1173,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": [
@@ -1243,7 +1243,7 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!--comment 1`] =
 
 exports[`compiler: parse > Errors > EOF_IN_TAG > <div></div 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [],
@@ -1295,7 +1295,7 @@ 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": [],
@@ -1347,7 +1347,7 @@ 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": [],
@@ -1399,7 +1399,7 @@ 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": [],
@@ -1451,7 +1451,7 @@ 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": [],
@@ -1503,7 +1503,7 @@ 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": [],
@@ -1555,7 +1555,7 @@ 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": [],
@@ -1607,7 +1607,7 @@ 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": [],
@@ -1659,7 +1659,7 @@ 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": [
@@ -1729,7 +1729,7 @@ 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": [],
@@ -1781,7 +1781,7 @@ 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": [],
@@ -1833,7 +1833,7 @@ 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": [
@@ -1903,7 +1903,7 @@ 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": [
@@ -1973,7 +1973,7 @@ 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": [],
@@ -2025,7 +2025,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc 1`] = `
 
 exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id= /></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -2148,7 +2148,7 @@ 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": [
@@ -2271,7 +2271,7 @@ 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": [
@@ -2394,7 +2394,7 @@ 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": [],
@@ -2446,7 +2446,7 @@ exports[`compiler: parse > Errors > MISSING_END_TAG_NAME > <template></></templa
 
 exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <template><div a"bc=''></div></template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -2569,7 +2569,7 @@ 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": [
@@ -2692,7 +2692,7 @@ 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": [
@@ -2815,7 +2815,7 @@ 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": [
@@ -2938,7 +2938,7 @@ 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": [
@@ -3061,7 +3061,7 @@ 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": [
@@ -3184,7 +3184,7 @@ 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": [
@@ -3307,7 +3307,7 @@ 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": [
@@ -3430,7 +3430,7 @@ 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": [
@@ -3537,7 +3537,7 @@ 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": [
@@ -3660,7 +3660,7 @@ 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": [],
@@ -3712,7 +3712,7 @@ 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": [
@@ -3850,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": [
@@ -3920,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": [
@@ -3990,7 +3990,7 @@ 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": [],
@@ -4042,7 +4042,7 @@ 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": [],
@@ -4094,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": [
@@ -4182,7 +4182,7 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template>{{'</div>'}}</
 
 exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template>a </ b</template> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -4252,7 +4252,7 @@ exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template>a </ b</templa
 
 exports[`compiler: parse > Errors > X_INVALID_END_TAG > <textarea></div></textarea> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -4322,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": [],
@@ -4446,7 +4446,7 @@ 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": [
@@ -4521,7 +4521,7 @@ 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": [
@@ -4596,7 +4596,7 @@ exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div></templat
 
 exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > <div>{{ foo</div> 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "children": [
@@ -4666,7 +4666,7 @@ exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > <div>{{ foo</d
 
 exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{ 1`] = `
 {
-  "cached": 0,
+  "cached": [],
   "children": [
     {
       "content": "{{",
@@ -4713,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",
@@ -4760,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": {
diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
index 445d3fd13ed..97aff163ecb 100644
--- a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -1,21 +1,5 @@
 // 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"
 
diff --git a/packages/compiler-core/__tests__/codegen.spec.ts b/packages/compiler-core/__tests__/codegen.spec.ts
index 9c923075634..34386ce6930 100644
--- a/packages/compiler-core/__tests__/codegen.spec.ts
+++ b/packages/compiler-core/__tests__/codegen.spec.ts
@@ -47,7 +47,7 @@ function createRoot(options: Partial<RootNode> = {}): RootNode {
     directives: [],
     imports: [],
     hoists: [],
-    cached: 0,
+    cached: [],
     temps: 0,
     codegenNode: createSimpleExpression(`null`, false),
     loc: locStub,
@@ -267,7 +267,7 @@ describe('compiler: codegen', () => {
             disableTracking: true,
             props: undefined,
             children: createCallExpression(RENDER_LIST),
-            patchFlag: '1',
+            patchFlag: PatchFlags.TEXT,
             dynamicProps: undefined,
             directives: undefined,
             loc: locStub,
@@ -303,7 +303,7 @@ 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,
@@ -364,7 +364,7 @@ describe('compiler: codegen', () => {
             ),
           ],
           // flag
-          PatchFlags.FULL_PROPS + '',
+          PatchFlags.FULL_PROPS,
         ),
       }),
     )
@@ -375,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()
   })
 
@@ -422,7 +422,7 @@ describe('compiler: codegen', () => {
   test('CacheExpression', () => {
     const { code } = generate(
       createRoot({
-        cached: 1,
+        cached: [],
         codegenNode: createCacheExpression(
           1,
           createSimpleExpression(`foo`, false),
@@ -437,10 +437,10 @@ describe('compiler: codegen', () => {
     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),
@@ -456,7 +456,7 @@ describe('compiler: codegen', () => {
       `
   _cache[1] || (
     _setBlockTracking(-1),
-    _cache[1] = foo,
+    (_cache[1] = foo).cacheIndex = 1,
     _setBlockTracking(1),
     _cache[1]
   )
@@ -666,11 +666,14 @@ describe('compiler: codegen', () => {
     })
 
     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', () => {
diff --git a/packages/compiler-core/__tests__/parse.spec.ts b/packages/compiler-core/__tests__/parse.spec.ts
index d5bdb4bc5fd..cdc2b09fd48 100644
--- a/packages/compiler-core/__tests__/parse.spec.ts
+++ b/packages/compiler-core/__tests__/parse.spec.ts
@@ -16,8 +16,6 @@ import {
 import { baseParse } from '../src/parser'
 import type { Program } from '@babel/types'
 
-/* eslint jest/no-disabled-tests: "off" */
-
 describe('compiler: parse', () => {
   describe('Text', () => {
     test('simple text', () => {
@@ -1360,7 +1358,27 @@ describe('compiler: parse', () => {
         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 },
@@ -1379,7 +1397,46 @@ describe('compiler: parse', () => {
         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 },
@@ -1408,7 +1465,46 @@ describe('compiler: parse', () => {
             source: 'click',
           },
         },
-        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 },
@@ -1437,7 +1533,27 @@ describe('compiler: parse', () => {
             source: '[a.b]',
           },
         },
-        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 },
@@ -1532,7 +1648,27 @@ describe('compiler: parse', () => {
             source: 'a',
           },
         },
-        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',
@@ -1571,7 +1707,27 @@ describe('compiler: parse', () => {
             source: 'a',
           },
         },
-        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',
@@ -1651,7 +1807,27 @@ describe('compiler: parse', () => {
             source: 'a',
           },
         },
-        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',
@@ -1843,6 +2019,21 @@ describe('compiler: parse', () => {
           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', () => {
@@ -2070,6 +2261,21 @@ describe('compiler: parse', () => {
       baseParse(`<Foo>`, { parseMode: 'sfc', onError() {} })
       expect(() => baseParse(`{ foo }`)).not.toThrow()
     })
+
+    test('correct loc when the closing > is foarmatted', () => {
+      const [span] = baseParse(`<span></span
+      
+      >`).children
+
+      expect(span.loc.source).toBe('<span></span\n      \n      >')
+      expect(span.loc.start.offset).toBe(0)
+      expect(span.loc.end.offset).toBe(27)
+    })
+
+    test('correct loc when a line in attribute value ends with &', () => {
+      const [span] = baseParse(`<span v-if="foo &&\nbar"></span>`).children
+      expect(span.loc.end.line).toBe(2)
+    })
   })
 
   describe('decodeEntities option', () => {
@@ -2166,8 +2372,9 @@ describe('compiler: parse', () => {
     })
 
     test('should remove leading newline character immediately following the pre element start tag', () => {
-      const ast = baseParse(`<pre>\n  foo  bar  </pre>`, {
+      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
@@ -2176,7 +2383,7 @@ describe('compiler: parse', () => {
     })
 
     test('should NOT remove leading newline character immediately following child-tag of pre element', () => {
-      const ast = baseParse(`<pre><span></span>\n  foo  bar  </pre>`, {
+      const ast = parse(`<pre><span></span>\n  foo  bar  </pre>`, {
         isPreTag: tag => tag === 'pre',
       })
       const preElement = ast.children[0] as ElementNode
@@ -2187,7 +2394,7 @@ describe('compiler: parse', () => {
     })
 
     test('self-closing pre tag', () => {
-      const ast = baseParse(`<pre/><span>\n  foo   bar</span>`, {
+      const ast = parse(`<pre/><span>\n  foo   bar</span>`, {
         isPreTag: tag => tag === 'pre',
       })
       const elementAfterPre = ast.children[1] as ElementNode
@@ -2196,7 +2403,7 @@ describe('compiler: parse', () => {
     })
 
     test('should NOT condense whitespaces in RCDATA text mode', () => {
-      const ast = baseParse(`<textarea>Text:\n   foo</textarea>`, {
+      const ast = parse(`<textarea>Text:\n   foo</textarea>`, {
         parseMode: 'html',
       })
       const preElement = ast.children[0] as ElementNode
diff --git a/packages/compiler-core/__tests__/scopeId.spec.ts b/packages/compiler-core/__tests__/scopeId.spec.ts
index c7a21df7a78..7d1d27e115f 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 { POP_SCOPE_ID, PUSH_SCOPE_ID } from '../src/runtimeHelpers'
-import { PatchFlags } from '@vue/shared'
-import { genFlagText } from './testUtils'
 
 /**
  * Ensure all slot functions are wrapped with _withCtx
@@ -57,28 +54,4 @@ describe('scopeId compiler support', () => {
     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 9618a482add..a2525e0cab9 100644
--- a/packages/compiler-core/__tests__/testUtils.ts
+++ b/packages/compiler-core/__tests__/testUtils.ts
@@ -3,6 +3,8 @@ import {
   ElementTypes,
   Namespaces,
   NodeTypes,
+  type Property,
+  type SimpleExpressionNode,
   type VNodeCall,
   locStub,
 } from '../src'
@@ -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 => ({
@@ -31,7 +36,7 @@ export function createObjectMatcher(obj: Record<string, any>) {
         type: NodeTypes.SIMPLE_EXPRESSION,
         content: key.replace(bracketsRE, ''),
         isStatic: !leadingBracketRE.test(key),
-      },
+      } as SimpleExpressionNode,
       value: isString(obj[key])
         ? {
             type: NodeTypes.SIMPLE_EXPRESSION,
@@ -78,7 +83,7 @@ type Flags = PatchFlags | ShapeFlags
 export function genFlagText(
   flag: Flags | Flags[],
   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 a56be51bc5c..0946d364838 100644
--- a/packages/compiler-core/__tests__/transform.spec.ts
+++ b/packages/compiler-core/__tests__/transform.spec.ts
@@ -19,7 +19,6 @@ 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', () => {
@@ -358,7 +357,7 @@ describe('compiler: transform', () => {
             { type: NodeTypes.ELEMENT, tag: `div` },
             { type: NodeTypes.ELEMENT, tag: `div` },
           ] as any,
-          genFlagText(PatchFlags.STABLE_FRAGMENT),
+          PatchFlags.STABLE_FRAGMENT,
         ),
       )
     })
@@ -374,10 +373,7 @@ describe('compiler: transform', () => {
             { type: NodeTypes.ELEMENT, tag: `div` },
             { 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__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/cacheStatic.spec.ts.snap
similarity index 64%
rename from packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
rename to packages/compiler-core/__tests__/transforms/__snapshots__/cacheStatic.spec.ts.snap
index ef3e2b8f4d6..91a82db5bba 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/cacheStatic.spec.ts.snap
@@ -1,103 +1,87 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler: hoistStatic transform > hoist element with static key 1`] = `
+exports[`compiler: cacheStatic transform > cache 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))
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("div", { key: "foo" }, null, -1 /* CACHED */)
+    ])))
   }
 }"
 `;
 
-exports[`compiler: hoistStatic transform > hoist nested static tree 1`] = `
+exports[`compiler: cacheStatic transform > cache nested children array 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))
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("p", null, [
+        _createElementVNode("span"),
+        _createElementVNode("span")
+      ], -1 /* CACHED */),
+      _createElementVNode("p", null, [
+        _createElementVNode("span"),
+        _createElementVNode("span")
+      ], -1 /* CACHED */)
+    ])))
   }
 }"
 `;
 
-exports[`compiler: hoistStatic transform > hoist nested static tree with comments 1`] = `
+exports[`compiler: cacheStatic transform > cache 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))
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("div", null, [
+        _createCommentVNode("comment")
+      ], -1 /* CACHED */)
+    ])))
   }
 }"
 `;
 
-exports[`compiler: hoistStatic transform > hoist siblings with common non-hoistable parent 1`] = `
+exports[`compiler: cacheStatic transform > cache siblings including text 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
+    const { createElementVNode: _createElementVNode, createTextVNode: _createTextVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock("div", null, _hoisted_3))
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("span", null, null, -1 /* CACHED */),
+      _createTextVNode("foo", -1 /* CACHED */),
+      _createElementVNode("div", null, null, -1 /* CACHED */)
+    ])))
   }
 }"
 `;
 
-exports[`compiler: hoistStatic transform > hoist simple element 1`] = `
+exports[`compiler: cacheStatic transform > cache single children array 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))
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("span", { class: "inline" }, "hello", -1 /* CACHED */)
+    ])))
   }
 }"
 `;
 
-exports[`compiler: hoistStatic transform > hoist static props for elements with directives 1`] = `
+exports[`compiler: cacheStatic transform > hoist static props for elements with directives 1`] = `
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
@@ -118,7 +102,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > hoist static props for elements with dynamic text children 1`] = `
+exports[`compiler: cacheStatic transform > hoist static props for elements with dynamic text children 1`] = `
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
@@ -135,7 +119,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > hoist static props for elements with unhoistable children 1`] = `
+exports[`compiler: cacheStatic transform > hoist static props for elements with unhoistable children 1`] = `
 "const _Vue = Vue
 const { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue
 
@@ -156,69 +140,73 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist class with static object value 1`] = `
+exports[`compiler: cacheStatic transform > prefixIdentifiers > cache nested static tree with static interpolation 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
+    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock("div", null, [
-      _createElementVNode("span", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
-    ]))
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("span", null, "foo " + _toDisplayString(1) + " " + _toDisplayString(true), -1 /* CACHED */)
+    ])))
   }
 }"
 `;
 
-exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested static tree with static interpolation 1`] = `
+exports[`compiler: cacheStatic transform > prefixIdentifiers > cache nested static tree with static prop value 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))
+    return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+      _createElementVNode("span", { foo: 0 }, _toDisplayString(1), -1 /* CACHED */)
+    ])))
   }
 }"
 `;
 
-exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested static tree with static prop value 1`] = `
+exports[`compiler: cacheStatic transform > prefixIdentifiers > clone hoisted array children in v-for + HMR mode 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
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
 
-    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+    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 /* CACHED */)
+        ]))]))
+      }), 256 /* UNKEYED_FRAGMENT */))
+    ]))
   }
 }"
 `;
 
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist SVG with directives 1`] = `
+exports[`compiler: cacheStatic transform > prefixIdentifiers > hoist class with static object value 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
-]
+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) {
@@ -227,7 +215,9 @@ return function render(_ctx, _cache) {
     const _directive_foo = _resolveDirective("foo")
 
     return (_openBlock(), _createElementBlock("div", null, [
-      _withDirectives((_openBlock(), _createElementBlock("svg", null, _hoisted_2)), [
+      _withDirectives((_openBlock(), _createElementBlock("svg", null, _cache[0] || (_cache[0] = [
+        _createElementVNode("path", { d: "M2,3H5.5L12" }, null, -1 /* CACHED */)
+      ]))), [
         [_directive_foo]
       ])
     ]))
@@ -235,7 +225,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers + other bindings 1`] = `
+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) {
@@ -250,7 +240,7 @@ export function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers 1`] = `
+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) {
@@ -264,7 +254,7 @@ export function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist expressions that refer scope variables (2) 1`] = `
+exports[`compiler: cacheStatic transform > prefixIdentifiers > should NOT cache expressions that refer scope variables (2) 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
@@ -282,7 +272,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist expressions that refer scope variables (v-slot) 1`] = `
+exports[`compiler: cacheStatic transform > prefixIdentifiers > should NOT cache expressions that refer scope variables (v-slot) 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
@@ -301,7 +291,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist expressions that refer scope variables 1`] = `
+exports[`compiler: cacheStatic transform > prefixIdentifiers > should NOT cache expressions that refer scope variables 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
@@ -319,7 +309,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist keyed template v-for with plain element child 1`] = `
+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) {
@@ -335,7 +325,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > should NOT hoist components 1`] = `
+exports[`compiler: cacheStatic transform > should NOT cache components 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
@@ -351,7 +341,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > should NOT hoist element with dynamic key 1`] = `
+exports[`compiler: cacheStatic transform > should NOT cache element with dynamic key 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
@@ -365,7 +355,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > should NOT hoist element with dynamic props (but hoist the props list) 1`] = `
+exports[`compiler: cacheStatic transform > should NOT cache element with dynamic props (but hoist the props list) 1`] = `
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
@@ -382,7 +372,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > should NOT hoist element with dynamic ref 1`] = `
+exports[`compiler: cacheStatic transform > should NOT cache element with dynamic ref 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
@@ -396,62 +386,72 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: hoistStatic transform > should NOT hoist root node 1`] = `
+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 { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
-    return (_openBlock(), _createElementBlock("div"))
+    return (_openBlock(), _createElementBlock("div", null, [
+      ok
+        ? (_openBlock(), _createElementBlock("div", _hoisted_1, _cache[0] || (_cache[0] = [
+            _createElementVNode("span", null, null, -1 /* CACHED */)
+          ])))
+        : _createCommentVNode("v-if", true)
+    ]))
   }
 }"
 `;
 
-exports[`compiler: hoistStatic transform > should hoist v-for children if static 1`] = `
+exports[`compiler: cacheStatic transform > should hoist props for root with single element excluding comments 1`] = `
 "const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
+const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
 
-const _hoisted_1 = { id: "foo" }
-const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
-const _hoisted_3 = [
-  _hoisted_2
-]
+const _hoisted_1 = { id: "a" }
 
 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 */))
-    ]))
+    const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock(_Fragment, null, [
+      _createCommentVNode("comment"),
+      _createElementVNode("div", _hoisted_1, _cache[0] || (_cache[0] = [
+        _createElementVNode("div", { id: "b" }, [
+          _createElementVNode("div", { id: "c" }, [
+            _createElementVNode("div", { id: "d" }, [
+              _createElementVNode("div", { id: "e" }, "hello")
+            ])
+          ])
+        ], -1 /* CACHED */)
+      ]))
+    ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
   }
 }"
 `;
 
-exports[`compiler: hoistStatic transform > should hoist v-if props/children if static 1`] = `
+exports[`compiler: cacheStatic transform > should hoist v-for children if static 1`] = `
 "const _Vue = Vue
-const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = {
-  key: 0,
-  id: "foo"
-}
-const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
-const _hoisted_3 = [
-  _hoisted_2
-]
+const _hoisted_1 = { id: "foo" }
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
 
     return (_openBlock(), _createElementBlock("div", null, [
-      ok
-        ? (_openBlock(), _createElementBlock("div", _hoisted_1, _hoisted_3))
-        : _createCommentVNode("v-if", true)
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
+        return (_openBlock(), _createElementBlock("div", _hoisted_1, _cache[0] || (_cache[0] = [
+          _createElementVNode("span", null, null, -1 /* CACHED */)
+        ])))
+      }), 256 /* UNKEYED_FRAGMENT */))
     ]))
   }
 }"
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 00000000000..3da778eb675
--- /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 9f4406864db..5a94de5a68b 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
@@ -14,44 +14,92 @@ return function render(_ctx, _cache, $props, $setup, $data, $options) {
 }"
 `;
 
-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 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)
         }
+        _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 function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock("div", {
     onClick: () => {
-          for (const x in _ctx.list) {
-            _ctx.log(x)
-          }
+         try {} catch (err) { console.error(err) }
+        console.log(_ctx.err)
+      }
+  }, null, 8 /* PROPS */, ["onClick"]))
+}"
+`;
+
+exports[`compiler: expression transform > should not prefix destructured catch block param 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: () => {
+        try {
+          throw new Error('sup?')
+        } catch ({ message: { length } }) {
+          console.error(length)
         }
+        console.log(_ctx.length)
+      }
   }, 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 temp variable of for loop 1`] = `
 "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
-return function render(_ctx, _cache, $props, $setup, $data, $options) {
+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)
-          }
+        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__/vMemo.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
index 220bc177418..86e0b3d2fd5 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
@@ -1,5 +1,23 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`compiler: v-memo transform > element v-for key expression prefixing + v-memo 1`] = `
+"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, [
+    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.tableData, (data, __, ___, _cached) => {
+      const _memo = (_ctx.getLetter(data))
+      if (_cached && _cached.key === _ctx.getId(data) && _isMemoSame(_cached, _memo)) return _cached
+      const _item = (_openBlock(), _createElementBlock("span", {
+        key: _ctx.getId(data)
+      }))
+      _item.memo = _memo
+      return _item
+    }, _cache, 0), 128 /* KEYED_FRAGMENT */))
+  ]))
+}"
+`;
+
 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"
 
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 1c1203552db..6660865a523 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -8,8 +8,8 @@ return function render(_ctx, _cache) {
     const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode } = _Vue
 
     return _cache[0] || (
-      _setBlockTracking(-1),
-      _cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"]),
+      _setBlockTracking(-1, true),
+      (_cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"])).cacheIndex = 0,
       _setBlockTracking(1),
       _cache[0]
     )
@@ -28,8 +28,8 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
-        _setBlockTracking(-1),
-        _cache[0] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, ["id"]),
+        _setBlockTracking(-1, true),
+        (_cache[0] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, ["id"])).cacheIndex = 0,
         _setBlockTracking(1),
         _cache[0]
       )
@@ -47,8 +47,8 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
-        _setBlockTracking(-1),
-        _cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"]),
+        _setBlockTracking(-1, true),
+        (_cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"])).cacheIndex = 0,
         _setBlockTracking(1),
         _cache[0]
       )
@@ -66,8 +66,8 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
-        _setBlockTracking(-1),
-        _cache[0] = _renderSlot($slots, "default"),
+        _setBlockTracking(-1, true),
+        (_cache[0] = _renderSlot($slots, "default")).cacheIndex = 0,
         _setBlockTracking(1),
         _cache[0]
       )
@@ -85,8 +85,8 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
-        _setBlockTracking(-1),
-        _cache[0] = _createElementVNode("div"),
+        _setBlockTracking(-1, true),
+        (_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 0d9c0e743de..2cd13bab036 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -246,6 +246,28 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`compiler: transform component slots > with whitespace: 'preserve' > named slot with v-if + v-else 1`] = `
+"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
+
+return function render(_ctx, _cache) {
+  const _component_Comp = _resolveComponent("Comp")
+
+  return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+    ok
+      ? {
+          name: "one",
+          fn: _withCtx(() => ["foo"]),
+          key: "0"
+        }
+      : {
+          name: "two",
+          fn: _withCtx(() => ["baz"]),
+          key: "1"
+        }
+  ]), 1024 /* DYNAMIC_SLOTS */))
+}"
+`;
+
 exports[`compiler: transform component slots > with whitespace: 'preserve' > should not generate whitespace only default slot 1`] = `
 "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
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 00000000000..74f6caca328
--- /dev/null
+++ b/packages/compiler-core/__tests__/transforms/cacheStatic.spec.ts
@@ -0,0 +1,803 @@
+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 */
+        },
+        {
+          type: NodeTypes.JS_PROPERTY,
+          key: { content: '__' },
+          value: { content: '[0]' },
+        },
+      ],
+    })
+  })
+
+  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 */
+        },
+        {
+          type: NodeTypes.JS_PROPERTY,
+          key: { content: '__' },
+          value: { content: '[0]' },
+        },
+      ],
+    })
+  })
+
+  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()
+  })
+
+  test('should hoist props for root with single element excluding comments', () => {
+    // deeply nested div to trigger stringification condition
+    const root = transformWithCache(
+      `<!--comment--><div id="a"><div id="b"><div id="c"><div id="d"><div id="e">hello</div></div></div></div></div>`,
+    )
+    expect(root.cached.length).toBe(1)
+    expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'a' })])
+
+    expect((root.codegenNode as VNodeCall).children).toMatchObject([
+      {
+        type: NodeTypes.COMMENT,
+        content: 'comment',
+      },
+      {
+        type: NodeTypes.ELEMENT,
+        codegenNode: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`,
+          props: { content: `_hoisted_1` },
+          children: { type: NodeTypes.JS_CACHE_EXPRESSION },
+        },
+      },
+    ])
+    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 d6c46b52eb3..00000000000
--- a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
+++ /dev/null
@@ -1,609 +0,0 @@
-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, 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/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index 5d3f92ced18..bf3510a052d 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -37,8 +37,9 @@ import { transformStyle } from '../../../compiler-dom/src/transforms/transformSt
 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,
@@ -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,
       })
     }
 
@@ -587,7 +588,7 @@ describe('compiler: element transform', () => {
     })
     // 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"`)
   })
 
@@ -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: [
@@ -944,26 +945,26 @@ 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"]`)
     })
 
@@ -972,7 +973,7 @@ describe('compiler: element transform', () => {
         `<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"]`)
     })
@@ -982,40 +983,40 @@ describe('compiler: element transform', () => {
       const { node } = parseWithBind(
         `<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" />`,
       )
-      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)', () => {
@@ -1024,7 +1025,7 @@ describe('compiler: element transform', () => {
         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)', () => {
@@ -1119,7 +1120,7 @@ describe('compiler: element transform', () => {
         },
       })
       // 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" />`,
@@ -1129,21 +1130,15 @@ describe('compiler: element transform', () => {
           },
         },
       )
-      expect(node2.patchFlag).toBe(
-        genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION]),
-      )
+      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
@@ -1156,9 +1151,7 @@ describe('compiler: element transform', () => {
           },
         },
       )
-      expect(node.patchFlag).toBe(
-        genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION]),
-      )
+      expect(node.patchFlag).toBe(PatchFlags.PROPS | PatchFlags.NEED_HYDRATION)
     })
 
     test('should not have PROPS patchflag for constant v-on handlers', () => {
@@ -1172,7 +1165,7 @@ describe('compiler: element transform', () => {
         },
       })
       // should only have hydration flag
-      expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_HYDRATION))
+      expect(node.patchFlag).toBe(PatchFlags.NEED_HYDRATION)
     })
   })
 
@@ -1231,6 +1224,24 @@ describe('compiler: element transform', () => {
       })
     })
 
+    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: 'is',
+              isStatic: false,
+            },
+          ],
+        },
+      })
+    })
+
     test('is casting', () => {
       const { node, root } = parseWithBind(`<div is="vue:foo" />`)
       expect(root.helpers).toContain(RESOLVE_COMPONENT)
@@ -1265,6 +1276,18 @@ describe('compiler: element transform', () => {
     })
   })
 
+  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,
+    })
+  })
+
   test('force block for runtime custom directive w/ children', () => {
     const { node } = parseWithElementTransform(`<div v-foo>hello</div>`)
     expect(node.isBlock).toBe(true)
@@ -1320,4 +1343,42 @@ describe('compiler: element transform', () => {
       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 b8207e7d42f..c92814089ef 100644
--- a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
@@ -27,6 +27,10 @@ function parseWithExpressionTransform(
   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
@@ -291,6 +295,7 @@ describe('compiler: expression transform', () => {
       ],
     })
   })
+
   test('should not prefix an object property key', () => {
     const node = parseWithExpressionTransform(
       `{{ { foo() { baz() }, value: bar } }}`,
@@ -384,6 +389,17 @@ describe('compiler: expression transform', () => {
     )
   })
 
+  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 }}`,
@@ -421,6 +437,115 @@ describe('compiler: expression transform', () => {
     })
   })
 
+  // #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(
@@ -519,42 +644,6 @@ 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>`,
@@ -598,5 +687,33 @@ describe('compiler: expression transform', () => {
         `${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/vFor.spec.ts b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
index fb3d7dc7fb8..fead2476ac5 100644
--- a/packages/compiler-core/__tests__/transforms/vFor.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
@@ -13,18 +13,22 @@ import {
   type ForNode,
   type InterpolationNode,
   NodeTypes,
+  type RootNode,
   type SimpleExpressionNode,
 } from '../../src/ast'
 import { ErrorCodes } from '../../src/errors'
 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 = {},
-) {
+): {
+  root: RootNode
+  node: ForNode & { codegenNode: ForCodegenNode }
+} {
   const ast = parse(template, options)
   transform(ast, {
     nodeTransforms: [
@@ -202,6 +206,18 @@ describe('compiler: v-for', () => {
       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', () => {
@@ -253,6 +269,18 @@ describe('compiler: v-for', () => {
       )
     })
 
+    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,
+        }),
+      )
+    })
+
     test('missing value', () => {
       const onError = vi.fn()
       parseWithForTransform('<span v-for="in items" />', { onError })
@@ -672,10 +700,10 @@ describe('compiler: v-for', () => {
         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,
@@ -798,7 +826,7 @@ describe('compiler: v-for', () => {
               constType: ConstantTypes.NOT_CONSTANT,
             },
           },
-          patchFlag: genFlagText(PatchFlags.TEXT),
+          patchFlag: PatchFlags.TEXT,
         },
       })
       expect(generate(root).code).toMatchSnapshot()
@@ -822,7 +850,7 @@ describe('compiler: v-for', () => {
             { type: NodeTypes.TEXT, content: `hello` },
             { type: NodeTypes.ELEMENT, tag: `span` },
           ],
-          patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT),
+          patchFlag: PatchFlags.STABLE_FRAGMENT,
         },
       })
       expect(generate(root).code).toMatchSnapshot()
@@ -926,7 +954,7 @@ describe('compiler: v-for', () => {
             { type: NodeTypes.TEXT, content: `hello` },
             { type: NodeTypes.ELEMENT, tag: `span` },
           ],
-          patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT),
+          patchFlag: PatchFlags.STABLE_FRAGMENT,
         },
       })
       expect(generate(root).code).toMatchSnapshot()
@@ -947,7 +975,7 @@ describe('compiler: v-for', () => {
           }),
           isBlock: true,
           disableTracking: true,
-          patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+          patchFlag: PatchFlags.UNKEYED_FRAGMENT,
           children: {
             type: NodeTypes.JS_CALL_EXPRESSION,
             callee: RENDER_LIST,
@@ -985,7 +1013,7 @@ describe('compiler: v-for', () => {
           }),
           isBlock: true,
           disableTracking: true,
-          patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+          patchFlag: PatchFlags.UNKEYED_FRAGMENT,
           children: {
             type: NodeTypes.JS_CALL_EXPRESSION,
             callee: RENDER_LIST,
@@ -1019,5 +1047,31 @@ describe('compiler: v-for', () => {
       })
       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 2c2fedab0d5..73b6e221554 100644
--- a/packages/compiler-core/__tests__/transforms/vIf.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
@@ -301,6 +301,25 @@ describe('compiler: v-if', () => {
       ])
     })
 
+    test('error on adjacent v-else', () => {
+      const onError = vi.fn()
+
+      const {
+        node: { branches },
+      } = parseWithIfTransform(
+        `<div v-if="false"/><div v-else/><div v-else/>`,
+        { onError },
+        0,
+      )
+
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
+          loc: branches[branches.length - 1].loc,
+        },
+      ])
+    })
+
     test('error on user key', () => {
       const onError = vi.fn()
       // dynamic
diff --git a/packages/compiler-core/__tests__/transforms/vMemo.spec.ts b/packages/compiler-core/__tests__/transforms/vMemo.spec.ts
index 85769e6e977..41e7d922ebe 100644
--- a/packages/compiler-core/__tests__/transforms/vMemo.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vMemo.spec.ts
@@ -53,4 +53,12 @@ describe('compiler: v-memo transform', () => {
       ),
     ).toMatchSnapshot()
   })
+
+  test('element v-for key expression prefixing + v-memo', () => {
+    expect(
+      compile(
+        `<span v-for="data of tableData" :key="getId(data)" v-memo="getLetter(data)"></span>`,
+      ),
+    ).toMatchSnapshot()
+  })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vModel.spec.ts b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
index 5d94aca2777..82dd4909fd6 100644
--- a/packages/compiler-core/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
@@ -399,7 +399,7 @@ describe('compiler: transform v-model', () => {
       prefixIdentifiers: 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
@@ -417,7 +417,7 @@ describe('compiler: transform v-model', () => {
         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
@@ -433,7 +433,7 @@ describe('compiler: transform v-model', () => {
       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', () => {
diff --git a/packages/compiler-core/__tests__/transforms/vOn.spec.ts b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
index 9f5e0094878..9fda0259585 100644
--- a/packages/compiler-core/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
@@ -10,6 +10,7 @@ import {
   baseParse as parse,
   transform,
 } 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,7 +18,7 @@ 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,
     },
@@ -271,7 +272,7 @@ describe('compiler: transform v-on', () => {
     })
   })
 
-  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: [
@@ -284,6 +285,38 @@ describe('compiler: transform v-on', () => {
         },
       ],
     })
+
+    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)`,
+          },
+        },
+      ],
+    })
   })
 
   test('should NOT wrap as function if expression is already function expression (with newlines)', () => {
@@ -487,7 +520,7 @@ describe('compiler: transform v-on', () => {
         prefixIdentifiers: 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()
@@ -508,7 +541,7 @@ describe('compiler: transform v-on', () => {
         prefixIdentifiers: 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()
@@ -533,7 +566,7 @@ describe('compiler: transform v-on', () => {
         prefixIdentifiers: 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()
@@ -570,7 +603,7 @@ describe('compiler: transform v-on', () => {
         cacheHandlers: true,
         isNativeTag: tag => tag === 'div',
       })
-      expect(root.cached).toBe(0)
+      expect(root.cached.length).toBe(0)
     })
 
     test('should not be cached inside v-once', () => {
@@ -581,8 +614,19 @@ describe('compiler: transform v-on', () => {
           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', () => {
@@ -590,7 +634,7 @@ describe('compiler: transform v-on', () => {
         prefixIdentifiers: 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()
@@ -614,7 +658,7 @@ describe('compiler: transform v-on', () => {
           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()
@@ -630,6 +674,39 @@ describe('compiler: transform v-on', () => {
       })
     })
 
+    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` },
+            `)`,
+          ],
+        },
+      })
+    })
+
     test('inline async function expression handler', () => {
       const { root, node } = parseWithVOn(
         `<div v-on:click="async function () { await foo() } " />`,
@@ -638,7 +715,7 @@ describe('compiler: transform v-on', () => {
           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()
@@ -663,8 +740,8 @@ describe('compiler: transform v-on', () => {
         prefixIdentifiers: 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()
diff --git a/packages/compiler-core/__tests__/transforms/vOnce.spec.ts b/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
index 30149c62df6..5f47a0fdbd9 100644
--- a/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
@@ -22,7 +22,7 @@ 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,
@@ -37,7 +37,7 @@ describe('compiler: v-once transform', () => {
 
   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,
@@ -52,7 +52,7 @@ describe('compiler: v-once transform', () => {
 
   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,
@@ -67,7 +67,7 @@ describe('compiler: v-once transform', () => {
 
   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,
@@ -84,7 +84,7 @@ 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
@@ -92,7 +92,7 @@ describe('compiler: v-once transform', () => {
     const root = transformWithOnce(`<div><div v-once /></div>`, {
       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({
@@ -108,7 +108,7 @@ describe('compiler: v-once transform', () => {
 
   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,
@@ -132,7 +132,7 @@ describe('compiler: v-once transform', () => {
 
   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,
diff --git a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
index aa7b600ccbe..e0f44a064fb 100644
--- a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
@@ -24,7 +24,7 @@ import {
   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'
@@ -432,7 +432,7 @@ describe('compiler: transform component slots', () => {
                 ),
                 // 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
@@ -474,9 +474,7 @@ describe('compiler: transform component slots', () => {
     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()
       }
@@ -581,8 +579,8 @@ describe('compiler: transform component slots', () => {
         },
       ],
     })
-    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()
   })
@@ -630,8 +628,8 @@ describe('compiler: transform component slots', () => {
         },
       ],
     })
-    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()
   })
@@ -693,9 +691,10 @@ describe('compiler: transform component slots', () => {
         },
       ],
     })
-    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()
   })
 
@@ -743,8 +742,8 @@ describe('compiler: transform component slots', () => {
         },
       ],
     })
-    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()
   })
@@ -989,5 +988,19 @@ describe('compiler: transform component slots', () => {
 
       expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
     })
+
+    test('named slot with v-if + v-else', () => {
+      const source = `
+        <Comp>
+          <template #one v-if="ok">foo</template>
+          <template #two v-else>baz</template>
+        </Comp>
+      `
+      const { root } = parseWithSlots(source, {
+        whitespace: 'preserve',
+      })
+
+      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 506aa86982e..000b10e11bd 100644
--- a/packages/compiler-core/__tests__/utils.spec.ts
+++ b/packages/compiler-core/__tests__/utils.spec.ts
@@ -1,5 +1,10 @@
-import type { TransformContext } from '../src'
-import type { Position } from '../src/ast'
+import { babelParse, walkIdentifiers } from '@vue/compiler-sfc'
+import {
+  type ExpressionNode,
+  type TransformContext,
+  isReferencedIdentifier,
+} from '../src'
+import { type Position, createSimpleExpression } from '../src/ast'
 import {
   advancePositionWithClone,
   isMemberExpressionBrowser,
@@ -41,7 +46,8 @@ describe('advancePositionWithClone', () => {
 })
 
 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)
@@ -78,13 +84,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)
@@ -111,3 +120,18 @@ test('toValidAssetId', () => {
     '_component_test_2797935797_1',
   )
 })
+
+describe('isReferencedIdentifier', () => {
+  test('identifiers in function parameters should not be inferred as references', () => {
+    expect.assertions(4)
+    const ast = babelParse(`(({ title }) => [])`)
+    walkIdentifiers(
+      ast.program.body[0],
+      (node, parent, parentStack, isReference) => {
+        expect(isReference).toBe(false)
+        expect(isReferencedIdentifier(node, parent, parentStack)).toBe(false)
+      },
+      true,
+    )
+  })
+})
diff --git a/packages/compiler-core/package.json b/packages/compiler-core/package.json
index b35f85a56dd..a59342aeb93 100644
--- a/packages/compiler-core/package.json
+++ b/packages/compiler-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.4.18",
+  "version": "3.5.18",
   "description": "@vue/compiler-core",
   "main": "index.js",
   "module": "dist/compiler-core.esm-bundler.js",
@@ -46,13 +46,13 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-core#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.9",
+    "@babel/parser": "catalog:",
     "@vue/shared": "workspace:*",
     "entities": "^4.5.0",
-    "estree-walker": "^2.0.2",
-    "source-map-js": "^1.0.2"
+    "estree-walker": "catalog:",
+    "source-map-js": "catalog:"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.9"
+    "@babel/types": "catalog:"
   }
 }
diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index 3f92a99fcbb..2d6df9d9010 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -1,4 +1,4 @@
-import { isString } from '@vue/shared'
+import { type PatchFlags, isString } from '@vue/shared'
 import {
   CREATE_BLOCK,
   CREATE_ELEMENT_BLOCK,
@@ -110,7 +110,7 @@ export interface RootNode extends Node {
   directives: string[]
   hoists: (JSChildNode | null)[]
   imports: ImportItem[]
-  cached: number
+  cached: (CacheExpression | null)[]
   temps: number
   ssrHelpers?: symbol[]
   codegenNode?: TemplateChildNode | JSChildNode | BlockStatement
@@ -203,7 +203,7 @@ export interface DirectiveNode extends Node {
   rawName?: string
   exp: ExpressionNode | undefined
   arg: ExpressionNode | undefined
-  modifiers: string[]
+  modifiers: SimpleExpressionNode[]
   /**
    * optional property to cache the expression parse result for v-for
    */
@@ -218,7 +218,7 @@ export interface DirectiveNode extends Node {
 export enum ConstantTypes {
   NOT_CONSTANT = 0,
   CAN_SKIP_PATCH,
-  CAN_HOIST,
+  CAN_CACHE,
   CAN_STRINGIFY,
 }
 
@@ -330,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
@@ -416,7 +417,9 @@ export interface CacheExpression extends Node {
   type: NodeTypes.JS_CACHE_EXPRESSION
   index: number
   value: JSChildNode
-  isVNode: boolean
+  needPauseTracking: boolean
+  inVOnce: boolean
+  needArraySpread: boolean
 }
 
 export interface MemoExpression extends CallExpression {
@@ -511,7 +514,7 @@ export interface SlotsObjectProperty extends Property {
 }
 
 export interface SlotFunctionExpression extends FunctionExpression {
-  returns: TemplateChildNode[]
+  returns: TemplateChildNode[] | CacheExpression
 }
 
 // createSlots({ ... }, [
@@ -561,7 +564,7 @@ export interface ForCodegenNode extends VNodeCall {
   tag: typeof FRAGMENT
   props: undefined
   children: ForRenderListExpression
-  patchFlag: string
+  patchFlag: PatchFlags
   disableTracking: boolean
 }
 
@@ -571,7 +574,7 @@ export interface ForRenderListExpression extends CallExpression {
 }
 
 export interface ForIteratorExpression extends FunctionExpression {
-  returns: BlockCodegenNode
+  returns?: BlockCodegenNode
 }
 
 // AST Utilities ---------------------------------------------------------------
@@ -598,7 +601,7 @@ export function createRoot(
     directives: [],
     hoists: [],
     imports: [],
-    cached: 0,
+    cached: [],
     temps: 0,
     codegenNode: undefined,
     loc: locStub,
@@ -616,7 +619,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) {
@@ -771,13 +774,16 @@ export function createConditionalExpression(
 export function createCacheExpression(
   index: number,
   value: JSChildNode,
-  isVNode: boolean = false,
+  needPauseTracking: boolean = false,
+  inVOnce: boolean = false,
 ): CacheExpression {
   return {
     type: NodeTypes.JS_CACHE_EXPRESSION,
     index,
     value,
-    isVNode,
+    needPauseTracking: needPauseTracking,
+    inVOnce,
+    needArraySpread: false,
     loc: locStub,
   }
 }
@@ -848,18 +854,24 @@ export function createReturnStatement(
   }
 }
 
-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,
-) {
+): 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 b12a6d9b47f..51614612b10 100644
--- a/packages/compiler-core/src/babelUtils.ts
+++ b/packages/compiler-core/src/babelUtils.ts
@@ -2,6 +2,9 @@
 // do not import runtime methods
 import type {
   BlockStatement,
+  ForInStatement,
+  ForOfStatement,
+  ForStatement,
   Function,
   Identifier,
   Node,
@@ -10,11 +13,14 @@ import type {
 } 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,
@@ -22,7 +28,7 @@ export function walkIdentifiers(
   includeAll = false,
   parentStack: Node[] = [],
   knownIds: Record<string, number> = Object.create(null),
-) {
+): void {
   if (__BROWSER__) {
     return
   }
@@ -33,7 +39,7 @@ export function walkIdentifiers(
       : 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,12 +50,13 @@ 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' &&
+        // eslint-disable-next-line no-restricted-syntax
         parent?.type === 'ObjectPattern'
       ) {
         // mark property in destructure pattern
@@ -73,9 +80,17 @@ export function walkIdentifiers(
             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) {
@@ -93,7 +108,7 @@ export function isReferencedIdentifier(
   id: Identifier,
   parent: Node | null,
   parentStack: Node[],
-) {
+): boolean {
   if (__BROWSER__) {
     return false
   }
@@ -107,7 +122,7 @@ export function isReferencedIdentifier(
     return false
   }
 
-  if (isReferenced(id, parent)) {
+  if (isReferenced(id, parent, parentStack[parentStack.length - 2])) {
     return true
   }
 
@@ -117,7 +132,8 @@ export function isReferencedIdentifier(
     case 'AssignmentExpression':
     case 'AssignmentPattern':
       return true
-    case 'ObjectPattern':
+    case 'ObjectProperty':
+      return parent.key !== id && isInDestructureAssignment(parent, parentStack)
     case 'ArrayPattern':
       return isInDestructureAssignment(parent, parentStack)
   }
@@ -162,7 +178,7 @@ export function isInNewExpression(parentStack: Node[]): boolean {
 export function walkFunctionParams(
   node: Function,
   onIdent: (id: Identifier) => void,
-) {
+): void {
   for (const p of node.params) {
     for (const id of extractIdentifiers(p)) {
       onIdent(id)
@@ -173,7 +189,7 @@ export function walkFunctionParams(
 export function walkBlockDeclarations(
   block: BlockStatement | Program,
   onIdent: (node: Identifier) => void,
-) {
+): void {
   for (const stmt of block.body) {
     if (stmt.type === 'VariableDeclaration') {
       if (stmt.declare) continue
@@ -188,18 +204,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)
       }
     }
   }
@@ -280,7 +314,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
 
 /**
@@ -404,6 +438,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
       }
@@ -461,7 +496,7 @@ 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!
diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 4447e67aafa..6b4559fabb2 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -28,14 +28,20 @@ import {
   getVNodeHelper,
   locStub,
 } from './ast'
-import { type RawSourceMap, SourceMapGenerator } from 'source-map-js'
+import { SourceMapGenerator } from 'source-map-js'
 import {
   advancePositionWithMutation,
   assert,
   isSimpleIdentifier,
   toValidAssetId,
 } from './utils'
-import { isArray, isString, isSymbol } from '@vue/shared'
+import {
+  PatchFlagNames,
+  type PatchFlags,
+  isArray,
+  isString,
+  isSymbol,
+} from '@vue/shared'
 import {
   CREATE_COMMENT,
   CREATE_ELEMENT_VNODE,
@@ -43,8 +49,6 @@ import {
   CREATE_TEXT,
   CREATE_VNODE,
   OPEN_BLOCK,
-  POP_SCOPE_ID,
-  PUSH_SCOPE_ID,
   RESOLVE_COMPONENT,
   RESOLVE_DIRECTIVE,
   RESOLVE_FILTER,
@@ -56,7 +60,46 @@ import {
 } from './runtimeHelpers'
 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]}`
 
@@ -85,7 +128,7 @@ export interface CodegenContext
   offset: number
   indentLevel: number
   pure: boolean
-  map?: SourceMapGenerator
+  map?: CodegenSourceMapGenerator
   helper(key: symbol): string
   push(code: string, newlineIndex?: number, node?: CodegenNode): void
   indent(): void
@@ -145,7 +188,9 @@ function createCodegenContext(
               name = content
             }
           }
-          addMapping(node.loc.start, name)
+          if (node.loc.source) {
+            addMapping(node.loc.start, name)
+          }
         }
         if (newlineIndex === NewlineType.Unknown) {
           // multiple newlines, full iteration
@@ -182,7 +227,7 @@ function createCodegenContext(
             context.column = code.length - newlineIndex
           }
         }
-        if (node && node.loc !== locStub) {
+        if (node && node.loc !== locStub && node.loc.source) {
           addMapping(node.loc.end)
         }
       }
@@ -218,14 +263,14 @@ function createCodegenContext(
       generatedLine: context.line,
       generatedColumn: context.column - 1,
       source: filename,
-      // @ts-expect-error it is possible to be null
       name,
     })
   }
 
   if (!__BROWSER__ && sourceMap) {
     // lazy require source-map implementation, only in non-browser builds
-    context.map = new SourceMapGenerator()
+    context.map =
+      new SourceMapGenerator() as unknown as CodegenSourceMapGenerator
     context.map.setSourceContent(filename, context.source)
     context.map._sources.add(filename)
   }
@@ -434,11 +479,6 @@ function genModulePreamble(
     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)
@@ -527,33 +567,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()
     }
   }
@@ -706,7 +727,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
@@ -717,6 +738,7 @@ function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
         const exhaustiveCheck: never = node
         return exhaustiveCheck
       }
+    /* v8 ignore stop */
   }
 }
 
@@ -803,6 +825,28 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
     disableTracking,
     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) + `(`)
   }
@@ -817,7 +861,7 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
     : getVNodeHelper(context.inSSR, isComponent)
   push(helper(callHelper) + `(`, NewlineType.None, node)
   genNodeList(
-    genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
+    genNullableArgs([tag, props, children, patchFlagString, dynamicProps]),
     context,
   )
   push(`)`)
@@ -968,16 +1012,23 @@ 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),`)
+    push(`${helper(SET_BLOCK_TRACKING)}(-1`)
+    if (node.inVOnce) push(`, true`)
+    push(`),`)
     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()
@@ -985,6 +1036,9 @@ function genCacheExpression(node: CacheExpression, context: CodegenContext) {
     deindent()
   }
   push(`)`)
+  if (needArraySpread) {
+    push(`)]`)
+  }
 }
 
 function genTemplateLiteral(node: TemplateLiteral, context: CodegenContext) {
diff --git a/packages/compiler-core/src/compat/compatConfig.ts b/packages/compiler-core/src/compat/compatConfig.ts
index bf06f4aae0f..58c5d9611f2 100644
--- a/packages/compiler-core/src/compat/compatConfig.ts
+++ b/packages/compiler-core/src/compat/compatConfig.ts
@@ -106,7 +106,7 @@ function getCompatValue(
 export function isCompatEnabled(
   key: CompilerDeprecationTypes,
   context: MergedParserOptions | TransformContext,
-) {
+): boolean {
   const mode = getCompatValue('MODE', context)
   const value = getCompatValue(key, context)
   // in v3 mode, only enable if explicitly set to true
@@ -132,7 +132,7 @@ export function warnDeprecation(
   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 86d11f52a60..4791e67543e 100644
--- a/packages/compiler-core/src/compat/transformFilter.ts
+++ b/packages/compiler-core/src/compat/transformFilter.ts
@@ -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 &&
@@ -168,6 +166,8 @@ function parseFilter(node: SimpleExpressionNode, context: TransformContext) {
       expression = wrapFilter(expression, filters[i], context)
     }
     node.content = expression
+    // reset ast since the content is replaced
+    node.ast = undefined
   }
 }
 
diff --git a/packages/compiler-core/src/compile.ts b/packages/compiler-core/src/compile.ts
index 854c2bc6d69..a697c9d22e6 100644
--- a/packages/compiler-core/src/compile.ts
+++ b/packages/compiler-core/src/compile.ts
@@ -68,7 +68,7 @@ export function baseCompile(
 ): 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))
@@ -76,6 +76,7 @@ export function baseCompile(
       onError(createCompilerError(ErrorCodes.X_MODULE_MODE_NOT_SUPPORTED))
     }
   }
+  /* v8 ignore stop */
 
   const prefixIdentifiers =
     !__BROWSER__ && (options.prefixIdentifiers === true || isModuleMode)
diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index a536392b9a3..58e113ab19e 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -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}`)
 }
 
diff --git a/packages/compiler-core/src/index.ts b/packages/compiler-core/src/index.ts
index ef4e54cf2d7..29e5f681300 100644
--- a/packages/compiler-core/src/index.ts
+++ b/packages/compiler-core/src/index.ts
@@ -21,7 +21,13 @@ export {
   type StructuralDirectiveTransform,
   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,
@@ -61,7 +67,7 @@ export {
   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
diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index 8a989a8c659..1de865f42eb 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -52,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>`
    */
@@ -74,6 +79,7 @@ export interface ParserOptions
   delimiters?: [string, string]
   /**
    * Whitespace handling strategy
+   * @default 'condense'
    */
   whitespace?: 'preserve' | 'condense'
   /**
@@ -249,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/parser.ts b/packages/compiler-core/src/parser.ts
index 202fba81b18..a6e25681d75 100644
--- a/packages/compiler-core/src/parser.ts
+++ b/packages/compiler-core/src/parser.ts
@@ -43,6 +43,7 @@ import {
   isCoreComponent,
   isSimpleIdentifier,
   isStaticArgOf,
+  isVPre,
 } from './utils'
 import { decodeHTML } from 'entities/lib/decode.js'
 import {
@@ -72,6 +73,7 @@ export const defaultParserOptions: MergedParserOptions = {
   getNamespace: () => Namespaces.HTML,
   isVoidTag: NO,
   isPreTag: NO,
+  isIgnoreNewlineTag: NO,
   isCustomElement: NO,
   onError: defaultOnError,
   onWarn: defaultOnWarn,
@@ -179,7 +181,7 @@ const tokenizer = new Tokenizer(stack, {
     const name = currentOpenTag!.tag
     currentOpenTag!.isSelfClosing = true
     endOpenTag(end)
-    if (stack[0]?.tag === name) {
+    if (stack[0] && stack[0].tag === name) {
       onCloseTag(stack.shift()!, end)
     }
   },
@@ -225,7 +227,7 @@ const tokenizer = new Tokenizer(stack, {
         rawName: raw,
         exp: undefined,
         arg: undefined,
-        modifiers: raw === '.' ? ['prop'] : [],
+        modifiers: raw === '.' ? [createSimpleExpression('prop')] : [],
         loc: getLoc(start),
       }
       if (name === 'pre') {
@@ -245,7 +247,7 @@ const tokenizer = new Tokenizer(stack, {
   ondirarg(start, end) {
     if (start === end) return
     const arg = getSlice(start, end)
-    if (inVPre) {
+    if (inVPre && !isVPre(currentProp!)) {
       ;(currentProp as AttributeNode).name += arg
       setLocEnd((currentProp as AttributeNode).nameLoc, end)
     } else {
@@ -261,7 +263,7 @@ const tokenizer = new Tokenizer(stack, {
 
   ondirmodifier(start, end) {
     const mod = getSlice(start, end)
-    if (inVPre) {
+    if (inVPre && !isVPre(currentProp!)) {
       ;(currentProp as AttributeNode).name += '.' + mod
       setLocEnd((currentProp as AttributeNode).nameLoc, end)
     } else if ((currentProp as DirectiveNode).name === 'slot') {
@@ -273,7 +275,8 @@ const tokenizer = new Tokenizer(stack, {
         setLocEnd(arg.loc, end)
       }
     } else {
-      ;(currentProp as DirectiveNode).modifiers.push(mod)
+      const exp = createSimpleExpression(mod, true, getLoc(start, end))
+      ;(currentProp as DirectiveNode).modifiers.push(exp)
     }
   },
 
@@ -379,12 +382,14 @@ const tokenizer = new Tokenizer(stack, {
           if (
             __COMPAT__ &&
             currentProp.name === 'bind' &&
-            (syncIndex = currentProp.modifiers.indexOf('sync')) > -1 &&
+            (syncIndex = currentProp.modifiers.findIndex(
+              mod => mod.content === 'sync',
+            )) > -1 &&
             checkCompatEnabled(
               CompilerDeprecationTypes.COMPILER_V_BIND_SYNC,
               currentOptions,
               currentProp.loc,
-              currentProp.rawName,
+              currentProp.arg!.loc.source,
             )
           ) {
             currentProp.name = 'model'
@@ -587,14 +592,14 @@ function endOpenTag(end: number) {
 
 function onText(content: string, start: number, end: number) {
   if (__BROWSER__) {
-    const tag = stack[0]?.tag
+    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?.type === NodeTypes.TEXT) {
+  if (lastNode && lastNode.type === NodeTypes.TEXT) {
     // merge
     lastNode.content += content
     setLocEnd(lastNode.loc, end)
@@ -613,7 +618,7 @@ function onCloseTag(el: ElementNode, end: number, isImplied = false) {
     // implied close, end should be backtracked to close
     setLocEnd(el.loc, backTrack(end, CharCodes.Lt))
   } else {
-    setLocEnd(el.loc, end + 1)
+    setLocEnd(el.loc, lookAhead(end, CharCodes.Gt) + 1)
   }
 
   if (tokenizer.inSFCRoot) {
@@ -630,7 +635,7 @@ function onCloseTag(el: ElementNode, end: number, isImplied = false) {
   }
 
   // refine element type
-  const { tag, ns } = el
+  const { tag, ns, children } = el
   if (!inVPre) {
     if (tag === 'slot') {
       el.tagType = ElementTypes.SLOT
@@ -643,8 +648,18 @@ function onCloseTag(el: ElementNode, end: number, isImplied = false) {
 
   // whitespace management
   if (!tokenizer.inRCDATA) {
-    el.children = condenseWhitespace(el.children, el.tag)
+    el.children = condenseWhitespace(children)
   }
+
+  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--
   }
@@ -736,6 +751,12 @@ function onCloseTag(el: ElementNode, end: number, isImplied = false) {
   }
 }
 
+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--
@@ -765,7 +786,8 @@ function isComponent({ tag, props }: ElementNode): boolean {
     tag === 'component' ||
     isUpperCase(tag.charCodeAt(0)) ||
     isCoreComponent(tag) ||
-    currentOptions.isBuiltInComponent?.(tag) ||
+    (currentOptions.isBuiltInComponent &&
+      currentOptions.isBuiltInComponent(tag)) ||
     (currentOptions.isNativeTag && !currentOptions.isNativeTag(tag))
   ) {
     return true
@@ -811,10 +833,7 @@ function isUpperCase(c: number) {
 }
 
 const windowsNewlineRE = /\r\n/g
-function condenseWhitespace(
-  nodes: TemplateChildNode[],
-  tag?: string,
-): TemplateChildNode[] {
+function condenseWhitespace(nodes: TemplateChildNode[]): TemplateChildNode[] {
   const shouldCondense = currentOptions.whitespace !== 'preserve'
   let removedWhitespace = false
   for (let i = 0; i < nodes.length; i++) {
@@ -822,8 +841,8 @@ function condenseWhitespace(
     if (node.type === NodeTypes.TEXT) {
       if (!inPre) {
         if (isAllWhitespace(node.content)) {
-          const prev = nodes[i - 1]?.type
-          const next = nodes[i + 1]?.type
+          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:
@@ -859,14 +878,6 @@ function condenseWhitespace(
       }
     }
   }
-  if (inPre && tag && currentOptions.isPreTag(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
 }
 
@@ -920,6 +931,10 @@ function getLoc(start: number, end?: number): SourceLocation {
   }
 }
 
+export function cloneLoc(loc: SourceLocation): SourceLocation {
+  return getLoc(loc.start.offset, loc.end.offset)
+}
+
 function setLocEnd(loc: SourceLocation, end: number) {
   loc.end = tokenizer.getPos(end)
   loc.source = getSlice(loc.start.offset, end)
@@ -1057,7 +1072,7 @@ export function baseParse(input: string, options?: ParserOptions): RootNode {
     currentOptions.ns === Namespaces.SVG ||
     currentOptions.ns === Namespaces.MATH_ML
 
-  const delimiters = options?.delimiters
+  const delimiters = options && options.delimiters
   if (delimiters) {
     tokenizer.delimiterOpen = toCharCodes(delimiters[0])
     tokenizer.delimiterClose = toCharCodes(delimiters[1])
diff --git a/packages/compiler-core/src/runtimeHelpers.ts b/packages/compiler-core/src/runtimeHelpers.ts
index 47ab73e011a..7cf3757b249 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(
+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 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 = 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 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!
@@ -84,7 +125,7 @@ export const helperNameMap: Record<symbol, string> = {
   [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
index c63ec6bfbb1..b8a74790259 100644
--- a/packages/compiler-core/src/tokenizer.ts
+++ b/packages/compiler-core/src/tokenizer.ts
@@ -213,7 +213,15 @@ export interface Callbacks {
  * We don't have `Script`, `Style`, or `Title` here. Instead, we re-use the *End
  * sequences with an increased offset.
  */
-export const Sequences = {
+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]), // `-->`
@@ -227,7 +235,7 @@ export const Sequences = {
 
 export default class Tokenizer {
   /** The current state the tokenizer is in. */
-  public state = State.Text
+  public state: State = State.Text
   /** The read buffer. */
   private buffer = ''
   /** The beginning of the section that is currently being read. */
@@ -249,8 +257,8 @@ export default class Tokenizer {
 
   private readonly entityDecoder?: EntityDecoder
 
-  public mode = ParseMode.BASE
-  public get inSFCRoot() {
+  public mode: ParseMode = ParseMode.BASE
+  public get inSFCRoot(): boolean {
     return this.mode === ParseMode.SFC && this.stack.length === 0
   }
 
@@ -430,7 +438,7 @@ export default class Tokenizer {
         // We have to parse entities in <title> and <textarea> tags.
         if (!__BROWSER__ && c === CharCodes.Amp) {
           this.startEntity()
-        } else if (c === this.delimiterOpen[0]) {
+        } else if (!this.inVPre && c === this.delimiterOpen[0]) {
           // We also need to handle interpolation
           this.state = State.InterpolationOpen
           this.delimiterIndex = 0
@@ -526,7 +534,7 @@ export default class Tokenizer {
     this.state = State.SpecialStartSequence
   }
 
-  public enterRCDATA(sequence: Uint8Array, offset: number) {
+  public enterRCDATA(sequence: Uint8Array, offset: number): void {
     this.inRCDATA = true
     this.currentSequence = sequence
     this.sequenceIndex = offset
@@ -553,12 +561,11 @@ export default class Tokenizer {
         // HTML mode
         // - <script>, <style> RAWTEXT
         // - <title>, <textarea> RCDATA
-        const lower = c | 0x20
-        if (lower === 116 /* t */) {
+        if (c === 116 /* t */) {
           this.state = State.BeforeSpecialT
         } else {
           this.state =
-            lower === 115 /* s */ ? State.BeforeSpecialS : State.InTagName
+            c === 115 /* s */ ? State.BeforeSpecialS : State.InTagName
         }
       } else {
         this.state = State.InTagName
@@ -862,10 +869,9 @@ export default class Tokenizer {
     }
   }
   private stateBeforeSpecialS(c: number): void {
-    const lower = c | 0x20
-    if (lower === Sequences.ScriptEnd[3]) {
+    if (c === Sequences.ScriptEnd[3]) {
       this.startSpecial(Sequences.ScriptEnd, 4)
-    } else if (lower === Sequences.StyleEnd[3]) {
+    } else if (c === Sequences.StyleEnd[3]) {
       this.startSpecial(Sequences.StyleEnd, 4)
     } else {
       this.state = State.InTagName
@@ -873,10 +879,9 @@ export default class Tokenizer {
     }
   }
   private stateBeforeSpecialT(c: number): void {
-    const lower = c | 0x20
-    if (lower === Sequences.TitleEnd[3]) {
+    if (c === Sequences.TitleEnd[3]) {
       this.startSpecial(Sequences.TitleEnd, 4)
-    } else if (lower === Sequences.TextareaEnd[3]) {
+    } else if (c === Sequences.TextareaEnd[3]) {
       this.startSpecial(Sequences.TextareaEnd, 4)
     } else {
       this.state = State.InTagName
@@ -920,11 +925,11 @@ export default class Tokenizer {
    *
    * States that are more likely to be hit are higher up, as a performance improvement.
    */
-  public parse(input: string) {
+  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) {
+      if (c === CharCodes.NewLine && this.state !== State.InEntity) {
         this.newlines.push(this.index)
       }
       switch (this.state) {
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 322d0e17638..9d8fd842935 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -23,7 +23,6 @@ import {
 import {
   EMPTY_OBJ,
   NOOP,
-  PatchFlagNames,
   PatchFlags,
   camelize,
   capitalize,
@@ -38,7 +37,7 @@ import {
   helperNameMap,
 } from './runtimeHelpers'
 import { isVSlot } from './utils'
-import { hoistStatic, isSingleElementRoot } from './transforms/hoistStatic'
+import { cacheStatic, getSingleElementRoot } from './transforms/cacheStatic'
 import type { CompilerCompatOptions } from './compat/compatConfig'
 
 // There are two types of transforms:
@@ -93,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
@@ -102,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
@@ -114,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, inVOnce?: boolean): CacheExpression
   constantCache: WeakMap<TemplateChildNode, ConstantTypes>
 
   // 2.x Compat only
@@ -182,9 +184,9 @@ export function createTransformContext(
     directives: new Set(),
     hoists: [],
     imports: [],
+    cached: [],
     constantCache: new WeakMap(),
     temps: 0,
-    cached: 0,
     identifiers: Object.create(null),
     scopes: {
       vFor: 0,
@@ -193,6 +195,7 @@ export function createTransformContext(
       vOnce: 0,
     },
     parent: null,
+    grandParent: null,
     currentNode: root,
     childIndex: 0,
     inVOnce: false,
@@ -218,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.`)
@@ -227,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.`)
       }
@@ -239,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`)
       }
@@ -287,13 +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)
+    cache(exp, isVNode = false, inVOnce = false) {
+      const cacheExp = createCacheExpression(
+        context.cached.length,
+        exp,
+        isVNode,
+        inVOnce,
+      )
+      context.cached.push(cacheExp)
+      return cacheExp
     },
   }
 
@@ -316,11 +328,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)
@@ -344,12 +356,12 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
   const { helper } = context
   const { children } = root
   if (children.length === 1) {
-    const child = children[0]
+    const singleElementRootChild = getSingleElementRoot(root)
     // if the single child is an element, turn it into a block.
-    if (isSingleElementRoot(root, child) && child.codegenNode) {
+    if (singleElementRootChild && singleElementRootChild.codegenNode) {
       // single element root is never hoisted so codegenNode will never be
       // SimpleExpressionNode
-      const codegenNode = child.codegenNode
+      const codegenNode = singleElementRootChild.codegenNode
       if (codegenNode.type === NodeTypes.VNODE_CALL) {
         convertToBlock(codegenNode, context)
       }
@@ -358,12 +370,11 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
       // - single <slot/>, IfNode, ForNode: already blocks.
       // - single text node: always patched.
       // root codegen falls through via genNode()
-      root.codegenNode = child
+      root.codegenNode = children[0]
     }
   } 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,14 +382,13 @@ 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,
@@ -393,7 +403,7 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
 export function traverseChildren(
   parent: ParentNode,
   context: TransformContext,
-) {
+): void {
   let i = 0
   const nodeRemoved = () => {
     i--
@@ -401,6 +411,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
@@ -411,7 +422,7 @@ export function traverseChildren(
 export function traverseNode(
   node: RootNode | TemplateChildNode,
   context: TransformContext,
-) {
+): void {
   context.currentNode = node
   // apply transform plugins
   const { nodeTransforms } = context
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/cacheStatic.ts
similarity index 63%
rename from packages/compiler-core/src/transforms/hoistStatic.ts
rename to packages/compiler-core/src/transforms/cacheStatic.ts
index 70a0468e519..0f112e19cad 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/cacheStatic.ts
@@ -1,24 +1,37 @@
 import {
+  type CacheExpression,
   type CallExpression,
   type ComponentNode,
   ConstantTypes,
   ElementTypes,
+  type ExpressionNode,
   type JSChildNode,
   NodeTypes,
   type ParentNode,
   type PlainElementNode,
   type RootNode,
   type SimpleExpressionNode,
+  type SlotFunctionExpression,
+  type SlotsObjectProperty,
   type TemplateChildNode,
   type TemplateNode,
+  type TextCallNode,
   type VNodeCall,
   createArrayExpression,
+  createObjectProperty,
+  createSimpleExpression,
   getVNodeBlockHelper,
   getVNodeHelper,
 } from '../ast'
 import type { TransformContext } from '../transform'
-import { PatchFlags, isArray, isString, isSymbol } from '@vue/shared'
-import { isSlotOutlet } from '../utils'
+import {
+  PatchFlagNames,
+  PatchFlags,
+  isArray,
+  isString,
+  isSymbol,
+} from '@vue/shared'
+import { findDir, isSlotOutlet } from '../utils'
 import {
   GUARD_REACTIVE_PROPS,
   NORMALIZE_CLASS,
@@ -27,40 +40,40 @@ import {
   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]),
+    !!getSingleElementRoot(root),
   )
 }
 
-export function isSingleElementRoot(
+export function getSingleElementRoot(
   root: RootNode,
-  child: TemplateChildNode,
-): child is PlainElementNode | ComponentNode | TemplateNode {
-  const { children } = root
-  return (
-    children.length === 1 &&
-    child.type === NodeTypes.ELEMENT &&
-    !isSlotOutlet(child)
-  )
+): PlainElementNode | ComponentNode | TemplateNode | null {
+  const children = root.children.filter(x => x.type !== NodeTypes.COMMENT)
+  return children.length === 1 &&
+    children[0].type === NodeTypes.ELEMENT &&
+    !isSlotOutlet(children[0])
+    ? children[0]
+    : null
 }
 
 function walk(
   node: ParentNode,
+  parent: ParentNode | undefined,
   context: TransformContext,
   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 +82,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 +92,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 +110,23 @@ function walk(
           }
         }
       }
+    } else if (child.type === NodeTypes.TEXT_CALL) {
+      const constantType = doNotHoistNode
+        ? ConstantTypes.NOT_CONSTANT
+        : getConstantType(child, context)
+      if (constantType >= ConstantTypes.CAN_CACHE) {
+        if (
+          child.codegenNode.type === NodeTypes.JS_CALL_EXPRESSION &&
+          child.codegenNode.arguments.length > 0
+        ) {
+          child.codegenNode.arguments.push(
+            PatchFlags.CACHED +
+              (__DEV__ ? ` /* ${PatchFlagNames[PatchFlags.CACHED]} */` : ``),
+          )
+        }
+        toCache.push(child)
+        continue
+      }
     }
 
     // walk further
@@ -107,54 +135,146 @@ 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,
+          inFor,
         )
       }
     }
   }
 
-  if (hoistedCount && context.transformHoist) {
-    context.transformHoist(children, context, node)
+  let cachedAsArray = false
+  const slotCacheKeys = []
+  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) {
+        slotCacheKeys.push(context.cached.length)
+        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) {
+        slotCacheKeys.push(context.cached.length)
+        slot.returns = getCacheExpression(
+          createArrayExpression(slot.returns as TemplateChildNode[]),
+        )
+        cachedAsArray = true
+      }
+    }
+  }
+
+  if (!cachedAsArray) {
+    for (const child of toCache) {
+      slotCacheKeys.push(context.cached.length)
+      child.codegenNode = context.cache(child.codegenNode!)
+    }
   }
 
-  // all children were hoisted - the entire children array is hoistable.
+  // put the slot cached keys on the slot object, so that the cache
+  // can be removed when component unmounting to prevent memory leaks
   if (
-    hoistedCount &&
-    hoistedCount === originalCount &&
+    slotCacheKeys.length &&
     node.type === NodeTypes.ELEMENT &&
-    node.tagType === ElementTypes.ELEMENT &&
+    node.tagType === ElementTypes.COMPONENT &&
     node.codegenNode &&
     node.codegenNode.type === NodeTypes.VNODE_CALL &&
-    isArray(node.codegenNode.children)
+    node.codegenNode.children &&
+    !isArray(node.codegenNode.children) &&
+    node.codegenNode.children.type === NodeTypes.JS_OBJECT_EXPRESSION
   ) {
-    const hoisted = context.hoist(
-      createArrayExpression(node.codegenNode.children),
+    node.codegenNode.children.properties.push(
+      createObjectProperty(
+        `__`,
+        createSimpleExpression(JSON.stringify(slotCacheKeys), false),
+      ) as SlotsObjectProperty,
     )
+  }
+
+  function getCacheExpression(value: JSChildNode): CacheExpression {
+    const exp = context.cache(value)
     // #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}]`
+    // 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
     }
-    node.codegenNode.children = hoisted
+    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,
+  node: TemplateChildNode | SimpleExpressionNode | CacheExpression,
   context: TransformContext,
 ): ConstantTypes {
   const { constantCache } = context
@@ -174,12 +294,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:
@@ -283,6 +403,8 @@ export function getConstantType(
         }
       }
       return returnType
+    case NodeTypes.JS_CACHE_EXPRESSION:
+      return ConstantTypes.CAN_CACHE
     default:
       if (__DEV__) {
         const exhaustiveCheck: never = node
@@ -364,8 +486,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/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index c50f7f5e969..1dca0c514c1 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -23,7 +23,6 @@ import {
   createVNodeCall,
 } from '../ast'
 import {
-  PatchFlagNames,
   PatchFlags,
   camelize,
   capitalize,
@@ -57,13 +56,14 @@ import {
   toValidAssetId,
 } from '../utils'
 import { buildSlots } from './vSlot'
-import { getConstantType } from './hoistStatic'
+import { getConstantType } from './cacheStatic'
 import { BindingTypes } from '../options'
 import {
   CompilerDeprecationTypes,
   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.
@@ -100,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']
@@ -116,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) {
@@ -205,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(
@@ -233,7 +213,7 @@ export const transformElement: NodeTransform = (node, context) => {
       vnodeTag,
       vnodeProps,
       vnodeChildren,
-      vnodePatchFlag,
+      patchFlag === 0 ? undefined : patchFlag,
       vnodeDynamicProps,
       vnodeDirectives,
       !!shouldUseBlock,
@@ -248,12 +228,12 @@ export function resolveComponentType(
   node: ComponentNode,
   context: TransformContext,
   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 ||
@@ -263,10 +243,19 @@ export function resolveComponentType(
           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,
@@ -385,7 +374,7 @@ 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,
@@ -423,6 +412,18 @@ export function buildProps(
     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
@@ -492,14 +493,7 @@ export function buildProps(
       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.
@@ -591,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
@@ -605,9 +594,9 @@ export function buildProps(
         hasDynamicKeys = true
         if (exp) {
           if (isVBind) {
-            // have to merge early for compat build check
-            pushMergeArg()
             if (__COMPAT__) {
+              // have to merge early for compat build check
+              pushMergeArg()
               // 2.x v-bind object order compat
               if (__DEV__) {
                 const hasOverridableKeys = mergeArgs.some(arg => {
@@ -650,6 +639,9 @@ export function buildProps(
               }
             }
 
+            // #10696 in case a v-bind object contains ref
+            pushRefVForMarker()
+            pushMergeArg()
             mergeArgs.push(exp)
           } else {
             // v-on="obj" -> toHandlers(obj)
@@ -674,7 +666,7 @@ export function buildProps(
       }
 
       // 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
       }
 
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index c7cd1b63d56..9ae8897e674 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -24,7 +24,7 @@ import {
   isStaticPropertyKey,
   walkIdentifiers,
 } from '../babelUtils'
-import { advancePositionWithClone, isSimpleIdentifier } from '../utils'
+import { advancePositionWithClone, findDir, isSimpleIdentifier } from '../utils'
 import {
   genPropsAccessExp,
   hasOwn,
@@ -40,15 +40,11 @@ import type {
   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) {
@@ -58,6 +54,7 @@ export const transformExpression: NodeTransform = (node, context) => {
     )
   } else if (node.type === NodeTypes.ELEMENT) {
     // handle directives on element
+    const memo = findDir(node, 'memo')
     for (let i = 0; i < node.props.length; i++) {
       const dir = node.props[i]
       // do not process for v-on & v-for since they are special handled
@@ -69,7 +66,14 @@ export const transformExpression: NodeTransform = (node, context) => {
         if (
           exp &&
           exp.type === NodeTypes.SIMPLE_EXPRESSION &&
-          !(dir.name === 'on' && arg)
+          !(dir.name === 'on' && arg) &&
+          // key has been processed in transformFor(vMemo + vFor)
+          !(
+            memo &&
+            arg &&
+            arg.type === NodeTypes.SIMPLE_EXPRESSION &&
+            arg.content === 'key'
+          )
         ) {
           dir.exp = processExpression(
             exp,
@@ -120,7 +124,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
@@ -226,8 +234,6 @@ 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)
 
   let ast = node.ast
 
@@ -256,7 +262,7 @@ export function processExpression(
       if (isLiteral) {
         node.constType = ConstantTypes.CAN_STRINGIFY
       } else {
-        node.constType = ConstantTypes.CAN_HOIST
+        node.constType = ConstantTypes.CAN_CACHE
       }
     }
     return node
@@ -272,9 +278,10 @@ export function processExpression(
       ? ` ${rawExp} `
       : `(${rawExp})${asParams ? `=>{}` : ``}`
     try {
-      ast = parse(source, {
+      ast = parseExpression(source, {
+        sourceType: 'module',
         plugins: context.expressionPlugins,
-      }).program
+      })
     } catch (e: any) {
       context.onError(
         createCompilerError(
@@ -316,7 +323,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
@@ -370,9 +383,7 @@ export function processExpression(
     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/transformText.ts b/packages/compiler-core/src/transforms/transformText.ts
index bdfb37ccb07..6ae97d90394 100644
--- a/packages/compiler-core/src/transforms/transformText.ts
+++ b/packages/compiler-core/src/transforms/transformText.ts
@@ -11,7 +11,7 @@ import {
 import { isText } from '../utils'
 import { CREATE_TEXT } from '../runtimeHelpers'
 import { PatchFlagNames, PatchFlags } from '@vue/shared'
-import { getConstantType } from './hoistStatic'
+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.
diff --git a/packages/compiler-core/src/transforms/vBind.ts b/packages/compiler-core/src/transforms/vBind.ts
index 234cf1fbc30..c82706c10c7 100644
--- a/packages/compiler-core/src/transforms/vBind.ts
+++ b/packages/compiler-core/src/transforms/vBind.ts
@@ -1,5 +1,6 @@
-import type { DirectiveTransform } from '../transform'
+import type { DirectiveTransform, TransformContext } from '../transform'
 import {
+  type DirectiveNode,
   type ExpressionNode,
   NodeTypes,
   type SimpleExpressionNode,
@@ -11,7 +12,7 @@ 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
+// v-bind without arg is handled directly in ./transformElement.ts due to its affecting
 // codegen for the entire props object. This transform here is only for v-bind
 // *with* args.
 export const transformBind: DirectiveTransform = (dir, _node, context) => {
@@ -56,22 +57,19 @@ export const transformBind: DirectiveTransform = (dir, _node, context) => {
       }
     }
 
-    const propName = camelize((arg as SimpleExpressionNode).content)
-    exp = dir.exp = createSimpleExpression(propName, false, arg.loc)
-    if (!__BROWSER__) {
-      exp = dir.exp = processExpression(exp, context)
-    }
+    transformBindShorthand(dir, context)
+    exp = dir.exp!
   }
 
   if (arg.type !== NodeTypes.SIMPLE_EXPRESSION) {
     arg.children.unshift(`(`)
     arg.children.push(`) || ""`)
   } else if (!arg.isStatic) {
-    arg.content = `${arg.content} || ""`
+    arg.content = arg.content ? `${arg.content} || ""` : `""`
   }
 
   // .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)
@@ -85,10 +83,10 @@ 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, '^')
     }
   }
@@ -98,6 +96,19 @@ export const transformBind: DirectiveTransform = (dir, _node, context) => {
   }
 }
 
+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)
+  }
+}
+
 const injectPrefix = (arg: ExpressionNode, prefix: string) => {
   if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
     if (arg.isStatic) {
diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
index 5d423ee2429..a639caf2cae 100644
--- a/packages/compiler-core/src/transforms/vFor.ts
+++ b/packages/compiler-core/src/transforms/vFor.ts
@@ -1,4 +1,5 @@
 import {
+  type NodeTransform,
   type TransformContext,
   createStructuralDirectiveTransform,
 } from '../transform'
@@ -46,9 +47,10 @@ import {
 } from '../runtimeHelpers'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
-import { PatchFlagNames, PatchFlags } 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
@@ -60,13 +62,30 @@ export const transformFor = createStructuralDirectiveTransform(
       ]) as ForRenderListExpression
       const isTemplate = isTemplateNode(node)
       const memo = findDir(node, 'memo')
-      const keyProp = findProp(node, `key`)
-      const keyExp =
+      const keyProp = findProp(node, `key`, false, true)
+      const isDirKey = keyProp && keyProp.type === NodeTypes.DIRECTIVE
+      if (isDirKey && !keyProp.exp) {
+        // resolve :key shorthand #10882
+        transformBindShorthand(keyProp, context)
+      }
+      let 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)
+
+      if (memo && keyExp && isDirKey) {
+        if (!__BROWSER__) {
+          keyProp.exp = keyExp = processExpression(
+            keyExp as SimpleExpressionNode,
+            context,
+          )
+        }
+      }
+      const keyProperty =
+        keyProp && keyExp ? createObjectProperty(`key`, keyExp) : null
 
       if (!__BROWSER__ && isTemplate) {
         // #2085 / #5288 process :key and v-memo expressions need to be
@@ -101,8 +120,7 @@ export const transformFor = createStructuralDirectiveTransform(
         helper(FRAGMENT),
         undefined,
         renderExp,
-        fragmentFlag +
-          (__DEV__ ? ` /* ${PatchFlagNames[fragmentFlag]} */` : ``),
+        fragmentFlag,
         undefined,
         undefined,
         true /* isBlock */,
@@ -161,10 +179,7 @@ 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,
@@ -224,8 +239,10 @@ export const transformFor = createStructuralDirectiveTransform(
           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(
@@ -246,7 +263,7 @@ export function processFor(
   dir: DirectiveNode,
   context: TransformContext,
   processCodegen?: (forNode: ForNode) => (() => void) | undefined,
-) {
+): (() => void) | undefined {
   if (!dir.exp) {
     context.onError(
       createCompilerError(ErrorCodes.X_V_FOR_NO_EXPRESSION, dir.loc),
@@ -293,7 +310,7 @@ export function processFor(
 
   const onExit = processCodegen && processCodegen(forNode)
 
-  return () => {
+  return (): void => {
     scopes.vFor--
     if (!__BROWSER__ && context.prefixIdentifiers) {
       value && removeIdentifiers(value)
@@ -307,7 +324,7 @@ export function processFor(
 export function finalizeForParseResult(
   result: ForParseResult,
   context: TransformContext,
-) {
+): void {
   if (result.finalized) return
 
   if (!__BROWSER__ && context.prefixIdentifiers) {
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index a6437f89c63..8bf5c6a32ff 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -1,4 +1,5 @@
 import {
+  type NodeTransform,
   type TransformContext,
   createStructuralDirectiveTransform,
   traverseNode,
@@ -29,11 +30,12 @@ import {
 import { ErrorCodes, createCompilerError } from '../errors'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
+import { cloneLoc } from '../parser'
 import { CREATE_COMMENT, FRAGMENT } from '../runtimeHelpers'
 import { findDir, findProp, getMemoedVNodeCall, injectProp } from '../utils'
-import { PatchFlagNames, PatchFlags } from '@vue/shared'
+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) => {
@@ -83,7 +85,7 @@ export function processIf(
     branch: IfBranchNode,
     isRoot: boolean,
   ) => (() => void) | undefined,
-) {
+): (() => void) | undefined {
   if (
     dir.name !== 'else' &&
     (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim())
@@ -109,7 +111,7 @@ export function processIf(
     const branch = createIfBranch(node, dir)
     const ifNode: IfNode = {
       type: NodeTypes.IF,
-      loc: node.loc,
+      loc: cloneLoc(node.loc),
       branches: [branch],
     }
     context.replaceNode(ifNode)
@@ -139,9 +141,9 @@ export function processIf(
       }
 
       if (sibling && sibling.type === NodeTypes.IF) {
-        // Check if v-else was followed by v-else-if
+        // Check if v-else was followed by v-else-if or there are two adjacent v-else
         if (
-          dir.name === 'else-if' &&
+          (dir.name === 'else-if' || dir.name === 'else') &&
           sibling.branches[sibling.branches.length - 1].condition === undefined
         ) {
           context.onError(
@@ -248,7 +250,7 @@ function createChildrenCodegenNode(
       `${keyIndex}`,
       false,
       locStub,
-      ConstantTypes.CAN_HOIST,
+      ConstantTypes.CAN_CACHE,
     ),
   )
   const { children } = branch
@@ -263,7 +265,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 (
@@ -272,7 +273,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(
@@ -280,7 +280,7 @@ function createChildrenCodegenNode(
         helper(FRAGMENT),
         createObjectExpression([keyProperty]),
         children,
-        patchFlag + (__DEV__ ? ` /* ${patchFlagText} */` : ``),
+        patchFlag,
         undefined,
         undefined,
         true,
diff --git a/packages/compiler-core/src/transforms/vMemo.ts b/packages/compiler-core/src/transforms/vMemo.ts
index 7c728f4caad..83295a45c8a 100644
--- a/packages/compiler-core/src/transforms/vMemo.ts
+++ b/packages/compiler-core/src/transforms/vMemo.ts
@@ -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 863b3a7d729..598c1ea4387 100644
--- a/packages/compiler-core/src/transforms/vModel.ts
+++ b/packages/compiler-core/src/transforms/vModel.ts
@@ -31,7 +31,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
 
   // we assume v-model directives are always parsed
   // (not artificially created by a transform)
-  const rawExp = exp.loc.source
+  const rawExp = exp.loc.source.trim()
   const expString =
     exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : rawExp
 
@@ -55,10 +55,7 @@ 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),
     )
@@ -134,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
@@ -148,7 +146,7 @@ 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 8c13bdae524..047c5e7d1b7 100644
--- a/packages/compiler-core/src/transforms/vOn.ts
+++ b/packages/compiler-core/src/transforms/vOn.ts
@@ -13,14 +13,11 @@ import { camelize, toHandlerKey } from '@vue/shared'
 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
+  // v-on without arg is handled directly in ./transformElement.ts due to its affecting
   // codegen for the entire props object. This transform here is only for v-on
   // *with* args.
   arg: ExpressionNode
@@ -84,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
diff --git a/packages/compiler-core/src/transforms/vOnce.ts b/packages/compiler-core/src/transforms/vOnce.ts
index 483b98da961..685da59ccf0 100644
--- a/packages/compiler-core/src/transforms/vOnce.ts
+++ b/packages/compiler-core/src/transforms/vOnce.ts
@@ -17,7 +17,11 @@ export const transformOnce: NodeTransform = (node, context) => {
       context.inVOnce = false
       const cur = context.currentNode as ElementNode | IfNode | ForNode
       if (cur.codegenNode) {
-        cur.codegenNode = context.cache(cur.codegenNode, true /* isVNode */)
+        cur.codegenNode = context.cache(
+          cur.codegenNode,
+          true /* isVNode */,
+          true /* inVOnce */,
+        )
       }
     }
   }
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index 1b95e6f71db..43296dcc9b6 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -222,14 +222,11 @@ export function buildSlots(
       let prev
       while (j--) {
         prev = children[j]
-        if (prev.type !== NodeTypes.COMMENT) {
+        if (prev.type !== NodeTypes.COMMENT && isNonWhitespaceContent(prev)) {
           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[
@@ -345,7 +342,6 @@ export function buildSlots(
     : hasForwardedSlots(node.children)
       ? SlotFlags.FORWARDED
       : SlotFlags.STABLE
-
   let slots = createObjectExpression(
     slotsProperties.concat(
       createObjectProperty(
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index 99a2c5b61a8..ab851ed6f69 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -1,5 +1,6 @@
 import {
   type BlockCodegenNode,
+  type CacheExpression,
   type CallExpression,
   type DirectiveNode,
   type ElementNode,
@@ -39,7 +40,7 @@ import {
 import { NOOP, isObject, isString } from '@vue/shared'
 import type { PropsExpression } from './transforms/transformElement'
 import { parseExpression } from '@babel/parser'
-import type { Expression } from '@babel/types'
+import type { Expression, Node } from '@babel/types'
 import { unwrapTSNode } from './babelUtils'
 
 export const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode =>
@@ -62,7 +63,7 @@ export function isCoreComponent(tag: string): symbol | void {
   }
 }
 
-const nonIdentifierRE = /^\d|[^\$\w]/
+const nonIdentifierRE = /^$|^\d|[^\$\w\xA0-\uFFFF]/
 export const isSimpleIdentifier = (name: string): boolean =>
   !nonIdentifierRE.test(name)
 
@@ -77,15 +78,20 @@ 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[] = []
@@ -152,13 +158,20 @@ 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,
-        })
+        let ret: Node =
+          exp.ast ||
+          parseExpression(getExpSource(exp), {
+            plugins: context.expressionPlugins
+              ? [...context.expressionPlugins, 'typescript']
+              : ['typescript'],
+          })
         ret = unwrapTSNode(ret) as Expression
         return (
           ret.type === 'MemberExpression' ||
@@ -170,9 +183,52 @@ export const isMemberExpressionNode = __BROWSER__
       }
     }
 
-export const isMemberExpression = __BROWSER__
-  ? isMemberExpressionBrowser
-  : isMemberExpressionNode
+export const isMemberExpression: (
+  exp: ExpressionNode,
+  context: TransformContext,
+) => boolean = __BROWSER__ ? isMemberExpressionBrowser : isMemberExpressionNode
+
+const fnExpRE =
+  /^\s*(async\s*)?(\([^)]*?\)|[\w$_]+)\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/
+
+export const isFnExpressionBrowser: (exp: ExpressionNode) => boolean = exp =>
+  fnExpRE.test(getExpSource(exp))
+
+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,
@@ -216,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`)
   }
@@ -287,6 +343,10 @@ export function isText(
   return node.type === NodeTypes.INTERPOLATION || node.type === NodeTypes.TEXT
 }
 
+export function isVPre(p: ElementNode['props'][0]): p is DirectiveNode {
+  return p.type === NodeTypes.DIRECTIVE && p.name === 'pre'
+}
+
 export function isVSlot(p: ElementNode['props'][0]): p is DirectiveNode {
   return p.type === NodeTypes.DIRECTIVE && p.name === 'slot'
 }
@@ -330,7 +390,7 @@ export function injectProp(
   node: VNodeCall | RenderSlotCall,
   prop: Property,
   context: TransformContext,
-) {
+): void {
   let propsWithInjection: ObjectExpression | CallExpression | undefined
   /**
    * 1. mergeProps(...)
@@ -438,7 +498,12 @@ export function toValidAssetId(
 
 // Check if a node contains expressions that reference current context scope ids
 export function hasScopeRef(
-  node: TemplateChildNode | IfBranchNode | ExpressionNode | undefined,
+  node:
+    | TemplateChildNode
+    | IfBranchNode
+    | ExpressionNode
+    | CacheExpression
+    | undefined,
   ids: TransformContext['identifiers'],
 ): boolean {
   if (!node || Object.keys(ids).length === 0) {
@@ -481,6 +546,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__) {
@@ -491,7 +557,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 {
@@ -499,4 +567,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 dca90ddd3f1..a8b7a4fd337 100644
--- a/packages/compiler-core/src/validateExpression.ts
+++ b/packages/compiler-core/src/validateExpression.ts
@@ -30,7 +30,7 @@ export function validateBrowserExpression(
   context: TransformContext,
   asParams = false,
   asRawStatements = false,
-) {
+): void {
   const exp = node.content
 
   // empty expressions are validated per-directive since some directives
diff --git a/packages/compiler-dom/README.md b/packages/compiler-dom/README.md
index 0027f542659..57748e661ce 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__/decoderHtmlBrowser.spec.ts b/packages/compiler-dom/__tests__/decoderHtmlBrowser.spec.ts
index ecdc070ad96..507d4243b88 100644
--- a/packages/compiler-dom/__tests__/decoderHtmlBrowser.spec.ts
+++ b/packages/compiler-dom/__tests__/decoderHtmlBrowser.spec.ts
@@ -40,5 +40,7 @@ describe('decodeHtmlBrowser', () => {
         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 80a08e76af6..7418b8e33fb 100644
--- a/packages/compiler-dom/__tests__/parse.spec.ts
+++ b/packages/compiler-dom/__tests__/parse.spec.ts
@@ -20,7 +20,7 @@ describe('DOM parser', () => {
       )
       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-->',
@@ -32,6 +32,36 @@ describe('DOM parser', () => {
       })
     })
 
+    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
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 33fb37a58f9..5bc40d3fab5 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,183 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`stringify static html > should bail on bindings that are hoisted but not stringifiable 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, _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 /* CACHED */),
+    _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 > serializing template string style 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 null 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: null }),
+      _createElementVNode("option", { value: "1" }),
+      _createElementVNode("option", { value: "1" }),
+      _createElementVNode("option", { value: "1" }),
+      _createElementVNode("option", { value: "1" }),
+      _createElementVNode("option", { value: "1" })
+    ], -1 /* CACHED */)
+  ])))
+}"
+`;
+
+exports[`stringify static html > should bail for <option> elements with number values 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
-]
+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 /* CACHED */)
+  ])))
+}"
+`;
+
+exports[`stringify static html > should bail for comments 1`] = `
+"const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+const _hoisted_1 = { class: "a" }
 
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createCommentVNode(" Comment 1 "),
+    _createElementVNode("div", _hoisted_1, [
+      _createCommentVNode(" Comment 2 "),
+      _cache[0] || (_cache[0] = _createStaticVNode("<span class=\\"b\\"></span><span class=\\"b\\"></span><span class=\\"b\\"></span><span class=\\"b\\"></span><span class=\\"b\\"></span>", 5))
+    ])
+  ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
 }"
 `;
 
-exports[`stringify static html > should work with bindings that are non-static but stringifiable 1`] = `
+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 /* CACHED */)
+  ])))
+}"
+`;
+
+exports[`stringify static html > should work for <option> elements with string values 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, _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, _hoisted_2))
+  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
+
+return function render(_ctx, _cache) {
+  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/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
index b0eb515c254..f58e207d6cf 100644
--- a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -23,134 +23,168 @@ 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>`,
     )
-    // 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>`,
     )
+
     // 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>`,
     )
     // 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>`,
     )
-    // 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>`,
     )
     // 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()
+  })
+
+  // #12391
+  test('serializing template string style', () => {
+    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>`,
+    )
+    // should be optimized now
+    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>`,
@@ -158,27 +192,19 @@ describe('stringify static html', () => {
       )}</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>`,
@@ -195,7 +221,7 @@ describe('stringify static html', () => {
                 '_imports_0_',
                 false,
                 node.loc,
-                ConstantTypes.CAN_HOIST,
+                ConstantTypes.CAN_CACHE,
               )
               node.props[0] = {
                 type: NodeTypes.DIRECTIVE,
@@ -210,17 +236,7 @@ describe('stringify static html', () => {
         ],
       },
     )
-    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()
   })
 
@@ -258,35 +274,19 @@ describe('stringify static html', () => {
         ],
       },
     )
-    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>`,
     )
-    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(
@@ -294,46 +294,23 @@ describe('stringify static html', () => {
         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>`,
     )
-    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>`,
     )
-    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)', () => {
@@ -343,14 +320,7 @@ describe('stringify static html', () => {
         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', () => {
@@ -360,14 +330,9 @@ describe('stringify static html', () => {
         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(
@@ -375,14 +340,9 @@ describe('stringify static html', () => {
         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`', () => {
@@ -392,19 +352,13 @@ describe('stringify static html', () => {
         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
@@ -415,19 +369,24 @@ describe('stringify static html', () => {
         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', () => {
@@ -439,19 +398,34 @@ describe('stringify static html', () => {
         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 +459,70 @@ 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('should bail for comments', () => {
+    const { code } = compileWithStringify(
+      `<!-- Comment 1 --><div class="a"><!-- Comment 2 -->${repeat(
+        `<span class="b"/>`,
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div>`,
+    )
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should bail for <option> elements with null values', () => {
+    const { ast, code } = compileWithStringify(
+      `<div><select><option :value="null" />${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/vHtml.spec.ts b/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
index a59a7a40aaf..bca2fdf9558 100644
--- a/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
@@ -6,10 +6,7 @@ import {
 } 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'
 
@@ -34,7 +31,7 @@ describe('compiler: v-html transform', () => {
         innerHTML: `[test]`,
       }),
       children: undefined,
-      patchFlag: genFlagText(PatchFlags.PROPS),
+      patchFlag: PatchFlags.PROPS,
       dynamicProps: `["innerHTML"]`,
     })
   })
@@ -53,7 +50,7 @@ describe('compiler: v-html transform', () => {
         innerHTML: `[test]`,
       }),
       children: undefined, // <-- children should have been removed
-      patchFlag: genFlagText(PatchFlags.PROPS),
+      patchFlag: PatchFlags.PROPS,
       dynamicProps: `["innerHTML"]`,
     })
   })
diff --git a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
index 2e80729119d..ee9ea93c33d 100644
--- a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
@@ -14,7 +14,6 @@ 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 = {}) {
@@ -268,11 +267,11 @@ describe('compiler-dom: transform v-on', () => {
       prefixIdentifiers: 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: {
@@ -300,6 +299,6 @@ describe('compiler-dom: transform v-on', () => {
       },
     })
     // 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/vText.spec.ts b/packages/compiler-dom/__tests__/transforms/vText.spec.ts
index 1b717e83398..e96ab297298 100644
--- a/packages/compiler-dom/__tests__/transforms/vText.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vText.spec.ts
@@ -6,10 +6,7 @@ import {
 } 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'
 
@@ -36,7 +33,7 @@ describe('compiler: v-text transform', () => {
         },
       }),
       children: undefined,
-      patchFlag: genFlagText(PatchFlags.PROPS),
+      patchFlag: PatchFlags.PROPS,
       dynamicProps: `["textContent"]`,
     })
   })
@@ -57,7 +54,7 @@ describe('compiler: v-text transform', () => {
         },
       }),
       children: undefined, // <-- children should have been removed
-      patchFlag: genFlagText(PatchFlags.PROPS),
+      patchFlag: PatchFlags.PROPS,
       dynamicProps: `["textContent"]`,
     })
   })
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 00000000000..46d69846bae
--- /dev/null
+++ b/packages/compiler-dom/__tests__/transforms/validateHtmlNesting.spec.ts
@@ -0,0 +1,202 @@
+import { type CompilerError, compile } from '../../src'
+import { isValidHTMLNesting } from '../../src/htmlNesting'
+
+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()
+  })
+
+  // #13318
+  it('should not warn when parent tag is template', () => {
+    let err: CompilerError | undefined
+    compile(`<template><tr/></template>`, {
+      onWarn: e => (err = e),
+    })
+    expect(err).toBeUndefined()
+  })
+})
+
+/**
+ * Copied from https://github.com/MananTank/validate-html-nesting
+ * with ISC license
+ */
+describe('isValidHTMLNesting', () => {
+  test('form', () => {
+    // invalid
+    expect(isValidHTMLNesting('form', 'form')).toBe(false)
+
+    // valid
+    expect(isValidHTMLNesting('form', 'div')).toBe(true)
+    expect(isValidHTMLNesting('form', 'input')).toBe(true)
+    expect(isValidHTMLNesting('form', 'select')).toBe(true)
+    expect(isValidHTMLNesting('form', 'button')).toBe(true)
+    expect(isValidHTMLNesting('form', 'label')).toBe(true)
+    expect(isValidHTMLNesting('form', 'h1')).toBe(true)
+  })
+
+  test('p', () => {
+    // invalid
+    expect(isValidHTMLNesting('p', 'p')).toBe(false)
+    expect(isValidHTMLNesting('p', 'div')).toBe(false)
+    expect(isValidHTMLNesting('p', 'hr')).toBe(false)
+    expect(isValidHTMLNesting('p', 'blockquote')).toBe(false)
+    expect(isValidHTMLNesting('p', 'pre')).toBe(false)
+
+    // valid
+    expect(isValidHTMLNesting('p', 'a')).toBe(true)
+    expect(isValidHTMLNesting('p', 'span')).toBe(true)
+    expect(isValidHTMLNesting('p', 'abbr')).toBe(true)
+    expect(isValidHTMLNesting('p', 'button')).toBe(true)
+    expect(isValidHTMLNesting('p', 'b')).toBe(true)
+    expect(isValidHTMLNesting('p', 'i')).toBe(true)
+    expect(isValidHTMLNesting('p', 'input')).toBe(true)
+    expect(isValidHTMLNesting('p', 'label')).toBe(true)
+  })
+
+  test('a', () => {
+    // invalid
+    expect(isValidHTMLNesting('a', 'a')).toBe(false)
+
+    // valid
+    expect(isValidHTMLNesting('a', 'div')).toBe(true)
+    expect(isValidHTMLNesting('a', 'span')).toBe(true)
+  })
+
+  test('button', () => {
+    // invalid
+    expect(isValidHTMLNesting('button', 'button')).toBe(false)
+
+    // valid
+    expect(isValidHTMLNesting('button', 'div')).toBe(true)
+    expect(isValidHTMLNesting('button', 'span')).toBe(true)
+  })
+
+  test('table', () => {
+    // invalid
+    expect(isValidHTMLNesting('table', 'tr')).toBe(false)
+    expect(isValidHTMLNesting('table', 'table')).toBe(false)
+    expect(isValidHTMLNesting('table', 'td')).toBe(false)
+
+    // valid
+    expect(isValidHTMLNesting('table', 'thead')).toBe(true)
+    expect(isValidHTMLNesting('table', 'tbody')).toBe(true)
+    expect(isValidHTMLNesting('table', 'tfoot')).toBe(true)
+    expect(isValidHTMLNesting('table', 'caption')).toBe(true)
+    expect(isValidHTMLNesting('table', 'colgroup')).toBe(true)
+  })
+
+  test('td', () => {
+    // valid
+    expect(isValidHTMLNesting('td', 'span')).toBe(true)
+    expect(isValidHTMLNesting('tr', 'td')).toBe(true)
+
+    // invalid
+    expect(isValidHTMLNesting('td', 'td')).toBe(false)
+    expect(isValidHTMLNesting('div', 'td')).toBe(false)
+  })
+
+  test('tbody', () => {
+    // invalid
+    expect(isValidHTMLNesting('tbody', 'td')).toBe(false)
+
+    // valid
+    expect(isValidHTMLNesting('tbody', 'tr')).toBe(true)
+  })
+
+  test('tr', () => {
+    // invalid
+    expect(isValidHTMLNesting('tr', 'tr')).toBe(false)
+    expect(isValidHTMLNesting('table', 'tr')).toBe(false)
+
+    // valid
+    expect(isValidHTMLNesting('tbody', 'tr')).toBe(true)
+    expect(isValidHTMLNesting('thead', 'tr')).toBe(true)
+    expect(isValidHTMLNesting('tfoot', 'tr')).toBe(true)
+    expect(isValidHTMLNesting('tr', 'td')).toBe(true)
+    expect(isValidHTMLNesting('tr', 'th')).toBe(true)
+  })
+
+  test('li', () => {
+    // invalid
+    expect(isValidHTMLNesting('li', 'li')).toBe(false)
+    // valid
+    expect(isValidHTMLNesting('li', 'div')).toBe(true)
+    expect(isValidHTMLNesting('li', 'ul')).toBe(true)
+  })
+
+  test('headings', () => {
+    // invalid
+    expect(isValidHTMLNesting('h1', 'h1')).toBe(false)
+    expect(isValidHTMLNesting('h2', 'h1')).toBe(false)
+    expect(isValidHTMLNesting('h3', 'h1')).toBe(false)
+    expect(isValidHTMLNesting('h1', 'h6')).toBe(false)
+
+    // valid
+    expect(isValidHTMLNesting('h1', 'div')).toBe(true)
+  })
+
+  describe('SVG', () => {
+    test('svg', () => {
+      // invalid non-svg tags as children
+      expect(isValidHTMLNesting('svg', 'div')).toBe(false)
+      expect(isValidHTMLNesting('svg', 'img')).toBe(false)
+      expect(isValidHTMLNesting('svg', 'p')).toBe(false)
+      expect(isValidHTMLNesting('svg', 'h2')).toBe(false)
+      expect(isValidHTMLNesting('svg', 'span')).toBe(false)
+
+      // valid non-svg tags as children
+      expect(isValidHTMLNesting('svg', 'a')).toBe(true)
+      expect(isValidHTMLNesting('svg', 'textarea')).toBe(true)
+      expect(isValidHTMLNesting('svg', 'input')).toBe(true)
+      expect(isValidHTMLNesting('svg', 'select')).toBe(true)
+
+      // valid svg tags as children
+      expect(isValidHTMLNesting('svg', 'g')).toBe(true)
+      expect(isValidHTMLNesting('svg', 'ellipse')).toBe(true)
+      expect(isValidHTMLNesting('svg', 'feOffset')).toBe(true)
+    })
+
+    test('foreignObject', () => {
+      // valid
+      expect(isValidHTMLNesting('foreignObject', 'g')).toBe(true)
+      expect(isValidHTMLNesting('foreignObject', 'div')).toBe(true)
+      expect(isValidHTMLNesting('foreignObject', 'a')).toBe(true)
+      expect(isValidHTMLNesting('foreignObject', 'textarea')).toBe(true)
+    })
+
+    test('g', () => {
+      // valid
+      expect(isValidHTMLNesting('g', 'div')).toBe(true)
+      expect(isValidHTMLNesting('g', 'p')).toBe(true)
+      expect(isValidHTMLNesting('g', 'a')).toBe(true)
+      expect(isValidHTMLNesting('g', 'textarea')).toBe(true)
+      expect(isValidHTMLNesting('g', 'g')).toBe(true)
+    })
+
+    test('dl', () => {
+      // valid
+      expect(isValidHTMLNesting('dl', 'dt')).toBe(true)
+      expect(isValidHTMLNesting('dl', 'dd')).toBe(true)
+      expect(isValidHTMLNesting('dl', 'div')).toBe(true)
+      expect(isValidHTMLNesting('div', 'dt')).toBe(true)
+      expect(isValidHTMLNesting('div', 'dd')).toBe(true)
+
+      // invalid
+      expect(isValidHTMLNesting('span', 'dt')).toBe(false)
+      expect(isValidHTMLNesting('span', 'dd')).toBe(false)
+    })
+  })
+})
diff --git a/packages/compiler-dom/package.json b/packages/compiler-dom/package.json
index 14448be7a9a..38b62f05046 100644
--- a/packages/compiler-dom/package.json
+++ b/packages/compiler-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.4.18",
+  "version": "3.5.18",
   "description": "@vue/compiler-dom",
   "main": "index.js",
   "module": "dist/compiler-dom.esm-bundler.js",
diff --git a/packages/compiler-dom/src/errors.ts b/packages/compiler-dom/src/errors.ts
index b47624840ab..faf6fb56441 100644
--- a/packages/compiler-dom/src/errors.ts
+++ b/packages/compiler-dom/src/errors.ts
@@ -42,7 +42,7 @@ if (__TEST__) {
   if (DOMErrorCodes.X_V_HTML_NO_EXPRESSION < ErrorCodes.__EXTEND_POINT__) {
     throw new Error(
       `DOMErrorCodes need to be updated to ${
-        ErrorCodes.__EXTEND_POINT__ + 1
+        ErrorCodes.__EXTEND_POINT__
       } to match extension point from core ErrorCodes.`,
     )
   }
diff --git a/packages/compiler-dom/src/htmlNesting.ts b/packages/compiler-dom/src/htmlNesting.ts
new file mode 100644
index 00000000000..5f924880bd0
--- /dev/null
+++ b/packages/compiler-dom/src/htmlNesting.ts
@@ -0,0 +1,200 @@
+/**
+ * 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 the parent is a template, it can have any child
+  if (parent === 'template') {
+    return true
+  }
+
+  // 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 a3a738a8fb1..809f3708023 100644
--- a/packages/compiler-dom/src/index.ts
+++ b/packages/compiler-dom/src/index.ts
@@ -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> = {
diff --git a/packages/compiler-dom/src/parserOptions.ts b/packages/compiler-dom/src/parserOptions.ts
index e4899a9bf21..7da13bf534d 100644
--- a/packages/compiler-dom/src/parserOptions.ts
+++ b/packages/compiler-dom/src/parserOptions.ts
@@ -8,6 +8,7 @@ export const parserOptions: ParserOptions = {
   isVoidTag,
   isNativeTag: tag => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
   isPreTag: tag => tag === 'pre',
+  isIgnoreNewlineTag: tag => tag === 'pre' || tag === 'textarea',
   decodeEntities: __BROWSER__ ? decodeHtmlBrowser : undefined,
 
   isBuiltInComponent: tag => {
diff --git a/packages/compiler-dom/src/runtimeHelpers.ts b/packages/compiler-dom/src/runtimeHelpers.ts
index db829096cb8..c5349ad7940 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`,
diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
index a5ff770f4e8..cd8f1a9d184 100644
--- a/packages/compiler-dom/src/transforms/stringifyStatic.ts
+++ b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -3,12 +3,12 @@
  */
 import {
   CREATE_STATIC,
+  type CacheExpression,
   ConstantTypes,
   type ElementNode,
   ElementTypes,
   type ExpressionNode,
   type HoistTransform,
-  type JSChildNode,
   Namespaces,
   NodeTypes,
   type PlainElementNode,
@@ -17,11 +17,14 @@ import {
   type TextCallNode,
   type TransformContext,
   createCallExpression,
+  isStaticArgOf,
 } from '@vue/compiler-core'
 import {
   escapeHtml,
+  isArray,
   isBooleanAttr,
   isKnownHtmlAttr,
+  isKnownMathMLAttr,
   isKnownSvgAttr,
   isString,
   isSymbol,
@@ -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[] = []
@@ -93,20 +104,40 @@ export const stringifyStatic: HoistTransform = (children, context, parent) => {
         // will insert / hydrate
         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
 
-        // also remove merged nodes from children
-        const deleteCount = currentChunk.length - 1
-        children.splice(currentIndex - currentChunk.length + 1, deleteCount)
-        return deleteCount
+      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)
+          }
+        }
       }
+      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,12 +170,19 @@ 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: Namespaces) => {
@@ -154,25 +191,18 @@ const isStringifiableAttr = (name: string, ns: Namespaces) => {
       ? isKnownHtmlAttr(name)
       : 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(
+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,15 @@ 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.isStatic
+        ) {
+          return bail()
+        }
       }
     }
     for (let i = 0; i < node.children.length; i++) {
@@ -369,7 +409,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/vOn.ts b/packages/compiler-dom/src/transforms/vOn.ts
index 88d2c5db741..1bb5763188b 100644
--- a/packages/compiler-dom/src/transforms/vOn.ts
+++ b/packages/compiler-dom/src/transforms/vOn.ts
@@ -17,8 +17,8 @@ import {
 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
@@ -27,15 +27,12 @@ const isNonKeyModifier = /*#__PURE__*/ makeMap(
     `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,
 ) => {
@@ -44,7 +41,7 @@ const resolveModifiers = (
   const eventOptionModifiers = []
 
   for (let i = 0; i < modifiers.length; i++) {
-    const modifier = modifiers[i]
+    const modifier = modifiers[i].content
 
     if (
       __COMPAT__ &&
@@ -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)
@@ -133,7 +132,7 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
     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,
diff --git a/packages/compiler-dom/src/transforms/validateHtmlNesting.ts b/packages/compiler-dom/src/transforms/validateHtmlNesting.ts
new file mode 100644
index 00000000000..540c0c25871
--- /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 6efe6fb92af..2acac64b0fb 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -20,7 +20,7 @@ exports[`SFC analyze <script> bindings > auto name inference > do not overwrite
           name: 'Baz'
         })
         
-export default /*#__PURE__*/Object.assign(__default__, {
+export default /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 const a = 1
@@ -36,7 +36,7 @@ exports[`SFC analyze <script> bindings > auto name inference > do not overwrite
           name: 'Baz'
         }
         
-export default /*#__PURE__*/Object.assign(__default__, {
+export default /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 const a = 1
@@ -53,7 +53,7 @@ exports[`SFC compile <script setup> > <script> and <script setup> co-usage > exp
       }
       const __default__ = fn();
       
-export default /*#__PURE__*/Object.assign(__default__, {
+export default /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -91,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();
 
@@ -110,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();
 
@@ -131,7 +131,7 @@ import { x } from './x'
       }
       
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   ...__default__,
   setup(__props, { expose: __expose }) {
   __expose();
@@ -154,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();
 
@@ -174,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();
 
@@ -194,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();
 
@@ -851,8 +851,6 @@ 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 { ref } from 'vue'
         
 export default {
@@ -863,7 +861,7 @@ export default {
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
     _createElementVNode("div", null, _toDisplayString(count.value), 1 /* TEXT */),
-    _hoisted_1
+    _cache[0] || (_cache[0] = _createElementVNode("div", null, "static", -1 /* CACHED */))
   ], 64 /* STABLE_FRAGMENT */))
 }
 }
@@ -882,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)
@@ -1084,6 +1084,29 @@ 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 {
@@ -1142,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();
 
@@ -1158,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();
 
@@ -1174,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();
 
@@ -1189,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();
 
@@ -1207,7 +1230,7 @@ exports[`SFC compile <script setup> > with TypeScript > runtime Enum in normal s
           const enum C { C = "C" }
           enum B { B = "B" }
         
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1223,7 +1246,7 @@ exports[`SFC compile <script setup> > with TypeScript > with generic attribute 1
 "import { defineComponent as _defineComponent } from 'vue'
 type Bar = {}
       
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1252,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();
 
@@ -1267,7 +1290,7 @@ exports[`SFC genDefaultAs > <script> + <script setup> 1`] = `
 "
       const __default__ = {}
       
-const _sfc_ = /*#__PURE__*/Object.assign(__default__, {
+const _sfc_ = /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1283,7 +1306,7 @@ exports[`SFC genDefaultAs > <script> + <script setup> 2`] = `
 "
       const __default__ = {}
       
-const _sfc_ = /*#__PURE__*/Object.assign(__default__, {
+const _sfc_ = /*@__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -1300,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();
@@ -1362,3 +1385,24 @@ 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__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
index 6af4115efb0..18ec05da2b5 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
@@ -38,13 +38,11 @@ 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 /* CACHED */)),
+    _cache[1] || (_cache[1] = _createElementVNode("use", { href: _hoisted_1 }, null, -1 /* CACHED */))
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
@@ -82,13 +80,10 @@ 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)
+  ])))
 }"
 `;
 
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
index 8aaba811404..28e0af71f7a 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
@@ -7,17 +7,25 @@ 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 */)
 
 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 /* CACHED */)),
+    _cache[1] || (_cache[1] = _createElementVNode("img", { srcset: _hoisted_2 }, null, -1 /* CACHED */))
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
+exports[`compiler sfc: transform srcset > transform empty srcset w/ includeAbsolute: true 1`] = `
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+const _hoisted_1 = { srcset: " " }
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("img", _hoisted_1))
+}"
+`;
+
 exports[`compiler sfc: transform srcset > transform srcset 1`] = `
 "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
@@ -31,69 +39,57 @@ 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 */)
 
 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 /* CACHED */)),
+    _cache[1] || (_cache[1] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_1
+    }, null, -1 /* CACHED */)),
+    _cache[2] || (_cache[2] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_2
+    }, null, -1 /* CACHED */)),
+    _cache[3] || (_cache[3] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_3
+    }, null, -1 /* CACHED */)),
+    _cache[4] || (_cache[4] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_4
+    }, null, -1 /* CACHED */)),
+    _cache[5] || (_cache[5] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_5
+    }, null, -1 /* CACHED */)),
+    _cache[6] || (_cache[6] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_6
+    }, null, -1 /* CACHED */)),
+    _cache[7] || (_cache[7] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_7
+    }, null, -1 /* CACHED */)),
+    _cache[8] || (_cache[8] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: "/logo.png, /logo.png 2x"
+    }, null, -1 /* CACHED */)),
+    _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 /* CACHED */)),
+    _cache[10] || (_cache[10] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: _hoisted_8
+    }, null, -1 /* CACHED */)),
+    _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 /* CACHED */))
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
@@ -101,69 +97,56 @@ export function render(_ctx, _cache) {
 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 */)
-
 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 /* CACHED */)),
+    _cache[1] || (_cache[1] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png"
+    }, null, -1 /* CACHED */)),
+    _cache[2] || (_cache[2] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png 2x"
+    }, null, -1 /* CACHED */)),
+    _cache[3] || (_cache[3] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png 2x"
+    }, null, -1 /* CACHED */)),
+    _cache[4] || (_cache[4] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png, /foo/logo.png 2x"
+    }, null, -1 /* CACHED */)),
+    _cache[5] || (_cache[5] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png 2x, /foo/logo.png"
+    }, null, -1 /* CACHED */)),
+    _cache[6] || (_cache[6] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png 2x, /foo/logo.png 3x"
+    }, null, -1 /* CACHED */)),
+    _cache[7] || (_cache[7] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: "/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x"
+    }, null, -1 /* CACHED */)),
+    _cache[8] || (_cache[8] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: "/logo.png, /logo.png 2x"
+    }, null, -1 /* CACHED */)),
+    _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 /* CACHED */)),
+    _cache[10] || (_cache[10] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: "/logo.png, /foo/logo.png 2x"
+    }, null, -1 /* CACHED */)),
+    _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 /* CACHED */))
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
@@ -183,69 +166,57 @@ 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 /* CACHED */)),
+    _cache[1] || (_cache[1] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_1
+    }, null, -1 /* CACHED */)),
+    _cache[2] || (_cache[2] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_2
+    }, null, -1 /* CACHED */)),
+    _cache[3] || (_cache[3] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_3
+    }, null, -1 /* CACHED */)),
+    _cache[4] || (_cache[4] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_4
+    }, null, -1 /* CACHED */)),
+    _cache[5] || (_cache[5] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_5
+    }, null, -1 /* CACHED */)),
+    _cache[6] || (_cache[6] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_6
+    }, null, -1 /* CACHED */)),
+    _cache[7] || (_cache[7] = _createElementVNode("img", {
+      src: "./logo.png",
+      srcset: _hoisted_7
+    }, null, -1 /* CACHED */)),
+    _cache[8] || (_cache[8] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: _hoisted_8
+    }, null, -1 /* CACHED */)),
+    _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 /* CACHED */)),
+    _cache[10] || (_cache[10] = _createElementVNode("img", {
+      src: "/logo.png",
+      srcset: _hoisted_9
+    }, null, -1 /* CACHED */)),
+    _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 /* CACHED */))
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
@@ -265,12 +236,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 2b9acbc7fd2..134beff9668 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -1,5 +1,11 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { assertCode, compileSFCScript as compile, mockId } from './utils'
+import {
+  assertCode,
+  compileSFCScript as compile,
+  getPositionInCode,
+  mockId,
+} from './utils'
+import { type RawSourceMap, SourceMapConsumer } from 'source-map-js'
 
 describe('SFC compile <script setup>', () => {
   test('should compile JS syntax', () => {
@@ -472,6 +478,23 @@ describe('SFC compile <script setup>', () => {
       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>
@@ -606,6 +629,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>
@@ -614,6 +638,7 @@ describe('SFC compile <script setup>', () => {
         <style>
         div { color: v-bind(count) }
         span { color: v-bind(style.color) }
+        span { color: v-bind(height + "px") }
         </style>
         `,
         {
@@ -627,8 +652,11 @@ describe('SFC compile <script setup>', () => {
       expect(content).toMatch(`return (_ctx, _push`)
       expect(content).toMatch(`ssrInterpolate`)
       expect(content).not.toMatch(`useCssVars`)
-      expect(content).toMatch(`"--${mockId}-count": (count.value)`)
-      expect(content).toMatch(`"--${mockId}-style\\\\.color": (style.color)`)
+      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)
     })
 
@@ -668,6 +696,27 @@ describe('SFC compile <script setup>', () => {
       expect(content).toMatch(`new (_unref(Foo)).Bar()`)
       assertCode(content)
     })
+
+    // #12682
+    test('source map', () => {
+      const source = `
+      <script setup>
+        const count = ref(0)
+      </script>
+      <template>
+        <button @click="throw new Error(\`msg\`);"></button>
+      </template>
+      `
+      const { content, map } = compile(source, { inlineTemplate: true })
+      expect(map).not.toBeUndefined()
+      const consumer = new SourceMapConsumer(map as RawSourceMap)
+      expect(
+        consumer.originalPositionFor(getPositionInCode(content, 'count')),
+      ).toMatchObject(getPositionInCode(source, `count`))
+      expect(
+        consumer.originalPositionFor(getPositionInCode(content, 'Error')),
+      ).toMatchObject(getPositionInCode(source, `Error`))
+    })
   })
 
   describe('with TypeScript', () => {
@@ -1352,7 +1401,7 @@ describe('SFC genDefaultAs', () => {
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(
-      `const _sfc_ = /*#__PURE__*/Object.assign(__default__`,
+      `const _sfc_ = /*@__PURE__*/Object.assign(__default__`,
     )
     assertCode(content)
   })
@@ -1371,7 +1420,7 @@ describe('SFC genDefaultAs', () => {
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(
-      `const _sfc_ = /*#__PURE__*/Object.assign(__default__`,
+      `const _sfc_ = /*@__PURE__*/Object.assign(__default__`,
     )
     assertCode(content)
   })
@@ -1400,7 +1449,7 @@ describe('SFC genDefaultAs', () => {
       },
     )
     expect(content).not.toMatch('export default')
-    expect(content).toMatch(`const _sfc_ = /*#__PURE__*/_defineComponent(`)
+    expect(content).toMatch(`const _sfc_ = /*@__PURE__*/_defineComponent(`)
     assertCode(content)
   })
 
@@ -1418,7 +1467,7 @@ describe('SFC genDefaultAs', () => {
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(
-      `const _sfc_ = /*#__PURE__*/_defineComponent({\n  ...__default__`,
+      `const _sfc_ = /*@__PURE__*/_defineComponent({\n  ...__default__`,
     )
     assertCode(content)
   })
@@ -1472,3 +1521,26 @@ describe('SFC genDefaultAs', () => {
     })
   })
 })
+
+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 26444fd63d3..a25a384a979 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
@@ -18,7 +18,7 @@ return { myEmit }
 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();
@@ -35,7 +35,7 @@ exports[`defineEmits > w/ type (exported interface) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export interface Emits { (e: 'foo' | 'bar'): void }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -52,7 +52,7 @@ 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({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -69,7 +69,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();
@@ -87,7 +87,7 @@ exports[`defineEmits > w/ type (interface w/ extends) 1`] = `
 interface Base { (e: 'foo'): void }
     interface Emits extends Base { (e: 'bar'): void }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["bar", "foo"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -104,7 +104,7 @@ exports[`defineEmits > w/ type (interface) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 interface Emits { (e: 'foo' | 'bar'): void }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -120,7 +120,7 @@ return { emit }
 exports[`defineEmits > w/ type (property syntax string literal) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo:bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -136,7 +136,7 @@ return { emit }
 exports[`defineEmits > w/ type (property syntax) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -153,7 +153,7 @@ 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({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -170,7 +170,7 @@ exports[`defineEmits > w/ type (referenced function type) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 type Emits = (e: 'foo' | 'bar') => void
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -187,7 +187,7 @@ exports[`defineEmits > w/ type (type alias) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 type Emits = { (e: 'foo' | 'bar'): void }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -203,7 +203,7 @@ return { emit }
 exports[`defineEmits > w/ type (type literal w/ call signatures) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo", "bar", "baz"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -221,7 +221,7 @@ exports[`defineEmits > w/ type (type references in union) 1`] = `
 type BaseEmit = "change"
     type Emit = "some" | "emit" | BaseEmit
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["some", "emit", "change", "another"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -237,7 +237,7 @@ return { emit }
 exports[`defineEmits > w/ type (union) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo", "bar", "baz"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -253,7 +253,7 @@ return { emit }
 exports[`defineEmits > w/ type 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -271,7 +271,7 @@ exports[`defineEmits > w/ type from normal script 1`] = `
 
       export interface Emits { (e: 'foo' | 'bar'): void }
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
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 b6a93541d36..12462dcf423 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
@@ -29,7 +29,7 @@ return { modelValue, c, toString }
 exports[`defineModel() > get / set transformers 1`] = `
 "import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     "modelValue": {
         required: true
@@ -54,7 +54,7 @@ return { modelValue }
 exports[`defineModel() > get / set transformers 2`] = `
 "import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   props: {
     "modelValue": {
         default: 0,
@@ -80,8 +80,8 @@ 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({
+export default /*@__PURE__*/_defineComponent({
+  props: /*@__PURE__*/_mergeModels({
     x: { type: Number, required: true }
   }, {
     "modelValue": {
@@ -103,11 +103,31 @@ 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'], {
+  props: /*@__PURE__*/_mergeModels(['foo', 'bar'], {
     "count": {},
     "countModifiers": {},
   }),
@@ -128,11 +148,11 @@ exports[`defineModel() > w/ defineProps and defineEmits 1`] = `
 "import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
 
 export default {
-  props: /*#__PURE__*/_mergeModels({ foo: String }, {
+  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();
 
@@ -149,7 +169,7 @@ return { count }
 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] },
     "modelModifiers": {},
@@ -178,7 +198,7 @@ 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 },
     "modelModifiers": {},
@@ -206,3 +226,43 @@ 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 9cb168be161..cdc81c7c8bc 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineOptions.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineOptions.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`defineOptions() > basic usage 1`] = `
 "
-export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, {
+export default /*@__PURE__*/Object.assign({ name: 'FooApp' }, {
   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 ce5eaed18fd..fce04c85112 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
@@ -24,7 +24,7 @@ interface Props {
           foo?: number;
       }
       
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   __name: 'app.ce',
   props: {
     foo: { default: 5.5, type: Number }
@@ -43,7 +43,7 @@ return { props }
 exports[`defineProps > custom element retains the props type & production mode 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   __name: 'app.ce',
   props: {
     foo: {type: Number}
@@ -62,7 +62,7 @@ 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();
@@ -78,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 }
   },
@@ -87,7 +87,7 @@ export default /*#__PURE__*/_defineComponent({
 
       const { foo } = __props
       
-return {  }
+return { foo }
 }
 
 })"
@@ -96,7 +96,7 @@ 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 },
@@ -141,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();
@@ -158,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 }
   },
@@ -178,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 }
   },
@@ -197,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 }
   },
@@ -222,7 +222,34 @@ 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 },
+    x: { type: Number, required: false }
+  },
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+      
+    
+return {  }
+}
+
+})"
+`;
+
+exports[`defineProps > w/ extends intersection type 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+type Foo = {
+        x?: number;
+      };
+      interface Props extends Foo {
+        z: number
+        y: string
+      }
+      
+export default /*@__PURE__*/_defineComponent({
   props: {
     z: { type: Number, required: true },
     y: { type: String, required: true },
@@ -259,7 +286,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 }
   },
@@ -268,6 +295,31 @@ export default /*#__PURE__*/_defineComponent({
 
     
     
+return {  }
+}
+
+})"
+`;
+
+exports[`defineProps > w/ intersection type 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+type Foo = {
+        x?: number;
+      };
+      type Bar = {
+        y: string;
+      };
+      
+export default /*@__PURE__*/_defineComponent({
+  props: {
+    x: { type: Number, required: false },
+    y: { type: String, required: true }
+  },
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+      
+    
 return {  }
 }
 
@@ -296,7 +348,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 },
@@ -353,7 +405,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 }
   },
@@ -372,8 +424,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 }
@@ -393,8 +445,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] },
@@ -415,8 +467,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 }
@@ -439,7 +491,7 @@ 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" }
   },
@@ -457,7 +509,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 },
@@ -481,7 +533,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 },
@@ -502,8 +554,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 8b5325cc3c5..9306d31da97 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
@@ -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,7 +101,7 @@ 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'
 }),
@@ -118,7 +118,7 @@ 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 },
@@ -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: () => ({}) },
@@ -192,6 +192,25 @@ return () => {}
 }"
 `;
 
+exports[`sfc reactive props destructure > handle function parameters with same name as destructured props 1`] = `
+"
+export default {
+  setup(__props) {
+
+    
+    function test(value) {
+      try {
+      } catch {
+      }
+    }
+    console.log(__props.value)
+    
+return () => {}
+}
+
+}"
+`;
+
 exports[`sfc reactive props destructure > multi-variable declaration 1`] = `
 "
 export default {
@@ -304,3 +323,38 @@ 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 }
+}
+
+}"
+`;
+
+exports[`sfc reactive props destructure > with TSInstantiationExpression 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+type Foo = <T extends string | number>(data: T) => void
+      
+export default /*@__PURE__*/_defineComponent({
+  props: {
+    value: { type: Function }
+  },
+  setup(__props: any) {
+
+      
+      const foo = __props.value<123>
+      
+return () => {}
+}
+
+})"
+`;
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 26e1a0c7460..9d3e46698ee 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 5ab70d9b6c6..7e795bf570d 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/hoistStatic.spec.ts.snap
@@ -71,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
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap
index cfdbf5f45c2..e648587449a 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`TS annotations 1`] = `
 import { Foo, Bar, Baz, Qux, Fred } from './x'
     const a = 1
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -22,7 +22,7 @@ exports[`attribute expressions 1`] = `
 import { bar, baz } from './x'
     const cond = true
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -38,7 +38,7 @@ exports[`components 1`] = `
 import { FooBar, FooBaz, FooQux, foo } from './x'
     const fooBar: FooBar = 1
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -53,7 +53,7 @@ exports[`directive 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { vMyDir } from './x'
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -66,29 +66,14 @@ return { get vMyDir() { return vMyDir } }
 
 exports[`dynamic arguments 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
-import { FooBar, foo, bar, unused, baz } from './x'
+import { FooBar, foo, bar, unused, baz, msg } from './x'
     
-export default /*#__PURE__*/_defineComponent({
+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[`import namespace 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 } }
+return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz }, get msg() { return msg } }
 }
 
 })"
@@ -98,7 +83,7 @@ exports[`js template string interpolations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { VAR, VAR2, VAR3 } from './x'
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -113,7 +98,7 @@ exports[`last tag 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { FooBaz, Last } from './x'
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -128,7 +113,7 @@ exports[`namespace / dot component usage 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import * as Foo from './foo'
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -143,7 +128,7 @@ exports[`property access (whitespace) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { Foo, Bar, Baz } from './foo'
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -158,7 +143,7 @@ exports[`property access 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { Foo, Bar, Baz } from './foo'
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -173,7 +158,7 @@ exports[`spread operator 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { Foo, Bar, Baz } from './foo'
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -188,7 +173,7 @@ exports[`template ref 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { foo, bar, Baz } from './foo'
     
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -203,7 +188,7 @@ exports[`vue interpolations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { x, y, z, x$y } from './x'
   
-export default /*#__PURE__*/_defineComponent({
+export default /*@__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts
index 55bc4216272..99cb78a594a 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts
@@ -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')
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
index 304258615a8..5d696a95d88 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
@@ -47,7 +47,7 @@ describe('defineModel()', () => {
     `,
     )
     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')
@@ -68,7 +68,7 @@ describe('defineModel()', () => {
     `,
     )
     assertCode(content)
-    expect(content).toMatch(`props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
+    expect(content).toMatch(`props: /*@__PURE__*/_mergeModels(['foo', 'bar'], {
     "count": {},
     "countModifiers": {},
   })`)
@@ -161,6 +161,34 @@ describe('defineModel()', () => {
     })
   })
 
+  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(
       `
@@ -221,4 +249,24 @@ describe('defineModel()', () => {
     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 dac9ef64188..286f1e11bfd 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineOptions.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineOptions.spec.ts
@@ -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' }, `,
     )
   })
 
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
index c139a3d7b73..836badb51c8 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
@@ -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 }) {`)
   })
@@ -261,6 +261,51 @@ const props = defineProps({ foo: String })
     })
   })
 
+  test('w/ extends intersection type', () => {
+    const { content, bindings } = compile(`
+    <script setup lang="ts">
+      type Foo = {
+        x?: number;
+      };
+      interface Props extends Foo {
+        z: number
+        y: string
+      }
+      defineProps<Props>()
+    </script>
+    `)
+    assertCode(content)
+    expect(content).toMatch(`z: { type: Number, required: true }`)
+    expect(content).toMatch(`y: { type: String, required: true }`)
+    expect(content).toMatch(`x: { type: Number, required: false }`)
+    expect(bindings).toStrictEqual({
+      x: BindingTypes.PROPS,
+      y: BindingTypes.PROPS,
+      z: BindingTypes.PROPS,
+    })
+  })
+
+  test('w/ intersection type', () => {
+    const { content, bindings } = compile(`
+    <script setup lang="ts">
+      type Foo = {
+        x?: number;
+      };
+      type Bar = {
+        y: string;
+      };
+      defineProps<Foo & Bar>()
+    </script>
+    `)
+    assertCode(content)
+    expect(content).toMatch(`y: { type: String, required: true }`)
+    expect(content).toMatch(`x: { type: Number, required: false }`)
+    expect(bindings).toStrictEqual({
+      x: BindingTypes.PROPS,
+      y: BindingTypes.PROPS,
+    })
+  })
+
   test('w/ exported interface', () => {
     const { content, bindings } = compile(`
     <script setup lang="ts">
@@ -591,17 +636,39 @@ const props = defineProps({ foo: String })
 
   // #8289
   test('destructure without enabling reactive destructure', () => {
-    const { content } = compile(
+    const { content, bindings } = compile(
       `<script setup lang="ts">
       const { foo } = defineProps<{
         foo: Foo
       }>()
       </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(() => {
diff --git a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
index 3843ef92190..25dd817bbe5 100644
--- a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
@@ -6,7 +6,6 @@ describe('sfc reactive props destructure', () => {
   function compile(src: string, options?: Partial<SFCScriptCompileOptions>) {
     return compileSFCScript(src, {
       inlineTemplate: true,
-      propsDestructure: true,
       ...options,
     })
   }
@@ -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,
@@ -123,7 +122,7 @@ describe('sfc reactive props destructure', () => {
     })
 
     expect(content).toMatch(`
-  props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
+  props: /*@__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
   foo: 1,
   "foo:bar": 'foo-bar'
 }),`)
@@ -199,6 +198,21 @@ describe('sfc reactive props destructure', () => {
   }`)
   })
 
+  test('with TSInstantiationExpression', () => {
+    const { content } = compile(
+      `
+      <script setup lang="ts">
+      type Foo = <T extends string | number>(data: T) => void
+      const { value } = defineProps<{ value: Foo }>()
+      const foo = value<123>
+      </script>
+    `,
+      { isProd: true },
+    )
+    assertCode(content)
+    expect(content).toMatch(`const foo = __props.value<123>`)
+  })
+
   test('aliasing', () => {
     const { content, bindings } = compile(`
       <script setup>
@@ -265,6 +279,27 @@ describe('sfc reactive props destructure', () => {
     })
   })
 
+  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,
+    })
+  })
+
   // #6960
   test('computed static key', () => {
     const { content, bindings } = compile(`
@@ -323,6 +358,22 @@ describe('sfc reactive props destructure', () => {
     expect(content).toMatch(`props: ['item'],`)
   })
 
+  test('handle function parameters with same name as destructured props', () => {
+    const { content } = compile(`
+    <script setup>
+    const { value } = defineProps()
+    function test(value) {
+      try {
+      } catch {
+      }
+    }
+    console.log(value)
+    </script>
+  `)
+    assertCode(content)
+    expect(content).toMatch(`console.log(__props.value)`)
+  })
+
   test('defineProps/defineEmits in multi-variable declaration (full removal)', () => {
     const { content } = compile(`
     <script setup>
@@ -358,14 +409,15 @@ describe('sfc reactive props destructure', () => {
       ).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', () => {
diff --git a/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts b/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts
index d9fd1dfe529..210fa09688a 100644
--- a/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts
@@ -45,7 +45,7 @@ test('directive', () => {
 test('dynamic arguments', () => {
   const { content } = compile(`
     <script setup lang="ts">
-    import { FooBar, foo, bar, unused, baz } from './x'
+    import { FooBar, foo, bar, unused, baz, msg } from './x'
     </script>
     <template>
       <FooBar #[foo.slotName] />
@@ -53,11 +53,12 @@ test('dynamic arguments', () => {
       <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 bar() { return bar }, get baz() { return baz }, get msg() { return msg } }`,
   )
   assertCode(content)
 })
@@ -233,3 +234,34 @@ test('namespace / dot component usage', () => {
   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/resolveType.spec.ts b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
index 0c5c95cd17f..c6a2f9c38dd 100644
--- a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
@@ -9,8 +9,9 @@ import {
   registerTS,
   resolveTypeElements,
 } from '../../src/script/resolveType'
-
+import { UNKNOWN_TYPE } from '../../src/script/utils'
 import ts from 'typescript'
+
 registerTS(() => ts)
 
 describe('resolveType', () => {
@@ -128,7 +129,7 @@ describe('resolveType', () => {
     defineProps<{ self: any } & Foo & Bar & Baz>()
     `).props,
     ).toStrictEqual({
-      self: ['Unknown'],
+      self: [UNKNOWN_TYPE],
       foo: ['Number'],
       // both Bar & Baz has 'bar', but Baz['bar] is wider so it should be
       // preferred
@@ -136,6 +137,18 @@ describe('resolveType', () => {
     })
   })
 
+  test('intersection type with ignore', () => {
+    expect(
+      resolve(`
+    type Foo = { foo: number }
+    type Bar = { bar: string }
+    defineProps<Foo & /* @vue-ignore */ Bar>()
+    `).props,
+    ).toStrictEqual({
+      foo: ['Number'],
+    })
+  })
+
   // #7553
   test('union type', () => {
     expect(
@@ -265,6 +278,44 @@ describe('resolveType', () => {
     })
   })
 
+  test('utility type: mapped type with Omit and Pick', () => {
+    expect(
+      resolve(`
+      type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
+      interface Test {
+        foo: string;
+        bar?: string;
+      }
+      type OptionalTest = Optional<Test, 'foo'>
+      defineProps<OptionalTest>()
+    `).props,
+    ).toStrictEqual({
+      foo: ['String'],
+      bar: ['String'],
+    })
+  })
+
+  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'],
+    })
+  })
+
   test('indexed access type (literal)', () => {
     expect(
       resolve(`
@@ -416,6 +467,211 @@ describe('resolveType', () => {
     })
   })
 
+  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'],
+    })
+  })
+
   test('ExtractPropTypes (element-plus)', () => {
     const { props, raw } = resolve(
       `
@@ -455,6 +711,58 @@ describe('resolveType', () => {
     })
   })
 
+  // #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'],
+    })
+  })
+
+  describe('type alias declaration', () => {
+    // #13240
+    test('function type', () => {
+      expect(
+        resolve(`
+      type FunFoo<O> = (item: O) => boolean;
+      type FunBar = FunFoo<number>;
+      defineProps<{
+        foo?: FunFoo<number>;
+        bar?: FunBar;
+      }>()
+      `).props,
+      ).toStrictEqual({
+        foo: ['Function'],
+        bar: ['Function'],
+      })
+    })
+
+    test('fallback to Unknown', () => {
+      expect(
+        resolve(`
+      type Brand<T> = T & {};
+      defineProps<{
+        foo: Brand<string>;
+      }>()
+      `).props,
+      ).toStrictEqual({
+        foo: [UNKNOWN_TYPE],
+      })
+    })
+  })
+
   describe('generics', () => {
     test('generic with type literal', () => {
       expect(
@@ -561,6 +869,27 @@ describe('resolveType', () => {
       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))
+    })
+
     test.runIf(process.platform === 'win32')('relative ts on Windows', () => {
       const files = {
         'C:\\Test\\FolderA\\foo.ts': 'export type P = { foo: number }',
@@ -858,6 +1187,96 @@ describe('resolveType', () => {
       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'])
+    })
+
     test('ts module resolve w/ path aliased vue file', () => {
       const files = {
         '/tsconfig.json': JSON.stringify({
@@ -1034,6 +1453,60 @@ describe('resolveType', () => {
       })
     })
   })
+
+  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'],
+      })
+    })
+
+    test('allowArbitraryExtensions', () => {
+      const files = {
+        '/foo.d.vue.ts': 'export type Foo = number;',
+        '/foo.vue': '<template><div /></template>',
+        '/bar.d.css.ts': 'export type Bar = string;',
+        '/bar.css': ':root { --color: red; }',
+      }
+
+      const { props } = resolve(
+        `
+        import { Foo } from './foo.vue'
+        import { Bar } from './bar.css'
+        defineProps<{ foo: Foo; bar: Bar }>()
+        `,
+        files,
+      )
+
+      expect(props).toStrictEqual({
+        foo: ['Number'],
+        bar: ['String'],
+      })
+    })
+  })
 })
 
 function resolve(
diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index 1f9ae67225b..9b7e7c53710 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -39,6 +39,62 @@ describe('SFC scoped CSS', () => {
     expect(compileScoped(`h1 .foo { color: red; }`)).toMatch(
       `h1 .foo[data-v-test] { color: red;`,
     )
+
+    // #13387
+    expect(
+      compileScoped(`main {
+  width: 100%;
+  > * {
+    max-width: 200px;
+  }
+}`),
+    ).toMatchInlineSnapshot(`
+      "main {
+&[data-v-test] {
+  width: 100%;
+}
+> *[data-v-test] {
+    max-width: 200px;
+}
+}"`)
+  })
+
+  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', () => {
@@ -95,6 +151,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', () => {
@@ -161,6 +224,49 @@ describe('SFC scoped CSS', () => {
     `)
   })
 
+  // #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(`
@@ -390,4 +496,23 @@ describe('SFC style preprocessors', () => {
 
     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 45dc54a69db..81cf75a912d 100644
--- a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
@@ -1,10 +1,12 @@
 import { type RawSourceMap, SourceMapConsumer } from 'source-map-js'
+import { parse as babelParse } from '@babel/parser'
 import {
   type SFCTemplateCompileOptions,
   compileTemplate,
 } from '../src/compileTemplate'
 import { type SFCTemplateBlock, parse } from '../src/parse'
 import { compileScript } from '../src'
+import { getPositionInCode } from './utils'
 
 function compile(opts: Omit<SFCTemplateCompileOptions, 'id'>) {
   return compileTemplate({
@@ -156,6 +158,35 @@ test('source map', () => {
   ).toMatchObject(getPositionInCode(template.content, `foobar`))
 })
 
+test('source map: v-if generated comment should not have original position', () => {
+  const template = parse(
+    `
+      <template>
+        <div v-if="true"></div>
+      </template>
+    `,
+    { filename: 'example.vue', sourceMap: true },
+  ).descriptor.template!
+
+  const { code, map } = compile({
+    filename: 'example.vue',
+    source: template.content,
+  })
+
+  expect(map!.sources).toEqual([`example.vue`])
+  expect(map!.sourcesContent).toEqual([template.content])
+
+  const consumer = new SourceMapConsumer(map as RawSourceMap)
+  const commentNode = code.match(/_createCommentVNode\("v-if", true\)/)
+  expect(commentNode).not.toBeNull()
+  const commentPosition = getPositionInCode(code, commentNode![0])
+  const originalPosition = consumer.originalPositionFor(commentPosition)
+  // the comment node should not be mapped to the original source
+  expect(originalPosition.column).toBeNull()
+  expect(originalPosition.line).toBeNull()
+  expect(originalPosition.source).toBeNull()
+})
+
 test('should work w/ AST from descriptor', () => {
   const source = `
   <template>
@@ -452,35 +483,32 @@ test('prefixing edge case for reused AST ssr mode', () => {
   ).not.toThrowError()
 })
 
-interface Pos {
-  line: number
-  column: number
-  name?: string
-}
+// #10852
+test('non-identifier expression in legacy filter syntax', () => {
+  const src = `
+  <template>
+    <div>
+      Today is
+      {{ new Date() | formatDate }}
+    </div>
+  </template>
+  `
 
-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
-}
+  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()
+})
diff --git a/packages/compiler-sfc/__tests__/parse.spec.ts b/packages/compiler-sfc/__tests__/parse.spec.ts
index 048dab693aa..265655e47ef 100644
--- a/packages/compiler-sfc/__tests__/parse.spec.ts
+++ b/packages/compiler-sfc/__tests__/parse.spec.ts
@@ -81,7 +81,7 @@ font-weight: bold;
 
       const consumer = new SourceMapConsumer(script!.map!)
       consumer.eachMapping(mapping => {
-        expect(mapping.originalLine - mapping.generatedLine).toBe(padding)
+        expect(mapping.originalLine! - mapping.generatedLine).toBe(padding)
       })
     })
 
@@ -100,8 +100,8 @@ font-weight: bold;
 
       const consumer = new SourceMapConsumer(template.map!)
       consumer.eachMapping(mapping => {
-        expect(mapping.originalLine - mapping.generatedLine).toBe(padding)
-        expect(mapping.originalColumn - mapping.generatedColumn).toBe(2)
+        expect(mapping.originalLine! - mapping.generatedLine).toBe(padding)
+        expect(mapping.originalColumn! - mapping.generatedColumn).toBe(2)
       })
     })
 
@@ -115,7 +115,7 @@ font-weight: bold;
 
       const consumer = new SourceMapConsumer(custom!.map!)
       consumer.eachMapping(mapping => {
-        expect(mapping.originalLine - mapping.generatedLine).toBe(padding)
+        expect(mapping.originalLine! - mapping.generatedLine).toBe(padding)
       })
     })
   })
@@ -425,5 +425,15 @@ h1 { color: red }
         `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__/templateTransformSrcset.spec.ts b/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts
index 491731f94e5..68239bbd1ee 100644
--- a/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts
+++ b/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts
@@ -72,6 +72,14 @@ describe('compiler sfc: transform srcset', () => {
     ).toMatchSnapshot()
   })
 
+  test('transform empty srcset w/ includeAbsolute: true', () => {
+    expect(
+      compileWithSrcset(`<img srcset=" " />`, {
+        includeAbsolute: true,
+      }).code,
+    ).toMatchSnapshot()
+  })
+
   test('transform srcset w/ stringify', () => {
     const code = compileWithSrcset(
       `<div>${src}</div>`,
diff --git a/packages/compiler-sfc/__tests__/utils.ts b/packages/compiler-sfc/__tests__/utils.ts
index 5498ede2717..b5cfc9606d5 100644
--- a/packages/compiler-sfc/__tests__/utils.ts
+++ b/packages/compiler-sfc/__tests__/utils.ts
@@ -1,5 +1,6 @@
 import {
   type SFCParseOptions,
+  type SFCScriptBlock,
   type SFCScriptCompileOptions,
   compileScript,
   parse,
@@ -12,7 +13,7 @@ export function compileSFCScript(
   src: string,
   options?: Partial<SFCScriptCompileOptions>,
   parseOptions?: SFCParseOptions,
-) {
+): SFCScriptBlock {
   const { descriptor, errors } = parse(src, parseOptions)
   if (errors.length) {
     console.warn(errors[0])
@@ -23,7 +24,7 @@ export function compileSFCScript(
   })
 }
 
-export function assertCode(code: string) {
+export function assertCode(code: string): void {
   // parse the generated code to make sure it is valid
   try {
     babelParse(code, {
@@ -39,3 +40,36 @@ export function assertCode(code: string) {
   }
   expect(code).toMatchSnapshot()
 }
+
+interface Pos {
+  line: number
+  column: number
+  name?: string
+}
+
+export 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/package.json b/packages/compiler-sfc/package.json
index 47b9281d6eb..ff1f2e48dc6 100644
--- a/packages/compiler-sfc/package.json
+++ b/packages/compiler-sfc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.4.18",
+  "version": "3.5.18",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -42,26 +42,26 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.9",
+    "@babel/parser": "catalog:",
     "@vue/compiler-core": "workspace:*",
     "@vue/compiler-dom": "workspace:*",
     "@vue/compiler-ssr": "workspace:*",
     "@vue/shared": "workspace:*",
-    "estree-walker": "^2.0.2",
-    "magic-string": "^0.30.6",
-    "postcss": "^8.4.33",
-    "source-map-js": "^1.0.2"
+    "estree-walker": "catalog:",
+    "magic-string": "catalog:",
+    "postcss": "^8.5.6",
+    "source-map-js": "catalog:"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.9",
-    "@vue/consolidate": "^0.17.3",
+    "@babel/types": "catalog:",
+    "@vue/consolidate": "^1.0.0",
     "hash-sum": "^2.0.0",
-    "lru-cache": "^10.2.0",
+    "lru-cache": "10.1.0",
     "merge-source-map": "^1.1.0",
-    "minimatch": "^9.0.3",
-    "postcss-modules": "^6.0.0",
-    "postcss-selector-parser": "^6.0.15",
-    "pug": "^3.0.2",
-    "sass": "^1.70.0"
+    "minimatch": "~10.0.3",
+    "postcss-modules": "^6.0.1",
+    "postcss-selector-parser": "^7.1.0",
+    "pug": "^3.0.3",
+    "sass": "^1.89.2"
   }
 }
diff --git a/packages/compiler-sfc/src/cache.ts b/packages/compiler-sfc/src/cache.ts
index 38fedcaf85d..0bedc7b4d35 100644
--- a/packages/compiler-sfc/src/cache.ts
+++ b/packages/compiler-sfc/src/cache.ts
@@ -3,6 +3,7 @@ import { LRUCache } from 'lru-cache'
 export function createCache<T extends {}>(
   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 46fc65c0069..3bfc90dfaac 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -18,12 +18,17 @@ import type {
   Declaration,
   ExportSpecifier,
   Identifier,
+  LVal,
   Node,
   ObjectPattern,
   Statement,
 } from '@babel/types'
 import { walk } from 'estree-walker'
-import type { RawSourceMap } from 'source-map-js'
+import {
+  type RawSourceMap,
+  SourceMapConsumer,
+  SourceMapGenerator,
+} from 'source-map-js'
 import {
   normalScriptDefaultVar,
   processNormalScript,
@@ -49,7 +54,7 @@ import {
 } 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 { getImportedName, isCallOf, isLiteralNode } from './script/utils'
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
@@ -106,10 +111,11 @@ export interface SFCScriptCompileOptions {
    */
   hoistStatic?: boolean
   /**
-   * (**Experimental**) Enable reactive destructure for `defineProps`
-   * @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
    */
-  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
@@ -135,6 +141,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
@@ -159,8 +175,6 @@ export function compileScript(
   const scriptLang = script && script.lang
   const scriptSetupLang = scriptSetup && scriptSetup.lang
 
-  let refBindings: string[] | undefined
-
   if (!scriptSetup) {
     if (!script) {
       throw new Error(`[@vue/compiler-sfc] SFC contains no <script> tags.`)
@@ -317,15 +331,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) {
@@ -523,13 +540,19 @@ export function compileScript(
             )
           }
 
-          // defineProps / defineEmits
-          const isDefineProps = processDefineProps(ctx, init, decl.id)
+          // defineProps
+          const isDefineProps = processDefineProps(ctx, init, decl.id as LVal)
+          if (ctx.propsDestructureRestId) {
+            setupBindings[ctx.propsDestructureRestId] =
+              BindingTypes.SETUP_REACTIVE_CONST
+          }
+
+          // defineEmits
           const isDefineEmits =
-            !isDefineProps && processDefineEmits(ctx, init, decl.id)
+            !isDefineProps && processDefineEmits(ctx, init, decl.id as LVal)
           !isDefineEmits &&
-            (processDefineSlots(ctx, init, decl.id) ||
-              processDefineModel(ctx, init, decl.id))
+            (processDefineSlots(ctx, init, decl.id as LVal) ||
+              processDefineModel(ctx, init, decl.id as LVal))
 
           if (
             isDefineProps &&
@@ -581,6 +604,7 @@ export function compileScript(
         setupBindings,
         vueImportAliases,
         hoistStatic,
+        !!ctx.propsDestructureDecl,
       )
     }
 
@@ -597,7 +621,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()
           }
@@ -719,12 +743,6 @@ export function compileScript(
   for (const key in setupBindings) {
     ctx.bindingMetadata[key] = setupBindings[key]
   }
-  // known ref bindings
-  if (refBindings) {
-    for (const key of refBindings) {
-      ctx.bindingMetadata[key] = BindingTypes.SETUP_REF
-    }
-  }
 
   // 7. inject `useCssVars` calls
   if (
@@ -796,6 +814,7 @@ export function compileScript(
     args += `, { ${destructureElements.join(', ')} }`
   }
 
+  let templateMap
   // 9. generate return statement
   let returned
   if (
@@ -845,7 +864,7 @@ export function compileScript(
       }
       // inline render function mode - we are going to compile the template and
       // inline it right here
-      const { code, ast, preamble, tips, errors } = compileTemplate({
+      const { code, ast, preamble, tips, errors, map } = compileTemplate({
         filename,
         ast: sfc.template.ast,
         source: sfc.template.content,
@@ -863,6 +882,7 @@ export function compileScript(
           bindingMetadata: ctx.bindingMetadata,
         },
       })
+      templateMap = map
       if (tips.length) {
         tips.forEach(warnOnce)
       }
@@ -958,7 +978,7 @@ export function compileScript(
       (definedOptions ? `\n  ...${definedOptions},` : '')
     ctx.s.prependLeft(
       startOffset,
-      `\n${genDefaultAs} /*#__PURE__*/${ctx.helper(
+      `\n${genDefaultAs} /*@__PURE__*/${ctx.helper(
         `defineComponent`,
       )}({${def}${runtimeOptions}\n  ${
         hasAwait ? `async ` : ``
@@ -971,7 +991,7 @@ 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}`,
@@ -989,26 +1009,40 @@ export function compileScript(
 
   // 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`,
     )
   }
 
+  const content = ctx.s.toString()
+  let map =
+    options.sourceMap !== false
+      ? (ctx.s.generateMap({
+          source: filename,
+          hires: true,
+          includeContent: true,
+        }) as unknown as RawSourceMap)
+      : undefined
+  // merge source maps of the script setup and template in inline mode
+  if (templateMap && map) {
+    const offset = content.indexOf(returned)
+    const templateLineOffset =
+      content.slice(0, offset).split(/\r?\n/).length - 1
+    map = mergeSourceMaps(map, templateMap, templateLineOffset)
+  }
   return {
     ...scriptSetup,
     bindings: ctx.bindingMetadata,
     imports: ctx.userImports,
-    content: ctx.s.toString(),
-    map:
-      options.sourceMap !== false
-        ? (ctx.s.generateMap({
-            source: filename,
-            hires: true,
-            includeContent: true,
-          }) as unknown as RawSourceMap)
-        : undefined,
+    content,
+    map,
     scriptAst: scriptAst?.body,
     scriptSetupAst: scriptSetupAst?.body,
     deps: ctx.deps ? [...ctx.deps] : undefined,
@@ -1029,6 +1063,7 @@ function walkDeclaration(
   bindings: Record<string, BindingTypes>,
   userImportAliases: Record<string, string>,
   hoistStatic: boolean,
+  isPropsDestructureEnabled = false,
 ): boolean {
   let isAllLiteral = false
 
@@ -1043,13 +1078,16 @@ function walkDeclaration(
     // 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']
@@ -1066,7 +1104,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)
@@ -1082,6 +1120,7 @@ function walkDeclaration(
                 m === userImportAliases['shallowRef'] ||
                 m === userImportAliases['customRef'] ||
                 m === userImportAliases['toRef'] ||
+                m === userImportAliases['useTemplateRef'] ||
                 m === DEFINE_MODEL,
             )
           ) {
@@ -1094,13 +1133,13 @@ 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)
         }
       }
     }
@@ -1261,3 +1300,42 @@ function isStaticNode(node: Node): boolean {
   }
   return false
 }
+
+export function mergeSourceMaps(
+  scriptMap: RawSourceMap,
+  templateMap: RawSourceMap,
+  templateLineOffset: number,
+): RawSourceMap {
+  const generator = new SourceMapGenerator()
+  const addMapping = (map: RawSourceMap, lineOffset = 0) => {
+    const consumer = new SourceMapConsumer(map)
+    ;(consumer as any).sources.forEach((sourceFile: string) => {
+      ;(generator as any)._sources.add(sourceFile)
+      const sourceContent = consumer.sourceContentFor(sourceFile)
+      if (sourceContent != null) {
+        generator.setSourceContent(sourceFile, sourceContent)
+      }
+    })
+    consumer.eachMapping(m => {
+      if (m.originalLine == null) return
+      generator.addMapping({
+        generated: {
+          line: m.generatedLine + lineOffset,
+          column: m.generatedColumn,
+        },
+        original: {
+          line: m.originalLine,
+          column: m.originalColumn!,
+        },
+        source: m.source,
+        name: m.name,
+      })
+    })
+  }
+
+  addMapping(scriptMap)
+  addMapping(templateMap, templateLineOffset)
+  ;(generator as any)._sourceRoot = scriptMap.sourceRoot
+  ;(generator as any)._file = scriptMap.file
+  return (generator as any).toJSON()
+}
diff --git a/packages/compiler-sfc/src/compileStyle.ts b/packages/compiler-sfc/src/compileStyle.ts
index 4390014e89e..f27a6338e8e 100644
--- a/packages/compiler-sfc/src/compileStyle.ts
+++ b/packages/compiler-sfc/src/compileStyle.ts
@@ -13,7 +13,7 @@ import {
   type StylePreprocessorResults,
   processors,
 } from './style/preprocessors'
-import type { RawSourceMap } from 'source-map-js'
+import type { RawSourceMap } from '@vue/compiler-core'
 import { cssVarsPlugin } from './style/cssVars'
 import postcssModules from 'postcss-modules'
 
diff --git a/packages/compiler-sfc/src/compileTemplate.ts b/packages/compiler-sfc/src/compileTemplate.ts
index 2d5ffdad7d8..b043cf813d7 100644
--- a/packages/compiler-sfc/src/compileTemplate.ts
+++ b/packages/compiler-sfc/src/compileTemplate.ts
@@ -6,14 +6,11 @@ import {
   type NodeTransform,
   NodeTypes,
   type ParserOptions,
+  type RawSourceMap,
   type RootNode,
   createRoot,
 } from '@vue/compiler-core'
-import {
-  type RawSourceMap,
-  SourceMapConsumer,
-  SourceMapGenerator,
-} from 'source-map-js'
+import { SourceMapConsumer, SourceMapGenerator } from 'source-map-js'
 import {
   type AssetURLOptions,
   type AssetURLTagConfig,
@@ -194,11 +191,11 @@ 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 = ''
   }
 
@@ -292,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) {
@@ -308,7 +305,7 @@ function mapLines(oldMap: RawSourceMap, newMap: RawSourceMap): RawSourceMap {
         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,
diff --git a/packages/compiler-sfc/src/index.ts b/packages/compiler-sfc/src/index.ts
index 9661b7f7963..5123a908976 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'
@@ -18,7 +18,7 @@ import {
   errorMessages as coreErrorMessages,
 } from '@vue/compiler-dom'
 
-export const errorMessages = {
+export const errorMessages: Record<number, string> = {
   ...coreErrorMessages,
   ...DOMErrorMessages,
 }
diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
index 00c97867cd0..c8be865508f 100644
--- a/packages/compiler-sfc/src/parse.ts
+++ b/packages/compiler-sfc/src/parse.ts
@@ -1,20 +1,24 @@
 import {
   type BindingMetadata,
+  type CodegenSourceMapGenerator,
   type CompilerError,
   type ElementNode,
   NodeTypes,
   type ParserOptions,
+  type RawSourceMap,
   type RootNode,
   type SourceLocation,
   createRoot,
 } from '@vue/compiler-core'
 import * as CompilerDOM from '@vue/compiler-dom'
-import { type RawSourceMap, SourceMapGenerator } from 'source-map-js'
+import { SourceMapGenerator } from 'source-map-js'
 import type { TemplateCompiler } from './compileTemplate'
 import { parseCssVars } from './style/cssVars'
 import { createCache } from './cache'
 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'
 
@@ -26,11 +30,6 @@ export interface SFCParseOptions {
   ignoreEmpty?: boolean
   compiler?: TemplateCompiler
   templateParseOptions?: ParserOptions
-  /**
-   * TODO remove in 3.5
-   * @deprecated use `templateParseOptions: { prefixIdentifiers: false }` instead
-   */
-  parseExpressions?: boolean
 }
 
 export interface SFCBlock {
@@ -101,26 +100,18 @@ export interface SFCParseResult {
   errors: (CompilerError | SyntaxError)[]
 }
 
-export const parseCache = createCache<SFCParseResult>()
-
-function genCacheKey(source: string, options: SFCParseOptions): string {
-  return (
-    source +
-    JSON.stringify(
-      {
-        ...options,
-        compiler: { parse: options.compiler?.parse },
-      },
-      (_, val) => (typeof val === 'function' ? val.toString() : val),
-    )
-  )
-}
+export const parseCache:
+  | Map<string, SFCParseResult>
+  | LRUCache<string, SFCParseResult> = createCache<SFCParseResult>()
 
 export function parse(
   source: string,
   options: SFCParseOptions = {},
 ): SFCParseResult {
-  const sourceKey = genCacheKey(source, options)
+  const sourceKey = genCacheKey(source, {
+    ...options,
+    compiler: { parse: options.compiler?.parse },
+  })
   const cache = parseCache.get(sourceKey)
   if (cache) {
     return cache
@@ -134,7 +125,6 @@ export function parse(
     ignoreEmpty = true,
     compiler = CompilerDOM,
     templateParseOptions = {},
-    parseExpressions = true,
   } = options
 
   const descriptor: SFCDescriptor = {
@@ -153,7 +143,7 @@ export function parse(
   const errors: (CompilerError | SyntaxError)[] = []
   const ast = compiler.parse(source, {
     parseMode: 'sfc',
-    prefixIdentifiers: parseExpressions,
+    prefixIdentifiers: true,
     ...templateParseOptions,
     onError: e => {
       errors.push(e)
@@ -236,7 +226,7 @@ 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}`,
       ),
     )
   }
@@ -375,7 +365,7 @@ function generateSourceMap(
   const map = new SourceMapGenerator({
     file: filename.replace(/\\/g, '/'),
     sourceRoot: sourceRoot.replace(/\\/g, '/'),
-  })
+  }) as unknown as CodegenSourceMapGenerator
   map.setSourceContent(filename, source)
   map._sources.add(filename)
   generated.split(splitRE).forEach((line, index) => {
@@ -390,7 +380,6 @@ function generateSourceMap(
             generatedLine,
             generatedColumn: i,
             source: filename,
-            // @ts-expect-error
             name: null,
           })
         }
diff --git a/packages/compiler-sfc/src/rewriteDefault.ts b/packages/compiler-sfc/src/rewriteDefault.ts
index e6714c9906d..0f3ee35b51f 100644
--- a/packages/compiler-sfc/src/rewriteDefault.ts
+++ b/packages/compiler-sfc/src/rewriteDefault.ts
@@ -39,7 +39,7 @@ export function rewriteDefaultAST(
   ast.forEach(node => {
     if (node.type === 'ExportDefaultDeclaration') {
       if (node.declaration.type === 'ClassDeclaration' && node.declaration.id) {
-        let start: number =
+        const start: number =
           node.declaration.decorators && node.declaration.decorators.length > 0
             ? node.declaration.decorators[
                 node.declaration.decorators.length - 1
diff --git a/packages/compiler-sfc/src/script/context.ts b/packages/compiler-sfc/src/script/context.ts
index f74adee603b..47b6b442a49 100644
--- a/packages/compiler-sfc/src/script/context.ts
+++ b/packages/compiler-sfc/src/script/context.ts
@@ -8,6 +8,7 @@ import type { ModelDecl } from './defineModel'
 import type { BindingMetadata } from '../../../compiler-core/src'
 import MagicString from 'magic-string'
 import type { TypeScope } from './resolveType'
+import { warn } from '../warn'
 
 export class ScriptCompileContext {
   isJS: boolean
@@ -17,11 +18,12 @@ export class ScriptCompileContext {
   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
@@ -144,25 +146,36 @@ 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,
-) {
+): ParserPlugin[] {
   const plugins: ParserPlugin[] = []
   if (
     !userPlugins ||
@@ -175,14 +188,14 @@ export function resolveParserPlugins(
   ) {
     plugins.push('importAttributes')
   }
-  if (lang === 'jsx' || lang === 'tsx') {
+  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') {
+  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 526a55dc8a1..e4e6bdabf36 100644
--- a/packages/compiler-sfc/src/script/defineEmits.ts
+++ b/packages/compiler-sfc/src/script/defineEmits.ts
@@ -62,7 +62,7 @@ export function genRuntimeEmits(ctx: ScriptCompileContext): string | undefined {
       .map(n => JSON.stringify(`update:${n}`))
       .join(', ')}]`
     emitsDecl = emitsDecl
-      ? `/*#__PURE__*/${ctx.helper(
+      ? `/*@__PURE__*/${ctx.helper(
           'mergeModels',
         )}(${emitsDecl}, ${modelEmitsDecl})`
       : modelEmitsDecl
diff --git a/packages/compiler-sfc/src/script/defineModel.ts b/packages/compiler-sfc/src/script/defineModel.ts
index 24fd0780eaa..05082800284 100644
--- a/packages/compiler-sfc/src/script/defineModel.ts
+++ b/packages/compiler-sfc/src/script/defineModel.ts
@@ -1,12 +1,7 @@
 import type { LVal, Node, TSType } from '@babel/types'
 import type { ScriptCompileContext } from './context'
 import { inferRuntimeType } from './resolveType'
-import {
-  UNKNOWN_TYPE,
-  concatStrings,
-  isCallOf,
-  toRuntimeTypeString,
-} from './utils'
+import { UNKNOWN_TYPE, isCallOf, toRuntimeTypeString } from './utils'
 import { BindingTypes, unwrapTSNode } from '@vue/compiler-dom'
 
 export const DEFINE_MODEL = 'defineModel'
@@ -124,40 +119,50 @@ 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
-    }
-
-    let runtimeType =
-      (runtimeTypes &&
-        runtimeTypes.length > 0 &&
-        toRuntimeTypeString(runtimeTypes)) ||
-      undefined
+      if (hasUnknownType) {
+        if (hasBoolean || hasFunction) {
+          runtimeTypes = runtimeTypes.filter(t => t !== UNKNOWN_TYPE)
+          skipCheck = true
+        } else {
+          runtimeTypes = ['null']
+        }
+      }
 
-    const codegenOptions = concatStrings([
-      runtimeType && `type: ${runtimeType}`,
-      skipCheck && 'skipCheck: true',
-    ])
+      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 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},`
 
diff --git a/packages/compiler-sfc/src/script/defineOptions.ts b/packages/compiler-sfc/src/script/defineOptions.ts
index 8e32e0fba82..0ab6de3080b 100644
--- a/packages/compiler-sfc/src/script/defineOptions.ts
+++ b/packages/compiler-sfc/src/script/defineOptions.ts
@@ -37,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
+        }
       }
     }
   }
diff --git a/packages/compiler-sfc/src/script/defineProps.ts b/packages/compiler-sfc/src/script/defineProps.ts
index 4c8a34aa616..9a4880a1a54 100644
--- a/packages/compiler-sfc/src/script/defineProps.ts
+++ b/packages/compiler-sfc/src/script/defineProps.ts
@@ -48,7 +48,8 @@ export function processDefineProps(
   ctx: ScriptCompileContext,
   node: Node,
   declId?: LVal,
-) {
+  isWithDefaults = false,
+): boolean {
   if (!isCallOf(node, DEFINE_PROPS)) {
     return processWithDefaults(ctx, node, declId)
   }
@@ -81,7 +82,7 @@ export function processDefineProps(
   }
 
   // handle props destructure
-  if (declId && declId.type === 'ObjectPattern') {
+  if (!isWithDefaults && declId && declId.type === 'ObjectPattern') {
     processPropsDestructure(ctx, declId)
   }
 
@@ -99,7 +100,14 @@ function processWithDefaults(
   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,
@@ -113,10 +121,11 @@ function processWithDefaults(
       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(...).`,
+        `Reactive destructure will be disabled when using withDefaults().\n` +
+        `Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(...). `,
       node.callee,
     )
   }
@@ -147,7 +156,7 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
           )
       }
       if (defaults.length) {
-        propsDecls = `/*#__PURE__*/${ctx.helper(
+        propsDecls = `/*@__PURE__*/${ctx.helper(
           `mergeDefaults`,
         )}(${propsDecls}, {\n  ${defaults.join(',\n  ')}\n})`
       }
@@ -159,7 +168,7 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
   const modelsDecls = genModelProps(ctx)
 
   if (propsDecls && modelsDecls) {
-    return `/*#__PURE__*/${ctx.helper(
+    return `/*@__PURE__*/${ctx.helper(
       'mergeModels',
     )}(${propsDecls}, ${modelsDecls})`
   } else {
@@ -191,7 +200,7 @@ export function extractRuntimeProps(
     ${propStrings.join(',\n    ')}\n  }`
 
   if (ctx.propsRuntimeDefaults && !hasStaticDefaults) {
-    propsDecls = `/*#__PURE__*/${ctx.helper(
+    propsDecls = `/*@__PURE__*/${ctx.helper(
       'mergeDefaults',
     )}(${propsDecls}, ${ctx.getString(ctx.propsRuntimeDefaults)})`
   }
diff --git a/packages/compiler-sfc/src/script/definePropsDestructure.ts b/packages/compiler-sfc/src/script/definePropsDestructure.ts
index e4a59aca7d5..81763cda534 100644
--- a/packages/compiler-sfc/src/script/definePropsDestructure.ts
+++ b/packages/compiler-sfc/src/script/definePropsDestructure.ts
@@ -10,6 +10,7 @@ import type {
 import { walk } from 'estree-walker'
 import {
   BindingTypes,
+  TS_NODE_TYPES,
   extractIdentifiers,
   isFunctionType,
   isInDestructureAssignment,
@@ -22,23 +23,17 @@ import { genPropsAccessExp } from '@vue/shared'
 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) {
+): 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 = (
@@ -103,12 +98,12 @@ type Scope = Record<string, boolean>
 export function transformDestructuredProps(
   ctx: ScriptCompileContext,
   vueImportAliases: Record<string, string>,
-) {
-  if (!ctx.options.propsDestructure) {
+): 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>()
@@ -239,16 +234,14 @@ 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
       if (
         parent &&
         parent.type.startsWith('TS') &&
-        parent.type !== 'TSAsExpression' &&
-        parent.type !== 'TSNonNullExpression' &&
-        parent.type !== 'TSTypeAssertion'
+        !TS_NODE_TYPES.includes(parent.type)
       ) {
         return this.skip()
       }
@@ -294,11 +287,12 @@ export function transformDestructuredProps(
         }
       }
     },
-    leave(node: Node, parent?: Node) {
+    leave(node: Node, parent: Node | null) {
       parent && parentStack.pop()
       if (
         (node.type === 'BlockStatement' && !isFunctionType(parent!)) ||
-        isFunctionType(node)
+        isFunctionType(node) ||
+        node.type === 'CatchClause'
       ) {
         popScope()
       }
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index 211efc49089..22ef37cf37f 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -60,6 +60,9 @@ function resolveTemplateUsedIdentifiers(sfc: SFCDescriptor): Set<string> {
               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 (
diff --git a/packages/compiler-sfc/src/script/normalScript.ts b/packages/compiler-sfc/src/script/normalScript.ts
index 3b2f21d4863..7fd859290b1 100644
--- a/packages/compiler-sfc/src/script/normalScript.ts
+++ b/packages/compiler-sfc/src/script/normalScript.ts
@@ -3,13 +3,14 @@ import type { ScriptCompileContext } from './context'
 import MagicString from 'magic-string'
 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,
-) {
+): SFCScriptBlock {
   const script = ctx.descriptor.script!
   if (script.lang && !ctx.isJS && !ctx.isTS) {
     // do not process non js/ts script blocks
diff --git a/packages/compiler-sfc/src/script/resolveType.ts b/packages/compiler-sfc/src/script/resolveType.ts
index 968c168ddb9..910e8839a3e 100644
--- a/packages/compiler-sfc/src/script/resolveType.ts
+++ b/packages/compiler-sfc/src/script/resolveType.ts
@@ -165,12 +165,19 @@ function innerResolveTypeElements(
   scope: TypeScope,
   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,
@@ -188,7 +195,7 @@ function innerResolveTypeElements(
         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(
@@ -414,12 +421,6 @@ function resolveInterfaceMembers(
   )
   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) {
@@ -439,6 +440,7 @@ function resolveInterfaceMembers(
             `Note: both in 3.2 or with the ignore, the properties in the base ` +
             `type are treated as fallthrough attrs at runtime.`,
           ext,
+          scope,
         )
       }
     }
@@ -450,9 +452,18 @@ function resolveMappedType(
   ctx: TypeResolveContext,
   node: TSMappedType,
   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(
       {
@@ -535,26 +546,43 @@ function resolveStringType(
   ctx: TypeResolveContext,
   node: Node,
   scope: TypeScope,
+  typeParameters?: Record<string, Node>,
 ): string[] {
   switch (node.type) {
     case 'StringLiteral':
       return [node.value]
     case 'TSLiteralType':
-      return resolveStringType(ctx, node.literal, scope)
+      return resolveStringType(ctx, node.literal, scope, typeParameters)
     case 'TSUnionType':
-      return node.types.map(t => resolveStringType(ctx, t, scope)).flat()
+      return node.types
+        .map(t => resolveStringType(ctx, t, scope, typeParameters))
+        .flat()
     case 'TemplateLiteral': {
       return resolveTemplateKeys(ctx, node, scope)
     }
     case 'TSTypeReference': {
       const resolved = resolveTypeReference(ctx, node, scope)
       if (resolved) {
-        return resolveStringType(ctx, resolved, scope)
+        return resolveStringType(ctx, resolved, scope, typeParameters)
       }
       if (node.typeName.type === 'Identifier') {
+        const name = node.typeName.name
+        if (typeParameters && typeParameters[name]) {
+          return resolveStringType(
+            ctx,
+            typeParameters[name],
+            scope,
+            typeParameters,
+          )
+        }
         const getParam = (index = 0) =>
-          resolveStringType(ctx, node.typeParameters!.params[index], scope)
-        switch (node.typeName.name) {
+          resolveStringType(
+            ctx,
+            node.typeParameters!.params[index],
+            scope,
+            typeParameters,
+          )
+        switch (name) {
           case 'Extract':
             return getParam(1)
           case 'Exclude': {
@@ -660,6 +688,7 @@ function resolveBuiltin(
         ctx,
         node.typeParameters!.params[1],
         scope,
+        typeParameters,
       )
       const res: ResolvedElements = { props: {}, calls: t.calls }
       for (const key of picked) {
@@ -672,6 +701,7 @@ function resolveBuiltin(
         ctx,
         node.typeParameters!.params[1],
         scope,
+        typeParameters,
       )
       const res: ResolvedElements = { props: {}, calls: t.calls }
       for (const key in t.props) {
@@ -812,7 +842,7 @@ let loadTS: (() => typeof TS) | undefined
 /**
  * @private
  */
-export function registerTS(_loadTS: () => typeof TS) {
+export function registerTS(_loadTS: () => typeof TS): void {
   loadTS = () => {
     try {
       return _loadTS()
@@ -849,13 +879,13 @@ function resolveFS(ctx: TypeResolveContext): FS | undefined {
   }
   return (ctx.fs = {
     fileExists(file) {
-      if (file.endsWith('.vue.ts')) {
+      if (file.endsWith('.vue.ts') && !file.endsWith('.d.vue.ts')) {
         file = file.replace(/\.ts$/, '')
       }
       return fs.fileExists(file)
     },
     readFile(file) {
-      if (file.endsWith('.vue.ts')) {
+      if (file.endsWith('.vue.ts') && !file.endsWith('.d.vue.ts')) {
         file = file.replace(/\.ts$/, '')
       }
       return fs.readFile(file)
@@ -903,7 +933,7 @@ 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)
@@ -956,8 +986,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`))
   )
 }
@@ -1003,11 +1035,11 @@ function resolveWithTS(
           (c.config.options.pathsBasePath 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 &&
@@ -1046,7 +1078,7 @@ function resolveWithTS(
 
   if (res.resolvedModule) {
     let filename = res.resolvedModule.resolvedFileName
-    if (filename.endsWith('.vue.ts')) {
+    if (filename.endsWith('.vue.ts') && !filename.endsWith('.d.vue.ts')) {
       filename = filename.replace(/\.ts$/, '')
     }
     return fs.realpath ? fs.realpath(filename) : filename
@@ -1057,6 +1089,7 @@ function loadTSConfig(
   configPath: string,
   ts: typeof TS,
   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
@@ -1076,10 +1109,15 @@ function loadTSConfig(
     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
@@ -1090,7 +1128,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)
@@ -1110,7 +1148,7 @@ export function fileToScope(
   // fs should be guaranteed to exist here
   const fs = resolveFS(ctx)!
   const source = fs.readFile(filename) || ''
-  const body = parseFile(filename, source, ctx.options.babelParserPlugins)
+  const body = parseFile(filename, source, fs, ctx.options.babelParserPlugins)
   const scope = new TypeScope(filename, source, 0, recordImports(body))
   recordTypes(ctx, body, scope, asGlobal)
   fileToScopeCache.set(filename, scope)
@@ -1120,19 +1158,34 @@ export function fileToScope(
 function parseFile(
   filename: string,
   content: string,
+  fs: FS,
   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',
     }).program.body
-  } else if (ext === '.vue') {
+  }
+
+  // simulate `allowArbitraryExtensions` on TypeScript >= 5.0
+  const isUnknownTypeSource = !/\.[cm]?[tj]sx?$/.test(filename)
+  const arbitraryTypeSource = `${filename.slice(0, -ext.length)}.d${ext}.ts`
+  const hasArbitraryTypeDeclaration =
+    isUnknownTypeSource && fs.fileExists(arbitraryTypeSource)
+  if (hasArbitraryTypeDeclaration) {
+    return babelParse(fs.readFile(arbitraryTypeSource)!, {
+      plugins: resolveParserPlugins('ts', parserPlugins, true),
+      sourceType: 'module',
+    }).program.body
+  }
+
+  if (ext === '.vue') {
     const {
       descriptor: { script, scriptSetup },
     } = parse(content)
@@ -1422,7 +1475,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)
@@ -1445,7 +1498,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) {
@@ -1465,8 +1519,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'
           ) {
@@ -1475,7 +1550,10 @@ 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) {
@@ -1510,71 +1588,141 @@ export function inferRuntimeType(
       case 'TSTypeReference': {
         const resolved = resolveTypeReference(ctx, node, scope)
         if (resolved) {
-          return inferRuntimeType(ctx, resolved, resolved._ownerScope)
+          // #13240
+          // Special case for function type aliases to ensure correct runtime behavior
+          // other type aliases still fallback to unknown as before
+          if (
+            resolved.type === 'TSTypeAliasDeclaration' &&
+            resolved.typeAnnotation.type === 'TSFunctionType'
+          ) {
+            return ['Function']
+          }
+          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]
-
-            // 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 'Uppercase':
-            case 'Lowercase':
-            case 'Capitalize':
-            case 'Uncapitalize':
-              return ['String']
-
-            case 'Parameters':
-            case 'ConstructorParameters':
-              return ['Array']
-
-            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
+          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
+              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 '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]
+
+              // 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 '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
@@ -1585,9 +1733,9 @@ 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(
+        return flattenTypes(ctx, node.types, scope, isKeyOf).filter(
           t => t !== UNKNOWN_TYPE,
         )
       }
@@ -1600,7 +1748,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':
@@ -1626,11 +1774,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
@@ -1642,14 +1807,15 @@ function flattenTypes(
   ctx: TypeResolveContext,
   types: TSType[],
   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)),
       ),
     ),
   ]
diff --git a/packages/compiler-sfc/src/script/topLevelAwait.ts b/packages/compiler-sfc/src/script/topLevelAwait.ts
index 09955ac54e4..c0e00e615f7 100644
--- a/packages/compiler-sfc/src/script/topLevelAwait.ts
+++ b/packages/compiler-sfc/src/script/topLevelAwait.ts
@@ -39,7 +39,7 @@ export function processAwait(
   node: AwaitExpression,
   needSemi: boolean,
   isStatement: boolean,
-) {
+): void {
   const argumentStart =
     node.argument.extra && node.argument.extra.parenthesized
       ? (node.argument.extra.parenStart as number)
diff --git a/packages/compiler-sfc/src/script/utils.ts b/packages/compiler-sfc/src/script/utils.ts
index 38e6bf93750..39f163c6b77 100644
--- a/packages/compiler-sfc/src/script/utils.ts
+++ b/packages/compiler-sfc/src/script/utils.ts
@@ -12,7 +12,10 @@ import path from 'path'
 
 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':
@@ -23,11 +26,13 @@ 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')
 }
 
@@ -46,7 +51,7 @@ export function isCallOf(
   )
 }
 
-export function toRuntimeTypeString(types: string[]) {
+export function toRuntimeTypeString(types: string[]): string {
   return types.length > 1 ? `[${types.join(', ')}]` : types[0]
 }
 
@@ -55,7 +60,7 @@ export function getImportedName(
     | ImportSpecifier
     | ImportDefaultSpecifier
     | ImportNamespaceSpecifier,
-) {
+): string {
   if (specifier.type === 'ImportSpecifier')
     return specifier.imported.type === 'Identifier'
       ? specifier.imported.name
@@ -89,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
 }
 
@@ -97,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 47bb7c083bb..c6d1633cf60 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -8,9 +8,9 @@ import {
   processExpression,
 } from '@vue/compiler-dom'
 import type { SFCDescriptor } from '../parse'
-import { getEscapedCssVarName } from '../script/utils'
 import type { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
+import { getEscapedCssVarName } from '@vue/shared'
 
 export const CSS_VARS_HELPER = `useCssVars`
 
@@ -23,7 +23,12 @@ export function genCssVarsFromList(
   return `{\n  ${vars
     .map(
       key =>
-        `"${isSSR ? `--` : ``}${genVarName(id, key, isProd, isSSR)}": (${key})`,
+        // The `:` prefix here is used in `ssrRenderStyle` to distinguish whether
+        // a custom property comes from `ssrCssVars`. If it does, we need to reset
+        // its value to `initial` on the component instance to avoid unintentionally
+        // inheriting the same property value from a different instance of the same
+        // component in the outer scope.
+        `"${isSSR ? `:--` : ``}${genVarName(id, key, isProd, isSSR)}": (${key})`,
     )
     .join(',\n  ')}\n}`
 }
diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
index c5e01896130..071b3a36b12 100644
--- a/packages/compiler-sfc/src/style/pluginScoped.ts
+++ b/packages/compiler-sfc/src/style/pluginScoped.ts
@@ -1,9 +1,16 @@
-import type { AtRule, PluginCreator, Rule } from 'postcss'
+import {
+  type AtRule,
+  type Container,
+  type Document,
+  type PluginCreator,
+  Rule,
+} from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 import { warn } from '../warn'
 
 const animationNameRE = /^(-\w+-)?animation-name$/
 const animationRE = /^(-\w+-)?animation$/
+const keyframesRE = /^(?:-\w+-)?keyframes$/
 
 const scopedPlugin: PluginCreator<string> = (id = '') => {
   const keyframes = Object.create(null)
@@ -15,10 +22,7 @@ const scopedPlugin: PluginCreator<string> = (id = '') => {
       processRule(id, rule)
     },
     AtRule(node) {
-      if (
-        /-?keyframes$/.test(node.name) &&
-        !node.params.endsWith(`-${shortId}`)
-      ) {
+      if (keyframesRE.test(node.name) && !node.params.endsWith(`-${shortId}`)) {
         // register keyframes
         keyframes[node.params] = node.params = node.params + '-' + shortId
       }
@@ -66,26 +70,37 @@ function processRule(id: string, rule: Rule) {
     processedRules.has(rule) ||
     (rule.parent &&
       rule.parent.type === 'atrule' &&
-      /-?keyframes$/.test((rule.parent as AtRule).name))
+      keyframesRE.test((rule.parent as AtRule).name))
   ) {
     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,
+  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
@@ -107,6 +122,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
@@ -147,7 +163,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)
@@ -164,25 +187,64 @@ function rewriteSelector(
       // global: replace with inner selector and do not inject [id].
       // ::v-global(.foo) -> .foo
       if (value === ':global' || value === '::v-global') {
-        selectorRoot.insertAfter(selector, n.nodes[0])
-        selectorRoot.removeChild(selector)
+        selector.replaceWith(n.nodes[0])
         return false
       }
     }
 
+    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.type !== 'combinator') ||
-      (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where'))
+      (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, value, selectorRoot, slotted),
+        rewriteSelector(id, rule, value, selectorRoot, deep, slotted),
       )
       shouldInject = false
     }
@@ -217,5 +279,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/preprocessors.ts b/packages/compiler-sfc/src/style/preprocessors.ts
index 7915d1d1406..8c210ad16d1 100644
--- a/packages/compiler-sfc/src/style/preprocessors.ts
+++ b/packages/compiler-sfc/src/style/preprocessors.ts
@@ -1,5 +1,5 @@
 import merge from 'merge-source-map'
-import type { RawSourceMap } from 'source-map-js'
+import type { RawSourceMap } from '@vue/compiler-core'
 import type { SFCStyleCompileOptions } from '../compileStyle'
 import { isFunction } from '@vue/shared'
 
@@ -23,28 +23,48 @@ export interface StylePreprocessorResults {
 
 // .scss/.sass processor
 const scss: StylePreprocessor = (source, map, options, load = require) => {
-  const nodeSass = load('sass')
-  const finalOptions = {
-    ...options,
-    data: getSource(source, options.filename, options.additionalData),
-    file: options.filename,
-    outFile: options.filename,
-    sourceMap: !!map,
-  }
+  const nodeSass: typeof import('sass') = load('sass')
+  const { compileString, renderSync } = nodeSass
+
+  const data = getSource(source, options.filename, options.additionalData)
+  let css: string
+  let dependencies: string[]
+  let sourceMap: any
 
   try {
-    const result = nodeSass.renderSync(finalOptions)
-    const dependencies = result.stats.includedFiles
+    if (compileString) {
+      const { pathToFileURL, fileURLToPath }: typeof import('url') = load('url')
+
+      const result = compileString(data, {
+        ...options,
+        url: pathToFileURL(options.filename),
+        sourceMap: !!map,
+      })
+      css = result.css
+      dependencies = result.loadedUrls.map(url => fileURLToPath(url))
+      sourceMap = map ? result.sourceMap! : undefined
+    } else {
+      const result = renderSync({
+        ...options,
+        data,
+        file: options.filename,
+        outFile: options.filename,
+        sourceMap: !!map,
+      })
+      css = result.css.toString()
+      dependencies = result.stats.includedFiles
+      sourceMap = map ? JSON.parse(result.map!.toString()) : undefined
+    }
+
     if (map) {
       return {
-        code: result.css.toString(),
-        map: merge(map, JSON.parse(result.map.toString())),
+        code: css,
         errors: [],
         dependencies,
+        map: merge(map, sourceMap!),
       }
     }
-
-    return { code: result.css.toString(), errors: [], dependencies }
+    return { code: css, errors: [], dependencies }
   } catch (e: any) {
     return { code: '', errors: [e], dependencies: [] }
   }
diff --git a/packages/compiler-sfc/src/template/transformSrcset.ts b/packages/compiler-sfc/src/template/transformSrcset.ts
index 8f00f86e3c3..40fba4882b8 100644
--- a/packages/compiler-sfc/src/template/transformSrcset.ts
+++ b/packages/compiler-sfc/src/template/transformSrcset.ts
@@ -71,6 +71,7 @@ export const transformSrcset: NodeTransform = (
 
           const shouldProcessUrl = (url: string) => {
             return (
+              url &&
               !isExternalUrl(url) &&
               !isDataUrl(url) &&
               (options.includeAbsolute || isRelativeUrl(url))
diff --git a/packages/compiler-sfc/src/warn.ts b/packages/compiler-sfc/src/warn.ts
index 29bed4dc509..486f4572c16 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,7 +9,7 @@ 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`,
   )
diff --git a/packages/compiler-ssr/README.md b/packages/compiler-ssr/README.md
index 5beb121e1f5..9337906f42b 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__/ssrElement.spec.ts b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
index 8f0e28f4e14..f1d509acfb0 100644
--- a/packages/compiler-ssr/__tests__/ssrElement.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
@@ -25,7 +25,7 @@ describe('ssr: element', () => {
     test('v-html', () => {
       expect(getCompiledString(`<div v-html="foo"/>`)).toMatchInlineSnapshot(`
         "\`<div>\${
-            _ctx.foo
+            (_ctx.foo) ?? ''
           }</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(_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 }))
-          }></div>\`"
+          }>hello</div>\`"
       `)
     })
 
@@ -301,30 +316,69 @@ 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 v-text', () => {
+      expect(getCompiledString(`<div v-xxx v-text="foo" />`))
+        .toMatchInlineSnapshot(`
+          "\`<div\${
+              _ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx))
+            }>\${
+              _ssrInterpolate(_ctx.foo)
+            }</div>\`"
+        `)
+    })
+
+    test('custom dir with v-text and normal attrs', () => {
+      expect(getCompiledString(`<div class="test" v-xxx v-text="foo" />`))
+        .toMatchInlineSnapshot(`
+          "\`<div\${
+              _ssrRenderAttrs(_mergeProps({ class: "test" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
+            }>\${
+              _ssrInterpolate(_ctx.foo)
+            }</div>\`"
+        `)
+    })
+
+    test('mulptiple custom dirs with v-text', () => {
+      expect(getCompiledString(`<div v-xxx v-yyy v-text="foo" />`))
+        .toMatchInlineSnapshot(`
+          "\`<div\${
+              _ssrRenderAttrs(_mergeProps(_ssrGetDirectiveProps(_ctx, _directive_xxx), _ssrGetDirectiveProps(_ctx, _directive_yyy)))
+            }>\${
+              _ssrInterpolate(_ctx.foo)
+            }</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', () => {
@@ -332,11 +386,13 @@ describe('ssr: element', () => {
         getCompiledString(`<div v-bind="x" class="foo" v-xxx title="bar" />`),
       ).toMatchInlineSnapshot(`
         "\`<div\${
-            _ssrRenderAttrs(_mergeProps(_ctx.x, {
+            _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__/ssrSlotOutlet.spec.ts b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
index 655d68efbbc..86863cfb85f 100644
--- a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
@@ -143,4 +143,20 @@ describe('ssr: <slot>', () => {
       }"
     `)
   })
+
+  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__/ssrTransitionGroup.spec.ts b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
index d2a576fd02a..82122e621c7 100644
--- a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
@@ -38,6 +38,47 @@ describe('transition-group', () => {
     `)
   })
 
+  // #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)}>\`)
+        _ssrRenderList(_ctx.list, (i) => {
+          _push(\`<div></div>\`)
+        })
+        _push(\`</ul>\`)
+      }"
+    `)
+  })
+
   test('with dynamic tag', () => {
     expect(
       compile(
@@ -82,8 +123,6 @@ describe('transition-group', () => {
         })
         if (_ctx.ok) {
           _push(\`<div>ok</div>\`)
-        } else {
-          _push(\`<!---->\`)
         }
         _push(\`<!--]-->\`)
       }"
diff --git a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
index f2c04f0a5e8..8a439dbf4b5 100644
--- a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
@@ -52,6 +52,52 @@ describe('ssr: v-model', () => {
       }"
     `)
 
+    expect(
+      compileWithWrapper(
+        `<select v-model="model"><option v-for="i in items" :value="i"></option></select>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}><select><!--[-->\`)
+        _ssrRenderList(_ctx.items, (i) => {
+          _push(\`<option\${
+            _ssrRenderAttr("value", i)
+          }\${
+            (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
+              ? _ssrLooseContain(_ctx.model, i)
+              : _ssrLooseEqual(_ctx.model, i))) ? " selected" : ""
+          }></option>\`)
+        })
+        _push(\`<!--]--></select></div>\`)
+      }"
+    `)
+
+    expect(
+      compileWithWrapper(
+        `<select v-model="model"><option v-if="true" :value="i"></option></select>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}><select>\`)
+        if (true) {
+          _push(\`<option\${
+            _ssrRenderAttr("value", _ctx.i)
+          }\${
+            (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
+              ? _ssrLooseContain(_ctx.model, _ctx.i)
+              : _ssrLooseEqual(_ctx.model, _ctx.i))) ? " selected" : ""
+          }></option>\`)
+        } else {
+          _push(\`<!---->\`)
+        }
+        _push(\`</select></div>\`)
+      }"
+    `)
+
     expect(
       compileWithWrapper(
         `<select multiple v-model="model"><option value="1" selected></option><option value="2"></option></select>`,
@@ -120,6 +166,132 @@ describe('ssr: v-model', () => {
         _push(\`</optgroup></select></div>\`)
       }"
     `)
+
+    expect(
+      compileWithWrapper(`
+        <select multiple v-model="model">
+          <optgroup>
+            <option v-for="item in items" :value="item">{{item}}</option>
+          </optgroup>
+        </select>`).code,
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup><!--[-->\`)
+        _ssrRenderList(_ctx.items, (item) => {
+          _push(\`<option\${
+            _ssrRenderAttr("value", item)
+          }\${
+            (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
+              ? _ssrLooseContain(_ctx.model, item)
+              : _ssrLooseEqual(_ctx.model, item))) ? " selected" : ""
+          }>\${
+            _ssrInterpolate(item)
+          }</option>\`)
+        })
+        _push(\`<!--]--></optgroup></select></div>\`)
+      }"
+    `)
+
+    expect(
+      compileWithWrapper(`
+        <select multiple v-model="model">
+          <optgroup>
+            <option v-if="true" :value="item">{{item}}</option>
+          </optgroup>
+        </select>`).code,
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup>\`)
+        if (true) {
+          _push(\`<option\${
+            _ssrRenderAttr("value", _ctx.item)
+          }\${
+            (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
+              ? _ssrLooseContain(_ctx.model, _ctx.item)
+              : _ssrLooseEqual(_ctx.model, _ctx.item))) ? " selected" : ""
+          }>\${
+            _ssrInterpolate(_ctx.item)
+          }</option>\`)
+        } else {
+          _push(\`<!---->\`)
+        }
+        _push(\`</optgroup></select></div>\`)
+      }"
+    `)
+
+    expect(
+      compileWithWrapper(`
+        <select multiple v-model="model">
+          <optgroup>
+            <template v-if="ok">
+              <option v-for="item in items" :value="item">{{item}}</option>
+            </template>
+          </optgroup>
+        </select>`).code,
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup>\`)
+        if (_ctx.ok) {
+          _push(\`<!--[-->\`)
+          _ssrRenderList(_ctx.items, (item) => {
+            _push(\`<option\${
+              _ssrRenderAttr("value", item)
+            }\${
+              (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
+                ? _ssrLooseContain(_ctx.model, item)
+                : _ssrLooseEqual(_ctx.model, item))) ? " selected" : ""
+            }>\${
+              _ssrInterpolate(item)
+            }</option>\`)
+          })
+          _push(\`<!--]-->\`)
+        } else {
+          _push(\`<!---->\`)
+        }
+        _push(\`</optgroup></select></div>\`)
+      }"
+    `)
+
+    expect(
+      compileWithWrapper(`
+        <select multiple v-model="model">
+          <optgroup>
+            <template v-for="item in items" :value="item">
+              <option v-if="item===1" :value="item">{{item}}</option>
+            </template>
+          </optgroup>
+        </select>`).code,
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup><!--[-->\`)
+        _ssrRenderList(_ctx.items, (item) => {
+          _push(\`<!--[-->\`)
+          if (item===1) {
+            _push(\`<option\${
+              _ssrRenderAttr("value", item)
+            }\${
+              (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
+                ? _ssrLooseContain(_ctx.model, item)
+                : _ssrLooseEqual(_ctx.model, item))) ? " selected" : ""
+            }>\${
+              _ssrInterpolate(item)
+            }</option>\`)
+          } else {
+            _push(\`<!---->\`)
+          }
+          _push(\`<!--]-->\`)
+        })
+        _push(\`<!--]--></optgroup></select></div>\`)
+      }"
+    `)
   })
 
   test('<input type="radio">', () => {
diff --git a/packages/compiler-ssr/package.json b/packages/compiler-ssr/package.json
index 471e65ec144..d11be67c489 100644
--- a/packages/compiler-ssr/package.json
+++ b/packages/compiler-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-ssr",
-  "version": "3.4.18",
+  "version": "3.5.18",
   "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 e4fd505d282..bea0774215e 100644
--- a/packages/compiler-ssr/src/errors.ts
+++ b/packages/compiler-ssr/src/errors.ts
@@ -29,7 +29,7 @@ if (__TEST__) {
   if (SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME < DOMErrorCodes.__EXTEND_POINT__) {
     throw new Error(
       `SSRErrorCodes need to be updated to ${
-        DOMErrorCodes.__EXTEND_POINT__ + 1
+        DOMErrorCodes.__EXTEND_POINT__
       } to match extension point from core DOMErrorCodes.`,
     )
   }
diff --git a/packages/compiler-ssr/src/runtimeHelpers.ts b/packages/compiler-ssr/src/runtimeHelpers.ts
index 1420ef64fbe..0e2c8c67bed 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`,
diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
index 1755be3a3b0..536cbb5c1e9 100644
--- a/packages/compiler-ssr/src/ssrCodegenTransform.ts
+++ b/packages/compiler-ssr/src/ssrCodegenTransform.ts
@@ -1,9 +1,11 @@
 import {
   type BlockStatement,
   type CallExpression,
+  type CompilerError,
   type CompilerOptions,
   ElementTypes,
   type IfStatement,
+  type JSChildNode,
   NodeTypes,
   type RootNode,
   type TemplateChildNode,
@@ -33,7 +35,10 @@ import { SSRErrorCodes, createSSRCompilerError } 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
@@ -70,14 +75,24 @@ export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
   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,
-) {
+): 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,7 +126,7 @@ function createSSRTransformContext(
         bufferedElements.push(part)
       }
     },
-    pushStatement(statement: IfStatement | CallExpression) {
+    pushStatement(statement) {
       // close current string
       currentString = null
       body.push(statement)
@@ -141,7 +156,8 @@ export function processChildren(
   context: SSRTransformContext,
   asFragment = false,
   disableNestedFragments = false,
-) {
+  disableComment = false,
+): void {
   if (asFragment) {
     context.pushStringPart(`<!--[-->`)
   }
@@ -181,7 +197,9 @@ 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(
@@ -191,7 +209,7 @@ export function processChildren(
         )
         break
       case NodeTypes.IF:
-        ssrProcessIf(child, context, disableNestedFragments)
+        ssrProcessIf(child, context, disableNestedFragments, disableComment)
         break
       case NodeTypes.FOR:
         ssrProcessFor(child, context, disableNestedFragments)
@@ -225,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/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index 962faddab38..cad1ee81028 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -205,7 +205,7 @@ export function ssrProcessComponent(
   node: ComponentNode,
   context: SSRTransformContext,
   parent: { children: TemplateChildNode[] },
-) {
+): void {
   const component = componentTypeMap.get(node)!
   if (!node.ssrCodegenNode) {
     // this is a built-in component that fell-through.
@@ -268,7 +268,10 @@ 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)
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index 050528f5870..4a12b0f7ba7 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -22,11 +22,13 @@ import {
   createAssignmentExpression,
   createCallExpression,
   createCompilerError,
+  createCompoundExpression,
   createConditionalExpression,
   createInterpolation,
   createSequenceExpression,
   createSimpleExpression,
   createTemplateLiteral,
+  findDir,
   hasDynamicKeyVBind,
   isStaticArgOf,
   isStaticExp,
@@ -162,6 +164,29 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
               ]),
             ]
           }
+        } else if (directives.length && !node.children.length) {
+          // v-text directive has higher priority than the merged props
+          const vText = findDir(node, 'text')
+          if (!vText) {
+            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) {
@@ -188,7 +213,10 @@ 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') {
@@ -413,7 +441,7 @@ function findVModel(node: PlainElementNode): DirectiveNode | undefined {
 export function ssrProcessElement(
   node: PlainElementNode,
   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 ad08a23a445..aae7a31e8b8 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
@@ -40,24 +40,30 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
 
     // #3989, #9933
     // check if this is a single slot inside a transition wrapper - since
-    // transition/transition-group will unwrap the slot fragment into vnode(s) at runtime,
-    // we need to avoid rendering the slot as a fragment.
-    const parent = context.parent
-    let componentType
-    if (
-      parent &&
-      parent.type === NodeTypes.ELEMENT &&
-      parent.tagType === ElementTypes.COMPONENT &&
-      ((componentType = resolveComponentType(parent, context, true)) ===
-        TRANSITION ||
-        componentType === TRANSITION_GROUP) &&
-      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)
@@ -67,7 +73,7 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
 export function ssrProcessSlotOutlet(
   node: SlotOutletNode,
   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 47a35aac179..d1e19f96f53 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts
@@ -29,7 +29,7 @@ export function ssrTransformSuspense(
   node: ComponentNode,
   context: TransformContext,
 ) {
-  return () => {
+  return (): void => {
     if (node.children.length) {
       const wipEntry: WIPEntry = {
         slotsExp: null!, // to be immediately set
@@ -62,7 +62,7 @@ export function ssrTransformSuspense(
 export function ssrProcessSuspense(
   node: ComponentNode,
   context: SSRTransformContext,
-) {
+): void {
   // complete wip slots with ssr code
   const wipEntry = wipMap.get(node)
   if (!wipEntry) {
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts b/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
index 96f84241a92..d7cbccd532b 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
@@ -18,7 +18,7 @@ import { SSR_RENDER_TELEPORT } from '../runtimeHelpers'
 export function ssrProcessTeleport(
   node: ComponentNode,
   context: SSRTransformContext,
-) {
+): void {
   const targetProp = findProp(node, 'to')
   if (!targetProp) {
     context.onError(
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts
index 400028d1820..ced20816839 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts
@@ -15,7 +15,7 @@ export function ssrTransformTransition(
   node: ComponentNode,
   context: TransformContext,
 ) {
-  return () => {
+  return (): void => {
     const appear = findProp(node, 'appear', false, true)
     wipMap.set(node, !!appear)
   }
@@ -24,7 +24,7 @@ export function ssrTransformTransition(
 export function ssrProcessTransition(
   node: ComponentNode,
   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 2d434010e2a..27ddebec103 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
@@ -29,7 +29,7 @@ export function ssrTransformTransitionGroup(
   node: ComponentNode,
   context: TransformContext,
 ) {
-  return () => {
+  return (): void => {
     const tag = findProp(node, 'tag')
     if (tag) {
       const otherProps = node.props.filter(p => p !== tag)
@@ -60,7 +60,7 @@ export function ssrTransformTransitionGroup(
 export function ssrProcessTransitionGroup(
   node: ComponentNode,
   context: SSRTransformContext,
-) {
+): void {
   const entry = wipMap.get(node)
   if (entry) {
     const { tag, propsExp, scopeId } = entry
@@ -87,6 +87,13 @@ export function ssrProcessTransitionGroup(
          * by disabling nested fragment wrappers from being generated.
          */
         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!)
@@ -101,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 d1899708821..6537eee8287 100644
--- a/packages/compiler-ssr/src/transforms/ssrVFor.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVFor.ts
@@ -1,5 +1,6 @@
 import {
   type ForNode,
+  type NodeTransform,
   NodeTypes,
   createCallExpression,
   createForLoopParams,
@@ -14,10 +15,8 @@ import {
 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.
@@ -25,7 +24,7 @@ export function ssrProcessFor(
   node: ForNode,
   context: SSRTransformContext,
   disableNestedFragments = false,
-) {
+): void {
   const needFragmentWrapper =
     !disableNestedFragments &&
     (node.children.length !== 1 || node.children[0].type !== NodeTypes.ELEMENT)
diff --git a/packages/compiler-ssr/src/transforms/ssrVIf.ts b/packages/compiler-ssr/src/transforms/ssrVIf.ts
index 32a5a7c00f1..0e3880247a1 100644
--- a/packages/compiler-ssr/src/transforms/ssrVIf.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVIf.ts
@@ -2,6 +2,7 @@ import {
   type BlockStatement,
   type IfBranchNode,
   type IfNode,
+  type NodeTransform,
   NodeTypes,
   createBlockStatement,
   createCallExpression,
@@ -15,7 +16,7 @@ import {
 } 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,
 )
@@ -26,7 +27,8 @@ export function ssrProcessIf(
   node: IfNode,
   context: SSRTransformContext,
   disableNestedFragments = false,
-) {
+  disableComment = false,
+): void {
   const [rootBranch] = node.branches
   const ifStatement = createIfStatement(
     rootBranch.condition!,
@@ -54,7 +56,7 @@ export function ssrProcessIf(
     }
   }
 
-  if (!currentIf.alternate) {
+  if (!currentIf.alternate && !disableComment) {
     currentIf.alternate = createBlockStatement([
       createCallExpression(`_push`, ['`<!---->`']),
     ])
diff --git a/packages/compiler-ssr/src/transforms/ssrVModel.ts b/packages/compiler-ssr/src/transforms/ssrVModel.ts
index 9a645397e1a..cbe5b2b42a3 100644
--- a/packages/compiler-ssr/src/transforms/ssrVModel.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVModel.ts
@@ -5,6 +5,7 @@ import {
   type ExpressionNode,
   NodeTypes,
   type PlainElementNode,
+  type TemplateChildNode,
   createCallExpression,
   createConditionalExpression,
   createDOMCompilerError,
@@ -38,6 +39,18 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
     }
   }
 
+  const processSelectChildren = (children: TemplateChildNode[]) => {
+    children.forEach(child => {
+      if (child.type === NodeTypes.ELEMENT) {
+        processOption(child as PlainElementNode)
+      } else if (child.type === NodeTypes.FOR) {
+        processSelectChildren(child.children)
+      } else if (child.type === NodeTypes.IF) {
+        child.branches.forEach(b => processSelectChildren(b.children))
+      }
+    })
+  }
+
   function processOption(plainNode: PlainElementNode) {
     if (plainNode.tag === 'option') {
       if (plainNode.props.findIndex(p => p.name === 'selected') === -1) {
@@ -64,9 +77,7 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
         )
       }
     } else if (plainNode.tag === 'optgroup') {
-      plainNode.children.forEach(option =>
-        processOption(option as PlainElementNode),
-      )
+      processSelectChildren(plainNode.children)
     }
   }
 
@@ -162,11 +173,7 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
       checkDuplicatedValue()
       node.children = [createInterpolation(model, model.loc)]
     } else if (node.tag === 'select') {
-      node.children.forEach(child => {
-        if (child.type === NodeTypes.ELEMENT) {
-          processOption(child as PlainElementNode)
-        }
-      })
+      processSelectChildren(node.children)
     } else {
       context.onError(
         createDOMCompilerError(
diff --git a/packages/dts-test/README.md b/packages/dts-test/README.md
deleted file mode 100644
index 197005a5692..00000000000
--- 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/appDirective.test-d.ts b/packages/dts-test/appDirective.test-d.ts
deleted file mode 100644
index 1ac5f64d19a..00000000000
--- a/packages/dts-test/appDirective.test-d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createApp } from 'vue'
-import { expectType } from './utils'
-
-const app = createApp({})
-
-app.directive<HTMLElement, string>('custom', {
-  mounted(el, binding) {
-    expectType<HTMLElement>(el)
-    expectType<string>(binding.value)
-
-    // @ts-expect-error not any
-    expectType<number>(binding.value)
-  },
-})
diff --git a/packages/global.d.ts b/packages/global.d.ts
index 704f6d0220d..8b627d2e556 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
@@ -9,7 +7,6 @@ declare var __ESM_BUNDLER__: boolean
 declare var __ESM_BROWSER__: boolean
 declare var __CJS__: boolean
 declare var __SSR__: boolean
-declare var __COMMIT__: string
 declare var __VERSION__: string
 declare var __COMPAT__: boolean
 
@@ -19,44 +16,19 @@ declare var __FEATURE_PROD_DEVTOOLS__: boolean
 declare var __FEATURE_SUSPENSE__: boolean
 declare var __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: boolean
 
-// for tests
-declare namespace jest {
-  interface Matchers<R, T> {
-    toHaveBeenWarned(): R
-    toHaveBeenWarnedLast(): R
-    toHaveBeenWarnedTimes(n: number): R
-  }
-}
-
 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 }>,
   )
 }
 
-declare module 'source-map-js' {
-  export interface SourceMapGenerator {
-    // SourceMapGenerator has this method but the types do not include it
-    toJSON(): RawSourceMap
-    _sources: Set<string>
-    _names: Set<string>
-    _mappings: {
-      add(mapping: MappingItem): void
-    }
-  }
-}
-
 declare interface String {
   /**
    * @deprecated Please use String.prototype.slice instead of String.prototype.substring in the repository.
diff --git a/packages/reactivity/__benchmarks__/computed.bench.ts b/packages/reactivity/__benchmarks__/computed.bench.ts
new file mode 100644
index 00000000000..a2a49486a89
--- /dev/null
+++ b/packages/reactivity/__benchmarks__/computed.bench.ts
@@ -0,0 +1,205 @@
+import { bench, describe } from 'vitest'
+import type { ComputedRef, Ref } from '../src'
+import { computed, effect, ref } from '../dist/reactivity.esm-browser.prod'
+
+declare module '../dist/reactivity.esm-browser.prod' {
+  function computed(...args: any[]): any
+}
+
+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 00000000000..a1026db2153
--- /dev/null
+++ b/packages/reactivity/__benchmarks__/effect.bench.ts
@@ -0,0 +1,112 @@
+import { bench, describe } from 'vitest'
+import type { Ref } from '../src'
+import { effect, ref } from '../dist/reactivity.esm-browser.prod'
+
+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 00000000000..910c10015e9
--- /dev/null
+++ b/packages/reactivity/__benchmarks__/reactiveArray.bench.ts
@@ -0,0 +1,158 @@
+import { bench } from 'vitest'
+import {
+  effect,
+  reactive,
+  shallowReadArray,
+} from '../dist/reactivity.esm-browser.prod'
+
+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/__tests__/reactiveMap.bench.ts b/packages/reactivity/__benchmarks__/reactiveMap.bench.ts
similarity index 94%
rename from packages/reactivity/__tests__/reactiveMap.bench.ts
rename to packages/reactivity/__benchmarks__/reactiveMap.bench.ts
index 70a034e96c3..5af03ba4b14 100644
--- a/packages/reactivity/__tests__/reactiveMap.bench.ts
+++ b/packages/reactivity/__benchmarks__/reactiveMap.bench.ts
@@ -1,5 +1,6 @@
 import { bench } from 'vitest'
-import { type ComputedRef, computed, reactive } from '../src'
+import type { ComputedRef } from '../src'
+import { computed, reactive } from '../dist/reactivity.esm-browser.prod'
 
 function createMap(obj: Record<string, any>) {
   const map = new Map()
@@ -79,7 +80,7 @@ bench('create reactive map', () => {
 
 {
   const r = reactive(createMap({ a: 1 }))
-  const computeds = []
+  const computeds: any[] = []
   for (let i = 0, n = 1000; i < n; i++) {
     const c = computed(() => {
       return r.get('a') * 2
@@ -94,7 +95,7 @@ bench('create reactive map', () => {
 
 {
   const r = reactive(createMap({ a: 1 }))
-  const computeds = []
+  const computeds: any[] = []
   for (let i = 0, n = 1000; i < n; i++) {
     const c = computed(() => {
       return r.get('a') * 2
diff --git a/packages/reactivity/__benchmarks__/reactiveObject.bench.ts b/packages/reactivity/__benchmarks__/reactiveObject.bench.ts
new file mode 100644
index 00000000000..1b444d4fec6
--- /dev/null
+++ b/packages/reactivity/__benchmarks__/reactiveObject.bench.ts
@@ -0,0 +1,21 @@
+import { bench } from 'vitest'
+import { reactive } from '../dist/reactivity.esm-browser.prod'
+
+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/__tests__/ref.bench.ts b/packages/reactivity/__benchmarks__/ref.bench.ts
similarity index 88%
rename from packages/reactivity/__tests__/ref.bench.ts
rename to packages/reactivity/__benchmarks__/ref.bench.ts
index 286d53e8840..4c1d2b5b82f 100644
--- a/packages/reactivity/__tests__/ref.bench.ts
+++ b/packages/reactivity/__benchmarks__/ref.bench.ts
@@ -1,5 +1,5 @@
 import { bench, describe } from 'vitest'
-import { ref } from '../src/index'
+import { ref } from '../dist/reactivity.esm-browser.prod'
 
 describe('ref', () => {
   bench('create ref', () => {
@@ -26,7 +26,6 @@ describe('ref', () => {
     const v = ref(100)
     bench('write/read ref', () => {
       v.value = i++
-
       v.value
     })
   }
diff --git a/packages/reactivity/__tests__/computed.bench.ts b/packages/reactivity/__tests__/computed.bench.ts
deleted file mode 100644
index 0ffa288ff1e..00000000000
--- a/packages/reactivity/__tests__/computed.bench.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { bench, describe } from 'vitest'
-import { type ComputedRef, type Ref, computed, ref } from '../src/index'
-
-describe('computed', () => {
-  bench('create computed', () => {
-    computed(() => 100)
-  })
-
-  {
-    let i = 0
-    const o = ref(100)
-    bench('write independent ref dep', () => {
-      o.value = i++
-    })
-  }
-
-  {
-    const v = ref(100)
-    computed(() => v.value * 2)
-    let i = 0
-    bench("write ref, don't read computed (never invoked)", () => {
-      v.value = i++
-    })
-  }
-
-  {
-    const v = ref(100)
-    computed(() => {
-      return v.value * 2
-    })
-    let i = 0
-    bench("write ref, don't read computed (never invoked)", () => {
-      v.value = i++
-    })
-  }
-
-  {
-    const v = ref(100)
-    const c = computed(() => {
-      return v.value * 2
-    })
-    c.value
-    let i = 0
-    bench("write ref, don't read computed (invoked)", () => {
-      v.value = i++
-    })
-  }
-
-  {
-    const v = ref(100)
-    const c = computed(() => {
-      return v.value * 2
-    })
-    let i = 0
-    bench('write ref, read computed', () => {
-      v.value = i++
-      c.value
-    })
-  }
-
-  {
-    const v = ref(100)
-    const computeds = []
-    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 (never invoked)", () => {
-      v.value = i++
-    })
-  }
-
-  {
-    const v = ref(100)
-    const computeds = []
-    for (let i = 0, n = 1000; i < n; i++) {
-      const c = computed(() => {
-        return v.value * 2
-      })
-      c.value
-      computeds.push(c)
-    }
-    let i = 0
-    bench("write ref, don't read 1000 computeds (invoked)", () => {
-      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
-      })
-      c.value
-      computeds.push(c)
-    }
-    let i = 0
-    bench('write ref, read 1000 computeds', () => {
-      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, 1 computed', () => {
-      refs[i++ % n].value++
-      c.value
-    })
-  }
-})
diff --git a/packages/reactivity/__tests__/computed.spec.ts b/packages/reactivity/__tests__/computed.spec.ts
index c3d0c7f15ed..c7963499f85 100644
--- a/packages/reactivity/__tests__/computed.spec.ts
+++ b/packages/reactivity/__tests__/computed.spec.ts
@@ -1,4 +1,15 @@
-import { h, nextTick, nodeOps, render, serializeInner } from '@vue/runtime-test'
+import {
+  type TestElement,
+  defineComponent,
+  h,
+  nextTick,
+  nodeOps,
+  onMounted,
+  onUnmounted,
+  render,
+  serializeInner,
+  triggerEvent,
+} from '@vue/runtime-test'
 import {
   type DebuggerEvent,
   ITERATE_KEY,
@@ -12,8 +23,10 @@ import {
   ref,
   shallowRef,
   toRaw,
+  triggerRef,
 } from '../src'
-import { DirtyLevels } from '../src/constants'
+import { EffectFlags, pauseTracking, resetTracking } from '../src/effect'
+import type { ComputedRef, ComputedRefImpl } from '../src/computed'
 
 describe('reactivity/computed', () => {
   it('should return updated value', () => {
@@ -24,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)
@@ -122,21 +149,6 @@ 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({
@@ -218,12 +230,6 @@ describe('reactivity/computed', () => {
     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) => {
@@ -237,19 +243,19 @@ describe('reactivity/computed', () => {
     expect(onTrack).toHaveBeenCalledTimes(3)
     expect(events).toEqual([
       {
-        effect: c.effect,
+        effect: c,
         target: toRaw(obj),
         type: TrackOpTypes.GET,
         key: 'foo',
       },
       {
-        effect: c.effect,
+        effect: c,
         target: toRaw(obj),
         type: TrackOpTypes.HAS,
         key: 'bar',
       },
       {
-        effect: c.effect,
+        effect: c,
         target: toRaw(obj),
         type: TrackOpTypes.ITERATE,
         key: ITERATE_KEY,
@@ -257,7 +263,7 @@ describe('reactivity/computed', () => {
     ])
   })
 
-  it('debug: onTrigger', () => {
+  it('debug: onTrigger (reactive)', () => {
     let events: DebuggerEvent[] = []
     const onTrigger = vi.fn((e: DebuggerEvent) => {
       events.push(e)
@@ -265,14 +271,14 @@ 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',
@@ -284,7 +290,7 @@ describe('reactivity/computed', () => {
     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',
@@ -379,17 +385,17 @@ describe('reactivity/computed', () => {
     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) {
@@ -397,16 +403,15 @@ describe('reactivity/computed', () => {
         }
       }
       return c.value
-    })
+    }) as unknown as ComputedRefImpl
 
     e.value
     a.value++
     e.value
 
-    expect(e.effect.deps.length).toBe(3)
-    expect(e.effect.deps.indexOf((b as any).dep)).toBe(0)
-    expect(e.effect.deps.indexOf((d as any).dep)).toBe(1)
-    expect(e.effect.deps.indexOf((c as any).dep)).toBe(2)
+    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++
@@ -455,17 +460,14 @@ describe('reactivity/computed', () => {
     expect(fnSpy).toBeCalledTimes(2)
   })
 
-  it('should chained recurse effects clear dirty after trigger', () => {
+  it('should chained recursive effects clear dirty after trigger', () => {
     const v = ref(1)
-    const c1 = computed(() => v.value)
-    const c2 = computed(() => c1.value)
+    const c1 = computed(() => v.value) as unknown as ComputedRefImpl
+    const c2 = computed(() => c1.value) as unknown as ComputedRefImpl
 
-    c1.effect.allowRecurse = true
-    c2.effect.allowRecurse = true
     c2.value
-
-    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.NotDirty)
-    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.NotDirty)
+    expect(c1.flags & EffectFlags.DIRTY).toBeFalsy()
+    expect(c2.flags & EffectFlags.DIRTY).toBeFalsy()
   })
 
   it('should chained computeds dirtyLevel update with first computed effect', () => {
@@ -480,14 +482,7 @@ describe('reactivity/computed', () => {
     const c3 = computed(() => c2.value)
 
     c3.value
-
-    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
-    expect(c2.effect._dirtyLevel).toBe(
-      DirtyLevels.MaybeDirty_ComputedSideEffect,
-    )
-    expect(c3.effect._dirtyLevel).toBe(
-      DirtyLevels.MaybeDirty_ComputedSideEffect,
-    )
+    // expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
   })
 
   it('should work when chained(ref+computed)', () => {
@@ -500,8 +495,8 @@ describe('reactivity/computed', () => {
     })
     const c2 = computed(() => v.value + c1.value)
     expect(c2.value).toBe('0foo')
-    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
     expect(c2.value).toBe('1foo')
+    // expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
   })
 
   it('should trigger effect even computed already dirty', () => {
@@ -516,14 +511,16 @@ describe('reactivity/computed', () => {
     const c2 = computed(() => v.value + c1.value)
 
     effect(() => {
-      fnSpy()
-      c2.value
+      fnSpy(c2.value)
     })
     expect(fnSpy).toBeCalledTimes(1)
-    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
-    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+    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
@@ -549,24 +546,12 @@ describe('reactivity/computed', () => {
 
     c3.value
     v2.value = true
-    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
-    expect(c3.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty)
 
     c3.value
-    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
-    expect(c2.effect._dirtyLevel).toBe(
-      DirtyLevels.MaybeDirty_ComputedSideEffect,
-    )
-    expect(c3.effect._dirtyLevel).toBe(
-      DirtyLevels.MaybeDirty_ComputedSideEffect,
-    )
-
     v1.value.v.value = 999
-    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
-    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty)
-    expect(c3.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty)
 
     expect(c3.value).toBe('yes')
+    // expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
   })
 
   it('should be not dirty after deps mutate (mutate deps in computed)', async () => {
@@ -588,9 +573,10 @@ describe('reactivity/computed', () => {
     await nextTick()
     await nextTick()
     expect(serializeInner(root)).toBe(`2`)
+    // expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
   })
 
-  it('should not trigger effect scheduler by recurse computed effect', async () => {
+  it('should not trigger effect scheduler by recursive computed effect', async () => {
     const v = ref('Hello')
     const c = computed(() => {
       v.value += ' World'
@@ -610,5 +596,558 @@ describe('reactivity/computed', () => {
     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('should not recompute if computed does not track reactive data', async () => {
+    const spy = vi.fn()
+    const c1 = computed(() => spy())
+
+    c1.value
+    ref(0).value++ // update globalVersion
+    c1.value
+
+    expect(spy).toBeCalledTimes(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])
+  })
+
+  test('performance when removing dependencies from deeply nested computeds', () => {
+    const base = ref(1)
+    const trigger = ref(true)
+    const computeds: ComputedRef<number>[] = []
+
+    const LAYERS = 30
+
+    for (let i = 0; i < LAYERS; i++) {
+      const earlier = [...computeds]
+
+      computeds.push(
+        computed(() => {
+          return base.value + earlier.reduce((sum, c) => sum + c.value, 0)
+        }),
+      )
+    }
+
+    const tail = computed(() =>
+      trigger.value ? computeds[computeds.length - 1].value : 0,
+    )
+
+    const t0 = performance.now()
+    expect(tail.value).toBe(2 ** (LAYERS - 1))
+    const t1 = performance.now()
+    expect(t1 - t0).toBeLessThan(process.env.CI ? 100 : 30)
+
+    trigger.value = false
+    expect(tail.value).toBe(0)
+    const t2 = performance.now()
+    expect(t2 - t1).toBeLessThan(process.env.CI ? 100 : 30)
   })
 })
diff --git a/packages/reactivity/__tests__/deferredComputed.spec.ts b/packages/reactivity/__tests__/deferredComputed.spec.ts
deleted file mode 100644
index 8e78ba959c3..00000000000
--- a/packages/reactivity/__tests__/deferredComputed.spec.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { computed, effect, ref } from '../src'
-
-describe('deferred computed', () => {
-  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)
-  })
-
-  test('should not compute if deactivated before scheduler is called', () => {
-    const c1Spy = vi.fn()
-    const src = ref(0)
-    const c1 = computed(() => {
-      c1Spy()
-      return src.value % 2
-    })
-    effect(() => c1.value)
-    expect(c1Spy).toHaveBeenCalledTimes(1)
-
-    c1.effect.stop()
-    // trigger
-    src.value++
-    expect(c1Spy).toHaveBeenCalledTimes(1)
-  })
-})
diff --git a/packages/reactivity/__tests__/effect.spec.ts b/packages/reactivity/__tests__/effect.spec.ts
index bd26934f1ce..242fc707153 100644
--- a/packages/reactivity/__tests__/effect.spec.ts
+++ b/packages/reactivity/__tests__/effect.spec.ts
@@ -11,8 +11,7 @@ import {
   stop,
   toRaw,
 } from '../src/index'
-import { pauseScheduling, resetScheduling } from '../src/effect'
-import { ITERATE_KEY, getDepFromReactive } from '../src/reactiveEffect'
+import { type Dep, ITERATE_KEY, getDepFromReactive } from '../src/dep'
 import {
   computed,
   h,
@@ -22,6 +21,13 @@ import {
   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)', () => {
@@ -252,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
@@ -698,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
@@ -775,6 +785,32 @@ describe('reactivity/effect', () => {
     ])
   })
 
+  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
@@ -813,6 +849,51 @@ describe('reactivity/effect', () => {
     })
   })
 
+  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 })
@@ -830,6 +911,31 @@ describe('reactivity/effect', () => {
     expect(dummy).toBe(3)
   })
 
+  it('stop with multiple dependencies', () => {
+    let dummy1, dummy2
+    const obj1 = reactive({ prop: 1 })
+    const obj2 = reactive({ prop: 1 })
+    const runner = effect(() => {
+      dummy1 = obj1.prop
+      dummy2 = obj2.prop
+    })
+
+    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(() => {}, {
@@ -1005,7 +1111,7 @@ describe('reactivity/effect', () => {
     })
   })
 
-  it('should be triggered once with pauseScheduling', () => {
+  it('should be triggered once with batching', () => {
     const counter = reactive({ num: 0 })
 
     const counterSpy = vi.fn(() => counter.num)
@@ -1013,10 +1119,10 @@ describe('reactivity/effect', () => {
 
     counterSpy.mockClear()
 
-    pauseScheduling()
+    startBatch()
     counter.num++
     counter.num++
-    resetScheduling()
+    endBatch()
     expect(counterSpy).toHaveBeenCalledTimes(1)
   })
 
@@ -1049,47 +1155,76 @@ describe('reactivity/effect', () => {
     expect(renderSpy).toHaveBeenCalledTimes(2)
   })
 
-  describe('empty dep cleanup', () => {
+  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 })
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
       const runner = effect(() => obj.prop)
       const dep = getDepFromReactive(toRaw(obj), 'prop')
-      expect(dep).toHaveLength(1)
+      expect(getSubCount(dep)).toBe(1)
       obj.prop = 2
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
-      expect(dep).toHaveLength(1)
+      expect(getSubCount(dep)).toBe(1)
       stop(runner)
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      expect(getSubCount(dep)).toBe(0)
       obj.prop = 3
       runner()
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      expect(getSubCount(dep)).toBe(0)
     })
 
     it('should only remove the dep when the last effect is stopped', () => {
       const obj = reactive({ prop: 1 })
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
       const runner1 = effect(() => obj.prop)
       const dep = getDepFromReactive(toRaw(obj), 'prop')
-      expect(dep).toHaveLength(1)
+      expect(getSubCount(dep)).toBe(1)
       const runner2 = effect(() => obj.prop)
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
-      expect(dep).toHaveLength(2)
+      expect(getSubCount(dep)).toBe(2)
       obj.prop = 2
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
-      expect(dep).toHaveLength(2)
+      expect(getSubCount(dep)).toBe(2)
       stop(runner1)
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
-      expect(dep).toHaveLength(1)
+      expect(getSubCount(dep)).toBe(1)
       obj.prop = 3
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
-      expect(dep).toHaveLength(1)
+      expect(getSubCount(dep)).toBe(1)
       stop(runner2)
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
       obj.prop = 4
       runner1()
       runner2()
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      expect(getSubCount(dep)).toBe(0)
     })
 
     it('should remove the dep when it is no longer used by the effect', () => {
@@ -1098,18 +1233,97 @@ describe('reactivity/effect', () => {
         b: 2,
         c: 'a',
       })
-      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
       effect(() => obj[obj.c])
       const depC = getDepFromReactive(toRaw(obj), 'c')
-      expect(getDepFromReactive(toRaw(obj), 'a')).toHaveLength(1)
-      expect(getDepFromReactive(toRaw(obj), 'b')).toBeUndefined()
-      expect(depC).toHaveLength(1)
+      expect(getSubCount(getDepFromReactive(toRaw(obj), 'a'))).toBe(1)
+      expect(getSubCount(depC)).toBe(1)
       obj.c = 'b'
       obj.a = 4
-      expect(getDepFromReactive(toRaw(obj), 'a')).toBeUndefined()
-      expect(getDepFromReactive(toRaw(obj), 'b')).toHaveLength(1)
+      expect(getSubCount(getDepFromReactive(toRaw(obj), 'b'))).toBe(1)
       expect(getDepFromReactive(toRaw(obj), 'c')).toBe(depC)
-      expect(depC).toHaveLength(1)
+      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 f7e3241ccd6..debbdafb1e7 100644
--- a/packages/reactivity/__tests__/effectScope.spec.ts
+++ b/packages/reactivity/__tests__/effectScope.spec.ts
@@ -4,6 +4,7 @@ import {
   EffectScope,
   computed,
   effect,
+  effectScope,
   getCurrentScope,
   onScopeDispose,
   reactive,
@@ -13,21 +14,21 @@ import {
 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))
     })
@@ -175,7 +176,7 @@ describe('reactivity/effect/scope', () => {
 
     expect('[Vue warn] cannot run an inactive effect scope.').toHaveBeenWarned()
 
-    expect(scope.effects.length).toBe(1)
+    expect(scope.effects.length).toBe(0)
 
     counter.num = 7
     expect(dummy).toBe(0)
@@ -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)
     })
@@ -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,80 @@ 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)
+  })
+
+  test('removing a watcher while stopping its effectScope', async () => {
+    const count = ref(0)
+    const scope = effectScope()
+    let watcherCalls = 0
+    let cleanupCalls = 0
+
+    scope.run(() => {
+      const stop1 = watch(count, () => {
+        watcherCalls++
+      })
+      watch(count, (val, old, onCleanup) => {
+        watcherCalls++
+        onCleanup(() => {
+          cleanupCalls++
+          stop1()
+        })
+      })
+      watch(count, () => {
+        watcherCalls++
+      })
+    })
+
+    expect(watcherCalls).toBe(0)
+    expect(cleanupCalls).toBe(0)
+
+    count.value++
+    await nextTick()
+    expect(watcherCalls).toBe(3)
+    expect(cleanupCalls).toBe(0)
+
+    scope.stop()
+    count.value++
+    await nextTick()
+    expect(watcherCalls).toBe(3)
+    expect(cleanupCalls).toBe(1)
+
+    expect(scope.effects.length).toBe(0)
+    expect(scope.cleanups.length).toBe(0)
+  })
 })
diff --git a/packages/reactivity/__tests__/gc.spec.ts b/packages/reactivity/__tests__/gc.spec.ts
index 953765dd1d9..a609958409f 100644
--- a/packages/reactivity/__tests__/gc.spec.ts
+++ b/packages/reactivity/__tests__/gc.spec.ts
@@ -6,7 +6,7 @@ import {
   shallowRef as ref,
   toRaw,
 } from '../src/index'
-import { getDepFromReactive } from '../src/reactiveEffect'
+import { getDepFromReactive } from '../src/dep'
 
 describe.skipIf(!global.gc)('reactivity/gc', () => {
   const gc = () => {
@@ -21,6 +21,7 @@ describe.skipIf(!global.gc)('reactivity/gc', () => {
   // #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)
diff --git a/packages/reactivity/__tests__/reactive.spec.ts b/packages/reactivity/__tests__/reactive.spec.ts
index ab953ff891a..9b17f960b1a 100644
--- a/packages/reactivity/__tests__/reactive.spec.ts
+++ b/packages/reactivity/__tests__/reactive.spec.ts
@@ -1,7 +1,19 @@
-import { isRef, ref } from '../src/ref'
-import { isReactive, markRaw, reactive, toRaw } from '../src/reactive'
+import { isRef, ref, shallowRef } 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', () => {
@@ -183,8 +195,8 @@ describe('reactivity/reactive', () => {
   test('toRaw on object using reactive as prototype', () => {
     const original = { foo: 1 }
     const observed = reactive(original)
-    const inherted = Object.create(observed)
-    expect(toRaw(inherted)).toBe(inherted)
+    const inherited = Object.create(observed)
+    expect(toRaw(inherited)).toBe(inherited)
   })
 
   test('toRaw on user Proxy wrapping reactive', () => {
@@ -282,6 +294,20 @@ describe('reactivity/reactive', () => {
     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 markRaw object as reactive', () => {
+    const a = reactive({ a: 1 })
+    const b = reactive({ b: 2 }) as any
+    b.a = markRaw(toRaw(a))
+    expect(b.a === a).toBe(false)
+  })
+
   test('should not observe non-extensible objects', () => {
     const obj = reactive({
       foo: Object.preventExtensions({ a: 1 }),
@@ -302,4 +328,115 @@ describe('reactivity/reactive', () => {
     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()
+  })
+
+  test('should trigger reactivity when Map key is undefined', () => {
+    const map = reactive(new Map())
+    const c = computed(() => map.get(void 0))
+
+    expect(c.value).toBe(void 0)
+
+    map.set(void 0, 1)
+    expect(c.value).toBe(1)
+  })
+
+  test('should return true for reactive objects', () => {
+    expect(isReactive(reactive({}))).toBe(true)
+    expect(isReactive(readonly(reactive({})))).toBe(true)
+    expect(isReactive(ref({}).value)).toBe(true)
+    expect(isReactive(readonly(ref({})).value)).toBe(true)
+    expect(isReactive(shallowReactive({}))).toBe(true)
+  })
+
+  test('should return false for non-reactive objects', () => {
+    expect(isReactive(ref(true))).toBe(false)
+    expect(isReactive(shallowRef({}).value)).toBe(false)
+  })
 })
diff --git a/packages/reactivity/__tests__/reactiveArray.bench.ts b/packages/reactivity/__tests__/reactiveArray.bench.ts
deleted file mode 100644
index 9ce0dc531d1..00000000000
--- a/packages/reactivity/__tests__/reactiveArray.bench.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { bench } from 'vitest'
-import { computed, reactive, readonly, shallowRef, triggerRef } from '../src'
-
-for (let amount = 1e1; amount < 1e4; amount *= 10) {
-  {
-    const rawArray = []
-    for (let i = 0, n = amount; i < n; i++) {
-      rawArray.push(i)
-    }
-    const r = reactive(rawArray)
-    const c = computed(() => {
-      return r.reduce((v, a) => a + v, 0)
-    })
-
-    bench(`reduce *reactive* array, ${amount} elements`, () => {
-      for (let i = 0, n = r.length; i < n; i++) {
-        r[i]++
-      }
-      c.value
-    })
-  }
-
-  {
-    const rawArray = []
-    for (let i = 0, n = amount; i < n; i++) {
-      rawArray.push(i)
-    }
-    const r = reactive(rawArray)
-    const c = computed(() => {
-      return r.reduce((v, a) => a + v, 0)
-    })
-
-    bench(
-      `reduce *reactive* array, ${amount} elements, only change first value`,
-      () => {
-        r[0]++
-        c.value
-      },
-    )
-  }
-
-  {
-    const rawArray = []
-    for (let i = 0, n = amount; i < n; i++) {
-      rawArray.push(i)
-    }
-    const r = reactive({ arr: readonly(rawArray) })
-    const c = computed(() => {
-      return r.arr.reduce((v, a) => a + v, 0)
-    })
-
-    bench(`reduce *readonly* array, ${amount} elements`, () => {
-      r.arr = r.arr.map(v => v + 1)
-      c.value
-    })
-  }
-
-  {
-    const rawArray = []
-    for (let i = 0, n = amount; i < n; i++) {
-      rawArray.push(i)
-    }
-    const r = shallowRef(rawArray)
-    const c = computed(() => {
-      return r.value.reduce((v, a) => a + v, 0)
-    })
-
-    bench(`reduce *raw* array, copied, ${amount} elements`, () => {
-      r.value = r.value.map(v => v + 1)
-      c.value
-    })
-  }
-
-  {
-    const rawArray: number[] = []
-    for (let i = 0, n = amount; i < n; i++) {
-      rawArray.push(i)
-    }
-    const r = shallowRef(rawArray)
-    const c = computed(() => {
-      return r.value.reduce((v, a) => a + v, 0)
-    })
-
-    bench(`reduce *raw* array, manually triggered, ${amount} elements`, () => {
-      for (let i = 0, n = rawArray.length; i < n; i++) {
-        rawArray[i]++
-      }
-      triggerRef(r)
-      c.value
-    })
-  }
-}
diff --git a/packages/reactivity/__tests__/reactiveArray.spec.ts b/packages/reactivity/__tests__/reactiveArray.spec.ts
index 1c6fcefd592..a1154cfa248 100644
--- a/packages/reactivity/__tests__/reactiveArray.spec.ts
+++ b/packages/reactivity/__tests__/reactiveArray.spec.ts
@@ -1,4 +1,5 @@
-import { isReactive, reactive, toRaw } from '../src/reactive'
+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'
 
@@ -50,6 +51,7 @@ describe('reactivity/reactive/Array', () => {
     const raw = {}
     const arr = reactive([{}, {}])
     arr.push(raw)
+
     expect(arr.indexOf(raw)).toBe(2)
     expect(arr.indexOf(raw, 3)).toBe(-1)
     expect(arr.includes(raw)).toBe(true)
@@ -88,6 +90,84 @@ describe('reactivity/reactive/Array', () => {
     expect(index).toBe(1)
   })
 
+  // only non-existent reactive will try to search by using its raw value
+  describe('Array identity methods should not be called more than necessary', () => {
+    const identityMethods = ['includes', 'indexOf', 'lastIndexOf'] as const
+
+    function instrumentArr(rawTarget: any[]) {
+      identityMethods.forEach(key => {
+        const spy = vi.fn(rawTarget[key] as any)
+        rawTarget[key] = spy
+      })
+    }
+
+    function searchValue(target: any[], ...args: unknown[]) {
+      return identityMethods.map(key => (target[key] as any)(...args))
+    }
+
+    function unInstrumentArr(rawTarget: any[]) {
+      identityMethods.forEach(key => {
+        ;(rawTarget[key] as any).mockClear()
+        // relink to prototype method
+        rawTarget[key] = Array.prototype[key] as any
+      })
+    }
+
+    function expectHaveBeenCalledTimes(rawTarget: any[], times: number) {
+      identityMethods.forEach(key => {
+        expect(rawTarget[key]).toHaveBeenCalledTimes(times)
+      })
+    }
+
+    test('should be called once with a non-existent raw value', () => {
+      const reactiveArr = reactive([])
+      instrumentArr(toRaw(reactiveArr))
+      const searchResult = searchValue(reactiveArr, {})
+
+      expectHaveBeenCalledTimes(toRaw(reactiveArr), 1)
+      expect(searchResult).toStrictEqual([false, -1, -1])
+
+      unInstrumentArr(toRaw(reactiveArr))
+    })
+
+    test('should be called once with an existent reactive value', () => {
+      const existReactiveValue = reactive({})
+      const reactiveArr = reactive([existReactiveValue, existReactiveValue])
+
+      instrumentArr(toRaw(reactiveArr))
+      const searchResult = searchValue(reactiveArr, existReactiveValue)
+
+      expectHaveBeenCalledTimes(toRaw(reactiveArr), 1)
+      expect(searchResult).toStrictEqual([true, 0, 1])
+
+      unInstrumentArr(toRaw(reactiveArr))
+    })
+
+    test('should be called twice with a non-existent reactive value', () => {
+      const reactiveArr = reactive([])
+      instrumentArr(toRaw(reactiveArr))
+      const searchResult = searchValue(reactiveArr, reactive({}))
+
+      expectHaveBeenCalledTimes(toRaw(reactiveArr), 2)
+      expect(searchResult).toStrictEqual([false, -1, -1])
+
+      unInstrumentArr(toRaw(reactiveArr))
+    })
+
+    test('should be called twice with a non-existent reactive value, but the raw value exists', () => {
+      const existRaw = {}
+      const reactiveArr = reactive([existRaw, existRaw])
+
+      instrumentArr(toRaw(reactiveArr))
+      const searchResult = searchValue(reactiveArr, reactive(existRaw))
+
+      expectHaveBeenCalledTimes(toRaw(reactiveArr), 2)
+      expect(searchResult).toStrictEqual([true, 0, 1])
+
+      unInstrumentArr(toRaw(reactiveArr))
+    })
+  })
+
   test('delete on Array should not trigger length dependency', () => {
     const arr = reactive([1, 2, 3])
     const fn = vi.fn()
@@ -99,6 +179,21 @@ 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()
@@ -252,4 +347,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__/reactiveObject.bench.ts b/packages/reactivity/__tests__/reactiveObject.bench.ts
deleted file mode 100644
index 71632283f69..00000000000
--- a/packages/reactivity/__tests__/reactiveObject.bench.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { bench } from 'vitest'
-import { type ComputedRef, computed, reactive } from '../src'
-
-bench('create reactive obj', () => {
-  reactive({ a: 1 })
-})
-
-{
-  let i = 0
-  const r = reactive({ a: 1 })
-  bench('write reactive obj property', () => {
-    r.a = i++
-  })
-}
-
-{
-  const r = reactive({ a: 1 })
-  computed(() => {
-    return r.a * 2
-  })
-  let i = 0
-  bench("write reactive obj, don't read computed (never invoked)", () => {
-    r.a = i++
-  })
-}
-
-{
-  const r = reactive({ a: 1 })
-  const c = computed(() => {
-    return r.a * 2
-  })
-  c.value
-  let i = 0
-  bench("write reactive obj, don't read computed (invoked)", () => {
-    r.a = i++
-  })
-}
-
-{
-  const r = reactive({ a: 1 })
-  const c = computed(() => {
-    return r.a * 2
-  })
-  let i = 0
-  bench('write reactive obj, read computed', () => {
-    r.a = i++
-    c.value
-  })
-}
-
-{
-  const r = reactive({ a: 1 })
-  const computeds = []
-  for (let i = 0, n = 1000; i < n; i++) {
-    const c = computed(() => {
-      return r.a * 2
-    })
-    computeds.push(c)
-  }
-  let i = 0
-  bench("write reactive obj, don't read 1000 computeds (never invoked)", () => {
-    r.a = i++
-  })
-}
-
-{
-  const r = reactive({ a: 1 })
-  const computeds = []
-  for (let i = 0, n = 1000; i < n; i++) {
-    const c = computed(() => {
-      return r.a * 2
-    })
-    c.value
-    computeds.push(c)
-  }
-  let i = 0
-  bench("write reactive obj, don't read 1000 computeds (invoked)", () => {
-    r.a = i++
-  })
-}
-
-{
-  const r = reactive({ a: 1 })
-  const computeds: ComputedRef<number>[] = []
-  for (let i = 0, n = 1000; i < n; i++) {
-    const c = computed(() => {
-      return r.a * 2
-    })
-    computeds.push(c)
-  }
-  let i = 0
-  bench('write reactive obj, read 1000 computeds', () => {
-    r.a = i++
-    computeds.forEach(c => c.value)
-  })
-}
-
-{
-  const reactives: Record<string, number>[] = []
-  for (let i = 0, n = 1000; i < n; i++) {
-    reactives.push(reactive({ a: i }))
-  }
-  const c = computed(() => {
-    let total = 0
-    reactives.forEach(r => (total += r.a))
-    return total
-  })
-  let i = 0
-  const n = reactives.length
-  bench('1000 reactive objs, 1 computed', () => {
-    reactives[i++ % n].a++
-    c.value
-  })
-}
diff --git a/packages/reactivity/__tests__/readonly.spec.ts b/packages/reactivity/__tests__/readonly.spec.ts
index 66da71a8c9e..b035779f85a 100644
--- a/packages/reactivity/__tests__/readonly.spec.ts
+++ b/packages/reactivity/__tests__/readonly.spec.ts
@@ -8,7 +8,9 @@ import {
   reactive,
   readonly,
   ref,
+  shallowRef,
   toRaw,
+  triggerRef,
 } from '../src'
 
 /**
@@ -409,7 +411,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)', () => {
@@ -450,7 +452,7 @@ describe('reactivity/readonly', () => {
       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', () => {
@@ -520,3 +522,16 @@ describe('reactivity/readonly', () => {
     expect(r.value).toBe(ro)
   })
 })
+
+test('should be able to trigger with triggerRef', () => {
+  const r = shallowRef({ a: 1 })
+  const ror = readonly(r)
+  let dummy
+  effect(() => {
+    dummy = ror.value.a
+  })
+  r.value.a = 2
+  expect(dummy).toBe(1)
+  triggerRef(ror)
+  expect(dummy).toBe(2)
+})
diff --git a/packages/reactivity/__tests__/ref.spec.ts b/packages/reactivity/__tests__/ref.spec.ts
index 2b2024d9723..7976a5373ba 100644
--- a/packages/reactivity/__tests__/ref.spec.ts
+++ b/packages/reactivity/__tests__/ref.spec.ts
@@ -7,6 +7,7 @@ import {
   ref,
   toRef,
   toRefs,
+  toValue,
 } from '../src/index'
 import { computed } from '@vue/runtime-dom'
 import { customRef, shallowRef, triggerRef, unref } from '../src/ref'
@@ -42,6 +43,28 @@ 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,
@@ -251,6 +274,18 @@ describe('reactivity/ref', () => {
       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)
 
@@ -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 e9b64d39b36..91d91f3dc3d 100644
--- a/packages/reactivity/__tests__/shallowReactive.spec.ts
+++ b/packages/reactivity/__tests__/shallowReactive.spec.ts
@@ -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()
@@ -160,6 +183,7 @@ describe('shallowReactive', () => {
       shallowArray.pop()
       expect(size).toBe(0)
     })
+
     test('should not observe when iterating', () => {
       const shallowArray = shallowReactive<object[]>([])
       const a = {}
diff --git a/packages/reactivity/__tests__/watch.spec.ts b/packages/reactivity/__tests__/watch.spec.ts
new file mode 100644
index 00000000000..9bec54e5f68
--- /dev/null
+++ b/packages/reactivity/__tests__/watch.spec.ts
@@ -0,0 +1,292 @@
+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])
+  })
+
+  test('watch with immediate reset and sync flush', () => {
+    const value = ref(false)
+
+    watch(value, () => {
+      value.value = false
+    })
+
+    value.value = true
+    value.value = true
+    expect(value.value).toBe(false)
+  })
+})
diff --git a/packages/reactivity/package.json b/packages/reactivity/package.json
index b1c069e4c46..a26334ee876 100644
--- a/packages/reactivity/package.json
+++ b/packages/reactivity/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/reactivity",
-  "version": "3.4.18",
+  "version": "3.5.18",
   "description": "@vue/reactivity",
   "main": "index.js",
   "module": "dist/reactivity.esm-bundler.js",
diff --git a/packages/reactivity/src/arrayInstrumentations.ts b/packages/reactivity/src/arrayInstrumentations.ts
new file mode 100644
index 00000000000..e031df4fe10
--- /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 a1b3003a5e7..faec3012f40 100644
--- a/packages/reactivity/src/baseHandlers.ts
+++ b/packages/reactivity/src/baseHandlers.ts
@@ -10,14 +10,9 @@ import {
   shallowReadonlyMap,
   toRaw,
 } from './reactive'
+import { arrayInstrumentations } from './arrayInstrumentations'
 import { ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './constants'
-import {
-  pauseScheduling,
-  pauseTracking,
-  resetScheduling,
-  resetTracking,
-} from './effect'
-import { ITERATE_KEY, track, trigger } from './reactiveEffect'
+import { ITERATE_KEY, track, trigger } from './dep'
 import {
   hasChanged,
   hasOwn,
@@ -30,90 +25,57 @@ import {
 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])
+    .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()
-      pauseScheduling()
-      const res = (toRaw(this) as any)[key].apply(this, args)
-      resetScheduling()
-      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 {
+    if (key === ReactiveFlags.SKIP) return target[ReactiveFlags.SKIP]
+
     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
+      return isShallow
     } else if (key === ReactiveFlags.RAW) {
       if (
         receiver ===
           (isReadonly
-            ? shallow
+            ? isShallow
               ? shallowReadonlyMap
               : readonlyMap
-            : shallow
+            : isShallow
               ? shallowReactiveMap
               : reactiveMap
           ).get(target) ||
         // receiver is not the reactive proxy, but has the same prototype
-        // this means the reciever is a user proxy of the reactive proxy
+        // this means the receiver is a user proxy of the reactive proxy
         Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)
       ) {
         return target
@@ -125,15 +87,23 @@ class BaseReactiveHandler implements ProxyHandler<Target> {
     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
@@ -143,7 +113,7 @@ class BaseReactiveHandler implements ProxyHandler<Target> {
       track(target, TrackOpTypes.GET, key)
     }
 
-    if (shallow) {
+    if (isShallow) {
       return res
     }
 
@@ -164,18 +134,18 @@ 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,
   ): boolean {
-    let oldValue = (target as any)[key]
-    if (!this._shallow) {
+    let oldValue = target[key]
+    if (!this._isShallow) {
       const isOldValueReadonly = isReadonly(oldValue)
       if (!isShallow(value) && !isReadonly(value)) {
         oldValue = toRaw(oldValue)
@@ -197,7 +167,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) {
@@ -209,9 +184,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)
@@ -219,14 +197,15 @@ 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,
@@ -237,8 +216,8 @@ class MutableReactiveHandler extends BaseReactiveHandler {
 }
 
 class ReadonlyReactiveHandler extends BaseReactiveHandler {
-  constructor(shallow = false) {
-    super(true, shallow)
+  constructor(isShallow = false) {
+    super(true, isShallow)
   }
 
   set(target: object, key: string | symbol) {
@@ -263,17 +242,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 58e69b1cc62..048b7f38863 100644
--- a/packages/reactivity/src/collectionHandlers.ts
+++ b/packages/reactivity/src/collectionHandlers.ts
@@ -1,180 +1,35 @@
-import { toRaw, toReactive, toReadonly } from './reactive'
 import {
-  ITERATE_KEY,
-  MAP_KEY_ITERATE_KEY,
-  track,
-  trigger,
-} from './reactiveEffect'
+  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 {
+  capitalize,
+  extend,
+  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
 
 const getProto = <T extends CollectionTypes>(v: T): any =>
   Reflect.getPrototypeOf(v)
 
-function get(
-  target: MapTypes,
-  key: unknown,
-  isReadonly = false,
-  isShallow = false,
-) {
-  // #1772: readonly(reactive(Map)) should return readonly + reactive version
-  // of the value
-  target = (target as any)[ReactiveFlags.RAW]
-  const rawTarget = toRaw(target)
-  const rawKey = toRaw(key)
-  if (!isReadonly) {
-    if (hasChanged(key, rawKey)) {
-      track(rawTarget, TrackOpTypes.GET, key)
-    }
-    track(rawTarget, TrackOpTypes.GET, rawKey)
-  }
-  const { has } = getProto(rawTarget)
-  const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
-  if (has.call(rawTarget, key)) {
-    return wrap(target.get(key))
-  } else if (has.call(rawTarget, rawKey)) {
-    return wrap(target.get(rawKey))
-  } else if (target !== rawTarget) {
-    // #3602 readonly(reactive(Map))
-    // ensure that the nested reactive `Map` can do tracking for itself
-    target.get(key)
-  }
-}
-
-function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean {
-  const target = (this as any)[ReactiveFlags.RAW]
-  const rawTarget = toRaw(target)
-  const rawKey = toRaw(key)
-  if (!isReadonly) {
-    if (hasChanged(key, rawKey)) {
-      track(rawTarget, TrackOpTypes.HAS, key)
-    }
-    track(rawTarget, TrackOpTypes.HAS, rawKey)
-  }
-  return key === rawKey
-    ? target.has(key)
-    : target.has(key) || target.has(rawKey)
-}
-
-function size(target: IterableCollections, isReadonly = false) {
-  target = (target as any)[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)
-  const target = toRaw(this)
-  const proto = getProto(target)
-  const hadKey = proto.has.call(target, value)
-  if (!hadKey) {
-    target.add(value)
-    trigger(target, TriggerOpTypes.ADD, value, value)
-  }
-  return this
-}
-
-function set(this: MapTypes, key: unknown, value: unknown) {
-  value = toRaw(value)
-  const target = toRaw(this)
-  const { has, get } = getProto(target)
-
-  let hadKey = has.call(target, key)
-  if (!hadKey) {
-    key = toRaw(key)
-    hadKey = has.call(target, key)
-  } else if (__DEV__) {
-    checkIdentityKeys(target, has, key)
-  }
-
-  const oldValue = get.call(target, key)
-  target.set(key, value)
-  if (!hadKey) {
-    trigger(target, TriggerOpTypes.ADD, key, value)
-  } else if (hasChanged(value, oldValue)) {
-    trigger(target, TriggerOpTypes.SET, key, value, oldValue)
-  }
-  return this
-}
-
-function deleteEntry(this: CollectionTypes, key: unknown) {
-  const target = toRaw(this)
-  const { has, get } = getProto(target)
-  let hadKey = has.call(target, key)
-  if (!hadKey) {
-    key = toRaw(key)
-    hadKey = has.call(target, key)
-  } else if (__DEV__) {
-    checkIdentityKeys(target, has, key)
-  }
-
-  const oldValue = get ? get.call(target, key) : undefined
-  // forward the operation before queueing reactions
-  const result = target.delete(key)
-  if (hadKey) {
-    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
-  }
-  return result
-}
-
-function clear(this: IterableCollections) {
-  const target = toRaw(this)
-  const hadItems = target.size !== 0
-  const oldTarget = __DEV__
-    ? isMap(target)
-      ? new Map(target)
-      : new Set(target)
-    : undefined
-  // forward the operation before queueing reactions
-  const result = target.clear()
-  if (hadItems) {
-    trigger(target, TriggerOpTypes.CLEAR, undefined, undefined, oldTarget)
-  }
-  return result
-}
-
-function createForEach(isReadonly: boolean, isShallow: boolean) {
-  return function forEach(
-    this: IterableCollections,
-    callback: Function,
-    thisArg?: unknown,
-  ) {
-    const observed = this as any
-    const target = observed[ReactiveFlags.RAW]
-    const rawTarget = toRaw(target)
-    const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
-    !isReadonly && track(rawTarget, TrackOpTypes.ITERATE, ITERATE_KEY)
-    return target.forEach((value: unknown, key: unknown) => {
-      // important: make sure the callback is
-      // 1. invoked with the reactive map as `this` and 3rd arg
-      // 2. the value received should be a corresponding reactive/readonly.
-      return callback.call(thisArg, wrap(value), wrap(key), observed)
-    })
-  }
-}
-
-interface Iterable {
-  [Symbol.iterator](): Iterator
-}
-
-interface Iterator {
-  next(value?: any): IterationResult
-}
-
-interface IterationResult {
-  value: any
-  done: boolean
-}
-
 function createIterableMethod(
   method: string | symbol,
   isReadonly: boolean,
@@ -183,8 +38,8 @@ function createIterableMethod(
   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 =
@@ -223,7 +78,7 @@ 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),
       )
@@ -236,118 +91,177 @@ function createReadonlyMethod(type: TriggerOpTypes): Function {
   }
 }
 
-function createInstrumentations() {
-  const mutableInstrumentations: Record<string, Function | number> = {
-    get(this: MapTypes, key: unknown) {
-      return get(this, key)
-    },
-    get size() {
-      return size(this as unknown as IterableCollections)
-    },
-    has,
-    add,
-    set,
-    delete: deleteEntry,
-    clear,
-    forEach: createForEach(false, false),
-  }
+type Instrumentations = Record<string | symbol, Function | number>
 
-  const shallowInstrumentations: Record<string, Function | number> = {
+function createInstrumentations(
+  readonly: boolean,
+  shallow: boolean,
+): Instrumentations {
+  const instrumentations: Instrumentations = {
     get(this: MapTypes, key: unknown) {
-      return get(this, key, false, true)
+      // #1772: readonly(reactive(Map)) should return readonly + reactive version
+      // of the value
+      const target = this[ReactiveFlags.RAW]
+      const rawTarget = toRaw(target)
+      const rawKey = toRaw(key)
+      if (!readonly) {
+        if (hasChanged(key, rawKey)) {
+          track(rawTarget, TrackOpTypes.GET, key)
+        }
+        track(rawTarget, TrackOpTypes.GET, rawKey)
+      }
+      const { has } = getProto(rawTarget)
+      const wrap = shallow ? toShallow : readonly ? toReadonly : toReactive
+      if (has.call(rawTarget, key)) {
+        return wrap(target.get(key))
+      } else if (has.call(rawTarget, rawKey)) {
+        return wrap(target.get(rawKey))
+      } else if (target !== rawTarget) {
+        // #3602 readonly(reactive(Map))
+        // ensure that the nested reactive `Map` can do tracking for itself
+        target.get(key)
+      }
     },
     get size() {
-      return size(this as unknown as IterableCollections)
+      const target = (this as unknown as IterableCollections)[ReactiveFlags.RAW]
+      !readonly && track(toRaw(target), TrackOpTypes.ITERATE, ITERATE_KEY)
+      return Reflect.get(target, 'size', target)
     },
-    has,
-    add,
-    set,
-    delete: deleteEntry,
-    clear,
-    forEach: createForEach(false, true),
-  }
-
-  const readonlyInstrumentations: Record<string, Function | number> = {
-    get(this: MapTypes, key: unknown) {
-      return get(this, key, true)
+    has(this: CollectionTypes, key: unknown): boolean {
+      const target = this[ReactiveFlags.RAW]
+      const rawTarget = toRaw(target)
+      const rawKey = toRaw(key)
+      if (!readonly) {
+        if (hasChanged(key, rawKey)) {
+          track(rawTarget, TrackOpTypes.HAS, key)
+        }
+        track(rawTarget, TrackOpTypes.HAS, rawKey)
+      }
+      return key === rawKey
+        ? target.has(key)
+        : target.has(key) || target.has(rawKey)
     },
-    get size() {
-      return size(this as unknown as IterableCollections, true)
-    },
-    has(this: MapTypes, key: unknown) {
-      return has.call(this, key, true)
+    forEach(this: IterableCollections, callback: Function, thisArg?: unknown) {
+      const observed = this
+      const target = observed[ReactiveFlags.RAW]
+      const rawTarget = toRaw(target)
+      const wrap = shallow ? toShallow : readonly ? toReadonly : toReactive
+      !readonly && track(rawTarget, TrackOpTypes.ITERATE, ITERATE_KEY)
+      return target.forEach((value: unknown, key: unknown) => {
+        // important: make sure the callback is
+        // 1. invoked with the reactive map as `this` and 3rd arg
+        // 2. the value received should be a corresponding reactive/readonly.
+        return callback.call(thisArg, wrap(value), wrap(key), observed)
+      })
     },
-    add: createReadonlyMethod(TriggerOpTypes.ADD),
-    set: createReadonlyMethod(TriggerOpTypes.SET),
-    delete: createReadonlyMethod(TriggerOpTypes.DELETE),
-    clear: createReadonlyMethod(TriggerOpTypes.CLEAR),
-    forEach: createForEach(true, false),
   }
 
-  const shallowReadonlyInstrumentations: Record<string, Function | number> = {
-    get(this: MapTypes, key: unknown) {
-      return get(this, key, true, true)
-    },
-    get size() {
-      return size(this as unknown as IterableCollections, true)
-    },
-    has(this: MapTypes, key: unknown) {
-      return has.call(this, key, true)
-    },
-    add: createReadonlyMethod(TriggerOpTypes.ADD),
-    set: createReadonlyMethod(TriggerOpTypes.SET),
-    delete: createReadonlyMethod(TriggerOpTypes.DELETE),
-    clear: createReadonlyMethod(TriggerOpTypes.CLEAR),
-    forEach: createForEach(true, true),
-  }
+  extend(
+    instrumentations,
+    readonly
+      ? {
+          add: createReadonlyMethod(TriggerOpTypes.ADD),
+          set: createReadonlyMethod(TriggerOpTypes.SET),
+          delete: createReadonlyMethod(TriggerOpTypes.DELETE),
+          clear: createReadonlyMethod(TriggerOpTypes.CLEAR),
+        }
+      : {
+          add(this: SetTypes, value: unknown) {
+            if (!shallow && !isShallow(value) && !isReadonly(value)) {
+              value = toRaw(value)
+            }
+            const target = toRaw(this)
+            const proto = getProto(target)
+            const hadKey = proto.has.call(target, value)
+            if (!hadKey) {
+              target.add(value)
+              trigger(target, TriggerOpTypes.ADD, value, value)
+            }
+            return this
+          },
+          set(this: MapTypes, key: unknown, value: unknown) {
+            if (!shallow && !isShallow(value) && !isReadonly(value)) {
+              value = toRaw(value)
+            }
+            const target = toRaw(this)
+            const { has, get } = getProto(target)
+
+            let hadKey = has.call(target, key)
+            if (!hadKey) {
+              key = toRaw(key)
+              hadKey = has.call(target, key)
+            } else if (__DEV__) {
+              checkIdentityKeys(target, has, key)
+            }
+
+            const oldValue = get.call(target, key)
+            target.set(key, value)
+            if (!hadKey) {
+              trigger(target, TriggerOpTypes.ADD, key, value)
+            } else if (hasChanged(value, oldValue)) {
+              trigger(target, TriggerOpTypes.SET, key, value, oldValue)
+            }
+            return this
+          },
+          delete(this: CollectionTypes, key: unknown) {
+            const target = toRaw(this)
+            const { has, get } = getProto(target)
+            let hadKey = has.call(target, key)
+            if (!hadKey) {
+              key = toRaw(key)
+              hadKey = has.call(target, key)
+            } else if (__DEV__) {
+              checkIdentityKeys(target, has, key)
+            }
+
+            const oldValue = get ? get.call(target, key) : undefined
+            // forward the operation before queueing reactions
+            const result = target.delete(key)
+            if (hadKey) {
+              trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
+            }
+            return result
+          },
+          clear(this: IterableCollections) {
+            const target = toRaw(this)
+            const hadItems = target.size !== 0
+            const oldTarget = __DEV__
+              ? isMap(target)
+                ? new Map(target)
+                : new Set(target)
+              : undefined
+            // forward the operation before queueing reactions
+            const result = target.clear()
+            if (hadItems) {
+              trigger(
+                target,
+                TriggerOpTypes.CLEAR,
+                undefined,
+                undefined,
+                oldTarget,
+              )
+            }
+            return result
+          },
+        },
+  )
+
+  const iteratorMethods = [
+    'keys',
+    'values',
+    'entries',
+    Symbol.iterator,
+  ] as const
 
-  const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]
   iteratorMethods.forEach(method => {
-    mutableInstrumentations[method as string] = createIterableMethod(
-      method,
-      false,
-      false,
-    )
-    readonlyInstrumentations[method as string] = createIterableMethod(
-      method,
-      true,
-      false,
-    )
-    shallowInstrumentations[method as string] = createIterableMethod(
-      method,
-      false,
-      true,
-    )
-    shallowReadonlyInstrumentations[method as string] = createIterableMethod(
-      method,
-      true,
-      true,
-    )
+    instrumentations[method] = createIterableMethod(method, readonly, shallow)
   })
 
-  return [
-    mutableInstrumentations,
-    readonlyInstrumentations,
-    shallowInstrumentations,
-    shallowReadonlyInstrumentations,
-  ]
+  return instrumentations
 }
 
-const [
-  mutableInstrumentations,
-  readonlyInstrumentations,
-  shallowInstrumentations,
-  shallowReadonlyInstrumentations,
-] = /* #__PURE__*/ createInstrumentations()
-
 function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
-  const instrumentations = shallow
-    ? isReadonly
-      ? shallowReadonlyInstrumentations
-      : shallowInstrumentations
-    : isReadonly
-      ? readonlyInstrumentations
-      : mutableInstrumentations
+  const instrumentations = createInstrumentations(isReadonly, shallow)
 
   return (
     target: CollectionTypes,
@@ -373,20 +287,20 @@ function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
 }
 
 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(
@@ -397,7 +311,7 @@ function checkIdentityKeys(
   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. ` +
diff --git a/packages/reactivity/src/computed.ts b/packages/reactivity/src/computed.ts
index 259d4e32c8a..ea798e201d4 100644
--- a/packages/reactivity/src/computed.ts
+++ b/packages/reactivity/src/computed.ts
@@ -1,90 +1,156 @@
-import { type DebuggerOptions, ReactiveEffect } from './effect'
-import { type Ref, trackRefValue, triggerRefValue } from './ref'
-import { NOOP, hasChanged, isFunction } from '@vue/shared'
-import { toRaw } from './reactive'
-import type { Dep } from './dep'
-import { DirtyLevels, ReactiveFlags } from './constants'
+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 ComputedRef<T = any> extends BaseComputedRef<T> {
+  readonly value: T
 }
 
-export interface WritableComputedRef<T> extends Ref<T> {
-  readonly effect: ReactiveEffect<T>
+export interface WritableComputedRef<T, S = T> extends BaseComputedRef<T, S> {
+  [WritableComputedRefSymbol]: true
 }
 
 export type ComputedGetter<T> = (oldValue?: T) => T
 export type ComputedSetter<T> = (newValue: T) => void
 
-export interface WritableComputedOptions<T> {
+export interface WritableComputedOptions<T, S = T> {
   get: ComputedGetter<T>
-  set: ComputedSetter<T>
+  set: ComputedSetter<S>
 }
 
-export class ComputedRefImpl<T> {
-  public dep?: Dep = undefined
-
-  private _value!: T
-  public readonly effect: ReactiveEffect<T>
-
-  public readonly __v_isRef = true
-  public readonly [ReactiveFlags.IS_READONLY]: boolean = false
-
-  public _cacheable: boolean
+/**
+ * @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
+
+  // for backwards compat
+  effect: this = this
+  // dev only
+  onTrack?: (event: DebuggerEvent) => void
+  // dev only
+  onTrigger?: (event: DebuggerEvent) => void
+
+  /**
+   * Dev only
+   * @internal
+   */
+  _warnRecursive?: boolean
 
   constructor(
-    getter: ComputedGetter<T>,
-    private readonly _setter: ComputedSetter<T>,
-    isReadonly: boolean,
+    public fn: ComputedGetter<T>,
+    private readonly setter: ComputedSetter<T> | undefined,
     isSSR: boolean,
   ) {
-    this.effect = new ReactiveEffect(
-      () => getter(this._value),
-      () =>
-        triggerRefValue(
-          this,
-          this.effect._dirtyLevel === DirtyLevels.MaybeDirty_ComputedSideEffect
-            ? DirtyLevels.MaybeDirty_ComputedSideEffect
-            : DirtyLevels.MaybeDirty,
-        ),
-    )
-    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)
+  /**
+   * @internal
+   */
+  notify(): true | void {
+    this.flags |= EffectFlags.DIRTY
     if (
-      (!self._cacheable || self.effect.dirty) &&
-      hasChanged(self._value, (self._value = self.effect.run()!))
+      !(this.flags & EffectFlags.NOTIFIED) &&
+      // avoid infinite self recursion
+      activeSub !== this
     ) {
-      triggerRefValue(self, DirtyLevels.Dirty)
-    }
-    trackRefValue(self)
-    if (self.effect._dirtyLevel >= DirtyLevels.MaybeDirty_ComputedSideEffect) {
-      triggerRefValue(self, DirtyLevels.MaybeDirty_ComputedSideEffect)
+      batch(this, true)
+      return true
+    } else if (__DEV__) {
+      // TODO warn
     }
-    return self._value
-  }
-
-  set value(newValue: T) {
-    this._setter(newValue)
   }
 
-  // #region polyfill _dirty for backward compatibility third party code for Vue <= 3.3.x
-  get _dirty() {
-    return this.effect.dirty
+  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 _dirty(v) {
-    this.effect.dirty = v
+  set value(newValue) {
+    if (this.setter) {
+      this.setter(newValue)
+    } else if (__DEV__) {
+      warn('Write operation failed: computed value is readonly')
+    }
   }
-  // #endregion
 }
 
 /**
@@ -124,36 +190,30 @@ export function computed<T>(
   getter: ComputedGetter<T>,
   debugOptions?: DebuggerOptions,
 ): ComputedRef<T>
-export function computed<T>(
-  options: WritableComputedOptions<T>,
+export function computed<T, S = T>(
+  options: WritableComputedOptions<T, S>,
   debugOptions?: DebuggerOptions,
-): WritableComputedRef<T>
+): WritableComputedRef<T, S>
 export function computed<T>(
   getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
   debugOptions?: DebuggerOptions,
   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
index baa75d61644..ea10f6aee3e 100644
--- a/packages/reactivity/src/constants.ts
+++ b/packages/reactivity/src/constants.ts
@@ -20,12 +20,5 @@ export enum ReactiveFlags {
   IS_READONLY = '__v_isReadonly',
   IS_SHALLOW = '__v_isShallow',
   RAW = '__v_raw',
-}
-
-export enum DirtyLevels {
-  NotDirty = 0,
-  QueryingDirty = 1,
-  MaybeDirty_ComputedSideEffect = 2,
-  MaybeDirty = 3,
-  Dirty = 4,
+  IS_REF = '__v_isRef',
 }
diff --git a/packages/reactivity/src/deferredComputed.ts b/packages/reactivity/src/deferredComputed.ts
deleted file mode 100644
index 1dbba1f3f03..00000000000
--- a/packages/reactivity/src/deferredComputed.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { computed } from './computed'
-
-/**
- * @deprecated use `computed` instead. See #5912
- */
-export const deferredComputed = computed
diff --git a/packages/reactivity/src/dep.ts b/packages/reactivity/src/dep.ts
index c8e8a130dc9..8ad8a389baf 100644
--- a/packages/reactivity/src/dep.ts
+++ b/packages/reactivity/src/dep.ts
@@ -1,17 +1,397 @@
-import type { ReactiveEffect } from './effect'
+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'
 
-export type Dep = Map<ReactiveEffect, number> & {
-  cleanup: () => void
-  computed?: ComputedRefImpl<any>
+/**
+ * Incremented every time a reactive change happens
+ * This is used to give computed a fast path to avoid re-compute when nothing
+ * has changed.
+ */
+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 {
+  /**
+   * - 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
+   */
+  version: number
+
+  /**
+   * Pointers for doubly-linked lists
+   */
+  nextDep?: Link
+  prevDep?: Link
+  nextSub?: Link
+  prevSub?: Link
+  prevActiveLink?: Link
+
+  constructor(
+    public sub: Subscriber,
+    public dep: Dep,
+  ) {
+    this.version = dep.version
+    this.nextDep =
+      this.prevDep =
+      this.nextSub =
+      this.prevSub =
+      this.prevActiveLink =
+        undefined
+  }
+}
+
+/**
+ * @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
+
+  /**
+   * @internal
+   */
+  readonly __v_skip = true
+  // TODO isolatedDeclarations ReactiveFlags.SKIP
+
+  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 {
+        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
+        }
+      }
+    }
+
+    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 || depsMap.has(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 const createDep = (
-  cleanup: () => void,
-  computed?: ComputedRefImpl<any>,
-): Dep => {
-  const dep = new Map() as Dep
-  dep.cleanup = cleanup
-  dep.computed = computed
-  return dep
+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 ca90544c0de..84cf184c154 100644
--- a/packages/reactivity/src/effect.ts
+++ b/packages/reactivity/src/effect.ts
@@ -1,17 +1,14 @@
-import { NOOP, extend } from '@vue/shared'
+import { extend, hasChanged } from '@vue/shared'
 import type { ComputedRefImpl } from './computed'
-import {
-  DirtyLevels,
-  type TrackOpTypes,
-  type TriggerOpTypes,
-} from './constants'
-import type { Dep } from './dep'
-import { type EffectScope, recordEffectScope } from './effectScope'
+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 = {
@@ -23,156 +20,454 @@ export type DebuggerEventExtraInfo = {
   oldTarget?: Map<any, any> | Set<any>
 }
 
-export let activeEffect: ReactiveEffect | undefined
+export interface DebuggerOptions {
+  onTrack?: (event: DebuggerEvent) => void
+  onTrigger?: (event: DebuggerEvent) => void
+}
 
-export class ReactiveEffect<T = any> {
-  active = true
-  deps: Dep[] = []
+export interface ReactiveEffectOptions extends DebuggerOptions {
+  scheduler?: EffectScheduler
+  allowRecurse?: boolean
+  onStop?: () => void
+}
 
+export interface ReactiveEffectRunner<T = any> {
+  (): T
+  effect: ReactiveEffect
+}
+
+export let activeSub: Subscriber | undefined
+
+export enum EffectFlags {
   /**
-   * Can be attached after creation
+   * ReactiveEffect only
+   */
+  ACTIVE = 1 << 0,
+  RUNNING = 1 << 1,
+  TRACKING = 1 << 2,
+  NOTIFIED = 1 << 3,
+  DIRTY = 1 << 4,
+  ALLOW_RECURSE = 1 << 5,
+  PAUSED = 1 << 6,
+  EVALUATED = 1 << 7,
+}
+
+/**
+ * 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
    */
-  computed?: ComputedRefImpl<T>
+  deps?: Link
   /**
+   * Tail of the same list
    * @internal
    */
-  allowRecurse?: boolean
+  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
+}
 
-  onStop?: () => void
-  // dev only
-  onTrack?: (event: DebuggerEvent) => void
-  // dev only
-  onTrigger?: (event: DebuggerEvent) => void
+const pausedQueueEffects = new WeakSet<ReactiveEffect>()
 
+export class ReactiveEffect<T = any>
+  implements Subscriber, ReactiveEffectOptions
+{
   /**
    * @internal
    */
-  _dirtyLevel = DirtyLevels.Dirty
+  deps?: Link = undefined
   /**
    * @internal
    */
-  _trackId = 0
+  depsTail?: Link = undefined
   /**
    * @internal
    */
-  _runnings = 0
+  flags: EffectFlags = EffectFlags.ACTIVE | EffectFlags.TRACKING
   /**
    * @internal
    */
-  _shouldSchedule = false
+  next?: Subscriber = undefined
   /**
    * @internal
    */
-  _depsLength = 0
+  cleanup?: () => void = undefined
 
-  constructor(
-    public fn: () => T,
-    public trigger: () => void,
-    public scheduler?: EffectScheduler,
-    scope?: EffectScope,
-  ) {
-    recordEffectScope(this, scope)
+  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)
+    }
   }
 
-  public get dirty() {
-    if (
-      this._dirtyLevel === DirtyLevels.MaybeDirty_ComputedSideEffect ||
-      this._dirtyLevel === DirtyLevels.MaybeDirty
-    ) {
-      this._dirtyLevel = DirtyLevels.QueryingDirty
-      pauseTracking()
-      for (let i = 0; i < this._depsLength; i++) {
-        const dep = this.deps[i]
-        if (dep.computed) {
-          triggerComputed(dep.computed)
-          if (this._dirtyLevel >= DirtyLevels.Dirty) {
-            break
-          }
-        }
-      }
-      if (this._dirtyLevel === DirtyLevels.QueryingDirty) {
-        this._dirtyLevel = DirtyLevels.NotDirty
+  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()
       }
-      resetTracking()
     }
-    return this._dirtyLevel >= DirtyLevels.Dirty
   }
 
-  public set dirty(v) {
-    this._dirtyLevel = v ? DirtyLevels.Dirty : DirtyLevels.NotDirty
+  /**
+   * @internal
+   */
+  notify(): void {
+    if (
+      this.flags & EffectFlags.RUNNING &&
+      !(this.flags & EffectFlags.ALLOW_RECURSE)
+    ) {
+      return
+    }
+    if (!(this.flags & EffectFlags.NOTIFIED)) {
+      batch(this)
+    }
   }
 
-  run() {
-    this._dirtyLevel = DirtyLevels.NotDirty
-    if (!this.active) {
+  run(): T {
+    // TODO cleanupEffect
+
+    if (!(this.flags & EffectFlags.ACTIVE)) {
+      // stopped during cleanup
       return this.fn()
     }
-    let lastShouldTrack = shouldTrack
-    let lastEffect = activeEffect
+
+    this.flags |= EffectFlags.RUNNING
+    cleanupEffect(this)
+    prepareDeps(this)
+    const prevEffect = activeSub
+    const prevShouldTrack = shouldTrack
+    activeSub = this
+    shouldTrack = true
+
     try {
-      shouldTrack = true
-      activeEffect = this
-      this._runnings++
-      preCleanupEffect(this)
       return this.fn()
     } finally {
-      postCleanupEffect(this)
-      this._runnings--
-      activeEffect = lastEffect
-      shouldTrack = lastShouldTrack
+      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() {
-    if (this.active) {
-      preCleanupEffect(this)
-      postCleanupEffect(this)
-      this.onStop?.()
-      this.active = false
+  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)
+  }
 }
 
-function triggerComputed(computed: ComputedRefImpl<any>) {
-  return computed.value
+/**
+ * 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
 }
 
-function preCleanupEffect(effect: ReactiveEffect) {
-  effect._trackId++
-  effect._depsLength = 0
+/**
+ * @internal
+ */
+export function startBatch(): void {
+  batchDepth++
 }
 
-function postCleanupEffect(effect: ReactiveEffect) {
-  if (effect.deps.length > effect._depsLength) {
-    for (let i = effect._depsLength; i < effect.deps.length; i++) {
-      cleanupDepEffect(effect.deps[i], effect)
+/**
+ * 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
     }
-    effect.deps.length = effect._depsLength
   }
+
+  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 cleanupDepEffect(dep: Dep, effect: ReactiveEffect) {
-  const trackId = dep.get(effect)
-  if (trackId !== undefined && effect._trackId !== trackId) {
-    dep.delete(effect)
-    if (dep.size === 0) {
-      dep.cleanup()
+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
 }
 
-export interface DebuggerOptions {
-  onTrack?: (event: DebuggerEvent) => void
-  onTrigger?: (event: DebuggerEvent) => void
+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
 }
 
-export interface ReactiveEffectOptions extends DebuggerOptions {
-  lazy?: boolean
-  scheduler?: EffectScheduler
-  scope?: EffectScope
-  allowRecurse?: boolean
-  onStop?: () => void
+/**
+ * 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
+
+  // 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.
+  // #12337 if computed has no deps (does not rely on any reactive data) and evaluated,
+  // there is no need to re-evaluate.
+  if (
+    !computed.isSSR &&
+    computed.flags & EffectFlags.EVALUATED &&
+    ((!computed.deps && !(computed as any)._dirty) || !isDirty(computed))
+  ) {
+    return
+  }
+  computed.flags |= EffectFlags.RUNNING
+
+  const dep = computed.dep
+  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.flags |= EffectFlags.EVALUATED
+      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 (__DEV__ && dep.subsHead === link) {
+    // was previous head, point new head to next
+    dep.subsHead = nextSub
+  }
+
+  if (dep.subs === link) {
+    // was previous tail, point new tail to prev
+    dep.subs = prevSub
+
+    if (!prevSub && 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> {
@@ -180,38 +475,26 @@ export interface ReactiveEffectRunner<T = any> {
   effect: ReactiveEffect
 }
 
-/**
- * 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.
- */
 export function effect<T = any>(
   fn: () => T,
   options?: ReactiveEffectOptions,
-): ReactiveEffectRunner {
+): ReactiveEffectRunner<T> {
   if ((fn as ReactiveEffectRunner).effect instanceof ReactiveEffect) {
     fn = (fn as ReactiveEffectRunner).effect.fn
   }
 
-  const _effect = new ReactiveEffect(fn, NOOP, () => {
-    if (_effect.dirty) {
-      _effect.run()
-    }
-  })
+  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
 }
 
@@ -220,19 +503,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
-export let pauseScheduleStack = 0
-
 const trackStack: boolean[] = []
 
 /**
  * Temporarily pauses tracking.
  */
-export function pauseTracking() {
+export function pauseTracking(): void {
   trackStack.push(shouldTrack)
   shouldTrack = false
 }
@@ -240,7 +524,7 @@ export function pauseTracking() {
 /**
  * Re-enables effect tracking (if it was paused).
  */
-export function enableTracking() {
+export function enableTracking(): void {
   trackStack.push(shouldTrack)
   shouldTrack = true
 }
@@ -248,80 +532,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
 }
 
-export function pauseScheduling() {
-  pauseScheduleStack++
-}
-
-export function resetScheduling() {
-  pauseScheduleStack--
-  while (!pauseScheduleStack && queueEffectSchedulers.length) {
-    queueEffectSchedulers.shift()!()
-  }
-}
-
-export function trackEffect(
-  effect: ReactiveEffect,
-  dep: Dep,
-  debuggerEventExtraInfo?: DebuggerEventExtraInfo,
-) {
-  if (dep.get(effect) !== effect._trackId) {
-    dep.set(effect, effect._trackId)
-    const oldDep = effect.deps[effect._depsLength]
-    if (oldDep !== dep) {
-      if (oldDep) {
-        cleanupDepEffect(oldDep, effect)
-      }
-      effect.deps[effect._depsLength++] = dep
-    } else {
-      effect._depsLength++
-    }
-    if (__DEV__) {
-      effect.onTrack?.(extend({ effect }, debuggerEventExtraInfo!))
-    }
+/**
+ * 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.
+ *
+ * Throws a warning if there is no current active effect. The warning can be
+ * suppressed by passing `true` to the second argument.
+ *
+ * @param fn - the cleanup function to be registered
+ * @param failSilently - if `true`, will not throw warning when called without
+ * an active effect.
+ */
+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.`,
+    )
   }
 }
 
-const queueEffectSchedulers: EffectScheduler[] = []
-
-export function triggerEffects(
-  dep: Dep,
-  dirtyLevel: DirtyLevels,
-  debuggerEventExtraInfo?: DebuggerEventExtraInfo,
-) {
-  pauseScheduling()
-  for (const effect of dep.keys()) {
-    // dep.get(effect) is very expensive, we need to calculate it lazily and reuse the result
-    let tracking: boolean | undefined
-    if (
-      effect._dirtyLevel < dirtyLevel &&
-      (tracking ??= dep.get(effect) === effect._trackId)
-    ) {
-      effect._shouldSchedule ||= effect._dirtyLevel === DirtyLevels.NotDirty
-      effect._dirtyLevel = dirtyLevel
-    }
-    if (
-      effect._shouldSchedule &&
-      (tracking ??= dep.get(effect) === effect._trackId)
-    ) {
-      if (__DEV__) {
-        effect.onTrigger?.(extend({ effect }, debuggerEventExtraInfo))
-      }
-      effect.trigger()
-      if (
-        (!effect._runnings || effect.allowRecurse) &&
-        effect._dirtyLevel !== DirtyLevels.MaybeDirty_ComputedSideEffect
-      ) {
-        effect._shouldSchedule = false
-        if (effect.scheduler) {
-          queueEffectSchedulers.push(effect.scheduler)
-        }
-      }
+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
     }
   }
-  resetScheduling()
 }
diff --git a/packages/reactivity/src/effectScope.ts b/packages/reactivity/src/effectScope.ts
index 6a3eaec9fd5..92ad92c1249 100644
--- a/packages/reactivity/src/effectScope.ts
+++ b/packages/reactivity/src/effectScope.ts
@@ -1,13 +1,17 @@
 import type { ReactiveEffect } from './effect'
 import { warn } from './warning'
 
-let activeEffectScope: EffectScope | undefined
+export let activeEffectScope: EffectScope | undefined
 
 export class EffectScope {
   /**
    * @internal
    */
   private _active = true
+  /**
+   * @internal track `on` calls, allow `on` call multiple times
+   */
+  private _on = 0
   /**
    * @internal
    */
@@ -17,6 +21,8 @@ export class EffectScope {
    */
   cleanups: (() => void)[] = []
 
+  private _isPaused = false
+
   /**
    * only assigned by undetached scope
    * @internal
@@ -44,10 +50,45 @@ export class EffectScope {
     }
   }
 
-  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
@@ -62,36 +103,50 @@ export class EffectScope {
     }
   }
 
+  prevScope: EffectScope | undefined
   /**
    * This should only be called on non-detached scopes
    * @internal
    */
-  on() {
-    activeEffectScope = this
+  on(): void {
+    if (++this._on === 1) {
+      this.prevScope = activeEffectScope
+      activeEffectScope = this
+    }
   }
 
   /**
    * This should only be called on non-detached scopes
    * @internal
    */
-  off() {
-    activeEffectScope = this.parent
+  off(): void {
+    if (this._on > 0 && --this._on === 0) {
+      activeEffectScope = this.prevScope
+      this.prevScope = undefined
+    }
   }
 
-  stop(fromParent?: boolean) {
+  stop(fromParent?: boolean): void {
     if (this._active) {
+      this._active = false
       let i, l
       for (i = 0, l = this.effects.length; i < l; i++) {
         this.effects[i].stop()
       }
+      this.effects.length = 0
+
       for (i = 0, l = this.cleanups.length; i < l; i++) {
         this.cleanups[i]()
       }
+      this.cleanups.length = 0
+
       if (this.scopes) {
         for (i = 0, l = this.scopes.length; i < l; i++) {
           this.scopes[i].stop(true)
         }
+        this.scopes.length = 0
       }
+
       // nested scope, dereference from parent to avoid memory leaks
       if (!this.detached && this.parent && !fromParent) {
         // optimized O(1) removal
@@ -102,7 +157,6 @@ export class EffectScope {
         }
       }
       this.parent = undefined
-      this._active = false
     }
   }
 }
@@ -116,25 +170,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,10 +190,10 @@ 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.`,
diff --git a/packages/reactivity/src/index.ts b/packages/reactivity/src/index.ts
index 1c80fbc752b..f0445e87da0 100644
--- a/packages/reactivity/src/index.ts
+++ b/packages/reactivity/src/index.ts
@@ -31,10 +31,14 @@ export {
   shallowReadonly,
   markRaw,
   toRaw,
+  toReactive,
+  toReadonly,
   type Raw,
   type DeepReadonly,
   type ShallowReactive,
   type UnwrapNestedRefs,
+  type Reactive,
+  type ReactiveMarker,
 } from './reactive'
 export {
   computed,
@@ -43,17 +47,17 @@ export {
   type WritableComputedOptions,
   type ComputedGetter,
   type ComputedSetter,
+  type ComputedRefImpl,
 } from './computed'
-export { deferredComputed } from './deferredComputed'
 export {
   effect,
   stop,
   enableTracking,
   pauseTracking,
   resetTracking,
-  pauseScheduling,
-  resetScheduling,
+  onEffectCleanup,
   ReactiveEffect,
+  EffectFlags,
   type ReactiveEffectRunner,
   type ReactiveEffectOptions,
   type EffectScheduler,
@@ -61,11 +65,33 @@ export {
   type DebuggerEvent,
   type DebuggerEventExtraInfo,
 } from './effect'
-export { trigger, track, ITERATE_KEY } from './reactiveEffect'
+export {
+  trigger,
+  track,
+  ITERATE_KEY,
+  ARRAY_ITERATE_KEY,
+  MAP_KEY_ITERATE_KEY,
+} from './dep'
 export {
   effectScope,
   EffectScope,
   getCurrentScope,
   onScopeDispose,
 } from './effectScope'
+export { reactiveReadArray, shallowReadArray } from './arrayInstrumentations'
 export { TrackOpTypes, TriggerOpTypes, ReactiveFlags } from './constants'
+export {
+  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/reactive.ts b/packages/reactivity/src/reactive.ts
index 8b94dd9a47f..802f7fc68e7 100644
--- a/packages/reactivity/src/reactive.ts
+++ b/packages/reactivity/src/reactive.ts
@@ -1,4 +1,4 @@
-import { def, isObject, toRawType } from '@vue/shared'
+import { def, hasOwn, isObject, toRawType } from '@vue/shared'
 import {
   mutableHandlers,
   readonlyHandlers,
@@ -13,6 +13,7 @@ import {
 } from './collectionHandlers'
 import type { RawSymbol, Ref, UnwrapRefSimple } from './ref'
 import { ReactiveFlags } from './constants'
+import { warn } from './warning'
 
 export interface Target {
   [ReactiveFlags.SKIP]?: boolean
@@ -22,10 +23,16 @@ 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
+>()
 
 enum TargetType {
   INVALID = 0,
@@ -57,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.
  *
@@ -72,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)) {
@@ -92,9 +108,9 @@ export declare const ShallowReactiveMarker: unique symbol
 export type ShallowReactive<T> = T & { [ShallowReactiveMarker]?: true }
 
 /**
- * Shallow version of {@link reactive()}.
+ * Shallow version of {@link reactive}.
  *
- * Unlike {@link reactive()}, there is no deep conversion: only root-level
+ * Unlike {@link reactive}, there is no deep conversion: only root-level
  * properties are reactive for a shallow reactive object. Property values are
  * stored and exposed as-is - this also means properties with ref values will
  * not be automatically unwrapped.
@@ -134,7 +150,7 @@ export function shallowReactive<T extends object>(
 }
 
 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>
@@ -151,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]> }
@@ -162,7 +178,7 @@ export type DeepReadonly<T> = T extends Builtin
  * the original.
  *
  * A readonly proxy is deep: any nested property accessed will be readonly as
- * well. It also has the same ref-unwrapping behavior as {@link reactive()},
+ * well. It also has the same ref-unwrapping behavior as {@link reactive},
  * except the unwrapped values will also be made readonly.
  *
  * @example
@@ -199,9 +215,9 @@ export function readonly<T extends object>(
 }
 
 /**
- * Shallow version of {@link readonly()}.
+ * Shallow version of {@link readonly}.
  *
- * Unlike {@link readonly()}, there is no deep conversion: only root-level
+ * Unlike {@link readonly}, there is no deep conversion: only root-level
  * properties are made readonly. Property values are stored and exposed as-is -
  * this also means properties with ref values will not be automatically
  * unwrapped.
@@ -247,7 +263,11 @@ function createReactiveObject(
 ) {
   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
   }
@@ -259,16 +279,16 @@ function createReactiveObject(
   ) {
     return target
   }
-  // target already has corresponding Proxy
-  const existingProxy = proxyMap.get(target)
-  if (existingProxy) {
-    return existingProxy
-  }
   // only specific value types can be observed.
   const targetType = getTargetType(target)
   if (targetType === TargetType.INVALID) {
     return target
   }
+  // target already has corresponding Proxy
+  const existingProxy = proxyMap.get(target)
+  if (existingProxy) {
+    return existingProxy
+  }
   const proxy = new Proxy(
     target,
     targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers,
@@ -278,8 +298,8 @@ function createReactiveObject(
 }
 
 /**
- * Checks if an object is a proxy created by {@link reactive()} or
- * {@link shallowReactive()} (or {@link ref()} in some cases).
+ * Checks if an object is a proxy created by {@link reactive} or
+ * {@link shallowReactive} (or {@link ref} in some cases).
  *
  * @example
  * ```js
@@ -307,7 +327,7 @@ export function isReactive(value: unknown): boolean {
  * readonly object can change, but they can't be assigned directly via the
  * passed object.
  *
- * The proxies created by {@link readonly()} and {@link shallowReadonly()} are
+ * The proxies created by {@link readonly} and {@link shallowReadonly} are
  * both considered readonly, as is a computed ref without a set function.
  *
  * @param value - The value to check.
@@ -323,21 +343,21 @@ export function isShallow(value: unknown): boolean {
 
 /**
  * Checks if an object is a proxy created by {@link reactive},
- * {@link readonly}, {@link shallowReactive} or {@link shallowReadonly()}.
+ * {@link readonly}, {@link shallowReactive} or {@link shallowReadonly}.
  *
  * @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
 }
 
 /**
  * Returns the raw, original object of a Vue-created proxy.
  *
  * `toRaw()` can return the original object from proxies created by
- * {@link reactive()}, {@link readonly()}, {@link shallowReactive()} or
- * {@link shallowReadonly()}.
+ * {@link reactive}, {@link readonly}, {@link shallowReactive} or
+ * {@link shallowReadonly}.
  *
  * This is an escape hatch that can be used to temporarily read without
  * incurring proxy access / tracking overhead or write without triggering
@@ -377,7 +397,7 @@ export type Raw<T> = T & { [RawSymbol]?: true }
  * ```
  *
  * **Warning:** `markRaw()` together with the shallow APIs such as
- * {@link shallowReactive()} allow you to selectively opt-out of the default
+ * {@link shallowReactive} allow you to selectively opt-out of the default
  * deep reactive/readonly conversion and embed raw, non-proxied objects in your
  * state graph.
  *
@@ -385,7 +405,7 @@ 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> {
-  if (Object.isExtensible(value)) {
+  if (!hasOwn(value, ReactiveFlags.SKIP) && Object.isExtensible(value)) {
     def(value, ReactiveFlags.SKIP, true)
   }
   return value
@@ -408,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/reactiveEffect.ts b/packages/reactivity/src/reactiveEffect.ts
deleted file mode 100644
index 6bf0e75115a..00000000000
--- a/packages/reactivity/src/reactiveEffect.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { isArray, isIntegerKey, isMap, isSymbol } from '@vue/shared'
-import { DirtyLevels, type TrackOpTypes, TriggerOpTypes } from './constants'
-import { type Dep, createDep } from './dep'
-import {
-  activeEffect,
-  pauseScheduling,
-  resetScheduling,
-  shouldTrack,
-  trackEffect,
-  triggerEffects,
-} from './effect'
-
-// 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>
-const targetMap = new WeakMap<object, KeyToDepMap>()
-
-export const ITERATE_KEY = Symbol(__DEV__ ? 'iterate' : '')
-export const MAP_KEY_ITERATE_KEY = Symbol(__DEV__ ? 'Map key 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) {
-  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(() => depsMap!.delete(key))))
-    }
-    trackEffect(
-      activeEffect,
-      dep,
-      __DEV__
-        ? {
-            target,
-            type,
-            key,
-          }
-        : void 0,
-    )
-  }
-}
-
-/**
- * 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
-    }
-  }
-
-  pauseScheduling()
-  for (const dep of deps) {
-    if (dep) {
-      triggerEffects(
-        dep,
-        DirtyLevels.Dirty,
-        __DEV__
-          ? {
-              target,
-              type,
-              key,
-              newValue,
-              oldValue,
-              oldTarget,
-            }
-          : void 0,
-      )
-    }
-  }
-  resetScheduling()
-}
-
-export function getDepFromReactive(object: any, key: string | number | symbol) {
-  return targetMap.get(object)?.get(key)
-}
diff --git a/packages/reactivity/src/ref.ts b/packages/reactivity/src/ref.ts
index 1b9d60ef06b..59b713dd862 100644
--- a/packages/reactivity/src/ref.ts
+++ b/packages/reactivity/src/ref.ts
@@ -1,11 +1,3 @@
-import type { ComputedRef } from './computed'
-import {
-  activeEffect,
-  shouldTrack,
-  trackEffect,
-  triggerEffects,
-} from './effect'
-import { DirtyLevels, TrackOpTypes, TriggerOpTypes } from './constants'
 import {
   type IfAny,
   hasChanged,
@@ -13,7 +5,10 @@ import {
   isFunction,
   isObject,
 } from '@vue/shared'
+import { Dep, getDepFromReactive } from './dep'
 import {
+  type Builtin,
+  type ShallowReactiveMarker,
   isProxy,
   isReactive,
   isReadonly,
@@ -21,16 +16,16 @@ import {
   toRaw,
   toReactive,
 } from './reactive'
-import type { ShallowReactiveMarker } from './reactive'
-import { type Dep, createDep } from './dep'
-import { ComputedRefImpl } from './computed'
-import { getDepFromReactive } from './reactiveEffect'
+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
@@ -39,54 +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)
-    trackEffect(
-      activeEffect,
-      (ref.dep ??= createDep(
-        () => (ref.dep = undefined),
-        ref instanceof ComputedRefImpl ? ref : undefined,
-      )),
-      __DEV__
-        ? {
-            target: ref,
-            type: TrackOpTypes.GET,
-            key: 'value',
-          }
-        : void 0,
-    )
-  }
-}
-
-export function triggerRefValue(
-  ref: RefBase<any>,
-  dirtyLevel: DirtyLevels = DirtyLevels.Dirty,
-  newVal?: any,
-) {
-  ref = toRaw(ref)
-  const dep = ref.dep
-  if (dep) {
-    triggerEffects(
-      dep,
-      dirtyLevel,
-      __DEV__
-        ? {
-            target: ref,
-            type: TriggerOpTypes.SET,
-            key: 'value',
-            newValue: newVal,
-          }
-        : void 0,
-    )
-  }
-}
-
 /**
  * Checks if a value is a ref object.
  *
@@ -95,7 +42,7 @@ export function triggerRefValue(
  */
 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
 }
 
 /**
@@ -105,7 +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>(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)
@@ -113,10 +62,12 @@ 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()}.
+ * Shallow version of {@link ref}.
  *
  * @example
  * ```js
@@ -151,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, DirtyLevels.Dirty, 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()
+      }
     }
   }
 }
@@ -208,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, DirtyLevels.Dirty, __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
@@ -237,7 +229,7 @@ export function unref<T>(ref: MaybeRef<T> | ComputedRef<T>): T {
 
 /**
  * Normalizes values / refs / getters to values.
- * This is similar to {@link unref()}, except that it also normalizes getters.
+ * This is similar to {@link unref}, except that it also normalizes getters.
  * If the argument is a getter, it will be invoked and its return value will
  * be returned.
  *
@@ -251,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)) {
@@ -269,11 +264,9 @@ const shallowUnwrapHandlers: ProxyHandler<any> = {
 }
 
 /**
- * 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.
@@ -295,24 +288,24 @@ export type CustomRefFactory<T> = (
 }
 
 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) {
@@ -338,14 +331,14 @@ export type ToRefs<T = any> = {
 /**
  * Converts a reactive object to a plain object where each property of the
  * resulting object is a ref pointing to the corresponding property of the
- * original object. Each individual ref is created using {@link toRef()}.
+ * original object. Each individual ref is created using {@link toRef}.
  *
  * @param object - Reactive object to be made into an object of linked refs.
  * @see {@link https://vuejs.org/api/reactivity-utilities.html#torefs}
  */
 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) {
@@ -355,7 +348,8 @@ 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,
@@ -365,7 +359,7 @@ class ObjectRefImpl<T extends object, K extends keyof T> {
 
   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) {
@@ -378,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())
   }
 }
 
@@ -474,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
@@ -495,21 +486,20 @@ type BaseTypes = string | number | boolean
 export interface RefUnwrapBailTypes {}
 
 export type ShallowUnwrapRef<T> = {
-  [K in keyof T]: DistrubuteRef<T[K]>
+  [K in keyof T]: DistributeRef<T[K]>
 }
 
-type DistrubuteRef<T> = T extends Ref<infer V> ? V : T
+type DistributeRef<T> = T extends Ref<infer V, unknown> ? V : T
 
 export type UnwrapRef<T> =
-  T extends ShallowRef<infer V>
+  T extends ShallowRef<infer V, unknown>
     ? V
-    : T extends Ref<infer 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 }
diff --git a/packages/reactivity/src/warning.ts b/packages/reactivity/src/warning.ts
index c6cbdfe8c45..6a39f0752ad 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 00000000000..648e6481b18
--- /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 && scope.active) {
+      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,
+          ]
+          oldValue = newValue
+          call
+            ? call(cb!, WatchErrorCodes.WATCH_CALLBACK, args)
+            : // @ts-expect-error
+              cb!(...args)
+        } 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 3a5b2981203..452ef520c14 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 74e24dce65f..5dc78cdb431 100644
--- a/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts
+++ b/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts
@@ -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 05e51e43bb6..b578fa55c9c 100644
--- a/packages/runtime-core/__tests__/apiCreateApp.spec.ts
+++ b/packages/runtime-core/__tests__/apiCreateApp.spec.ts
@@ -116,12 +116,25 @@ 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(() => {
@@ -143,10 +156,10 @@ describe('api: createApp', () => {
       },
       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)])
         }
       },
@@ -182,10 +195,10 @@ describe('api: createApp', () => {
       },
       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]])
         }
       },
@@ -344,13 +357,43 @@ describe('api: createApp', () => {
     ).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`)
     })
 
@@ -450,11 +493,6 @@ describe('api: createApp', () => {
       }
 
       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`,
@@ -513,6 +551,23 @@ 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() {
diff --git a/packages/runtime-core/__tests__/apiInject.spec.ts b/packages/runtime-core/__tests__/apiInject.spec.ts
index 485e688b1ae..e5c9267e5bb 100644
--- a/packages/runtime-core/__tests__/apiInject.spec.ts
+++ b/packages/runtime-core/__tests__/apiInject.spec.ts
@@ -13,7 +13,6 @@ import {
 } from '../src/index'
 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 = {
diff --git a/packages/runtime-core/__tests__/apiLifecycle.spec.ts b/packages/runtime-core/__tests__/apiLifecycle.spec.ts
index 5da57ab32bf..45ea3ac39b8 100644
--- a/packages/runtime-core/__tests__/apiLifecycle.spec.ts
+++ b/packages/runtime-core/__tests__/apiLifecycle.spec.ts
@@ -1,8 +1,10 @@
 import {
+  KeepAlive,
   TrackOpTypes,
   h,
   nextTick,
   nodeOps,
+  onActivated,
   onBeforeMount,
   onBeforeUnmount,
   onBeforeUpdate,
@@ -22,8 +24,6 @@ import {
   TriggerOpTypes,
 } from '@vue/reactivity'
 
-// reference: https://vue-composition-api-rfc.netlify.com/api.html#lifecycle-hooks
-
 describe('api: lifecycle hooks', () => {
   it('onBeforeMount', () => {
     const root = nodeOps.createElement('div')
@@ -40,6 +40,8 @@ describe('api: lifecycle hooks', () => {
     }
     render(h(Comp), root)
     expect(fn).toHaveBeenCalledTimes(1)
+    // #10863
+    expect(fn).toHaveBeenCalledWith()
   })
 
   it('onMounted', () => {
@@ -405,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 521b359e22d..1d4e805efce 100644
--- a/packages/runtime-core/__tests__/apiOptions.spec.ts
+++ b/packages/runtime-core/__tests__/apiOptions.spec.ts
@@ -790,10 +790,8 @@ describe('api: options', () => {
       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() {},
     })
   })
diff --git a/packages/runtime-core/__tests__/apiSetupContext.spec.ts b/packages/runtime-core/__tests__/apiSetupContext.spec.ts
index c4a32a067c0..d3aab9ab2c5 100644
--- a/packages/runtime-core/__tests__/apiSetupContext.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupContext.spec.ts
@@ -12,8 +12,6 @@ import {
   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({
diff --git a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
index 04e9c1c86db..30c8951f405 100644
--- a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
@@ -1,6 +1,5 @@
 import {
   type ComponentInternalInstance,
-  type ComputedRef,
   type SetupContext,
   Suspense,
   computed,
@@ -26,6 +25,8 @@ import {
   withAsyncContext,
   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', () => {
@@ -426,7 +427,8 @@ describe('SFC <script setup> helpers', () => {
         resolve = r
       })
 
-      let c: ComputedRef
+      let c: ComputedRefImpl
+      let e: ReactiveEffectRunner
 
       const Comp = defineComponent({
         async setup() {
@@ -435,10 +437,11 @@ 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
         },
       })
 
@@ -447,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.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts
index fe299edbb63..ff06fbea774 100644
--- a/packages/runtime-core/__tests__/apiWatch.spec.ts
+++ b/packages/runtime-core/__tests__/apiWatch.spec.ts
@@ -5,6 +5,8 @@ import {
   defineComponent,
   getCurrentInstance,
   nextTick,
+  onErrorCaptured,
+  onWatcherCleanup,
   reactive,
   ref,
   watch,
@@ -29,13 +31,13 @@ import {
   TrackOpTypes,
   TriggerOpTypes,
   effectScope,
+  onScopeDispose,
   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 () => {
@@ -96,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)
@@ -186,6 +212,24 @@ describe('api: watch', () => {
     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 {
@@ -330,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
@@ -393,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)
@@ -890,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()
@@ -1185,7 +1341,7 @@ describe('api: watch', () => {
     await nextTick()
     await nextTick()
 
-    expect(instance!.scope.effects[0].active).toBe(false)
+    expect(instance!.scope.effects.length).toBe(0)
   })
 
   test('this.$watch should pass `this.proxy` to watch source as the first argument ', () => {
@@ -1439,11 +1595,191 @@ describe('api: watch', () => {
 
     num.value++
     await nextTick()
-    // would not be calld when value>1
+    // would not be called when value>1
     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
@@ -1473,5 +1809,205 @@ describe('api: watch', () => {
     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 caught 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()
+  })
+
+  // #12631
+  test('this.$watch w/ onScopeDispose', () => {
+    const onCleanup = vi.fn()
+    const toggle = ref(true)
+
+    const Comp = defineComponent({
+      render() {},
+      created(this: any) {
+        this.$watch(
+          () => 1,
+          function () {},
+        )
+        onScopeDispose(onCleanup)
+      },
+    })
+
+    const App = defineComponent({
+      render() {
+        return toggle.value ? h(Comp) : null
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    createApp(App).mount(root)
+    expect(onCleanup).toBeCalledTimes(0)
   })
 })
diff --git a/packages/runtime-core/__tests__/componentEmits.spec.ts b/packages/runtime-core/__tests__/componentEmits.spec.ts
index 86307275bf8..dc82c04919f 100644
--- a/packages/runtime-core/__tests__/componentEmits.spec.ts
+++ b/packages/runtime-core/__tests__/componentEmits.spec.ts
@@ -155,12 +155,12 @@ 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()
   })
 
@@ -172,12 +172,12 @@ 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()
   })
 
@@ -197,6 +197,22 @@ describe('component: emit', () => {
     ).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: {
@@ -356,6 +372,83 @@ 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() {},
diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts
index 6fc5d4dd2d7..b8eb0e47208 100644
--- a/packages/runtime-core/__tests__/componentProps.spec.ts
+++ b/packages/runtime-core/__tests__/componentProps.spec.ts
@@ -11,6 +11,7 @@ import {
   getCurrentInstance,
   h,
   inject,
+  nextTick,
   nodeOps,
   provide,
   ref,
@@ -19,7 +20,7 @@ import {
   toRefs,
   watch,
 } from '@vue/runtime-test'
-import { render as domRender, nextTick } from 'vue'
+import { render as domRender } from 'vue'
 
 describe('component props', () => {
   test('stateful', () => {
@@ -332,6 +333,30 @@ describe('component props', () => {
     })
   })
 
+  //#12011
+  test('replace camelize with hyphenate to handle props key', () => {
+    const Comp = {
+      props: {
+        hasB4BProp: { type: Boolean, required: true },
+      },
+      setup() {
+        return () => null
+      },
+    }
+    render(
+      h('div', {}, [
+        h(Comp, {
+          'has-b-4-b-prop': true,
+        }),
+        h(Comp, {
+          'has-b4-b-prop': true,
+        }),
+      ]),
+      nodeOps.createElement('div'),
+    )
+    expect(`Missing required prop: "hasB4BProp"`).not.toHaveBeenWarned()
+  })
+
   test('warn props mutation', () => {
     let instance: ComponentInternalInstance
     let setupProps: any
@@ -537,6 +562,96 @@ describe('component 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: {
@@ -748,4 +863,39 @@ describe('component props', () => {
     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__/componentSlots.spec.ts b/packages/runtime-core/__tests__/componentSlots.spec.ts
index 09b37932147..765fce33e42 100644
--- a/packages/runtime-core/__tests__/componentSlots.spec.ts
+++ b/packages/runtime-core/__tests__/componentSlots.spec.ts
@@ -6,8 +6,10 @@ import {
   nodeOps,
   ref,
   render,
+  serializeInner,
+  useSlots,
 } from '@vue/runtime-test'
-import { normalizeVNode } from '../src/vnode'
+import { createBlock, normalizeVNode } from '../src/vnode'
 import { createSlots } from '../src/helpers/createSlots'
 
 describe('component: slots', () => {
@@ -25,8 +27,44 @@ 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: ensure compiler marker non-enumerable', () => {
+    const Comp = {
+      render() {
+        const slots = useSlots()
+        // Only user-defined slots should be enumerable
+        expect(Object.keys(slots)).toEqual(['foo'])
+
+        // Internal compiler markers must still exist but be non-enumerable
+        expect(slots).toHaveProperty('_')
+        expect(Object.getOwnPropertyDescriptor(slots, '_')!.enumerable).toBe(
+          false,
+        )
+        expect(slots).toHaveProperty('__')
+        expect(Object.getOwnPropertyDescriptor(slots, '__')!.enumerable).toBe(
+          false,
+        )
+        return h('div')
+      },
+    }
+    const slots = { foo: () => {}, _: 1, __: [1] }
+    render(createBlock(Comp, null, slots), nodeOps.createElement('div'))
   })
 
   test('initSlots: should normalize object slots (when value is null, string, array)', () => {
@@ -37,6 +75,10 @@ describe('component: slots', () => {
       footer: ['f1', 'f2'],
     })
 
+    expect(
+      '[Vue warn]: Non-function value encountered for slot "_inner". Prefer function slots for better performance.',
+    ).toHaveBeenWarned()
+
     expect(
       '[Vue warn]: Non-function value encountered for slot "header". Prefer function slots for better performance.',
     ).toHaveBeenWarned()
@@ -45,8 +87,8 @@ describe('component: slots', () => {
       '[Vue warn]: Non-function value encountered for slot "footer". Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
-    expect(slots).not.toHaveProperty('_inner')
     expect(slots).not.toHaveProperty('foo')
+    expect(slots._inner()).toMatchObject([normalizeVNode('_inner')])
     expect(slots.header()).toMatchObject([normalizeVNode('header')])
     expect(slots.footer()).toMatchObject([
       normalizeVNode('f1'),
@@ -200,7 +242,7 @@ describe('component: slots', () => {
     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()
@@ -242,6 +284,48 @@ describe('component: slots', () => {
     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) {
@@ -269,4 +353,116 @@ describe('component: slots', () => {
       'Slot "default" invoked outside of the render function',
     ).not.toHaveBeenWarned()
   })
+
+  test('basic warn', () => {
+    const Comp = {
+      setup(_: any, { slots }: any) {
+        slots.default && slots.default()
+        return () => null
+      },
+    }
+
+    const App = {
+      setup() {
+        return () => h(Comp, () => h('div'))
+      },
+    }
+
+    createApp(App).mount(nodeOps.createElement('div'))
+    expect(
+      'Slot "default" invoked outside of the render function',
+    ).toHaveBeenWarned()
+  })
+
+  test('basic warn when mounting another app in setup', () => {
+    const Comp = {
+      setup(_: any, { slots }: any) {
+        slots.default?.()
+        return () => null
+      },
+    }
+
+    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',
+    ).toHaveBeenWarned()
+  })
+
+  test('should not warn when render in setup', () => {
+    const container = {
+      setup(_: any, { slots }: any) {
+        return () => slots.default && slots.default()
+      },
+    }
+
+    const comp = h(container, null, () => h('div'))
+
+    const App = {
+      setup() {
+        render(h(comp), nodeOps.createElement('div'))
+        return () => null
+      },
+    }
+
+    createApp(App).mount(nodeOps.createElement('div'))
+    expect(
+      'Slot "default" invoked outside of the render function',
+    ).not.toHaveBeenWarned()
+  })
+
+  test('basic warn when render in setup', () => {
+    const container = {
+      setup(_: any, { slots }: any) {
+        slots.default && slots.default()
+        return () => null
+      },
+    }
+
+    const comp = h(container, null, () => h('div'))
+
+    const App = {
+      setup() {
+        render(h(comp), nodeOps.createElement('div'))
+        return () => null
+      },
+    }
+
+    createApp(App).mount(nodeOps.createElement('div'))
+    expect(
+      'Slot "default" invoked outside of the render function',
+    ).toHaveBeenWarned()
+  })
+
+  test('slot name starts with underscore', () => {
+    const Comp = {
+      setup(_: any, { slots }: any) {
+        return () => slots._foo()
+      },
+    }
+
+    const App = {
+      setup() {
+        return () => h(Comp, null, { _foo: () => 'foo' })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    createApp(App).mount(root)
+    expect(serializeInner(root)).toBe('foo')
+  })
 })
diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
index 7c389fe1ede..b40113fb5b8 100644
--- a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
+++ b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
@@ -1193,4 +1193,56 @@ describe('BaseTransition', () => {
       await runTestWithKeepAlive(testInOutBeforeFinish)
     })
   })
+
+  // #10719
+  test('should not error on KeepAlive w/ function children', () => {
+    expect(() => mount({}, () => () => h('div'), true)).not.toThrow()
+  })
+
+  // #12465
+  test('mode: "out-in" w/ KeepAlive + fallthrough attrs (prod mode)', async () => {
+    __DEV__ = false
+    async function testOutIn({ trueBranch, falseBranch }: ToggleOptions) {
+      const toggle = ref(true)
+      const { props, cbs } = mockProps({ mode: 'out-in' }, true)
+      const root = nodeOps.createElement('div')
+      const App = {
+        render() {
+          return h(
+            BaseTransition,
+            {
+              ...props,
+              class: 'test',
+            },
+            () =>
+              h(KeepAlive, null, toggle.value ? trueBranch() : falseBranch()),
+          )
+        },
+      }
+      render(h(App), root)
+
+      expect(serializeInner(root)).toBe(`<div class="test">0</div>`)
+
+      // trigger toggle
+      toggle.value = false
+      await nextTick()
+      expect(props.onBeforeLeave).toHaveBeenCalledTimes(1)
+      expect(serialize((props.onBeforeLeave as any).mock.calls[0][0])).toBe(
+        `<div class="test">0</div>`,
+      )
+      expect(props.onLeave).toHaveBeenCalledTimes(1)
+      expect(serialize((props.onLeave as any).mock.calls[0][0])).toBe(
+        `<div class="test">0</div>`,
+      )
+      expect(props.onAfterLeave).not.toHaveBeenCalled()
+      // enter should not have started
+      expect(props.onBeforeEnter).not.toHaveBeenCalled()
+      expect(props.onEnter).not.toHaveBeenCalled()
+      expect(props.onAfterEnter).not.toHaveBeenCalled()
+      cbs.doneLeave[`<div class="test">0</div>`]()
+      expect(serializeInner(root)).toBe(`<span class="test">0</span>`)
+    }
+    await runTestWithKeepAlive(testOutIn)
+    __DEV__ = true
+  })
 })
diff --git a/packages/runtime-core/__tests__/components/KeepAlive.spec.ts b/packages/runtime-core/__tests__/components/KeepAlive.spec.ts
index 6d3f6a9b8b6..1e4176b6fb8 100644
--- a/packages/runtime-core/__tests__/components/KeepAlive.spec.ts
+++ b/packages/runtime-core/__tests__/components/KeepAlive.spec.ts
@@ -32,6 +32,7 @@ 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
 
@@ -49,6 +50,18 @@ describe('KeepAlive', () => {
       deactivated: 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',
       data: () => ({ msg: 'two' }),
@@ -63,6 +76,7 @@ describe('KeepAlive', () => {
     }
     views = {
       one,
+      oneTest,
       two,
     }
   })
@@ -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'] })
     })
@@ -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)
@@ -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 928da872faf..563c91a179d 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -8,6 +8,7 @@ import {
   KeepAlive,
   Suspense,
   type SuspenseProps,
+  createCommentVNode,
   h,
   nextTick,
   nodeOps,
@@ -22,7 +23,7 @@ import {
   watch,
   watchEffect,
 } from '@vue/runtime-test'
-import { createApp, defineComponent } from 'vue'
+import { computed, createApp, defineComponent, inject, provide } from 'vue'
 import type { RawSlots } from 'packages/runtime-core/src/componentSlots'
 import { resetSuspenseId } from '../../src/components/Suspense'
 
@@ -54,6 +55,18 @@ describe('Suspense', () => {
     }
   }
 
+  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() {
@@ -1039,6 +1052,202 @@ describe('Suspense', () => {
     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[] = []
 
@@ -1813,7 +2022,7 @@ describe('Suspense', () => {
     viewRef.value = 0
     await nextTick()
 
-    expect(serializeInner(root)).toBe('<!---->')
+    expect(serializeInner(root)).toBe('<div>sync</div>')
 
     await Promise.all(deps)
     await nextTick()
@@ -1827,6 +2036,91 @@ describe('Suspense', () => {
     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')
@@ -1936,5 +2230,57 @@ describe('Suspense', () => {
         fallback: [h('div'), h('div')],
       })
     })
+
+    // #13559
+    test('renders multiple async components in Suspense with v-for and updates on items change', async () => {
+      const CompAsyncSetup = defineAsyncComponent({
+        props: ['item'],
+        render(ctx: any) {
+          return h('div', ctx.item.name)
+        },
+      })
+
+      const items = ref([
+        { id: 1, name: '111' },
+        { id: 2, name: '222' },
+        { id: 3, name: '333' },
+      ])
+
+      const Comp = {
+        setup() {
+          return () =>
+            h(Suspense, null, {
+              default: () =>
+                h(
+                  Fragment,
+                  null,
+                  items.value.map(item =>
+                    h(CompAsyncSetup, { item, key: item.id }),
+                  ),
+                ),
+            })
+        },
+      }
+
+      const root = nodeOps.createElement('div')
+      render(h(Comp), root)
+      await nextTick()
+      await Promise.all(deps)
+
+      expect(serializeInner(root)).toBe(
+        `<div>111</div><div>222</div><div>333</div>`,
+      )
+
+      items.value = [
+        { id: 4, name: '444' },
+        { id: 5, name: '555' },
+        { id: 6, name: '666' },
+      ]
+      await nextTick()
+      await Promise.all(deps)
+      expect(serializeInner(root)).toBe(
+        `<div>444</div><div>555</div><div>666</div>`,
+      )
+    })
   })
 })
diff --git a/packages/runtime-core/__tests__/components/Teleport.spec.ts b/packages/runtime-core/__tests__/components/Teleport.spec.ts
index 9c85cd8beb6..69a1c4cb25f 100644
--- a/packages/runtime-core/__tests__/components/Teleport.spec.ts
+++ b/packages/runtime-core/__tests__/components/Teleport.spec.ts
@@ -7,550 +7,922 @@ import {
   Text,
   createApp,
   defineComponent,
-  h,
   markRaw,
   nextTick,
   nodeOps,
+  onMounted,
+  h as originalH,
   ref,
   render,
+  serialize,
   serializeInner,
+  useModel,
   withDirectives,
 } from '@vue/runtime-test'
-import { Fragment, createVNode } from '../../src/vnode'
-import { compile, render as domRender } from 'vue'
+import {
+  Fragment,
+  createBlock,
+  createCommentVNode,
+  createTextVNode,
+  createVNode,
+  openBlock,
+} from '../../src/vnode'
+import { toDisplayString } from '@vue/shared'
+import { compile, createApp as createDOMApp, render as domRender } from 'vue'
+import type { HMRRuntime } from '../../src/hmr'
+
+declare var __VUE_HMR_RUNTIME__: HMRRuntime
+const { rerender, createRecord } = __VUE_HMR_RUNTIME__
 
 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>"`,
+      )
+    })
+
+    test('defer mode should work inside suspense', async () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      let p: Promise<any>
+
+      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
+            },
+          },
+        },
+      })
+
+      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>`,
+      )
     })
 
-    domRender(h(Comp), root)
+    test('update before mounted with defer', async () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const show = ref(false)
+      const foo = ref('foo')
+      const Header = {
+        props: { foo: String },
+        setup(props: any) {
+          return () => h('div', props.foo)
+        },
+      }
+      const Footer = {
+        setup() {
+          foo.value = 'bar'
+          return () => h('div', 'Footer')
+        },
+      }
+      createDOMApp({
+        render() {
+          return show.value
+            ? [
+                h(
+                  Teleport,
+                  { to: '#targetId', defer: true },
+                  h(Header, { foo: foo.value }),
+                ),
+                h(Footer),
+                h('div', { id: 'targetId' }),
+              ]
+            : [h('div')]
+        },
+      }).mount(root)
+
+      expect(root.innerHTML).toMatchInlineSnapshot(`"<div></div>"`)
+
+      show.value = true
+      await nextTick()
+      expect(root.innerHTML).toMatchInlineSnapshot(
+        `"<!--teleport start--><!--teleport end--><div>Footer</div><div id="targetId"><div>bar</div></div>"`,
+      )
+    })
 
-    await nextTick()
+    // #13349
+    test('handle deferred teleport updates before and after mount', async () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const show = ref(false)
+      const data2 = ref('2')
+      const data3 = ref('3')
+
+      const Comp = {
+        props: {
+          modelValue: {},
+          modelModifiers: {},
+        },
+        emits: ['update:modelValue'],
+        setup(props: any) {
+          const data2 = useModel(props, 'modelValue')
+          data2.value = '2+'
+          return () => h('span')
+        },
+      }
+
+      createDOMApp({
+        setup() {
+          setTimeout(() => (show.value = true), 5)
+          setTimeout(() => (data3.value = '3+'), 10)
+        },
+        render() {
+          return h(Fragment, null, [
+            h('span', { id: 'targetId001' }),
+            show.value
+              ? h(Fragment, null, [
+                  h(Teleport, { to: '#targetId001', defer: true }, [
+                    createTextVNode(String(data3.value)),
+                  ]),
+                  h(Comp, {
+                    modelValue: data2.value,
+                    'onUpdate:modelValue': (event: any) =>
+                      (data2.value = event),
+                  }),
+                ])
+              : createCommentVNode('v-if'),
+          ])
+        },
+      }).mount(root)
 
-    expect(root.innerHTML).toMatchInlineSnapshot(
-      `"<svg><circle></circle></svg><!--teleport start--><!--teleport end-->"`,
-    )
+      expect(root.innerHTML).toMatchInlineSnapshot(
+        `"<span id="targetId001"></span><!--v-if-->"`,
+      )
 
-    expect(svg.value.namespaceURI).toBe('http://www.w3.org/2000/svg')
-    expect(circle.value.namespaceURI).toBe('http://www.w3.org/2000/svg')
+      await new Promise(r => setTimeout(r, 10))
+      expect(root.innerHTML).toMatchInlineSnapshot(
+        `"<span id="targetId001">3+</span><!--teleport start--><!--teleport end--><span></span>"`,
+      )
+    })
   })
 
-  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,
-    )
+  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
 
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
-    )
-    expect(serializeInner(targetA)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`,
-    )
-    expect(serializeInner(targetB)).toMatchInlineSnapshot(`""`)
+    test('should work', () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
 
-    target.value = targetB
-    await nextTick()
+      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(targetA)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(targetB)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`,
-    )
-  })
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).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')])
+    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-->`,
+      )
 
-    render(
-      h(() => h(Teleport, { to: target }, children.value)),
-      root,
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`,
-    )
+      expect(svg.value.namespaceURI).toBe('http://www.w3.org/2000/svg')
+      expect(circle.value.namespaceURI).toBe('http://www.w3.org/2000/svg')
+    })
 
-    children.value = []
-    await nextTick()
+    test('should update target', async () => {
+      const targetA = nodeOps.createElement('div')
+      const targetB = nodeOps.createElement('div')
+      const target = ref(targetA)
+      const root = nodeOps.createElement('div')
 
-    expect(serializeInner(target)).toMatchInlineSnapshot(`""`)
+      render(
+        h(() => [
+          h(Teleport, { to: target.value }, h('div', 'teleported')),
+          h('div', 'root'),
+        ]),
+        root,
+      )
 
-    children.value = [createVNode(Text, null, 'teleported')]
-    await nextTick()
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(targetA)).toBe(`<div>teleported</div>`)
+      expect(serializeInner(targetB)).toBe(``)
 
-    expect(serializeInner(target)).toMatchInlineSnapshot(`"teleported"`)
-  })
+      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 traverse comment node after updating in optimize mode', async () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
+      const count = ref(0)
+      let teleport
 
-  test('should remove children when unmounted', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
+      __DEV__ = false
+      render(
+        h(() => {
+          teleport =
+            (openBlock(),
+            createBlock(Teleport, { to: target }, [
+              createCommentVNode('comment in teleport'),
+            ]))
+          return h('div', null, [
+            createTextVNode(toDisplayString(count.value)),
+            teleport,
+          ])
+        }),
+        root,
+      )
+      const commentNode = teleport!.children[0].el
+      expect(serializeInner(root)).toBe(`<div>0</div>`)
+      expect(serializeInner(target)).toBe(`<!--comment in teleport-->`)
+      expect(serialize(commentNode)).toBe(`<!--comment in teleport-->`)
+
+      count.value = 1
+      await nextTick()
+      __DEV__ = true
+      expect(serializeInner(root)).toBe(`<div>1</div>`)
+      expect(teleport!.children[0].el).toBe(commentNode)
+    })
+
+    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 })
+    })
+
+    // #10747
+    test('should unmount correctly when using top level comment in teleport', async () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
+      const count = ref(0)
 
-    function testUnmount(props: any) {
+      __DEV__ = false
       render(
-        h(() => [h(Teleport, props, h('div', 'teleported')), h('div', 'root')]),
+        h(() => {
+          return h('div', null, [
+            createTextVNode(toDisplayString(count.value)),
+            (openBlock(),
+            createBlock(Teleport, { to: target }, [
+              createCommentVNode('comment in teleport'),
+            ])),
+          ])
+        }),
         root,
       )
-      expect(serializeInner(target)).toMatchInlineSnapshot(
-        props.disabled ? `""` : `"<div>teleported</div>"`,
+
+      count.value = 1
+
+      await nextTick()
+      __DEV__ = true
+      render(null, root)
+      expect(root.children.length).toBe(0)
+    })
+
+    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 })
-  })
+    // #6347
+    test('descendent component should be unmounted when teleport is disabled and unmounted', () => {
+      const root = nodeOps.createElement('div')
 
-  test('component with multi roots should be removed when unmounted', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
+      const CompWithHook = {
+        render() {
+          return [h('p'), h('p')]
+        },
+        beforeUnmount: vi.fn(),
+        unmounted: vi.fn(),
+      }
 
-    const Comp = {
-      render() {
-        return [h('p'), h('p')]
-      },
-    }
+      render(
+        h(() => [h(Teleport, { to: null, disabled: true }, h(CompWithHook))]),
+        root,
+      )
+      expect(CompWithHook.beforeUnmount).toBeCalledTimes(0)
+      expect(CompWithHook.unmounted).toBeCalledTimes(0)
 
-    render(
-      h(() => [h(Teleport, { to: target }, h(Comp)), h('div', 'root')]),
-      root,
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(`"<p></p><p></p>"`)
+      render(null, root)
 
-    render(null, root)
-    expect(serializeInner(target)).toBe('')
-  })
+      expect(CompWithHook.beforeUnmount).toBeCalledTimes(1)
+      expect(CompWithHook.unmounted).toBeCalledTimes(1)
+    })
 
-  // #6347
-  test('descendent component should be unmounted when teleport is disabled and unmounted', () => {
-    const root = nodeOps.createElement('div')
+    test('multiple teleport with same target', () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
 
-    const CompWithHook = {
-      render() {
-        return [h('p'), h('p')]
-      },
-      beforeUnmount: vi.fn(),
-      unmounted: vi.fn(),
-    }
+      render(
+        h('div', [
+          h(Teleport, { to: target }, h('div', 'one')),
+          h(Teleport, { to: target }, 'two'),
+        ]),
+        root,
+      )
 
-    render(
-      h(() => [h(Teleport, { to: null, disabled: true }, h(CompWithHook))]),
-      root,
-    )
-    expect(CompWithHook.beforeUnmount).toBeCalledTimes(0)
-    expect(CompWithHook.unmounted).toBeCalledTimes(0)
+      expect(serializeInner(root)).toBe(
+        `<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>`,
+      )
+      expect(serializeInner(target)).toBe(`<div>one</div>two`)
 
-    render(null, root)
+      // 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`)
 
-    expect(CompWithHook.beforeUnmount).toBeCalledTimes(1)
-    expect(CompWithHook.unmounted).toBeCalledTimes(1)
-  })
+      // 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`)
 
-  test('multiple teleport with same target', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
+      // 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>`)
 
-    render(
-      h('div', [
-        h(Teleport, { to: target }, h('div', 'one')),
-        h(Teleport, { to: target }, 'two'),
-      ]),
-      root,
-    )
+      // 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>`)
+    })
 
-    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"`,
-    )
+    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-->`,
+      )
 
-    // 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>"`,
-    )
+      disabled.value = false
+      await nextTick()
+      expect(serializeInner(root)).toBe(
+        `<div><div>teleported</div></div><!--teleport start--><!--teleport end-->`,
+      )
+    })
 
-    // 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('disabled', () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('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 renderWithDisabled = (disabled: boolean) => {
+        return h(Fragment, [
+          h(Teleport, { to: target, disabled }, h('div', 'teleported')),
+          h('div', 'root'),
+        ])
+      }
 
-    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-->"`,
-    )
+      render(renderWithDisabled(false), root)
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe(`<div>teleported</div>`)
 
-    disabled.value = false
-    await nextTick()
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><div>teleported</div></div><!--teleport start--><!--teleport end-->"`,
-    )
-  })
+      render(renderWithDisabled(true), root)
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe(``)
 
-  test('disabled', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
+      // toggle back
+      render(renderWithDisabled(false), root)
+      expect(serializeInner(root)).toBe(
+        `<!--teleport start--><!--teleport end--><div>root</div>`,
+      )
+      expect(serializeInner(target)).toBe(`<div>teleported</div>`)
+    })
 
-    const renderWithDisabled = (disabled: boolean) => {
-      return h(Fragment, [
-        h(Teleport, { to: target, disabled }, h('div', 'teleported')),
-        h('div', 'root'),
-      ])
-    }
+    test('moving teleport while enabled', () => {
+      const target = nodeOps.createElement('div')
+      const root = nodeOps.createElement('div')
 
-    render(renderWithDisabled(false), root)
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<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>`)
 
-    render(renderWithDisabled(true), 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 }, h('div', 'teleported')),
+        ]),
+        root,
+      )
+      expect(serializeInner(root)).toBe(
+        `<div>root</div><!--teleport start--><!--teleport end-->`,
+      )
+      expect(serializeInner(target)).toBe(`<div>teleported</div>`)
 
-    // toggle back
-    render(renderWithDisabled(false), root)
-    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
-    )
-    expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<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 enabled', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
+    test('moving teleport while disabled', () => {
+      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(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 }, 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('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 }, 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(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('moving teleport while disabled', () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
+    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-->`,
+      )
 
-    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('')
-  })
+      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(``)
 
-  test('should work with block tree', async () => {
-    const target = nodeOps.createElement('div')
-    const root = nodeOps.createElement('div')
-    const disabled = ref(false)
+      // 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-->`,
+      )
+    })
 
-    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-->"`,
-    )
+    // #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)
+    })
 
-    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(``)
+    // #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>`)
+    })
 
-    // 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-->"`,
-    )
-  })
+    //#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>',
+      )
 
-  // #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(),
-    }
+      show.value = false
+      await nextTick()
 
-    const app = createApp({
-      setup() {
-        return () => {
-          return toggle.value
-            ? h(Teleport, { to: target }, [
-                withDirectives(h('div', ['foo']), [[dir]]),
-              ])
-            : null
-        }
-      },
+      expect(root.innerHTML).toBe('<div>foo</div>')
     })
-    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)
+    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>',
+      )
 
-    toggle.value = false
-    await nextTick()
-    expect(serializeInner(root)).toMatchInlineSnapshot(`"<!---->"`)
-    expect(serializeInner(target)).toMatchInlineSnapshot(`""`)
-    expect(dir.mounted).toHaveBeenCalledTimes(1)
-    expect(dir.unmounted).toHaveBeenCalledTimes(1)
-  })
+      parentShow.value = false
+      await nextTick()
+      expect(root.innerHTML).toBe('<!--v-if-->')
+    })
 
-  // #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)
+    test('accessing template refs inside teleport', async () => {
+      const target = nodeOps.createElement('div')
+      const tRef = ref()
+      let tRefInMounted
 
-    const App = {
+      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])
+    })
+  }
+
+  test('handle update and hmr rerender', async () => {
+    const target = document.createElement('div')
+    const root = document.createElement('div')
+
+    const Comp = {
       setup() {
-        return () =>
-          h(Fragment, [
-            h(
-              Teleport,
-              { to: target.value, disabled: disabled.value },
-              h('div', 'teleported'),
-            ),
-          ])
+        const cls = ref('foo')
+        onMounted(() => {
+          // trigger update
+          cls.value = 'bar'
+        })
+        return { cls, target }
       },
+      template: `
+        <Teleport :to="target">
+          <div :class="cls">
+            <div>
+              <slot></slot>
+            </div>
+          </div>
+        </Teleport>
+      `,
     }
-    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(`""`)
+    const appId = 'test-app-id'
+    const App = {
+      __hmrId: appId,
+      components: { Comp },
+      render() {
+        return originalH(Comp, null, { default: () => originalH('div', 'foo') })
+      },
+    }
+    createRecord(appId, App)
 
-    target.value = target3
+    domRender(originalH(App), root)
+    expect(target.innerHTML).toBe(
+      '<div class="foo"><div><div>foo</div></div></div>',
+    )
     await nextTick()
-    expect(serializeInner(target1)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(target3)).toMatchInlineSnapshot(`""`)
+    expect(target.innerHTML).toBe(
+      '<div class="bar"><div><div>foo</div></div></div>',
+    )
 
-    disabled.value = false
+    rerender(appId, () =>
+      originalH(Comp, null, { default: () => originalH('div', 'bar') }),
+    )
     await nextTick()
-    expect(serializeInner(target1)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
-    expect(serializeInner(target3)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`,
+    expect(target.innerHTML).toBe(
+      '<div class="bar"><div><div>bar</div></div></div>',
     )
   })
 })
diff --git a/packages/runtime-core/__tests__/errorHandling.spec.ts b/packages/runtime-core/__tests__/errorHandling.spec.ts
index d995c5fa057..0cd3efa588c 100644
--- a/packages/runtime-core/__tests__/errorHandling.spec.ts
+++ b/packages/runtime-core/__tests__/errorHandling.spec.ts
@@ -1,4 +1,6 @@
 import {
+  type VNode,
+  computed,
   createApp,
   defineComponent,
   h,
@@ -11,6 +13,7 @@ import {
   watch,
   watchEffect,
 } from '@vue/runtime-test'
+import { ErrorCodes, ErrorTypeStrings } from '../src/errorHandling'
 
 describe('error handling', () => {
   test('propagation', () => {
@@ -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__/helpers/renderList.spec.ts b/packages/runtime-core/__tests__/helpers/renderList.spec.ts
index d23a63cc08e..6e766f1a169 100644
--- a/packages/runtime-core/__tests__/helpers/renderList.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/renderList.spec.ts
@@ -1,3 +1,10 @@
+import {
+  effect,
+  isReactive,
+  reactive,
+  readonly,
+  shallowReactive,
+} from '../../src/index'
 import { renderList } from '../../src/helpers/renderList'
 
 describe('renderList', () => {
@@ -56,4 +63,39 @@ describe('renderList', () => {
       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])
+  })
+
+  it('should not allow mutation', () => {
+    const arr = readonly(reactive([{ foo: 1 }]))
+    expect(
+      renderList(arr, item => {
+        ;(item as any).foo = 0
+        return item.foo
+      }),
+    ).toEqual([1])
+    expect(
+      `Set operation on key "foo" failed: target is readonly.`,
+    ).toHaveBeenWarned()
+  })
+
+  it('should trigger effect for deep mutations in readonly reactive arrays', () => {
+    const arr = reactive([{ foo: 1 }])
+    const readonlyArr = readonly(arr)
+
+    let dummy
+    effect(() => {
+      dummy = renderList(readonlyArr, item => item.foo)
+    })
+    expect(dummy).toEqual([1])
+
+    arr[0].foo = 2
+    expect(dummy).toEqual([2])
+  })
 })
diff --git a/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts b/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts
index b6183ac3c36..bc0678b51c9 100644
--- a/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts
@@ -26,13 +26,23 @@ describe('renderSlot', () => {
     const vnode = renderSlot(
       { default: () => [(child = h('child'))] },
       'default',
+      { key: 'foo' },
     )
     expect(vnode.children).toEqual([child])
+    expect(vnode.key).toBe('foo')
+  })
+
+  it('should allow symbol values for slot prop key', () => {
+    const key = Symbol()
+    const vnode = renderSlot({ default: () => [h('div')] }, 'default', { key })
+    expect(vnode.key).toBe('_default')
   })
 
   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', () => {
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 00000000000..3860d43db20
--- /dev/null
+++ b/packages/runtime-core/__tests__/helpers/useId.spec.ts
@@ -0,0 +1,323 @@
+/**
+ * @vitest-environment jsdom
+ */
+import {
+  type App,
+  Suspense,
+  createApp,
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  onServerPrefetch,
+  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('components with serverPrefetch', async () => {
+    const factory = (): ReturnType<TestCaseFactory> => {
+      const SPOne = defineComponent({
+        setup() {
+          onServerPrefetch(() => {})
+          return () => h(BasicComponentWithUseId)
+        },
+      })
+
+      const SPTwo = defineComponent({
+        render() {
+          return h(BasicComponentWithUseId)
+        },
+      })
+
+      const app = createApp({
+        setup() {
+          const id1 = useId()
+          const id2 = useId()
+          return () => [id1, ' ', id2, ' ', h(SPOne), ' ', h(SPTwo)]
+        },
+      })
+      return [app, []]
+    }
+
+    const expected =
+      'v-0 v-1 ' + // root
+      'v-0-0 v-0-1 ' + // inside first async subtree
+      'v-2 v-3' // inside second async subtree
+    // 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 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
index c02af337b87..8d31848e1bc 100644
--- a/packages/runtime-core/__tests__/helpers/useModel.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/useModel.spec.ts
@@ -1,6 +1,7 @@
 import {
   Fragment,
   type Ref,
+  type TestElement,
   createApp,
   createBlock,
   createElementBlock,
@@ -152,10 +153,10 @@ describe('useModel', () => {
 
     const compRender = vi.fn()
     const Comp = defineComponent({
-      props: ['fooBar'],
-      emits: ['update:fooBar'],
+      props: ['foo-bar'],
+      emits: ['update:foo-bar'],
       setup(props) {
-        foo = useModel(props, 'fooBar')
+        foo = useModel(props, 'foo-bar')
         return () => {
           compRender()
           return foo.value
@@ -191,10 +192,10 @@ describe('useModel', () => {
 
     const compRender = vi.fn()
     const Comp = defineComponent({
-      props: ['fooBar'],
-      emits: ['update:fooBar'],
+      props: ['foo-bar'],
+      emits: ['update:foo-bar'],
       setup(props) {
-        foo = useModel(props, 'fooBar')
+        foo = useModel(props, 'foo-bar')
         return () => {
           compRender()
           return foo.value
@@ -526,4 +527,226 @@ describe('useModel', () => {
     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 00000000000..adc8ed66c77
--- /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 f4f356dea4f..32f89b1d8e9 100644
--- a/packages/runtime-core/__tests__/helpers/withMemo.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/withMemo.spec.ts
@@ -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 () => {
diff --git a/packages/runtime-core/__tests__/hmr.spec.ts b/packages/runtime-core/__tests__/hmr.spec.ts
index 000fbf40bf8..3f157d009a9 100644
--- a/packages/runtime-core/__tests__/hmr.spec.ts
+++ b/packages/runtime-core/__tests__/hmr.spec.ts
@@ -6,6 +6,7 @@ import {
   h,
   nextTick,
   nodeOps,
+  ref,
   render,
   serializeInner,
   triggerEvent,
@@ -28,6 +29,8 @@ function compileToFunction(template: string) {
   return render
 }
 
+const timeout = (n: number = 0) => new Promise(r => setTimeout(r, n))
+
 describe('hot module replacement', () => {
   test('inject global runtime', () => {
     expect(createRecord).toBeDefined()
@@ -356,7 +359,7 @@ describe('hot module replacement', () => {
     triggerEvent(root.children[1] as TestElement, 'click')
     await nextTick()
     await new Promise(r => setTimeout(r, 0))
-    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)
@@ -415,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 () => {
@@ -757,4 +812,86 @@ describe('hot module replacement', () => {
       `<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 3fa0d7e732e..6828e61ec56 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -3,11 +3,15 @@
  */
 
 import {
+  type ObjectDirective,
   Suspense,
   Teleport,
   Transition,
   type VNode,
+  createBlock,
   createCommentVNode,
+  createElementBlock,
+  createElementVNode,
   createSSRApp,
   createStaticVNode,
   createTextVNode,
@@ -17,16 +21,24 @@ import {
   h,
   nextTick,
   onMounted,
+  onServerPrefetch,
+  openBlock,
+  reactive,
   ref,
   renderSlot,
   useCssVars,
   vModelCheckbox,
   vShow,
+  withCtx,
   withDirectives,
 } from '@vue/runtime-dom'
+import type { HMRRuntime } from '../src/hmr'
 import { type SSRContext, renderToString } from '@vue/server-renderer'
-import { PatchFlags } from '@vue/shared'
-import { vShowOldKey } from '../../runtime-dom/src/directives/vShow'
+import { PatchFlags, normalizeStyle } from '@vue/shared'
+import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow'
+
+declare var __VUE_HMR_RUNTIME__: HMRRuntime
+const { createRecord, reload } = __VUE_HMR_RUNTIME__
 
 function mountWithHydration(html: string, render: () => any) {
   const container = document.createElement('div')
@@ -141,6 +153,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()
@@ -232,12 +253,23 @@ describe('SSR hydration', () => {
     )
   })
 
+  // #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(
@@ -253,13 +285,14 @@ describe('SSR hydration', () => {
     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')!)
@@ -268,7 +301,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-->`,
     )
   })
 
@@ -298,7 +331,7 @@ describe('SSR hydration', () => {
 
     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
@@ -314,16 +347,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')!)
@@ -335,7 +370,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-->"`,
     )
   })
 
@@ -362,7 +397,9 @@ describe('SSR hydration', () => {
     )
 
     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)
@@ -385,7 +422,8 @@ describe('SSR hydration', () => {
     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')!)
@@ -426,7 +464,7 @@ describe('SSR hydration', () => {
   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 = {
@@ -455,7 +493,7 @@ 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(
@@ -470,7 +508,7 @@ describe('SSR hydration', () => {
     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)
 
@@ -484,6 +522,217 @@ describe('SSR hydration', () => {
     )
   })
 
+  test('with data-allow-mismatch component when using onServerPrefetch', async () => {
+    const Comp = {
+      template: `
+        <div>Comp2</div>
+      `,
+    }
+    let foo: any
+    const App = {
+      setup() {
+        const flag = ref(true)
+        foo = () => {
+          flag.value = false
+        }
+        onServerPrefetch(() => (flag.value = false))
+        return { flag }
+      },
+      components: {
+        Comp,
+      },
+      template: `
+        <span data-allow-mismatch>
+          <Comp v-if="flag"></Comp>
+        </span>
+      `,
+    }
+    // hydrate
+    const container = document.createElement('div')
+    container.innerHTML = await renderToString(h(App))
+    createSSRApp(App).mount(container)
+    expect(container.innerHTML).toBe(
+      '<span data-allow-mismatch=""><div>Comp2</div></span>',
+    )
+    foo()
+    await nextTick()
+    expect(container.innerHTML).toBe(
+      '<span data-allow-mismatch=""><!--v-if--></span>',
+    )
+  })
+
+  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[] = []
@@ -660,6 +909,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>[] = []
@@ -863,6 +1160,69 @@ describe('SSR hydration', () => {
     )
   })
 
+  // #13510
+  test('update async component after parent mount before async component resolve', async () => {
+    const Comp = {
+      props: ['toggle'],
+      render(this: any) {
+        return h('h1', [
+          this.toggle ? 'Async component' : 'Updated async component',
+        ])
+      },
+    }
+    let serverResolve: any
+    let AsyncComp = defineAsyncComponent(
+      () =>
+        new Promise(r => {
+          serverResolve = r
+        }),
+    )
+
+    const toggle = ref(true)
+    const App = {
+      setup() {
+        onMounted(() => {
+          // change state, after mount and before async component resolve
+          nextTick(() => (toggle.value = false))
+        })
+
+        return () => {
+          return h(AsyncComp, { toggle: toggle.value })
+        }
+      },
+    }
+
+    // server render
+    const htmlPromise = renderToString(h(App))
+    serverResolve(Comp)
+    const html = await htmlPromise
+    expect(html).toMatchInlineSnapshot(`"<h1>Async component</h1>"`)
+
+    // hydration
+    let clientResolve: any
+    AsyncComp = defineAsyncComponent(
+      () =>
+        new Promise(r => {
+          clientResolve = r
+        }),
+    )
+
+    const container = document.createElement('div')
+    container.innerHTML = html
+    createSSRApp(App).mount(container)
+
+    // resolve
+    clientResolve(Comp)
+    await new Promise(r => setTimeout(r))
+
+    // prevent lazy hydration since the component has been patched
+    expect('Skipping lazy hydration for component').toHaveBeenWarned()
+    expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<h1>Updated async component</h1>"`,
+    )
+  })
+
   test('hydrate safely when property used by async setup changed before render', async () => {
     const toggle = ref(true)
 
@@ -1030,6 +1390,84 @@ describe('SSR hydration', () => {
     resolve({})
   })
 
+  //#12362
+  test('nested async wrapper', async () => {
+    const Toggle = defineAsyncComponent(
+      () =>
+        new Promise(r => {
+          r(
+            defineComponent({
+              setup(_, { slots }) {
+                const show = ref(false)
+                onMounted(() => {
+                  nextTick(() => {
+                    show.value = true
+                  })
+                })
+                return () =>
+                  withDirectives(
+                    h('div', null, [renderSlot(slots, 'default')]),
+                    [[vShow, show.value]],
+                  )
+              },
+            }) as any,
+          )
+        }),
+    )
+
+    const Wrapper = defineAsyncComponent(() => {
+      return new Promise(r => {
+        r(
+          defineComponent({
+            render(this: any) {
+              return renderSlot(this.$slots, 'default')
+            },
+          }) as any,
+        )
+      })
+    })
+
+    const count = ref(0)
+    const fn = vi.fn()
+    const Child = {
+      setup() {
+        onMounted(() => {
+          fn()
+          count.value++
+        })
+        return () => h('div', count.value)
+      },
+    }
+
+    const App = {
+      render() {
+        return h(Toggle, null, {
+          default: () =>
+            h(Wrapper, null, {
+              default: () =>
+                h(Wrapper, null, {
+                  default: () => h(Child),
+                }),
+            }),
+        })
+      },
+    }
+
+    const root = document.createElement('div')
+    root.innerHTML = await renderToString(h(App))
+    expect(root.innerHTML).toMatchInlineSnapshot(
+      `"<div style="display:none;"><!--[--><!--[--><!--[--><div>0</div><!--]--><!--]--><!--]--></div>"`,
+    )
+
+    createSSRApp(App).mount(root)
+    await nextTick()
+    await nextTick()
+    expect(root.innerHTML).toMatchInlineSnapshot(
+      `"<div style=""><!--[--><!--[--><!--[--><div>1</div><!--]--><!--]--><!--]--></div>"`,
+    )
+    expect(fn).toBeCalledTimes(1)
+  })
+
   test('unmount async wrapper before load (fragment)', async () => {
     let resolve: any
     const AsyncComp = defineAsyncComponent(
@@ -1116,7 +1554,7 @@ describe('SSR hydration', () => {
           'input',
           { type: 'checkbox', indeterminate: '' },
           null,
-          PatchFlags.HOISTED,
+          PatchFlags.CACHED,
         ),
     )
     expect((container.firstChild as any).indeterminate).toBe(true)
@@ -1134,6 +1572,26 @@ describe('SSR hydration', () => {
     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 = {
@@ -1154,9 +1612,56 @@ describe('SSR hydration', () => {
     expect((vnode as any).component?.subTree.children[0].el).toBe(text)
   })
 
-  test('app.unmount()', async () => {
-    const container = document.createElement('DIV')
-    container.innerHTML = '<button></button>'
+  // #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>'
     const App = defineComponent({
       setup(_, { expose }) {
         const count = ref(0)
@@ -1212,6 +1717,58 @@ describe('SSR hydration', () => {
     expect(`mismatch`).not.toHaveBeenWarned()
   })
 
+  test('transition appear work with pre-existing class', () => {
+    const { vnode, container } = mountWithHydration(
+      `<template><div class="foo">foo</div></template>`,
+      () =>
+        h(
+          Transition,
+          { appear: true },
+          {
+            default: () => h('div', { class: 'foo' }, 'foo'),
+          },
+        ),
+    )
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="foo v-enter-from v-enter-active"
+      >
+        foo
+      </div>
+    `)
+    expect(vnode.el).toBe(container.firstChild)
+    expect(`mismatch`).not.toHaveBeenWarned()
+  })
+
+  // #13394
+  test('transition appear work with empty content', async () => {
+    const show = ref(true)
+    const { vnode, container } = mountWithHydration(
+      `<template><!----></template>`,
+      function (this: any) {
+        return h(
+          Transition,
+          { appear: true },
+          {
+            default: () =>
+              show.value
+                ? renderSlot(this.$slots, 'default')
+                : createTextVNode('foo'),
+          },
+        )
+      },
+    )
+
+    // empty slot render as a comment node
+    expect(container.firstChild!.nodeType).toBe(Node.COMMENT_NODE)
+    expect(vnode.el).toBe(container.firstChild)
+    expect(`mismatch`).not.toHaveBeenWarned()
+
+    show.value = false
+    await nextTick()
+    expect(container.innerHTML).toBe('foo')
+  })
+
   test('transition appear with v-if', () => {
     const show = false
     const { vnode, container } = mountWithHydration(
@@ -1252,7 +1809,7 @@ 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()
   })
@@ -1292,6 +1849,172 @@ describe('SSR hydration', () => {
     `)
   })
 
+  test('Suspense + transition appear', async () => {
+    const { vnode, container } = mountWithHydration(
+      `<template><div>foo</div></template>`,
+      () =>
+        h(Suspense, {}, () =>
+          h(
+            Transition,
+            { appear: true },
+            {
+              default: () => h('div', 'foo'),
+            },
+          ),
+        ),
+    )
+
+    expect(vnode.el).toBe(container.firstChild)
+    // wait for hydration to finish
+    await new Promise(r => setTimeout(r))
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="v-enter-from v-enter-active"
+      >
+        foo
+      </div>
+    `)
+    await nextTick()
+    expect(vnode.el).toBe(container.firstChild)
+  })
+
+  // #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
+    }
+  })
+
+  test('hmr reload child wrapped in KeepAlive', async () => {
+    const id = 'child-reload'
+    const Child = {
+      __hmrId: id,
+      template: `<div>foo</div>`,
+    }
+    createRecord(id, Child)
+
+    const appId = 'test-app-id'
+    const App = {
+      __hmrId: appId,
+      components: { Child },
+      template: `
+      <div>
+        <KeepAlive>
+          <Child />
+        </KeepAlive>
+      </div>
+      `,
+    }
+
+    const root = document.createElement('div')
+    root.innerHTML = await renderToString(h(App))
+    createSSRApp(App).mount(root)
+    expect(root.innerHTML).toBe('<div><div>foo</div></div>')
+
+    reload(id, {
+      __hmrId: id,
+      template: `<div>bar</div>`,
+    })
+    await nextTick()
+    expect(root.innerHTML).toBe('<div><div>bar</div></div>')
+  })
+
+  test('hmr root reload', async () => {
+    const appId = 'test-app-id'
+    const App = {
+      __hmrId: appId,
+      template: `<div>foo</div>`,
+    }
+
+    const root = document.createElement('div')
+    root.innerHTML = await renderToString(h(App))
+    createSSRApp(App).mount(root)
+    expect(root.innerHTML).toBe('<div>foo</div>')
+
+    reload(appId, {
+      __hmrId: appId,
+      template: `<div>bar</div>`,
+    })
+    await nextTick()
+    expect(root.innerHTML).toBe('<div>bar</div>')
+  })
+
   describe('mismatch handling', () => {
     test('text node', () => {
       const { container } = mountWithHydration(`foo`, () => 'bar')
@@ -1446,6 +2169,13 @@ describe('SSR hydration', () => {
       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' }, ''), [
@@ -1498,6 +2228,21 @@ describe('SSR hydration', () => {
       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()
@@ -1554,5 +2299,214 @@ describe('SSR hydration', () => {
       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__/rendererAttrsFallthrough.spec.ts b/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
index 79e2867ad69..45d00579fee 100644
--- a/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
+++ b/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
@@ -6,6 +6,7 @@
 import {
   Fragment,
   type FunctionalComponent,
+  Teleport,
   createBlock,
   createCommentVNode,
   createElementBlock,
@@ -20,6 +21,7 @@ import {
   render,
   withModifiers,
 } from '@vue/runtime-dom'
+import { createApp } from 'vue'
 import { PatchFlags } from '@vue/shared'
 
 describe('attribute fallthrough', () => {
@@ -390,6 +392,26 @@ describe('attribute fallthrough', () => {
     expect(`Extraneous non-emits event listeners`).toHaveBeenWarned()
   })
 
+  it('should warn when fallthrough fails on teleport root node', () => {
+    const Parent = {
+      render() {
+        return h(Child, { class: 'parent' })
+      },
+    }
+    const root = document.createElement('div')
+
+    const Child = defineComponent({
+      render() {
+        return h(Teleport, { to: root }, h('div'))
+      },
+    })
+
+    document.body.appendChild(root)
+    render(h(Parent), root)
+
+    expect(`Extraneous non-props attributes (class)`).toHaveBeenWarned()
+  })
+
   it('should dedupe same listeners when $attrs is used during render', () => {
     const click = vi.fn()
     const count = ref(0)
@@ -783,4 +805,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 47024b674f4..2c3e5ff0d1a 100644
--- a/packages/runtime-core/__tests__/rendererChildren.spec.ts
+++ b/packages/runtime-core/__tests__/rendererChildren.spec.ts
@@ -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
diff --git a/packages/runtime-core/__tests__/rendererComponent.spec.ts b/packages/runtime-core/__tests__/rendererComponent.spec.ts
index c5faa05de83..fefc4137034 100644
--- a/packages/runtime-core/__tests__/rendererComponent.spec.ts
+++ b/packages/runtime-core/__tests__/rendererComponent.spec.ts
@@ -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
diff --git a/packages/runtime-core/__tests__/rendererFragment.spec.ts b/packages/runtime-core/__tests__/rendererFragment.spec.ts
index 5f1e869366f..81cf7b8df31 100644
--- a/packages/runtime-core/__tests__/rendererFragment.spec.ts
+++ b/packages/runtime-core/__tests__/rendererFragment.spec.ts
@@ -3,6 +3,7 @@ import {
   NodeOpTypes,
   type TestElement,
   TestNodeTypes,
+  type VNode,
   createBlock,
   createCommentVNode,
   createTextVNode,
@@ -316,6 +317,64 @@ describe('renderer: fragment', () => {
     )
   })
 
+  // #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')
diff --git a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
index ef5bdbe0136..1d8bb84205b 100644
--- a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
+++ b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
@@ -8,6 +8,8 @@ import {
   createApp,
   createBlock,
   createCommentVNode,
+  createElementBlock,
+  createElementVNode,
   createTextVNode,
   createVNode,
   defineComponent,
@@ -15,6 +17,7 @@ import {
   serializeInner as inner,
   nextTick,
   nodeOps,
+  onBeforeMount,
   onBeforeUnmount,
   onUnmounted,
   openBlock,
@@ -23,6 +26,7 @@ import {
   renderList,
   renderSlot,
   serialize,
+  setBlockTracking,
   withCtx,
 } from '@vue/runtime-test'
 import { PatchFlags, SlotFlags } from '@vue/shared'
@@ -434,7 +438,7 @@ describe('renderer: optimized mode', () => {
     const App = {
       setup() {
         return () => {
-          return createVNode(Comp, null, {
+          return createBlock(Comp, null, {
             default: withCtx(() => [
               createVNode('p', null, foo.value, PatchFlags.TEXT),
             ]),
@@ -487,6 +491,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', () => {
@@ -534,6 +564,7 @@ describe('renderer: optimized mode', () => {
     const state = ref(0)
 
     const CompA = {
+      name: 'A',
       setup(props: any, { slots }: SetupContext) {
         return () => {
           return (
@@ -545,6 +576,7 @@ describe('renderer: optimized mode', () => {
     }
 
     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
@@ -555,6 +587,7 @@ describe('renderer: optimized mode', () => {
     }
 
     const app = createApp({
+      name: 'App',
       setup() {
         return () => {
           return (
@@ -586,7 +619,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')
 
@@ -615,6 +648,7 @@ describe('renderer: optimized mode', () => {
       ])),
       root,
     )
+    await nextTick()
     expect(inner(target)).toMatchInlineSnapshot(
       `"<div><!--teleport start--><!--teleport end--></div><div>foo</div>"`,
     )
@@ -827,6 +861,114 @@ describe('renderer: optimized mode', () => {
     expect(inner(root)).toBe('<div><div>true</div></div>')
   })
 
+  // #13305
+  test('patch Suspense nested in list nodes in optimized mode', async () => {
+    const deps: Promise<any>[] = []
+
+    const Item = {
+      props: {
+        someId: { type: Number, required: true },
+      },
+      async setup(props: any) {
+        const p = new Promise(resolve => setTimeout(resolve, 1))
+        deps.push(p)
+
+        await p
+        return () => (
+          openBlock(),
+          createElementBlock('li', null, [
+            createElementVNode(
+              'p',
+              null,
+              String(props.someId),
+              PatchFlags.TEXT,
+            ),
+          ])
+        )
+      },
+    }
+
+    const list = ref([1, 2, 3])
+    const App = {
+      setup() {
+        return () => (
+          openBlock(),
+          createElementBlock(
+            Fragment,
+            null,
+            [
+              createElementVNode(
+                'p',
+                null,
+                JSON.stringify(list.value),
+                PatchFlags.TEXT,
+              ),
+              createElementVNode('ol', null, [
+                (openBlock(),
+                createBlock(SuspenseImpl, null, {
+                  fallback: withCtx(() => [
+                    createElementVNode('li', null, 'Loading…'),
+                  ]),
+                  default: withCtx(() => [
+                    (openBlock(true),
+                    createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(list.value, id => {
+                        return (
+                          openBlock(),
+                          createBlock(
+                            Item,
+                            {
+                              key: id,
+                              'some-id': id,
+                            },
+                            null,
+                            PatchFlags.PROPS,
+                            ['some-id'],
+                          )
+                        )
+                      }),
+                      PatchFlags.KEYED_FRAGMENT,
+                    )),
+                  ]),
+                  _: 1 /* STABLE */,
+                })),
+              ]),
+            ],
+            PatchFlags.STABLE_FRAGMENT,
+          )
+        )
+      },
+    }
+
+    const app = createApp(App)
+    app.mount(root)
+    expect(inner(root)).toBe(`<p>[1,2,3]</p>` + `<ol><li>Loading…</li></ol>`)
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(inner(root)).toBe(
+      `<p>[1,2,3]</p>` +
+        `<ol>` +
+        `<li><p>1</p></li>` +
+        `<li><p>2</p></li>` +
+        `<li><p>3</p></li>` +
+        `</ol>`,
+    )
+
+    list.value = [3, 1, 2]
+    await nextTick()
+    expect(inner(root)).toBe(
+      `<p>[3,1,2]</p>` +
+        `<ol>` +
+        `<li><p>3</p></li>` +
+        `<li><p>1</p></li>` +
+        `<li><p>2</p></li>` +
+        `</ol>`,
+    )
+  })
+
   // #4183
   test('should not take unmount children fast path /w Suspense', async () => {
     const show = ref(true)
@@ -933,4 +1075,331 @@ 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, true),
+                  ((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)
+  })
+
+  // #12371
+  test('unmount children when the user calls a compiled slot', async () => {
+    const beforeMountSpy = vi.fn()
+    const beforeUnmountSpy = vi.fn()
+
+    const Child = {
+      setup() {
+        onBeforeMount(beforeMountSpy)
+        onBeforeUnmount(beforeUnmountSpy)
+        return () => 'child'
+      },
+    }
+
+    const Wrapper = {
+      setup(_: any, { slots }: SetupContext) {
+        return () => (
+          openBlock(),
+          createElementBlock('section', null, [
+            (openBlock(),
+            createElementBlock('div', { key: 1 }, [
+              createTextVNode(slots.header!() ? 'foo' : 'bar', 1 /* TEXT */),
+              renderSlot(slots, 'content'),
+            ])),
+          ])
+        )
+      },
+    }
+
+    const show = ref(false)
+    const app = createApp({
+      render() {
+        return show.value
+          ? (openBlock(),
+            createBlock(Wrapper, null, {
+              header: withCtx(() => [createVNode({})]),
+              content: withCtx(() => [createVNode(Child)]),
+              _: 1,
+            }))
+          : createCommentVNode('v-if', true)
+      },
+    })
+
+    app.mount(root)
+    expect(inner(root)).toMatchInlineSnapshot(`"<!--v-if-->"`)
+    expect(beforeMountSpy).toHaveBeenCalledTimes(0)
+    expect(beforeUnmountSpy).toHaveBeenCalledTimes(0)
+
+    show.value = true
+    await nextTick()
+    expect(inner(root)).toMatchInlineSnapshot(
+      `"<section><div>foochild</div></section>"`,
+    )
+    expect(beforeMountSpy).toHaveBeenCalledTimes(1)
+
+    show.value = false
+    await nextTick()
+    expect(inner(root)).toBe('<!--v-if-->')
+    expect(beforeUnmountSpy).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
index 9f26bf9bdf8..7803826e3df 100644
--- a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
+++ b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
@@ -1,4 +1,6 @@
 import {
+  KeepAlive,
+  defineAsyncComponent,
   defineComponent,
   h,
   nextTick,
@@ -10,8 +12,6 @@ import {
   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')
@@ -179,6 +179,37 @@ describe('api: template refs', () => {
     expect(el.value).toBe(null)
   })
 
+  it('unset old ref when new ref is absent', async () => {
+    const root1 = nodeOps.createElement('div')
+    const root2 = nodeOps.createElement('div')
+    const el1 = ref(null)
+    const el2 = ref(null)
+    const toggle = ref(true)
+
+    const Comp1 = {
+      setup() {
+        return () => (toggle.value ? h('div', { ref: el1 }) : h('div'))
+      },
+    }
+
+    const Comp2 = {
+      setup() {
+        return () => h('div', { ref: toggle.value ? el2 : undefined })
+      },
+    }
+
+    render(h(Comp1), root1)
+    render(h(Comp2), root2)
+
+    expect(el1.value).toBe(root1.children[0])
+    expect(el2.value).toBe(root2.children[0])
+
+    toggle.value = false
+    await nextTick()
+    expect(el1.value).toBe(null)
+    expect(el2.value).toBe(null)
+  })
+
   test('string ref inside slots', async () => {
     const root = nodeOps.createElement('div')
     const spy = vi.fn()
@@ -219,6 +250,7 @@ describe('api: template refs', () => {
     }
     render(h(Comp), root)
     expect(state.refKey).toBe(root.children[0])
+    expect('Template ref "refKey" used on a non-ref value').toHaveBeenWarned()
   })
 
   test('multiple root refs', () => {
@@ -539,4 +571,68 @@ describe('api: template refs', () => {
       '<div><div>[object Object],[object Object]</div><ul><li>2</li><li>3</li></ul></div>',
     )
   })
+
+  test('with async component which nested in KeepAlive', async () => {
+    const AsyncComp = defineAsyncComponent(
+      () =>
+        new Promise(resolve =>
+          setTimeout(() =>
+            resolve(
+              defineComponent({
+                setup(_, { expose }) {
+                  expose({
+                    name: 'AsyncComp',
+                  })
+                  return () => h('div')
+                },
+              }) as any,
+            ),
+          ),
+        ),
+    )
+
+    const Comp = defineComponent({
+      setup(_, { expose }) {
+        expose({
+          name: 'Comp',
+        })
+        return () => h('div')
+      },
+    })
+
+    const toggle = ref(false)
+    const instanceRef = ref<any>(null)
+
+    const App = {
+      render: () => {
+        return h(KeepAlive, () =>
+          toggle.value
+            ? h(AsyncComp, { ref: instanceRef })
+            : h(Comp, { ref: instanceRef }),
+        )
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+    expect(instanceRef.value.name).toBe('Comp')
+
+    // switch to async component
+    toggle.value = true
+    await nextTick()
+    expect(instanceRef.value).toBe(null)
+
+    await new Promise(r => setTimeout(r))
+    expect(instanceRef.value.name).toBe('AsyncComp')
+
+    // switch back to normal component
+    toggle.value = false
+    await nextTick()
+    expect(instanceRef.value.name).toBe('Comp')
+
+    // switch to async component again
+    toggle.value = true
+    await nextTick()
+    expect(instanceRef.value.name).toBe('AsyncComp')
+  })
 })
diff --git a/packages/runtime-core/__tests__/scheduler.spec.ts b/packages/runtime-core/__tests__/scheduler.spec.ts
index 781aa6eb0b7..3e454aec023 100644
--- a/packages/runtime-core/__tests__/scheduler.spec.ts
+++ b/packages/runtime-core/__tests__/scheduler.spec.ts
@@ -1,7 +1,8 @@
 import {
+  type SchedulerJob,
+  SchedulerJobFlags,
   flushPostFlushCbs,
   flushPreFlushCbs,
-  invalidateJob,
   nextTick,
   queueJob,
   queuePostFlushCb,
@@ -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 () => {
@@ -504,6 +540,45 @@ describe('scheduler', () => {
     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 () => {
@@ -572,7 +754,7 @@ describe('scheduler', () => {
     // simulate parent component that toggles child
     const job1 = () => {
       // @ts-expect-error
-      job2.active = false
+      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
diff --git a/packages/runtime-core/__tests__/scopeId.spec.ts b/packages/runtime-core/__tests__/scopeId.spec.ts
index 08753e023a1..d9a7d4dbfa4 100644
--- a/packages/runtime-core/__tests__/scopeId.spec.ts
+++ b/packages/runtime-core/__tests__/scopeId.spec.ts
@@ -1,5 +1,6 @@
 import {
   Fragment,
+  Suspense,
   createBlock,
   createCommentVNode,
   createVNode,
@@ -47,6 +48,49 @@ describe('scopeId runtime support', () => {
     )
   })
 
+  // #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 = {
diff --git a/packages/runtime-core/__tests__/vnode.spec.ts b/packages/runtime-core/__tests__/vnode.spec.ts
index 653613ddb2e..a7f6a2d5684 100644
--- a/packages/runtime-core/__tests__/vnode.spec.ts
+++ b/packages/runtime-core/__tests__/vnode.spec.ts
@@ -2,6 +2,7 @@ import {
   Comment,
   Fragment,
   Text,
+  type VNode,
   cloneVNode,
   createBlock,
   createVNode,
@@ -63,6 +64,17 @@ describe('vnode', () => {
     })
   })
 
+  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,
+    })
+  })
+
   test('vnode keys', () => {
     for (const key of ['', 'a', 0, 1, NaN]) {
       expect(createVNode('div', { key }).key).toBe(key)
@@ -291,6 +303,16 @@ describe('vnode', () => {
     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)
   })
 
@@ -607,12 +629,14 @@ describe('vnode', () => {
       const vnode =
         (openBlock(),
         createBlock('div', null, [
-          setBlockTracking(-1),
+          setBlockTracking(-1, true),
           (vnode1 = (openBlock(), createBlock('div'))),
           setBlockTracking(1),
           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', () => {
diff --git a/packages/runtime-core/package.json b/packages/runtime-core/package.json
index f3cc413b697..5c2541c9ca5 100644
--- a/packages/runtime-core/package.json
+++ b/packages/runtime-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-core",
-  "version": "3.4.18",
+  "version": "3.5.18",
   "description": "@vue/runtime-core",
   "main": "index.js",
   "module": "dist/runtime-core.esm-bundler.js",
diff --git a/packages/runtime-core/src/apiAsyncComponent.ts b/packages/runtime-core/src/apiAsyncComponent.ts
index 4c6e4bad11b..ab4ab51b66a 100644
--- a/packages/runtime-core/src/apiAsyncComponent.ts
+++ b/packages/runtime-core/src/apiAsyncComponent.ts
@@ -4,6 +4,7 @@ import {
   type ComponentOptions,
   type ConcreteComponent,
   currentInstance,
+  getComponentName,
   isInSSRComponentSetup,
 } from './component'
 import { isFunction, isObject } from '@vue/shared'
@@ -14,7 +15,8 @@ import { warn } from './warning'
 import { ref } from '@vue/reactivity'
 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,6 +31,7 @@ export interface AsyncComponentOptions<T = any> {
   delay?: number
   timeout?: number
   suspensible?: boolean
+  hydrate?: HydrationStrategy
   onError?: (
     error: Error,
     retry: () => void,
@@ -53,6 +56,7 @@ export function defineAsyncComponent<
     loadingComponent,
     errorComponent,
     delay = 200,
+    hydrate: hydrateStrategy,
     timeout, // undefined = never times out
     suspensible = true,
     onError: userOnError,
@@ -117,12 +121,46 @@ export function defineAsyncComponent<
 
     __asyncLoader: load,
 
+    __asyncHydrate(el, instance, hydrate) {
+      let patched = false
+      ;(instance.bu || (instance.bu = [])).push(() => (patched = true))
+      const performHydrate = () => {
+        // skip hydration if the component has been patched
+        if (patched) {
+          if (__DEV__) {
+            warn(
+              `Skipping lazy hydration for component '${getComponentName(resolvedComp!) || resolvedComp!.__file}': ` +
+                `it was updated before lazy hydration performed.`,
+            )
+          }
+          return
+        }
+        hydrate()
+      }
+      const doHydrate = hydrateStrategy
+        ? () => {
+            const teardown = hydrateStrategy(performHydrate, cb =>
+              forEachElement(el, cb),
+            )
+            if (teardown) {
+              ;(instance.bum || (instance.bum = [])).push(teardown)
+            }
+          }
+        : performHydrate
+      if (resolvedComp) {
+        doHydrate()
+      } else {
+        load().then(() => !instance.isUnmounted && doHydrate())
+      }
+    },
+
     get __asyncResolved() {
       return resolvedComp
     },
 
     setup() {
       const instance = currentInstance!
+      markAsyncBoundary(instance)
 
       // already resolved
       if (resolvedComp) {
@@ -187,8 +225,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
-            instance.parent.effect.dirty = true
-            queueJob(instance.parent.update)
+            instance.parent.update()
           }
         })
         .catch(err => {
diff --git a/packages/runtime-core/src/apiComputed.ts b/packages/runtime-core/src/apiComputed.ts
index 97db0da453c..2ebb2d4e63a 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,
 ) => {
   // @ts-expect-error
-  return _computed(getterOrOptions, debugOptions, isInSSRComponentSetup)
+  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 c476cdbe701..b69a1ccd540 100644
--- a/packages/runtime-core/src/apiCreateApp.ts
+++ b/packages/runtime-core/src/apiCreateApp.ts
@@ -3,7 +3,7 @@ import {
   type ComponentInternalInstance,
   type ConcreteComponent,
   type Data,
-  getExposeProxy,
+  getComponentPublicInstance,
   validateComponentName,
 } from './component'
 import type {
@@ -22,11 +22,12 @@ import { warn } from './warning'
 import { type VNode, cloneVNode, createVNode } from './vnode'
 import type { RootHydrateFunction } from './hydration'
 import { devtoolsInitApp, devtoolsUnmountApp } from './devtools'
-import { NO, extend, isFunction, isObject } from '@vue/shared'
+import { NO, extend, hasOwn, isFunction, isObject } from '@vue/shared'
 import { version } from '.'
 import { installAppCompatProperties } from './compat/global'
 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> {
@@ -35,22 +36,54 @@ export interface App<HostElement = any> {
 
   use<Options extends unknown[]>(
     plugin: Plugin<Options>,
-    ...options: Options
+    ...options: NoInfer<Options>
   ): this
-  use<Options>(plugin: Plugin<Options>, options: Options): this
+  use<Options>(plugin: Plugin<Options>, options: NoInfer<Options>): this
 
   mixin(mixin: ComponentOptions): this
   component(name: string): Component | undefined
-  component(name: string, component: Component | DefineComponent): this
-  directive<T = any, V = any>(name: string): Directive<T, V> | undefined
-  directive<T = any, V = any>(name: string, directive: Directive<T, V>): 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,
+    /**
+     * @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>
@@ -110,6 +148,24 @@ export interface AppConfig {
    * @deprecated use config.compilerOptions.isCustomElement
    */
   isCustomElement?: (tag: string) => boolean
+
+  /**
+   * TODO document for 3.5
+   * Enable warnings for computed getters that recursively trigger itself.
+   */
+  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 {
@@ -159,9 +215,11 @@ export type ObjectPlugin<Options = any[]> = {
 export type FunctionPlugin<Options = any[]> = PluginInstallFunction<Options> &
   Partial<ObjectPlugin<Options>>
 
-export type Plugin<Options = any[]> =
-  | FunctionPlugin<Options>
-  | ObjectPlugin<Options>
+export type Plugin<
+  Options = any[],
+  // TODO: in next major Options extends unknown[] and remove P
+  P extends unknown[] = Options extends unknown[] ? Options : [Options],
+> = FunctionPlugin<P> | ObjectPlugin<P>
 
 export function createAppContext(): AppContext {
   return {
@@ -208,6 +266,7 @@ export function createAppAPI<HostElement>(
 
     const context = createAppContext()
     const installedPlugins = new WeakSet()
+    const pluginCleanupFns: Array<() => any> = []
 
     let isMounted = false
 
@@ -310,7 +369,7 @@ export function createAppAPI<HostElement>(
                 ` 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
@@ -324,13 +383,12 @@ export function createAppAPI<HostElement>(
           // HMR root reload
           if (__DEV__) {
             context.reload = () => {
+              const cloned = cloneVNode(vnode)
+              // avoid hydration for hmr updating
+              cloned.el = null
               // casting to ElementNamespace because TS doesn't guarantee type narrowing
               // over function boundaries
-              render(
-                cloneVNode(vnode),
-                rootContainer,
-                namespace as ElementNamespace,
-              )
+              render(cloned, rootContainer, namespace as ElementNamespace)
             }
           }
 
@@ -349,7 +407,7 @@ 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` +
@@ -360,8 +418,23 @@ export function createAppAPI<HostElement>(
         }
       },
 
+      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
@@ -375,10 +448,18 @@ export function createAppAPI<HostElement>(
 
       provide(key, value) {
         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.`,
-          )
+          if (hasOwn(context.provides, key as string | symbol)) {
+            warn(
+              `App already provides property with key "${String(key)}". ` +
+                `It will be overwritten with the new value.`,
+            )
+          } else {
+            // #13212, context.provides can inherit the provides object from parent on custom elements
+            warn(
+              `App already provides property with key "${String(key)}" inherited from its parent element. ` +
+                `It will be overwritten with the new value.`,
+            )
+          }
         }
 
         context.provides[key as string | symbol] = value
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index 47bcf9f2acb..2ce870f0141 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -3,16 +3,17 @@ import type {
   ComponentOptions,
   ComponentOptionsBase,
   ComponentOptionsMixin,
-  ComponentOptionsWithArrayProps,
-  ComponentOptionsWithObjectProps,
-  ComponentOptionsWithoutProps,
+  ComponentProvideOptions,
   ComputedOptions,
   MethodOptions,
   RenderFunction,
 } from './componentOptions'
 import type {
   AllowedComponentProps,
+  Component,
   ComponentCustomProps,
+  GlobalComponents,
+  GlobalDirectives,
   SetupContext,
 } from './component'
 import type {
@@ -21,14 +22,20 @@ import type {
   ExtractDefaultPropTypes,
   ExtractPropTypes,
 } from './componentProps'
-import type { EmitsOptions, EmitsToProps } from './componentEmits'
-import { extend, isFunction } from '@vue/shared'
+import type {
+  EmitsOptions,
+  EmitsToProps,
+  TypeEmitsToOptions,
+} from './componentEmits'
+import { type IsKeyValues, extend, isFunction } from '@vue/shared'
 import type { VNodeProps } from './vnode'
 import type {
   ComponentPublicInstanceConstructor,
-  CreateComponentPublicInstance,
+  CreateComponentPublicInstanceWithMixins,
 } from './componentPublicInstance'
 import type { SlotsType } from './componentSlots'
+import type { Directive } from './directives'
+import type { ComponentTypeEmits } from './apiSetupHelpers'
 
 export type PublicProps = VNodeProps &
   AllowedComponentProps &
@@ -55,8 +62,15 @@ export type DefineComponent<
   Props = ResolveProps<PropsOrPropOptions, E>,
   Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>,
   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
@@ -111,7 +161,7 @@ export function defineComponent<
     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 = {},
@@ -127,149 +177,127 @@ export function defineComponent<
     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
-  >,
-): DefineComponent<
-  Props,
-  RawBindings,
-  D,
-  C,
-  M,
-  Mixin,
-  Extends,
-  E,
-  EE,
-  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
-  >,
+    RuntimeEmitsOptions,
+    RuntimeEmitsKeys,
+    {}, // Defaults
+    InjectOptions,
+    InjectKeys,
+    Slots,
+    LocalComponents,
+    Directives,
+    Exposed,
+    Provide
+  > &
+    ThisType<
+      CreateComponentPublicInstanceWithMixins<
+        ToResolvedProps<InferredProps, ResolvedEmits>,
+        SetupBindings,
+        Data,
+        Computed,
+        Methods,
+        Mixin,
+        Extends,
+        ResolvedEmits,
+        {},
+        {},
+        false,
+        InjectOptions,
+        Slots,
+        LocalComponents,
+        Directives,
+        Exposed
+      >
+    >,
 ): DefineComponent<
-  PropsOptions,
-  RawBindings,
-  D,
-  C,
-  M,
+  InferredProps,
+  SetupBindings,
+  Data,
+  Computed,
+  Methods,
   Mixin,
   Extends,
-  E,
-  EE,
+  ResolvedEmits,
+  RuntimeEmitsKeys,
   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
@@ -279,9 +307,9 @@ export function defineComponent(
   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 f15983604bb..d5c97a52b83 100644
--- a/packages/runtime-core/src/apiInject.ts
+++ b/packages/runtime-core/src/apiInject.ts
@@ -1,15 +1,16 @@
 import { isFunction } from '@vue/shared'
-import { currentInstance } from './component'
-import { currentRenderingInstance } from './componentRenderContext'
+import { currentInstance, getCurrentInstance } from './component'
 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,
-) {
+): void {
   if (!currentInstance) {
     if (__DEV__) {
       warn(`provide() can only be used inside setup().`)
@@ -49,18 +50,23 @@ export function inject(
 ) {
   // fallback to `currentRenderingInstance` so that this can be called in
   // a functional component
-  const instance = currentInstance || currentRenderingInstance
+  const instance = getCurrentInstance()
 
   // also support looking up from app-level provides w/ `app.runWithContext()`
   if (instance || currentApp) {
     // #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
+    // #13212, for custom elements we must get injected values from its appContext
+    // as it already inherits the provides object from the parent element
+    let provides = currentApp
+      ? currentApp._context.provides
+      : instance
+        ? instance.parent == null || instance.ce
+          ? 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
@@ -83,5 +89,5 @@ export function inject(
  * user. One example is `useRoute()` in `vue-router`.
  */
 export function hasInjectionContext(): boolean {
-  return !!(currentInstance || currentRenderingInstance || currentApp)
+  return !!(getCurrentInstance() || currentApp)
 }
diff --git a/packages/runtime-core/src/apiLifecycle.ts b/packages/runtime-core/src/apiLifecycle.ts
index 741d43ec45c..b79a6d38a06 100644
--- a/packages/runtime-core/src/apiLifecycle.ts
+++ b/packages/runtime-core/src/apiLifecycle.ts
@@ -31,9 +31,6 @@ 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()
@@ -66,28 +63,44 @@ export function injectHook(
   }
 }
 
-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)
-
-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)
+    if (
+      !isInSSRComponentSetup ||
+      lifecycle === LifecycleHooks.SERVER_PREFETCH
+    ) {
+      injectHook(lifecycle, (...args: unknown[]) => hook(...args), target)
+    }
+  }
+type CreateHook<T = any> = (
+  hook: T,
+  target?: ComponentInternalInstance | null,
+) => void
 
-export type DebuggerHook = (e: DebuggerEvent) => void
-export const onRenderTriggered = createHook<DebuggerHook>(
-  LifecycleHooks.RENDER_TRIGGERED,
+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 onRenderTracked = createHook<DebuggerHook>(
-  LifecycleHooks.RENDER_TRACKED,
+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> =
+  createHook<DebuggerHook>(LifecycleHooks.RENDER_TRIGGERED)
+export const onRenderTracked: CreateHook<DebuggerHook> =
+  createHook<DebuggerHook>(LifecycleHooks.RENDER_TRACKED)
 
 export type ErrorCapturedHook<TError = unknown> = (
   err: TError,
@@ -98,6 +111,6 @@ export type ErrorCapturedHook<TError = unknown> = (
 export function onErrorCaptured<TError = Error>(
   hook: ErrorCapturedHook<TError>,
   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 e5f79444da0..209b3364cec 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -1,4 +1,5 @@
 import {
+  type IfAny,
   type LooseRequired,
   type Prettify,
   type UnionToIntersection,
@@ -16,8 +17,8 @@ import {
 } from './component'
 import type { EmitFn, EmitsOptions, ObjectEmitsOptions } from './componentEmits'
 import type {
+  ComponentOptionsBase,
   ComponentOptionsMixin,
-  ComponentOptionsWithoutProps,
   ComputedOptions,
   MethodOptions,
 } from './componentOptions'
@@ -116,7 +117,7 @@ type BooleanKey<T, K extends keyof T = keyof T> = K extends any
  * const emit = defineEmits<{
  *   // <eventName>: <expected arguments>
  *   change: []
- *   update: [value: string] // named tuple syntax
+ *   update: [value: number] // named tuple syntax
  * }>()
  *
  * emit('change')
@@ -135,9 +136,11 @@ export function defineEmits<EE extends string = string>(
 export function defineEmits<E extends EmitsOptions = EmitsOptions>(
   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__) {
@@ -146,6 +149,8 @@ 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,7 +175,7 @@ type ShortEmits<T extends Record<string, any>> = UnionToIntersection<
  */
 export function defineExpose<
   Exposed extends Record<string, any> = Record<string, any>,
->(exposed?: Exposed) {
+>(exposed?: Exposed): void {
   if (__DEV__) {
     warnRuntimeUsage(`defineExpose`)
   }
@@ -191,15 +196,33 @@ export function defineOptions<
   Mixin 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`)
@@ -215,12 +238,15 @@ export function defineSlots<
   return null as any
 }
 
-export type ModelRef<T, M extends string | number | symbol = string> = Ref<T> &
-  [ModelRef<T, M>, Record<M, true | undefined>]
+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> = {
-  get?: (v: T) => any
-  set?: (v: T) => any
+export type DefineModelOptions<T = any, G = T, S = T> = {
+  get?: (v: T) => G
+  set?: (v: S) => any
 }
 
 /**
@@ -233,7 +259,7 @@ export type DefineModelOptions<T = any> = {
  * 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 the returned ref behaves differently depending on whether the parent
+ * 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.
@@ -256,27 +282,28 @@ export type DefineModelOptions<T = any> = {
  * const count = defineModel<number>('count', { default: 0 })
  * ```
  */
-export function defineModel<T, M extends string | number | symbol = string>(
-  options: { required: true } & PropOptions<T> & DefineModelOptions<T>,
-): ModelRef<T, M>
-export function defineModel<T, M extends string | number | symbol = string>(
-  options: { default: any } & PropOptions<T> & DefineModelOptions<T>,
-): ModelRef<T, M>
-export function defineModel<T, M extends string | number | symbol = string>(
-  options?: PropOptions<T> & DefineModelOptions<T>,
-): ModelRef<T | undefined, M>
-export function defineModel<T, M extends string | number | symbol = string>(
-  name: string,
-  options: { required: true } & PropOptions<T> & DefineModelOptions<T>,
-): ModelRef<T, M>
-export function defineModel<T, M extends string | number | symbol = string>(
+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: { default: any } & PropOptions<T> & DefineModelOptions<T>,
-): ModelRef<T, M>
-export function defineModel<T, M extends string | number | symbol = string>(
+  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?: PropOptions<T> & DefineModelOptions<T>,
-): ModelRef<T | undefined, M>
+  options?: PropOptions<T> & DefineModelOptions<T, G, S>,
+): ModelRef<T | undefined, M, G | undefined, S | undefined>
+
 export function defineModel(): any {
   if (__DEV__) {
     warnRuntimeUsage('defineModel')
@@ -284,6 +311,9 @@ export function defineModel(): any {
 }
 
 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]>
@@ -299,19 +329,23 @@ 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
-    ? Defaults[K] extends undefined
-      ? T[K]
-      : NotUndefined<T[K]>
-    : never
-} & {
-  readonly [K in BKeys]-?: K extends keyof Defaults
-    ? Defaults[K] extends undefined
-      ? boolean | undefined
-      : boolean
-    : boolean
-}
+> = T extends unknown
+  ? 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
+          ? IfAny<Defaults[K], NotUndefined<T[K]>, T[K]>
+          : NotUndefined<T[K]>
+        : never
+    } & {
+      readonly [K in BKeys]-?: K extends keyof Defaults
+        ? Defaults[K] extends undefined
+          ? boolean | undefined
+          : boolean
+        : boolean
+    }
+  : never
 
 /**
  * Vue `<script setup>` compiler macro for providing props default values when
@@ -348,17 +382,17 @@ export function withDefaults<
 }
 
 export function useSlots(): SetupContext['slots'] {
-  return getContext().slots
+  return getContext('useSlots').slots
 }
 
 export function useAttrs(): SetupContext['attrs'] {
-  return getContext().attrs
+  return getContext('useAttrs').attrs
 }
 
-function getContext(): SetupContext {
+function getContext(calledFunctionName: string): SetupContext {
   const i = getCurrentInstance()!
   if (__DEV__ && !i) {
-    warn(`useContext() called without active instance.`)
+    warn(`${calledFunctionName}() called without active instance.`)
   }
   return i.setupContext || (i.setupContext = createSetupContext(i))
 }
@@ -368,7 +402,7 @@ function getContext(): SetupContext {
  */
 export function normalizePropsOrEmits(
   props: ComponentPropsOptions | EmitsOptions,
-) {
+): ComponentObjectPropsOptions | ObjectEmitsOptions {
   return isArray(props)
     ? props.reduce(
         (normalized, p) => ((normalized[p] = null), normalized),
@@ -416,7 +450,7 @@ export function mergeDefaults(
 export function mergeModels(
   a: 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))
@@ -461,7 +495,7 @@ export function createPropsRestProxy(
  * ```
  * @internal
  */
-export function withAsyncContext(getAwaitable: () => any) {
+export function withAsyncContext(getAwaitable: () => any): [any, () => void] {
   const ctx = getCurrentInstance()!
   if (__DEV__ && !ctx) {
     warn(
diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts
index bc10547824e..8f6168cdf29 100644
--- a/packages/runtime-core/src/apiWatch.ts
+++ b/packages/runtime-core/src/apiWatch.ts
@@ -1,96 +1,68 @@
 import {
-  type ComputedRef,
+  type WatchOptions as BaseWatchOptions,
   type DebuggerOptions,
-  type EffectScheduler,
-  ReactiveEffect,
-  ReactiveFlags,
-  type Ref,
-  getCurrentScope,
-  isReactive,
-  isRef,
-  isShallow,
+  type ReactiveMarker,
+  type WatchCallback,
+  type WatchEffect,
+  type WatchHandle,
+  type WatchSource,
+  watch as baseWatch,
 } from '@vue/reactivity'
-import { type SchedulerJob, queueJob } from './scheduler'
-import {
-  EMPTY_OBJ,
-  NOOP,
-  extend,
-  hasChanged,
-  isArray,
-  isFunction,
-  isMap,
-  isObject,
-  isPlainObject,
-  isSet,
-  isString,
-  remove,
-} from '@vue/shared'
+import { type SchedulerJob, SchedulerJobFlags, queueJob } from './scheduler'
+import { EMPTY_OBJ, NOOP, extend, isFunction, isString } from '@vue/shared'
 import {
   type ComponentInternalInstance,
   currentInstance,
   isInSSRComponentSetup,
   setCurrentInstance,
 } from './component'
-import {
-  ErrorCodes,
-  callWithAsyncErrorHandling,
-  callWithErrorHandling,
-} 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 type { ObjectWatchOptionItem } from './componentOptions'
 import { useSSRContext } from './helpers/useSsrContext'
 
-export type WatchEffect = (onCleanup: OnCleanup) => void
-
-export type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T)
+export type {
+  WatchHandle,
+  WatchStopHandle,
+  WatchEffect,
+  WatchSource,
+  WatchCallback,
+  OnCleanup,
+} from '@vue/reactivity'
 
-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,
-) {
+): WatchHandle {
   return doWatch(
     effect,
     null,
@@ -101,7 +73,7 @@ export function watchPostEffect(
 export function watchSyncEffect(
   effect: WatchEffect,
   options?: DebuggerOptions,
-) {
+): WatchHandle {
   return doWatch(
     effect,
     null,
@@ -109,39 +81,36 @@ export function watchSyncEffect(
   )
 }
 
-// initial value for watchers to trigger on undefined initial values
-const INITIAL_WATCHER_VALUE = {}
-
-type MultiWatchSources = (WatchSource<unknown> | object)[]
+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>,
+  cb: WatchCallback<T, MaybeUndefined<T, Immediate>>,
   options?: WatchOptions<Immediate>,
-): WatchStopHandle
+): WatchHandle
 
-// overload: array of multiple sources + cb
+// overload: reactive array or tuple of multiple sources + cb
 export function watch<
-  T extends MultiWatchSources,
+  T extends Readonly<MultiWatchSources>,
   Immediate extends Readonly<boolean> = false,
 >(
-  sources: [...T],
-  cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
+  sources: readonly [...T] | T,
+  cb: [T] extends [ReactiveMarker]
+    ? WatchCallback<T, MaybeUndefined<T, Immediate>>
+    : WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
   options?: WatchOptions<Immediate>,
-): WatchStopHandle
+): WatchHandle
 
-// overload: multiple sources w/ `as const`
-// watch([foo, bar] as const, () => {})
-// somehow [...T] breaks when the type is readonly
+// overload: array of multiple sources + cb
 export function watch<
-  T extends Readonly<MultiWatchSources>,
+  T extends MultiWatchSources,
   Immediate extends Readonly<boolean> = false,
 >(
-  source: T,
+  sources: [...T],
   cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
   options?: WatchOptions<Immediate>,
-): WatchStopHandle
+): WatchHandle
 
 // overload: watching reactive object w/ cb
 export function watch<
@@ -149,16 +118,16 @@ export function watch<
   Immediate extends Readonly<boolean> = false,
 >(
   source: T,
-  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  cb: WatchCallback<T, MaybeUndefined<T, Immediate>>,
   options?: WatchOptions<Immediate>,
-): WatchStopHandle
+): WatchHandle
 
 // implementation
 export function watch<T = any, Immediate extends Readonly<boolean> = false>(
   source: T | WatchSource<T>,
   cb: any,
   options?: WatchOptions<Immediate>,
-): WatchStopHandle {
+): WatchHandle {
   if (__DEV__ && !isFunction(cb)) {
     warn(
       `\`watch(fn, options?)\` signature has been moved to a separate API. ` +
@@ -172,30 +141,9 @@ export function watch<T = any, Immediate extends Readonly<boolean> = false>(
 function doWatch(
   source: WatchSource | WatchSource[] | WatchEffect | object,
   cb: WatchCallback | null,
-  {
-    immediate,
-    deep,
-    flush,
-    once,
-    onTrack,
-    onTrigger,
-  }: WatchOptions = EMPTY_OBJ,
-): WatchStopHandle {
-  if (cb && once) {
-    const _cb = cb
-    cb = (...args) => {
-      _cb(...args)
-      unwatch()
-    }
-  }
-
-  // TODO remove in 3.5
-  if (__DEV__ && deep !== void 0 && typeof deep === 'number') {
-    warn(
-      `watch() "deep" option with number value will be used as watch depth in future versions. ` +
-        `Please use a boolean instead to avoid potential breakage.`,
-    )
-  }
+  options: WatchOptions = EMPTY_OBJ,
+): WatchHandle {
+  const { immediate, deep, flush, once } = options
 
   if (__DEV__ && !cb) {
     if (immediate !== undefined) {
@@ -218,213 +166,74 @@ function doWatch(
     }
   }
 
-  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 instance = currentInstance
-  const reactiveGetter = (source: object) =>
-    deep === true
-      ? source // traverse will happen in wrapped getter below
-      : // for deep: false, only traverse root-level properties
-        traverse(source, deep === false ? 1 : undefined)
+  const baseWatchOptions: BaseWatchOptions = extend({}, options)
 
-  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 = () => 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 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 (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 || !effect.dirty) {
-      return
+  const instance = currentInstance
+  baseWatchOptions.call = (fn, type, args) =>
+    callWithAsyncErrorHandling(fn, instance, type, args)
+
+  // scheduler
+  let isPre = false
+  if (flush === 'post') {
+    baseWatchOptions.scheduler = job => {
+      queuePostRenderEffect(job, instance && instance.suspense)
     }
-    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 if (flush !== 'sync') {
+    // default: 'pre'
+    isPre = true
+    baseWatchOptions.scheduler = (job, isFirstRun) => {
+      if (isFirstRun) {
+        job()
+      } else {
+        queueJob(job)
       }
-    } else {
-      // watchEffect
-      effect.run()
     }
   }
 
-  // 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 {
-    // default: 'pre'
-    job.pre = true
-    if (instance) job.id = instance.uid
-    scheduler = () => queueJob(job)
-  }
-
-  const effect = new ReactiveEffect(getter, NOOP, scheduler)
-
-  const scope = getCurrentScope()
-  const unwatch = () => {
-    effect.stop()
-    if (scope) {
-      remove(scope.effects, effect)
+  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
+      }
     }
   }
 
-  if (__DEV__) {
-    effect.onTrack = onTrack
-    effect.onTrigger = onTrigger
-  }
+  const watchHandle = baseWatch(source, cb, baseWatchOptions)
 
-  // initial run
-  if (cb) {
-    if (immediate) {
-      job()
-    } else {
-      oldValue = effect.run()
+  if (__SSR__ && isInSSRComponentSetup) {
+    if (ssrCleanup) {
+      ssrCleanup.push(watchHandle)
+    } else if (runsImmediately) {
+      watchHandle()
     }
-  } else if (flush === 'post') {
-    queuePostRenderEffect(
-      effect.run.bind(effect),
-      instance && instance.suspense,
-    )
-  } else {
-    effect.run()
   }
 
-  if (__SSR__ && ssrCleanup) ssrCleanup.push(unwatch)
-  return unwatch
+  return watchHandle
 }
 
 // this.$watch
@@ -433,7 +242,7 @@ export function instanceWatch(
   source: string | Function,
   value: WatchCallback | ObjectWatchOptionItem,
   options?: WatchOptions,
-): WatchStopHandle {
+): WatchHandle {
   const publicThis = this.proxy as any
   const getter = isString(source)
     ? source.includes('.')
@@ -455,7 +264,7 @@ export function instanceWatch(
 
 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]]
@@ -463,43 +272,3 @@ export function createPathGetter(ctx: any, path: string) {
     return cur
   }
 }
-
-export function traverse(
-  value: unknown,
-  depth?: number,
-  currentDepth = 0,
-  seen?: Set<unknown>,
-) {
-  if (!isObject(value) || (value as any)[ReactiveFlags.SKIP]) {
-    return value
-  }
-
-  if (depth && depth > 0) {
-    if (currentDepth >= depth) {
-      return value
-    }
-    currentDepth++
-  }
-
-  seen = seen || new Set()
-  if (seen.has(value)) {
-    return value
-  }
-  seen.add(value)
-  if (isRef(value)) {
-    traverse(value.value, depth, currentDepth, seen)
-  } else if (isArray(value)) {
-    for (let i = 0; i < value.length; i++) {
-      traverse(value[i], depth, currentDepth, seen)
-    }
-  } else if (isSet(value) || isMap(value)) {
-    value.forEach((v: any) => {
-      traverse(v, depth, currentDepth, seen)
-    })
-  } else if (isPlainObject(value)) {
-    for (const key in value) {
-      traverse(value[key], depth, currentDepth, seen)
-    }
-  }
-  return value
-}
diff --git a/packages/runtime-core/src/compat/compatConfig.ts b/packages/runtime-core/src/compat/compatConfig.ts
index d0a04d3af45..de62873ff02 100644
--- a/packages/runtime-core/src/compat/compatConfig.ts
+++ b/packages/runtime-core/src/compat/compatConfig.ts
@@ -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
   }
@@ -502,21 +502,21 @@ export const globalCompatConfig: CompatConfig = {
   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,
-) {
+): void {
   if (seenConfigObjects.has(config)) {
     return
   }
@@ -554,7 +554,7 @@ export function validateCompatConfig(
 export function getCompatConfigForKey(
   key: DeprecationTypes | 'MODE',
   instance: ComponentInternalInstance | null,
-) {
+): CompatConfig[DeprecationTypes | 'MODE'] {
   const instanceConfig =
     instance && (instance.type as ComponentOptions).compatConfig
   if (instanceConfig && key in instanceConfig) {
@@ -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)
diff --git a/packages/runtime-core/src/compat/component.ts b/packages/runtime-core/src/compat/component.ts
index 84a76eb73a1..da12e60c58b 100644
--- a/packages/runtime-core/src/compat/component.ts
+++ b/packages/runtime-core/src/compat/component.ts
@@ -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
   }
 
diff --git a/packages/runtime-core/src/compat/componentAsync.ts b/packages/runtime-core/src/compat/componentAsync.ts
index 4621cd2e878..b6bd6dd4b94 100644
--- a/packages/runtime-core/src/compat/componentAsync.ts
+++ b/packages/runtime-core/src/compat/componentAsync.ts
@@ -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)!
   }
diff --git a/packages/runtime-core/src/compat/componentFunctional.ts b/packages/runtime-core/src/compat/componentFunctional.ts
index c2fbcbe2564..764b932ba77 100644
--- a/packages/runtime-core/src/compat/componentFunctional.ts
+++ b/packages/runtime-core/src/compat/componentFunctional.ts
@@ -19,7 +19,9 @@ export const legacySlotProxyHandlers: ProxyHandler<InternalSlots> = {
   },
 }
 
-export function convertLegacyFunctionalComponent(comp: ComponentOptions) {
+export function convertLegacyFunctionalComponent(
+  comp: ComponentOptions,
+): FunctionalComponent {
   if (normalizedFunctionalComponentMap.has(comp)) {
     return normalizedFunctionalComponentMap.get(comp)!
   }
diff --git a/packages/runtime-core/src/compat/componentVModel.ts b/packages/runtime-core/src/compat/componentVModel.ts
index e8523496ee3..7a9fea9bff8 100644
--- a/packages/runtime-core/src/compat/componentVModel.ts
+++ b/packages/runtime-core/src/compat/componentVModel.ts
@@ -13,7 +13,7 @@ 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) {
@@ -68,7 +68,7 @@ export function compatModelEmit(
   instance: ComponentInternalInstance,
   event: string,
   args: any[],
-) {
+): void {
   if (!isCompatEnabled(DeprecationTypes.COMPONENT_V_MODEL, instance)) {
     return
   }
diff --git a/packages/runtime-core/src/compat/data.ts b/packages/runtime-core/src/compat/data.ts
index 72c7314ee0f..3c0ae6891f3 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 5bf234fcf45..edc57436a56 100644
--- a/packages/runtime-core/src/compat/global.ts
+++ b/packages/runtime-core/src/compat/global.ts
@@ -77,7 +77,12 @@ 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
@@ -97,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.
    */
@@ -176,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
   }
@@ -328,7 +333,7 @@ export function installAppCompatProperties(
   app: App,
   context: AppContext,
   render: RootRenderFunction<any>,
-) {
+): void {
   installFilterMethod(app, context)
   installLegacyOptionMergeStrats(app.config)
 
@@ -427,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)!,
         )
       }
     }
@@ -544,7 +548,7 @@ function installCompatMount(
       }
 
       // clear content before mounting
-      container.innerHTML = ''
+      container.textContent = ''
 
       // TODO hydration
       render(vnode, container, namespace)
@@ -618,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-expect-error
+      methodsToPatch.forEach((m: any) => {
         val[m] = (...args: any[]) => {
-          // @ts-expect-error
-          Array.prototype[m].call(reactiveVal, ...args)
+          Array.prototype[m].apply(reactiveVal, args)
         }
       })
     } else {
diff --git a/packages/runtime-core/src/compat/globalConfig.ts b/packages/runtime-core/src/compat/globalConfig.ts
index 8c4afa7a766..65b5822b444 100644
--- a/packages/runtime-core/src/compat/globalConfig.ts
+++ b/packages/runtime-core/src/compat/globalConfig.ts
@@ -36,7 +36,7 @@ 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,
@@ -62,7 +62,7 @@ export function installLegacyConfigWarnings(config: AppConfig) {
   })
 }
 
-export function installLegacyOptionMergeStrats(config: AppConfig) {
+export function installLegacyOptionMergeStrats(config: AppConfig): void {
   config.optionMergeStrategies = new Proxy({} as any, {
     get(target, key) {
       if (key in target) {
diff --git a/packages/runtime-core/src/compat/instance.ts b/packages/runtime-core/src/compat/instance.ts
index 5beaf5f5ebb..c650113f8ec 100644
--- a/packages/runtime-core/src/compat/instance.ts
+++ b/packages/runtime-core/src/compat/instance.ts
@@ -15,6 +15,7 @@ import {
   DeprecationTypes,
   assertCompatEnabled,
   isCompatEnabled,
+  warnDeprecation,
 } from './compatConfig'
 import { off, on, once } from './instanceEventEmitter'
 import { getCompatListeners } from './instanceListeners'
@@ -35,16 +36,22 @@ import {
   legacyresolveScopedSlots,
 } from './renderHelpers'
 import { resolveFilter } from '../helpers/resolveAssets'
-import type { InternalSlots, Slots } from '../componentSlots'
-import type { 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]
@@ -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),
@@ -121,50 +123,77 @@ export function installCompatInstanceProperties(map: PublicPropertiesMap) {
 
     $children: getCompatChildren,
     $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,
-
-      // 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,
-
-      // 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)
+  const privateAPIs = {
+    // needed by many libs / render fns
+    $vnode: i => i.vnode,
+
+    // 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
+
+  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/instanceEventEmitter.ts b/packages/runtime-core/src/compat/instanceEventEmitter.ts
index a8d3f52518b..2c99e6c53b4 100644
--- a/packages/runtime-core/src/compat/instanceEventEmitter.ts
+++ b/packages/runtime-core/src/compat/instanceEventEmitter.ts
@@ -2,12 +2,13 @@ import { isArray } from '@vue/shared'
 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
 >()
@@ -26,7 +27,7 @@ export function on(
   instance: ComponentInternalInstance,
   event: string | string[],
   fn: Function,
-) {
+): ComponentPublicInstance | null {
   if (isArray(event)) {
     event.forEach(e => on(instance, e, fn))
   } else {
@@ -49,10 +50,10 @@ export function once(
   instance: ComponentInternalInstance,
   event: string,
   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)
@@ -63,7 +64,7 @@ export function off(
   instance: ComponentInternalInstance,
   event?: string | string[],
   fn?: Function,
-) {
+): ComponentPublicInstance | null {
   assertCompatEnabled(DeprecationTypes.INSTANCE_EVENT_EMITTER, instance)
   const vm = instance.proxy
   // all
@@ -94,7 +95,7 @@ export function emit(
   instance: ComponentInternalInstance,
   event: string,
   args: any[],
-) {
+): ComponentPublicInstance | null {
   const cbs = getRegistry(instance)[event]
   if (cbs) {
     callWithAsyncErrorHandling(
diff --git a/packages/runtime-core/src/compat/instanceListeners.ts b/packages/runtime-core/src/compat/instanceListeners.ts
index e01b72411d3..faf061812be 100644
--- a/packages/runtime-core/src/compat/instanceListeners.ts
+++ b/packages/runtime-core/src/compat/instanceListeners.ts
@@ -2,7 +2,9 @@ import { isOn } from '@vue/shared'
 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 0330e33aa15..3d79be697f5 100644
--- a/packages/runtime-core/src/compat/props.ts
+++ b/packages/runtime-core/src/compat/props.ts
@@ -11,7 +11,7 @@ export function createPropsDefaultThis(
   instance: ComponentInternalInstance,
   rawProps: Data,
   propKey: string,
-) {
+): object {
   return new Proxy(
     {},
     {
diff --git a/packages/runtime-core/src/compat/renderFn.ts b/packages/runtime-core/src/compat/renderFn.ts
index 52a19d08f8e..49646eda487 100644
--- a/packages/runtime-core/src/compat/renderFn.ts
+++ b/packages/runtime-core/src/compat/renderFn.ts
@@ -39,7 +39,9 @@ import {
 } 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
 
@@ -170,7 +172,7 @@ export function compatH(
   }
 }
 
-const skipLegacyRootLevelProps = /*#__PURE__*/ makeMap(
+const skipLegacyRootLevelProps = /*@__PURE__*/ makeMap(
   'staticStyle,staticClass,directives,model,hook',
 )
 
@@ -303,8 +305,8 @@ 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,
@@ -344,4 +346,5 @@ export function defineLegacyVNodeProperties(vnode: VNode) {
       },
     })
   }
+  /* v8 ignore stop */
 }
diff --git a/packages/runtime-core/src/compat/renderHelpers.ts b/packages/runtime-core/src/compat/renderHelpers.ts
index 56dad6238c8..ac810087772 100644
--- a/packages/runtime-core/src/compat/renderHelpers.ts
+++ b/packages/runtime-core/src/compat/renderHelpers.ts
@@ -7,7 +7,7 @@ import {
   isReservedProp,
   normalizeClass,
 } from '@vue/shared'
-import type { ComponentInternalInstance } from '../component'
+import type { ComponentInternalInstance, Data } from '../component'
 import type { Slot } from '../componentSlots'
 import { createSlots } from '../helpers/createSlots'
 import { renderSlot } from '../helpers/renderSlot'
@@ -30,7 +30,7 @@ export function legacyBindObjectProps(
   value: any,
   _asProp: 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))
 }
 
@@ -72,7 +72,7 @@ export function legacyRenderSlot(
   fallback?: VNode[],
   props?: any,
   bindObject?: any,
-) {
+): VNode {
   if (bindObject) {
     props = mergeProps(props, bindObject)
   }
@@ -92,7 +92,7 @@ export function legacyresolveScopedSlots(
   raw?: Record<string, Slot>,
   // the following are added in 2.6
   hasDynamicKeys?: boolean,
-) {
+): ReturnType<typeof createSlots> {
   // v2 default slot doesn't have name
   return createSlots(
     raw || ({ $stable: !hasDynamicKeys } as any),
@@ -114,7 +114,7 @@ function mapKeyToName(slots: LegacyScopedSlotsData) {
   return slots as any
 }
 
-const staticCacheMap = /*#__PURE__*/ new WeakMap<
+const staticCacheMap = /*@__PURE__*/ new WeakMap<
   ComponentInternalInstance,
   any[]
 >()
@@ -122,7 +122,7 @@ const staticCacheMap = /*#__PURE__*/ new WeakMap<
 export function legacyRenderStatic(
   instance: ComponentInternalInstance,
   index: number,
-) {
+): any {
   let cache = staticCacheMap.get(instance)
   if (!cache) {
     staticCacheMap.set(instance, (cache = []))
@@ -142,7 +142,7 @@ export function legacyCheckKeyCodes(
   builtInKeyCode?: number | number[],
   eventKeyName?: 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 ed1f8efee52..60552d736d5 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -45,6 +45,7 @@ import { type Directive, validateDirectiveName } from './directives'
 import {
   type ComponentOptions,
   type ComputedOptions,
+  type MergedComponentOptions,
   type MethodOptions,
   applyOptions,
   resolveMergedOptions,
@@ -61,7 +62,6 @@ import {
 import {
   EMPTY_OBJ,
   type IfAny,
-  NO,
   NOOP,
   ShapeFlags,
   extend,
@@ -86,6 +86,16 @@ import {
 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>
 
 /**
@@ -94,7 +104,7 @@ export type Data = Record<string, unknown>
  * the usage of `InstanceType<typeof Comp>` which only works for
  * constructor-based component definition types.
  *
- * Exmaple:
+ * @example
  * ```ts
  * const MyComp = { ... }
  * declare const instance: ComponentInstance<typeof MyComp>
@@ -105,20 +115,23 @@ export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance }
   : T extends FunctionalComponent<infer Props, infer Emits>
     ? ComponentPublicInstance<Props, {}, {}, {}, {}, ShortEmitsToObject<Emits>>
     : T extends Component<
-          infer Props,
+          infer PropsOrInstance,
           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
-        >
+      ? PropsOrInstance extends { $props: unknown }
+        ? // T is returned by `defineComponent()`
+          PropsOrInstance
+        : // NOTE we override Props/RawBindings/D to make sure is not `unknown`
+          ComponentPublicInstance<
+            unknown extends PropsOrInstance ? {} : PropsOrInstance,
+            unknown extends RawBindings ? {} : RawBindings,
+            unknown extends D ? {} : D,
+            C,
+            M
+          >
       : never // not a vue Component
 
 /**
@@ -126,6 +139,45 @@ export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance }
  */
 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
  */
@@ -210,7 +262,7 @@ export type ConcreteComponent<
  * The constructor type is an artificial type returned by defineComponent().
  */
 export type Component<
-  Props = any,
+  PropsOrInstance = any,
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
@@ -218,12 +270,12 @@ export type Component<
   E extends EmitsOptions | Record<string, any[]> = {},
   S extends Record<string, any> = any,
 > =
-  | ConcreteComponent<Props, RawBindings, D, C, M, E, S>
-  | ComponentPublicInstanceConstructor<Props>
+  | ConcreteComponent<PropsOrInstance, RawBindings, D, C, M, E, S>
+  | ComponentPublicInstanceConstructor<PropsOrInstance>
 
 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<
@@ -234,7 +286,9 @@ export type SetupContext<
       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
 
@@ -286,9 +340,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
@@ -304,6 +362,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
@@ -320,7 +385,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
@@ -353,7 +418,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
@@ -394,9 +464,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
@@ -518,13 +585,19 @@ export interface ComponentInternalInstance {
    * For updating css vars on contained teleports
    * @internal
    */
-  ut?: (vars?: Record<string, string>) => void
+  ut?: (vars?: Record<string, unknown>) => void
 
   /**
    * dev only. For style v-bind hydration mismatch checks
    * @internal
    */
-  getCssVars?: () => Record<string, string>
+  getCssVars?: () => Record<string, unknown>
+
+  /**
+   * v2 compat only, for caching mutated $options
+   * @internal
+   */
+  resolvedOptions?: MergedComponentOptions
 }
 
 const emptyAppContext = createAppContext()
@@ -535,7 +608,7 @@ export function createComponentInstance(
   vnode: VNode,
   parent: ComponentInternalInstance | null,
   suspense: SuspenseBoundary | null,
-) {
+): ComponentInternalInstance {
   const type = vnode.type as ConcreteComponent
   // inherit parent app context - or - if root, adopt from root vnode
   const appContext =
@@ -552,13 +625,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: [],
 
@@ -590,9 +666,6 @@ export function createComponentInstance(
     setupState: EMPTY_OBJ,
     setupContext: null,
 
-    attrsProxy: null,
-    slotsProxy: null,
-
     // suspense related
     suspense,
     suspenseId: suspense ? suspense.pendingId : 0,
@@ -694,29 +767,33 @@ export const setCurrentInstance = (instance: ComponentInternalInstance) => {
   const prev = currentInstance
   internalSetCurrentInstance(instance)
   instance.scope.on()
-  return () => {
+  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,
     )
   }
 }
 
-export function isStatefulComponent(instance: ComponentInternalInstance) {
+export function isStatefulComponent(
+  instance: ComponentInternalInstance,
+): number {
   return instance.vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
 }
 
@@ -725,13 +802,14 @@ export let isInSSRComponentSetup = false
 export function setupComponent(
   instance: ComponentInternalInstance,
   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 || isSSR)
 
   const setupResult = isStateful
     ? setupStatefulComponent(instance, isSSR)
@@ -774,19 +852,17 @@ function setupStatefulComponent(
   // 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)
   }
   // 2. call setup()
   const { setup } = Component
   if (setup) {
+    pauseTracking()
     const setupContext = (instance.setupContext =
       setup.length > 1 ? createSetupContext(instance) : null)
-
     const reset = setCurrentInstance(instance)
-    pauseTracking()
     const setupResult = callWithErrorHandling(
       setup,
       instance,
@@ -796,10 +872,16 @@ function setupStatefulComponent(
         setupContext,
       ],
     )
+    const isAsyncSetup = isPromise(setupResult)
     resetTracking()
     reset()
 
-    if (isPromise(setupResult)) {
+    if ((isAsyncSetup || instance.sp) && !isAsyncWrapper(instance)) {
+      // async setup / serverPrefetch, mark as async boundary for useId()
+      markAsyncBoundary(instance)
+    }
+
+    if (isAsyncSetup) {
       setupResult.then(unsetCurrentInstance, unsetCurrentInstance)
       if (isSSR) {
         // return the promise so server-renderer can wait on it
@@ -841,7 +923,7 @@ export function handleSetupResult(
   instance: ComponentInternalInstance,
   setupResult: unknown,
   isSSR: boolean,
-) {
+): void {
   if (isFunction(setupResult)) {
     // setup returned an inline render function
     if (__SSR__ && (instance.type as ComponentOptions).__ssrInlineRender) {
@@ -889,7 +971,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) {
@@ -899,13 +981,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,
-) {
+): void {
   const Component = instance.type as ComponentOptions
 
   if (__COMPAT__) {
@@ -927,7 +1009,7 @@ export function finishComponentSetup(
           instance.vnode.props &&
           instance.vnode.props['inline-template']) ||
         Component.template ||
-        resolveMergedOptions(instance).template
+        (__FEATURE_OPTIONS_API__ && resolveMergedOptions(instance).template)
       if (template) {
         if (__DEV__) {
           startMeasure(instance, `compile`)
@@ -985,8 +1067,8 @@ export function finishComponentSetup(
   // 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.` +
@@ -998,56 +1080,46 @@ export function finishComponentSetup(
                 ? ` Use "vue.global.js" instead.`
                 : ``) /* 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(
@@ -1080,12 +1152,17 @@ 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)
@@ -1094,9 +1171,7 @@ export function createSetupContext(
     })
   } else {
     return {
-      get attrs() {
-        return getAttrsProxy(instance)
-      },
+      attrs: new Proxy(instance.attrs, attrsProxyHandlers),
       slots: instance.slots,
       emit: instance.emit,
       expose,
@@ -1104,7 +1179,9 @@ export function createSetupContext(
   }
 }
 
-export function getExposeProxy(instance: ComponentInternalInstance) {
+export function getComponentPublicInstance(
+  instance: ComponentInternalInstance,
+): ComponentPublicInstance | ComponentInternalInstance['exposed'] | null {
   if (instance.exposed) {
     return (
       instance.exposeProxy ||
@@ -1121,6 +1198,8 @@ export function getExposeProxy(instance: ComponentInternalInstance) {
         },
       }))
     )
+  } else {
+    return instance.proxy
   }
 }
 
@@ -1137,7 +1216,6 @@ export function getComponentName(
     : Component.name || (includeInferred && Component.__name)
 }
 
-/* istanbul ignore next */
 export function formatComponentName(
   instance: ComponentInternalInstance | null,
   Component: ConcreteComponent,
@@ -1173,3 +1251,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 4551235bc5a..c03bead3a92 100644
--- a/packages/runtime-core/src/componentEmits.ts
+++ b/packages/runtime-core/src/componentEmits.ts
@@ -1,5 +1,6 @@
 import {
   EMPTY_OBJ,
+  type OverloadParameters,
   type UnionToIntersection,
   camelize,
   extend,
@@ -28,6 +29,9 @@ import {
   compatModelEmit,
   compatModelEventPrefix,
 } from './compat/componentVModel'
+import type { ComponentTypeEmits } from './apiSetupHelpers'
+import { getModelModifiers } from './helpers/useModel'
+import type { ComponentPublicInstance } from './componentPublicInstance'
 
 export type ObjectEmitsOptions = Record<
   string,
@@ -36,23 +40,48 @@ export type ObjectEmitsOptions = Record<
 
 export type EmitsOptions = ObjectEmitsOptions | string[]
 
-export type EmitsToProps<T extends EmitsOptions> = T extends string[]
-  ? {
-      [K in `on${Capitalize<T[number]>}`]?: (...args: any[]) => any
-    }
-  : T extends ObjectEmitsOptions
+export type EmitsToProps<T extends EmitsOptions | ComponentTypeEmits> =
+  T extends string[]
     ? {
-        [K in `on${Capitalize<string & keyof T>}`]?: K extends `on${infer C}`
-          ? (
-              ...args: T[Uncapitalize<C>] extends (...args: infer P) => any
-                ? P
-                : T[Uncapitalize<C>] extends null
-                  ? any[]
-                  : 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[]>
@@ -83,7 +112,7 @@ export function emit(
   instance: ComponentInternalInstance,
   event: string,
   ...rawArgs: any[]
-) {
+): ComponentPublicInstance | null | undefined {
   if (instance.isUnmounted) return
   const props = instance.vnode.props || EMPTY_OBJ
 
@@ -101,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 {
@@ -122,19 +151,19 @@ export function emit(
   }
 
   let args = rawArgs
-  const isModelListener = event.startsWith('update:')
+  const isCompatModelListener =
+    __COMPAT__ && compatModelEventPrefix + event in props
+  const isModelListener = isCompatModelListener || event.startsWith('update:')
+  const modifiers = isCompatModelListener
+    ? props.modelModifiers
+    : isModelListener && getModelModifiers(props, event.slice(7))
 
   // 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) {
+  if (modifiers) {
+    if (modifiers.trim) {
       args = rawArgs.map(a => (isString(a) ? a.trim() : a))
     }
-    if (number) {
+    if (modifiers.number) {
       args = rawArgs.map(looseToNumber)
     }
   }
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index 65b952b0b51..25d21477cfc 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -1,11 +1,12 @@
-import type {
-  Component,
-  ComponentInternalInstance,
-  ComponentInternalOptions,
-  ConcreteComponent,
-  Data,
-  InternalRenderFunction,
-  SetupContext,
+import {
+  type Component,
+  type ComponentInternalInstance,
+  type ComponentInternalOptions,
+  type ConcreteComponent,
+  type Data,
+  type InternalRenderFunction,
+  type SetupContext,
+  currentInstance,
 } from './component'
 import {
   type LooseRequired,
@@ -18,7 +19,7 @@ import {
   isPromise,
   isString,
 } from '@vue/shared'
-import { type Ref, isRef } from '@vue/reactivity'
+import { type Ref, getCurrentScope, isRef, traverse } from '@vue/reactivity'
 import { computed } from './apiComputed'
 import {
   type WatchCallback,
@@ -54,11 +55,15 @@ import type {
   ExtractDefaultPropTypes,
   ExtractPropTypes,
 } from './componentProps'
-import type { EmitsOptions, EmitsToProps } from './componentEmits'
+import type {
+  EmitsOptions,
+  EmitsToProps,
+  TypeEmitsToOptions,
+} from './componentEmits'
 import type { Directive } from './directives'
 import {
   type ComponentPublicInstance,
-  type CreateComponentPublicInstance,
+  type CreateComponentPublicInstanceWithMixins,
   type IntersectionMixin,
   type UnwrapMixinsType,
   isReservedPrefix,
@@ -67,7 +72,7 @@ import { warn } from './warning'
 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 {
   type CompatConfig,
   isCompatEnabled,
@@ -76,14 +81,18 @@ import {
 import type { OptionMergeFunction } from './apiCreateApp'
 import { LifecycleHooks } from './enums'
 import type { SlotsType } from './componentSlots'
-import { normalizePropsOrEmits } from './apiSetupHelpers'
+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,
@@ -112,7 +121,11 @@ export interface ComponentOptionsBase<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-> extends LegacyOptions<Props, D, C, M, Mixin, Extends, I, II>,
+  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?: (
@@ -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 -----------------------------------------------------
@@ -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,151 +236,6 @@ export interface RuntimeCompilerOptions {
   delimiters?: [string, string]
 }
 
-export type ComponentOptionsWithoutProps<
-  Props = {},
-  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 = {},
-  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>,
-> = ComponentOptionsBase<
-  Props,
-  RawBindings,
-  D,
-  C,
-  M,
-  Mixin,
-  Extends,
-  E,
-  EE,
-  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,
@@ -365,7 +245,15 @@ export type ComponentOptions<
   Mixin extends ComponentOptionsMixin = any,
   Extends extends ComponentOptionsMixin = any,
   E extends EmitsOptions = any,
-  S extends SlotsType = any,
+  EE extends string = string,
+  Defaults = {},
+  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,
 > = ComponentOptionsBase<
   Props,
   RawBindings,
@@ -375,11 +263,18 @@ export type ComponentOptions<
   Mixin,
   Extends,
   E,
-  string,
-  S
+  EE,
+  Defaults,
+  I,
+  II,
+  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
 >
 
@@ -464,6 +371,7 @@ interface LegacyOptions<
   Extends extends ComponentOptionsMixin,
   I extends ComponentInjectOptions,
   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,
       {},
       {},
@@ -497,7 +405,7 @@ interface LegacyOptions<
   computed?: C
   methods?: M
   watch?: ComponentWatchOptions
-  provide?: ComponentProvideOptions
+  provide?: Provide
   inject?: I | II[]
 
   // assets
@@ -508,20 +416,20 @@ interface LegacyOptions<
   extends?: Extends
 
   // lifecycle
-  beforeCreate?(): void
-  created?(): void
-  beforeMount?(): void
-  mounted?(): void
-  beforeUpdate?(): void
-  updated?(): void
-  activated?(): void
-  deactivated?(): void
+  beforeCreate?(): any
+  created?(): any
+  beforeMount?(): any
+  mounted?(): any
+  beforeUpdate?(): any
+  updated?(): any
+  activated?(): any
+  deactivated?(): any
   /** @deprecated use `beforeUnmount` instead */
-  beforeDestroy?(): void
-  beforeUnmount?(): void
+  beforeDestroy?(): any
+  beforeUnmount?(): any
   /** @deprecated use `unmounted` instead */
-  destroyed?(): void
-  unmounted?(): void
+  destroyed?(): any
+  unmounted?(): any
   renderTracked?: DebuggerHook
   renderTriggered?: DebuggerHook
   errorCaptured?: ErrorCapturedHook
@@ -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
@@ -848,6 +756,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
         Object.defineProperty(exposed, key, {
           get: () => publicThis[key],
           set: val => (publicThis[key] = val),
+          enumerable: true,
         })
       })
     } else if (!instance.exposed) {
@@ -874,13 +783,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,
-) {
+): void {
   if (isArray(injectOptions)) {
     injectOptions = normalizeInject(injectOptions)!
   }
@@ -936,19 +849,56 @@ export function createWatcher(
   ctx: Data,
   publicThis: ComponentPublicInstance,
   key: string,
-) {
-  const getter = key.includes('.')
+): 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 +907,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)
       }
@@ -1019,7 +969,7 @@ export function mergeOptions(
   from: any,
   strats: Record<string, OptionMergeFunction>,
   asMixin = false,
-) {
+): any {
   if (__COMPAT__ && isFunction(from)) {
     from = from.options
   }
@@ -1171,3 +1121,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 d1822a1638d..775eb8b6728 100644
--- a/packages/runtime-core/src/componentProps.ts
+++ b/packages/runtime-core/src/componentProps.ts
@@ -12,7 +12,6 @@ import {
   PatchFlags,
   camelize,
   capitalize,
-  def,
   extend,
   hasOwn,
   hyphenate,
@@ -34,12 +33,12 @@ import {
   setCurrentInstance,
 } from './component'
 import { isEmitListener } from './componentEmits'
-import { InternalObjectKey } from './vnode'
 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>
@@ -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 & {} }
@@ -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
 
@@ -140,7 +143,9 @@ type InferPropType<T> = [T] extends [null]
 export type ExtractPropTypes<O> = {
   // use `keyof Pick<O, RequiredKeys<O>>` instead of `RequiredKeys<O>` to
   // support IDE features
-  [K in keyof Pick<O, RequiredKeys<O>>]: InferPropType<O[K]>
+  [K in keyof Pick<O, RequiredKeys<O>>]: O[K] extends { default: any }
+    ? Exclude<InferPropType<O[K]>, undefined>
+    : InferPropType<O[K]>
 } & {
   // use `keyof Pick<O, OptionalKeys<O>>` instead of `OptionalKeys<O>` to
   // support IDE features
@@ -175,12 +180,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)
@@ -192,10 +195,9 @@ export function initProps(
   rawProps: Data | null,
   isStateful: number, // result of bitwise flag comparison
   isSSR = false,
-) {
+): void {
   const props: Data = {}
-  const attrs: Data = {}
-  def(attrs, InternalObjectKey, 1)
+  const attrs: Data = createInternalObject()
 
   instance.propsDefaults = Object.create(null)
 
@@ -240,7 +242,7 @@ export function updateProps(
   rawProps: Data | null,
   rawPrevProps: Data | null,
   optimized: boolean,
-) {
+): void {
   const {
     props,
     attrs,
@@ -361,7 +363,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__) {
@@ -482,6 +484,10 @@ function resolvePropValue(
       } 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 +504,15 @@ function resolvePropValue(
   return value
 }
 
+const mixinPropsCache = new WeakMap<ConcreteComponent, NormalizedPropsOptions>()
+
 export function normalizePropsOptions(
   comp: ConcreteComponent,
   appContext: AppContext,
   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 +572,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)
         }
       }
     }
@@ -594,27 +623,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 getType(ctor: Prop<any> | null): string {
+  // Early return for null to avoid unnecessary computations
+  if (ctor === null) {
+    return 'null'
+  }
 
-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
+  // 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 || ''
   }
-  return -1
+
+  // Fallback for other types (though they're less likely to have meaningful names here)
+  return ''
 }
 
 /**
@@ -627,6 +656,7 @@ function validateProps(
 ) {
   const resolvedValues = toRaw(props)
   const options = instance.propsOptions[0]
+  const camelizePropsKey = Object.keys(rawProps).map(key => camelize(key))
   for (const key in options) {
     let opt = options[key]
     if (opt == null) continue
@@ -635,7 +665,7 @@ function validateProps(
       resolvedValues[key],
       opt,
       __DEV__ ? shallowReadonly(resolvedValues) : resolvedValues,
-      !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key)),
+      !camelizePropsKey.includes(key),
     )
   }
 }
@@ -682,7 +712,7 @@ function validateProp(
   }
 }
 
-const isSimpleType = /*#__PURE__*/ makeMap(
+const isSimpleType = /*@__PURE__*/ makeMap(
   'String,Number,Boolean,Function,Symbol,BigInt',
 )
 
@@ -694,24 +724,27 @@ 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,
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index 5b2b4f2303d..e9e7770ebd9 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -1,11 +1,13 @@
 import {
+  type Component,
   type ComponentInternalInstance,
   type Data,
-  getExposeProxy,
+  getComponentPublicInstance,
   isStatefulComponent,
 } from './component'
 import { nextTick, queueJob } from './scheduler'
 import {
+  type OnCleanup,
   type WatchOptions,
   type WatchStopHandle,
   instanceWatch,
@@ -23,6 +25,7 @@ import {
   isString,
 } from '@vue/shared'
 import {
+  ReactiveFlags,
   type ShallowUnwrapRef,
   TrackOpTypes,
   type UnwrapNestedRefs,
@@ -34,6 +37,7 @@ import {
   type ComponentInjectOptions,
   type ComponentOptionsBase,
   type ComponentOptionsMixin,
+  type ComponentProvideOptions,
   type ComputedOptions,
   type ExtractComputedReturns,
   type InjectToObject,
@@ -50,6 +54,7 @@ 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`
@@ -60,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
  *   }
@@ -98,6 +103,10 @@ type MixinToOptionTypes<T> =
     infer Defaults,
     any,
     any,
+    any,
+    any,
+    any,
+    any,
     any
   >
     ? OptionTypesType<P & {}, B & {}, D & {}, C & {}, M & {}, Defaults & {}> &
@@ -142,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 = {},
@@ -194,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<
@@ -203,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 = {},
+  Exposed extends string = '',
+  TypeRefs extends Data = {},
+  TypeEl extends Element = any,
 > = {
   $: ComponentInternalInstance
   $data: D
@@ -216,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,
+      ? (...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,
@@ -254,14 +358,14 @@ const getPublicInstance = (
   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,
@@ -271,12 +375,12 @@ 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 = () => {
-        i.effect.dirty = true
         queueJob(i.update)
       }),
     $nextTick: i => i.n || (i.n = nextTick.bind(i.proxy!)),
@@ -300,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
 
@@ -363,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)
@@ -390,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]
@@ -508,10 +616,8 @@ if (__DEV__ && !__TEST__) {
   }
 }
 
-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) {
@@ -530,8 +636,7 @@ export const RuntimeCompiledPublicInstanceProxyHandlers = /*#__PURE__*/ extend(
       }
       return has
     },
-  },
-)
+  })
 
 // dev only
 // In dev mode, the proxy target exposes the same properties as seen on `this`
@@ -565,7 +670,7 @@ export function createDevRenderContext(instance: ComponentInternalInstance) {
 // dev only
 export function exposePropsOnRenderContext(
   instance: ComponentInternalInstance,
-) {
+): void {
   const {
     ctx,
     propsOptions: [propsOptions],
@@ -585,7 +690,7 @@ export function exposePropsOnRenderContext(
 // dev only
 export function exposeSetupStateOnRenderContext(
   instance: ComponentInternalInstance,
-) {
+): void {
   const { ctx, setupState } = instance
   Object.keys(toRaw(setupState)).forEach(key => {
     if (!setupState.__isScriptSetup) {
diff --git a/packages/runtime-core/src/componentRenderContext.ts b/packages/runtime-core/src/componentRenderContext.ts
index d950e899808..b1fc70c03b5 100644
--- a/packages/runtime-core/src/componentRenderContext.ts
+++ b/packages/runtime-core/src/componentRenderContext.ts
@@ -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
@@ -71,7 +71,7 @@ export function withCtx(
   fn: Function,
   ctx: ComponentInternalInstance | null = currentRenderingInstance,
   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 4b83c699031..a1afae6201a 100644
--- a/packages/runtime-core/src/componentRenderUtils.ts
+++ b/packages/runtime-core/src/componentRenderUtils.ts
@@ -26,6 +26,8 @@ import {
   isCompatEnabled,
   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,7 +36,7 @@ import {
  */
 let accessedAttrs: boolean = false
 
-export function markAttrsAccessed() {
+export function markAttrsAccessed(): void {
   accessedAttrs = true
 }
 
@@ -48,22 +50,22 @@ export function renderComponentRoot(
     vnode,
     proxy,
     withProxy,
-    props,
     propsOptions: [propsOptions],
     slots,
     attrs,
     emit,
     render,
     renderCache,
+    props,
     data,
     setupState,
     ctx,
     inheritAttrs,
   } = instance
+  const prev = setCurrentRenderingInstance(instance)
 
   let result
   let fallthroughAttrs
-  const prev = setCurrentRenderingInstance(instance)
   if (__DEV__) {
     accessedAttrs = false
   }
@@ -93,7 +95,7 @@ export function renderComponentRoot(
           thisProxy,
           proxyToUse!,
           renderCache,
-          props,
+          __DEV__ ? shallowReadonly(props) : props,
           setupState,
           data,
           ctx,
@@ -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,
                   }
                 : { 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
@@ -162,7 +167,7 @@ export function renderComponentRoot(
             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 or teleport root nodes.`,
           )
         }
         if (eventAttrs.length) {
@@ -217,10 +222,15 @@ export function renderComponentRoot(
           getComponentName(instance.type),
         )
       }
-      root = cloneVNode(root, {
-        class: cls,
-        style: style,
-      })
+      root = cloneVNode(
+        root,
+        {
+          class: cls,
+          style: style,
+        },
+        false,
+        true,
+      )
     }
   }
 
@@ -233,7 +243,7 @@ export function renderComponentRoot(
       )
     }
     // 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
@@ -244,7 +254,7 @@ export function renderComponentRoot(
           `that cannot be animated.`,
       )
     }
-    root.transition = vnode.transition
+    setTransitionHooks(root, vnode.transition)
   }
 
   if (__DEV__ && setRoot) {
@@ -443,7 +453,7 @@ function hasPropsChanged(
 export function updateHOCHostEl(
   { vnode, parent }: ComponentInternalInstance,
   el: typeof vnode.el, // HostNode
-) {
+): void {
   while (parent) {
     const root = parent.subTree
     if (root.suspense && root.suspense.activeBranch === vnode) {
diff --git a/packages/runtime-core/src/componentSlots.ts b/packages/runtime-core/src/componentSlots.ts
index 61e1ecc072c..380728750f8 100644
--- a/packages/runtime-core/src/componentSlots.ts
+++ b/packages/runtime-core/src/componentSlots.ts
@@ -1,6 +1,5 @@
 import { type ComponentInternalInstance, currentInstance } from './component'
 import {
-  InternalObjectKey,
   type VNode,
   type VNodeChild,
   type VNodeNormalizedChildren,
@@ -13,18 +12,20 @@ import {
   ShapeFlags,
   SlotFlags,
   def,
-  extend,
   isArray,
   isFunction,
 } from '@vue/shared'
 import { warn } from './warning'
 import { isKeepAlive } from './components/KeepAlive'
-import { type ContextualRenderFn, withCtx } from './componentRenderContext'
+import {
+  type ContextualRenderFn,
+  currentRenderingInstance,
+  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)>
@@ -78,9 +79,15 @@ export type RawSlots = {
    * @internal
    */
   _?: SlotFlags
+  /**
+   * cache indexes for slot content
+   * @internal
+   */
+  __?: number[]
 }
 
-const isInternalKey = (key: string) => key[0] === '_' || key === '$stable'
+const isInternalKey = (key: string) =>
+  key === '_' || key === '__' || key === '_ctx' || key === '$stable'
 
 const normalizeSlotValue = (value: unknown): VNode[] =>
   isArray(value)
@@ -100,7 +107,8 @@ const normalizeSlot = (
     if (
       __DEV__ &&
       currentInstance &&
-      (!ctx || ctx.root === currentInstance.root)
+      !(ctx === null && currentRenderingInstance) &&
+      !(ctx && ctx.root !== currentInstance.root)
     ) {
       warn(
         `Slot "${key}" invoked outside of the render function: ` +
@@ -163,39 +171,53 @@ const normalizeVNodeSlots = (
   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 || !isInternalKey(key)) {
+      slots[key] = children[key]
+    }
+  }
+}
+
 export const initSlots = (
   instance: ComponentInternalInstance,
   children: VNodeNormalizedChildren,
-) => {
+  optimized: boolean,
+): void => {
+  const slots = (instance.slots = createInternalObject())
   if (instance.vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
+    const cacheIndexes = (children as RawSlots).__
+    // make cache indexes marker non-enumerable
+    if (cacheIndexes) def(slots, '__', cacheIndexes, true)
+
     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,
-) => {
+): void => {
   const { vnode, slots } = instance
   let needDeletionCheck = true
   let deletionComparisonTarget = EMPTY_OBJ
@@ -206,7 +228,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.
@@ -215,14 +237,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 20da25848b6..fbb449ec8cb 100644
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/packages/runtime-core/src/components/BaseTransition.ts
@@ -16,14 +16,16 @@ import { warn } from '../warning'
 import { isKeepAlive } from './KeepAlive'
 import { toRaw } from '@vue/reactivity'
 import { ErrorCodes, callWithAsyncErrorHandling } from '../errorHandling'
-import { PatchFlags, ShapeFlags, isArray } from '@vue/shared'
+import { PatchFlags, ShapeFlags, isArray, isFunction } from '@vue/shared'
 import { onBeforeUnmount, onMounted } from '../apiLifecycle'
+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'
@@ -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,
@@ -135,6 +137,11 @@ export const BaseTransitionPropsValidators = {
   onAppearCancelled: TransitionHookValidator,
 }
 
+const recursiveGetSubtree = (instance: ComponentInternalInstance): VNode => {
+  const subTree = instance.subTree
+  return subTree.component ? recursiveGetSubtree(subTree.component) : subTree
+}
+
 const BaseTransitionImpl: ComponentOptions = {
   name: `BaseTransition`,
 
@@ -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,41 +180,34 @@ 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,
+        // #11061, ensure enterHooks is fresh after clone
+        hooks => (enterHooks = hooks),
       )
-      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
-        }
+
+      if (innerChild.type !== Comment) {
+        setTransitionHooks(innerChild, enterHooks)
       }
 
+      let oldInnerChild = instance.subTree && getInnerChild(instance.subTree)
+
       // handle mode
       if (
         oldInnerChild &&
         oldInnerChild.type !== Comment &&
-        (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)
+        !isSameVNodeType(innerChild, oldInnerChild) &&
+        recursiveGetSubtree(instance).type !== Comment
       ) {
-        const leavingHooks = resolveTransitionHooks(
+        let leavingHooks = resolveTransitionHooks(
           oldInnerChild,
           rawProps,
           state,
@@ -238,17 +216,18 @@ const BaseTransitionImpl: ComponentOptions = {
         // 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) {
-              instance.effect.dirty = true
+            if (!(instance.job.flags! & SchedulerJobFlags.DISPOSED)) {
               instance.update()
             }
+            delete leavingHooks.afterLeave
+            oldInnerChild = undefined
           }
           return emptyPlaceholder(child)
         } else if (mode === 'in-out' && innerChild.type !== Comment) {
@@ -259,18 +238,27 @@ const BaseTransitionImpl: ComponentOptions = {
           ) => {
             const leavingVNodesCache = getLeavingNodesForType(
               state,
-              oldInnerChild,
+              oldInnerChild!,
             )
-            leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild
+            leavingVNodesCache[String(oldInnerChild!.key)] = oldInnerChild!
             // early removal callback
             el[leaveCbKey] = () => {
               earlyRemove()
               el[leaveCbKey] = undefined
               delete enterHooks.delayedLeave
+              oldInnerChild = undefined
+            }
+            enterHooks.delayedLeave = () => {
+              delayedLeave()
+              delete enterHooks.delayedLeave
+              oldInnerChild = undefined
             }
-            enterHooks.delayedLeave = delayedLeave
           }
+        } else {
+          oldInnerChild = undefined
         }
+      } else if (oldInnerChild) {
+        oldInnerChild = undefined
       }
 
       return child
@@ -282,6 +270,30 @@ 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 {
@@ -313,6 +325,7 @@ export function resolveTransitionHooks(
   props: BaseTransitionProps<any>,
   state: TransitionState,
   instance: ComponentInternalInstance,
+  postClone?: (hooks: TransitionHooks) => void,
 ): TransitionHooks {
   const {
     appear,
@@ -453,7 +466,15 @@ 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
     },
   }
 
@@ -472,20 +493,38 @@ 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,#12465 get the component subtree if it's been mounted
+  if (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!)
diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
index db6088cf5c6..f2b7bdf9738 100644
--- a/packages/runtime-core/src/components/KeepAlive.ts
+++ b/packages/runtime-core/src/components/KeepAlive.ts
@@ -8,6 +8,7 @@ import {
   getCurrentInstance,
 } from '../component'
 import {
+  Comment,
   type VNode,
   type VNodeProps,
   cloneVNode,
@@ -38,6 +39,7 @@ import {
   type RendererElement,
   type RendererInternals,
   type RendererNode,
+  invalidateMount,
   queuePostRenderEffect,
 } from '../renderer'
 import { setTransitionHooks } from './BaseTransition'
@@ -55,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>
 
@@ -166,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) {
@@ -182,6 +187,11 @@ const KeepAliveImpl: ComponentOptions = {
         // Update components tree
         devtoolsComponentAdded(instance)
       }
+
+      // for e2e test
+      if (__DEV__ && __BROWSER__) {
+        ;(instance as any).__keepAliveStorageContainer = storageContainer
+      }
     }
 
     function unmount(vnode: VNode) {
@@ -190,10 +200,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)
         }
       })
@@ -201,7 +211,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.
@@ -228,7 +238,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)
@@ -254,7 +272,7 @@ const KeepAliveImpl: ComponentOptions = {
       pendingCacheKey = null
 
       if (!slots.default) {
-        return null
+        return (current = null)
       }
 
       const children = slots.default()
@@ -275,6 +293,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
@@ -291,6 +315,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
       }
@@ -305,11 +331,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) {
@@ -329,7 +355,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
@@ -341,13 +367,16 @@ const KeepAliveImpl: ComponentOptions = {
   },
 }
 
-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
@@ -363,23 +392,24 @@ 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,
-) {
+): void {
   registerKeepAliveHook(hook, LifecycleHooks.ACTIVATED, target)
 }
 
 export function onDeactivated(
   hook: Function,
   target?: ComponentInternalInstance | null,
-) {
+): void {
   registerKeepAliveHook(hook, LifecycleHooks.DEACTIVATED, target)
 }
 
diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index 9b3d6765d9c..85001f500cf 100644
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/packages/runtime-core/src/components/Suspense.ts
@@ -53,7 +53,7 @@ let suspenseId = 0
 /**
  * For testing only
  */
-export const resetSuspenseId = () => (suspenseId = 0)
+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
@@ -77,7 +77,7 @@ export const SuspenseImpl = {
     optimized: boolean,
     // platform-specific impl passed from renderer
     rendererInternals: RendererInternals,
-  ) {
+  ): void {
     if (n1 == null) {
       mountSuspense(
         n2,
@@ -99,8 +99,14 @@ export const SuspenseImpl = {
       //  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) {
-        n2.suspense = n1.suspense
+      if (
+        parentSuspense &&
+        parentSuspense.deps > 0 &&
+        !n1.suspense!.isInFallback
+      ) {
+        n2.suspense = n1.suspense!
+        n2.suspense.vnode = n2
+        n2.el = n1.el
         return
       }
       patchSuspense(
@@ -116,9 +122,8 @@ export const SuspenseImpl = {
       )
     }
   },
-  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
@@ -432,6 +437,7 @@ export interface SuspenseBoundary {
   registerDep(
     instance: ComponentInternalInstance,
     setupRenderEffect: SetupRenderEffectFn,
+    optimized: boolean,
   ): void
   unmount(parentSuspense: SuspenseBoundary | null, doRemove?: boolean): void
 }
@@ -451,7 +457,7 @@ function createSuspenseBoundary(
   rendererInternals: RendererInternals,
   isHydrating = false,
 ): SuspenseBoundary {
-  /* istanbul ignore if */
+  /* v8 ignore start */
   if (__DEV__ && !__TEST__ && !hasWarned) {
     hasWarned = true
     // @ts-expect-error `console.info` cannot be null error
@@ -460,6 +466,7 @@ function createSuspenseBoundary(
       `<Suspense> is an experimental feature and its API will likely change.`,
     )
   }
+  /* v8 ignore stop */
 
   const {
     p: patch,
@@ -473,7 +480,7 @@ function createSuspenseBoundary(
   let parentSuspenseId: number | undefined
   const isSuspensible = isVNodeSuspensible(vnode)
   if (isSuspensible) {
-    if (parentSuspense?.pendingBranch) {
+    if (parentSuspense && parentSuspense.pendingBranch) {
       parentSuspenseId = parentSuspense.pendingId
       parentSuspense.deps++
     }
@@ -559,7 +566,7 @@ function createSuspenseBoundary(
           // (got `pendingBranch.el`).
           // Therefore, after the mounting of activeBranch is completed,
           // it is necessary to get the latest anchor.
-          if (parentNode(activeBranch.el!) !== suspense.hiddenContainer) {
+          if (parentNode(activeBranch.el!) === container) {
             anchor = next(activeBranch)
           }
           unmount(activeBranch, parentComponent, suspense, true)
@@ -673,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++
@@ -808,10 +815,9 @@ function hydrateSuspense(
     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(
@@ -893,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 0de0ebf787e..c37356a7869 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -7,6 +7,7 @@ import {
   type RendererInternals,
   type RendererNode,
   type RendererOptions,
+  queuePostRenderEffect,
   traverseStaticChildren,
 } from '../renderer'
 import type { VNode, VNodeArrayChildren, VNodeProps } from '../vnode'
@@ -19,13 +20,19 @@ 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
 
@@ -47,14 +54,13 @@ const resolveTarget = <T = RendererElement>(
       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
     }
@@ -80,7 +86,7 @@ export const TeleportImpl = {
     slotScopeIds: string[] | null,
     optimized: boolean,
     internals: RendererInternals,
-  ) {
+  ): void {
     const {
       mc: mountChildren,
       pc: patchChildren,
@@ -108,24 +114,14 @@ 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
-        if (namespace === 'svg' || isTargetSVG(target)) {
-          namespace = 'svg'
-        } else if (namespace === 'mathml' || isTargetMathML(target)) {
-          namespace = 'mathml'
-        }
-      } 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,
@@ -139,14 +135,64 @@ export const TeleportImpl = {
         }
       }
 
+      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, false)
+          }
+        } 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, true)
+      }
+
+      if (isTeleportDeferred(n2.props)) {
+        n2.el!.__isMounted = false
+        queuePostRenderEffect(() => {
+          mountToTarget()
+          delete n2.el!.__isMounted
+        }, parentSuspense)
+      } else {
+        mountToTarget()
       }
     } else {
+      if (isTeleportDeferred(n2.props) && n1.el!.__isMounted === false) {
+        queuePostRenderEffect(() => {
+          TeleportImpl.process(
+            n1,
+            n2,
+            container,
+            anchor,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds,
+            optimized,
+            internals,
+          )
+        }, parentSuspense)
+        return
+      }
       // 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)!
@@ -174,7 +220,8 @@ export const TeleportImpl = {
         // 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
         // be moved in future patches.
-        traverseStaticChildren(n1, n2, true)
+        // in dev mode, deep traversal is necessary for HMR
+        traverseStaticChildren(n1, n2, !__DEV__)
       } else if (!optimized) {
         patchChildren(
           n1,
@@ -242,22 +289,29 @@ export const TeleportImpl = {
           )
         }
       }
+      updateCssVars(n2, disabled)
     }
-
-    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
+  ): void {
+    const {
+      shapeFlag,
+      children,
+      anchor,
+      targetStart,
+      targetAnchor,
+      target,
+      props,
+    } = vnode
 
     if (target) {
+      hostRemove(targetStart!)
       hostRemove(targetAnchor!)
     }
 
@@ -278,8 +332,8 @@ export const TeleportImpl = {
     }
   },
 
-  move: moveTeleport,
-  hydrate: hydrateTeleport,
+  move: moveTeleport as typeof moveTeleport,
+  hydrate: hydrateTeleport as typeof hydrateTeleport,
 }
 
 export enum TeleportMoveTypes {
@@ -294,7 +348,7 @@ function moveTeleport(
   parentAnchor: RendererNode | null,
   { o: { insert }, m: move }: RendererInternals,
   moveType: TeleportMoveTypes = TeleportMoveTypes.REORDER,
-) {
+): void {
   // move target anchor if this is a target change.
   if (moveType === TeleportMoveTypes.TARGET_CHANGE) {
     insert(vnode.targetAnchor!, container, parentAnchor)
@@ -340,7 +394,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,
@@ -357,12 +411,13 @@ function hydrateTeleport(
     querySelector,
   ))
   if (target) {
+    const disabled = isTeleportDisabled(vnode.props)
     // if multiple teleports rendered to the same target element, we need to
     // pick up from where the last teleport finished instead of the first node
     const targetNode =
       (target as TeleportTargetElement)._lpa || target.firstChild
     if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-      if (isTeleportDisabled(vnode.props)) {
+      if (disabled) {
         vnode.anchor = hydrateChildren(
           nextSibling(node),
           vnode,
@@ -372,7 +427,8 @@ function hydrateTeleport(
           slotScopeIds,
           optimized,
         )
-        vnode.targetAnchor = targetNode
+        vnode.targetStart = targetNode
+        vnode.targetAnchor = targetNode && nextSibling(targetNode)
       } else {
         vnode.anchor = nextSibling(node)
 
@@ -381,21 +437,29 @@ 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,
@@ -405,7 +469,7 @@ function hydrateTeleport(
         )
       }
     }
-    updateCssVars(vnode)
+    updateCssVars(vnode, disabled)
   }
   return vnode.anchor && nextSibling(vnode.anchor as Node)
 }
@@ -421,16 +485,44 @@ export const Teleport = TeleportImpl as unknown as {
   }
 }
 
-function updateCssVars(vnode: VNode) {
+function updateCssVars(vnode: VNode, isDisabled: boolean) {
   // presence of .ut method indicates owner component uses css vars.
   // code path here can assume browser environment.
   const ctx = vnode.ctx
   if (ctx && ctx.ut) {
-    let node = (vnode.children as VNode[])[0].el!
-    while (node && node !== vnode.targetAnchor) {
+    let node, anchor
+    if (isDisabled) {
+      node = vnode.el
+      anchor = vnode.anchor
+    } else {
+      node = vnode.targetStart
+      anchor = vnode.targetAnchor
+    }
+    while (node && node !== anchor) {
       if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid)
       node = node.nextSibling
     }
     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 abd3a329922..dfe39bf4387 100644
--- a/packages/runtime-core/src/customFormatter.ts
+++ b/packages/runtime-core/src/customFormatter.ts
@@ -4,13 +4,15 @@ import {
   isReadonly,
   isRef,
   isShallow,
+  pauseTracking,
+  resetTracking,
   toRaw,
 } from '@vue/reactivity'
 import { EMPTY_OBJ, extend, isArray, isFunction, isObject } from '@vue/shared'
 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
@@ -24,6 +26,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)) {
@@ -33,12 +36,16 @@ export function initCustomFormatter() {
       if (obj.__isVue) {
         return ['div', vueStyle, `VueInstance`]
       } else if (isRef(obj)) {
+        // avoid tracking during debugger accessing
+        pauseTracking()
+        const value = obj.value
+        resetTracking()
         return [
           'div',
           {},
           ['span', vueStyle, genRefFlag(obj)],
           '<',
-          formatValue(obj.value),
+          formatValue(value),
           `>`,
         ]
       } else if (isReactive(obj)) {
diff --git a/packages/runtime-core/src/devtools.ts b/packages/runtime-core/src/devtools.ts
index 870cb4748bd..9ac4c433ac1 100644
--- a/packages/runtime-core/src/devtools.ts
+++ b/packages/runtime-core/src/devtools.ts
@@ -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,7 +87,7 @@ 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,
@@ -95,24 +96,23 @@ export function devtoolsInitApp(app: App, version: string) {
   })
 }
 
-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(
+const _devtoolsComponentRemoved = /*@__PURE__*/ createDevtoolsComponentHook(
   DevtoolsHooks.COMPONENT_REMOVED,
 )
 
 export const devtoolsComponentRemoved = (
   component: ComponentInternalInstance,
-) => {
+): void => {
   if (
     devtools &&
     typeof devtools.cleanupBuffer === 'function' &&
@@ -123,7 +123,12 @@ 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,
@@ -135,15 +140,20 @@ function createDevtoolsComponentHook(hook: DevtoolsHooks) {
   }
 }
 
-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)
   }
@@ -153,7 +163,7 @@ export function devtoolsComponentEmit(
   component: ComponentInternalInstance,
   event: string,
   params: any[],
-) {
+): void {
   emit(
     DevtoolsHooks.COMPONENT_EMIT,
     component.appContext.app,
diff --git a/packages/runtime-core/src/directives.ts b/packages/runtime-core/src/directives.ts
index daaf28b1518..5897b39df82 100644
--- a/packages/runtime-core/src/directives.ts
+++ b/packages/runtime-core/src/directives.ts
@@ -17,57 +17,105 @@ import { warn } from './warning'
 import {
   type ComponentInternalInstance,
   type Data,
-  getExposeProxy,
+  getComponentPublicInstance,
 } from './component'
 import { currentRenderingInstance } from './componentRenderContext'
 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>,
+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,
+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> = Partial<
+  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)
   }
@@ -78,7 +126,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]
 >
 
 /**
@@ -92,9 +140,7 @@ export function withDirectives<T extends VNode>(
     __DEV__ && warn(`withDirectives can only be used inside render functions.`)
     return vnode
   }
-  const instance =
-    (getExposeProxy(currentRenderingInstance) as ComponentPublicInstance) ||
-    currentRenderingInstance.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]
@@ -126,7 +172,7 @@ export function invokeDirectiveHook(
   prevVNode: VNode | null,
   instance: ComponentInternalInstance | null,
   name: keyof ObjectDirective,
-) {
+): void {
   const bindings = vnode.dirs!
   const oldBindings = prevVNode && prevVNode.dirs!
   for (let i = 0; i < bindings.length; i++) {
diff --git a/packages/runtime-core/src/errorHandling.ts b/packages/runtime-core/src/errorHandling.ts
index a1ed69cc3c2..c4bdf0baccd 100644
--- a/packages/runtime-core/src/errorHandling.ts
+++ b/packages/runtime-core/src/errorHandling.ts
@@ -1,18 +1,23 @@
+import { pauseTracking, resetTracking } from '@vue/reactivity'
 import type { VNode } from './vnode'
 import type { ComponentInternalInstance } from './component'
 import { popWarningContext, pushWarningContext, warn } from './warning'
-import { isFunction, isPromise } from '@vue/shared'
+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 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,
@@ -22,9 +27,11 @@ export enum ErrorCodes {
   FUNCTION_REF,
   ASYNC_COMPONENT_LOADER,
   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,26 +60,24 @@ 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://github.com/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
+): any {
   try {
-    res = args ? fn(...args) : fn()
+    return args ? fn(...args) : fn()
   } catch (err) {
     handleError(err, instance, type)
   }
-  return res
 }
 
 export function callWithAsyncErrorHandling(
@@ -80,7 +85,7 @@ export function callWithAsyncErrorHandling(
   instance: ComponentInternalInstance | null,
   type: ErrorTypes,
   args?: unknown[],
-): any[] {
+): any {
   if (isFunction(fn)) {
     const res = callWithErrorHandling(fn, instance, type, args)
     if (res && isPromise(res)) {
@@ -91,20 +96,28 @@ 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,
-) {
+): 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
@@ -127,18 +140,18 @@ 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(
@@ -146,6 +159,7 @@ function logError(
   type: ErrorTypes,
   contextVNode: VNode | null,
   throwInDev = true,
+  throwInProd = false,
 ) {
   if (__DEV__) {
     const info = ErrorTypeStrings[type]
@@ -162,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 6dd136277bd..8092e8d3574 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') {
diff --git a/packages/runtime-core/src/helpers/renderList.ts b/packages/runtime-core/src/helpers/renderList.ts
index 655435fdd7a..8ffe29edf68 100644
--- a/packages/runtime-core/src/helpers/renderList.ts
+++ b/packages/runtime-core/src/helpers/renderList.ts
@@ -1,4 +1,12 @@
 import type { VNode, VNodeChild } from '../vnode'
+import {
+  isReactive,
+  isReadonly,
+  isShallow,
+  shallowReadArray,
+  toReactive,
+  toReadonly,
+} from '@vue/reactivity'
 import { isArray, isObject, isString } from '@vue/shared'
 import { warn } from '../warning'
 
@@ -42,7 +50,7 @@ export function renderList<T>(
   source: T,
   renderItem: <K extends keyof T>(
     value: T[K],
-    key: K,
+    key: string,
     index: number,
   ) => VNodeChild,
 ): VNodeChild[]
@@ -58,11 +66,29 @@ export function renderList(
 ): 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
+    let isReadonlySource = false
+    if (sourceIsReactiveArray) {
+      needsWrap = !isShallow(source)
+      isReadonlySource = isReadonly(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
+          ? isReadonlySource
+            ? toReadonly(toReactive(source[i]))
+            : toReactive(source[i])
+          : source[i],
+        i,
+        undefined,
+        cached && cached[i],
+      )
     }
   } else if (typeof source === 'number') {
     if (__DEV__ && !Number.isInteger(source)) {
diff --git a/packages/runtime-core/src/helpers/renderSlot.ts b/packages/runtime-core/src/helpers/renderSlot.ts
index 8a7608219d9..92f7dab36b6 100644
--- a/packages/runtime-core/src/helpers/renderSlot.ts
+++ b/packages/runtime-core/src/helpers/renderSlot.ts
@@ -10,12 +10,12 @@ import {
   type VNode,
   type VNodeArrayChildren,
   createBlock,
+  createVNode,
   isVNode,
   openBlock,
 } from '../vnode'
-import { PatchFlags, SlotFlags } from '@vue/shared'
+import { PatchFlags, SlotFlags, isSymbol } from '@vue/shared'
 import { warn } from '../warning'
-import { createVNode } from '@vue/runtime-core'
 import { isAsyncWrapper } from '../apiAsyncComponent'
 
 /**
@@ -32,13 +32,24 @@ export function renderSlot(
   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]
@@ -61,15 +72,18 @@ export function renderSlot(
   }
   openBlock()
   const validSlotContent = slot && ensureValidVNode(slot(props))
+  const slotKey =
+    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)
   const rendered = createBlock(
     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}`,
+        (slotKey && !isSymbol(slotKey) ? slotKey : `_${name}`) +
+        // #7256 force differentiate fallback content from actual content
+        (!validSlotContent && fallback ? '_fb' : ''),
     },
     validSlotContent || (fallback ? fallback() : []),
     validSlotContent && (slots as RawSlots)._ === SlotFlags.STABLE
@@ -85,7 +99,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 f44e9c530e2..aa6532c2811 100644
--- a/packages/runtime-core/src/helpers/resolveAssets.ts
+++ b/packages/runtime-core/src/helpers/resolveAssets.ts
@@ -26,7 +26,7 @@ export function resolveComponent(
   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
diff --git a/packages/runtime-core/src/helpers/useId.ts b/packages/runtime-core/src/helpers/useId.ts
new file mode 100644
index 00000000000..4b51e0dda7f
--- /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
index b2670e576e4..c40938ead3c 100644
--- a/packages/runtime-core/src/helpers/useModel.ts
+++ b/packages/runtime-core/src/helpers/useModel.ts
@@ -7,10 +7,16 @@ import type { NormalizedProps } from '../componentProps'
 import { watchSyncEffect } from '../apiWatch'
 
 export function useModel<
-  M extends string | number | symbol,
+  M extends PropertyKey,
   T extends Record<string, any>,
   K extends keyof T,
->(props: T, name: K, options?: DefineModelOptions<T[K]>): ModelRef<T[K], M>
+  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,
@@ -22,29 +28,42 @@ export function useModel(
     return ref() as any
   }
 
-  if (__DEV__ && !(i.propsOptions[0] as NormalizedProps)[name]) {
+  const camelizedName = camelize(name)
+  if (__DEV__ && !(i.propsOptions[0] as NormalizedProps)[camelizedName]) {
     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, camelizedName)
 
   const res = customRef((track, trigger) => {
     let localValue: any
+    let prevSetValue: any = EMPTY_OBJ
+    let prevEmittedValue: any
+
     watchSyncEffect(() => {
-      const propValue = props[name]
+      const propValue = props[camelizedName]
       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 (
           !(
@@ -56,27 +75,38 @@ export function useModel(
             (`onUpdate:${name}` in rawProps ||
               `onUpdate:${camelizedName}` in rawProps ||
               `onUpdate:${hyphenatedName}` in rawProps)
-          ) &&
-          hasChanged(value, localValue)
+          )
         ) {
+          // no v-model, local update
           localValue = value
           trigger()
         }
-        i.emit(`update:${name}`, options.set ? options.set(value) : value)
+
+        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
       },
     }
   })
 
-  const modifierKey =
-    name === 'modelValue' ? 'modelModifiers' : `${name}Modifiers`
-
   // @ts-expect-error
   res[Symbol.iterator] = () => {
     let i = 0
     return {
       next() {
         if (i < 2) {
-          return { value: i++ ? props[modifierKey] || {} : res, done: false }
+          return { value: i++ ? modifiers || EMPTY_OBJ : res, done: false }
         } else {
           return { done: true }
         }
@@ -86,3 +116,14 @@ export function useModel(
 
   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 3ff4a097b12..d2497efce67 100644
--- a/packages/runtime-core/src/helpers/useSsrContext.ts
+++ b/packages/runtime-core/src/helpers/useSsrContext.ts
@@ -1,9 +1,9 @@
 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) {
diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts
new file mode 100644
index 00000000000..f516d14c9bd
--- /dev/null
+++ b/packages/runtime-core/src/helpers/useTemplateRef.ts
@@ -0,0 +1,42 @@
+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 type TemplateRef<T = unknown> = Readonly<ShallowRef<T | null>>
+
+export function useTemplateRef<T = unknown, Keys extends string = string>(
+  key: Keys,
+): TemplateRef<T> {
+  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 97fbad31fb9..c82b9614b21 100644
--- a/packages/runtime-core/src/helpers/withMemo.ts
+++ b/packages/runtime-core/src/helpers/withMemo.ts
@@ -6,7 +6,7 @@ export function withMemo(
   render: () => VNode<any, any>,
   cache: any[],
   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 b5904a4fc5b..7aedf52dd3e 100644
--- a/packages/runtime-core/src/hmr.ts
+++ b/packages/runtime-core/src/hmr.ts
@@ -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
@@ -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)
 }
 
@@ -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
@@ -93,13 +96,12 @@ function rerender(id: string, newRender?: Function) {
     instance.renderCache = []
     // this flag forces child components with slot content to update
     isHmrUpdating = true
-    instance.effect.dirty = true
     instance.update()
     isHmrUpdating = false
   })
 }
 
-function reload(id: string, newComp: HMRComponent) {
+function reload(id: string, newComp: HMRComponent): void {
   const record = map.get(id)
   if (!record) return
 
@@ -110,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)
@@ -131,15 +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.
-      instance.parent.effect.dirty = true
-      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()
@@ -151,15 +161,16 @@ function reload(id: string, newComp: HMRComponent) {
         '[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()
   })
 }
 
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 1e9200ce27b..bdebed59602 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -1,8 +1,8 @@
 import {
-  Comment,
   Fragment,
   Static,
   Text,
+  Comment as VComment,
   type VNode,
   type VNodeHook,
   createTextVNode,
@@ -11,12 +11,14 @@ import {
   normalizeVNode,
 } from './vnode'
 import { flushPostFlushCbs } from './scheduler'
-import type { ComponentInternalInstance } from './component'
+import type { ComponentInternalInstance, ComponentOptions } from './component'
 import { invokeDirectiveHook } from './directives'
 import { warn } from './warning'
 import {
   PatchFlags,
   ShapeFlags,
+  def,
+  getEscapedCssVarName,
   includeBooleanAttr,
   isBooleanAttr,
   isKnownHtmlAttr,
@@ -26,6 +28,7 @@ import {
   isReservedProp,
   isString,
   normalizeClass,
+  normalizeCssVarValue,
   normalizeStyle,
   stringifyStyle,
 } from '@vue/shared'
@@ -38,19 +41,29 @@ import {
 } from './components/Suspense'
 import type { TeleportImpl, TeleportVNode } from './components/Teleport'
 import { isAsyncWrapper } from './apiAsyncComponent'
+import { isReactive } from '@vue/reactivity'
+import { updateHOCHostEl } from './componentRenderUtils'
 
 export type RootHydrateFunction = (
   vnode: VNode<Node, Element>,
   container: (Element | ShadowRoot) & { _vnode?: VNode },
 ) => void
 
-enum DOMNodeTypes {
+export enum DOMNodeTypes {
   ELEMENT = 1,
   TEXT = 3,
   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) =>
   container.namespaceURI!.includes('svg') &&
@@ -59,13 +72,16 @@ const isSVGContainer = (container: Element) =>
 const isMathMLContainer = (container: Element) =>
   container.namespaceURI!.includes('MathML')
 
-const getContainerType = (container: Element): 'svg' | 'mathml' | undefined => {
-  if (isSVGContainer(container)) return 'svg'
-  if (isMathMLContainer(container)) return '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
 }
 
-const isComment = (node: Node): node is Comment =>
+export const isComment = (node: Node): node is Comment =>
   node.nodeType === DOMNodeTypes.COMMENT
 
 // Note: hydration is DOM-specific
@@ -75,7 +91,17 @@ const isComment = (node: Node): node is Comment =>
 // passed in via arguments.
 export function createHydrationFunctions(
   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,
@@ -102,14 +128,10 @@ export function createHydrationFunctions(
       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 = (
@@ -120,6 +142,7 @@ export function createHydrationFunctions(
     slotScopeIds: string[] | null,
     optimized = false,
   ): Node | null => {
+    optimized = optimized || !!vnode.dynamicChildren
     const isFragmentStart = isComment(node) && node.data === '['
     const onMismatch = () =>
       handleMismatch(
@@ -136,18 +159,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) {
@@ -169,7 +182,6 @@ export function createHydrationFunctions(
           }
         } else {
           if ((node as Text).data !== vnode.children) {
-            hasMismatch = true
             ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
               warn(
                 `Hydration text mismatch in`,
@@ -179,12 +191,13 @@ export function createHydrationFunctions(
                 )}` +
                   `\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>
@@ -296,7 +309,10 @@ export function createHydrationFunctions(
           // if component is async, it may get moved / unmounted before its
           // inner component is loaded, so we need to give it a placeholder
           // vnode that matches its adopted DOM.
-          if (isAsyncWrapper(vnode)) {
+          if (
+            isAsyncWrapper(vnode) &&
+            !(vnode.type as ComponentOptions).__asyncResolved
+          ) {
             let subTree
             if (isFragmentStart) {
               subTree = createVNode(Fragment)
@@ -365,7 +381,7 @@ 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')
       }
@@ -374,15 +390,20 @@ export function createHydrationFunctions(
       let needCallTransitionHooks = false
       if (isTemplateNode(el)) {
         needCallTransitionHooks =
-          needTransition(parentSuspense, transition) &&
+          needTransition(
+            null, // no need check parentSuspense in hydration
+            transition,
+          ) &&
           parentComponent &&
           parentComponent.vnode.props &&
           parentComponent.vnode.props.appear
 
         const content = (el as HTMLTemplateElement).content
-          .firstChild as Element
+          .firstChild as Element & { $cls?: string }
 
         if (needCallTransitionHooks) {
+          const cls = content.getAttribute('class')
+          if (cls) content.$cls = cls
           transition!.beforeEnter(content)
         }
 
@@ -408,33 +429,49 @@ export function createHydrationFunctions(
         )
         let hasWarned = false
         while (next) {
-          hasMismatch = true
-          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
+          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__ || __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}`,
-            )
+        // #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
         }
       }
@@ -443,34 +480,32 @@ export function createHydrationFunctions(
       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__ &&
+              (__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)
             ) {
-              hasMismatch = true
+              logMismatchError()
             }
             if (
               (forcePatch &&
                 (key.endsWith('value') || key === 'indeterminate')) ||
               (isOn(key) && !isReservedProp(key)) ||
               // force hydrate v-bind with .prop modifiers
-              key[0] === '.'
+              key[0] === '.' ||
+              isCustomElement
             ) {
-              patchProp(
-                el,
-                key,
-                null,
-                props[key],
-                undefined,
-                undefined,
-                parentComponent,
-              )
+              patchProp(el, key, null, props[key], undefined, parentComponent)
             }
           }
         } else if (props.onClick) {
@@ -482,9 +517,13 @@ export function createHydrationFunctions(
             null,
             props.onClick,
             undefined,
-            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]
         }
       }
 
@@ -529,7 +568,26 @@ 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,
@@ -538,21 +596,26 @@ export function createHydrationFunctions(
           slotScopeIds,
           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__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
-          !hasWarned
-        ) {
-          warn(
-            `Hydration children mismatch on`,
-            container,
-            `\nServer 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,
@@ -599,7 +662,8 @@ export function createHydrationFunctions(
     } 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
@@ -614,19 +678,22 @@ export function createHydrationFunctions(
     slotScopeIds: string[] | null,
     isFragment: boolean,
   ): Node | null => {
-    hasMismatch = true
-    ;(__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,
-      )
+    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) {
@@ -656,6 +723,11 @@ export function createHydrationFunctions(
       getContainerType(container),
       slotScopeIds,
     )
+    // the component vnode's el should be updated when a mismatch occurs.
+    if (parentComponent) {
+      parentComponent.vnode.el = vnode.el
+      updateHOCHostEl(parentComponent, vnode.el)
+    }
     return next
   }
 
@@ -706,38 +778,44 @@ 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,
+  el: Element & { $cls?: string },
   key: string,
   clientValue: any,
   vnode: VNode,
   instance: ComponentInternalInstance | null,
 ): boolean {
-  let mismatchType: string | undefined
+  let mismatchType: MismatchTypes | undefined
   let mismatchKey: string | undefined
-  let actual: any
-  let expected: any
+  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')
+    if (el.$cls) {
+      actual = el.$cls
+      delete el.$cls
+    } else {
+      actual = el.getAttribute('class')
+    }
     expected = normalizeClass(clientValue)
     if (!isSetEqual(toClassSet(actual || ''), toClassSet(expected))) {
-      mismatchType = mismatchKey = `class`
+      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')
+    actual = el.getAttribute('style') || ''
     expected = isString(clientValue)
       ? clientValue
       : stringifyStyle(normalizeStyle(clientValue))
@@ -753,13 +831,13 @@ function propHasMismatch(
       }
     }
 
-    const cssVars = instance?.getCssVars?.()
-    for (const key in cssVars) {
-      expectedMap.set(`--${key}`, String(cssVars[key]))
+    if (instance) {
+      resolveCssVars(instance, vnode, expectedMap)
     }
 
     if (!isMapEqual(actualMap, expectedMap)) {
-      mismatchType = mismatchKey = 'style'
+      mismatchType = MismatchTypes.STYLE
+      mismatchKey = 'style'
     }
   } else if (
     (el instanceof SVGElement && isKnownSvgAttr(key)) ||
@@ -785,15 +863,15 @@ function propHasMismatch(
         : false
     }
     if (actual !== expected) {
-      mismatchType = `attribute`
+      mismatchType = MismatchTypes.ATTRIBUTE
       mismatchKey = key
     }
   }
 
-  if (mismatchType) {
+  if (mismatchType != null && !isMismatchAllowed(el, mismatchType)) {
     const format = (v: any) =>
       v === false ? `(not rendered)` : `${mismatchKey}="${v}"`
-    const preSegment = `Hydration ${mismatchType} mismatch on`
+    const preSegment = `Hydration ${MismatchTypeString[mismatchType]} mismatch on`
     const postSegment =
       `\n  - rendered on server: ${format(actual)}` +
       `\n  - expected on client: ${format(expected)}` +
@@ -832,8 +910,8 @@ 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?.trim()
+    key = key.trim()
+    value = value && value.trim()
     if (key && value) {
       styleMap.set(key, value)
     }
@@ -852,3 +930,72 @@ function isMapEqual(a: Map<string, string>, b: Map<string, string>): boolean {
   }
   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) {
+      const value = normalizeCssVarValue(cssVars[key])
+      expectedMap.set(`--${getEscapedCssVarName(key, false)}`, value)
+    }
+  }
+  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 list.includes(MismatchTypeString[allowedType])
+  }
+}
diff --git a/packages/runtime-core/src/hydrationStrategies.ts b/packages/runtime-core/src/hydrationStrategies.ts
new file mode 100644
index 00000000000..bad39884830
--- /dev/null
+++ b/packages/runtime-core/src/hydrationStrategies.ts
@@ -0,0 +1,139 @@
+import { getGlobalThis, isString } from '@vue/shared'
+import { DOMNodeTypes, isComment } from './hydration'
+
+// Polyfills for Safari support
+// see https://caniuse.com/requestidlecallback
+const requestIdleCallback: Window['requestIdleCallback'] =
+  getGlobalThis().requestIdleCallback || (cb => setTimeout(cb, 1))
+const cancelIdleCallback: Window['cancelIdleCallback'] =
+  getGlobalThis().cancelIdleCallback || (id => clearTimeout(id))
+
+/**
+ * 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 7fbe58446f7..9910f82102b 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,6 +28,8 @@ export {
   // effect
   effect,
   stop,
+  getCurrentWatcher,
+  onWatcherCleanup,
   ReactiveEffect,
   // effect scope
   effectScope,
@@ -62,6 +64,14 @@ export { defineComponent } from './apiDefineComponent'
 export { defineAsyncComponent } from './apiAsyncComponent'
 export { useAttrs, useSlots } from './apiSetupHelpers'
 export { useModel } from './helpers/useModel'
+export { useTemplateRef, type TemplateRef } from './helpers/useTemplateRef'
+export { useId } from './helpers/useId'
+export {
+  hydrateOnIdle,
+  hydrateOnVisible,
+  hydrateOnMediaQuery,
+  hydrateOnInteraction,
+} from './hydrationStrategies'
 
 // <script setup> API ----------------------------------------------------------
 
@@ -76,6 +86,7 @@ export {
   withDefaults,
   type DefineProps,
   type ModelRef,
+  type ComponentTypeEmits,
 } from './apiSetupHelpers'
 
 /**
@@ -212,13 +223,16 @@ export type {
   DebuggerEvent,
   DebuggerEventExtraInfo,
   Raw,
+  Reactive,
 } from '@vue/reactivity'
 export type {
+  MultiWatchSources,
   WatchEffect,
   WatchOptions,
-  WatchOptionsBase,
+  WatchEffectOptions as WatchOptionsBase,
   WatchCallback,
   WatchSource,
+  WatchHandle,
   WatchStopHandle,
 } from './apiWatch'
 export type { InjectionKey } from './apiInject'
@@ -248,15 +262,19 @@ export type {
   SetupContext,
   ComponentCustomProps,
   AllowedComponentProps,
+  GlobalComponents,
+  GlobalDirectives,
   ComponentInstance,
+  ComponentCustomElementInterface,
 } from './component'
-export type { DefineComponent, PublicProps } from './apiDefineComponent'
+export type {
+  DefineComponent,
+  DefineSetupFnComponent,
+  PublicProps,
+} from './apiDefineComponent'
 export type {
   ComponentOptions,
   ComponentOptionsMixin,
-  ComponentOptionsWithoutProps,
-  ComponentOptionsWithObjectProps,
-  ComponentOptionsWithArrayProps,
   ComponentCustomOptions,
   ComponentOptionsBase,
   ComponentProvideOptions,
@@ -265,12 +283,23 @@ export type {
   ComputedOptions,
   RuntimeCompilerOptions,
   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,
+  CreateComponentPublicInstanceWithMixins,
 } from './componentPublicInstance'
 export type {
   Renderer,
@@ -309,6 +338,10 @@ export type {
   AsyncComponentOptions,
   AsyncComponentLoader,
 } from './apiAsyncComponent'
+export type {
+  HydrationStrategy,
+  HydrationStrategyFactory,
+} from './hydrationStrategies'
 export type { HMRRuntime } from './hmr'
 
 // Internal API ----------------------------------------------------------------
@@ -358,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'
-
-const _ssrUtils = {
+import { ensureValidVNode } from './helpers/renderSlot'
+import { popWarningContext, pushWarningContext } from './warning'
+
+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,
+  getComponentPublicInstance,
+  ensureValidVNode,
+  pushWarningContext,
+  popWarningContext,
 }
 
 /**
@@ -397,9 +451,17 @@ import { NOOP } from '@vue/shared'
 /**
  * @internal only exposed in compat builds
  */
-export const resolveFilter = __COMPAT__ ? _resolveFilter : null
-
-const _compatUtils = {
+export const resolveFilter: typeof _resolveFilter | null = __COMPAT__
+  ? _resolveFilter
+  : null
+
+const _compatUtils: {
+  warnDeprecation: typeof warnDeprecation
+  createCompatVue: typeof createCompatVue
+  isCompatEnabled: typeof isCompatEnabled
+  checkCompatEnabled: typeof checkCompatEnabled
+  softAssertCompatEnabled: typeof softAssertCompatEnabled
+} = {
   warnDeprecation,
   createCompatVue,
   isCompatEnabled,
diff --git a/packages/runtime-core/src/internalObject.ts b/packages/runtime-core/src/internalObject.ts
new file mode 100644
index 00000000000..2b2fc4a1ff9
--- /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 f87b7f472a9..4e832a7c4a9 100644
--- a/packages/runtime-core/src/profiling.ts
+++ b/packages/runtime-core/src/profiling.ts
@@ -11,7 +11,7 @@ let perf: Performance
 export function startMeasure(
   instance: ComponentInternalInstance,
   type: string,
-) {
+): void {
   if (instance.appContext.config.performance && isSupported()) {
     perf.mark(`vue-${type}-${instance.uid}`)
   }
@@ -21,16 +21,17 @@ 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`
+    const measureName = `<${formatComponentName(instance, instance.type)}> ${type}`
     perf.mark(endTag)
-    perf.measure(
-      `<${formatComponentName(instance, instance.type)}> ${type}`,
-      startTag,
-      endTag,
-    )
+    perf.measure(measureName, startTag, endTag)
+    perf.clearMeasures(measureName)
     perf.clearMarks(startTag)
     perf.clearMarks(endTag)
   }
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index c7dfbf45dd2..f046e93ad85 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -17,6 +17,7 @@ import {
   type ComponentInternalInstance,
   type ComponentOptions,
   type Data,
+  type LifecycleHook,
   createComponentInstance,
   setupComponent,
 } from './component'
@@ -32,6 +33,7 @@ import {
   NOOP,
   PatchFlags,
   ShapeFlags,
+  def,
   getGlobalThis,
   invokeArrayFns,
   isArray,
@@ -39,13 +41,19 @@ import {
 } from '@vue/shared'
 import {
   type SchedulerJob,
+  SchedulerJobFlags,
+  type SchedulerJobs,
   flushPostFlushCbs,
   flushPreFlushCbs,
-  invalidateJob,
   queueJob,
   queuePostFlushCb,
 } from './scheduler'
-import { ReactiveEffect, pauseTracking, resetTracking } from '@vue/reactivity'
+import {
+  EffectFlags,
+  ReactiveEffect,
+  pauseTracking,
+  resetTracking,
+} from '@vue/reactivity'
 import { updateProps } from './componentProps'
 import { updateSlots } from './componentSlots'
 import { popWarningContext, pushWarningContext, warn } from './warning'
@@ -54,9 +62,14 @@ import { setRef } from './rendererTemplateRef'
 import {
   type SuspenseBoundary,
   type SuspenseImpl,
+  isSuspense,
   queueEffectWithSuspense,
 } from './components/Suspense'
-import type { TeleportImpl, TeleportVNode } from './components/Teleport'
+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'
@@ -73,6 +86,7 @@ import { isAsyncWrapper } from './apiAsyncComponent'
 import { isCompatEnabled } from './compat/compatConfig'
 import { DeprecationTypes } from './compat/compatConfig'
 import type { TransitionHooks } from './components/BaseTransition'
+import type { VueElement } from '@vue/runtime-dom'
 
 export interface Renderer<HostElement = RendererElement> {
   render: RootRenderFunction<HostElement>
@@ -101,10 +115,7 @@ export interface RendererOptions<
     prevValue: any,
     nextValue: any,
     namespace?: ElementNamespace,
-    prevChildren?: VNode<HostNode, HostElement>[],
     parentComponent?: ComponentInternalInstance | null,
-    parentSuspense?: SuspenseBoundary | null,
-    unmountChildren?: UnmountChildrenFn,
   ): void
   insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void
   remove(el: HostNode): void
@@ -138,7 +149,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 {}
@@ -273,7 +284,10 @@ export enum MoveType {
   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) =>
@@ -299,7 +313,7 @@ export const queuePostRenderEffect = __FEATURE_SUSPENSE__
 export function createRenderer<
   HostNode = RendererNode,
   HostElement = RendererElement,
->(options: RendererOptions<HostNode, HostElement>) {
+>(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement> {
   return baseCreateRenderer<HostNode, HostElement>(options)
 }
 
@@ -308,7 +322,7 @@ export function createRenderer<
 // tree-shakable.
 export function createHydrationRenderer(
   options: RendererOptions<Node, Element>,
-) {
+): HydrationRenderer {
   return baseCreateRenderer(options, createHydrationFunctions)
 }
 
@@ -471,6 +485,8 @@ function baseCreateRenderer(
     // set ref
     if (ref != null && parentComponent) {
       setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
+    } else if (ref == null && n1 && n1.ref != null) {
+      setRef(n1.ref, null, parentSuspense, n1, true)
     }
   }
 
@@ -664,17 +680,7 @@ function baseCreateRenderer(
     if (props) {
       for (const key in props) {
         if (key !== 'value' && !isReservedProp(key)) {
-          hostPatchProp(
-            el,
-            key,
-            null,
-            props[key],
-            namespace,
-            vnode.children as VNode[],
-            parentComponent,
-            parentSuspense,
-            unmountChildren,
-          )
+          hostPatchProp(el, key, null, props[key], namespace, parentComponent)
         }
       }
       /**
@@ -695,15 +701,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')
     }
@@ -752,7 +753,11 @@ 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,
@@ -804,6 +809,9 @@ function baseCreateRenderer(
     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
@@ -829,6 +837,15 @@ function baseCreateRenderer(
       dynamicChildren = null
     }
 
+    // #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!,
@@ -865,15 +882,7 @@ 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,
-          namespace,
-        )
+        patchProps(el, oldProps, newProps, parentComponent, namespace)
       } else {
         // class
         // this flag is matched when the element has dynamic class bindings.
@@ -904,17 +913,7 @@ function baseCreateRenderer(
             const next = newProps[key]
             // #1471 force patch value
             if (next !== prev || key === 'value') {
-              hostPatchProp(
-                el,
-                key,
-                prev,
-                next,
-                namespace,
-                n1.children as VNode[],
-                parentComponent,
-                parentSuspense,
-                unmountChildren,
-              )
+              hostPatchProp(el, key, prev, next, namespace, parentComponent)
             }
           }
         }
@@ -929,15 +928,7 @@ function baseCreateRenderer(
       }
     } else if (!optimized && dynamicChildren == null) {
       // unoptimized, full diff
-      patchProps(
-        el,
-        n2,
-        oldProps,
-        newProps,
-        parentComponent,
-        parentSuspense,
-        namespace,
-      )
+      patchProps(el, oldProps, newProps, parentComponent, namespace)
     }
 
     if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {
@@ -973,7 +964,8 @@ function baseCreateRenderer(
           // which also requires the correct parent container
           !isSameVNodeType(oldVNode, newVNode) ||
           // - In the case of a component, it could contain anything.
-          oldVNode.shapeFlag & (ShapeFlags.COMPONENT | ShapeFlags.TELEPORT))
+          oldVNode.shapeFlag &
+            (ShapeFlags.COMPONENT | ShapeFlags.TELEPORT | ShapeFlags.SUSPENSE))
           ? hostParentNode(oldVNode.el)!
           : // In other cases, the parent container is not actually used so we
             // just pass the block element here to avoid a DOM parentNode call.
@@ -994,11 +986,9 @@ function baseCreateRenderer(
 
   const patchProps = (
     el: RendererElement,
-    vnode: VNode,
     oldProps: Data,
     newProps: Data,
     parentComponent: ComponentInternalInstance | null,
-    parentSuspense: SuspenseBoundary | null,
     namespace: ElementNamespace,
   ) => {
     if (oldProps !== newProps) {
@@ -1011,10 +1001,7 @@ function baseCreateRenderer(
               oldProps[key],
               null,
               namespace,
-              vnode.children as VNode[],
               parentComponent,
-              parentSuspense,
-              unmountChildren,
             )
           }
         }
@@ -1026,17 +1013,7 @@ function baseCreateRenderer(
         const prev = oldProps[key]
         // defer patching value
         if (next !== prev && key !== 'value') {
-          hostPatchProp(
-            el,
-            key,
-            prev,
-            next,
-            namespace,
-            vnode.children as VNode[],
-            parentComponent,
-            parentSuspense,
-            unmountChildren,
-          )
+          hostPatchProp(el, key, prev, next, namespace, parentComponent)
         }
       }
       if ('value' in newProps) {
@@ -1229,22 +1206,27 @@ function baseCreateRenderer(
       if (__DEV__) {
         startMeasure(instance, `init`)
       }
-      setupComponent(instance)
+      setupComponent(instance, false, optimized)
       if (__DEV__) {
         endMeasure(instance, `init`)
       }
     }
 
+    // avoid hydration for hmr updating
+    if (__DEV__ && isHmrUpdating) initialVNode.el = null
+
     // setup() is async. This component relies on async logic to be resolved
     // before proceeding
     if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
-      parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect)
+      parentSuspense &&
+        parentSuspense.registerDep(instance, setupRenderEffect, optimized)
 
       // Give it a placeholder if this is not hydration
       // TODO handle self-defined fallback
       if (!initialVNode.el) {
         const placeholder = (instance.subTree = createVNode(Comment))
         processCommentNode(null, placeholder, container!, anchor)
+        initialVNode.placeholder = placeholder.el
       }
     } else {
       setupRenderEffect(
@@ -1285,11 +1267,7 @@ 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.effect.dirty = true
         instance.update()
       }
     } else {
@@ -1312,7 +1290,7 @@ function baseCreateRenderer(
       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)
@@ -1360,18 +1338,28 @@ function baseCreateRenderer(
             }
           }
 
-          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 &&
+            // @ts-expect-error _def is private
+            (root.ce as VueElement)._def.shadowRoot !== false
+          ) {
+            root.ce._injectChildStyle(type)
+          }
+
           if (__DEV__) {
             startMeasure(instance, `render`)
           }
@@ -1574,19 +1562,16 @@ function baseCreateRenderer(
     }
 
     // create reactive effect for rendering
-    const effect = (instance.effect = new ReactiveEffect(
-      componentUpdateFn,
-      NOOP,
-      () => queueJob(update),
-      instance.scope, // track it in component's effect scope
-    ))
-
-    const update: SchedulerJob = (instance.update = () => {
-      if (effect.dirty) {
-        effect.run()
-      }
-    })
-    update.id = instance.uid
+    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)
+
     // allowRecurse
     // #1801, #2043 component render effects should allow recursive updates
     toggleRecurse(instance, true)
@@ -1598,7 +1583,6 @@ function baseCreateRenderer(
       effect.onTrigger = instance.rtg
         ? e => invokeArrayFns(instance.rtg!, e)
         : void 0
-      update.ownerInstance = instance
     }
 
     update()
@@ -1907,7 +1891,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)
@@ -1996,8 +1980,12 @@ function baseCreateRenderer(
       for (i = toBePatched - 1; i >= 0; i--) {
         const nextIndex = s2 + i
         const nextChild = c2[nextIndex] as VNode
+        const anchorVNode = c2[nextIndex + 1] as VNode
         const anchor =
-          nextIndex + 1 < l2 ? (c2[nextIndex + 1] as VNode).el : parentAnchor
+          nextIndex + 1 < l2
+            ? // #13559, fallback to el placeholder for unresolved async component
+              anchorVNode.el || anchorVNode.placeholder
+            : parentAnchor
         if (newIndexToOldIndexMap[i] === 0) {
           // mount new
           patch(
@@ -2074,7 +2062,13 @@ function baseCreateRenderer(
         queuePostRenderEffect(() => transition!.enter(el!), parentSuspense)
       } else {
         const { leave, delayLeave, afterLeave } = transition!
-        const remove = () => hostInsert(el!, container, anchor)
+        const remove = () => {
+          if (vnode.ctx!.isUnmounted) {
+            hostRemove(el!)
+          } else {
+            hostInsert(el!, container, anchor)
+          }
+        }
         const performLeave = () => {
           leave(el!, () => {
             remove()
@@ -2108,10 +2102,23 @@ function baseCreateRenderer(
       shapeFlag,
       patchFlag,
       dirs,
+      cacheIndex,
     } = vnode
+
+    if (patchFlag === PatchFlags.BAIL) {
+      optimized = false
+    }
+
     // unset ref
     if (ref != null) {
+      pauseTracking()
       setRef(ref, null, parentSuspense, vnode, true)
+      resetTracking()
+    }
+
+    // #6593 should clean memo cache when unmount
+    if (cacheIndex != null) {
+      parentComponent!.renderCache[cacheIndex] = undefined
     }
 
     if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
@@ -2147,12 +2154,17 @@ function baseCreateRenderer(
           vnode,
           parentComponent,
           parentSuspense,
-          optimized,
           internals,
           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))
@@ -2265,13 +2277,32 @@ function baseCreateRenderer(
       unregisterHMR(instance)
     }
 
-    const { bum, scope, update, subTree, um } = instance
+    const {
+      bum,
+      scope,
+      job,
+      subTree,
+      um,
+      m,
+      a,
+      parent,
+      slots: { __: slotCacheKeys },
+    } = instance
+    invalidateMount(m)
+    invalidateMount(a)
 
     // beforeUnmount hook
     if (bum) {
       invokeArrayFns(bum)
     }
 
+    // remove slots content from parent renderCache
+    if (parent && isArray(slotCacheKeys)) {
+      slotCacheKeys.forEach(v => {
+        parent.renderCache[v] = undefined
+      })
+    }
+
     if (
       __COMPAT__ &&
       isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
@@ -2282,11 +2313,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
@@ -2349,7 +2380,12 @@ 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
   }
 
   let isFlushing = false
@@ -2369,13 +2405,13 @@ function baseCreateRenderer(
         namespace,
       )
     }
+    container._vnode = vnode
     if (!isFlushing) {
       isFlushing = true
       flushPreFlushCbs()
       flushPostFlushCbs()
       isFlushing = false
     }
-    container._vnode = vnode
   }
 
   const internals: RendererInternals = {
@@ -2421,16 +2457,22 @@ function resolveChildrenNamespace(
 }
 
 function toggleRecurse(
-  { effect, update }: ComponentInternalInstance,
+  { 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,
-) {
+): boolean | null {
   return (
     (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) &&
     transition &&
@@ -2449,7 +2491,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)) {
@@ -2463,17 +2509,22 @@ 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) {
         c2.el = c1.el
       }
-      // also inherit for comment nodes, but not placeholders (e.g. v-if which
+      // #2324 also inherit for comment nodes, but not placeholders (e.g. v-if which
       // would have received .el during block patch)
-      if (__DEV__ && c2.type === Comment && !c2.el) {
+      if (c2.type === Comment && !c2.el) {
         c2.el = c1.el
       }
+
+      if (__DEV__) {
+        c2.el && (c2.el.__vnode = c2)
+      }
     }
   }
 }
@@ -2532,3 +2583,10 @@ function locateNonHydratedAsyncRoot(
     }
   }
 }
+
+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 b652edeac4c..cea9e5b8438 100644
--- a/packages/runtime-core/src/rendererTemplateRef.ts
+++ b/packages/runtime-core/src/rendererTemplateRef.ts
@@ -2,6 +2,7 @@ import type { SuspenseBoundary } from './components/Suspense'
 import type { VNode, VNodeNormalizedRef, VNodeNormalizedRefAtom } from './vnode'
 import {
   EMPTY_OBJ,
+  NO,
   ShapeFlags,
   hasOwn,
   isArray,
@@ -10,12 +11,13 @@ import {
   remove,
 } from '@vue/shared'
 import { isAsyncWrapper } from './apiAsyncComponent'
-import { getExposeProxy } from './component'
 import { warn } from './warning'
-import { isRef } from '@vue/reactivity'
+import { isRef, toRaw } from '@vue/reactivity'
 import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 import type { SchedulerJob } from './scheduler'
 import { queuePostRenderEffect } from './renderer'
+import { type ComponentOptions, getComponentPublicInstance } from './component'
+import { knownTemplateRefs } from './helpers/useTemplateRef'
 
 /**
  * Function for handling a template ref
@@ -26,7 +28,7 @@ export function setRef(
   parentSuspense: SuspenseBoundary | null,
   vnode: VNode,
   isUnmount = false,
-) {
+): void {
   if (isArray(rawRef)) {
     rawRef.forEach((r, i) =>
       setRef(
@@ -41,14 +43,24 @@ export function setRef(
   }
 
   if (isAsyncWrapper(vnode) && !isUnmount) {
-    // when mounting async components, nothing needs to be done,
-    // because the template ref is forwarded to inner component
+    // #4999 if an async component already resolved and cached by KeepAlive,
+    // we need to set the ref to inner component
+    if (
+      vnode.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE &&
+      (vnode.type as ComponentOptions).__asyncResolved &&
+      vnode.component!.subTree.component
+    ) {
+      setRef(rawRef, oldRawRef, parentSuspense, vnode.component!.subTree)
+    }
+
+    // otherwise, nothing needs to be done because the template ref
+    // is forwarded to inner component
     return
   }
 
   const refValue =
     vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
-      ? getExposeProxy(vnode.component!) || vnode.component!.proxy
+      ? getComponentPublicInstance(vnode.component!)
       : vnode.el
   const value = isUnmount ? null : refValue
 
@@ -63,12 +75,31 @@ export function setRef(
   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
+      ? NO
+      : (key: string) => {
+          if (__DEV__) {
+            if (hasOwn(rawSetupState, key) && !isRef(rawSetupState[key])) {
+              warn(
+                `Template ref "${key}" used on a non-ref value. ` +
+                  `It will not work in the production build.`,
+              )
+            }
+
+            if (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 +112,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 +127,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 +140,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 b8d1445a183..b40c31d3952 100644
--- a/packages/runtime-core/src/scheduler.ts
+++ b/packages/runtime-core/src/scheduler.ts
@@ -1,12 +1,10 @@
 import { ErrorCodes, callWithErrorHandling, handleError } from './errorHandling'
-import { type Awaited, NOOP, isArray } from '@vue/shared'
+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.
@@ -22,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
@@ -57,12 +61,16 @@ export function nextTick<T = void, R = void>(
   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
 
@@ -70,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
@@ -80,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
@@ -140,15 +137,15 @@ 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
       }
@@ -157,12 +154,18 @@ export function flushPreFlushCbs(
       }
       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)].sort(
       (a, b) => getId(a) - getId(b),
@@ -185,13 +188,15 @@ export function flushPostFlushCbs(seen?: CountMap) {
       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
@@ -199,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
@@ -238,23 +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
         }
-        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)
     }
@@ -262,27 +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)
-      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
-    } 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 daa9413d2ee..cd1ef948d73 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -36,7 +36,10 @@ import {
   isSuspense,
 } from './components/Suspense'
 import type { DirectiveBinding } from './directives'
-import type { TransitionHooks } from './components/BaseTransition'
+import {
+  type TransitionHooks,
+  setTransitionHooks,
+} from './components/BaseTransition'
 import { warn } from './warning'
 import {
   type Teleport,
@@ -55,6 +58,7 @@ import { convertLegacyVModelProps } from './compat/componentVModel'
 import { defineLegacyVNodeProperties } from './compat/renderFn'
 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
@@ -62,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
@@ -88,10 +92,22 @@ export type VNodeRef =
     ) => 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 =
@@ -108,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
@@ -158,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
@@ -180,8 +196,10 @@ export interface VNode<
 
   // DOM
   el: HostNode | null
+  placeholder: HostNode | null // async component el placeholder
   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
@@ -210,7 +228,7 @@ export interface VNode<
   /**
    * @internal
    */
-  dynamicChildren: VNode[] | null
+  dynamicChildren: (VNode[] & { hasOnce?: boolean }) | null
 
   // application root node only
   appContext: AppContext | null
@@ -224,6 +242,10 @@ export interface VNode<
    * @internal attached by v-memo
    */
   memo?: any[]
+  /**
+   * @internal index for cleaning v-memo cache
+   */
+  cacheIndex?: number
   /**
    * @internal __COMPAT__ only
    */
@@ -239,8 +261,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.
@@ -258,11 +280,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
 }
@@ -280,7 +302,7 @@ export let isBlockTreeEnabled = 1
  *
  * ``` js
  * _cache[1] || (
- *   setBlockTracking(-1),
+ *   setBlockTracking(-1, true),
  *   _cache[1] = createVNode(...),
  *   setBlockTracking(1),
  *   _cache[1]
@@ -289,8 +311,13 @@ export let isBlockTreeEnabled = 1
  *
  * @private
  */
-export function setBlockTracking(value: number) {
+export function setBlockTracking(value: number, inVOnce = false): void {
   isBlockTreeEnabled += value
+  if (value < 0 && currentBlock && inVOnce) {
+    // mark current block so it doesn't take fast path and skip possible
+    // nested components during unmount
+    currentBlock.hasOnce = true
+  }
 }
 
 function setupBlock(vnode: VNode) {
@@ -317,7 +344,7 @@ export function createElementBlock(
   patchFlag?: number,
   dynamicProps?: string[],
   shapeFlag?: number,
-) {
+): VNode {
   return setupBlock(
     createBaseVNode(
       type,
@@ -362,17 +389,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
 }
@@ -390,7 +416,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
 }
 
@@ -404,8 +432,6 @@ const createVNodeWithArgsTransform = (
   )
 }
 
-export const InternalObjectKey = `__vInternal`
-
 const normalizeKey = ({ key }: VNodeProps): VNode['key'] =>
   key != null ? key : null
 
@@ -432,10 +458,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,
-) {
+): VNode {
   const vnode = {
     __v_isVNode: true,
     __v_skip: true,
@@ -455,6 +481,7 @@ function createBaseVNode(
     el: null,
     anchor: null,
     target: null,
+    targetStart: null,
     targetAnchor: null,
     staticCount: 0,
     shapeFlag,
@@ -547,7 +574,7 @@ function _createVNode(
         currentBlock.push(cloned)
       }
     }
-    cloned.patchFlag |= PatchFlags.BAIL
+    cloned.patchFlag = PatchFlags.BAIL
     return cloned
   }
 
@@ -616,21 +643,22 @@ function _createVNode(
   )
 }
 
-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,
+  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,
@@ -652,10 +680,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,
@@ -665,7 +694,7 @@ export function cloneVNode<T, U>(
     // fast paths only.
     patchFlag:
       extraProps && vnode.type !== Fragment
-        ? patchFlag === PatchFlags.HOISTED // hoisted node
+        ? patchFlag === PatchFlags.CACHED // hoisted node
           ? PatchFlags.FULL_PROPS
           : patchFlag | PatchFlags.FULL_PROPS
         : patchFlag,
@@ -673,7 +702,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
@@ -683,14 +712,28 @@ export function cloneVNode<T, U>(
     suspense: vnode.suspense,
     ssContent: vnode.ssContent && cloneVNode(vnode.ssContent),
     ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback),
+    placeholder: vnode.placeholder,
+
     el: vnode.el,
     anchor: vnode.anchor,
     ctx: vnode.ctx,
     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
 }
 
@@ -753,7 +796,7 @@ export function normalizeVNode(child: VNodeChild): VNode {
       // #3666, avoid reference pollution when reusing vnode
       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)
@@ -765,13 +808,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) {
@@ -792,7 +835,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
@@ -826,7 +869,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]
@@ -862,7 +905,7 @@ export function invokeVNodeHook(
   instance: ComponentInternalInstance | null,
   vnode: VNode,
   prevVNode: VNode | null = null,
-) {
+): void {
   callWithAsyncErrorHandling(hook, instance, ErrorCodes.VNODE_HOOK, [
     vnode,
     prevVNode,
diff --git a/packages/runtime-core/src/warning.ts b/packages/runtime-core/src/warning.ts
index 16928387dfb..788e9372154 100644
--- a/packages/runtime-core/src/warning.ts
+++ b/packages/runtime-core/src/warning.ts
@@ -22,15 +22,20 @@ 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[]) {
+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.
   pauseTracking()
@@ -45,7 +50,8 @@ 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(
@@ -57,18 +63,19 @@ export function warn(msg: string, ...args: any[]) {
     )
   } 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 {
@@ -100,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) => {
@@ -124,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)
@@ -139,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)
@@ -164,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
@@ -174,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 00000000000..a4abd6d1fff
--- /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 2ac2c4de8b9..11c373fe9e2 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__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index bb08fb1557e..07ea091486e 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,
+  onMounted,
+  provide,
   ref,
+  render,
   renderSlot,
+  useHost,
+  useShadowRoot,
 } from '../src'
 
+declare var __VUE_HMR_RUNTIME__: HMRRuntime
+
 describe('defineCustomElement', () => {
   const container = document.createElement('div')
   document.body.appendChild(container)
@@ -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.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>`
@@ -139,12 +211,33 @@ 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: {
@@ -265,7 +358,7 @@ describe('defineCustomElement', () => {
       expect(el.shadowRoot!.innerHTML).toMatchInlineSnapshot('"<div>foo</div>"')
     })
 
-    // # 5793
+    // #5793
     test('set number value in dom property', () => {
       const E = defineCustomElement({
         props: {
@@ -283,6 +376,104 @@ 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')
+    })
+
+    // #12214
+    test('Boolean prop with default true', async () => {
+      const E = defineCustomElement({
+        props: {
+          foo: {
+            type: Boolean,
+            default: true,
+          },
+        },
+        render() {
+          return String(this.foo)
+        },
+      })
+      customElements.define('my-el-default-true', E)
+      container.innerHTML = `<my-el-default-true></my-el-default-true>`
+      const e = container.childNodes[0] as HTMLElement & { foo: any },
+        shadowRoot = e.shadowRoot as ShadowRoot
+      expect(shadowRoot.innerHTML).toBe('true')
+      e.foo = undefined
+      await nextTick()
+      expect(shadowRoot.innerHTML).toBe('true')
+      e.foo = false
+      await nextTick()
+      expect(shadowRoot.innerHTML).toBe('false')
+      e.foo = null
+      await nextTick()
+      expect(shadowRoot.innerHTML).toBe('null')
+      e.foo = ''
+      await nextTick()
+      expect(shadowRoot.innerHTML).toBe('true')
+    })
+
+    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')
+    })
+
+    test('prop types validation', async () => {
+      const E = defineCustomElement({
+        props: {
+          num: {
+            type: [Number, String],
+          },
+          bool: {
+            type: Boolean,
+          },
+        },
+        render() {
+          return h('div', [
+            h('span', [`${this.num} is ${typeof this.num}`]),
+            h('span', [`${this.bool} is ${typeof this.bool}`]),
+          ])
+        },
+      })
+
+      customElements.define('my-el-with-type-props', E)
+      render(h('my-el-with-type-props', { num: 1, bool: true }), container)
+      const e = container.childNodes[0] as VueElement
+      // @ts-expect-error
+      expect(e.num).toBe(1)
+      // @ts-expect-error
+      expect(e.bool).toBe(true)
+      expect(e.shadowRoot!.innerHTML).toBe(
+        '<div><span>1 is number</span><span>true is boolean</span></div>',
+      )
+    })
   })
 
   describe('attrs', () => {
@@ -324,6 +515,9 @@ describe('defineCustomElement', () => {
             onMousedown: () => {
               emit('myEvent', 1) // validate hyphenation
             },
+            onWheel: () => {
+              emit('my-wheel', { bubbles: true }, 1)
+            },
           })
       },
     })
@@ -383,6 +577,7 @@ describe('defineCustomElement', () => {
         detail: [1],
       })
     })
+
     // #7293
     test('emit in an async component wrapper with properties bound', async () => {
       const E = defineCustomElement(
@@ -404,6 +599,19 @@ describe('defineCustomElement', () => {
         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],
+      })
+    })
   })
 
   describe('slots', () => {
@@ -421,7 +629,7 @@ describe('defineCustomElement', () => {
     })
     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
@@ -530,21 +738,223 @@ describe('defineCustomElement', () => {
         `<div>changedA! changedB!</div>`,
       )
     })
+
+    // #13212
+    test('inherited from app context within nested elements', async () => {
+      const outerValues: (string | undefined)[] = []
+      const innerValues: (string | undefined)[] = []
+      const innerChildValues: (string | undefined)[] = []
+
+      const Outer = defineCustomElement(
+        {
+          setup() {
+            outerValues.push(
+              inject<string>('shared'),
+              inject<string>('outer'),
+              inject<string>('inner'),
+            )
+          },
+          render() {
+            return h('div', [renderSlot(this.$slots, 'default')])
+          },
+        },
+        {
+          configureApp(app) {
+            app.provide('shared', 'shared')
+            app.provide('outer', 'outer')
+          },
+        },
+      )
+
+      const Inner = defineCustomElement(
+        {
+          setup() {
+            // ensure values are not self-injected
+            provide('inner', 'inner-child')
+
+            innerValues.push(
+              inject<string>('shared'),
+              inject<string>('outer'),
+              inject<string>('inner'),
+            )
+          },
+          render() {
+            return h('div', [renderSlot(this.$slots, 'default')])
+          },
+        },
+        {
+          configureApp(app) {
+            app.provide('outer', 'override-outer')
+            app.provide('inner', 'inner')
+          },
+        },
+      )
+
+      const InnerChild = defineCustomElement({
+        setup() {
+          innerChildValues.push(
+            inject<string>('shared'),
+            inject<string>('outer'),
+            inject<string>('inner'),
+          )
+        },
+        render() {
+          return h('div')
+        },
+      })
+
+      customElements.define('provide-from-app-outer', Outer)
+      customElements.define('provide-from-app-inner', Inner)
+      customElements.define('provide-from-app-inner-child', InnerChild)
+
+      container.innerHTML =
+        '<provide-from-app-outer>' +
+        '<provide-from-app-inner>' +
+        '<provide-from-app-inner-child></provide-from-app-inner-child>' +
+        '</provide-from-app-inner>' +
+        '</provide-from-app-outer>'
+
+      const outer = container.childNodes[0] as VueElement
+      expect(outer.shadowRoot!.innerHTML).toBe('<div><slot></slot></div>')
+
+      expect('[Vue warn]: injection "inner" not found.').toHaveBeenWarnedTimes(
+        1,
+      )
+      expect(
+        '[Vue warn]: App already provides property with key "outer" inherited from its parent element. ' +
+          'It will be overwritten with the new value.',
+      ).toHaveBeenWarnedTimes(1)
+
+      expect(outerValues).toEqual(['shared', 'outer', undefined])
+      expect(innerValues).toEqual(['shared', 'override-outer', 'inner'])
+      expect(innerChildValues).toEqual([
+        'shared',
+        'override-outer',
+        'inner-child',
+      ])
+    })
   })
 
   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("child components should not inject styles to root element's shadow root w/ shadowRoot false", async () => {
+      const Bar = defineComponent({
+        styles: [`div { color: green; }`],
+        render() {
+          return 'bar'
+        },
+      })
+      const Baz = () => h(Bar)
+      const Foo = defineCustomElement(
+        {
+          render() {
+            return [h(Baz)]
+          },
+        },
+        { shadowRoot: false },
+      )
+
+      customElements.define('my-foo-with-shadowroot-false', Foo)
+      container.innerHTML = `<my-foo-with-shadowroot-false></my-foo-with-shadowroot-false>`
+      const el = container.childNodes[0] as VueElement
+      const style = el.shadowRoot?.querySelector('style')
+      expect(style).toBeUndefined()
+    })
+
+    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')
     })
   })
 
@@ -693,4 +1103,675 @@ describe('defineCustomElement', () => {
       )
     })
   })
+
+  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()
+    })
+
+    test('toggle nested custom element with shadowRoot: false', async () => {
+      customElements.define(
+        'my-el-child-shadow-false',
+        defineCustomElement(
+          {
+            render(ctx: any) {
+              return h('div', null, [renderSlot(ctx.$slots, 'default')])
+            },
+          },
+          { shadowRoot: false },
+        ),
+      )
+      const ChildWrapper = {
+        render() {
+          return h('my-el-child-shadow-false', null, 'child')
+        },
+      }
+
+      customElements.define(
+        'my-el-parent-shadow-false',
+        defineCustomElement(
+          {
+            props: {
+              isShown: { type: Boolean, required: true },
+            },
+            render(ctx: any, _: any, $props: any) {
+              return $props.isShown
+                ? h('div', { key: 0 }, [renderSlot(ctx.$slots, 'default')])
+                : null
+            },
+          },
+          { shadowRoot: false },
+        ),
+      )
+      const ParentWrapper = {
+        props: {
+          isShown: { type: Boolean, required: true },
+        },
+        render(ctx: any, _: any, $props: any) {
+          return h('my-el-parent-shadow-false', { isShown: $props.isShown }, [
+            renderSlot(ctx.$slots, 'default'),
+          ])
+        },
+      }
+
+      const isShown = ref(true)
+      const App = {
+        render() {
+          return h(ParentWrapper, { isShown: isShown.value } as any, {
+            default: () => [h(ChildWrapper)],
+          })
+        },
+      }
+      const container = document.createElement('div')
+      document.body.appendChild(container)
+      const app = createApp(App)
+      app.mount(container)
+      expect(container.innerHTML).toBe(
+        `<my-el-parent-shadow-false is-shown="" data-v-app="">` +
+          `<div>` +
+          `<my-el-child-shadow-false data-v-app="">` +
+          `<div>child</div>` +
+          `</my-el-child-shadow-false>` +
+          `</div>` +
+          `</my-el-parent-shadow-false>`,
+      )
+
+      isShown.value = false
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<my-el-parent-shadow-false data-v-app=""><!----></my-el-parent-shadow-false>`,
+      )
+
+      isShown.value = true
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<my-el-parent-shadow-false data-v-app="" is-shown="">` +
+          `<div>` +
+          `<my-el-child-shadow-false data-v-app="">` +
+          `<div>child</div>` +
+          `</my-el-child-shadow-false>` +
+          `</div>` +
+          `</my-el-parent-shadow-false>`,
+      )
+    })
+  })
+
+  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 w/ options api', async () => {
+      const E = defineCustomElement({
+        data() {
+          return {
+            value: 0,
+          }
+        },
+        methods: {
+          foo() {
+            ;(this as any).value++
+          },
+        },
+        expose: ['foo'],
+        render(_ctx: any) {
+          return h('div', null, _ctx.value)
+        },
+      })
+      customElements.define('my-el-expose-options-api', E)
+
+      container.innerHTML = `<my-el-expose-options-api></my-el-expose-options-api>`
+      const e = container.childNodes[0] as VueElement & {
+        foo: () => void
+      }
+      expect(e.shadowRoot!.innerHTML).toBe(`<div>0</div>`)
+      e.foo()
+      await nextTick()
+      expect(e.shadowRoot!.innerHTML).toBe(`<div>1</div>`)
+    })
+    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>')
+    })
+
+    // #12448
+    test('work with async component', async () => {
+      const AsyncComp = defineAsyncComponent(() => {
+        return Promise.resolve({
+          render() {
+            const msg: string | undefined = inject('msg')
+            return h('div', {}, msg)
+          },
+        } as any)
+      })
+      const E = defineCustomElement(AsyncComp, {
+        configureApp(app) {
+          app.provide('msg', 'app-injected')
+        },
+      })
+      customElements.define('my-async-element-with-app', E)
+
+      container.innerHTML = `<my-async-element-with-app></my-async-element-with-app>`
+      const e = container.childNodes[0] as VueElement
+      await new Promise(r => setTimeout(r))
+      expect(e.shadowRoot?.innerHTML).toBe('<div>app-injected</div>')
+    })
+
+    test('with hmr reload', async () => {
+      const __hmrId = '__hmrWithApp'
+      const def = defineComponent({
+        __hmrId,
+        setup() {
+          const msg = inject('msg')
+          return { msg }
+        },
+        render(this: any) {
+          return h('div', [h('span', this.msg), h('span', this.$foo)])
+        },
+      })
+      const E = defineCustomElement(def, {
+        configureApp(app) {
+          app.provide('msg', 'app-injected')
+          app.config.globalProperties.$foo = 'foo'
+        },
+      })
+      customElements.define('my-element-with-app-hmr', E)
+
+      container.innerHTML = `<my-element-with-app-hmr></my-element-with-app-hmr>`
+      const el = container.childNodes[0] as VueElement
+      expect(el.shadowRoot?.innerHTML).toBe(
+        `<div><span>app-injected</span><span>foo</span></div>`,
+      )
+
+      // hmr
+      __VUE_HMR_RUNTIME__.reload(__hmrId, def as any)
+
+      await nextTick()
+      expect(el.shadowRoot?.innerHTML).toBe(
+        `<div><span>app-injected</span><span>foo</span></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`)
+  })
+
+  test('hyphenated attr removal', async () => {
+    const E = defineCustomElement({
+      props: {
+        fooBar: {
+          type: Boolean,
+        },
+      },
+      render() {
+        return this.fooBar
+      },
+    })
+    customElements.define('el-hyphenated-attr-removal', E)
+    const toggle = ref(true)
+    const Comp = {
+      render() {
+        return h('el-hyphenated-attr-removal', {
+          'foo-bar': toggle.value ? '' : null,
+        })
+      },
+    }
+    render(h(Comp), container)
+    const el = container.children[0]
+    expect(el.hasAttribute('foo-bar')).toBe(true)
+    expect((el as any).outerHTML).toBe(
+      `<el-hyphenated-attr-removal foo-bar=""></el-hyphenated-attr-removal>`,
+    )
+
+    toggle.value = false
+    await nextTick()
+    expect(el.hasAttribute('foo-bar')).toBe(false)
+    expect((el as any).outerHTML).toBe(
+      `<el-hyphenated-attr-removal></el-hyphenated-attr-removal>`,
+    )
+  })
 })
diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
index 6cc7b53e2c2..534e5dfe98e 100644
--- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
@@ -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 [
@@ -284,6 +290,19 @@ describe('vModel', () => {
               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',
@@ -317,6 +336,7 @@ describe('vModel', () => {
     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()
@@ -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() {
@@ -1237,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 03620f747e7..ef7ee346ba8 100644
--- a/packages/runtime-dom/__tests__/directives/vOn.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vOn.spec.ts
@@ -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')
diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
index e26b9dfb45e..e2102e0c7b8 100644
--- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
+++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
@@ -4,8 +4,10 @@ import {
   Suspense,
   Teleport,
   createStaticVNode,
+  defineCustomElement,
   h,
   nextTick,
+  onMounted,
   reactive,
   ref,
   render,
@@ -118,6 +120,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)
@@ -292,6 +351,7 @@ describe('useCssVars', () => {
     expect(() => render(h(App), root)).not.toThrow(TypeError)
     await nextTick()
     expect(target.children.length).toBe(0)
+    expect(root.children[0].outerHTML.includes('data-v-owner')).toBe(true)
   })
 
   test('with string style', async () => {
@@ -324,4 +384,108 @@ describe('useCssVars', () => {
       expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
     }
   })
+
+  test('with delay mount child', async () => {
+    const state = reactive({ color: 'red' })
+    const value = ref(false)
+    const root = document.createElement('div')
+
+    const Child = {
+      setup() {
+        onMounted(() => {
+          const childEl = root.children[0]
+          expect(getComputedStyle(childEl!).getPropertyValue(`--color`)).toBe(
+            `red`,
+          )
+        })
+        return () => h('div', { id: 'childId' })
+      },
+    }
+    const App = {
+      setup() {
+        useCssVars(() => state)
+        return () => (value.value ? h(Child) : [h('span')])
+      },
+    }
+
+    render(h(App), root)
+    await nextTick()
+    // css vars use with fallback tree
+    for (const c of [].slice.call(root.children as any)) {
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
+    }
+
+    // mount child
+    value.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>`,
+    )
+  })
+
+  test('should set vars before child component onMount hook', () => {
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+    let colorInOnMount
+
+    const App = {
+      setup() {
+        useCssVars(() => state)
+        onMounted(() => {
+          colorInOnMount = (
+            root.children[0] as HTMLElement
+          ).style.getPropertyValue(`--color`)
+        })
+        return () => h('div')
+      },
+    }
+
+    render(h(App), root)
+    expect(colorInOnMount).toBe(`red`)
+  })
+
+  test('should set vars as `initial` for nullish values', async () => {
+    // `getPropertyValue` cannot reflect the real value for white spaces and JSDOM also
+    // doesn't 100% reflect the real behavior of browsers, so we only keep the test for
+    // `initial` value here.
+    // The value normalization is tested in packages/shared/__tests__/cssVars.spec.ts.
+    const state = reactive<Record<string, unknown>>({
+      foo: undefined,
+      bar: null,
+    })
+    const root = document.createElement('div')
+    const App = {
+      setup() {
+        useCssVars(() => state)
+        return () => h('div')
+      },
+    }
+    render(h(App), root)
+    await nextTick()
+    const style = (root.children[0] as HTMLElement).style
+    expect(style.getPropertyValue('--foo')).toBe('initial')
+    expect(style.getPropertyValue('--bar')).toBe('initial')
+  })
 })
diff --git a/packages/runtime-dom/__tests__/nodeOps.spec.ts b/packages/runtime-dom/__tests__/nodeOps.spec.ts
index e185f14d8dd..db56ff25df5 100644
--- a/packages/runtime-dom/__tests__/nodeOps.spec.ts
+++ b/packages/runtime-dom/__tests__/nodeOps.spec.ts
@@ -1,5 +1,6 @@
-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', undefined, undefined, {
@@ -17,6 +18,20 @@ 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`
@@ -106,5 +121,38 @@ describe('runtime-dom: node-ops', () => {
       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 f06fb4a5ea6..393b685b0e9 100644
--- a/packages/runtime-dom/__tests__/patchAttrs.spec.ts
+++ b/packages/runtime-dom/__tests__/patchAttrs.spec.ts
@@ -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__/patchEvents.spec.ts b/packages/runtime-dom/__tests__/patchEvents.spec.ts
index 1b08f85caa4..f70bf327aff 100644
--- a/packages/runtime-dom/__tests__/patchEvents.spec.ts
+++ b/packages/runtime-dom/__tests__/patchEvents.spec.ts
@@ -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 7c356f1a66c..304d9f9c136 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 { h, render } from '../src'
+import {
+  h,
+  nextTick,
+  ref,
+  render,
+  vModelCheckbox,
+  withDirectives,
+} from '../src'
 
 describe('runtime-dom: props patching', () => {
   test('basic', () => {
@@ -133,6 +140,31 @@ 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 = {
@@ -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)
   })
@@ -291,6 +324,18 @@ describe('runtime-dom: props patching', () => {
     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
@@ -313,4 +358,40 @@ describe('runtime-dom: props patching', () => {
     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 e7cd0984a19..8b2765e2149 100644
--- a/packages/runtime-dom/__tests__/patchStyle.spec.ts
+++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -158,4 +158,13 @@ describe(`runtime-dom: style patching`, () => {
     )
     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 e5daabddb8c..729406f7a68 100644
--- a/packages/runtime-dom/package.json
+++ b/packages/runtime-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-dom",
-  "version": "3.4.18",
+  "version": "3.5.18",
   "description": "@vue/runtime-dom",
   "main": "index.js",
   "module": "dist/runtime-dom.esm-bundler.js",
@@ -51,6 +51,10 @@
   "dependencies": {
     "@vue/shared": "workspace:*",
     "@vue/runtime-core": "workspace:*",
+    "@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 337a3d90f9a..edf7c431353 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -1,155 +1,183 @@
 import {
+  type App,
+  type Component,
+  type ComponentCustomElementInterface,
   type ComponentInjectOptions,
   type ComponentInternalInstance,
+  type ComponentObjectPropsOptions,
   type ComponentOptions,
+  type ComponentOptionsBase,
   type ComponentOptionsMixin,
-  type ComponentOptionsWithArrayProps,
-  type ComponentOptionsWithObjectProps,
-  type ComponentOptionsWithoutProps,
-  type ComponentPropsOptions,
+  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 RootHydrateFunction,
   type SetupContext,
   type SlotsType,
   type VNode,
+  type VNodeProps,
   createVNode,
   defineComponent,
+  getCurrentInstance,
   nextTick,
+  unref,
   warn,
 } 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>
-
-// overload 2: object format with no props
-export function defineCustomElement<
-  Props = {},
-  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 = {},
->(
-  options: ComponentOptionsWithoutProps<
-    Props,
-    RawBindings,
-    D,
-    C,
-    M,
-    Mixin,
-    Extends,
-    E,
-    EE,
-    I,
-    II,
-    S
-  > & { styles?: string[] },
+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 3: object format with array props declaration
+// overload 2: defineCustomElement with options object, infer props from options
 export function defineCustomElement<
-  PropNames extends string,
-  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 = Record<string, any>,
-  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: 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
+  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: defining a custom element from the returned value of
+// `defineComponent`
 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 = {},
+  // this should be `ComponentPublicInstanceConstructor` but that type is not exported
+  T extends { new (...args: any[]): ComponentPublicInstance<any> },
 >(
-  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
-// `defineComponent`
-export function defineCustomElement<P>(
-  options: DefineComponent<P, any, any, any>,
-): VueElementConstructor<ExtractPropTypes<P>>
+  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,36 +185,76 @@ export function defineCustomElement(
 }
 
 /*! #__NO_SIDE_EFFECTS__ */
-export const defineSSRCustomElement = ((options: any) => {
+export const defineSSRCustomElement = ((
+  options: any,
+  extraOptions?: ComponentOptions,
+) => {
   // @ts-expect-error
-  return defineCustomElement(options, hydrate)
+  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(
@@ -194,35 +262,82 @@ export class VueElement extends BaseClass {
             `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
       }
     }
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
+    // avoid resolving component if it's not connected
+    if (!this.isConnected) return
+
+    // avoid re-parsing slots if already resolved
+    if (!this.shadowRoot && !this._resolved) {
+      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._update()
+        this._mount(this._def)
       } 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._inheritParentContext(parent)
+    }
+  }
+
+  private _inheritParentContext(parent = this._parent) {
+    // #13212, the provides object of the app context must inherit the provides
+    // object from the parent element so we can inject values from both places
+    if (parent && this._app) {
+      Object.setPrototypeOf(
+        this._app._context.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 +346,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 +365,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
@@ -266,28 +386,63 @@ export class VueElement extends BaseClass {
         }
       }
       this._numberProps = numberProps
-
-      if (isAsync) {
-        // defining getter/setters on prototype
-        // for sync defs, this already happened in the constructor
-        this._resolveProps(def)
-      }
+      this._resolveProps(def)
 
       // 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: InnerComponentDef) => {
+        def.configureApp = this._def.configureApp
+        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)
+    // inherit before configureApp to detect context overwrites
+    this._inheritParentContext()
+    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 +450,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,44 +461,56 @@ 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()
       }
       // reflect
       if (shouldReflect) {
+        const ob = this._ob
+        ob && ob.disconnect()
         if (val === true) {
           this.setAttribute(hyphenate(key), '')
         } else if (typeof val === 'string' || typeof val === 'number') {
@@ -351,26 +518,35 @@ export class VueElement extends BaseClass {
         } else if (!val) {
           this.removeAttribute(hyphenate(key))
         }
+        ob && ob.observe(this, { attributes: true })
       }
     }
   }
 
   private _update() {
-    render(this._createVNode(), this.shadowRoot!)
+    const vnode = this._createVNode()
+    if (this._app) vnode.appContext = this._app._context
+    render(vnode, 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 +557,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 +576,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 cce247fe1ae..6c6344bfcac 100644
--- a/packages/runtime-dom/src/components/Transition.ts
+++ b/packages/runtime-dom/src/components/Transition.ts
@@ -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,19 +42,6 @@ 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,
@@ -74,12 +61,33 @@ const DOMTransitionPropsValidators = {
   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
@@ -173,7 +181,13 @@ export function resolveTransitionProps(
     onAppearCancelled = onEnterCancelled,
   } = baseProps
 
-  const finishEnter = (el: Element, isAppear: boolean, done?: () => void) => {
+  const finishEnter = (
+    el: Element & { _enterCancelled?: boolean },
+    isAppear: boolean,
+    done?: () => void,
+    isCancelled?: boolean,
+  ) => {
+    el._enterCancelled = isCancelled
     removeTransitionClass(el, isAppear ? appearToClass : enterToClass)
     removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass)
     done && done()
@@ -232,16 +246,26 @@ export function resolveTransitionProps(
     },
     onEnter: makeEnterHook(false),
     onAppear: makeEnterHook(true),
-    onLeave(el: Element & { _isLeaving?: boolean }, done) {
+    onLeave(
+      el: Element & { _isLeaving?: boolean; _enterCancelled?: boolean },
+      done,
+    ) {
       el._isLeaving = true
       const resolve = () => finishLeave(el, done)
       addTransitionClass(el, leaveFromClass)
       if (__COMPAT__ && legacyClassEnabled && legacyLeaveFromClass) {
         addTransitionClass(el, legacyLeaveFromClass)
       }
-      // force reflow so *-leave-from classes immediately take effect (#2593)
-      forceReflow()
-      addTransitionClass(el, leaveActiveClass)
+      // add *-leave-active class before reflow so in the case of a cancelled enter transition
+      // the css will not get the final state (#10677)
+      if (!el._enterCancelled) {
+        // force reflow so *-leave-from classes immediately take effect (#2593)
+        forceReflow()
+        addTransitionClass(el, leaveActiveClass)
+      } else {
+        addTransitionClass(el, leaveActiveClass)
+        forceReflow()
+      }
       nextFrame(() => {
         if (!el._isLeaving) {
           // cancelled
@@ -259,11 +283,11 @@ export function resolveTransitionProps(
       callHook(onLeave, [el, resolve])
     },
     onEnterCancelled(el) {
-      finishEnter(el, false)
+      finishEnter(el, false, undefined, true)
       callHook(onEnterCancelled, [el])
     },
     onAppearCancelled(el) {
-      finishEnter(el, true)
+      finishEnter(el, true, undefined, true)
       callHook(onAppearCancelled, [el])
     },
     onLeaveCancelled(el) {
@@ -294,7 +318,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 +326,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) {
@@ -334,7 +358,7 @@ function whenTransitionEnds(
     }
   }
 
-  if (explicitTimeout) {
+  if (explicitTimeout != null) {
     return setTimeout(resolveIfNotStale, explicitTimeout)
   }
 
@@ -395,7 +419,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
@@ -453,6 +476,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 f98e82b2734..7bb5ce0c6b1 100644
--- a/packages/runtime-dom/src/components/TransitionGroup.ts
+++ b/packages/runtime-dom/src/components/TransitionGroup.ts
@@ -14,6 +14,7 @@ import {
   DeprecationTypes,
   Fragment,
   type SetupContext,
+  Text,
   type VNode,
   compatUtils,
   createVNode,
@@ -32,15 +33,30 @@ 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,
   }),
@@ -65,6 +81,7 @@ const TransitionGroupImpl: ComponentOptions = {
           moveClass,
         )
       ) {
+        prevChildren = []
         return
       }
 
@@ -94,6 +111,7 @@ const TransitionGroupImpl: ComponentOptions = {
         })
         el.addEventListener('transitionend', cb)
       })
+      prevChildren = []
     })
 
     return () => {
@@ -112,7 +130,29 @@ const TransitionGroupImpl: ComponentOptions = {
         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++) {
@@ -122,39 +162,15 @@ const TransitionGroupImpl: ComponentOptions = {
             child,
             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 (): {
diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts
index b2450b3cfb4..5057e16d472 100644
--- a/packages/runtime-dom/src/directives/vModel.ts
+++ b/packages/runtime-dom/src/directives/vModel.ts
@@ -37,16 +37,19 @@ function onCompositionEnd(e: Event) {
   }
 }
 
-const assignKey = Symbol('_assign')
+const assignKey: unique symbol = Symbol('_assign')
 
-type ModelDirective<T> = ObjectDirective<
-  T & { [assignKey]: AssignerFn; _assigning?: boolean }
+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)
@@ -82,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) {
@@ -96,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) {
@@ -157,12 +166,20 @@ function setChecked(
   // 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 {
+    if (value === oldValue) return
+    checked = looseEqual(value, getCheckboxValue(el, true))
+  }
+
+  // Only update if the checked state has changed
+  if (el.checked !== checked) {
+    el.checked = checked
   }
 }
 
@@ -182,7 +199,7 @@ export const vModelRadio: ModelDirective<HTMLInputElement> = {
   },
 }
 
-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) {
@@ -209,25 +226,20 @@ export const vModelSelect: ModelDirective<HTMLSelectElement> = {
   },
   // set value in mounted & updated because <select> relies on its children
   // <option>s.
-  mounted(el, { value, oldValue, modifiers: { number } }) {
-    setSelected(el, value, oldValue, number)
+  mounted(el, { value }) {
+    setSelected(el, value)
   },
   beforeUpdate(el, _binding, vnode) {
     el[assignKey] = getModelAssigner(vnode)
   },
-  updated(el, { value, oldValue, modifiers: { number } }) {
+  updated(el, { value }) {
     if (!el._assigning) {
-      setSelected(el, value, oldValue, number)
+      setSelected(el, value)
     }
   },
 }
 
-function setSelected(
-  el: HTMLSelectElement,
-  value: any,
-  oldValue: any,
-  number: boolean,
-) {
+function setSelected(el: HTMLSelectElement, value: any) {
   const isMultiple = el.multiple
   const isArrayValue = isArray(value)
   if (isMultiple && !isArrayValue && !isSet(value)) {
@@ -247,20 +259,16 @@ function setSelected(
         const optionType = typeof optionValue
         // fast path for string / number values
         if (optionType === 'string' || optionType === 'number') {
-          option.selected = value.includes(
-            number ? looseToNumber(optionValue) : optionValue,
-          )
+          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) {
@@ -334,7 +342,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) => {
@@ -371,3 +379,10 @@ export function initVModelForSSR() {
     }
   }
 }
+
+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 5a7d9e4af4a..c1a2e182f00 100644
--- a/packages/runtime-dom/src/directives/vOn.ts
+++ b/packages/runtime-dom/src/directives/vOn.ts
@@ -1,30 +1,47 @@
 import {
   type ComponentInternalInstance,
   DeprecationTypes,
+  type Directive,
   type LegacyConfig,
   compatUtils,
   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)),
 }
@@ -36,15 +53,15 @@ export const withModifiers = <
   T extends (event: Event, ...args: unknown[]) => any,
 >(
   fn: T & { _withMods?: { [key: string]: T } },
-  modifiers: string[],
-) => {
+  modifiers: VOnModifiers[],
+): T => {
   const cache = fn._withMods || (fn._withMods = {})
   const cacheKey = modifiers.join('.')
   return (
     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)
@@ -54,7 +71,10 @@ 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',
@@ -70,7 +90,7 @@ const keyNames: Record<string, string | string[]> = {
 export const withKeys = <T extends (event: KeyboardEvent) => any>(
   fn: T & { _withKeys?: { [k: string]: T } },
   modifiers: string[],
-) => {
+): T => {
   let globalKeyCodes: LegacyConfig['keyCodes']
   let instance: ComponentInternalInstance | null = null
   if (__COMPAT__) {
@@ -101,7 +121,13 @@ export const withKeys = <T extends (event: KeyboardEvent) => any>(
       }
 
       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)
       }
 
@@ -133,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 d8aab92e71b..f8f41bb04d4 100644
--- a/packages/runtime-dom/src/directives/vShow.ts
+++ b/packages/runtime-dom/src/directives/vShow.ts
@@ -1,15 +1,18 @@
 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> & { 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 {
@@ -22,7 +25,7 @@ export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
     }
   },
   updated(el, { value, oldValue }, { transition }) {
-    if (!value === !oldValue && el.style.display === el[vShowOldKey]) return
+    if (!value === !oldValue) return
     if (transition) {
       if (value) {
         transition.beforeEnter(el)
@@ -47,12 +50,13 @@ if (__DEV__) {
 }
 
 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 464951f1c45..0fb738975d1 100644
--- a/packages/runtime-dom/src/helpers/useCssModule.ts
+++ b/packages/runtime-dom/src/helpers/useCssModule.ts
@@ -2,7 +2,6 @@ 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 1666e3cb3dc..3032143d9a7 100644
--- a/packages/runtime-dom/src/helpers/useCssVars.ts
+++ b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -3,28 +3,33 @@ import {
   Static,
   type VNode,
   getCurrentInstance,
+  onBeforeUpdate,
   onMounted,
   onUnmounted,
+  queuePostFlushCb,
   warn,
-  watchPostEffect,
+  watch,
 } from '@vue/runtime-core'
-import { ShapeFlags } from '@vue/shared'
+import { NOOP, ShapeFlags, normalizeCssVarValue } from '@vue/shared'
 
-export const CSS_VAR_TEXT = Symbol(__DEV__ ? 'CSS_VAR_TEXT' : '')
+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, unknown>,
+): 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(
@@ -38,20 +43,30 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>) {
 
   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)
+  // handle cases where child component root is affected
+  // and triggers reflow in onMounted
+  onBeforeUpdate(() => {
+    queuePostFlushCb(setVars)
+  })
 
   onMounted(() => {
+    // run setVars synchronously here, but run as post-effect on changes
+    watch(setVars, NOOP, { flush: 'post' })
     const ob = new MutationObserver(setVars)
     ob.observe(instance.subTree.el!.parentNode, { childList: true })
     onUnmounted(() => ob.disconnect())
   })
 }
 
-function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
+function setVarsOnVNode(vnode: VNode, vars: Record<string, unknown>) {
   if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
     const suspense = vnode.suspense!
     vnode = suspense.activeBranch!
@@ -81,13 +96,14 @@ function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
   }
 }
 
-function setVarsOnNode(el: Node, vars: Record<string, string>) {
+function setVarsOnNode(el: Node, vars: Record<string, unknown>) {
   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]};`
+      const value = normalizeCssVarValue(vars[key])
+      style.setProperty(`--${key}`, value)
+      cssText += `--${key}: ${value};`
     }
     ;(style as any)[CSS_VAR_TEXT] = cssText
   }
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index 44ada3d935f..c69375983d8 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -1,7 +1,9 @@
 import {
   type App,
   type CreateAppFunction,
+  type DefineComponent,
   DeprecationTypes,
+  type Directive,
   type ElementNamespace,
   type HydrationRenderer,
   type Renderer,
@@ -25,14 +27,43 @@ import {
   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.
@@ -85,9 +116,9 @@ 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,
@@ -100,7 +131,9 @@ export const createApp = ((...args) => {
     }
 
     // clear content before mounting
-    container.innerHTML = ''
+    if (container.nodeType === 1) {
+      container.textContent = ''
+    }
     const proxy = mount(container, false, resolveRootNamespace(container))
     if (container instanceof Element) {
       container.removeAttribute('v-cloak')
@@ -131,7 +164,9 @@ export const createSSRApp = ((...args) => {
   return app
 }) as CreateAppFunction<Element>
 
-function resolveRootNamespace(container: Element): ElementNamespace {
+function resolveRootNamespace(
+  container: Element | ShadowRoot,
+): ElementNamespace {
   if (container instanceof SVGElement) {
     return 'svg'
   }
@@ -192,7 +227,7 @@ function injectCompilerOptionsCheck(app: App) {
 
 function normalizeContainer(
   container: Element | ShadowRoot | string,
-): Element | null {
+): Element | ShadowRoot | null {
   if (isString(container)) {
     const res = document.querySelector(container)
     if (__DEV__ && !res) {
@@ -219,8 +254,11 @@ function normalizeContainer(
 export {
   defineCustomElement,
   defineSSRCustomElement,
+  useShadowRoot,
+  useHost,
   VueElement,
   type VueElementConstructor,
+  type CustomElementOptions,
 } from './apiCustomElement'
 
 // SFC CSS utilities
@@ -253,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 b59099f0286..5292441cde9 100644
--- a/packages/runtime-dom/src/jsx.ts
+++ b/packages/runtime-dom/src/jsx.ts
@@ -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 */
@@ -1348,8 +1351,9 @@ export interface Events {
   // selection events
   onSelect: Event
 
-  // UI events
-  onScroll: UIEvent
+  // scroll events
+  onScroll: Event
+  onScrollend: Event
 
   // touch events
   onTouchcancel: TouchEvent
@@ -1389,7 +1393,7 @@ type EventHandlers<E> = {
 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 ff3ce36bf52..d7188aa9a1f 100644
--- a/packages/runtime-dom/src/modules/attrs.ts
+++ b/packages/runtime-dom/src/modules/attrs.ts
@@ -2,6 +2,7 @@ import {
   NOOP,
   includeBooleanAttr,
   isSpecialBooleanAttr,
+  isSymbol,
   makeMap,
 } from '@vue/shared'
 import {
@@ -18,7 +19,8 @@ export function patchAttr(
   value: any,
   isSVG: boolean,
   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,18 +34,21 @@ 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(
@@ -74,13 +79,15 @@ export function compatCoerceAttr(
     }
   } else if (
     value === false &&
+    !(el.tagName === 'INPUT' && key === 'value') &&
     !isSpecialBooleanAttr(key) &&
-    compatUtils.softAssertCompatEnabled(
+    compatUtils.isCompatEnabled(DeprecationTypes.ATTR_FALSE_VALUE, instance)
+  ) {
+    compatUtils.warnDeprecation(
       DeprecationTypes.ATTR_FALSE_VALUE,
       instance,
       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 d4f6c6d9097..b01f4e8d0db 100644
--- a/packages/runtime-dom/src/modules/class.ts
+++ b/packages/runtime-dom/src/modules/class.ts
@@ -2,7 +2,11 @@ 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 0335b6be0db..600b0840cde 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,
   callWithAsyncErrorHandling,
+  warn,
 } from '@vue/runtime-core'
 
 interface Invoker extends EventListener {
@@ -17,7 +18,7 @@ export function addEventListener(
   event: string,
   handler: EventListener,
   options?: EventListenerOptions,
-) {
+): void {
   el.addEventListener(event, handler, options)
 }
 
@@ -26,30 +27,37 @@ export function removeEventListener(
   event: string,
   handler: EventListener,
   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,
+  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,7 +86,7 @@ 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()))
 
@@ -116,6 +124,17 @@ 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,
@@ -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 3c09a127941..98608831a9a 100644
--- a/packages/runtime-dom/src/modules/props.ts
+++ b/packages/runtime-dom/src/modules/props.ts
@@ -1,28 +1,24 @@
-// __UNSAFE__
-// Reason: potentially setting innerHTML.
-// This can come from explicit usage of v-html or innerHTML as a prop in render
-
 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,
-) {
+  attrName?: string,
+): 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 +30,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
   }
 
@@ -103,5 +107,5 @@ export function patchDOMProp(
       )
     }
   }
-  needRemove && el.removeAttribute(key)
+  needRemove && el.removeAttribute(attrName || key)
 }
diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
index 9f897a6b2b0..383628a6ad0 100644
--- a/packages/runtime-dom/src/modules/style.ts
+++ b/packages/runtime-dom/src/modules/style.ts
@@ -1,22 +1,34 @@
 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
 
 const displayRE = /(^|;)\s*display\s*:/
 
-export function patchStyle(el: Element, prev: Style, next: Style) {
+export function patchStyle(el: Element, prev: Style, next: Style): void {
   const style = (el as HTMLElement).style
   const isCssString = isString(next)
-  const currentDisplay = style.display
   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, '')
+          }
         }
       }
     }
@@ -41,12 +53,14 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
       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) {
-    el[vShowOldKey] = hasControlledDisplay ? style.display : ''
-    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'
+    }
   }
 }
 
diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index a318000aa91..70c61078751 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -1,11 +1,45 @@
+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) => {
@@ -25,7 +59,9 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
         ? doc.createElementNS(svgNS, tag)
         : namespace === 'mathml'
           ? doc.createElementNS(mathmlNS, tag)
-          : doc.createElement(tag, is ? { is } : undefined)
+          : is
+            ? doc.createElement(tag, { is })
+            : doc.createElement(tag)
 
     if (tag === 'select' && props && props.multiple != null) {
       ;(el as HTMLSelectElement).setAttribute('multiple', props.multiple)
@@ -74,12 +110,13 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
       }
     } else {
       // fresh insert
-      templateContainer.innerHTML =
+      templateContainer.innerHTML = unsafeToTrustedHTML(
         namespace === 'svg'
           ? `<svg>${content}</svg>`
           : namespace === 'mathml'
             ? `<math>${content}</math>`
-            : content
+            : content,
+      ) as string
 
       const template = templateContainer.content
       if (namespace === 'svg' || namespace === 'mathml') {
diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index ef0197ed23c..27174ddf624 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 { isFunction, isModelListener, isOn, isString } from '@vue/shared'
+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 */ &&
@@ -21,10 +28,7 @@ export const patchProp: DOMRendererOptions['patchProp'] = (
   prevValue,
   nextValue,
   namespace,
-  prevChildren,
   parentComponent,
-  parentSuspense,
-  unmountChildren,
 ) => {
   const isSVG = namespace === 'svg'
   if (key === 'class') {
@@ -43,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, key)
   } else {
     // special case for <input v-model type="checkbox"> with
     // :true-value & :false-value
@@ -91,7 +102,12 @@ function shouldSetAsProp(
   // them as attributes.
   // Note that `contentEditable` doesn't have this problem: its DOM
   // property is also enumerated string values.
-  if (key === 'spellcheck' || key === 'draggable' || key === 'translate') {
+  if (
+    key === 'spellcheck' ||
+    key === 'draggable' ||
+    key === 'translate' ||
+    key === 'autocorrect'
+  ) {
     return false
   }
 
diff --git a/packages/runtime-test/README.md b/packages/runtime-test/README.md
index 6d6ba829822..6db8b810e2d 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 2b6e12c4769..df8c77af0a7 100644
--- a/packages/runtime-test/__tests__/testRuntime.spec.ts
+++ b/packages/runtime-test/__tests__/testRuntime.spec.ts
@@ -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 ba11f60c2c1..b754509cb20 100644
--- a/packages/runtime-test/src/index.ts
+++ b/packages/runtime-test/src/index.ts
@@ -17,7 +17,7 @@ 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 e338fd52000..933a0f73eeb 100644
--- a/packages/runtime-test/src/nodeOps.ts
+++ b/packages/runtime-test/src/nodeOps.ts
@@ -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 = []
 }
 
@@ -128,7 +128,7 @@ function createComment(text: string): TestComment {
   return node
 }
 
-function setText(node: TestText, text: string) {
+function setText(node: TestText, text: string): void {
   logNodeOp({
     type: NodeOpTypes.SET_TEXT,
     targetNode: node,
@@ -137,7 +137,11 @@ function setText(node: TestText, text: string) {
   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)
@@ -166,7 +170,7 @@ 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) {
@@ -188,7 +192,7 @@ 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,
@@ -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,
diff --git a/packages/runtime-test/src/patchProp.ts b/packages/runtime-test/src/patchProp.ts
index f10b5364746..8b4479b8dc6 100644
--- a/packages/runtime-test/src/patchProp.ts
+++ b/packages/runtime-test/src/patchProp.ts
@@ -6,7 +6,7 @@ export function patchProp(
   key: string,
   prevValue: any,
   nextValue: any,
-) {
+): void {
   logNodeOp({
     type: NodeOpTypes.PATCH,
     targetNode: el,
diff --git a/packages/runtime-test/src/serialize.ts b/packages/runtime-test/src/serialize.ts
index e8871945be1..87efa6cd911 100644
--- a/packages/runtime-test/src/serialize.ts
+++ b/packages/runtime-test/src/serialize.ts
@@ -23,7 +23,7 @@ export function serializeInner(
   node: TestElement,
   indent: number = 0,
   depth: number = 0,
-) {
+): string {
   const newLine = indent ? `\n` : ``
   return node.children.length
     ? newLine +
diff --git a/packages/runtime-test/src/triggerEvent.ts b/packages/runtime-test/src/triggerEvent.ts
index 94ccd2badcd..4b037d62af3 100644
--- a/packages/runtime-test/src/triggerEvent.ts
+++ b/packages/runtime-test/src/triggerEvent.ts
@@ -5,7 +5,7 @@ export function triggerEvent(
   el: TestElement,
   event: string,
   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 4188fc93fd7..55323e429e6 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 00000000000..002626d9e12
--- /dev/null
+++ b/packages/server-renderer/__tests__/createBuffer.bench.ts
@@ -0,0 +1,69 @@
+import { bench, describe } from 'vitest'
+
+import { createBuffer as _createBuffer } from '../src/render'
+
+// move to local const to avoid import access overhead
+// https://github.com/vitest-dev/vitest/issues/6903
+const createBuffer = _createBuffer
+
+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 705cb2a8b6f..d0a5223b2ff 100644
--- a/packages/server-renderer/__tests__/render.spec.ts
+++ b/packages/server-renderer/__tests__/render.spec.ts
@@ -81,6 +81,18 @@ function testRender(type: string, render: typeof renderToString) {
       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(
@@ -873,6 +885,26 @@ function testRender(type: string, render: typeof renderToString) {
       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>`)
+    })
+
     // #2763
     test('error handling w/ async setup', async () => {
       const fn = vi.fn()
diff --git a/packages/server-renderer/__tests__/ssrComputed.spec.ts b/packages/server-renderer/__tests__/ssrComputed.spec.ts
index 646fa83731c..bf0800ff253 100644
--- a/packages/server-renderer/__tests__/ssrComputed.spec.ts
+++ b/packages/server-renderer/__tests__/ssrComputed.spec.ts
@@ -1,4 +1,4 @@
-import { computed, createSSRApp, defineComponent, h, 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
@@ -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 d3ced89b3d2..dfdebe971f5 100644
--- a/packages/server-renderer/__tests__/ssrDirectives.spec.ts
+++ b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
@@ -2,7 +2,10 @@ import { renderToString } from '../src/renderToString'
 import {
   createApp,
   h,
+  mergeProps,
+  ref,
   resolveDirective,
+  unref,
   vModelCheckbox,
   vModelDynamic,
   vModelRadio,
@@ -542,4 +545,44 @@ describe('ssr: directives', () => {
       ),
     ).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 caeb88397b1..0679c82168b 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 () => {
@@ -17,6 +17,23 @@ describe('ssr: dynamic 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(
diff --git a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
index 53b44728cfa..984387bb864 100644
--- a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
+++ b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
@@ -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', () => {
@@ -190,4 +203,19 @@ describe('ssr: renderStyle', () => {
       }),
     ).toBe(`color:&quot;&gt;&lt;script;`)
   })
+
+  test('useCssVars handling', () => {
+    expect(
+      ssrRenderStyle({
+        fontSize: null,
+        ':--v1': undefined,
+        ':--v2': null,
+        ':--v3': '',
+        ':--v4': '  ',
+        ':--v5': 'foo',
+        ':--v6': 0,
+        '--foo': 1,
+      }),
+    ).toBe(`--v1:initial;--v2:initial;--v3: ;--v4:  ;--v5:foo;--v6:0;--foo:1;`)
+  })
 })
diff --git a/packages/server-renderer/__tests__/ssrScopeId.spec.ts b/packages/server-renderer/__tests__/ssrScopeId.spec.ts
index f9d356065d0..4ceb865fb50 100644
--- a/packages/server-renderer/__tests__/ssrScopeId.spec.ts
+++ b/packages/server-renderer/__tests__/ssrScopeId.spec.ts
@@ -179,4 +179,94 @@ describe('ssr: scopedId runtime behavior', () => {
     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 7e2b2247d25..214e6ee840b 100644
--- a/packages/server-renderer/__tests__/ssrSlot.spec.ts
+++ b/packages/server-renderer/__tests__/ssrSlot.spec.ts
@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp, defineAsyncComponent, h } from 'vue'
 import { renderToString } from '../src/renderToString'
 
 const components = {
@@ -111,26 +111,106 @@ describe('ssr: slot', () => {
   })
 
   test('transition slot', async () => {
+    const ReusableTransition = {
+      template: `<transition><slot/></transition>`,
+    }
+
+    const ReusableTransitionWithAppear = {
+      template: `<transition appear><slot/></transition>`,
+    }
+
     expect(
       await renderToString(
         createApp({
           components: {
-            one: {
-              template: `<transition><slot/></transition>`,
-            },
+            one: ReusableTransition,
           },
           template: `<one><div v-if="false">foo</div></one>`,
         }),
       ),
     ).toBe(`<!---->`)
 
+    expect(await renderToString(createApp(ReusableTransition))).toBe(`<!---->`)
+
+    expect(await renderToString(createApp(ReusableTransitionWithAppear))).toBe(
+      `<template><!----></template>`,
+    )
+
     expect(
       await renderToString(
         createApp({
           components: {
-            one: {
-              template: `<transition><slot/></transition>`,
-            },
+            one: ReusableTransition,
+          },
+          template: `<one><slot/></one>`,
+        }),
+      ),
+    ).toBe(`<!---->`)
+
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            one: ReusableTransitionWithAppear,
+          },
+          template: `<one><slot/></one>`,
+        }),
+      ),
+    ).toBe(`<template><!----></template>`)
+
+    expect(
+      await renderToString(
+        createApp({
+          render() {
+            return h(ReusableTransition, null, {
+              default: () => null,
+            })
+          },
+        }),
+      ),
+    ).toBe(`<!---->`)
+
+    expect(
+      await renderToString(
+        createApp({
+          render() {
+            return h(ReusableTransitionWithAppear, null, {
+              default: () => null,
+            })
+          },
+        }),
+      ),
+    ).toBe(`<template><!----></template>`)
+
+    expect(
+      await renderToString(
+        createApp({
+          render() {
+            return h(ReusableTransitionWithAppear, null, {
+              default: () => [],
+            })
+          },
+        }),
+      ),
+    ).toBe(`<template><!----></template>`)
+
+    expect(
+      await renderToString(
+        createApp({
+          render() {
+            return h(ReusableTransition, null, {
+              default: () => [],
+            })
+          },
+        }),
+      ),
+    ).toBe(`<!---->`)
+
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            one: ReusableTransition,
           },
           template: `<one><div v-if="true">foo</div></one>`,
         }),
@@ -153,4 +233,86 @@ describe('ssr: slot', () => {
       ),
     ).toBe(`<div><p>1</p><p>2</p></div>`)
   })
+
+  // #12438
+  test('async component slot with v-if true', async () => {
+    const Layout = defineAsyncComponent(() =>
+      Promise.resolve({
+        template: `<div><slot name="header">default header</slot></div>`,
+      }),
+    )
+    const LayoutLoader = {
+      setup(_: any, context: any) {
+        return () => h(Layout, {}, context.slots)
+      },
+    }
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            LayoutLoader,
+          },
+          template: `
+            <Suspense>
+              <LayoutLoader>
+                <template v-if="true" #header>
+                  new header
+                </template>
+              </LayoutLoader>
+            </Suspense>
+          `,
+        }),
+      ),
+    ).toBe(`<div><!--[--> new header <!--]--></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__/ssrTeleport.spec.ts b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
index a0a2f6ae0a1..78c56942636 100644
--- a/packages/server-renderer/__tests__/ssrTeleport.spec.ts
+++ b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
@@ -28,7 +28,7 @@ describe('ssrRenderTeleport', () => {
     )
     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-->`,
     )
   })
 
@@ -56,7 +56,9 @@ describe('ssrRenderTeleport', () => {
     expect(html).toBe(
       '<!--teleport start--><div>content</div><!--teleport end-->',
     )
-    expect(ctx.teleports!['#target']).toBe(`<!--teleport anchor-->`)
+    expect(ctx.teleports!['#target']).toBe(
+      `<!--teleport start anchor--><!--teleport anchor-->`,
+    )
   })
 
   test('teleport rendering (vnode)', async () => {
@@ -73,7 +75,7 @@ describe('ssrRenderTeleport', () => {
     )
     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-->',
     )
   })
 
@@ -93,7 +95,9 @@ describe('ssrRenderTeleport', () => {
     expect(html).toBe(
       '<!--teleport start--><span>hello</span><!--teleport end-->',
     )
-    expect(ctx.teleports!['#target']).toBe(`<!--teleport anchor-->`)
+    expect(ctx.teleports!['#target']).toBe(
+      `<!--teleport start anchor--><!--teleport anchor-->`,
+    )
   })
 
   test('multiple teleports with same target', async () => {
@@ -115,7 +119,8 @@ describe('ssrRenderTeleport', () => {
       '<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-->',
     )
   })
 
@@ -134,7 +139,7 @@ describe('ssrRenderTeleport', () => {
     )
     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-->`,
     )
   })
 
@@ -169,7 +174,7 @@ describe('ssrRenderTeleport', () => {
     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__/ssrWatch.spec.ts b/packages/server-renderer/__tests__/ssrWatch.spec.ts
index c157c90cd42..40c49740d3e 100644
--- a/packages/server-renderer/__tests__/ssrWatch.spec.ts
+++ b/packages/server-renderer/__tests__/ssrWatch.spec.ts
@@ -1,4 +1,12 @@
-import { createSSRApp, defineComponent, h, ref, watch } from 'vue'
+import {
+  createSSRApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  watch,
+  watchEffect,
+} from 'vue'
 import { type SSRContext, renderToString } from '../src'
 
 describe('ssr: watch', () => {
@@ -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 00000000000..b26ab9b28ef
--- /dev/null
+++ b/packages/server-renderer/__tests__/unrollBuffer.bench.ts
@@ -0,0 +1,78 @@
+import { bench, describe } from 'vitest'
+
+import { type SSRBuffer, createBuffer } from '../src/render'
+import { unrollBuffer as _unrollBuffer } from '../src/renderToString'
+
+// move to local const to avoid import access overhead
+// https://github.com/vitest-dev/vitest/issues/6903
+const unrollBuffer = _unrollBuffer
+
+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 700a9a0ae3f..de399dbb82a 100644
--- a/packages/server-renderer/__tests__/webStream.spec.ts
+++ b/packages/server-renderer/__tests__/webStream.spec.ts
@@ -49,7 +49,7 @@ test('pipeToWebWritable', async () => {
   }
 
   const { readable, writable } = new TransformStream()
-  pipeToWebWritable(createApp(App), {}, writable)
+  pipeToWebWritable(createApp(App), {}, writable as any)
 
   const reader = readable.getReader()
   const decoder = new TextDecoder()
diff --git a/packages/server-renderer/package.json b/packages/server-renderer/package.json
index b3180b2010c..0fe43c72cee 100644
--- a/packages/server-renderer/package.json
+++ b/packages/server-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/server-renderer",
-  "version": "3.4.18",
+  "version": "3.5.18",
   "description": "@vue/server-renderer",
   "main": "index.js",
   "module": "dist/server-renderer.esm-bundler.js",
diff --git a/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts b/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts
index 094d8564f8d..c3cb428ab75 100644
--- a/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts
+++ b/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts
@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance, Directive } from '@vue/runtime-core'
+import { type ComponentPublicInstance, type Directive, ssrUtils } from 'vue'
 
 export function ssrGetDirectiveProps(
   instance: ComponentPublicInstance,
@@ -12,7 +12,7 @@ export function ssrGetDirectiveProps(
       dir.getSSRProps(
         {
           dir,
-          instance,
+          instance: ssrUtils.getComponentPublicInstance(instance.$),
           value,
           oldValue: undefined,
           arg,
diff --git a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
index 5eb77116b19..b082da03fe8 100644
--- a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
@@ -1,5 +1,7 @@
 import {
   escapeHtml,
+  isArray,
+  isObject,
   isRenderableAttrValue,
   isSVGTag,
   stringifyStyle,
@@ -12,12 +14,13 @@ import {
   isString,
   makeMap,
   normalizeClass,
+  normalizeCssVarValue,
   normalizeStyle,
   propsToAttrMap,
 } from '@vue/shared'
 
 // leading comma for empty string ""
-const shouldIgnoreProp = makeMap(
+const shouldIgnoreProp = /*@__PURE__*/ makeMap(
   `,key,ref,innerHTML,textContent,ref_key,ref_for`,
 )
 
@@ -39,6 +42,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)
     }
@@ -91,6 +96,22 @@ export function ssrRenderStyle(raw: unknown): string {
   if (isString(raw)) {
     return escapeHtml(raw)
   }
-  const styles = normalizeStyle(raw)
+  const styles = normalizeStyle(ssrResetCssVars(raw))
   return escapeHtml(stringifyStyle(styles))
 }
+
+function ssrResetCssVars(raw: unknown) {
+  if (!isArray(raw) && isObject(raw)) {
+    const res: Record<string, unknown> = {}
+    for (const key in raw) {
+      // `:` prefixed keys are coming from `ssrCssVars`
+      if (key.startsWith(':--')) {
+        res[key.slice(1)] = normalizeCssVarValue(raw[key])
+      } else {
+        res[key] = raw[key]
+      }
+    }
+    return res
+  }
+  return raw
+}
diff --git a/packages/server-renderer/src/helpers/ssrRenderList.ts b/packages/server-renderer/src/helpers/ssrRenderList.ts
index 1d009172145..7553c8bfef5 100644
--- a/packages/server-renderer/src/helpers/ssrRenderList.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderList.ts
@@ -4,7 +4,7 @@ import { warn } from '@vue/runtime-core'
 export function ssrRenderList(
   source: unknown,
   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 df088e8929a..2f93a12de9d 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
@@ -1,4 +1,4 @@
-import type { ComponentInternalInstance, Slots } from 'vue'
+import { type ComponentInternalInstance, type Slots, ssrUtils } from 'vue'
 import {
   type Props,
   type PushFn,
@@ -7,6 +7,8 @@ import {
 } from '../render'
 import { isArray } from '@vue/shared'
 
+const { ensureValidVNode } = ssrUtils
+
 export type SSRSlots = Record<string, SSRSlot>
 export type SSRSlot = (
   props: Props,
@@ -23,7 +25,7 @@ export function ssrRenderSlot(
   push: PushFn,
   parentComponent: ComponentInternalInstance,
   slotScopeId?: string,
-) {
+): void {
   // template-compiled slots are always rendered as fragments
   push(`<!--[-->`)
   ssrRenderSlotInner(
@@ -47,7 +49,7 @@ export function ssrRenderSlotInner(
   parentComponent: ComponentInternalInstance,
   slotScopeId?: string,
   transition?: boolean,
-) {
+): void {
   const slotFn = slots[slotName]
   if (slotFn) {
     const slotBuffer: SSRBufferItem[] = []
@@ -61,8 +63,20 @@ export function ssrRenderSlotInner(
       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 if (transition) {
+        push(`<!---->`)
+      }
     } else {
       // ssr slot.
       // check if the slot renders all comments, in which case use the fallback
@@ -98,17 +112,23 @@ export function ssrRenderSlotInner(
           end--
         }
 
-        for (let i = start; i < end; i++) {
-          push(slotBuffer[i])
+        if (start < end) {
+          for (let i = start; i < end; i++) {
+            push(slotBuffer[i])
+          }
+        } else if (transition) {
+          push(`<!---->`)
         }
       }
     }
   } else if (fallbackRenderFn) {
     fallbackRenderFn()
+  } else if (transition) {
+    push(`<!---->`)
   }
 }
 
-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 58e668b070f..1c6823afa95 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSuspense.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSuspense.ts
@@ -3,7 +3,7 @@ import type { PushFn } from '../render'
 export async function ssrRenderSuspense(
   push: PushFn,
   { 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 d83af28c131..0dea2826ffa 100644
--- a/packages/server-renderer/src/helpers/ssrRenderTeleport.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderTeleport.ts
@@ -12,7 +12,7 @@ export function ssrRenderTeleport(
   target: string,
   disabled: boolean,
   parentComponent: ComponentInternalInstance,
-) {
+): void {
   parentPush('<!--teleport start-->')
 
   const context = parentComponent.appContext.provides[
@@ -29,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 d899db88f35..d7489105f8f 100644
--- a/packages/server-renderer/src/helpers/ssrVModelHelpers.ts
+++ b/packages/server-renderer/src/helpers/ssrVModelHelpers.ts
@@ -12,7 +12,7 @@ export function ssrRenderDynamicModel(
   type: unknown,
   model: unknown,
   value: unknown,
-) {
+): string {
   switch (type) {
     case 'radio':
       return looseEqual(model, value) ? ' checked' : ''
@@ -30,7 +30,7 @@ export function ssrRenderDynamicModel(
 export function ssrGetDynamicModelProps(
   existingProps: any = {},
   model: unknown,
-) {
+): { checked: true } | { value: any } | null {
   const { type, value } = existingProps
   switch (type) {
     case 'radio':
diff --git a/packages/server-renderer/src/render.ts b/packages/server-renderer/src/render.ts
index 3029df6e540..f04080b9c31 100644
--- a/packages/server-renderer/src/render.ts
+++ b/packages/server-renderer/src/render.ts
@@ -35,6 +35,8 @@ const {
   setupComponent,
   renderComponentRoot,
   normalizeVNode,
+  pushWarningContext,
+  popWarningContext,
 } = ssrUtils
 
 export type SSRBuffer = SSRBufferItem[] & { hasAsync?: boolean }
@@ -69,13 +71,13 @@ 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.
@@ -91,24 +93,29 @@ export function renderComponentVNode(
   parentComponent: ComponentInternalInstance | null = null,
   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(
+    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)
-    }
+          )
+        }
+      })
+      // 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)
@@ -119,6 +126,7 @@ function renderComponentSubTree(
   instance: ComponentInternalInstance,
   slotScopeId?: string,
 ): SSRBuffer | Promise<SSRBuffer> {
+  if (__DEV__) pushWarningContext(instance.vnode)
   const comp = instance.type as Component
   const { getBuffer, push } = createBuffer()
   if (isFunction(comp)) {
@@ -143,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
@@ -181,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
@@ -214,6 +216,7 @@ function renderComponentSubTree(
       push(`<!---->`)
     }
   }
+  if (__DEV__) popWarningContext()
   return getBuffer()
 }
 
@@ -222,8 +225,12 @@ export function renderVNode(
   vnode: VNode,
   parentComponent: ComponentInternalInstance,
   slotScopeId?: string,
-) {
-  const { type, shapeFlag, children } = vnode
+): 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))
@@ -275,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)
   }
@@ -286,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)
   }
@@ -371,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
diff --git a/packages/server-renderer/src/renderToStream.ts b/packages/server-renderer/src/renderToStream.ts
index 60b277a4a9b..e6b02d1cf99 100644
--- a/packages/server-renderer/src/renderToStream.ts
+++ b/packages/server-renderer/src/renderToStream.ts
@@ -125,9 +125,9 @@ export function renderToNodeStream(
 
 export function pipeToNodeWritable(
   input: App | VNode,
-  context: SSRContext = {},
+  context: SSRContext | undefined = {},
   writable: Writable,
-) {
+): void {
   renderToSimpleStream(input, context, {
     push(content) {
       if (content != null) {
@@ -181,7 +181,7 @@ export function renderToWebStream(
 
 export function pipeToWebWritable(
   input: App | VNode,
-  context: SSRContext = {},
+  context: SSRContext | undefined = {},
   writable: WritableStream,
 ): void {
   const writer = writable.getWriter()
diff --git a/packages/server-renderer/src/renderToString.ts b/packages/server-renderer/src/renderToString.ts
index 0e9299ee834..9f7f9a1d74f 100644
--- a/packages/server-renderer/src/renderToString.ts
+++ b/packages/server-renderer/src/renderToString.ts
@@ -11,26 +11,46 @@ 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)
-      }
+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
     }
-    return ret
-  } else {
-    // sync buffer can be more efficiently unrolled without unnecessary await
-    // ticks
-    return unrollBufferSync(buffer)
+
+    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 {
@@ -76,7 +96,7 @@ 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) {
diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
deleted file mode 100644
index cadd39f4baa..00000000000
--- a/packages/sfc-playground/src/App.vue
+++ /dev/null
@@ -1,174 +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 replRef = ref<InstanceType<typeof Repl>>()
-
-const setVH = () => {
-  document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
-}
-window.addEventListener('resize', setVH)
-setVH()
-
-const useProdMode = ref(false)
-const useSSRMode = ref(false)
-
-let hash = location.hash.slice(1)
-if (hash.startsWith('__DEV__')) {
-  hash = hash.slice(7)
-  useProdMode.value = false
-}
-if (hash.startsWith('__PROD__')) {
-  hash = hash.slice(8)
-  useProdMode.value = true
-}
-if (hash.startsWith('__SSR__')) {
-  hash = hash.slice(7)
-  useSSRMode.value = true
-}
-
-const store = new ReplStore({
-  serializedState: hash,
-  productionMode: useProdMode.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: useProdMode.value,
-    isProd: useProdMode.value,
-    propsDestructure: true,
-  },
-  style: {
-    isProd: useProdMode.value,
-  },
-  template: {
-    isProd: useProdMode.value,
-    compilerOptions: {
-      isCustomElement: (tag: string) => tag === 'mjx-container',
-    },
-  },
-}
-
-// persist state
-watchEffect(() => {
-  const newHash = store
-    .serialize()
-    .replace(/^#/, useSSRMode.value ? `#__SSR__` : `#`)
-    .replace(/^#/, useProdMode.value ? `#__PROD__` : `#`)
-  history.replaceState({}, '', newHash)
-})
-
-function toggleProdMode() {
-  const isProd = (useProdMode.value = !useProdMode.value)
-  sfcOptions.script!.inlineTemplate =
-    sfcOptions.script!.isProd =
-    sfcOptions.template!.isProd =
-    sfcOptions.style!.isProd =
-      isProd
-  store.toggleProduction()
-  store.setFiles(store.getFiles())
-}
-
-function toggleSSR() {
-  useSSRMode.value = !useSSRMode.value
-  store.setFiles(store.getFiles())
-}
-
-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'))
-})
-</script>
-
-<template>
-  <Header
-    :store="store"
-    :prod="useProdMode"
-    :ssr="useSSRMode"
-    @toggle-theme="toggleTheme"
-    @toggle-prod="toggleProdMode"
-    @toggle-ssr="toggleSSR"
-    @reload-page="reloadPage"
-  />
-  <Repl
-    v-if="EditorComponent"
-    ref="replRef"
-    :theme="theme"
-    :editor="EditorComponent"
-    @keydown.ctrl.s.prevent
-    @keydown.meta.s.prevent
-    :ssr="useSSRMode"
-    :store="store"
-    :showCompileOutput="true"
-    :autoResize="true"
-    :sfcOptions="sfcOptions"
-    :clearConsole="false"
-    :preview-options="{
-      customCode: {
-        importCode: `import { initCustomFormatter } from 'vue'`,
-        useCode: `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/shared/__tests__/__snapshots__/codeframe.spec.ts.snap b/packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap
index 4caa583461d..28486d71723 100644
--- a/packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap
+++ b/packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap
@@ -1,5 +1,31 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+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>
+   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+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>
diff --git a/packages/shared/__tests__/codeframe.spec.ts b/packages/shared/__tests__/codeframe.spec.ts
index addae82c908..41ad08b2a9b 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>
diff --git a/packages/shared/__tests__/cssVars.spec.ts b/packages/shared/__tests__/cssVars.spec.ts
new file mode 100644
index 00000000000..747ab067d25
--- /dev/null
+++ b/packages/shared/__tests__/cssVars.spec.ts
@@ -0,0 +1,27 @@
+import { normalizeCssVarValue } from '../src'
+
+describe('utils/cssVars', () => {
+  test('should normalize css binding values correctly', () => {
+    expect(normalizeCssVarValue(null)).toBe('initial')
+    expect(normalizeCssVarValue(undefined)).toBe('initial')
+    expect(normalizeCssVarValue('')).toBe(' ')
+    expect(normalizeCssVarValue('  ')).toBe('  ')
+    expect(normalizeCssVarValue('foo')).toBe('foo')
+    expect(normalizeCssVarValue(0)).toBe('0')
+  })
+
+  test('should warn on invalid css binding values', () => {
+    const warning =
+      '[Vue warn] Invalid value used for CSS binding. Expected a string or a finite number but received:'
+    expect(normalizeCssVarValue(NaN)).toBe('NaN')
+    expect(warning).toHaveBeenWarnedTimes(1)
+    expect(normalizeCssVarValue(Infinity)).toBe('Infinity')
+    expect(warning).toHaveBeenWarnedTimes(2)
+    expect(normalizeCssVarValue(-Infinity)).toBe('-Infinity')
+    expect(warning).toHaveBeenWarnedTimes(3)
+    expect(normalizeCssVarValue({})).toBe('[object Object]')
+    expect(warning).toHaveBeenWarnedTimes(4)
+    expect(normalizeCssVarValue([])).toBe('')
+    expect(warning).toHaveBeenWarnedTimes(5)
+  })
+})
diff --git a/packages/shared/__tests__/normalizeProp.spec.ts b/packages/shared/__tests__/normalizeProp.spec.ts
index 4e5736af46f..00c6b294da1 100644
--- a/packages/shared/__tests__/normalizeProp.spec.ts
+++ b/packages/shared/__tests__/normalizeProp.spec.ts
@@ -1,4 +1,10 @@
-import { normalizeClass, parseStringStyle } from '../src'
+import {
+  normalizeClass,
+  normalizeProps,
+  normalizeStyle,
+  parseStringStyle,
+  stringifyStyle,
+} from '../src'
 
 describe('normalizeClass', () => {
   test('handles undefined correctly', () => {
@@ -15,6 +21,11 @@ describe('normalizeClass', () => {
     )
   })
 
+  test('handles string containing spaces correctly', () => {
+    expect(normalizeClass('foo1 ')).toEqual('foo1')
+    expect(normalizeClass(['foo ', ' baz '])).toEqual('foo baz')
+  })
+
   test('handles empty array correctly', () => {
     expect(normalizeClass([])).toEqual('')
   })
@@ -92,3 +103,132 @@ describe('normalizeClass', () => {
     `)
   })
 })
+
+describe('normalizeStyle', () => {
+  test('handles string correctly', () => {
+    expect(normalizeStyle('foo')).toEqual('foo')
+  })
+
+  test('handles array correctly', () => {
+    const style: any = normalizeStyle([
+      `border: 1px solid transparent;
+    background: linear-gradient(white, white) padding-box,
+      repeating-linear-gradient(
+        -45deg,
+        #ccc 0,
+        #ccc 0.5em,
+        white 0,
+        white 0.75em
+      );`,
+    ])
+
+    expect(style.border).toEqual('1px solid transparent')
+
+    expect(style.background).toEqual(`linear-gradient(white, white) padding-box,
+      repeating-linear-gradient(
+        -45deg,
+        #ccc 0,
+        #ccc 0.5em,
+        white 0,
+        white 0.75em
+      )`)
+  })
+
+  test('handles object correctly', () => {
+    const styleObj = {
+      border: '1px solid transparent',
+      background: `linear-gradient(white, white) padding-box,
+      repeating-linear-gradient(
+        -45deg,
+        #ccc 0,
+        #ccc 0.5em,
+        white 0,
+        white 0.75em
+      )`,
+    }
+    const style: any = normalizeStyle(styleObj)
+    expect(style.border).toEqual(styleObj.border)
+    expect(style.background).toEqual(styleObj.background)
+  })
+})
+
+describe('stringifyStyle', () => {
+  test('should return empty string for undefined', () => {
+    expect(stringifyStyle(undefined)).toBe('')
+    expect(stringifyStyle('')).toBe('')
+    expect(stringifyStyle('color: blue;')).toBe('color: blue;')
+  })
+
+  test('should return valid CSS string for normalized style object', () => {
+    const style = {
+      color: 'blue',
+      fontSize: '14px',
+      backgroundColor: 'white',
+      opacity: 0.8,
+      margin: 0,
+      '--custom-color': 'red',
+    }
+
+    expect(stringifyStyle(style)).toBe(
+      'color:blue;font-size:14px;background-color:white;opacity:0.8;margin:0;--custom-color:red;',
+    )
+  })
+
+  test('should ignore non-string or non-number values in style object', () => {
+    const style: any = {
+      color: 'blue',
+      fontSize: '14px',
+      lineHeight: true,
+      padding: null,
+      margin: undefined,
+    }
+
+    const expected = 'color:blue;font-size:14px;'
+    expect(stringifyStyle(style)).toBe(expected)
+  })
+})
+
+describe('normalizeProps', () => {
+  test('should return null when props is null', () => {
+    const props = null
+    const result = normalizeProps(props)
+    expect(result).toBeNull()
+  })
+
+  test('should normalize class prop when it is an array', () => {
+    const props = {
+      class: ['class1', 'class2'],
+    }
+    const result = normalizeProps(props)
+    expect(result).toEqual({
+      class: 'class1 class2',
+    })
+  })
+
+  test('should normalize class prop when it is an object', () => {
+    const props = {
+      class: {
+        class1: true,
+        class2: false,
+        class3: true,
+      },
+    }
+    const result = normalizeProps(props)
+    expect(result).toEqual({
+      class: 'class1 class3',
+    })
+  })
+
+  test('should normalize style prop', () => {
+    const props = {
+      style: ['color: blue', 'font-size: 14px'],
+    }
+    const result = normalizeProps(props)
+    expect(result).toEqual({
+      style: {
+        color: 'blue',
+        'font-size': '14px',
+      },
+    })
+  })
+})
diff --git a/packages/shared/__tests__/toDisplayString.spec.ts b/packages/shared/__tests__/toDisplayString.spec.ts
index ef5030239b4..cd8db0b4726 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))
diff --git a/packages/shared/package.json b/packages/shared/package.json
index d816e3105e4..63a10598ce8 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/shared",
-  "version": "3.4.18",
+  "version": "3.5.18",
   "description": "internal utils shared across @vue packages",
   "main": "index.js",
   "module": "dist/shared.esm-bundler.js",
diff --git a/packages/shared/src/codeframe.ts b/packages/shared/src/codeframe.ts
index af7212166ee..1fdb606aed0 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
diff --git a/packages/shared/src/cssVars.ts b/packages/shared/src/cssVars.ts
new file mode 100644
index 00000000000..0c69b606f5d
--- /dev/null
+++ b/packages/shared/src/cssVars.ts
@@ -0,0 +1,24 @@
+/**
+ * Normalize CSS var value created by `v-bind` in `<style>` block
+ * See https://github.com/vuejs/core/pull/12461#issuecomment-2495804664
+ */
+export function normalizeCssVarValue(value: unknown): string {
+  if (value == null) {
+    return 'initial'
+  }
+
+  if (typeof value === 'string') {
+    return value === '' ? ' ' : value
+  }
+
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    if (__DEV__) {
+      console.warn(
+        '[Vue warn] Invalid value used for CSS binding. Expected a string or a finite number but received:',
+        value,
+      )
+    }
+  }
+
+  return String(value)
+}
diff --git a/packages/shared/src/domAttrConfig.ts b/packages/shared/src/domAttrConfig.ts
index 758dfb307be..b5f0166327f 100644
--- a/packages/shared/src/domAttrConfig.ts
+++ b/packages/shared/src/domAttrConfig.ts
@@ -12,12 +12,13 @@ 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,` +
@@ -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,` +
@@ -80,7 +81,7 @@ export const isKnownHtmlAttr = /*#__PURE__*/ makeMap(
 /**
  * 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,` +
@@ -122,6 +123,25 @@ export const isKnownSvgAttr = /*#__PURE__*/ makeMap(
     `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
  */
diff --git a/packages/shared/src/domTagConfig.ts b/packages/shared/src/domTagConfig.ts
index 000432298ff..7f9d198e569 100644
--- a/packages/shared/src/domTagConfig.ts
+++ b/packages/shared/src/domTagConfig.ts
@@ -42,19 +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 isMathMLTag = /*#__PURE__*/ makeMap(MATH_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 = /*#__PURE__*/ makeMap(VOID_TAGS)
+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 bacd182ad97..e3af6c0c11f 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 e04b961227a..9c6a2313240 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)
@@ -35,7 +36,7 @@ export const hasOwn = (
   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,13 +74,13 @@ 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,' +
@@ -86,9 +88,10 @@ export const isReservedProp = /*#__PURE__*/ makeMap(
     '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,47 +105,60 @@ 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,
+    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 210650e3e2b..3b584cc1a24 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,Error'
+  '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/index.ts b/packages/shared/src/index.ts
index 11580a06435..08d4b07af8e 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -12,3 +12,4 @@ export * from './escapeHtml'
 export * from './looseEqual'
 export * from './toDisplayString'
 export * from './typeUtils'
+export * from './cssVars'
diff --git a/packages/shared/src/looseEqual.ts b/packages/shared/src/looseEqual.ts
index db869922fc1..9e71767219c 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 f11cc407c6f..e85efe21e5b 100644
--- a/packages/shared/src/makeMap.ts
+++ b/packages/shared/src/makeMap.ts
@@ -5,12 +5,10 @@
  * \/\*#\_\_PURE\_\_\*\/
  * So that rollup can tree-shake them if necessary.
  */
-export function makeMap(
-  str: string,
-  expectsLowerCase?: boolean,
-): (key: string) => boolean {
-  const set = new Set(str.split(','))
-  return expectsLowerCase
-    ? val => set.has(val.toLowerCase())
-    : val => set.has(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 07e782d44f1..ef598a03ced 100644
--- a/packages/shared/src/normalizeProp.ts
+++ b/packages/shared/src/normalizeProp.ts
@@ -45,14 +45,14 @@ export function parseStringStyle(cssText: string): NormalizedStyle {
 export function stringifyStyle(
   styles: NormalizedStyle | string | undefined,
 ): string {
+  if (!styles) return ''
+  if (isString(styles)) return styles
+
   let ret = ''
-  if (!styles || isString(styles)) {
-    return ret
-  }
   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 009b714737f..289da19029d 100644
--- a/packages/shared/src/patchFlags.ts
+++ b/packages/shared/src/patchFlags.ts
@@ -109,10 +109,10 @@ export 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()
@@ -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.CACHED]: `CACHED`,
   [PatchFlags.BAIL]: `BAIL`,
 }
diff --git a/packages/shared/src/slotFlags.ts b/packages/shared/src/slotFlags.ts
index e7892343d5c..15fb9fa793c 100644
--- a/packages/shared/src/slotFlags.ts
+++ b/packages/shared/src/slotFlags.ts
@@ -23,7 +23,7 @@ export enum SlotFlags {
 /**
  * Dev only
  */
-export const slotFlagsText = {
+export const slotFlagsText: Record<SlotFlags, string> = {
   [SlotFlags.STABLE]: 'STABLE',
   [SlotFlags.DYNAMIC]: 'DYNAMIC',
   [SlotFlags.FORWARDED]: 'FORWARDED',
diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts
index aff107cd97f..b23cf766a5c 100644
--- a/packages/shared/src/toDisplayString.ts
+++ b/packages/shared/src/toDisplayString.ts
@@ -1,3 +1,5 @@
+// enums are compiled away via custom transform so no real dependency here
+import { ReactiveFlags } from '@vue/reactivity'
 import {
   isArray,
   isFunction,
@@ -10,6 +12,11 @@ import {
   objectToString,
 } 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
@@ -22,13 +29,14 @@ 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 {
@@ -54,4 +62,6 @@ const replacer = (_key: string, val: any): any => {
 }
 
 const stringifySymbol = (v: unknown, i: number | string = ''): any =>
-  isSymbol(v) ? `Symbol(${v.description ?? i})` : v
+  // 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 63372d82916..f5b9e6ec3c8 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 81dc39146b7..00000000000
--- 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 6ec0ba20a77..00000000000
--- 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 23e4ce9ebcc..9428d6f6c7b 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 2ae2f211a10..68bb6e987bc 100644
--- a/packages/vue-compat/__tests__/compiler.spec.ts
+++ b/packages/vue-compat/__tests__/compiler.spec.ts
@@ -93,6 +93,16 @@ test('COMPILER_V_BIND_OBJECT_ORDER', () => {
   ).toHaveBeenWarned()
 })
 
+test('should not warn COMPILER_V_BIND_OBJECT_ORDER work with vFor', () => {
+  const vm = new Vue({
+    template: `<div><div v-bind="{ id: 'bar', class: 'baz' }" v-for="item in 5" /></div>`,
+  }).$mount()
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
+  expect(
+    CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER,
+  ).not.toHaveBeenWarned()
+})
+
 test('COMPILER_V_ON_NATIVE', () => {
   const spy = vi.fn()
   const vm = new Vue({
diff --git a/packages/vue-compat/__tests__/componentVModel.spec.ts b/packages/vue-compat/__tests__/componentVModel.spec.ts
index 7e498828715..5ef19954734 100644
--- a/packages/vue-compat/__tests__/componentVModel.spec.ts
+++ b/packages/vue-compat/__tests__/componentVModel.spec.ts
@@ -82,4 +82,62 @@ describe('COMPONENT_V_MODEL', () => {
       template: `<input :value="input" @input="$emit('update', $event.target.value)">`,
     })
   })
+
+  async function runTestWithModifier(CustomInput: ComponentOptions) {
+    const vm = new Vue({
+      data() {
+        return {
+          text: ' foo ',
+        }
+      },
+      components: {
+        CustomInput,
+      },
+      template: `
+      <div>
+        <span>{{ text }}</span>
+        <custom-input v-model.trim="text"></custom-input>
+      </div>
+      `,
+    }).$mount() as any
+
+    const input = vm.$el.querySelector('input')
+    const span = vm.$el.querySelector('span')
+
+    expect(input.value).toBe(' foo ')
+    expect(span.textContent).toBe(' foo ')
+
+    expect(
+      (deprecationData[DeprecationTypes.COMPONENT_V_MODEL].message as Function)(
+        CustomInput,
+      ),
+    ).toHaveBeenWarned()
+
+    input.value = ' bar '
+    triggerEvent(input, 'input')
+    await nextTick()
+
+    expect(input.value).toBe('bar')
+    expect(span.textContent).toBe('bar')
+  }
+
+  test('with model modifiers', async () => {
+    await runTestWithModifier({
+      name: 'CustomInput',
+      props: ['value'],
+      template: `<input :value="value" @input="$emit('input', $event.target.value)">`,
+    })
+  })
+
+  test('with model modifiers and model option', async () => {
+    await runTestWithModifier({
+      name: 'CustomInput',
+      props: ['foo'],
+      model: {
+        prop: 'foo',
+        event: 'bar',
+      },
+      template: `<input :value="foo" @input="$emit('bar', $event.target.value)">`,
+    })
+  })
 })
diff --git a/packages/vue-compat/__tests__/instance.spec.ts b/packages/vue-compat/__tests__/instance.spec.ts
index 63ce5581230..aa5e95a7e79 100644
--- a/packages/vue-compat/__tests__/instance.spec.ts
+++ b/packages/vue-compat/__tests__/instance.spec.ts
@@ -14,6 +14,7 @@ beforeEach(() => {
   Vue.configureCompat({
     MODE: 2,
     GLOBAL_MOUNT: 'suppress-warning',
+    PRIVATE_APIS: 'suppress-warning',
   })
 })
 
@@ -283,7 +284,7 @@ describe('INSTANCE_SCOPED_SLOTS', () => {
     ).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,7 +292,7 @@ describe('INSTANCE_SCOPED_SLOTS', () => {
       components: {
         child: {
           compatConfig: { RENDER_FUNCTION: false },
-          render() {
+          render(this: LegacyPublicInstance) {
             normalSlots = this.$slots
             scopedSlots = this.$scopedSlots
           },
@@ -300,7 +301,7 @@ describe('INSTANCE_SCOPED_SLOTS', () => {
     }).$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,
@@ -331,3 +332,43 @@ test('INSTANCE_ATTR_CLASS_STYLE', () => {
     )('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 d9598be3738..17fddd94c4a 100644
--- a/packages/vue-compat/__tests__/misc.spec.ts
+++ b/packages/vue-compat/__tests__/misc.spec.ts
@@ -208,6 +208,45 @@ test('ATTR_FALSE_VALUE', () => {
   ).toHaveBeenWarned()
 })
 
+test('ATTR_FALSE_VALUE with false on input value', () => {
+  const vm = new Vue({
+    template: `<input :value="false"/>`,
+  }).$mount()
+  expect(vm.$el).toBeInstanceOf(HTMLInputElement)
+  expect(vm.$el.hasAttribute('value')).toBe(true)
+  expect(vm.$el.getAttribute('value')).toBe('false')
+  expect(
+    (deprecationData[DeprecationTypes.ATTR_FALSE_VALUE].message as Function)(
+      'value',
+    ),
+  ).not.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" />`,
diff --git a/packages/vue-compat/__tests__/utils.ts b/packages/vue-compat/__tests__/utils.ts
index 18e6516a4a6..1d862422761 100644
--- a/packages/vue-compat/__tests__/utils.ts
+++ b/packages/vue-compat/__tests__/utils.ts
@@ -2,7 +2,7 @@ export function triggerEvent(
   target: Element,
   event: string,
   process?: (e: any) => any,
-) {
+): Event {
   const e = new Event(event, {
     bubbles: true,
     cancelable: true,
diff --git a/packages/vue-compat/package.json b/packages/vue-compat/package.json
index 37ef5a957df..dbb35695845 100644
--- a/packages/vue-compat/package.json
+++ b/packages/vue-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compat",
-  "version": "3.4.18",
+  "version": "3.5.18",
   "description": "Vue 3 compatibility build for Vue 2",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",
@@ -52,9 +52,9 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/vue-compat#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.9",
-    "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 3144a529de6..1302e000505 100644
--- a/packages/vue-compat/src/createCompatVue.ts
+++ b/packages/vue-compat/src/createCompatVue.ts
@@ -2,6 +2,7 @@
 // `dist/vue.esm-bundler.js` which is used by default for bundlers.
 import { initDev } from './dev'
 import {
+  type CompatVue,
   DeprecationTypes,
   KeepAlive,
   Transition,
@@ -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 22e1c6c3858..a9ad81e3ba5 100644
--- a/packages/vue-compat/src/dev.ts
+++ b/packages/vue-compat/src/dev.ts
@@ -1,6 +1,6 @@
 import { initCustomFormatter } from '@vue/runtime-dom'
 
-export function initDev() {
+export function initDev(): void {
   if (__BROWSER__) {
     if (!__ESM_BUNDLER__) {
       console.info(
diff --git a/packages/vue-compat/src/esm-index.ts b/packages/vue-compat/src/esm-index.ts
index f2ad1c37693..aa1e5ce081d 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 c5bb5d21344..778f99253ea 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 70608b7e646..d7e9695d824 100644
--- a/packages/vue-compat/src/index.ts
+++ b/packages/vue-compat/src/index.ts
@@ -7,11 +7,18 @@ import {
   compile,
 } from '@vue/compiler-dom'
 import {
+  type CompatVue,
   type RenderFunction,
   registerRuntimeCompiler,
   warn,
 } from '@vue/runtime-dom'
-import { NOOP, extend, generateCodeFrame, isString } from '@vue/shared'
+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 {
@@ -34,7 +41,7 @@ function compileToFunction(
     }
   }
 
-  const key = template
+  const key = genCacheKey(template, options)
   const cached = compileCache[key]
   if (cached) {
     return cached
@@ -99,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 9b52d0de6c3..5689a5b75d6 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__) {
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 2aca524e03d..757ea82f5d7 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
@@ -24,7 +25,7 @@
   - For use with bundlers like `webpack`, `rollup` and `parcel`.
   - Leaves prod/dev branches with `process.env.NODE_ENV` guards (must be replaced by bundler)
   - Does not ship minified builds (to be done together with the rest of the code after bundling)
-  - Imports dependencies (e.g. `@vue/runtime-core`, `@vue/runtime-compiler`)
+  - Imports dependencies (e.g. `@vue/runtime-core`, `@vue/compiler-core`)
     - Imported dependencies are also `esm-bundler` builds and will in turn import their dependencies (e.g. `@vue/runtime-core` imports `@vue/reactivity`)
     - This means you **can** install/import these deps individually without ending up with different instances of these dependencies, but you must make sure they all resolve to the same version.
   - In-browser template compilation:
@@ -38,10 +39,12 @@
 `esm-bundler` builds of Vue expose global feature flags that can be overwritten at compile time:
 
 - `__VUE_OPTIONS_API__`
+
   - Default: `true`
   - Enable / disable Options API support
 
 - `__VUE_PROD_DEVTOOLS__`
+
   - Default: `false`
   - Enable / disable devtools support in production
 
diff --git a/packages/vue/__tests__/e2e/Transition.spec.ts b/packages/vue/__tests__/e2e/Transition.spec.ts
index e8d6d1e049e..45597521791 100644
--- a/packages/vue/__tests__/e2e/Transition.spec.ts
+++ b/packages/vue/__tests__/e2e/Transition.spec.ts
@@ -1,14 +1,15 @@
+import type { ElementHandle } from 'puppeteer'
 import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 import path from 'node:path'
 import { Transition, createApp, h, nextTick, ref } from 'vue'
 
 describe('e2e: Transition', () => {
-  const { page, html, classList, isVisible, timeout, nextFrame, click } =
+  const { page, html, classList, style, isVisible, timeout, nextFrame, click } =
     setupPuppeteer()
   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 +30,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({
@@ -1214,6 +1213,515 @@ describe('e2e: Transition', () => {
       },
       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,
+    )
+
+    // #12860
+    test(
+      'unmount children',
+      async () => {
+        const unmountSpy = vi.fn()
+        let storageContainer: ElementHandle<HTMLDivElement>
+        const setStorageContainer = (container: any) =>
+          (storageContainer = container)
+        await page().exposeFunction('unmountSpy', unmountSpy)
+        await page().exposeFunction('setStorageContainer', setStorageContainer)
+        await page().evaluate(() => {
+          const { unmountSpy, setStorageContainer } = window as any
+          const { createApp, ref, h, onUnmounted, getCurrentInstance } = (
+            window as any
+          ).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition>
+                <KeepAlive :include="includeRef">
+                  <TrueBranch v-if="toggle"></TrueBranch>
+                </KeepAlive>
+              </transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            components: {
+              TrueBranch: {
+                name: 'TrueBranch',
+                setup() {
+                  const instance = getCurrentInstance()
+                  onUnmounted(() => {
+                    unmountSpy()
+                    setStorageContainer(instance.__keepAliveStorageContainer)
+                  })
+                  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)
+        expect(await storageContainer!.evaluate(x => x.innerHTML)).toBe(``)
+      },
+      E2E_TIMEOUT,
+    )
   })
 
   describe('transition with Suspense', () => {
@@ -1723,6 +2231,155 @@ describe('e2e: Transition', () => {
       },
       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', () => {
@@ -2398,6 +3055,55 @@ describe('e2e: Transition', () => {
     )
   })
 
+  test('reflow after *-leave-from before *-leave-active', async () => {
+    await page().evaluate(() => {
+      const { createApp, ref } = (window as any).Vue
+      createApp({
+        template: `
+          <div id="container">
+            <transition name="test-reflow">
+              <div v-if="toggle" class="test-reflow">content</div>
+            </transition>
+          </div>
+          <button id="toggleBtn" @click="click">button</button>
+        `,
+        setup: () => {
+          const toggle = ref(false)
+          const click = () => (toggle.value = !toggle.value)
+          return {
+            toggle,
+            click,
+          }
+        },
+      }).mount('#app')
+    })
+
+    // if transition starts while there's v-leave-active added along with v-leave-from, its bad, it has to start when it doesnt have the v-leave-from
+
+    // enter
+    await classWhenTransitionStart()
+    await transitionFinish()
+
+    // leave
+    expect(await classWhenTransitionStart()).toStrictEqual([
+      'test-reflow',
+      'test-reflow-leave-from',
+      'test-reflow-leave-active',
+    ])
+
+    expect(await style('.test-reflow', 'opacity')).toStrictEqual('0.9')
+
+    await nextFrame()
+    expect(await classList('.test-reflow')).toStrictEqual([
+      'test-reflow',
+      'test-reflow-leave-active',
+      'test-reflow-leave-to',
+    ])
+
+    await transitionFinish()
+    expect(await html('#container')).toBe('<!--v-if-->')
+  })
+
   test('warn when used on multiple elements', async () => {
     createApp({
       render() {
@@ -2533,4 +3239,124 @@ describe('e2e: Transition', () => {
     },
     E2E_TIMEOUT,
   )
+
+  // https://github.com/vuejs/core/issues/12181#issuecomment-2414380955
+  describe('not leaking', async () => {
+    test('switching VNodes', async () => {
+      const client = await page().createCDPSession()
+      await page().evaluate(async () => {
+        const { createApp, ref, nextTick } = (window as any).Vue
+        const empty = ref(true)
+
+        createApp({
+          components: {
+            Child: {
+              setup: () => {
+                // Big arrays kick GC earlier
+                const test = ref([...Array(30_000_000)].map((_, i) => ({ i })))
+                // TODO: Use a different TypeScript env for testing
+                // @ts-expect-error - Custom property and same lib as runtime is used
+                window.__REF__ = new WeakRef(test)
+
+                return { test }
+              },
+              template: `
+                <p>{{ test.length }}</p>
+              `,
+            },
+            Empty: {
+              template: '<div></div>',
+            },
+          },
+          template: `
+            <transition>
+              <component :is="empty ? 'Empty' : 'Child'" />
+            </transition>
+          `,
+          setup() {
+            return { empty }
+          },
+        }).mount('#app')
+
+        await nextTick()
+        empty.value = false
+        await nextTick()
+        empty.value = true
+        await nextTick()
+      })
+
+      const isCollected = async () =>
+        // @ts-expect-error - Custom property
+        await page().evaluate(() => window.__REF__.deref() === undefined)
+
+      while ((await isCollected()) === false) {
+        await client.send('HeapProfiler.collectGarbage')
+      }
+
+      expect(await isCollected()).toBe(true)
+    })
+
+    // https://github.com/vuejs/core/issues/12181#issue-2588232334
+    test('switching deep vnodes edge case', async () => {
+      const client = await page().createCDPSession()
+      await page().evaluate(async () => {
+        const { createApp, ref, nextTick } = (window as any).Vue
+        const shown = ref(false)
+
+        createApp({
+          components: {
+            Child: {
+              setup: () => {
+                // Big arrays kick GC earlier
+                const test = ref([...Array(30_000_000)].map((_, i) => ({ i })))
+                // TODO: Use a different TypeScript env for testing
+                // @ts-expect-error - Custom property and same lib as runtime is used
+                window.__REF__ = new WeakRef(test)
+
+                return { test }
+              },
+              template: `
+                <p>{{ test.length }}</p>
+              `,
+            },
+            Wrapper: {
+              template: `
+                <transition>
+                  <div v-if="true">
+                    <slot />
+                  </div>
+                </transition>
+              `,
+            },
+          },
+          template: `
+            <button id="toggleBtn" @click="shown = !shown">{{ shown ? 'Hide' : 'Show' }}</button>
+            <Wrapper>
+              <Child v-if="shown" />
+              <div v-else></div>
+            </Wrapper>
+          `,
+          setup() {
+            return { shown }
+          },
+        }).mount('#app')
+
+        await nextTick()
+        shown.value = true
+        await nextTick()
+        shown.value = false
+        await nextTick()
+      })
+
+      const isCollected = async () =>
+        // @ts-expect-error - Custom property
+        await page().evaluate(() => window.__REF__.deref() === undefined)
+
+      while ((await isCollected()) === false) {
+        await client.send('HeapProfiler.collectGarbage')
+      }
+
+      expect(await isCollected()).toBe(true)
+    })
+  })
 })
diff --git a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
index febc9d3c20a..62d89db4e31 100644
--- a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
+++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
@@ -508,4 +508,192 @@ describe('e2e: TransitionGroup', () => {
 
     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,
+  )
+
+  test(
+    'not leaking after children unmounted',
+    async () => {
+      const client = await page().createCDPSession()
+      await page().evaluate(async () => {
+        const { createApp, ref, nextTick } = (window as any).Vue
+        const show = ref(true)
+
+        createApp({
+          components: {
+            Child: {
+              setup: () => {
+                // Big arrays kick GC earlier
+                const test = ref([...Array(3000)].map((_, i) => ({ i })))
+                // @ts-expect-error - Custom property and same lib as runtime is used
+                window.__REF__ = new WeakRef(test)
+
+                return { test }
+              },
+              template: `
+              <p>{{ test.length }}</p>
+            `,
+            },
+          },
+          template: `
+          <transition-group>
+            <Child v-if="show" />
+          </transition-group>
+        `,
+          setup() {
+            return { show }
+          },
+        }).mount('#app')
+
+        show.value = false
+        await nextTick()
+      })
+
+      const isCollected = async () =>
+        // @ts-expect-error - Custom property
+        await page().evaluate(() => window.__REF__.deref() === undefined)
+
+      while ((await isCollected()) === false) {
+        await client.send('HeapProfiler.collectGarbage')
+      }
+
+      expect(await isCollected()).toBe(true)
+    },
+    E2E_TIMEOUT,
+  )
 })
diff --git a/packages/vue/__tests__/e2e/commits.mock.ts b/packages/vue/__tests__/e2e/commits.mock.ts
index 4a793e25aea..8e3f153446d 100644
--- a/packages/vue/__tests__/e2e/commits.mock.ts
+++ b/packages/vue/__tests__/e2e/commits.mock.ts
@@ -548,4 +548,4 @@ export default {
       ],
     },
   ],
-}
+} as any
diff --git a/packages/vue/__tests__/e2e/e2eUtils.ts b/packages/vue/__tests__/e2e/e2eUtils.ts
index 792e4452fe3..1ed5322d1f0 100644
--- a/packages/vue/__tests__/e2e/e2eUtils.ts
+++ b/packages/vue/__tests__/e2e/e2eUtils.ts
@@ -1,24 +1,25 @@
 import puppeteer, {
   type Browser,
   type ClickOptions,
+  type LaunchOptions,
   type Page,
-  type PuppeteerLaunchOptions,
 } from 'puppeteer'
 
-export const E2E_TIMEOUT = 30 * 1000
+export const E2E_TIMEOUT: number = 30 * 1000
 
-const puppeteerOptions: PuppeteerLaunchOptions = {
+const puppeteerOptions: LaunchOptions = {
   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,
-) {
+): Promise<void> {
   for (let tries = 0; tries < maxTries; tries++) {
     const actual = (await poll()) || ''
     if (actual.indexOf(expected) > -1 || tries === maxTries - 1) {
@@ -30,12 +31,40 @@ 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[]>
+  style(selector: string, property: keyof CSSStyleDeclaration): Promise<any>
+  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 +77,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 +90,51 @@ 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): Promise<string> {
+    return page.$eval(selector, node => (node as HTMLInputElement).value)
   }
 
-  async function value(selector: string) {
-    return await page.$eval(selector, node => (node as HTMLInputElement).value)
+  async function html(selector: string): Promise<string> {
+    return page.$eval(selector, node => node.innerHTML)
   }
 
-  async function html(selector: string) {
-    return await page.$eval(selector, node => node.innerHTML)
+  async function classList(selector: string): Promise<string[]> {
+    return page.$eval(selector, (node: any) => [...node.classList])
   }
 
-  async function classList(selector: string) {
-    return await page.$eval(selector, (node: any) => [...node.classList])
+  async function children(selector: string): Promise<any[]> {
+    return page.$eval(selector, (node: any) => [...node.children])
   }
 
-  async function children(selector: string) {
-    return await page.$eval(selector, (node: any) => [...node.children])
+  async function style(
+    selector: string,
+    property: keyof CSSStyleDeclaration,
+  ): Promise<any> {
+    return await page.$eval(
+      selector,
+      (node, property) => {
+        return window.getComputedStyle(node)[property]
+      },
+      property,
+    )
   }
 
-  async function isVisible(selector: string) {
+  async function isVisible(selector: string): Promise<boolean> {
     const display = await page.$eval(selector, node => {
       return window.getComputedStyle(node).display
     })
@@ -167,6 +209,7 @@ export function setupPuppeteer() {
     value,
     html,
     classList,
+    style,
     children,
     isVisible,
     isChecked,
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 00000000000..a479a84bdb5
--- /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 00000000000..23e3aa32a59
--- /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 00000000000..443fcbfa18f
--- /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 00000000000..954a73d0467
--- /dev/null
+++ b/packages/vue/__tests__/e2e/hydration-strat-media.html
@@ -0,0 +1,49 @@
+<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 = {
+    props: {
+      value: Boolean,
+    },
+    setup(props) {
+      const count = ref(0)
+      onMounted(() => {
+        console.log('hydrated')
+        window.isHydrated = true
+      })
+      return () => {
+        props.value
+        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
+      })
+
+      const show = (window.show = ref(true))
+      return () => h(AsyncComp, { value: show.value })
+    },
+  }).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 00000000000..489222f8606
--- /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 00000000000..d792edf1960
--- /dev/null
+++ b/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts
@@ -0,0 +1,159 @@
+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()
+  })
+
+  // #13255
+  test('media query (patched before hydration)', async () => {
+    const spy = vi.fn()
+    const currentPage = page()
+    currentPage.on('pageerror', spy)
+
+    const warn: any[] = []
+    currentPage.on('console', e => warn.push(e.text()))
+
+    await goToCase('media')
+    await page().waitForFunction(() => window.isRootMounted)
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+
+    // patch
+    await page().evaluate(() => (window.show.value = false))
+    await click('button')
+    expect(await text('button')).toBe('1')
+
+    // resize
+    await page().setViewport({ width: 400, height: 600 })
+    await page().waitForFunction(() => window.isHydrated)
+    await assertHydrationSuccess('2')
+
+    expect(spy).toBeCalledTimes(0)
+    currentPage.off('pageerror', spy)
+    expect(
+      warn.some(w => w.includes('Skipping lazy hydration for component')),
+    ).toBe(true)
+  })
+
+  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/memory-leak.spec.ts b/packages/vue/__tests__/e2e/memory-leak.spec.ts
new file mode 100644
index 00000000000..2412cea2b0a
--- /dev/null
+++ b/packages/vue/__tests__/e2e/memory-leak.spec.ts
@@ -0,0 +1,85 @@
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
+import path from 'node:path'
+
+const { page, html, click } = setupPuppeteer()
+
+beforeEach(async () => {
+  await page().setContent(`<div id="app"></div>`)
+  await page().addScriptTag({
+    path: path.resolve(__dirname, '../../dist/vue.global.js'),
+  })
+})
+
+describe('not leaking', async () => {
+  // #13661
+  test(
+    'cached text vnodes should not retaining detached DOM nodes',
+    async () => {
+      const client = await page().createCDPSession()
+      await page().evaluate(async () => {
+        const { createApp, ref } = (window as any).Vue
+        createApp({
+          components: {
+            Comp1: {
+              template: `
+                <h1><slot></slot></h1>
+                <div>{{ test.length }}</div>
+            `,
+              setup() {
+                const test = ref([...Array(3000)].map((_, i) => ({ i })))
+                // @ts-expect-error
+                window.__REF__ = new WeakRef(test)
+
+                return { test }
+              },
+            },
+            Comp2: {
+              template: `<h2>comp2</h2>`,
+            },
+          },
+          template: `
+          <button id="toggleBtn" @click="click">button</button>
+          <Comp1 v-if="toggle">
+            <div>
+              <Comp2/>
+              text node
+            </div>
+          </Comp1>
+        `,
+          setup() {
+            const toggle = ref(true)
+            const click = () => (toggle.value = !toggle.value)
+            return { toggle, click }
+          },
+        }).mount('#app')
+      })
+
+      expect(await html('#app')).toBe(
+        `<button id="toggleBtn">button</button>` +
+          `<h1>` +
+          `<div>` +
+          `<h2>comp2</h2>` +
+          ` text node ` +
+          `</div>` +
+          `</h1>` +
+          `<div>3000</div>`,
+      )
+
+      await click('#toggleBtn')
+      expect(await html('#app')).toBe(
+        `<button id="toggleBtn">button</button><!--v-if-->`,
+      )
+
+      const isCollected = async () =>
+        // @ts-expect-error
+        await page().evaluate(() => window.__REF__.deref() === undefined)
+
+      while ((await isCollected()) === false) {
+        await client.send('HeapProfiler.collectGarbage')
+      }
+
+      expect(await isCollected()).toBe(true)
+    },
+    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 00000000000..c875f1bee69
--- /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/todomvc.spec.ts b/packages/vue/__tests__/e2e/todomvc.spec.ts
index bd3836282d2..c76bba53515 100644
--- a/packages/vue/__tests__/e2e/todomvc.spec.ts
+++ b/packages/vue/__tests__/e2e/todomvc.spec.ts
@@ -14,6 +14,7 @@ describe('e2e: todomvc', () => {
     classList,
     enterValue,
     clearValue,
+    timeout,
   } = setupPuppeteer()
 
   async function removeItemAt(n: number) {
@@ -101,6 +102,7 @@ describe('e2e: todomvc', () => {
 
     // active filter
     await click('.filters li:nth-child(2) a')
+    await timeout(1)
     expect(await count('.todo')).toBe(1)
     expect(await count('.todo.completed')).toBe(0)
     // add item with filter active
@@ -109,6 +111,7 @@ describe('e2e: todomvc', () => {
 
     // completed filter
     await click('.filters li:nth-child(3) a')
+    await timeout(1)
     expect(await count('.todo')).toBe(2)
     expect(await count('.todo.completed')).toBe(2)
 
@@ -128,13 +131,15 @@ describe('e2e: todomvc', () => {
     await click('.todo .toggle')
     expect(await count('.todo')).toBe(1)
     await click('.filters li:nth-child(2) a')
+    await timeout(1)
     expect(await count('.todo')).toBe(3)
     await click('.todo .toggle')
     expect(await count('.todo')).toBe(2)
 
     // editing triggered by blur
     await click('.filters li:nth-child(1) a')
-    await click('.todo:nth-child(1) label', { clickCount: 2 })
+    await timeout(1)
+    await click('.todo:nth-child(1) label', { count: 2 })
     expect(await count('.todo.editing')).toBe(1)
     expect(await isFocused('.todo:nth-child(1) .edit')).toBe(true)
     await clearValue('.todo:nth-child(1) .edit')
@@ -144,13 +149,13 @@ describe('e2e: todomvc', () => {
     expect(await text('.todo:nth-child(1) label')).toBe('edited!')
 
     // editing triggered by enter
-    await click('.todo label', { clickCount: 2 })
+    await click('.todo label', { count: 2 })
     await enterValue('.todo:nth-child(1) .edit', 'edited again!')
     expect(await count('.todo.editing')).toBe(0)
     expect(await text('.todo:nth-child(1) label')).toBe('edited again!')
 
     // cancel
-    await click('.todo label', { clickCount: 2 })
+    await click('.todo label', { count: 2 })
     await clearValue('.todo:nth-child(1) .edit')
     await page().type('.todo:nth-child(1) .edit', 'edited!')
     await page().keyboard.press('Escape')
@@ -158,7 +163,7 @@ describe('e2e: todomvc', () => {
     expect(await text('.todo:nth-child(1) label')).toBe('edited again!')
 
     // empty value should remove
-    await click('.todo label', { clickCount: 2 })
+    await click('.todo label', { count: 2 })
     await enterValue('.todo:nth-child(1) .edit', ' ')
     expect(await count('.todo')).toBe(3)
 
diff --git a/packages/vue/__tests__/e2e/transition.html b/packages/vue/__tests__/e2e/transition.html
index 2a794234103..ab404d67dc7 100644
--- a/packages/vue/__tests__/e2e/transition.html
+++ b/packages/vue/__tests__/e2e/transition.html
@@ -10,12 +10,27 @@
     -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,
+  .test-reflow-enter,
+  .test-reflow-leave-to,
+  .hello,
+  .bye.active,
   .changed-enter {
     opacity: 0;
   }
+  .test-reflow-leave-active,
+  .test-reflow-enter-active {
+    -webkit-transition: opacity 50ms ease;
+    transition: opacity 50ms ease;
+  }
+  .test-reflow-leave-from {
+    opacity: 0.9;
+  }
   .test-anim-enter-active {
     animation: test-enter 50ms;
     -webkit-animation: test-enter 50ms;
@@ -33,19 +48,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 8c12537aeb0..557712bc9db 100644
--- a/packages/vue/__tests__/e2e/tree.spec.ts
+++ b/packages/vue/__tests__/e2e/tree.spec.ts
@@ -88,7 +88,7 @@ describe('e2e: tree', () => {
     expect(await isVisible('#demo ul')).toBe(true)
     expect(await text('#demo li div span')).toContain('[-]')
 
-    await click('#demo ul > .item div', { clickCount: 2 })
+    await click('#demo ul > .item div', { count: 2 })
     expect(await count('.item')).toBe(15)
     expect(await count('.item > ul')).toBe(5)
     expect(await text('#demo ul > .item:nth-child(1)')).toContain('[-]')
diff --git a/packages/vue/__tests__/e2e/trusted-types.html b/packages/vue/__tests__/e2e/trusted-types.html
new file mode 100644
index 00000000000..181dd0465da
--- /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 00000000000..927f5949254
--- /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__/e2e/vModel.spec.ts b/packages/vue/__tests__/e2e/vModel.spec.ts
new file mode 100644
index 00000000000..e1a06bda532
--- /dev/null
+++ b/packages/vue/__tests__/e2e/vModel.spec.ts
@@ -0,0 +1,57 @@
+import path from 'node:path'
+import { setupPuppeteer } from './e2eUtils'
+
+const { page, click, isChecked } = setupPuppeteer()
+import { nextTick } from 'vue'
+
+beforeEach(async () => {
+  await page().addScriptTag({
+    path: path.resolve(__dirname, '../../dist/vue.global.js'),
+  })
+  await page().setContent(`<div id="app"></div>`)
+})
+
+// #12144
+test('checkbox click with v-model', async () => {
+  await page().evaluate(() => {
+    const { createApp } = (window as any).Vue
+    createApp({
+      template: `
+      <label>
+        <input 
+          id="first"
+          type="checkbox"
+          v-model="first"/>
+        First
+      </label>
+      <br>  
+      <label>
+        <input
+          id="second"
+          type="checkbox"
+          v-model="second"      
+          @click="secondClick"/>    
+          Second
+      </label> 
+        `,
+      data() {
+        return {
+          first: true,
+          second: false,
+        }
+      },
+      methods: {
+        secondClick(this: any) {
+          this.first = false
+        },
+      },
+    }).mount('#app')
+  })
+
+  expect(await isChecked('#first')).toBe(true)
+  expect(await isChecked('#second')).toBe(false)
+  await click('#second')
+  await nextTick()
+  expect(await isChecked('#first')).toBe(false)
+  expect(await isChecked('#second')).toBe(true)
+})
diff --git a/packages/vue/examples/classic/commits.html b/packages/vue/examples/classic/commits.html
index 811f0edc258..601f49544cd 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'
-  },
+    created() {
+      this.fetchData()
+    },
 
-  methods: {
-    fetchData() {
-      fetch(`${API_URL}${this.currentBranch}`)
-        .then(res => res.json())
-        .then(data => {
-          this.commits = data
-        })
+    watch: {
+      currentBranch: 'fetchData',
     },
-    truncate(v) {
-      const newline = v.indexOf('\n')
-      return newline > 0 ? v.slice(0, newline) : v
+
+    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, ' ')
+      },
     },
-    formatDate(v) {
-      return v.replace(/T|Z/g, ' ')
-    }
-  }
-}).mount('#demo')
+  }).mount('#demo')
 </script>
 
 <style>
@@ -70,7 +79,8 @@ <h1>Latest Vue.js Commits</h1>
     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 39fbc92080f..60272b9acd4 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
-        })
+  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), {}),
       }
-      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)
-    }
+    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)
+      },
+    },
   }
-}
 </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 f70a75d692e..a51f4c6ca39 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 f2a1c19bff1..a0e25075ec5 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
+  // 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
-      )
-    }
+  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 @@
 </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 @@
   <!-- 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 7a53a598f92..56a4932ec8e 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 @@ <h1>todos</h1>
 </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
-    })
+  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))
+    },
   }
-}
-
-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)
+
+  const filters = {
+    all(todos) {
+      return todos
     },
-    remaining() {
-      return filters.active(this.todos).length
+    active(todos) {
+      return todos.filter(todo => {
+        return !todo.completed
+      })
     },
-    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
+    completed(todos) {
+      return todos.filter(function (todo) {
+        return todo.completed
       })
-      this.newTodo = ''
     },
+  }
 
-    removeTodo(todo) {
-      this.todos.splice(this.todos.indexOf(todo), 1)
+  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,
+      },
     },
 
-    editTodo(todo) {
-      this.beforeEditCache = todo.title
-      this.editedTodo = todo
+    mounted() {
+      window.addEventListener('hashchange', this.onHashChange)
+      this.onHashChange()
     },
 
-    doneEdit(todo) {
-      if (!this.editedTodo) {
-        return
-      }
-      this.editedTodo = null
-      todo.title = todo.title.trim()
-      if (!todo.title) {
-        this.removeTodo(todo)
-      }
+    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
+          })
+        },
+      },
     },
 
-    cancelEdit(todo) {
-      this.editedTodo = null
-      todo.title = this.beforeEditCache
-    },
+    // 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 = ''
+      },
 
-    removeCompleted() {
-      this.todos = filters.active(this.todos)
-    },
+      removeTodo(todo) {
+        this.todos.splice(this.todos.indexOf(todo), 1)
+      },
 
-    onHashChange() {
-      var visibility = window.location.hash.replace(/#\/?/, '')
-      if (filters[visibility]) {
-        this.visibility = visibility
-      } else {
-        window.location.hash = ''
-        this.visibility = 'all'
-      }
+      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'
+      },
     },
 
-    pluralize (n) {
-      return n === 1 ? 'item' : 'items'
-    }
-  },
-
-  directives: {
-    'todo-focus'(el, binding) {
-      if (binding.value) {
-        el.focus()
-      }
-    }
-  }
-}).mount('#app')
+    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 c447b76ca76..8d7b13d7408 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,
     },
-    changeType() {
-      if (!this.isFolder) {
-        this.model.children = []
-        this.addChild()
-        this.open = true
+    data() {
+      return {
+        open: false,
       }
     },
-    addChild() {
-      this.model.children.push({
-        name: 'new stuff'
-      })
-    }
+    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',
+        })
+      },
+    },
   }
-}
 </script>
 
 <p>(You can double click on an item to turn it into a folder.)</p>
@@ -69,43 +68,37 @@
 </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 b094214179f..1aa99920a8a 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 truncate = v => {
+    const newline = v.indexOf('\n')
+    return newline > 0 ? v.slice(0, newline) : v
+  }
 
-const formatDate = v => v.replace(/T|Z/g, ' ')
+  const formatDate = v => v.replace(/T|Z/g, ' ')
 
-createApp({
-  setup() {
-    const currentBranch = ref('main')
-    const commits = ref(null)
+  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
-        })
-    })
+      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')
+      return {
+        branches: ['main', 'v2-compat'],
+        currentBranch,
+        commits,
+        truncate,
+        formatDate,
+      }
+    },
+  }).mount('#demo')
 </script>
 
 <style>
@@ -69,7 +78,8 @@ <h1>Latest Vue.js Commits</h1>
     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 b2849fad3bc..8af8817fd71 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 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 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 { reactive, computed } = Vue
+
+  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 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
+      })
+
+      function sortBy(key) {
+        state.sortKey = key
+        state.sortOrders[key] *= -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 {
+        state,
+        filteredData,
+        sortBy,
+        capitalize,
       }
-      return data
-    })
-
-    function sortBy(key) {
-      state.sortKey = key
-      state.sortOrders[key] *= -1
-    }
-
-    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;
-}
-
-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;
-}
-
-td {
-  background-color: #f9f9f9;
-}
-
-th, td {
-  min-width: 120px;
-  padding: 10px 20px;
-}
-
-th.active {
-  color: #fff;
-}
-
-th.active .arrow {
-  opacity: 1;
-}
-
-.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.dsc {
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid #fff;
-}
+  body {
+    font-family:
+      Helvetica Neue,
+      Arial,
+      sans-serif;
+    font-size: 14px;
+    color: #444;
+  }
+
+  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;
+  }
+
+  td {
+    background-color: #f9f9f9;
+  }
+
+  th,
+  td {
+    min-width: 120px;
+    padding: 10px 20px;
+  }
+
+  th.active {
+    color: #fff;
+  }
+
+  th.active .arrow {
+    opacity: 1;
+  }
+
+  .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.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 151a8a8c141..e7a8550ca67 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
-
-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')
+  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)
+
+      return {
+        input,
+        output,
+        update,
+      }
+    },
+  }).mount('#editor')
 </script>
 
 <style>
-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 {
-  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;
-}
+  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 {
+    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;
+  }
 </style>
diff --git a/packages/vue/examples/composition/svg.html b/packages/vue/examples/composition/svg.html
index 4bdca965960..67e29a6b7e1 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
-
-// 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) {
+  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 {
-      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 @@
 </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 @@
   <!-- 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 }
-]
-
-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 = ''
-    }
+  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)
+
+      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 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')
+      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 37bfeb86cb0..510e22b1b1f 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 @@ <h1>todos</h1>
 </div>
 
 <script>
-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 { 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 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)
       })
-    })
-
-    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 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 = ''
+      }
+
+      function removeTodo(todo) {
+        state.todos.splice(state.todos.indexOf(todo), 1)
       }
-      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 editTodo (todo) {
-      state.beforeEditCache = todo.title
-      state.editedTodo = todo
-    }
+      function doneEdit(todo) {
+        if (!state.editedTodo) {
+          return
+        }
+        state.editedTodo = null
+        todo.title = todo.title.trim()
+        if (!todo.title) {
+          removeTodo(todo)
+        }
+      }
 
-    function doneEdit (todo) {
-      if (!state.editedTodo) {
-        return
+      function cancelEdit(todo) {
+        state.editedTodo = null
+        todo.title = state.beforeEditCache
       }
-      state.editedTodo = null
-      todo.title = todo.title.trim()
-      if (!todo.title) {
-        removeTodo(todo)
+
+      function removeCompleted() {
+        state.todos = filters.active(state.todos)
       }
-    }
-
-    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()
+
+      return {
+        state,
+        addTodo,
+        removeTodo,
+        editTodo,
+        doneEdit,
+        cancelEdit,
+        removeCompleted,
       }
-    }
-  }
-}).mount('#app')
+    },
+
+    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 a80a8ac964a..75330bf11f0 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 toggle() {
+        state.open = !state.open
+      }
 
-    function changeType() {
-      if (!state.isFolder) {
-        props.model.children = []
-        addChild()
-        state.open = true
+      function changeType() {
+        if (!state.isFolder) {
+          props.model.children = []
+          addChild()
+          state.open = true
+        }
       }
-    }
 
-    function addChild() {
-      props.model.children.push({ name: 'new stuff' })
-    }
+      function addChild() {
+        props.model.children.push({ name: 'new stuff' })
+      }
 
-    return {
-      ...toRefs(state),
-      toggle,
-      changeType,
-      addChild
-    }
+      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 @@
 </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 13392e674b5..986408e6dc5 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>`
-}
+  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++)
+  Vue.createApp({
+    components: {
+      Item,
     },
-    reset () {
-      this.items = getInitialItems()
+    data() {
+      return {
+        items: getInitialItems(),
+      }
     },
-    shuffle () {
-      this.items = _.shuffle(this.items)
+    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)
+        }
+      },
     },
-    remove (item) {
-      const i = this.items.indexOf(item)
-      if (i > -1) {
-        this.items.splice(i, 1)
-      }
-    }
-  }
-}).mount('#app')
+  }).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 03180539a4c..96a16cfdabe 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 @@ <h3>custom header</h3>
 </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-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-header h3 {
-  margin-top: 0;
-  color: #42b983;
-}
-
-.modal-body {
-  margin: 20px 0;
-}
-
-.modal-default-button {
-  float: right;
-}
-
-/*
+  .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-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-body {
+    margin: 20px 0;
+  }
+
+  .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 @@ <h3>custom header</h3>
  * 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/jsx-runtime/index.d.ts b/packages/vue/jsx-runtime/index.d.ts
index a52ac66a0df..af5ffe2ac24 100644
--- a/packages/vue/jsx-runtime/index.d.ts
+++ b/packages/vue/jsx-runtime/index.d.ts
@@ -6,7 +6,7 @@ import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom'
  * when ts compilerOptions.jsx is 'react-jsx' or 'react-jsxdev'
  * https://www.typescriptlang.org/tsconfig#jsxImportSource
  */
-export { h as jsx, h as jsxDEV, Fragment } from '@vue/runtime-dom'
+export { h as jsx, h as jsxDEV, Fragment, h as jsxs } from '@vue/runtime-dom'
 
 export namespace JSX {
   export interface Element extends VNode {}
diff --git a/packages/vue/package.json b/packages/vue/package.json
index d743077ecb5..897bdec9e24 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue",
-  "version": "3.4.18",
+  "version": "3.5.18",
   "description": "The progressive JavaScript framework for building modern web UI.",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",
diff --git a/packages/vue/src/dev.ts b/packages/vue/src/dev.ts
index 602079a20e2..a9ad81e3ba5 100644
--- a/packages/vue/src/dev.ts
+++ b/packages/vue/src/dev.ts
@@ -1,8 +1,7 @@
 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` +
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 35077b3cf63..785f3fd4bb4 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -13,9 +13,9 @@ import {
 } from '@vue/runtime-dom'
 import * as runtimeDom from '@vue/runtime-dom'
 import {
-  EMPTY_OBJ,
   NOOP,
   extend,
+  genCacheKey,
   generateCodeFrame,
   isString,
 } from '@vue/shared'
@@ -25,19 +25,7 @@ if (__DEV__) {
   initDev()
 }
 
-const compileCache = new WeakMap<
-  CompilerOptions,
-  Record<string, RenderFunction>
->()
-
-function getCache(options?: CompilerOptions) {
-  let c = compileCache.get(options ?? EMPTY_OBJ)
-  if (!c) {
-    c = Object.create(null) as Record<string, RenderFunction>
-    compileCache.set(options ?? EMPTY_OBJ, c)
-  }
-  return c
-}
+const compileCache: Record<string, RenderFunction> = Object.create(null)
 
 function compileToFunction(
   template: string | HTMLElement,
@@ -52,9 +40,8 @@ function compileToFunction(
     }
   }
 
-  const key = template
-  const cache = getCache(options)
-  const cached = cache[key]
+  const key = genCacheKey(template, options)
+  const cached = compileCache[key]
   if (cached) {
     return cached
   }
@@ -111,7 +98,7 @@ function compileToFunction(
   // mark the function as runtime compiled
   ;(render as InternalRenderFunction)._rc = true
 
-  return (cache[key] = render)
+  return (compileCache[key] = render)
 }
 
 registerRuntimeCompiler(compileToFunction)
diff --git a/packages/vue/src/runtime.ts b/packages/vue/src/runtime.ts
index a0332bf7989..76f5fc74e25 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.` +
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aaaad652697..3bc2d0579b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,184 +1,254 @@
-lockfileVersion: '6.0'
+lockfileVersion: '9.0'
 
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+catalogs:
+  default:
+    '@babel/parser':
+      specifier: ^7.28.0
+      version: 7.28.0
+    '@babel/types':
+      specifier: ^7.28.1
+      version: 7.28.1
+    '@vitejs/plugin-vue':
+      specifier: ^5.2.4
+      version: 5.2.4
+    estree-walker:
+      specifier: ^2.0.2
+      version: 2.0.2
+    magic-string:
+      specifier: ^0.30.17
+      version: 0.30.17
+    source-map-js:
+      specifier: ^1.2.1
+      version: 1.2.1
+    vite:
+      specifier: ^5.4.15
+      version: 5.4.15
+
 importers:
 
   .:
     devDependencies:
       '@babel/parser':
-        specifier: ^7.23.9
-        version: 7.23.9
+        specifier: 'catalog:'
+        version: 7.28.0
       '@babel/types':
-        specifier: ^7.23.9
-        version: 7.23.9
-      '@codspeed/vitest-plugin':
-        specifier: ^2.3.1
-        version: 2.3.1(vite@5.0.12)(vitest@1.2.2)
+        specifier: 'catalog:'
+        version: 7.28.1
       '@rollup/plugin-alias':
-        specifier: ^5.1.0
-        version: 5.1.0(rollup@4.9.2)
+        specifier: ^5.1.1
+        version: 5.1.1(rollup@4.45.1)
       '@rollup/plugin-commonjs':
-        specifier: ^25.0.7
-        version: 25.0.7(rollup@4.9.2)
+        specifier: ^28.0.6
+        version: 28.0.6(rollup@4.45.1)
       '@rollup/plugin-json':
         specifier: ^6.1.0
-        version: 6.1.0(rollup@4.9.2)
+        version: 6.1.0(rollup@4.45.1)
       '@rollup/plugin-node-resolve':
-        specifier: ^15.2.3
-        version: 15.2.3(rollup@4.9.2)
+        specifier: ^16.0.1
+        version: 16.0.1(rollup@4.45.1)
       '@rollup/plugin-replace':
         specifier: 5.0.4
-        version: 5.0.4(rollup@4.9.2)
-      '@rollup/plugin-terser':
-        specifier: ^0.4.4
-        version: 0.4.4(rollup@4.9.2)
+        version: 5.0.4(rollup@4.45.1)
+      '@swc/core':
+        specifier: ^1.13.1
+        version: 1.13.1
       '@types/hash-sum':
         specifier: ^1.0.2
         version: 1.0.2
-      '@types/minimist':
-        specifier: ^1.2.5
-        version: 1.2.5
       '@types/node':
-        specifier: ^20.11.16
-        version: 20.11.16
+        specifier: ^22.16.5
+        version: 22.16.5
       '@types/semver':
-        specifier: ^7.5.6
-        version: 7.5.6
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^6.18.1
-        version: 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.2.2)
-      '@typescript-eslint/parser':
-        specifier: ^6.18.1
-        version: 6.18.1(eslint@8.56.0)(typescript@5.2.2)
-      '@vitest/coverage-istanbul':
-        specifier: ^1.2.2
-        version: 1.2.2(vitest@1.2.2)
+        specifier: ^7.7.0
+        version: 7.7.0
+      '@types/serve-handler':
+        specifier: ^6.1.4
+        version: 6.1.4
+      '@vitest/coverage-v8':
+        specifier: ^3.1.4
+        version: 3.1.4(vitest@3.1.4(@types/node@22.16.5)(jsdom@26.1.0)(sass@1.89.2))
+      '@vitest/eslint-plugin':
+        specifier: ^1.2.1
+        version: 1.2.1(eslint@9.27.0)(typescript@5.6.3)(vitest@3.1.4(@types/node@22.16.5)(jsdom@26.1.0)(sass@1.89.2))
       '@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.20.0
-        version: 0.20.0
+        specifier: ^0.25.8
+        version: 0.25.8
       esbuild-plugin-polyfill-node:
         specifier: ^0.3.0
-        version: 0.3.0(esbuild@0.20.0)
+        version: 0.3.0(esbuild@0.25.8)
       eslint:
-        specifier: ^8.56.0
-        version: 8.56.0
-      eslint-define-config:
-        specifier: ^1.24.1
-        version: 1.24.1
-      eslint-plugin-import:
-        specifier: npm:eslint-plugin-i@^2.29.1
-        version: /eslint-plugin-i@2.29.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)
-      eslint-plugin-jest:
-        specifier: ^27.6.3
-        version: 27.6.3(@typescript-eslint/eslint-plugin@6.18.1)(eslint@8.56.0)(typescript@5.2.2)
+        specifier: ^9.27.0
+        version: 9.27.0
+      eslint-plugin-import-x:
+        specifier: ^4.13.1
+        version: 4.13.1(eslint@9.27.0)(typescript@5.6.3)
       estree-walker:
-        specifier: ^2.0.2
+        specifier: 'catalog:'
         version: 2.0.2
-      execa:
-        specifier: ^8.0.1
-        version: 8.0.1
       jsdom:
-        specifier: ^23.2.0
-        version: 23.2.0
+        specifier: ^26.1.0
+        version: 26.1.0
       lint-staged:
-        specifier: ^15.2.0
-        version: 15.2.0
+        specifier: ^16.0.0
+        version: 16.0.0
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
       magic-string:
-        specifier: ^0.30.6
-        version: 0.30.6
+        specifier: ^0.30.17
+        version: 0.30.17
       markdown-table:
-        specifier: ^3.0.3
-        version: 3.0.3
+        specifier: ^3.0.4
+        version: 3.0.4
       marked:
-        specifier: ^11.2.0
-        version: 11.2.0
-      minimist:
-        specifier: ^1.2.8
-        version: 1.2.8
+        specifier: 13.0.3
+        version: 13.0.3
       npm-run-all2:
-        specifier: ^5.0.2
-        version: 5.0.2
+        specifier: ^7.0.2
+        version: 7.0.2
       picocolors:
-        specifier: ^1.0.0
-        version: 1.0.0
+        specifier: ^1.1.1
+        version: 1.1.1
       prettier:
-        specifier: ^3.2.2
-        version: 3.2.2
+        specifier: ^3.5.3
+        version: 3.5.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.11.0
-        version: 21.11.0(typescript@5.2.2)
+        specifier: ~24.9.0
+        version: 24.9.0(typescript@5.6.3)
       rimraf:
-        specifier: ^5.0.5
-        version: 5.0.5
+        specifier: ^6.0.1
+        version: 6.0.1
       rollup:
-        specifier: 4.9.2
-        version: 4.9.2
+        specifier: ^4.45.1
+        version: 4.45.1
       rollup-plugin-dts:
-        specifier: ^6.1.0
-        version: 6.1.0(rollup@4.9.2)(typescript@5.2.2)
+        specifier: ^6.2.1
+        version: 6.2.1(rollup@4.45.1)(typescript@5.6.3)
       rollup-plugin-esbuild:
-        specifier: ^6.1.1
-        version: 6.1.1(esbuild@0.20.0)(rollup@4.9.2)
+        specifier: ^6.2.1
+        version: 6.2.1(esbuild@0.25.8)(rollup@4.45.1)
       rollup-plugin-polyfill-node:
         specifier: ^0.13.0
-        version: 0.13.0(rollup@4.9.2)
+        version: 0.13.0(rollup@4.45.1)
       semver:
-        specifier: ^7.5.4
-        version: 7.5.4
+        specifier: ^7.7.2
+        version: 7.7.2
       serve:
-        specifier: ^14.2.1
-        version: 14.2.1
+        specifier: ^14.2.4
+        version: 14.2.4
+      serve-handler:
+        specifier: ^6.1.6
+        version: 6.1.6
       simple-git-hooks:
-        specifier: ^2.9.0
-        version: 2.9.0
-      terser:
-        specifier: ^5.27.0
-        version: 5.27.0
+        specifier: ^2.13.0
+        version: 2.13.0
       todomvc-app-css:
         specifier: ^2.4.3
         version: 2.4.3
       tslib:
-        specifier: ^2.6.2
-        version: 2.6.2
-      tsx:
-        specifier: ^4.7.0
-        version: 4.7.0
+        specifier: ^2.8.1
+        version: 2.8.1
       typescript:
-        specifier: ^5.2.2
-        version: 5.2.2
+        specifier: ~5.6.2
+        version: 5.6.3
+      typescript-eslint:
+        specifier: ^8.32.1
+        version: 8.32.1(eslint@9.27.0)(typescript@5.6.3)
       vite:
-        specifier: ^5.0.12
-        version: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
+        specifier: 'catalog:'
+        version: 5.4.15(@types/node@22.16.5)(sass@1.89.2)
       vitest:
-        specifier: ^1.2.2
-        version: 1.2.2(@types/node@20.11.16)(jsdom@23.2.0)(terser@5.27.0)
+        specifier: ^3.1.4
+        version: 3.1.4(@types/node@22.16.5)(jsdom@26.1.0)(sass@1.89.2)
+
+  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.6.2
+        version: 4.6.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.2.4(vite@5.4.15(@types/node@22.16.5)(sass@1.89.2))(vue@packages+vue)
+      vite:
+        specifier: 'catalog:'
+        version: 5.4.15(@types/node@22.16.5)(sass@1.89.2)
+
+  packages-private/template-explorer:
+    dependencies:
+      monaco-editor:
+        specifier: ^0.52.2
+        version: 0.52.2
+      source-map-js:
+        specifier: ^1.2.1
+        version: 1.2.1
+
+  packages-private/vite-debug:
+    devDependencies:
+      '@vitejs/plugin-vue':
+        specifier: 'catalog:'
+        version: 5.2.4(vite@5.4.15(@types/node@22.16.5)(sass@1.89.2))(vue@packages+vue)
+      vite:
+        specifier: 'catalog:'
+        version: 5.4.15(@types/node@22.16.5)(sass@1.89.2)
+      vue:
+        specifier: workspace:*
+        version: link:../../packages/vue
 
   packages/compiler-core:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.9
-        version: 7.23.9
+        specifier: 'catalog:'
+        version: 7.28.0
       '@vue/shared':
         specifier: workspace:*
         version: link:../shared
@@ -186,15 +256,15 @@ importers:
         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.1
     devDependencies:
       '@babel/types':
-        specifier: ^7.23.9
-        version: 7.23.9
+        specifier: 'catalog:'
+        version: 7.28.1
 
   packages/compiler-dom:
     dependencies:
@@ -208,8 +278,8 @@ importers:
   packages/compiler-sfc:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.9
-        version: 7.23.9
+        specifier: 'catalog:'
+        version: 7.28.0
       '@vue/compiler-core':
         specifier: workspace:*
         version: link:../compiler-core
@@ -223,48 +293,48 @@ importers:
         specifier: workspace:*
         version: link:../shared
       estree-walker:
-        specifier: ^2.0.2
+        specifier: 'catalog:'
         version: 2.0.2
       magic-string:
-        specifier: ^0.30.6
-        version: 0.30.6
+        specifier: 'catalog:'
+        version: 0.30.17
       postcss:
-        specifier: ^8.4.33
-        version: 8.4.33
+        specifier: ^8.5.6
+        version: 8.5.6
       source-map-js:
-        specifier: ^1.0.2
-        version: 1.0.2
+        specifier: 'catalog:'
+        version: 1.2.1
     devDependencies:
       '@babel/types':
-        specifier: ^7.23.9
-        version: 7.23.9
+        specifier: 'catalog:'
+        version: 7.28.1
       '@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.2.0
-        version: 10.2.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: ~10.0.3
+        version: 10.0.3
       postcss-modules:
-        specifier: ^6.0.0
-        version: 6.0.0(postcss@8.4.33)
+        specifier: ^6.0.1
+        version: 6.0.1(postcss@8.5.6)
       postcss-selector-parser:
-        specifier: ^6.0.15
-        version: 6.0.15
+        specifier: ^7.1.0
+        version: 7.1.0
       pug:
-        specifier: ^3.0.2
-        version: 3.0.2
+        specifier: ^3.0.3
+        version: 3.0.3
       sass:
-        specifier: ^1.70.0
-        version: 1.70.0
+        specifier: ^1.89.2
+        version: 1.89.2
 
   packages/compiler-ssr:
     dependencies:
@@ -275,27 +345,6 @@ 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':
@@ -313,6 +362,9 @@ importers:
 
   packages/runtime-dom:
     dependencies:
+      '@vue/reactivity':
+        specifier: workspace:*
+        version: link:../reactivity
       '@vue/runtime-core':
         specifier: workspace:*
         version: link:../runtime-core
@@ -322,6 +374,10 @@ importers:
       csstype:
         specifier: ^3.1.3
         version: 3.1.3
+    devDependencies:
+      '@types/trusted-types':
+        specifier: ^2.0.7
+        version: 2.0.7
 
   packages/runtime-test:
     dependencies:
@@ -344,39 +400,8 @@ importers:
         specifier: workspace:*
         version: link:../vue
 
-  packages/sfc-playground:
-    dependencies:
-      '@vue/repl':
-        specifier: ^3.1.1
-        version: 3.1.1
-      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: ^5.0.3
-        version: 5.0.3(vite@5.0.12)(vue@packages+vue)
-      vite:
-        specifier: ^5.0.12
-        version: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
-
   packages/shared: {}
 
-  packages/template-explorer:
-    dependencies:
-      monaco-editor:
-        specifier: ^0.45.0
-        version: 0.45.0
-      source-map-js:
-        specifier: ^1.0.2
-        version: 1.0.2
-
   packages/vue:
     dependencies:
       '@vue/compiler-dom':
@@ -396,869 +421,624 @@ importers:
         version: link:../shared
       typescript:
         specifier: '*'
-        version: 5.2.2
+        version: 5.6.3
 
   packages/vue-compat:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.9
-        version: 7.23.9
+        specifier: 'catalog:'
+        version: 7.28.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.1
       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
-
-  /@asamuzakjp/dom-selector@2.0.1:
-    resolution: {integrity: sha512-QJAJffmCiymkv6YyQ7voyQb5caCth6jzZsQncYCpHXrJ7RqdYG5y43+is8mnFcYubdOkr7cn1+na9BdFMxqw7w==}
-    dependencies:
-      bidi-js: 1.0.3
-      css-tree: 2.3.1
-      is-potential-custom-element-name: 1.0.1
-    dev: true
-
-  /@babel/code-frame@7.23.5:
-    resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/highlight': 7.23.4
-      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.5:
-    resolution: {integrity: sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@ampproject/remapping': 2.2.1
-      '@babel/code-frame': 7.23.5
-      '@babel/generator': 7.23.5
-      '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
-      '@babel/helpers': 7.23.5
-      '@babel/parser': 7.23.9
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.5
-      '@babel/types': 7.23.9
-      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
+  '@asamuzakjp/css-color@2.8.2':
+    resolution: {integrity: sha512-RtWv9jFN2/bLExuZgFFZ0I3pWWeezAHGgrmjqGGWclATl1aDe3yhCUaI0Ilkp6OCk9zX7+FjvDasEX8Q9Rxc5w==}
 
-  /@babel/generator@7.23.5:
-    resolution: {integrity: sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==}
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.9
-      '@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==}
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     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==}
+  '@babel/helper-validator-identifier@7.27.1':
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
     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.9
-    dev: true
+  '@babel/parser@7.28.0':
+    resolution: {integrity: sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
 
-  /@babel/helper-hoist-variables@7.22.5:
-    resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
+  '@babel/types@7.28.1':
+    resolution: {integrity: sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==}
     engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.9
-    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.9
-    dev: true
+  '@bcoe/v8-coverage@1.0.2':
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
 
-  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.5):
-    resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
-    engines: {node: '>=6.9.0'}
+  '@conventional-changelog/git-client@1.0.1':
+    resolution: {integrity: sha512-PJEqBwAleffCMETaVm/fUgHldzBE35JFk3/9LL6NUA5EXa3qednu+UT6M7E5iBu3zIQZCULYIiZ90fBYHt6xUw==}
+    engines: {node: '>=18'}
     peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@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.9
-    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.9
-    dev: true
-
-  /@babel/helper-string-parser@7.23.4:
-    resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
-    engines: {node: '>=6.9.0'}
-
-  /@babel/helper-validator-identifier@7.22.20:
-    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
-    engines: {node: '>=6.9.0'}
-    requiresBuild: true
-
-  /@babel/helper-validator-option@7.22.15:
-    resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==}
-    engines: {node: '>=6.9.0'}
-    dev: true
+      conventional-commits-filter: ^5.0.0
+      conventional-commits-parser: ^6.0.0
+    peerDependenciesMeta:
+      conventional-commits-filter:
+        optional: true
+      conventional-commits-parser:
+        optional: true
 
-  /@babel/helpers@7.23.5:
-    resolution: {integrity: sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.5
-      '@babel/types': 7.23.9
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+  '@csstools/color-helpers@5.0.1':
+    resolution: {integrity: sha512-MKtmkA0BX87PKaO1NFRTFH+UnkgnmySQOvNxJubsadusqPEC2aJ9MOQiMceZJJ6oitUl/i0L6u0M1IrmAOmgBA==}
+    engines: {node: '>=18'}
 
-  /@babel/highlight@7.23.4:
-    resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==}
-    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
+  '@csstools/css-calc@2.1.1':
+    resolution: {integrity: sha512-rL7kaUnTkL9K+Cvo2pnCieqNpTKgQzy5f+N+5Iuko9HAoasP+xgprVh7KN/MaJVvVL1l0EzQq2MoqBHKSrDrag==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.4
+      '@csstools/css-tokenizer': ^3.0.3
 
-  /@babel/parser@7.23.9:
-    resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.23.9
+  '@csstools/css-color-parser@3.0.7':
+    resolution: {integrity: sha512-nkMp2mTICw32uE5NN+EsJ4f5N+IGFeCFu4bGpiKgb2Pq/7J/MpyLBeQ5ry4KKtRFZaYs6sTmcMYrSRIyj5DFKA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.4
+      '@csstools/css-tokenizer': ^3.0.3
 
-  /@babel/template@7.22.15:
-    resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.23.5
-      '@babel/parser': 7.23.9
-      '@babel/types': 7.23.9
-    dev: true
+  '@csstools/css-parser-algorithms@3.0.4':
+    resolution: {integrity: sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.3
 
-  /@babel/traverse@7.23.5:
-    resolution: {integrity: sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.23.5
-      '@babel/generator': 7.23.5
-      '@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.9
-      '@babel/types': 7.23.9
-      debug: 4.3.4
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+  '@csstools/css-tokenizer@3.0.3':
+    resolution: {integrity: sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==}
+    engines: {node: '>=18'}
 
-  /@babel/types@7.23.9:
-    resolution: {integrity: sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==}
-    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
+  '@emnapi/core@1.4.3':
+    resolution: {integrity: sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==}
 
-  /@codspeed/core@2.3.1:
-    resolution: {integrity: sha512-7KRwBX4iXK33gEQwh8jPWBF9srGIjewm3oc+A/66caiG/aOyHmxJCapjAZxT2f2vIVYqR7CghzqlxY2ik0DNBg==}
-    dependencies:
-      find-up: 6.3.0
-      node-gyp-build: 4.7.1
-    dev: true
+  '@emnapi/runtime@1.4.3':
+    resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
 
-  /@codspeed/vitest-plugin@2.3.1(vite@5.0.12)(vitest@1.2.2):
-    resolution: {integrity: sha512-/e4G2B/onX/hG/EjUU/NpDxnIryeTDamVRTBeWfgQDoex3g7GDzTwoQktaU5l/Asw3ZjEErQg+oQVToQ6jYZlA==}
-    peerDependencies:
-      vite: ^4.2.0 || ^5.0.0
-      vitest: '>=1.0.0-beta.4 || >=1'
-    dependencies:
-      '@codspeed/core': 2.3.1
-      vite: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
-      vitest: 1.2.2(@types/node@20.11.16)(jsdom@23.2.0)(terser@5.27.0)
-    dev: true
+  '@emnapi/wasi-threads@1.0.2':
+    resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==}
 
-  /@esbuild/aix-ppc64@0.19.10:
-    resolution: {integrity: sha512-Q+mk96KJ+FZ30h9fsJl+67IjNJm3x2eX+GBWGmocAKgzp27cowCOOqSdscX80s0SpdFXZnIv/+1xD1EctFx96Q==}
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [aix]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/aix-ppc64@0.20.0:
-    resolution: {integrity: sha512-fGFDEctNh0CcSwsiRPxiaqX0P5rq+AqE0SRhYGZ4PX46Lg1FNR6oCxJghf8YgY0WQEgQuh3lErUFE4KxLeRmmw==}
-    engines: {node: '>=12'}
+  '@esbuild/aix-ppc64@0.25.8':
+    resolution: {integrity: sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA==}
+    engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/android-arm64@0.19.10:
-    resolution: {integrity: sha512-1X4CClKhDgC3by7k8aOWZeBXQX8dHT5QAMCAQDArCLaYfkppoARvh0fit3X2Qs+MXDngKcHv6XXyQCpY0hkK1Q==}
+  '@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.20.0:
-    resolution: {integrity: sha512-aVpnM4lURNkp0D3qPoAzSG92VXStYmoVPOgXveAUoQBWRSuQzt51yvSju29J6AHPmwY1BjH49uR29oyfH1ra8Q==}
-    engines: {node: '>=12'}
+  '@esbuild/android-arm64@0.25.8':
+    resolution: {integrity: sha512-OD3p7LYzWpLhZEyATcTSJ67qB5D+20vbtr6vHlHWSQYhKtzUYrETuWThmzFpZtFsBIxRvhO07+UgVA9m0i/O1w==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/android-arm@0.19.10:
-    resolution: {integrity: sha512-7W0bK7qfkw1fc2viBfrtAEkDKHatYfHzr/jKAHNr9BvkYDXPcC6bodtm8AyLJNNuqClLNaeTLuwURt4PRT9d7w==}
+  '@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.20.0:
-    resolution: {integrity: sha512-3bMAfInvByLHfJwYPJRlpTeaQA75n8C/QKpEaiS4HrFWFiJlNI0vzq/zCjBrhAYcPyVPG7Eo9dMrcQXuqmNk5g==}
-    engines: {node: '>=12'}
+  '@esbuild/android-arm@0.25.8':
+    resolution: {integrity: sha512-RONsAvGCz5oWyePVnLdZY/HHwA++nxYWIX1atInlaW6SEkwq6XkP3+cb825EUcRs5Vss/lGh/2YxAb5xqc07Uw==}
+    engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/android-x64@0.19.10:
-    resolution: {integrity: sha512-O/nO/g+/7NlitUxETkUv/IvADKuZXyH4BHf/g/7laqKC4i/7whLpB0gvpPc2zpF0q9Q6FXS3TS75QHac9MvVWw==}
+  '@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.20.0:
-    resolution: {integrity: sha512-uK7wAnlRvjkCPzh8jJ+QejFyrP8ObKuR5cBIsQZ+qbMunwR8sbd8krmMbxTLSrDhiPZaJYKQAU5Y3iMDcZPhyQ==}
-    engines: {node: '>=12'}
+  '@esbuild/android-x64@0.25.8':
+    resolution: {integrity: sha512-yJAVPklM5+4+9dTeKwHOaA+LQkmrKFX96BM0A/2zQrbS6ENCmxc4OVoBs5dPkCCak2roAD+jKCdnmOqKszPkjA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/darwin-arm64@0.19.10:
-    resolution: {integrity: sha512-YSRRs2zOpwypck+6GL3wGXx2gNP7DXzetmo5pHXLrY/VIMsS59yKfjPizQ4lLt5vEI80M41gjm2BxrGZ5U+VMA==}
+  '@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.20.0:
-    resolution: {integrity: sha512-AjEcivGAlPs3UAcJedMa9qYg9eSfU6FnGHJjT8s346HSKkrcWlYezGE8VaO2xKfvvlZkgAhyvl06OJOxiMgOYQ==}
-    engines: {node: '>=12'}
+  '@esbuild/darwin-arm64@0.25.8':
+    resolution: {integrity: sha512-Jw0mxgIaYX6R8ODrdkLLPwBqHTtYHJSmzzd+QeytSugzQ0Vg4c5rDky5VgkoowbZQahCbsv1rT1KW72MPIkevw==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/darwin-x64@0.19.10:
-    resolution: {integrity: sha512-alfGtT+IEICKtNE54hbvPg13xGBe4GkVxyGWtzr+yHO7HIiRJppPDhOKq3zstTcVf8msXb/t4eavW3jCDpMSmA==}
+  '@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.20.0:
-    resolution: {integrity: sha512-bsgTPoyYDnPv8ER0HqnJggXK6RyFy4PH4rtsId0V7Efa90u2+EifxytE9pZnsDgExgkARy24WUQGv9irVbTvIw==}
-    engines: {node: '>=12'}
+  '@esbuild/darwin-x64@0.25.8':
+    resolution: {integrity: sha512-Vh2gLxxHnuoQ+GjPNvDSDRpoBCUzY4Pu0kBqMBDlK4fuWbKgGtmDIeEC081xi26PPjn+1tct+Bh8FjyLlw1Zlg==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/freebsd-arm64@0.19.10:
-    resolution: {integrity: sha512-dMtk1wc7FSH8CCkE854GyGuNKCewlh+7heYP/sclpOG6Cectzk14qdUIY5CrKDbkA/OczXq9WesqnPl09mj5dg==}
+  '@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.20.0:
-    resolution: {integrity: sha512-kQ7jYdlKS335mpGbMW5tEe3IrQFIok9r84EM3PXB8qBFJPSc6dpWfrtsC/y1pyrz82xfUIn5ZrnSHQQsd6jebQ==}
-    engines: {node: '>=12'}
+  '@esbuild/freebsd-arm64@0.25.8':
+    resolution: {integrity: sha512-YPJ7hDQ9DnNe5vxOm6jaie9QsTwcKedPvizTVlqWG9GBSq+BuyWEDazlGaDTC5NGU4QJd666V0yqCBL2oWKPfA==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/freebsd-x64@0.19.10:
-    resolution: {integrity: sha512-G5UPPspryHu1T3uX8WiOEUa6q6OlQh6gNl4CO4Iw5PS+Kg5bVggVFehzXBJY6X6RSOMS8iXDv2330VzaObm4Ag==}
+  '@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.20.0:
-    resolution: {integrity: sha512-uG8B0WSepMRsBNVXAQcHf9+Ko/Tr+XqmK7Ptel9HVmnykupXdS4J7ovSQUIi0tQGIndhbqWLaIL/qO/cWhXKyQ==}
-    engines: {node: '>=12'}
+  '@esbuild/freebsd-x64@0.25.8':
+    resolution: {integrity: sha512-MmaEXxQRdXNFsRN/KcIimLnSJrk2r5H8v+WVafRWz5xdSVmWLoITZQXcgehI2ZE6gioE6HirAEToM/RvFBeuhw==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-arm64@0.19.10:
-    resolution: {integrity: sha512-QxaouHWZ+2KWEj7cGJmvTIHVALfhpGxo3WLmlYfJ+dA5fJB6lDEIg+oe/0//FuyVHuS3l79/wyBxbHr0NgtxJQ==}
+  '@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.20.0:
-    resolution: {integrity: sha512-uTtyYAP5veqi2z9b6Gr0NUoNv9F/rOzI8tOD5jKcCvRUn7T60Bb+42NDBCWNhMjkQzI0qqwXkQGo1SY41G52nw==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-arm64@0.25.8':
+    resolution: {integrity: sha512-WIgg00ARWv/uYLU7lsuDK00d/hHSfES5BzdWAdAig1ioV5kaFNrtK8EqGcUBJhYqotlUByUKz5Qo6u8tt7iD/w==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-arm@0.19.10:
-    resolution: {integrity: sha512-j6gUW5aAaPgD416Hk9FHxn27On28H4eVI9rJ4az7oCGTFW48+LcgNDBN+9f8rKZz7EEowo889CPKyeaD0iw9Kg==}
+  '@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.20.0:
-    resolution: {integrity: sha512-2ezuhdiZw8vuHf1HKSf4TIk80naTbP9At7sOqZmdVwvvMyuoDiZB49YZKLsLOfKIr77+I40dWpHVeY5JHpIEIg==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-arm@0.25.8':
+    resolution: {integrity: sha512-FuzEP9BixzZohl1kLf76KEVOsxtIBFwCaLupVuk4eFVnOZfU+Wsn+x5Ryam7nILV2pkq2TqQM9EZPsOBuMC+kg==}
+    engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-ia32@0.19.10:
-    resolution: {integrity: sha512-4ub1YwXxYjj9h1UIZs2hYbnTZBtenPw5NfXCRgEkGb0b6OJ2gpkMvDqRDYIDRjRdWSe/TBiZltm3Y3Q8SN1xNg==}
+  '@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.20.0:
-    resolution: {integrity: sha512-c88wwtfs8tTffPaoJ+SQn3y+lKtgTzyjkD8NgsyCtCmtoIC8RDL7PrJU05an/e9VuAke6eJqGkoMhJK1RY6z4w==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-ia32@0.25.8':
+    resolution: {integrity: sha512-A1D9YzRX1i+1AJZuFFUMP1E9fMaYY+GnSQil9Tlw05utlE86EKTUA7RjwHDkEitmLYiFsRd9HwKBPEftNdBfjg==}
+    engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-loong64@0.19.10:
-    resolution: {integrity: sha512-lo3I9k+mbEKoxtoIbM0yC/MZ1i2wM0cIeOejlVdZ3D86LAcFXFRdeuZmh91QJvUTW51bOK5W2BznGNIl4+mDaA==}
+  '@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.20.0:
-    resolution: {integrity: sha512-lR2rr/128/6svngnVta6JN4gxSXle/yZEZL3o4XZ6esOqhyR4wsKyfu6qXAL04S4S5CgGfG+GYZnjFd4YiG3Aw==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-loong64@0.25.8':
+    resolution: {integrity: sha512-O7k1J/dwHkY1RMVvglFHl1HzutGEFFZ3kNiDMSOyUrB7WcoHGf96Sh+64nTRT26l3GMbCW01Ekh/ThKM5iI7hQ==}
+    engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-mips64el@0.19.10:
-    resolution: {integrity: sha512-J4gH3zhHNbdZN0Bcr1QUGVNkHTdpijgx5VMxeetSk6ntdt+vR1DqGmHxQYHRmNb77tP6GVvD+K0NyO4xjd7y4A==}
+  '@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.20.0:
-    resolution: {integrity: sha512-9Sycc+1uUsDnJCelDf6ZNqgZQoK1mJvFtqf2MUz4ujTxGhvCWw+4chYfDLPepMEvVL9PDwn6HrXad5yOrNzIsQ==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-mips64el@0.25.8':
+    resolution: {integrity: sha512-uv+dqfRazte3BzfMp8PAQXmdGHQt2oC/y2ovwpTteqrMx2lwaksiFZ/bdkXJC19ttTvNXBuWH53zy/aTj1FgGw==}
+    engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-ppc64@0.19.10:
-    resolution: {integrity: sha512-tgT/7u+QhV6ge8wFMzaklOY7KqiyitgT1AUHMApau32ZlvTB/+efeCtMk4eXS+uEymYK249JsoiklZN64xt6oQ==}
+  '@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.20.0:
-    resolution: {integrity: sha512-CoWSaaAXOZd+CjbUTdXIJE/t7Oz+4g90A3VBCHLbfuc5yUQU/nFDLOzQsN0cdxgXd97lYW/psIIBdjzQIwTBGw==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-ppc64@0.25.8':
+    resolution: {integrity: sha512-GyG0KcMi1GBavP5JgAkkstMGyMholMDybAf8wF5A70CALlDM2p/f7YFE7H92eDeH/VBtFJA5MT4nRPDGg4JuzQ==}
+    engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-riscv64@0.19.10:
-    resolution: {integrity: sha512-0f/spw0PfBMZBNqtKe5FLzBDGo0SKZKvMl5PHYQr3+eiSscfJ96XEknCe+JoOayybWUFQbcJTrk946i3j9uYZA==}
+  '@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.20.0:
-    resolution: {integrity: sha512-mlb1hg/eYRJUpv8h/x+4ShgoNLL8wgZ64SUr26KwglTYnwAWjkhR2GpoKftDbPOCnodA9t4Y/b68H4J9XmmPzA==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-riscv64@0.25.8':
+    resolution: {integrity: sha512-rAqDYFv3yzMrq7GIcen3XP7TUEG/4LK86LUPMIz6RT8A6pRIDn0sDcvjudVZBiiTcZCY9y2SgYX2lgK3AF+1eg==}
+    engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-s390x@0.19.10:
-    resolution: {integrity: sha512-pZFe0OeskMHzHa9U38g+z8Yx5FNCLFtUnJtQMpwhS+r4S566aK2ci3t4NCP4tjt6d5j5uo4h7tExZMjeKoehAA==}
+  '@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.20.0:
-    resolution: {integrity: sha512-fgf9ubb53xSnOBqyvWEY6ukBNRl1mVX1srPNu06B6mNsNK20JfH6xV6jECzrQ69/VMiTLvHMicQR/PgTOgqJUQ==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-s390x@0.25.8':
+    resolution: {integrity: sha512-Xutvh6VjlbcHpsIIbwY8GVRbwoviWT19tFhgdA7DlenLGC/mbc3lBoVb7jxj9Z+eyGqvcnSyIltYUrkKzWqSvg==}
+    engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/linux-x64@0.19.10:
-    resolution: {integrity: sha512-SpYNEqg/6pZYoc+1zLCjVOYvxfZVZj6w0KROZ3Fje/QrM3nfvT2llI+wmKSrWuX6wmZeTapbarvuNNK/qepSgA==}
+  '@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.20.0:
-    resolution: {integrity: sha512-H9Eu6MGse++204XZcYsse1yFHmRXEWgadk2N58O/xd50P9EvFMLJTQLg+lB4E1cF2xhLZU5luSWtGTb0l9UeSg==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-x64@0.25.8':
+    resolution: {integrity: sha512-ASFQhgY4ElXh3nDcOMTkQero4b1lgubskNlhIfJrsH5OKZXDpUAKBlNS0Kx81jwOBp+HCeZqmoJuihTv57/jvQ==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/netbsd-x64@0.19.10:
-    resolution: {integrity: sha512-ACbZ0vXy9zksNArWlk2c38NdKg25+L9pr/mVaj9SUq6lHZu/35nx2xnQVRGLrC1KKQqJKRIB0q8GspiHI3J80Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
+  '@esbuild/netbsd-arm64@0.25.8':
+    resolution: {integrity: sha512-d1KfruIeohqAi6SA+gENMuObDbEjn22olAR7egqnkCD9DGBG0wsEARotkLgXDu6c4ncgWTZJtN5vcgxzWRMzcw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
     os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/netbsd-x64@0.20.0:
-    resolution: {integrity: sha512-lCT675rTN1v8Fo+RGrE5KjSnfY0x9Og4RN7t7lVrN3vMSjy34/+3na0q7RIfWDAj0e0rCh0OL+P88lu3Rt21MQ==}
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/openbsd-x64@0.19.10:
-    resolution: {integrity: sha512-PxcgvjdSjtgPMiPQrM3pwSaG4kGphP+bLSb+cihuP0LYdZv1epbAIecHVl5sD3npkfYBZ0ZnOjR878I7MdJDFg==}
-    engines: {node: '>=12'}
+  '@esbuild/netbsd-x64@0.25.8':
+    resolution: {integrity: sha512-nVDCkrvx2ua+XQNyfrujIG38+YGyuy2Ru9kKVNyh5jAys6n+l44tTtToqHjino2My8VAY6Lw9H7RI73XFi66Cg==}
+    engines: {node: '>=18'}
     cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.8':
+    resolution: {integrity: sha512-j8HgrDuSJFAujkivSMSfPQSAa5Fxbvk4rgNAS5i3K+r8s1X0p1uOO2Hl2xNsGFppOeHOLAVgYwDVlmxhq5h+SQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
     os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/openbsd-x64@0.20.0:
-    resolution: {integrity: sha512-HKoUGXz/TOVXKQ+67NhxyHv+aDSZf44QpWLa3I1lLvAwGq8x1k0T+e2HHSRvxWhfJrFxaaqre1+YyzQ99KixoA==}
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/sunos-x64@0.19.10:
-    resolution: {integrity: sha512-ZkIOtrRL8SEJjr+VHjmW0znkPs+oJXhlJbNwfI37rvgeMtk3sxOQevXPXjmAPZPigVTncvFqLMd+uV0IBSEzqA==}
-    engines: {node: '>=12'}
+  '@esbuild/openbsd-x64@0.25.8':
+    resolution: {integrity: sha512-1h8MUAwa0VhNCDp6Af0HToI2TJFAn1uqT9Al6DJVzdIBAd21m/G0Yfc77KDM3uF3T/YaOgQq3qTJHPbTOInaIQ==}
+    engines: {node: '>=18'}
     cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.8':
+    resolution: {integrity: sha512-r2nVa5SIK9tSWd0kJd9HCffnDHKchTGikb//9c7HX+r+wHYCpQrSgxhlY6KWV1nFo1l4KFbsMlHk+L6fekLsUg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
 
-  /@esbuild/sunos-x64@0.20.0:
-    resolution: {integrity: sha512-GDwAqgHQm1mVoPppGsoq4WJwT3vhnz/2N62CzhvApFD1eJyTroob30FPpOZabN+FgCjhG+AgcZyOPIkR8dfD7g==}
+  '@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/win32-arm64@0.19.10:
-    resolution: {integrity: sha512-+Sa4oTDbpBfGpl3Hn3XiUe4f8TU2JF7aX8cOfqFYMMjXp6ma6NJDztl5FDG8Ezx0OjwGikIHw+iA54YLDNNVfw==}
+  '@esbuild/sunos-x64@0.25.8':
+    resolution: {integrity: sha512-zUlaP2S12YhQ2UzUfcCuMDHQFJyKABkAjvO5YSndMiIkMimPmxA+BYSBikWgsRpvyxuRnow4nS5NPnf9fpv41w==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@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.20.0:
-    resolution: {integrity: sha512-0vYsP8aC4TvMlOQYozoksiaxjlvUcQrac+muDqj1Fxy6jh9l9CZJzj7zmh8JGfiV49cYLTorFLxg7593pGldwQ==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-arm64@0.25.8':
+    resolution: {integrity: sha512-YEGFFWESlPva8hGL+zvj2z/SaK+pH0SwOM0Nc/d+rVnW7GSTFlLBGzZkuSU9kFIGIo8q9X3ucpZhu8PDN5A2sQ==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/win32-ia32@0.19.10:
-    resolution: {integrity: sha512-EOGVLK1oWMBXgfttJdPHDTiivYSjX6jDNaATeNOaCOFEVcfMjtbx7WVQwPSE1eIfCp/CaSF2nSrDtzc4I9f8TQ==}
+  '@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.20.0:
-    resolution: {integrity: sha512-p98u4rIgfh4gdpV00IqknBD5pC84LCub+4a3MO+zjqvU5MVXOc3hqR2UgT2jI2nh3h8s9EQxmOsVI3tyzv1iFg==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-ia32@0.25.8':
+    resolution: {integrity: sha512-hiGgGC6KZ5LZz58OL/+qVVoZiuZlUYlYHNAmczOm7bs2oE1XriPFi5ZHHrS8ACpV5EjySrnoCKmcbQMN+ojnHg==}
+    engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@esbuild/win32-x64@0.19.10:
-    resolution: {integrity: sha512-whqLG6Sc70AbU73fFYvuYzaE4MNMBIlR1Y/IrUeOXFrWHxBEjjbZaQ3IXIQS8wJdAzue2GwYZCjOrgrU1oUHoA==}
+  '@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.20.0:
-    resolution: {integrity: sha512-NgJnesu1RtWihtTtXGFMU5YSE6JyyHPMxCwBZK7a6/8d31GuSo9l0Ss7w1Jw5QnKUawG6UEehs883kcXf5fYwg==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-x64@0.25.8':
+    resolution: {integrity: sha512-cn3Yr7+OaaZq1c+2pe+8yxC8E144SReCQjN6/2ynubzYjvyqZjTXfQJpAcQpsdJq3My7XADANiYGHoFC69pLQw==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+  '@eslint-community/eslint-utils@4.6.1':
+    resolution: {integrity: sha512-KTsJMmobmbrFLe3LDh0PC2FXpcSYJt/MLjlkh/9LEnmKYLSYmT/0EW9JWANjeoemiuZrmogti0tW5Ch+qNUYDw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/eslint-utils@4.7.0':
+    resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
     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.56.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.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-    dev: true
 
-  /@eslint/eslintrc@2.1.4:
-    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
-    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.20.0':
+    resolution: {integrity: sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /@eslint/js@8.56.0:
-    resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
+  '@eslint/config-helpers@0.2.1':
+    resolution: {integrity: sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw==}
+    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/core@0.14.0':
+    resolution: {integrity: sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.1':
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.27.0':
+    resolution: {integrity: sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.6':
+    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.3.1':
+    resolution: {integrity: sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
 
-  /@humanwhocodes/module-importer@1.0.1:
+  '@humanfs/node@0.16.6':
+    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
+    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'}
+
+  '@humanwhocodes/retry@0.4.2':
+    resolution: {integrity: sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==}
+    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/balanced-match@4.0.1':
+    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/brace-expansion@5.0.0':
+    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
+    engines: {node: 20 || >=22}
+
+  '@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.4.15:
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
-  /@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
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
-  /@jspm/core@2.0.1:
+  '@jspm/core@2.0.1':
     resolution: {integrity: sha512-Lg3PnLp0QXpxwLIAuuJboLeRaIhrgJjeuh797QADg3xz8wGLugQOS5DpsE8A6i6Adgzf+bacllkKZG3J0tGfDw==}
-    dev: true
 
-  /@nodelib/fs.scandir@2.1.5:
+  '@napi-rs/wasm-runtime@0.2.9':
+    resolution: {integrity: sha512-OKRBiajrrxB9ATokgEQoG87Z25c67pCpYcCwmXYX8PBftC9pBfN18gnm/fh1wurSLEKIAt+QRFLFCQISrb66Jg==}
+
+  '@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:
+  '@parcel/watcher-android-arm64@2.4.1':
+    resolution: {integrity: sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.4.1':
+    resolution: {integrity: sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.4.1':
+    resolution: {integrity: sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.4.1':
+    resolution: {integrity: sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.4.1':
+    resolution: {integrity: sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-glibc@2.4.1':
+    resolution: {integrity: sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-musl@2.4.1':
+    resolution: {integrity: sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-glibc@2.4.1':
+    resolution: {integrity: sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-musl@2.4.1':
+    resolution: {integrity: sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-win32-arm64@2.4.1':
+    resolution: {integrity: sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.4.1':
+    resolution: {integrity: sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.4.1':
+    resolution: {integrity: sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.4.1':
+    resolution: {integrity: sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==}
+    engines: {node: '>= 10.0.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.9.1:
-    resolution: {integrity: sha512-PuvK6xZzGhKPvlx3fpfdM2kYY3P/hB1URtK8wA7XUJ6prn6pp22zvJHu48th0SGcHL9SutbPHrFuQgfXTFobWA==}
-    engines: {node: '>=16.3.0'}
+  '@puppeteer/browsers@2.10.5':
+    resolution: {integrity: sha512-eifa0o+i8dERnngJwKrfp3dEq7ia5XFyoqB17S4gK8GhsQE4/P8nxOfQSE0zQHxzzLo/cmF+7+ywEQ7wK7Fb+w==}
+    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.1.0(rollup@4.9.2):
-    resolution: {integrity: sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==}
+  '@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.9.2
-      slash: 4.0.0
-    dev: true
 
-  /@rollup/plugin-commonjs@25.0.7(rollup@4.9.2):
-    resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
-    engines: {node: '>=14.0.0'}
+  '@rollup/plugin-commonjs@28.0.6':
+    resolution: {integrity: sha512-XSQB1K7FUU5QP+3lOQmVCE3I0FcbbNvmNT4VJSj93iUjayaARrTQeoRdiYQoftAJBLrR9t2agwAd3ekaTgHNlw==}
+    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.1.0(rollup@4.9.2)
-      commondir: 1.0.1
-      estree-walker: 2.0.2
-      glob: 8.1.0
-      is-reference: 1.2.1
-      magic-string: 0.30.6
-      rollup: 4.9.2
-    dev: true
 
-  /@rollup/plugin-inject@5.0.5(rollup@4.9.2):
+  '@rollup/plugin-inject@5.0.5':
     resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -1266,14 +1046,8 @@ packages:
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
-      estree-walker: 2.0.2
-      magic-string: 0.30.6
-      rollup: 4.9.2
-    dev: true
 
-  /@rollup/plugin-json@6.1.0(rollup@4.9.2):
+  '@rollup/plugin-json@6.1.0':
     resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -1281,30 +1055,17 @@ packages:
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
-      rollup: 4.9.2
-    dev: true
 
-  /@rollup/plugin-node-resolve@15.2.3(rollup@4.9.2):
-    resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
+  '@rollup/plugin-node-resolve@16.0.1':
+    resolution: {integrity: sha512-tk5YCxJWIG81umIvNkSod2qK5KyQW19qcBF/B78n1bjtOON6gzKoVeSzAE8yHCZEDmqkHKkxplExA8KzdJLJpA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^2.78.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
-      '@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.9.2
-    dev: true
 
-  /@rollup/plugin-replace@5.0.4(rollup@4.9.2):
+  '@rollup/plugin-replace@5.0.4':
     resolution: {integrity: sha512-E2hmRnlh09K8HGT0rOnnri9OTh+BILGr7NVJGB30S4E3cLRn3J0xjdiyOZ74adPs4NiAMgrjUMGAZNJDBgsdmQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -1312,28 +1073,8 @@ packages:
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
-      magic-string: 0.30.6
-      rollup: 4.9.2
-    dev: true
-
-  /@rollup/plugin-terser@0.4.4(rollup@4.9.2):
-    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.9.2
-      serialize-javascript: 6.0.1
-      smob: 1.4.1
-      terser: 5.27.0
-    dev: true
 
-  /@rollup/pluginutils@5.1.0(rollup@4.9.2):
+  '@rollup/pluginutils@5.1.0':
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -1341,943 +1082,3573 @@ packages:
     peerDependenciesMeta:
       rollup:
         optional: true
-    dependencies:
-      '@types/estree': 1.0.3
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-      rollup: 4.9.2
-    dev: true
 
-  /@rollup/rollup-android-arm-eabi@4.9.2:
-    resolution: {integrity: sha512-RKzxFxBHq9ysZ83fn8Iduv3A283K7zPPYuhL/z9CQuyFrjwpErJx0h4aeb/bnJ+q29GRLgJpY66ceQ/Wcsn3wA==}
+  '@rollup/rollup-android-arm-eabi@4.45.1':
+    resolution: {integrity: sha512-NEySIFvMY0ZQO+utJkgoMiCAjMrGvnbDLHvcmlA33UXJpYBCvlBEbMMtV837uCkS+plG2umfhn0T5mMAxGrlRA==}
     cpu: [arm]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-android-arm64@4.9.2:
-    resolution: {integrity: sha512-yZ+MUbnwf3SHNWQKJyWh88ii2HbuHCFQnAYTeeO1Nb8SyEiWASEi5dQUygt3ClHWtA9My9RQAYkjvrsZ0WK8Xg==}
+  '@rollup/rollup-android-arm64@4.45.1':
+    resolution: {integrity: sha512-ujQ+sMXJkg4LRJaYreaVx7Z/VMgBBd89wGS4qMrdtfUFZ+TSY5Rs9asgjitLwzeIbhwdEhyj29zhst3L1lKsRQ==}
     cpu: [arm64]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-darwin-arm64@4.9.2:
-    resolution: {integrity: sha512-vqJ/pAUh95FLc/G/3+xPqlSBgilPnauVf2EXOQCZzhZJCXDXt/5A8mH/OzU6iWhb3CNk5hPJrh8pqJUPldN5zw==}
+  '@rollup/rollup-darwin-arm64@4.45.1':
+    resolution: {integrity: sha512-FSncqHvqTm3lC6Y13xncsdOYfxGSLnP+73k815EfNmpewPs+EyM49haPS105Rh4aF5mJKywk9X0ogzLXZzN9lA==}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-darwin-x64@4.9.2:
-    resolution: {integrity: sha512-otPHsN5LlvedOprd3SdfrRNhOahhVBwJpepVKUN58L0RnC29vOAej1vMEaVU6DadnpjivVsNTM5eNt0CcwTahw==}
+  '@rollup/rollup-darwin-x64@4.45.1':
+    resolution: {integrity: sha512-2/vVn/husP5XI7Fsf/RlhDaQJ7x9zjvC81anIVbr4b/f0xtSmXQTFcGIQ/B1cXIYM6h2nAhJkdMHTnD7OtQ9Og==}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-arm-gnueabihf@4.9.2:
-    resolution: {integrity: sha512-ewG5yJSp+zYKBYQLbd1CUA7b1lSfIdo9zJShNTyc2ZP1rcPrqyZcNlsHgs7v1zhgfdS+kW0p5frc0aVqhZCiYQ==}
+  '@rollup/rollup-freebsd-arm64@4.45.1':
+    resolution: {integrity: sha512-4g1kaDxQItZsrkVTdYQ0bxu4ZIQ32cotoQbmsAnW1jAE4XCMbcBPDirX5fyUzdhVCKgPcrwWuucI8yrVRBw2+g==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.45.1':
+    resolution: {integrity: sha512-L/6JsfiL74i3uK1Ti2ZFSNsp5NMiM4/kbbGEcOCps99aZx3g8SJMO1/9Y0n/qKlWZfn6sScf98lEOUe2mBvW9A==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.45.1':
+    resolution: {integrity: sha512-RkdOTu2jK7brlu+ZwjMIZfdV2sSYHK2qR08FUWcIoqJC2eywHbXr0L8T/pONFwkGukQqERDheaGTeedG+rra6Q==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.45.1':
+    resolution: {integrity: sha512-3kJ8pgfBt6CIIr1o+HQA7OZ9mp/zDk3ctekGl9qn/pRBgrRgfwiffaUmqioUGN9hv0OHv2gxmvdKOkARCtRb8Q==}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-arm64-gnu@4.9.2:
-    resolution: {integrity: sha512-pL6QtV26W52aCWTG1IuFV3FMPL1m4wbsRG+qijIvgFO/VBsiXJjDPE/uiMdHBAO6YcpV4KvpKtd0v3WFbaxBtg==}
+  '@rollup/rollup-linux-arm64-gnu@4.45.1':
+    resolution: {integrity: sha512-k3dOKCfIVixWjG7OXTCOmDfJj3vbdhN0QYEqB+OuGArOChek22hn7Uy5A/gTDNAcCy5v2YcXRJ/Qcnm4/ma1xw==}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-arm64-musl@4.9.2:
-    resolution: {integrity: sha512-On+cc5EpOaTwPSNetHXBuqylDW+765G/oqB9xGmWU3npEhCh8xu0xqHGUA+4xwZLqBbIZNcBlKSIYfkBm6ko7g==}
+  '@rollup/rollup-linux-arm64-musl@4.45.1':
+    resolution: {integrity: sha512-PmI1vxQetnM58ZmDFl9/Uk2lpBBby6B6rF4muJc65uZbxCs0EA7hhKCk2PKlmZKuyVSHAyIw3+/SiuMLxKxWog==}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-riscv64-gnu@4.9.2:
-    resolution: {integrity: sha512-Wnx/IVMSZ31D/cO9HSsU46FjrPWHqtdF8+0eyZ1zIB5a6hXaZXghUKpRrC4D5DcRTZOjml2oBhXoqfGYyXKipw==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.45.1':
+    resolution: {integrity: sha512-9UmI0VzGmNJ28ibHW2GpE2nF0PBQqsyiS4kcJ5vK+wuwGnV5RlqdczVocDSUfGX/Na7/XINRVoUgJyFIgipoRg==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.45.1':
+    resolution: {integrity: sha512-7nR2KY8oEOUTD3pBAxIBBbZr0U7U+R9HDTPNy+5nVVHDXI4ikYniH1oxQz9VoB5PbBU1CZuDGHkLJkd3zLMWsg==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.45.1':
+    resolution: {integrity: sha512-nlcl3jgUultKROfZijKjRQLUu9Ma0PeNv/VFHkZiKbXTBQXhpytS8CIj5/NfBeECZtY2FJQubm6ltIxm/ftxpw==}
     cpu: [riscv64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-x64-gnu@4.9.2:
-    resolution: {integrity: sha512-ym5x1cj4mUAMBummxxRkI4pG5Vht1QMsJexwGP8547TZ0sox9fCLDHw9KCH9c1FO5d9GopvkaJsBIOkTKxksdw==}
+  '@rollup/rollup-linux-riscv64-musl@4.45.1':
+    resolution: {integrity: sha512-HJV65KLS51rW0VY6rvZkiieiBnurSzpzore1bMKAhunQiECPuxsROvyeaot/tcK3A3aGnI+qTHqisrpSgQrpgA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.45.1':
+    resolution: {integrity: sha512-NITBOCv3Qqc6hhwFt7jLV78VEO/il4YcBzoMGGNxznLgRQf43VQDae0aAzKiBeEPIxnDrACiMgbqjuihx08OOw==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.45.1':
+    resolution: {integrity: sha512-+E/lYl6qu1zqgPEnTrs4WysQtvc/Sh4fC2nByfFExqgYrqkKWp1tWIbe+ELhixnenSpBbLXNi6vbEEJ8M7fiHw==}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-linux-x64-musl@4.9.2:
-    resolution: {integrity: sha512-m0hYELHGXdYx64D6IDDg/1vOJEaiV8f1G/iO+tejvRCJNSwK4jJ15e38JQy5Q6dGkn1M/9KcyEOwqmlZ2kqaZg==}
+  '@rollup/rollup-linux-x64-musl@4.45.1':
+    resolution: {integrity: sha512-a6WIAp89p3kpNoYStITT9RbTbTnqarU7D8N8F2CV+4Cl9fwCOZraLVuVFvlpsW0SbIiYtEnhCZBPLoNdRkjQFw==}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-win32-arm64-msvc@4.9.2:
-    resolution: {integrity: sha512-x1CWburlbN5JjG+juenuNa4KdedBdXLjZMp56nHFSHTOsb/MI2DYiGzLtRGHNMyydPGffGId+VgjOMrcltOksA==}
+  '@rollup/rollup-win32-arm64-msvc@4.45.1':
+    resolution: {integrity: sha512-T5Bi/NS3fQiJeYdGvRpTAP5P02kqSOpqiopwhj0uaXB6nzs5JVi2XMJb18JUSKhCOX8+UE1UKQufyD6Or48dJg==}
     cpu: [arm64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-win32-ia32-msvc@4.9.2:
-    resolution: {integrity: sha512-VVzCB5yXR1QlfsH1Xw1zdzQ4Pxuzv+CPr5qpElpKhVxlxD3CRdfubAG9mJROl6/dmj5gVYDDWk8sC+j9BI9/kQ==}
+  '@rollup/rollup-win32-ia32-msvc@4.45.1':
+    resolution: {integrity: sha512-lxV2Pako3ujjuUe9jiU3/s7KSrDfH6IgTSQOnDWr9aJ92YsFd7EurmClK0ly/t8dzMkDtd04g60WX6yl0sGfdw==}
     cpu: [ia32]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@rollup/rollup-win32-x64-msvc@4.9.2:
-    resolution: {integrity: sha512-SYRedJi+mweatroB+6TTnJYLts0L0bosg531xnQWtklOI6dezEagx4Q0qDyvRdK+qgdA3YZpjjGuPFtxBmddBA==}
+  '@rollup/rollup-win32-x64-msvc@4.45.1':
+    resolution: {integrity: sha512-M/fKi4sasCdM8i0aWJjCSFm2qEnYRR8AMLG2kxp6wD13+tMGA4Z1tVAuHkNRjud5SW2EM3naLuK35w9twvf6aA==}
     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
 
-  /@tootallnate/quickjs-emscripten@0.23.0:
-    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
-    dev: true
+  '@swc/core-darwin-arm64@1.13.1':
+    resolution: {integrity: sha512-zO6SW/jSMTUORPm6dUZFPUwf+EFWZsaXWMGXadRG6akCofYpoQb8pcY2QZkVr43z8TMka6BtXpyoD/DJ0iOPHQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
 
-  /@types/estree@1.0.3:
-    resolution: {integrity: sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==}
-    dev: true
+  '@swc/core-darwin-x64@1.13.1':
+    resolution: {integrity: sha512-8RjaTZYxrlYKE5PgzZYWSOT4mAsyhIuh30Nu4dnn/2r0Ef68iNCbvX4ynGnFMhOIhqunjQbJf+mJKpwTwdHXhw==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
 
-  /@types/hash-sum@1.0.2:
-    resolution: {integrity: sha512-UP28RddqY8xcU0SCEp9YKutQICXpaAq9N8U2klqF5hegGha7KzTOL8EdhIIV3bOSGBzjEpN9bU/d+nNZBdJYVw==}
-    dev: true
+  '@swc/core-linux-arm-gnueabihf@1.13.1':
+    resolution: {integrity: sha512-jEqK6pECs2m4BpL2JA/4CCkq04p6iFOEtVNXTisO+lJ3zwmxlnIEm9UfJZG6VSu8GS9MHRKGB0ieZ1tEdN1qDA==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
 
-  /@types/json-schema@7.0.14:
-    resolution: {integrity: sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==}
-    dev: true
+  '@swc/core-linux-arm64-gnu@1.13.1':
+    resolution: {integrity: sha512-PbkuIOYXO/gQbWQ7NnYIwm59ygNqmUcF8LBeoKvxhx1VtOwE+9KiTfoplOikkPLhMiTzKsd8qentTslbITIg+Q==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
 
-  /@types/minimist@1.2.5:
-    resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
-    dev: true
+  '@swc/core-linux-arm64-musl@1.13.1':
+    resolution: {integrity: sha512-JaqFdBCarIBKiMu5bbAp+kWPMNGg97ej+7KzbKOzWP5pRptqKi86kCDZT3WmjPe8hNG6dvBwbm7Y8JNry5LebQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
 
-  /@types/node@20.11.16:
-    resolution: {integrity: sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==}
-    dependencies:
-      undici-types: 5.26.5
-    dev: true
+  '@swc/core-linux-x64-gnu@1.13.1':
+    resolution: {integrity: sha512-t4cLkku10YECDaakWUH0452WJHIZtrLPRwezt6BdoMntVMwNjvXRX7C8bGuYcKC3YxRW7enZKFpozLhQIQ37oA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
 
-  /@types/normalize-package-data@2.4.3:
-    resolution: {integrity: sha512-ehPtgRgaULsFG8x0NeYJvmyH1hmlfsNLujHe9dQEia/7MAJYdzMSi19JtchUHjmBA6XC/75dK55mzZH+RyieSg==}
-    dev: true
+  '@swc/core-linux-x64-musl@1.13.1':
+    resolution: {integrity: sha512-fSMwZOaG+3ukUucbEbzz9GhzGhUhXoCPqHe9qW0/Vc2IZRp538xalygKyZynYweH5d9EHux1aj3+IO8/xBaoiA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
 
-  /@types/resolve@1.20.2:
-    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
-    dev: true
+  '@swc/core-win32-arm64-msvc@1.13.1':
+    resolution: {integrity: sha512-tweCXK/79vAwj1NhAsYgICy8T1z2QEairmN2BFEBYFBFNMEB1iI1YlXwBkBtuihRvgZrTh1ORusKa4jLYzLCZA==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
 
-  /@types/semver@7.5.6:
-    resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
-    dev: true
+  '@swc/core-win32-ia32-msvc@1.13.1':
+    resolution: {integrity: sha512-zi7hO9D+2R2yQN9D7T10/CAI9KhuXkNkz8tcJOW6+dVPtAk/gsIC5NoGPELjgrAlLL9CS38ZQpLDslLfpP15ng==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
 
-  /@types/yauzl@2.10.2:
-    resolution: {integrity: sha512-Km7XAtUIduROw7QPgvcft0lIupeG8a8rdKL8RiSyKvlE7dYY31fEn41HVuQsRFDuROA8tA4K2UVL+WdfFmErBA==}
-    requiresBuild: true
-    dependencies:
-      '@types/node': 20.11.16
-    dev: true
-    optional: true
+  '@swc/core-win32-x64-msvc@1.13.1':
+    resolution: {integrity: sha512-KubYjzqs/nz3H69ncX/XHKsC8c1xqc7UvonQAj26BhbL22HBsqdAaVutZ+Obho6RMpd3F5qQ95ldavUTWskRrw==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
 
-  /@typescript-eslint/eslint-plugin@6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@swc/core@1.13.1':
+    resolution: {integrity: sha512-jEKKErLC6uwSqA+p6bmZR08usZM5Fpc+HdEu5CAzvye0q43yf1si1kjhHEa9XMkz0A2SAaal3eKCg/YYmtOsCA==}
+    engines: {node: '>=10'}
     peerDependencies:
-      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
+      '@swc/helpers': '>=0.5.17'
     peerDependenciesMeta:
-      typescript:
+      '@swc/helpers':
         optional: true
-    dependencies:
-      '@eslint-community/regexpp': 4.9.1
-      '@typescript-eslint/parser': 6.18.1(eslint@8.56.0)(typescript@5.2.2)
-      '@typescript-eslint/scope-manager': 6.18.1
-      '@typescript-eslint/type-utils': 6.18.1(eslint@8.56.0)(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.18.1
-      debug: 4.3.4
-      eslint: 8.56.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
-      natural-compare: 1.4.0
-      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/parser@6.18.1(eslint@8.56.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.18.1
-      '@typescript-eslint/types': 6.18.1
-      '@typescript-eslint/typescript-estree': 6.18.1(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.18.1
-      debug: 4.3.4
-      eslint: 8.56.0
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
-  /@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
+  '@swc/types@0.1.23':
+    resolution: {integrity: sha512-u1iIVZV9Q0jxY+yM2vw/hZGDNudsN85bBpTqzAQ9rzkxW9D+e3aEM4Han+ow518gSewkXgjmEK0BD79ZcNVgPw==}
 
-  /@typescript-eslint/scope-manager@6.18.1:
-    resolution: {integrity: sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.18.1
-      '@typescript-eslint/visitor-keys': 6.18.1
-    dev: true
+  '@tootallnate/quickjs-emscripten@0.23.0':
+    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
 
-  /@typescript-eslint/type-utils@6.18.1(eslint@8.56.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/typescript-estree': 6.18.1(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@5.2.2)
-      debug: 4.3.4
-      eslint: 8.56.0
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+  '@tybys/wasm-util@0.9.0':
+    resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
-  /@typescript-eslint/types@5.62.0:
-    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
+  '@types/estree@1.0.7':
+    resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
-  /@typescript-eslint/types@6.18.1:
-    resolution: {integrity: sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dev: true
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  /@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}
-    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:
+  '@types/hash-sum@1.0.2':
+    resolution: {integrity: sha512-UP28RddqY8xcU0SCEp9YKutQICXpaAq9N8U2klqF5hegGha7KzTOL8EdhIIV3bOSGBzjEpN9bU/d+nNZBdJYVw==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/node@22.16.5':
+    resolution: {integrity: sha512-bJFoMATwIGaxxx8VJPeM8TonI8t579oRvgAuT8zFugJsJZgzqv0Fu8Mhp68iecjzG7cnN3mO2dJQ5uUM2EFrgQ==}
+
+  '@types/normalize-package-data@2.4.4':
+    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+
+  '@types/resolve@1.20.2':
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+
+  '@types/semver@7.7.0':
+    resolution: {integrity: sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==}
+
+  '@types/serve-handler@6.1.4':
+    resolution: {integrity: sha512-aXy58tNie0NkuSCY291xUxl0X+kGYy986l4kqW6Gi4kEXgr6Tx0fpSH7YwUSa5usPpG3s9DBeIR6hHcDtL2IvQ==}
+
+  '@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.32.1':
+    resolution: {integrity: sha512-6u6Plg9nP/J1GRpe/vcjjabo6Uc5YQPAMxsgQyGC/I0RuukiG1wIe3+Vtg3IrSCVJDmqK3j8adrtzXSENRtFgg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/parser@8.32.1':
+    resolution: {integrity: sha512-LKMrmwCPoLhM45Z00O1ulb6jwyVr2kr3XJp+G+tSEZcbauNnScewcQwtJqXDhXeYPDEjZ8C1SjXm015CirEmGg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/scope-manager@8.32.1':
+    resolution: {integrity: sha512-7IsIaIDeZn7kffk7qXC3o6Z4UblZJKV3UBpkvRNpr5NSyLji7tvTcvmnMNYuYLyh26mN8W723xpo3i4MlD33vA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/type-utils@8.32.1':
+    resolution: {integrity: sha512-mv9YpQGA8iIsl5KyUPi+FGLm7+bA4fgXaeRcFKRDRwDMu4iwrSHeDPipwueNXhdIIZltwCJv+NkxftECbIZWfA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/types@8.32.1':
+    resolution: {integrity: sha512-YmybwXUJcgGqgAp6bEsgpPXEg6dcCyPyCSr0CAAueacR/CCBi25G3V8gGQ2kRzQRBNol7VQknxMs9HvVa9Rvfg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.32.1':
+    resolution: {integrity: sha512-Y3AP9EIfYwBb4kWGb+simvPaqQoT5oJuzzj9m0i6FCY6SPvlomY2Ei4UEMm7+FXtlNJbor80ximyslzaQF6xhg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/utils@8.32.1':
+    resolution: {integrity: sha512-DsSFNIgLSrc89gpq1LJB7Hm1YpuhK086DRDJSNrewcGvYloWW1vZLHBTIvarKZDcAORIy/uWNx8Gad+4oMpkSA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  '@typescript-eslint/visitor-keys@8.32.1':
+    resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@unrs/resolver-binding-darwin-arm64@1.7.2':
+    resolution: {integrity: sha512-vxtBno4xvowwNmO/ASL0Y45TpHqmNkAaDtz4Jqb+clmcVSSl8XCG/PNFFkGsXXXS6AMjP+ja/TtNCFFa1QwLRg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-darwin-x64@1.7.2':
+    resolution: {integrity: sha512-qhVa8ozu92C23Hsmv0BF4+5Dyyd5STT1FolV4whNgbY6mj3kA0qsrGPe35zNR3wAN7eFict3s4Rc2dDTPBTuFQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-freebsd-x64@1.7.2':
+    resolution: {integrity: sha512-zKKdm2uMXqLFX6Ac7K5ElnnG5VIXbDlFWzg4WJ8CGUedJryM5A3cTgHuGMw1+P5ziV8CRhnSEgOnurTI4vpHpg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.7.2':
+    resolution: {integrity: sha512-8N1z1TbPnHH+iDS/42GJ0bMPLiGK+cUqOhNbMKtWJ4oFGzqSJk/zoXFzcQkgtI63qMcUI7wW1tq2usZQSb2jxw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.7.2':
+    resolution: {integrity: sha512-tjYzI9LcAXR9MYd9rO45m1s0B/6bJNuZ6jeOxo1pq1K6OBuRMMmfyvJYval3s9FPPGmrldYA3mi4gWDlWuTFGA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.7.2':
+    resolution: {integrity: sha512-jon9M7DKRLGZ9VYSkFMflvNqu9hDtOCEnO2QAryFWgT6o6AXU8du56V7YqnaLKr6rAbZBWYsYpikF226v423QA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.7.2':
+    resolution: {integrity: sha512-c8Cg4/h+kQ63pL43wBNaVMmOjXI/X62wQmru51qjfTvI7kmCy5uHTJvK/9LrF0G8Jdx8r34d019P1DVJmhXQpA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.7.2':
+    resolution: {integrity: sha512-A+lcwRFyrjeJmv3JJvhz5NbcCkLQL6Mk16kHTNm6/aGNc4FwPHPE4DR9DwuCvCnVHvF5IAd9U4VIs/VvVir5lg==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.7.2':
+    resolution: {integrity: sha512-hQQ4TJQrSQW8JlPm7tRpXN8OCNP9ez7PajJNjRD1ZTHQAy685OYqPrKjfaMw/8LiHCt8AZ74rfUVHP9vn0N69Q==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.7.2':
+    resolution: {integrity: sha512-NoAGbiqrxtY8kVooZ24i70CjLDlUFI7nDj3I9y54U94p+3kPxwd2L692YsdLa+cqQ0VoqMWoehDFp21PKRUoIQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.7.2':
+    resolution: {integrity: sha512-KaZByo8xuQZbUhhreBTW+yUnOIHUsv04P8lKjQ5otiGoSJ17ISGYArc+4vKdLEpGaLbemGzr4ZeUbYQQsLWFjA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.7.2':
+    resolution: {integrity: sha512-dEidzJDubxxhUCBJ/SHSMJD/9q7JkyfBMT77Px1npl4xpg9t0POLvnWywSk66BgZS/b2Hy9Y1yFaoMTFJUe9yg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-musl@1.7.2':
+    resolution: {integrity: sha512-RvP+Ux3wDjmnZDT4XWFfNBRVG0fMsc+yVzNFUqOflnDfZ9OYujv6nkh+GOr+watwrW4wdp6ASfG/e7bkDradsw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.7.2':
+    resolution: {integrity: sha512-y797JBmO9IsvXVRCKDXOxjyAE4+CcZpla2GSoBQ33TVb3ILXuFnMrbR/QQZoauBYeOFuu4w3ifWLw52sdHGz6g==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.7.2':
+    resolution: {integrity: sha512-gtYTh4/VREVSLA+gHrfbWxaMO/00y+34htY7XpioBTy56YN2eBjkPrY1ML1Zys89X3RJDKVaogzwxlM1qU7egg==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.7.2':
+    resolution: {integrity: sha512-Ywv20XHvHTDRQs12jd3MY8X5C8KLjDbg/jyaal/QLKx3fAShhJyD4blEANInsjxW3P7isHx1Blt56iUDDJO3jg==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.7.2':
+    resolution: {integrity: sha512-friS8NEQfHaDbkThxopGk+LuE5v3iY0StruifjQEt7SLbA46OnfgMO15sOTkbpJkol6RB+1l1TYPXh0sCddpvA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@vitejs/plugin-vue@5.2.4':
+    resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+      vue: ^3.2.25
+
+  '@vitest/coverage-v8@3.1.4':
+    resolution: {integrity: sha512-G4p6OtioySL+hPV7Y6JHlhpsODbJzt1ndwHAFkyk6vVjpK03PFsKnauZIzcd0PrK4zAbc5lc+jeZ+eNGiMA+iw==}
+    peerDependencies:
+      '@vitest/browser': 3.1.4
+      vitest: 3.1.4
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+
+  '@vitest/eslint-plugin@1.2.1':
+    resolution: {integrity: sha512-JQr1jdVcrsoS7Sdzn83h9sq4DvREf9Q/onTZbJCqTVlv/76qb+TZrLv/9VhjnjSMHweQH5FdpMDeCR6aDe2fgw==}
+    peerDependencies:
+      eslint: '>= 8.57.0'
+      typescript: '>= 5.0.0'
+      vitest: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vitest:
+        optional: true
+
+  '@vitest/expect@3.1.4':
+    resolution: {integrity: sha512-xkD/ljeliyaClDYqHPNCiJ0plY5YIcM0OlRiZizLhlPmpXWpxnGMyTZXOHFhFeG7w9P5PBeL4IdtJ/HeQwTbQA==}
+
+  '@vitest/mocker@3.1.4':
+    resolution: {integrity: sha512-8IJ3CvwtSw/EFXqWFL8aCMu+YyYXG2WUSrQbViOZkWTKTVicVwZ/YiEZDSqD00kX+v/+W+OnxhNWoeVKorHygA==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@3.1.4':
+    resolution: {integrity: sha512-cqv9H9GvAEoTaoq+cYqUTCGscUjKqlJZC7PRwY5FMySVj5J+xOm1KQcCiYHJOEzOKRUhLH4R2pTwvFlWCEScsg==}
+
+  '@vitest/runner@3.1.4':
+    resolution: {integrity: sha512-djTeF1/vt985I/wpKVFBMWUlk/I7mb5hmD5oP8K9ACRmVXgKTae3TUOtXAEBfslNKPzUQvnKhNd34nnRSYgLNQ==}
+
+  '@vitest/snapshot@3.1.4':
+    resolution: {integrity: sha512-JPHf68DvuO7vilmvwdPr9TS0SuuIzHvxeaCkxYcCD4jTk67XwL45ZhEHFKIuCm8CYstgI6LZ4XbwD6ANrwMpFg==}
+
+  '@vitest/spy@3.1.4':
+    resolution: {integrity: sha512-Xg1bXhu+vtPXIodYN369M86K8shGLouNjoVI78g8iAq2rFoHFdajNvJJ5A/9bPMFcfQqdaCpOgWKEoMQg/s0Yg==}
+
+  '@vitest/utils@3.1.4':
+    resolution: {integrity: sha512-yriMuO1cfFhmiGc8ataN51+9ooHRuURdfAZfwFd3usWynjzpLslZdYnRegTv32qdgtJTsj15FoeZe2g15fY1gg==}
+
+  '@vue/consolidate@1.0.0':
+    resolution: {integrity: sha512-oTyUE+QHIzLw2PpV14GD/c7EohDyP64xCniWTcqcEmTd699eFqTIwOmtDYjcO1j3QgdXoJEoWv1/cCdLrRoOfg==}
+    engines: {node: '>= 0.12.0'}
+
+  '@vue/repl@4.6.2':
+    resolution: {integrity: sha512-Rjl/X++MbfWNncry+qiIadY5BdrB3hp0Iu9W7R9eLJAce3hXnjUiykMK5rLAkQJpB6N83SR0LGNJbKg7gpzplg==}
+
+  '@zeit/schemas@2.36.0':
+    resolution: {integrity: sha512-7kjMwcChYEzMKjeex9ZFXkt1AyNov9R5HZtjBKVsmVpw7pa7ZtlCGvCBC2vnnXctaYN+aRI61HjIqeetZW5ROg==}
+
+  accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@7.4.1:
+    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  add-stream@1.0.0:
+    resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==}
+
+  agent-base@7.1.3:
+    resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
+    engines: {node: '>= 14'}
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ajv@8.12.0:
+    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
+
+  ansi-align@3.0.1:
+    resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
+
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
+  ansi-escapes@7.0.0:
+    resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
+    engines: {node: '>=18'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.0.1:
+    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
+  arch@2.2.0:
+    resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  array-ify@1.0.0:
+    resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
+
+  asap@2.0.6:
+    resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
+
+  assert-never@1.3.0:
+    resolution: {integrity: sha512-9Z3vxQ+berkL/JJo0dK+EY3Lp0s3NtSnP3VCLsh5HDcZPrh0M+KQRK5sWhUeyPPH+/RCxZqOxLMR+YC6vlviEQ==}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  ast-types@0.13.4:
+    resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
+    engines: {node: '>=4'}
+
+  b4a@1.6.6:
+    resolution: {integrity: sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==}
+
+  babel-walk@3.0.0-canary-5:
+    resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
+    engines: {node: '>= 10.0.0'}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  bare-events@2.4.2:
+    resolution: {integrity: sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==}
+
+  bare-fs@4.0.1:
+    resolution: {integrity: sha512-ilQs4fm/l9eMfWY2dY0WCIUplSUp7U0CT1vrqMg1MUdeZl4fypu5UP0XcDBK5WBQPJAKP1b7XEodISmekH/CEg==}
+    engines: {bare: '>=1.7.0'}
+
+  bare-os@3.4.0:
+    resolution: {integrity: sha512-9Ous7UlnKbe3fMi7Y+qh0DwAup6A1JkYgPnjvMDNOlmnxNRQvQ/7Nst+OnUQKzk0iAT0m9BisbDVp9gCv8+ETA==}
+    engines: {bare: '>=1.6.0'}
+
+  bare-path@3.0.0:
+    resolution: {integrity: sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==}
+
+  bare-stream@2.1.3:
+    resolution: {integrity: sha512-tiDAH9H/kP+tvNO5sczyn9ZAA7utrSMobyDchsnyyXBuUe2FSQWbxhtuHB8jwpHYYevVo2UJpcmvvjrbHboUUQ==}
+
+  basic-ftp@5.0.5:
+    resolution: {integrity: sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==}
+    engines: {node: '>=10.0.0'}
+
+  boxen@7.0.0:
+    resolution: {integrity: sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==}
+    engines: {node: '>=14.16'}
+
+  brace-expansion@1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+
+  brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  buffer-crc32@0.2.13:
+    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+
+  bytes@3.0.0:
+    resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
+    engines: {node: '>= 0.8'}
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  call-bind@1.0.7:
+    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camelcase@7.0.1:
+    resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
+    engines: {node: '>=14.16'}
+
+  chai@5.2.0:
+    resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
+    engines: {node: '>=12'}
+
+  chalk-template@0.4.0:
+    resolution: {integrity: sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==}
+    engines: {node: '>=12'}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chalk@5.0.1:
+    resolution: {integrity: sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  chalk@5.4.1:
+    resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  character-parser@2.2.0:
+    resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==}
+
+  check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
+
+  chokidar@4.0.1:
+    resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
+    engines: {node: '>= 14.16.0'}
+
+  chromium-bidi@5.1.0:
+    resolution: {integrity: sha512-9MSRhWRVoRPDG0TgzkHrshFSJJNZzfY5UFqUMuksg7zL1yoZIZ3jLB0YAgHclbiAxPI86pBnwDX1tbzoiV8aFw==}
+    peerDependencies:
+      devtools-protocol: '*'
+
+  cli-boxes@3.0.0:
+    resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
+    engines: {node: '>=10'}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-truncate@4.0.0:
+    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
+    engines: {node: '>=18'}
+
+  clipboardy@3.0.0:
+    resolution: {integrity: sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
+  commander@13.1.0:
+    resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
+    engines: {node: '>=18'}
+
+  comment-parser@1.4.1:
+    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
+    engines: {node: '>= 12.0.0'}
+
+  commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+
+  compare-func@2.0.0:
+    resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
+
+  compressible@2.0.18:
+    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
+    engines: {node: '>= 0.6'}
+
+  compression@1.7.4:
+    resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
+    engines: {node: '>= 0.8.0'}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  constantinople@4.0.1:
+    resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
+
+  content-disposition@0.5.2:
+    resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==}
+    engines: {node: '>= 0.6'}
+
+  conventional-changelog-angular@8.0.0:
+    resolution: {integrity: sha512-CLf+zr6St0wIxos4bmaKHRXWAcsCXrJU6F4VdNDrGRK3B8LDLKoX3zuMV5GhtbGkVR/LohZ6MT6im43vZLSjmA==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-atom@5.0.0:
+    resolution: {integrity: sha512-WfzCaAvSCFPkznnLgLnfacRAzjgqjLUjvf3MftfsJzQdDICqkOOpcMtdJF3wTerxSpv2IAAjX8doM3Vozqle3g==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-cli@5.0.0:
+    resolution: {integrity: sha512-9Y8fucJe18/6ef6ZlyIlT2YQUbczvoQZZuYmDLaGvcSBP+M6h+LAvf7ON7waRxKJemcCII8Yqu5/8HEfskTxJQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  conventional-changelog-codemirror@5.0.0:
+    resolution: {integrity: sha512-8gsBDI5Y3vrKUCxN6Ue8xr6occZ5nsDEc4C7jO/EovFGozx8uttCAyfhRrvoUAWi2WMm3OmYs+0mPJU7kQdYWQ==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-conventionalcommits@8.0.0:
+    resolution: {integrity: sha512-eOvlTO6OcySPyyyk8pKz2dP4jjElYunj9hn9/s0OB+gapTO8zwS9UQWrZ1pmF2hFs3vw1xhonOLGcGjy/zgsuA==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-core@8.0.0:
+    resolution: {integrity: sha512-EATUx5y9xewpEe10UEGNpbSHRC6cVZgO+hXQjofMqpy+gFIrcGvH3Fl6yk2VFKh7m+ffenup2N7SZJYpyD9evw==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-ember@5.0.0:
+    resolution: {integrity: sha512-RPflVfm5s4cSO33GH/Ey26oxhiC67akcxSKL8CLRT3kQX2W3dbE19sSOM56iFqUJYEwv9mD9r6k79weWe1urfg==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-eslint@6.0.0:
+    resolution: {integrity: sha512-eiUyULWjzq+ybPjXwU6NNRflApDWlPEQEHvI8UAItYW/h22RKkMnOAtfCZxMmrcMO1OKUWtcf2MxKYMWe9zJuw==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-express@5.0.0:
+    resolution: {integrity: sha512-D8Q6WctPkQpvr2HNCCmwU5GkX22BVHM0r4EW8vN0230TSyS/d6VQJDAxGb84lbg0dFjpO22MwmsikKL++Oo/oQ==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-jquery@6.0.0:
+    resolution: {integrity: sha512-2kxmVakyehgyrho2ZHBi90v4AHswkGzHuTaoH40bmeNqUt20yEkDOSpw8HlPBfvEQBwGtbE+5HpRwzj6ac2UfA==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-jshint@5.0.0:
+    resolution: {integrity: sha512-gGNphSb/opc76n2eWaO6ma4/Wqu3tpa2w7i9WYqI6Cs2fncDSI2/ihOfMvXveeTTeld0oFvwMVNV+IYQIk3F3g==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-preset-loader@5.0.0:
+    resolution: {integrity: sha512-SetDSntXLk8Jh1NOAl1Gu5uLiCNSYenB5tm0YVeZKePRIgDW9lQImromTwLa3c/Gae298tsgOM+/CYT9XAl0NA==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-writer@8.0.0:
+    resolution: {integrity: sha512-TQcoYGRatlAnT2qEWDON/XSfnVG38JzA7E0wcGScu7RElQBkg9WWgZd1peCWFcWDh1xfb2CfsrcvOn1bbSzztA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  conventional-changelog@6.0.0:
+    resolution: {integrity: sha512-tuUH8H/19VjtD9Ig7l6TQRh+Z0Yt0NZ6w/cCkkyzUbGQTnUEmKfGtkC9gGfVgCfOL1Rzno5NgNF4KY8vR+Jo3w==}
+    engines: {node: '>=18'}
+
+  conventional-commits-filter@5.0.0:
+    resolution: {integrity: sha512-tQMagCOC59EVgNZcC5zl7XqO30Wki9i9J3acbUvkaosCT6JX3EeFwJD7Qqp4MCikRnzS18WXV3BLIQ66ytu6+Q==}
+    engines: {node: '>=18'}
+
+  conventional-commits-parser@6.0.0:
+    resolution: {integrity: sha512-TbsINLp48XeMXR8EvGjTnKGsZqBemisPoyWESlpRyR8lif0lcwzqz+NMtYSj1ooF/WYjSuu7wX0CtdeeMEQAmA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  cssstyle@4.2.1:
+    resolution: {integrity: sha512-9+vem03dMXG7gDmZ62uqmRiMRNtinIZ9ZyuF6BdxzfOD+FdN5hretzynkn0ReS2DO2GSw76RWHs0UmJPI2zUjw==}
+    engines: {node: '>=18'}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  data-uri-to-buffer@6.0.2:
+    resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
+    engines: {node: '>= 14'}
+
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
+  debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js@10.5.0:
+    resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
+
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
+  deep-extend@0.6.0:
+    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
+    engines: {node: '>=4.0.0'}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  degenerator@5.0.1:
+    resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
+    engines: {node: '>= 14'}
+
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
+  devtools-protocol@0.0.1439962:
+    resolution: {integrity: sha512-jJF48UdryzKiWhJ1bLKr7BFWUQCEIT5uCNbDLqkQJBtkFxYzILJH44WN0PDKMIlGDN7Utb8vyUY85C3w4R/t2g==}
+
+  doctypes@1.1.0:
+    resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
+
+  dot-prop@5.3.0:
+    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
+    engines: {node: '>=8'}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  emoji-regex@10.3.0:
+    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  end-of-stream@1.4.4:
+    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
+
+  enquirer@2.4.1:
+    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
+    engines: {node: '>=8.6'}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  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==}
+
+  es-define-property@1.0.0:
+    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-module-lexer@1.6.0:
+    resolution: {integrity: sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  esbuild-plugin-polyfill-node@0.3.0:
+    resolution: {integrity: sha512-SHG6CKUfWfYyYXGpW143NEZtcVVn8S/WHcEOxk62LuDXnY4Zpmc+WmxJKN6GMTgTClXJXhEM5KQlxKY6YjbucQ==}
+    peerDependencies:
+      esbuild: '*'
+
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  esbuild@0.25.8:
+    resolution: {integrity: sha512-vVC0USHGtMi8+R4Kz8rt6JhEWLxsv9Rnu/lGYbPR8u47B+DCBksq9JarW0zOO7bs37hyOK1l2/oqtbciutL5+Q==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.1.2:
+    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
+  eslint-import-context@0.1.4:
+    resolution: {integrity: sha512-x3+etvB5TPxjFIq2m4tTnpt/9Ekp5GZKzXNp5ExLaS7Qv9E5BVs/Td7jxSnRtSzrgTCExXZlc0MuOdSuDLURiQ==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      unrs-resolver: ^1.0.0
+    peerDependenciesMeta:
+      unrs-resolver:
+        optional: true
+
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+
+  eslint-plugin-import-x@4.13.1:
+    resolution: {integrity: sha512-Ua4HZBmG5TNr18q3Is+nT6mKCzNNpycqtv/+TkIK7E3w4LBlPlZI6vLwmDjXdIZtJPP2Z1Oh5+wksWwlcCjMpA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+
+  eslint-scope@8.3.0:
+    resolution: {integrity: sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  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}
+
+  eslint-visitor-keys@4.2.0:
+    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.27.0:
+    resolution: {integrity: sha512-ixRawFQuMB9DZ7fjU3iGGganFDp3+45bPOdaRurcFHSXO1e/sYwUX/FtQZpLZJR6SjMoJH8hR2pPEAfDyCoU2Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.3.0:
+    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  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'}
+
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  expect-type@1.2.1:
+    resolution: {integrity: sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw==}
+    engines: {node: '>=12.0.0'}
+
+  extract-zip@2.0.1:
+    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
+    engines: {node: '>= 10.17.0'}
+    hasBin: true
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  fd-slicer@1.1.0:
+    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
+
+  fdir@6.4.4:
+    resolution: {integrity: sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  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==}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  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'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.3.1:
+    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
+
+  foreground-child@3.3.0:
+    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
+    engines: {node: '>=14'}
+
+  fs-extra@11.2.0:
+    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
+    engines: {node: '>=14.14'}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  generic-names@4.0.0:
+    resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.2.0:
+    resolution: {integrity: sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.2.4:
+    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@5.2.0:
+    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
+    engines: {node: '>=8'}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-tsconfig@4.10.0:
+    resolution: {integrity: sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==}
+
+  get-tsconfig@4.10.1:
+    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
+
+  get-uri@6.0.3:
+    resolution: {integrity: sha512-BzUrJBS9EcUb4cFol8r4W3v1cPsSyajLSthNkz5BxbpDcHN5tIrM10E2eNvfnvBn3DaT3DUgx0OpsBKkaOpanw==}
+    engines: {node: '>= 14'}
+
+  git-raw-commits@5.0.0:
+    resolution: {integrity: sha512-I2ZXrXeOc0KrCvC7swqtIFXFN+rbjnC7b2T943tvemIOVNl+XP8YnA9UVwqFhzzLClnSA60KR/qEjLpXzs73Qg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  git-semver-tags@8.0.0:
+    resolution: {integrity: sha512-N7YRIklvPH3wYWAR2vysaqGLPRcpwQ0GKdlqTiVN5w1UmCdaeY3K8s6DMKRCh54DDdzyt/OAB6C8jgVtb7Y2Fg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
+  glob@11.0.0:
+    resolution: {integrity: sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  gopd@1.0.1:
+    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.0.3:
+    resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.0.3:
+    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hash-sum@2.0.0:
+    resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  hosted-git-info@7.0.2:
+    resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  icss-utils@5.1.0:
+    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.4:
+    resolution: {integrity: sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==}
+    engines: {node: '>= 4'}
+
+  immediate@3.0.6:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+
+  immutable@5.0.2:
+    resolution: {integrity: sha512-1NU7hWZDkV7hJ4PJ9dur9gTNQ4ePNPN4k9/0YhwjzykTi/+3Q5pF93YU5QoVj8BuOnhLgaY8gs0U2pj4kSYVcw==}
+
+  import-fresh@3.3.0:
+    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+    engines: {node: '>=6'}
+
+  import-meta-resolve@3.1.1:
+    resolution: {integrity: sha512-qeywsE/KC3w9Fd2ORrRDUw6nS/nLwZpXgfrOc2IILvZYnCaEMd+D56Vfg9k4G29gIeVi3XKql1RQatME8iYsiw==}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  index-to-position@0.1.2:
+    resolution: {integrity: sha512-MWDKS3AS1bGCHLBA2VLImJz42f7bJh8wQsTGCzI3j519/CASStoDONUBVz2I/VID0MpiX3SGSnbOD2xUalbE5g==}
+    engines: {node: '>=18'}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  ip-address@9.0.5:
+    resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
+    engines: {node: '>= 12'}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-core-module@2.15.0:
+    resolution: {integrity: sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==}
+    engines: {node: '>= 0.4'}
+
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  is-expression@4.0.0:
+    resolution: {integrity: sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-fullwidth-code-point@4.0.0:
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
+
+  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'}
+
+  is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-obj@2.0.0:
+    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
+    engines: {node: '>=8'}
+
+  is-port-reachable@4.0.0:
+    resolution: {integrity: sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  is-promise@2.2.2:
+    resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
+
+  is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+
+  is-regex@1.1.4:
+    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
+    engines: {node: '>= 0.4'}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  isexe@3.1.1:
+    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
+    engines: {node: '>=16'}
+
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-source-maps@5.0.6:
+    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.1.7:
+    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
+    engines: {node: '>=8'}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  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==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  jsbn@1.1.0:
+    resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
+
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-parse-even-better-errors@4.0.0:
+    resolution: {integrity: sha512-lR4MXjGNgkJc7tkQ97kb2nuEMnNCyU//XYVH0MKTGcXEiSudQ5MKGKen3C5QubYy0vmq+JGitUg92uuywGEwIA==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+
+  jstransformer@1.0.0:
+    resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==}
+
+  jszip@3.10.1:
+    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lie@3.3.0:
+    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  lint-staged@16.0.0:
+    resolution: {integrity: sha512-sUCprePs6/rbx4vKC60Hez6X10HPkpDJaGcy3D1NdwR7g1RcNkWL8q9mJMreOqmHBTs+1sNFp+wOiX9fr+hoOQ==}
+    engines: {node: '>=20.18'}
+    hasBin: true
+
+  listr2@8.3.3:
+    resolution: {integrity: sha512-LWzX2KsqcB1wqQ4AHgYb4RsDXauQiqhjLk+6hjbaeHG4zpjjVAB6wC/gz6X0l+Du1cN3pUB5ZlrvTbhGSNnUQQ==}
+    engines: {node: '>=18.0.0'}
+
+  loader-utils@3.3.1:
+    resolution: {integrity: sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==}
+    engines: {node: '>= 12.13.0'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+
+  loupe@3.1.3:
+    resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
+
+  lru-cache@10.1.0:
+    resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==}
+    engines: {node: 14 || >=16.14}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@11.0.0:
+    resolution: {integrity: sha512-Qv32eSV1RSCfhY3fpPE2GNZ8jgM9X7rdAfemLWqTUxwiyIC4jJ6Sy0fZ8H+oLWevO6i4/bizg7c8d8i6bxrzbA==}
+    engines: {node: 20 || >=22}
+
+  lru-cache@11.0.2:
+    resolution: {integrity: sha512-123qHRfJBmo2jXDbo/a5YOQrJoHF/GNQTLzQ5+IdK5pWpceK17yRc6ozlWd25FxvGKQbIUs91fDFkXmDHTKcyA==}
+    engines: {node: 20 || >=22}
+
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
+  magicast@0.3.5:
+    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
+  marked@13.0.3:
+    resolution: {integrity: sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
+  memorystream@0.3.1:
+    resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
+    engines: {node: '>= 0.10.0'}
+
+  meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
+
+  merge-source-map@1.1.0:
+    resolution: {integrity: sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.33.0:
+    resolution: {integrity: sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  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'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  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@10.0.3:
+    resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
+    engines: {node: 20 || >=22}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  monaco-editor@0.52.2:
+    resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
+
+  ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nano-spawn@1.0.2:
+    resolution: {integrity: sha512-21t+ozMQDAL/UGgQVBbZ/xXvNO10++ZPuTmKRO8k9V3AClVRht49ahtDjfY8l1q6nSHOrE5ASfthzH3ol6R/hg==}
+    engines: {node: '>=20.17'}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  napi-postinstall@0.2.3:
+    resolution: {integrity: sha512-Mi7JISo/4Ij2tDZ2xBE2WH+/KvVlkhA6juEjpEeRAVPNCpN3nxJo/5FhDNKgBcdmcmhaH6JjgST4xY/23ZYK0w==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  netmask@2.0.2:
+    resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
+    engines: {node: '>= 0.4.0'}
+
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
+  normalize-package-data@6.0.2:
+    resolution: {integrity: sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+
+  npm-normalize-package-bin@4.0.0:
+    resolution: {integrity: sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
+  npm-run-all2@7.0.2:
+    resolution: {integrity: sha512-7tXR+r9hzRNOPNTvXegM+QzCuMjzUIIq66VDunL6j60O4RrExx32XUhlrS7UK4VcdGw5/Wxzb3kfNcFix9JKDA==}
+    engines: {node: ^18.17.0 || >=20.5.0, npm: '>= 9'}
+    hasBin: true
+
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  nwsapi@2.2.16:
+    resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  on-headers@1.0.2:
+    resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  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'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  pac-proxy-agent@7.1.0:
+    resolution: {integrity: sha512-Z5FnLVVZSnX7WjBg0mhDtydeRZ1xMcATZThjySQUHqr+0ksP8kqaw23fNKkaaN/Z8gwLUs/W7xdl0I75eP2Xyw==}
+    engines: {node: '>= 14'}
+
+  pac-resolver@7.0.1:
+    resolution: {integrity: sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==}
+    engines: {node: '>= 14'}
+
+  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==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse-json@8.1.0:
+    resolution: {integrity: sha512-rum1bPifK5SSar35Z6EKZuYPJx85pkNaFrxBK3mwdfSJ1/WKbYrjoW/zTPSjRRamfmVX1ACBIdFAO0VRErW/EA==}
+    engines: {node: '>=18'}
+
+  parse5@7.2.1:
+    resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-is-inside@1.0.2:
+    resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  path-scurry@2.0.0:
+    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
+    engines: {node: 20 || >=22}
+
+  path-to-regexp@3.3.0:
+    resolution: {integrity: sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pathval@2.0.0:
+    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
+    engines: {node: '>= 14.16'}
+
+  pend@1.2.0:
+    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+    engines: {node: '>=12'}
+
+  pidtree@0.6.0:
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
+  postcss-modules-extract-imports@3.1.0:
+    resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+
+  postcss-modules-local-by-default@4.0.5:
+    resolution: {integrity: sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+
+  postcss-modules-scope@3.2.0:
+    resolution: {integrity: sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+
+  postcss-modules-values@4.0.0:
+    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+
+  postcss-modules@6.0.1:
+    resolution: {integrity: sha512-zyo2sAkVvuZFFy0gc2+4O+xar5dYlaVy/ebO24KT0ftk/iJevSNyPyQellsBLlnccwh7f6V6Y4GvuKRYToNgpQ==}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier@3.5.3:
+    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  pretty-bytes@6.1.1:
+    resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
+  progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+
+  promise@7.3.1:
+    resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
+
+  proxy-agent@6.5.0:
+    resolution: {integrity: sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==}
+    engines: {node: '>= 14'}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  pug-attrs@3.0.0:
+    resolution: {integrity: sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==}
+
+  pug-code-gen@3.0.3:
+    resolution: {integrity: sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==}
+
+  pug-error@2.1.0:
+    resolution: {integrity: sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==}
+
+  pug-filters@4.0.0:
+    resolution: {integrity: sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==}
+
+  pug-lexer@5.0.1:
+    resolution: {integrity: sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==}
+
+  pug-linker@4.0.0:
+    resolution: {integrity: sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==}
+
+  pug-load@3.0.0:
+    resolution: {integrity: sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==}
+
+  pug-parser@6.0.0:
+    resolution: {integrity: sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==}
+
+  pug-runtime@3.0.1:
+    resolution: {integrity: sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==}
+
+  pug-strip-comments@2.0.0:
+    resolution: {integrity: sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==}
+
+  pug-walk@2.0.0:
+    resolution: {integrity: sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==}
+
+  pug@3.0.3:
+    resolution: {integrity: sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==}
+
+  pump@3.0.0:
+    resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  puppeteer-core@24.9.0:
+    resolution: {integrity: sha512-HFdCeH/wx6QPz8EncafbCqJBqaCG1ENW75xg3cLFMRUoqZDgByT6HSueiumetT2uClZxwqj0qS4qMVZwLHRHHw==}
+    engines: {node: '>=18'}
+
+  puppeteer@24.9.0:
+    resolution: {integrity: sha512-L0pOtALIx8rgDt24Y+COm8X52v78gNtBOW6EmUcEPci0TYD72SAuaXKqasRIx4JXxmg2Tkw5ySKcpPOwN8xXnQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  queue-tick@1.0.1:
+    resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}
+
+  range-parser@1.2.0:
+    resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
+    engines: {node: '>= 0.6'}
+
+  rc@1.2.8:
+    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
+    hasBin: true
+
+  read-package-json-fast@4.0.0:
+    resolution: {integrity: sha512-qpt8EwugBWDw2cgE2W+/3oxC+KTez2uSVR8JU9Q36TXPAGCaozfQUs59v4j4GFpWTaw0i6hAZSvOmu1J0uOEUg==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
+  read-package-up@11.0.0:
+    resolution: {integrity: sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==}
+    engines: {node: '>=18'}
+
+  read-pkg@9.0.1:
+    resolution: {integrity: sha512-9viLL4/n1BJUCT1NXVTdS1jtm80yDEgR5T4yCelII49Mbj0v1rZdKqj7zCiYdbB0CuCgdrvHcNogAKTFPBocFA==}
+    engines: {node: '>=18'}
+
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
+  readdirp@4.0.1:
+    resolution: {integrity: sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==}
+    engines: {node: '>= 14.16.0'}
+
+  registry-auth-token@3.3.2:
+    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
+
+  registry-url@3.1.0:
+    resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==}
+    engines: {node: '>=0.10.0'}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rimraf@6.0.1:
+    resolution: {integrity: sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
+  rollup-plugin-dts@6.2.1:
+    resolution: {integrity: sha512-sR3CxYUl7i2CHa0O7bA45mCrgADyAQ0tVtGSqi3yvH28M+eg1+g5d7kQ9hLvEz5dorK3XVsH5L2jwHLQf72DzA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      rollup: ^3.29.4 || ^4
+      typescript: ^4.5 || ^5.0
+
+  rollup-plugin-esbuild@6.2.1:
+    resolution: {integrity: sha512-jTNOMGoMRhs0JuueJrJqbW8tOwxumaWYq+V5i+PD+8ecSCVkuX27tGW7BXqDgoULQ55rO7IdNxPcnsWtshz3AA==}
+    engines: {node: '>=14.18.0'}
+    peerDependencies:
+      esbuild: '>=0.18.0'
+      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
+
+  rollup-plugin-polyfill-node@0.13.0:
+    resolution: {integrity: sha512-FYEvpCaD5jGtyBuBFcQImEGmTxDTPbiHjJdrYIp+mFIwgXiXabxvKUK7ZT9P31ozu2Tqm9llYQMRWsfvTMTAOw==}
+    peerDependencies:
+      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
+
+  rollup@4.45.1:
+    resolution: {integrity: sha512-4iya7Jb76fVpQyLoiVpzUrsjQ12r3dM7fIVz+4NwoYvZOShknRmiv+iu9CClZml5ZLGb0XMcYLutK6w9tgxHDw==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sass@1.89.2:
+    resolution: {integrity: sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  serve-handler@6.1.6:
+    resolution: {integrity: sha512-x5RL9Y2p5+Sh3D38Fh9i/iQ5ZK+e4xuXRd/pGbM4D13tgo/MGwbttUk8emytcr1YYzBYs+apnUngBDFYfpjPuQ==}
+
+  serve@14.2.4:
+    resolution: {integrity: sha512-qy1S34PJ/fcY8gjVGszDB3EXiPSk5FKhUa7tQe0UPRddxRidc2V6cNHPNewbE1D7MAkgLuWEt3Vw56vYy73tzQ==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  setimmediate@1.0.5:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  shell-quote@1.8.1:
+    resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-git-hooks@2.13.0:
+    resolution: {integrity: sha512-N+goiLxlkHJlyaYEglFypzVNMaNplPAk5syu0+OPp/Bk6dwVoXF6FfOw2vO0Dp+JHsBaI+w6cm8TnFl2Hw6tDA==}
+    hasBin: true
+
+  slice-ansi@5.0.0:
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
+
+  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'}
+
+  socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
+    engines: {node: '>= 14'}
+
+  socks@2.8.3:
+    resolution: {integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  spdx-correct@3.2.0:
+    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+
+  spdx-expression-parse@3.0.1:
+    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+
+  spdx-license-ids@3.0.18:
+    resolution: {integrity: sha512-xxRs31BqRYHwiMzudOrpSiHtZ8i/GeionCBDSilhYRj+9gIcI8wCZTlXZKu9vZIVqViP3dcp9qE5G6AlIaD+TQ==}
+
+  sprintf-js@1.1.3:
+    resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
+
+  stable-hash@0.0.5:
+    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@3.9.0:
+    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
+
+  streamx@2.18.0:
+    resolution: {integrity: sha512-LLUC1TWdjVdn1weXGcSxyTR3T4+acB6tVGXT95y0nGbca4t4o/ng1wKAGTljm9VicuCVLvRlqFYXYy5GwgM7sQ==}
+
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
+  string-hash@1.1.3:
+    resolution: {integrity: sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
+  tar-fs@3.0.8:
+    resolution: {integrity: sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==}
+
+  tar-stream@3.1.7:
+    resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
+
+  temp-dir@3.0.0:
+    resolution: {integrity: sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==}
+    engines: {node: '>=14.16'}
+
+  tempfile@5.0.0:
+    resolution: {integrity: sha512-bX655WZI/F7EoTDw9JvQURqAXiPHi8o8+yFxPF2lWYyz1aHnmMRuXWqL6YB6GmeO0o4DIYWHLgGNi/X64T+X4Q==}
+    engines: {node: '>=14.18'}
+
+  test-exclude@7.0.1:
+    resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
+    engines: {node: '>=18'}
+
+  text-decoder@1.1.1:
+    resolution: {integrity: sha512-8zll7REEv4GDD3x4/0pW+ppIxSNs7H1J10IKFZsuOMscumCdM2a+toDGLPA3T+1+fLBql4zbt5z83GEQGGV5VA==}
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinyglobby@0.2.13:
+    resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@1.0.2:
+    resolution: {integrity: sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@3.0.2:
+    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
+    engines: {node: '>=14.0.0'}
+
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  todomvc-app-css@2.4.3:
+    resolution: {integrity: sha512-mSnWZaKBWj9aQcFRsGguY/a8O8NR8GmecD48yU1rzwNemgZa/INLpIsxxMiToFGVth+uEKBrQ7IhWkaXZxwq5Q==}
+    engines: {node: '>=4'}
+
+  token-stream@1.0.0:
+    resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
+
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+
+  type-fest@4.24.0:
+    resolution: {integrity: sha512-spAaHzc6qre0TlZQQ2aA/nGMe+2Z/wyGk5Z+Ru2VUfdNwT6kWO6TjevOlpebsATEG1EIQ2sOiDszud3lO5mt/Q==}
+    engines: {node: '>=16'}
+
+  typed-query-selector@2.12.0:
+    resolution: {integrity: sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==}
+
+  typescript-eslint@8.32.1:
+    resolution: {integrity: sha512-D7el+eaDHAmXvrZBy1zpzSNIRqnCOrkwTgZxTu3MUqRWk8k0q9m9Ho4+vPf7iHtgUfrK/o8IZaEApsxPlHTFCg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  typescript@5.6.3:
+    resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uglify-js@3.19.1:
+    resolution: {integrity: sha512-y/2wiW+ceTYR2TSSptAhfnEtpLaQ4Ups5zrjB2d3kuVxHj16j/QJwPl5PvuGy9uARb39J0+iKxcRPvtpsx4A4A==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unplugin-utils@0.2.4:
+    resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
+    engines: {node: '>=18.12.0'}
+
+  unrs-resolver@1.7.2:
+    resolution: {integrity: sha512-BBKpaylOW8KbHsu378Zky/dGh4ckT/4NW/0SHRABdqRLcQJ2dAOjDo9g97p04sWflm0kqPqpUatxReNV/dqI5A==}
+
+  update-check@1.5.4:
+    resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  validate-npm-package-license@3.0.4:
+    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  vite-node@3.1.4:
+    resolution: {integrity: sha512-6enNwYnpyDo4hEgytbmc6mYWHXDHYEn0D1/rw4Q+tnHUGtKTJsn8T1YkX6Q18wI5LCrS8CTYlBaiCqxOy2kvUA==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+
+  vite@5.4.15:
+    resolution: {integrity: sha512-6ANcZRivqL/4WtwPGTKNaosuNJr5tWiftOC7liM7G9+rMb8+oeJeyzymDu4rTN93seySBmbjSfsS3Vzr19KNtA==}
+    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
+
+  vite@5.4.19:
+    resolution: {integrity: sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==}
+    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@3.1.4:
+    resolution: {integrity: sha512-Ta56rT7uWxCSJXlBtKgIlApJnT6e6IGmTYxYcmxjJ4ujuZDI59GUQgVDObXXJujOmPDBYXHK1qmaGtneu6TNIQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.1.4
+      '@vitest/ui': 3.1.4
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  void-elements@3.1.0:
+    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
+    engines: {node: '>=0.10.0'}
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  which@5.0.0:
+    resolution: {integrity: sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    hasBin: true
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  widest-line@4.0.1:
+    resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
+    engines: {node: '>=12'}
+
+  with@7.0.2:
+    resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}
+    engines: {node: '>= 10.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==}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  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==}
+
+  ws@8.18.1:
+    resolution: {integrity: sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  ws@8.18.2:
+    resolution: {integrity: sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yaml@2.8.0:
+    resolution: {integrity: sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  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.24.1:
+    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
+
+snapshots:
+
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@asamuzakjp/css-color@2.8.2':
+    dependencies:
+      '@csstools/css-calc': 2.1.1(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-color-parser': 3.0.7(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+      lru-cache: 11.0.2
+
+  '@babel/code-frame@7.26.2':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.27.1': {}
+
+  '@babel/parser@7.28.0':
+    dependencies:
+      '@babel/types': 7.28.1
+
+  '@babel/types@7.28.1':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
+  '@bcoe/v8-coverage@1.0.2': {}
+
+  '@conventional-changelog/git-client@1.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0)':
+    dependencies:
+      '@types/semver': 7.7.0
+      semver: 7.7.2
+    optionalDependencies:
+      conventional-commits-filter: 5.0.0
+      conventional-commits-parser: 6.0.0
+
+  '@csstools/color-helpers@5.0.1': {}
+
+  '@csstools/css-calc@2.1.1(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+
+  '@csstools/css-color-parser@3.0.7(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
+    dependencies:
+      '@csstools/color-helpers': 5.0.1
+      '@csstools/css-calc': 2.1.1(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+
+  '@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.3
+
+  '@csstools/css-tokenizer@3.0.3': {}
+
+  '@emnapi/core@1.4.3':
+    dependencies:
+      '@emnapi/wasi-threads': 1.0.2
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.4.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.0.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.25.8':
+    optional: true
+
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.8':
+    optional: true
+
+  '@esbuild/android-arm@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm@0.25.8':
+    optional: true
+
+  '@esbuild/android-x64@0.21.5':
+    optional: true
+
+  '@esbuild/android-x64@0.25.8':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.8':
+    optional: true
+
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.8':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.8':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.8':
+    optional: true
+
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.8':
+    optional: true
+
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.8':
+    optional: true
+
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.8':
+    optional: true
+
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.8':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.8':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.8':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.8':
+    optional: true
+
+  '@esbuild/linux-s390x@0.21.5':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.8':
+    optional: true
+
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.8':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.8':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.8':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.8':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.8':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.8':
+    optional: true
+
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.8':
+    optional: true
+
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.8':
+    optional: true
+
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.8':
+    optional: true
+
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.8':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.6.1(eslint@9.27.0)':
+    dependencies:
+      eslint: 9.27.0
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/eslint-utils@4.7.0(eslint@9.27.0)':
+    dependencies:
+      eslint: 9.27.0
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/config-array@0.20.0':
+    dependencies:
+      '@eslint/object-schema': 2.1.6
+      debug: 4.4.0
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.2.1': {}
+
+  '@eslint/core@0.14.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.1':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.0
+      espree: 10.3.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      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.27.0': {}
+
+  '@eslint/object-schema@2.1.6': {}
+
+  '@eslint/plugin-kit@0.3.1':
+    dependencies:
+      '@eslint/core': 0.14.0
+      levn: 0.4.1
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@humanwhocodes/retry@0.4.2': {}
+
+  '@hutson/parse-repository-url@5.0.0': {}
+
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.0':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+
+  '@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': {}
+
+  '@napi-rs/wasm-runtime@0.2.9':
+    dependencies:
+      '@emnapi/core': 1.4.3
+      '@emnapi/runtime': 1.4.3
+      '@tybys/wasm-util': 0.9.0
+    optional: true
+
+  '@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.19.1
+
+  '@parcel/watcher-android-arm64@2.4.1':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.4.1':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.4.1':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.4.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.4.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.4.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.4.1':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.4.1':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.4.1':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.4.1':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.4.1':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.4.1':
+    optional: true
+
+  '@parcel/watcher@2.4.1':
+    dependencies:
+      detect-libc: 1.0.3
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      node-addon-api: 7.1.1
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.4.1
+      '@parcel/watcher-darwin-arm64': 2.4.1
+      '@parcel/watcher-darwin-x64': 2.4.1
+      '@parcel/watcher-freebsd-x64': 2.4.1
+      '@parcel/watcher-linux-arm-glibc': 2.4.1
+      '@parcel/watcher-linux-arm64-glibc': 2.4.1
+      '@parcel/watcher-linux-arm64-musl': 2.4.1
+      '@parcel/watcher-linux-x64-glibc': 2.4.1
+      '@parcel/watcher-linux-x64-musl': 2.4.1
+      '@parcel/watcher-win32-arm64': 2.4.1
+      '@parcel/watcher-win32-ia32': 2.4.1
+      '@parcel/watcher-win32-x64': 2.4.1
+    optional: true
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@puppeteer/browsers@2.10.5':
+    dependencies:
+      debug: 4.4.1
+      extract-zip: 2.0.1
+      progress: 2.0.3
+      proxy-agent: 6.5.0
+      semver: 7.7.2
+      tar-fs: 3.0.8
+      yargs: 17.7.2
+    transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /@typescript-eslint/typescript-estree@6.18.1(typescript@5.2.2):
-    resolution: {integrity: sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  '@rollup/plugin-alias@5.1.1(rollup@4.45.1)':
+    optionalDependencies:
+      rollup: 4.45.1
+
+  '@rollup/plugin-commonjs@28.0.6(rollup@4.45.1)':
     dependencies:
-      '@typescript-eslint/types': 6.18.1
-      '@typescript-eslint/visitor-keys': 6.18.1
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 9.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
+      '@rollup/pluginutils': 5.1.0(rollup@4.45.1)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      fdir: 6.4.4(picomatch@4.0.2)
+      is-reference: 1.2.1
+      magic-string: 0.30.17
+      picomatch: 4.0.2
+    optionalDependencies:
+      rollup: 4.45.1
+
+  '@rollup/plugin-inject@5.0.5(rollup@4.45.1)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.45.1)
+      estree-walker: 2.0.2
+      magic-string: 0.30.17
+    optionalDependencies:
+      rollup: 4.45.1
+
+  '@rollup/plugin-json@6.1.0(rollup@4.45.1)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.45.1)
+    optionalDependencies:
+      rollup: 4.45.1
+
+  '@rollup/plugin-node-resolve@16.0.1(rollup@4.45.1)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.45.1)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-module: 1.0.0
+      resolve: 1.22.8
+    optionalDependencies:
+      rollup: 4.45.1
+
+  '@rollup/plugin-replace@5.0.4(rollup@4.45.1)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.45.1)
+      magic-string: 0.30.17
+    optionalDependencies:
+      rollup: 4.45.1
+
+  '@rollup/pluginutils@5.1.0(rollup@4.45.1)':
+    dependencies:
+      '@types/estree': 1.0.7
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 4.45.1
+
+  '@rollup/rollup-android-arm-eabi@4.45.1':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.45.1':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.45.1':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.45.1':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.45.1':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.45.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.45.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.45.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.45.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.45.1':
+    optional: true
+
+  '@rollup/rollup-linux-loongarch64-gnu@4.45.1':
+    optional: true
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.45.1':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.45.1':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.45.1':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.45.1':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.45.1':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.45.1':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.45.1':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.45.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.45.1':
+    optional: true
+
+  '@swc/core-darwin-arm64@1.13.1':
+    optional: true
+
+  '@swc/core-darwin-x64@1.13.1':
+    optional: true
+
+  '@swc/core-linux-arm-gnueabihf@1.13.1':
+    optional: true
+
+  '@swc/core-linux-arm64-gnu@1.13.1':
+    optional: true
+
+  '@swc/core-linux-arm64-musl@1.13.1':
+    optional: true
+
+  '@swc/core-linux-x64-gnu@1.13.1':
+    optional: true
+
+  '@swc/core-linux-x64-musl@1.13.1':
+    optional: true
+
+  '@swc/core-win32-arm64-msvc@1.13.1':
+    optional: true
+
+  '@swc/core-win32-ia32-msvc@1.13.1':
+    optional: true
+
+  '@swc/core-win32-x64-msvc@1.13.1':
+    optional: true
+
+  '@swc/core@1.13.1':
+    dependencies:
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.23
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.13.1
+      '@swc/core-darwin-x64': 1.13.1
+      '@swc/core-linux-arm-gnueabihf': 1.13.1
+      '@swc/core-linux-arm64-gnu': 1.13.1
+      '@swc/core-linux-arm64-musl': 1.13.1
+      '@swc/core-linux-x64-gnu': 1.13.1
+      '@swc/core-linux-x64-musl': 1.13.1
+      '@swc/core-win32-arm64-msvc': 1.13.1
+      '@swc/core-win32-ia32-msvc': 1.13.1
+      '@swc/core-win32-x64-msvc': 1.13.1
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/types@0.1.23':
+    dependencies:
+      '@swc/counter': 0.1.3
+
+  '@tootallnate/quickjs-emscripten@0.23.0': {}
+
+  '@tybys/wasm-util@0.9.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/estree@1.0.7': {}
+
+  '@types/estree@1.0.8': {}
+
+  '@types/hash-sum@1.0.2': {}
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/node@22.16.5':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/normalize-package-data@2.4.4': {}
+
+  '@types/resolve@1.20.2': {}
+
+  '@types/semver@7.7.0': {}
+
+  '@types/serve-handler@6.1.4':
+    dependencies:
+      '@types/node': 22.16.5
+
+  '@types/trusted-types@2.0.7': {}
+
+  '@types/yauzl@2.10.3':
+    dependencies:
+      '@types/node': 22.16.5
+    optional: true
+
+  '@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.27.0)(typescript@5.6.3))(eslint@9.27.0)(typescript@5.6.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.32.1(eslint@9.27.0)(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 8.32.1
+      '@typescript-eslint/type-utils': 8.32.1(eslint@9.27.0)(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0)(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.32.1
+      eslint: 9.27.0
+      graphemer: 1.4.0
+      ignore: 7.0.4
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.6.3)
+      typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /@typescript-eslint/utils@5.62.0(eslint@8.56.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
-      '@types/json-schema': 7.0.14
-      '@types/semver': 7.5.6
-      '@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.56.0
-      eslint-scope: 5.1.1
-      semver: 7.5.4
+  '@typescript-eslint/parser@8.32.1(eslint@9.27.0)(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.32.1
+      '@typescript-eslint/types': 8.32.1
+      '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.32.1
+      debug: 4.4.1
+      eslint: 9.27.0
+      typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
-      - typescript
-    dev: true
 
-  /@typescript-eslint/utils@6.18.1(eslint@8.56.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
-      '@types/json-schema': 7.0.14
-      '@types/semver': 7.5.6
-      '@typescript-eslint/scope-manager': 6.18.1
-      '@typescript-eslint/types': 6.18.1
-      '@typescript-eslint/typescript-estree': 6.18.1(typescript@5.2.2)
-      eslint: 8.56.0
-      semver: 7.5.4
+  '@typescript-eslint/scope-manager@8.32.1':
+    dependencies:
+      '@typescript-eslint/types': 8.32.1
+      '@typescript-eslint/visitor-keys': 8.32.1
+
+  '@typescript-eslint/type-utils@8.32.1(eslint@9.27.0)(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0)(typescript@5.6.3)
+      debug: 4.4.1
+      eslint: 9.27.0
+      ts-api-utils: 2.1.0(typescript@5.6.3)
+      typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
-      - typescript
-    dev: 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}
+  '@typescript-eslint/types@8.32.1': {}
+
+  '@typescript-eslint/typescript-estree@8.32.1(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/types': 5.62.0
-      eslint-visitor-keys: 3.4.3
-    dev: true
+      '@typescript-eslint/types': 8.32.1
+      '@typescript-eslint/visitor-keys': 8.32.1
+      debug: 4.4.1
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.2
+      ts-api-utils: 2.1.0(typescript@5.6.3)
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
 
-  /@typescript-eslint/visitor-keys@6.18.1:
-    resolution: {integrity: sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/utils@8.32.1(eslint@9.27.0)(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/types': 6.18.1
-      eslint-visitor-keys: 3.4.3
-    dev: true
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0)
+      '@typescript-eslint/scope-manager': 8.32.1
+      '@typescript-eslint/types': 8.32.1
+      '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.6.3)
+      eslint: 9.27.0
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
 
-  /@ungap/structured-clone@1.2.0:
-    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
-    dev: true
+  '@typescript-eslint/visitor-keys@8.32.1':
+    dependencies:
+      '@typescript-eslint/types': 8.32.1
+      eslint-visitor-keys: 4.2.0
 
-  /@vitejs/plugin-vue@5.0.3(vite@5.0.12)(vue@packages+vue):
-    resolution: {integrity: sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    peerDependencies:
-      vite: ^5.0.0
-      vue: ^3.2.25
+  '@unrs/resolver-binding-darwin-arm64@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.7.2':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.9
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.7.2':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.7.2':
+    optional: true
+
+  '@vitejs/plugin-vue@5.2.4(vite@5.4.15(@types/node@22.16.5)(sass@1.89.2))(vue@packages+vue)':
     dependencies:
-      vite: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
+      vite: 5.4.15(@types/node@22.16.5)(sass@1.89.2)
       vue: link:packages/vue
-    dev: true
 
-  /@vitest/coverage-istanbul@1.2.2(vitest@1.2.2):
-    resolution: {integrity: sha512-tJybwO8JT4H9ANz0T0/tJ1M5g3BkuHKYF1w5YO3z9sAiHBdGANrxN9c5lomJx1WSnLzCxQR5xxlJ4TLKbzrR3w==}
-    peerDependencies:
-      vitest: ^1.0.0
+  '@vitest/coverage-v8@3.1.4(vitest@3.1.4(@types/node@22.16.5)(jsdom@26.1.0)(sass@1.89.2))':
     dependencies:
-      debug: 4.3.4
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 1.0.2
+      debug: 4.4.0
       istanbul-lib-coverage: 3.2.2
-      istanbul-lib-instrument: 6.0.1
       istanbul-lib-report: 3.0.1
-      istanbul-lib-source-maps: 4.0.1
-      istanbul-reports: 3.1.6
-      magicast: 0.3.3
-      picocolors: 1.0.0
-      test-exclude: 6.0.0
-      vitest: 1.2.2(@types/node@20.11.16)(jsdom@23.2.0)(terser@5.27.0)
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.1.7
+      magic-string: 0.30.17
+      magicast: 0.3.5
+      std-env: 3.9.0
+      test-exclude: 7.0.1
+      tinyrainbow: 2.0.0
+      vitest: 3.1.4(@types/node@22.16.5)(jsdom@26.1.0)(sass@1.89.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/eslint-plugin@1.2.1(eslint@9.27.0)(typescript@5.6.3)(vitest@3.1.4(@types/node@22.16.5)(jsdom@26.1.0)(sass@1.89.2))':
+    dependencies:
+      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0)(typescript@5.6.3)
+      eslint: 9.27.0
+    optionalDependencies:
+      typescript: 5.6.3
+      vitest: 3.1.4(@types/node@22.16.5)(jsdom@26.1.0)(sass@1.89.2)
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /@vitest/expect@1.2.2:
-    resolution: {integrity: sha512-3jpcdPAD7LwHUUiT2pZTj2U82I2Tcgg2oVPvKxhn6mDI2On6tfvPQTjAI4628GUGDZrCm4Zna9iQHm5cEexOAg==}
+  '@vitest/expect@3.1.4':
     dependencies:
-      '@vitest/spy': 1.2.2
-      '@vitest/utils': 1.2.2
-      chai: 4.3.10
-    dev: true
+      '@vitest/spy': 3.1.4
+      '@vitest/utils': 3.1.4
+      chai: 5.2.0
+      tinyrainbow: 2.0.0
 
-  /@vitest/runner@1.2.2:
-    resolution: {integrity: sha512-JctG7QZ4LSDXr5CsUweFgcpEvrcxOV1Gft7uHrvkQ+fsAVylmWQvnaAr/HDp3LAH1fztGMQZugIheTWjaGzYIg==}
+  '@vitest/mocker@3.1.4(vite@5.4.19(@types/node@22.16.5)(sass@1.89.2))':
     dependencies:
-      '@vitest/utils': 1.2.2
-      p-limit: 5.0.0
-      pathe: 1.1.1
-    dev: true
+      '@vitest/spy': 3.1.4
+      estree-walker: 3.0.3
+      magic-string: 0.30.17
+    optionalDependencies:
+      vite: 5.4.19(@types/node@22.16.5)(sass@1.89.2)
 
-  /@vitest/snapshot@1.2.2:
-    resolution: {integrity: sha512-SmGY4saEw1+bwE1th6S/cZmPxz/Q4JWsl7LvbQIky2tKE35US4gd0Mjzqfr84/4OD0tikGWaWdMja/nWL5NIPA==}
+  '@vitest/pretty-format@3.1.4':
     dependencies:
-      magic-string: 0.30.6
-      pathe: 1.1.1
-      pretty-format: 29.7.0
-    dev: true
+      tinyrainbow: 2.0.0
 
-  /@vitest/spy@1.2.2:
-    resolution: {integrity: sha512-k9Gcahssw8d7X3pSLq3e3XEu/0L78mUkCjivUqCQeXJm9clfXR/Td8+AP+VC1O6fKPIDLcHDTAmBOINVuv6+7g==}
+  '@vitest/runner@3.1.4':
     dependencies:
-      tinyspy: 2.2.0
-    dev: true
+      '@vitest/utils': 3.1.4
+      pathe: 2.0.3
 
-  /@vitest/utils@1.2.2:
-    resolution: {integrity: sha512-WKITBHLsBHlpjnDQahr+XK6RE7MiAsgrIkr0pGhQ9ygoxBfUeG0lUG5iLlzqjmKSlBv3+j5EGsriBzh+C3Tq9g==}
+  '@vitest/snapshot@3.1.4':
     dependencies:
-      diff-sequences: 29.6.3
-      estree-walker: 3.0.3
-      loupe: 2.3.7
-      pretty-format: 29.7.0
-    dev: true
+      '@vitest/pretty-format': 3.1.4
+      magic-string: 0.30.17
+      pathe: 2.0.3
 
-  /@vue/consolidate@0.17.3:
-    resolution: {integrity: sha512-nl0SWcTMzaaTnJ5G6V8VlMDA1CVVrNnaQKF1aBZU3kXtjgU9jtHMsEAsgjoRUx+T0EVJk9TgbmxGhK3pOk22zw==}
-    engines: {node: '>= 0.12.0'}
-    dev: true
+  '@vitest/spy@3.1.4':
+    dependencies:
+      tinyspy: 3.0.2
 
-  /@vue/repl@3.1.1:
-    resolution: {integrity: sha512-9nJImsUeywU2MTqvzf4ueqWC49UC3LVXVPk1HmoNnLVumfWXv+w5ytuSA//fxb/N/O5vCqE0UV63/dYvnCZpwQ==}
-    dev: false
+  '@vitest/utils@3.1.4':
+    dependencies:
+      '@vitest/pretty-format': 3.1.4
+      loupe: 3.1.3
+      tinyrainbow: 2.0.0
 
-  /@zeit/schemas@2.29.0:
-    resolution: {integrity: sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==}
-    dev: true
+  '@vue/consolidate@1.0.0': {}
 
-  /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
+  '@vue/repl@4.6.2': {}
 
-  /accepts@1.3.8:
-    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
-    engines: {node: '>= 0.6'}
+  '@zeit/schemas@2.36.0': {}
+
+  accepts@1.3.8:
     dependencies:
       mime-types: 2.1.35
       negotiator: 0.6.3
-    dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.10.0):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+  acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
-      acorn: 8.10.0
-    dev: true
-
-  /acorn-walk@8.3.2:
-    resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
-    engines: {node: '>=0.4.0'}
-    dev: true
+      acorn: 8.14.0
 
-  /acorn@7.4.1:
-    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: true
+  acorn@7.4.1: {}
 
-  /acorn@8.10.0:
-    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: true
+  acorn@8.14.0: {}
 
-  /add-stream@1.0.0:
-    resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==}
-    dev: true
+  add-stream@1.0.0: {}
 
-  /agent-base@7.1.0:
-    resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
-    engines: {node: '>= 14'}
-    dependencies:
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+  agent-base@7.1.3: {}
 
-  /ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+  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
-    dev: true
 
-  /ajv@8.11.0:
-    resolution: {integrity: sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==}
+  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
-    dev: true
 
-  /ansi-align@3.0.1:
-    resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
+  ansi-align@3.0.1:
     dependencies:
       string-width: 4.2.3
-    dev: true
 
-  /ansi-colors@4.1.3:
-    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
-    engines: {node: '>=6'}
-    dev: true
+  ansi-colors@4.1.3: {}
 
-  /ansi-escapes@6.2.0:
-    resolution: {integrity: sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==}
-    engines: {node: '>=14.16'}
+  ansi-escapes@7.0.0:
     dependencies:
-      type-fest: 3.13.1
-    dev: true
-
-  /ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-    dev: true
+      environment: 1.1.0
 
-  /ansi-regex@6.0.1:
-    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
-    engines: {node: '>=12'}
-    dev: true
+  ansi-regex@5.0.1: {}
 
-  /ansi-styles@3.2.1:
-    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
-    engines: {node: '>=4'}
-    requiresBuild: true
-    dependencies:
-      color-convert: 1.9.3
-    dev: true
+  ansi-regex@6.0.1: {}
 
-  /ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
+  ansi-styles@4.3.0:
     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:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
-    engines: {node: '>=12'}
-    dev: true
+  ansi-styles@6.2.1: {}
 
-  /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-ify@1.0.0: {}
 
-  /array-ify@1.0.0:
-    resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
-    dev: true
+  asap@2.0.6: {}
 
-  /array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-    dev: true
+  assert-never@1.3.0: {}
 
-  /asap@2.0.6:
-    resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
-    dev: true
+  assertion-error@2.0.1: {}
 
-  /assert-never@1.2.1:
-    resolution: {integrity: sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==}
-    dev: true
+  ast-types@0.13.4:
+    dependencies:
+      tslib: 2.8.1
 
-  /assertion-error@1.1.0:
-    resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
-    dev: true
+  b4a@1.6.6: {}
 
-  /ast-types@0.13.4:
-    resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
-    engines: {node: '>=4'}
+  babel-walk@3.0.0-canary-5:
     dependencies:
-      tslib: 2.6.2
-    dev: true
+      '@babel/types': 7.28.1
 
-  /asynckit@0.4.0:
-    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-    dev: true
+  balanced-match@1.0.2: {}
 
-  /b4a@1.6.4:
-    resolution: {integrity: sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==}
-    dev: true
+  bare-events@2.4.2:
+    optional: true
 
-  /babel-walk@3.0.0-canary-5:
-    resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
-    engines: {node: '>= 10.0.0'}
+  bare-fs@4.0.1:
     dependencies:
-      '@babel/types': 7.23.9
-    dev: true
-
-  /balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: true
+      bare-events: 2.4.2
+      bare-path: 3.0.0
+      bare-stream: 2.1.3
+    optional: true
 
-  /base64-js@1.5.1:
-    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
-    dev: true
+  bare-os@3.4.0:
+    optional: true
 
-  /basic-ftp@5.0.3:
-    resolution: {integrity: sha512-QHX8HLlncOLpy54mh+k/sWIFd0ThmRqwe9ZjELybGZK+tZ8rUb9VO0saKJUROTbE+KhzDUT7xziGpGrW8Kmd+g==}
-    engines: {node: '>=10.0.0'}
-    dev: true
+  bare-path@3.0.0:
+    dependencies:
+      bare-os: 3.4.0
+    optional: true
 
-  /bidi-js@1.0.3:
-    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+  bare-stream@2.1.3:
     dependencies:
-      require-from-string: 2.0.2
-    dev: true
+      streamx: 2.18.0
+    optional: true
 
-  /binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
-    engines: {node: '>=8'}
-    dev: true
+  basic-ftp@5.0.5: {}
 
-  /boxen@7.0.0:
-    resolution: {integrity: sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==}
-    engines: {node: '>=14.16'}
+  boxen@7.0.0:
     dependencies:
       ansi-align: 3.0.1
       camelcase: 7.0.1
-      chalk: 5.3.0
+      chalk: 5.4.1
       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:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+  brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
       concat-map: 0.0.1
-    dev: true
 
-  /brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+  brace-expansion@2.0.1:
     dependencies:
       balanced-match: 1.0.2
-    dev: true
-
-  /braces@3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
-    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:
-    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:
-    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+  braces@3.0.3:
     dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
-    dev: true
+      fill-range: 7.1.1
 
-  /builtin-modules@3.3.0:
-    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
-    engines: {node: '>=6'}
-    dev: true
+  buffer-crc32@0.2.13: {}
 
-  /bytes@3.0.0:
-    resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
-    engines: {node: '>= 0.8'}
-    dev: true
+  bytes@3.0.0: {}
 
-  /cac@6.7.14:
-    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
-    engines: {node: '>=8'}
-    dev: true
+  cac@6.7.14: {}
 
-  /call-bind@1.0.5:
-    resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==}
+  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.1
-      set-function-length: 1.1.1
-    dev: true
-
-  /callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-    dev: true
+      get-intrinsic: 1.2.4
+      set-function-length: 1.2.2
 
-  /camelcase@7.0.1:
-    resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
-    engines: {node: '>=14.16'}
-    dev: true
+  callsites@3.1.0: {}
 
-  /caniuse-lite@1.0.30001551:
-    resolution: {integrity: sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg==}
-    dev: true
+  camelcase@7.0.1: {}
 
-  /chai@4.3.10:
-    resolution: {integrity: sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==}
-    engines: {node: '>=4'}
+  chai@5.2.0:
     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
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.1.3
+      pathval: 2.0.0
 
-  /chalk-template@0.4.0:
-    resolution: {integrity: sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==}
-    engines: {node: '>=12'}
+  chalk-template@0.4.0:
     dependencies:
       chalk: 4.1.2
-    dev: true
-
-  /chalk@2.4.2:
-    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
-    engines: {node: '>=4'}
-    requiresBuild: true
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-    dev: true
 
-  /chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
+  chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
-    dev: true
 
-  /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.0.1: {}
 
-  /chalk@5.3.0:
-    resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
-    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
-    dev: true
+  chalk@5.4.1: {}
 
-  /character-parser@2.2.0:
-    resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==}
+  character-parser@2.2.0:
     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: {}
 
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
-    engines: {node: '>= 8.10.0'}
+  chokidar@4.0.1:
     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
+      readdirp: 4.0.1
 
-  /chromium-bidi@0.5.8(devtools-protocol@0.0.1232444):
-    resolution: {integrity: sha512-blqh+1cEQbHBKmok3rVJkBlBxt9beKBgOsxbFgs7UJcoVbbeZ+K7+6liAsjgpc8l1Xd55cQUy14fXZdGSb4zIw==}
-    peerDependencies:
-      devtools-protocol: '*'
+  chromium-bidi@5.1.0(devtools-protocol@0.0.1439962):
     dependencies:
-      devtools-protocol: 0.0.1232444
+      devtools-protocol: 0.0.1439962
       mitt: 3.0.1
-      urlpattern-polyfill: 10.0.0
-    dev: true
+      zod: 3.24.1
 
-  /cli-boxes@3.0.0:
-    resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
-    engines: {node: '>=10'}
-    dev: true
+  cli-boxes@3.0.0: {}
 
-  /cli-cursor@4.0.0:
-    resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  cli-cursor@5.0.0:
     dependencies:
-      restore-cursor: 4.0.0
-    dev: true
+      restore-cursor: 5.1.0
 
-  /cli-truncate@4.0.0:
-    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
-    engines: {node: '>=18'}
+  cli-truncate@4.0.0:
     dependencies:
       slice-ansi: 5.0.0
-      string-width: 7.0.0
-    dev: true
+      string-width: 7.2.0
 
-  /clipboardy@3.0.0:
-    resolution: {integrity: sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  clipboardy@3.0.0:
     dependencies:
       arch: 2.2.0
       execa: 5.1.1
       is-wsl: 2.2.0
-    dev: true
 
-  /cliui@8.0.1:
-    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
-    engines: {node: '>=12'}
+  cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
-    dev: true
-
-  /color-convert@1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-    requiresBuild: true
-    dependencies:
-      color-name: 1.1.3
-    dev: true
 
-  /color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
+  color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
-    dev: true
-
-  /color-name@1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-    requiresBuild: true
-    dev: true
 
-  /color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
-
-  /colorette@2.0.20:
-    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
-    dev: true
+  color-name@1.1.4: {}
 
-  /combined-stream@1.0.8:
-    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
-    engines: {node: '>= 0.8'}
-    dependencies:
-      delayed-stream: 1.0.0
-    dev: true
+  colorette@2.0.20: {}
 
-  /commander@11.1.0:
-    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
-    engines: {node: '>=16'}
-    dev: true
+  commander@13.1.0: {}
 
-  /commander@2.20.3:
-    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
-    dev: true
+  comment-parser@1.4.1: {}
 
-  /commondir@1.0.1:
-    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
-    dev: true
+  commondir@1.0.1: {}
 
-  /compare-func@2.0.0:
-    resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
+  compare-func@2.0.0:
     dependencies:
       array-ify: 1.0.0
       dot-prop: 5.3.0
-    dev: true
 
-  /compressible@2.0.18:
-    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
-    engines: {node: '>= 0.6'}
+  compressible@2.0.18:
     dependencies:
-      mime-db: 1.52.0
-    dev: true
+      mime-db: 1.53.0
 
-  /compression@1.7.4:
-    resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
-    engines: {node: '>= 0.8.0'}
+  compression@1.7.4:
     dependencies:
       accepts: 1.3.8
       bytes: 3.0.0
@@ -2288,723 +4659,401 @@ packages:
       vary: 1.1.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: true
+  concat-map@0.0.1: {}
 
-  /constantinople@4.0.1:
-    resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
+  constantinople@4.0.1:
     dependencies:
-      '@babel/parser': 7.23.9
-      '@babel/types': 7.23.9
-    dev: true
+      '@babel/parser': 7.28.0
+      '@babel/types': 7.28.1
 
-  /content-disposition@0.5.2:
-    resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==}
-    engines: {node: '>= 0.6'}
-    dev: true
+  content-disposition@0.5.2: {}
 
-  /conventional-changelog-angular@7.0.0:
-    resolution: {integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==}
-    engines: {node: '>=16'}
+  conventional-changelog-angular@8.0.0:
     dependencies:
       compare-func: 2.0.0
-    dev: true
 
-  /conventional-changelog-atom@4.0.0:
-    resolution: {integrity: sha512-q2YtiN7rnT1TGwPTwjjBSIPIzDJCRE+XAUahWxnh+buKK99Kks4WLMHoexw38GXx9OUxAsrp44f9qXe5VEMYhw==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-atom@5.0.0: {}
 
-  /conventional-changelog-cli@4.1.0:
-    resolution: {integrity: sha512-MscvILWZ6nWOoC+p/3Nn3D2cVLkjeQjyZPUr0bQ+vUORE/SPrkClJh8BOoMNpS4yk+zFJ5LlgXACxH6XGQoRXA==}
-    engines: {node: '>=16'}
-    hasBin: true
+  conventional-changelog-cli@5.0.0(conventional-commits-filter@5.0.0):
     dependencies:
       add-stream: 1.0.0
-      conventional-changelog: 5.1.0
-      meow: 12.1.1
+      conventional-changelog: 6.0.0(conventional-commits-filter@5.0.0)
+      meow: 13.2.0
       tempfile: 5.0.0
-    dev: true
+    transitivePeerDependencies:
+      - conventional-commits-filter
 
-  /conventional-changelog-codemirror@4.0.0:
-    resolution: {integrity: sha512-hQSojc/5imn1GJK3A75m9hEZZhc3urojA5gMpnar4JHmgLnuM3CUIARPpEk86glEKr3c54Po3WV/vCaO/U8g3Q==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-codemirror@5.0.0: {}
 
-  /conventional-changelog-conventionalcommits@7.0.2:
-    resolution: {integrity: sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==}
-    engines: {node: '>=16'}
+  conventional-changelog-conventionalcommits@8.0.0:
     dependencies:
       compare-func: 2.0.0
-    dev: true
 
-  /conventional-changelog-core@7.0.0:
-    resolution: {integrity: sha512-UYgaB1F/COt7VFjlYKVE/9tTzfU3VUq47r6iWf6lM5T7TlOxr0thI63ojQueRLIpVbrtHK4Ffw+yQGduw2Bhdg==}
-    engines: {node: '>=16'}
+  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: 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-ember@4.0.0:
-    resolution: {integrity: sha512-D0IMhwcJUg1Y8FSry6XAplEJcljkHVlvAZddhhsdbL1rbsqRsMfGx/PIkPYq0ru5aDgn+OxhQ5N5yR7P9mfsvA==}
-    engines: {node: '>=16'}
-    dev: true
+      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-eslint@5.0.0:
-    resolution: {integrity: sha512-6JtLWqAQIeJLn/OzUlYmzd9fKeNSWmQVim9kql+v4GrZwLx807kAJl3IJVc3jTYfVKWLxhC3BGUxYiuVEcVjgA==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-ember@5.0.0: {}
 
-  /conventional-changelog-express@4.0.0:
-    resolution: {integrity: sha512-yWyy5c7raP9v7aTvPAWzqrztACNO9+FEI1FSYh7UP7YT1AkWgv5UspUeB5v3Ibv4/o60zj2o9GF2tqKQ99lIsw==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-eslint@6.0.0: {}
 
-  /conventional-changelog-jquery@5.0.0:
-    resolution: {integrity: sha512-slLjlXLRNa/icMI3+uGLQbtrgEny3RgITeCxevJB+p05ExiTgHACP5p3XiMKzjBn80n+Rzr83XMYfRInEtCPPw==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-express@5.0.0: {}
 
-  /conventional-changelog-jshint@4.0.0:
-    resolution: {integrity: sha512-LyXq1bbl0yG0Ai1SbLxIk8ZxUOe3AjnlwE6sVRQmMgetBk+4gY9EO3d00zlEt8Y8gwsITytDnPORl8al7InTjg==}
-    engines: {node: '>=16'}
+  conventional-changelog-jquery@6.0.0: {}
+
+  conventional-changelog-jshint@5.0.0:
     dependencies:
       compare-func: 2.0.0
-    dev: true
 
-  /conventional-changelog-preset-loader@4.1.0:
-    resolution: {integrity: sha512-HozQjJicZTuRhCRTq4rZbefaiCzRM2pr6u2NL3XhrmQm4RMnDXfESU6JKu/pnKwx5xtdkYfNCsbhN5exhiKGJA==}
-    engines: {node: '>=16'}
-    dev: true
+  conventional-changelog-preset-loader@5.0.0: {}
 
-  /conventional-changelog-writer@7.0.1:
-    resolution: {integrity: sha512-Uo+R9neH3r/foIvQ0MKcsXkX642hdm9odUp7TqgFS7BsalTcjzRlIfWZrZR1gbxOozKucaKt5KAbjW8J8xRSmA==}
-    engines: {node: '>=16'}
-    hasBin: true
+  conventional-changelog-writer@8.0.0:
     dependencies:
-      conventional-commits-filter: 4.0.0
+      '@types/semver': 7.7.0
+      conventional-commits-filter: 5.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-commits-filter@4.0.0:
-    resolution: {integrity: sha512-rnpnibcSOdFcdclpFwWa+pPlZJhXE7l+XK04zxhbWrhgpR96h33QLz8hITTXbcYICxVr3HZFtbtUAQ+4LdBo9A==}
-    engines: {node: '>=16'}
-    dev: true
+      meow: 13.2.0
+      semver: 7.7.2
+
+  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-parser@5.0.0:
-    resolution: {integrity: sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==}
-    engines: {node: '>=16'}
-    hasBin: true
-    dependencies:
-      JSONStream: 1.3.5
-      is-text-path: 2.0.0
-      meow: 12.1.1
-      split2: 4.2.0
-    dev: true
+  conventional-commits-filter@5.0.0: {}
 
-  /convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
-    dev: true
+  conventional-commits-parser@6.0.0:
+    dependencies:
+      meow: 13.2.0
 
-  /core-util-is@1.0.3:
-    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
-    dev: false
+  core-util-is@1.0.3: {}
 
-  /cosmiconfig@9.0.0(typescript@5.2.2):
-    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      typescript: '>=4.9.5'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  cosmiconfig@9.0.0(typescript@5.6.3):
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       parse-json: 5.2.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
+    optionalDependencies:
+      typescript: 5.6.3
 
-  /cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
-    engines: {node: '>= 8'}
+  cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
-    dev: true
 
-  /css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.0.2
-    dev: true
-
-  /cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: true
+  cssesc@3.0.0: {}
 
-  /cssstyle@4.0.1:
-    resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==}
-    engines: {node: '>=18'}
+  cssstyle@4.2.1:
     dependencies:
-      rrweb-cssom: 0.6.0
-    dev: true
-
-  /csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
-    dev: false
+      '@asamuzakjp/css-color': 2.8.2
+      rrweb-cssom: 0.8.0
 
-  /dargs@8.1.0:
-    resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
-    engines: {node: '>=12'}
-    dev: true
+  csstype@3.1.3: {}
 
-  /data-uri-to-buffer@6.0.1:
-    resolution: {integrity: sha512-MZd3VlchQkp8rdend6vrx7MmVDJzSNTBvghvKjirLkD+WTChA3KUf0jkE68Q4UyctNqI11zZO9/x2Yx+ub5Cvg==}
-    engines: {node: '>= 14'}
-    dev: true
+  data-uri-to-buffer@6.0.2: {}
 
-  /data-urls@5.0.0:
-    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
-    engines: {node: '>=18'}
+  data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
-      whatwg-url: 14.0.0
-    dev: true
+      whatwg-url: 14.2.0
 
-  /debug@2.6.9:
-    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
+  debug@2.6.9:
     dependencies:
       ms: 2.0.0
-    dev: true
 
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
+  debug@3.2.7:
     dependencies:
-      ms: 2.1.2
-    dev: true
+      ms: 2.1.3
 
-  /debug@4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
+  debug@4.4.0:
     dependencies:
-      ms: 2.1.2
-    dev: true
+      ms: 2.1.3
 
-  /decimal.js@10.4.3:
-    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
-    dev: true
-
-  /deep-eql@4.1.3:
-    resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
-    engines: {node: '>=6'}
+  debug@4.4.1:
     dependencies:
-      type-detect: 4.0.8
-    dev: true
+      ms: 2.1.3
 
-  /deep-extend@0.6.0:
-    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
-    engines: {node: '>=4.0.0'}
-    dev: true
+  decimal.js@10.5.0: {}
 
-  /deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-    dev: true
+  deep-eql@5.0.2: {}
 
-  /deepmerge@4.3.1:
-    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  deep-extend@0.6.0: {}
 
-  /define-data-property@1.1.1:
-    resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==}
-    engines: {node: '>= 0.4'}
+  deep-is@0.1.4: {}
+
+  deepmerge@4.3.1: {}
+
+  define-data-property@1.1.4:
     dependencies:
-      get-intrinsic: 1.2.1
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
       gopd: 1.0.1
-      has-property-descriptors: 1.0.0
-    dev: true
 
-  /degenerator@5.0.1:
-    resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
-    engines: {node: '>= 14'}
+  degenerator@5.0.1:
     dependencies:
       ast-types: 0.13.4
       escodegen: 2.1.0
       esprima: 4.0.1
-    dev: true
-
-  /delayed-stream@1.0.0:
-    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
-    engines: {node: '>=0.4.0'}
-    dev: true
 
-  /devtools-protocol@0.0.1232444:
-    resolution: {integrity: sha512-pM27vqEfxSxRkTMnF+XCmxSEb6duO5R+t8A9DEEJgy4Wz2RVanje2mmj99B6A3zv2r/qGfYlOvYznUhuokizmg==}
-    dev: true
-
-  /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
+  detect-libc@1.0.3:
+    optional: true
 
-  /doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: true
+  devtools-protocol@0.0.1439962: {}
 
-  /doctypes@1.1.0:
-    resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
-    dev: true
+  doctypes@1.1.0: {}
 
-  /dot-prop@5.3.0:
-    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
-    engines: {node: '>=8'}
+  dot-prop@5.3.0:
     dependencies:
       is-obj: 2.0.0
-    dev: true
-
-  /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
+  eastasianwidth@0.2.0: {}
 
-  /emoji-regex@10.3.0:
-    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
-    dev: true
+  emoji-regex@10.3.0: {}
 
-  /emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-    dev: true
+  emoji-regex@8.0.0: {}
 
-  /emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: true
+  emoji-regex@9.2.2: {}
 
-  /end-of-stream@1.4.4:
-    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
+  end-of-stream@1.4.4:
     dependencies:
       once: 1.4.0
-    dev: true
 
-  /enquirer@2.4.1:
-    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
-    engines: {node: '>=8.6'}
+  enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
       strip-ansi: 6.0.1
-    dev: true
 
-  /entities@4.5.0:
-    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
-    engines: {node: '>=0.12'}
+  entities@4.5.0: {}
 
-  /env-paths@2.2.1:
-    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
-    engines: {node: '>=6'}
-    dev: true
+  env-paths@2.2.1: {}
 
-  /error-ex@1.3.2:
-    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+  environment@1.1.0: {}
+
+  error-ex@1.3.2:
     dependencies:
       is-arrayish: 0.2.1
-    dev: true
 
-  /es-module-lexer@1.3.1:
-    resolution: {integrity: sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==}
-    dev: true
+  es-define-property@1.0.0:
+    dependencies:
+      get-intrinsic: 1.2.4
 
-  /esbuild-plugin-polyfill-node@0.3.0(esbuild@0.20.0):
-    resolution: {integrity: sha512-SHG6CKUfWfYyYXGpW143NEZtcVVn8S/WHcEOxk62LuDXnY4Zpmc+WmxJKN6GMTgTClXJXhEM5KQlxKY6YjbucQ==}
-    peerDependencies:
-      esbuild: '*'
+  es-errors@1.3.0: {}
+
+  es-module-lexer@1.6.0: {}
+
+  es-module-lexer@1.7.0: {}
+
+  esbuild-plugin-polyfill-node@0.3.0(esbuild@0.25.8):
     dependencies:
       '@jspm/core': 2.0.1
-      esbuild: 0.20.0
-      import-meta-resolve: 3.0.0
-    dev: true
+      esbuild: 0.25.8
+      import-meta-resolve: 3.1.1
 
-  /esbuild@0.19.10:
-    resolution: {integrity: sha512-S1Y27QGt/snkNYrRcswgRFqZjaTG5a5xM3EQo97uNBnH505pdzSNe/HLBq1v0RO7iK/ngdbhJB6mDAp0OK+iUA==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
+  esbuild@0.21.5:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.19.10
-      '@esbuild/android-arm': 0.19.10
-      '@esbuild/android-arm64': 0.19.10
-      '@esbuild/android-x64': 0.19.10
-      '@esbuild/darwin-arm64': 0.19.10
-      '@esbuild/darwin-x64': 0.19.10
-      '@esbuild/freebsd-arm64': 0.19.10
-      '@esbuild/freebsd-x64': 0.19.10
-      '@esbuild/linux-arm': 0.19.10
-      '@esbuild/linux-arm64': 0.19.10
-      '@esbuild/linux-ia32': 0.19.10
-      '@esbuild/linux-loong64': 0.19.10
-      '@esbuild/linux-mips64el': 0.19.10
-      '@esbuild/linux-ppc64': 0.19.10
-      '@esbuild/linux-riscv64': 0.19.10
-      '@esbuild/linux-s390x': 0.19.10
-      '@esbuild/linux-x64': 0.19.10
-      '@esbuild/netbsd-x64': 0.19.10
-      '@esbuild/openbsd-x64': 0.19.10
-      '@esbuild/sunos-x64': 0.19.10
-      '@esbuild/win32-arm64': 0.19.10
-      '@esbuild/win32-ia32': 0.19.10
-      '@esbuild/win32-x64': 0.19.10
-    dev: true
-
-  /esbuild@0.20.0:
-    resolution: {integrity: sha512-6iwE3Y2RVYCME1jLpBqq7LQWK3MW6vjV2bZy6gt/WrqkY+WE74Spyc0ThAOYpMtITvnjX09CrC6ym7A/m9mebA==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
+      '@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.25.8:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.20.0
-      '@esbuild/android-arm': 0.20.0
-      '@esbuild/android-arm64': 0.20.0
-      '@esbuild/android-x64': 0.20.0
-      '@esbuild/darwin-arm64': 0.20.0
-      '@esbuild/darwin-x64': 0.20.0
-      '@esbuild/freebsd-arm64': 0.20.0
-      '@esbuild/freebsd-x64': 0.20.0
-      '@esbuild/linux-arm': 0.20.0
-      '@esbuild/linux-arm64': 0.20.0
-      '@esbuild/linux-ia32': 0.20.0
-      '@esbuild/linux-loong64': 0.20.0
-      '@esbuild/linux-mips64el': 0.20.0
-      '@esbuild/linux-ppc64': 0.20.0
-      '@esbuild/linux-riscv64': 0.20.0
-      '@esbuild/linux-s390x': 0.20.0
-      '@esbuild/linux-x64': 0.20.0
-      '@esbuild/netbsd-x64': 0.20.0
-      '@esbuild/openbsd-x64': 0.20.0
-      '@esbuild/sunos-x64': 0.20.0
-      '@esbuild/win32-arm64': 0.20.0
-      '@esbuild/win32-ia32': 0.20.0
-      '@esbuild/win32-x64': 0.20.0
-    dev: true
-
-  /escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
-    engines: {node: '>=6'}
-    dev: true
-
-  /escape-string-regexp@1.0.5:
-    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
-    engines: {node: '>=0.8.0'}
-    requiresBuild: true
-    dev: true
-
-  /escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
-    dev: true
-
-  /escodegen@2.1.0:
-    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
-    engines: {node: '>=6.0'}
-    hasBin: true
+      '@esbuild/aix-ppc64': 0.25.8
+      '@esbuild/android-arm': 0.25.8
+      '@esbuild/android-arm64': 0.25.8
+      '@esbuild/android-x64': 0.25.8
+      '@esbuild/darwin-arm64': 0.25.8
+      '@esbuild/darwin-x64': 0.25.8
+      '@esbuild/freebsd-arm64': 0.25.8
+      '@esbuild/freebsd-x64': 0.25.8
+      '@esbuild/linux-arm': 0.25.8
+      '@esbuild/linux-arm64': 0.25.8
+      '@esbuild/linux-ia32': 0.25.8
+      '@esbuild/linux-loong64': 0.25.8
+      '@esbuild/linux-mips64el': 0.25.8
+      '@esbuild/linux-ppc64': 0.25.8
+      '@esbuild/linux-riscv64': 0.25.8
+      '@esbuild/linux-s390x': 0.25.8
+      '@esbuild/linux-x64': 0.25.8
+      '@esbuild/netbsd-arm64': 0.25.8
+      '@esbuild/netbsd-x64': 0.25.8
+      '@esbuild/openbsd-arm64': 0.25.8
+      '@esbuild/openbsd-x64': 0.25.8
+      '@esbuild/openharmony-arm64': 0.25.8
+      '@esbuild/sunos-x64': 0.25.8
+      '@esbuild/win32-arm64': 0.25.8
+      '@esbuild/win32-ia32': 0.25.8
+      '@esbuild/win32-x64': 0.25.8
+
+  escalade@3.1.2: {}
+
+  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
-    dev: true
 
-  /eslint-define-config@1.24.1:
-    resolution: {integrity: sha512-o36vBhPSWyIQlHoMqGhhcGmOOm2A2ccBVIdLTG/AWdm9YmjpsLpf+5ntf9LlHR6dduLREgxtGwvwPwSt7vnXJg==}
-    engines: {node: '>=18.0.0', npm: '>=9.0.0', pnpm: '>= 8.6.0'}
-    dev: true
-
-  /eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+  eslint-import-context@0.1.4(unrs-resolver@1.7.2):
     dependencies:
-      debug: 3.2.7
-      is-core-module: 2.13.1
-      resolve: 1.22.8
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+      get-tsconfig: 4.10.1
+      stable-hash: 0.0.5
+    optionalDependencies:
+      unrs-resolver: 1.7.2
 
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.18.1)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0):
-    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
+  eslint-import-resolver-node@0.3.9:
     dependencies:
-      '@typescript-eslint/parser': 6.18.1(eslint@8.56.0)(typescript@5.2.2)
       debug: 3.2.7
-      eslint: 8.56.0
-      eslint-import-resolver-node: 0.3.9
+      is-core-module: 2.15.0
+      resolve: 1.22.8
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /eslint-plugin-i@2.29.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0):
-    resolution: {integrity: sha512-ORizX37MelIWLbMyqI7hi8VJMf7A0CskMmYkB+lkCX3aF4pkGV7kwx5bSEb4qx7Yce2rAf9s34HqDRPjGRZPNQ==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      eslint: ^7.2.0 || ^8
+  eslint-plugin-import-x@4.13.1(eslint@9.27.0)(typescript@5.6.3):
     dependencies:
-      debug: 4.3.4
-      doctrine: 3.0.0
-      eslint: 8.56.0
+      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0)(typescript@5.6.3)
+      comment-parser: 1.4.1
+      debug: 4.4.1
+      eslint: 9.27.0
+      eslint-import-context: 0.1.4(unrs-resolver@1.7.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.18.1)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
-      get-tsconfig: 4.7.2
       is-glob: 4.0.3
-      minimatch: 3.1.2
-      semver: 7.5.4
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: true
-
-  /eslint-plugin-jest@27.6.3(@typescript-eslint/eslint-plugin@6.18.1)(eslint@8.56.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-+YsJFVH6R+tOiO3gCJon5oqn4KWc+mDq2leudk8mrp8RFubLOo9CVyi3cib4L7XMpxExmkmBZQTPDYVBzgpgOA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.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/eslint-plugin': 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.2.2)
-      '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.2.2)
-      eslint: 8.56.0
+      minimatch: 10.0.1
+      semver: 7.7.2
+      stable-hash: 0.0.5
+      tslib: 2.8.1
+      unrs-resolver: 1.7.2
     transitivePeerDependencies:
       - supports-color
       - typescript
-    dev: true
-
-  /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@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  eslint-scope@8.3.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
-    dev: true
 
-  /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-visitor-keys@3.4.3: {}
 
-  /eslint@8.56.0:
-    resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
+  eslint-visitor-keys@4.2.0: {}
+
+  eslint@9.27.0:
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
-      '@eslint-community/regexpp': 4.9.1
-      '@eslint/eslintrc': 2.1.4
-      '@eslint/js': 8.56.0
-      '@humanwhocodes/config-array': 0.11.13
+      '@eslint-community/eslint-utils': 4.6.1(eslint@9.27.0)
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.20.0
+      '@eslint/config-helpers': 0.2.1
+      '@eslint/core': 0.14.0
+      '@eslint/eslintrc': 3.3.1
+      '@eslint/js': 9.27.0
+      '@eslint/plugin-kit': 0.3.1
+      '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.2.0
+      '@humanwhocodes/retry': 0.4.2
+      '@types/estree': 1.0.7
+      '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      doctrine: 3.0.0
+      cross-spawn: 7.0.6
+      debug: 4.4.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
+      eslint-scope: 8.3.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
+      esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
+      file-entry-cache: 8.0.0
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.23.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
+      ignore: 5.3.2
       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
+      optionator: 0.9.4
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  espree@10.3.0:
     dependencies:
-      acorn: 8.10.0
-      acorn-jsx: 5.3.2(acorn@8.10.0)
-      eslint-visitor-keys: 3.4.3
-    dev: true
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      eslint-visitor-keys: 4.2.0
 
-  /esprima@4.0.1:
-    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: true
+  esprima@4.0.1: {}
 
-  /esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
-    engines: {node: '>=0.10'}
+  esquery@1.6.0:
     dependencies:
       estraverse: 5.3.0
-    dev: true
 
-  /esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
+  esrecurse@4.3.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:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
-    dev: true
+  estraverse@5.3.0: {}
 
-  /estree-walker@2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+  estree-walker@2.0.2: {}
 
-  /estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+  estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.3
-    dev: true
+      '@types/estree': 1.0.8
 
-  /esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  esutils@2.0.3: {}
 
-  /eventemitter3@5.0.1:
-    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
-    dev: true
+  eventemitter3@5.0.1: {}
 
-  /execa@5.1.1:
-    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
-    engines: {node: '>=10'}
+  execa@5.1.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 2.1.0
       is-stream: 2.0.1
@@ -3013,1708 +5062,874 @@ packages:
       onetime: 5.1.2
       signal-exit: 3.0.7
       strip-final-newline: 2.0.0
-    dev: true
 
-  /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
+  expect-type@1.2.1: {}
 
-  /extract-zip@2.0.1:
-    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
-    engines: {node: '>= 10.17.0'}
-    hasBin: true
+  extract-zip@2.0.1:
     dependencies:
-      debug: 4.3.4
+      debug: 4.4.1
       get-stream: 5.2.0
       yauzl: 2.10.0
     optionalDependencies:
-      '@types/yauzl': 2.10.2
+      '@types/yauzl': 2.10.3
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-    dev: true
+  fast-deep-equal@3.1.3: {}
 
-  /fast-fifo@1.3.2:
-    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
-    dev: true
+  fast-fifo@1.3.2: {}
 
-  /fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
+  fast-glob@3.3.3:
     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:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-    dev: true
+      micromatch: 4.0.8
 
-  /fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-    dev: true
+  fast-json-stable-stringify@2.1.0: {}
 
-  /fast-url-parser@1.1.3:
-    resolution: {integrity: sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==}
-    dependencies:
-      punycode: 1.4.1
-    dev: true
+  fast-levenshtein@2.0.6: {}
 
-  /fastq@1.15.0:
-    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
+  fastq@1.19.1:
     dependencies:
-      reusify: 1.0.4
-    dev: true
+      reusify: 1.1.0
 
-  /fd-slicer@1.1.0:
-    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
+  fd-slicer@1.1.0:
     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}
+  fdir@6.4.4(picomatch@4.0.2):
+    optionalDependencies:
+      picomatch: 4.0.2
+
+  file-entry-cache@8.0.0:
     dependencies:
-      flat-cache: 3.1.1
-    dev: true
+      flat-cache: 4.0.1
 
-  /file-saver@2.0.5:
-    resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
-    dev: false
+  file-saver@2.0.5: {}
 
-  /fill-range@7.0.1:
-    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
-    engines: {node: '>=8'}
+  fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
-    dev: true
 
-  /find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
+  find-up-simple@1.0.0: {}
+
+  find-up@5.0.0:
     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@3.1.1:
-    resolution: {integrity: sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==}
-    engines: {node: '>=12.0.0'}
+  flat-cache@4.0.1:
     dependencies:
-      flatted: 3.2.9
+      flatted: 3.3.1
       keyv: 4.5.4
-      rimraf: 3.0.2
-    dev: true
 
-  /flatted@3.2.9:
-    resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
-    dev: true
+  flatted@3.3.1: {}
 
-  /foreground-child@3.1.1:
-    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
-    engines: {node: '>=14'}
+  foreground-child@3.3.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       signal-exit: 4.1.0
-    dev: true
-
-  /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'}
+  fs-extra@11.2.0:
     dependencies:
       graceful-fs: 4.2.11
-      jsonfile: 4.0.0
-      universalify: 0.1.2
-    dev: true
-
-  /fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: true
+      jsonfile: 6.1.0
+      universalify: 2.0.1
 
-  /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
+  fsevents@2.3.3:
     optional: true
 
-  /function-bind@1.1.2:
-    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
-    dev: true
+  function-bind@1.1.2: {}
 
-  /generic-names@4.0.0:
-    resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==}
+  generic-names@4.0.0:
     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:
-    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
-    engines: {node: 6.* || 8.* || >= 10.*}
-    dev: true
+      loader-utils: 3.3.1
 
-  /get-east-asian-width@1.2.0:
-    resolution: {integrity: sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==}
-    engines: {node: '>=18'}
-    dev: true
+  get-caller-file@2.0.5: {}
 
-  /get-func-name@2.0.2:
-    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
-    dev: true
+  get-east-asian-width@1.2.0: {}
 
-  /get-intrinsic@1.2.1:
-    resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
+  get-intrinsic@1.2.4:
     dependencies:
+      es-errors: 1.3.0
       function-bind: 1.1.2
-      has: 1.0.4
-      has-proto: 1.0.1
+      has-proto: 1.0.3
       has-symbols: 1.0.3
-    dev: true
+      hasown: 2.0.2
 
-  /get-stream@5.2.0:
-    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
-    engines: {node: '>=8'}
+  get-stream@5.2.0:
     dependencies:
       pump: 3.0.0
-    dev: true
 
-  /get-stream@6.0.1:
-    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
-    engines: {node: '>=10'}
-    dev: true
+  get-stream@6.0.1: {}
 
-  /get-stream@8.0.1:
-    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
-    engines: {node: '>=16'}
-    dev: true
+  get-tsconfig@4.10.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
 
-  /get-tsconfig@4.7.2:
-    resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==}
+  get-tsconfig@4.10.1:
     dependencies:
       resolve-pkg-maps: 1.0.0
-    dev: true
 
-  /get-uri@6.0.2:
-    resolution: {integrity: sha512-5KLucCJobh8vBY1K07EFV4+cPZH3mrV9YeAruUseCQKHB58SGjjT2l9/eA9LD082IiuMjSlFJEcdJ27TXvbZNw==}
-    engines: {node: '>= 14'}
+  get-uri@6.0.3:
     dependencies:
-      basic-ftp: 5.0.3
-      data-uri-to-buffer: 6.0.1
-      debug: 4.3.4
-      fs-extra: 8.1.0
+      basic-ftp: 5.0.5
+      data-uri-to-buffer: 6.0.2
+      debug: 4.4.1
+      fs-extra: 11.2.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /git-raw-commits@4.0.0:
-    resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
-    engines: {node: '>=16'}
-    hasBin: true
+  git-raw-commits@5.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0):
     dependencies:
-      dargs: 8.1.0
-      meow: 12.1.1
-      split2: 4.2.0
-    dev: true
+      '@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@7.0.1:
-    resolution: {integrity: sha512-NY0ZHjJzyyNXHTDZmj+GG7PyuAKtMsyWSwh07CR2hOZFa+/yoTsXci/nF2obzL8UDhakFNkD9gNdt/Ed+cxh2Q==}
-    engines: {node: '>=16'}
-    hasBin: true
+  git-semver-tags@8.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0):
     dependencies:
-      meow: 12.1.1
-      semver: 7.5.4
-    dev: true
+      '@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:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
+  glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
-  /glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
+  glob-parent@6.0.2:
     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'}
-    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@8.1.0:
-    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
-    engines: {node: '>=12'}
+  glob@10.4.5:
     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@11.12.0:
-    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
-    engines: {node: '>=4'}
-    dev: true
+      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
 
-  /globals@13.23.0:
-    resolution: {integrity: sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==}
-    engines: {node: '>=8'}
+  glob@11.0.0:
     dependencies:
-      type-fest: 0.20.2
-    dev: true
+      foreground-child: 3.3.0
+      jackspeak: 4.0.1
+      minimatch: 10.0.3
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.0
+      path-scurry: 2.0.0
 
-  /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
+  globals@14.0.0: {}
 
-  /gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+  gopd@1.0.1:
     dependencies:
-      get-intrinsic: 1.2.1
-    dev: true
+      get-intrinsic: 1.2.4
 
-  /graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-    dev: true
+  graceful-fs@4.2.11: {}
 
-  /graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-    dev: true
+  graphemer@1.4.0: {}
 
-  /handlebars@4.7.8:
-    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
-    engines: {node: '>=0.4.7'}
-    hasBin: true
+  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.17.4
-    dev: true
-
-  /has-flag@3.0.0:
-    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
-    engines: {node: '>=4'}
-    requiresBuild: true
-    dev: true
+      uglify-js: 3.19.1
 
-  /has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
-    dev: true
+  has-flag@4.0.0: {}
 
-  /has-property-descriptors@1.0.0:
-    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
+  has-property-descriptors@1.0.2:
     dependencies:
-      get-intrinsic: 1.2.1
-    dev: true
+      es-define-property: 1.0.0
 
-  /has-proto@1.0.1:
-    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
-    engines: {node: '>= 0.4'}
-    dev: true
+  has-proto@1.0.3: {}
 
-  /has-symbols@1.0.3:
-    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
-    engines: {node: '>= 0.4'}
-    dev: true
+  has-symbols@1.0.3: {}
 
-  /has-tostringtag@1.0.0:
-    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
-    engines: {node: '>= 0.4'}
+  has-tostringtag@1.0.2:
     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:
-    resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
-    dev: true
+  hash-sum@2.0.0: {}
 
-  /hasown@2.0.0:
-    resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
-    engines: {node: '>= 0.4'}
+  hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
-    dev: true
 
-  /hosted-git-info@2.8.9:
-    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
-    dev: true
-
-  /hosted-git-info@7.0.1:
-    resolution: {integrity: sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==}
-    engines: {node: ^16.14.0 || >=18.0.0}
+  hosted-git-info@7.0.2:
     dependencies:
-      lru-cache: 10.2.0
-    dev: true
+      lru-cache: 10.1.0
 
-  /html-encoding-sniffer@4.0.0:
-    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
-    engines: {node: '>=18'}
+  html-encoding-sniffer@4.0.0:
     dependencies:
       whatwg-encoding: 3.1.1
-    dev: true
 
-  /html-escaper@2.0.2:
-    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
-    dev: true
+  html-escaper@2.0.2: {}
 
-  /http-proxy-agent@7.0.0:
-    resolution: {integrity: sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==}
-    engines: {node: '>= 14'}
+  http-proxy-agent@7.0.2:
     dependencies:
-      agent-base: 7.1.0
-      debug: 4.3.4
+      agent-base: 7.1.3
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /https-proxy-agent@7.0.2:
-    resolution: {integrity: sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==}
-    engines: {node: '>= 14'}
+  https-proxy-agent@7.0.6:
     dependencies:
-      agent-base: 7.1.0
-      debug: 4.3.4
+      agent-base: 7.1.3
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
-
-  /human-signals@2.1.0:
-    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
-    engines: {node: '>=10.17.0'}
-    dev: true
 
-  /human-signals@5.0.0:
-    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
-    engines: {node: '>=16.17.0'}
-    dev: true
+  human-signals@2.1.0: {}
 
-  /iconv-lite@0.6.3:
-    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
-    engines: {node: '>=0.10.0'}
+  iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
-    dev: true
 
-  /icss-utils@5.1.0(postcss@8.4.33):
-    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
+  icss-utils@5.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.4.33
-    dev: true
+      postcss: 8.5.6
 
-  /ieee754@1.2.1:
-    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
-    dev: true
+  ignore@5.3.2: {}
 
-  /ignore@5.2.4:
-    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
-    engines: {node: '>= 4'}
-    dev: true
+  ignore@7.0.4: {}
 
-  /immediate@3.0.6:
-    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
-    dev: false
+  immediate@3.0.6: {}
 
-  /immutable@4.3.4:
-    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
-    dev: true
+  immutable@5.0.2: {}
 
-  /import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
+  import-fresh@3.3.0:
     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
-
-  /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
 
-  /inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+  import-meta-resolve@3.1.1: {}
 
-  /ini@1.3.8:
-    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
-    dev: true
+  imurmurhash@0.1.4: {}
 
-  /ip@1.1.8:
-    resolution: {integrity: sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==}
-    dev: true
+  index-to-position@0.1.2: {}
 
-  /ip@2.0.0:
-    resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==}
-    dev: true
+  inherits@2.0.4: {}
 
-  /is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-    dev: true
+  ini@1.3.8: {}
 
-  /is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
+  ip-address@9.0.5:
     dependencies:
-      binary-extensions: 2.2.0
-    dev: true
+      jsbn: 1.1.0
+      sprintf-js: 1.1.3
 
-  /is-builtin-module@3.2.1:
-    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
-    engines: {node: '>=6'}
-    dependencies:
-      builtin-modules: 3.3.0
-    dev: true
+  is-arrayish@0.2.1: {}
 
-  /is-core-module@2.13.1:
-    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+  is-core-module@2.15.0:
     dependencies:
-      hasown: 2.0.0
-    dev: true
+      hasown: 2.0.2
 
-  /is-docker@2.2.1:
-    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
-    engines: {node: '>=8'}
-    hasBin: true
-    dev: true
+  is-docker@2.2.1: {}
 
-  /is-expression@4.0.0:
-    resolution: {integrity: sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==}
+  is-expression@4.0.0:
     dependencies:
       acorn: 7.4.1
       object-assign: 4.1.1
-    dev: true
 
-  /is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  is-extglob@2.1.1: {}
 
-  /is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
-    dev: true
+  is-fullwidth-code-point@3.0.0: {}
 
-  /is-fullwidth-code-point@4.0.0:
-    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
-    engines: {node: '>=12'}
-    dev: true
+  is-fullwidth-code-point@4.0.0: {}
 
-  /is-fullwidth-code-point@5.0.0:
-    resolution: {integrity: sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==}
-    engines: {node: '>=18'}
+  is-fullwidth-code-point@5.0.0:
     dependencies:
       get-east-asian-width: 1.2.0
-    dev: true
 
-  /is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
+  is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
-    dev: true
-
-  /is-module@1.0.0:
-    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
-    dev: true
 
-  /is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-    dev: true
+  is-module@1.0.0: {}
 
-  /is-obj@2.0.0:
-    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
-    engines: {node: '>=8'}
-    dev: true
+  is-number@7.0.0: {}
 
-  /is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-    dev: true
+  is-obj@2.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-port-reachable@4.0.0: {}
 
-  /is-potential-custom-element-name@1.0.1:
-    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
-    dev: true
+  is-potential-custom-element-name@1.0.1: {}
 
-  /is-promise@2.2.2:
-    resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
-    dev: true
+  is-promise@2.2.2: {}
 
-  /is-reference@1.2.1:
-    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+  is-reference@1.2.1:
     dependencies:
-      '@types/estree': 1.0.3
-    dev: true
+      '@types/estree': 1.0.7
 
-  /is-regex@1.1.4:
-    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
-    engines: {node: '>= 0.4'}
+  is-regex@1.1.4:
     dependencies:
-      call-bind: 1.0.5
-      has-tostringtag: 1.0.0
-    dev: true
+      call-bind: 1.0.7
+      has-tostringtag: 1.0.2
 
-  /is-stream@2.0.1:
-    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /is-stream@3.0.0:
-    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dev: true
+  is-stream@2.0.1: {}
 
-  /is-text-path@2.0.0:
-    resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
-    engines: {node: '>=8'}
-    dependencies:
-      text-extensions: 2.4.0
-    dev: true
-
-  /is-wsl@2.2.0:
-    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
-    engines: {node: '>=8'}
+  is-wsl@2.2.0:
     dependencies:
       is-docker: 2.2.1
-    dev: true
 
-  /isarray@1.0.0:
-    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
-    dev: false
+  isarray@1.0.0: {}
 
-  /isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: true
+  isexe@2.0.0: {}
 
-  /istanbul-lib-coverage@3.2.2:
-    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
-    engines: {node: '>=8'}
-    dev: true
+  isexe@3.1.1: {}
 
-  /istanbul-lib-instrument@6.0.1:
-    resolution: {integrity: sha512-EAMEJBsYuyyztxMxW3g7ugGPkrZsV57v0Hmv3mm1uQsmB+QnZuepg731CRaIgeUVSdmsTngOkSnauNF8p7FIhA==}
-    engines: {node: '>=10'}
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/parser': 7.23.9
-      '@istanbuljs/schema': 0.1.3
-      istanbul-lib-coverage: 3.2.2
-      semver: 7.5.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+  istanbul-lib-coverage@3.2.2: {}
 
-  /istanbul-lib-report@3.0.1:
-    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
-    engines: {node: '>=10'}
+  istanbul-lib-report@3.0.1:
     dependencies:
       istanbul-lib-coverage: 3.2.2
       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==}
-    engines: {node: '>=10'}
+  istanbul-lib-source-maps@5.0.6:
     dependencies:
-      debug: 4.3.4
+      '@jridgewell/trace-mapping': 0.3.25
+      debug: 4.4.0
       istanbul-lib-coverage: 3.2.2
-      source-map: 0.6.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /istanbul-reports@3.1.6:
-    resolution: {integrity: sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==}
-    engines: {node: '>=8'}
+  istanbul-reports@3.1.7:
     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'}
+  jackspeak@3.4.3:
     dependencies:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
-    dev: true
 
-  /js-stringify@1.0.2:
-    resolution: {integrity: sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==}
-    dev: true
+  jackspeak@4.0.1:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
 
-  /js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    requiresBuild: true
-    dev: true
+  js-stringify@1.0.2: {}
 
-  /js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
-    dev: true
 
-  /jsdom@23.2.0:
-    resolution: {integrity: sha512-L88oL7D/8ufIES+Zjz7v0aes+oBMh2Xnh3ygWvL0OaICOomKEPKuPnIfBJekiXr+BHbbMjrWn/xqrDQuxFTeyA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      canvas: ^2.11.2
-    peerDependenciesMeta:
-      canvas:
-        optional: true
+  jsbn@1.1.0: {}
+
+  jsdom@26.1.0:
     dependencies:
-      '@asamuzakjp/dom-selector': 2.0.1
-      cssstyle: 4.0.1
+      cssstyle: 4.2.1
       data-urls: 5.0.0
-      decimal.js: 10.4.3
-      form-data: 4.0.0
+      decimal.js: 10.5.0
       html-encoding-sniffer: 4.0.0
-      http-proxy-agent: 7.0.0
-      https-proxy-agent: 7.0.2
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
       is-potential-custom-element-name: 1.0.1
-      parse5: 7.1.2
-      rrweb-cssom: 0.6.0
+      nwsapi: 2.2.16
+      parse5: 7.2.1
+      rrweb-cssom: 0.8.0
       saxes: 6.0.0
       symbol-tree: 3.2.4
-      tough-cookie: 4.1.3
+      tough-cookie: 5.1.2
       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.16.0
+      whatwg-url: 14.2.0
+      ws: 8.18.1
       xml-name-validator: 5.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:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-    dev: true
-
-  /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==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dev: true
 
-  /json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-    dev: true
+  json-buffer@3.0.1: {}
 
-  /json-schema-traverse@1.0.0:
-    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
-    dev: true
+  json-parse-even-better-errors@2.3.1: {}
 
-  /json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-    dev: true
+  json-parse-even-better-errors@4.0.0: {}
 
-  /json-stringify-safe@5.0.1:
-    resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
-    dev: true
+  json-schema-traverse@0.4.1: {}
 
-  /json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
-    dev: true
+  json-schema-traverse@1.0.0: {}
 
-  /jsonc-parser@3.2.0:
-    resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
-    dev: true
+  json-stable-stringify-without-jsonify@1.0.1: {}
 
-  /jsonfile@4.0.0:
-    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
+  jsonfile@6.1.0:
+    dependencies:
+      universalify: 2.0.1
     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:
-    resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==}
+  jstransformer@1.0.0:
     dependencies:
       is-promise: 2.2.2
       promise: 7.3.1
-    dev: true
 
-  /jszip@3.10.1:
-    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
+  jszip@3.10.1:
     dependencies:
       lie: 3.3.0
       pako: 1.0.11
       readable-stream: 2.3.8
       setimmediate: 1.0.5
-    dev: false
 
-  /keyv@4.5.4:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+  keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
-    dev: true
 
-  /levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
+  levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
       type-check: 0.4.0
-    dev: true
 
-  /lie@3.3.0:
-    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
+  lie@3.3.0:
     dependencies:
       immediate: 3.0.6
-    dev: false
-
-  /lilconfig@3.0.0:
-    resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
-    engines: {node: '>=14'}
-    dev: true
 
-  /lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true
+  lilconfig@3.1.3: {}
 
-  /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
+  lines-and-columns@1.2.4: {}
 
-  /lint-staged@15.2.0:
-    resolution: {integrity: sha512-TFZzUEV00f+2YLaVPWBWGAMq7So6yQx+GG8YRMDeOEIf95Zn5RyiLMsEiX4KTNl9vq/w+NqRJkLA1kPIo15ufQ==}
-    engines: {node: '>=18.12.0'}
-    hasBin: true
+  lint-staged@16.0.0:
     dependencies:
-      chalk: 5.3.0
-      commander: 11.1.0
-      debug: 4.3.4
-      execa: 8.0.1
-      lilconfig: 3.0.0
-      listr2: 8.0.0
-      micromatch: 4.0.5
+      chalk: 5.4.1
+      commander: 13.1.0
+      debug: 4.4.1
+      lilconfig: 3.1.3
+      listr2: 8.3.3
+      micromatch: 4.0.8
+      nano-spawn: 1.0.2
       pidtree: 0.6.0
       string-argv: 0.3.2
-      yaml: 2.3.4
+      yaml: 2.8.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /listr2@8.0.0:
-    resolution: {integrity: sha512-u8cusxAcyqAiQ2RhYvV7kRKNLgUvtObIbhOX2NCXqvp1UU32xIg5CT22ykS2TPKJXZWJwtK3IKLiqAGlGNE+Zg==}
-    engines: {node: '>=18.0.0'}
+  listr2@8.3.3:
     dependencies:
       cli-truncate: 4.0.0
       colorette: 2.0.20
       eventemitter3: 5.0.1
-      log-update: 6.0.0
-      rfdc: 1.3.0
+      log-update: 6.1.0
+      rfdc: 1.4.1
       wrap-ansi: 9.0.0
-    dev: true
 
-  /loader-utils@3.2.1:
-    resolution: {integrity: sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==}
-    engines: {node: '>= 12.13.0'}
-    dev: true
-
-  /local-pkg@0.5.0:
-    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
-    engines: {node: '>=14'}
-    dependencies:
-      mlly: 1.4.2
-      pkg-types: 1.0.3
-    dev: true
+  loader-utils@3.3.1: {}
 
-  /locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
+  locate-path@6.0.0:
     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:
-    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
-    dev: true
+  lodash.camelcase@4.3.0: {}
 
-  /lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: true
+  lodash.merge@4.6.2: {}
 
-  /lodash@4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: true
+  lodash@4.17.21: {}
 
-  /log-update@6.0.0:
-    resolution: {integrity: sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==}
-    engines: {node: '>=18'}
+  log-update@6.1.0:
     dependencies:
-      ansi-escapes: 6.2.0
-      cli-cursor: 4.0.0
+      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
-    dev: true
 
-  /loupe@2.3.7:
-    resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
-    dependencies:
-      get-func-name: 2.0.2
-    dev: true
+  loupe@3.1.3: {}
 
-  /lru-cache@10.2.0:
-    resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
-    engines: {node: 14 || >=16.14}
-    dev: true
+  lru-cache@10.1.0: {}
 
-  /lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
-    dependencies:
-      yallist: 3.1.1
-    dev: true
+  lru-cache@10.4.3: {}
 
-  /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: {}
 
-  /lru-cache@7.18.3:
-    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
-    engines: {node: '>=12'}
-    dev: true
+  lru-cache@11.0.2: {}
 
-  /magic-string@0.30.6:
-    resolution: {integrity: sha512-n62qCLbPjNjyo+owKtveQxZFZTBm+Ms6YoGD23Wew6Vw337PElFNifQpknPruVRQV57kVShPnLGo9vWxVhpPvA==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
+  lru-cache@7.18.3: {}
 
-  /magicast@0.3.3:
-    resolution: {integrity: sha512-ZbrP1Qxnpoes8sz47AM0z08U+jW6TyRgZzcWy3Ma3vDhJttwMwAFDMMQFobwdBxByBD46JYmxRzeF7w2+wJEuw==}
+  magic-string@0.30.17:
     dependencies:
-      '@babel/parser': 7.23.9
-      '@babel/types': 7.23.9
-      source-map-js: 1.0.2
-    dev: true
+      '@jridgewell/sourcemap-codec': 1.5.0
 
-  /make-dir@4.0.0:
-    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
-    engines: {node: '>=10'}
+  magicast@0.3.5:
     dependencies:
-      semver: 7.5.4
-    dev: true
+      '@babel/parser': 7.28.0
+      '@babel/types': 7.28.1
+      source-map-js: 1.2.1
 
-  /markdown-table@3.0.3:
-    resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
-    dev: true
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.7.2
 
-  /marked@11.2.0:
-    resolution: {integrity: sha512-HR0m3bvu0jAPYiIvLUUQtdg1g6D247//lvcekpHO1WMvbwDlwSkZAX9Lw4F4YHE1T0HaaNve0tuAWuV1UJ6vtw==}
-    engines: {node: '>= 18'}
-    hasBin: true
-    dev: true
+  markdown-table@3.0.4: {}
 
-  /mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-    dev: true
+  marked@13.0.3: {}
 
-  /memorystream@0.3.1:
-    resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
-    engines: {node: '>= 0.10.0'}
-    dev: true
+  memorystream@0.3.1: {}
 
-  /meow@12.1.1:
-    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
-    engines: {node: '>=16.10'}
-    dev: true
+  meow@13.2.0: {}
 
-  /merge-source-map@1.1.0:
-    resolution: {integrity: sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==}
+  merge-source-map@1.1.0:
     dependencies:
       source-map: 0.6.1
-    dev: true
 
-  /merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-    dev: true
+  merge-stream@2.0.0: {}
 
-  /merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-    dev: true
+  merge2@1.4.1: {}
 
-  /micromatch@4.0.5:
-    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
-    engines: {node: '>=8.6'}
+  micromatch@4.0.8:
     dependencies:
-      braces: 3.0.2
+      braces: 3.0.3
       picomatch: 2.3.1
-    dev: true
 
-  /mime-db@1.33.0:
-    resolution: {integrity: sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==}
-    engines: {node: '>= 0.6'}
-    dev: true
+  mime-db@1.33.0: {}
 
-  /mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-    dev: true
+  mime-db@1.52.0: {}
 
-  /mime-types@2.1.18:
-    resolution: {integrity: sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==}
-    engines: {node: '>= 0.6'}
+  mime-db@1.53.0: {}
+
+  mime-types@2.1.18:
     dependencies:
       mime-db: 1.33.0
-    dev: true
 
-  /mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
+  mime-types@2.1.35:
     dependencies:
       mime-db: 1.52.0
-    dev: true
-
-  /mimic-fn@2.1.0:
-    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
-    engines: {node: '>=6'}
-    dev: true
 
-  /mimic-fn@4.0.0:
-    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
-    engines: {node: '>=12'}
-    dev: true
+  mimic-fn@2.1.0: {}
 
-  /minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-    dependencies:
-      brace-expansion: 1.1.11
-    dev: true
+  mimic-function@5.0.1: {}
 
-  /minimatch@5.1.6:
-    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
-    engines: {node: '>=10'}
+  minimatch@10.0.1:
     dependencies:
       brace-expansion: 2.0.1
-    dev: true
 
-  /minimatch@9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  minimatch@10.0.3:
     dependencies:
-      brace-expansion: 2.0.1
-    dev: true
-
-  /minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: true
+      '@isaacs/brace-expansion': 5.0.0
 
-  /minipass@7.0.4:
-    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    dev: true
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.11
 
-  /mitt@3.0.1:
-    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
-    dev: true
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.1
 
-  /mkdirp-classic@0.5.3:
-    resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
-    dev: true
+  minimist@1.2.8: {}
 
-  /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
+  minipass@7.1.2: {}
 
-  /monaco-editor@0.45.0:
-    resolution: {integrity: sha512-mjv1G1ZzfEE3k9HZN0dQ2olMdwIfaeAAjFiwNprLfYNRSz7ctv9XuCT7gPtBGrMUeV1/iZzYKj17Khu1hxoHOA==}
-    dev: false
+  mitt@3.0.1: {}
 
-  /ms@2.0.0:
-    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
-    dev: true
+  monaco-editor@0.52.2: {}
 
-  /ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
+  ms@2.0.0: {}
 
-  /nanoid@3.3.7:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
+  ms@2.1.3: {}
 
-  /natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-    dev: true
+  nano-spawn@1.0.2: {}
 
-  /negotiator@0.6.3:
-    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
-    engines: {node: '>= 0.6'}
-    dev: true
+  nanoid@3.3.11: {}
 
-  /neo-async@2.6.2:
-    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
-    dev: true
+  napi-postinstall@0.2.3: {}
 
-  /netmask@2.0.2:
-    resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
-    engines: {node: '>= 0.4.0'}
-    dev: true
+  natural-compare@1.4.0: {}
 
-  /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
+  negotiator@0.6.3: {}
 
-  /node-gyp-build@4.7.1:
-    resolution: {integrity: sha512-wTSrZ+8lsRRa3I3H8Xr65dLWSgCvY2l4AOnaeKdPA9TB/WYMPaTcrzf3rXvFoVvjKNVnu0CcWSx54qq9GKRUYg==}
-    hasBin: true
-    dev: true
+  neo-async@2.6.2: {}
 
-  /node-releases@2.0.13:
-    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
-    dev: true
+  netmask@2.0.2: {}
 
-  /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
+  node-addon-api@7.1.1:
+    optional: true
 
-  /normalize-package-data@6.0.0:
-    resolution: {integrity: sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==}
-    engines: {node: ^16.14.0 || >=18.0.0}
+  normalize-package-data@6.0.2:
     dependencies:
-      hosted-git-info: 7.0.1
-      is-core-module: 2.13.1
-      semver: 7.5.4
+      hosted-git-info: 7.0.2
+      semver: 7.7.2
       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@4.0.0: {}
 
-  /npm-run-all2@5.0.2:
-    resolution: {integrity: sha512-S2G6FWZ3pNWAAKm2PFSOtEAG/N+XO/kz3+9l6V91IY+Y3XFSt7Lp7DV92KCgEboEW0hRTu0vFaMe4zXDZYaOyA==}
-    engines: {node: '>= 10'}
-    hasBin: true
+  npm-run-all2@7.0.2:
     dependencies:
-      ansi-styles: 5.2.0
-      cross-spawn: 7.0.3
+      ansi-styles: 6.2.1
+      cross-spawn: 7.0.6
       memorystream: 0.3.1
-      minimatch: 3.1.2
-      pidtree: 0.5.0
-      read-pkg: 5.2.0
+      minimatch: 9.0.5
+      pidtree: 0.6.0
+      read-package-json-fast: 4.0.0
       shell-quote: 1.8.1
-    dev: true
+      which: 5.0.0
 
-  /npm-run-path@4.0.1:
-    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
-    engines: {node: '>=8'}
+  npm-run-path@4.0.1:
     dependencies:
       path-key: 3.1.1
-    dev: true
 
-  /npm-run-path@5.1.0:
-    resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      path-key: 4.0.0
-    dev: true
+  nwsapi@2.2.16: {}
 
-  /object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  object-assign@4.1.1: {}
 
-  /on-headers@1.0.2:
-    resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
-    engines: {node: '>= 0.8'}
-    dev: true
+  on-headers@1.0.2: {}
 
-  /once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+  once@1.4.0:
     dependencies:
       wrappy: 1.0.2
-    dev: true
 
-  /onetime@5.1.2:
-    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
-    engines: {node: '>=6'}
+  onetime@5.1.2:
     dependencies:
       mimic-fn: 2.1.0
-    dev: true
 
-  /onetime@6.0.0:
-    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
-    engines: {node: '>=12'}
+  onetime@7.0.0:
     dependencies:
-      mimic-fn: 4.0.0
-    dev: true
+      mimic-function: 5.0.1
 
-  /optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
-    engines: {node: '>= 0.8.0'}
+  optionator@0.9.4:
     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
+      word-wrap: 1.2.5
 
-  /p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
+  p-limit@3.1.0:
     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-limit@5.0.0:
-    resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==}
-    engines: {node: '>=18'}
-    dependencies:
-      yocto-queue: 1.0.0
-    dev: true
-
-  /p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
+  p-locate@5.0.0:
     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==}
-    engines: {node: '>= 14'}
+  pac-proxy-agent@7.1.0:
     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
+      agent-base: 7.1.3
+      debug: 4.4.1
+      get-uri: 6.0.3
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      pac-resolver: 7.0.1
+      socks-proxy-agent: 8.0.5
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /pac-resolver@7.0.0:
-    resolution: {integrity: sha512-Fd9lT9vJbHYRACT8OhCbZBbxr6KRSawSovFpy8nDGshaK99S/EBhVIHp9+crhxrsZOuvLpgL1n23iyPg6Rl2hg==}
-    engines: {node: '>= 14'}
+  pac-resolver@7.0.1:
     dependencies:
       degenerator: 5.0.1
-      ip: 1.1.8
       netmask: 2.0.2
-    dev: true
 
-  /pako@1.0.11:
-    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
-    dev: false
+  package-json-from-dist@1.0.0: {}
 
-  /parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
+  pako@1.0.11: {}
+
+  parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
-    dev: true
 
-  /parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
+  parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.23.5
+      '@babel/code-frame': 7.26.2
       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'}
+  parse-json@8.1.0:
     dependencies:
-      '@babel/code-frame': 7.23.5
-      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
+      '@babel/code-frame': 7.26.2
+      index-to-position: 0.1.2
+      type-fest: 4.24.0
 
-  /parse5@7.1.2:
-    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
+  parse5@7.2.1:
     dependencies:
       entities: 4.5.0
-    dev: true
-
-  /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:
-    resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==}
-    dev: true
+  path-exists@4.0.0: {}
 
-  /path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-    dev: true
+  path-is-inside@1.0.2: {}
 
-  /path-key@4.0.0:
-    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
-    engines: {node: '>=12'}
-    dev: true
+  path-key@3.1.1: {}
 
-  /path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
+  path-parse@1.0.7: {}
 
-  /path-scurry@1.10.1:
-    resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  path-scurry@1.11.1:
     dependencies:
-      lru-cache: 10.2.0
-      minipass: 7.0.4
-    dev: true
-
-  /path-to-regexp@2.2.1:
-    resolution: {integrity: sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==}
-    dev: true
+      lru-cache: 10.4.3
+      minipass: 7.1.2
 
-  /path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-    dev: true
+  path-scurry@2.0.0:
+    dependencies:
+      lru-cache: 11.0.0
+      minipass: 7.1.2
 
-  /pathe@1.1.1:
-    resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
-    dev: true
+  path-to-regexp@3.3.0: {}
 
-  /pathval@1.1.1:
-    resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
-    dev: true
+  pathe@2.0.3: {}
 
-  /pend@1.2.0:
-    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
-    dev: true
+  pathval@2.0.0: {}
 
-  /picocolors@1.0.0:
-    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+  pend@1.2.0: {}
 
-  /picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
-    dev: true
+  picocolors@1.1.1: {}
 
-  /pidtree@0.5.0:
-    resolution: {integrity: sha512-9nxspIM7OpZuhBxPg73Zvyq7j1QMPMPsGKTqRc2XOaFQauDvoNz9fM1Wdkjmeo7l9GXOZiRs97sPkuayl39wjA==}
-    engines: {node: '>=0.10'}
-    hasBin: true
-    dev: true
+  picomatch@2.3.1: {}
 
-  /pidtree@0.6.0:
-    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
-    engines: {node: '>=0.10'}
-    hasBin: true
-    dev: true
+  picomatch@4.0.2: {}
 
-  /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
+  pidtree@0.6.0: {}
 
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
+  postcss-modules-extract-imports@3.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.4.33
-    dev: true
+      postcss: 8.5.6
 
-  /postcss-modules-local-by-default@4.0.3(postcss@8.4.33):
-    resolution: {integrity: sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
+  postcss-modules-local-by-default@4.0.5(postcss@8.5.6):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.33)
-      postcss: 8.4.33
-      postcss-selector-parser: 6.0.15
+      icss-utils: 5.1.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
       postcss-value-parser: 4.2.0
-    dev: true
 
-  /postcss-modules-scope@3.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
+  postcss-modules-scope@3.2.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.4.33
-      postcss-selector-parser: 6.0.15
-    dev: true
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
 
-  /postcss-modules-values@4.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
+  postcss-modules-values@4.0.0(postcss@8.5.6):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.33)
-      postcss: 8.4.33
-    dev: true
+      icss-utils: 5.1.0(postcss@8.5.6)
+      postcss: 8.5.6
 
-  /postcss-modules@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-7DGfnlyi/ju82BRzTIjWS5C4Tafmzl3R79YP/PASiocj+aa6yYphHhhKUOEoXQToId5rgyFgJ88+ccOUydjBXQ==}
-    peerDependencies:
-      postcss: ^8.0.0
+  postcss-modules@6.0.1(postcss@8.5.6):
     dependencies:
       generic-names: 4.0.0
-      icss-utils: 5.1.0(postcss@8.4.33)
+      icss-utils: 5.1.0(postcss@8.5.6)
       lodash.camelcase: 4.3.0
-      postcss: 8.4.33
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.33)
-      postcss-modules-local-by-default: 4.0.3(postcss@8.4.33)
-      postcss-modules-scope: 3.0.0(postcss@8.4.33)
-      postcss-modules-values: 4.0.0(postcss@8.4.33)
+      postcss: 8.5.6
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.6)
+      postcss-modules-local-by-default: 4.0.5(postcss@8.5.6)
+      postcss-modules-scope: 3.2.0(postcss@8.5.6)
+      postcss-modules-values: 4.0.0(postcss@8.5.6)
       string-hash: 1.1.3
-    dev: true
 
-  /postcss-selector-parser@6.0.15:
-    resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==}
-    engines: {node: '>=4'}
+  postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
-
-  /postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
-  /postcss@8.4.33:
-    resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
-    engines: {node: ^10 || ^12 || >=14}
+  postcss-selector-parser@7.1.0:
     dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
 
-  /prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-    dev: true
+  postcss-value-parser@4.2.0: {}
 
-  /prettier@3.2.2:
-    resolution: {integrity: sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==}
-    engines: {node: '>=14'}
-    hasBin: true
-    dev: true
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
 
-  /pretty-bytes@6.1.1:
-    resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
-    engines: {node: ^14.13.1 || >=16.0.0}
-    dev: true
+  prelude-ls@1.2.1: {}
 
-  /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
+  prettier@3.5.3: {}
 
-  /process-nextick-args@2.0.1:
-    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
-    dev: false
+  pretty-bytes@6.1.1: {}
 
-  /progress@2.0.3:
-    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
-    engines: {node: '>=0.4.0'}
-    dev: true
+  process-nextick-args@2.0.1: {}
 
-  /promise@7.3.1:
-    resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
+  progress@2.0.3: {}
+
+  promise@7.3.1:
     dependencies:
       asap: 2.0.6
-    dev: true
 
-  /proxy-agent@6.3.1:
-    resolution: {integrity: sha512-Rb5RVBy1iyqOtNl15Cw/llpeLH8bsb37gM1FUfKQ+Wck6xHlbAhWGUFiTRHtkjqGTA5pSHz6+0hrPW/oECihPQ==}
-    engines: {node: '>= 14'}
+  proxy-agent@6.5.0:
     dependencies:
-      agent-base: 7.1.0
-      debug: 4.3.4
-      http-proxy-agent: 7.0.0
-      https-proxy-agent: 7.0.2
+      agent-base: 7.1.3
+      debug: 4.4.1
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
       lru-cache: 7.18.3
-      pac-proxy-agent: 7.0.1
+      pac-proxy-agent: 7.1.0
       proxy-from-env: 1.1.0
-      socks-proxy-agent: 8.0.2
+      socks-proxy-agent: 8.0.5
     transitivePeerDependencies:
       - supports-color
-    dev: true
-
-  /proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-    dev: true
 
-  /psl@1.9.0:
-    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
-    dev: true
+  proxy-from-env@1.1.0: {}
 
-  /pug-attrs@3.0.0:
-    resolution: {integrity: sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==}
+  pug-attrs@3.0.0:
     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==}
+  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.0.0
+      pug-error: 2.1.0
       pug-runtime: 3.0.1
       void-elements: 3.1.0
       with: 7.0.2
-    dev: true
 
-  /pug-error@2.0.0:
-    resolution: {integrity: sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==}
-    dev: true
+  pug-error@2.1.0: {}
 
-  /pug-filters@4.0.0:
-    resolution: {integrity: sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==}
+  pug-filters@4.0.0:
     dependencies:
       constantinople: 4.0.1
       jstransformer: 1.0.0
-      pug-error: 2.0.0
+      pug-error: 2.1.0
       pug-walk: 2.0.0
       resolve: 1.22.8
-    dev: true
 
-  /pug-lexer@5.0.1:
-    resolution: {integrity: sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==}
+  pug-lexer@5.0.1:
     dependencies:
       character-parser: 2.2.0
       is-expression: 4.0.0
-      pug-error: 2.0.0
-    dev: true
+      pug-error: 2.1.0
 
-  /pug-linker@4.0.0:
-    resolution: {integrity: sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==}
+  pug-linker@4.0.0:
     dependencies:
-      pug-error: 2.0.0
+      pug-error: 2.1.0
       pug-walk: 2.0.0
-    dev: true
 
-  /pug-load@3.0.0:
-    resolution: {integrity: sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==}
+  pug-load@3.0.0:
     dependencies:
       object-assign: 4.1.1
       pug-walk: 2.0.0
-    dev: true
 
-  /pug-parser@6.0.0:
-    resolution: {integrity: sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==}
+  pug-parser@6.0.0:
     dependencies:
-      pug-error: 2.0.0
+      pug-error: 2.1.0
       token-stream: 1.0.0
-    dev: true
 
-  /pug-runtime@3.0.1:
-    resolution: {integrity: sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==}
-    dev: true
+  pug-runtime@3.0.1: {}
 
-  /pug-strip-comments@2.0.0:
-    resolution: {integrity: sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==}
+  pug-strip-comments@2.0.0:
     dependencies:
-      pug-error: 2.0.0
-    dev: true
+      pug-error: 2.1.0
 
-  /pug-walk@2.0.0:
-    resolution: {integrity: sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==}
-    dev: true
+  pug-walk@2.0.0: {}
 
-  /pug@3.0.2:
-    resolution: {integrity: sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==}
+  pug@3.0.3:
     dependencies:
-      pug-code-gen: 3.0.2
+      pug-code-gen: 3.0.3
       pug-filters: 4.0.0
       pug-lexer: 5.0.1
       pug-linker: 4.0.0
@@ -4722,126 +5937,74 @@ packages:
       pug-parser: 6.0.0
       pug-runtime: 3.0.1
       pug-strip-comments: 2.0.0
-    dev: true
 
-  /pump@3.0.0:
-    resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
+  pump@3.0.0:
     dependencies:
       end-of-stream: 1.4.4
       once: 1.4.0
-    dev: true
 
-  /punycode@1.4.1:
-    resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==}
-    dev: true
+  punycode@2.3.1: {}
 
-  /punycode@2.3.1:
-    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
-    engines: {node: '>=6'}
-    dev: true
-
-  /puppeteer-core@21.11.0:
-    resolution: {integrity: sha512-ArbnyA3U5SGHokEvkfWjW+O8hOxV1RSJxOgriX/3A4xZRqixt9ZFHD0yPgZQF05Qj0oAqi8H/7stDorjoHY90Q==}
-    engines: {node: '>=16.13.2'}
-    dependencies:
-      '@puppeteer/browsers': 1.9.1
-      chromium-bidi: 0.5.8(devtools-protocol@0.0.1232444)
-      cross-fetch: 4.0.0
-      debug: 4.3.4
-      devtools-protocol: 0.0.1232444
-      ws: 8.16.0
+  puppeteer-core@24.9.0:
+    dependencies:
+      '@puppeteer/browsers': 2.10.5
+      chromium-bidi: 5.1.0(devtools-protocol@0.0.1439962)
+      debug: 4.4.1
+      devtools-protocol: 0.0.1439962
+      typed-query-selector: 2.12.0
+      ws: 8.18.2
     transitivePeerDependencies:
       - bufferutil
-      - encoding
       - supports-color
       - utf-8-validate
-    dev: true
 
-  /puppeteer@21.11.0(typescript@5.2.2):
-    resolution: {integrity: sha512-9jTHuYe22TD3sNxy0nEIzC7ZrlRnDgeX3xPkbS7PnbdwYjl2o/z/YuCrRBwezdKpbTDTJ4VqIggzNyeRcKq3cg==}
-    engines: {node: '>=16.13.2'}
-    hasBin: true
-    requiresBuild: true
+  puppeteer@24.9.0(typescript@5.6.3):
     dependencies:
-      '@puppeteer/browsers': 1.9.1
-      cosmiconfig: 9.0.0(typescript@5.2.2)
-      puppeteer-core: 21.11.0
+      '@puppeteer/browsers': 2.10.5
+      chromium-bidi: 5.1.0(devtools-protocol@0.0.1439962)
+      cosmiconfig: 9.0.0(typescript@5.6.3)
+      devtools-protocol: 0.0.1439962
+      puppeteer-core: 24.9.0
+      typed-query-selector: 2.12.0
     transitivePeerDependencies:
       - bufferutil
-      - encoding
       - supports-color
       - typescript
       - utf-8-validate
-    dev: true
-
-  /querystringify@2.2.0:
-    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
-    dev: true
-
-  /queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: true
 
-  /queue-tick@1.0.1:
-    resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}
-    dev: true
+  queue-microtask@1.2.3: {}
 
-  /randombytes@2.1.0:
-    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
-    dependencies:
-      safe-buffer: 5.2.1
-    dev: true
+  queue-tick@1.0.1: {}
 
-  /range-parser@1.2.0:
-    resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
-    engines: {node: '>= 0.6'}
-    dev: true
+  range-parser@1.2.0: {}
 
-  /rc@1.2.8:
-    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
-    hasBin: true
+  rc@1.2.8:
     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-pkg-up@10.1.0:
-    resolution: {integrity: sha512-aNtBq4jR8NawpKJQldrQcSW9y/d+KWH4v24HWkHljOZ7H0av+YTGANBzRh9A5pw7v/bLVsLVPpOhJ7gHNVy8lA==}
-    engines: {node: '>=16'}
+  read-package-json-fast@4.0.0:
     dependencies:
-      find-up: 6.3.0
-      read-pkg: 8.1.0
-      type-fest: 4.5.0
-    dev: true
+      json-parse-even-better-errors: 4.0.0
+      npm-normalize-package-bin: 4.0.0
 
-  /read-pkg@5.2.0:
-    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
-    engines: {node: '>=8'}
+  read-package-up@11.0.0:
     dependencies:
-      '@types/normalize-package-data': 2.4.3
-      normalize-package-data: 2.5.0
-      parse-json: 5.2.0
-      type-fest: 0.6.0
-    dev: true
+      find-up-simple: 1.0.0
+      read-pkg: 9.0.1
+      type-fest: 4.24.0
 
-  /read-pkg@8.1.0:
-    resolution: {integrity: sha512-PORM8AgzXeskHO/WEv312k9U03B8K9JSiWF/8N9sUuFjBa+9SF2u6K7VClzXwDXab51jCd8Nd36CNM+zR97ScQ==}
-    engines: {node: '>=16'}
+  read-pkg@9.0.1:
     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
+      '@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:
-    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+  readable-stream@2.3.8:
     dependencies:
       core-util-is: 1.0.3
       inherits: 2.0.4
@@ -4850,236 +6013,136 @@ packages:
       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: {}
 
-  /registry-auth-token@3.3.2:
-    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
+  registry-auth-token@3.3.2:
     dependencies:
       rc: 1.2.8
       safe-buffer: 5.2.1
-    dev: true
 
-  /registry-url@3.1.0:
-    resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==}
-    engines: {node: '>=0.10.0'}
+  registry-url@3.1.0:
     dependencies:
       rc: 1.2.8
-    dev: true
-
-  /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:
-    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  require-directory@2.1.1: {}
 
-  /requires-port@1.0.0:
-    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
-    dev: true
+  require-from-string@2.0.2: {}
 
-  /resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-    dev: true
+  resolve-from@4.0.0: {}
 
-  /resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-    dev: true
+  resolve-pkg-maps@1.0.0: {}
 
-  /resolve@1.22.8:
-    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
-    hasBin: true
+  resolve@1.22.8:
     dependencies:
-      is-core-module: 2.13.1
+      is-core-module: 2.15.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}
+  restore-cursor@5.1.0:
     dependencies:
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-    dev: true
-
-  /reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: true
+      onetime: 7.0.0
+      signal-exit: 4.1.0
 
-  /rfdc@1.3.0:
-    resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
-    dev: true
+  reusify@1.1.0: {}
 
-  /rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    hasBin: true
-    dependencies:
-      glob: 7.2.3
-    dev: true
+  rfdc@1.4.1: {}
 
-  /rimraf@5.0.5:
-    resolution: {integrity: sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==}
-    engines: {node: '>=14'}
-    hasBin: true
+  rimraf@6.0.1:
     dependencies:
-      glob: 10.3.10
-    dev: true
+      glob: 11.0.0
+      package-json-from-dist: 1.0.0
 
-  /rollup-plugin-dts@6.1.0(rollup@4.9.2)(typescript@5.2.2):
-    resolution: {integrity: sha512-ijSCPICkRMDKDLBK9torss07+8dl9UpY9z1N/zTeA1cIqdzMlpkV3MOOC7zukyvQfDyxa1s3Dl2+DeiP/G6DOw==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      rollup: ^3.29.4 || ^4
-      typescript: ^4.5 || ^5.0
+  rollup-plugin-dts@6.2.1(rollup@4.45.1)(typescript@5.6.3):
     dependencies:
-      magic-string: 0.30.6
-      rollup: 4.9.2
-      typescript: 5.2.2
+      magic-string: 0.30.17
+      rollup: 4.45.1
+      typescript: 5.6.3
     optionalDependencies:
-      '@babel/code-frame': 7.23.5
-    dev: true
+      '@babel/code-frame': 7.26.2
 
-  /rollup-plugin-esbuild@6.1.1(esbuild@0.20.0)(rollup@4.9.2):
-    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
+  rollup-plugin-esbuild@6.2.1(esbuild@0.25.8)(rollup@4.45.1):
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
-      debug: 4.3.4
-      es-module-lexer: 1.3.1
-      esbuild: 0.20.0
-      get-tsconfig: 4.7.2
-      rollup: 4.9.2
+      debug: 4.4.0
+      es-module-lexer: 1.6.0
+      esbuild: 0.25.8
+      get-tsconfig: 4.10.0
+      rollup: 4.45.1
+      unplugin-utils: 0.2.4
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /rollup-plugin-polyfill-node@0.13.0(rollup@4.9.2):
-    resolution: {integrity: sha512-FYEvpCaD5jGtyBuBFcQImEGmTxDTPbiHjJdrYIp+mFIwgXiXabxvKUK7ZT9P31ozu2Tqm9llYQMRWsfvTMTAOw==}
-    peerDependencies:
-      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
+  rollup-plugin-polyfill-node@0.13.0(rollup@4.45.1):
     dependencies:
-      '@rollup/plugin-inject': 5.0.5(rollup@4.9.2)
-      rollup: 4.9.2
-    dev: true
+      '@rollup/plugin-inject': 5.0.5(rollup@4.45.1)
+      rollup: 4.45.1
 
-  /rollup@4.9.2:
-    resolution: {integrity: sha512-66RB8OtFKUTozmVEh3qyNfH+b+z2RXBVloqO2KCC/pjFaGaHtxP9fVfOQKPSGXg2mElmjmxjW/fZ7iKrEpMH5Q==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
+  rollup@4.45.1:
+    dependencies:
+      '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.9.2
-      '@rollup/rollup-android-arm64': 4.9.2
-      '@rollup/rollup-darwin-arm64': 4.9.2
-      '@rollup/rollup-darwin-x64': 4.9.2
-      '@rollup/rollup-linux-arm-gnueabihf': 4.9.2
-      '@rollup/rollup-linux-arm64-gnu': 4.9.2
-      '@rollup/rollup-linux-arm64-musl': 4.9.2
-      '@rollup/rollup-linux-riscv64-gnu': 4.9.2
-      '@rollup/rollup-linux-x64-gnu': 4.9.2
-      '@rollup/rollup-linux-x64-musl': 4.9.2
-      '@rollup/rollup-win32-arm64-msvc': 4.9.2
-      '@rollup/rollup-win32-ia32-msvc': 4.9.2
-      '@rollup/rollup-win32-x64-msvc': 4.9.2
+      '@rollup/rollup-android-arm-eabi': 4.45.1
+      '@rollup/rollup-android-arm64': 4.45.1
+      '@rollup/rollup-darwin-arm64': 4.45.1
+      '@rollup/rollup-darwin-x64': 4.45.1
+      '@rollup/rollup-freebsd-arm64': 4.45.1
+      '@rollup/rollup-freebsd-x64': 4.45.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.45.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.45.1
+      '@rollup/rollup-linux-arm64-gnu': 4.45.1
+      '@rollup/rollup-linux-arm64-musl': 4.45.1
+      '@rollup/rollup-linux-loongarch64-gnu': 4.45.1
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.45.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.45.1
+      '@rollup/rollup-linux-riscv64-musl': 4.45.1
+      '@rollup/rollup-linux-s390x-gnu': 4.45.1
+      '@rollup/rollup-linux-x64-gnu': 4.45.1
+      '@rollup/rollup-linux-x64-musl': 4.45.1
+      '@rollup/rollup-win32-arm64-msvc': 4.45.1
+      '@rollup/rollup-win32-ia32-msvc': 4.45.1
+      '@rollup/rollup-win32-x64-msvc': 4.45.1
       fsevents: 2.3.3
-    dev: true
 
-  /rrweb-cssom@0.6.0:
-    resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
-    dev: true
+  rrweb-cssom@0.8.0: {}
 
-  /run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+  run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
-    dev: true
-
-  /safe-buffer@5.1.2:
-    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
-
-  /safe-buffer@5.2.1:
-    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
-    dev: true
-
-  /safer-buffer@2.1.2:
-    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
-    dev: true
 
-  /sass@1.70.0:
-    resolution: {integrity: sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==}
-    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:
-    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
-    engines: {node: '>=v12.22.7'}
-    dependencies:
-      xmlchars: 2.2.0
-    dev: true
+  safe-buffer@5.1.2: {}
 
-  /semver@5.7.2:
-    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
-    hasBin: true
-    dev: true
+  safe-buffer@5.2.1: {}
 
-  /semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-    dev: true
+  safer-buffer@2.1.2: {}
 
-  /semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
-    engines: {node: '>=10'}
-    hasBin: true
+  sass@1.89.2:
     dependencies:
-      lru-cache: 6.0.0
-    dev: true
+      chokidar: 4.0.1
+      immutable: 5.0.2
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.4.1
 
-  /serialize-javascript@6.0.1:
-    resolution: {integrity: sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==}
+  saxes@6.0.0:
     dependencies:
-      randombytes: 2.1.0
-    dev: true
+      xmlchars: 2.2.0
 
-  /serve-handler@6.1.5:
-    resolution: {integrity: sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==}
+  semver@7.7.2: {}
+
+  serve-handler@6.1.6:
     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
+      path-to-regexp: 3.3.0
       range-parser: 1.2.0
-    dev: true
 
-  /serve@14.2.1:
-    resolution: {integrity: sha512-48er5fzHh7GCShLnNyPBRPEjs2I6QBozeGr02gaacROiyS/8ARADlj595j39iZXAqBbJHH/ivJJyPRWY9sQWZA==}
-    engines: {node: '>= 14'}
-    hasBin: true
+  serve@14.2.4:
     dependencies:
-      '@zeit/schemas': 2.29.0
-      ajv: 8.11.0
+      '@zeit/schemas': 2.36.0
+      ajv: 8.12.0
       arg: 5.0.2
       boxen: 7.0.0
       chalk: 5.0.1
@@ -5087,862 +6150,465 @@ packages:
       clipboardy: 3.0.0
       compression: 1.7.4
       is-port-reachable: 4.0.0
-      serve-handler: 6.1.5
+      serve-handler: 6.1.6
       update-check: 1.5.4
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /set-function-length@1.1.1:
-    resolution: {integrity: sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==}
-    engines: {node: '>= 0.4'}
+  set-function-length@1.2.2:
     dependencies:
-      define-data-property: 1.1.1
-      get-intrinsic: 1.2.1
+      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.0
-    dev: true
+      has-property-descriptors: 1.0.2
 
-  /setimmediate@1.0.5:
-    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
-    dev: false
+  setimmediate@1.0.5: {}
 
-  /shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
+  shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
-    dev: true
-
-  /shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /shell-quote@1.8.1:
-    resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
-    dev: true
 
-  /siginfo@2.0.0:
-    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
-    dev: true
+  shebang-regex@3.0.0: {}
 
-  /signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-    dev: true
+  shell-quote@1.8.1: {}
 
-  /signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
-    dev: true
+  siginfo@2.0.0: {}
 
-  /simple-git-hooks@2.9.0:
-    resolution: {integrity: sha512-waSQ5paUQtyGC0ZxlHmcMmD9I1rRXauikBwX31bX58l5vTOhCEcBC5Bi+ZDkPXTjDnZAF8TbCqKBY+9+sVPScw==}
-    hasBin: true
-    requiresBuild: true
-    dev: true
+  signal-exit@3.0.7: {}
 
-  /slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-    dev: true
+  signal-exit@4.1.0: {}
 
-  /slash@4.0.0:
-    resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
-    engines: {node: '>=12'}
-    dev: true
+  simple-git-hooks@2.13.0: {}
 
-  /slice-ansi@5.0.0:
-    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
-    engines: {node: '>=12'}
+  slice-ansi@5.0.0:
     dependencies:
       ansi-styles: 6.2.1
       is-fullwidth-code-point: 4.0.0
-    dev: true
 
-  /slice-ansi@7.1.0:
-    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
-    engines: {node: '>=18'}
+  slice-ansi@7.1.0:
     dependencies:
       ansi-styles: 6.2.1
       is-fullwidth-code-point: 5.0.0
-    dev: true
-
-  /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
+  smart-buffer@4.2.0: {}
 
-  /socks-proxy-agent@8.0.2:
-    resolution: {integrity: sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==}
-    engines: {node: '>= 14'}
+  socks-proxy-agent@8.0.5:
     dependencies:
-      agent-base: 7.1.0
-      debug: 4.3.4
-      socks: 2.7.1
+      agent-base: 7.1.3
+      debug: 4.4.1
+      socks: 2.8.3
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /socks@2.7.1:
-    resolution: {integrity: sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==}
-    engines: {node: '>= 10.13.0', npm: '>= 3.0.0'}
+  socks@2.8.3:
     dependencies:
-      ip: 2.0.0
+      ip-address: 9.0.5
       smart-buffer: 4.2.0
-    dev: true
-
-  /source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
-    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: {}
 
-  /source-map@0.6.1:
-    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  source-map@0.6.1: {}
 
-  /spdx-correct@3.2.0:
-    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+  spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.16
-    dev: true
+      spdx-license-ids: 3.0.18
 
-  /spdx-exceptions@2.3.0:
-    resolution: {integrity: sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==}
-    dev: true
+  spdx-exceptions@2.5.0: {}
 
-  /spdx-expression-parse@3.0.1:
-    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+  spdx-expression-parse@3.0.1:
     dependencies:
-      spdx-exceptions: 2.3.0
-      spdx-license-ids: 3.0.16
-    dev: true
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.18
 
-  /spdx-license-ids@3.0.16:
-    resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==}
-    dev: true
+  spdx-license-ids@3.0.18: {}
 
-  /split2@4.2.0:
-    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
-    engines: {node: '>= 10.x'}
-    dev: true
+  sprintf-js@1.1.3: {}
 
-  /stackback@0.0.2:
-    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
-    dev: true
+  stable-hash@0.0.5: {}
+
+  stackback@0.0.2: {}
 
-  /std-env@3.6.0:
-    resolution: {integrity: sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg==}
-    dev: true
+  std-env@3.9.0: {}
 
-  /streamx@2.15.1:
-    resolution: {integrity: sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==}
+  streamx@2.18.0:
     dependencies:
       fast-fifo: 1.3.2
       queue-tick: 1.0.1
-    dev: true
+      text-decoder: 1.1.1
+    optionalDependencies:
+      bare-events: 2.4.2
 
-  /string-argv@0.3.2:
-    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
-    engines: {node: '>=0.6.19'}
-    dev: true
+  string-argv@0.3.2: {}
 
-  /string-hash@1.1.3:
-    resolution: {integrity: sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==}
-    dev: true
+  string-hash@1.1.3: {}
 
-  /string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
+  string-width@4.2.3:
     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:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
+  string-width@5.1.2:
     dependencies:
       eastasianwidth: 0.2.0
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
-    dev: true
 
-  /string-width@7.0.0:
-    resolution: {integrity: sha512-GPQHj7row82Hjo9hKZieKcHIhaAIKOJvFSIZXuCU9OASVZrMNUaZuz++SPVrBjnLsnk4k+z9f2EIypgxf2vNFw==}
-    engines: {node: '>=18'}
+  string-width@7.2.0:
     dependencies:
       emoji-regex: 10.3.0
       get-east-asian-width: 1.2.0
       strip-ansi: 7.1.0
-    dev: true
 
-  /string_decoder@1.1.1:
-    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+  string_decoder@1.1.1:
     dependencies:
       safe-buffer: 5.1.2
-    dev: false
 
-  /strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
+  strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
-    dev: true
 
-  /strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
-    engines: {node: '>=12'}
+  strip-ansi@7.1.0:
     dependencies:
       ansi-regex: 6.0.1
-    dev: true
-
-  /strip-final-newline@2.0.0:
-    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
-    engines: {node: '>=6'}
-    dev: true
-
-  /strip-final-newline@3.0.0:
-    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
-    engines: {node: '>=12'}
-    dev: true
-
-  /strip-json-comments@2.0.1:
-    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
 
-  /strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-    dev: true
+  strip-final-newline@2.0.0: {}
 
-  /strip-literal@1.3.0:
-    resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
-    dependencies:
-      acorn: 8.10.0
-    dev: true
+  strip-json-comments@2.0.1: {}
 
-  /supports-color@5.5.0:
-    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
-    engines: {node: '>=4'}
-    requiresBuild: true
-    dependencies:
-      has-flag: 3.0.0
-    dev: true
+  strip-json-comments@3.1.1: {}
 
-  /supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
+  supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
-    dev: true
 
-  /supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
-    dev: true
+  supports-preserve-symlinks-flag@1.0.0: {}
 
-  /symbol-tree@3.2.4:
-    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
-    dev: true
+  symbol-tree@3.2.4: {}
 
-  /tar-fs@3.0.4:
-    resolution: {integrity: sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==}
+  tar-fs@3.0.8:
     dependencies:
-      mkdirp-classic: 0.5.3
       pump: 3.0.0
-      tar-stream: 3.1.6
-    dev: true
+      tar-stream: 3.1.7
+    optionalDependencies:
+      bare-fs: 4.0.1
+      bare-path: 3.0.0
 
-  /tar-stream@3.1.6:
-    resolution: {integrity: sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==}
+  tar-stream@3.1.7:
     dependencies:
-      b4a: 1.6.4
+      b4a: 1.6.6
       fast-fifo: 1.3.2
-      streamx: 2.15.1
-    dev: true
+      streamx: 2.18.0
 
-  /temp-dir@3.0.0:
-    resolution: {integrity: sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==}
-    engines: {node: '>=14.16'}
-    dev: true
+  temp-dir@3.0.0: {}
 
-  /tempfile@5.0.0:
-    resolution: {integrity: sha512-bX655WZI/F7EoTDw9JvQURqAXiPHi8o8+yFxPF2lWYyz1aHnmMRuXWqL6YB6GmeO0o4DIYWHLgGNi/X64T+X4Q==}
-    engines: {node: '>=14.18'}
+  tempfile@5.0.0:
     dependencies:
       temp-dir: 3.0.0
-    dev: true
 
-  /terser@5.27.0:
-    resolution: {integrity: sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==}
-    engines: {node: '>=10'}
-    hasBin: true
+  test-exclude@7.0.1:
     dependencies:
-      '@jridgewell/source-map': 0.3.5
-      acorn: 8.10.0
-      commander: 2.20.3
-      source-map-support: 0.5.21
-    dev: true
+      '@istanbuljs/schema': 0.1.3
+      glob: 10.4.5
+      minimatch: 9.0.5
 
-  /test-exclude@6.0.0:
-    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
-    engines: {node: '>=8'}
+  text-decoder@1.1.1:
     dependencies:
-      '@istanbuljs/schema': 0.1.3
-      glob: 7.2.3
-      minimatch: 3.1.2
-    dev: true
+      b4a: 1.6.6
 
-  /text-extensions@2.4.0:
-    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
-    engines: {node: '>=8'}
-    dev: true
+  tinybench@2.9.0: {}
 
-  /text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-    dev: true
+  tinyexec@0.3.2: {}
 
-  /through@2.3.8:
-    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
-    dev: true
+  tinyglobby@0.2.13:
+    dependencies:
+      fdir: 6.4.4(picomatch@4.0.2)
+      picomatch: 4.0.2
 
-  /tinybench@2.5.1:
-    resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
-    dev: true
+  tinypool@1.0.2: {}
 
-  /tinypool@0.8.2:
-    resolution: {integrity: sha512-SUszKYe5wgsxnNOVlBYO6IC+8VGWdVGZWAqUxp3UErNBtptZvWbwyUOyzNL59zigz2rCA92QiL3wvG+JDSdJdQ==}
-    engines: {node: '>=14.0.0'}
-    dev: true
+  tinyrainbow@2.0.0: {}
 
-  /tinyspy@2.2.0:
-    resolution: {integrity: sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg==}
-    engines: {node: '>=14.0.0'}
-    dev: true
+  tinyspy@3.0.2: {}
 
-  /to-fast-properties@2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
+  tldts-core@6.1.86: {}
 
-  /to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+
+  to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
-    dev: true
 
-  /todomvc-app-css@2.4.3:
-    resolution: {integrity: sha512-mSnWZaKBWj9aQcFRsGguY/a8O8NR8GmecD48yU1rzwNemgZa/INLpIsxxMiToFGVth+uEKBrQ7IhWkaXZxwq5Q==}
-    engines: {node: '>=4'}
-    dev: true
+  todomvc-app-css@2.4.3: {}
 
-  /token-stream@1.0.0:
-    resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
-    dev: true
+  token-stream@1.0.0: {}
 
-  /tough-cookie@4.1.3:
-    resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
-    engines: {node: '>=6'}
+  tough-cookie@5.1.2:
     dependencies:
-      psl: 1.9.0
-      punycode: 2.3.1
-      universalify: 0.2.0
-      url-parse: 1.5.10
-    dev: true
-
-  /tr46@0.0.3:
-    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
-    dev: true
+      tldts: 6.1.86
 
-  /tr46@5.0.0:
-    resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==}
-    engines: {node: '>=18'}
+  tr46@5.1.1:
     dependencies:
       punycode: 2.3.1
-    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'}
-    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.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'
+  ts-api-utils@2.1.0(typescript@5.6.3):
     dependencies:
-      tslib: 1.14.1
-      typescript: 5.2.2
-    dev: true
+      typescript: 5.6.3
 
-  /tsx@4.7.0:
-    resolution: {integrity: sha512-I+t79RYPlEYlHn9a+KzwrvEwhJg35h/1zHsLC2JXvhC2mdynMv6Zxzvhv5EMV6VF5qJlLlkSnMVvdZV3PSIGcg==}
-    engines: {node: '>=18.0.0'}
-    hasBin: true
-    dependencies:
-      esbuild: 0.19.10
-      get-tsconfig: 4.7.2
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
+  tslib@2.8.1: {}
 
-  /type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
+  type-check@0.4.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@0.6.0:
-    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
-    engines: {node: '>=8'}
-    dev: true
 
-  /type-fest@2.19.0:
-    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
-    engines: {node: '>=12.20'}
-    dev: true
+  type-fest@2.19.0: {}
 
-  /type-fest@3.13.1:
-    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
-    engines: {node: '>=14.16'}
-    dev: true
+  type-fest@4.24.0: {}
 
-  /type-fest@4.5.0:
-    resolution: {integrity: sha512-diLQivFzddJl4ylL3jxSkEc39Tpw7o1QeEHIPxVwryDK2lpB7Nqhzhuo6v5/Ls08Z0yPSAhsyAWlv1/H0ciNmw==}
-    engines: {node: '>=16'}
-    dev: true
+  typed-query-selector@2.12.0: {}
 
-  /typescript@5.2.2:
-    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
-    engines: {node: '>=14.17'}
-    hasBin: true
+  typescript-eslint@8.32.1(eslint@9.27.0)(typescript@5.6.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.27.0)(typescript@5.6.3))(eslint@9.27.0)(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.32.1(eslint@9.27.0)(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0)(typescript@5.6.3)
+      eslint: 9.27.0
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
 
-  /ufo@1.3.1:
-    resolution: {integrity: sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==}
-    dev: true
+  typescript@5.6.3: {}
 
-  /uglify-js@3.17.4:
-    resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
-    engines: {node: '>=0.8.0'}
-    hasBin: true
-    requiresBuild: true
-    dev: true
+  uglify-js@3.19.1:
     optional: true
 
-  /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.21.0: {}
 
-  /universalify@0.1.2:
-    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
-    engines: {node: '>= 4.0.0'}
-    dev: true
+  unicorn-magic@0.1.0: {}
 
-  /universalify@0.2.0:
-    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
-    engines: {node: '>= 4.0.0'}
-    dev: true
+  universalify@2.0.1: {}
 
-  /update-browserslist-db@1.0.13(browserslist@4.22.1):
-    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
+  unplugin-utils@0.2.4:
     dependencies:
-      browserslist: 4.22.1
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: true
+      pathe: 2.0.3
+      picomatch: 4.0.2
 
-  /update-check@1.5.4:
-    resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
+  unrs-resolver@1.7.2:
+    dependencies:
+      napi-postinstall: 0.2.3
+    optionalDependencies:
+      '@unrs/resolver-binding-darwin-arm64': 1.7.2
+      '@unrs/resolver-binding-darwin-x64': 1.7.2
+      '@unrs/resolver-binding-freebsd-x64': 1.7.2
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.7.2
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.7.2
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.7.2
+      '@unrs/resolver-binding-linux-arm64-musl': 1.7.2
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.7.2
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.7.2
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.7.2
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.7.2
+      '@unrs/resolver-binding-linux-x64-gnu': 1.7.2
+      '@unrs/resolver-binding-linux-x64-musl': 1.7.2
+      '@unrs/resolver-binding-wasm32-wasi': 1.7.2
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.7.2
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.7.2
+      '@unrs/resolver-binding-win32-x64-msvc': 1.7.2
+
+  update-check@1.5.4:
     dependencies:
       registry-auth-token: 3.3.2
       registry-url: 3.1.0
-    dev: true
 
-  /uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+  uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
-    dev: true
-
-  /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@10.0.0:
-    resolution: {integrity: sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==}
-    dev: true
+  util-deprecate@1.0.2: {}
 
-  /util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-
-  /validate-npm-package-license@3.0.4:
-    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
+  validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
-    dev: true
 
-  /vary@1.1.2:
-    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
-    engines: {node: '>= 0.8'}
-    dev: true
+  vary@1.1.2: {}
 
-  /vite-node@1.2.2(@types/node@20.11.16)(terser@5.27.0):
-    resolution: {integrity: sha512-1as4rDTgVWJO3n1uHmUYqq7nsFgINQ9u+mRcXpjeOMJUmviqNKjcZB7UfRZrlM7MjYXMKpuWp5oGkjaFLnjawg==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
+  vite-node@3.1.4(@types/node@22.16.5)(sass@1.89.2):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.4
-      pathe: 1.1.1
-      picocolors: 1.0.0
-      vite: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
+      debug: 4.4.1
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 5.4.19(@types/node@22.16.5)(sass@1.89.2)
     transitivePeerDependencies:
       - '@types/node'
       - less
       - lightningcss
       - sass
+      - sass-embedded
       - stylus
       - sugarss
       - supports-color
       - terser
-    dev: true
 
-  /vite@5.0.12(@types/node@20.11.16)(terser@5.27.0):
-    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
-    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: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
+  vite@5.4.15(@types/node@22.16.5)(sass@1.89.2):
     dependencies:
-      '@types/node': 20.11.16
-      esbuild: 0.19.10
-      postcss: 8.4.33
-      rollup: 4.9.2
-      terser: 5.27.0
+      esbuild: 0.21.5
+      postcss: 8.5.6
+      rollup: 4.45.1
     optionalDependencies:
+      '@types/node': 22.16.5
       fsevents: 2.3.3
-    dev: true
+      sass: 1.89.2
 
-  /vitest@1.2.2(@types/node@20.11.16)(jsdom@23.2.0)(terser@5.27.0):
-    resolution: {integrity: sha512-d5Ouvrnms3GD9USIK36KG8OZ5bEvKEkITFtnGv56HFaSlbItJuYr7hv2Lkn903+AvRAgSixiamozUVfORUekjw==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-    peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': ^1.0.0
-      '@vitest/ui': ^1.0.0
-      happy-dom: '*'
-      jsdom: '*'
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@types/node':
-        optional: true
-      '@vitest/browser':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
+  vite@5.4.19(@types/node@22.16.5)(sass@1.89.2):
     dependencies:
-      '@types/node': 20.11.16
-      '@vitest/expect': 1.2.2
-      '@vitest/runner': 1.2.2
-      '@vitest/snapshot': 1.2.2
-      '@vitest/spy': 1.2.2
-      '@vitest/utils': 1.2.2
-      acorn-walk: 8.3.2
-      cac: 6.7.14
-      chai: 4.3.10
-      debug: 4.3.4
-      execa: 8.0.1
-      jsdom: 23.2.0
-      local-pkg: 0.5.0
-      magic-string: 0.30.6
-      pathe: 1.1.1
-      picocolors: 1.0.0
-      std-env: 3.6.0
-      strip-literal: 1.3.0
-      tinybench: 2.5.1
-      tinypool: 0.8.2
-      vite: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
-      vite-node: 1.2.2(@types/node@20.11.16)(terser@5.27.0)
-      why-is-node-running: 2.2.2
+      esbuild: 0.21.5
+      postcss: 8.5.6
+      rollup: 4.45.1
+    optionalDependencies:
+      '@types/node': 22.16.5
+      fsevents: 2.3.3
+      sass: 1.89.2
+
+  vitest@3.1.4(@types/node@22.16.5)(jsdom@26.1.0)(sass@1.89.2):
+    dependencies:
+      '@vitest/expect': 3.1.4
+      '@vitest/mocker': 3.1.4(vite@5.4.19(@types/node@22.16.5)(sass@1.89.2))
+      '@vitest/pretty-format': 3.1.4
+      '@vitest/runner': 3.1.4
+      '@vitest/snapshot': 3.1.4
+      '@vitest/spy': 3.1.4
+      '@vitest/utils': 3.1.4
+      chai: 5.2.0
+      debug: 4.4.1
+      expect-type: 1.2.1
+      magic-string: 0.30.17
+      pathe: 2.0.3
+      std-env: 3.9.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.13
+      tinypool: 1.0.2
+      tinyrainbow: 2.0.0
+      vite: 5.4.19(@types/node@22.16.5)(sass@1.89.2)
+      vite-node: 3.1.4(@types/node@22.16.5)(sass@1.89.2)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 22.16.5
+      jsdom: 26.1.0
     transitivePeerDependencies:
       - less
       - lightningcss
+      - msw
       - sass
+      - sass-embedded
       - stylus
       - sugarss
       - supports-color
       - terser
-    dev: true
 
-  /void-elements@3.1.0:
-    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  void-elements@3.1.0: {}
 
-  /w3c-xmlserializer@5.0.0:
-    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
-    engines: {node: '>=18'}
+  w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
-    dev: true
 
-  /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@3.1.1:
-    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
-    engines: {node: '>=18'}
+  whatwg-encoding@3.1.1:
     dependencies:
       iconv-lite: 0.6.3
-    dev: true
 
-  /whatwg-mimetype@4.0.0:
-    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
-    engines: {node: '>=18'}
-    dev: true
+  whatwg-mimetype@4.0.0: {}
 
-  /whatwg-url@14.0.0:
-    resolution: {integrity: sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==}
-    engines: {node: '>=18'}
+  whatwg-url@14.2.0:
     dependencies:
-      tr46: 5.0.0
+      tr46: 5.1.1
       webidl-conversions: 7.0.0
-    dev: true
 
-  /whatwg-url@5.0.0:
-    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+  which@2.0.2:
     dependencies:
-      tr46: 0.0.3
-      webidl-conversions: 3.0.1
-    dev: true
+      isexe: 2.0.0
 
-  /which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
+  which@5.0.0:
     dependencies:
-      isexe: 2.0.0
-    dev: true
+      isexe: 3.1.1
 
-  /why-is-node-running@2.2.2:
-    resolution: {integrity: sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==}
-    engines: {node: '>=8'}
-    hasBin: true
+  why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
       stackback: 0.0.2
-    dev: true
 
-  /widest-line@4.0.1:
-    resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
-    engines: {node: '>=12'}
+  widest-line@4.0.1:
     dependencies:
       string-width: 5.1.2
-    dev: true
 
-  /with@7.0.2:
-    resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}
-    engines: {node: '>= 10.0.0'}
+  with@7.0.2:
     dependencies:
-      '@babel/parser': 7.23.9
-      '@babel/types': 7.23.9
-      assert-never: 1.2.1
+      '@babel/parser': 7.28.0
+      '@babel/types': 7.28.1
+      assert-never: 1.3.0
       babel-walk: 3.0.0-canary-5
-    dev: true
 
-  /wordwrap@1.0.0:
-    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
-    dev: true
+  word-wrap@1.2.5: {}
 
-  /wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
+  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
-    dev: true
 
-  /wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
+  wrap-ansi@8.1.0:
     dependencies:
       ansi-styles: 6.2.1
       string-width: 5.1.2
       strip-ansi: 7.1.0
-    dev: true
 
-  /wrap-ansi@9.0.0:
-    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
-    engines: {node: '>=18'}
+  wrap-ansi@9.0.0:
     dependencies:
       ansi-styles: 6.2.1
-      string-width: 7.0.0
+      string-width: 7.2.0
       strip-ansi: 7.1.0
-    dev: true
-
-  /wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: true
 
-  /ws@8.16.0:
-    resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: '>=5.0.2'
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-    dev: true
+  wrappy@1.0.2: {}
 
-  /xml-name-validator@5.0.0:
-    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
-    engines: {node: '>=18'}
-    dev: true
+  ws@8.18.1: {}
 
-  /xmlchars@2.2.0:
-    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
-    dev: true
+  ws@8.18.2: {}
 
-  /y18n@5.0.8:
-    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
-    engines: {node: '>=10'}
-    dev: true
+  xml-name-validator@5.0.0: {}
 
-  /yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-    dev: true
+  xmlchars@2.2.0: {}
 
-  /yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-    dev: true
+  y18n@5.0.8: {}
 
-  /yaml@2.3.4:
-    resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
-    engines: {node: '>= 14'}
-    dev: true
+  yaml@2.8.0: {}
 
-  /yargs-parser@21.1.1:
-    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
-    engines: {node: '>=12'}
-    dev: true
+  yargs-parser@21.1.1: {}
 
-  /yargs@17.7.2:
-    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
-    engines: {node: '>=12'}
+  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.24.1: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 18ec407efca..3349459a15e 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,27 @@
 packages:
   - 'packages/*'
+  - 'packages-private/*'
+
+catalog:
+  '@babel/parser': ^7.28.0
+  '@babel/types': ^7.28.1
+  'estree-walker': ^2.0.2
+  'magic-string': ^0.30.17
+  'source-map-js': ^1.2.1
+  'vite': ^5.4.15
+  '@vitejs/plugin-vue': ^5.2.4
+
+onlyBuiltDependencies:
+  - '@swc/core'
+  - 'esbuild'
+  - 'puppeteer'
+  - 'simple-git-hooks'
+  - 'unrs-resolver'
+
+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/rollup.config.js b/rollup.config.js
index 657b711b1a3..da7de554b64 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -2,6 +2,7 @@
 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'
@@ -9,11 +10,11 @@ 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 { inlineEnums } from './scripts/inline-enums.js'
+import { minify as minifySwc } from '@swc/core'
 
 /**
  * @template T
@@ -33,7 +34,11 @@ 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 = (/** @type {string} */ p) => path.resolve(packageDir, p)
@@ -41,6 +46,12 @@ const pkg = require(resolve(`package.json`))
 const packageOptions = pkg.buildOptions || {}
 const name = packageOptions.filename || path.basename(packageDir)
 
+const banner = `/**
+* ${pkg.name} v${masterVersion}
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/`
+
 const [enumPlugin, enumDefines] = inlineEnums()
 
 /** @type {Record<PackageFormat, OutputOptions>} */
@@ -131,11 +142,7 @@ 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.banner = banner
 
   output.exports = isCompatPackage ? 'auto' : 'named'
   if (isCJSBuild) {
@@ -143,6 +150,8 @@ function createConfig(format, output, plugins = []) {
   }
   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
@@ -174,7 +183,7 @@ function createConfig(format, output, plugins = []) {
       // is targeting Node (SSR)?
       __CJS__: String(isCJSBuild),
       // need SSR-specific branches?
-      __SSR__: String(isCJSBuild || isBundlerESMBuild || isServerRenderer),
+      __SSR__: String(!isGlobalBuild),
 
       // 2.x compat build
       __COMPAT__: String(isCompatBuild),
@@ -216,10 +225,10 @@ 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(`,
       })
     }
 
@@ -329,7 +338,7 @@ function createConfig(format, output, plugins = []) {
         tsconfig: path.resolve(__dirname, 'tsconfig.json'),
         sourceMap: output.sourcemap,
         minify: false,
-        target: isServerRenderer || isCJSBuild ? 'es2019' : 'es2015',
+        target: isServerRenderer || isCJSBuild ? 'es2019' : 'es2016',
         define: resolveDefine(),
       }),
       ...resolveNodePlugins(),
@@ -362,14 +371,26 @@ function createMinifiedConfig(/** @type {PackageFormat} */ format) {
       format: outputConfigs[format].format,
     },
     [
-      terser({
-        module: /^esm/.test(format),
-        compress: {
-          ecma: 2015,
-          pure_getters: true,
+      {
+        name: 'swc-minify',
+
+        async renderChunk(contents, _, { format }) {
+          const { code } = await minifySwc(contents, {
+            module: format === 'es',
+            format: {
+              comments: false,
+            },
+            compress: {
+              ecma: 2016,
+              pure_getters: true,
+            },
+            safari10: true,
+            mangle: true,
+          })
+
+          return { code: banner + code, map: null }
         },
-        safari10: true,
-      }),
+      },
     ],
   )
 }
diff --git a/rollup.dts.config.js b/rollup.dts.config.js
index d715af4a4f8..d9af98f1306 100644
--- a/rollup.dts.config.js
+++ b/rollup.dts.config.js
@@ -7,7 +7,7 @@ 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)
 }
diff --git a/scripts/build.js b/scripts/build.js
index eacabe0dee4..02212a70e0c 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -16,39 +16,74 @@ 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 path from 'node:path'
-import minimist from 'minimist'
 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 { 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
-/** @type {boolean | undefined} */
-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
@@ -57,7 +92,7 @@ async function run() {
     await buildAll(resolvedTargets)
     await checkAllSizes(resolvedTargets)
     if (buildTypes) {
-      await execa(
+      await exec(
         'pnpm',
         [
           'run',
@@ -114,14 +149,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(fs.readFileSync(`${pkgDir}/package.json`, 'utf-8'))
 
   // if this is a full build (no specific targets), ignore private packages
   if ((isRelease || !targets.length) && pkg.private) {
@@ -129,14 +170,15 @@ 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 })
+  if (!formats && fs.existsSync(`${pkgDir}/dist`)) {
+    fs.rmSync(`${pkgDir}/dist`, { recursive: true })
   }
 
   const env =
     (pkg.buildOptions && pkg.buildOptions.env) ||
     (devOnly ? 'development' : 'production')
-  await execa(
+
+  await exec(
     'rollup',
     [
       '-c',
@@ -191,10 +233,10 @@ async function checkSize(target) {
  * @returns {Promise<void>}
  */
 async function checkFileSize(filePath) {
-  if (!existsSync(filePath)) {
+  if (!fs.existsSync(filePath)) {
     return
   }
-  const file = await fs.readFile(filePath)
+  const file = fs.readFileSync(filePath)
   const fileName = path.basename(filePath)
 
   const gzipped = gzipSync(file)
@@ -209,7 +251,7 @@ async function checkFileSize(filePath) {
   )
 
   if (writeSize)
-    await fs.writeFile(
+    fs.writeFileSync(
       path.resolve(sizeDir, `${fileName}.json`),
       JSON.stringify({
         file: fileName,
diff --git a/scripts/dev.js b/scripts/dev.js
index 7db79442ee9..fb4d3873e8b 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -5,19 +5,42 @@
 // smaller files and provides better tree-shaking.
 
 import esbuild from 'esbuild'
+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 targets = args._.length ? args._ : ['vue']
-const format = args.f || 'global'
-const prod = args.p || false
-const inlineDeps = args.i || args.inline
+
+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')
@@ -30,11 +53,17 @@ const postfix = format.endsWith('-runtime')
   ? `runtime.${format.replace(/-runtime$/, '')}`
   : format
 
+const privatePackages = fs.readdirSync('packages-private')
+
 for (const target of targets) {
-  const pkg = require(`../packages/${target}/package.json`)
+  const pkgBase = privatePackages.includes(target)
+    ? `packages-private`
+    : `packages`
+  const pkgBasePath = `../${pkgBase}/${target}`
+  const pkg = require(`${pkgBasePath}/package.json`)
   const outfile = resolve(
     __dirname,
-    `../packages/${target}/dist/${
+    `${pkgBasePath}/dist/${
       target === 'vue-compat' ? `vue` : target
     }.${postfix}.${prod ? `prod.` : ``}js`,
   )
@@ -100,7 +129,7 @@ for (const target of targets) {
 
   esbuild
     .context({
-      entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],
+      entryPoints: [resolve(__dirname, `${pkgBasePath}/src/index.ts`)],
       outfile,
       bundle: true,
       external,
@@ -121,12 +150,12 @@ for (const target of targets) {
         __ESM_BUNDLER__: String(format.includes('esm-bundler')),
         __ESM_BROWSER__: String(format.includes('esm-browser')),
         __CJS__: String(format === 'cjs'),
-        __SSR__: String(format === 'cjs' || format.includes('esm-bundler')),
+        __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__: `false`,
+        __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: `true`,
       },
     })
     .then(ctx => ctx.watch())
diff --git a/scripts/inline-enums.js b/scripts/inline-enums.js
index 40bd31bfd8a..b1baaa6c5c3 100644
--- a/scripts/inline-enums.js
+++ b/scripts/inline-enums.js
@@ -21,7 +21,7 @@ import {
 } from 'node:fs'
 import * as path from 'node:path'
 import { parse } from '@babel/parser'
-import { execaSync } from 'execa'
+import { spawnSync } from 'node:child_process'
 import MagicString from 'magic-string'
 
 /**
@@ -49,8 +49,16 @@ export function scanEnums() {
   const defines = Object.create(null)
 
   // 1. grep for files with exported enum
-  const { stdout } = execaSync('git', ['grep', `export enum`])
-  const files = [...new Set(stdout.split('\n').map(line => line.split(':')[0]))]
+  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) {
diff --git a/scripts/release.js b/scripts/release.js
index 7ee29185a49..cd287dfc12b 100644
--- a/scripts/release.js
+++ b/scripts/release.js
@@ -1,13 +1,13 @@
 // @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 {{
@@ -23,12 +23,44 @@ 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',
+    },
   },
 })
 
@@ -94,16 +126,16 @@ const versionIncrements = [
 ]
 
 const inc = (/** @type {import('semver').ReleaseType} */ i) =>
-  semver.inc(currentVersion, i, preId)
+  semver.inc(currentVersion, i, typeof preId === 'string' ? preId : undefined)
 const run = async (
   /** @type {string} */ bin,
   /** @type {ReadonlyArray<string>} */ args,
-  /** @type {import('execa').Options} */ opts = {},
-) => execa(bin, args, { stdio: 'inherit', ...opts })
+  /** @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('execa').Options} */ opts = {},
+  /** @type {import('node:child_process').SpawnOptions} */ opts = {},
 ) => console.log(pico.blue(`[dryrun] ${bin} ${args.join(' ')}`), opts)
 const runIfNotDry = isDryRun ? dryRun : run
 const getPkgRoot = (/** @type {string} */ pkg) =>
@@ -117,7 +149,7 @@ async function main() {
     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)
@@ -145,7 +177,7 @@ async function main() {
         ['view', `${pkgName}@~${canaryVersion}`, 'version', '--json'],
         { 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}`)
@@ -196,6 +228,12 @@ async function main() {
     }
   }
 
+  // @ts-expect-error
+  if (versionIncrements.includes(targetVersion)) {
+    // @ts-expect-error
+    targetVersion = inc(targetVersion)
+  }
+
   if (!semver.valid(targetVersion)) {
     throw new Error(`invalid target version: ${targetVersion}`)
   }
@@ -219,33 +257,7 @@ async function main() {
     }
   }
 
-  if (!skipTests) {
-    step('Checking CI status for HEAD...')
-    let isCIPassed = await getCIResult()
-    skipTests ||= isCIPassed
-
-    if (isCIPassed && !skipPrompts) {
-      /** @type {{ yes: boolean }} */
-      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', ['run', 'test'])
-    } else {
-      console.log(`Skipped (dry run)`)
-    }
-  } else {
-    step('Tests skipped.')
-  }
+  await runTestsIfNeeded()
 
   // update all package versions and inter-dependencies
   step('\nUpdating cross dependencies...')
@@ -255,16 +267,6 @@ async function main() {
   )
   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'])
@@ -301,24 +303,9 @@ async function main() {
   }
 
   // publish packages
-  step('\nPublishing packages...')
-
-  const additionalPublishFlags = []
-  if (isDryRun) {
-    additionalPublishFlags.push('--dry-run')
-  }
-  if (isDryRun || skipGit) {
-    additionalPublishFlags.push('--no-git-checks')
-  }
-  // bypass the pnpm --publish-branch restriction which isn't too useful to us
-  // otherwise it leads to a prompt and blocks the release script
-  const branch = await getBranch()
-  if (branch !== 'main') {
-    additionalPublishFlags.push('--publish-branch', branch)
-  }
-
-  for (const pkg of packages) {
-    await publishPackage(pkg, targetVersion, additionalPublishFlags)
+  if (args.publish) {
+    await buildPackages()
+    await publishPackages(targetVersion)
   }
 
   // push to GitHub
@@ -329,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.`)
   }
@@ -345,6 +341,44 @@ async function main() {
   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 sha = await getSha()
@@ -352,9 +386,12 @@ async function getCIResult() {
       `https://api.github.com/repos/vuejs/core/actions/runs?head_sha=${sha}` +
         `&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
   }
@@ -380,7 +417,7 @@ async function isInSyncWithRemote() {
       })
       return yes
     }
-  } catch (e) {
+  } catch {
     console.error(
       pico.red('Failed to check whether local HEAD is up-to-date with remote.'),
     )
@@ -389,11 +426,11 @@ async function isInSyncWithRemote() {
 }
 
 async function getSha() {
-  return (await execa('git', ['rev-parse', 'HEAD'])).stdout
+  return (await exec('git', ['rev-parse', 'HEAD'])).stdout
 }
 
 async function getBranch() {
-  return (await execa('git', ['rev-parse', '--abbrev-ref', 'HEAD'])).stdout
+  return (await exec('git', ['rev-parse', '--abbrev-ref', 'HEAD'])).stdout
 }
 
 /**
@@ -448,6 +485,41 @@ function updateDeps(pkg, depType, version, getNewPackageName) {
   })
 }
 
+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
@@ -480,6 +552,7 @@ async function publishPackage(pkgName, version, additionalFlags) {
         ...(releaseTag ? ['--tag', releaseTag] : []),
         '--access',
         'public',
+        ...(args.registry ? ['--registry', args.registry] : []),
         ...additionalFlags,
       ],
       {
@@ -489,7 +562,7 @@ async function publishPackage(pkgName, version, additionalFlags) {
     )
     console.log(pico.green(`Successfully published ${pkgName}@${version}`))
   } catch (/** @type {any} */ e) {
-    if (e.stderr.match(/previously published/)) {
+    if (e.message?.match(/previously published/)) {
       console.log(pico.red(`Skipping already published: ${pkgName}`))
     } else {
       throw e
@@ -497,7 +570,18 @@ async function publishPackage(pkgName, version, additionalFlags) {
   }
 }
 
-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/setup-vitest.ts b/scripts/setup-vitest.ts
index 53e7f5fff56..08203572aff 100644
--- a/scripts/setup-vitest.ts
+++ b/scripts/setup-vitest.ts
@@ -1,5 +1,16 @@
 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({
diff --git a/scripts/size-report.ts b/scripts/size-report.js
similarity index 58%
rename from scripts/size-report.ts
rename to scripts/size-report.js
index a67aa3dd67c..47b25bb8302 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)}`,
       ])
+    }
   }
 
   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)
@@ -86,17 +97,31 @@ async function renderUsages() {
         `${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, { with: { 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.ts b/scripts/usage-size.js
similarity index 54%
rename from scripts/usage-size.ts
rename to scripts/usage-size.js
index 7eddbeb6696..c68e3703b91 100644
--- a/scripts/usage-size.ts
+++ b/scripts/usage-size.js
@@ -1,20 +1,43 @@
+// @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 'terser'
+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')
 
-interface Preset {
-  name: string
-  imports: string[]
-}
+/**
+ * @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]
+ */
 
-const presets: Preset[] = [
+/** @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'] },
@@ -33,27 +56,45 @@ const presets: Preset[] = [
 
 main()
 
+/**
+ * Main function that initiates the bundling process for the presets
+ */
 async function main() {
-  const tasks: ReturnType<typeof generateBundle>[] = []
+  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)
 
-  const results = Object.fromEntries(
-    (await Promise.all(tasks)).map(r => [r.name, r]),
-  )
+  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(results),
+    JSON.stringify(Object.fromEntries(results.map(r => [r.name, r])), null, 2),
     'utf-8',
   )
 }
 
-async function generateBundle(preset: Preset) {
+/**
+ * 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: [
@@ -74,6 +115,7 @@ async function generateBundle(preset: Preset) {
         __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
         __VUE_OPTIONS_API__: 'true',
         preventAssignment: true,
+        ...preset.replace,
       }),
     ],
   })
@@ -85,12 +127,16 @@ async function generateBundle(preset: Preset) {
       module: true,
       toplevel: true,
     })
-  ).code!
+  ).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,
diff --git a/scripts/utils.js b/scripts/utils.js
index 6c3844dd12c..3c92bf7bafb 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -2,22 +2,26 @@
 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() ||
-    !fs.existsSync(`packages/${f}/package.json`)
-  ) {
-    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')
 
 /**
  *
@@ -51,3 +55,60 @@ export function fuzzyMatchTarget(partialTargets, includeAllMatching) {
     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/verify-treeshaking.js b/scripts/verify-treeshaking.js
index a93b8bbbd61..381fc5dda84 100644
--- a/scripts/verify-treeshaking.js
+++ b/scripts/verify-treeshaking.js
@@ -1,8 +1,8 @@
 // @ts-check
 import fs from 'node:fs'
-import { execa } from 'execa'
+import { exec } from './utils.js'
 
-execa('pnpm', ['build', 'vue', '-f', 'global-runtime']).then(() => {
+exec('pnpm', ['build', 'vue', '-f', 'global-runtime']).then(() => {
   const errors = []
 
   const devBuild = fs.readFileSync(
@@ -14,7 +14,7 @@ execa('pnpm', ['build', 'vue', '-f', 'global-runtime']).then(() => {
     errors.push(
       'dev build contains unexpected esbuild object spread helper.\n' +
         'This means { ...obj } syntax is used in runtime code. This should be ' +
-        'refactoed to use the `extend` helper to avoid the extra code.',
+        'refactored to use the `extend` helper to avoid the extra code.',
     )
   }
 
@@ -36,7 +36,7 @@ execa('pnpm', ['build', 'vue', '-f', 'global-runtime']).then(() => {
     prodBuild.includes('annotation,annotation-xml,maction')
   ) {
     errors.push(
-      'prod build contains unexpected domTagConifg lists.\n' +
+      'prod build contains unexpected domTagConfig lists.\n' +
         'This means helpers like isHTMLTag() is used in runtime code paths when it should be compiler-only.',
     )
   }
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 954103c0f2f..8dc9362b921 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1,15 +1,24 @@
 {
   "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/compiler-sfc/src",
+    "packages/compiler-ssr/src",
+    "packages/server-renderer/src"
   ]
 }
diff --git a/tsconfig.json b/tsconfig.json
index f47b7fc8eb9..9896083cf14 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,7 @@
     "useDefineForClassFields": false,
     "module": "esnext",
     "moduleResolution": "bundler",
-    "allowJs": true,
+    "allowJs": false,
     "strict": true,
     "noUnusedLocals": true,
     "experimentalDecorators": true,
@@ -18,23 +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",
+    "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 e6436408adb..3fce4ce87c2 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,6 +1,5 @@
-import { configDefaults, defineConfig } from 'vitest/config'
+import { defineConfig } from 'vitest/config'
 import { entries } from './scripts/aliases.js'
-import codspeedPlugin from '@codspeed/vitest-plugin'
 
 export default defineConfig({
   define: {
@@ -22,9 +21,9 @@ export default defineConfig({
   resolve: {
     alias: entries,
   },
-  plugins: [codspeedPlugin()],
   test: {
     globals: true,
+    pool: 'threads',
     setupFiles: 'scripts/setup-vitest.ts',
     environmentMatchGlobs: [
       ['packages/{vue,vue-compat,runtime-dom}/**', 'jsdom'],
@@ -33,14 +32,21 @@ export default defineConfig({
       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
-        'packages/runtime-dom/src/components/Transition*',
-        // mostly entries
+        // 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*',
       ],
     },
   },
diff --git a/vitest.e2e.config.ts b/vitest.e2e.config.ts
index ecf1c9d95f0..622bda0bd57 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: {
+    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 80549766c50..0082997e0d1 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: {
+    name: 'unit',
     exclude: [...configDefaults.exclude, '**/e2e/**'],
   },
 })
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
new file mode 100644
index 00000000000..a20586e7cfe
--- /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',
+])