Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для класса

Question

Я получаю сообщение об ошибке «Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для класса» в vuejs.

Я создал приложение laravel и хотел, чтобы управление пользователями работало вв реальном времени, поэтому я применил vuejs с корневым шаблоном Users.vue.Кроме того, я создал отдельный компонент AddUserModal для модального всплывающего окна и использовал его в корневом шаблоне, так как всплывающее окно отображается правильно и хорошо отображается в браузере.Проблема началась, когда я попытался выполнить привязку модели, и для этого я использую vform для проверки на стороне сервера.После объявления данных в Users.vue (root) я перешел к AddUserModal, чтобы настроить форму с помощью v-модели, но это возвращает ошибку.Код ниже

Это скрипт из 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
vue
window.Vue = require('vue');

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

//vue Router
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/AddUserModal.vue'));
const app = new Vue({
el: '#app',
router
});

Когда я помещал сценарии в AddUserModal, привязка модели работает нормально, но выдает ошибку при помещении в Users.vue

Это вывод консоли браузера

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.