Vue composition API, how to use props inside <script setup>-CodePudding

I want to create a component that takes a titletext an a tag as properties and displays the titletext in the according tag h1, h2, ... and I am using first time the sweet <script setup> way, but I have the following problem:

Usage in a parent components template (correctly imported), this all works:

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

And the BlockTitle component

<template>
    <div ref="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>

The title is displayed and when I use the tag name directly like is="h2" it works, but when I try to use the prop like is="tag" it doesn´t. The Vue Dev Tools show that the property has the correct value, e.g. (h2) but it is not used in the component. What am I missing?

CodePudding user response：

You forgot to v-bind! is currently searching for tag!

<component :is="tag"></component>