Vue devtools version

6.5.0

Link to minimal reproduction

https://play.vuejs.org/#eNpVjrsKwjAYhV/lN0sUpNklFlxEF1eXLKX5K4HcSNIilL67CZVAxu9cOGclN++7ZUZyITyOQfkEEdPse2GV8S4kuCuNr8Hg00r8whScAdoxVagUaQ2uEHCC7R/ZLWFHZ2MCEz9wLf6RPlBrB28XtDzQk7Cc7bt5MUNC4/WQMBMAb7dZFjmrCXIm9UW531alWvpqc1awbW8/zLdYMA==

Steps to reproduce & screenshots

SFC playground sample.

1. Create SFC index.vue.
2. import FileNameIndex from './index.vue'
3. The component is registered as FileNameIndex, but Index is displayed on the devtool.

Dev server sample.

1. Create SFC ./FileNameIndex/index.vue.
2. import FileNameIndex from './FileNameIndex/index.vue'
3. The component is registered as FileNameIndex (by checking vm.$.components), but Index is displayed on the devtool.

What is expected?

The registered name should have a higher display priority than the file name.

The name of the component should be displayed as the registered one: FileNameIndex

What is actually happening?

The file name of the Component is evaluated,
https://github.com/vuejs/devtools/blob/main/packages/app-backend-vue3/src/components/util.ts#L30

• https://github.com/vuejs/devtools/blob/main/packages/app-backend-vue3/src/components/util.ts#L52-L55

before the registered name.
https://github.com/vuejs/devtools/blob/main/packages/app-backend-vue3/src/components/util.ts#L33-L35

System Info

System:
    OS: macOS 13.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 3.77 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nodenv/versions/16.14.2/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.5.0 - ~/.nodenv/versions/16.14.2/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Safari: 16.3

Any additional comments?

As the name field becomes unpopular in SFC setup syntax, the component's displayed name will always be determined by the file name of the component.

I'm using this kind of file structure in the project.

./TheComponent
  -/index.vue
  -/index.spec.ts

And the name displayed on the devtool will all become Index, which is not ideal.
The component registered name should have a higher priority to be selected as the component's name on devtool, as we register our component like this.

// setup script 
import TheComponent from './TheComponent(/index.vue)'
   //  ^^^^^^^^^^^ This name should become the component name.


// optional API
...
  components: {
    TheComponent
    // equals 'TheComponent': TheComponent
    //         ^^^^^^^^^^^^ This name should become the component name.
  }
...