Vuejs: How to reset Input boxes inside Vue Component - vue.js

Question

Whenever I open the component, the previous information that I've typed still remains in the Input Boxes. I have three input box. One is not inside a form tag and the other two are inside a form tag. How do we clear the Input Boxes when I open the component? I tried using this.form.reset(); but it does not work.
<!-- left column -->
<div class="col">
<div class="form-group">
<label>Scan Item</label>
<input type="search" class="form-control is-warning" id="exampleSearchItemBarcode" placeholder="Item Barcode"
#keyup.enter="searchloanItem"
v-model="itemvmodel"
autocomplete="off">
</div>
</div>
</div>
<!-- right column -->
<div class="col">
<div class="card-body">
<form #submit.prevent="createLoan">
<div class="form-group" v-for="loanpatron in loanpatrons" :key="loanpatron.id">
<input type="text" name="patron_id"
v-model="form.patron_id"
class="form-control text-uppercase"
:class="{ 'is-invalid': form.errors.has('patron_id') }"
autocomplete="off">
<has-error :form="form" field="patron_id"></has-error>
</div>
<!-- textarea -->
<div class="form-group">
<label>Date Loaned</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
</div>
<input v-model="form.dateloaned" type="date" name="dateloaned" class="form-control" :class="{ 'is-invalid': form.errors.has('dateloaned') }"
data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask="" im-insert="false">
</div>
<has-error :form="form" field="dateloaned"></has-error>
</div>
<div class="row">
<div class="col">
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
export default {
mounted() {
this.form.reset();
}
}
</script>