Allow multiple template in one vue file

[heroboy]

I want define multiple template that can be reuse or reference in other places, like the things in JS.
Currently I have to write code like:

<script setup>
import { h } from 'vue'
const Red = {
    setup(props,{slots})
    {
      return ()=>h('div',{style:'color:red'},slots.default());
    }
};
</script>

<template>
  <Red>kkk</Red>
</template>

Mix vue template, jsx, h function or template string is not a comfortable experience.
I want I can write code like this:

<script setup>
const Red = {
    template:'#xx'
};
</script>
<template>
  <Red>kkk</Red>
</template>
<template id="xx">
  <div style="color:red">
    <slot/>
  </div>
</template>

And even more:
(this makes the main template small, clean and not too deep)

<template>
  <reference-template v-if="true" refid="1"/>
  <reference-template v-if="true" refid="2"/>
  <reference-template v-if="true" refid="3"/>
</template>
<template id="1">
</template>
<template id="2">
</template>
<template id="3">
</template>

The main reason I want this is to write private component simple. It is not worth creating another file to pollute my eyes.
In react, it is easy to define multiple components in one file, export somes and self use somes. Every component can be written in the same way.

In vue, Single-File Component is the most comfortable way to write a component. But it is public, I have to name a good name, make good folder struecture, switching files in editing.

I know there are problems. For example, each template's scope.