title: Property or method "name" is not defined on the instance but referenced during render in vuejs?
body: <p>I am learning VueJS following a course in Udemy, and I have this code:</p>
  
  <p></p>
  
  <pre><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"&gt;
      &lt;script src="https://kit.fontawesome.com/968b5b8bf4.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-12 col-md-6"&gt;
                      &lt;div class="card"&gt;
                          &lt;div class="card-header"&gt;Nuevo Usuario&lt;/div&gt;
                          &lt;div class="card-body"&gt;
                              &lt;form&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="name" &gt;Nombre Completo&lt;/label&gt;
                                      &lt;input v-model="name" type="text" class="form-control" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="email"&gt;Correo Electrónico&lt;/label&gt;
                                      &lt;input v-model="email" type="email" class="form-control" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="password"&gt;Contraseña&lt;/label&gt;
                                      &lt;input v-model="password" type="password" class="form-control" /&gt;
                                  &lt;/div&gt;
                                  &lt;button @click.prevent="addUser" class="btn btn-primary btn-block"&gt;Ingresar Usuario&lt;/button&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-12 col-md-6"&gt;
                      &lt;div class="card"&gt;
                          &lt;div class="card-header"&gt;Actualizar Usuario&lt;/div&gt;
                          &lt;div class="card-body"&gt;
                              &lt;form&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="name"&gt;Nombre Completo&lt;/label&gt;
                                      &lt;input type="text" class="form-control" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="email"&gt;Correo Electrónico&lt;/label&gt;
                                      &lt;inputt type="email" class="form-control" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="password"&gt;Contraseña&lt;/label&gt;
                                      &lt;input type="password" class="form-control" /&gt;
                                  &lt;/div&gt;
                                  &lt;button @click.prevent="modifyUser" class="btn btn-primary btn-block"&gt;Guardar Cambios&lt;/button&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-12 mt-3"&gt;
                      &lt;table class="table table-bordered table-striped"&gt;
                          &lt;thead class="text-center"&gt;
                              &lt;th&gt;#&lt;/th&gt;
                              &lt;th&gt;Nombre Completo&lt;/th&gt;
                              &lt;th&gt;Correo Electrónico&lt;/th&gt;
                              &lt;th&gt;Acciones&lt;/th&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              &lt;tr class="text-center" v-for="(user, index) in users"&gt;
                                  &lt;td&gt;{{ index + 1 }}&lt;/td&gt;
                                  &lt;td&gt;{{ user.name }}&lt;/td&gt;
                                  &lt;td&gt;{{ user.email }}&lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;button class="btn btn-success btn-sm"&gt;
                                          &lt;i class="fas fa-edit"&gt;&lt;/i&gt;
                                      &lt;/button&gt;
                                      &lt;button class="btn btn-danger btn-sm"&gt;
                                          &lt;i class="fas fa-trash-alt"&gt;&lt;/i&gt;
                                      &lt;/button&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and then, my VueJS code:</p>
  
  <pre><code>new Vue({
      el: '#app',
      data: {
          newUser: {
              name: '',
              email: '',
              password: '',
          },
          users: [],
      },
      methods: {
          addUser () {
              var nuevo = {}
              nuevo.name = this.newUser.name
              nuevo.email = this.newUser.email
              nuevo.password = this.newUser.password
              this.users.push(nuevo)
              this.newUser.name = ''
              this.newUser.email = ''
              this.newUser.password = ''
          },
      },
  })
  </code></pre>
  
  <p>As you can see, I am creating a variable to save the data obtained by a form and send it to an array. Then use the v-for to iterate on each of them and have them displayed in a table. But I am getting this error: </p>
  
  <blockquote>
    <p>vue.js:634 [Vue warn]: Property or method "name" 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.</p>
  </blockquote>