v-for doesn't rerender after data is updated and needs page refresh to see the change

In Vue.js 2, I'm using Axios and I can't render the data without refreshing the page, can you help me on what to do?

<div v-for="task in tasks" :key="task.id" class="title">
    {{ task.title }}
</div>

export default {
  name: "TodoList",
  data() {
    return {
      tasks: [],
      newTask: "",
      taskId: null,
    }
  },
  methods: {
    async addTask() {
      this.taskId = this.tasks.length + 1
      if (this.newTask.trim().length === 0) {
        return
      }
      const task = {id: this.taskId, title: this.newTask}
      const created = await API.createTasks(task)
      this.tasks.push(created)
      this.newTask = ""
    }
  },
  async created() {
    this.tasks = await API.getTasks();
  }
}

// API.js
export default {
  async createTasks(task) {
    return axios.post(this.withPath('/api/v1/tasks'),task).then(r => r.data)
  }, 
  async getTasks() {
    return axios.get(this.withPath('/api/v1/tasks')).then(r => r.data)
  },
}

This is my response body of POST:

{"id":1,"title":"buy a water"}