title: Nativescript-vue TabView unable to render first item coming from API
body: <p><strong>Situation:</strong></p>
  <p>Im working on nativescript-vue app where im using <code>TabView</code> Items to create tabs. The title for tab and the information inside the tab is being for looped from <code>JSON</code> data file.</p>
  <p><strong>Problem:</strong></p>
  <p>The first tabviewitem doesnt render any information. Inorder to see the data, i have to click on other tabs first go back to first tab. After that, i can see the items</p>
  <p>The markup i have to create tab using <code>nativescript-vue</code>:</p>
  <pre><code>&lt;TabView 
      android:tabBackgroundColor=&quot;#ffffff&quot;
      android:tabTextColor=&quot;#ffa801&quot;
      android:selectedTabTextColor=&quot;#f53b57&quot;
      androidSelectedTabHighlightColor=&quot;#ffffff&quot;
      androidTabsPosition=&quot;Bottom&quot;&gt; 
      &lt;TabViewItem v-for=&quot;subcategory in subcategories&quot;  :title=&quot;subcategory.name&quot; &gt;
          
              &lt;FlexboxLayout&gt;
              &lt;Label :text=&quot;subcategory.name&quot; /&gt;
  
          &lt;/FlexboxLayout&gt;
      &lt;/TabViewItem&gt;
  &lt;/TabView&gt; 
  </code></pre>
  <p><strong>Subcategories</strong> is <code>JSON</code> array coming from API with following structure.</p>
  <pre><code>[
      {
          &quot;id&quot;: 3,
          &quot;category_id&quot;: 1,
          &quot;name&quot;: &quot;Vegetarian&quot;,
          &quot;ar_name&quot;: null,
          &quot;description&quot;: &quot;Vegetarian&quot;,
          &quot;ar_description&quot;: null,
          &quot;image&quot;: null,
          &quot;created_at&quot;: &quot;2020-03-04 04:12:13&quot;,
          &quot;updated_at&quot;: &quot;2020-03-04 04:12:13&quot;,
          &quot;items&quot;: [
              {
                  &quot;id&quot;: 6,
                  &quot;subcategory_id&quot;: 3,
                  &quot;name&quot;: &quot;Salad&quot;,
                  &quot;ar_name&quot;: null,
                  &quot;description&quot;: &quot;test&quot;,
                  &quot;ar_description&quot;: null,
                  &quot;price&quot;: &quot;100&quot;,
                  &quot;status&quot;: &quot;1&quot;,
                  &quot;ar_price&quot;: null,
                  &quot;discount&quot;: null,
                  &quot;discount_colour&quot;: null,
                  &quot;created_at&quot;: &quot;2020-05-07 05:32:17&quot;,
                  &quot;updated_at&quot;: &quot;2020-05-07 05:32:17&quot;
              }
          ]
      },
      {
          &quot;id&quot;: 2,
          &quot;category_id&quot;: 1,
          &quot;name&quot;: &quot;Sea Food&quot;,
          &quot;ar_name&quot;: null,
          &quot;description&quot;: &quot;sea food&quot;,
          &quot;ar_description&quot;: null,
          &quot;image&quot;: null,
          &quot;created_at&quot;: &quot;2020-03-04 04:11:38&quot;,
          &quot;updated_at&quot;: &quot;2020-03-04 04:11:38&quot;,
          &quot;items&quot;: [
              {
                  &quot;id&quot;: 4,
                  &quot;subcategory_id&quot;: 2,
                  &quot;name&quot;: &quot;some item&quot;,
                  &quot;ar_name&quot;: null,
                  &quot;description&quot;: &quot;desc&quot;,
                  &quot;ar_description&quot;: null,
                  &quot;price&quot;: &quot;100&quot;,
                  &quot;status&quot;: &quot;1&quot;,
                  &quot;ar_price&quot;: null,
                  &quot;discount&quot;: null,
                  &quot;discount_colour&quot;: null,
                  &quot;created_at&quot;: &quot;2020-05-06 12:02:58&quot;,
                  &quot;updated_at&quot;: &quot;2020-05-06 12:02:58&quot;
              }
          ]
      }
  ]
  </code></pre>
  <p><strong>Solutions that i have tried</strong></p>
  <ol>
  <li><a href="https://github.com/nativescript-vue/nativescript-vue/issues/515" rel="nofollow noreferrer">https://github.com/nativescript-vue/nativescript-vue/issues/515</a></li>
  </ol>
  <p>but no luck</p>
  <p><strong>[Update] here is my script:</strong></p>
  <pre><code>            &lt;script &gt;
              import axios from 'axios';
              import Login from &quot;./Login&quot;;
              import FoodItems from &quot;./FoodItems&quot;
              import SubCategories from &quot;./parts/SubCategories&quot;
              import CategoryButtons from &quot;./parts/CategoryButtons&quot;
              import Popular from &quot;./parts/Popular&quot;
              
              // import Items from &quot;./Items&quot;
          export default {
              components: {SubCategories, CategoryButtons, Popular},
              props: ['parentCategory'],
              data() {
              return {
                  subcategories: [],
                  populars: [],
                  categories:this.$store.getters.getCategories,       
              }
              },
              mounted(){
  
  
                  axios({
                      method:&quot;GET&quot;,
                      &quot;url&quot;:this.$store.state.apiUrl+&quot;categories/&quot;+this.parentCategory.id+&quot;/subcategories&quot;,
                      headers:{
                          'Accept': 'application/json',
                      'Authorization': 'Bearer ' + this.$store.getters.getToken,
                      }
                  }).then(
                      response =&gt;
                      {    
                          // 
                          this.subcategories =response.data.fooditems;
                          this.populars = response.data.popularitems;
                          // console.log(response.data.popularitems);
                      }, error =&gt; {
                          console.error(error);
                      }
                  );
              },
              methods: {
                  
                      
                  
                  checkToken() {
                  
                      this.$store.commit(&quot;loadFromStorage&quot;);
                      if(!this.$store.getters.getToken) { this.$navigateTo(Login, { clearHistory: true })  }
                  },
  
                  goToShowCase(args) {
                      //   console.log(args);
                          this.$navigateTo(Showcase,    
                              { 
                              props: 
                              { parentCategory: args }
                              });           
                      }
  
  
              
  
                      
              }
          }
          &lt;/script&gt;
  </code></pre>
  <p><strong>Update 2:</strong></p>
  <p>I created a similar issue on nativescript playground.
  <a href="https://play.nativescript.org/?template=play-vue&amp;id=7mNLr7" rel="nofollow noreferrer">https://play.nativescript.org/?template=play-vue&amp;id=7mNLr7</a></p>
  <p>Thank you in advance!</p>