What is the correct way to concatenate data for multiple vue.js components?

Question

JavaScript

Let's say the application looks like this

<div id="app">
    <app-view-port />
</div>

appViewPort Template

<div class="view">
    <post-form />
    <post-list />
</div>

postList takes the data from the local data{ posts: [] } and builds the list with -v-for.
How to push to postList data{ posts: [] } from postForm?
I tried to transfer data to the root component, but the descendants do not see it

Answer 1

And how did you show data to descendants? Pass it through props to each of them.

<div class="view">
    <post-form :posts="posts" />
    <post-list :posts="posts" />
</div>

In each of the components, do not forget to specify the property
props: ['posts']