Description
Please describe what the rule should do:
This rule only applies to Vue 3: There, :foo="bar" @update:foo="bar = $event" can be simplified to v-model:foo="bar", and :modelValue="foo" @update:modelValue="foo = $event" can be simplified to v-model="foo". This rule suggests those simplifications. See also https://vuejs.org/guide/components/v-model.html#v-model-arguments
What category should the rule belong to?
[ ] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[x] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
<!-- BAD -->
<my-component :modelValue="foo" @update:modelValue="foo = $event" />
<my-component :model-value="foo" @update:model-value="foo = $event" />
<my-component :foo="bar" @update:foo="bar = $event" />
<my-component v-bind:foo="bar" v-on:update:foo="bar = $event" />
<my-component :foo="bar" @update:foo="(foo) => bar = foo" />
<!-- GOOD -->
<my-component v-model="foo" />
<my-component v-model:foo="bar" />
<my-component :foo="bar" @update:foo="baz = $event" /> <!-- different variables -->
<my-component :foo="bar" @update:foo="updateFoo($event)" /> <!-- function call -->
<my-component :foo="bar" @update:foo="(foo) => updateFoo(foo)" /> <!-- function call -->Additional context
The rule is especially helpful after preparing a Vue 2→3 migration with renaming model props/event in a Vue 3-compatible manner, see also #2236.
Note that this rule doesn't work for Vue 2's :value="…" @input="…", since those prop/event names can be configured per component with the model definition, see again #2236.