title: v-data-table: bind a custom property to "items" slot
body: <p>I need to create a table where every row represents an item. In the first column, I'm going to use a v-autocomplete component for choosing the item from a List of objects. Since the v-autocomplete is going to be inserted in the item template of v-data-table, I'm having problems binding a computed property to "v-bind:items" of v-autocomplete. The computed property is in the same file but it can't be found.</p>
  
  <p>I tried to bind the computed property to the template with no result.</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    &gt;
      &lt;template slot="items" slot-scope="props"&gt;
        &lt;td&gt;
          &lt;v-autocomplete
            :items="saleables"
            :item-text="i =&gt; i.name"
            :item-value="i =&gt; i.id"
            hide-details
          &gt;&lt;/v-autocomplete&gt;
        &lt;/td&gt;
        &lt;td class="text-xs-right"&gt;{{ props.item.calories }}&lt;/td&gt;
        &lt;td class="text-xs-right"&gt;{{ props.item.fat }}&lt;/td&gt;
        &lt;td class="text-xs-right"&gt;{{ props.item.carbs }}&lt;/td&gt;
        &lt;td class="text-xs-right"&gt;{{ props.item.protein }}&lt;/td&gt;
      &lt;/template&gt;
    &lt;/v-data-table&gt;
  &lt;template&gt;
  
  
  [...]
  computed: {
    saleables: function () {
      return this.$store.getters['saleables/items']
    }
  }
  [...]
  </code></pre>