【Vue.js】リアクティブなオブジェクトを分割代入で取り出すのはNG

import { defineStore } from "pinia"
import { collection, onSnapshot, query, orderBy } from "firebase/firestore"
import { db } from "@/firebase"
import { ref } from 'vue'
import type { CategoryType } from '@/types'

const categoriesCollectionRef = collection(db, "categories")

export const useQuizStore = defineStore('quiz', () => {
  const quizCategories = ref<CategoryType[]>([])
  const isLoaded = ref(false);

  const getQuizCategories = () => {
    // Firestore からカテゴリデータを 'display_order' フィールドの昇順で取得する
    const q = query(categoriesCollectionRef, orderBy("display_order", "asc"));
    onSnapshot(q, (snapshot) => {
      quizCategories.value = snapshot.docs.map((doc) => {
        return {
          id: doc.id,
          title: doc.data().title,
          description: doc.data().description,
          displayOrder: doc.data().display_order
        }
      })
      console.log('quizCategories in quizStore', quizCategories)
      isLoaded.value = true;
    })
  }

  return {
    quizCategories,
    getQuizCategories,
    isLoaded
  }
})

<script setup lang="ts">
import { onMounted } from 'vue';
import HomePresentation from './HomePresentation.vue';
import { useQuizStore } from '@/stores/quizStore';

const { quizCategories, getQuizCategories, isLoaded } = useQuizStore();

onMounted(() => {
  getQuizCategories();
  console.log('quizCategories in HomeContainer', quizCategories)
});
</script>

<template>
  <v-container>
    <HomePresentation v-if="isLoaded" :quizCategories="quizCategories" />
  </v-container>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import HomePresentation from './HomePresentation.vue';
import { useQuizStore } from '@/stores/quizStore';
import { watch } from 'vue';

const { quizCategories, getQuizCategories, isLoaded } = useQuizStore();

onMounted(() => {
  getQuizCategories();
  console.log('quizCategories in HomeContainer', quizCategories)
});

// quizCategories を監視し、データ取得が反映されているか確認
watch(quizCategories, (newValue, oldValue) => {
　 // 'quizCategories updated'が出力されないため、quizCategories がリアクティブになっていない
  console.log('quizCategories updated', newValue);
}, { deep: true });
</script>

<template>
  <v-container>
    <div v-if="isLoaded">
      <HomePresentation :quizCategories="quizCategories" />
    </div>
  </v-container>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import HomePresentation from './HomePresentation.vue';
import { useQuizStore } from '@/stores/quizStore';

// 分割代入で取り出すとリアクティビティが失われてしまう
// const { quizCategories, getQuizCategories, isLoaded } = useQuizStore();

// 以下のように取り出す
const quizStore = useQuizStore();

onMounted(() => {
  quizStore.getQuizCategories();
});
</script>

<template>
  <v-container>
    <HomePresentation v-if="quizStore.isLoaded" :quizCategories="quizStore.quizCategories" />
  </v-container>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import HomePresentation from './HomePresentation.vue';
import { useQuizStore } from '@/stores/quizStore';
import { storeToRefs } from 'pinia';

const quizStore = useQuizStore();
// storeToRefs で各プロパティを ref に変換して分割代入を実現する
const { quizCategories, isLoaded } = storeToRefs(quizStore);

onMounted(() => {
  quizStore.getQuizCategories();
});
</script>

<template>
  <v-container>
    <HomePresentation v-if="isLoaded" :quizCategories="quizCategories" />
  </v-container>
</template>