title: Variable is not defined - VueJS
body: <p>I would like to ask, on why the variable <code>title</code> is getting an undefined error even though there's a value on it. Here's my code so far:</p>
  
  <pre><code>   &lt;div class="echelon-main-container" id="test-app"&gt;
          &lt;test-empower&gt;&lt;/test-empower&gt;
          &lt;script type="x-template" id="test-empower"&gt;
              &lt;section class="test-empower" id="test-empower"&gt;
                  &lt;h2 class="header-title"&gt;{{ title }}&lt;/h2&gt;
                  &lt;h2 class="header-subtitle"&gt;{{ description }}&lt;/h2&gt;
              &lt;/section&gt;
          &lt;/script&gt;
      &lt;/div&gt;
  
  Vue.component('echelon-empower', {
      template: '#echelon-empower',
      data: function() {
          return {
              title: "AT ECHELON",
              description: "Empowering Entrepreneurs to build and grow their companies since 2009"
          }
      }
  });
  
  Vue.component('echelon-about', {
      template: '#echelon-about'
  });
  
  Vue.component('echelon-who-attends',{
      template: '#echelon-who-attends'
  });
  
  Vue.component('echelon-highlights', {
      template: '#echelon-highlights'
  });
  
  new Vue({
      el: "#echelon-app"
  });
  </code></pre>