How to access child component's data from parent in VueJS?


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:

Write your answer...

Never miss a post from Prasad Patil, when you sign up for Ednsquare.