({{ asyncDisplay }})\u003C/template>\r\n```\r\n\r\n\r\nBut if I use a computed instead, it works\r\n```vue\r\n\u003Cscript setup>\r\nimport { ref, computed } from 'vue';\r\n\r\nconst display = computed(() => {\r\n return msg.value;\r\n});\r\n\r\nconst msg = ref('Hello world');\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\u003Cinput v-model=\"msg\" /> ({{ display }})\u003C/template>\r\n```\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-9xudtu/?file=src%2FApp.vue\n\n### System Info\n\n```Shell\nAll systems, all browsers, last version of vue and @vueuse\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.",[],3838,"computedAsync fails to track dependencies on ref that are not yet declared","2024-03-02T15:07:57Z","https://github.com/vueuse/vueuse/issues/3838",0.68387735,{"description":2898,"labels":2899,"number":2903,"owner":2857,"repository":2857,"state":2868,"title":2904,"updated_at":2905,"url":2906,"score":2907},"### Describe the bug\n\nWhen I read the article on the official website, I noticed that there was no difference in the performance of the two input boxes in the demo project. I downloaded version 10.8.0 of the project with the editor and found that the editor prompts me that this judgment is always True. Do you think there is a problem here?\r\n\r\n\n\n### Reproduction\n\nhttps://www.vueusejs.com/core/onStartTyping/#onstarttyping\n\n### System Info\n\n```Shell\nwindow11 chrome\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.",[2900],{"name":2901,"color":2902},"vue: upstream","0E8A16",3825,"onStartTyping demo bug","2024-12-23T22:58:51Z","https://github.com/vueuse/vueuse/issues/3825",0.68506366,{"description":2909,"labels":2910,"number":2911,"owner":2857,"repository":2858,"state":2868,"title":2912,"updated_at":2913,"url":2914,"score":2915},"I'm trying to set up a component library with vue-demi (Vite + Vue 3 + Setup Script). Importing thing work fine in Vue 3 apps, but fail for Vue 2. The resulting bundle looks like this:\r\n\r\nBaseButton.vue to be imported by Vue2/3 App\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { ref } from \"vue-demi\";\r\n\r\ndefineProps({\r\n label: {\r\n type: String,\r\n default: \"\",\r\n },\r\n});\r\n\r\nconst counter = ref(0);\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Clabel>\r\n {{ label }}\r\n {{ counter }}\r\n \u003Cbutton v-bind=\"$attrs\" @click=\"counter++\">\r\n \u003Cslot />\r\n \u003C/button>\r\n \u003C/label>\r\n\u003C/template>\r\n```\r\n\r\nBuild output:\r\n```js\r\nimport { defineComponent, ref, openBlock, createElementBlock, createTextVNode, toDisplayString, createElementVNode, mergeProps, renderSlot } from \"vue\";\r\nconst _sfc_main = /* @__PURE__ */ defineComponent({\r\n props: {\r\n label: {\r\n type: String,\r\n default: \"\"\r\n }\r\n },\r\n setup(__props) {\r\n const counter = ref(0);\r\n return (_ctx, _cache) => {\r\n return openBlock(), createElementBlock(\"label\", null, [\r\n createTextVNode(toDisplayString(__props.label) + \" \" + toDisplayString(counter.value) + \" \", 1),\r\n createElementVNode(\"button\", mergeProps(_ctx.$attrs, {\r\n onClick: _cache[0] || (_cache[0] = ($event) => counter.value++)\r\n }), [\r\n renderSlot(_ctx.$slots, \"default\")\r\n ], 16)\r\n ]);\r\n };\r\n }\r\n});\r\nexport { _sfc_main as BaseButton };\r\n```\r\n\r\nIn Vue 2 I run into `Uncaught TypeError: Object(...) is not a function` error with `defineComponent()`. I suppose it should be importing from \"vue-demi\" instead of \"vue\"?\r\n\r\nPackage.json\r\n```json\r\n\"dependencies\": {\r\n \"vue-demi\": \"^0.12.4\"\r\n },\r\n \"devDependencies\": {\r\n \"@types/node\": \"^17.0.21\",\r\n \"@vitejs/plugin-vue\": \"^2.2.0\",\r\n \"@vue/composition-api\": \"^1.4.9\",\r\n \"typescript\": \"^4.5.4\",\r\n \"vite\": \"^2.8.0\",\r\n \"vue\": \"^3.2.25\",\r\n \"vue-tsc\": \"^0.29.8\"\r\n },\r\n \"peerDependencies\": {\r\n \"@vue/composition-api\": \"^1.0.0-rc.1\",\r\n \"vue\": \"^2.0.0 || >=3.0.0\"\r\n },\r\n \"peerDependenciesMeta\": {\r\n \"@vue/composition-api\": {\r\n \"optional\": true\r\n }\r\n },\r\n```\r\n\r\nvite.config.ts\r\n```ts\r\nexport default defineConfig({\r\n plugins: [vue()],\r\n build: {\r\n lib: {\r\n entry: path.resolve(__dirname, \"src/lib.ts\"),\r\n name: \"myLib\",\r\n fileName: (format) => `lib.${format}.js`,\r\n },\r\n rollupOptions: {\r\n // make sure to externalize deps that shouldn't be bundled\r\n // into your library\r\n external: [\"vue\"],\r\n output: {\r\n // Provide global variables to use in the UMD build\r\n // for externalized deps\r\n globals: {\r\n vue: \"Vue\",\r\n },\r\n },\r\n },\r\n },\r\n optimizeDeps: {\r\n exclude: [\"vue-demi\"],\r\n },\r\n});\r\n```",[],145,"Not running on Vue 2 App","2022-09-04T15:48:05Z","https://github.com/vueuse/vue-demi/issues/145",0.6858315,{"description":2917,"labels":2918,"number":1229,"owner":2857,"repository":2858,"state":2868,"title":2922,"updated_at":2923,"url":2924,"score":2925},"Hello,\r\n\r\nI'm having trouble using your library to implement some functions in `typescript`. Is showing me the message\r\n\r\n```shell\r\n\"Error: [vue-composition-api] must call Vue.use (VueCompositionAPI) before using any function.\"\r\n```\r\nI leave below the error output.\r\nI will appreciate your help and your prompt response.!!\r\n\r\n\r\n\r\n```ts\r\nimport {ref, reactive, UnwrapRef, Ref } from 'vue-demi';\r\n\r\nexport function fxReactive\u003CT extends object>(obj: T): UnwrapRef\u003CT> {\r\n return reactive(obj);\r\n}\r\n\r\nconst fx = fxReactive({\r\n data: []\r\n});\r\n\r\nconsole.log(fx.data);\r\n```\r\n\r\n**devDependecies**\r\n\r\n```json\r\n\"@vue/composition-api\": \"^1.0.0-beta.1\",\r\n\"vue\": \"^2.6.11\"\r\n```\r\n\r\n**dependecies**\r\n```json\r\n\"vue-demi\": \"latest\"\r\n```\r\n\r\n\r\n**error**\r\n```shell\r\nC:\\Users\\c\\Desktop\\reactivefx\\node_modules\\@vue\\composition-api\\dist\\vue-composition-api.common.js:43\r\n throw new Error(\"[vue-composition-api] \" + msg);\r\n ^\r\nError: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.\r\n at assert (C:\\Users\\c\\Desktop\\reactivefx\\node_modules\\@vue\\composition-api\\dist\\vue-composition-api.common.js:43:15)\r\n at getVueConstructor (C:\\Users\\c\\Desktop\\reactivefx\\node_modules\\@vue\\composition-api\\dist\\vue-composition-api.common.js:83:9)\r\n at observe (C:\\Users\\c\\Desktop\\reactivefx\\node_modules\\@vue\\composition-api\\dist\\vue-composition-api.common.js:470:15)\r\n at Function.reactive (C:\\Users\\c\\Desktop\\reactivefx\\node_modules\\@vue\\composition-api\\dist\\vue-composition-api.common.js:595:20)\r\n at fxReactive (C:\\Users\\c\\Desktop\\reactivefx\\src\\index.ts:6:10)\r\n at Object.\u003Canonymous> (C:\\Users\\c\\Desktop\\reactivefx\\src\\index.ts:9:12)\r\n at Module._compile (internal/modules/cjs/loader.js:1176:30)\r\n at Module.m._compile (C:\\Users\\c\\AppData\\Roaming\\npm\\node_modules\\ts-node\\src\\index.ts:473:23)\r\n at Module._extensions..js (internal/modules/cjs/loader.js:1196:10)\r\n at Object.require.extensions.\u003Ccomputed> [as .ts] (C:\\Users\\c\\AppData\\Roaming\\npm\\node_modules\\ts-node\\src\\index.ts:476:12)\r\n```\r\n",[2919],{"name":2920,"color":2921},"needs reproduction","fcd735","Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function in typescripts","2020-08-20T15:29:40Z","https://github.com/vueuse/vue-demi/issues/6",0.69218457,{"description":2927,"labels":2928,"number":2929,"owner":2857,"repository":2857,"state":2868,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### 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.6936611,{"description":2935,"labels":2936,"number":2937,"owner":2857,"repository":2857,"state":2868,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### Describe the bug\n\n## Syntax error, you shouldn't use \"const A extends ...\"\r\n\r\n```javascript\r\n\r\nexport function makeDestructurable\u003C\r\n T extends Record\u003Cstring, unknown>,\r\n const A extends readonly any[],\r\n>(obj: T, arr: A): T & A {\r\n if (typeof Symbol !== 'undefined') {\r\n const clone = { ...obj }\r\n\r\n Object.defineProperty(clone, Symbol.iterator, {\r\n enumerable: false,\r\n value() {\r\n let index = 0\r\n return {\r\n next: () => ({\r\n value: arr[index++],\r\n done: index > arr.length,\r\n }),\r\n }\r\n },\r\n })\r\n\r\n return clone as T & A\r\n }\r\n else {\r\n return Object.assign([...arr], obj) as unknown as T & A\r\n }\r\n}\r\n```\r\n\n\n### Reproduction\n\nnull\n\n### System Info\n\n```Shell\nnull\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.",[],4023,"Syntax error","2024-06-11T13:29:53Z","https://github.com/vueuse/vueuse/issues/4023",0.69419956,["Reactive",2943],{},["Set"],["ShallowReactive",2946],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fnzncG5B3oZ4D5cPiT-b6oWCHfogfC6ns7xZx4zDQJlE":-1},"/vueuse/vue-demi/28"]