VueJS how to rerender a component - vue.js

Question

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

Answer 1

As said in the comments, your code looks fine except that you're not actually updating the customers property with anything.
When you're performing the XHR request with Axios, you need to use the response to populate the component, which will automatically update the relevant DOM.
Here is the relevant part of your code that you should modify:
axios.post('/api/v1/customers', this.form)
.then(response => {
this.form.name = '';
this.form.scopes = [];
this.form.errors = [];
// Set the component's customers property to what you get
// in the response
this.customers = response.data.customers;
$('#modal-edit-client').modal('hide');
// You don't need to forceUpdate as Vue will take care of
// rerendering the relevant parts of the DOM
// this.$forceUpdate();
})
Also, considering you're expecting an array of customers to render the table, you should set the customers default value accordingly:
data() {
return {
customers: []
// ...
};
}