[Vuejs]-Truly Nested Components in Vue.js?

so <heading> and <content> should also be Vue components?

then it should look like this:

<div id="app">
  <h5>Accordion test</h5>
  <accordion>
    <heading slot="heading">Heading Text</heading>
    <content slot="content">Content Text</content>
  </accordion>

<template id="accordion">
  <div class="header">
    <slot name="heading"></slot>
  </div>
  <div class="content">
    <slot name="content"></slot>
  </div>
</template>

<template id="heading">
  <div class="template-heading">
    <slot></slot>
  </div>
</template>

<template id="content">
  <div class="template-content">
    <slot></slot>
  </div>
</template>
</div>

and the JS:

var Heading = Vue.extend({
  template: '#heading'
})
var Content = Vue.extend({
  template: '#content'
})
var Accordion = Vue.extend({
  template: '#accordion',
  components: {
    heading: Heading,
    content: Content
  }
})
Vue.component('heading', Heading)
Vue.component('content', Content)
Vue.component('accordion', Accordion)

var App = new Vue({
  el: '#app',
  data() {
    return {
        test: 'Test'
    }
  }
})

So:

• The content of the <heading> element goes into the slot inside of
  <heading>‘s template.
• And the whole template of <heading> goes into the <slot name="heading">inside the template of <accordion>

Working fiddle: https://jsfiddle.net/Linusborg/ud9a614o/