title: default sort not working in v-data-table Vuetify
body: <p>I have users data fetched from the server which is sorted in desc order of age. When the users data is passed to the child component, it doesn't display data sorted in the desc order of the age in the v-data-table and when I refresh the page then it shows data sorted in the descending order. Please help me find where I am going wrong. I am using vuetify version 2.3.10</p>
  <p>When the data is fetched from the server in the parent component it is as follows:</p>
  <pre><code>[{full_name: 'James Ross', city: 'Toronto', age: 45 },{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 }, {full_name: 'Jazz Alzo', city: 'London', age: 24 }]
  </code></pre>
  <p>When the child component loads for the first time the users data is as follows:</p>
  <pre><code>[{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 }, {full_name: 'Jazz Alzo', city: 'London', age: 24 }, {full_name: 'James Ross', city: 'Toronto', age: 45 }]
  </code></pre>
  <p>So basically it is not sorted and when I refresh the page then users data in the child component shows perfectly finish</p>
  <pre><code>[{full_name: 'James Ross', city: 'Toronto', age: 45 },{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 }, {full_name: 'Jazz Alzo', city: 'London', age: 24 }]
  </code></pre>
  <p>parent component</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
        &lt;Users :users=&quot;users&quot;&gt;&lt;/Users&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import Users from 'views/lawyers/_users_table.vue';
  
  export default {
    components: {
      Users
    },
    data: () =&gt; ({
      users: [],
    }),
    created: function() {
      this.fetchUsers();
    },
    methods: {
      fetchUsers() {
        this.$axios.get('/users.json')
        .then(response =&gt; {
          this.users = response.data;
        })
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>childcomponent</p>
  <pre><code>  &lt;template&gt;
     &lt;div&gt;
      &lt;v-data-table
                :headers=&quot;headers&quot;
                :items=&quot;users&quot;
                :disable-pagination=&quot;true&quot;
                v-model=&quot;users&quot;
                hide-default-footer
                class=&quot;elevation-1&quot;
       &gt;
         &lt;template slot=&quot;item&quot; slot-scope=&quot;props&quot;&gt;
           &lt;tr&gt;
             &lt;td class=&quot;full-name&quot;&gt;{{ props.item.full_name }}&lt;/td&gt;
             &lt;td class=&quot;summary&quot;&gt;{{ props.item.address}}&lt;/td&gt;
             &lt;td class=&quot;experience&quot;&gt;{{ props.item.age }} years&lt;/td&gt;
           &lt;/tr&gt;
         &lt;/template&gt;
      &lt;/v-data-table&gt;
     &lt;/div&gt;
    &lt;/template&gt;
     
  
  
  
  &lt;script&gt;
  
  export default {
    props: ['users'],
    data: () =&gt; ({
      headers: [
        { text: 'Name', value: 'full_name', sortable: false  },
        { text: 'Address', value: 'address', sortable: false  },
        { text: 'Age',value: 'age' }
      ]
    }),
  };
  &lt;/script&gt;
  </code></pre>