Error logs

webpack-internal:///./node_modules/@vue/cli-service/node_modules/webpack/hot/log.js:24 [HMR] Waiting for update signal from WDS...
webpack-internal:///./src/store/backend.ts:56 Expected server @ http://localhost:3000
webpack-internal:///./src/store/backend.ts:56 Expected server @ http://localhost:3000
webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string 'Frozen Yogurt'"
warn @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620
webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1887 TypeError: Cannot create property 'isRootInsert' on string 'Frozen Yogurt'
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5908)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6037)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5938)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6037)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5938)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6037)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5938)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6037)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5938)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6037)
logError @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1887

webpack-internal:///./node_modules/@vue/cli-service/node_modules/webpack/hot/log.js:24 [HMR] Waiting for update signal from WDS...
webpack-internal:///./src/store/backend.ts:56 Expected server @ http://localhost:3000
webpack-internal:///./src/store/backend.ts:56 Expected server @ http://localhost:3000
webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string 'Frozen Yogurt'"
warn @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620
webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1887 TypeError: Cannot create property 'isRootInsert' on string 'Frozen Yogurt'
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5908)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6037)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5938)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6037)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5938)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6037)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5938)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6037)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5938)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6037)
logError @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1887

NotWorking.ts

<template>
  <v-data-table :headers="headers" :items="items" />
</template>

<script lang="ts">
import moment from "moment";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Test extends Vue {
  headers = [
    {
      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: "Iron (%)", value: "iron" }
  ];

  items = [
    {
      name: "Frozen Yogurt",
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: "1%"
    },
    {
      name: "Ice cream sandwich",
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: "1%"
    },
    {
      name: "Eclair",
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: "7%"
    },
    {
      name: "Cupcake",
      calories: 305,
      fat: 3.7,
      carbs: 67,
      protein: 4.3,
      iron: "8%"
    },
    {
      name: "Gingerbread",
      calories: 356,
      fat: 16.0,
      carbs: 49,
      protein: 3.9,
      iron: "16%"
    },
    {
      name: "Jelly bean",
      calories: 375,
      fat: 0.0,
      carbs: 94,
      protein: 0.0,
      iron: "0%"
    },
    {
      name: "Lollipop",
      calories: 392,
      fat: 0.2,
      carbs: 98,
      protein: 0,
      iron: "2%"
    },
    {
      name: "Honeycomb",
      calories: 408,
      fat: 3.2,
      carbs: 87,
      protein: 6.5,
      iron: "45%"
    },
    {
      name: "Donut",
      calories: 452,
      fat: 25.0,
      carbs: 51,
      protein: 4.9,
      iron: "22%"
    },
    {
      name: "KitKat",
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7,
      iron: "6%"
    }
  ];
}
</script>
<style lang="scss"></style>

Working.ts

<template>
  <v-data-table :headers="headers" :items="items">
    <template v-slot:item="{ item, select }">
      <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.calories }}</td>
        <td>{{ item.fat }}</td>
        <td>{{ item.carbs }}</td>
        <td>{{ item.protein }}</td>
        <td>{{ item.iron }}</td>
      </tr>
    </template>
  </v-data-table>
</template>

<script lang="ts">
import moment from "moment";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Test extends Vue {
  headers = [
    {
      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: "Iron (%)", value: "iron" }
  ];

  items = [
    {
      name: "Frozen Yogurt",
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: "1%"
    },
    {
      name: "Ice cream sandwich",
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: "1%"
    },
    {
      name: "Eclair",
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: "7%"
    },
    {
      name: "Cupcake",
      calories: 305,
      fat: 3.7,
      carbs: 67,
      protein: 4.3,
      iron: "8%"
    },
    {
      name: "Gingerbread",
      calories: 356,
      fat: 16.0,
      carbs: 49,
      protein: 3.9,
      iron: "16%"
    },
    {
      name: "Jelly bean",
      calories: 375,
      fat: 0.0,
      carbs: 94,
      protein: 0.0,
      iron: "0%"
    },
    {
      name: "Lollipop",
      calories: 392,
      fat: 0.2,
      carbs: 98,
      protein: 0,
      iron: "2%"
    },
    {
      name: "Honeycomb",
      calories: 408,
      fat: 3.2,
      carbs: 87,
      protein: 6.5,
      iron: "45%"
    },
    {
      name: "Donut",
      calories: 452,
      fat: 25.0,
      carbs: 51,
      protein: 4.9,
      iron: "22%"
    },
    {
      name: "KitKat",
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7,
      iron: "6%"
    }
  ];
}
</script>
<style lang="scss"></style>