\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.",[3051,3052],{"name":3032,"color":3033},{"name":3053,"color":3054},"new function","9C3E49",3485,"closed","computedRef (same as reactiveComputed but returns a ref)","2025-03-16T06:35:25Z","https://github.com/vueuse/vueuse/issues/3485",0.64214563,{"description":3062,"labels":3063,"number":3064,"owner":3022,"repository":3022,"state":3056,"title":3065,"updated_at":3066,"url":3067,"score":3068},"### 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.6830597,{"description":3070,"labels":3071,"number":3077,"owner":3022,"repository":3022,"state":3056,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### Describe the bug\n\n`const color = useCssVar(\"--color\")` no longer working after 1.26.0.\nTested on Fedora linux with edge, chrome and firefox + chrome on macOs.\n\n### Reproduction\n\nhttps://github.com/jpluomajoki-solita/usecssvar-minimal\n\n### System Info\n\n```Shell\n System:\n OS: Linux 6.13 Fedora Linux 41 (Workstation Edition)\n CPU: (16) x64 AMD Ryzen 7 PRO 6850U with Radeon Graphics\n Memory: 15.37 GB / 30.12 GB\n Container: Yes\n Shell: 5.9 - /usr/bin/zsh\n Binaries:\n Node: 23.6.1 - ~/.nvm/versions/node/v23.6.1/bin/node\n Yarn: 1.22.22 - /usr/local/bin/yarn\n npm: 10.9.2 - ~/.nvm/versions/node/v23.6.1/bin/npm\n pnpm: 10.0.0 - ~/.local/share/pnpm/pnpm\n Browsers:\n Chrome: 133.0.6943.141\n npmPackages:\n @vueuse/core: ^12.7.0 => 12.7.0\n @vueuse/shared: ^12.7.0 => 12.7.0\n vue: ^3.5.13 => 3.5.13\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.",[3072,3074],{"name":3073,"color":3020},"bug",{"name":3075,"color":3076},"has pr","5319E7",4640,"BUG | `useCssVar` | useCssVar not working without target","2025-03-05T04:05:22Z","https://github.com/vueuse/vueuse/issues/4640",0.68363917,{"description":3083,"labels":3084,"number":3085,"owner":3022,"repository":3022,"state":3056,"title":3086,"updated_at":3087,"url":3088,"score":3089},"Not sure if this should be a default but, I think, there should be option to make `asyncComputed` lazy like vue `computed`. Right now even if you use `v-if` to not render computed data it is still being retrieved.\r\n\r\n#247 - Example of failing test",[],248,"asyncComputed is not lazy like computed","2023-08-25T08:34:03Z","https://github.com/vueuse/vueuse/issues/248",0.69812506,{"description":3091,"labels":3092,"number":3094,"owner":3022,"repository":3022,"state":3056,"title":3095,"updated_at":3096,"url":3097,"score":3098},"### Describe the bug\n\nThese two hooks forces apps to use `style-src 'self' 'unsafe-inline';` in the CSP settings.\n\nIs there anything that we can do about it?\n\n\n\n### Reproduction\n\nSet the CSP header to `style-src 'self';`\n\n### System Info\n\n```Shell\nAll versions are affected.\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.",[3093],{"name":3019,"color":3020},4741,"BUG | `useStyleTag,useColorMode` | Breaks CSP","2025-05-14T05:35:02Z","https://github.com/vueuse/vueuse/issues/4741",0.70187646,{"description":3100,"labels":3101,"number":3102,"owner":3022,"repository":3022,"state":3056,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### Describe the bug\n\nWhen using useColorMode and useDark with @vueuse/core, version 9 does not affect the transition property, but updating to version 10 disables the transition property!\n\n### Reproduction\n\n>10\n\n### System Info\n\n```Shell\nSystem:\r\n OS: macOS 12.6\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 301.06 MB / 16.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 18.16.0 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 9.6.6 - /usr/local/bin/npm\r\n Browsers:\r\n Chrome: 112.0.5615.137\r\n Safari: 16.0\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.",[],3063,"useColorMode and useDark affects the transtion property","2023-05-05T13:34:03Z","https://github.com/vueuse/vueuse/issues/3063",0.70246273,{"description":3108,"labels":3109,"number":3110,"owner":3022,"repository":3022,"state":3056,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### Describe the bug\n\nI encountered this unnatural behavior when using useColorMode in SSR mode.\r\nThis bug did not occur when `ssrHandlers` was not set to true.\r\n\r\nhttps://user-images.githubusercontent.com/60182057/157280696-3e2f0271-22e1-4db1-882f-21a54685825e.mov\r\n\r\n(Safari 15.4)\r\n\r\nWhen using useColorMode and switching CSS by theme, colors are not reflected correctly when reloading the page.\r\nFor a moment I see the correct colors on the screen, but somehow it returns to the default colors.\r\n\r\n\n\n### Reproduction\n\nhttps://github.com/p1atdev/vueuse_useColorMode\n\n### System Info\n\n```Shell\nSystem:\r\n OS: macOS 12.3\r\n CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz\r\n Memory: 72.90 MB / 16.00 GB\r\n Shell: 5.8 - /bin/zsh\r\n Binaries:\r\n Node: 16.13.1 - ~/.anyenv/envs/nodenv/versions/16.13.1/bin/node\r\n Yarn: 1.22.17 - /usr/local/bin/yarn\r\n npm: 8.1.2 - ~/.anyenv/envs/nodenv/versions/16.13.1/bin/npm\r\n Browsers:\r\n Firefox: 97.0.1\r\n npmPackages:\r\n @vueuse/core: ^7.7.1 => 7.7.1 \r\n @vueuse/nuxt: ^7.7.1 => 7.7.1\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.",[],1378,"useColorMode not working properly during SSR","2022-09-15T08:14:24Z","https://github.com/vueuse/vueuse/issues/1378",0.7053539,["Reactive",3116],{},["Set"],["ShallowReactive",3119],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fU96pGE1PJ7GlxU5tFwUk5u8bN_7l1BQ9aFJVhcKedn4":-1},"/vueuse/vueuse/3216"]