title: Property or method "value" is not defined on the instance in vue js 2 nested component
body: <p>I wrote a basic vue js 2 basic example to test nested components. </p>
  
  <p>Below is components and template structure. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    Vue.component('form-com', {
          template: '#form',
          props: ['value'],
          methods: {
              onInput: function (event) {
                  this.$emit('input', event.target.value);
              }
          }
      });
  
      Vue.component('message-com', {
          template: '#message',
          data: function () {
              return {
                  msg: 'Hello'
              }
          },
          props: ['user']
      });
  
      Vue.component('welcome-com', {
          template: '#welcome',
          data: function () {
              return {
                  user: 'ahmad'
              }
          }
      });
  
      new Vue({
          el: '#container'
      })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"&gt;&lt;/script&gt;
  
  &lt;!--Form Template--&gt;
  &lt;template id="form"&gt;
      &lt;div&gt;
          &lt;div class="form-control"&gt;
              &lt;label&gt;Enter Your Name:&lt;/label&gt;
              &lt;input type="text" v-bind:value="value" :input="onInput"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;!--Hello Message Template--&gt;
  &lt;template id="message"&gt;
      &lt;div&gt;
          &lt;h3&gt;{{msg}} {{user}}&lt;/h3&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;template id="welcome"&gt;
      &lt;div&gt;
          &lt;form-com :value="value"&gt;&lt;/form-com&gt;
          &lt;br&gt;
          &lt;message-com :user="user"&gt;&lt;/message-com&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;div id="container"&gt;
      &lt;welcome-com&gt;&lt;/welcome-com&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But when run app in browser this error is shown:</p>
  
  <pre><code>[Vue warn]: Property or method "value" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
  
  found in
  
  ---&gt; &lt;WelcomeCom&gt;
         &lt;Root&gt;
  </code></pre>
  
  <p>what is problem?</p>
  
  <p>Update: </p>
  
  <p>I just Rewrite <a href="https://jsfiddle.net/chudaol/1mzzo8yn/" rel="nofollow noreferrer">this Fiddle</a> from one of chapters of <a href="https://www.packtpub.com/web-development/learning-vuejs-2" rel="nofollow noreferrer">Learning Vue.js 2</a>. I just rename some parameters and component and templates names. but when I copy main fiddle to my code all things worked.</p>