Cannot validate form using Vue

I am fairly new to Vue and I have the below code to run, but it gives the ReferenceError: $vAddress is not defined error. I have searched the google but it seems I cannot find any solutions for my problem.

<form class="form-horizontal" role="form">
    <validator name="vAddress">
        <div :class="{'has-error': $vAddress.firstname.required}" class="form-group">
            <label for="firstname" class="control-label">First Name</label>
            <div class="text-left">
                <input
                type="text"
                class="form-control"
                name="firstname"
                v-validate:firstname="['required']"
                v-model="newAddress.firstname">
                <small v-if="$vAddress.firstname.required" class="help-block text-danger">The first name is required</small>
            </div>
        </div>
        <div ...>
    </validator>
</form>

<script type="text/javascript">
    (function() {
      var account = new Vue({
        el: '#checkout-content',
        data: {
          user: {!! json_encode(Auth::user()) !!},
          billingAddress: {!! json_encode($billing_address) !!},
          shippingAddress: {!! json_encode($shipping_address) !!},
          newAddress: {},
          activeAddress: {
            shipping: '',
            billing: '',
          },
          alert: ""
        },
        computed:{
            shipping: function(){
                return !(typeof this.activeAddress.billing == 'undefined' || typeof this.activeAddress.shipping == 'undefined');
            }       

        },
        filters: {
          isExist: function(value){
            if (typeof value === 'undefined') return ' ';
            return value;
          }
        },
        methods: {
          // save new address
          saveAddress: function() {
              // save new address
              if (typeof this.newAddress.key == 'undefined') {
                  if (typeof this.user.data.address == 'undefined')
                      this.$set('user.data.address', []);
                  if (this.newAddress.defaultAddress){
                      this.clearDefaultAddress();
                  }
                  this.user.data.address.push(this.newAddress);
              }else{
                  var key = this.newAddress.key;
                  if (this.newAddress.defaultAddress){
                      this.clearDefaultAddress();
                  }
                  this.user.data.address[key] = this.newAddress;
              }
              this.$http.post("", {
                  address:this.user.data.address
              }).then((response) => {
                  this.user.data.address = response.body.user.data.address;
                  $.notify({
                      message: response.body.message
                  },{
                   type: 'success',
                   animate: {
                    enter: 'animated fadeInDown',
                    exit: 'animated fadeOutUp'
                   },
                });
                // reset values
                $('#new-address').modal('hide');
                this.newAddress = '';
              }, (response) => { });
          },
          // update address
          updateAddress: function(address, index) {
              this.newAddress = address;
              this.newAddress.key = index;
              this.user.data.address[index] = '';
              $('#new-address').modal('show');
          },
          clearDefaultAddress: function(){
              // clear all default values to none
              for (var i = 0; i < this.user.data.address.length; i++) {
                  this.user.data.address[i].defaultAddress = 0;
              }
          },
          shippingProccess: function(){
            if(typeof this.activeAddress.billing == 'undefined' || typeof this.activeAddress.shipping == 'undefined') {
                this.alert.error = true;
            }else{
                this.alert.loading = true;
                this.$http.post('', {
                    billing: this.activeAddress.billing,
                    shipping: this.activeAddress.shipping
                }).then((response) => {
                    // PROSSED TO NEXT STEP
                    window.location = ''; 
                }, (response) => {
                });
            }
          }
        },
        ready() {
          // set default address
            this.activeAddress.billing = this.billingAddress.defaultAddress
            this.activeAddress.shipping = this.shippingAddress.defaultAddress
        }
     });
   })();
</script>

Questions:

1. What is my problem?
2. How can I fix the error?

Note:

My Vue version is 2.6.10.

via Chebli Mohamed