如何将 Pinia 与 Nuxt、composition-api (vue2) 和 SSR 结合使用？

Question

我正在尝试让 Pinia 在 Nuxt 中使用 SSR（服务器端渲染）工作。

当创建没有Pinia 的页面时，它可以工作：

<script>
import { reactive, useFetch, useContext } from '@nuxtjs/composition-api'

export default {
  setup() {
    const { $axios } = useContext()
    const invitesStore = reactive({
      invites: [],
      loading: true,
    })

    useFetch(async () => {
      invitesStore.loading = true
      await $axios.$get('invite/registermember').then((result) => {
        invitesStore.loading = false
        invitesStore.invites = result.invites
      })
    })

    return {
      invitesStore,
    }
  },
}
</script>

但是在介绍Pinia时，我得到了错误"Converting circular structure to JSON --> starting at object with constructor 'VueRouter'"

我这样使用 Pinia：

// /store/invitesStore.js
import { defineStore } from 'pinia'

// useStore could be anything like useUser, useCart
export const useInvitesStore = defineStore({
  // unique id of the store across your application
  id: 'storeId',

  state() {
    return {
      invites: [],
      loading: true,
    }
  },
})

<script>
import { useInvitesStore } from '@/store/invitesStore'
import { reactive, onMounted, useFetch, useContext } from '@nuxtjs/composition-api'

export default {
  setup() {
    const { $axios } = useContext()
    const invitesStore = useInvitesStore()

    useFetch(async () => {
      invitesStore.loading = true
      await $axios.$get('invite/registermember').then((result) => {
        invitesStore.loading = false
        invitesStore.invites = result.invites
      })
    })

    return {
      invitesStore,
    }
  },
}
</script>

有可能让它发挥作用吗？如何？