Variable is not defined - VueJS

Question

I would like to ask, on why the variable title is getting an undefined error even though there's a value on it. Here's my code so far:

   <div class="echelon-main-container" id="test-app">
        <test-empower></test-empower>
        <script type="x-template" id="test-empower">
            <section class="test-empower" id="test-empower">
                <h2 class="header-title">{{ title }}</h2>
                <h2 class="header-subtitle">{{ description }}</h2>
            </section>
        </script>
    </div>

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"
});

Answer 1

1. The below html which has an id of #test-app derives its vue-instance properties from the new Vue(...) part of the code. Which really doesn't have title and hence the error.

   <div class="echelon-main-container" id="test-app">
       <test-empower></test-empower>
       <script type="x-template" id="test-empower">
           <section class="test-empower" id="test-empower">
               <h2 class="header-title">{{ title }}</h2>
               <h2 class="header-subtitle">{{ description }}</h2>
           </section>
       </script>
   </div>
   

2. The el property in the new Vue(...) specifies the mount point for the new Vue() instance you are creating.

3. In the Vue.component(...):

   Vue.component('test-empower', {
     template: '#test-empower'
   });
   

   #test-empower is not the mount point as you are expecting. It is the template this component must use when <test-empower> is used in your application.

---

As per the edit, you need to separate out your templates to resolve your need of having separate properties like in this fiddle.