Vue. js вкладки не показывают содержание класса

Question

Я использовал это, чтобы показать разные вкладки:

<vue-tabs>
  <v-tab title="Basic">
<app-players></app-players>
  </v-tab>
<v-tab title="History">
    <app-histories></app-histories>
  </v-tab>
  <v-tab title="Timetable">
    <app-timetables></app-timetables>
  </v-tab>
  <v-tab title="Goals (Physical)">
    <app-physicalgoals></app-physicalgoals>
  </v-tab>
  <v-tab title="Goals (Basketball)">
    <app-basketballgoals></app-basketballgoals>
  </v-tab>
  <v-tab title="Scholarship">
    <app-scholarship></app-scholarship>
  </v-tab>
</vue-tabs>

Для каждой вкладки у меня есть класс. Проблема заключается в том, что вкладки Цели (физические) и Цели (баскетбол) пусты. В моих BasketballGoals и PhysicalGoals классах у меня такое же содержание, как и в классе Scholarship.

Проблема заключается в строках <app-physicalgoals></app-physicalgoals> и <app-basketballgoals></app-basketballgoals>.

Если Вместо этого я использую <app-scholarship></app-scholarship>, он покажет содержимое класса Scholarship.

Я новичок в Vue, может кто-нибудь сказать мне, что делает <app-scholarship></app-scholarship> и что мне нужно изменить?

Это компонент PhysicalGoals:

<template>
  <div>
    <!-- Players Infos -->
    <div class="row">
      <div class="d-inline col-lg-20 col-md-60 col-sm-40" padding="20px">
        <div class="row">
          <div class="d-inline col-lg-12 col-md-60 col-sm-40" padding="0px">
            <b>Bitte Personalbogen, Vollmacht, Internatsvertrag, Krankenversicherung und Visum (falls notwendig) hochladen.</b>
          </div>
        </div>
        <div class="row">
          <div class="d-inline col-lg-6 col-md-6 col-sm-6">
            <b>Coverage</b>
          </div>
          <div class="d-inline col-lg-6 col-md-6 col-sm-6">{{ this.players.Coverage }}</div>
        </div>
        <div class="row">
          <div class="d-inline col-lg-6 col-md-6 col-sm-6">
            <b>Betrag monatlich in EUR</b>
          </div>
          <div class="d-inline col-lg-6 col-md-6 col-sm-6">
            <div>{{ this.players.Betrag }}</div>
          </div>
        </div>
        <div class="row">
          <div class="d-inline col-lg-6 col-md-6 col-sm-6">
            <b>Comment</b>
          </div>
          <div class="d-inline col-lg-6 col-md-6 col-sm-6">
            <div>{{ this.players.CommentScholar }}</div>
          </div>
        </div>
        <div class="row">
          <div class="d-inline col-lg-6 col-md-6 col-sm-6">
            <b>Anhang</b>
          </div>
          <div class="d-inline col-lg-6 col-md-6 col-sm-6">
            <button @click="myFunction()">Dokumentenbibliothek</button>
          </div>
        </div>
      </div>
    </div>
    <hr>
  </div>
</template>

<script>
    import * as $ from "jquery";
    import Parents from "./Details/Parents.vue";
    export default {
        components: {
            appParents: Parents
        },
        data: function() {
            return {
                players: [],
                parents: [],
                characters: [],
                selectedArrayIndex: "",
                team: [],
                showInfo: false,
            };
        },

        checked: function() {
            if (this.players.Scholarship == true){
                var SelectedPlayerID = this.$store.state.selectedPlayer.ID;
                var $this = this;
                this.$modal.show(
                    EditTimetable,
                    {
                        // text: SelectedPlayerID
                    },
                    {
                        draggable: true,
                        width: 400,
                        height: 450
                    },
                    {
                        closed: function(event) {
                            $this.$parent.loadEvents(SelectedPlayerID);
                        }
                    }
                );
            };
        },


        created: function() {
            this.team = this.$store.state.selectedTeam;
            var playerID = this.$store.state.selectedPlayer.ID;
            this.selectedPlayerInfo(playerID);

        },
        methods: {
            selectedPlayerInfo: function(playerID) {
                this.loadSelectedPlayer(playerID);
                this.loadParents(playerID);
            },

            myFunction: function () {
                window.open("https://mylink.com/sites/Playercard/Freigegebene%20Dokumente/Forms/AllItems.aspx", "_blank");
            },

            loadSelectedPlayer: function(SelectedPlayerID) {
                var data = this.$store.state.players;
                this.players = [];
                this.players = this.$store.state.selectedPlayer;
            },

            checkboxToggle: function() {
                // doSomething for later
            },

            loadParents: function(playerID) {
                // var baseUrl = "/DEV/BBUlm" + "/_api/web/lists/";
                var baseUrl = this.$store.state.baseUrl;
                var listName = "Parent";
                var select =
                    "$select=id,ParentName,Parent,Telephone,Email,Gerneralinfo,PlayerName/Name";
                var expand = "&$expand=PlayerName";
                var filter = "&$filter=PlayerNameId eq '" + playerID + "'";
                baseUrl +=
                    "GetByTitle('" + listName + "')/items?" + select + expand + filter; //+ select;
                var $this = this;
                $.ajax({
                    url: baseUrl,
                    type: "GET",
                    headers: {
                        Accept: "application/json;odata=verbose"
                    },
                    async: false,
                    success: function(data, textStatus, xhr) {
                        $this.parentsData(data);
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        alert("error:" + JSON.stringify(xhr));
                        $("#start" + "records").html(" [0]");
                    }
                });
            },
            parentsData: function(data) {
                this.parents = [];
                var $this = this;
                for (var i = 0; i < data.d.results.length; i++) {
                    $this.parents.push({
                        id: data.d.results[i].SelectedPlayerID,
                        ParentName: data.d.results[i].ParentName,
                        ParentType: data.d.results[i].Parent,
                        Telephone: data.d.results[i].Telephone,
                        Email: data.d.results[i].Email,
                        Generalinfo: data.d.results[i].Gerneralinfo,
                    });
                }
            }
        }
    };
</script>

<style>
</style>