Array in Pinia state loaded in app but not visible in devtools?

[bigyonk]

I've created a Pinia store and using <script setup> I use it in my component. While I can console log the array in my state and the data is loaded in the app, the Pinia state in Vue devtools looks like this:

Store

import { defineStore } from 'pinia'

export const useGalleryStore = defineStore('gallery', {
  state: () => ({
    galleryItems: [],
    selectedImage: '',
    location: '',
    camera: '',
    film: '',
    activeClass: '',
    imageId: '',
  }),

  actions: {
    async fetchGalleryItems() {
      try {
        const config = useRuntimeConfig()
        const { data: items } = await useFetch('/items', {
          baseURL: config.public.browserBaseURL,
        })
        this.galleryItems = items
        console.log('galleryItems', this.galleryItems)
      } catch (error) {
        console.log(`ERROR: ${error}`)
        return error
      }
    },
...
  },
})

**Component **

<script setup>
import { useGalleryStore } from '@/stores/galleryStore'
import { storeToRefs } from 'pinia'

const store = useGalleryStore()
await store.fetchGalleryItems()
const { galleryItems, imageId } = storeToRefs(useGalleryStore())
const { openImageMeta, openImageModal } = store
</script>

<template>
  <div class="gallery">
    <div v-for="item in galleryItems" :key="item.id" class="gallery-grid-cell">
      <figure>
        <!-- <img
            :src="`https://owenluther-photos.s3.amazonaws.com/${item.fileName}`"
            loading="lazy"
          /> -->
        <img :src="`/img/gallery-images/${item.fileName}`" />
        <div v-if="imageId != item.id" class="image-overlay-container">
          <div class="image-overlay"></div>
          <div class="image-nav">
            <div
              @click="
                openImageModal({
                  id: item.id,
                  file_name: item.fileName,
                  location: item.location,
                  camera: item.camera,
                  film: item.film,
                })
              "
            >
              <font-awesome-icon
                class="icon"
                icon="fa-solid fa-up-right-and-down-left-from-center"
              />
            </div>
            <div
              @click="
                openImageMeta({
                  id: item.id,
                  location: item.location,
                  camera: item.camera,
                  film: item.film,
                })
              "
            >
              <font-awesome-icon class="icon info" icon="fa-solid fa-list" />
            </div>
          </div>
        </div>
        <figcaption>
          <FadeTransition>
            <DesktopMeta
              v-if="item.id === imageId && store.activeClass === 'meta-active'"
            />
          </FadeTransition>
        </figcaption>
      </figure>
    </div>
  </div>
  <FadeTransition>
    <DesktopModal
      v-if="!$device.isMobileOrTablet && store.activeClass === 'modal-active'"
    />
  </FadeTransition>
</template>