How to pass data in component tree of React/Vue app?

Question

Software design

The application describes a multi-level structure, several levels of the component tree. The data is stored-loaded in the form of a similar tree.
Moreover, only the id of the objects are stored and known when the application is initialized, and the full data for display is asynchronously requested from a third-party API. Those. when you open some object, at first only the id of the child ones are visible, and after half a second, the avatars-names are loaded.
I see two options for transferring data inside:

1. top-down through props to transfer complete sets of data, store-update them at the top
   
2. or pass down only id, and each of the lower components itself will request and receive full data.
   

Question 1. What is the best way to deal with data transfer for display: everything through props from top to bottom or independence of sub-components, each one sends-receives-displays additional. data?
The tree is edited in the course of work. At some level, an element is added. You can pass user input "up" and there the single component will update the desired node in the data tree; or in the leaf-component itself, process the input, request the API, update the piece of general data passed to it through props?
Question 2. What is the best thing to do when updating: transfer "up" or, again, boil yourself inside the component? (question 2 is not much different from question 1: )

Answer 1

It's better to ask in one place at the top and pass down. Execution control will become obvious, as the application grows, the transition to Vuex will become painless.