title: How can I call component each clicking different tabs ? (vue.js 2)
body: <p>My view is like this :</p>
  
  <pre><code>&lt;div class="row no-gutter"&gt;
      &lt;div class="col-md-9 col-xs-12"&gt;
          &lt;div class="wrap-tabs"&gt;
              &lt;ul class="nav nav-tabs nav-cat"&gt;
                  &lt;li role="presentation" class="active"&gt;&lt;a href="#" data-toggle="tab"&gt;England&lt;/a&gt;&lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a href="#" data-toggle="tab"&gt;Spain&lt;/a&gt;&lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a href="#" data-toggle="tab"&gt;Italy&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class="tab-content"&gt;
      &lt;div role="tabpanel" class="tab-pane active"&gt;
          &lt;top-player-view country_id="1"&gt;&lt;/top-player-view&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My component top player view is like this :</p>
  
  <pre><code>&lt;template&gt;    
      ...
  &lt;/template&gt;
  
  &lt;script&gt;
      export default{
          props:['country_id'],
          created() {
              this.$store.dispatch('getTopPlayers', this.country_id)
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>For example, when I click spain tab, it will call component top-player-view with country_id = 2 like this </p>
  
  <pre><code>&lt;top-player-view country_id="2"&gt;&lt;/top-player-view&gt;
  </code></pre>
  
  <p>When I click italy tab, it will call component top-player-view with country_id = 3 like this </p>
  
  <pre><code>&lt;top-player-view country_id="3"&gt;&lt;/top-player-view&gt;
  </code></pre>
  
  <p>Whether the component data is loaded by ajax per tab selected? Or how?</p>
  
  <p>Please help</p>