`vue/no-useless-mustaches` auto-fix produces invalid HTML

[claneo]

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.56.0
• eslint-plugin-vue version: 9.20.1
• Vue version:
• Node version:
• Operating System:

Please show your full configuration:

module.exports = {
    extends: ['plugin:vue/recommended'],
    rules: {
        'vue/no-useless-mustaches': 'error',
    },
};

What did you do?

<template>
    <span>{{ '<' }}</span>
</template>

What did you expect to happen?

Don't report error

Or auto fix to html entities

<template>
    <span>&lt;</span>
</template>

What actually happened?

<template>
  <span><</span>
  <!--  ^ Invalid -->
</template>

Repository to reproduce this issue

Playground