Renderless Components in Vue 3

Question

I have built a pagination component in Vue 2 using the renderless pattern to separate behavior from presentation and allow the consumer to compose his own UI (https://adamwathan.me/renderless-components-in-vuejs/).

RenderlessPagination.js:

...
render() {
  return this.$scopedSlots.default({
    setPage: this.setPage,  
    totalPages: this.totalPages,
    override: this.options.template // this is where the user can pass his own template 
    // etc
  })
}

Pagination.jsx

import template from './template' // default template in JSX syntax

 components: {RenderlessPagination},
 props:['options'],
 ...
 render(h) {
        return <renderless-pagination scopedSlots={
            {
                default: function (props) {
                    return props.override ? h(
                        props.override,
                        {
                            attrs: {props}
                        }
                    ) : template(props)(h) 
                }
            }
        }
        >

        </renderless-pagination>
    },

This allows the user to pass his own template into options.template thus overriding the default template:

MyPagination.vue

<template>
    <div class='VuePagination' :class='props.theme.wrapper'>
        <nav :class='props.theme.nav'>

            <ul v-show="props.showPagination" :class="props.theme.list">

                <li v-if="props.hasEdgeNav" :class='props.theme.firstPage' @click="props.setFirstPage">
                    <a v-bind="{...props.aProps,...props.firstPageProps}">{{props.texts.first}}</a>
                </li>

                <li v-if="props.hasChunksNav" :class='props.theme.prevChunk' @click="props.setPrevChunk">
                    <a v-bind="{...props.aProps, ...props.prevChunkProps}">{{props.texts.prevChunk}}</a>
                </li>

                <li :class="props.theme.prev" @click="props.setPrevPage">
                    <a v-bind="{...props.aProps,...props.prevProps}">{{props.texts.prevPage}}</a>
                </li>

                <li v-for="page in props.pages" :key="page" :class="props.pageClasses(page)"
                    v-on="props.pageEvents(page)">
                    <a v-bind="props.aProps" :class="props.theme.link">{{page}}</a>
                </li>

                <li :class="props.theme.next" @click="props.setNextPage">
                    <a v-bind="{...props.aProps, ...props.nextProps}">{{props.texts.nextPage}}</a>
                </li>

                <li v-if="props.hasChunksNav" :class='props.theme.nextChunk' @click="props.setNextChunk">
                    <a v-bind="{...props.aProps, ...props.nextChunkProps}">{{props.texts.nextChunk}}</a>
                </li>

                <li v-if="props.hasEdgeNav" :class="props.theme.lastPage" @click="props.setLastPage">
                    <a v-bind="{...props.aProps, ...props.lastPageProps}">{{props.texts.last}}</a>
                </li>

            </ul>

            <p v-show="props.hasRecords" :class='props.theme.count'>{{props.count}}</p>

        </nav>
    </div>

</template>

<script>
    export default {
        name: 'MyPagination',
        props: ['props']
    }
</script>

Then use it with the plugin:

import Pagination from 'vue-pagination'
import MyPagination from './MyPagination'

<pagination :options={template:MyPagination}/>

This code breaks on Vue 3. For once, scopedSlots have been unified with slots. Secondly, the h (CreateElement) variable is imported as a global dependency. But even after accounting for those changes, I was still unable to arrive at a working solution.

What would be the optimal way to rewrite this logic in Vue 3?