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.

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.