Javascript 确保此属性在数据选项或类中是被动的

我在vuejs中遇到错误“确保此属性是被动的，无论是在数据选项中，还是在类中”

我创建了一个laravel应用程序，并希望使用户管理实时工作，因此我使用根模板Users.vue来解析vuejs。此外，我为模式弹出窗口创建了一个名为AddUserModal的单独组件，并在根模板中使用它，因为弹出窗口在浏览器中正确显示和渲染。问题是从我尝试进行模型绑定时开始的，为此，我使用vform进行服务器端验证。在Users.vue（root）中声明数据后，我继续添加UserModal以使用v-model设置表单，但这会返回一个错误。代码如下

这是Users.vue中的脚本

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

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

当我将脚本放在AddUserModal中时，模型绑定工作正常，但放在Users.vue中时会抛出一个错误

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

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

这是浏览器控制台输出

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.

---

您不应该也不应该需要函数调用来提供数据中某些内容的值。听起来你只需要将新的Form（）放入一个计算属性中就可以了？请你解释一下，你不应该也不应该需要函数调用来提供数据中某些内容的值。听起来你只需要把新的Form（）放到一个计算属性中，然后就可以了？请你再解释一下好吗

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.