How to setup render function to render dynamically imported components in scoped slots during SSR?

I have an App that is composed of many dynamically imported components. Some of these components have named slots. I am trying build a render function that will accept a config object to render these components. I am noticing that if I add a dynamically imported component in the scoped slot of another, the html does not render when I try to render it server side.

Here is a simplified scenario:

Components
Grid.vue

<template>
  <div class="Grid">
    <div class="Grid__left">
      Left
      <slot name="left" />
    </div>
    <div class="Grid__right">
      Right
      <slot name="right" />
    </div>
  </div>
</template>

SomeComponent.vue

<template>
  <div class="SomeComponent">
    Somecomponent with value: {{ value }}
  </div>
</template>

<script>
export default {
  props: {
    value: { type: String, default: '' }
  }
}
</script>

App.vue
In this App component, if I do not dynamically import the components, the html for both the Grid and SomeComponent renders while doing ssr. If i dynamically import the components, only the Grid HTML renders

<script>
/* Works if not dynamically importing */
// import Grid from './components/Grid'
// import SomeComponent from './components/SomeComponent'

export default {
  components: {
    /* Works if not dynamically importing */
    // Grid,
    // SomeComponent

    Grid: () => import('./components/Grid'),
    SomeComponent: () => import('./components/SomeComponent')
  },
  props: {
    config: { type: Object, default: () => ({}) }
  },
  render (createElement) {
    const create = (config) => {
      const { component, ...dataObject } = config

      // Convert scopedSlots objects to functions that return a vnode
      if (dataObject.scopedSlots) {
        const keys = Object.keys(dataObject.scopedSlots)

        dataObject.scopedSlots = keys.reduce((slots, key) => {
          const value = dataObject.scopedSlots[key]
          slots[key] = () => [create(value, key)]
          return slots
        }, {})
      }
      return createElement(
        component,
        dataObject
      )
    }

    return create(this.config)
  }
}
</script>

Server Side Rendering Logic

const path = require('path')
const { createBundleRenderer } = require('vue-server-renderer')
const bundlePath = path.join(__dirname, './dist/vue-ssr-server-bundle.json')
const renderer = createBundleRenderer(bundlePath)

renderer.renderToString({
  config: {
    component: 'Grid',
    scopedSlots: {
      left: {
        component: 'SomeComponent',
        props: {
          value: 'SomeComponent Value'
        }
      },
      right: {
        component: 'SomeComponent',
        props: {
          value: 'Another Value'
        }
      }
    }
  }
})
  .then(html => console.log(html))

Result when dynamically importing:
The SomeComponent html is missing

<div data-server-rendered="true" class="Grid">
  <div class="Grid__left">
    Left
  </div>
  <div class="Grid__right">
    Right
  </div>
</div>

Expected Results

<div data-server-rendered="true" class="Grid">
  <div class="Grid__left">
    Left
    <div class="SomeComponent">
      Somecomponent with value: SomeComponent Value
    </div>
  </div>
  <div class="Grid__right">
    Right
    <div class="SomeComponent">
      Somecomponent with value: Another Value
    </div>
  </div>
</div>

I have a full repro script available here: https://github.com/jimmytsao/vue-ssr-dynamic-import-issue-repro-script

Is there a better way to setup the render function so that the html for the dynamically imported components in scoped slots render during SSR?

I reported this as an issue and it has been confirmed as a bug: Nested async components passed as slots are not rendered in SSR #10391