Embeded template in vue

Question

I would like to use a local component in VueJS:

My component file (cleaned up a bit):

<template id="heroValuePair">
    <td class="inner label">{{label}}</td>
    <td class="inner value">{{c}}</td>
    <td class="inner value">
        {{t}}
        <span v-if="c < t" class="more">(+{{t-c}})</span>
        <span v-if="c > t" class="less">({{t-c}})</span>
    </td>
</template>


<template id="hero">

    <table class="hero card" border="0" cellpadding="0" cellspacing="0">
        <tr>
           <td>other data...</td>
       </tr>
        <tr>
            <hvp label="Label" v-bind:c="current.level" :t="target.level" :key="hero.id"/>
        </tr>
    </table>
</template>

<script>
  var HeroValuePair = {
        template: "#heroValuePair",
        props: {
            label : String,
            c : Number,
            t : Number
        },
        created() {
            console.log("HVP: "+this.c+" "+this.t);
        }
    };


    Vue.component("Hero", {
        template: "#hero",
        props: {
            heroId : String
        },
        components: {
            "hvp" : HeroValuePair
        },
        data: () => ({
            hero: {},
            current: {},
            target: {}
        }),
        computed: {

        },
        created() {
            fetch("/api/hero/"+this.heroId)
                .then(res => res.json())
                .then(res => {
                    this.hero = res.hero
                    this.current = res.current
                    this.target = res.target
                 })
        }
    });

</script>
<style>
</style>

This outer Hero template is used in a list iterator:

<template id="card-list">
    <table>
        Card list
       <div id="">
           <div v-for="card in cards" class="entry">
               <Hero :hero-id="card.hero.id" :key="card.hero.id"/>
           </div>
       </div>

    </table>

</template>
<script>
    Vue.component("card-list", {
        template: "#card-list",
        data: () => ({
            cards: [],
        }),
        created() {
            fetch("/api/cards")
                .then(res => res.json())
                .then(res => {
                    this.cards = res.heroes
                 })
                .catch((e) => alert("Error while fetching cards: "+e));
        }
    });

</script>
<style>
</style>

However, when I render the card list, it only produces the list of the first td in hvp template:

When I comment out the call of hpv the page is rendered correctly with all the HTML code from Hero template.

I tried to figure out what step I left out, but can't find the clue. One last info: I used JavalinVue to support the server side, not nodejs-based Vue CLI. I don't know if it has any impact, but may be important.

UPDATE 1

After IVO GELOV spot the problem with multiple root tags, and because I can't move to Vue3, I tried to make it as a functional template, as he suggested. I removed the template and created the render function:

  var HeroValuePair =  {
        template: "#heroValuePair",
        functional: true,
        props: {
            label : String,
            c : Number,
            t : Number
        },
        render(createElement, context) {
            console.log("HVP: "+context.props.c+" "+context.props.t);
            if (typeof context.props.c === undefined) return createElement("td"  )
            else return [
                createElement("td", context.props.label  ),
                createElement("td", context.props.c  ),
                createElement("td", context.props.t  )
            ]
        }
    }

Although the console indicated the render is called correctly, the result is the same: there is neither the rendered nodes, nor the parent Hero component displayed. I tried to move into different file, tried the functional template format, but none worked.