title: Vuejs Property or method is not defined on the instance but referenced during render
body: <p>I'm new in VueJS and I am trying to create a custom form component. </p>
  
  <p>I am using <a href="http://element.eleme.io" rel="nofollow noreferrer">http://element.eleme.io</a> elements. So I created a new Form.vue file</p>
  
  <pre><code>&lt;template&gt;
      &lt;el-form :model="data"&gt;
          &lt;slot&gt;&lt;/slot&gt;
      &lt;/el-form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import { FormItem, Input } from 'element-ui';
    export default {
      name: 'general-form',
      components: {
          FormItem,
          Input
      },
      props: ['data'],
      mounted: function() {
          console.log(this.data);
      }
    }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my app.js</p>
  
  <pre><code>// Element.io
  import { Form, FormItem, Input } from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  
  // Custom
  import GeneralForm from '../../components/presentational-subsystem/form/Form.vue';
  
  Vue.use(Form);
  Vue.use(FormItem);
  Vue.use(Input);
  
  Vue.config.devtools = true;
  
  var contactsPage = new Vue({
    el: '#contacts-page',
    components:  {
      GeneralForm
    }
  });
  </code></pre>
  
  <p>And here is my view:</p>
  
  <pre><code>&lt;div id="contacts-page"&gt;
  
  &lt;general-form id="contacts-form" :data="{subject: 'abc'}" action="/contacts" method="post"&gt;
    &lt;el-form-item label="Subject" prop="subject"&gt;
      &lt;el-input v-model="data.subject"&gt;&lt;/el-input&gt;
    &lt;/el-form-item&gt;       
  &lt;/general-form&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>But I get this error in the console:</p>
  
  <p>[Vue warn]: Property or method "formData" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.</p>
  
  <p>I know that if I change Vue object to this:</p>
  
  <pre><code>var contactsPage = new Vue({
    el: '#contacts-page',
    data: { formData: {} }
    components:  {
      GeneralForm
    }
  });
  </code></pre>
  
  <p>the error disappears, but then form is not reactive any more. I tried to follow this example:</p>
  
  <p><a href="http://element.eleme.io/#/en-US/component/form" rel="nofollow noreferrer">http://element.eleme.io/#/en-US/component/form</a></p>
  
  <p>and my markup is actually the same, but when I use Vue dev tools, I can see that my formData variable inside my Form.vue component is different from the shared formData variable in my Vue instance.</p>
  
  <p>My question would be how can I make <code>&lt;el&gt;</code> elements use formData from my Form component that I created?</p>