取得した後に期限ごとにグループ分けをしたいので関数を追加する。

まず、getTodos関数によって取得したtodosはidの昇順になっているので、期限の日付で並び替えを行う。

以下の関数をmethodsに追加する。getTodos関数で取得してきたtodosをdataのtodos（以後this.todos）に入れ、this.todosの中に入っている要素数が２つより少なければ並べ替えを行う必要がないのでreturnする。要素数が２つ以上の場合は各todoのdeadline （ex. "2022-01-01"） を元にDateオブジェクトを生成したものを使って比較する。この関数では期限の古いものが配列の先頭に来るように並び替えることができる。

次に、todoを期限切れ、今日のもの、明日のもの、それ以降のものでグループ分けをしたいので以下のようにgroupTodoByDeadlineという関数をmethods内に作成する。

v-ifを使って要素を表示するかを切り替えるので、todos.hogehoge.length > 0 と書いて判定するのではなく、要素の有無を表す変数を作る。

groupTodoByDeadLine関数では期限切れ、今日、明日、それ以降のものにグループ分けを行うので、今日と明日の日付の文字列を生成するための関数をmethodsに追加する。以下の関数ではDateオブジェクトから日付の文字列を生成した時にyyyy-mm-ddの形式に統一するための処理が書いてある。今日の日付の文字列を取得するためにはaddDaysに0を入れ、明日の日付の文字列を取得する時はaddDaysに1を入れる。

groupTodoByDeadLine関数の処理を書いていく。今日と明日の日付の文字列をgetDateString関数を使って定数に入れておく。

todoを日付でグループ分けする時に同じ日付のものを入れておく変数を初期化するための関数をgroupTodoByDeadLine関数の中に作り、todoGroupという変数を作っておく。

todoGroupをまとめておくtodoGroupsという変数を作る。この変数では最初から期限切れ、今日のもの、明日のもの、それ以降のものを入れておくための配列やオブジェクトを作っておく。

次に、todoGroupをtodoGroupsに入れるための関数をgroupTodoByDeadLine関数の中に作る。この関数ではdeadlineを元に期限切れ、今日のもの、明日のもの、それ以降のものを判定して振り分けを行う。

最後に、todosをforで回して日付の変わるタイミングでpushToTodoGroups関数を呼び出したりtodoGroupのtodosにtodoを追加したりする。 behindIsNull  などの要素があるかを判定するための変数も初期化する。for文が終わったらtodoGroupsをdataのtodoGroupsに代入したいのでdataにtodoGroupsを追加する。

最終的にgroupTodoByDeadLine関数は以下のようになった。

groupTodoByDeadLine関数の処理が完了するとthis.todoGroupsにはこんな感じの構造のデータが入る。

最後に、getTodosにsortTodoByDeadLine関数とgroupTodoByDeadLine関数を追加すればtodoの取得時に行う処理は終わり。