Cannot use components as JSX root elements?

[ettersi]

This doesn't work as intended:

<script setup lang="jsx">
import { ref } from 'vue';
import SomeComponent from './SomeComponent.vue';
import SomeOtherComponent from './SomeOtherComponent.vue';

const Jsx = ref(<SomeComponent />);
setTimeout(
  () => {
    console.log("Loading SomeOtherComponent");
    Jsx.value = <SomeOtherComponent />;
  }, 
  2000
);
</script>

<template>
  <div>
    <Jsx />
  </div>
</template>

After the two-seconds timeout, I see the Loading SomeOtherComponent log appear in the console, but it looks like the content of Jsx isn't updated. The example works fine if I replace the components with native elements or if I wrap them with e.g. a <div>...</div>. This seems to suggest that there is some issue with root-level components in JSX. Is this a known issue or maybe even deliberately unsupported?

Playground

[pdsuwwz]

You can try adding an arrow function as follows: Playground

<script setup lang="jsx">
import { ref } from 'vue';
import SomeComponent from './SomeComponent.vue';
import SomeOtherComponent from './SomeOtherComponent.vue';

- const Jsx = ref(<SomeComponent />);
+ const Jsx = ref(() => <SomeComponent />);
setTimeout(
  () => {
    console.log("Loading SomeOtherComponent");
-    Jsx.value = <SomeOtherComponent />;
+    Jsx.value = () => <SomeOtherComponent />;
  }, 
  2000
);
</script>

<template>
  <div>
    <Jsx />
  </div>
</template>