Vuetify v-data-table内のv-text-fieldを使用するとリアクティブにならない

前提・実現したいこと

v-data-tableで表示している項目を編集可能にし、編集されたデータを利用したい
できればcomputedを使って実現したい

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

値を入力しても確認用の表示に反映されない

該当のソースコード

TypeScript
1<template lang="pug">
2v-container
3  v-card
4    v-card-title 入力内容の確認
5    v-card-text {{inputList}}
6  v-card
7    v-card-title 必要数入力
8    v-data-table.frameFour.myDataTable(
9      :headers='[\
10        {text:"必要数", value:"need", width:"7%"},\
11        {text:"名前", value:"name", width:"10%"},\
12      ]'
13      :items='inputList'
14      item-key="name"
15      hide-default-footer
16    )
17      template(v-slot:item.need='{ item }')
18        v-text-field(v-model="item.need")
19</template>
20
21<script lang="ts">
22import { cloneDeep } from 'lodash'
23import Vue from 'vue'
24
25export default Vue.extend({
26  components: {},
27  data() {
28    const weekList = [{ name: '金曜' }, { name: '土曜' }, { name: '日曜' }]
29    return {
30      weekList,
31    }
32  },
33  computed: {
34    inputList(): any {
35      return cloneDeep(this.weekList).map((m) => {
36        m.need = 0
37        return m
38      })
39    },
40  },
41  methods: {},
42})
43</script>
44

試したこと

解決には繋がっていませんが、動かしながら確認してみるとtemplate内のコード書き換えで入力がリアクティブになったりしますが、リロードすると再び連動しなくなります。
watchプロパティ、methodsを使えばおそらく入力の反映はうまくいくと思ってますが、まずはcomputedでどうにかできないかと思い質問させていただきました。
computedが適切でなければ、改めて他の方法を考えようと思っています。