Vuetify's data table + Vue Typed missing props

Question

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 here, I encounter the following error

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.

data.vue

<template>
    <v-content>
        <v-data-table
        v-bind:headers="headers"
        :items="items"
        class="elevation-1"
        hide-actions
        dark
      >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.sodium }}</td>
        <td class="text-xs-right">{{ props.item.calcium }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
        </v-data-table>
    </v-content>
</template>

Ts file

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%"
            }
        ];
    }
}

Packages used

1. Vue ^2.5.0
2. Vuetify 0.1.7
3. Typescript
4. vue-property-decorator (tried with vue-typed which is a similar package)

Is there something that am missing to wire up the data?

Answer 1

Not sure, if I had run into an existing bug, but upon upgrading my vuetify to 1.0.0 + i did not encounter this error

Answer 2

I found why your component wasn't working with the require. The mixin passed wasn't the right one. Should be template.default

declare function require(file:string):any
const template = require('./template.vue');
import Vue from "vue";
import { Component }  from "vue-property-decorator";
@Component({
    mixins: [template.default]
})
....