Add good/bad example of script setup to rule doc multi-word-component-names

[zjfresh]

Tell us about your environment

• ESLint version: 6.7.2
• eslint-plugin-vue version: 8.7.0
• Node version:

The problem you want to solve.
It's in a puzzle about this rule reporting an error (Component name "index" should always be multi-word.) about a .vue named views/data/Report/index.vue using script setup, the same code with the offical site, like:

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Your take on the correct solution to problem.

<!-- filename: Todo.vue -->
/* ✗ BAD */
<script setup>
  // ...
</script>

<!-- filename: TodoItem.vue -->
/* ✓ GOOD */
<script setup>
  // ...
</script>

<!-- filename: Todo.vue -->
/* ✓ GOOD */
<script setup>
  // ...
</script>
<script>
export default {
  name: 'TodoItem'
}
</script>

Additional context

[zjfresh]

Also look issue #1779 , allow disabling file name checking for file like src/products/Show.vue

[zjfresh]

I can commit a PR if necessary :)

[FloEdelmann]

Thanks for the report, I'll be happy to accept a pull request with that clarification!