\r\n\u003C/template>\r\n```\r\n\r\nAnd the only way to get the `key` in the `ChildComponent` is to add an `:index=\"ind\"` prop.\n\n### Suggested solution\n\n```ts\r\nexport function useKey\u003CT>(target?: any): T|null {\r\n const instance = getLifeCycleTarget(target)\r\n\r\n return instance.vnode.key\r\n}\r\n```\n\n### Alternative\n\nAdd the `index` prop inside `ChildComponent` and pass the `ind` to it\n\n### Additional context\n\nIf it's OK, I can submit a PR. The suggested solution code is based on the `tryOnBeforeMount` function.\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.",[2937],{"name":2922,"color":2923},3859,"feat(useKey): function to get child v-for key","2025-01-24T13:08:25Z","https://github.com/vueuse/vueuse/issues/3859",0.74032086,{"description":2944,"labels":2945,"number":2947,"owner":2928,"repository":2928,"state":2929,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Clear and concise description of the problem\n\nSSR Hydration mismatch occurs when using useStorageAsync in a component setup, and client storage (that wouldn't be the same on the server) changes the value prior to the component mount. The problem is the same as described here: https://github.com/vueuse/vueuse/issues/3447\n\n### Suggested solution\n\nLook into allowing a initOnMounted option, just like https://github.com/vueuse/vueuse/pull/3504\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.",[2946],{"name":2922,"color":2923},4488,"REQUEST | `useStorageAsync` | allow initOnMounted just like `useStorage` allows to reduce problems with SSR and hydration mismatch ","2025-01-24T13:20:57Z","https://github.com/vueuse/vueuse/issues/4488",0.7465966,{"description":2953,"labels":2954,"number":2958,"owner":2928,"repository":2928,"state":2959,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Describe the bug\n\nIf page has useIdle and a number input that has focus, scrolling over the element causes the input element to change value. \nHappens on Chromium based browsers and Safari at least. Not on Firefox.\n\nhttps://github.com/user-attachments/assets/c48b2c8b-0f0c-489a-b50f-20a1df66ea3e\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-ebr6zd2y?file=src%2FApp.vue\n\n### System Info\n\n```Shell\nmac & windows\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.",[2955],{"name":2956,"color":2957},"has workaround","4260B0",4550,"closed","BUG | `useEventListener(window, 'wheel')` | number input is affected by scrolling","2025-03-01T06:46:26Z","https://github.com/vueuse/vueuse/issues/4550",0.65317446,{"description":2965,"labels":2966,"number":2970,"owner":2928,"repository":2928,"state":2959,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### Describe the bug\n\n\r\nisFinished isFetching can never be changed externally, set them to ComputedRef to avoid possible \r\nambiguity.\n\n### Reproduction\n\nnone\n\n### System Info\n\n```Shell\nnone\n```\n\n\n### Used Package Manager\n\npnpm\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.",[2967],{"name":2968,"color":2969},"has pr","5319E7",3617,"[useFetch] isFinished,isFetching to ComputedRef","2024-02-13T02:03:02Z","https://github.com/vueuse/vueuse/issues/3617",0.7038057,{"description":2976,"labels":2977,"number":2978,"owner":2928,"repository":2928,"state":2959,"title":2979,"updated_at":2980,"url":2981,"score":2982},"### Describe the bug\r\n\r\n我的项目需要使用 onClickOutside 捕获点击元素外部事件,同时忽略某个外部元素。当忽略的元素内部包含 el-checkbox 组件时。在 firefox 浏览器下点击 el-checkbox 组件同样会触发 onClickOutside 事件,其它浏览如 chrome、edge 则不会出现问题。\r\n示例代码如下:\r\n\r\n\r\n\r\n### Reproduction\r\n\r\n无\r\n\r\n### System Info\r\n\r\n```Shell\r\nFirefox 129.0.2\r\n\"@vueuse/head\": \"^0.7.6\"\r\n\"vue\": \"^3.4.31\"\r\n\"element-plus\": \"^2.7.7\",\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\nnpm\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](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\r\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.\r\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\r\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],4178,"使用 onClickOutside 函数在 firefox 浏览器下 ignore 配置项包含 el-checkbox 导致忽略配置失效","2024-12-19T03:40:37Z","https://github.com/vueuse/vueuse/issues/4178",0.70875543,{"description":2984,"labels":2985,"number":2986,"owner":2928,"repository":2928,"state":2959,"title":2987,"updated_at":2988,"url":2989,"score":2990},"### Describe the bug\n\nI'm using @vueuse/router and @vueuse/nuxt. I have a page that has one required route param and one optional route param. When trying to remove the optional param using the ref from `useRouteParams`, the url doesn't change correctly. I've tried setting the ref to an empty string, null and undefined. Tried with and without a default value for the route param. Doesn't work.\n\n### Reproduction\n\nhttps://github.com/mtdvlpr/reproduction\n\n### System Info\n\n```Shell\nSystem:\r\n OS: Windows 11 10.0.22621\r\n CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz\r\n Memory: 20.55 GB / 31.70 GB\r\n Binaries:\r\n Node: 18.18.2 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 3.6.4 - C:\\Program Files\\nodejs\\yarn.CMD\r\n npm: 9.8.1 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Chromium (119.0.2151.44)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n @vueuse/nuxt: ^10.5.0 => 10.5.0\r\n @vueuse/router: ^10.5.0 => 10.5.0\r\n nuxt: ^3.8.1 => 3.8.1\r\n vue: ^3.3.8 => 3.3.8\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.",[],3536,"useRouteParams doesn't allow removing the parameter by setting it to empty string / null / undefined","2024-12-23T11:07:24Z","https://github.com/vueuse/vueuse/issues/3536",0.7138787,{"description":2992,"labels":2993,"number":2995,"owner":2928,"repository":2928,"state":2959,"title":2996,"updated_at":2997,"url":2998,"score":2999},"### Clear and concise description of the problem\r\n\r\nI have sometimes found it useful to be able to merge several individual refs together into a single object ref while maintaining reactivity to the original refs. Many of the reasons being so that a single object can be used in other vueuse composables like `useRefHistory` and `useLocalStorage`.\r\n\r\n### Suggested solution\r\n\r\nBelow is the `mergeRef` composable I wrote and use personally. The typing needs work, but it's functional.\r\n\r\n```ts\r\nimport { ref, watch, Ref } from 'vue'\r\n\r\nexport function useMergeRef(targets: Record\u003Cstring, Ref>) {\r\n const merged = ref(\r\n Object.fromEntries(\r\n Object.entries(targets).map(([key, target]) => [key, target.value])\r\n )\r\n )\r\n\r\n // propagate changes to the target refs to our merged ref\r\n watch(\r\n () => targets,\r\n (val) => {\r\n Object.keys(val).forEach((key) => {\r\n merged.value[key] = targets[key].value\r\n })\r\n },\r\n { deep: true }\r\n )\r\n\r\n // propagate changes in the merged ref back to the target refs\r\n watch(\r\n () => merged,\r\n (val) => {\r\n Object.keys(val.value).forEach((key) => {\r\n targets[key].value = merged.value[key]\r\n })\r\n },\r\n { deep: true }\r\n )\r\n\r\n return merged\r\n}\r\n```\r\n\r\n\r\n### Alternative\r\n\r\nTwo alternatives would be:\r\n\r\n1. Duplicate a lot of code for each ref.\r\n2. Write boilerplate code to manually serialize and deserialize refs into objects for use in other composables.\r\n\r\n### Additional context\r\n\r\n**I am willing to create a PR for this!**\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.",[2994],{"name":2922,"color":2923},2787,"useMergeRef to merge many refs into a single ref and maintain reactivity to the individual refs","2023-04-26T13:12:56Z","https://github.com/vueuse/vueuse/issues/2787",0.72466236,{"description":3001,"labels":3002,"number":3003,"owner":2928,"repository":2928,"state":2959,"title":3004,"updated_at":3005,"url":3006,"score":3007},"### Describe the bug\n\n在本地dev运行时正常切换dark和light,但build后切换无效,观察html上的class发现没有新的样式类出现,\r\n不知道是不是我没有配置对,请求大佬指点,谢谢!\n\n### Reproduction\n\nhttps://github.com/BG7ZAG/vueuse-useDark-err-demo\n\n### System Info\n\n```Shell\nSystem:\r\n OS: Windows 11 10.0.22631\r\n CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700 @ 2.50GHz\r\n Memory: 1.18 GB / 15.73 GB\r\n Binaries:\r\n Node: 20.11.1 - ~\\.nvmd\\versions\\20.11.1\\node.EXE\r\n npm: 10.2.4 - ~\\.nvmd\\versions\\20.11.1\\npm.CMD\r\n pnpm: 8.15.4 - ~\\.nvmd\\versions\\20.11.1\\pnpm.CMD\r\n Browsers:\r\n Edge: Chromium (123.0.2420.81)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n @vueuse/core: ^10.9.0 => 10.9.0\r\n vue: ^3.4.21 => 3.4.21\n```\n\n\n### Used Package Manager\n\npnpm\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.",[],3917,"useDark + vue3 + vite + element-plus在build后切换无效","2025-01-18T14:38:48Z","https://github.com/vueuse/vueuse/issues/3917",0.7326982,{"description":3009,"labels":3010,"number":3013,"owner":2928,"repository":2928,"state":2959,"title":3014,"updated_at":3015,"url":3016,"score":3017},"### Clear and concise description of the problem\n\nCurrently `useUrlSearchParams` uses `window.history.replaceState`. I would like the option to use `pushState` instead so that params are added to browser history.\n\n### Suggested solution\n\nAdd option (e.g. `replaceHistory`) in `UseUrlSearchParamsOptions` that determines whether to use `replaceState` or `pushState` in `write()`\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.",[3011,3012],{"name":2922,"color":2923},{"name":2968,"color":2969},4389,"REQUEST | `useUrlSearchParams` | Add option to use pushState","2024-12-22T05:17:28Z","https://github.com/vueuse/vueuse/issues/4389",0.734352,["Reactive",3019],{},["Set"],["ShallowReactive",3022],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJCPQOrDMJhF0-ev_fLB736IxXOkoZK_VsyLA1YKO-YI":-1},"/vueuse/vueuse/4708"]