Why not export the created store instead of useStore? (Nuxt3 + Pinia)

[katerlouis]

After years of working extensively with Nuxt2 and Vue2, I'm finally making the leap to Nuxt3, Vue3, Vite and Pinia. Quite the ride...

I am having trouble adopting the new way of thinking when it comes to the composition API and "composables", so the following question is perhaps trivial to some, but I'd like to understand why the approach taught in the docs is the way it is.

–––

Instead of exporting a function that creates the store, I tried creating the store and export said store without any issues. In fact, I get the benefit of adding watchers (using $subscribe) right in store file.

An even bigger benefit in the Nuxt3 world: By auto-importing all stores as shown here I have direct access to watchStore in my template and script without doing const watchStore = useWatchStore() (which I find cumbersome when you think about hundreds of components and 10s of stores in big applications)

I feel like there's a reason this way is not promoted in the docs. What are the downsides I'm not seeing?

// src/stores/watch.ts

// don't export this!
const useWatchStore = defineStore('watch', () => {
  const time = ref(12);
  const increment = (amount: number = 10) => time.value = time.value + amount;

  return {
    time,
    increment,
  };
});

// but export this 😍
export const watchStore = useWatchStore();

// 
watchStore.$subscribe((mutation, state) => {
  console.log('watchStore subscription', mutation, state);
});

EDIT:
I've already found one drawback. As far as I can tell Hot Module Replacement only works with exporting useWatchStore. But I personally can easily do without HMR in my stores and would take the benefits mentioned above any time.