fix(vue-form): prevent full array re-renders in array mode

[imramkrishna]

Closes #1961

Problem

In the Vue adapter, useField currently subscribes to the entire field state via:

useStore(fieldApi.store, (state) => state)

[changeset-bot]

⚠️ No Changeset found

Latest commit: fd2732e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit b9e7a3c

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	51s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	6s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-15 14:16:30 UTC

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-large-form
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-standard-schema
• @tanstack/form-example-lit-array
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-standard-schema
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-devtools
• @tanstack/form-example-solid-large-form
• @tanstack/form-example-solid-simple
• @tanstack/form-example-solid-standard-schema
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/form-example-react-devtools
• @tanstack/form-example-react-dynamic
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-svelte-array
• @tanstack/form-example-svelte-large-form
• @tanstack/form-example-svelte-simple
• @tanstack/form-example-svelte-standard-schema
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple
• @tanstack/form-example-vue-standard-schema

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@1963

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@1963

@tanstack/form-devtools

npm i https://pkg.pr.new/@tanstack/form-devtools@1963

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@1963

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@1963

@tanstack/react-form-devtools

npm i https://pkg.pr.new/@tanstack/react-form-devtools@1963

@tanstack/react-form-nextjs

npm i https://pkg.pr.new/@tanstack/react-form-nextjs@1963

@tanstack/react-form-remix

npm i https://pkg.pr.new/@tanstack/react-form-remix@1963

@tanstack/react-form-start

npm i https://pkg.pr.new/@tanstack/react-form-start@1963

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@1963

@tanstack/solid-form-devtools

npm i https://pkg.pr.new/@tanstack/solid-form-devtools@1963

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@1963

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@1963

commit: 6d5f0eb

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.33%. Comparing base (6892ed0) to head (b9e7a3c).
⚠️ Report is 118 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1963      +/-   ##
==========================================
+ Coverage   90.35%   93.33%   +2.97%     
==========================================
  Files          38        2      -36     
  Lines        1752       60    -1692     
  Branches      444        3     -441     
==========================================
- Hits         1583       56    -1527     
+ Misses        149        4     -145     
+ Partials       20        0      -20     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[imramkrishna]

CI is green and coverage is fixed.
This PR is ready for review.

[crutchcorn]

Wait, I'm confused - shouldn't this be avoided as-of https://github.com/TanStack/form/releases/tag/%40tanstack%2Fvue-form%401.27.7 ?

[imramkrishna]

I checked the 1.27.7 changes and this does not reintroduce the behavior avoided there.

The change in 1.27.7 avoids subscribing to the full field state to prevent unnecessary updates.
This PR follows the same intent by narrowing subscriptions further in array mode, limiting value tracking to length-only while still respecting the current store architecture.

If there’s a specific concern with multiple useStore subscriptions in Vue, I’m happy to adjust the approach.

[msanchezdev]

I see this mentions Vue but the behavior also happens in react