\n\u003C/UFormGroup>\n```\n\n```\n\u003Cdiv class=“relative”>\n \u003Cinput>…\n\u003C/div>\n```\n\nHowever in version 3 it is\n\n```\n\u003CUFormField>\n \u003CUInput />\n\u003C/UFormField >\n```\n\n```\n\u003Cdiv class=“relative inline-flex items-center”>\n \u003Cinput>…\n\u003C/div>\n```\n\nThis is causing the `\u003Cinput>` to not expand to the full width of the parent container. Is there a way to edit this in Nuxt UI 3 to make it fully expand to the parent container?\n\n",[3240,3243],{"name":3241,"color":3242},"question","d876e3",{"name":3200,"color":3201},3955,"UInput not flexing when upgrading from v2 to v3","2025-04-22T14:14:04Z","https://github.com/nuxt/ui/issues/3955",0.7469606,{"description":3250,"labels":3251,"number":3254,"owner":3146,"repository":3146,"state":3169,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Environment\n\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.18.0`\r\n- Nuxt Version: `3.3.1`\r\n- Nitro Version: `2.3.1`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `modules`, `css`, `build`, `vite`, `app`, `auth`\r\n- Runtime Modules: `@pinia/nuxt@0.4.7`, `@pinia-plugin-persistedstate/nuxt@1.0.0`, `@sidebase/nuxt-auth@0.4.2`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nHi,\r\nI have a video list with a pagination system.\r\nWhen, the user change the page number with the pagination component, I want to change the query param of the page and I wonder that useAsyncData will be executed after but it's not the case.\r\n\r\n\r\n```\r\n\u003Cscript setup>\r\nconst config = useRuntimeConfig()\r\nconst route = useRoute()\r\nconst router = useRouter()\r\nconst page = ref(route.query.page ? parseInt(route.query.page) : 1)\r\n\r\nconst { data: videos, refresh, error } = await useAsyncData('videos', async () => {\r\n const url = `${config.API_BASE_URL}videos?page=${page.value}`\r\n return $fetch(url, { server: false })\r\n},\r\n)\r\n\r\nconst changePage = async () => {\r\n await navigateTo({\r\n path: '/my-videos',\r\n query: {\r\n page: page.value,\r\n },\r\n })\r\n}\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cv-container>\r\n \u003Ch1>Vidéos\u003C/h1>\r\n \u003Cv-row>\r\n \u003Cv-col cols=\"12\" lg=\"8\">\r\n \u003Cdiv>\r\n \u003Cv-pagination v-model=\"page\" :length=\"videos.totalPages\" @update:modelValue=\"changePage\" />\r\n \u003Cvideo-preview v-for=\"video in videos.results\" :key=\"video.id\" :video=\"video\" />\r\n....\r\n```\r\n\r\n\r\n\n\n### Describe the bug\n\nThe query param page has been updated but behind the useAsyncData with the new page number is not executed\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3252,3253],{"name":3227,"color":3228},{"name":3230,"color":3231},19803,"useAsyncData not executed after change query param with navigateTo function","2023-03-19T21:14:45Z","https://github.com/nuxt/nuxt/issues/19803",0.7500545,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f4vTN_q_fJKo1Z0-sKCrBORJ0qHQiuz8nZF_qJPncpaI":-1},"/nuxt/nuxt.com/996"]