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

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.