title: VueJS how to rerender a component
body: <p>I have a VueJS component which populates a table via ajax, than I have a modal form inside component which creates new entries in table. </p>
  
  <p>On modal hide I want to update the table to show new entries.</p>
  
  <pre><code>export default {
          created() {
              axios.get('/api/v1/customers')
                  .then(response =&gt; {
                      this.customers = response.data;
                  });
          },
  
          methods: {
  
              store() {
                  this.form.errors = [];
  
                  axios.post('/api/v1/customers', this.form)
                      .then(response =&gt; {
                          this.form.name = '';
                          this.form.scopes = [];
                          this.form.errors = [];
  
                          $('#modal-edit-client').modal('hide');
                          this.$forceUpdate();
                      })
                      .catch(error =&gt; {
  
                          console.log(error)
                          /*if (typeof error.response.data === 'object') {
                              this.form.errors = _.flatten(_.toArray(error.response.data));
                          } else {
                              this.form.errors = ['Something went wrong. Please try again.'];
                          }*/
                      });
              },
  
              newUser: function () {
                  $('#modal-edit-client').modal('show');
              },
  
              edit: function () {
                  alert('edit modal')
              }
          },
  
          data() {
              return {
                  customers: {},
                  alert: {
                      show: false,
                      type: null,
                      title: null,
                      message: null,
                  },
                  form: {
                      scopes: [],
                      errors: []
                  }
              };
          }
      }
  </code></pre>
  
  <p>I tried to use <code>$forceUpdate()</code> but does not seems to work</p>
  
  <p>output template</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="row" v-cloak&gt;
          &lt;div class="col-md-12 "&gt;
              &lt;div class="panel panel-default custom-panel"&gt;
  
                  &lt;div class="panel-heading"&gt;
                      &lt;strong&gt;Customers&lt;/strong&gt;
                      &lt;div id="custom-search-input"&gt;
                          &lt;div class="input-group col-md-12"&gt;
                              &lt;input v-on:keyup.enter="filter" type="text" class="form-control input-sm" placeholder="Search Customer" /&gt;
                              &lt;span class="input-group-btn"&gt;
                          &lt;button class="btn btn-info btn-lg" type="button"&gt;
                              &lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                      &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;a class="btn icon-btn btn-success" id="new__item" href="#" @click="newUser"&gt;
                          &lt;span class="glyphicon btn-glyphicon glyphicon-plus img-circle text-success"&gt;&lt;/span&gt; Add Customer
                      &lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class="panel-body"&gt;
                      &lt;table class="table table-condensed"&gt;
                          &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;th style="width: 10px"&gt;#&lt;/th&gt;
                              &lt;th&gt;Firma&lt;/th&gt;
                              &lt;th&gt;Strasse&lt;/th&gt;
                              &lt;th&gt;PLZ&lt;/th&gt;
                              &lt;th&gt;Ort&lt;/th&gt;
                              &lt;th&gt;Tel&lt;/th&gt;
                              &lt;th&gt;Status&lt;/th&gt;
                              &lt;th&gt;Actions&lt;/th&gt;
                          &lt;/tr&gt;
  
                          &lt;tr v-for="customer in customers"&gt;
                              &lt;td&gt;{{ customer.id }}&lt;/td&gt;
                              &lt;td&gt;{{ customer.customer_name }}&lt;/td&gt;
                              &lt;td&gt;{{ customer.customer_street }}&lt;/td&gt;
                              &lt;td&gt;{{ customer.customer_plz }}&lt;/td&gt;
                              &lt;td&gt;{{ customer.customer_city }}&lt;/td&gt;
                              &lt;td&gt;{{ customer.customer_telephone }}&lt;/td&gt;
                              &lt;td&gt;&lt;span class="badge bg-green"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/td&gt;
                              &lt;td class="actions"&gt;
                                  &lt;a href=""&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;&lt;/a&gt;
                                  &lt;a href=""&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;&lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Edit Client Modal --&gt;
          &lt;div class="modal fade" id="modal-edit-client" tabindex="-1" role="dialog"&gt;
              &lt;div class="spinner"&gt;&lt;/div&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button " class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
  
                          &lt;h4 class="modal-title"&gt;
                              Add Customer
                          &lt;/h4&gt;
                      &lt;/div&gt;
  
                      &lt;div class="modal-body"&gt;
                          &lt;!-- Form Errors --&gt;
                          &lt;!--&lt;div class="alert alert-danger" v-if="alert" &gt;
                              &lt;p&gt;&lt;strong&gt;Whoops!&lt;/strong&gt; Something went wrong!&lt;/p&gt;
                              &lt;br&gt;
                          &lt;/div&gt;--&gt;
  
                          &lt;!-- Edit Client Form --&gt;
  
                          &lt;form class="form-horizontal" id="modal-create-customer"  role="form" method="POST" action=""&gt;
  
                              &lt;div class="row"&gt;
                                  &lt;div class="col-xs-12"&gt;
                                      &lt;label for="customer_name" class="control-label"&gt;Firmenbezeichnung&lt;/label&gt;
                                      &lt;input id="customer_name" type="text" class="form-control" v-model="form.customer_name" name="customer_name" value="" required autofocus&gt;
  
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-xs-6"&gt;
                                      &lt;label for="sex" class="control-label"&gt;Anrede&lt;/label&gt;
                                      &lt;select v-model="form.customer_contact_sex" name="title" id="sex" class="form-control"&gt;
                                          &lt;option value="Herr"&gt;Herr&lt;/option&gt;
                                          &lt;option value="Frau"&gt;Frau&lt;/option&gt;
                                      &lt;/select&gt;
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-xs-6"&gt;
                                      &lt;label for="title" class="control-label"&gt;Title&lt;/label&gt;
                                      &lt;select v-model="form.customer_contact_title" name="title" id="title" class="form-control"&gt;
                                          &lt;option value=""&gt;No title&lt;/option&gt;
                                          &lt;option value="Dr."&gt;Dr.&lt;/option&gt;
                                          &lt;option value="Prof."&gt;Prof.&lt;/option&gt;
                                      &lt;/select&gt;
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="row"&gt;
                                  &lt;div class="col-xs-6"&gt;
                                      &lt;label for="name" class="control-label"&gt;First Name&lt;/label&gt;
  
                                      &lt;input id="name" type="text" class="form-control" v-model="form.customer_first_name" name="customer_name" value="" required autofocus&gt;
  
  
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-xs-6"&gt;
                                      &lt;label for="email" class="control-label"&gt;Last Name&lt;/label&gt;
  
                                      &lt;input id="email" type="text" class="form-control" v-model="form.customer_last_name" name="customer_last_name" value="" required&gt;
  
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-xs-6"&gt;
                                      &lt;label for="street" class="control-label"&gt;Street&lt;/label&gt;
  
                                      &lt;input id="street" type="text" class="form-control" v-model="form.customer_street" name="customer_street" value="" required&gt;
  
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-xs-2"&gt;
                                      &lt;label for="plz" class="control-label"&gt;PLZ&lt;/label&gt;
  
                                      &lt;input id="plz" type="text" class="form-control" v-model="form.customer_plz" name="customer_plz" value="" required&gt;
  
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-xs-4"&gt;
                                      &lt;label for="city" class="control-label"&gt;City&lt;/label&gt;
  
                                      &lt;input id="city" type="text" class="form-control" v-model="form.customer_city" name="customer_city" value="" required&gt;
  
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-xs-6"&gt;
                                      &lt;label for="customer_telephone" class="control-label"&gt;Tel.&lt;/label&gt;
  
                                      &lt;input id="customer_telephone" type="text" class="form-control" v-model="form.customer_telephone" name="customer_telephone" value="" required&gt;
  
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-xs-6"&gt;
                                      &lt;label for="customer_fax" class="control-label"&gt;Fax.&lt;/label&gt;
  
                                      &lt;input id="customer_fax" type="text" class="form-control" name="customer_fax" value="" required&gt;
  
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-xs-6"&gt;
                                      &lt;label for="customer_mobile" class="control-label"&gt;Mobil&lt;/label&gt;
  
                                      &lt;input id="customer_mobile" type="text" class="form-control" name="customer_mobile" value="" required&gt;
  
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-xs-6"&gt;
                                      &lt;label for="customer_email" class="control-label"&gt;E-Mail.&lt;/label&gt;
  
                                      &lt;input id="customer_email" type="text" class="form-control" name="customer_email" value="" required&gt;
  
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-xs-12"&gt;
                                      &lt;label for="customer_note" class="control-label"&gt;Notiz&lt;/label&gt;
  
                                      &lt;textarea name="csutomer_note" id="customer_note" class="form-control"&gt;&lt;/textarea&gt;
                                      &lt;span class="help-block"&gt;
                                          &lt;strong&gt;&lt;/strong&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
  
                      &lt;!-- Modal Actions --&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
  
                          &lt;button type="button" class="btn btn-primary" @click="store"&gt;
                              Register
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>