title: Vuetify's data table + Vue Typed missing props value
body: <p>Pardon beginner's ignorance. Am trying to render Vuetify's data table with data being populated in a typescript file as seen below. Upon emulating what is provided in the sample doc <a href="https://vuetifyjs.com/components/data-tables#standard" rel="nofollow noreferrer">here</a>, I encounter the following error</p>
  
  <blockquote>
    <p>vue.runtime.esm.js?a427:475 [Vue warn]: Property or method "props" is
    not defined on the instance but referenced during render. Make sure to
    declare reactive data properties in the data option.</p>
  </blockquote>
  
  <p><strong>data.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;v-content&gt;
          &lt;v-data-table
          v-bind:headers="headers"
          :items="items"
          class="elevation-1"
          hide-actions
          dark
        &gt;
        &lt;template slot="items" slot-scope="props"&gt;
          &lt;td&gt;{{ props.item.name }}&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;td class="text-xs-right"&gt;{{ props.item.sodium }}&lt;/td&gt;
          &lt;td class="text-xs-right"&gt;{{ props.item.calcium }}&lt;/td&gt;
          &lt;td class="text-xs-right"&gt;{{ props.item.iron }}&lt;/td&gt;
        &lt;/template&gt;
          &lt;/v-data-table&gt;
      &lt;/v-content&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>Ts file</strong></p>
  
  <pre><code>import Vue from "vue";
  import { Component } from "vue-property-decorator";
  let template = require("./data.vue");
  
  @Component({
      mixins: [template],
  })
  export default class Inventory extends Vue {
      get tmp() {
          return "";
      }
      get search() { return ""; }
      get pagination() { return {}; }
      get headers() {
          return [
              {
                  text: "Dessert (100g serving)",
                  align: "left",
                  sortable: false,
                  value: "name"
              },
              { text: "Calories", value: "calories" },
              { text: "Fat (g)", value: "fat" },
              { text: "Carbs (g)", value: "carbs" },
              { text: "Protein (g)", value: "protein" },
              { text: "Sodium (mg)", value: "sodium" },
              { text: "Calcium (%)", value: "calcium" },
              { text: "Iron (%)", value: "iron" }
          ];
      }
      get items() {
          return [
              {
                  value: false,
                  name: "Frozen Yogurt",
                  calories: 159,
                  fat: 6.0,
                  carbs: 24,
                  protein: 4.0,
                  sodium: 87,
                  calcium: "14%",
                  iron: "1%"
              },
              {
                  value: false,
                  name: "Ice cream sandwich",
                  calories: 237,
                  fat: 9.0,
                  carbs: 37,
                  protein: 4.3,
                  sodium: 129,
                  calcium: "8%",
                  iron: "1%"
              }
          ];
      }
  }
  </code></pre>
  
  <p><strong>Packages used</strong></p>
  
  <ol>
  <li>Vue ^2.5.0</li>
  <li>Vuetify 0.1.7</li>
  <li>Typescript</li>
  <li>vue-property-decorator (tried with vue-typed which is a similar package)</li>
  </ol>
  
  <p>Is there something that am missing to wire up the data?</p>