php - Laravel Setting form value="old('input')" with Vue JS 2 -

i have simple form calculator amount being charger including shipping , tax. if form submitted , comes errors, how display old input value field of form vue js ? instance values coming correct not displayed in form.

view

<div class="form-group">     <label for="totalamount">total amount</label>     <div class="input-group">         <div class="input-group-addon">$</div>         <input type="totalamount" class="form-control" id="totalamount" name="totalamount" value="{{old('totalamount')}}" v-model="totalamount" v-on:change="gettotal" placeholder="0.00" required>     </div> </div> <div class="form-group">     <label for="shipamount">shipping amount</label>     <div class="input-group">         <div class="input-group-addon">$</div>         <input type="shipamount" class="form-control" id="shipamount" name="shipamount" value="{{ old('shipamount') }}" v-model="shipamount" v-on:change="gettotal" placeholder="0.00">     </div> </div> <div class="form-group">     <label for="taxrate">tax rate</label>     <div class="input-group">         <div class="input-group-addon">%</div>         <input type="taxrate" class="form-control" id="taxrate" name="taxrate" value="{{ old('taxrate') }}" v-model="taxrate" v-on:change="gettotal" placeholder="0.00">     </div> </div> <div class="widget-body text-center">     <h4 class="m-b-md">total amount $ @{{ combinedamount }}</h4> </div> 

js file

    new vue({     el: '#app-content',     data: {         billsameasship: '',         ishidden: 'true',         totalamount: '',         shipamount: '',         taxrate: '',         combinedamount: ''         },     computed: {         totalamount2: function () {             return this.totalamount = {{ old('totalamount') ?? 0 }};         },         shipamount2: function () {             return this.shipamount = {{ ( old('shipamount') ?? 0 ) }};         },         taxrate2: function () {             return this.taxrate = {{ ( old('taxrate') ?? 0 ) }};         }     },     beforeupdate() {         this.gettotal()         this.totalamount = this.totalamount2;     },     methods: {         onchange: function() {             if(this.billsameasship == 'false'){              this.ishidden = !this.ishidden;             }             else {                 this.ishidden = boolean('true');             }         },         checknan: function() {             if(isnan(parsefloat(this.totalamount))){                 this.totalamount = 0             }             if(isnan(parsefloat(this.shipamount))){                 this.shipamount = 0             }             if(isnan(parsefloat(this.taxrate))){                 this.taxrate = 0             }         },         gettotal: function() {             this.checknan();             this.combinedamount = (parsefloat(this.totalamount) + parsefloat(this.shipamount)) * (1 + (parsefloat(this.taxrate /100)));         }     }     }) </script> 

because using v-model bind inputs model, not need use laravel's value="{{ old('input') }}". need here remove value attributes inputs , clear out entire computed function. in logic, once have submitted data, need clear / reset editable inputs.

new vue({    el: "#app-content",    data: {      billsameasship: "",      ishidden: "true",      totalamount: "",      shipamount: "",      taxrate: "",      combinedamount: ""    },    beforeupdate() {      this.gettotal()      this.totalamount = this.totalamount2;    },    methods: {      onchange: function() {        if (this.billsameasship == "false") {          this.ishidden = !this.ishidden;        } else {          this.ishidden = boolean("true");        }      },      checknan: function() {        if (isnan(parsefloat(this.totalamount))) {          this.totalamount = 0;        }        if (isnan(parsefloat(this.shipamount))) {          this.shipamount = 0;        }        if (isnan(parsefloat(this.taxrate))) {          this.taxrate = 0;        }      },      gettotal: function() {        this.checknan();        this.combinedamount =          (parsefloat(this.totalamount) + parsefloat(this.shipamount)) *          (1 + parsefloat(this.taxrate / 100));      }    }  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>  <div id="app-content">    <div class="container">      <div class="row">        <div class="col-sm-4">          <div class="form-group">            <label for="totalamount">total amount</label>            <div class="input-group">              <div class="input-group-addon">$</div>              <input type="totalamount" class="form-control" id="totalamount" name="totalamount" v-model="totalamount" v-on:change="gettotal" placeholder="0.00" required>            </div>          </div>          <div class="form-group">            <label for="shipamount">shipping amount</label>            <div class="input-group">              <div class="input-group-addon">$</div>              <input type="shipamount" class="form-control" id="shipamount" name="shipamount" v-model="shipamount" v-on:change="gettotal" placeholder="0.00">            </div>          </div>          <div class="form-group">            <label for="taxrate">tax rate</label>            <div class="input-group">              <div class="input-group-addon">%</div>              <input type="taxrate" class="form-control" id="taxrate" name="taxrate" v-model="taxrate" v-on:change="gettotal" placeholder="0.00">            </div>          </div>          <div class="widget-body text-center">            <h4 class="m-b-md">total amount $ {{ combinedamount }}</h4>          </div>        </div>      </div>    </div>  </div>