zhao/imports/ui/App.vue

<template>
  <div>
    <component
      v-bind:is="whatScreen"
      v-bind="currentRoom"
      v-on:newGame="newGame"
      v-on:joinGame="joinGame"
      ></component>
  </div>
</template>

<script>
import Lobby from './components/Lobby.vue'
import WaitingRoom from './components/WaitingRoom.vue'

export default {
  components: {
    Lobby,
    WaitingRoom,
  },

  data() {
    return {
      currentRoom: null,
      whatScreen: Lobby,
    };    
  },

  methods: {
    newGame: function(args) {
      this.currentRoom = args;
      this.whatScreen = WaitingRoom;
    },

    joinGame: function(args) {
      this.currentRoom = args;
      this.whatScreen = WaitingRoom;
    },
  }
}
</script>

<style>
body {
  font-family: sans-serif;
  padding: 10px;
}
</style>