Improve vue/multi-word-component-names rule docs (#1871)

Author: zjfresh

docs/rules/multi-word-component-names.md

@@ -76,6 +76,47 @@ export default {
 
 </eslint-code-block>
 
+<eslint-code-block filename="src/Todo.vue" :rules="{'vue/multi-word-component-names': ['error']}">
+
+```vue
+<!-- filename: Todo.vue -->
+<!-- ✗ BAD -->
+<script setup>
+  // ...
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block filename="src/TodoItem.js" :rules="{'vue/multi-word-component-names': ['error']}">
+
+```vue
+<!-- filename: TodoItem.vue -->
+<!-- ✓ GOOD -->
+<script setup>
+  // ...
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block filename="src/Todo.vue" :rules="{'vue/multi-word-component-names': ['error']}">
+
+```vue
+<!-- filename: Todo.vue -->
+<!-- ✓ GOOD -->
+<script setup>
+  // ...
+</script>
+<script>
+export default {
+  name: 'TodoItem'
+}
+</script>
+```
+
+</eslint-code-block>
+
 ## :wrench: Options
 
 ```json
@@ -116,6 +157,18 @@ export default {
 
 </eslint-code-block>
 
+<eslint-code-block filename="src/Todo.vue" :rules="{'vue/multi-word-component-names': ['error', {ignores: ['Todo']}]}">
+
+```vue
+<!-- filename: Todo.vue -->
+<!-- ✓ GOOD -->
+<script setup>
+  // ...
+</script>
+```
+
+</eslint-code-block>
+
 ## :books: Further Reading
 
 - [Style guide - Multi-word component names](https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names)