title: Multiple Vuetify data-tables with expandable rows on same page
body: <p>I'm using Vuetify's v-data-tables with expandable rows. The expandable rows work fine when there's only one v-data-table on the page. When I have multiple v-data-tables, the expandable rows no longer function. I'm assuming I'm missing something that would make each data table or slot unique?</p>
  <p>CodePen: <a href="https://codepen.io/tapal/pen/poyOdBw" rel="nofollow noreferrer">https://codepen.io/tapal/pen/poyOdBw</a> (this is essentially the expandable rows CodePen from  Vuetify's documentation but split into two tables).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() {
      return {
        expanded: [],
        singleExpand: false,
        headers: [{
            text: 'Dessert (100g serving)',
            align: 'start',
            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'
          },
        ],
        firstDessert: [{
            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%',
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%',
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%',
          },
        ],
        secondDessert: [{
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%',
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%',
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%',
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%',
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%',
          },
        ],
      }
    },
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.10/dist/vuetify.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.10/dist/vuetify.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;v-app id="inspire"&gt;
      &lt;v-data-table :headers="headers" :items="firstDessert" :single-expand="singleExpand" :expanded.sync="expanded" item-key="name" show-expand class="elevation-1"&gt;
        &lt;template v-slot:top&gt;
              &lt;v-toolbar flat&gt;
                &lt;v-toolbar-title&gt;First Dessert&lt;/v-toolbar-title&gt;
                &lt;v-spacer&gt;&lt;/v-spacer&gt;
                &lt;v-switch v-model="singleExpand" label="Single expand" class="mt-2"&gt;&lt;/v-switch&gt;
              &lt;/v-toolbar&gt;
            &lt;/template&gt;
        &lt;template v-slot:expanded-item="{ headers, item }"&gt;
              &lt;td :colspan="headers.length"&gt;More info about {{ item.name }}&lt;/td&gt;
            &lt;/template&gt;
      &lt;/v-data-table&gt;
      &lt;hr /&gt;
      &lt;v-data-table :headers="headers" :items="secondDessert" :single-expand="singleExpand" :expanded.sync="expanded" item-key="name" show-expand class="elevation-1"&gt;
        &lt;template v-slot:top&gt;
              &lt;v-toolbar flat&gt;
                &lt;v-toolbar-title&gt;Second Dessert&lt;/v-toolbar-title&gt;
                &lt;v-spacer&gt;&lt;/v-spacer&gt;
                &lt;v-switch v-model="singleExpand" label="Single expand" class="mt-2"&gt;&lt;/v-switch&gt;
              &lt;/v-toolbar&gt;
            &lt;/template&gt;
        &lt;template v-slot:expanded-item="{ headers, item }"&gt;
              &lt;td :colspan="headers.length"&gt;More info about {{ item.name }}&lt;/td&gt;
            &lt;/template&gt;
      &lt;/v-data-table&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>