如题，不明白为什么下面的代码会导致循环渲染。

vue version: 2.6.*

代码如下：

<template>
  <div>
    <smart-list :items="items"></smart-list>
  </div>
</template>
<script>
import Vue from 'vue'
const components = (name) => import(`./components/EmptyList.vue`).then(m => m.default || m)
Vue.component('smart-list', {
  functional: true,
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  render: function (createElement, context) {
    function appropriateListComponent() {
      var items = context.props.items
      if (items.length === 0) return async () => await components('EmptyList')
      if (typeof items[0] === 'object') return async () => await components('TableList')
      if (context.props.isOrdered) return async () => await components('OrderedList')
      return async () => await components('UnorderedList')
    }

    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  }
})

export default {
  data: () => ({ items: [] })
}
</script>

./components/EmptyList.vue 里面代码:

<template>
    <div>EmptyList</div>
</template>