Vue version

3.3.4

Link to minimal reproduction

Vue SFC Playground

Steps to reproduce

I tried to create a component using h() and found that the value defined by provide was not readable in JSX components.

Why is there this problem? Am I using it the wrong way?

There is very little information on this, Please help, thanks.

App.vue

<script setup>
import { ref, provide, getCurrentInstance } from 'vue'
import Child from './Child.vue'

// by providing a ref, the GrandChild
// can react to changes happening here.
const message = ref('hello')
const app = getCurrentInstance().appContext.app;

provide('message', message)
</script>

<template>
  <input v-model="message">
  <Child />
  <p>
  {{ `Vue Version: ${app.version}` }}
  </p>
</template>

Child.vue

<script setup>
import { inject, h, ref } from 'vue'

const message = inject('message')
const msg = ref('Hello World!!')
const vnode = () => h('div', msg.value);
const vnode2 = () => h('div', message);
</script>

<template>
  <p>
    Message to grand child: {{ message }}
  </p>
  <vnode />
  <vnode2 />
</template>

What is expected?

JSX components can read the values defined by provide

What is actually happening?

The value defined by provide is not available in JSX components.

System Info

No response

Any additional comments?

No response

const vnode2 = () => h('div', message.value);