Vue.jsのデータ初期化、データ取得についてアドバイス頂けないでしょうか。

お世話になります。
見積を入力して、入力した見積りを保存するような仕組みをVue.jsで作ろうと思っています。

ただ、いくつか実装にあたり不明点があるので、
知見をお借りできないかと思い、投稿させて頂きました。

データの初期化の効率の良いやり方はないでしょうか

見積の初期状態ではデータ無しとして、5項目くらいを入力できるようにしたいので、
データセットをVueで作成して、それをv-forで回しています。
データ初期化用にロジックをdata部分に書いているのですが、
newした時に、data.estimate = functionの結果みたいな形でデータ保持することはできないでしょうか。

html
1                        <div class="card-body">
2                            <div id="estimate" class="row" v-cloak>
3                                <table id="">
4                                    <tr>
5                                        <th style="width: 30%">名称</th>
6                                        <th style="width: 17%">品名・品番</th>
7                                        <th style="width: 5%">数量</th>
8                                        <th style="width: 5%">単位</th>
9                                        <th style="width: 9%">原価</th>
10                                        <th style="width: 9%">価格</th>
11                                        <th style="width: 24%">摘要</th>
12                                    </tr>
13                                    <tr v-for="(b,i) in estimate" v-bind:data-row="i">
14                                        <td style="padding:3px;"><input class="form-control" v-bind:value="estimate[i].ex1" @change="ext" type="text" name="ex1" /></td>
15                                        <td style="padding:3px;"><input class="form-control" type="text" /></td>
16                                        <td style="padding:3px;"><input class="form-control" type="text" /></td>
17                                        <td style="padding:3px;"><input class="form-control" type="text" /></td>
18                                        <td style="padding:3px;"><input class="form-control" type="text" /></td>
19                                        <td style="padding:3px;"><input class="form-control" type="text" /></td>
20                                        <td style="padding:3px;"><input class="form-control" type="text" /></td>
21                                    </tr>
22                                </table>
23                            </div>
24                        </div>
25

vue
1
2
3const estimateData = new Vue({
4    el: '#estimate',
5    data: {
6        estimate: function() {  //空データの生成をしています。
7            let result = [];
8            for(var i=0; i < 5; i++) {
9                result[i] = {
10                    ex1:'',
11                    ex2:'',
12                    ex3:'',
13                    ex4:'',
14                    ex5:'',
15                    ex6:'',
16                    ex7:'',
17                }
18            }
19            return result;
20        }(),
21    },
22    methods: {
23        calcMoney : function() {
24            console.log(data.estimate);
25            alert()
26        },}
27});
28
29

データの受け取りはロジックを組まなければだめでしょうか

例えば、先ほどのHTMLのex1のデータを取得したい場合は、
下記の様にするより効率の良いデータの取得、保存方法はないでしょうか。
自力でロジック書いて必要な個所にデータを保存していくしかないのでしょうか。

解決：組まないとダメ
データセットする時は$set()を使う

vue
1
2
3const estimateData = new Vue({
4    el: '#estimate',
5    data: {
6        estimate: function() {  //空データの生成をしています。
7            let result = [];
8            for(var i=0; i < 5; i++) {
9                result[i] = {
10                    ex1:'',
11                    ex2:'',
12                    ex3:'',
13                    ex4:'',
14                    ex5:'',
15                    ex6:'',
16                    ex7:'',
17                }
18            }
19            return result;
20        }(),
21    },
22    methods: {
23        calcMoney : function(e) {
24             let row = e.target.parentNode.parentNode.getAttribute('data-row'); 
25　　　　　　　let name = e.target.getAttribute('name'); 
26             // this.estimate[row].ex1 = e.target.value; // このように自力で取得した値を入れるというやり方しかないでしょうか。
27 　　　　　　 this.$set(this.ex1[row],name,e.target.value); // setで値を入れる
28        },}
29});
30
31