why v-slots only work in jsx

[HowGraceU]

// it's work well  in jsx, it will transfer slot to slot-child
export default defineComponent(() => {
  const slots = useSlots();

  return () => <>
    <div>
      <slot-child v-slots={slots} />
    </div>
  </>
}, {
  name: 'slot-parent',
})

// it's doesn't work, and i get a wran "Failed to resolve directive: slots" 
<script setup lang="ts">
import { useSlots } from 'vue';

const slots = useSlots()
</script>

<template>
  <div>
    <slot-child v-slots={slots} />
  </div>
</template>

[Shyam-Chen]

<script lang="ts" setup>
import Comp from './Comp.vue';
</script>

<template>
  <Comp v-slot="{ foo }">
    {{ foo }}
  </Comp>
</template>

<template>
  <div>
    <slot foo="Foo" />
  </div>
</template>

https://play.vuejs.org/#eNp9kj9PwzAQxb+K5aVLSQaYSkACVCQYAAGjlyi5BBfHZ/lPiBTlu3N2mtJKwJa797vT872M/MaYrA/AN7xwlZXGM1Xq9kpw7wRnDnww10LLzqD17A47wxqLHVtleSzi6OpS6CKfhwmlwkNnVOmBKsaKNNSfOYWe1o6sQWST4ElkbNw3psSmpaQU+dEOviYzFepGttnOoSavY6QFr4iWCuyz8RI1Gd6wpEStVAq/HlPP2wDrpV99QPX5S3/nhtgT/MWCA9uD4AfNl7YFP8vbtycY6PsgdlgHRfQ/4is4VCF6nLHboGuyfcQltw/pylK37247eNBueVQ0Gskp8YLT1eOh/nr6j93z7CLNCT3RFZfEYtinGdWy3+dRxJxiJJTVPSL9A/mM5DNzmsz0DVGAvKs=