How to implement this in vuejs2?

Question

JavaScript

I lost 4 days to find a solution, which I just did not try. But js is very weak.
Here's the idea: The user opens a page, a websocket request occurs, and depending on the data received, a certain component is displayed. The problem is that I can not transfer / manage / run the data / methods of the selected component from the parent. Please provide a solution or some examples.
This is a parent comment with a problematic place in the code

var quizComponent = require('vue!./components/modules/quiz/quiz.vue');
var quizCreateComponent = require('vue!./components/modules/quiz/quizCreate.vue');
var quizGamesComponent = require('vue!./components/modules/quiz/quizGames.vue');
if (document.querySelector('#quiz')) {
    window.myVue.quiz = new Vue({
        el: '#quiz',
        data: {
            view: false,
            wsData: '',
            startLoad: false,
            mySetInterval: false,
            games: 'test test'
        },
        components: {
            'quizCreate': quizCreateComponent,
            'quiz': quizComponent,
            'quizGames': quizGamesComponent
        },
        methods: {
            startPage: function() {
                var vm = this;

                var channel_title = 'channel_user_' + user_id;
                var sendData = {
                    'channel': channel_title,
                    'token': msky.websocketWork.getToken(channel_title),
                    'type': 'app',
                    'data': {
                        'app': 'quiz',
                        'action': 'load',
                        'data': {
                            'user_id': user_id
                        }
                    }
                };
                ws.websocket_send_message(sendData);
                console.log('startPage');
            },
            setDataPage: function(data) {
                // Обработка данных, которые пришли с вебсокета
                console.log(data);
                var vm = this;
                if(vm.startLoad == false) {
                    vm.startLoad = true;
                    clearInterval(vm.mySetInterval);
                    vm.startLoadPage(data);
                }
                console.log('setDataPage');
                return true;

            },
            startLoadPage: function(data) {
                var vm = this;
                clearInterval(vm.mySetInterval);
               // Вот тут нужно во vm.view добавить компонент и передать туда данные с data
                // если нет игр, предлагаем создать
                if(data.message.is_new == true) {
                    vm.view = quizCreateComponent;
                } else if(data.message.is_games == true) {
                    vm.view = quizGamesComponent;
                }
                return true;
            },
            reloadPage: function(data) {
                var vm = this;
                return true;

            }

        },
        mounted: function () {
            var vm = this;
            vm.mySetInterval = setInterval(this.startPage, 1000);
        }
    });
}

Child component for displaying games

<template>

    <div>
        <h2>Привет 2 {{data_games}}</h2>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 auction-simple-lot-item" v-for="game in games">
            <div class="portlet light portlet-fit bordered mt-element-ribbon">
                <div class="portlet-title">
                    №{{game.user_id}}
                </div>
                <div class="portlet-body">
                    <div style="min-height: 160px;">
                        <div class="product-item">
dsfsdfsdf
                        </div>
                        <div class="clearfix"></div>
                        <hr>
                        <div>
                            <div class="item-details">

                            </div>
                        </div>
                    </div>
                    <hr>
                </div>
                <div class="ribbon ribbon-right ribbon-sm ribbon-color-success uppercase ">

                </div>
            </div>
        </div>
    </div>

</template>
<script>
    module.exports = {
        data: function() {
            return {
                ws: window.ws,
                debug: true,
                is_game: false,
                data_games: 'ss', // Сюда нужно поместить данные или взять их из родительского
            }
        },
        props: ['games'],
        methods: {
            renderGames: function() {
                if(this.debug == true) {
                    console.log('quizGames loadPage');
                }
                var vm = this;
                //vm.games = {'user_id': 11};
                console.log('renderGames vm.games', vm.games);
            },

        }
    }
</script>

Answer 1

If you need to pass various data between a large number of components - it would be logical to look at Vuex . The idea is that you have one storage in which the data resides, and any work with the data happens through this storage. I here in a nutshell described how to use it, it should be clear.