Vuetify, refs

tab이 null 로 초기화 되어있으니까, tab 안의 <v-data-table> ref에 접근이 안됨

tab: 'tab-1' 로 바꾸고 다시 시도

      <v-tabs-items v-model="tab">
        <v-tab-item value="tab-1">
          <v-data-table
            :headers="headers"
            :items="desserts"
            item-key="name"
            sort-by="name"
            group-by="category"
            class="elevation-1"
            show-group-by
            ref="table"
          ></v-data-table>
        </v-tab-item>
      </v-tabs-items>

<script>
  var vm = new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data () {
      return {
        tab: null,
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            value: 'name',
            groupable: false,
          },
          { text: 'Category', value: 'category', align: 'right' },
          { text: 'Dairy', value: 'dairy', align: 'right' },
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            category: 'Ice cream',
            dairy: 'Yes',
          },
          {
            name: 'Ice cream sandwich',
            category: 'Ice cream',
            dairy: 'Yes',
          },
          {
            name: 'Eclair',
            category: 'Cookie',
            dairy: 'Yes',
          },
          {
            name: 'Cupcake',
            category: 'Pastry',
            dairy: 'Yes',
          },
          {
            name: 'Gingerbread',
            category: 'Cookie',
            dairy: 'No',
          },
        ],
      }
    },
    mounted () {
      let table = this.$refs.table;
      console.log(this.$refs)
      let keys = Object.keys(table.$vnode.componentInstance.openCache);
      keys.forEach(x => {
        table.$vnode.componentInstance.openCache[x] = false;
      })
    }
  })
</script>​