Vue.js将范围内的广告位传递给孙子级，或回退给孙子级默认值

Question

我阅读了vue - how to pass down slots inside wrapper component?和How to use Vue slot-scope with nested components以及一些vue.js github问题，但仍然找不到退回到孙子默认位置的方法。

我创建了一个非常简单的Pen来隔离此笔，请在此处尝试：https://codepen.io/antoniandre/pen/KbxNxz?editors=1011

在HTML波纹管中，我写了2条关于尝试启用/禁用根插槽替代和子插槽替代的尝试的注释。

如果可能的话，最好不要使其与render函数复杂化，因为我的实际组件已经相当复杂。

HTML（PUG）

#app
  p Root
  hr
  child
    //- If you comment this, I want to fallback to default slot content in grand-child.
    div(slot-scope="{ item }") This is item: "{{ item }}"

script#child(type="text/x-template")
  div.lvl
    p Child component
    grand-child
      //- Commenting this will fallback to grand-child default if there is no root template override.
      //- v-if does not seem to be the solution.
      div(slot-scope="{ item }" :item="item" v-if="$scopedSlots.default")
        slot(:item="item")

script#grandchild(type="text/x-template")
  div.lvl
    p Grand child component
    ul
      li(v-for="(item, i) in items" :key="i")
        slot(:item="item") {{ item }}

JS

const GrandChild = {
  data: () => ({ 
    items: ['a', 'b', 'c'] 
  }),
  template: '#grandchild'
}

const Child = {
  components: { GrandChild },
  template: '#child',
  mounted () {
    console.log(this.$scopedSlots.default)
  }
}

new Vue({
  el: '#app',
  components: { Child }
})

非常感谢任何帮助。