\r\n\u003C/template>\r\n```\r\n> when Child.vue update, useGlobalState dont call again, why ? It is a featrue or bug? \r\n\r\n> In general, hooks should call when setup ready in component, but this action is so different from a common case. \r\n\r\n### This action is so wired and confused and it is very likely to case a bug.\r\n\r\n\r\n### Reproduction\r\n\r\n[Vue SFC Playground](https://play.vuejs.org/#eNp9VE2P2jAQ/StWLgGVxrDcKKBtV6t+SW3V5ZhL1hlIwLEj26GsUP57x3YSEii9BMbz3vi9mZHPwceyjI4VBItgqZnKS0M0mKpcxyIvSqkMORMFW1KTrZIFCREadqmnLOdpk4ioi2yt8EMsOBhSlWli4Du8kZWtMQpnD/NwHAu8YJMXICszGo1X63MsOmR0THgFiA+TV4YX1ZOH6XSKnCX16lAXBgaKkiMDI0KWXsbiAG+rOOhKxQHF9JJ22GASeN3vi6SM9loKNI2XExI3CR0HC+JO7NkjWqk0UCYV2EQcZMaUekEpSwXyU+D5UUUCDBVlQfvwx9k0mkdT+g50EQe2YI1eUIDRTIptvru6nsmizDmon6XJpRjKSDiXf765M6MqmLTnLAN2+Mf5Xp+82l8KNKgjau9yJlE7MD79/PIDTvi/SxYyrXjj9E7yN2jJK6vRwz5VIkXZPZxT+9V1Mxe7jX4+GRC6NWWFum44fBxgy57+Y/0idx7Ne13sNu12a1Vvb3Ean7l8TfiLwflPMNyANl+kPHTrHNEMQx1aHk5GI00kBdSrIXc0vgIs7GfmYG1Nj7nsKQbu4LKrGOG2ZrO1JXsBVxrJ+Uxcsq6XFIGecsXp+2gJsz5juPPOIO4b9qrrDFOA2f7FbUP6W+y6cv8VaAzCyQG2lWB2gn15ozHO0lmwrZMcIi53o5DhkvRh+CZ0IOP9Nw/GPmEHwjJZtRCFU1airUoceOKD2v64T6PIl7tq8OrWOz5CZLW+r/SGMNTbTgxLD61TSnB7CT5HiW+bNBkoYucxIXBKcESw6HOGFpuyztU4qP8CxevyeQ==)\r\n\r\n### System Info\r\n\r\n```Shell\r\nSystem:\r\n OS: Windows 10 10.0.19044\r\n CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12600K\r\n Memory: 1.67 GB / 15.79 GB\r\n Binaries:\r\n Node: 16.15.0 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.19 - ~\\AppData\\Roaming\\npm\\yarn.CMD\r\n npm: 8.5.5 - C:\\Program Files\\nodejs\\npm.CMD\r\n pnpm: 7.16.0 - C:\\Program Files\\nodejs\\pnpm.CMD\r\n Browsers:\r\n Chrome: 78.0.3904.108\r\n Edge: Spartan (44.19041.1266.0), Chromium (115.0.1901.188)\r\n Internet Explorer: 11.0.19041.1566\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.",[],3275,"`createGlobalState` don't call again when component update.","2023-10-09T18:46:56Z","https://github.com/vueuse/vueuse/issues/3275",0.7467544,{"description":3127,"labels":3128,"number":3129,"owner":3067,"repository":3067,"state":3078,"title":3130,"updated_at":3131,"url":3132,"score":3133},"Hey there!\r\n\r\nFirst I have to say, that this repo is really great! Thanks for that!\r\n\r\nIn my company we created a [repo](https://github.com/nanogiants/vue3-packages/tree/main/packages) for some vue3 directives and made them public.\r\nAs far as I have seen this repo here does not support directives yet. Am I right?\r\n\r\nSo my idea was, that I could refactor the directives to hooks and integrate them here in the library.\r\n\r\nThe[ longpress directive](https://github.com/nanogiants/vue3-packages/tree/main/packages/directive-longpress) adds a Customevent `longpress` to the element. This would also be possible if I add this functionality via a `useLongpress(elementRef)` hook.\r\n\r\nThe [visible directive](https://github.com/nanogiants/vue3-packages/tree/main/packages/directive-visible) adds support for a `v-visible` directive. It differs from `v-if` (not in the dom) and `v-show` (display none) in that its sets `visibility: hidden` on the element.\r\n\r\nIs there any need for those two functionality in this repo?\r\nI would love to contribute and add them as hooks.\r\n\r\nGreetings\r\nBlackfaded",[],1197,"Feature requests: longpress and element visibility","2022-09-21T19:28:17Z","https://github.com/vueuse/vueuse/issues/1197",0.7474002,{"description":3135,"labels":3136,"number":3138,"owner":3067,"repository":3067,"state":3078,"title":3139,"updated_at":3140,"url":3141,"score":3142},"### Clear and concise description of the problem\r\n\r\nDropdowns and mega-menus that are shown on hover benefit from a slight delay of the hover event to prevent accidental triggers.\r\nI've been looking for a Vue 3 composable solution but found none.\r\n\r\n### Suggested solution\r\nImplement an alternative to useElementHover, that waits until the user's mouse slows down enough before making the call.\r\nI've ported [react-use-hoverintent](https://github.com/natelindev/react-use-hoverintent) composable to Vue 3 and I'll gladly submit a PR.\r\n\r\n```ts\r\nimport { Ref, watchEffect } from 'vue-demi'\r\nimport { useToggle } from '@vueuse/core'\r\n\r\ninterface optionType {\r\n sensitivity?: number\r\n interval?: number\r\n timeout?: number\r\n}\r\n\r\nexport function useHoverIntent (\r\n target: Ref\u003CHTMLElement>,\r\n options?: optionType,\r\n): Ref\u003CBoolean> {\r\n const { sensitivity = 6, interval = 100, timeout = 200 } = options ?? {}\r\n const [isHovering, setIsHovering] = useToggle(false)\r\n\r\n let x = 0\r\n let y = 0\r\n let pX = 0\r\n let pY = 0\r\n let timer = 0\r\n\r\n const delay = (e: MouseEvent) => {\r\n if (timer) {\r\n clearTimeout(timer)\r\n }\r\n return setIsHovering(false)\r\n }\r\n\r\n const tracker = (e: MouseEvent) => {\r\n x = e.clientX\r\n y = e.clientY\r\n }\r\n\r\n const compare = (e: MouseEvent) => {\r\n if (timer) {\r\n clearTimeout(timer)\r\n }\r\n if (Math.abs(pX - x) + Math.abs(pY - y) \u003C sensitivity) {\r\n return setIsHovering(true)\r\n } else {\r\n pX = x\r\n pY = y\r\n timer = window.setTimeout(() => compare(e), interval)\r\n }\r\n }\r\n\r\n const dispatchOver = (e: MouseEvent) => {\r\n if (timer) {\r\n clearTimeout(timer)\r\n }\r\n if (target.value) {\r\n target.value.removeEventListener('mousemove', tracker, false)\r\n }\r\n if (!isHovering.value) {\r\n pX = e.clientX\r\n pY = e.clientY\r\n if (target.value) {\r\n target.value.addEventListener('mousemove', tracker, false)\r\n }\r\n timer = window.setTimeout(() => compare(e), interval)\r\n }\r\n }\r\n\r\n const dispatchOut = (e: MouseEvent) => {\r\n if (timer) {\r\n clearTimeout(timer)\r\n }\r\n if (target.value) {\r\n target.value.removeEventListener('mousemove', tracker, false)\r\n }\r\n if (isHovering.value) {\r\n timer = window.setTimeout(() => delay(e), timeout)\r\n }\r\n }\r\n\r\n watchEffect(() => {\r\n if (target.value) {\r\n target.value.addEventListener('mouseover', dispatchOver, false)\r\n target.value.addEventListener('mouseout', dispatchOut, false)\r\n }\r\n\r\n return () => {\r\n if (timer) {\r\n clearTimeout(timer)\r\n }\r\n if (target) {\r\n target.value.removeEventListener('mouseover', dispatchOver, false)\r\n target.value.removeEventListener('mouseout', dispatchOut, false)\r\n }\r\n }\r\n })\r\n\r\n return isHovering\r\n}\r\n```\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\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.",[3137],{"name":3094,"color":3095},1950,"proposal: useHoverIntent()","2023-01-03T15:32:00Z","https://github.com/vueuse/vueuse/issues/1950",0.74825436,{"description":3144,"labels":3145,"number":3146,"owner":3067,"repository":3113,"state":3078,"title":3147,"updated_at":3148,"url":3149,"score":3150},"VueRouter 3.x not have hook",[],34,"how to use VueRouter with demi-vue in Vue2.x","2021-02-03T06:22:02Z","https://github.com/vueuse/vue-demi/issues/34",0.75323874,["Reactive",3152],{},["Set"],["ShallowReactive",3155],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fjkRubl17-s1Sftmus73ZWVZMg9-92SUeutZpIO3tZZE":-1},"/vueuse/vue-demi/1"]