title: How to make content in an expand slot of a data table in VuetifyJS searchable?
body: <p>I'm using the <a href="https://vuetifyjs.com/en/components/data-tables#example-search" rel="nofollow noreferrer">VuetifyJS/VueJS data table</a> with an <a href="https://vuetifyjs.com/en/components/data-tables#example-expand" rel="nofollow noreferrer">expand slot</a>. How to make the content in the expand slot searchable? I tried wrap the content within <code>&lt;td&gt;&lt;/td&gt;</code> but that didn't work. </p>
  
  <p>Here is a codepen example: <code>https://codepen.io/anon/pen/VBemRK?&amp;editors=101</code>
  If you search for "find me" it always results in a <code>Your search for "find me" found no results.</code></p>
  
  <pre><code>      &lt;v-data-table
      :headers="headers"
      :items="desserts"
      :search="search"
      item-key="name"
    &gt;
  
  &lt;template slot="items" slot-scope="props"&gt;
    &lt;tr @click="props.expanded = !props.expanded"&gt;
        &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
        &lt;td class="text-xs-right"&gt;{{ props.item.calories }}&lt;/td&gt;
        &lt;td class="text-xs-right"&gt;{{ props.item.fat }}&lt;/td&gt;
        &lt;td class="text-xs-right"&gt;{{ props.item.carbs }}&lt;/td&gt;
        &lt;td class="text-xs-right"&gt;{{ props.item.protein }}&lt;/td&gt;
        &lt;td class="text-xs-right"&gt;{{ props.item.iron }}&lt;/td&gt;
      &lt;/template&gt;
  
       &lt;template slot="expand" slot-scope="props"&gt;
    &lt;v-card flat&gt;
      &lt;v-card-text&gt;&lt;td&gt;Peek-a-boo! Please find me too.&lt;/td&gt;&lt;/v-card-text&gt;
    &lt;/v-card&gt;
           &lt;/template&gt; 
  
      &lt;v-alert slot="no-results" :value="true" color="error" icon="warning"&gt;
        Your search for "{{ search }}" found no results.
      &lt;/v-alert&gt;
    &lt;/v-data-table&gt;
  </code></pre>