Привязка значений таблицы базы данных внутри формы модального компонента

В моем приложении Laravel 5.3 у меня есть модальный компонент, который отображается, когда пользователь нажимает кнопку для редактирования данных.

Загрузка модального окна выполняется с помощью следующего кода:

<a
href="#"class="btn btn-sm btn-info"data-toggle="modal"data-target="#editCountryModal"data-country-id="{{ countries['id'] }}"data-country-code="{{ countries['code'] }}"data-country-name="{{ countries['name'] }}"data-country-currency-code="{{ countries['currency_code'] }}"data-country-currency-name="{{ countries['currency_name'] }}"data-country-display="{{ countries['display'] }}">
<i class="fa fa-lg fa-pencil"></i>
</a>

Приведенный выше код загружает следующую форму, которая находится внутри модального компонента.

<template>
<div class="errors"></div>

<form method="POST" @submit.prevent="updateCountry">
<div class="form-group">
<label for="name">Id:</label>
<input
type="text"name="id"id="countryId"class="inputText"autofocus="autofocus"placeholder="1"readonly="readonly"v-model="formData.countryId"/>
</div>

<div class="form-group">
<label for="name">Name:</label>
<input
type="text"name="name"id="name"class="inputText"placeholder="Eg. India"required="required"v-model="formData.name"/>
<div class="error">
<span v-if="formErrors['name']"class="text-danger">
{{ formErrors['name'] }}
</span>
</div>
</div>

<div class="form-group">
<label for="code">Code:</label>
<input
type="text"name="code"id="code"class="inputText"placeholder="Eg. IND"required="required"v-model="formData.code"/>
<div class="error">
<span v-if="formErrors['code']"class="text-danger">
{{ formErrors['code'] }}
</span>
</div>
</div>

<div class="form-group">
<label for="currency_name">Currency Name:</label>
<input
type="text"name="currency_name"id="currency_name"class="inputText"placeholder="Eg. Indian National Rupee"required="required"v-model="formData.currency_name"/>
<div class="error">
<span v-if="formErrors['currency_name']"class="text-danger">
{{ formErrors['currency_name'] }}
</span>
</div>
</div>

<div class="form-group">
<label for="currency_code">Currency Code:</label>
<input
type="text"name="currency_code"id="currency_code"class="inputText"placeholder="Eg. INR"required="required"v-model="formData.currency_code"/>
<div class="error">
<span v-if="formErrors['currency_code']"class="text-danger">
{{ formErrors['currency_code'] }}
</span>
</div>
</div>

<div class="form-group">
<label for="display">Display:</label>
<select name="display"id="display"class="selectText"required="required"v-model="formData.display">
<option value="Disabled" selected="selected">Disabled</option>
<option value="Enabled">Enabled</option>
</select>
<div class="error">
<span v-if="formErrors['display']"class="text-danger">
{{ formErrors['display'] }}
</span>
</div>
</div>

<button type="submit" class="button button--teal">Edit</button>
</form>
</template>
<script>
export default {
data() {
return {
formData: {
countryId: '',
name: '',
code: '',
currency_name: '',
currency_code: '',
display: ''
},
formErrors: {},
allCountries: []
}
},

ready: function() {
this.fetchAllCountries();
},

methods: {
notify: function(mType, mTitle, mMessage, nDelay) {
$.iGrowl({
type: mType == 'success' ? 'success' : 'error',
title: mTitle,
message: mMessage,
icon: mType == 'success' ? 'steadysets-checkmark !' : 'feather-cross',
delay: nDelay,
animShow: 'bounceInRight',
animHide: 'bounceOutRight'
});
},

fetchAllCountries: function() {
$.get('/api/all-countries', function(countries) {
this.allCountries = countries;
}.bind(this), 'json');
},

updateCountry: function(e) {
$('.button').addClass('button--disabled')
.html('<i class="fa fa-spinner fa-spin"></i> Editing...');
$(document).find('i.fa.fa-spinner.fa-spin').show();

this.$http
.post('/admin/settings/update-country/' + this.formData.countryId, this.formData)
.then((result) => {
var res = result.data;

$('.button').removeClass('button--disabled').html('Edit');
$(document).find('i.fa.fa-spinner.fa-spin').hide();

// 3000 is the number of seconds before disappearing
this.notify(res.status, res.title, res.message, 3000);
},
(err) => {
$('.button').removeClass('button--disabled').html('Edit');
$(document).find('i.fa.fa-spinner.fa-spin').hide();

if ( err.status === 422 ) {
var errors = err.data;
this.formErrors = errors;

}
});

return false;
}
}
}
</script>

Что происходит, когда я отправляю вышеупомянутую форму, она отправляется без каких-либо значений. Это означает, что я получаю пустую строку для всех полей выше. Но, если я перейду к каждому полю вручную, оно будет отправлено с правильными значениями поля.

Я хочу, чтобы всякий раз, когда пользователь просто нажимал кнопку отправки, значения обновлялись. Это означает, что пользователь не должен нажимать на каждое поле, чтобы vue мог его распознать.

РЕДАКТИРОВАТЬ 1:

Вот как я называю модальный:

@section('pageScripts')
<script>
$('#editCountryModal').on('show.bs.modal', function(e) {
var link = $(e.relatedTarget);

var id            = link.data('country-id');
var name          = link.data('country-name');
var code          = link.data('country-code');
var currency_name = link.data('country-currency-name');
var currency_code = link.data('country-currency-code');
var display       = link.data('country-display');

var modal = $(this);
modal.find('.modal-title').html('Edit Country: ' + name);
modal.find('.modal-body #countryId').val(id);
modal.find('.modal-body #name').val(name);
modal.find('.modal-body #code').val(code);
modal.find('.modal-body #currency_name').val(currency_name);
modal.find('.modal-body #currency_code').val(currency_code);
modal.find('.modal-body #display').val(display);
});

</script>
@endsection

Суть вопроса: Как отправить значения по умолчанию (загруженные в модальное окно) формы, если пользователь просто нажимает кнопку отправки?

Любая помощь высоко ценится. Благодарю.