Vue.jsの追加データのビュー再構成について

Question

現在、DjdngoでGoogleスプレッドシートのデータを取得し
Vue.jsでtable表示させるSPAライクのGUI作成中ですが、一部ビューの変更ができません

機能概要

1. tableに取得データの指定件数(load.stepの整数値の50件)を表示(rows.listにループ展開)
2. 読み込みボタンクリックでサーバーから現在の読み込み回数(load.page)と指定件数をサーバーにリクエスト
3. サーバー側で次の指定件数(51〜の追加50件)分のレコードデータを取得
4. 取得分の配列データをrows.listにプッシュしてビューを更新

ソースコード

# スプレッドシートから抽出したデータ
[
['1', '2020-11-24T08:43', 'ユーザーA'], 
['2', '2020-11-24T08:41', 'ユーザーB'], 
['3', '2020-11-19T08:42', 'ユーザーC'], 
['4', '2020-11-24T08:44', 'ユーザーD'], 
['5', '2020-11-19T13:50', 'ユーザーE']
　・
　・
　・
]

<table id="data_rows" class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>日時</th>
            <th>ユーザー</th>
        </tr>
    </thead>
    <tbody>
        <template v-cloak v-for="(row, row_index) in list">
            <tr v-for="(tr, tr_index) in row" :id="`row_${tr[0]}`" >
                <td v-html="tr[0]"></td>
                <td v-html="tr[1]"></td>
                <td v-html="tr[2]"></td>
                <td class="row_delete">
                    <button :data-id="tr[0]" v-bind:data-row="tr_index+1" @click="rowDelete">削除</button>
                </td>
            </tr>
        </template>
    </tbody>
</table>
<div id="load_btn">
    <form method="post">
        {% csrf_token %}
        <input type="hidden" name="page" v-bind:value="page">
        <button v-if="step > 0" v-show="show" @click="addLoad" type="button" v-text="msg"></button>
    </form>
</div>

    let rows = new Vue({
        el: '#data_rows',
        delimiters: ['[[', ']]'],
        data() {
            return {
                show: true,
                list: [],
            }
        },
        created() {
            // スプレッドシートデータを展開
            this.list.push(
                {% autoescape off %}{{results}}{% endautoescape %}
            );
        },
        mounted() {
            console.log(this.list)
        },
    })


    let load = new Vue({
        el: '#load_btn',
        delimiters: ['[[', ']]'],
        data() {
            return {
                msg: "さらに表示",
                show: true,
                page: 1,  // 現在の読み込み回数
                step: 50, // １回のロードあたりの取得レコード数
            }
        },
        methods: {
            addLoad: function(){
                this.msg = "読込中"
                axios.post(`recodes/${this.page}`).then(function(response) {
                    console.log(response.data)
                    this.page = response.data.page
                    rows.list.push(response.data.results)
                    // レコード取得数が表示数(step)未満になったらボタン非表示
                    if(response.data.results.length < this.step){
                        this.show = false
                    }else{
                        this.msg = "さらに表示"
                    }
                }.bind(this)).catch(function(error) {
                    console.log(error)
                })
            }
        },
    })

現在の問題点

table構造のdata-rowに表示行数を割り当て、削除ボタンをクリックした際に対象の行数をサーバーにリクエストしてスプレッドシートを削除の予定をしています。

<!-- v-bind:data-row="tr_index+1"の部分に行数 -->
<button :data-id="tr[0]" v-bind:data-row="tr_index+1" @click="rowDelete">削除</button>

機能概要4で更新された際に、この行数部分に既存の行数＋追加データのループカウント数としてビューを更新したいのですが、この部分が実装できておりません。（51件目からはdata-row=51となって欲しいのですがまたdata-row=1となる）

取得分の配列データをrows.listにプッシュしてるだけなので、全体のビュー更新に至っていないのだろうとは予測できたはいるのですが・・・
どなたかご教授お願い致します。

Answer 1

methods内で行数カウント分再ループの処理を加えて解決しました