在 Composition API 里面返回动态构造的组件，是邪道做法吗？

标题可能说的不清楚，比如以下写法：

// hooks.js
function useList (apiUrl) {
  const loading = ref(false)
  const list = ref([])
  const getData = () => {
    loading.value = true
  	http.get(apiUrl).then(data => {
      list.value = data
      loading.value = false
    })
  }
  const MyList = {
    render () {
      return <a-list data-source={list.value} loading={loading.value} size="small" />
    }
  }
  const ReloadBtn = {
    render () {
      return <a-button type="primary" size="small" onClick={getData} disabled={loading.value}>刷新</a-button>
    }
  }
}

// App.vue
<template>
  <div>
    <Component :is="ReloadBtn" />
  </div>
  <Component :is="MyList" />
</template>
 
<script>
  import { useList } from 'hooks.js'
  export default {
    setup () {
      const { MyList, ReloadBtn } = useList('http://xxxxxx/xxx')
      return { MyList, ReloadBtn }
    }
  }
</script>

// or App.vue with script setup
<template>
  <div>
    <ReloadBtn />
  </div>
  <MyList />
</template>
 
<script setup>
  import { useList } from 'hooks.js'
  const { MyList, ReloadBtn } = useList('http://xxxxxx/xxx')
</script>

类似这样（把 UI 封装在 hook 函数里）的实践，算是邪道么？因为我似乎 Google 不到任何相关的讨论，而在 VueUse 这类的库中，我也看不到任何这样做的例子，所以有点好奇。这样做有什么重大的缺陷吗？