title: Vuetify data table with nested data and v-slot:item
body: <p>I would like to create a Vuetify table with nested data. The problem is that v-slot:item doesn't seem to work with nested data.</p>
  <p>This is my code: <a href="https://codepen.io/blakex/pen/XWKWjaE" rel="nofollow noreferrer">https://codepen.io/blakex/pen/XWKWjaE</a></p>
  <pre><code>&lt;v-data-table :headers=&quot;headers&quot; :items=&quot;desserts&quot;&gt;
    &lt;template v-slot:item.calories=&quot;{ item }&quot;&gt;
      &lt;td&gt;Slot works: {{ item.calories }}&lt;/td&gt;
    &lt;/template&gt;
    &lt;template v-slot:item.nested.nestedCalories=&quot;{ item }&quot;&gt;
      &lt;td&gt;Nested slot works: {{ item.nested.nestedCalories }}&lt;/td&gt;
    &lt;/template&gt;
  &lt;/v-data-table&gt;
  
  data () {
    return {
      headers: [
        { text: 'Dessert', value: 'name' },
        { text: 'Calories', value: 'calories' },
        { text: 'Nested Calories', value: 'nested.nestedCalories' },
      ],
      desserts: [
        {
          name: 'Yogurt',
          calories: 100,
          nested: { nestedCalories: 100 },
        },
        ...
      ],
    }
  }
  </code></pre>
  <p>As you can see, the <code>v-slot:item.nested.nestedCalories</code> doesn't work.</p>
  <p><a href="https://i.stack.imgur.com/X0tUY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X0tUY.png" alt="data table" /></a></p>
  <p>Does anyone know what is missing?</p>