[Vuejs]-Vue 3 Render function event listener not working

Update: as per Estus Flask’s comment I have got the desired result.

outerHTML disables reactivity

I have done following changes to my code

1. Made the pageNuber a ref()
2. adjusted the slice & pagination controls for the pageNumber ref
3. return vm.$el instead of vm.$el.outerHTML

   export function createInfoBubble(args, pageNumber = 1) {
     const itemsPerPage = 1;
     const currentPageNumber = ref(pageNumber);
   
     function changePage(newPageNumber) {
       if (
         newPageNumber >= 1 &&
         newPageNumber <= Math.ceil(args.length / itemsPerPage)
       ) {
         currentPageNumber.value = newPageNumber;
       }
     }
   ...
   
    args
         .slice(
           (currentPageNumber.value - 1) * itemsPerPage,
           currentPageNumber.value * itemsPerPage
         )
         .map((item, index) => {
   ...
   { onClick: () => changePage(currentPageNumber.value + 1) },
   ..
    return vm.$el;