Vue.js Передача слотов с заданной областью внуку или резервный вариант по умолчанию для внука

Question

Я прочитал vue - как передать слоты внутри компонента-оболочки? и Как использовать Vue slot-scope с вложенными компонентами и несколько проблем с vue.js github, но все еще не работает найти способ возврата к стандартному слоту grand-child.

Я создал очень простое перо, чтобы изолировать это, пожалуйста, попробуйте там: https://codepen.io/antoniandre/pen/KbxNxz?editors=1011

В приведенном ниже HTML-коде я написал 2 комментария о моих попытках включить / отключить переопределение корневых и дочерних слотов.

Было бы здорово не усложнять это функцией рендеринга, если это возможно, так как мой настоящий компонент уже довольно сложен.

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 }
})

Любая помощь очень ценится.