Fetching and passing data from root to child Vue.js component

JavaScript
1

Hello,
I get the data from a json file in my root Vue component.
But how can I access them outside of it and pass it as props to a child component and render them in the template?
I guess my issue has more to do with the Promise.

Vue.component('project-link', {
    delimiters: ["[", "]"],
    props: ['projects'],    
    template: '<button type="button" class="list-group-item list-group-item-action">[projects]</button>',
    }
})

var app = new Vue({
    el: "#app",
    delimiters: ["[", "]"],
    data: {
        projects: []
    }, 
    mounted() {     
        fetch("projects.json").then(function (response) {
                return response.json();
            })
            .then(function (data) {          
                this.projects = [];        
                console.log('PROJECTS before: ', this.levels)
                //Object.keys(data) will not work on IE7 neither IE8
                for(var i = 0; i < Object.keys(data).length; i ++) {                   
                    this.projects.push(Object.keys(data)[i])
                }
                console.log('PROJECTS after: ', this.projects);   //logs the array of projects
                return this.projects;             
            })
            .catch(function(err) {
                console.log("Error in getting data: ", err.message)
            })
    }
})

console.log(app.projects) //logs an empty array