Eslint-plugin-vue: Valid-template-root: false positive when using 3 or more slots in one component

[Excalibaard]

Tell us about your environment

• ESLint version: 6.7.2
• eslint-plugin-vue version: 6.2.1
• Node version: 12.13.1

Please show your full configuration:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "airbnb-base",
        "plugin:vue/recommended"

    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "vue-eslint-parser",
    "parserOptions": {
      "parser": "babel-eslint",
      "sourceType": "module",
      "allowImportExportEverywhere": true
    },
    "plugins": [
        "vue",
        "import"
    ],
    "rules": {
      "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
      "no-return-assign": ["error", "except-parens"],
      "prefer-template": 0,
      "template-curly-spacing" : "off",
      "indent": ["error", 2, {
        "ignoredNodes": ["TemplateLiteral"]
       }]
    },
    "settings": {
      "import/resolver": {
        "alias": {
          "map": [
            ["@", "./app/frontend/src"]
          ]
        }
      }
    }
}

What did you do?

<template lang="html">
  <v-autocomplete
    v-model="formData"
    :items="items"
  >
    <template #item="{ item }">
      <span> {{ item.id }} || {{ item.description }} </span>
    </template>
    <template #selection="{ item }">
      <span> {{ item.id }}, {{ item.description }} </span>
    </template>
    <template #append="{ item }">
      <span> {{ item.id }} -- {{ item.description }} </span>
    </template>
  </v-autocomplete>
</template>

The most important part here is that I use 3+ slots and vue 2.6 slot syntax for one component.

What did you expect to happen?
It shouldn't error. ESLint doesn't error when I use the CLI, and the application works as expected.

What actually happened?
For three slots, the same error [vue/valid-template-root] is returned twice, erroring on the same line. The amount of errors also increases when I try to use a component with more than three slots, where the amount of errors with __n__ slot templates is __n - 1__. See image below for demonstration.

Worth noting: using one or two slot templates gives no errors, as expected.

[KumaCool]

I also encountered the same error.
Neither cli nor console reported an error, and the program ran as expected.
But there is an error message in VSCode

[ota-meshi]

Thank you for this issue.

I see this as Vetur bug.

Maybe you don't need to use Vetur's built-in eslint-plugin-vue, so turn off template validation in .vscode/settings.json.

{
  "vetur.validation.template": false
}

https://vuejs.github.io/vetur/linting-error.html#linting-for-template
https://eslint.vuejs.org/user-guide/#visual-studio-code

[Excalibaard]

Switching to using the locally installed eslint-plugin-vue instead of the one bundled with Vetur works! @ota-meshi 's solution has resolved my issue :)

Thank you!

[ota-meshi]

@Excalibaard I find the Vetur documentation related to this issue.
It seems better not to write lang="html".

https://vuejs.github.io/vetur/highlighting.html#syntax-highlighting
https://github.com/vuejs/vetur/issues/1409