Updating persistent pinia state on the server causes hydration errors. How to fix this?

Store
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  persist: true,
  actions: {
    increment() {
      this.count++
    },
    setRandom() {
      this.count = Math.floor(Math.random() * 100)
    },
  },
})

Nuxt modules
'@pinia/nuxt'
'pinia-plugin-persistedstate/nuxt'

nuxt.config.ts
export default defineNuxtConfig({
  piniaPluginPersistedstate: {
    storage: 'cookies',
    cookieOptions: {
      sameSite: 'lax',
    },
  },
})

./app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
    <p>Count: {{ counter.count }}</p>
  </NuxtLayout>
</template>

<script setup lang="ts">
const counter = useCounterStore()

// Runs during SSR
callOnce('set-random-counter', () => {
  counter.setRandom()
})
</script>