zhao/imports/ui/App.vue

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

<script>
import Lobby from "./components/Lobby.vue"
import WaitingRoom from "./components/WaitingRoom.vue"
import Players from "../api/collections/Players";

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

  meteor: {
    $subscribe: {
      players: [],
    },
    players() {
      return Players.find({});
    },
  },

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

  methods: {
    newGame: function(args) {
      this.currentRoom = args;
      this.whatScreen = WaitingRoom;
      Meteor.subscribe("players", args.roomId, () => {
        console.log("UPDATE", arguments);
      });
    },

    joinGame: function(args) {
      this.currentRoom = args;
      this.whatScreen = WaitingRoom;
      Meteor.subscribe("players", args.roomId, () => {
        console.log("UPDATE", arguments);
      });
    },
  }
}
</script>

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