vue/no-multiple-template-root triggered by comments OUTSIDE of my template tag

[ArianeBouchardConformit]

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.57.1
• eslint-plugin-vue version: 10.5.1
• Vue version: 2.7.16
• Node version: 22.18.0
• Operating System: Mac OS 26

Please show your full configuration:

const ERROR_LEVELS = Object.freeze({
   off: 0,
   warn: 1,
   error: 2,
})

const eslintSettings = {
   root: true,
   parserOptions: {
      sourceType: 'module',
      ecmaVersion: '2022',
   },
   env: {
      es2022: true,
      browser: true,
   },
   globals: {
      aptrinsic: 'readonly',
      __dirname: true,
      process: true,
      module: true,
      global: 'readonly', // Add 'global' as a global variable and mark it as readonly
      Buffer: 'readonly', // Add 'Buffer' as a global variable and mark it as readonly
      require: true,
   },
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
   extends: [ 'eslint:recommended', 'plugin:vue/vue2-recommended' ],
   // Required to lint *.vue files
   plugins: [
      'vue',
   ],
   rules: {
      'vue/html-indent': ERROR_LEVELS.off,
      'vue/no-restricted-html-elements': [
         ERROR_LEVELS.error,
         {
            element: 'RouterLink',
            message: `Use RouterLinkCfm instead.`,
         },
      ],
      'vue/no-multiple-template-root': [ ERROR_LEVELS.error, { disallowComments: true } ],
      //#endregion Vue - HTML
   },
}

module.exports = eslintSettings

What did you do?

<script>
import * as vueRouterFile from 'vue-router'

export default {
   name: 'RouterLinkCfm',
   components: { RouterLink: vueRouterFile.RouterLink },
}
</script>

<!-- eslint-disable vue/no-restricted-html-elements -->
<template>
   <RouterLink
      class="router-link-cfm"
      :custom="true"
   />
</template>
<!-- eslint-enable vue/no-restricted-html-elements -->

What did you expect to happen?

My eslint-disable/enable comment is not a violation because it's OUTSIDE the template tag

What actually happened?

10:1 error The template root disallows comments vue/no-multiple-template-root
17:1 error The template root disallows comments vue/no-multiple-template-root

Repository to reproduce this issue

https://github.com/ArianeBouchardConformit/eslint-bug-repro-vue-no-multiple-template-root

Extra details

We're gradually preparing for a migration to Vue 3, and in Vue 3, this.$refs.myRef.$el (which you might use to get the exact height of a child component, for instance) will not work as intended if you have multiple root elements, even if one of them is an HTML comment. I thought the solution was to move all comments like this one that concerns an ESLint rule exception:

<template>
   <!-- eslint-disable-next-line vue/no-restricted-html-elements -->
   <RouterLink
      class="router-link-cfm"
      :custom="true"
   />
</template>

outside of the template tag, like this:

<!-- eslint-disable vue/no-restricted-html-elements -->
<template>
   <RouterLink
      class="router-link-cfm"
      :custom="true"
   />
</template>
<!-- eslint-enable vue/no-restricted-html-elements -->

And then, I wanted to block any future such instances with an ESLint rule. But the rule I wanted to use for this, vue/no-multiple-template-root with disallowComments: true, gets triggered by comments OUTSIDE of my template tag as well.