VueJs 3 - Reactive Render Function using Script Setup and Composition API

I have a component called x-input that works as following:

     <x-input k="name" v-model="r"></x-input>
     <x-input k="name" :modelValue="r"></x-input>

This works fine and it is reactive.

How do I create the same functionality using a render function with Composition API and <script setup>?

Here is what i am trying but doesn't work:

<script setup>
import { h, ref} from 'vue'
const r = ref("test")
const entity =  h(resolveComponent('x-input'), {k: "name",   modelValue: r  }, {})
</script>

<template>
<entity />
</template>

Here entity is not reactive.

Where do you define/import your x-input component?

If you import it, then you don't need to resolve it.

<script setup>
import { h, ref, resolveComponent, } from 'vue'
import xInput from './xInput.vue'
const k = ref("name")
const r = ref("test")
const update = () => {
          k.value = "name new"
          r.value = "test new"
      }

const entity = h('div',
      [ h('p', 'Entity: '),
        h(xInput, {k: k,   modelValue: r  }),
        h('button',  { onClick: () => { update() } }, 'update')
      ])  
</script>

<template>
  <entity />
</template>

Here is the working SFC Playground