v-bind with multiple arguments triggers no-parsing-error

[KaelWD]

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: 8.2.0
• eslint-plugin-vue version: 8.0.3
• Node version: 16.13.0
• Operating System: Kubuntu 20.04

Please show your full configuration:

{
  root: true,
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    project: './tsconfig.eslint.json',
    tsconfigRootDir: __dirname,
    extraFileExtensions: ['.vue'],
  },
  extends: [
    'standard',
    'plugin:vue/vue3-recommended',
    'plugin:sonarjs/recommended',
  ],
  env: {
    node: true,
    browser: true,
    es6: true,
  },
  plugins: [
    '@typescript-eslint',
    'sonarjs',
    'react',
  ],
  rules: { ... }

What did you do?

<v-menu>
  <template v-slot:activator="{ props: menu }">
    <v-tooltip bottom>
      <template v-slot:activator="{ props: tooltip }">
        <v-btn
          color="primary"
          dark
          v-bind="menu, tooltip"
        >
          Dropdown w/ Tooltip
        </v-btn>
      </template>
      <span>I'm A Tooltip</span>
    </v-tooltip>
  </template>
</v-menu>

What did you expect to happen?
No warnings

What actually happened?

error: 'menu' is defined but never used (vue/no-unused-vars) at src/examples/v-menu/slot-activator-and-tooltip.vue:4:44:
  2 |   <div class="text-center">
  3 |     <v-menu>
> 4 |       <template v-slot:activator="{ props: menu }">
    |                                            ^
  5 |         <v-tooltip bottom>
  6 |           <template v-slot:activator="{ props: tooltip }">
  7 |             <v-btn


error: 'tooltip' is defined but never used (vue/no-unused-vars) at src/examples/v-menu/slot-activator-and-tooltip.vue:6:48:
  4 |       <template v-slot:activator="{ props: menu }">
  5 |         <v-tooltip bottom>
> 6 |           <template v-slot:activator="{ props: tooltip }">
    |                                                ^
  7 |             <v-btn
  8 |               color="primary"
  9 |               dark


error: Parsing error: Unexpected token ',' (vue/no-parsing-error) at src/examples/v-menu/slot-activator-and-tooltip.vue:10:27:
   8 |               color="primary"
   9 |               dark
> 10 |               v-bind="menu, tooltip"
     |                           ^
  11 |             >
  12 |               Dropdown w/ Tooltip
  13 |             </v-btn>

v-bind is compiled to a mergeProps call, so its value should be parsed as function arguments rather than an expression.

_createVNode(_component_v_btn, _mergeProps({
  color: "primary",
  dark: ""
}, menu, tooltip), { ...

Related: vuejs/core#1627

[ota-meshi]

Thank you for letting me know that it works with vue.

However, it also looks like a Vue unintended bug. I will watch what kind of reaction have to your comment.
https://github.com/vuejs/vue-next/issues/4105#issuecomment-981330696