title: V-data-table controlling expanded items via v-slot:body
body: <p>The documentation on vuetify 2.0 v-data-tables doesn't specify how to control the expanded items via the v-slot:body. I have a table i need to specify with the body v-slot and would like to use the expand feature. </p>
  
  <p>Expected behavior is by clicking the button in one column in the table, the row expands below.</p>
  
  <p>I'm using the v-slot:body as i will need to fully customize the column content. I'm migrating the code from vuetify 1.5 where props.expanded enabled this functionality.</p>
  
  <p>Codepen: <a href="https://codepen.io/thokkane/pen/PooemJP" rel="noreferrer">https://codepen.io/thokkane/pen/PooemJP</a></p>
  
  <pre><code>&lt;template&gt;
    &lt;v-data-table
      :headers="headers"
      :items="deserts"
      :expanded.sync="expanded"
      :single-expand="singleExpand"
      item-key="name"
      hide-default-footer
    &gt;
      &lt;template v-slot:body="{ items }"&gt;
        &lt;tbody&gt;
          &lt;tr v-for="item in items" :key="item.name"&gt;
            &lt;td&gt;
              &lt;v-btn @click="expanded.includes(item.name) ? expanded = [] : expanded.push(item.name)"&gt;Expand&lt;/v-btn&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/template&gt;
      &lt;template v-slot:expanded-item="{ headers, item }"&gt;
        &lt;span&gt;item.name&lt;/span&gt;
      &lt;/template&gt;
    &lt;/v-data-table&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data () {
        return {
          expanded: [],
          singleExpand: false,
          headers: [
            { text: 'Dessert (100g serving)', align: 'left', sortable: false, value: 'name' },
            { text: 'Calories', value: 'calories' },
            { text: 'Fat (g)', value: 'fat' },
            { text: 'Carbs (g)', value: 'carbs' },
            { text: 'Protein (g)', value: 'protein' },
            { text: 'Iron (%)', value: 'iron' },
            { text: '', value: 'data-table-expand' },
          ],
          desserts: [
            {
              name: 'Frozen Yogurt',
              calories: 159,
              fat: 6.0,
              carbs: 24,
              protein: 4.0,
              iron: '1%',
            },
            {
              name: 'Ice cream sandwich',
              calories: 237,
              fat: 9.0,
              carbs: 37,
              protein: 4.3,
              iron: '1%',
            },
            {
              name: 'Eclair',
              calories: 262,
              fat: 16.0,
              carbs: 23,
              protein: 6.0,
              iron: '7%',
            },
          ],
        }
      },
    }
  &lt;/script&gt;
  </code></pre>