Use Pinia stores in each other

[snake-py]

Reproduction

To reproduce you need to boot a new vue 2.7 project and install pinia and then have two stores using each other

Steps to reproduce the bug

The storeToRef function is not working like expected if you use two stores in each other. If store A is using refs from store B and store B uses refs from store A then unpacked refs will be undefined.

sessionStore.ts

const useSessionStore = defineStore('session', () => {
  // From App Store
  const appStore = useAppStore();
  const { errorCommodity, errorCity, errorServer } = storeToRefs(appStore);
})

appStore.ts

const useAppStore = defineStore('app', () => {
  // From Setting Store
  const settingStore = useSettingStore();
  const { redirect } = storeToRefs(settingStore);

  // From Session Store
  const sessionStore = useSessionStore();
  const {
    isAvailableProducts,
    netCodeNumber,
    business,
    priceType,
    commodity,
    usage,
    usageNt,
    city,
    streetNeeded,
    street,
    houseNumber,
    productCode,
    sessionToken,
    consumptionType
  } = storeToRefs(sessionStore);
  const copyProductCode = ref(sessionStore.productCode);

  const updateHasLoaded = (value) => {
    console.log('updateHasLoaded', redirect); // defined and works like expected comes from another store which does no use 
                                                                       // any refs from this store
    console.log('updateHasLoaded', productCode); // undefined
    console.log('updateHasLoaded', sessionStore.productCode['value']); // Is defined // value is "test"
    console.log('updateHasLoaded', sessionStore.productCode); // Is defined // value is "test"
    console.log('updateHasLoaded', copyProductCode); // defined but value is undefined
    console.log('updateHasLoaded', settingStore.redirect); // defined but value is undefined
    hasLoaded.value = value;
  };

})

In my main vue component I am doing this:

    const loader = useBootLoader(props);
    loader.boot();


    const settingStore = useSettingStore();
    const sessionStore = useSessionStore();
    const appStore = useAppStore();

useBootLoader

const useBootLoader = (props: IAppProps) => {
  const settingStore = useSettingStore();
  const sessionStore = useSessionStore();
  const appStore = useAppStore();
  const { commodity, subCommodity, productCode } = storeToRefs(sessionStore);

  const boot = () => {
    console.log('boot', productCode); // is defined
    settingStore.boot(props);
    sessionStore.boot(props);
    console.log('boot', productCode); // is defined
    renderCustomCss(props.customcss);
    cypressChecker();
    appStore.updateHasLoaded(true); 
    console.log('boot', productCode); // is defined
  };

  return {
    boot
  };
};

Expected behavior

That I can use storeToRefs exchangeably and not only one way. I thought pinia is not hierarchal.

Actual behavior

storeToRefs doesn't unpack the refs from another store correctly. It is working if only one store uses another store but not if both stores use each other.

Additional information

No response