Vue.js component is not showing visually on the page

Question

I have the following Vue component called TeamCard:

<template>
    <div class="m-8 max-w-sm rounded overflow-hidden shadow-lg">
        <!-- removed fro brevety -->
        div class="text-gray-900 font-bold text-xl mb-2">{{ name }}</div>
            <p class="text-gray-700 text-base"> {{ description }} </p>
            <!-- removed fro brevety -->
        </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>

I call the component in an HTML page (Spring boot template) the following way:

<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>

When I go to the page in the browser that has the second snippet, nothing is shown. There are no errors in the console. What am I doing wrong? How can I make the component be shown?

Answer 1

I've never seen Vue used this way but it looks like there is no mounting element for the app. Try this:

<div id="app">
   <team-card v-bind:name="'Hawks'" v-bind:description="'Best team'"></team-card>
</div>

and

(function() {
  new Vue({
    el: '#app',
    components: {
      teamCard: TeamCard
    }
  })
})();