Axios.Get HTTP Client Not Returning Data From API In Vue.js

Good day!

I was following a tutorial on how to create a simple tutorial on how to create a Todo List project that retrieves data from a dummy API website in Youtube using the Axios HTTP Client Library. However fetching the API data from jsonplaceholder.typicode.com using Axios get() method does'nt return any results and the browser just rendered the white screen of death. After reading through my code thoroughly, I noticed that I have misplaced the created event inside the methods property which is the culprit of the issue.

export default {
  name: 'home',  
  components: {
    Todos,
    Header,
    AddTodo
  },
  data(){
    return {
      todos:[],
    }    
  },
  methods:{
    deleteTodo(id){
      console.log(id);
      axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
           .then(res => {
             this.todos = this.todos.filter(todo => todo.id !== id)
             return res
           })
           .catch(error => {
              return Promise.reject(error);
           });
    },
    addTodo(newTodo){ 
        const {title, completed} = newTodo;

        axios.post('https://jsonplaceholder.typicode.com/todos',{
          title,
          completed
        }).then(res => this.todos = [...this.todos, res.data])
           .catch(error => {
              return Promise.reject(error);
        });
     },
    getData (){
      var self = this;

      axios.get('https://jsonplaceholder.typicode.com/todos') 
           .then(res => {
             self.todos = res.data
            }) 
           .catch(error => {
              return Promise.reject(error);
           });
    }
	created(){    
	  this.getData();
    }
  }
}

After moving out the created event outside the methods property, I can now retrieve data from the API using the getData() function.

export default {
  name: 'home',  
  components: {
    Todos,
    Header,
    AddTodo
  },
  data(){
    return {
      todos:[],
    }    
  },
  created(){    
    this.getData();
  },
  methods:{
    deleteTodo(id){
      console.log(id);
      axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
           .then(res => {
             this.todos = this.todos.filter(todo => todo.id !== id)
             return res
           })
           .catch(error => {
              return Promise.reject(error);
           });
    },
    addTodo(newTodo){ 
        const {title, completed} = newTodo;

        axios.post('https://jsonplaceholder.typicode.com/todos',{
          title,
          completed
        }).then(res => this.todos = [...this.todos, res.data])
           .catch(error => {
              return Promise.reject(error);
        });
     },
    getData (){
      var self = this;

      axios.get('https://jsonplaceholder.typicode.com/todos') 
           .then(res => {
             self.todos = res.data
            }) 
           .catch(error => {
              return Promise.reject(error);
           });
    }
  }
}

Output