Ссылка на элемент из другого компонента в Vue.js

Question

У меня есть флажок в моем Players.vue:

<div class="row">
   <div class="d-inline col-lg-6 col-md-6 col-sm-6">
      <b>Scholarship Player</b>
   </div>
   <div class="d-inline col-lg-6 col-md-6 col-sm-6"> {{ players.Scholarship }} 
      <input type="checkbox" id="checkbox" v-model="players.Scholarship"> </div>
</div>

Когда флажок установлен (true), тогда другойдолжна открыться вкладка.

Проблема в том, что, как я упоминаю players.Scholarship в моем другом классе PlayerTabs, похоже, что он не работает.Я получаю TypeError:

Cannot read property 'Scholarship' of undefined

Может кто-нибудь сказать мне, как я должен ссылаться на players.Scholarship (или сам мой if неверен)?(Я новичок в Vue.js)

<div v-if="Scholarship">
    <v-tab title="Scholarship">
      <app-timetables></app-timetables>
    </v-tab>
</div>
<div v-else>
</div>

Scholarship сам находится в массиве players в моем TeamInfos.vue классе:

playersData: function(data) {
  this.players = [];
  var $this = this;
  for (var i = 0; i < data.length; i++) {
    $this.players.push({
      ID: data[i].ID,
      PlayerID: data[i].NameId,
      Scholarship: data[i].Scholarship
      // others
    });
  } 
},