rule "vue/no-unused-properties" on <script setup> api component use prop from api defineProps in api computed

[ronny1020]

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: ^7.32.0
• eslint-plugin-vue version: ^7.18.0
• Node version: v14.17.0
• Operating System: win 10

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/airbnb',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    '@typescript-eslint/comma-dangle': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/indent': 'off',
    '@typescript-eslint/member-ordering': 'off',
    '@typescript-eslint/no-unused-vars': [
      'warn',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    '@typescript-eslint/no-use-before-define': 'error',
    'class-methods-use-this': 'off',
    'function-paren-newline': 'off',
    'id-blacklist': 'off',
    'implicit-arrow-linebreak': 'off',
    'import/no-cycle': [
      2,
      {
        maxDepth: 1,
      },
    ],
    'import/no-dynamic-require': 'off',
    'import/no-extraneous-dependencies': 'off',
    'import/no-unresolved': 'off',
    'import/prefer-default-export': 'off',
    'lines-between-class-members': 'off',
    'max-len': 'off',
    'no-confusing-arrow': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-plusplus': [
      'error',
      {
        allowForLoopAfterthoughts: true,
      },
    ],
    'no-restricted-syntax': 'off',
    'no-spaced-func': 'off',
    'no-use-before-define': 'off',
    'object-curly-newline': 'off',
    'object-shorthand': [
      'error',
      'always',
      {
        avoidExplicitReturnArrows: true,
      },
    ],
    'operator-linebreak': 'off',
    'vue/block-lang': [
      'error',
      {
        script: {
          lang: 'ts',
        },
      },
    ],
    'vue/html-closing-bracket-newline': [
      'error',
      {
        multiline: 'always',
        singleline: 'never',
      },
    ],
    'vue/html-self-closing': [
      'error',
      {
        html: {
          component: 'always',
          normal: 'always',
          void: 'always',
        },
        math: 'always',
        svg: 'always',
      },
    ],
    'vue/new-line-between-multi-line-property': 'error',
    'vue/no-bare-strings-in-template': [
      'error',
      {
        allowlist: [
          '(',
          ')',
          ',',
          '.',
          '&',
          '+',
          '-',
          '=',
          '*',
          '/',
          '#',
          '%',
          '!',
          '?',
          ':',
          '[',
          ']',
          '{',
          '}',
          '<',
          '>',
          '\u00b7',
          '\u2022',
          '\u2010',
          '\u2013',
          '\u2014',
          '\u2212',
          '|',
        ],
        attributes: {
          '/.+/': [
            'title',
            'aria-label',
            'aria-placeholder',
            'aria-roledescription',
            'aria-valuetext',
          ],
          input: ['placeholder'],
        },
        directives: ['v-text'],
      },
    ],
    'vue/no-duplicate-attr-inheritance': 'error',
    'vue/no-multiple-objects-in-class': 'error',
    'vue/no-parsing-error': [
      2,
      {
        'invalid-first-character-of-tag-name': false,
      },
    ],
    'vue/no-potential-component-option-typo': 'error',
    'vue/no-template-target-blank': 'error',
    'vue/no-unregistered-components': 'error',
    'vue/no-unused-properties': [
      'warn',
      {
        groups: ['props', 'data', 'computed', 'methods', 'setup'],
      },
    ],
    'vue/no-unused-refs': 'error',
    'vue/no-useless-v-bind': 'error',
    'vue/padding-line-between-blocks': 'error',
    'vue/v-for-delimiter-style': ['error', 'of'],
    'vue/v-on-function-call': [
      'error',
      'never',
      {
        ignoreIncludesComment: false,
      },
    ],
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
    {
      files: ['*.html'],
      processor: 'vue/.vue',
    },
  ],
};

What did you do?

<template>
  <span v-for="(item, index) of pages" :key="index" @click="changePage(item)">
    {{ item }}
  </span>
</template>

<script setup lang="ts">
import {
  computed,
  defineProps,
  toRefs,
  withDefaults,
  defineEmits,
  ComputedRef,
} from 'vue';
import { getPagesOnPagination } from '@/libs/pagination';

const props = withDefaults(
  defineProps<{
    currentPage: number;
    totalRows: number;
    rowsPerPage: number;
  }>(),
  {
    currentPage: 1,
    totalRows: 100,
    rowsPerPage: 10,
  }
);
const { currentPage, totalRows, rowsPerPage } = toRefs(props);

const totalPages = computed(() =>
  Math.ceil(totalRows.value / rowsPerPage.value)
);

const pages: ComputedRef<(number | '...')[]> = computed(() =>
  getPagesOnPagination(currentPage.value, totalPages.value)
);

const emit = defineEmits<{
  (e: 'changePage', page: number): void;
}>();

function changePage(page: number | '...') {
  if (page === '...') {
    return;
  }
  emit('changePage', page);
}
</script>

<style lang="scss" scoped>
//
</style>

What did you expect to happen?
I use all props from the api defineProps in the api computed.
Error from 'vue/no-unused-properties' should not happen.

What actually happened?

warning: 'currentPage' of property found, but never used (vue/no-unused-properties) at src\components\Pagination.vue:18:5:
  16 | const props = withDefaults(
  17 |   defineProps<{
> 18 |     currentPage: number;
     |     ^
  19 |     totalRows: number;
  20 |     rowsPerPage: number;
  21 |   }>(),


warning: 'totalRows' of property found, but never used (vue/no-unused-properties) at src\components\Pagination.vue:19:5:
  17 |   defineProps<{
  18 |     currentPage: number;
> 19 |     totalRows: number;
     |     ^
  20 |     rowsPerPage: number;
  21 |   }>(),
  22 |   {


warning: 'rowsPerPage' of property found, but never used (vue/no-unused-properties) at src\components\Pagination.vue:20:5:
  18 |     currentPage: number;
  19 |     totalRows: number;
> 20 |     rowsPerPage: number;
     |     ^
  21 |   }>(),
  22 |   {
  23 |     currentPage: 1,

Repository to reproduce this issue