title: Vuetify: How to use my own component inside of a Vuetify Expansion Panel Component
body: <p>I'm just starting with VueJS and Vuetify, so maybe this is a very basic error..</p>
  
  <p>I'm trying to use the vuetify exansion panel component: <a href="https://vuetifyjs.com/components/expansion-panels" rel="nofollow noreferrer">https://vuetifyjs.com/components/expansion-panels</a></p>
  
  <p>Basically I want to define my own component to use as <strong>v-expansion-panel-content</strong> but I can't make it work.</p>
  
  <p>What I could make work was define 2 components, one for the header and another one for the content and use them inside of the <strong>v-expansion-panel-content</strong> </p>
  
  <p>But when I try to encapsulate all in 1 component the expansion panel shows the header but it will not expands to show the item content.</p>
  
  <p>Thanks in advance.</p>
  
  <p>CodePen: <a href="https://codepen.io/arcard/pen/YEJrZd" rel="nofollow noreferrer">https://codepen.io/arcard/pen/YEJrZd</a></p>
  
  <p>HTML:
      
        </p>
  
  <pre><code>    &lt;v-expansion-panel-content&gt;
        &lt;div slot="header"&gt;Item - without use of component - works OK&lt;/div&gt;
        &lt;v-card&gt;
          &lt;v-card-text class="grey lighten-3"&gt;Lorem ipsum dolor sit amet.&lt;/v-card-text&gt;
        &lt;/v-card&gt;
      &lt;/v-expansion-panel-content&gt;
  
      &lt;v-expansion-panel-content&gt;
        &lt;vc-prod-header slot="header"&gt;&lt;/vc-prod-header&gt;
        &lt;vc-prod-content&gt;&lt;/vc-prod-content&gt;
      &lt;/v-expansion-panel-content&gt;
  
      &lt;!-- this one doesn't work --&gt;
      &lt;vc-exp-panel-comp&gt;&lt;/vc-exp-panel-comp&gt;
    &lt;/v-expansion-panel&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>Vue.component('vc-prod-header',{
    template: `
      &lt;div&gt;Item - using 2 components: one for the header and one for the content - works OK&lt;/div&gt;
    `
  });
  
  Vue.component('vc-prod-content',{
    template: `
        &lt;v-card&gt;
          &lt;v-card-text class="grey lighten-3"&gt;component 2:  content&lt;/v-card-text&gt;
        &lt;/v-card&gt;
    `
  });
  
  Vue.component('vc-exp-panel-comp',{
    template: `
      &lt;v-expansion-panel-content&gt;
        &lt;div slot="header"&gt;component title - this one will not expand to show the content&lt;/div&gt;
        &lt;v-card&gt;
          &lt;v-card-text class="grey lighten-3"&gt;component body: this is now showing&lt;/v-card-text&gt;
        &lt;/v-card&gt;
      &lt;/v-expansion-panel-content&gt;
    `
  });
  
  new Vue({
    el: '#example'
  })
  </code></pre>