Quiero crear un componente que tome un texto de título y una etiqueta como propiedades y muestre el texto de título en la etiqueta correspondiente h1, h2, ... y estoy usando por primera vez la dulce forma <script setup> , pero tengo el siguiente problema :

Uso en una plantilla de componentes principales (importada correctamente), todo esto funciona:

 <BlockTitle blocktitle="This is a Title" tag="h1"/> <BlockTitle blocktitle="This is a Subtitle" tag="h2"/>

Y el componente BlockTitle

 <template> <div ref="container" class="container"> <component is="tag" ref="title">{{ blocktitle }}</component> </div> </template> <script setup> import { ref } from 'vue' const container = ref() const title = ref() defineProps({ blocktitle: String, tag: String }) </script>

El título se muestra y cuando uso el nombre de la etiqueta directamente como is="h2" funciona, pero cuando trato de usar el accesorio como is="tag" no funciona. Las herramientas de Vue Dev muestran que la propiedad tiene el valor correcto, por ejemplo ( h2 ), pero no se usa en el componente. ¿Qué me estoy perdiendo?