False positive 'no-parsing-error' when using reserved keyword 'package'

[schl3ck]

Checklist

• [x] I checked the FAQ.

Tell us about your environment

• ESLint version: 7.6.0
• eslint-plugin-vue version: 6.2.2
• Node version: 12.13.0
• Operating System: Windows 10 Version 1803

Please show your full configuration:

module.exports = {
  root: true,

  env: {
    node: true,
  },

  extends: ["plugin:vue/essential", "eslint:recommended"],

  parserOptions: {
    parser: "babel-eslint",
  },

  rules: {
    indent: "off",
    "no-console": "off",
    "no-debugger": "off",
    "prettier/prettier": "off",
    "operator-linebreak": [
      "warn",
      "before",
      {
        overrides: {
          "=": "after",
          "*=": "after",
          "/=": "after",
          "%=": "after",
          "+=": "after",
          "-=": "after",
          "<<=": "after",
          ">>=": "after",
          ">>>=": "after",
          "&=": "after",
          "^=": "after",
          "|=": "after",
          "&&=": "after",
          "||=": "after",
          "??=": "after",
        },
      },
    ],
    "vue/no-unused-components": "warn",
    "vue/no-unused-vars": "warn",
    "vue/singleline-html-element-content-newline": "off",
    "vue/array-bracket-spacing": "error",
    "vue/arrow-spacing": "error",
    "vue/block-spacing": "error",
    "vue/brace-style": "error",
    "vue/camelcase": "error",
    "vue/comma-dangle": "error",
    "vue/component-definition-name-casing": "error",
    "vue/component-name-in-template-casing": "error",
    "vue/component-tags-order": [
      "error",
      { order: ["template", "script", "style"] },
    ],
    "vue/dot-location": "error",
    "vue/eqeqeq": "error",
    "vue/key-spacing": "error",
    "vue/keyword-spacing": "error",
    "vue/match-component-file-name": "error",
    "vue/max-len": [
      "error",
      {
        code: 80,
        tabWidth: 2,
        comments: 80,
        ignoreComments: true,
        ignoreTrailingComments: true,
        ignoreUrls: true,
        ignoreStrings: true,
        ignoreTemplateLiterals: true,
        ignoreRegExpLiterals: true,
      },
    ],
    "vue/max-attributes-per-line": [
      "error",
      {
        singleline: 10,
      },
    ],
    "vue/no-deprecated-scope-attribute": "error",
    "vue/no-deprecated-slot-attribute": "error",
    "vue/no-deprecated-slot-scope-attribute": "error",
    "vue/no-empty-pattern": "error",
    "vue/no-irregular-whitespace": "error",
    "vue/no-reserved-component-names": "error",
    "vue/no-unsupported-features": "error",
    "vue/object-curly-spacing": ["error", "always"],
    "vue/padding-line-between-blocks": "error",
    "vue/require-direct-export": "error",
    "vue/require-name-property": "error",
    "vue/script-indent": "off",
    "vue/space-infix-ops": "error",
    "vue/space-unary-ops": "error",
    "vue/v-on-function-call": "error",
    "vue/v-slot-style": "error",
    "vue/valid-v-bind-sync": "error",
    "vue/valid-v-slot": "error",
  },
};

What did you do?

I created a property called package and wanted to reference it in the teplate section, but it gives me the error no-parsing-error. The SFC compiles without problems though.

<template>
  <div>
    <h2>Package</h2>
    <b-card>
      <b-table-simple small>
        <tr>
          <th class="col-md-2 text-strong">Filename</th>
          <td>
            <FormatFilename
              v-if="hasData"
              :filename="package.filename"
              :downloadUrl="package.downloadUrl"
              :fileSize="package.fileSize"
            />
          </td>
        </tr>
      </b-table-simple>
    </b-card>
  </div>
</template>

<script>
import HTTP from "@/utils/http";
import FormatFilename from "@/components/FormatFilename.vue";
import backend from "@/utils/backend";

export default {
  name: "ViewPackage",
  props: {
    packageId: {
      type: Number,
      required: true,
    },
  },
  components: {
    FormatFilename,
  },
  data() {
    return {
      package: {},
    };
  },
  created() {
    HTTP.get("/packages/" + this.packageId).then((response) => {
      response.data.downloadUrl = backend.url(
        `/packages/${this.packageId}?download=1`
      );
      this.package = response.data;
    });
  },
  computed: {
    /** @returns {boolean} */
    hasData() {
      return Boolean(this.package.filename);
    },
  },
};
</script>

What did you expect to happen? To not get any error, because compilation just works fine.

What actually happened?

  11:15  error  'v-bind' directives require an attribute value                                                     vue/valid-v-bind
  11:26  error  Parsing error: Line 1: Unexpected reserved word 'package'

> 1 | 0(package.filename)
    |   ^     vue/no-parsing-error
  12:15  error  'v-bind' directives require an attribute value                                                     vue/valid-v-bind
  12:29  error  Parsing error: Line 1: Unexpected reserved word 'package'

> 1 | 0(package.downloadUrl)
    |   ^  vue/no-parsing-error
  13:15  error  'v-bind' directives require an attribute value                                                     vue/valid-v-bind
  13:26  error  Parsing error: Line 1: Unexpected reserved word 'package'

> 1 | 0(package.fileSize)
    |   ^     vue/no-parsing-error

✖ 6 problems (6 errors, 0 warnings)

Repository to reproduce this issue No repository, but simple steps:

1. Create or open any SFC
2. Add the property package to the object returned from data()
3. Use the property in the template section

This error is also raised when I try it with other reserved future keywords.

[kdekooter]

Bumping this one here. I am having the same issue. This is quite a showstopper if you want to stick to the business terms in an e-commerce app. And I really do not want to use some stupid naming convention like myPackage or thePackage.