<script setup> with <component :is> ----->'xxx' is defined but never used.eslintno-unused-vars

[chengweiou]

Checklist

• [x ] I have tried restarting my IDE and the issue persists.
• [ x] I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 8.1.0
• eslint-plugin-vue version: 8.0.3
• Node version: v16.4.0
• Operating System: mac big sur 11.6

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "prettier",
  ],
  settings: { // @路径引入的文件也需要校验
    'import/resolver': {
      alias: {
        map: [
          ['@', './src'],
        ],
        extensions: ['.ts', '.js', '.jsx', '.json', '.vue'],
      },
    },
  },
  rules: {
    // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // allow async-await
    'generator-star-spacing': 'off',
    'space-before-function-paren': ['error', 'never'],
    'comma-dangle': ['error', 'always-multiline'],
    'semi': ['error', 'never'],
    'no-unused-vars': 'warn',
    // allow debugger during development
    'no-tabs': 0,
    'no-trailing-spaces': 'error',
    'no-multiple-empty-lines': ['error', { 'max': 2, 'maxEOF': 0, 'maxBOF': 0 }],
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "vue/first-attribute-linebreak": ["error", {
      "singleline": "ignore",
      "multiline": "ignore",
    }],
  },
  parserOptions: {
    ecmaVersion: '2021',
  },
  // overrides: [
  //   {
  //     files: [
  //       '**/__tests__/*.{j,t}s?(x)',
  //     ],
  //     env: {
  //       mocha: true,
  //     },
  //   },
  // ],
}

What did you do?

<template>
  <tab v-model:tab="tab" name="personlist" :list="tabNameList"/>
  <divider />
  <component :is="
      tab==0 ? 'memberlist'
    : tab==1 ? 'guestlist'
    : tab==2 ? 'trainerlist'
    : '' "/>
</template>
<script setup>
import Divider from '@/component/proj/divider.vue' // ok
import Tab from '@/component/proj/tab.vue' // ok
import Memberlist from './member/list.vue' // yellow underline warning because I use component with the string name. 
import Guestlist from './guest/list.vue' //'Guestlist' is defined but never used.eslintno-unused-vars
import Trainerlist from './trainer/list.vue' // 'Trainerlist' is defined but never used.eslintno-unused-vars
</script>

<script>
// the following code is before I move to setup
// import Divider from '@/component/proj/divider.vue'
// import Tab from '@/component/proj/tab.vue'
// import Memberlist from './member/list.vue'
// import Guestlist from './guest/list.vue'
// import Trainerlist from './trainer/list.vue'
export default {
  components: {
// they count as use in here, but no this one in setup
    // Divider, Tab, Memberlist, Guestlist, Trainerlist,
  },
</script>

What did you expect to happen?

<script setup> has no warning same as in <script> **What actually happened?**

**Repository to reproduce this issue**

[ota-meshi]

I don't think your component will work.
You should give the component, not the string.

You can check it on the Playground here.

For your file you need to do the following:

<template>

  <component :is="
      tab==0 ? Memberlist
    : tab==1 ? Guestlist
    : tab==2 ? Trainerlist
    : '' "/>
</template>