Having trouble with a simple getter, can't seem to return a sorted array...

[brandoncordell]

I'm new to Vue 3 and the composition API and I'm completely new to Pinia (as of yesterday). I am pulling in a collection of records from Firebase without an order (using the ordering built-in to Firebase didn't give me the sort that I wanted due to the way javascript handles sorted strings of numbers (i.e. 01, 09, 1, 2, etc)

import { initializeApp } from 'firebase/app';
import {
  collection,
  doc,
  getFirestore,
  setDoc,
} from 'firebase/firestore';
import { defineStore } from 'pinia';
import { computed } from 'vue';
import { useCollection } from 'vuefire';

const firebaseConfig = {
  // firebaseConfig
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const timeEntriesCollection = collection(db, 'time_entries');

export const useTimeEntriesStore = defineStore('leaderboard', () => {
  const timeEntries = useCollection(timeEntriesCollection);

  // `time` is in the format of `"{minutes}:{seconds}"`, e.g. `01:33`
  const allTimeEntries = computed(() => timeEntries.value.sort((a, b) => Number(a.time) - Number(b.time)));

  async function addTimeEntry(timeEntry) {
    await setDoc(doc(db, 'time_entries', timeEntry.id), timeEntry);
  }

  return {
    addTimeEntry,
    allTimeEntries,
    timeEntries,
  };
});

The view is pretty basic

<template>
  <main class="h-full p-4 bg-no-repeat bg-top bg-snowflake-blue">
    <table class="table-auto w-full border-separate border-spacing-y-2.5">
      <thead>
        <tr>
          <th class="border-b border-sky-400 py-2 font-light text-left text-white uppercase pl-32">Name</th>
          <th class="border-b border-sky-400 py-2 font-light text-right text-white pr-16 uppercase">Time</th>
        </tr>
      </thead>
    </table>

    <transition-group
      name="leaderboard"
      tag="ol"
      class="space-y-2"
      @enter="onEnter"
    >
      <leaderboard-entry
        v-for="(entry, index) in store.allTimeEntries"
        :key="entry.id"
        :rank="index + 1"
        :time-entry="entry"
      />
    </transition-group>
  </main>

</template>

<script setup>
import LeaderboardEntry from '@/components/LeaderboardEntry.vue';
import { useTimeEntriesStore } from '@/stores/time_entries';

const store = useTimeEntriesStore();

function onEnter(el) {
  console.log('onEnter', el);
  el.scrollIntoView({ behavior: 'instant', block: 'center' });
}
</script>

<style>
.leaderboard-move,
.leaderboard-enter-active,
.leaderboard-leave-active {
  transition: all 0.5s ease;
}

.leaderboard-enter-from {
  opacity: 0;
  top: 100%;
}
</style>

I'm not quite sure what's going on. The state matches the getter but it should be sorted properly (at least testing in the console that the numbers are sorted correctly).