Should computed track nested refs?

[illusionaries]

related: #7873, #6994

I found nesting a ref inside a computed pretty helpful when building my blog:

1. All pages got injected at app level
2. Create a computed that takes the current route and finds the corresponding page page: Promise<Page>, then use defineAsyncComponent to load it.
   The Page type is something like:

   type Page = {
     default: never;
     __outline: string[];
   };

3. Some data, e.g. the article outline, is exported by the page module, and won't be available until the promise is resolved, so I used a ref which is initially null, and will be updated with page.then(x => outline.value = x.__outline).
4. The computed is something like

   const data = computed(() => {
     const pageModule = modules[route.path]() as Promise<Page>;
     const pageComponent = defineAsyncComponent(() => pageModule);
     const outline = ref<string[] | null>(null);
     pageModule.then((x) => (outline.value = x.__outline));
     return {
       component: pageComponent,
       outline,
     };
   });

As mentioned in #7873 and #6994, this is not the intended usage of the api, but i found it quit useful, and is working as intended on the client side. A minimal reproduction is at https://stackblitz.com/github/illusionaries/ssr-computed, I will also paste the core code here:

<script setup lang="ts">
import { computed, onMounted, onServerPrefetch, ref } from "vue";

const foo = computed(() => {
  console.log("executing computed");
  let num = ref(0);
  const modifyPromise = new Promise<void>((resolve) => {
    setTimeout(() => {
      num.value++;
      resolve();
    }, 1000);
  });
  return {
    num,
    modifyPromise,
  };
});

onServerPrefetch(() => foo.value.modifyPromise);

onMounted(async () => {
  await foo.value.modifyPromise;
});
</script>
<template>
  <span>{{ foo.num }}</span>
</template>

But I noticed some inconsistencies between client build and SSR build, even between different versions of vue.

On the client side, regardless of the version, the computed is executed only once, and num is updated from 0 to 1 after 1 second, which is expected.

On the SSR side, with vue latest (3.5.28), the computed got executed twice, and the rendered result is <span data-v-8338d79c>0</span>. But with vue 3.6 beta (actually, just override "@vue/runtime-core": "beta" is enough), the computed got executed only once, and the rendered result is <span data-v-8338d79c>1</span>.

I haven't dug into the source code yet, but I suppose it has something to do with the computed tracking the internally created ref (at least, the VSCode extension highlights the internal ref as a dependency). On the server side, changing the internal ref value caused the computed to evaluate, replacing the foo.num with 0 again. But somehow on the client side, the ref change does not trigger an re-evaluation.

Is the inconsistency expected or is it actually a bug? If it's expected, is there any recommended way to achieve the same effect without nesting a ref inside a computed?

I have tried to use defineExpose in the page component to expose the outline, but template ref does not work with SSR as far as I know, because the component instance is not created on the server side and useTemplateRef always returns null.