feat(useVModel): new function useVModel

Author: antfu

packages/core/useVModel/index.md

@@ -0,0 +1,18 @@
+# useVModel
+
+> Shorthand for v-model binding, props + emit -> ref
+
+## Usage
+
+```js
+import { useVModel } from '@vueuse/core'
+
+export default {
+  setup(props, { emit }) {
+    const data = useVModel(props, 'data', emit)
+
+    console.log(data.value) // props.data
+    data.value = 'foo' // emit('update:data', 'foo')
+  },
+}
+```

packages/core/useVModel/index.stories.tsx

@@ -0,0 +1,10 @@
+import { defineDemo } from '../../_docs'
+
+defineDemo(
+  {
+    name: 'useVModel',
+    category: 'Component',
+    docs: require('./index.md'),
+    module,
+  },
+)

packages/core/useVModel/index.ts

@@ -0,0 +1,15 @@
+import { computed, getCurrentInstance, isVue3 } from 'vue-demi'
+
+export function useVModel<P extends object>(props: P, key: keyof P, emit?: (name: string, value: any) => void) {
+  // @ts-expect-error mis-alignment with @vue/composition-api
+  const _emit = emit || isVue3 ? getCurrentInstance()?.emit : getCurrentInstance()?.$emit
+
+  return computed({
+    get() {
+      return props[key]
+    },
+    set(value) {
+      _emit(`update:${key}`, value)
+    },
+  })
+}

packages/z.placeholder.stories.tsx

@@ -7,6 +7,7 @@ const sections = [
   'Links',
   'Showcases',
   'State',
+  'Component',
   'Sensors',
   'Browser',
   'Misc',