title: [Vue warn]: Property or method "task" is not defined on the instance but referenced during render
body: <p>I work with Laravel 5.5, Vue 2 and use Laravel-mix, i tried to render a list on input elements using Vue, but when i try this, the console return </p>
  
  <p><strong>[Vue warn]: Property or method "task" is not defined on the instance but referenced during render</strong></p>
  
  <p>This is my template, like a loop:</p>
  
  <pre><code>&lt;template v-for="task in tasks"&gt;
      &lt;div class="input-group mb-1"&gt;
          &lt;div class="input-group-prepend"&gt;
              &lt;div class="input-group-text bg-white cursor-pointer checkbox"&gt;
                  &lt;span class="mdi mdi-crop-square"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;input type="text" :id="task.id_task" class="form-control bg-white cursor-pointer task-clk" :value="task.name" @click="showTask"
              readonly&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>So, this is my Vue component</p>
  
  <pre><code>&lt;script&gt;
      function Task({id_task, name, status}) {
          this.id_task = id_task;
          this.name = name;
          this.status = status;
      }
  
      export default {
          data() {
              return {
                  tasks: []
              }
          },
          props: ['idList, id_task, name, status'],
          created() {
              this.getTasks();
          },
          methods: {
              getTasks() {
                  window.axios.get('/api/get-tasks-by-list/' + this.idList).then(({data}) =&gt; {
                      data.tasks.forEach(task =&gt; {
                          this.tasks.push(new Task(task));
                      });
                  });
              },
              showTask(ev) {
                  var id = ev.currentTarget.id;
                  console.log(id);
              }
          },
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I really dont understand why this error.</p>