Could you assist me in resolving this issue :
When accessing a value from the props within the root scope of <script setup>, reactivity is lost (vue/no-setup-props-destructure)
The technologies I am using include :
- nuxt: "^3.6.5"
- typescript: "^5.1.6"
- eslint: "^8.46.0
- eslint-config-prettier: "^8.10.0"
- eslint-plugin-nuxt: "^4.0.0"
- eslint-plugin-vitest: "^0.2.8"
- eslint-plugin-vue: "^9.16.1"
- eslint-plugin-vuetify: "^2.0.5"
The following code snippet demonstrates the problem :
<script lang="ts" setup>
const props = defineProps<{ fruit: string }>()
const fruitColor = ref<FruitColor>(getColor(props.fruit))
</script>
This is my .eslintrc.js configuration file, which may provide some insight:
module.exports = {
root: true,
env: {
browser: true,
node: true
},
extends: ['@nuxtjs/eslint-config-typescript', 'plugin:nuxt/recommended', 'plugin:vitest/recommended', 'prettier'],
rules: {
'vue/script-indent': ['error', 2, { baseIndent: 1 }],
'vue/max-len': ['error', { code: 120 }],
'vue/component-name-in-template-casing': [
'error',
'kebab-case',
{
registeredComponentsOnly: true,
ignores: []
}
],
'comma-dangle': ['error', 'never'],
}
}