fix(nuxt): bind `createClientOnly` render function to ctx (#22289)

packages/nuxt/src/app/components/client-only.ts

@@ -34,7 +34,7 @@ export function createClientOnly<T extends ComponentOptions> (component: T) {
     // override the component render (non script setup component)
     clone.render = (ctx: any, ...args: any[]) => {
       if (ctx.mounted$) {
-        const res = component.render!(ctx, ...args)
+        const res = component.render?.bind(ctx)(ctx, ...args)
         return (res.children === null || typeof res.children === 'string')
           ? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
           : h(res)

test/fixtures/basic/components/client/Binding.client.ts

@@ -0,0 +1,11 @@
+export default defineComponent({
+  name: 'Foo',
+  methods: {
+    getMessage () {
+      return 'Hello world'
+    }
+  },
+  render () {
+    return h('div', {}, this.getMessage())
+  }
+})

test/fixtures/basic/pages/client-only-components.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <ClientBinding />
     <ClientScript ref="clientScript" class="client-only-script" foo="bar" />
     <ClientSetupScript
       ref="clientSetupScript"