vue.js - VueJS access child component's data from parent

Question

I'm using the vue-cli scaffold for webpack

My Vue component structure/heirarchy currently looks like the following:

• App
  • PDF Template
    • Background
    • Dynamic Template Image
    • Static Template Image
    • Markdown

At the app level, I want a vuejs component method that can aggregate all of the child component's data into a single JSON object that can be sent off to the server.

Is there a way to access child component's data? Specifically, multiple layers deep?

If not, what is the best practice for passing down oberservable data/parameters, so that when it's modified by child components I have access to the new values? I'm trying to avoid hard dependencies between components, so as of right now, the only thing passed using component attributes are initialization values.

UPDATE:

Solid answers. Resources I found helpful after reviewing both answers:

• Vuex and when to use it
• Vuex alternative solution for smaller apps

Answer 1

In my child component, there are no buttons to emit changed data. It's a form with somewhat 5~10 inputs. the data will be submitted once you click the process button in another component. so, I can't emit every property when it's changing.

So, what I did,

In my parent component, I can access child's data from "ref"

e.g

<markdown ref="markdowndetails"></markdown>
<app-button @submit="process"></app-button>

// js
methods:{
    process: function(){
        // items is defined object inside data()
        var markdowns = this.$refs.markdowndetails.items 
    }
}

Note: If you do this all over the application I suggest move to vuex instead.