title: Pinia and Nuxt3 Server routes: Data is undefined when accessing from local component
body: <p>I am using Pinia to fetch and store blog comments from Firebase Firestore.</p>
  <p><strong>I can not figure out why the <code>comments</code> array is <code>undefined</code> when fetching from Firestore when using the server route api in Nuxt 3 (see below code).</strong></p>
  <p>Yet, I do see data coming in when console logging the fetch request from Pinia</p>
  <p><code>/stores/comments.ts</code>:</p>
  <pre class="lang-js prettyprint-override"><code>import {defineStore} from 'pinia'
  
  export const useComment = defineStore('comment', {
  
      state: () =&gt; {
          return {
              comments: []
          }
      },
      actions: {
          async fetchComments(routeParamsId: String) {
              console.log(1, routeParamsId)
              const {data} = await useFetch(`/api/comments/${routeParamsId}`)
              console.log(2, data)
              this.comments = data
          }
      }
  })
  </code></pre>
  <p>The <code>comments.vue</code> component:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script setup&gt;
  import { useComment } from '@/stores/comment'
  const route = useRoute()
  const commentStore = useComment()
  const comments = await commentStore.fetchComments(route.params.id)
  console.log(3, comments) // &lt;---- console log says: 3, undefined
  &lt;/script&gt;
  </code></pre>
  <p>Console.log 3 shows: <code>3, undefined</code></p>
  <pre><code>1 sdfgsdfgsdfg_wsCb
  2 RefImpl {
    __v_isShallow: false,
    dep: undefined,
    __v_isRef: true,
    _rawValue: [
      {
        comment: 'test comment',
        displayName: 'John Doe',
        likes: 0,
        uid: 'TIkHA7B3akn28biaGU5sJ0riZp2',
        createdAt: [Object],
        postId: 'sdfgsdfgsdfg_wsCb',
        commentId: 'mHRoyGlfJrZNSnPBEo7m',
        parentCommentId: null
      }
    ],
    _value: [
      {
        comment: 'test comment',
        displayName: 'John Doe,
        likes: 0,
        uid: 'TIkHA7B3akn28biaGU5sJ0riZp2',
        createdAt: [Object],
        postId: 'sdfgsdfgsdfg_wsCb',
        commentId: 'mHRoyGlfJrZNSnPBEo7m',
        parentCommentId: null
      }
    ]
  }
  </code></pre>
  <p><code>server/api/comments/[postId].ts</code>:</p>
  <pre class="lang-js prettyprint-override"><code>import { firestore } from '@/server/utils/firebase'
  
  export default defineEventHandler(async (event) =&gt; {
      // console.log(2, event.context.params.postId)
      const commentsRef = firestore.collection('comments')
      const snapshot = await commentsRef.where('postId', '==', event.context.params.postId).get()
      const comments = []
      if (snapshot.empty) {
          console.log('No matching documents.')
          return
        }
  
        snapshot.forEach(doc =&gt; {
          comments.push(doc.data())
        })
          return comments
  })
  </code></pre>
  <p>Should I be setting up the fetch differently somewhere in <code>comments.vue</code> file?</p>