no-setup-props-reactivity-loss triggered when passing destructured props to composable #2761
Description
Checklist
- I have tried restarting my IDE and the issue persists.
- I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: 9.29.0
- eslint-plugin-vue version: 10.2.0
- Vue version: 3.5.16
- Node version: 22
- Operating System: macOS
Please show your full configuration:
import ts from 'typescript-eslint';
import vue from 'eslint-plugin-vue';
import globals from 'globals';
export default ts.config(
{
name: 'vue',
extends: [...ts.configs.recommended, ...vue.configs['flat/recommended']],
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
globals: globals.browser,
parserOptions: {
parser: ts.parser,
},
},
files: ['**/*.vue'],
rules: {
'vue/block-order': ['error', { order: ['template', 'script', 'style'] }],
'vue/block-tag-newline': 'error',
'vue/component-name-in-template-casing': 'error',
'vue/component-options-name-casing': 'error',
'vue/custom-event-name-casing': 'error',
'vue/define-emits-declaration': 'error',
'vue/define-macros-order': 'error',
'vue/define-props-declaration': 'error',
'vue/match-component-file-name': 'error',
'vue/match-component-import-name': 'error',
'vue/multi-word-component-names': 'off',
'vue/next-tick-style': 'error',
'vue/no-boolean-default': 'error',
'vue/no-deprecated-model-definition': 'error',
'vue/no-duplicate-attr-inheritance': 'error',
'vue/no-empty-component-block': 'error',
'vue/no-multiple-objects-in-class': 'error',
'vue/no-potential-component-option-typo': 'error',
'vue/no-ref-object-reactivity-loss': 'error',
'vue/no-required-prop-with-default': 'error',
'vue/no-reserved-component-names': 'off',
'vue/no-setup-props-reactivity-loss': 'error',
'vue/no-template-target-blank': 'error',
'vue/no-this-in-before-route-enter': 'error',
'vue/no-use-v-else-with-v-for': 'error',
'vue/no-useless-mustaches': 'error',
'vue/no-useless-v-bind': 'error',
'vue/no-v-text': 'error',
'vue/padding-line-between-blocks': 'error',
'vue/prefer-define-options': 'error',
'vue/prefer-prop-type-boolean-first': 'error',
'vue/prefer-separate-static-class': 'error',
'vue/prefer-true-attribute-shorthand': 'error',
'vue/require-direct-export': 'error',
'vue/require-explicit-slots': 'error',
'vue/require-macro-variable-name': 'error',
'vue/no-undef-properties': 'error',
'vue/no-unused-emit-declarations': 'error',
'vue/no-unused-properties': 'error',
'vue/no-unused-refs': 'error',
},
},
);What did you do?
const { count, maxDigits = undefined } = defineProps<{
count: number;
maxDigits?: number;
}>();
const { label } = useMaxCount(count, maxDigits);where useMaxCount is typed as:
export function useMaxCount(
number: MaybeRefOrGetter<number | undefined>,
maxDigits: MaybeRefOrGetter<number | undefined>,
) {
// implementation
}What did you expect to happen?
I expected to linting issues.
What actually happened?
I got the following eslint error:
26:19 error Getting a value from the `props` in root scope of `<script setup>` will cause the value to lose reactivity vue/no-setup-props-reactivity-loss
Repository to reproduce this issue
Coming...