Okay, now we're getting into witchcraft. A few questions if anyone's willing to answer.

Why is the name property passed without v-bind directive, while selected is? I thought that all the props need to be passed with v-bind. Is it because those are strings, but if we wanted to pass an array (or a boolean, method or an object) we'd need to do :names=['Joe', 'Jake'] in order for Vue to not look at it as ['Joe', 'Jake'] string?

Second question: why are we passing the name as a prop, but body of the tab as a slot? Couldn't have we done both of them like a slot (it would be cleaner)? So far (the "message lesson") we passed the props as pseudo-attributes (title and body), which is a bit ugly to me, so I understand why we're moving away from it, but this is halfway there and still not that clean.

Third, and probably the most important one: how the hell to come up with an idea for a component like this? Why aren't we referencing another Vue component inside the tabs component? What is the sorcery that we noobs lack to see things this way? I hope you get my confusion, my instinct here is: okay I need a component within a component, so I'll reference it in the parent component's template (like in the "modal lesson"). I tried to do it like that and failed miserably halfway there. Instead, here we're doing some pretty out-of-the-box thinking which is very abstract to me, so if anyone can tell me that I'm not helplessly stupid and that this will come to me in time, I'd appreciate it.

Practical Component Exercise #3: Tabs

Updated Series Available