\n \u003CUSlider v-if=\"index == 'range' && typeof item == 'number'\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003CUInput v-if=\"typeof state[index] == 'boolean'\" :type=\"index\" :value=\"index\" :checked=\"item\" />\n \u003CUInput v-else :type=\"index\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003C/UFormField>\n \u003C/UForm>\n \u003Cpre class=\"w-1/2 bg-gray-200 p-4 leading-14\"> {{ state }} \u003C/pre>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\nconst state = ref({}) // ISSUE: Default values are not loaded in the v-model\nconst items = {\n number: 50,\n reset: true, // ISSUE: UInput is not supporting boolean values for v-model\n submit: true, // ISSUE: UInput is not supporting boolean values for v-model\n search: \"search\",\n date: \"2025-04-25\",\n text: \"text\",\n color: \"#ccffcc\",\n button: true, // ISSUE: UInput is not supporting boolean values for v-model\n checkbox: false, // ISSUE: UInput is not supporting boolean values for v-model\n \"datetime-local\": \"2025-04-25T10:49:31\",\n email: \"nobody@gmail.com\",\n file: \"\",\n hidden: \"hidden\",\n image: \"image.svg\",\n month: \"2025-04\",\n password: \"topsecret\",\n radio: true, // ISSUE: UInput is not supporting boolean values for v-model\n range: 50, // Default value is displayed but not loaded in the v-model\n tel: \"0612345678\",\n time: \"10:49:31\",\n url: \"www.chatgpt.com\",\n week: \"2025-W16\"\n}\n// const state = reactive(items) // Workaround for default-value\n\u003C/script>\n```\n\n### Description\n\nI made a small comparison between `UInput` and other components like `UColorPicker` and `USlider` and I stumbled on a couple of issues.\n* `default-value` is not displayed except for `range` and `USlider`\n* `default-value` is never initialized in the `v-model`\n* Booleans are not supported in the `v-model` and I was therefore not able to make them reactive.\n\nWorkaround is to load the default value via the `state`, but that requires an additional step and is therefore not ideal for dynamic forms\n`const state = reactive(items)`\n\nWorkaround for working with booleans, but I am not sure how to apply the `v-model` yet🤔\n`\u003CUInput v-if=\"typeof state[index] == 'boolean'\" :type=\"index\" :value=\"index\" :checked=\"item\" />`\n\n\n### Additional context\n\nDefault values via `default-value`\n\nDefault value via `state`\n\n\n### Logs\n\n```shell-script\n\n```",[3207,3210],{"name":3208,"color":3209},"bug","d73a4a",{"name":3211,"color":3212},"v3","49DCB8",3983,"ui","Default values are not loaded in the v-model","2025-06-30T13:04:54Z","https://github.com/nuxt/ui/issues/3983",0.6983326,{"labels":3220,"number":3223,"owner":3149,"repository":3149,"state":3168,"title":3224,"updated_at":3225,"url":3226,"score":3227},[3221,3222],{"name":3160,"color":3161},{"name":3146,"color":3163},14184,"Client plugins throw \"Property accessed during render, but is not defined on the instance.\" when referenced.","2023-01-19T17:27:05Z","https://github.com/nuxt/nuxt/issues/14184",0.701368,{"labels":3229,"number":3234,"owner":3149,"repository":3149,"state":3168,"title":3235,"updated_at":3236,"url":3237,"score":3238},[3230,3231],{"name":3160,"color":3161},{"name":3232,"color":3233},"upstream","E8A36D",14640,"Error transforming file.vue: v-model can only be used on \u003Cinput>, \u003Ctextarea> and \u003Cselect> elements. Custom webcomponents not working with v-model","2023-01-19T17:38:19Z","https://github.com/nuxt/nuxt/issues/14640",0.7022585,{"description":3240,"labels":3241,"number":3243,"owner":3149,"repository":3149,"state":3168,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v20.10.0`\n- Nuxt Version: `3.14.1592`\n- CLI Version: `3.15.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `pnpm@9.7.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-ynphxo8p?file=app.vue\n\n### Describe the bug\n\nThe `defineModel` function works as expected in Vue's playground but does not work in a Nuxt project. I copied the exact same code from Vue's playground into my Nuxt project, but it fails to function correctly.\n\n### Expected Behavior\nThe `defineModel` function should work as it does in [Vue's playground](https://play.vuejs.org/#eNqFUtFKwzAU/ZWYl06YLbK30Q10DFSYigq+5KW0t11mmoQknZPSf/cm3eqEsT0l555zuefmpKV3WsfbBuiUpjY3XDtiwTV6ziSvtTKOLNZcFKQ0qiZRnATkG6JB0BIDJen2kp5iMlfSOlLbisw8P4oeQAhFPpURxVV0zWSa9PNwEgIHtRaZA0SEpOvbeduG5q5LE0Sh2jvZ3tSqADFjFHlGSYJkmhz10zF1FseXvIo3VklcrfX9jOaq1lyAedGOoz1GpyQwnsvQ3fdTqDnTwPhQz9eQf52ob+zO1xh9NWDBbIHRgXOZqcD19PL9GXZ4H0h03whUnyHfwCrReI+97L6RBdo+0gW3j+H9uaw+7HLnQNrDUt6oV3ZBzyhmsjiz+p/dSTwJfUx2+IpD1ic+xz5enwQGXEDJJaw8Gl2I1upMzlc/hEvdOBR6SNKAjqP1J6P/o6XdL11L5h4=), allowing two-way binding between the component's model and the parent.\n\n### Actual Behavior\nThe `defineModel` function does not behave as expected, the value of the input is not updating.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3242],{"name":3146,"color":3163},30205,"defineModel Not Working in Nuxt 3 Despite Working in Vue's Playground","2024-12-09T13:38:08Z","https://github.com/nuxt/nuxt/issues/30205",0.70500803,{"description":3249,"labels":3250,"number":3252,"owner":3149,"repository":3149,"state":3168,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### Environment\r\n\r\nStackblitz\r\n\r\n### Reproduction\r\n\r\n1. Open [Vue Playground Link](https://play.vuejs.org/#eNp9U1tP2zAU/itHfmk6lRQoT12pxrY+MImLBtsLRlOanBSDY2eOXYqq/PcdO2nacakURcc+1+87n9fsrCzjpUM2ZpMqNaK0UKF15ZQrUZTaWFiDwXwAz4lNH2Z5jqmFGnKjC+hRXq+Lu3j5pslSqGzrjoc7d74JBXOValVZsFjZM2Pg1FeP7tYgsjEcQT2gft483pqjrXkC9X2fq51ZoqgPp1PwRbXEWOpF1JaOl4l0OIDe1a/bm/Pvs16fMifDBiTBo4PFopSJRToBTHYBLA8KnaEc+1oHiTGnnLVlOYMhxU+GXTIbsFc4X5MJMlELX6LibJfYjzj9zJV9KRFuqeXV/JFIauArV8zRQP2WxAxzofDCzzxps+7up1Gvjeh5Ag3+dcIg1bHGIdREB1e5U6kVWoErMwJDscnLTGJBSCKhMlxtug5AqFyP4ToxViRdl2kf1p69/0i/C5n3fm7vA4jj+L2AQef1tcOJsNG3AZjh3C1++wyq1Wz6nTmPN/K4SOxDnEutTRRMk6hMF5T36ejwsN8ifiueMOQ+BZ1fNgKivdT+t09FmVgGg8y5s5aY/ZJKkT7R+rdoggx8DMANktrCXZM0bLJa/3rdLbkmXry/abCjP65IgbYiALlYxI+VVqS/gImzlGQpJJqr0i+Z5DferISzREr9/CPceUG0y6CcB0yf3rl/rFb+jrNrgxWaJaHofDYxC7SNe3ZziSuyOyc9JScpeo/zJxL5zs/YhH11KqOxd+LCtOfh5Qi1uK1mK4uq2oDygwb5hHjO6BX5F/kR9O24o3i0kR2x+GeJxtckAkfxSTwasfof0HG4/Q==)\r\n2. Click on \"Set value\"\r\n3. Check the console and see that watchEffect was triggered (\"outside\" and \"inside\")\r\n\r\nNow with Nuxt 🙈 \r\n\r\n1. Open the [Stackblitz](https://stackblitz.com/edit/nuxt-issues-28240)\r\n2. Click on \"Set Value\"\r\n3. Check the console -> watchEffect **was not triggered**, neither \"outside\" nor \"inside\"\r\n\r\n### Describe the bug\r\n\r\nI am not sure why the behavior is different than in plain Vue but somehow, even with `ssr: false`, the update event of `defineModel` is never fired when using an array ref as value and modifying an element of the array.\r\n\r\n### Additional context\r\n\r\nusing `watch` + `deep` (in either inside or outside) will trigger properly.\r\n\r\n### Logs\r\n\r\n_No response_",[3251],{"name":3146,"color":3163},28240,"defineModel behavior for `ref` arrays differs from plain Vue","2024-07-22T08:30:11Z","https://github.com/nuxt/nuxt/issues/28240",0.70684385,["Reactive",3258],{},["Set"],["ShallowReactive",3261],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fKJgI2F_wTLrEUkWo6b7rhLNdA3K4hUE4tYSnk3z1a90":-1},"/nuxt/nuxt/32908"]