\r\n````\r\nSet and \"Add to Home\" state.\r\n\r\n\r\n### Issue\r\nI used useWindowSize for reactive window size detection.\r\n```\r\nimport { watch } from 'vue'\r\nimport { useWindowSize } from '@vueuse/core'\r\n\r\nconst { height } = useWindowSize()\r\nwatch(height, () => {\r\n console.log('Change WindowSize!', height.value)\r\n})\r\n```\r\n\r\nI used useWindowSize to detect not only the `resize` event, but also the\r\nI think we should add an `orientationchange` event as well, since it is possible to detect changes by binding an `orientationchange` event as well.\r\n\r\nI'm not sure I've covered all the features of Vueuse, so if there is another way to do it, I'd appreciate it if you could let me know.\r\n\r\n\n\n### Reproduction\n\nnone\n\n### System Info\n\n```Shell\niPhone safari\n```\n\n\n### Used Package Manager\n\nyarn\n\n### Validations\n\n- [x] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],1505,"`useWindowSize` Resize detection on mobile devices","2023-11-28T19:30:46Z","https://github.com/vueuse/vueuse/issues/1505",0.737134,{"description":3075,"labels":3076,"number":3081,"owner":3022,"repository":3022,"state":3052,"title":3082,"updated_at":3083,"url":3084,"score":3085},"### Clear and concise description of the problem\r\n\r\nAs a developer using Vue for CRUD, and developing update forms in particular, I want an easy and DRY way to prepare a reactive object for field values. The problem is, the initial field values should be copied/constructed based on the data that is coming asynchronously from the API, and that may also update (such as after successful submit and pulling updated data from the server). When such object is first retrieved and/or updated, the set of fields (for the editable inputs) should be re-created. When the source data is not (yet) available, as when it's still loading or has never loaded, the object must be `undefined`.\r\n\r\nThe typical DRY code looks like:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { computedRef } from \"@vueuse/core\"\r\n\r\nconst { data } = useAsyncData() // fetch data asynchronously, the result is typed as Ref\u003CData | undefined>\r\n\r\nconst fields = computedRef(() => data.value && ({\r\n // only pick certain fields that are editable\r\n name: data.value.name,\r\n address1: data.value.address1,\r\n address2: data.value.address2,\r\n // possibly add form fields that are not present in the data, but represent client-side logic\r\n copyAddress1ToAddress2: data.value.address1 === data.value.address2,\r\n}))\r\n\r\n// TODO: define watcher for address sync, omitting this for brevity.\r\n\r\nasync function submit() {\r\n const res = await callSubmitApi(fields.value)\r\n if (res.data) {\r\n // On successful submit, `fields` should be re-created with fresh data coming from the server.\r\n data.value = res.data\r\n }\r\n}\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cform v-if=\"fields\" @submit.prevent=\"submit\">\r\n \u003Cinput v-model=\"fields.name\" />\r\n \u003Cinput v-model=\"fields.address1\" />\r\n \u003Cinput type=\"checkbox\" v-model=\"fields.copyAddress1ToAddress2\" />\r\n \u003Cinput v-model=\"fields.address2\" :disabled=\"fields.copyAddress1ToAddress2\"/>\r\n \u003C/form>\r\n\u003C/template>\r\n```\r\n\r\n### Suggested solution\r\n\r\nThe implementation is very simple, currently I am copy/pasting it between projects:\r\n\r\n```ts\r\nimport type { UnwrapRef, WatchSource } from \"vue\"\r\n\r\n/** @returns ref which resets when the source changes */\r\nexport function computedRef\u003CT>(source: WatchSource\u003CT>) {\r\n const value = ref(toValue(source))\r\n watch(source, (source) => {\r\n value.value = source as UnwrapRef\u003CT>\r\n })\r\n return value\r\n}\r\n```\r\n\r\n### Alternative\r\n\r\nVueUse already has `reactiveComputed`, but it's not directly suitable, as it must always return an object. Therefore:\r\n\r\n1. It can't be used when the source data could be is unavailable (`reactiveComputed` can't return `undefined`).\r\n\r\n2. It can't be used when the ref is a non-object. For instance, consider a case when a list can be expanded and collapsed, which is a boolean ref. The default state (collapsed or expanded) could be dependent on the list length, such as it's expanded by default when it's 10 or less items, and collapsed if there's more. Then, when a list is updated, it must recalculate its expanded status based on the new length.\r\n\r\nOf course, we could always work around and return an object shaped as `{ value: \u003Cactual value, possibly undefined> }`, but why not have a function that uses a native Vue `Ref` for that case? It will also unwrap naturally in templates.\r\n\r\n### Additional context\r\n\r\nNaming is subject for discussion. For consistency with `reactiveComputed`, it could be `refComputed`. (To be honest, I would rather reverse both, `computedReactive` and `computedRef` read better in my thinking.)\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://vueuse.org/guide).\r\n- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.",[3077,3078],{"name":3032,"color":3033},{"name":3079,"color":3080},"new function","9C3E49",3485,"computedRef (same as reactiveComputed but returns a ref)","2025-03-16T06:35:25Z","https://github.com/vueuse/vueuse/issues/3485",0.74633807,{"description":3087,"labels":3088,"number":3089,"owner":3022,"repository":3022,"state":3052,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### Describe the bug\n\nI'm trying to use [infinite scroll](https://vueuse.org/core/useinfinitescroll/#useinfinitescroll=), however the provided examples don't seem to work.\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv\r\n class=\"flex flex-col gap-2 p-4 w-300px h-300px m-auto overflow-y-scroll bg-gray-500/5 rounded\"\r\n ref=\"el\"\r\n >\r\n \u003Cdiv v-for=\"item in data\" :key=\"item\">\r\n {{ item }}\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport { ref } from \"vue\";\r\nimport { useInfiniteScroll } from \"@vueuse/core\";\r\n\r\nconst el = ref\u003CHTMLElement | null>(null);\r\n\r\nuseInfiniteScroll(el, () => console.log(\"fetch\"), { distance: 100 }); // nothing logged to console\r\n\u003C/script>\r\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-srqqu3\n\n### System Info\n\n```Shell\nSystem:\r\n OS: Linux 5.18 Arch Linux\r\n CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor\r\n Memory: 19.16 GB / 31.27 GB\r\n Container: Yes\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.3.0 - /usr/bin/node\r\n Yarn: 1.22.19 - /usr/bin/yarn\r\n npm: 8.5.5 - /usr/bin/npm\r\n npmPackages:\r\n @vueuse/components: ^8.6.0 => 8.6.0 \r\n @vueuse/core: ^8.6.0 => 8.6.0 \r\n vue: ^3.2.36 => 3.2.36\n```\n\n\n### Used Package Manager\n\nnpm\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],1685,"Infinite scroll not working","2023-04-27T08:47:48Z","https://github.com/vueuse/vueuse/issues/1685",0.74813044,{"description":3095,"labels":3096,"number":3101,"owner":3022,"repository":3022,"state":3052,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### Clear and concise description of the problem\n\nPerhaps some businesses require watch to be paused by default\n\n### Suggested solution\n\nCan we add a parameter option to watchPausable so that the created watchPausable defaults to pausing the watch\n\n```\n watch: watchPausable(target, (a,b) => {\n \n }, {pause:true})\n```\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [x] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [x] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [x] Read the [docs](https://vueuse.org/guide).\n- [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.",[3097,3098],{"name":3032,"color":3033},{"name":3099,"color":3100},"has pr","5319E7",4515,"REQUEST | `watchPausable` | default watch pause","2025-02-12T02:28:02Z","https://github.com/vueuse/vueuse/issues/4515",0.7481572,{"description":3107,"labels":3108,"number":3109,"owner":3022,"repository":3022,"state":3052,"title":3110,"updated_at":3111,"url":3112,"score":3113},"### Describe the bug\n\nSame issue as #2924, which was fixed in #2926, the bug reappeared after merging #3322.\r\n\r\nThe problem mentioned in #3216.\r\nAfter `const element = array.splice(from, 1)[0]`, the missing element in `nextTick(console.log(array))` should be the expected behavior.\n\n### Reproduction\n\nhttps://vueuse.org/integrations/useSortable/\n\n### System Info\n\n```Shell\n-\n```\n\n\n### Used Package Manager\n\nnpm\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],4222,"useSortable: wrong order of elements","2024-11-21T08:11:16Z","https://github.com/vueuse/vueuse/issues/4222",0.7531643,["Reactive",3115],{},["Set"],["ShallowReactive",3118],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fVBPO4kr7v53wG86550trTvxzTccWcxALVBLR-o_-suI":-1},"/vueuse/vueuse/1003"]