title: Cannot set reactive property on undefined, null, or primitive value bootstrap Vue modal
body: <p>please I need help with this error, app.js:108639 [Vue warn]: Cannot set reactive property on undefined, null, or primitive value: .</p>
  <p>I'm working with bootstsrap vue modal and having this error. Here is my code snippet below</p>
  <p>Firstly here is my template snippet</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;card-tools&quot;&gt;
      
    &lt;b-button class=&quot;btn btn-success&quot; v-b-modal.modal-prevent-closing&gt;
      Add Staff
      &lt;i class=&quot;fas fa-user-plus fa-fw&quot;&gt;&lt;/i&gt;
    &lt;/b-button&gt;
  
    &lt;b-modal
      id=&quot;modal-prevent-closing&quot;
      ref=&quot;modal&quot;
      title=&quot;Enter Staff Info&quot;
      @show=&quot;resetModal&quot;
      @hidden=&quot;resetModal&quot;
      @ok=&quot;handleOk&quot;
    &gt;
      &lt;form ref=&quot;form&quot; @submit.stop.prevent=&quot;handleSubmit&quot;&gt;
        &lt;b-form-group
          label=&quot;Name&quot;
          label-for=&quot;name-input&quot;
          invalid-feedback=&quot;Name is required&quot;
          :state=&quot;nameState&quot;
        &gt;
          &lt;b-form-input
            id=&quot;name-input&quot;
            v-model=&quot;info.name&quot;
            :state=&quot;nameState&quot;
            required
          &gt;&lt;/b-form-input&gt;
        &lt;/b-form-group&gt;
        &lt;b-form-group
          label=&quot;Email&quot;
          label-for=&quot;email-input&quot;
          invalid-feedback=&quot;Email is required&quot;
          :state=&quot;emailState&quot;
        &gt;
          &lt;b-form-input
            id=&quot;email-input&quot;
            v-model=&quot;info.email&quot;
            :state=&quot;emailState&quot;
            required
          &gt;&lt;/b-form-input&gt;
        &lt;/b-form-group&gt;
        &lt;b-form-group
          label=&quot;Phone&quot;
          label-for=&quot;phone-input&quot;
          invalid-feedback=&quot;Phone is required&quot;
          :state=&quot;phoneState&quot;
        &gt;
          &lt;b-form-input
            id=&quot;phone-input&quot;
            v-model=&quot;info.phone&quot;
            :state=&quot;phoneState&quot;
            required
          &gt;&lt;/b-form-input&gt;
        &lt;/b-form-group&gt;
        &lt;b-form-group
          label=&quot;Job Title&quot;
          label-for=&quot;job_title-input&quot;
          invalid-feedback=&quot;Job title is required&quot;
          :state=&quot;phoneState&quot;
        &gt;
          &lt;b-form-input
            id=&quot;phone-input&quot;
            v-model=&quot;info.job_title&quot;
            :state=&quot;job_titleState&quot;
            required
          &gt;&lt;/b-form-input&gt;
        &lt;/b-form-group&gt;
        
      &lt;/form&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  <p>Now here is my script</p>
  <pre class="lang-js prettyprint-override"><code>import { BButton, BModal, VBModal } from &quot;bootstrap-vue&quot;;
  
  export default {
      
      components: {
          BButton,
          BModal
      },
      
      directives: { 
          'b-modal': VBModal 
      },
      
      data() {
          return {
              staffs: {},
              nameState: null,
              emailState: null,
              phoneState: null,
              job_titleState: null,
              
              info: {
                  name: '',
                  email: '',
                  phone: '',
                  job_title: ''
              },
              
              showModal: false
          }
      },
  
      methods: {
          getStaffs() {
              axios.get(&quot;api/user&quot;).then(({data }) =&gt; (this.staffs = data));
          },
          // createStaff () {
          // this.form.post('api/user')
          //     .then(({ data }) =&gt; { console.log(data) })
          // },
          checkFormValidity() {
              const valid = this.$refs.form.checkValidity()
              this.nameState = valid
              return valid
          },
          resetModal() {
              this.info = ''
          },
          handleOk(bvModalEvt) {
              // Prevent modal from closing
              bvModalEvt.preventDefault()
              // Trigger submit handler
              this.handleSubmit()
          },
          handleSubmit() {
              // Exit when the form isn't valid
              if (!this.checkFormValidity()) {
                  // return 
                  console.log(this.info)
              }
              // Hide the modal manually
              this.$nextTick(() =&gt; {
                this.$bvModal.hide('modal-prevent-closing')
              })
          }
      },
      
      created() {
          this.getStaffs();
      },
      
      mounted() {
          console.log('Component mounted.')
      }
  
  };
  </code></pre>
  <p>I just wanted to be sure my code is correct before doing the validation.
  Thanks in advance</p>