VueJS tutorial Udemy : Components communication

components_Server_Server.vue

<template>
    <div @click="updateDetails">Server #{{id}}</div>
</template>

<script>
import eventBus from '../Shared/EventBus';
export default {
    props: ['id', 'status'],
    created(){
        eventBus.$on('resetServer', (id) => {
            if (id === this.id)
            {
                this.status = 'Normal';
            }
        })
    },
    methods: {
        updateDetails(){
            eventBus.updateDetails(this.id, this.status);
        }
    }
}
</script>

components_Server_ServerDetails.vue

<template>
    <div class="col-xs-12 col-sm-6">
        <p v-if="serverData">Server #{{ serverData.id }} - Status : {{ serverData.status }}</p>
        <p v-else>Server Details are currently not updated</p>
        <button v-show="serverData" @click="resetServer">Réinitialiser</button>
    </div>

</template>

<script>
import eventBus from '../Shared/EventBus';
export default {
    data() {
        return {
            serverData: undefined,
        };
    },
    created(){
        eventBus.$on('detailsUpdated', (data) => {
            this.serverData = data;
        });
    },
    methods: {
        resetServer() 
        {
            eventBus.$emit('resetServer', this.serverData.id);
            this.serverData.status = 'Normal';
        }
    }
}
</script>

<style>

</style>

components_Server_Servers.vue

<template>
    <div class="col-xs-12 col-sm-6">
        <ul class="list-group">
            <li
                    class="list-group-item"
                    v-for="(server_data, index) in servers" :key="index"
            >
                <server
                    :id="server_data.id"
                    :status="server_data.status"
                 />
            </li>
        </ul>
    </div>
</template>

<script>
    import Server from './Server.vue';
    export default {
        data(){
            return {
                servers: [
                    {id: 1, status: 'Normal'},
                    {id: 2, status: 'Critical'},
                    {id: 3, status: 'Unknown'},
                    {id: 4, status: 'Normal'},
                    {id: 5, status: 'Critical'},
                ],
            }
        },
        components: {
            server: Server,
        }
    }
</script>

<style>

</style>

components_Shared_EventBus.js

import Vue from 'vue'

const eventBus = new Vue({
    methods: {
        updateDetails(id, status){
            this.$emit('detailsUpdated', {
                id, status,
            });
        }
    }
});
export default eventBus;

components_Shared_Footer.vue

<template>
        <div class="row">
            <div class="col-xs-12">
                <footer>
                    <p>All Servers are managed here</p>
                </footer>
            </div>
        </div>
</template>

<script>
</script>

<style>

</style>

components_Shared_Header.vue

<template>
    <div class="row">
        <div class="col-xs-12">
            <header>
                <h1>Server Status</h1>
            </header>
        </div>
    </div>
</template>

<script>
</script>

<style>

</style>