Vue 3 SSR 不使用 vue-router 监听 vuex 状态变化

Question

如果我在路由组件设置中更改某些状态（提交更改），外部组件将不会侦听此更改。

但是，如果我再次渲染应用程序，我可以获得正确的结果，但会出现警告。

一个小例子：

const { createSSRApp, toRefs } = require('vue'); // 3.0.4
const { renderToString } = require('@vue/server-renderer'); // 3.0.4
const { createStore } = require('vuex'); // 4.0.0-rc.2
const { createRouter, createMemoryHistory } = require('vue-router'); // 4.0.1

const store = createStore({
  state: () => ({ msg: 'default msg' }),
  mutations: {
    mut(state, payload) {
      state.msg = payload;
    }
  },
});

const router = createRouter({
  history: createMemoryHistory(),
  routes: [{
    path: '/',
    component: {
      template: `<code>{{ msg }}</code>`,
      setup() {
        // change state.msg here
        store.commit('mut', 'updated msg');

        return toRefs(store.state);
      }
    }
  }]
})

const App = {
  template: `
    <div>{{ msg }}</div>
    <router-view></router-view>
  `,
  setup() {
    return toRefs(store.state);
  }
}

;(async () => {
  router.push('/');
  await router.isReady();  
  const app = createSSRApp(App);
  app.use(store);
  app.use(router);

  console.log('First time:');
  console.log(await renderToString(app));
  // <!--[--><div>default msg</div><code>updated msg</code><!--]-->

  console.log('Second time:');
  console.log(await renderToString(app));
  // [Vue warn]: App already provides property with key "Symbol(ssrContext)".
  //             It will be overwritten with the new value.
  // <!--[--><div>updated msg</div><code>updated msg</code><!--]-->
})();

如何在第一次渲染时获得正确的结果？