Slot in computed

HTML

<div id="app">
  <button type="button" @click="add">Add List</button>
  <div class="section">
    <strong>Test1 (getting slot elements from computed prop)</strong>
    <test1>
      <div v-for="item in list">{{ item }}</div>
    </test1>
  </div>
  <div class="section">
  <strong>Test2 (getting slot elements directly)</strong>
    <test2>
      <div v-for="item in list">{{ item }}</div>
    </test2>
  </div>
</div>

CSS

strong {
  display: block;
  margin-bottom: 5px;
}

.section {
  padding: 10px;
  border-top: 1px solid #ccc;
}

JavaScript

const Test1 = {
	computed: {
  	firstSlot() {
      return this.$slots.default
    }
  },
	render(h) {
    return h('div', this.firstSlot)
  }
}

const Test2 = {
	render(h) {
    return h('div', this.$slots.default)
  }
}

new Vue({
	el: '#app',
  data: {
    list: []
  },
  methods: {
  	add() {
    	this.list = Array.apply(null, Array(10)).map((_, i) => `Item ${i}`)
    }
  },
  components: { Test1, Test2 }
})