How to use jsx syntax correctly in vue

const { createApp } = Vue

const app = createApp({})

app.component('anchored-heading', {
  template: `
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
      <slot></slot>
    </h6>
  `,
  props: {
    level:
      type: Number,
      required: true
    }
  }
})

const { createApp, h } = Vue

const app = createApp({})

app.component('anchored-heading', {
  render() {
    return h(
      'h' + this.level, // tag name
      {}, // props/attributes
      this.$slots.default() // array of children
    )
  },
  props: {
    level:
      type: Number,
      required: true
    }
  }
})

import { defineComponent } from "vue";
export default defineComponent({
  name: "Jsx",
  render() {
    return <div>I am a div</div>;
  },
});

import { defineComponent } from "vue";
export default defineComponent({
  name: "Jsx",
  setup() {
    return () => <div>I am div</div>;
  },
});

 setup() {
   return () => <div class="test">I am div</div>;
 },

  setup() {
    return () => <div style={{ color: "red" }}>I am div</div>;
  },

// Parent component setup() {
    return () => (
      <div style={{ color: "red" }}>
        <span>I am the parent component</span>
        <Mycom msg={"I am the value passed by the parent component"} />
      </div>
 );

// Subcomponent, the first parameter of setup can get the value in props setup(props) {
    return () => <div>I am a child component {props.msg}</div>;
  },

setup() {
    function eventClick() {
      console.log("click");
    }
    return () => <button onClick={eventClick}>button</button>;
},

// Subcomponent import { defineComponent } from "vue";
export default defineComponent({
  name: "Mycom",
  emits: ["event"],
  setup(props, { emit }) {
    function sendData() {
      emit("event", "data passed by subcomponent");
    }
    return () => (
      <div>
        <span>Custom Events</span>
        <button onClick={sendData}>Send data</button>
      </div>
    );
  },
});

// Parent component // @ts-nocheck
// This is fine in jsx, but it will report a ts type error in tsx, so I ignored the current file ts monitoring @ts-nocheck above
import { defineComponent } from "vue";
import Mycom from "./mycom";
export default defineComponent({
  name: "Jsx",
  setup() {
    function getSon(msg: string) {
      console.log(msg);
    }
    return () => (
      <div>
        <Mycom onEvent={getSon} />
      </div>
    );
  },
});

  setup() {
    function getSon(msg: string) {
      console.log(msg);
    }
    return () => (
      <div>
        <Mycom {...{ onEvent: getSon }} />
      </div>
    );
  },

// Parent component setup() {
    const slots = {
      test: () => <div>Named slot</div>,
      default: () => <div>Default slot</div>,
    };
    return () => (
      <div>
        <Mycom v-slots={slots}></Mycom>
      </div>
    );
},

setup(props, { slots }) {
// Subcomponent return () => (
      <div>
        <span>Slot</span>
        {slots.default?.()}
        {slots.test?.()}
      </div>
    );
  },

  setup() {
    const inputData = ref("");
    return () => (
      <div>
        <span v-show={true}>Show</span>
        <span v-show={false}>Hide</span>
        <input type="text" v-model={inputData.value} />
        <span>{inputData.value}</span>
      </div>
    );
},