Vue.js cannot access to nested properties of data object

You can try waiting for data to finish loading to display it in your template:

export default {
    data () {
       return {
           loading: false,
           data: []
       }   
    },
    created () {
        this.fetchData();    
    },
    methods: {
        fetchData () {
            this.loading = true;
            $.getJSON('data/api.json', function(el) {
                this.data = el;
                this.loading = false;
            }.bind(this)),
        }
    }
}

In template:

<template>
  <div v-if="!loading">
    {{ data.pick.box }}
  </div>
</template>

My solution was to create an empty object with empty properties.

 data () {
       return {
           loading: false,
           data: {pick:{},}
       }   
    },

You are getting this error, as the data is not populated while it is being loaded, and you get error in that while. You can use v-if in your template till the data is populated in the view. So the element will not be rendered till the data is loading and once the data is loaded it will show the data.

It can be like following:

<div v-if="data.pick">
  {{data.pick.box}}
</div>