Cannot Access property of nested objects vue

Question

I am using Vue for quite sometime now but having troubles on accessing certain property of my object..

I have object named "table" with "data" and "Paginate" properties that is being passed as a Props to my Datatable Vue component. When I try to console.log the "table" object on my Datatable component, I can see that the "data" and "Paginate" properties has values, but when I try to access the using "this.table.data" I get 0 values..

here is the structure of my table object:

table : {
     data : array[7],
     paginate: Object
} 

trying to access the this.table.data on "Mount" of the Vue instance.

Thanks for the help!

Component Code:

 <script>
 window.Event = new Vue();

export default {

props: {
        tableid: String,
        settings: Object,
        table: Object,
    },
mounted: function(){
    console.log(this.table);
}
</script>

Answer 1

 Vue.component('table-show', { template: '#table-show', props: { table: Object, } }); new Vue({ el: '#app', data: { tables: [{ data: [1, 2, 3], paginate: true }, { data: [4, 5, 6], paginate: true }, { data: [7, 8, 9], paginate: false }, ], } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script> <template id="table-show"> <li>{{table.data}}</li> </template> <div id="app"> <ul> <table-show v-for="table in tables" :table="table"></table-show> </ul> <pre> {{$data.tables}} </pre> </div>