vue связь между компонентами

Пытаюсь сделать связь между компонентами! В хтмл вывожу два компонента

<div>
 <form-search-component />
</div>
<hr />
<div class="row">
 <Tickets />
</div>

• нужно сделать чтобы данные полученные из компонента form-search-component передавались в компонент Tickets

Вот компонент form-search-component

    <template>

                        <form @submit="formSubmit">
                            <div class="row">
                                <div class="col"><origin-countries-component v-model="origin" /></div>
                                <div class="col"><destination-countries-component v-model="destination" /></div>
                                <div class="col"><calendar-component v-model="range" /></div>
                                <div class="col"><input type="submit" class="btn btn-success" value="Search" /></div>
                            </div>
                        </form>


</template>

    <script>
    import axios from 'axios';
    import { ref, onMounted } from 'vue'
    import Tickets from './Tickets.vue';
    export default {
        data() {
            return {
                range: '',
                origin: '',
                destination: '',
                output: [],
                isMore: true,
                page: 1, /* начальная страница для получения постов */
            };
        },
        methods: {
            formSubmit(e) {
                e.preventDefault();
                this.isMore = true;
                let currentObj = this;
                currentObj.output = []
                this.page = 1
                axios.post('/tickets?page='+this.page+'&v='+new Date().getTime(), {
                    range: currentObj.range,
                    origin: currentObj.origin.code,
                    destination: currentObj.destination.code
                })
                    .then(function (response) {
                        currentObj.output.push(...response.data);
                    })
                    .catch(function (error) {
                        currentObj.output = error;
                    });
            },
    
        },
        components: {
            Tickets
        }
    
    }
    
    </script>

А вот Tickets

    <template>
<strong>Output:</strong>
<div ref="scrollComponent">
    <div v-for="out in output">
        <div class="card">
            <div class="card-header">{{out.airline}}</div>
            <div class="card-body">
                <div>{{out.origin}} - {{out.origin_airport}}: {{out.departure_at}}</div>
                <div>{{out.destination}} - {{out.destination_airport}}</div>
                <div class="text-bg-danger"><h3>{{out.price}}</h3></div>
                <a v-bind:href="`https://www.aviasales.ru${out.link}`" class="btn btn-danger">Order</a>
            </div>
        </div>
        <br />
    </div>
    <div>
        <a href="#" v-if="isMore" class="btn btn-light">More...</a>
    </div>
</div>
</template>

<script>
import FormSearch from './FormSearch.vue';
export default {
    props: ['isMore', 'output']

}
</script>

Я пытаюсь через props свойства передать, но это не работает