docs: update component-slots.md

[beiding110]

Description of Problem

When the todo-list is nested in the other todo-list in the yellow box example, there is ambiguity compared with the red box example.

If my understanding is wrong, correct it please. thank you.

Proposed Solution

Replace the todo-list in the yellow box with template like this

Additional Information

[skirtles-code]

I agree there's a problem with that example but I don't think this is quite the right fix.

The equivalent example in the Vue 2 docs is here:

https://vuejs.org/v2/guide/components-slots.html#Abbreviated-Syntax-for-Lone-Default-Slots

I think the Vue 2 example is correct and something has been lost in the migration.

In my opinion, the correct fix here is to remove the inner wrapper tag altogether:

<!-- INVALID, will result in warning -->
<todo-list v-slot="slotProps">
    <i class="fas fa-check"></i>
    <span class="green">{{ slotProps.item }}</span>
    <template v-slot:other="otherSlotProps">
      slotProps is NOT available here
    </template>
</todo-list>

[beiding110]

@skirtles-code Oh, oh, I find it. You're right. Your fix is more accurate.