You can use special attribute is for doing this kind of thing. Example of dynamic component and its usage can be found here.

You can use the same mount point and dynamically switch between multiple components using the reserved element and dynamically bind to its is attribute.

Here's how is can be used with either an imported component or one passed as a prop:

<template>
  <div class="B">
    <component :is="myImportedComponent">Something</component>
    --- or ---
    <component :is="myPassedComponent">Something else</component>
  </div>
</template>

<script>
import myImportedComponent from "@/components/SomeComponent.vue"

export default {
    props: {
        myPassedComponent: Object
    },

    components: {
        myImportedComponent
    },
}
</script>

The whole point of using components is that you create a separation of concerns. Defining all the layered components in a single line completely defeats that purpose. Create three separate components. One container component like this.

index.vue

<template>
    <tab :name="mycoolname"></tab>
</template>
<script>
    import tab from tab.vue
    export default {
        components: {
            tab
        }
</script>

The name prop you can than use in that template using {{name}}. Than within the tab component, like this:

tab.vue

<template>
    <h1>{{name}}</h1>
    <my-custom-component @click="doStuff()"></my-custom-component>
</template>
<script>
    import my-custom-component from my-custom-component.vue
    export default {
        props: [
            'name'
        ],
        components: {
            my-custom-component
        },
        methods: {
            doStuff () {
                console.log('hooray this totally works')
            }
</script>

I am using separate build files here, but the concept remains the same when you just import vue into your project. Components can contain everything, from a simple div with a <p> inside to a full page. This component system is insanely powerful to keep things organised.

Without webpack it would look something like this:

var myCustomComponent = { 
    template: `fancyHTML`
}

var Tab= {
    components: {
        'my-custom-component': myCustomComponent 
    },
    template: `even more fancy html containing <my-custom-component>`

new Vue({
   el: '#app'
   components: {
      'tab': Tab
    }
})

}