\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle>\n@media (min-width: 1024px) {\n .about {\n min-height: 100vh;\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n}\n\u003C/style>\n\n```\nChild component\n```js\n// src/components/TestModel.vue\n\n\u003Cscript setup>\nimport {onMounted, watch} from \"vue\";\nimport {useVModel} from \"@vueuse/core\";\n\nconst props = defineProps({\n modelValue: {\n type: Boolean\n }\n});\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst data = useVModel(props, 'modelValue', emit, {\n deep: true,\n});\n\n// watch(() => data.value, (v) => {\n// if (v) {\n// setTimeout(() => {\n// data.value = false;\n// }, 2000)\n// }\n// })\n//\n// onMounted(() => {\n// setTimeout(() => {\n// console.log('update model value')\n// data.value = true;\n// }, 4000)\n// })\n\n\u003C/script>\n\n\u003Ctemplate>\n\u003Cdiv>\n \u003Ch1>model? {{data ? 'YES' : 'NO'}}\u003C/h1>\n \u003Ch1>props.modelValue ? {{props.modelValue ? 'YES' : 'NO'}}\u003C/h1>\n\u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n\n\u003C/style>\n```\n\n**Note:** on the reproduction link, go to *About* page & click on the button. You'll see that the child component is not picking the update. \n\nFYI: the project was setup using `pnpm create vue@legacy`, so this is a `vite` project.\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/serene-fermi-jkd885\n\n### System Info\n\n```Shell\nSystem:\n OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)\n CPU: (8) x64 Intel(R) Core(TM) i3-14100\n Memory: 20.57 GB / 31.03 GB\n Container: Yes\n Shell: 5.2.21 - /bin/bash\n Binaries:\n Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node\n npm: 10.8.2 - ~/.nvm/versions/node/v20.18.1/bin/npm\n pnpm: 9.15.0 - ~/.local/share/pnpm/pnpm\n Browsers:\n Brave Browser: 132.1.74.48\n Chrome: 132.0.6834.83\n npmPackages:\n @vueuse/core: ^11.3.0 => 11.3.0 \n vue: ^2.7.16 => 2.7.16\n```\n\n### Used Package Manager\n\npnpm\n\n\n### Discussion link\nhttps://github.com/vueuse/vueuse/discussions/4507\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.",[2901],{"name":2902,"color":2903},"has workaround","4260B0",4506,"BUG | `useVModel` | Not working with vue2.7 `\u003Cscritp setup>`","2025-01-24T03:44:13Z","https://github.com/vueuse/vueuse/issues/4506",0.6559341,{"description":2910,"labels":2911,"number":2912,"owner":2857,"repository":2857,"state":2858,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### Describe the bug\r\n\r\n**Home.vue**\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"home\">\r\n \u003Ch1>app-user: {{ user }}\u003C/h1>\r\n \u003Cmy-input v-model=\"user\" />\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport MyInput from '../components/MyInput.vue';\r\nimport { ref } from 'vue';\r\n\r\nconst user = ref({\r\n name: 'steve',\r\n work: false,\r\n});\r\n\u003C/script>\r\n```\r\n**MyInput.vue**\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cinput v-model=\"model.name\" />\r\n \u003Cdiv>\r\n \u003Cinput v-model=\"model.work\" id=\"work\" type=\"checkbox\" />\r\n \u003Clabel for=\"work\">上班\u003C/label>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport { useVModel } from '@vueuse/core';\r\n\r\ntype UserType = {\r\n name: string;\r\n work: boolean;\r\n};\r\n\r\nconst props = defineProps\u003C{\r\n modelValue: UserType;\r\n}>();\r\n\r\nconst emits = defineEmits(['update:modelValue']);\r\n\r\nconst model = useVModel(props, 'modelValue', emits, {\r\n passive: true,\r\n deep: true,\r\n});\r\n\u003C/script>\r\n```\r\nEvery time the props data is modified in the subcomponent, although the update: modelValue event is correctly triggered, the value recorded in devTools always references the latest value, rather than a snapshot of the change:\r\n\r\n\r\n### Expected\r\nCapable of accurately recording snapshots of each state change\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/vitejs-vite-x5gdz1?file=src%2Fpages%2FHome.vue\r\n\r\n### System Info\r\n\r\n```Shell\r\nSystem:\r\n OS: Linux 5.0 undefined\r\n CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 0 Bytes / 0 Bytes\r\n Shell: 1.0 - /bin/jsh\r\n Binaries:\r\n Node: 18.18.0 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 9.4.2 - /usr/local/bin/npm\r\n pnpm: 8.10.5 - /usr/local/bin/pnpm\r\n npmPackages:\r\n @vueuse/core: ^9.13.0 => 9.13.0 \r\n @vueuse/rxjs: ^10.2.1 => 10.2.1 \r\n vue: ^3.2.33 => 3.2.40\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.",[],3635,"[useVModel]:The value recorded by useVModel in the event captured by devtool is incorrect","2023-12-14T07:47:08Z","https://github.com/vueuse/vueuse/issues/3635",0.65858036,{"description":2918,"labels":2919,"number":2920,"owner":2857,"repository":2857,"state":2858,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### Describe the bug\n\n`useVModels` mistakenly marks the returned ref object as possibly undefined if the respective property is optional.\r\n\r\nThis is not correct. The ref is always returned. The ref _value_ is possibly undefined, but not the ref object itself.\r\n\r\nExample:\r\n\r\n```ts\r\nconst props = defineProps\u003C{\r\n foo: string;\r\n bar?: string;\r\n}>();\r\n\r\nconst emit = defineEmits\u003C{\r\n 'update:foo': [foo: string];\r\n 'update:bar': [bar: string | undefined];\r\n}>();\r\n\r\nconst { foo, bar } = useVModels(props, emit);\r\nconst bar2 = useVModel(props, 'bar', emit);\r\n\r\nfoo.value = 'foo'; // OK\r\nbar.value = 'bar'; // 'bar' is possibly 'undefined' \u003C------ Type error (but no runtime error)\r\nbar2.value = 'bar2'; // OK\r\n```\r\n\r\n---\r\n\r\nHow to reproduce: in StackBlitz, run `npm test`.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-vj3utk?file=components%2Ftest.vue\n\n### System Info\n\n```Shell\nSystem:\r\n OS: Linux 5.0 undefined\r\n CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 0 Bytes / 0 Bytes\r\n Shell: 1.0 - /bin/jsh\r\n Binaries:\r\n Node: 18.18.0 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 9.4.2 - /usr/local/bin/npm\r\n pnpm: 8.9.2 - /usr/local/bin/pnpm\r\n npmPackages:\r\n @vueuse/core: ^10.6.1 => 10.6.1\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.",[],3546,"useVModels mistakenly marks returned ref as possibly undefined if the property is optional","2023-11-28T08:13:53Z","https://github.com/vueuse/vueuse/issues/3546",0.6597722,{"description":2926,"labels":2927,"number":2931,"owner":2857,"repository":2857,"state":2858,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Clear and concise description of the problem\n\n通过组合式api,向外部导出组件暴露的函数,避免调使用valueRef.value.test(), 这种方式,下面的示例已经实现,但是不清楚这个能否加入到vueuse的库中。\n\n### Suggested solution\n\n使用useRegisterComponent之前的写法\r\n```vue\r\n\u003Ctemplate>\r\n \u003CDemo ref=\"demo\"/>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\n import Demo from './Demo.vue'\r\n import { ref } from 'vue'\r\n\r\nconst demo = ref(null);\r\n// 像这样来调用组件的方法\r\ndemo.value.setTitle(\"new Title\");\r\n\u003C/script>\r\n```\r\n\r\n使用之后的写法\r\n\r\n| --- Demo\r\n| --- --- index.vue\r\n| --- --- composable.ts\r\n| --- --- types.ts\r\n| --- --- index.ts\r\n| --- App.vue\r\n\r\n **types.ts**\r\n```ts\r\nimport { ExtractPropTypes } from \"vue\"\r\nconst demoProps = {\r\n text: {\r\n type: String,\r\n default: \"hello world\"\r\n }\r\n}\r\n\r\nexport type DemoProps = ExtractPropTypes\u003Ctypeof demoProps>\r\n\r\nexport interface ExposeMethods {\r\n setTitle: (title: string) => void\r\n}\r\n\r\n```\r\n\r\n**composable.ts**\r\n```ts\r\nimport { useRegisterComponent } from 'vueuse/xxx'\r\nimport { DemoProps, ExposeMethods } from './types'\r\n\r\nconst { registerComponent, useComponent } = useRegisterComponent \u003CDemoProps, ExposeMethods >( ['setTitle'])\r\n\r\nexport {\r\n registerComponent, \r\n useComponent\r\n}\r\n\r\n```\r\n\r\n\r\n**index.vue**\r\n```vue\r\n\u003Cscript lang=\"ts\">\r\nimport { defineComponent, ref } from 'vue';\r\nimport { registerComponent } from './composable'\r\nimport { demoProps } from './types'\r\n\r\nexport default defineComponent({\r\n name: 'Demo',\r\n props: demoProps,\r\n setup(props, ctx) {\r\n const title = ref('Hello World')\r\n // 这里会触发在onMount时触发一个register事件,向外部注册暴露的函数,\r\n // 内置getProps,setProps函数\r\n // getProps: () => ComputedRef\u003CDemoProps>\r\n // setProps: ( props: Partial\u003CDemoProps> ) => void \r\n const { getProps } = registerComponent(props, ctx, {\r\n setTitle: (text) => title.value = text\r\n })\r\n const _props = getProps()\r\n\r\n return {\r\n _props,\r\n title\r\n }\r\n }\r\n})\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Ch1>{{title}}\u003C/h1>\r\n \u003Cdiv>{{_props}}\u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n**index.ts**\r\n```ts\r\nimport Demo from './indexvue'\r\nexport * from './types'\r\nexport * from './composable'\r\n````\r\n\r\n**App.vue**\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport {Demo, useComponent} from './Demo'\r\nimport { ref, watch } from 'vue';\r\n\r\nconst a = ref('1')\r\n// [ registerComponent, ExposeMethods & { setProps, getProps } ]\r\nconst [registerComponent, { setProps, setTitle } ] = useComponent()\r\n\r\nsetProps({\r\n text:'open'\r\n}) // 调用修改值,动态修改组件内部属性\r\nwatch(() => a.value, () => { // 监听输入框值得变化修改组件属性\r\n setTitle(a.value)\r\n})\r\n\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CDemo @register=\"registerComponent\" text=\"111\"/>\r\n \u003Cinput v-model=\"a\"/>\r\n\u003C/template>\r\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.",[2928],{"name":2929,"color":2930},"enhancement","a2eeef",1854,"useRegisterComponent","2022-09-21T16:38:19Z","https://github.com/vueuse/vueuse/issues/1854",0.66131365,{"description":2937,"labels":2938,"number":2939,"owner":2857,"repository":2857,"state":2858,"title":2940,"updated_at":2868,"url":2941,"score":2942},"Hi\r\nThanks for your great compositions.\r\nI used the `useVModel` in my vue3 project. It works fine when the component does not have the `emits` option, otherwise `vetur` gives an error in the `useVModel` emit type.\r\n\r\n\r\n\r\n`var emit: (event: \"update:modelValue\", ...args: any[]) => void\r\nArgument of type '(event: \"update:modelValue\", ...args: any[]) => void' is not assignable to parameter of type '(name: string, value: any) => void'.\r\n Types of parameters 'event' and 'name' are incompatible.\r\n Type 'string' is not assignable to type '\"update:modelValue\"'`\r\n \r\nAnd also I think the `useVModel` itself should have the emits option.",[],316,"useVModel emit type is incorrect when component have emits option","https://github.com/vueuse/vueuse/issues/316",0.6703609,["Reactive",2944],{},["Set"],["ShallowReactive",2947],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fe4D7CzIjemZLzjzoEs0IIxj4uYHPhJHt3rK3mLqhq8Q":-1},"/vueuse/vueuse/431"]