useVModel

v-model バインディング、props + emit -> ref の省略形

このコンポーザブルよりも Vue の defineModel を使用することをお勧めしますが、TSX を使用する場合や deep: true オプションのように defineModel がサポートしていないエッジケースもあります。

使用法

import { useVModel } from '@vueuse/core'

const props = defineProps<{
  modelValue: string
}>()
const emit = defineEmits(['update:modelValue'])

const data = useVModel(props, 'modelValue', emit)

Options API

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')
  },
}