[import/first] eslint rule misbehavior when use script setup alongside export default

[upupming]

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.32.0
• eslint-plugin-vue version: 8.0.3
• Node version: v14.17.6
• Operating System: macOS

Please show your full configuration:

/** @type {import('eslint').Linter.Config} */
module.exports = {
  extends: [
    'standard-with-typescript',
    'plugin:vue/vue3-recommended'
  ],
  // We have to explicit set the parser: https://stackoverflow.com/a/66525357
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  // https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-generate-no-undef-warnings
  env: {
    'vue/setup-compiler-macros': true
  },
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      parserOptions: {
        project: ['./tsconfig.json']
      },
      rules: {
        // The core 'no-undef' rules does not work with type definitions
        'no-undef': 'off'
      }
    },
    // storybook specific rules
    {
      files: ['**/**.stories.ts', '**/**.stories.tsx'],
      rules: {
        'import/no-anonymous-default-export': 0,
        'no-console': 0,
        '@typescript-eslint/consistent-type-assertions': 0

      }
    }
  ]
}

What did you do?

Actually, it is a builtin rule that does not work well with vue file, but I think we can help improve this builtin rule in this plugin.

<script lang="ts">
export interface DemoProps {
  msg?: string
}
export const a = 1
</script>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(1)
function inc () {
  count.value++
}

const props = defineProps<DemoProps>()
console.log(a)
</script>

<template>
  <button @click="inc">
    {{ count }} {{ props.msg }}
  </button>
</template>

What did you expect to happen?

It should not report any error.

What actually happened?

It reports an error: Import in body of module; reorder to top.eslintimport/first

And will fix the code to this, which is wrong:

<script lang="ts">
</script>

<script setup lang="ts">

import { ref } from 'vue'
type DemoProps = {
  msg?: string
}
export const a = 1

const count = ref(1)
function inc () {
  count.value++
}
const props = defineProps<DemoProps>()
console.log(a)
</script>

<template>
  <button @click="inc">
    {{ count }} {{ props.msg }}
  </button>
</template>

Repository to reproduce this issue

[ota-meshi]

Duplicate #1577.