How to setup initial state while using vue reactive for state management

[techieoriname]

I'm a huge fan of the vue reactive and I have been using it for state management since my switch to vue 3.

However, I'm setting up SSR for my project, and from the documentation I saw samples of initial state data using vuex or pinia.

export const createApp = ViteSSG(
  App,
  { routes },
  ({ app, router, routes, isClient, initialState }) => {
    // ...

    if (import.meta.env.SSR) {
      // Set initial state during server side
      initialState.data = { cats: 2, dogs: 3 }
    } else {
      // Restore or read the initial state on the client side in the browser
      console.log(initialState.data) // => { cats: 2, dogs: 3 }
    }

    // ...
  }
)

But I actually make use of vue's reactive function and I was wondering if I could populate the object on SSR. And also is it possible to populate remote data via http request?

My store looks like this.

import { reactive, readonly } from "vue";

const state = reactive({
    posts: []
});

const populatePosts = (posts) => {
    state.posts = posts
}

export default {
    state: readonly(state),
    populatePosts
}