Vue.js 初期化処理でAPIからデータを取ってきた結果が画面に反映されない

Question

画面を表示するにあたり、表示時（created()）でAPIを呼び出し、データを取得した結果、値を表示する処理を作っていますが、
API呼び出し（今はテスト的にファイル）はうまくいっていますが、画面が再描画されない様子です。

環境：vue2.6.11

コード

<template>
<div>
    <div class='chart' v-for="(task, i) in tasks">
        {{task}} <!-- テスト表示 -->
    <div>
</div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            tasks: [],
        }
    },
    created() {
        this.loadTasks()
    },
    methods: {
        async loadTasks() {
            var resp = await axios.get('./task.json')
            for(var i in resp.data) {
                this.$set(this.tasks, i, resp.data[i])
            }
            this.tasks.splice(resp.data.length)
            console.log(this.tasks) // ここのは狙いのデータが表示される
        },
    },
}
</script>

何かアドバイスいただけますと幸いです。

====
追記
task.jsonは以下のような構造です

[
    [
        {"task": 11},
        {"task": 12}
    ],
    [
        {"task": 21}
    ],
    [
        {"task": 31}
    ]
]

Answer 1

配列が２段になっているので、以下のように２段ループすればいいと思います。なおAPI結果はそのままthis.tasksに保存した場合です。

    <div v-for="(dailyTasks, i) in tasks" v-bind:key="i">
      array={{ i }}
      <div class="chart" v-for="(task, j) in dailyTasks" v-bind:key="j">
        task={{ task.task }}
      </div>
    </div>

---

動作確認したコード全体も貼っておきます

<template>
  <div>
    <div v-for="(dailyTasks, i) in tasks" v-bind:key="i">
      array={{ i }}
      <div class="chart" v-for="(task, j) in dailyTasks" v-bind:key="j">
        task={{ task.task }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tasks: []
    };
  },
  created() {
    this.loadTasks();
  },
  methods: {
    async loadTasks() {
      var resp = await axios.get("./task.json");
      this.tasks = resp.data;
    }
  }
};
</script>

※ test.jsonが想定していた内容と違っていたので回答を修正しています

Comments

[darum]

ダメでした。

this.tasks はコンソールにArrayで表示されているのですが、そこが誤っている感じでしょうか？

[popobot]

Arrayとでるってことはちゃんと反映されてないってことないですかね？

あと以下も気になりました
・this.tasks.splice(resp.data.length)
・v-forにv-bind:keyが指定されてない

回答欄に動作確認したコード貼ってみましたので確認してみてください

[popobot]

それでもダメなら task.json が自分が思っているものと違うのかもしれません...

[darum]

ご回答ありがとうございます。
私もtask.jsonの相違があるのかと思い、想定しているjson構造を追記したのでご確認いただければと思います。

データはArrayで来ることを想定しているのですが、それが相応しくないということであれば、Objectが返るようにしたいと思います

[popobot]

ArrayのArrayのObjectなんですね...
これをどう表示したいのでしょうか

taskの値が列挙できればよいのでしょうか
11
12
21
31

[darum]

現実的には、
array: 0
task=11
task=12
array: 1
task=21
array:2
task=31
というイメージでループさせたいですが、とりあえずはtasks がちゃんとループされるように
表示は[{task=11}, {task=12}]
という感じで出ればいいかなと思っています。

※　TODOリストをイメージしていただき、日付ごとの、タスクリストが並ぶ感じです。

[popobot]

回答を直してみましたので、ご確認ください。

[darum]

私の環境では解決できていないのですが、いただいている回答で納得はできているのでベストアンサーとさせていただきます。ご回答ありがとうございました。またよろしくお願いいたします。