title: 'created' method not being called on vue js
body: <p>I've got my main component <code>App.vue</code> in which I've declared the <code>created</code> method in my method's object. But it's never being called.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;Header /&gt;
      &lt;AddTodo v-on:add-todo="addTodo" /&gt;
      &lt;Todos v-bind:todos="todos" v-on:del-todo="deleteTodo"/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Todos from './components/Todos'
  import Header from './components/layout/Header'
  import AddTodo from './components/AddTodo'
  import axios from 'axios'
  
  export default {
    name: 'app',
    components: {
      Header,
      Todos,
      AddTodo
    },
    data() {
      return {
        todos: [
        ]
      }
    },
    methods: {
      deleteTodo(id) {
        this.todos = this.todos.filter(todo =&gt; todo.id !== id)
      },
      addTodo(newTodo) {
        this.todos = [...this.todos, newTodo]
      },
      created() {
        // eslint-disable-next-line no-console
        console.log('here');
        axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
                .then(res =&gt; this.todos = res.data)
                // eslint-disable-next-line no-console
                .catch(err =&gt; console.log(err));
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
    body {
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      line-height: 1.4;
    }
  
    .btn {
      display: inline-block;
      border: none;
      background: #555;
      padding: 7px 20px;
      cursor: pointer;
    }
  
    .btn:hover {
      background: #666;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>How do I know it's not being called? The console statements within the method are not being printed.</p>