fix(native-select): add proper model-value binding in demo and calendar

[aut8]

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The NativeSelect component expects modelValue prop but was not receiving it properly in two places:

1. NativeSelectFormDemo: vee-validate's field provides value, not modelValue. Changed to use componentField which provides the correct binding
2. Calendar: The month/year selects were missing :model-value binding entirely. Added :model-value="date.month" and :model-value="date.year"

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

Summary by CodeRabbit

• Refactor
  • Updated internal variable naming and data binding structure in the form demo component for improved consistency and clarity.

[coderabbitai]

📝 Walkthrough

Walkthrough

A scoped slot variable in a Vue demo component is renamed from field to componentField with corresponding binding updates. The change improves naming clarity without altering form behavior or validation logic.

Changes

Cohort / File(s)	Summary
Variable Rename apps/v4/components/demo/NativeSelectFormDemo.vue	Renamed scoped slot variable from field to componentField and updated NativeSelect binding reference for improved naming clarity.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A rabbit hops through code so fine,
Renaming fields in a line,
field becomes componentField bright,
Clarity shines, the names are right! 🐰✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately reflects the main change: fixing the NativeSelect demo's model-value binding by renaming the scoped slot variable from 'field' to 'componentField'.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/v4/components/demo/NativeSelectFormDemo.vue (1)

34-34: ⚠️ Potential issue | 🟡 Minor

h is used but not imported.

h is Vue's render/hyperscript function and requires import { h } from 'vue' in <script setup>. Without it, submitting the form will throw a ReferenceError at runtime. The project has no auto-import configuration that would cover this.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/v4/components/demo/NativeSelectFormDemo.vue` at line 34, The template
uses Vue's render function h in NativeSelectFormDemo.vue but h is not imported,
causing a ReferenceError at runtime; fix by adding an explicit import for h from
Vue in the <script setup> section (import { h } from 'vue') so the description
line that calls h('pre', ... JSON.stringify(values...)) can resolve correctly.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@apps/v4/components/demo/NativeSelectFormDemo.vue`:
- Line 34: The template uses Vue's render function h in NativeSelectFormDemo.vue
but h is not imported, causing a ReferenceError at runtime; fix by adding an
explicit import for h from Vue in the <script setup> section (import { h } from
'vue') so the description line that calls h('pre', ...
JSON.stringify(values...)) can resolve correctly.