How to configure ESLint to understand Vue.js v-model directive?

Question

Let's have a sample single file Component:

<template>
  <InputComponent v-model="foo" />
</template>

<script setup>
let foo = 1
</script>

ESLint says: ESLint: 'foo' is never reassigned. Use 'const' instead. (prefer-const)

However since it is used in a v-model directive it is used in a read-write context, it should be okay.

I have installed eslint-plugin-vue and has the parser set to vue-eslint-parser in my .eslintrc. but somehow it does not seem to understand what is going on with the v-model directive.

How to configure ESLint to understand Vue.js v-model directive?

Answer 1

Based on Vue documentation actually a const should be used, because primitive types should be declared by the ref() helper which returns a proxy which in turn will not be reassigned. So probably the proper code is like this:

<template>
  <InputComponent v-model="foo" />
</template>

<script setup>
import { ref } from 'vue'
const foo = ref(1)
</script>