[Vue warn]: Injection "$validator" not found Error on attempt to use vee-validate - vuejs2

Question

I'm new to VueJS so I decided to use it for a small project. I needed to validate client entries..I googled and found vee-validate would be appropriate for my style of creating a component so I used the style found in this post https://jsfiddle.net/787g7q0e/ Below are the steps I took to reproduce the error I got.
First, I installed the vee-validate via a CDN link like so:
<script src="~/Scripts/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
<script src="~/Scripts/FrontEnd/Layout/Main.js"></script>
in my Layout file for APS.NET MVC
Secondly, following https://jsfiddle.net/787g7q0e/, I registered and used vee-validate like so:
const config = {
aria: false,
classNames: {},
classes: false,
delay: 0,
errorBagName: 'errors',
events: 'input|blur',
fieldsBagName: 'fields',
i18n: null,
i18nRootKey: 'validations',
inject: true,
locale: 'en',
strict: true,
validity: false
}
Vue.use(VeeValidate, config);
Vue.component('loan-calc', {
template: `<div class="row calc-holder" data-aos="fade-up" data-aos-delay="800">
<form>
<div class="wrap">
<div class="card_one">
<label for="">Loan Amount</label>
<p>The amount you want to take</p>
<div class="loan-amount-form">
<i class="icon naira">
<svg width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4"
d="M14.814 5.764H13.302V7.726H14.814V9.22H13.302V13H11.286L8.244 9.22H4.716V13H2.232V9.22H0.684V7.726H2.232V5.764H0.684V4.288H2.232V0.219999H4.158L7.38 4.288H10.818V0.237999H13.302V4.288H14.814V5.764ZM4.716 7.726H7.056L5.472 5.764H4.716V7.726ZM10.116 7.726H10.818V5.764H8.55L10.116 7.726Z"
fill="#03293D" />
</svg>
</i>
<input
type="text"
name="LoanAmount"
v-validate="'required'"
v-model="LoanAmount"/>
<i class="icon pencil">
<svg width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4"
d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM13.1035 5.0684C13.2435 5.0684 13.3833 5.1224 13.4883 5.2324L14.7676 6.5117C14.9876 6.7217 14.9876 7.0732 14.7676 7.2832L13.7676 8.2812L11.7188 6.2324L12.7188 5.2324C12.8237 5.1224 12.9635 5.0684 13.1035 5.0684ZM11.1289 6.8145L13.1875 8.8711L7.12891 14.9316H5.06836V12.8711L11.1289 6.8145Z"
fill="#03293D" />
</svg>
</i>
</div>
</div>
</div>
</form>
</div>`,
data() {
return {
LoanAmount: null,
LoanTenure: null,
RepaymentType: null,
Repayment: null
}
}
})
From the above template, I tried using vee-validate to validate the required field like so:
<input
type="text"
name="LoanAmount"
v-validate="'required'"
v-model="LoanAmount"/>
<i class="icon pencil">
<svg width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4"
d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM13.1035 5.0684C13.2435 5.0684 13.3833 5.1224 13.4883 5.2324L14.7676 6.5117C14.9876 6.7217 14.9876 7.0732 14.7676 7.2832L13.7676 8.2812L11.7188 6.2324L12.7188 5.2324C12.8237 5.1224 12.9635 5.0684 13.1035 5.0684ZM11.1289 6.8145L13.1875 8.8711L7.12891 14.9316H5.06836V12.8711L11.1289 6.8145Z"
fill="#03293D" />
Kindly help or show me how I can resolve the above error and use vee-validate effectively.