title: Conditional rendering template on Vue?
body: <p>I have a simple situation that I want to render cart-badge based on window width value but it always show the last one even though windowWidth does change the value. Please advise me what to do ! </p>
  
  <pre><code>    &lt;template v-if="windowWidth&gt;=1024"&gt;
                          &lt;div class="nav-user-account"&gt; {{windowWidth}}      
                              &lt;div class="nav-cart nav-cart-box"&gt;                                
                                  &lt;a href="/cart" rel="nofollow"&gt;&lt;span class="text hidden-sm"&gt;Cart&lt;/span&gt;&lt;/a&gt;
                                  &lt;span class="cart-number" id="nav-cart-num"&gt;{{cartItemCount}}&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/template&gt;
      &lt;template v-if="windowWidth&lt;1024"&gt;
                          &lt;a href="#" style="color:#ff6a00" class="icon-cart"&gt;
  {{windowWidth}} 
                              &lt;i class="fa fa-shopping-cart fa-2x" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;span class="cart-num"&gt;2&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/template&gt;
                      &lt;script&gt;
                          import { mapGetters } from 'vuex'
                          export default {
                              data() {
                                  return {
                                      windowWidth: window.innerWidth,
  
                                  }
                              },
                              computed: {
                                  ...mapGetters('cart', {
                                      cartItemCount: 'getShoppingCartItemsCount'
                                  })
                              },
  
                              mounted() {
                                  this.$nextTick(() =&gt; {
                                      window.addEventListener('resize', () =&gt; {
                                          this.windowWidth= window.innerWidth
                                      });
                                  })
                              },
                          }
                      &lt;/script&gt;
  </code></pre>
  
  <p>UPDATED: as Tony19 pointed out, i need a master template outside of these 2 template.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
  &lt;template v-if="windowWidth&gt;=1024"&gt;...&lt;/template&gt;
  &lt;template v-else&gt;&lt;/template&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>