Ask the seniors for advice on the nesting of tags in the vue component template

beginner vue, nesting tags in template encounters a problem and asks seniors for advice on the cause of the problem!
if the div tag in this code is changed to two p tags nested in the p tag, it will not be rendered. After looking it up on the Internet, we can"t find the specific reason

    <template id="t3">
        <div>{{nameMessage}}
            <p v-bind:class="{style3: style3_flg}">{{ageMessage}}
                <p v-bind:style="style3">{{sexmessage}}
            
        </div>
    </template>

here is the whole code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue "></script>
    <style>
        .style3 {
            color: hotpink;
        }
    </style>
</head>

<body>
    <div id="app3">
        <child v-bind:name-message="name1" v-bind:age-message="age1" v-bind:sexmessage="sex1"></child>
        <child v-bind:name-message="name2" v-bind:age-message="age2" v-bind:sexmessage="sex2"></child>
        <child v-bind:name-message="name3" v-bind:age-message="age3" v-bind:sexmessage="sex3"></child>
    </div>
    <template id="t3">
        {{nameMessage}}
            <p v-bind:class="{style3: style3_flg}">{{ageMessage}}
                <p v-bind:style="style3">{{sexmessage}}
            
        
    </template>
    <script>
        new Vue({
            el: "-sharpapp3",
            data: {
                name1: "",
                name2: "",
                name3: "",
                age1: "21",
                age2: "22",
                age3: "23",
                sex1: "",
                sex2: "",
                sex3: "",
            },
            components: {
                "child": {
                    template: "-sharpt3",
                    props: ["nameMessage", "ageMessage", "sexmessage"],
                    data: function () {
                        return {
                            style3_flg: true,
                            style3: {
                                color: "darkmagenta"
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>