Vuetify.jsの<v-data-table>コンポーネントでデータが描画されない

Question

前提・実現したいこと

vue.jsの学習でvuexとvuetifyを使用したTodoアプリケーションを作成しております。

発生している問題・エラーメッセージ

vuetifyをインストール後、<v-data-table>でstoreのstateにあるリストデータを取得し、一覧表示したいのですが値が表示されません。VueDevtoolsで見てみると値は取得できているようなのですが、データが表示されません。

エラーメッセージは出ておりません。

該当のソースコード

// src/components/Todo_components.vue
<v-data-table :headers='headers' :items='lists'>
    <template v-slot:items="props">
       <td>{{ props.item.todocomment }}</td>
       <td>
         <v-btn outlined color="primary" @click="doChangeState(props.item.id)">{{ labels[props.item.status] }}</v-btn>
       </td>
       <td>
        　<v-btn outlined color="red" @click.stop="doRemove(props.item.id)">削除</v-btn>
       </td>
     </template>
</v-data-table>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'Todo_components',
  data () {
    return {
      options: [
        { value: -1, label: '全て' },
        { value: 0, label: '作業中' },
        { value: 1, label: '完了' }
      ],
      headers: [
        {text: '作業内容', value: 'comment'},
        {text: '状態', value: 'state'},
        {text: '削除', value: 'button'}
      ],
      current: -1
    }
  },
  computed: {
    ...mapGetters ([
      "doingTodo",
      "didTodo"
    ]),
    lists () { // eslint-disable-line
      switch ( this.current ) { 
        case -1: 
          return this.$store.state.lists;
        case 0: 
          return this.doingTodo;
        case 1: 
          return this.didTodo;
      }
      console.log("listdata:in:" + this.current)
    },
    labels () {//stateの数値を文字列に変換
      return this.options.reduce(function(a, b) {
        return Object.assign(a, { [b.value]: b.label})
      },{})
    }
  },
  methods: {
    ...mapActions(["doRemove","doChangeState"])
  }
}
</script>

試したこと

公式サイトやqiita等の記事を探して、コードの差異を探しましたが、どの部分がダメなのかわかりませんでした。

補足情報（FW/ツールのバージョンなど）

macでVsCodeを使用しております。
VueCLIのバージョンは3.5です。
Vuetify.jsは2系です。

Answer 1

自己解決しました

どうやら、scriptのhedders:[]のvalueの値をstoreに保存しているデータ名と一致させないといけなかったようです。知識不足でした。

編集後のソースコード

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'Todo_components',
  data () {
    return {
      options: [
        { value: -1, label: '全て' },
        { value: 0, label: '作業中' },
        { value: 1, label: '完了' }
      ],
      headers: [
        {text: '作業内容', value: 'todocomment'},⇦変更
        {text: '状態', value: 'status'},⇦変更
        {text: '削除', value: 'button'} 
      ],
      current: -1
    }
  },

  .
  .
  .

</script>

/store/index.js

mutations: {
    //stateの値を変更
    create( state ,comment){
      const list = {
        id: state.sequense,
        todocomment: comment,
        status: 0
      }