title: Vuetify v-data-table with vuex. Not rendering in unit test
body: <p>vue 2.5.2
  vuex 3.0.1
  vuetify 1.0.16</p>
  
  <p>I'm creating vuex+vuetify application.</p>
  
  <p>Rendering data is in the vuex store.
  It uses v-data-table with pagination.</p>
  
  <p>The component code is</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-container&gt;
      &lt;v-text-field id="shopName" v-model="editedItem.name" required&gt;&lt;/v-text-field&gt;
      &lt;v-btn id="save" color="blue darken-1" flat @click.native="save"&gt;save&lt;/v-btn&gt;
      &lt;v-data-table :headers="headers" :pagination.sync="pagination" :items="shops" class="elevation-1"&gt;
        &lt;template slot="items" slot-scope="props"&gt;
            &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
        &lt;/template&gt;
        &lt;template slot="no-data"&gt;
            &lt;td&gt;no item&lt;/td&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
    &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'shop',
    created () {
    },
    data () {
      return {
        pagination: {
          sortBy: 'name'
        },
        headers: [
          {
            text: 'name',
            align: 'left',
            value: 'name'
          }
        ],
        editedItem: {name: ''},
        defaultItem: {name: ''}
      }
    },
    methods: {
      close () {
        setTimeout(() =&gt; {
          this.editedItem = Object.assign({}, this.defaultItem)
        }, 300)
      },
      save () {
        this.$store.commit('addShop', this.editedItem)
        this.close()
      }
    },
    computed: {
      shops () {
        return this.$store.state.items
      }
    },
    mounted () {
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And I added test code.
  First one is 'adds a new shop' test , that add store.
  The test passed.</p>
  
  <p>And next test 'uses same store' is rendering with same store instance.
  But test not passed.
  When removing pagination setting from component, then test passed.
  Why not rendering when pagination setting existing.</p>
  
  <pre><code>import { mount } from 'avoriaz'
  import Vue from 'vue'
  import Vuetify from 'vuetify'
  import DataTable from '@/components/DataTable'
  import { store } from '../../../src/store/store.js'
  
  Vue.use(Vuetify)
  
  describe('Shop.vue', () =&gt; {
    it('adds a new shop', async () =&gt; {
      // build component
      const wrapper = mount(DataTable, {store})
      const inputShopName = wrapper.find('input#shopName')[0]
      inputShopName.trigger('focus')
      inputShopName.element.value = 'AEON'
      inputShopName.trigger('input')
      await wrapper.vm.$nextTick()
      wrapper.find('button#save')[0].trigger('click')
      await wrapper.vm.$nextTick()
      expect(wrapper.html()).toContain('AEON')
    })
    it('uses same store', () =&gt; {
      // build component
      const wrapper2 = mount(DataTable, {store})
      expect(wrapper2.html()).toContain('AEON')
    })
  })
  </code></pre>
  
  <p>Reproduction code in
  <a href="https://github.com/dokechin/vue-test-example" rel="nofollow noreferrer">https://github.com/dokechin/vue-test-example</a></p>