title: How to reload a page in laravel vue after save?
body: <p>I'm trying to reload the page after save in laravel and vue.js, I do this in "fetchGoals". Here is what I've tried and it works the first time, it saves the goal and refreshes the page. When I try to add another goal then the save button no longer works and the page will not refresh. Same goes for the edit button, it will work the first time and then the second time it will not. Regardless if is save or edit, the same problem exists where I can only perform one function where the pages refreshes. Any ideas what I'm doing wrong?</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-8 col-md-offset-2"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;form @submit.prevent="addGoal" class="mb-3"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;input type="text" class="form-control" placeholder="Goal" v-model="goal.title"&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                              &lt;textarea class="form-control" placeholder="Description" v-model="goal.description"&gt;
  
                              &lt;/textarea&gt;
                              &lt;/div&gt;
                              &lt;button type="submit" class="btn btn-primary btn-block"&gt;Add New Goal&lt;/button&gt;
                          &lt;/form&gt;
                          &lt;button @click="clearForm()" class="btn btn-danger btn-block"&gt;Cancel&lt;/button&gt;
                          &lt;div class="panel-body"&gt;
  
                              &lt;table class="table"&gt;
                                  &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th scope="col"&gt;id&lt;/th&gt;
                                      &lt;th scope="col"&gt;Title&lt;/th&gt;
                                      &lt;th scope="col"&gt;Description&lt;/th&gt;
                                  &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tbody&gt;
                                  &lt;tr v-for="goal in goals" v-bind:key="goal.id"&gt;
                                      &lt;td&gt;{{goal.id}}&lt;/td&gt;
                                      &lt;td&gt;{{goal.title}}&lt;/td&gt;
                                      &lt;td&gt;{{goal.description}}&lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;button @click="editGoal(goal)" class="btn btn-warning btn-xs"&gt;Edit&lt;/button&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;button @click="deleteGoal(goal.id)" class="btn btn-danger btn-xs"&gt;Delete
                                          &lt;/button&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;/tbody&gt;
                              &lt;/table&gt;
                              &lt;nav aria-label="Page navigation example"&gt;
                                  &lt;ul class="pagination"&gt;
                                      &lt;li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item"&gt;
                                          &lt;a class="page-link" href="#" @click="fetchGoals(pagination.prev_page_url)"&gt;Previous&lt;/a&gt;
                                      &lt;/li&gt;
  
                                      &lt;li class="page-item disabled"&gt;
                                          &lt;a class="page-link text-dark" href="#"&gt;Page {{ pagination.current_page }} of {{
                                              pagination.last_page }}&lt;/a&gt;
                                      &lt;/li&gt;
  
                                      &lt;li v-bind:class="[{disabled: !pagination.next_page_url}]" class="page-item"&gt;
                                          &lt;a class="page-link" href="#"
                                             @click="fetchGoals(pagination.next_page_url)"&gt;Next&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/nav&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data() {
              return {
                  goals: [],
                  goal: {
                      id: '',
                      title: '',
                      description: '',
                      user_id: 1,
                  },
                  goal_id: '',
                  pagination: {},
                  edit: false
              };
          },
  
          created() {
              this.fetchGoals();
          },
  
          methods: {
              //gets the data and the pagination
              fetchGoals(page_url) {
                  let vm = this;
                  page_url = page_url || '/api/goals';
  
                  fetch(page_url)
                      .then(res =&gt; res.json())
                      .then(res =&gt; {
                          this.goals = res.data;
                          //this comes from res and res is the data from the Jason
                          vm.makePagination(res.meta, res.links);
                      })
                      .catch(err =&gt; console.log(err));
              },
  
              addGoal() {
                  if (this.edit === false) {
                      // Add
                      fetch(`/api/goal`, {
                          method: 'post',
                          body: JSON.stringify(this.goal),
                          headers: {
                              'content-type': 'application/json',
                          }
                      })
                          .then(res =&gt; res.json())
                          .then(data =&gt; {
                              this.clearForm();
                              alert('Article Added');
                              this.fetchGoals();
                          })
                          .catch(err =&gt; console.log(err));
                  } else {
                      //Edit save
                      fetch(`/api/goal`, {
                          method: 'put',
                          body: JSON.stringify(this.goal),
                          headers: {
                              'content-type': 'application/json',
                          }
                      })
                          .then(res =&gt; res.json())
                          .then(data =&gt; {
                              this.clearForm();
                              alert('Article Added');
                              this.fetchGoals();
                          })
                          .catch(err =&gt; console.log(err));
                  }
              },
              editGoal(goal) {
                  this.edit = true;
                  this.goal.id = goal.id;
                  this.goal.goal_id = goal.id;
                  this.goal.title = goal.title;
                  this.goal.description = goal.description;
              },
              clearForm() {
                  this.edit = false;
                  this.goal.id = null;
                  this.goal.goal_id = null;
                  this.goal.title = '';
                  this.goal.description = '';
                  this.goal.user_id = null;
              }
          }
      };
  
  &lt;/script&gt;
  </code></pre>