title: v-if not working on template
body: <p>So I am relatively new to learning Vue.js. I have gotten to understand most of it so far but I still have trouble with v-if never working. For example...</p>
  
  <p>I would expect these to not show because showProgress is false!</p>
  
  <pre><code>&lt;template v-if="showProgress"&gt;
    &lt;div id="progressCols" class="md-layout"&gt;
      &lt;div class="md-layout-item" :class="[{ activeStep: currentStep(1) }, '.md-elevation-1']"&gt;&lt;/div&gt;
      &lt;div class="md-layout-item" :class="[{ activeStep: currentStep(2) }, '.md-elevation-1']"&gt;&lt;/div&gt;
      &lt;div class="md-layout-item" :class="[{ activeStep: currentStep(3) }, '.md-elevation-1']"&gt;&lt;/div&gt;
      &lt;div class="md-layout-item" :class="[{ activeStep: currentStep(4) }, '.md-elevation-1']"&gt;&lt;/div&gt;
      &lt;div class="md-layout-item" :class="[{ activeStep: currentStep(5) }, '.md-elevation-1']"&gt;&lt;/div&gt;
      {{ showProgress }}
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'ProgressCols',
      data: function(){
        return {
          showProgress: false 
        }
      },
      methods: {
        currentStep(i){
          let n = 0;
          if (this.$route.params.name == "Ailments") {
            n =  1; 
          } else if (this.$route.params.name == "Effects") {
            n =  2; 
          }
  
          i &lt; n ? true : false
        }
      }
    }
  &lt;/script&gt;
  </code></pre>