How to use vue js without declared key data on init

Question

I use jquery for communication data with api rest.And use vue js for rendering data to my template, but i have error.

[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of undefined"

This my code :

var dashboard = new Vue({
  el: '#dashboard',
  data:{
    profile: {}
  }
});
axios.get(url_profile, { headers: {"Authorization": "JWT " + token} })
    .then(function(res){
        dashboard.$data.profile = res.data;
    })
    .catch(function(err){
        toastr.err(err);
    });

Thanks.

Answer 1

https://v2.vuejs.org/v2/guide/instance.html#Data-and-Methods

If you know you'll need a property later, but it starts out empty or non-existent, you'll need to set some initial value. For example:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}