Sending Old Data back to Vue Component - laravel

Question

I'm trying to figure out how I can set up this Vue component so that if there is an error in my backend validation from Laravel then I can save the inputs and when it redirects back to the create page then auto-populate with the old data.
As of right now it's not sending the old data to the prop for my component. Is there something I'm doing wrong?
Blade File
<component name="{{ old('name') }}" locationType="{{ old('location_type') }}" paymentType="{{ old('payment_type') }}"></component>
Vue Component
<template>
<div>
<div>
<p class="mbxs"><b>Choose Location Type <span style="color: red">*</span></b></p>
<label class="custom-control custom-radio" v-for="choice in choices">
<input name="location_type" type="radio" v-model="chosen" :value="choice" class="custom-control-input" required>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">{{ choice }}</span>
</label>
</div>
<template v-if=" chosen == 'Residential' ">
<div class="row">
<div class="col-12 col-sm-6">
<div class="form-group form-group-required">
<label for="name" class="control-label">Last Name</label>
<input class="form-control" required name="last_name" type="text">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group form-group-required">
<label for="name" class="control-label">First Name</label>
<input class="form-control" required name="first_name" type="text">
</div>
</div>
</div>
</template>
<template v-if=" chosen == 'Commercial' ">
<div class="form-group form-group-required">
<label for="name" class="control-label">Name</label>
<input class="form-control" required name="name" type="text">
</div>
</template>
</div>
</template>
<script>
module.exports = {
http: {
headers: {
'X-CSRF-TOKEN': window.Laravel.csrfToken
}
},
props: [ 'name', 'locationType', 'paymentType' ],
data: function(){
return {
name: '',
locationType: '',
locationName: '',
paymentType: '',
insuranceType: '',
choices: [ 'Commercial', 'Residential'],
chosen: ''
};
}
}
</script>

Answer 1

Well you're defining the props this.name, this.locationType, this.PaymentType, then you're assigning them as empty in your data declaration, so you have a collision.
Given your architecture, its not the most elegant, but it will probably do:
props: [ 'name', 'locationType', 'paymentType' ],
created: function() {
this.form.name = this.name;
this.form.locationType = this.locationType;
this.form.paymentType = this.paymentType;
},
data: function() {
form: {
name: '',
locationType: '',
locationName: '',
paymentType: '',
insuranceType: '',
choices: [ 'Commercial', 'Residential'],
chosen: ''
}
}
We've namespaced our data to form and assign the values from our properties to the form namespace.
Update your bindings as such to v-model="form.name" etc.