This is gross and doesn't compile cleanly, but it works!

ExampleView.vue

<template>
  <SubComponent
    :myStream="myStream"
    :me="me"
    :room="room"
    :participants="participants"
    :chat="chat"
    v-if="ready"
  />
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Collection, Document, ChatMessage, Participant, Room } from "@/types";
import SubComponent from "@/components/SubComponent.vue";
import { db, functions } from "@/firebase";

@Component({ components: { SubComponent } })
export default class ExampleVue extends Vue {

  room: Document<Room> = { data: null, ref: null };
  participants: Collection<Participant> = { data: [], ref: null };
  chat: Collection<ChatMessage> = { data: [], ref: null };
  me: Document<Participant> = { data: null, ref: null };

  ready = false;

  myStream: MediaStream | null = null;
  remoteParticipants: Record<string, twilio.LocalParticipant> = {};
  localParticipant: twilio.LocalParticipant | null = null;

  async created() {
    this.myStream = await navigator.mediaDevices
      .getUserMedia({
        video: true,
        audio: true,
      })
      .catch(() => {
        // doing something more useful than just returning null here in practice
        return null;
      });

    if (!this.myStream) {
      return null;
    }
    this.$set(this.room, "ref", db.collection("rooms").doc(this.$route.params.id));
    await this.$bind("room.data", this.room.ref);

    this.$set(this.participants, "ref", this.room.ref.collection("participants"));
    await this.$bind("participants.data", this.participants.ref);

    this.$set(this.chat, "ref", this.room.ref.collection("chat"));
    await this.$bind("chat.data", this.chat.ref.orderBy("added"));

    this.$set(this.me, "ref", this.participants.ref.doc(this.$store.state.user.data.uid));
    await this.$bind("me.data", this.me.ref);

    const styleNum = Math.floor(Math.random() * 15) + 1;
    const initialName = this.$store.state.user.data.displayName || "Anonymous Armadillo " + styleNum;
    const profilePic = this.$store.state.user.data.photoURL || gravatarPlaceholder;
    await this.me.ref.set({ name: initialName, style: "p" + styleNum, profilePic: profilePic }, { merge: true });

    // Only after loading all the data
    this.ready = true;
  }

  beforeDestroy() {
    delete this.myStream;
  }
}
</script>