\r\n \u003Cbutton class=\"btn btn-primary\" @click=\"sendIt\">Send\u003C/button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst body = reactive({\r\n foo: 'bar',\r\n name: '',\r\n});\r\n\r\nconst sendIt = async () => {\r\n const { data, error } = await useFetch('https://httpbin.org/anything', {\r\n method: 'POST',\r\n body,\r\n });\r\n};\r\n\u003C/script>\r\n```\n\n### Describe the bug\n\nWhen POSTing a reactive Vue object using `useFetch`, I find that further modification of the object's properties causes the `useFetch` call to unexpectedly fire again for each modification.\r\n\r\nIn the above example, I have a reactive object named `body`, and I use `useFetch` to POST it somewhere. Afterward, if I modify the object using an `\u003Cinput>` with `v-model` binding, that `useFetch` POST fires again for each keypress. If I click Send to trigger `useFetch` once more, then modify the object's properties yet again, the `useFetch` calls invoked by those modifications have doubled up, and they continue to double with each click of the Send button.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2960,2961],{"name":2879,"color":2880},{"name":2866,"color":2867},23837,"useFetch calls repeat when sending and modifying reactive objects","2023-10-20T21:12:43Z","https://github.com/nuxt/nuxt/issues/23837",0.6960225,{"description":2968,"labels":2969,"number":2971,"owner":2869,"repository":2869,"state":2883,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.23.0`\n- Nitro Version: `2.11.6`\n- Package Manager: `pnpm@9.15.4`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-thrqeevv?file=server%2Fapi%2Furi%2Findex.post.ts\n\n### Describe the bug\n\nI noticed an inconsistency in the blocking behavior of `useFetch` when the method is set to `POST`, where if the user is navigating to a page which uses the same component, the data change is rendered before the suspense of the new page resolves.\n\nIn the provided example, I have 2 `useFetch` calls inside `await Promise.all`. The expected behavior would be that the data on the page visually changes only after both of the promises are resolved - just like when you're navigating from `index.vue` to any of the pages in `dynamic/[uri].vue`.\nHowever, this is not the case when going from `dynamic/[uri].vue` to `dynamic/[uri].vue`.\n\nI suppose this is because we don't include the `body` of the request in the hash for the payload key and thus, the key is the same for both the old & the new request, which updates the data that's currently being rendered on the page.\nhttps://github.com/nuxt/nuxt/blob/f6bbb8e87c0d48b5e45d959715b1f119be75635a/packages/nuxt/src/app/composables/fetch.ts#L248\n\nWould this be an ok fix, or can you see any problems with that?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2970],{"name":2866,"color":2867},31428,"Inconsistent blocking behavior of `useFetch` when the method is `POST`","2025-03-24T23:20:41Z","https://github.com/nuxt/nuxt/issues/31428",0.6964134,["Reactive",2977],{},["Set"],["ShallowReactive",2980],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fnySsYCCAuoPYkP1DUTHKl6SGjvBNjn1WhJkYHvpvKYo":-1},"/nuxt/scripts/442"]