【Vue x Firestore】リストを時間（降順）で並べて表示したい。

#リストを時間（降順）で並べて表示したい。

list.vueにてリストを作成して、board.vueにてリストを表示させているのですが、
新しく投稿したものを左上に、最も古いものを右下に（列３行３）で表示したいです。

しかし、現状乱雑にリストが追加されてしまう状況です・・

降順に並べるために公式リファレンスより.orderby().limit()関数を使って
並び替えをしようと追加しましたが、下記のように関数がないとエラーが出てしまっております。

 created() {
    firebase
      .firestore()
      .collection("posts")
      .orderby("time", "desc")
      .limit(16)
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          this.allData.push(doc.data());
        });
      });
  },

.orderby("time", "desc").limit(16)
とFirestore内にあるtimeを参照して降順に並べる記述をしているのですが、誤っているのでしょうか・・

分かる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願い致します。

Firestore

#list.vue

<template>
  <div class="card">
    <div class="face face1 flex">
      <div class="content">
        <img
          class="profile-icon"
          width="50"
          height="50"
          src="../assets/アイコン.jpg"
        />
        <h3>{{ list.title }}</h3>
      </div>
    </div>
    <div class="face face2 flex">
      <div class="content flex">
        <button class="hide-btn" @click="deletePost(id)">×</button>
        <p>{{ list.description }}</p>
        <router-link :to="`/chat/${list.id}`" class="join-btn flex"
          >ルームへ参加</router-link
        >
        <img
          src="../assets/ブックマーク.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="savePost"
        />
        <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
      </div>
    </div>
  </div>
</template>

#board.vue

  <List v-for="(list, index) in allData" :index="index" :list="list" :key="list.id"/>

 created() {
    firebase
      .firestore()
      .collection("posts")
      .orderby("time", "desc")
      .limit(16)
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          this.allData.push(doc.data());
        });
      });
  },