title: Properties are not defined on the instance and referenced during render. Fix Issue
body: <p>The VUEJS is giving me the following error:</p>
  <blockquote>
  <p>vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method &quot;singupCollection&quot; 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. See: <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties</a>.</p>
  </blockquote>
  <p>found in</p>
  <pre><code> &lt;Signup&gt; at src/view/headerfroms/Signup.vue
     &lt;LandingRest&gt; at src/view/LandingRest.vue
       &lt;LandingPage&gt; at src/components/LandingPage.vue
         &lt;AppLayout&gt; at src/components/AppLayout.vue
           &lt;App&gt; at src/App.vue
             &lt;Root&gt;
  </code></pre>
  <p>AND MY CODE IS:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;signup&quot;&gt;
      &lt;div class=&quot;signup__inner&quot;&gt;
        &lt;form class=&quot;signup__form&quot; @submit=&quot;signup&quot;&gt;
          &lt;div class=&quot;signup--logo&quot;&gt;
            &lt;span class=&quot;highlight&quot;&gt;KILL&lt;/span&gt;TIME
          &lt;/div&gt;
          &lt;div class=&quot;signup__form__attr&quot;&gt;
            &lt;label class=&quot;signup__form__attr--label&quot;&gt;FULL NAME&lt;/label&gt;
            &lt;input class=&quot;signup__form__attr--input&quot; type=&quot;text&quot; v-model=&quot;this.singupCollection.name&quot; /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;signup__form__attr&quot;&gt;
            &lt;label class=&quot;signup__form__attr--label&quot;&gt;EMAIL&lt;/label&gt;
            &lt;input
              class=&quot;signup__form__attr--input&quot;
              type=&quot;email&quot;
              v-model=&quot;this.singupCollection.email&quot;
            /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;signup__form__attr&quot;&gt;
            &lt;label class=&quot;signup__form__attr--label&quot;&gt;DATE&lt;/label&gt;
            &lt;input class=&quot;signup__form__attr--input&quot; type=&quot;date&quot; v-model=&quot;this.singupCollection.dob&quot; /&gt;
          &lt;/div&gt;
          &lt;!-- &lt;div class=&quot;signup__form__attr&quot;&gt;
            &lt;div class=&quot;signup__form__multi&quot;&gt;
              &lt;div class=&quot;signup__form__multi__attr&quot; style=&quot;flex: 1; flex-grow: 1;&quot;&gt;
                &lt;label class=&quot;signup__form__attr--label&quot;&gt;DOB&lt;/label&gt;
                &lt;input class=&quot;signup__form__attr--input&quot; type=&quot;date&quot; /&gt;
              &lt;/div&gt;
              &lt;div class=&quot;signup__form__multi__attr&quot; style=&quot;flex: 1; flex-grow: 1;&quot;&gt;
                &lt;input id=&quot;select-profile&quot; class=&quot;signup__form__attr--input-file&quot; type=&quot;file&quot; /&gt;
                &lt;label for=&quot;select-profile&quot; class=&quot;signup__form__attr--label-file&quot;&gt;
                  &lt;span&gt;
                    &lt;img src=&quot;../../assets/photo.svg&quot; /&gt;
                  &lt;/span&gt;
                  &lt;span&gt;Profile Photo&lt;/span&gt;
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;--&gt;
          &lt;div class=&quot;signup__form__attr&quot;&gt;
            &lt;div class=&quot;signup__form__multi&quot;&gt;
              &lt;div class=&quot;signup__form__multi__attr&quot;&gt;
                &lt;label class=&quot;signup__form__attr--label&quot;&gt;GENDER&lt;/label&gt;
                &lt;input
                  class=&quot;signup__form__attr--input&quot;
                  type=&quot;text&quot;
                  v-model=&quot;this.singupCollection.gender&quot;
                /&gt;
              &lt;/div&gt;
              &lt;div class=&quot;signup__form__multi__attr&quot;&gt;
                &lt;label class=&quot;signup__form__attr--label&quot;&gt;LOCATION&lt;/label&gt;
                &lt;input
                  class=&quot;signup__form__attr--input&quot;
                  type=&quot;text&quot;
                  v-model=&quot;this.singupCollection.location&quot;
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;signup__form__attr&quot;&gt;
            &lt;label class=&quot;signup__form__attr--label&quot;&gt;PASSWORD&lt;/label&gt;
            &lt;input
              class=&quot;signup__form__attr--input&quot;
              type=&quot;password&quot;
              v-model=&quot;this.singupCollection.password&quot;
            /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;signup__form__attr&quot;&gt;
            &lt;button class=&quot;signup__form__attr--submit&quot;&gt;SIGN UP&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    date() {
      return {
        message: &quot;&quot;
      };
    },
    inject: [&quot;signupCollection&quot;],
    methods: {
      splitDOB() {
        const dob = this.dob;
        const [month, day, year] = dob.split(&quot;/&quot;);
        this.signupCollection.month = month;
        this.signupCollection.day = day;
        this.signupCollection.year = year;
      },
      signup() {
        this.splitDOB();
      }
    },
    created() {
      console.log(this.signupCollection);
    }
  };
  &lt;/script&gt;
  
  </code></pre>
  <p>As i am using the provide and injectors I have code in the grandparent component:</p>
  <pre><code>export default {
    components: {
      appLayout: AppLayout
    },
    data: function() {
      return {
        signupData: {
          name: &quot;&quot;,
          emal: &quot;&quot;,
          password: &quot;&quot;,
          gender: &quot;&quot;,
          location: &quot;&quot;,
          day: &quot;&quot;,
          month: &quot;&quot;,
          year: &quot;&quot;
        }
      };
    },
    provide() {
      return {
        signupCollection: this.signupData
      };
    }
  };
  &lt;/script&gt;
  </code></pre>