title: load data in table vueJS
body: <p>I have a probem to load data from database into my table created im vueJS. i have created my component table and my script in app.js, but in view i can see this error:</p>
  <pre><code>    [Vue warn]: Property or method &quot;datosUsuario&quot; 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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  
  found in
  
  ---&gt; &lt;Formularioactualizacion&gt; at resources/js/components/datosUsuarios.vue
  </code></pre>
  <p>is problem to v-for that it not detect my array from script vue. i have checked my array for is empty, but not, he have data. Also i have a new route for load de data user and other for load the view and all it´s ok, but i can´t load de data into de table. I attached my actual code.</p>
  <p><strong>app.js</strong></p>
  <pre><code> require('./bootstrap');
  
  window.Vue = require('vue');
  
  
  Vue.component('usuarios-component', require('./components/usuariosComponent.vue').default);
  Vue.component('formularioactualizacion', require('./components/datosUsuarios.vue').default);
  
  
  // inicio de VUE
  
  const app = new Vue({
      el: '#contenedorVue',
      created: function(){
          this.cargar();
      },
      data: {
          datosUsuario: [],
      },
      methods: {
          cargar: function(){
              let url = '/getDatosPersonales';
              axios.get(url).then((response) =&gt; {
                  this.datosUsuario = response.data;
              
              }).catch((error) =&gt; console.error(error));             
  
          },
          enviar(){
              let url = '/actualizarDatos';
              axios.post(url, {
                  id: this.id,
                  nombreUsuario: this.nombreUsuario,
                  email: this.email,
                  password: this.password,
                  direccion: this.direccion
              }).then(function(response){
                  this.arrayTasks = response.data;
              }).catch(function(error){
                  console.log(error);
              })
          }
      }
  });
  </code></pre>
  <p><strong>Component</strong></p>
  <pre><code>    &lt;template&gt;
      &lt;div class=&quot;tabla-usuarios&quot;&gt;
          &lt;table class=&quot;table table-hover table-striped&quot;&gt;
              &lt;thead&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;NOMBRE&lt;/th&gt;
                  &lt;th&gt;EMAIL&lt;/th&gt;
                  &lt;th&gt;DIRECCIÓN&lt;/th&gt;
                  &lt;th&gt;CONTRASEÑA&lt;/th&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr v-for=&quot;usuario in datosUsuario&quot; :key=&quot;usuario.id&quot;&gt;
                      &lt;td&gt;{{ usuario.id }}&lt;/td&gt;
                      &lt;td&gt;{{ usuario.nombre }}&lt;/td&gt;
                      &lt;td&gt;{{ usuario.email }}&lt;/td&gt;
                      &lt;td&gt;{{ usuario.direccion }}&lt;/td&gt;
                      &lt;td&gt;{{ usuario.password }}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data() {
          return {
              datosUsuario: [],
          };
      },
      created: function () {
          this.cargar();
      },
      methods: {
          cargar: function () {
              let url = &quot;/getDatosPersonales&quot;;
              axios
                  .get(url)
                  .then((response) =&gt; {
                      this.datosUsuario = response.data;
                      console.log(this.datosUsuario);
                  })
                  .catch((error) =&gt; console.error(error));
          },
      },
  };
  &lt;/script&gt;
  </code></pre>
  <p>my problem is in component in this v-for... i´m new in vueJS, i´m traying initiate in this frameworks.</p>
  <p>Thanks so much for help</p>
  <p><strong>EDIT</strong></p>
  <pre><code>    [Vue warn]: The &quot;data&quot; option should be a function that returns a per-instance value in component definitions.
  warn @ app.js:38441
  ./node_modules/vue/dist/vue.common.dev.js.strats.data @ app.js:39068
  mergeField @ app.js:39372
  mergeOptions @ app.js:39367
  Vue.extend @ app.js:42959
  Vue.&lt;computed&gt; @ app.js:43037
  ./resources/js/app.js @ app.js:49878
  __webpack_require__ @ app.js:20
  0 @ app.js:50103
  __webpack_require__ @ app.js:20
  (anonymous) @ app.js:84
  (anonymous) @ app.js:87
  app.js:38441 [Vue warn]: Property or method &quot;datosUsuario&quot; 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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  
  found in
  
  ---&gt; &lt;Formularioactualizacion&gt; at resources/js/components/datosUsuarios.vue
         &lt;Root&gt;
  </code></pre>