bugfix> spring-boot > 投稿

TeamCardと呼ばれる次のVueコンポーネントがあります。

<template>
    <div class="m-8 max-w-sm rounded overflow-hidden shadow-lg">
                ...
                <div class="text-gray-900 font-bold text-xl mb-2">{{ name }}</div>
                <p class="text-gray-700 text-base"> {{ description }} </p>
                 ...
        </div>
    </div>
</template>
<script>
    export default {
        name: "TeamCard",
        props: {
            name: {
                type: String,
                required: true,
            },
            description: {
                type: String,
                required: true,
            },
        }
    };
</script>
<style scoped>
    @import "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css";
</style>

HTMLページ(Springブートテンプレート)のコンポーネントを次のように呼び出します。

<teamCard v-bind:name="'Hawks'" v-bind:description="'Best team'" ></teamCard>
        <script src="https://unpkg.com/vue"></script>
        <script th:src="@{/TeamCard/TeamCard.umd.min.js}"></script>
        <script>
            (function() {
                new Vue({
                    components: {
                        teamCard: TeamCard
                    }
                })
            })();
        </script>

2番目のスニペットがあるブラウザーのページに移動すると、何も表示されません。コンソールにエラーはありません。私は何が間違っているのですか?コンポーネントを表示するにはどうすればよいですか?