Make sure that this property is reactive, either in the data option, or for class

I am getting the error "Make sure that this property is reactive, either in the data option, or for class" in vuejs.

I created a laravel application and wanted to make the user management work in real-time so I deplyed vuejs with the root template being Users.vue. Additionally I created a separate component called AddUserModal for the modal popup and used it the root template as The popup displays correctly and rendered well in the browser. The problem started when I tried to do model binding and for that, am using vform for the server side validation. The code is below

This is the script from Users.vue

<script>
export default {
    data() {
      return {
        form : new Form({
          name        : '',
          email       : '',
          role        : '',
          description : '',
          password    : ''

        })
      }
    },
    mounted() {
        console.log('Component mounted.')
    }
}

AddUserModal

<div class="container">
   <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <form>
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addUserModalLabel">Add User</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                     <div class="form-group">
                        <input v-model="form.name" type="text" name="name"
                            class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
                        <has-error :form="form" field="name"></has-error>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal"><i class="fas fa-times-circle"></i></button>
                    <button type="button" class="btn btn-sm btn-success"><i class="fas fa-save"></i></button>
                </div>
            </div>
        </form>
      </div>
    </div>
</div>

app.js

require('./bootstrap');
vue
window.Vue = require('vue');

imports
import VueRouter from 'vue-router'
import { Form, HasError, AlertError } from 'vform'

vue router
Vue.use(VueRouter)

Vform
window.Form = Form
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

let routes = [
{ path: '/users', component: require('./components/Users.vue')}
]
const router = new VueRouter({
mode: 'history',
routes 
})

Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app',
router
});

When I placed the scripts in AddUserModal, the model binding works fine but throws up an error when placed in the Users.vue

This is the browser console output

app.js:37116 [Vue warn]: Property or method "form" 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: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

via Chebli Mohamed