title: Blade and Javascript not rendering in HTML (Laravel 5+)
body: <p>I am new to Laravel and have been struggling on this project for a while now and as a summary I am simply creating a page that lists a list of 'tasks' (with their corresponding first names, last names, start/end dates and department). I am able to successfully edit them, and create new tasks. But for some reason whenever I try to delete, I can see that the data I want to be displayed when the confirmation window pops up isn't being rendered in the HTML file and thus not being displayed properly. </p>
  
  <p>~ Here is my .js file (which controls what modals are being shown and makes all the calls to my functions in my controller--back-end stuff etc...): </p>
  
  <pre><code>Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value"); //using 
  jQuery here for token
  
  new Vue({ //this is a new Vue object
  
  el: '#manage-vue', //everything after this applies in the el variable applies only to the class we defined as 'manage-vue'
  
  data: { //this is a variable
      tasks: [], //store tasks
      pagination: {
          total: 0,
          per_page: 2,
          from: 1,
          to: 0,
          current_page: 1
      },
      offset: 4,
      formErrors:{},
      formErrorsUpdate:{},
      newTask: {'name':'', 'last_name':'','start_date':'','end_date':'','department':''}, //correct ??
      fillTask: {'name':'','last_name':'','start_date':'','end_date':'','department':'','id':''}//correct ??
  },
  
  computed: { //this is a new variable
      isActived: function () { //verifies if a task is active for active class (so he can highlight the page we're on at the bottom)
          return this.pagination.current_page;
      },
  
      //calculating the number of pages we have
      pagesNumber: function () { 
          if (!this.pagination.to) {
              return [];
          }
          var from = this.pagination.current_page - this.offset;
  
          if (from &lt; 1) {
              from = 1;
          }
  
          var to = from + (this.offset*2);
          if (to &gt;= this.pagination.last_page) {
              to = this.pagination.last_page;
          }
          var pagesArray = [];
          while (from &lt;= to) {
              pagesArray.push(from); //array of all pages
              from++;
          }
          return pagesArray;
      }
  },
  
  ready : function() {
      this.getVueTasks(this.pagination.current_page);
  },
  
  methods: {
  
      getVueTasks: function(page) {
          this.$http.get('/vuetasks?page='+page).then((response) =&gt; {
              this.$set('tasks', response.data.data.data);
              this.$set('pagination', response.data.pagination);
          });
      },
  
      createTask: function() {
          var input = this.newTask;
          this.$http.post('/vuetasks',input).then((response) =&gt; { //calls the store function in controller
              this.changePage(this.pagination.current_page);
              this.newTask = {'name':'','last_name':'','start_date':'','end_date':'','department':''};
              $("#create-task").modal('hide');
              toastr.success('Item Created Successfully.', 'Success Alert', {timeOut: 5000});
          }, (response) =&gt; {
              this.formErrors = response.data;
          });
      },
  
      confirmDeletion: function(task) { //dont need the fields of a task
          this.fillTask.name = task.name;
          this.fillTask.id = task.id;
          $("#delete-task").modal('show'); //show a confirmation page for a deletion
      },
  
      deleteTask: function(task) {
          this.$http.delete('vuetasks/'+task.id).then((response) =&gt; {
              this.changePage(this.pagination.current_page);
              $("#delete-task").modal('hide'); //hide a confirmation page for a deletion
  
              toastr.success('Task Deleted Successfully!', 'Success Alert', {timeOut: 5000});
          });
      },
  
      editTask: function(task) {
          this.fillTask.name = task.name;
          this.fillTask.last_name = task.last_name;
          this.fillTask.start_date = task.start_date;
          this.fillTask.end_date = task.end_date;
          this.fillTask.department = task.department;
          this.fillTask.id = task.id;
          $("#edit-task").modal('show');
      },
  
      updateTask: function(id) {
          var input = this.fillTask;
          this.$http.put('/vuetasks/'+id,input).then((response) =&gt; { //calls update function in the controller
              this.changePage(this.pagination.current_page);
              this.fillTask = {'name':'','last_name':'','id':'','start_date':'','end_date':'','department':''}
   ; //temporarily blanks out whats being showed
              $("#edit-task").modal('hide'); //hides the modal for visual 
   purposes
              toastr.success('Task Updated Successfully!', 'Success Alert', 
  {timeOut: 5000});
          }, (response) =&gt; {
              this.formErrorsUpdate = response.data;
          });
      },
  
      changePage: function(page) {
          this.pagination.current_page = page;
          this.getVueTasks(page);
      }
  }//end structure storing all these variables making up the vue object
  }); //ending the creation of the new vue object
  </code></pre>
  
  <p>~ Here is a snippet of the relevant portions of my manage-vue.blade.php file (the HTML file that should render what I want to display):</p>
  
  <pre><code>&lt;!-- Task Listing--&gt;
          &lt;table class="table table-bordered"&gt;
              &lt;tr&gt;
                      &lt;th&gt;First Name&lt;/th&gt;
                      &lt;th&gt;Last Name&lt;/th&gt;
                      &lt;th&gt;Start Date&lt;/th&gt;
                      &lt;th&gt;End Date&lt;/th&gt;
                      &lt;th&gt;Department&lt;/th&gt;
                      &lt;th width="200px"&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
  
              &lt;tr v-for="task in tasks"&gt;
                  &lt;td&gt;@{{ task.name }}&lt;/td&gt; &lt;!-- This at symbol explicitely 
  tells blade to skip the double braces and read it as JS--&gt;
                  &lt;td&gt;@{{task.last_name }}&lt;/td&gt; &lt;!--So that only the action 
  gets the buttons below--&gt;
                  &lt;td&gt;@{{ task.start_date }}&lt;/td&gt;
                  &lt;td&gt;@{{ task.end_date }}&lt;/td&gt;
                  &lt;td&gt;@{{ task.department }}&lt;/td&gt;
                  &lt;td&gt;
                      &lt;button class="btn btn-primary" 
  @click.prevent="editTask(task)"&gt;Edit&lt;/button&gt;
                      &lt;button class="btn btn-primary" 
  @click.prevent="confirmDeletion(task)"&gt;Delete&lt;/button&gt; &lt;!--Calls function is 
  JS file to initiate confirmation window--&gt;
                  &lt;/td&gt;
  
              &lt;/tr&gt;
          &lt;/table&gt;
  
  
  &lt;!--Delete Task Modal--&gt; &lt;!--This is specifically the confirmation window 
  after clicking delete button--&gt;
              &lt;div class="modal fade" id="delete-task" tabindex="-1" 
  role="dialog" aria-labelledby="myModalLabel"&gt;
                  &lt;div class="modal-dialog" role="document"&gt;
                      &lt;div class="modal-content"&gt;
                          &lt;div class="modal-header"&gt;
                              &lt;button type="button" class="close" data-
   dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;x&lt;/span&gt;
   &lt;/button&gt;
                              &lt;h4 class="modal-title" 
   id="myModalLabel"&gt;Delete?&lt;/h4&gt;
                          &lt;/div&gt;
  
                          &lt;div class ="modal-body"&gt;
  
                              &lt;form method="POST" enctype="multipart/form-
  data" v-on:submit.prevent="deleteTask(fillTask)"&gt; &lt;!--This now calls the 
  original delete function from JS file after you click submit--&gt;
  
                                  &lt;div class="form-group"&gt;
                                      Are you sure you want to delete 
  @{{fillTask.name}}?
                                  &lt;/div&gt;
  
                                  &lt;div class="form-group"&gt;
                                      &lt;button type="submit" class="btn btn-
  success"&gt;Submit&lt;/button&gt; &lt;button type="button" class="btn btn-danger" data-
  dismiss="modal"&gt;Cancel&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  &lt;!--Edit Task Modal--&gt;
              &lt;div class="modal fade" id="edit-task" tabindex="-1" 
  role="dialog" aria-labelledby="myModalLabel"&gt;
                  &lt;div class="modal-dialog" role="document"&gt;
                      &lt;div class="modal-content"&gt;
                          &lt;div class="modal-header"&gt;
                              &lt;button type="button" class="close" data-
  dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;x&lt;/span&gt;
  &lt;/button&gt;
                              &lt;h4 class="modal-title" id="myModalLabel"&gt;Edit 
  Task: @{{fillTask.name}}&lt;/h4&gt;
                          &lt;/div&gt;
  
                          &lt;div class ="modal-body"&gt;
  
                              &lt;form method="POST" enctype="multipart/form-
  data" v-on:submit.prevent="updateTask(fillTask.id)"&gt;
  
  
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="name"&gt;First Name:&lt;/label&gt;
                                      &lt;input type="text" name="name" 
  class="form-control" v-model="fillTask.name"/&gt;
                                      &lt;span v-if="formErrorsUpdate['name']" 
  class="error text-danger"&gt;@{{ formErrorsUpdate['name'] }}&lt;/span&gt;
  
                                      &lt;br&gt;&lt;/br&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="name"&gt;Last Name:&lt;/label&gt;
                                      &lt;input type="text" name="last_name" 
  class="form-control" v-model="fillTask.last_name"/&gt;
                                      &lt;span v-
  if="formErrorsUpdate['last_name']" class="error text-danger"&gt;@{{ 
  formErrorsUpdate['last_name'] }}&lt;/span&gt;
  
                                  &lt;/div&gt;
  
                                      &lt;br&gt;&lt;/br&gt;
  
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="name"&gt;Start date:&lt;/label&gt;
                                      &lt;input type="text" name="start_date" 
  class="form-control" v-model="fillTask.start_date"/&gt;
                                      &lt;span v-
  if="formErrorsUpdate['start_date']" class="error text-danger"&gt;@{{ 
  formErrorsUpdate['start_date'] }}&lt;/span&gt;
  
                                  &lt;/div&gt;
  
                                      &lt;br&gt;&lt;/br&gt;
  
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="name"&gt;End date:&lt;/label&gt;
                                      &lt;input type="text" name="end_date" 
  class="form-control" v-model="fillTask.end_date"/&gt;
                                      &lt;span v-
  if="formErrorsUpdate['end_date']" class="error text-danger"&gt;@{{ 
  formErrorsUpdate['end_date'] }}&lt;/span&gt;
  
                                  &lt;/div&gt;
  
                                      &lt;br&gt;&lt;/br&gt;
  
                                  &lt;div class="form-group"&gt;    
                                      &lt;label for="name"&gt;Department:&lt;/label&gt;
                                      &lt;input type="text" name="department" 
  class="form-control" v-model="fillTask.department"/&gt;
                                      &lt;span v-
  if="formErrorsUpdate['department']" class="error text-danger"&gt;@{{ 
  formErrorsUpdate['department'] }}&lt;/span&gt;
                                  &lt;/div&gt;
  
                                      &lt;br&gt;&lt;/br
  
                                  &lt;div class="form-group"&gt;
                                      &lt;button type="submit" class="btn btn-
  success"&gt;Submit&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>~ When I run it and it displays in my browser, after clicking the delete button a confirmation window should pop up and ask if the user wants to delete the task for sure. Yet, it doesn't display the task name itself in the header but rather it displays "Are you sure you want to delete {{fillTask.name}}?". I repeatedly traced the way I configured the 'edit' process as a model and it follows the same process. I can't figure out what key piece of information isn't being transferred between my JS file and my HTML/PHP file. I even passed in the Task object properly as well.</p>
  
  <p>Any advice? I would really appreciate any help. Thank you very much! </p>