title: Vuetify v-data-table showing error in props.item with nested JSON
body: <p>Here's the error</p>
  <blockquote>
  <p>TypeError: Cannot read property 'name' of undefined <br>
  at Object.fn [as items] (app.js:74266)...</p>
  </blockquote>
  <p>Hi guys I'm working on a <code>Users</code><a href="https://v2.vuejs.org/v2/guide/" rel="nofollow noreferrer">Vue</a> component and recently updated to <a href="https://vuetifyjs.com/en/" rel="nofollow noreferrer">Vuetify</a> and I'm getting the Users API from a <a href="https://laravel.com/docs/5.6" rel="nofollow noreferrer">Laravel</a> backend from this controller. Any help or suggestions are appreciated, thanks.</p>
  <h3>UsersController.php</h3>
     
      public function index()
      {
          //With data from ROLES table
          $users = User::with('role:role_id,name')->orderBy('id','asc')->get();
          return response()->json($users);
      }
  <p>The <code>props.item.role.name</code> is showing properly and the add/update functionality are also working except the errors showing after I updated a user</p>
  <h3>Users.vue</h3>
  <pre><code>&lt;template&gt;
   &lt;v-data-table
     :headers=&quot;headers&quot;
     :items=&quot;myUsers&quot;
     :search=&quot;search&quot;
     :loading=&quot;isLoading&quot;
     class=&quot;elevation-1&quot;
    &gt;
       &lt;v-progress-linear slot=&quot;progress&quot; color=&quot;blue&quot; indeterminate&gt;&lt;/v-progress-linear&gt;
       &lt;template slot=&quot;items&quot; slot-scope=&quot;props&quot;&gt;
          &lt;td class=&quot;text-md-left pt-3&quot;&gt;{{ props.item.name }}&lt;/td&gt;
          &lt;td class=&quot;text-md-left pt-3&quot;&gt;{{ props.item.email }}&lt;/td&gt;
       -----------------------------------------------------------------------
          **&lt;td class=&quot;text-md-left pt-3&quot;&gt;{{ props.item.role.name }}&lt;/td&gt;**
       -----------------------------------------------------------------------
          &lt;td class=&quot;justify-content-left layout&quot;&gt;
            &lt;v-btn icon @click.prevent=&quot;editUser(props.item)&quot;&gt;
               &lt;v-icon color=&quot;blue&quot;&gt;edit&lt;/v-icon&gt;
            &lt;/v-btn&gt;
            &lt;v-btn icon @click.prevent=&quot;deleteUser(props.item)&quot; :disabled=&quot;props.item.name === 'admin'&quot;&gt;
               &lt;v-icon color=&quot;pink&quot;&gt;delete&lt;/v-icon&gt;
            &lt;/v-btn&gt;
          &lt;/td&gt;
       &lt;/template&gt;
  
       &lt;v-alert slot=&quot;no-results&quot; :value=&quot;true&quot; color=&quot;error&quot; icon=&quot;warning&quot;&gt;
          Your search for &quot;{{ search }}&quot; found no results.
       &lt;/v-alert&gt;
  
       &lt;template slot=&quot;no-data&quot;&gt;
          &lt;v-btn color=&quot;primary&quot; href=&quot;/dashboard/users&quot; &gt;Reset&lt;/v-btn&gt;
       &lt;/template&gt;
  
   &lt;/v-data-table&gt;
  &lt;/template&gt;
  </code></pre>
  <h3>[Edited] VueDevTools view</h3>
  <p><code>myUsers.role.name</code> has value showing <b>''student''</b> string in the v-data-table. The <code>props.item.role.name</code> is really the source of the errors which doesn't occur when I omitted it or changed it to a non-nested JSON like <code>props.item.role_id</code>.</p>
  <p>[<a href="https://i.stack.imgur.com/5tRJJ.png" rel="nofollow noreferrer">VueDevTools View - JSON</a>]<a href="https://i.stack.imgur.com/5tRJJ.png" rel="nofollow noreferrer">1</a></p>
  <p>[<a href="https://i.stack.imgur.com/sFbtD.png" rel="nofollow noreferrer">VueDevTools View - Error</a>]<a href="https://i.stack.imgur.com/sFbtD.png" rel="nofollow noreferrer">2</a></p>