You're using a combination of Jquery and Vue which can cause issues of compatibility as Jquery doesn't have access to the Vue internal object structure. as Sam stated VueStrap would be a good place to look for a refactoring.
The other option would be to store the Vue Root and use $broadcast to send an event to your form which propagates the data to the model instead of setting the dom objects values.
@section('pageScripts')
<script>
$('#editCountryModal').on('show.bs.modal', function(e) {
var object = {
countryId: link.data('country-id'),
name: link.data('country-name'),
code: link.data('country-code'),
currency_name: link.data('country-currency-name'),
currency_code: link.data('country-currency-code'),
display: link.data('country-display')
};
window.Vm.$broadcast('fillModal', object);
});
</script>
@endsection
where window.Vm is your globally stored root node so your vue initialization would go window.Vm = new Vue({...})
and your component structure would look like this:
<script>
export default {
data() {
return {
formData: {
countryId: '',
name: '',
code: '',
currency_name: '',
currency_code: '',
display: ''
},...
}
},
ready: function() {...},
methods: {...},
events: {
"fillModal": function(object){
this.formData = object;
}
}
}
</script>