vue.js - データの順序が変更されたときにグリッドのデータバインドが再バインドされない

Question

Vue を使用して、テーブルにバインドする必要があるデータのリストを取得します。特定のパラメータに基づいてリストをフィルタリングおよびソートする計算プロパティを作成しました。

最初は、すべてのロジックを 1 つのファイルにまとめていたので、問題なく動作しましたが、非常に低速でした。テーブル データのコンポーネントを作成するとパフォーマンスが向上することがわかったので、v-for ループを使用して、各項目を独自のコンポーネントにプッシュしました。

これにより、パフォーマンスがいくらか向上しましたが、ソート機能が機能しなくなりました。v-for は計算されたプロパティを反復処理し、データの順序が変更されても、UI 内のオブジェクトのリストを並べ替えません。しかし、コンソールを確認すると、リストの順序が変更されました。データリストを再バインドするために必要な呼び出しはありますか。リストを破棄して再作成すると思いますが、パフォーマンスを向上させようとしています。

                <thead class="tableHeader">
                    <tr>
                        <th @click="changeSort(header)" class="text-no-wrap" v-for="header in fields" scope="col" v-bind:key="header">
                            {{ header }} <i class="fa fa-sort" v-bind:class="{'fa-sort':sortTracker !=header, 'fa-sort-desc': (sortDirection=='2' && sortTracker==header),'fa-sort-asc': (sortDirection =='1' && sortTracker==header)}" />
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <div v-for="(protocol, index) in filterList" v-bind:key="index" class="data-row">
                        <MonitoringStatusListItem  class="data-row" v-if="hasAccess(protocol.ProtocolID,'Monitoring Status')" :protocol="protocol" />
                    </div>
                </tbody>
            </table>``