False positives from one-component-per-file

[markrian]

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: 7.17 (also tested with 6.8)
• eslint-plugin-vue version: 7.4.1
• Node version: 12.18.4
• Operating System: Ubuntu 20.04

Please show your full configuration:

module.exports = {
  extends: ['plugin:vue/recommended'],
};

What did you do?

const foo = { mixin() {} };

Vue.component({
  mixins: [foo.mixin({})],
});

and equally:

<script>
const foo = { mixin() {} };

export default {
  mixins: [foo.mixin({})],
};
</script>

What did you expect to happen?
There should be no reported violations of one-component-per-file.

What actually happened?

yarn run v1.22.5
$ eslint test.js

/home/markrian/dev/eslint-plugin-vue-bug/test.js
  4:15  warning  There is more than one component in this file  vue/one-component-per-file
  5:22  warning  There is more than one component in this file  vue/one-component-per-file

✖ 2 problems (0 errors, 2 warnings)

Done in 0.39s.

Repository to reproduce this issue
https://gitlab.com/markrian/eslint-plugin-vue-one-component-per-file-bug

[markrian]

The really odd thing with this is that:

1. The called method must be called mixin
2. The method must be given an object literal as an argument

That is, none of these (separately) trigger the rule's warning:

foo.bar({})
foo.extend({})
foo.mixin()
foo.mixin(new Object())
mixin({})

but this does:

foo.mixin({})

[markrian]

After looking into this a bit further, I think this false positive ultimately comes from this check:

        // for Vue.js 3.x
        // app.component('xxx', {}) || app.mixin({})
        const isFullVueComponent =
          propName &&
          ['component', 'mixin'].includes(propName) &&
          isObjectArgument(node)

        return Boolean(isFullVueComponent)

And using component as the method name in my test case also yields a false positive.

There's a similar branch for Vue.js 2.x which checks that the callee object name is Vue, but for Vue 3, that's not possible, since the application instance could be called anything. It's not obvious to me how this heuristic could be tightened up to be strictly better... 🤔